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

Author: Gururajj77

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 = {