@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

package/lib/internal/FloatingMenu.js

@@ -54,16 +54,15 @@ const DIRECTION_BOTTOM = 'bottom';
  * Computes the floating menu's position based on the menu size, trigger element
  * position, offset, direction, and container.
  */
-const getFloatingPosition = _ref => {
-  let {
-    menuSize,
-    refPosition,
-    offset,
-    direction,
-    scrollX,
-    scrollY,
-    container
-  } = _ref;
+const getFloatingPosition = ({
+  menuSize,
+  refPosition,
+  offset,
+  direction,
+  scrollX,
+  scrollY,
+  container
+}) => {
   const {
     left: refLeft = 0,
     top: refTop = 0,
@@ -106,24 +105,23 @@ const getFloatingPosition = _ref => {
   };
   return positions[direction]();
 };
-const FloatingMenu = _ref2 => {
-  let {
-    children,
-    flipped,
-    focusTrap,
-    menuDirection = DIRECTION_BOTTOM,
-    menuOffset = {
-      top: 0,
-      left: 0
-    },
-    menuRef: externalMenuRef,
-    onPlace,
-    selectorPrimaryFocus,
-    styles,
-    target = () => document.body,
-    triggerRef,
-    updateOrientation
-  } = _ref2;
+const FloatingMenu = ({
+  children,
+  flipped,
+  focusTrap,
+  menuDirection = DIRECTION_BOTTOM,
+  menuOffset = {
+    top: 0,
+    left: 0
+  },
+  menuRef: externalMenuRef,
+  onPlace,
+  selectorPrimaryFocus,
+  styles,
+  target = () => document.body,
+  triggerRef,
+  updateOrientation
+}) => {
   const prefix = React.useContext(usePrefix.PrefixContext);
   const [floatingPosition, setFloatingPosition] = React.useState(undefined);
   const menuBodyRef = React.useRef(null);

package/lib/internal/Selection.js

@@ -16,14 +16,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 
-const callOnChangeHandler = _ref => {
-  let {
-    isControlled,
-    isMounted,
-    onChangeHandlerControlled,
-    onChangeHandlerUncontrolled,
-    selectedItems
-  } = _ref;
+const callOnChangeHandler = ({
+  isControlled,
+  isMounted,
+  onChangeHandlerControlled,
+  onChangeHandlerUncontrolled,
+  selectedItems
+}) => {
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
       onChangeHandlerControlled({
@@ -34,15 +33,14 @@ const callOnChangeHandler = _ref => {
     onChangeHandlerUncontrolled(selectedItems);
   }
 };
-const useSelection = _ref2 => {
-  let {
-    disabled,
-    onChange,
-    initialSelectedItems = [],
-    selectedItems: controlledItems,
-    selectAll = false,
-    filteredItems = []
-  } = _ref2;
+const useSelection = ({
+  disabled,
+  onChange,
+  initialSelectedItems = [],
+  selectedItems: controlledItems,
+  selectAll = false,
+  filteredItems = []
+}) => {
   const isMounted = React.useRef(false);
   const savedOnChange = React.useRef(onChange);
   const [uncontrolledItems, setUncontrolledItems] = React.useState(initialSelectedItems);

package/{es/feature-flags.d.ts → lib/internal/__mocks__/mockHTMLElement.d.ts}

@@ -1,7 +1,9 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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 {};
+export declare const mockHTMLElement: (options: HTMLElement) => {
+    mockRestore: () => void;
+};

package/lib/internal/getAnnouncement.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+/** Returns an announcement message when the remaining count is low. */
+export declare const getAnnouncement: (count: number, maxCount?: number, singularEntityName?: string, pluralEntityName?: string) => string | null;

package/lib/internal/getAnnouncement.js

@@ -0,0 +1,26 @@
+/**
+ * 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 });
+
+/** Returns an announcement message when the remaining count is low. */
+const getAnnouncement = (count, maxCount, singularEntityName = 'character', pluralEntityName = 'characters') => {
+  if (typeof maxCount === 'undefined') return null;
+  const remaining = maxCount - count;
+  if (remaining <= 10 && remaining > 0) {
+    const entityName = remaining === 1 ? singularEntityName : pluralEntityName;
+    return `${remaining} ${entityName} left.`;
+  }
+  if (remaining <= 0) {
+    return `Maximum ${pluralEntityName} reached.`;
+  }
+  return null;
+};
+
+exports.getAnnouncement = getAnnouncement;

package/lib/internal/keyboard/match.js

@@ -34,13 +34,12 @@ const matches = (event, keysToMatch) => {
  * @param keyObj - An object with key properties to match against.
  * @returns `true` if the event or code matches the key definition.
  */
-const match = (eventOrCode, _ref) => {
-  let {
-    key,
-    which,
-    keyCode,
-    code
-  } = _ref;
+const match = (eventOrCode, {
+  key,
+  which,
+  keyCode,
+  code
+}) => {
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;
   }

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/useResizeObserver.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 const useResizeObserver: ({ ref, onResize, }: {
+    ref: RefObject<HTMLElement>;
+    onResize?: (rect: DOMRectReadOnly) => void;
+}) => {
+    width: number;
+    height: number;
+};

package/lib/internal/useResizeObserver.js

@@ -0,0 +1,77 @@
+/**
+ * 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');
+
+const useResizeObserver = ({
+  ref,
+  onResize
+}) => {
+  const [width, setWidth] = React.useState(-1);
+  const [height, setHeight] = React.useState(-1);
+  const entriesToHandle = React.useRef(null);
+  const cb = React.useRef(onResize);
+  React.useEffect(() => {
+    // ref for onResize removes it as dependency from useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = onResize;
+  }, [onResize]);
+  React.useEffect(() => {
+    const getInitialSize = () => {
+      if (ref.current) {
+        const refComputedStyle = window.getComputedStyle(ref.current);
+        const initialWidth = (ref.current?.offsetWidth ?? 0) - (typeof refComputedStyle?.paddingLeft === 'string' && refComputedStyle?.paddingLeft.length ? parseFloat(refComputedStyle?.paddingLeft) : 0) - (typeof refComputedStyle?.paddingRight === 'string' && refComputedStyle?.paddingRight.length ? parseFloat(refComputedStyle?.paddingRight) : 0);
+        const initialHeight = (ref.current?.offsetHeight ?? 0) - (typeof refComputedStyle?.paddingTop === 'string' && refComputedStyle?.paddingTop.length ? parseFloat(refComputedStyle?.paddingTop) : 0) - (typeof refComputedStyle?.paddingBottom === 'string' && refComputedStyle?.paddingBottom.length ? parseFloat(refComputedStyle?.paddingBottom) : 0);
+        setWidth(initialWidth);
+        setHeight(initialHeight);
+      }
+    };
+    if (!ref?.current || width >= 0 && height >= 0) {
+      return;
+    }
+    getInitialSize();
+  }, [width, height]);
+  React.useLayoutEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+    const doCallbacks = () => {
+      if (!ref?.current || !Array.isArray(entriesToHandle?.current)) {
+        return;
+      }
+      const entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      cb.current && cb.current(entry.contentRect);
+    };
+    const observer = new ResizeObserver(entries => {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+      window.requestAnimationFrame(() => {
+        // do callbacks
+        doCallbacks();
+      });
+    });
+
+    // observe all refs passed
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return {
+    width,
+    height
+  };
+};
+
+exports.useResizeObserver = useResizeObserver;

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

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var tabbable = require('tabbable');
 var navigation = require('./keyboard/navigation.js');
 
@@ -35,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));
@@ -48,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) {
@@ -93,18 +84,15 @@ 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;
-  React.useEffect(() => {
-    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.`);
-    }
-  }, []);
+  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.`);
+  }
 
   // Use `tabbable` to get the focusable elements in tab order.
   // `selectorTabbable` returns elements in DOM order which is why it's not

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;