@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

package/lib/components/FileUploader/FileUploaderButton.js

@@ -49,7 +49,7 @@ function FileUploaderButton(_ref) {
   const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
   const {
     current: inputId
-  } = React.useRef(id || uniqueId["default"]());
+  } = React.useRef(id || uniqueId.uniqueId());
   const inputNode = React.useRef(null);
   const classes = cx__default["default"](`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -47,7 +47,7 @@ function FileUploaderDropContainer(_ref) {
   const inputRef = React.useRef(null);
   const {
     current: uid
-  } = React.useRef(id || uniqueId["default"]());
+  } = React.useRef(id || uniqueId.uniqueId());
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,

package/lib/components/FileUploader/FileUploaderItem.js

@@ -49,7 +49,7 @@ function FileUploaderItem(_ref) {
   const prefix = usePrefix.usePrefix();
   const {
     current: id
-  } = React.useRef(uuid || uniqueId["default"]());
+  } = React.useRef(uuid || uniqueId.uniqueId());
   const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',

package/lib/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/lib/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -18,17 +18,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FluidDatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePickerInput(_ref, ref) {
-  let {
-    ...other
-  } = _ref;
+const frFn = React.forwardRef;
+const FluidDatePickerInput = frFn((props, ref) => {
   return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
     value: {
       isFluid: true
     }
   }, /*#__PURE__*/React__default["default"].createElement(DatePickerInput["default"], _rollupPluginBabelHelpers["extends"]({
     ref: ref
-  }, other)));
+  }, props)));
 });
+FluidDatePickerInput.propTypes = DatePickerInput["default"].propTypes;
 
 exports["default"] = FluidDatePickerInput;

package/lib/components/FluidDropdown/FluidDropdown.d.ts

@@ -97,5 +97,5 @@ export interface FluidDropdownProps<ItemType> extends DropdownProps<ItemType> {
      */
     warnText?: React.ReactNode;
 }
-declare const FluidDropdown: React.ForwardRefExoticComponent<Omit<FluidDropdownProps<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const FluidDropdown: React.ForwardRefExoticComponent<FluidDropdownProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
 export default FluidDropdown;

package/lib/components/FluidSearch/FluidSearch.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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 React, { type ChangeEvent } from 'react';
 export interface FluidSearchProps {
     /**
      * Specify an optional value for the `autocomplete` property on the underlying
@@ -38,10 +38,7 @@ export interface FluidSearchProps {
     /**
      * Optional callback called when the search value changes.
      */
-    onChange?(e: {
-        target: HTMLInputElement;
-        type: 'change';
-    }): void;
+    onChange?(event: ChangeEvent<HTMLInputElement>): void;
     /**
      * Optional callback called when the search value is cleared.
      */

package/lib/components/IconButton/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.

package/lib/components/IconButton/index.js

@@ -20,6 +20,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var ButtonBase = require('../Button/ButtonBase.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
 var index = require('../BadgeIndicator/index.js');
+var mapPopoverAlign = require('../../tools/mapPopoverAlign.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,19 +29,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
-const propMappingFunction = deprecatedValue => {
-  const mapping = {
-    'top-left': 'top-start',
-    'top-right': 'top-end',
-    'bottom-left': 'bottom-start',
-    'bottom-right': 'bottom-end',
-    'left-bottom': 'left-end',
-    'left-top': 'left-start',
-    'right-bottom': 'right-end',
-    'right-top': 'right-start'
-  };
-  return mapping[deprecatedValue];
-};
 const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(_ref, ref) {
   let {
     align,
@@ -120,11 +108,7 @@ IconButton.propTypes = {
   // deprecated use right-start instead
 
   // new values to match floating-ui
-  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
-  //allowed prop values
-  ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
-  //optional mapper function
-  propMappingFunction),
+  'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
    * **Experimental**: Will attempt to automatically align the tooltip
    */

package/lib/components/ListBox/ListBox.d.ts

@@ -1,12 +1,12 @@
 /**
- * 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.
  */
 import React from 'react';
-import { ListBoxType, ListBoxSize } from './ListBoxPropTypes';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import { type ListBoxSize, type ListBoxType } from '.';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
 export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
     /**
@@ -59,10 +59,9 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      */
     warnTextId?: string;
 }
-export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
 /**
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-declare const ListBox: ListBoxComponent;
+declare const ListBox: React.ForwardRefExoticComponent<ListBoxProps & React.RefAttributes<HTMLDivElement>>;
 export default ListBox;

package/lib/components/ListBox/ListBox.js

@@ -14,10 +14,11 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var deprecate = require('../../prop-types/deprecate.js');
-var ListBoxPropTypes = require('./ListBoxPropTypes.js');
+require('./index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var ListBoxPropTypes = require('./ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,8 +39,8 @@ const handleClick = event => {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox(_ref, ref) {
-  let {
+const ListBox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     children,
     className: containerClassName,
     disabled = false,
@@ -54,7 +55,7 @@ const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListB
     light,
     isOpen,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix.usePrefix();
   const {
     isFluid
@@ -127,12 +128,12 @@ ListBox.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxPropTypes.ListBoxSize,
+  size: ListBoxPropTypes.ListBoxSizePropType,
   /**
    * Specify the "type" of the ListBox. Currently supports either `default` or
    * `inline` as an option.
    */
-  type: ListBoxPropTypes.ListBoxType,
+  type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/ListBox/ListBoxMenu.d.ts

@@ -1,10 +1,11 @@
 /**
- * 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.
  */
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
 export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     children?: any;
@@ -13,11 +14,10 @@ export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, Excl
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-declare const ListBoxMenu: ListBoxMenuComponent;
+declare const ListBoxMenu: React.ForwardRefExoticComponent<ListBoxMenuProps & React.RefAttributes<HTMLUListElement>>;
 export default ListBoxMenu;

package/lib/components/ListBox/ListBoxMenu.js

@@ -20,12 +20,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
+const frFn = React.forwardRef;
+
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-const ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenu(_ref, ref) {
+const ListBoxMenu = frFn((_ref, ref) => {
   let {
     children,
     id,

package/lib/components/ListBox/ListBoxMenuItem.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 { ForwardedRef, ReactNode, type Ref } from 'react';
-import { ForwardRefReturn, ReactAttr } from '../../types/common';
+import React, { ReactNode } from 'react';
+import { ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify any children nodes that should be rendered inside of the ListBox
@@ -29,9 +29,10 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
      */
     title?: string;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: Ref<HTMLDivElement>;
-}) | null;
-export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
-declare const _default: ListBoxMenuItemComponent;
-export default _default;
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+declare const ListBoxMenuItem: React.ForwardRefExoticComponent<ListBoxMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+export default ListBoxMenuItem;

package/lib/components/ListBox/ListBoxPropTypes.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.
@@ -9,6 +9,6 @@ declare const listBoxTypes: readonly ["default", "inline"];
 declare const listBoxSizes: readonly ["sm", "md", "lg"];
 export type ListBoxType = (typeof listBoxTypes)[number];
 export type ListBoxSize = (typeof listBoxSizes)[number];
-export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
-export declare const ListBoxSize: PropTypes.Requireable<"sm" | "md" | "lg">;
+export declare const ListBoxTypePropType: PropTypes.Requireable<"default" | "inline">;
+export declare const ListBoxSizePropType: PropTypes.Requireable<"sm" | "md" | "lg">;
 export {};

package/lib/components/ListBox/ListBoxPropTypes.js

@@ -17,8 +17,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const listBoxTypes = ['default', 'inline'];
 const listBoxSizes = ['sm', 'md', 'lg'];
-const ListBoxType = PropTypes__default["default"].oneOf(listBoxTypes);
-const ListBoxSize = PropTypes__default["default"].oneOf(listBoxSizes);
+const ListBoxTypePropType = PropTypes__default["default"].oneOf(listBoxTypes);
+const ListBoxSizePropType = PropTypes__default["default"].oneOf(listBoxSizes);
 
-exports.ListBoxSize = ListBoxSize;
-exports.ListBoxType = ListBoxType;
+exports.ListBoxSizePropType = ListBoxSizePropType;
+exports.ListBoxTypePropType = ListBoxTypePropType;

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

@@ -1,17 +1,19 @@
 /**
- * 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.
  */
-export * as PropTypes from './ListBoxPropTypes';
 export * from './ListBoxPropTypes';
-import { ListBoxComponent as ListBoxPartialComponent } from './ListBox';
+import ListBoxInternal from './ListBox';
 import { ListBoxFieldComponent } from './ListBoxField';
-import { ListBoxMenuComponent } from './ListBoxMenu';
+import ListBoxMenu from './ListBoxMenu';
 import { ListBoxMenuIconComponent } from './ListBoxMenuIcon';
-import { ListBoxMenuItemComponent } from './ListBoxMenuItem';
+import ListBoxMenuItem from './ListBoxMenuItem';
 import { ListBoxSelectionComponent } from './ListBoxSelection';
+type ListBoxMenuComponent = typeof ListBoxMenu;
+type ListBoxMenuItemComponent = typeof ListBoxMenuItem;
+type ListBoxPartialComponent = typeof ListBoxInternal;
 export interface ListBoxComponent extends ListBoxPartialComponent {
     readonly Field: ListBoxFieldComponent;
     readonly Menu: ListBoxMenuComponent;

package/lib/components/ListBox/index.js

@@ -25,6 +25,6 @@ const ListBox = Object.assign(ListBox$1["default"], {
   Selection: ListBoxSelection["default"]
 });
 
-exports.ListBoxSize = ListBoxPropTypes.ListBoxSize;
-exports.ListBoxType = ListBoxPropTypes.ListBoxType;
+exports.ListBoxSizePropType = ListBoxPropTypes.ListBoxSizePropType;
+exports.ListBoxTypePropType = ListBoxPropTypes.ListBoxTypePropType;
 exports["default"] = ListBox;

package/lib/components/Menu/Menu.js

@@ -44,7 +44,12 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     open,
     size = 'sm',
     legacyAutoalign = 'true',
+    // TODO: `ssr-friendly` doesn't support ESLint v9.
+    // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
+    // https://github.com/carbon-design-system/carbon/issues/18991
+    /*
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    */
     target = environment.canUseDOM && document.body,
     x = 0,
     y = 0,
@@ -111,18 +116,8 @@ const Menu = /*#__PURE__*/React.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();
     }
@@ -133,7 +128,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     // if the user presses escape or this is a submenu
     // and the user presses ArrowLeft, close it
     if ((match.match(e, keys.Escape) || !isRoot && match.match(e, keys.ArrowLeft)) && onClose) {
-      handleClose(e);
+      handleClose();
     } else {
       focusItem(e);
     }
@@ -168,7 +163,7 @@ const Menu = /*#__PURE__*/React.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/lib/components/Menu/MenuItem.js

@@ -108,18 +108,28 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       }
     }
   }
+
+  // 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 = React.useRef(false);
+  const keyboardClickEvent = e => match.match(e, keys.Enter) || match.match(e, keys.Space);
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-    if (match.match(e, keys.Enter) || match.match(e, keys.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__default["default"](className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
@@ -172,7 +182,8 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
   }, getReferenceProps()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__selection-icon`
   }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, null)))), /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Modal/Modal.js

@@ -109,28 +109,28 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       target
     } = evt;
     evt.stopPropagation();
-    if (open) {
+    if (open && target instanceof HTMLElement) {
       if (match.match(evt, keys.Escape)) {
         onRequestClose(evt);
       }
-      if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && target instanceof Element && !isCloseButton(target) && document.activeElement !== button.current) {
+      if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
         onRequestSubmit(evt);
       }
       if (focusTrapWithoutSentinels && !enableDialogElement && match.match(evt, keys.Tab) && innerModal.current) {
         wrapFocus.wrapFocusWithoutSentinels({
           containerNode: innerModal.current,
-          currentActiveNode: evt.target,
-          // TODO: Delete type assertion following util rewrite.
-          // https://github.com/carbon-design-system/carbon/pull/18913
+          currentActiveNode: target,
           event: evt
         });
       }
     }
   }
   function handleOnClick(evt) {
-    const target = evt.target;
+    const {
+      target
+    } = evt;
     evt.stopPropagation();
-    if (!preventCloseOnClickOutside && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
+    if (!preventCloseOnClickOutside && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) && innerModal.current && !innerModal.current.contains(target)) {
       onRequestClose(evt);
     }
   }
@@ -139,7 +139,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       target: oldActiveNode,
       relatedTarget: currentActiveNode
     } = _ref2;
-    if (open && currentActiveNode && oldActiveNode) {
+    if (open && oldActiveNode instanceof HTMLElement && currentActiveNode instanceof HTMLElement) {
       const {
         current: bodyNode
       } = innerModal;
@@ -149,7 +149,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       const {
         current: endTrapNode
       } = endTrap;
-      wrapFocus["default"]({
+      wrapFocus.wrapFocus({
         bodyNode,
         startTrapNode,
         endTrapNode,

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

@@ -7,6 +7,7 @@
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
 import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { TranslateWithId } from '../../types/common';
 /**
  * Message ids that will be passed to translateWithId().
@@ -166,7 +167,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Specify the size of the ListBox.
      * Currently, supports either `sm`, `md` or `lg` as an option.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ListBoxSize;
     /**
      * @deprecated please use decorator instead.
      * **Experimental**: Provide a `Slug` component to be rendered inside the `Checkbox` component
@@ -177,7 +178,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
-    type?: 'default' | 'inline';
+    type?: ListBoxType;
     /**
      * Specify title to show title on hover
      */

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -787,7 +787,7 @@ FilterableMultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxPropTypes.ListBoxSize,
+  size: ListBoxPropTypes.ListBoxSizePropType,
   slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   ...MultiSelectPropTypes.sortingPropTypes,
   /**
@@ -799,6 +799,7 @@ FilterableMultiSelect.propTypes = {
    * Callback function for translating ListBoxMenuIcon SVG title
    */
   translateWithId: PropTypes__default["default"].func,
+  type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -6,7 +6,7 @@
  */
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
-import { ListBoxSize, ListBoxType } from '../ListBox';
+import { type ListBoxSize, type ListBoxType } from '../ListBox';
 import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { TranslateWithId } from '../../types/common';
@@ -173,5 +173,11 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
      */
     warnText?: ReactNode;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MultiSelect: MultiSelectComponent;
+type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
+interface MultiSelectComponent {
+    propTypes: Record<string, any>;
+    displayName: string;
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement<any> | null;
+}
 export {};

package/lib/components/MultiSelect/MultiSelect.js

@@ -435,7 +435,10 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const menuProps = React.useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
-  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
+  const allLabelProps = getLabelProps();
+  const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
+    id: allLabelProps.id
+  } : allLabelProps;
   const getSelectionStats = React.useCallback((selectedItems, filteredItems) => {
     const hasIndividualSelections = selectedItems.some(selected => !selected.isSelectAll);
     const nonSelectAllSelectedCount = selectedItems.filter(selected => !selected.isSelectAll).length;
@@ -677,7 +680,7 @@ MultiSelect.propTypes = {
   /**
    * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
    */
-  size: ListBoxPropTypes.ListBoxSize,
+  size: ListBoxPropTypes.ListBoxSizePropType,
   slug: deprecate["default"](PropTypes__default["default"].node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
   /**
    * Provide a method that sorts all options in the control. Overriding this
@@ -712,7 +715,7 @@ MultiSelect.propTypes = {
   /**
    * Specify 'inline' to create an inline multi-select.
    */
-  type: PropTypes__default["default"].oneOf(['default', 'inline']),
+  type: ListBoxPropTypes.ListBoxTypePropType,
   /**
    * Specify title to show title on hover
    */

package/lib/components/Notification/Notification.js

@@ -543,7 +543,7 @@ function ActionableNotification(_ref6) {
       const {
         current: endTrapNode
       } = endTrap;
-      wrapFocus["default"]({
+      wrapFocus.wrapFocus({
         bodyNode,
         startTrapNode,
         endTrapNode,