feat: enabling type imports directly from @carbon/react (#18301)

* feat: types addition to index.ts

* feat: exports 2

* feat: added type exports for many comps

* feat: new type interface exports

* feat: added more interface exports

* feat: completed the types interface exports

* fix: added fragmet to button

* chore: format

packages/react/package.json

@@ -4,6 +4,7 @@
   "version": "1.74.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "module": "es/index.js",
   "repository": {
     "type": "git",

packages/react/src/components/AILabel/index.tsx

@@ -127,7 +127,7 @@ const propMappingFunction = (deprecatedValue) => {
   return mapPopoverAlignProp(deprecatedValue);
 };
 
-interface AILabelProps {
+export interface AILabelProps {
   AILabelContent?: React.ReactNode;
   aiText?: string;
   aiTextLabel?: string;

packages/react/src/components/AISkeleton/AISkeletonIcon.tsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { SkeletonIcon } from '../SkeletonIcon';
 
-interface AISkeletonIconProps {
+export interface AISkeletonIconProps {
   /**
    * Specify an optional className to add.
    */

packages/react/src/components/AISkeleton/AISkeletonText.tsx

@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { SkeletonText } from '../SkeletonText';
 
-interface AISkeletonTextProps {
+export interface AISkeletonTextProps {
   /**
    * Specify an optional className to be applied to the container node.
    */

packages/react/src/components/Accordion/Accordion.Skeleton.tsx

@@ -12,7 +12,7 @@ import { ChevronRight } from '@carbon/icons-react';
 import SkeletonText from '../SkeletonText';
 import { usePrefix } from '../../internal/usePrefix';
 
-interface AccordionSkeletonProps {
+export interface AccordionSkeletonProps {
   /**
    * Specify the alignment of the accordion heading
    * title and chevron.

packages/react/src/components/Accordion/AccordionItem.tsx

@@ -25,7 +25,7 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { AccordionContext } from './AccordionProvider';
 
-interface AccordionItemProps {
+export interface AccordionItemProps {
   /**
    * Specify an optional className to be
    * applied to the container node.
@@ -90,7 +90,7 @@ interface AccordionItemProps {
   handleAnimationEnd?: AnimationEventHandler<HTMLElement>;
 }
 
-interface AccordionToggleProps {
+export interface AccordionToggleProps {
   'aria-controls'?: AriaAttributes['aria-controls'];
   'aria-expanded'?: AriaAttributes['aria-expanded'];
   className?: string;

packages/react/src/components/AspectRatio/AspectRatio.tsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React, { PropsWithChildren, ReactHTML } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-interface AspectRatioProps {
+export interface AspectRatioProps {
   /**
    * Provide a custom component or string to be rendered as
    * the outermost node of the component. This is useful if you want

packages/react/src/components/ClassPrefix/index.tsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React, { PropsWithChildren } from 'react';
 import { PrefixContext } from '../../internal/usePrefix';
 
-interface ClassPrefixProps {
+export interface ClassPrefixProps {
   /**
    *   The value used to prefix the CSS selectors
    *   used by Carbon components.

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -152,7 +152,7 @@ const findHighlightedIndex = <ItemType,>(
 
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 
-interface OnChangeData<ItemType> {
+export interface OnChangeData<ItemType> {
   selectedItem: ItemType | null | undefined;
   inputValue?: string | null;
 }
@@ -164,13 +164,14 @@ interface OnChangeData<ItemType> {
  * because those components aren't Typescript.  (If you try, TranslationKey
  * ends up just being defined as "string".)
  */
-type TranslationKey =
+export type TranslationKey =
   | 'close.menu'
   | 'open.menu'
   | 'clear.all'
   | 'clear.selection';
 
-type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+export type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+
 export interface ComboBoxProps<ItemType>
   extends Omit<InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>,
     TranslateWithId<TranslationKey> {
@@ -1349,7 +1350,7 @@ type ComboboxComponentProps<ItemType> = PropsWithRef<
   PropsWithChildren<ComboBoxProps<ItemType>> & RefAttributes<HTMLInputElement>
 >;
 
-interface ComboBoxComponent {
+export interface ComboBoxComponent {
   <ItemType>(props: ComboboxComponentProps<ItemType>): ReactElement | null;
 }
 

packages/react/src/components/ComboButton/index.tsx

@@ -35,7 +35,7 @@ const defaultTranslations = {
 /**
  * Message ids that will be passed to translateWithId().
  */
-type TranslationKey = keyof typeof defaultTranslations;
+export type TranslationKey = keyof typeof defaultTranslations;
 
 const propMappingFunction = (deprecatedValue) => {
   const mapping = {

packages/react/src/components/ComposedModal/ModalFooter.tsx

@@ -8,7 +8,7 @@ import { noopFn } from '../../internal/noopFn';
 import InlineLoading from '../InlineLoading';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 
-interface SecondaryButtonProps {
+export interface SecondaryButtonProps {
   buttonText: ReactNode;
   onClick(evt: MouseEvent): void;
 }
@@ -35,15 +35,19 @@ function SecondaryButtonSet({
   }
 
   if (Array.isArray(secondaryButtons) && secondaryButtons.length <= 2) {
-    return secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => (
-      <Button
-        key={`${buttonText}-${i}`}
-        className={secondaryClassName}
-        kind="secondary"
-        onClick={onButtonClick || handleRequestClose}>
-        {buttonText}
-      </Button>
-    ));
+    return (
+      <>
+        {secondaryButtons.map(({ buttonText, onClick: onButtonClick }, i) => (
+          <Button
+            key={`${buttonText}-${i}`}
+            className={secondaryClassName}
+            kind="secondary"
+            onClick={onButtonClick || handleRequestClose}>
+            {buttonText}
+          </Button>
+        ))}
+      </>
+    );
   }
   if (secondaryButtonText) {
     return (
@@ -242,7 +246,6 @@ export const ModalFooter = React.forwardRef<HTMLElement, ModalFooterProps>(
         // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
         ref={ref}
         aria-busy={loadingActive}>
-        {/* @ts-expect-error: Invalid derived types, will be fine once explicit types are added */}
         <SecondaryButtonSet {...secondaryButtonProps} />
         {primaryButtonText && (
           <Button

packages/react/src/components/ComposedModal/ModalHeader.tsx

@@ -16,7 +16,7 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
 import { IconButton } from '../IconButton';
 
-type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 export interface ModalHeaderProps extends DivProps {
   /**
    * Provide an optional function to be called when the close button is

packages/react/src/components/ContainedList/ContainedList.tsx

@@ -15,7 +15,7 @@ import ContainedListItem from './ContainedListItem';
 
 const variants = ['on-page', 'disclosed'] as const;
 
-interface ContainedListType extends React.FC<ContainedListProps> {
+export interface ContainedListType extends React.FC<ContainedListProps> {
   ContainedListItem: typeof ContainedListItem;
 }
 

packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx

@@ -15,7 +15,7 @@ import { getNextIndex, matches, keys } from '../../internal/keyboard';
 import { PrefixContext } from '../../internal/usePrefix';
 import { noopFn } from '../../internal/noopFn';
 
-interface SwitchEventHandlersParams {
+export interface SwitchEventHandlersParams {
   index?: number;
   name?: string | number;
   text?: string;
@@ -64,7 +64,7 @@ export interface ContentSwitcherProps
   size: 'sm' | 'md' | 'lg';
 }
 
-interface ContentSwitcherState {
+export interface ContentSwitcherState {
   selectedIndex?: number;
 }
 

packages/react/src/components/ContextMenu/useContextMenu.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 
 type TriggerType = Element | Document | Window | React.RefObject<Element>;
 
-interface ContextMenuProps {
+export interface ContextMenuProps {
   open: boolean;
   x: number;
   y: number;

packages/react/src/components/Copy/Copy.tsx

@@ -62,7 +62,8 @@ const propMappingFunction = (deprecatedValue) => {
   return mapping[deprecatedValue];
 };
 
-interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface CopyProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Specify how the trigger should align with the tooltip
    */

packages/react/src/components/DataTable/TableCell.tsx

@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
 
-interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
+export interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
   /**
    * Pass in children that will be embedded in the table header label
    */

packages/react/src/components/DataTable/TableExpandHeader.tsx

@@ -14,7 +14,7 @@ import deprecate from '../../prop-types/deprecate';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
 import { ReactAttr } from '../../types/common';
 
-type TableExpandHeaderPropsBase = {
+export type TableExpandHeaderPropsBase = {
   /**
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
    */
@@ -56,7 +56,7 @@ type TableExpandHeaderPropsBase = {
   onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & ReactAttr<HTMLTableCellElement>;
 
-type TableExpandHeaderPropsWithToggle = Omit<
+export type TableExpandHeaderPropsWithToggle = Omit<
   TableExpandHeaderPropsBase,
   'ariaLabel' | 'aria-label' | 'enableToggle' | 'onExpand'
 > & {
@@ -66,7 +66,7 @@ type TableExpandHeaderPropsWithToggle = Omit<
   onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
 
-type TableExpandHeaderPropsWithExpando = Omit<
+export type TableExpandHeaderPropsWithExpando = Omit<
   TableExpandHeaderPropsBase,
   'ariaLabel' | 'aria-label' | 'enableExpando' | 'onExpand'
 > & {

packages/react/src/components/DataTable/TableExpandRow.tsx

@@ -13,7 +13,7 @@ import TableCell from './TableCell';
 import { usePrefix } from '../../internal/usePrefix';
 import { TableRowProps } from './TableRow';
 
-interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+export interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
   /**
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    */

packages/react/src/components/DataTable/TableExpandedRow.tsx

@@ -12,7 +12,7 @@ import TableCell from './TableCell';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
 
-interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+export interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
   /**
    * The width of the expanded row's internal cell
    */

packages/react/src/components/DataTable/TableHeader.tsx

@@ -63,7 +63,7 @@ const sortDirections: { [key: string]: 'none' | 'ascending' | 'descending' } = {
   [sortStates.DESC]: 'descending',
 };
 
-interface TableHeaderProps
+export interface TableHeaderProps
   extends ReactAttr<HTMLTableCellElement & HTMLButtonElement>,
     TranslateWithId<
       TableHeaderTranslationKey,

packages/react/src/components/DataTable/TableSelectAll.tsx

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 
-interface TableSelectAllProps {
+export interface TableSelectAllProps {
   /**
    * Specify the aria label for the underlying input control
    * node

packages/react/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -26,12 +26,12 @@ import { ErrorBoundaryContext } from './ErrorBoundaryContext';
  * Reference:
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
-interface ErrorBoundaryProps {
+export interface ErrorBoundaryProps {
   children?: ReactNode;
   fallback?: ReactNode;
 }
 
-interface ErrorBoundaryState {
+export interface ErrorBoundaryState {
   hasError: boolean;
 }
 

packages/react/src/components/FeatureFlags/index.tsx

@@ -20,7 +20,7 @@ import React, {
 } from 'react';
 import deprecate from '../../prop-types/deprecate';
 
-interface FeatureFlagsProps {
+export interface FeatureFlagsProps {
   children?: ReactNode;
   flags?: Record<string, boolean>;
   enableV12TileDefaultIcons?: boolean;

packages/react/src/components/Form/Form.tsx

@@ -10,7 +10,7 @@ import React, { type ComponentProps } from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-type FormProps = ComponentProps<'form'>;
+export type FormProps = ComponentProps<'form'>;
 
 export default function Form({ className, children, ...other }: FormProps) {
   const prefix = usePrefix();

packages/react/src/components/FormItem/FormItem.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-type FormItemProps = {
+export type FormItemProps = {
   /**
    * Provide content to be rendered in the form item
    */

packages/react/src/components/Heading/index.tsx

@@ -17,7 +17,7 @@ type SectionBaseProps = {
   level?: HeadingLevel;
 };
 
-type SectionProps<E extends ElementType> = PolymorphicProps<
+export type SectionProps<E extends ElementType> = PolymorphicProps<
   E,
   SectionBaseProps
 >;

packages/react/src/components/IconButton/index.tsx

@@ -65,7 +65,7 @@ const propMappingFunction = (deprecatedValue) => {
   return mapping[deprecatedValue];
 };
 
-interface IconButtonProps
+export interface IconButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Specify how the trigger should align with the tooltip

packages/react/src/components/IdPrefix/index.tsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { IdPrefixContext } from '../../internal/useIdPrefix';
 
-type IdPrefixProps = {
+export type IdPrefixProps = {
   children?: ReactNode;
 
   /**

packages/react/src/components/Layer/index.tsx

@@ -25,7 +25,7 @@ export function useLayer() {
   };
 }
 
-interface LayerBaseProps {
+export interface LayerBaseProps {
   /**
    * Provide child elements to be rendered inside of `Theme`
    */

packages/react/src/components/LayoutDirection/LayoutDirection.tsx

@@ -15,7 +15,7 @@ interface LayoutDirectionContextValue {
   direction: Direction;
 }
 
-interface LayoutDirectionProps {
+export interface LayoutDirectionProps {
   /**
    * Customize the element type used to render the outermost node
    */

packages/react/src/components/ListItem/ListItem.tsx

@@ -11,7 +11,7 @@ import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { Text } from '../Text';
 
-type ListItemProps = Omit<ComponentProps<'li'>, 'ref'>;
+export type ListItemProps = Omit<ComponentProps<'li'>, 'ref'>;
 
 export default function ListItem({
   className,