@carbon/react 1.29.0 → 1.30.0-rc.0

package/lib/internal/keyboard/navigation.js

@@ -32,39 +32,40 @@ const getNextIndex = (key, index, arrayLength) => {
   if (match.match(key, keys.ArrowRight)) {
     return (index + 1) % arrayLength;
   }
-
   if (match.match(key, keys.ArrowLeft)) {
     return (index + arrayLength - 1) % arrayLength;
   }
 };
+
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
  * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
  */
-
-const DOCUMENT_POSITION_BROAD_PRECEDING = // Checks `typeof Node` for `react-docgen`
+const DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
+
 /**
  * A flag `node.compareDocumentPosition(target)` returns,
  * that indicates `target` is located later than `node` in the document or `node` contains `target`.
  */
-
-const DOCUMENT_POSITION_BROAD_FOLLOWING = // Checks `typeof Node` for `react-docgen`
+const DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
 typeof Node !== 'undefined' && Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
+
 /**
  * CSS selector that selects major nodes that are sequential-focusable.
  */
-
 const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
   button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
   textarea:not([disabled]):not([tabindex='-1']),
   iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
 `;
+
 /**
  * CSS selector that selects major nodes that are click focusable
  */
-
 const selectorFocusable = `
   a[href], area[href], input:not([disabled]),
   button:not([disabled]),select:not([disabled]),

package/lib/internal/useAnnouncer.js

@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function useAnnouncer(textCount, maxCount) {
   const lastTen = maxCount - 10;
-
   if (textCount >= lastTen) {
     return `${maxCount - textCount} characters left.`;
   }

package/lib/internal/useAttachedMenu.js

@@ -27,14 +27,11 @@ var React = require('react');
  * @param {Element|object} anchor The element or ref the menu should visually be attached to.
  * @returns {useAttachedMenuReturn}
  */
-
 function useAttachedMenu(anchor) {
   const [open, setOpen] = React.useState(false);
   const [position, setPosition] = React.useState([[-1, -1], [-1, -1]]);
-
   function openMenu() {
-    const anchorEl = (anchor === null || anchor === void 0 ? void 0 : anchor.current) || anchor;
-
+    const anchorEl = anchor?.current || anchor;
     if (anchorEl) {
       const {
         left,
@@ -44,14 +41,11 @@ function useAttachedMenu(anchor) {
       } = anchorEl.getBoundingClientRect();
       setPosition([[left, right], [top, bottom]]);
     }
-
     setOpen(true);
   }
-
   function closeMenu() {
     setOpen(false);
   }
-
   function handleClick() {
     if (open) {
       closeMenu();
@@ -59,7 +53,6 @@ function useAttachedMenu(anchor) {
       openMenu();
     }
   }
-
   function handleMousedown(e) {
     // prevent default for mousedown on trigger element to avoid
     // the "blur" event from firing on the menu as this would close
@@ -67,7 +60,6 @@ function useAttachedMenu(anchor) {
     // "blur" event.
     e.preventDefault();
   }
-
   return {
     open,
     x: position[0],

package/lib/internal/useControllableState.js

@@ -33,7 +33,6 @@ var warning = require('./warning.js');
  * uncontrolled
  * @returns {[any, Function]}
  */
-
 function useControllableState(_ref) {
   let {
     defaultValue,
@@ -43,42 +42,36 @@ function useControllableState(_ref) {
   } = _ref;
   const [state, internalSetState] = React.useState(value ?? defaultValue);
   const controlled = React.useRef(null);
-
   if (controlled.current === null) {
     controlled.current = value !== undefined;
   }
-
   function setState(stateOrUpdater) {
     const value = typeof stateOrUpdater === 'function' ? stateOrUpdater(state) : stateOrUpdater;
-
     if (controlled.current === false) {
       internalSetState(value);
     }
-
     if (onChange) {
       onChange(value);
     }
   }
-
   React.useEffect(() => {
-    const controlledValue = value !== undefined; // Uncontrolled -> Controlled
-    // If the component prop is uncontrolled, the prop value should be undefined
+    const controlledValue = value !== undefined;
 
+    // Uncontrolled -> Controlled
+    // If the component prop is uncontrolled, the prop value should be undefined
     if (controlled.current === false && controlledValue) {
       process.env.NODE_ENV !== "production" ? warning.warning(false, 'A component is changing an uncontrolled %s component to be controlled. ' + 'This is likely caused by the value changing to a defined value ' + 'from undefined. Decide between using a controlled or uncontrolled ' + 'value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
-    } // Controlled -> Uncontrolled
-    // If the component prop is controlled, the prop value should be defined
-
+    }
 
+    // Controlled -> Uncontrolled
+    // If the component prop is controlled, the prop value should be defined
     if (controlled.current === true && !controlledValue) {
       process.env.NODE_ENV !== "production" ? warning.warning(false, 'A component is changing a controlled %s component to be uncontrolled. ' + 'This is likely caused by the value changing to an undefined value ' + 'from a defined one. Decide between using a controlled or ' + 'uncontrolled value for the lifetime of the component. ' + 'More info: https://reactjs.org/link/controlled-components', name) : void 0;
     }
   }, [name, value]);
-
   if (controlled.current === true) {
     return [value, setState];
   }
-
   return [state, setState];
 }
 

package/lib/internal/useDelayedState.js

@@ -24,19 +24,17 @@ var React = require('react');
 
 function useDelayedState(initialState) {
   const [state, setState] = React.useState(initialState);
-  const timeoutId = React.useRef(null); // We use `useCallback` to match the signature of React's `useState` which will
+  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;
     window.clearTimeout(timeoutId.current ?? undefined);
     timeoutId.current = null;
-
     if (delayMs === 0) {
       setState(stateToSet);
       return;
     }
-
     timeoutId.current = window.setTimeout(() => {
       setState(stateToSet);
       timeoutId.current = null;

package/lib/internal/useEffectOnce.js

@@ -17,7 +17,6 @@ var React = require('react');
  *
  * @param {Function} callback
  */
-
 function useEffectOnce(callback) {
   const savedCallback = React.useRef(callback);
   const effectGuard = React.useRef(false);

package/lib/internal/useEvent.js

@@ -11,18 +11,76 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+/* eslint-disable jsdoc/check-tag-names */
+
+/**
+ * @template {keyof GlobalEventHandlersEventMap} E
+ * @typedef {(event: GlobalEventHandlersEventMap[E]) => void} GlobalEventCallback
+ */
+
+/**
+ * @template T
+ * @typedef {import('react').MutableRefObject<T>} MutableRefObject<T>
+ */
+
+/**
+ * @template {keyof GlobalEventHandlersEventMap} E
+ * @param {HTMLElement | MutableRefObject<HTMLElement | null>} elementOrRef
+ * @param {E} eventName
+ * @param {GlobalEventCallback<E>} callback
+ */
+function useEvent(elementOrRef, eventName, callback) {
+  /**
+   * @type {MutableRefObject<GlobalEventCallback<E> | null>}
+   */
+  const savedCallback = React.useRef(null);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  React.useEffect(() => {
+    /**
+     * @type {GlobalEventCallback<E>}
+     */
+    const handler = event => {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    };
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    element?.addEventListener?.(eventName, handler);
+    return () => {
+      element?.removeEventListener?.(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+}
+
+/**
+ * @template {keyof WindowEventMap} E
+ * @typedef {(event: WindowEventMap[E]) => void} WindowEventCallback
+ */
+
+/**
+ * @template {keyof WindowEventMap} E
+ * @param {E} eventName
+ * @param {WindowEventCallback<E>} callback
+ */
 function useWindowEvent(eventName, callback) {
+  /**
+   * @type {MutableRefObject<WindowEventCallback<E> | null>}
+   */
   const savedCallback = React.useRef(null);
   React.useEffect(() => {
     savedCallback.current = callback;
-  });
+  }, [callback]);
   React.useEffect(() => {
+    /**
+     * @type {WindowEventCallback<E>}
+     */
     function handler(event) {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     }
-
     window.addEventListener(eventName, handler);
     return () => {
       window.removeEventListener(eventName, handler);
@@ -30,4 +88,5 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
+exports.useEvent = useEvent;
 exports.useWindowEvent = useWindowEvent;

package/lib/internal/useId.js

@@ -18,22 +18,19 @@ var useIdPrefix = require('./useIdPrefix.js');
 const getId = setupGetInstanceId["default"]();
 const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
 let serverHandoffCompleted = false;
+
 /**
  * Generate a unique ID with an optional prefix prepended to it
  * @param {string} [prefix]
  * @returns {string}
  */
-
 function useId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
-
   const _prefix = useIdPrefix.useIdPrefix();
-
   const [id, setId] = React.useState(() => {
     if (serverHandoffCompleted) {
       return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
     }
-
     return null;
   });
   useIsomorphicLayoutEffect(() => {
@@ -48,12 +45,12 @@ function useId() {
   }, []);
   return id;
 }
+
 /**
  * Generate a unique id if a given `id` is not provided
  * @param {string|undefined} id
  * @returns {string}
  */
-
 function useFallbackId(id) {
   const fallback = useId();
   return id ?? fallback;

package/lib/internal/useIsomorphicEffect.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
+// useLayoutEffect on the client, useEffect on the server
 const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var useIsomorphicEffect$1 = useIsomorphicEffect;
 

package/lib/internal/useMergedRefs.js

@@ -16,7 +16,6 @@ var React = require('react');
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
  * the same node.
  */
-
 const useMergedRefs = refs => {
   return React.useCallback(node => {
     refs.forEach(ref => {
@@ -25,7 +24,8 @@ const useMergedRefs = refs => {
       } else if (ref !== null && ref !== undefined) {
         ref.current = node;
       }
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, refs);
 };
 

package/lib/internal/useNoInteractiveChildren.js

@@ -13,18 +13,17 @@ var React = require('react');
 
 function useNoInteractiveChildren(ref) {
   let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'component should have no interactive child nodes';
-
   if (process.env.NODE_ENV !== "production") {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       const node = ref.current ? getInteractiveContent(ref.current) : false;
-
       if (node) {
         throw new Error(`Error: ${message}.\n\nInstead found: ${node.outerHTML}`);
       }
     });
   }
 }
+
 /**
  * Determines if a given DOM node has interactive content, or is itself
  * interactive. It returns the interactive node if one is found
@@ -32,26 +31,22 @@ function useNoInteractiveChildren(ref) {
  * @param {HTMLElement} node
  * @returns {HTMLElement}
  */
-
 function getInteractiveContent(node) {
   if (!node || !node.childNodes) {
     return null;
   }
-
   if (isFocusable(node)) {
     return node;
   }
-
   for (const childNode of node.childNodes) {
     const interactiveNode = getInteractiveContent(childNode);
-
     if (interactiveNode) {
       return interactiveNode;
     }
   }
-
   return null;
 }
+
 /**
  * Determines if the given element is focusable, or not
  *
@@ -59,28 +54,22 @@ function getInteractiveContent(node) {
  * @returns {boolean}
  * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
  */
-
 function isFocusable(element) {
   if (element.tabIndex < 0) {
     return false;
   }
-
   if (element.disabled) {
     return false;
   }
-
   switch (element.nodeName) {
     case 'A':
       return !!element.href && element.rel !== 'ignore';
-
     case 'INPUT':
       return element.type !== 'hidden';
-
     case 'BUTTON':
     case 'SELECT':
     case 'TEXTAREA':
       return true;
-
     default:
       return false;
   }

package/lib/internal/useNormalizedInputProps.js

@@ -53,7 +53,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @param {InputProps} props - The props passed to the component
  * @returns {NormalizedInputProps}
  */
-
 function useNormalizedInputProps(_ref) {
   let {
     id,
@@ -75,7 +74,6 @@ function useNormalizedInputProps(_ref) {
     icon: null,
     helperId: `${id}-helper-text`
   };
-
   if (normalizedProps.invalid) {
     normalizedProps.icon = iconsReact.WarningFilled;
     normalizedProps.validation = /*#__PURE__*/React__default["default"].createElement("div", {
@@ -89,7 +87,6 @@ function useNormalizedInputProps(_ref) {
       id: normalizedProps.warnId
     }, warnText);
   }
-
   return normalizedProps;
 }
 

package/lib/internal/useSavedCallback.js

@@ -17,10 +17,9 @@ var React = require('react');
  * callback prop but don't want it to be added to the dependency array of an
  * effect.
  *
- * @param {Function} callback
+ * @param {Function | undefined} callback
  * @returns {Function}
  */
-
 function useSavedCallback(callback) {
   const savedCallback = React.useRef(callback);
   React.useEffect(() => {

package/lib/internal/warning.js

@@ -10,16 +10,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const emptyFunction = function () {};
-
 const warning = process.env.NODE_ENV !== "production" ? function warning(condition, format) {
   for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     args[_key - 2] = arguments[_key];
   }
-
   if (format === undefined) {
     throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'format argument');
   }
-
   if (!condition) {
     let index = 0;
     const message = format.replace(/%s/g, () => {

package/lib/internal/wrapFocus.js

@@ -21,15 +21,14 @@ var findLast__default = /*#__PURE__*/_interopDefaultLegacy(findLast);
  * @param {string[]} selectorsFloatingMenus The CSS selectors that matches floating menus.
  * @returns {boolean} `true` of the given `node` is in a floating menu.
  */
-
 function elementOrParentIsFloatingMenu(node) {
   let selectorsFloatingMenus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   if (node && typeof node.closest === 'function') {
     const allSelectorsFloatingMenus = [`.cds--overflow-menu-options`, `.cds--tooltip`, '.flatpickr-calendar', ...selectorsFloatingMenus];
     return allSelectorsFloatingMenus.some(selector => node.closest(selector));
   }
 }
+
 /**
  * Ensures the focus is kept in the given `modalNode`, implementing "focus-wrap" behavior.
  * @param {object} options The options.
@@ -40,8 +39,6 @@ function elementOrParentIsFloatingMenu(node) {
  * @param {Node} options.oldActiveNode The DOM node that previously had focus.
  * @param {Node} [options.selectorsFloatingMenus] The CSS selectors that matches floating menus.
  */
-
-
 function wrapFocus(_ref) {
   let {
     bodyNode,
@@ -51,13 +48,10 @@ function wrapFocus(_ref) {
     oldActiveNode,
     selectorsFloatingMenus
   } = _ref;
-
   if (bodyNode && currentActiveNode && oldActiveNode && !bodyNode.contains(currentActiveNode) && !elementOrParentIsFloatingMenu(currentActiveNode, selectorsFloatingMenus)) {
     const comparisonResult = oldActiveNode.compareDocumentPosition(currentActiveNode);
-
     if (currentActiveNode === startTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_PRECEDING) {
       const tabbable = findLast__default["default"](bodyNode.querySelectorAll(navigation.selectorTabbable), elem => Boolean(elem.offsetParent));
-
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {
@@ -65,7 +59,6 @@ function wrapFocus(_ref) {
       }
     } else if (currentActiveNode === endTrapNode || comparisonResult & navigation.DOCUMENT_POSITION_BROAD_FOLLOWING) {
       const tabbable = Array.prototype.find.call(bodyNode.querySelectorAll(navigation.selectorTabbable), elem => Boolean(elem.offsetParent));
-
       if (tabbable) {
         tabbable.focus();
       } else if (bodyNode !== oldActiveNode) {

package/lib/prop-types/deprecate.js

@@ -17,21 +17,18 @@ function deprecate(propType, message) {
     if (props[propName] === undefined) {
       return;
     }
-
     if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
-      didWarnAboutDeprecation[componentName] = { ...didWarnAboutDeprecation[componentName],
+      didWarnAboutDeprecation[componentName] = {
+        ...didWarnAboutDeprecation[componentName],
         [propName]: true
       };
       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/isRequiredOneOf.js

@@ -17,20 +17,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
  */
 function isRequiredOneOf(propTypes) {
   const names = Object.keys(propTypes);
-
   const checker = propType => function (props, propName, componentName) {
     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((o, name) => ({ ...o,
+  return names.reduce((o, name) => ({
+    ...o,
     [name]: checker(propTypes[name])
   }), {});
 }

package/lib/prop-types/requiredIfGivenPropIsTruthy.js

@@ -21,11 +21,9 @@ function requiredIfGivenPropIsTruthy(name, propType) {
     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/array.js

@@ -19,17 +19,14 @@ function equals(arr1, arr2) {
   if (!Array.isArray(arr1) || !Array.isArray(arr2) || arr1.length !== arr2.length) {
     return false;
   }
-
   if (arr1 === arr2) {
     return true;
   }
-
   for (let i = 0; i < arr1.length; i++) {
     if (arr1[i] !== arr2[i]) {
       return false;
     }
   }
-
   return true;
 }
 

package/lib/tools/events.js

@@ -29,14 +29,11 @@ const composeEventHandlers = fns => 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];
   }
-
   for (let i = 0; i < fns.length; i++) {
     if (event.defaultPrevented) {
       break;
     }
-
     const fn = fns[i];
-
     if (typeof fn === 'function') {
       fn(event, ...args);
     }

package/lib/tools/mergeRefs.js

@@ -17,7 +17,6 @@ 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
@@ -29,7 +28,6 @@ const mergeRefs = function () {
     });
   };
 };
-
 var mergeRefs$1 = mergeRefs;
 
 exports["default"] = mergeRefs$1;

package/lib/tools/wrapComponent.js

@@ -24,14 +24,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
  * @param {{ name: string, type: string, className?: string | (prefix: string) => string }} props
  * @returns
  */
-
 const wrapComponent = _ref => {
   let {
     name,
     className: getClassName,
     type
   } = _ref;
-
   /**
    *
    * @param {{ className?: string, [x: string]: any}} param0
@@ -44,21 +42,20 @@ const wrapComponent = _ref => {
     } = _ref2;
     const prefix = usePrefix.usePrefix();
     const componentClass = cx__default["default"](typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
-    return /*#__PURE__*/React__default["default"].createElement(type, { ...other,
+    return /*#__PURE__*/React__default["default"].createElement(type, {
+      ...other,
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined
     });
   }
-
   Component.displayName = name;
   Component.propTypes = {
     className: PropTypes__default["default"].string
   };
   return Component;
 };
-
 var wrapComponent$1 = wrapComponent;
 
 exports["default"] = wrapComponent$1;