@carbon/react 1.80.1 → 1.81.0

package/es/components/FileUploader/FileUploader.js

@@ -117,7 +117,9 @@ const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({
     key: index,
     className: selectedFileClasses,
-    ref: node => nodes[index] = node // eslint-disable-line
+    ref: node => {
+      nodes[index] = node;
+    } // eslint-disable-line
   }, other), /*#__PURE__*/React__default.createElement(Text, {
     as: "p",
     className: `${prefix}--file-filename`,

package/es/components/FileUploader/FileUploaderButton.d.ts

@@ -69,7 +69,7 @@ export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElemen
      * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
      */
     tabIndex?: number | string;
-    innerRef?: React.RefObject<HTMLLabelElement>;
+    innerRef?: React.RefObject<HTMLLabelElement | null>;
 }
 declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderButton {

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -55,7 +55,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
     /**
      * Ref to pass to the inner button element
      */
-    innerRef?: React.LegacyRef<HTMLButtonElement>;
+    innerRef?: React.Ref<HTMLButtonElement>;
     /**
      * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
      */

package/es/components/FluidDatePickerInput/FluidDatePickerInput.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -6,21 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import DatePickerInput from '../DatePickerInput/DatePickerInput.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-const FluidDatePickerInput = /*#__PURE__*/React__default.forwardRef(function FluidDatePickerInput(_ref, ref) {
-  let {
-    ...other
-  } = _ref;
+const frFn = forwardRef;
+const FluidDatePickerInput = frFn((props, ref) => {
   return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
       isFluid: true
     }
   }, /*#__PURE__*/React__default.createElement(DatePickerInput, _extends({
     ref: ref
-  }, other)));
+  }, props)));
 });
+FluidDatePickerInput.propTypes = DatePickerInput.propTypes;
 
 export { FluidDatePickerInput as default };

package/es/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * 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, { FunctionComponent } from 'react';
-import { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
-import { FilterableMultiSelectProps } from '../MultiSelect/FilterableMultiSelect';
+import type { UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
+import { type FilterableMultiSelectProps } from '../MultiSelect';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }

package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * 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 { type MultiSelectProps } from '../MultiSelect';
 import { UseSelectProps } from 'downshift';
-import { MultiSelectProps } from '../MultiSelect/MultiSelect';
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -9,11 +9,10 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
-import '../MultiSelect/index.js';
+import { FilterableMultiSelect } from '../MultiSelect/FilterableMultiSelect.js';
+import { MultiSelect } from '../MultiSelect/MultiSelect.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import FilterableMultiSelect from '../MultiSelect/FilterableMultiSelect.js';
-import MultiSelect from '../MultiSelect/MultiSelect.js';
 
 const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMultiSelect(_ref, ref) {
   let {
@@ -36,7 +35,10 @@ const FluidMultiSelect = /*#__PURE__*/React__default.forwardRef(function FluidMu
   React__default.createElement(FilterableMultiSelect, _extends({
     ref: ref,
     className: classNames
-  }, other)) : /*#__PURE__*/React__default.createElement(MultiSelect, _extends({
+  }, other)) :
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default.createElement(MultiSelect, _extends({
     ref: ref,
     className: classNames
   }, other)));

package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidNumberInputSkeleton = _ref => {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx(`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-input`
+  })));
+};
+FluidNumberInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string
+};
+
+export { FluidNumberInputSkeleton as default };

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -0,0 +1,123 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import '../NumberInput/NumberInput.Skeleton.js';
+import { NumberInput } from '../NumberInput/NumberInput.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+const FluidNumberInput = /*#__PURE__*/React__default.forwardRef(function FluidNumberInput(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--number-input--fluid`, className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(NumberInput, _extends({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidNumberInput.propTypes = {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes.bool,
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription: PropTypes.string,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node,
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+  /**
+   * Provide an optional handler that is called when the internal state of
+   * NumberInput changes. This handler is called with event and state info.
+   * `(event, { value, direction }) => void`
+   */
+  onChange: PropTypes.func,
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp: PropTypes.func,
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func,
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+  /**
+   * Whether or not the component is readonly
+   */
+  readOnly: PropTypes.bool
+};
+
+export { FluidNumberInput as default };

package/es/components/FluidTextInput/FluidTextInput.js

@@ -9,12 +9,12 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
-import '../TextInput/index.js';
+import TextInput from '../TextInput/TextInput.js';
+import '../TextInput/TextInput.Skeleton.js';
 import '../TextInput/ControlledPasswordInput.js';
 import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import TextInput from '../TextInput/TextInput.js';
 
 const FluidTextInput = /*#__PURE__*/React__default.forwardRef(function FluidTextInput(_ref, ref) {
   let {

package/es/components/Grid/Column.js

@@ -13,7 +13,7 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useGridSettings } from './GridContext.js';
 
-const Column = /*#__PURE__*/React__default.forwardRef(function Column(_ref, ref) {
+const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     as,
     children,

package/es/components/Grid/GridTypes.d.ts

@@ -5,7 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
+import PropTypes from 'prop-types';
 export interface GridBaseProps {
+    /**
+     * Specify grid alignment. Default is center
+     */
+    align?: 'start' | 'center' | 'end';
     /**
      * Pass in content that will be rendered within the `Grid`
      */
@@ -33,5 +38,5 @@ export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWit
 export interface GridComponent {
     <T extends React.ElementType = 'div'>(props: GridProps<T>): React.ReactElement | null;
     displayName?: string;
-    propTypes?: React.WeakValidationMap<GridProps<any>>;
+    propTypes?: PropTypes.WeakValidationMap<GridProps<any>>;
 }

package/es/components/Layer/LayerLevel.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2023, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 export declare const levels: readonly ["one", "two", "three"];
-export declare const MIN_LEVEL = 0;
-export declare const MAX_LEVEL: number;
 export declare const LayerLevels: readonly [0, 1, 2];
+export declare const MIN_LEVEL: 0;
+export declare const MAX_LEVEL: 0 | 1 | 2;
 export type LayerLevel = (typeof LayerLevels)[number];

package/es/components/Layer/LayerLevel.js

@@ -6,7 +6,8 @@
  */
 
 const levels = ['one', 'two', 'three'];
-const MIN_LEVEL = 0;
-const MAX_LEVEL = levels.length - 1;
+const LayerLevels = [0, 1, 2];
+const MIN_LEVEL = LayerLevels[0];
+const MAX_LEVEL = LayerLevels[LayerLevels.length - 1];
 
-export { MAX_LEVEL, MIN_LEVEL, levels };
+export { LayerLevels, MAX_LEVEL, MIN_LEVEL, levels };

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,5 +31,7 @@ export interface LayerBaseProps {
     level?: LayerLevel;
 }
 export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
-declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
+    as?: React.ElementType;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
 export { Layer };

package/es/components/Layer/index.js

@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { LayerContext } from './LayerContext.js';
-import { levels, MIN_LEVEL, MAX_LEVEL } from './LayerLevel.js';
+import { levels, MAX_LEVEL, MIN_LEVEL } from './LayerLevel.js';
+import { clamp } from '../../internal/clamp.js';
 
 /**
  * A custom hook that will return information about the current layer. A common
@@ -37,7 +38,7 @@ const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const prefix = usePrefix();
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
-  const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
+  const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
   const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value

package/es/components/Link/Link.js

@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const Link = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+// First create the component with basic types
+const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     as: BaseComponent,
     children,
@@ -54,6 +55,7 @@ const Link = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${prefix}--link__icon`
   }, /*#__PURE__*/React__default.createElement(Icon, null)));
 });
+const Link = LinkBase;
 Link.displayName = 'Link';
 Link.propTypes = {
   /**

package/es/components/Menu/Menu.d.ts

@@ -9,7 +9,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * The ref of the containing element, used for positioning and alignment of the menu
      */
-    containerRef?: RefObject<HTMLDivElement>;
+    containerRef?: RefObject<HTMLDivElement | null>;
     /**
      * A collection of MenuItems to be rendered within this Menu.
      */

package/es/components/Menu/Menu.js

@@ -101,18 +101,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
       }
     }
   }
-  function handleClose(e) {
-    if (/^key/.test(e.type)) {
-      window.addEventListener('keyup', returnFocus, {
-        once: true
-      });
-    } else if (e.type === 'click' && menu.current) {
-      menu.current.addEventListener('focusout', returnFocus, {
-        once: true
-      });
-    } else {
-      returnFocus();
-    }
+  function handleClose() {
+    returnFocus();
     if (onClose) {
       onClose();
     }
@@ -123,7 +113,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     // if the user presses escape or this is a submenu
     // and the user presses ArrowLeft, close it
     if ((match(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
-      handleClose(e);
+      handleClose();
     } else {
       focusItem(e);
     }
@@ -158,7 +148,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
   }
   function handleBlur(e) {
     if (open && onClose && isRoot && !menu.current?.contains(e.relatedTarget)) {
-      handleClose(e);
+      handleClose();
     }
   }
   function fitValue(range, axis) {

package/es/components/Menu/MenuContext.d.ts

@@ -28,7 +28,7 @@ declare function menuReducer(state: StateType, action: ActionType): {
 type DispatchFuncProps = {
     type: ActionType['type'];
     payload: {
-        ref: RefObject<HTMLLIElement>;
+        ref: RefObject<HTMLLIElement | null>;
         disabled: boolean;
     };
 };

package/es/components/Menu/MenuItem.js

@@ -98,18 +98,28 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       }
     }
   }
+
+  // Avoid stray keyup event from MenuButton affecting MenuItem, and vice versa.
+  // Keyboard click is handled differently for <button> vs. <li> and for Enter vs. Space.  See
+  // https://www.stefanjudis.com/today-i-learned/keyboard-button-clicks-with-space-and-enter-behave-differently/.
+  const pendingKeyboardClick = useRef(false);
+  const keyboardClickEvent = e => match(e, Enter) || match(e, Space);
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-    if (match(e, Enter) || match(e, Space)) {
-      handleClick(e);
-    }
+    pendingKeyboardClick.current = keyboardClickEvent(e);
     if (rest.onKeyDown) {
       rest.onKeyDown(e);
     }
   }
+  function handleKeyUp(e) {
+    if (pendingKeyboardClick.current && keyboardClickEvent(e)) {
+      handleClick(e);
+    }
+    pendingKeyboardClick.current = false;
+  }
   const classNames = cx(className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
@@ -162,7 +172,8 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
   }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement("div", {

package/es/components/Modal/Modal.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
-import toggleClass from '../../tools/toggleClass.js';
+import { toggleClass } from '../../tools/toggleClass.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
@@ -95,12 +95,15 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
   function handleKeyDown(evt) {
+    const {
+      target
+    } = evt;
     evt.stopPropagation();
     if (open) {
       if (match(evt, Escape)) {
         onRequestClose(evt);
       }
-      if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
+      if (match(evt, Enter) && shouldSubmitOnEnter && target instanceof Element && !isCloseButton(target) && document.activeElement !== button.current) {
         onRequestSubmit(evt);
       }
       if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {

package/es/components/ModalWrapper/ModalWrapper.d.ts

@@ -62,8 +62,8 @@ export default class ModalWrapper extends React.Component<ModalWrapperProps, Mod
         triggerButtonKind: PropTypes.Requireable<"primary" | "secondary" | "danger" | "ghost" | "danger--primary" | "danger--ghost" | "danger--tertiary" | "tertiary">;
         withHeader: PropTypes.Requireable<boolean>;
     };
-    triggerButton: React.RefObject<HTMLButtonElement>;
-    modal: React.RefObject<HTMLDivElement>;
+    triggerButton: React.RefObject<HTMLButtonElement | null>;
+    modal: React.RefObject<HTMLDivElement | null>;
     state: {
         isOpen: boolean;
     };

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -191,11 +191,11 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     warnText?: ReactNode;
 }
-declare const FilterableMultiSelect: {
-    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement;
+export declare const FilterableMultiSelect: {
+    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;
     propTypes?: any;
     contextTypes?: any;
     defaultProps?: any;
     displayName?: any;
 };
-export default FilterableMultiSelect;
+export {};

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -61,7 +61,7 @@ const {
  * ends up just being defined as "string".)
  */
 
-const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
+const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     autoAlign = false,
     className: containerClassName,
@@ -647,6 +647,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     }, item)) : itemText)));
   }) : null)), !inline && !invalid && !warn ? helper : null);
 });
+FilterableMultiSelect.displayName = 'FilterableMultiSelect';
 FilterableMultiSelect.propTypes = {
   /**
    * Deprecated, aria-label is no longer needed
@@ -800,4 +801,4 @@ FilterableMultiSelect.propTypes = {
   warnText: PropTypes.node
 };
 
-export { FilterableMultiSelect as default };
+export { FilterableMultiSelect };

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -173,9 +173,5 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     warnText?: ReactNode;
 }
-type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
-interface MultiSelectComponent {
-    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement | null;
-}
-declare const _default: MultiSelectComponent;
-export default _default;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export {};