@carbon/react 1.74.0 → 1.75.0-rc.0

package/lib/components/Dropdown/Dropdown.js

@@ -228,6 +228,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown--invalid`]: invalid,
     [`${prefix}--dropdown--warning`]: showWarning,
     [`${prefix}--dropdown--open`]: isOpen,
+    [`${prefix}--dropdown--focus`]: isFocused,
     [`${prefix}--dropdown--inline`]: inline,
     [`${prefix}--dropdown--disabled`]: disabled,
     [`${prefix}--dropdown--light`]: light,
@@ -249,7 +250,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });
@@ -265,7 +265,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     className: helperClasses
   }, helperText) : null;
   const handleFocus = evt => {
-    setIsFocused(evt.type === 'focus' ? true : false);
+    setIsFocused(evt.type === 'focus' && !selectedItem ? true : false);
   };
   const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
   const [currTimer, setCurrTimer] = React.useState();
@@ -282,7 +282,15 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
         setIsTyping(false);
       }, 3000));
     }
-    if (toggleButtonProps.onKeyDown) {
+    if (['ArrowDown'].includes(evt.key)) {
+      setIsFocused(false);
+    }
+    if (['Enter'].includes(evt.key) && !selectedItem && !isOpen) {
+      setIsFocused(true);
+    }
+
+    // For Dropdowns the arrow up key is only allowed if the Dropdown is open
+    if (toggleButtonProps.onKeyDown && (evt.key !== 'ArrowUp' || isOpen && evt.key === 'ArrowUp')) {
       toggleButtonProps.onKeyDown(evt);
     }
   }, [isTyping, currTimer, toggleButtonProps]);

package/lib/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -24,11 +24,11 @@ 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;
 }
 export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
@@ -44,4 +44,3 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
     componentDidUpdate(prevProps: ErrorBoundaryProps): void;
     render(): React.ReactNode;
 }
-export {};

package/lib/components/FeatureFlags/index.d.ts

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

package/lib/components/FileUploader/FileUploader.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { ReactElement } from 'react';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -73,10 +73,11 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
      */
     size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
 }
-declare const FileUploader: {
-    <ItemType>(props: FileUploaderProps): ReactElement;
-    propTypes?: any;
-    contextTypes?: any;
-    defaultProps?: any;
-};
+export interface FileUploaderHandle {
+    /**
+     * Clear internal state
+     */
+    clearFiles: () => void;
+}
+declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<FileUploaderHandle>>;
 export default FileUploader;

package/lib/components/FileUploader/FileUploader.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var Filename = require('./Filename.js');
 var FileUploaderButton = require('./FileUploaderButton.js');
-var types = require('../../prop-types/types.js');
+var Button = require('../Button/Button.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var useId = require('../../internal/useId.js');
@@ -82,6 +82,13 @@ const FileUploader = /*#__PURE__*/React__default["default"].forwardRef((_ref, re
       onClick?.(evt);
     }
   };
+  React.useImperativeHandle(ref, () => ({
+    clearFiles() {
+      updateState({
+        fileNames: []
+      });
+    }
+  }));
   const uploaderButton = /*#__PURE__*/React__default["default"].createRef();
   const classes = cx__default["default"]({
     [`${prefix}--form-item`]: true,
@@ -153,7 +160,7 @@ FileUploader.propTypes = {
   /**
    * Specify the type of the `<FileUploaderButton>`
    */
-  buttonKind: PropTypes__default["default"].oneOf(types.ButtonKinds),
+  buttonKind: PropTypes__default["default"].oneOf(Button.ButtonKinds),
   /**
    * Provide the label text to be read by screen readers when interacting with
    * the `<FileUploaderButton>`

package/lib/components/Form/Form.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
-type FormProps = ComponentProps<'form'>;
+export type FormProps = ComponentProps<'form'>;
 declare function Form({ className, children, ...other }: FormProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Form {
     var propTypes: {

package/lib/components/FormItem/FormItem.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-type FormItemProps = {
+export type FormItemProps = {
     /**
      * Provide content to be rendered in the form item
      */

package/lib/components/Heading/index.d.ts

@@ -10,7 +10,7 @@ type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type SectionBaseProps = {
     level?: HeadingLevel;
 };
-type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
+export type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
 export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};

package/lib/components/IconButton/index.d.ts

@@ -11,7 +11,7 @@ export type IconButtonKind = (typeof IconButtonKinds)[number];
 export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
 export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
 export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
-interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */

package/lib/components/IdPrefix/index.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { PropsWithChildren, ReactNode } from 'react';
-type IdPrefixProps = {
+export type IdPrefixProps = {
     children?: ReactNode;
     /**
      * The value used to prefix the auto-generated id placed on some DOM elements

package/lib/components/Layer/index.d.ts

@@ -15,7 +15,7 @@ import { PolymorphicProps } from '../../types/common';
 export declare function useLayer(): {
     level: 0 | 1 | 2;
 };
-interface LayerBaseProps {
+export interface LayerBaseProps {
     /**
      * Provide child elements to be rendered inside of `Theme`
      */
@@ -35,4 +35,3 @@ export interface LayerComponent {
     <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
 }
 export declare const Layer: LayerComponent;
-export {};

package/lib/components/LayoutDirection/LayoutDirection.d.ts

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { ElementType, ReactNode } from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext';
 type Direction = 'ltr' | 'rtl';
-interface LayoutDirectionProps {
+export interface LayoutDirectionProps {
     /**
      * Customize the element type used to render the outermost node
      */

package/lib/components/Link/Link.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, ElementType, HTMLAttributeAnchorTarget } from 'react';
-import { PolymorphicProps } from '../../types/common';
+import React, { AnchorHTMLAttributes, AriaAttributes, ComponentType, HTMLAttributeAnchorTarget } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * @description Indicates the element that represents the
@@ -48,6 +48,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     visited?: boolean;
 }
-export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps>;
-declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export type LinkProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LinkBaseProps>;
+type LinkComponent = <T extends React.ElementType = 'a'>(props: LinkProps<T>) => React.ReactElement | any;
+declare const Link: LinkComponent;
 export default Link;

package/lib/components/Link/Link.js

@@ -21,7 +21,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref, ref) {
+const Link = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     as: BaseComponent,
     children,

package/lib/components/ListItem/ListItem.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
-type ListItemProps = ComponentProps<'li'>;
+export type ListItemProps = Omit<ComponentProps<'li'>, 'ref'>;
 declare function ListItem({ className, children, ...other }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListItem {
     var propTypes: {

package/lib/components/Menu/Menu.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode, RefObject } from 'react';
-interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
      */

package/lib/components/Modal/Modal.js

@@ -81,7 +81,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const button = React.useRef(null);
-  const secondaryButton = React.useRef();
+  const secondaryButton = React.useRef(null);
   const contentRef = React.useRef(null);
   const innerModal = React.useRef(null);
   const startTrap = React.useRef(null);

package/lib/components/ModalWrapper/ModalWrapper.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
 import { ButtonKinds } from '../Button';
-interface ModalWrapperProps {
+export interface ModalWrapperProps {
     buttonTriggerClassName?: string;
     buttonTriggerText?: ReactNode;
     children?: ReactNode;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -209,7 +209,6 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator,
     [`${prefix}--autoalign`]: autoAlign
@@ -356,6 +355,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       case InputKeyDownArrowDown:
         if (InputKeyDownArrowDown === type && !isOpen) {
           setIsOpen(true);
+          return {
+            ...changes,
+            highlightedIndex: 0
+          };
         }
         if (highlightedIndex > -1) {
           const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);

package/lib/components/MultiSelect/MultiSelect.js

@@ -242,6 +242,16 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
           setItemsCleared(false);
           setIsOpenWrapper(true);
         }
+        if (match.match(e, keys.ArrowDown) && selectedItems.length === 0) {
+          setInputFocused(false);
+          setIsFocused(false);
+        }
+        if (match.match(e, keys.Escape) && isOpen) {
+          setInputFocused(true);
+        }
+        if (match.match(e, keys.Enter) && isOpen) {
+          setInputFocused(true);
+        }
       }
     }
   });
@@ -273,7 +283,6 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     [`${prefix}--multi-select__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
-    [`${prefix}--list-box__wrapper--fluid--focus`]: !isOpen && isFluid && isFocused,
     [`${prefix}--list-box__wrapper--slug`]: slug,
     [`${prefix}--list-box__wrapper--decorator`]: decorator
   });

package/lib/components/OrderedList/OrderedList.d.ts

@@ -6,7 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type ComponentProps } from 'react';
-interface OrderedListProps extends ComponentProps<'ol'> {
+export interface OrderedListProps extends ComponentProps<'ol'> {
     nested?: boolean | undefined;
     native?: boolean | undefined;
     isExpressive?: boolean | undefined;

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -118,7 +118,7 @@ export interface OverflowMenuProps {
      */
     innerRef?: React.Ref<any>;
 }
-interface OverflowMenuState {
+export interface OverflowMenuState {
     open: boolean;
     prevOpen?: boolean;
     hasMountedTrigger: boolean;

package/lib/components/PaginationNav/PaginationNav.d.ts

@@ -17,7 +17,58 @@ declare const translationIds: {
  * Message ids that will be passed to translateWithId().
  */
 type TranslationKey = keyof typeof translationIds;
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
+export interface DirectionButtonProps {
+    /**
+     * The direction this button represents ("forward" or "backward").
+     */
+    direction?: 'forward' | 'backward';
+    /**
+     * Whether or not the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label shown in the button's tooltip.
+     */
+    label?: string;
+    /**
+     * The callback function called when the button is clicked.
+     */
+    onClick?: React.MouseEventHandler;
+}
+export interface PaginationItemProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
+    /**
+     * Whether or not this is the currently active page.
+     */
+    isActive?: boolean;
+    /**
+     * The callback function called when the item is clicked.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * The page number this item represents.
+     */
+    page?: number;
+}
+export interface PaginationOverflowProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
+    /**
+     * How many items to display in this overflow.
+     */
+    count?: number;
+    /**
+     * From which index on this overflow should start displaying pages.
+     */
+    fromIndex?: number;
+    /**
+     * The callback function called when the user selects a page from the overflow.
+     */
+    onSelect?: (id: number) => void;
+    /**
+     * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+     * Set this to true if you are having performance problems with large data sets.
+     */
+    disableOverflow?: boolean;
+}
+export interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */

package/lib/components/Popover/index.d.ts

@@ -7,6 +7,11 @@
 import React, { type ForwardedRef, type WeakValidationMap, type ElementType } from 'react';
 import { type PolymorphicProps } from '../../types/common';
 import { type Boundary } from '@floating-ui/react';
+export interface PopoverContext {
+    setFloating: React.Ref<HTMLSpanElement>;
+    caretRef: React.Ref<HTMLSpanElement>;
+    autoAlign: boolean | null;
+}
 /**
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
@@ -14,7 +19,7 @@ import { type Boundary } from '@floating-ui/react';
 export type DeprecatedPopoverAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
 export type NewPopoverAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
 export type PopoverAlignment = DeprecatedPopoverAlignment | NewPopoverAlignment;
-interface PopoverBaseProps {
+export interface PopoverBaseProps {
     /**
      * Specify how the popover should align with the trigger element.
      */
@@ -73,4 +78,3 @@ export interface PopoverComponent {
 export declare const Popover: PopoverComponent;
 export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/lib/components/Portal/index.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface PortalProps {
+export interface PortalProps {
     /**
      * Specify the children elements to be rendered inside of the <Portal>
      */

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface ProgressIndicatorSkeletonProps {
+export interface ProgressIndicatorSkeletonProps {
     /**
      * Specify an optional className to add.
      */

package/lib/components/SkeletonIcon/SkeletonIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface SkeletonIconProps {
+export interface SkeletonIconProps {
     /**
      * Specify an optional className to add.
      */

package/lib/components/SkeletonText/SkeletonText.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-interface SkeletonTextProps {
+export interface SkeletonTextProps {
     /**
      * Specify an optional className to be applied to the container node.
      */

package/lib/components/Tabs/Tabs.d.ts

@@ -147,7 +147,7 @@ export interface TabListProps extends DivAttributes {
      * Provide an accessible label to be read when a user interacts with this
      * component
      */
-    'aria-label': string;
+    'aria-label'?: string;
     /**
      * Provide child elements to be rendered inside `ContentTabs`.
      * These elements should render a `ContentTab`
@@ -205,7 +205,7 @@ declare namespace TabList {
          * Provide an accessible label to be read when a user interacts with this
          * component
          */
-        'aria-label': PropTypes.Validator<string>;
+        'aria-label': PropTypes.Requireable<string>;
         /**
          * Provide child elements to be rendered inside `ContentTabs`.
          * These elements should render a `ContentTab`

package/lib/components/Tabs/Tabs.js

@@ -531,7 +531,7 @@ TabList.propTypes = {
    * Provide an accessible label to be read when a user interacts with this
    * component
    */
-  'aria-label': PropTypes__default["default"].string.isRequired,
+  'aria-label': PropTypes__default["default"].string,
   /**
    * Provide child elements to be rendered inside `ContentTabs`.
    * These elements should render a `ContentTab`

package/lib/components/Tag/DismissibleTag.js

@@ -48,7 +48,7 @@ const DismissibleTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const tagLabelRef = React.useRef();
+  const tagLabelRef = React.useRef(null);
   const tagId = id || `tag-${useId.useId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);

package/lib/components/Tag/OperationalTag.js

@@ -52,7 +52,7 @@ const OperationalTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const tagRef = React.useRef();
+  const tagRef = React.useRef(null);
   const tagId = id || `tag-${useId.useId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);

package/lib/components/Tag/SelectableTag.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { PolymorphicProps } from '../../types/common';
 import { SIZES } from './Tag';
 export interface SelectableTagBaseProps {
@@ -33,7 +33,7 @@ export interface SelectableTagBaseProps {
     /**
      * Provide an optional function to be called when the tag is clicked.
      */
-    onClick?: (e: Event) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Specify the state of the selectable tag.
      */

package/lib/components/Tag/SelectableTag.js

@@ -42,7 +42,7 @@ const SelectableTag = _ref => {
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const tagRef = React.useRef();
+  const tagRef = React.useRef(null);
   const tagId = id || `tag-${useId.useId()}`;
   const [selectedTag, setSelectedTag] = React.useState(selected);
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {

package/lib/components/Tag/Tag.d.ts

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import { SelectableTagBaseProps } from './SelectableTag';
+import { OperationalTagBaseProps } from './OperationalTag';
+import { DismissibleTagBaseProps } from './DismissibleTag';
 export declare const TYPES: {
     red: string;
     magenta: string;
@@ -78,7 +81,8 @@ export interface TagBaseProps {
      */
     type?: keyof typeof TYPES;
 }
-export type TagProps<T extends React.ElementType> = PolymorphicProps<T, TagBaseProps>;
-declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement | undefined>>;
+export type TagProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TagBaseProps>;
+type TagComponent = <T extends React.ElementType = 'div'>(props: TagProps<T> | OperationalTagBaseProps | SelectableTagBaseProps | DismissibleTagBaseProps) => React.ReactElement | any;
+declare const Tag: TagComponent;
 export declare const types: string[];
 export default Tag;

package/lib/components/Tag/Tag.js

@@ -50,7 +50,7 @@ const SIZES = {
   md: 'md',
   lg: 'lg'
 };
-const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref, forwardRef) {
+const Tag = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardRef) => {
   let {
     children,
     className,

package/lib/components/Text/Text.d.ts

@@ -4,12 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import { PolymorphicProps } from '../../types/common';
+import React, { ReactNode } from 'react';
 import { TextDir } from './TextDirection';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface TextBaseProps {
     dir?: TextDir | undefined;
+    children?: ReactNode;
 }
-export type TextProps<T extends React.ElementType> = PolymorphicProps<T, TextBaseProps>;
-declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
+export type TextProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, TextBaseProps>;
+type TextComponent = <T extends React.ElementType = 'span'>(props: TextProps<T>) => React.ReactElement | any;
+declare const Text: TextComponent;
 export { Text };

package/lib/components/Text/Text.js

@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Text = /*#__PURE__*/React__default["default"].forwardRef(function Text(_ref, ref) {
+const Text = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     as,
     children,

package/lib/components/Theme/index.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 import React, { ElementType } from 'react';
 import { PolymorphicProps } from '../../types/common';
-interface GlobalThemeProps {
+export interface GlobalThemeProps {
     theme?: 'white' | 'g10' | 'g90' | 'g100';
     children?: React.ReactNode;
 }

package/lib/components/Toggle/Toggle.Skeleton.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface ToggleSkeletonProps {
+export interface ToggleSkeletonProps {
     'aria-label'?: string;
     className?: string;
 }