@carbon/react 1.77.0-rc.0 → 1.78.0-rc.0

package/es/internal/wrapFocus.js

@@ -67,7 +67,7 @@ function wrapFocus(_ref) {
  * @param {object} options The options.
  * @param {Node|null} options.containerNode
  * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
- * @param {KeyboardEvent} options.event The DOM event
+ * @param {React.KeyboardEvent} options.event The DOM event
  */
 function wrapFocusWithoutSentinels(_ref2) {
   let {

package/lib/components/Accordion/AccordionItem.js

@@ -19,8 +19,8 @@ var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var AccordionProvider = require('./AccordionProvider.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -0,0 +1,23 @@
+/**
+ * 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 React from 'react';
+interface BadgeIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Count of badge indicator
+     */
+    count?: number;
+    /**
+     * Provide an `id` to uniquely identify the BadgeIndidcator
+     */
+    id?: string;
+}
+export declare const BadgeIndicator: React.ForwardRefExoticComponent<BadgeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default BadgeIndicator;

package/lib/components/BadgeIndicator/index.js

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    count,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--badge-indicator`, customClassName, {
+    [`${prefix}--badge-indicator--count`]: count
+  });
+  const displayCount = count && count > 999 ? '999+' : count;
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, rest), displayCount);
+});
+BadgeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Count of badge indicator
+   */
+  count: PropTypes__default["default"].number,
+  /**
+   * Provide an `id` to uniquely identify the BadgeIndidcator
+   */
+  id: PropTypes__default["default"].string
+};
+
+exports.BadgeIndicator = BadgeIndicator;
+exports["default"] = BadgeIndicator;

package/lib/components/Breadcrumb/Breadcrumb.d.ts

@@ -19,6 +19,11 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
      * Optional prop to omit the trailing slash for the breadcrumbs
      */
     noTrailingSlash?: boolean;
+    /**
+     * Specify the size of the Breadcrumb. Currently
+     * supports the following: `sm` & `md` (default: 'md')
+     */
+    size?: 'sm' | 'md';
 }
 declare const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps>;
 export default Breadcrumb;

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -27,12 +27,14 @@ const Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function Br
     children,
     className: customClassNameNav,
     noTrailingSlash,
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--breadcrumb`]: true,
-    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
     className: customClassNameNav,
@@ -59,7 +61,11 @@ Breadcrumb.propTypes = {
   /**
    * Optional prop to omit the trailing slash for the breadcrumbs
    */
-  noTrailingSlash: PropTypes__default["default"].bool
+  noTrailingSlash: PropTypes__default["default"].bool,
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following:
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md'])
 };
 
 exports["default"] = Breadcrumb;

package/lib/components/Button/Button.d.ts

@@ -67,6 +67,15 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Can be one of: start, center, or end.
      */
     tooltipAlignment?: ButtonTooltipAlignment;
+    /**
+     * Enable drop shadow for tooltips for icon-only buttons.
+     */
+    tooltipDropShadow?: boolean;
+    /**
+     * Enable high-contrast theme for tooltips on icon-only buttons.
+     * Defaults to true.
+     */
+    tooltipHighContrast?: boolean;
     /**
      * Specify the direction of the tooltip for icon-only buttons.
      * Can be either top, right, bottom, or left.

package/lib/components/Button/Button.js

@@ -38,6 +38,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
     autoAlign = false,
     children,
     hasIconOnly = false,
+    tooltipHighContrast = true,
+    tooltipDropShadow = false,
     iconDescription,
     kind = 'primary',
     onBlur,
@@ -90,6 +92,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
       label: iconDescription,
       kind: kind,
       size: size,
+      highContrast: tooltipHighContrast,
+      dropShadow: tooltipDropShadow,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
@@ -224,6 +228,15 @@ Button.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow: PropTypes__default["default"].bool,
+  /**
+   * Enable high-contrast theme for tooltips for icon-only buttons.
+   * Defaults to true.
+   */
+  tooltipHighContrast: PropTypes__default["default"].bool,
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.

package/lib/components/ComboBox/ComboBox.js

@@ -28,9 +28,9 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -476,11 +476,22 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }
     },
+    initialSelectedItem: initialSelectedItem,
+    inputId: id,
+    stateReducer,
+    isItemDisabled(item, _index) {
+      return item?.disabled;
+    },
+    ...downshiftProps,
     onStateChange: _ref6 => {
       let {
         type,
         selectedItem: newSelectedItem
       } = _ref6;
+      downshiftProps?.onStateChange?.({
+        type,
+        selectedItem: newSelectedItem
+      });
       if (type === Downshift.useCombobox.stateChangeTypes.ItemClick && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
@@ -492,14 +503,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-    },
-    initialSelectedItem: initialSelectedItem,
-    inputId: id,
-    stateReducer,
-    isItemDisabled(item, _index) {
-      return item?.disabled;
-    },
-    ...downshiftProps
+    }
   });
   React.useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps

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

@@ -330,11 +330,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
   }, [slug, decorator]);
+  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,

package/lib/components/FileUploader/FileUploader.js

@@ -19,8 +19,8 @@ var Button = require('../Button/Button.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var useId = require('../../internal/useId.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/FileUploader/FileUploaderItem.js

@@ -20,8 +20,8 @@ var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -20,6 +20,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * **Experimental**: Will attempt to automatically align the tooltip
      */
     autoAlign?: boolean;
+    /**
+     * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+     * Must be used with size="lg" and kind="ghost"
+     */
+    badgeCount?: number;
     /**
      * Optionally specify an href for your IconButton to become an `<a>` element
      */
@@ -68,7 +73,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeCount = 0 then provide a
+     * label with describing there is a new notification.
      */
     label: ReactNode;
     /**

package/lib/components/IconButton/index.js

@@ -15,9 +15,11 @@ var React = require('react');
 var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
+var useId = require('../../internal/useId.js');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,6 +45,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   let {
     align,
     autoAlign = false,
+    badgeCount,
     children,
     className,
     closeOnActivation = true,
@@ -63,6 +66,10 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
   });
+  if (badgeCount && (kind !== 'ghost' || size !== 'lg')) {
+    console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
+  }
+  const badgeId = useId.useId('badge-indicator');
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
     autoAlign: autoAlign,
@@ -81,8 +88,12 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     size: size,
     className: cx__default["default"](`${prefix}--btn--icon-only`, {
       [`${prefix}--btn--selected`]: isSelected
-    }, className)
-  }), children));
+    }, className),
+    "aria-describedby": badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
+    id: badgeId,
+    count: badgeCount > 0 ? badgeCount : undefined
+  })));
 });
 IconButton.propTypes = {
   /**
@@ -118,6 +129,11 @@ IconButton.propTypes = {
    * **Experimental**: Will attempt to automatically align the tooltip
    */
   autoAlign: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+   * Must be used with size="lg", kind="ghost" and hasIconOnly=true
+   */
+  badgeCount: PropTypes__default["default"].number,
   /**
    * Optionally specify an href for your IconButton to become an `<a>` element
    */

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

@@ -7,7 +7,7 @@
 import React from 'react';
 export declare const IconIndicatorKinds: string[];
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
-interface IconIndicatorProps {
+export interface IconIndicatorProps {
     /**
      * Specify an optional className to add.
      */

package/lib/components/InlineLoading/InlineLoading.js

@@ -76,10 +76,7 @@ const InlineLoading = _ref => {
     }
     return undefined;
   };
-
-  // TODO: Should this element only be constructed, similar to
-  // `loadingAnimation`, if `description` is specified?
-  const loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
+  const loadingText = description && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
@@ -90,7 +87,7 @@ const InlineLoading = _ref => {
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'
-  }), loadingAnimation, description && loadingText);
+  }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {
   /**

package/lib/components/Menu/MenuItem.js

@@ -23,8 +23,8 @@ var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/Modal/Modal.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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, { ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 import { ReactAttr } from '../../types/common';
 import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
@@ -58,7 +58,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
     /**
      * Provide a ref to return focus to once the modal is closed.
      */
-    launcherButtonRef?: any;
+    launcherButtonRef?: Ref<HTMLButtonElement>;
     /**
      * Specify the description for the loading text
      */

package/lib/components/Modal/Modal.js

@@ -32,8 +32,8 @@ var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -200,7 +200,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   React.useEffect(() => {
     if (!open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        if ('current' in launcherButtonRef) {
+          launcherButtonRef.current?.focus();
+        }
       });
     }
   }, [open, launcherButtonRef]);
@@ -383,7 +385,11 @@ Modal.propTypes = {
    * Provide a ref to return focus to once the modal is closed.
    */
   launcherButtonRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
+    current: PropTypes__default["default"].oneOfType([
+    // `PropTypes.instanceOf(HTMLButtonElement)` alone won't work because
+    // `HTMLButtonElement` is not defined in the test environment even
+    // though `testEnvironment` is set to `jsdom`.
+    typeof HTMLButtonElement !== 'undefined' ? PropTypes__default["default"].instanceOf(HTMLButtonElement) : PropTypes__default["default"].any, PropTypes__default["default"].oneOf([null])]).isRequired
   })]),
   /**
    * Specify the description for the loading text

package/lib/components/Modal/next/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.
@@ -50,10 +50,6 @@ export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
      * Specify whether or not the Modal content should have any inner padding.
      */
     isFullWidth?: boolean;
-    /**
-     * Provide a ref to return focus to once the modal is closed.
-     */
-    launcherButtonRef?: any;
     /**
      * Specify the description for the loading text
      */

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

@@ -118,6 +118,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
+  const isFirstRender = React.useRef(true);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(!!open);
   const [prevOpen, setPrevOpen] = React.useState(!!open);
@@ -252,8 +253,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     }
   }
   React.useEffect(() => {
-    onMenuChange?.(isOpen);
-  }, [isOpen, onMenuChange]);
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (open) {
+        onMenuChange?.(isOpen);
+      }
+    } else {
+      onMenuChange?.(isOpen);
+    }
+  }, [isOpen, onMenuChange, open]);
   const {
     getToggleButtonProps,
     getLabelProps,

package/lib/components/MultiSelect/MultiSelect.js

@@ -435,11 +435,12 @@ 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;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: isFluid ? handleFocus : undefined,

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

@@ -40,8 +40,11 @@ interface DownshiftTypedProps<ItemType> {
 interface SharedOptions {
     locale: string;
 }
+interface CompareItems {
+    (itemA: string, itemB: string, options: SharedOptions): number;
+}
 export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
-    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    compareItems: CompareItems;
     selectedItems: ItemType[];
 }
 export interface MultiSelectSortingProps<ItemType> {
@@ -49,7 +52,7 @@ export interface MultiSelectSortingProps<ItemType> {
      * Provide a compare function that is used to determine the ordering of
      * options. See 'sortItems' for more control.
      */
-    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    compareItems?: CompareItems;
     /**
      * Provide a method that sorts all options in the control. Overriding this
      * prop means that you also have to handle the sort logic for selected versus

package/lib/components/MultiSelect/tools/sorting.js

@@ -10,14 +10,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /**
- * Use the local `localCompare` with the `numeric` option to sort two,
- * potentially alpha-numeric, strings in a list of items.
+ * Use the locale `localeCompare` with the `numeric` option to sort two
+ * alpha-numeric strings.
  *
- * @param {ItemType} itemA
- * @param {ItemType} itemB
- * @param {object} options
- * @param {string} options.locale
- * @returns {number}
+ * @param {string} itemA - The first string to compare.
+ * @param {string} itemB - The second string to compare.
+ * @param {object} options - Options for comparing.
+ * @param {string} options.locale - The locale to use for comparison.
+ * @returns {number} A negative number if itemA comes before itemB, a positive
+ *   number if itemA comes after itemB, or 0 if they are equal.
  */
 const defaultCompareItems = (itemA, itemB, _ref) => {
   let {

package/lib/components/Notification/Notification.js

@@ -27,8 +27,8 @@ var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
 var warning = require('../../internal/warning.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
+var Text = require('../Text/Text.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/components/NumberInput/NumberInput.js

@@ -173,20 +173,20 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
   const Icon = normalizedProps.icon;
-  function handleStepperClick(event, direction) {
+  const getDecimalPlaces = num => {
+    const parts = num.toString().split('.');
+    return parts[1] ? parts[1].length : 0;
+  };
+  const handleStepperClick = (event, direction) => {
     if (inputRef.current) {
       const currentValue = Number(inputRef.current.value);
-      let newValue = direction === 'up' ? currentValue + step : currentValue - step;
-      if (min !== undefined) {
-        newValue = Math.max(newValue, min);
-      }
-      if (max !== undefined) {
-        newValue = Math.min(newValue, max);
-      }
-      const currentInputValue = inputRef.current ? inputRef.current.value : '';
+      const rawValue = direction === 'up' ? currentValue + step : currentValue - step;
+      const precision = Math.max(getDecimalPlaces(currentValue), getDecimalPlaces(step));
+      const floatValue = parseFloat(rawValue.toFixed(precision));
+      const newValue = typeof min !== 'undefined' && typeof max !== 'undefined' ? Math.min(Math.max(floatValue, min), max) : floatValue;
       const state = {
-        value: allowEmpty && currentInputValue === '' && step === 0 ? '' : newValue,
-        direction: direction
+        value: allowEmpty && inputRef.current.value === '' && step === 0 ? '' : newValue,
+        direction
       };
       setValue(state.value);
       if (onChange) {
@@ -196,7 +196,7 @@ const NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function N
         onClick(event, state);
       }
     }
-  }
+  };
 
   // AILabel always size `mini`
   let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;