@carbon/react 1.29.1 → 1.30.0

package/es/internal/OptimizedResize.js

@@ -8,59 +8,53 @@
 import window from 'window-or-global';
 
 // mdn resize function
-
 const OptimizedResize = function optimizedResize() {
   const callbacks = [];
-  let running = false; // run the actual callbacks
+  let running = false;
 
+  // run the actual callbacks
   function runCallbacks() {
     callbacks.forEach(callback => {
       callback();
     });
     running = false;
-  } // fired on resize event
-
+  }
 
+  // fired on resize event
   function resize() {
     if (!running) {
       running = true;
       window.requestAnimationFrame(runCallbacks);
     }
-  } // adds callback to loop
-
+  }
 
+  // adds callback to loop
   function addCallback(callback) {
     if (callback) {
       const index = callbacks.indexOf(callback);
-
       if (index < 0) {
         callbacks.push(callback);
       }
     }
   }
-
   return {
     // public method to add additional callback
     add: callback => {
       if (!callbacks.length) {
         window.addEventListener('resize', resize);
       }
-
       addCallback(callback);
       return {
         release() {
           const index = callbacks.indexOf(callback);
-
           if (index >= 0) {
             callbacks.splice(index, 1);
           }
         }
-
       };
     }
   };
 }();
-
 var OptimizedResize$1 = OptimizedResize;
 
 export { OptimizedResize$1 as default };

package/es/internal/Selection.js

@@ -18,7 +18,6 @@ function callOnChangeHandler(_ref) {
     onChangeHandlerUncontrolled,
     selectedItems
   } = _ref;
-
   if (isControlled) {
     if (isMounted && onChangeHandlerControlled) {
       onChangeHandlerControlled({
@@ -29,7 +28,6 @@ function callOnChangeHandler(_ref) {
     onChangeHandlerUncontrolled(selectedItems);
   }
 }
-
 function useSelection(_ref2) {
   let {
     disabled,
@@ -46,7 +44,6 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-
     let selectedIndex;
     selectedItems.forEach((selectedItem, index) => {
       if (isEqual(selectedItem, item)) {
@@ -54,7 +51,6 @@ function useSelection(_ref2) {
       }
     });
     let newSelectedItems;
-
     if (selectedIndex === undefined) {
       newSelectedItems = selectedItems.concat(item);
       callOnChangeHandler({
@@ -66,7 +62,6 @@ function useSelection(_ref2) {
       });
       return;
     }
-
     newSelectedItems = removeAtIndex(selectedItems, selectedIndex);
     callOnChangeHandler({
       isControlled,
@@ -80,7 +75,6 @@ function useSelection(_ref2) {
     if (disabled) {
       return;
     }
-
     callOnChangeHandler({
       isControlled,
       isMounted: isMounted.current,
@@ -114,44 +108,36 @@ function useSelection(_ref2) {
 class Selection extends React__default.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "internalSetState", (stateToSet, callback) => this.setState(stateToSet, () => {
       if (callback) {
         callback();
       }
-
       if (this.props.onChange) {
         this.props.onChange(this.state);
       }
     }));
-
     _defineProperty(this, "handleClearSelection", () => {
       if (this.props.disabled) {
         return;
       }
-
       this.internalSetState({
         selectedItems: []
       });
     });
-
     _defineProperty(this, "handleSelectItem", item => {
       this.internalSetState(state => ({
         selectedItems: state.selectedItems.concat(item)
       }));
     });
-
     _defineProperty(this, "handleRemoveItem", index => {
       this.internalSetState(state => ({
         selectedItems: removeAtIndex(state.selectedItems, index)
       }));
     });
-
     _defineProperty(this, "handleOnItemChange", item => {
       if (this.props.disabled) {
         return;
       }
-
       const {
         selectedItems
       } = this.state;
@@ -161,20 +147,16 @@ class Selection extends React__default.Component {
           selectedIndex = index;
         }
       });
-
       if (selectedIndex === undefined) {
         this.handleSelectItem(item);
         return;
       }
-
       this.handleRemoveItem(selectedIndex);
     });
-
     this.state = {
       selectedItems: props.initialSelectedItems
     };
   }
-
   render() {
     const {
       children,
@@ -188,21 +170,18 @@ class Selection extends React__default.Component {
       onItemChange: this.handleOnItemChange,
       clearSelection: this.handleClearSelection
     };
-
     if (render !== undefined) {
       return render(renderProps);
     }
-
     if (children !== undefined) {
       return children(renderProps);
     }
-
     return null;
   }
+}
 
-} // Generic utility for safely removing an element at a given index from an
+// Generic utility for safely removing an element at a given index from an
 // array.
-
 _defineProperty(Selection, "propTypes", {
   children: PropTypes.func,
   disabled: PropTypes.bool,
@@ -210,11 +189,9 @@ _defineProperty(Selection, "propTypes", {
   onChange: PropTypes.func,
   render: PropTypes.func
 });
-
 _defineProperty(Selection, "defaultProps", {
   initialSelectedItems: []
 });
-
 const removeAtIndex = (array, index) => {
   const result = array.slice();
   result.splice(index, 1);

package/es/internal/createClassWrapper.js

@@ -14,12 +14,10 @@ import React__default from 'react';
  * @param {ReactNode} Component
  * @returns {ReactNode}
  */
-
 function createClassWrapper(Component) {
   function ClassWrapper(props) {
     return /*#__PURE__*/React__default.createElement(Component, props);
   }
-
   const name = Component.displayName || Component.name;
   ClassWrapper.displayName = `ClassWrapper(${name})`;
   return ClassWrapper;

package/es/internal/deprecateFieldOnObject.js

@@ -8,20 +8,16 @@
 import { warning } from './warning.js';
 
 const didWarnAboutDeprecation = {};
-
 function deprecateFieldOnObject(object, field, Component, message) {
   Object.defineProperty(object, field, {
     enumerable: true,
-
     get() {
       if (!didWarnAboutDeprecation[field]) {
         process.env.NODE_ENV !== "production" ? warning(false, message || `The ${field} field has been deprecated on the ${object.displayName} object. ` + `Please import and use ${Component.displayName || Component.name || 'the field'} directly.`) : void 0;
         didWarnAboutDeprecation[field] = true;
       }
-
       return Component;
     }
-
   });
 }
 

package/es/internal/focus/index.js

@@ -7,7 +7,6 @@
 
 function focus(elementOrRef) {
   const element = elementOrRef.current || elementOrRef;
-
   if (element && element.focus && document.activeElement !== element) {
     element.focus();
   }

package/es/internal/keyboard/keys.js

@@ -18,7 +18,8 @@ const Enter = {
   code: 'Enter'
 };
 const Escape = {
-  key: ['Escape', // IE11 Escape
+  key: ['Escape',
+  // IE11 Escape
   'Esc'],
   which: 27,
   keyCode: 27,

package/es/internal/keyboard/match.js

@@ -36,9 +36,9 @@ function matches(event, keysToMatch) {
       return true;
     }
   }
-
   return false;
 }
+
 /**
  * Check to see if the given key matches the corresponding keyboard event. Also
  * supports passing in the value directly if you can't used the given event.
@@ -57,7 +57,6 @@ function matches(event, keysToMatch) {
  * @param {Key} key
  * @returns {boolean}
  */
-
 function match(eventOrCode) {
   let {
     key,
@@ -65,19 +64,15 @@ function match(eventOrCode) {
     keyCode,
     code
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;
   }
-
   if (typeof eventOrCode === 'number') {
     return eventOrCode === which || eventOrCode === keyCode;
   }
-
   if (eventOrCode.key && Array.isArray(key)) {
     return key.indexOf(eventOrCode.key) !== -1;
   }
-
   return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
 }
 

package/es/internal/keyboard/navigation.js

@@ -28,39 +28,40 @@ const getNextIndex = (key, index, arrayLength) => {
   if (match(key, ArrowRight)) {
     return (index + 1) % arrayLength;
   }
-
   if (match(key, 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/es/internal/useAnnouncer.js

@@ -7,7 +7,6 @@
 
 function useAnnouncer(textCount, maxCount) {
   const lastTen = maxCount - 10;
-
   if (textCount >= lastTen) {
     return `${maxCount - textCount} characters left.`;
   }

package/es/internal/useAttachedMenu.js

@@ -23,14 +23,11 @@ import { useState } from 'react';
  * @param {Element|object} anchor The element or ref the menu should visually be attached to.
  * @returns {useAttachedMenuReturn}
  */
-
 function useAttachedMenu(anchor) {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = 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,
@@ -40,14 +37,11 @@ function useAttachedMenu(anchor) {
       } = anchorEl.getBoundingClientRect();
       setPosition([[left, right], [top, bottom]]);
     }
-
     setOpen(true);
   }
-
   function closeMenu() {
     setOpen(false);
   }
-
   function handleClick() {
     if (open) {
       closeMenu();
@@ -55,7 +49,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
@@ -63,7 +56,6 @@ function useAttachedMenu(anchor) {
     // "blur" event.
     e.preventDefault();
   }
-
   return {
     open,
     x: position[0],

package/es/internal/useControllableState.js

@@ -29,7 +29,6 @@ import { warning } from './warning.js';
  * uncontrolled
  * @returns {[any, Function]}
  */
-
 function useControllableState(_ref) {
   let {
     defaultValue,
@@ -39,42 +38,36 @@ function useControllableState(_ref) {
   } = _ref;
   const [state, internalSetState] = useState(value ?? defaultValue);
   const controlled = 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);
     }
   }
-
   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(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(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/es/internal/useDelayedState.js

@@ -20,19 +20,17 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 
 function useDelayedState(initialState) {
   const [state, setState] = useState(initialState);
-  const timeoutId = useRef(null); // We use `useCallback` to match the signature of React's `useState` which will
+  const timeoutId = 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 = 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/es/internal/useEffectOnce.js

@@ -13,7 +13,6 @@ import { useRef, useEffect } from 'react';
  *
  * @param {Function} callback
  */
-
 function useEffectOnce(callback) {
   const savedCallback = useRef(callback);
   const effectGuard = useRef(false);

package/es/internal/useEvent.js

@@ -7,18 +7,76 @@
 
 import { useRef, useEffect } from '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 = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  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 = useRef(null);
   useEffect(() => {
     savedCallback.current = callback;
-  });
+  }, [callback]);
   useEffect(() => {
+    /**
+     * @type {WindowEventCallback<E>}
+     */
     function handler(event) {
       if (savedCallback.current) {
         savedCallback.current(event);
       }
     }
-
     window.addEventListener(eventName, handler);
     return () => {
       window.removeEventListener(eventName, handler);
@@ -26,4 +84,4 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
-export { useWindowEvent };
+export { useEvent, useWindowEvent };

package/es/internal/useId.js

@@ -14,22 +14,19 @@ import { useIdPrefix } from './useIdPrefix.js';
 const getId = setupGetInstanceId();
 const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : 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();
-
   const [id, setId] = useState(() => {
     if (serverHandoffCompleted) {
       return `${_prefix ? `${_prefix}-` : ``}${prefix}-${getId()}`;
     }
-
     return null;
   });
   useIsomorphicLayoutEffect(() => {
@@ -44,12 +41,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/es/internal/useIsomorphicEffect.js

@@ -7,6 +7,7 @@
 
 import { useLayoutEffect, useEffect } from 'react';
 
+// useLayoutEffect on the client, useEffect on the server
 const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 var useIsomorphicEffect$1 = useIsomorphicEffect;
 

package/es/internal/useMergedRefs.js

@@ -12,7 +12,6 @@ import { useCallback } from 'react';
  * refs from both `React.forwardRef` and `useRef` that you would like to add to
  * the same node.
  */
-
 const useMergedRefs = refs => {
   return useCallback(node => {
     refs.forEach(ref => {
@@ -21,7 +20,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);
 };