@carbon/react 1.83.0 → 1.84.0

package/lib/internal/useControllableState.d.ts

@@ -30,5 +30,5 @@ interface UseControllableStateConfig<T> {
  * Note: This hook will warn if the component switches between controlled and
  * uncontrolled states.
  */
-export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void];
+export declare const useControllableState: <T>({ defaultValue, name, onChange, value, }: UseControllableStateConfig<T>) => [T, (stateOrUpdater: T | ((prev: T) => T)) => void, boolean];
 export {};

package/lib/internal/useControllableState.js

@@ -20,13 +20,12 @@ var warning = require('./warning.js');
  * Note: This hook will warn if the component switches between controlled and
  * uncontrolled states.
  */
-const useControllableState = _ref => {
-  let {
-    defaultValue,
-    name = 'custom',
-    onChange,
-    value
-  } = _ref;
+const useControllableState = ({
+  defaultValue,
+  name = 'custom',
+  onChange,
+  value
+}) => {
   const [state, internalSetState] = React.useState(typeof value !== 'undefined' ? value : defaultValue);
   const controlled = React.useRef(null);
   if (controlled.current === null) {
@@ -55,9 +54,9 @@ const useControllableState = _ref => {
     }
   }, [name, value]);
   if (controlled.current === true) {
-    return [value, setState];
+    return [value, setState, controlled.current];
   }
-  return [state, setState];
+  return [state, setState, controlled.current];
 };
 
 exports.useControllableState = useControllableState;

package/lib/internal/useDelayedState.js

@@ -27,8 +27,7 @@ function useDelayedState(initialState) {
   const timeoutId = React.useRef(null);
   // We use `useCallback` to match the signature of React's `useState` which will
   // always return the same reference for the `setState` updater
-  const setStateWithDelay = React.useCallback(function (stateToSet) {
-    let delayMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  const setStateWithDelay = React.useCallback((stateToSet, delayMs = 0) => {
     window.clearTimeout(timeoutId.current ?? undefined);
     timeoutId.current = null;
     if (delayMs === 0) {

package/lib/internal/useDocumentLang.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+/**
+ * React hook that returns the current document language and updates on changes.
+ *
+ * @returns {string} The current document language code.
+ */
+export declare function useDocumentLang(): string;

package/lib/internal/useId.js

@@ -38,8 +38,7 @@ const defaultId = 'id';
  * @param {string} [prefix]
  * @returns {string}
  */
-function useCompatibleId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+function useCompatibleId(prefix = defaultId) {
   const contextPrefix = useIdPrefix.useIdPrefix();
   const [id, setId] = React.useState(() => {
     if (serverHandoffCompleted) {
@@ -66,8 +65,7 @@ function useCompatibleId() {
  * @param {string} [prefix]
  * @returns {string}
  */
-function useReactId() {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+function useReactId(prefix = defaultId) {
   const contextPrefix = useIdPrefix.useIdPrefix();
   return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
 }

package/lib/internal/useMatchMedia.js

@@ -17,8 +17,7 @@ var React = require('react');
  * @param defaultState - The initial state to return before the media query is evaluated. Defaults to `false`.
  * @returns Whether the media query matches.
  */
-const useMatchMedia = function (mediaQuery) {
-  let defaultState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+const useMatchMedia = (mediaQuery, defaultState = false) => {
   const [matches, setMatches] = React.useState(defaultState);
   React.useEffect(() => {
     const listener = event => {

package/lib/internal/useMergedRefs.d.ts

@@ -13,4 +13,4 @@ import { type ForwardedRef, type Ref } from 'react';
  * accepts an array of refs and returns a callback ref that, when attached to a
  * node, assigns that node to every ref in the array.
  */
-export declare const useMergedRefs: <T>(refs: ForwardedRef<T>[]) => Ref<T>;
+export declare const useMergedRefs: <T>(refs: (ForwardedRef<T> | undefined)[]) => Ref<T>;

package/lib/internal/useNoInteractiveChildren.js

@@ -11,8 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function useNoInteractiveChildren(ref) {
-  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
+function useNoInteractiveChildren(ref, message = 'component should have no interactive child nodes') {
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*
@@ -29,8 +28,7 @@ function useNoInteractiveChildren(ref) {
     }, []);
   }
 }
-function useInteractiveChildrenNeedDescription(ref) {
-  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : `interactive child node(s) should have an \`aria-describedby\` property`;
+function useInteractiveChildrenNeedDescription(ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) {
   if (process.env.NODE_ENV !== 'production') {
     // TODO: https://github.com/carbon-design-system/carbon/issues/19005
     /*

package/lib/internal/useNormalizedInputProps.js

@@ -28,16 +28,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * helper messages, and conditionally provides the appropriate validation
  * message and accompanying icon.
  */
-const useNormalizedInputProps = _ref => {
-  let {
-    id,
-    readOnly,
-    disabled,
-    invalid,
-    invalidText,
-    warn,
-    warnText
-  } = _ref;
+const useNormalizedInputProps = ({
+  id,
+  readOnly,
+  disabled,
+  invalid,
+  invalidText,
+  warn,
+  warnText
+}) => {
   const prefix = usePrefix.usePrefix();
   const normalizedProps = {
     disabled: !readOnly && disabled,

package/lib/internal/useOverflowItems.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 { ReactNode, RefObject } from 'react';
+type Item = {
+    id: string;
+};
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+declare const useOverflowItems: <T extends Item>(items: T[] | ReactNode, containerRef: RefObject<HTMLDivElement>, offsetRef?: RefObject<HTMLDivElement>, maxItems?: number, onChange?: (hiddenItems: T[]) => void) => {
+    visibleItems: T[];
+    hiddenItems: T[];
+    itemRefHandler: () => void;
+} | {
+    visibleItems: T[];
+    itemRefHandler: (id: string, node: HTMLDivElement | null) => () => void;
+    hiddenItems: T[];
+};
+export default useOverflowItems;

package/lib/internal/useOverflowItems.js

@@ -0,0 +1,126 @@
+/**
+ * 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 React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+var usePreviousValue = require('./usePreviousValue.js');
+
+/**
+ * Manages overflow items in a container by automatically hiding items that don't fit.
+ * @param items - Array of items to manage for overflow, each must have an `id` property.
+ * @param containerRef - React ref to the container element that holds the items.
+ * @param offsetRef - Optional ref to an offset element (like a "more" button) whose width is reserved when calculating available space.
+ * @param maxItems - Optional maximum number of visible items. If undefined, only container space constrains visibility.
+ * @param onChange - Optional callback called when hidden items change. Receives array of currently hidden items.
+ * @returns Object with `visibleItems` (items to display), `hiddenItems` (items that don't fit), and `itemRefHandler` (function to attach refs to items for width measurement).
+ */
+
+const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) => {
+  const itemsRef = React.useRef(null);
+  const [maxWidth, setMaxWidth] = React.useState(0);
+  if (!items || !Array.isArray(items)) {
+    return {
+      visibleItems: [],
+      hiddenItems: [],
+      itemRefHandler: () => {}
+    };
+  }
+  const handleResize = () => {
+    if (containerRef.current) {
+      const offset = offsetRef?.current?.offsetWidth || 0;
+      const newMax = containerRef.current.offsetWidth - offset;
+      setMaxWidth(newMax);
+    }
+  };
+  useResizeObserver.useResizeObserver({
+    ref: containerRef,
+    onResize: handleResize
+  });
+  const getMap = () => {
+    if (!itemsRef.current) {
+      itemsRef.current = new Map();
+    }
+    return itemsRef.current;
+  };
+  const itemRefHandler = (id, node) => {
+    const map = getMap();
+    if (node) {
+      const style = getComputedStyle?.(node);
+      const totalWidth = node.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+      map.set(id, totalWidth);
+    }
+    return () => {
+      map.delete(id);
+    };
+  };
+  const getVisibleItems = () => {
+    if (!items || Array.isArray(items) === false) {
+      return [];
+    }
+    if (!containerRef) {
+      return items;
+    }
+    const map = getMap();
+    let maxReached = false;
+    let accumulatedWidth = 0;
+    const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => {
+      if (maxReached) {
+        return prev;
+      }
+      const itemWidth = map.get(cur.id) || 0;
+      const willFit = accumulatedWidth + itemWidth <= maxWidth;
+      if (willFit) {
+        accumulatedWidth += itemWidth;
+        prev.push(cur);
+      } else {
+        maxReached = true;
+      }
+      return prev;
+    }, []);
+    return visibleItems;
+  };
+
+  // Memoize visible items calculation to avoid recalculating on every render
+  const visibleItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return getVisibleItems();
+  }, [items, maxWidth, maxItems]);
+
+  // Memoize hidden items calculation
+  const hiddenItems = React.useMemo(() => {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.slice(visibleItems.length);
+  }, [items, visibleItems]);
+
+  // Use previous value to compare and only call onChange when needed
+  const previousHiddenItems = usePreviousValue.usePreviousValue(hiddenItems);
+
+  // Only call onChange if hidden items actually changed
+  React.useEffect(() => {
+    if (previousHiddenItems && onChange) {
+      const hasChanged = hiddenItems.length !== previousHiddenItems.length || hiddenItems.some((item, index) => item !== previousHiddenItems[index]);
+      if (hasChanged) {
+        onChange(hiddenItems);
+      }
+    }
+  }, [hiddenItems, previousHiddenItems, onChange]);
+  return {
+    visibleItems,
+    itemRefHandler,
+    hiddenItems
+  };
+};
+
+exports["default"] = useOverflowItems;

package/lib/internal/useResizeObserver.js

@@ -11,11 +11,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const useResizeObserver = _ref => {
-  let {
-    ref,
-    onResize
-  } = _ref;
+const useResizeObserver = ({
+  ref,
+  onResize
+}) => {
   const [width, setWidth] = React.useState(-1);
   const [height, setHeight] = React.useState(-1);
   const entriesToHandle = React.useRef(null);

package/lib/internal/useSavedCallback.js

@@ -24,9 +24,7 @@ const useSavedCallback = callback => {
   React.useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
-  return React.useCallback(function () {
-    return savedCallback.current ? savedCallback.current(...arguments) : undefined;
-  }, []);
+  return React.useCallback((...args) => savedCallback.current ? savedCallback.current(...args) : undefined, []);
 };
 
 exports.useSavedCallback = useSavedCallback;

package/lib/internal/wrapFocus.js

@@ -34,8 +34,7 @@ const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOC
  * @returns {boolean} Whether the node or one of its ancestors is in a floating
  * menu.
  */
-const elementOrParentIsFloatingMenu = function (node) {
-  let selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+const elementOrParentIsFloatingMenu = (node, selectorsFloatingMenus = []) => {
   if (node instanceof Element && typeof node.closest === 'function') {
     const allSelectorsFloatingMenus = ['.cds--overflow-menu-options', '.cds--tooltip', '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => !!node.closest(selector));
@@ -47,36 +46,29 @@ const elementOrParentIsFloatingMenu = function (node) {
  * Ensures the focus is kept within the given container by implementing
  * "focus-wrap" behavior.
  */
-const wrapFocus = _ref => {
-  let {
-    bodyNode,
-    startTrapNode,
-    endTrapNode,
-    currentActiveNode,
-    oldActiveNode,
-    selectorsFloatingMenus
-  } = _ref;
+const wrapFocus = ({
+  bodyNode,
+  startTrapNode,
+  endTrapNode,
+  currentActiveNode,
+  oldActiveNode,
+  selectorsFloatingMenus
+}) => {
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
     if (currentActiveNode === startTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_PRECEDING) {
-      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).reverse().find(_ref2 => {
-        let {
-          offsetParent
-        } = _ref2;
-        return Boolean(offsetParent);
-      });
+      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).reverse().find(({
+        offsetParent
+      }) => Boolean(offsetParent));
       if (tabbableElement) {
         tabbableElement.focus();
       } else if (bodyNode !== oldActiveNode) {
         bodyNode.focus();
       }
     } else if (currentActiveNode === endTrapNode || comparisonResult & DOCUMENT_POSITION_BROAD_FOLLOWING) {
-      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).find(_ref3 => {
-        let {
-          offsetParent
-        } = _ref3;
-        return Boolean(offsetParent);
-      });
+      const tabbableElement = Array.from(bodyNode.querySelectorAll(navigation.selectorTabbable)).find(({
+        offsetParent
+      }) => Boolean(offsetParent));
       if (tabbableElement) {
         tabbableElement.focus();
       } else if (bodyNode !== oldActiveNode) {
@@ -92,12 +84,11 @@ const wrapFocus = _ref => {
  *
  * Note: This must be called *before* focus moves using `onKeyDown` or similar.
  */
-const wrapFocusWithoutSentinels = _ref4 => {
-  let {
-    containerNode,
-    currentActiveNode,
-    event
-  } = _ref4;
+const wrapFocusWithoutSentinels = ({
+  containerNode,
+  currentActiveNode,
+  event
+}) => {
   if (!containerNode) return;
   if (['blur', 'focusout', 'focusin', 'focus'].includes(event.type) && process.env.NODE_ENV !== 'production') {
     throw new Error(`Error: wrapFocusWithoutSentinels(...) called in unsupported ${event.type} event.\n\nCall wrapFocusWithoutSentinels(...) from onKeyDown instead.`);

package/lib/prop-types/deprecate.js

@@ -13,7 +13,7 @@ var warning = require('../internal/warning.js');
 
 const didWarnAboutDeprecation = {};
 function deprecate(propType, message) {
-  function checker(props, propName, componentName) {
+  function checker(props, propName, componentName, ...rest) {
     if (props[propName] === undefined) {
       return;
     }
@@ -24,9 +24,6 @@ function deprecate(propType, message) {
       };
       process.env.NODE_ENV !== "production" ? warning.warning(false, message || `The prop \`${propName}\` has been deprecated for the ` + `${componentName} component. It will be removed in the next major ` + `release`) : void 0;
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   }
   return checker;

package/lib/prop-types/deprecateValuesWithin.js

@@ -13,7 +13,7 @@ var warning = require('../internal/warning.js');
 
 const didWarnAboutDeprecation = {};
 function deprecateValuesWithin(propType, allowedValues, propMappingFunction) {
-  return function checker(props, propName, componentName) {
+  return function checker(props, propName, componentName, ...rest) {
     if (props[propName] === undefined) {
       return;
     }
@@ -29,9 +29,6 @@ function deprecateValuesWithin(propType, allowedValues, propMappingFunction) {
         process.env.NODE_ENV !== "production" ? warning.warning(false, message) : void 0;
       }
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   };
 }

package/lib/prop-types/isRequiredOneOf.js

@@ -19,13 +19,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  */
 const isRequiredOneOf = propTypes => {
   const names = Object.keys(propTypes);
-  const checker = propType => function (props, propName, componentName) {
+  const checker = propType => (props, propName, componentName, ...rest) => {
     if (process.env.NODE_ENV !== 'production' && names.every(name => typeof props[name] === 'undefined')) {
       return new Error(`${componentName} requires one of the following props: ${names.join(', ')}`);
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   };
   return names.reduce((acc, name) => ({

package/lib/prop-types/requiredIfGivenPropIsTruthy.js

@@ -17,13 +17,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * becomes required if the prop corresponding to the provided prop name exists.
  */
 function requiredIfGivenPropIsTruthy(name, propType) {
-  return function check(props, propName, componentName) {
+  return function check(props, propName, componentName, ...rest) {
     if (process.env.NODE_ENV !== 'production' && props[name] == true && props[propName] == null) {
       return new Error(`You must provide a value for \`${propName}\` in \`${componentName}\` if \`${name}\` exists.`);
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   };
 }

package/lib/tools/events.js

@@ -18,10 +18,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-const composeEventHandlers = handlers => function (event) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
+const composeEventHandlers = handlers => (event, ...args) => {
   for (const handler of handlers) {
     if (event.defaultPrevented) {
       break;

package/lib/tools/mergeRefs.js

@@ -13,20 +13,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param {...Ref<Element>} refs List of React refs to merge.
  * @returns {Ref<Element>} Merged React ref.
  */
-const mergeRefs = function () {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-  return el => {
-    refs.forEach(ref => {
-      // https://github.com/facebook/react/issues/13029#issuecomment-410002316
-      if (typeof ref === 'function') {
-        ref(el);
-      } else if (Object(ref) === ref) {
-        ref.current = el;
-      }
-    });
-  };
+const mergeRefs = (...refs) => el => {
+  refs.forEach(ref => {
+    // https://github.com/facebook/react/issues/13029#issuecomment-410002316
+    if (typeof ref === 'function') {
+      ref(el);
+    } else if (Object(ref) === ref) {
+      ref.current = el;
+    }
+  });
 };
 var mergeRefs$1 = mergeRefs;
 

package/lib/tools/uniqueId.js

@@ -10,8 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 let lastId = 0;
-const uniqueId = function () {
-  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
+const uniqueId = (prefix = 'id') => {
   lastId++;
   return `${prefix}${lastId}`;
 };

package/lib/tools/wrapComponent.js

@@ -24,22 +24,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-const wrapComponent = _ref => {
-  let {
-    name,
-    className: getClassName,
-    type
-  } = _ref;
+const wrapComponent = ({
+  name,
+  className: getClassName,
+  type
+}) => {
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
    * @returns
    */
-  function Component(_ref2) {
-    let {
-      className: baseClassName,
-      ...other
-    } = _ref2;
+  function Component({
+    className: baseClassName,
+    ...other
+  }) {
     const prefix = usePrefix.usePrefix();
     const componentClass = cx__default["default"](typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
     return /*#__PURE__*/React__default["default"].createElement(type, {