@carbon/react 1.77.0 → 1.78.0-rc.0

package/es/components/Accordion/AccordionItem.js

@@ -15,8 +15,8 @@ import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AccordionContext } from './AccordionProvider.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
 const defaultRenderToggle = props => /*#__PURE__*/React__default.createElement("button", _extends({

package/es/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/es/components/BadgeIndicator/index.js

@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+const BadgeIndicator = /*#__PURE__*/React__default.forwardRef(function BadgeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    count,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--badge-indicator`, customClassName, {
+    [`${prefix}--badge-indicator--count`]: count
+  });
+  const displayCount = count && count > 999 ? '999+' : count;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames,
+    ref: ref
+  }, rest), displayCount);
+});
+BadgeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+  /**
+   * Count of badge indicator
+   */
+  count: PropTypes.number,
+  /**
+   * Provide an `id` to uniquely identify the BadgeIndidcator
+   */
+  id: PropTypes.string
+};
+
+export { BadgeIndicator, BadgeIndicator as default };

package/es/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/es/components/Breadcrumb/Breadcrumb.js

@@ -17,12 +17,14 @@ const Breadcrumb = /*#__PURE__*/React__default.forwardRef(function Breadcrumb(_r
     children,
     className: customClassNameNav,
     noTrailingSlash,
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--breadcrumb`]: true,
-    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default.createElement("nav", _extends({
     className: customClassNameNav,
@@ -49,7 +51,11 @@ Breadcrumb.propTypes = {
   /**
    * Optional prop to omit the trailing slash for the breadcrumbs
    */
-  noTrailingSlash: PropTypes.bool
+  noTrailingSlash: PropTypes.bool,
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following:
+   */
+  size: PropTypes.oneOf(['sm', 'md'])
 };
 
 export { Breadcrumb as default };

package/es/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/es/components/Button/Button.js

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

package/es/components/ComboBox/ComboBox.js

@@ -24,9 +24,9 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useFloating, flip, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { Text } from '../Text/Text.js';
 import { Space, Enter, Escape, Home, End } from '../../internal/keyboard/keys.js';
 
 const {
@@ -465,11 +465,22 @@ const ComboBox = /*#__PURE__*/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 === useCombobox.stateChangeTypes.ItemClick && !isEqual(selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
@@ -481,14 +492,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-    },
-    initialSelectedItem: initialSelectedItem,
-    inputId: id,
-    stateReducer,
-    isItemDisabled(item, _index) {
-      return item?.disabled;
-    },
-    ...downshiftProps
+    }
   });
   useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps

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

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useEffect, useContext, useCallback, useMemo, useState } from 'react';
+import React__default, { useEffect, useContext, useCallback, useMemo, useState, isValidElement } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -320,11 +320,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
     return /*#__PURE__*/React__default.isValidElement(element) ? element : null;
   }, [slug, decorator]);
+  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
+  }, labelProps), titleText), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size$1,

package/es/components/FileUploader/FileUploader.js

@@ -15,8 +15,8 @@ import { ButtonKinds } from '../Button/Button.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 const FileUploader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {

package/es/components/FileUploader/FileUploaderItem.js

@@ -16,8 +16,8 @@ import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Text } from '../Text/Text.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderItem(_ref) {

package/es/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/es/components/IconButton/index.js

@@ -11,9 +11,11 @@ import React__default from 'react';
 import cx from 'classnames';
 import '../Tooltip/DefinitionTooltip.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import ButtonBase from '../Button/ButtonBase.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { BadgeIndicator } from '../BadgeIndicator/index.js';
 
 const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const propMappingFunction = deprecatedValue => {
@@ -33,6 +35,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
   let {
     align,
     autoAlign = false,
+    badgeCount,
     children,
     className,
     closeOnActivation = true,
@@ -53,6 +56,10 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
   const tooltipClasses = cx(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('badge-indicator');
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     autoAlign: autoAlign,
@@ -71,8 +78,12 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
     size: size,
     className: cx(`${prefix}--btn--icon-only`, {
       [`${prefix}--btn--selected`]: isSelected
-    }, className)
-  }), children));
+    }, className),
+    "aria-describedby": badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
+    id: badgeId,
+    count: badgeCount > 0 ? badgeCount : undefined
+  })));
 });
 IconButton.propTypes = {
   /**
@@ -108,6 +119,11 @@ IconButton.propTypes = {
    * **Experimental**: Will attempt to automatically align the tooltip
    */
   autoAlign: PropTypes.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.number,
   /**
    * Optionally specify an href for your IconButton to become an `<a>` element
    */

package/es/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/es/components/InlineLoading/InlineLoading.js

@@ -66,10 +66,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.createElement("div", {
+  const loadingText = description && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
@@ -80,7 +77,7 @@ const InlineLoading = _ref => {
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'
-  }), loadingAnimation, description && loadingText);
+  }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {
   /**

package/es/components/Menu/MenuItem.js

@@ -19,8 +19,8 @@ import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CaretLeft, _CaretRight;

package/es/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/es/components/Modal/Modal.js

@@ -28,8 +28,8 @@ import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
-import { Text } from '../Text/Text.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
@@ -190,7 +190,9 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   useEffect(() => {
     if (!open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        if ('current' in launcherButtonRef) {
+          launcherButtonRef.current?.focus();
+        }
       });
     }
   }, [open, launcherButtonRef]);
@@ -373,7 +375,11 @@ Modal.propTypes = {
    * Provide a ref to return focus to once the modal is closed.
    */
   launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
+    current: PropTypes.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.instanceOf(HTMLButtonElement) : PropTypes.any, PropTypes.oneOf([null])]).isRequired
   })]),
   /**
    * Specify the description for the loading text

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

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useMemo, useContext, useState, useLayoutEffect } from 'react';
+import React__default, { useMemo, useContext, useState, useLayoutEffect, isValidElement } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -424,11 +424,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const menuProps = useMemo(() => getMenuProps({
     ref: enableFloatingStyles ? refs.setFloating : null
   }), [enableFloatingStyles, getMenuProps, refs.setFloating]);
+  const labelProps = ! /*#__PURE__*/isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
     className: titleClasses
-  }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
+  }, labelProps), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--visually-hidden`
   }, clearSelectionDescription, " ", selectedItems.length, ' ', itemsSelectedText, ",", clearSelectionText)), /*#__PURE__*/React__default.createElement(ListBox, {
     onFocus: isFluid ? handleFocus : undefined,

package/es/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/es/components/MultiSelect/tools/sorting.js

@@ -6,14 +6,15 @@
  */
 
 /**
- * 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/es/components/Notification/Notification.js

@@ -23,8 +23,8 @@ import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.j
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
-import { Text } from '../Text/Text.js';
 import { match, matches } from '../../internal/keyboard/match.js';
+import { Text } from '../Text/Text.js';
 import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 /**

package/es/components/NumberInput/NumberInput.js

@@ -163,20 +163,20 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     [`${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) {
@@ -186,7 +186,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
         onClick(event, state);
       }
     }
-  }
+  };
 
   // AILabel always size `mini`
   let normalizedDecorator = /*#__PURE__*/React__default.isValidElement(slug ?? decorator) ? slug ?? decorator : null;