@carbon/ibm-products 2.60.0 → 2.61.0

package/es/components/ScrollGradient/constants.js

@@ -8,57 +8,12 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
 
-var ScrollDirection = {
-  X: 'X',
-  Y: 'Y'
-};
 var ScrollStates = {
   // No scrolling required because content fits within container.
-  NONE: 'NONE',
-  // Scroll position is a the start of the scrollable content.
-  INITIAL: 'INITIAL',
-  // Scroll position is neither at start or end of scrollable content.
-  STARTED: 'STARTED',
-  // Scroll position is a the end of the scrollable content.
-  END: 'END'
-};
+  NONE: 'NONE'};
 
 // FUNCTIONS
 
-var getScrollState = function getScrollState(element, scrollDirection) {
-  // console.log('getScrollState - element: ', element);
-  // console.log('getScrollState - scrollDirection: ', scrollDirection);
-  // console.log('-------------------------------------------------');
-  switch (scrollDirection) {
-    case ScrollDirection.X:
-      {
-        if (element.scrollWidth === element.clientWidth) {
-          return ScrollStates.NONE;
-        }
-        if (element.scrollLeft === 0) {
-          return ScrollStates.INITIAL;
-        }
-        if (element.scrollLeft + element.clientWidth === element.scrollWidth) {
-          return ScrollStates.END;
-        }
-        return ScrollStates.STARTED;
-      }
-    case ScrollDirection.Y:
-    default:
-      {
-        if (element.scrollHeight === element.clientHeight) {
-          return ScrollStates.NONE;
-        }
-        if (element.scrollTop === 0) {
-          return ScrollStates.INITIAL;
-        }
-        if (element.scrollTop + element.clientHeight === element.scrollHeight) {
-          return ScrollStates.END;
-        }
-        return ScrollStates.STARTED;
-      }
-  }
-};
 var useIsOverflow = function useIsOverflow(ref) {
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -118,4 +73,4 @@ var useIsOverflow = function useIsOverflow(ref) {
   };
 };
 
-export { ScrollDirection, ScrollStates, getScrollState, useIsOverflow };
+export { ScrollStates, useIsOverflow };

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -8,9 +8,9 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import lottie from 'lottie-web';
-import clamp from 'lodash/clamp';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
+import { clamp } from '../../global/js/utils/clamp.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 

package/es/components/TagOverflow/TagOverflow.d.ts

@@ -43,7 +43,11 @@ export interface TagOverflowProps {
     overflowAlign?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
     overflowClassName?: string;
     overflowType?: 'default' | 'tag';
-    onOverflowTagChange?: (arr: TagOverflowItem[]) => void;
+    onOverflowTagChange?: (value: {
+        hiddenItems?: TagOverflowItem[];
+        minWidth?: number;
+        maxWidth?: number;
+    }) => void;
     showAllTagsLabel?: string;
     tagComponent?: string;
 }

package/es/components/Tearsheet/Tearsheet.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type ButtonProps } from '@carbon/react';
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 export interface TearsheetAction extends ButtonProps<'button'> {
     label?: string;
 }
@@ -79,6 +79,10 @@ export interface TearsheetProps extends PropsWithChildren {
      * to page of a multi-page task).
      */
     label?: ReactNode;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * Navigation content, such as a set of tabs, to be displayed at the bottom
      * of the header area of the tearsheet.

package/es/components/Tearsheet/TearsheetNarrow.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { ButtonProps } from '@carbon/react';
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 export interface TearsheetNarrowProps extends PropsWithChildren {
     /**
      * The navigation actions to be shown as buttons in the action area at the
@@ -52,6 +52,10 @@ export interface TearsheetNarrowProps extends PropsWithChildren {
      * to page of a multi-page task).
      */
     label?: ReactNode;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * An optional handler that is called when the user closes the tearsheet (by
      * clicking the close button, if enabled, or clicking outside, if enabled).

package/es/components/WebTerminal/WebTerminal.js

@@ -12,11 +12,9 @@ import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { moderate02 } from '@carbon/motion';
 import { pkg } from '../../settings.js';
 import { useWebTerminal } from './hooks/index.js';
 import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
-import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
@@ -61,17 +59,6 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     shouldRender = _useState2[0],
     setRender = _useState2[1];
   var shouldReduceMotion = usePrefersReducedMotion();
-  var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit forwards', " ").concat(moderate02);
-  useIsomorphicEffect(function () {
-    var timeout = setTimeout(function () {
-      if (webTerminalRef.current && !shouldReduceMotion) {
-        webTerminalRef.current.style.animation = webTerminalAnimationName;
-      }
-    }, 0);
-    return function () {
-      return clearTimeout(timeout);
-    };
-  }, [shouldReduceMotion, webTerminalAnimationName, webTerminalRef]);
   var showDocumentationLinks = useMemo(function () {
     return documentationLinks.length > 0;
   }, [documentationLinks]);

package/es/global/js/hooks/useControllableState.d.ts

@@ -1,27 +1,15 @@
 /**
- * This custom hook simplifies the behavior of a component if it has state that
- * can be both controlled and uncontrolled. It functions identical to a
- * useState() hook and provides [state, setState] for you to use. You can use
- * the `onChange` argument to allow updates to the `state` to be communicated to
- * owners of controlled components.
+ * Copyright IBM Corp. 2025, 2025
  *
- * Note: this hook will warn if a component is switching from controlled to
- * uncontrolled, or vice-versa.
- *
- * @param {object} config
- * @param {string} config.name - the name of the custom component
- * @param {any} config.defaultValue - the default value used for the state. This will be
- * the fallback value used if `value` is not defined.
- * @param {Function} config.onChange - an optional function that is called when
- * the value of the state changes. This is useful for communicating to parents of
- * controlled components that the value is requesting to be changed.
- * @param {any} config.value - a controlled value. Omitting this means that the state is
- * uncontrolled
- * @returns {[any, Function]}
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+type Callback<T> = (value: T) => void;
+/**
+ * handles controlling state for any component that utilizes controlled and uncontrolled state
+ * @param {T} value - any generic value being held in state
+ * @param {Callback} onChange - a callback function to handle state change when the user puts the component in a controlled state
+ * @returns {[value: T, Callback]}
  */
-export function useControllableState({ defaultValue, name, onChange, value, }: {
-    name: string;
-    defaultValue: any;
-    onChange: Function;
-    value: any;
-}): [any, Function];
+export declare function useControllableState<T>(value: T, onChange?: Callback<T>): [T, Callback<T>];
+export {};

package/es/global/js/hooks/useControllableState.js

@@ -6,71 +6,29 @@
  */
 
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useRef, useEffect } from 'react';
-import pconsole from '../utils/pconsole.js';
+import { useState, useCallback } from 'react';
 
 /**
- * This custom hook simplifies the behavior of a component if it has state that
- * can be both controlled and uncontrolled. It functions identical to a
- * useState() hook and provides [state, setState] for you to use. You can use
- * the `onChange` argument to allow updates to the `state` to be communicated to
- * owners of controlled components.
- *
- * Note: this hook will warn if a component is switching from controlled to
- * uncontrolled, or vice-versa.
- *
- * @param {object} config
- * @param {string} config.name - the name of the custom component
- * @param {any} config.defaultValue - the default value used for the state. This will be
- * the fallback value used if `value` is not defined.
- * @param {Function} config.onChange - an optional function that is called when
- * the value of the state changes. This is useful for communicating to parents of
- * controlled components that the value is requesting to be changed.
- * @param {any} config.value - a controlled value. Omitting this means that the state is
- * uncontrolled
- * @returns {[any, Function]}
+ * handles controlling state for any component that utilizes controlled and uncontrolled state
+ * @param {T} value - any generic value being held in state
+ * @param {Callback} onChange - a callback function to handle state change when the user puts the component in a controlled state
+ * @returns {[value: T, Callback]}
  */
-function useControllableState(_ref) {
-  var defaultValue = _ref.defaultValue,
-    _ref$name = _ref.name,
-    name = _ref$name === undefined ? 'custom' : _ref$name,
-    onChange = _ref.onChange,
-    value = _ref.value;
-  var _useState = useState(value !== null && value !== undefined ? value : defaultValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    internalSetState = _useState2[1];
-  var controlled = useRef(null);
-  if (controlled.current === null) {
-    controlled.current = value !== undefined;
+function useControllableState(value, onChange) {
+  if (typeof value === 'function') {
+    throw new TypeError('Functions are not supported');
   }
-  function setState(stateOrUpdater) {
-    var value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
-    if (controlled.current === false) {
-      internalSetState(value);
-    }
-    if (onChange) {
-      onChange(value);
-    }
-  }
-  useEffect(function () {
-    var controlledValue = value !== undefined;
-    // Uncontrolled -> Controlled
-    // If the component prop is uncontrolled, the prop value should be undefined
-    if (controlled.current === false && controlledValue) {
-      pconsole.warn("A component is changing an uncontrolled %s component to be controlled.\n          This is likely caused by the value changing to a defined value\n          from undefined. Decide between using a controlled or uncontrolled\n          value for the lifetime of the component.\n          More info: https://reactjs.org/link/controlled-components");
-    }
-
-    // Controlled -> Uncontrolled
-    // If the component prop is controlled, the prop value should be defined
-    if (controlled.current === true && !controlledValue) {
-      pconsole.warn("A component is changing a controlled %s component to be uncontrolled.\n        'This is likely caused by the value changing to an undefined value\n        'from a defined one. Decide between using a controlled or\n        'uncontrolled value for the lifetime of the component.\n        'More info: https://reactjs.org/link/controlled-components");
-    }
-  }, [name, value]);
-  if (controlled.current === true) {
-    return [value, setState];
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledValue = _useState2[0],
+    setUncontrolledValue = _useState2[1];
+  var onControlledChange = useCallback(function (controlledValue) {
+    onChange === null || onChange === undefined || onChange(controlledValue);
+  }, [onChange]);
+  if (typeof onChange === 'function') {
+    return [value, onControlledChange];
   }
-  return [state, setState];
+  return [uncontrolledValue, setUncontrolledValue];
 }
 
 export { useControllableState };

package/es/global/js/hooks/useOverflowItems.d.ts

@@ -8,9 +8,14 @@ import { RefObject } from 'react';
 type Item = {
     id: string;
 };
-export declare const useOverflowItems: <T extends Item>(items: T[] | undefined, containerRef: RefObject<HTMLDivElement | null>, offsetRef?: RefObject<HTMLDivElement | null>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+export declare function useOverflowItems<T extends Item>(items: T[] | undefined, containerRef: RefObject<HTMLElement | null>, offsetRef?: RefObject<HTMLElement | null>, maxItems?: number, onChange?: (value: {
+    hiddenItems?: T[];
+    minWidth?: number;
+    maxWidth?: number;
+}) => void): {
     visibleItems: T[];
-    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    itemRefHandler: (id: string, node: HTMLElement | null) => () => void;
     hiddenItems: T[];
+    offsetRefHandler: (node: any) => any;
 };
 export {};

package/es/global/js/hooks/useOverflowItems.js

@@ -6,28 +6,40 @@
  */
 
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { useRef, useState } from 'react';
+import { useState, useRef } from 'react';
 import { useResizeObserver } from './useResizeObserver.js';
 
-var useOverflowItems = function useOverflowItems() {
+function useOverflowItems() {
+  var _items$slice;
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var containerRef = arguments.length > 1 ? arguments[1] : undefined;
   var offsetRef = arguments.length > 2 ? arguments[2] : undefined;
   var maxItems = arguments.length > 3 ? arguments[3] : undefined;
   var onChange = arguments.length > 4 ? arguments[4] : undefined;
-  var itemsRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    maxWidth = _useState2[0],
-    setMaxWidth = _useState2[1];
+    remainingWidth = _useState2[0],
+    setRemainingWidth = _useState2[1];
+  var offsetWidthRef = useRef(0);
+  var itemsRef = useRef(null);
   var visibleItemCount = useRef(0);
+  var minWidthRef = useRef(0);
+  var requiredWidthRef = useRef(0);
   var handleResize = function handleResize() {
     if (containerRef !== null && containerRef !== undefined && containerRef.current) {
       var _offsetRef$current;
-      var offset = (offsetRef === null || offsetRef === undefined || (_offsetRef$current = offsetRef.current) === null || _offsetRef$current === undefined ? undefined : _offsetRef$current.offsetWidth) || 0;
-      var newMax = containerRef.current.offsetWidth - offset;
-      setMaxWidth(newMax);
+      offsetWidthRef.current = (offsetRef === null || offsetRef === undefined || (_offsetRef$current = offsetRef.current) === null || _offsetRef$current === undefined ? undefined : _offsetRef$current.offsetWidth) || 0;
+      var usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
+      setRemainingWidth(usableWidth);
+    }
+  };
+  var offsetRefHandler = function offsetRefHandler(node) {
+    if (node && containerRef !== null && containerRef !== undefined && containerRef.current) {
+      offsetWidthRef.current = node.offsetWidth;
+      var usableWidth = containerRef.current.offsetWidth - offsetWidthRef.current;
+      setRemainingWidth(usableWidth);
     }
+    return node;
   };
   useResizeObserver(containerRef, handleResize);
   var getMap = function getMap() {
@@ -36,6 +48,9 @@ var useOverflowItems = function useOverflowItems() {
     }
     return itemsRef.current;
   };
+  var requiredWidth = items === null || items === undefined || (_items$slice = items.slice(0, maxItems)) === null || _items$slice === undefined ? undefined : _items$slice.reduce(function (acc, item) {
+    return acc + (getMap().get(item.id) || 0);
+  }, 0);
   var itemRefHandler = function itemRefHandler(id, node) {
     var map = getMap();
     if (node) {
@@ -55,12 +70,21 @@ var useOverflowItems = function useOverflowItems() {
     var map = getMap();
     var maxReached = false;
     var accumulatedWidth = 0;
-    var visibleItems = items.slice(0, maxItems).reduce(function (prev, cur) {
+    var includeOffset = false;
+    if (maxItems) {
+      includeOffset = requiredWidth + (offsetWidthRef === null || offsetWidthRef === undefined ? undefined : offsetWidthRef.current) > requiredWidth;
+    } else {
+      includeOffset = requiredWidth > remainingWidth + (offsetWidthRef === null || offsetWidthRef === undefined ? undefined : offsetWidthRef.current);
+    }
+    return items.slice(0, maxItems).reduce(function (prev, cur) {
       if (maxReached) {
         return prev;
       }
       var itemWidth = map.get(cur.id) || 0;
-      var willFit = accumulatedWidth + itemWidth <= maxWidth;
+      var willFit = accumulatedWidth + itemWidth <= remainingWidth;
+      if (!includeOffset) {
+        willFit = accumulatedWidth + itemWidth <= remainingWidth + (offsetWidthRef === null || offsetWidthRef === undefined ? undefined : offsetWidthRef.current);
+      }
       if (willFit) {
         accumulatedWidth += itemWidth;
         prev.push(cur);
@@ -69,20 +93,29 @@ var useOverflowItems = function useOverflowItems() {
       }
       return prev;
     }, []);
-    return visibleItems;
   };
   var visibleItems = getVisibleItems();
-  var hiddenItems = items.slice(visibleItems.length);
+  var hiddenItems = items.slice(visibleItems === null || visibleItems === undefined ? undefined : visibleItems.length);
   // only call the change handler when the number of visible items has changed
-  if (visibleItems.length !== visibleItemCount.current) {
-    visibleItemCount.current = visibleItems.length;
-    onChange === null || onChange === undefined || onChange(hiddenItems);
+  if ((visibleItems === null || visibleItems === undefined ? undefined : visibleItems.length) !== visibleItemCount.current || remainingWidth !== minWidthRef.current || requiredWidth !== requiredWidthRef.current) {
+    var _getMap, _getMap2;
+    visibleItemCount.current = visibleItems === null || visibleItems === undefined ? undefined : visibleItems.length;
+    minWidthRef.current = remainingWidth;
+    requiredWidthRef.current = requiredWidth;
+    var firstItemKey = ((_getMap = getMap()) === null || _getMap === undefined || (_getMap = _getMap.keys()) === null || _getMap === undefined || (_getMap = _getMap.next()) === null || _getMap === undefined ? undefined : _getMap.value) || '';
+    var firstItemWidth = ((_getMap2 = getMap()) === null || _getMap2 === undefined ? undefined : _getMap2.get(firstItemKey)) || 0;
+    onChange === null || onChange === undefined || onChange({
+      hiddenItems: hiddenItems,
+      minWidth: remainingWidth,
+      maxWidth: requiredWidth + firstItemWidth
+    });
   }
   return {
     visibleItems: visibleItems,
     itemRefHandler: itemRefHandler,
-    hiddenItems: hiddenItems
+    hiddenItems: hiddenItems,
+    offsetRefHandler: offsetRefHandler
   };
-};
+}
 
 export { useOverflowItems };

package/es/global/js/hooks/useOverflowString.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2025, 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 { RefObject } from 'react';
+export declare function useOverflowStringWidth(elementRef: RefObject<HTMLElement>): boolean | undefined;
+export declare const useOverflowStringHeight: (elementRef: RefObject<HTMLElement>) => boolean | undefined;

package/es/global/js/hooks/useOverflowString.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useCallback, useEffect } from 'react';
+
+function useOverflowStringWidth(elementRef) {
+  var _elementRef$current;
+  var innerText = elementRef === null || elementRef === undefined || (_elementRef$current = elementRef.current) === null || _elementRef$current === undefined ? undefined : _elementRef$current.innerText;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOverflowing = _useState2[0],
+    setIsOverflowing = _useState2[1];
+  var checkWidthOverflow = useCallback(function () {
+    var _elementRef$current2, _elementRef$current3;
+    var offsetWidth = elementRef === null || elementRef === undefined || (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === undefined ? undefined : _elementRef$current2.offsetWidth;
+    var scrollWidth = elementRef === null || elementRef === undefined || (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === undefined ? undefined : _elementRef$current3.scrollWidth;
+    if (offsetWidth && scrollWidth) {
+      setIsOverflowing(offsetWidth < scrollWidth);
+    }
+  }, [elementRef]);
+  useEffect(function () {
+    checkWidthOverflow();
+  }, [checkWidthOverflow, elementRef, innerText]);
+  return isOverflowing;
+}
+var useOverflowStringHeight = function useOverflowStringHeight(elementRef) {
+  var _elementRef$current4;
+  var innerText = elementRef === null || elementRef === undefined || (_elementRef$current4 = elementRef.current) === null || _elementRef$current4 === undefined ? undefined : _elementRef$current4.innerText;
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOverflowing = _useState4[0],
+    setIsOverflowing = _useState4[1];
+  var checkHeightOverflow = useCallback(function () {
+    var _elementRef$current5, _elementRef$current6;
+    var offsetHeight = elementRef === null || elementRef === undefined || (_elementRef$current5 = elementRef.current) === null || _elementRef$current5 === undefined ? undefined : _elementRef$current5.offsetHeight;
+    var scrollHeight = elementRef === null || elementRef === undefined || (_elementRef$current6 = elementRef.current) === null || _elementRef$current6 === undefined ? undefined : _elementRef$current6.scrollHeight;
+    if (offsetHeight && scrollHeight) {
+      setIsOverflowing(offsetHeight < scrollHeight);
+    }
+  }, [elementRef]);
+  useEffect(function () {
+    checkHeightOverflow();
+  }, [checkHeightOverflow, elementRef, innerText]);
+  return isOverflowing;
+};
+
+export { useOverflowStringHeight, useOverflowStringWidth };

package/es/global/js/hooks/usePresence.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { RefObject } from 'react';
-export declare const usePresence: (open: boolean, ref: RefObject<HTMLElement>, animationName: string) => {
+export declare function usePresence(open: boolean, ref: RefObject<HTMLElement>, animationName: string): {
     shouldRender: boolean;
 };

package/es/global/js/hooks/usePresence.js

@@ -11,7 +11,7 @@ import { useState, useEffect } from 'react';
 // Used as a replacement for AnimatePresence from framer-motion,
 // this hook will return a boolean value to let the component
 // calling this hook to know whether it should render or not
-var usePresence = function usePresence(open, ref, animationName) {
+function usePresence(open, ref, animationName) {
   var _useState = useState(open),
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
@@ -38,6 +38,6 @@ var usePresence = function usePresence(open, ref, animationName) {
   return {
     shouldRender: shouldRender
   };
-};
+}
 
 export { usePresence };

package/es/global/js/utils/checkForOverflow.js

@@ -11,16 +11,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/**
- * used to calculate if a element is overflowing the width or height of an area
- */
-
-var checkWidthOverflow = function checkWidthOverflow(el) {
-  if (el) {
-    return (el === null || el === undefined ? undefined : el.offsetWidth) < (el === null || el === undefined ? undefined : el.scrollWidth);
-  }
-  return false;
-};
 var checkHeightOverflow = function checkHeightOverflow(el) {
   if (el) {
     return (el === null || el === undefined ? undefined : el.offsetHeight) < (el === null || el === undefined ? undefined : el.scrollHeight);
@@ -28,4 +18,4 @@ var checkHeightOverflow = function checkHeightOverflow(el) {
   return false;
 };
 
-export { checkHeightOverflow, checkWidthOverflow };
+export { checkHeightOverflow };

package/es/global/js/utils/clamp.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const clamp: (value: number, min: number, max: number) => number | void;

package/es/global/js/utils/clamp.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+// clamp utility, replacing lodash.clamp
+// If it's lower than the lower bound, we pick the lower bound.
+// If it's higher than the upper bound, we pick the upper bound.
+// Otherwise, we pick the number passed in.
+var clamp = function clamp(value, min, max) {
+  if (isNaN(value) || isNaN(min) || isNaN(max)) {
+    return;
+  }
+  if (max !== undefined) {
+    value = value <= max ? value : max;
+  }
+  {
+    value = value >= min ? value : min;
+  }
+  return value;
+};
+
+export { clamp };

package/es/global/js/utils/debounce.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const debounce: (func: any, delay: number, leading?: boolean) => () => void;

package/es/global/js/utils/debounce.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var debounce = function debounce(func, delay) {
+  var leading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var timeout;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    if (leading && !timeout) {
+      func.apply(undefined, args);
+    }
+    timeout = setTimeout(function () {
+      timeout = null;
+      if (!leading) {
+        func.apply(undefined, args);
+      }
+    }, delay);
+  };
+};
+
+export { debounce };

package/es/global/js/utils/deepCompareObject.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const deepCompareObject: (a: any, b: any) => boolean;