@carbon/react 1.76.0 → 1.77.0

package/es/components/UIShell/SwitcherItem.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributeAnchorTarget } from 'react';
+import React, { HTMLAttributeAnchorTarget, KeyboardEvent } from 'react';
 export interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -61,5 +61,5 @@ export interface SwitcherItemWithAriaLabelledBy extends BaseSwitcherItemProps {
     'aria-labelledby': string;
 }
 export type SwitcherItemProps = SwitcherItemWithAriaLabel | SwitcherItemWithAriaLabelledBy;
-declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType<any, keyof React.JSX.IntrinsicElements>>>;
+declare const SwitcherItem: React.ForwardRefExoticComponent<SwitcherItemProps & React.RefAttributes<React.ElementType>>;
 export default SwitcherItem;

package/es/components/UIShell/SwitcherItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import Link from './Link.js';
+import { Link } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { match } from '../../internal/keyboard/match.js';

package/es/internal/PolymorphicProps.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type AsProp<C extends React.ElementType> = {
     as?: C;
 };

package/es/internal/Selection.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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';
+interface UseSelectionProps<ItemType> {
+    disabled?: boolean;
+    filteredItems?: ItemType[];
+    initialSelectedItems?: ItemType[];
+    onChange?: (data: {
+        selectedItems: ItemType[];
+    }) => void;
+    selectAll?: boolean;
+    selectedItems?: ItemType[];
+}
+export declare const useSelection: <ItemType>({ disabled, onChange, initialSelectedItems, selectedItems: controlledItems, selectAll, filteredItems, }: UseSelectionProps<ItemType>) => {
+    clearSelection: () => void;
+    onItemChange: (item: ItemType) => void;
+    selectedItems: ItemType[];
+};
+interface SelectionRenderProps<ItemType> {
+    clearSelection: () => void;
+    onItemChange: (item: ItemType) => void;
+    selectedItems: ItemType[];
+}
+interface SelectionProps<ItemType> {
+    children?: (renderProps: SelectionRenderProps<ItemType>) => React.ReactNode;
+    disabled?: boolean;
+    initialSelectedItems: ItemType[];
+    onChange?: (state: {
+        selectedItems: ItemType[];
+    }) => void;
+    render?: (renderProps: SelectionRenderProps<ItemType>) => React.ReactNode;
+}
+export declare const Selection: <ItemType>({ children, disabled, initialSelectedItems, onChange, render, }: SelectionProps<ItemType>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/es/internal/Selection.js

@@ -5,12 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import isEqual from 'react-fast-compare';
 
-function callOnChangeHandler(_ref) {
+const callOnChangeHandler = _ref => {
   let {
     isControlled,
     isMounted,
@@ -27,8 +25,8 @@ function callOnChangeHandler(_ref) {
   } else {
     onChangeHandlerUncontrolled(selectedItems);
   }
-}
-function useSelection(_ref2) {
+};
+const useSelection = _ref2 => {
   let {
     disabled,
     onChange,
@@ -43,28 +41,24 @@ function useSelection(_ref2) {
   const isControlled = !!controlledItems;
   const selectedItems = isControlled ? controlledItems : uncontrolledItems;
   const onItemChange = useCallback(item => {
-    if (disabled) {
-      return;
-    }
-    const allSelectableItems = filteredItems.filter(item => !item.disabled);
-    const disabledItemCount = filteredItems.filter(item => item.disabled).length;
+    if (disabled) return;
+
+    // Assert special properties (e.g., `disabled`, `isSelectAll`, etc.) are
+    // `any` since those properties aren’t part of the generic type.
+    const allSelectableItems = filteredItems.filter(item => !item?.disabled);
+    const disabledItemCount = filteredItems.filter(item => item?.disabled).length;
     let newSelectedItems;
 
-    //deselect all on click to All/indeterminate option
-    if (item && item.isSelectAll && selectedItems.length > 0) {
+    // deselect all on click to All/indeterminate option
+    if (item?.isSelectAll && selectedItems.length > 0) {
       newSelectedItems = [];
     }
-    //select all option
-    else if (item && item.isSelectAll && selectedItems.length == 0) {
+    // select all options
+    else if (item?.isSelectAll && selectedItems.length === 0) {
       newSelectedItems = allSelectableItems;
     } else {
-      let selectedIndex;
-      selectedItems.forEach((selectedItem, index) => {
-        if (isEqual(selectedItem, item)) {
-          selectedIndex = index;
-        }
-      });
-      if (selectedIndex === undefined) {
+      const selectedIndex = selectedItems.findLastIndex(selectedItem => isEqual(selectedItem, item));
+      if (selectedIndex === -1) {
         newSelectedItems = selectedItems.concat(item);
         // checking if all items are selected then We should select mark the 'select All' option as well
         if (selectAll && filteredItems.length - 1 === newSelectedItems.length + disabledItemCount) {
@@ -72,7 +66,7 @@ function useSelection(_ref2) {
         }
       } else {
         newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
-        newSelectedItems = newSelectedItems.filter(item => !item.isSelectAll);
+        newSelectedItems = newSelectedItems.filter(item => !item?.isSelectAll);
       }
     }
     callOnChangeHandler({
@@ -84,9 +78,7 @@ function useSelection(_ref2) {
     });
   }, [disabled, selectedItems, filteredItems, selectAll, isControlled]);
   const clearSelection = useCallback(() => {
-    if (disabled) {
-      return;
-    }
+    if (disabled) return;
     callOnChangeHandler({
       isControlled,
       isMounted: isMounted.current,
@@ -112,99 +104,20 @@ function useSelection(_ref2) {
     };
   }, []);
   return {
-    selectedItems,
+    clearSelection,
     onItemChange,
-    clearSelection
+    selectedItems
   };
-}
-class Selection extends React__default.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "internalSetState", (stateToSet, callback) => this.setState(stateToSet, () => {
-      if (callback) {
-        callback();
-      }
-      if (this.props.onChange) {
-        this.props.onChange(this.state);
-      }
-    }));
-    _defineProperty(this, "handleClearSelection", () => {
-      if (this.props.disabled) {
-        return;
-      }
-      this.internalSetState({
-        selectedItems: []
-      });
-    });
-    _defineProperty(this, "handleSelectItem", item => {
-      this.internalSetState(state => ({
-        selectedItems: state.selectedItems.concat(item)
-      }));
-    });
-    _defineProperty(this, "handleRemoveItem", index => {
-      this.internalSetState(state => ({
-        selectedItems: removeAtIndex(state.selectedItems, index)
-      }));
-    });
-    _defineProperty(this, "handleOnItemChange", item => {
-      if (this.props.disabled) {
-        return;
-      }
-      const {
-        selectedItems
-      } = this.state;
-      let selectedIndex;
-      selectedItems.forEach((selectedItem, index) => {
-        if (isEqual(selectedItem, item)) {
-          selectedIndex = index;
-        }
-      });
-      if (selectedIndex === undefined) {
-        this.handleSelectItem(item);
-        return;
-      }
-      this.handleRemoveItem(selectedIndex);
-    });
-    this.state = {
-      selectedItems: props.initialSelectedItems
-    };
-  }
-  render() {
-    const {
-      children,
-      render
-    } = this.props;
-    const {
-      selectedItems
-    } = this.state;
-    const renderProps = {
-      selectedItems,
-      onItemChange: this.handleOnItemChange,
-      clearSelection: this.handleClearSelection
-    };
-    if (render !== undefined) {
-      return render(renderProps);
-    }
-    if (children !== undefined) {
-      return children(renderProps);
-    }
-    return null;
-  }
-}
+};
 
-// Generic utility for safely removing an element at a given index from an
-// array.
-_defineProperty(Selection, "propTypes", {
-  children: PropTypes.func,
-  disabled: PropTypes.bool,
-  initialSelectedItems: PropTypes.array.isRequired,
-  onChange: PropTypes.func,
-  render: PropTypes.func
-});
+/**
+ * Generic utility for safely removing an element at a given index from an
+ * array.
+ */
 const removeAtIndex = (array, index) => {
   const result = array.slice();
   result.splice(index, 1);
   return result;
 };
 
-export { Selection as default, useSelection };
+export { useSelection };

package/es/node_modules/es-toolkit/dist/compat/function/debounce.mjs.js

@@ -0,0 +1,55 @@
+/**
+ * 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 { debounce as debounce$1 } from '../../function/debounce.mjs.js';
+
+function debounce(func, debounceMs = 0, options = {}) {
+    if (typeof options !== 'object') {
+        options = {};
+    }
+    const { signal, leading = false, trailing = true, maxWait } = options;
+    const edges = Array(2);
+    if (leading) {
+        edges[0] = 'leading';
+    }
+    if (trailing) {
+        edges[1] = 'trailing';
+    }
+    let result = undefined;
+    let pendingAt = null;
+    const _debounced = debounce$1(function (...args) {
+        result = func.apply(this, args);
+        pendingAt = null;
+    }, debounceMs, { signal, edges });
+    const debounced = function (...args) {
+        if (maxWait != null) {
+            if (pendingAt === null) {
+                pendingAt = Date.now();
+            }
+            else {
+                if (Date.now() - pendingAt >= maxWait) {
+                    result = func.apply(this, args);
+                    pendingAt = Date.now();
+                    _debounced.cancel();
+                    _debounced.schedule();
+                    return result;
+                }
+            }
+        }
+        _debounced.apply(this, args);
+        return result;
+    };
+    const flush = () => {
+        _debounced.flush();
+        return result;
+    };
+    debounced.cancel = _debounced.cancel;
+    debounced.flush = flush;
+    return debounced;
+}
+
+export { debounce };

package/es/node_modules/es-toolkit/dist/compat/function/throttle.mjs.js

@@ -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 { debounce } from './debounce.mjs.js';
+
+function throttle(func, throttleMs = 0, options = {}) {
+    if (typeof options !== 'object') {
+        options = {};
+    }
+    const { leading = true, trailing = true, signal } = options;
+    return debounce(func, throttleMs, {
+        leading,
+        trailing,
+        signal,
+        maxWait: throttleMs,
+    });
+}
+
+export { throttle };

package/es/node_modules/es-toolkit/dist/function/debounce.mjs.js

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+export { debounce };

package/es/tools/wrapComponent.d.ts

@@ -16,5 +16,5 @@ type WrapComponentArgs<T extends HTMLTagName> = {
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-declare const wrapComponent: <T extends keyof HTMLElementTagNameMap>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => (props: ReactAttr<T>) => React.ReactElement;
+declare const wrapComponent: <T extends HTMLTagName>({ name, className: getClassName, type, }: WrapComponentArgs<T>) => ((props: ReactAttr<T>) => React.ReactElement);
 export default wrapComponent;

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

@@ -27,7 +27,7 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Optionally specify an href for your Button to become an `<a>` element
      */
-    href?: string;
+    href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
     /**
      * If specifying the `renderIcon` prop, provide a description for that icon that can
      * be read by screen readers
@@ -45,6 +45,10 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify the kind of Button you want to create
      */
     kind?: ButtonBaseProps['hasIconOnly'] extends true ? IconButtonKind : ButtonKind;
+    /**
+     * Optionally specify a `rel` when using an `<a>` element.
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Optional prop to allow overriding the icon rendering.
      * Can be a React component class
@@ -54,6 +58,10 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Specify the size of the button, from the following list of sizes:
      */
     size?: ButtonSize;
+    /**
+     * Optionally specify a `target` when using an `<a>` element.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
      * Specify the alignment of the tooltip to the icon-only button.
      * Can be one of: start, center, or end.

package/lib/components/Button/Button.js

@@ -194,6 +194,10 @@ Button.propTypes = {
    * leaves the button element
    */
   onMouseLeave: PropTypes__default["default"].func,
+  /**
+   * Optionally specify a `rel` when using an `<a>` element.
+   */
+  rel: PropTypes__default["default"].string,
   /**
    * Optional prop to allow overriding the icon rendering.
    * Can be a React component class
@@ -211,6 +215,10 @@ Button.propTypes = {
    * Optional prop to specify the tabIndex of the Button
    */
   tabIndex: PropTypes__default["default"].number,
+  /**
+   * Optionally specify a `target` when using an `<a>` element.
+   */
+  target: PropTypes__default["default"].string,
   /**
    * Specify the alignment of the tooltip to the icon-only button.
    * Can be one of: start, center, or end.

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -7,8 +7,8 @@
 import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
 export type DeprecatedCodeSnippetAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCodeSnippetAlignmnet = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignmnet;
+export type NewCodeSnippetAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
+export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignment;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip

package/lib/components/ComboBox/ComboBox.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.
@@ -184,7 +184,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      */
     titleText?: ReactNode;
     /**
-     * **Experimental**: will enable autcomplete and typeahead for the input field
+     * **Experimental**: will enable autocomplete and typeahead for the input field
      */
     typeahead?: boolean;
     /**

package/lib/components/ComboBox/ComboBox.js

@@ -27,7 +27,6 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
@@ -79,21 +78,24 @@ const autocompleteCustomFilter = _ref => {
 const getInputValue = _ref2 => {
   let {
     initialSelectedItem,
-    inputValue,
     itemToString,
     selectedItem,
     prevSelectedItem
   } = _ref2;
-  if (selectedItem) {
+  // If there's a current selection (even if it's an object or string), use it.
+  if (selectedItem !== null && typeof selectedItem !== 'undefined') {
     return itemToString(selectedItem);
   }
-  if (initialSelectedItem) {
+
+  // On the very first render (when no previous value exists), use
+  // `initialSelectedItem`.
+  if (typeof prevSelectedItem === 'undefined' && initialSelectedItem !== null && typeof initialSelectedItem !== 'undefined') {
     return itemToString(initialSelectedItem);
   }
-  if (!selectedItem && prevSelectedItem) {
-    return '';
-  }
-  return inputValue || '';
+
+  // Otherwise (i.e., after the user has cleared the selection), return an empty
+  // string.
+  return '';
 };
 const findHighlightedIndex = (_ref3, inputValue) => {
   let {
@@ -168,7 +170,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = react.useFloating(enableFloatingStyles ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: autoAlign ? [react.flip(), floatingUi_dom.hide()] : undefined,
+    middleware: autoAlign ? [react.flip(), react.hide()] : undefined,
     whileElementsMounted: react.autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
@@ -190,7 +192,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
-    inputValue: '',
     itemToString,
     selectedItem: selectedItemProp
   }));
@@ -233,7 +234,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (prevSelectedItemProp.current !== selectedItemProp) {
       const currentInputValue = getInputValue({
         initialSelectedItem,
-        inputValue,
         itemToString,
         selectedItem: selectedItemProp,
         prevSelectedItem: prevSelectedItemProp.current
@@ -312,6 +312,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           return changes;
         }
       case InputKeyDownEnter:
+        if (highlightedIndex === -1 && !allowCustomValue && state.selectedItem) {
+          return {
+            ...changes,
+            selectedItem: null,
+            inputValue: state.inputValue
+          };
+        }
         if (allowCustomValue) {
           setInputValue(inputValue);
           setHighlightedIndex(changes.selectedItem);
@@ -332,6 +339,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       case FunctionToggleMenu:
       case ToggleButtonClick:
+        if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {
+          return {
+            ...changes,
+            inputValue: '' // Clear the input
+          };
+        }
         if (changes.isOpen && !changes.selectedItem) {
           return {
             ...changes
@@ -524,6 +537,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   });
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus');
+    if (!inputRef.current?.value && evt.type === 'blur') {
+      selectItem(null);
+    }
   };
   const readOnlyEventHandlers = readOnly ? {
     onKeyDown: evt => {
@@ -646,6 +662,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           toggleMenu();
         }
       }
+      if (!inputValue && highlightedIndex == -1 && event.key == 'Enter') {
+        if (!isOpen) toggleMenu();
+        selectItem(null);
+        event.preventDownshiftDefault = true;
+        if (event.currentTarget.ariaExpanded === 'false') openMenu();
+      }
       if (typeahead && event.key === 'Tab') {
         //  event.preventDefault();
         const matchingItem = items.find(item => itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
@@ -872,7 +894,7 @@ ComboBox.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func,
   /**
-   * **Experimental**: will enable autcomplete and typeahead for the input field
+   * **Experimental**: will enable autocomplete and typeahead for the input field
    */
   typeahead: PropTypes__default["default"].bool,
   /**

package/lib/components/ComboButton/index.js

@@ -23,7 +23,6 @@ var useAttachedMenu = require('../../internal/useAttachedMenu.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
 var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
@@ -82,7 +81,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
   if (!enableOnlyFloatingStyles) {
     middlewares = [react.flip({
       crossAxis: false
-    }), floatingUi_dom.hide()];
+    }), react.hide()];
   }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({

package/lib/components/ComposedModal/ComposedModal.js

@@ -16,7 +16,6 @@ var PropTypes = require('prop-types');
 var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
-var compat = require('es-toolkit/compat');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var cx = require('classnames');
@@ -27,6 +26,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var index$1 = 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 match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -61,7 +61,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
         setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
       }
     }
-    const debouncedHandler = compat.debounce(handler, 200);
+    const debouncedHandler = debounce.debounce(handler, 200);
     window.addEventListener('resize', debouncedHandler);
     return () => {
       debouncedHandler.cancel();