@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/ListBox/ListBoxMenuItem.js

@@ -22,7 +22,6 @@ function useIsTruncated(ref) {
   }, [ref, setIsTruncated]);
   return isTruncated;
 }
-
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
@@ -38,7 +37,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
   } = _ref;
   const prefix = usePrefix();
   const ref = useRef(null);
-  const isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
+  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
   const className = cx(`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -49,7 +48,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref
+    ref: forwardedRef?.menuItemOptionRef || ref
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';
@@ -59,17 +58,14 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes.node,
-
   /**
    * Specify whether the current menu item is "active".
    */
   isActive: PropTypes.bool.isRequired,
-
   /**
    * Specify whether the current menu item is "highlighted".
    */
   isHighlighted: PropTypes.bool.isRequired,
-
   /**
    * Provide an optional tooltip for the ListBoxMenuItem
    */

package/es/components/ListBox/ListBoxPropTypes.d.ts

@@ -7,8 +7,8 @@
 import PropTypes from 'prop-types';
 declare const listBoxTypes: readonly ["default", "inline"];
 declare const listBoxSizes: readonly ["sm", "md", "lg"];
-export type ListBoxType = typeof listBoxTypes[number];
-export type ListBoxSize = typeof listBoxSizes[number];
+export type ListBoxType = (typeof listBoxTypes)[number];
+export type ListBoxSize = (typeof listBoxSizes)[number];
 export declare const ListBoxType: PropTypes.Requireable<"default" | "inline">;
 export declare const ListBoxSize: PropTypes.Requireable<"md" | "sm" | "lg">;
 export {};

package/es/components/ListBox/ListBoxSelection.js

@@ -12,7 +12,6 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Close, _Close2;
-
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
@@ -32,27 +31,22 @@ const ListBoxSelection = _ref => {
     [`${prefix}--tag--filter`]: selectionCount,
     [`${prefix}--list-box__selection--multi`]: selectionCount
   });
-
   const handleOnClick = event => {
     event.stopPropagation();
-
     if (disabled || readOnly) {
       return;
     }
-
     clearSelection(event);
-
     if (onClearSelection) {
       onClearSelection(event);
     }
   };
-
   const description = selectionCount ? t('clear.all') : t('clear.selection');
   const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
     [`${prefix}--tag--disabled`]: disabled
   });
-  /* eslint-disable jsx-a11y/click-events-have-key-events */
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   return selectionCount ? /*#__PURE__*/React__default.createElement("div", {
     className: tagClasses
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -75,7 +69,6 @@ const ListBoxSelection = _ref => {
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 };
-
 const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
@@ -90,29 +83,24 @@ ListBoxSelection.propTypes = {
    * selection element.
    */
   clearSelection: PropTypes.func.isRequired,
-
   /**
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared
    */
   onClearSelection: PropTypes.func,
-
   /**
    * Whether or not the Dropdown is readonly
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.
    */
   selectionCount: PropTypes.number,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should

package/es/components/ListBox/next/ListBoxSelection.js

@@ -13,12 +13,12 @@ import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _Close, _Close2;
+
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-
 function ListBoxSelection(_ref) {
   let {
     clearSelection,
@@ -37,21 +37,16 @@ function ListBoxSelection(_ref) {
   const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
     [`${prefix}--tag--disabled`]: disabled
   });
-
   function onClick(event) {
     event.stopPropagation();
-
     if (disabled) {
       return;
     }
-
     clearSelection(event);
-
     if (onClearSelection) {
       onClearSelection(event);
     }
   }
-
   if (selectionCount) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: tagClasses
@@ -68,7 +63,6 @@ function ListBoxSelection(_ref) {
       type: "button"
     }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
   }
-
   return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
     "aria-label": description,
     className: className,
@@ -79,7 +73,6 @@ function ListBoxSelection(_ref) {
     type: "button"
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 }
-
 const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
@@ -94,36 +87,30 @@ ListBoxSelection.propTypes = {
    * selection element.
    */
   clearSelection: PropTypes.func.isRequired,
-
   /**
    * Specify whether or not the clear selection element should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify an optional `onClearSelection` handler that is called when the underlying
    * element is cleared
    */
   onClearSelection: PropTypes.func,
-
   /**
    * Specify an optional `onClick` handler that is called when the underlying
    * clear selection element is clicked
    */
   onClick: PropTypes.func,
-
   /**
    * Specify an optional `onKeyDown` handler that is called when the underlying
    * clear selection element fires a keydown event
    */
   onKeyDown: PropTypes.func,
-
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.
    */
   selectionCount: PropTypes.number,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -21,11 +21,11 @@ const defaultTranslations = {
   [translationIds['close.menu']]: 'Close',
   [translationIds['open.menu']]: 'Open'
 };
+
 /**
  * `ListBoxTrigger` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-
 const ListBoxTrigger = _ref => {
   let {
     isOpen,
@@ -46,14 +46,12 @@ const ListBoxTrigger = _ref => {
     tabIndex: "-1"
   }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null)));
 };
-
 ListBoxTrigger.propTypes = {
   /**
    * Specify whether the menu is currently open, which will influence the
    * direction of the menu icon
    */
   isOpen: PropTypes.bool.isRequired,
-
   /**
    * i18n hook used to provide the appropriate description for the given menu
    * icon. This function takes in an id defined in `translationIds` and should

package/es/components/ListItem/ListItem.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+import PropTypes from 'prop-types';
+import { type ComponentProps } from 'react';
+type ListItemProps = ComponentProps<'li'>;
+declare function ListItem({ className, ...other }: ListItemProps): JSX.Element;
+declare namespace ListItem {
+    var propTypes: {
+        /**
+         * Specify the content for the ListItem
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to apply to the underlying `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default ListItem;

package/es/components/ListItem/ListItem.js

@@ -11,9 +11,8 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const ListItem = _ref => {
+function ListItem(_ref) {
   let {
-    children,
     className,
     ...other
   } = _ref;
@@ -21,20 +20,17 @@ const ListItem = _ref => {
   const classNames = cx(`${prefix}--list__item`, className);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: classNames
-  }, other), children);
-};
-
+  }, other));
+}
 ListItem.propTypes = {
   /**
    * Specify the content for the ListItem
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to apply to the underlying `<li>` node
    */
   className: PropTypes.string
 };
-var ListItem$1 = ListItem;
 
-export { ListItem$1 as default };
+export { ListItem as default };

package/es/components/ListItem/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default, default as ListItem } from './ListItem';

package/es/components/Loading/Loading.js

@@ -53,33 +53,27 @@ function Loading(_ref) {
     className: overlayClassName
   }, loading) : loading;
 }
-
 Loading.propTypes = {
   /**
    * Specify whether you want the loading indicator to be spinning or not
    */
   active: PropTypes.bool,
-
   /**
    * Provide an optional className to be applied to the containing node
    */
   className: PropTypes.string,
-
   /**
    * Specify a description that would be used to best describe the loading state
    */
   description: PropTypes.string,
-
   /**
    * Provide an `id` to uniquely identify the label
    */
   id: deprecate(PropTypes.string, `\nThe prop \`id\` is no longer needed.`),
-
   /**
    * Specify whether you would like the small variant of <Loading>
    */
   small: PropTypes.bool,
-
   /**
    * Specify whether you want the loader to be applied with an overlay
    */

package/es/components/Menu/Menu.js

@@ -37,7 +37,8 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   const context = useContext(MenuContext);
   const isRoot = context.state.isRoot;
   const menuSize = isRoot ? size : context.state.size;
-  const [childState, childDispatch] = useReducer(menuReducer, { ...context.state,
+  const [childState, childDispatch] = useReducer(menuReducer, {
+    ...context.state,
     isRoot: false,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
@@ -52,13 +53,11 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
   const ref = useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = useState([-1, -1]);
   const focusableItems = childContext.state.items.filter(item => !item.disabled && item.ref.current);
-
   function returnFocus() {
     if (focusReturn.current) {
       focusReturn.current.focus();
     }
   }
-
   function handleOpen() {
     if (menu.current) {
       focusReturn.current = document.activeElement;
@@ -67,13 +66,11 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
       menu.current.style.top = `${pos[1]}px`;
       setPosition(pos);
       menu.current.focus();
-
       if (onOpen) {
         onOpen();
       }
     }
   }
-
   function handleClose(e) {
     if (/^key/.test(e.type)) {
       window.addEventListener('keyup', returnFocus, {
@@ -86,60 +83,53 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
     } else {
       returnFocus();
     }
-
     if (onClose) {
       onClose();
     }
   }
-
   function handleKeyDown(e) {
-    e.stopPropagation(); // if the user presses escape or this is a submenu
-    // and the user presses ArrowLeft, close it
+    e.stopPropagation();
 
+    // if the user presses escape or this is a submenu
+    // and the user presses ArrowLeft, close it
     if ((match(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
       handleClose(e);
     } else {
       focusItem(e);
     }
   }
-
   function focusItem(e) {
     const currentItem = focusableItems.findIndex(item => item.ref.current.contains(document.activeElement));
-    let indexToFocus = currentItem; // if currentItem is -1, no menu item is focused yet.
-    // in this case, the first item should receive focus.
+    let indexToFocus = currentItem;
 
+    // if currentItem is -1, no menu item is focused yet.
+    // in this case, the first item should receive focus.
     if (currentItem === -1) {
       indexToFocus = 0;
     } else if (e) {
       if (match(e, ArrowUp)) {
         indexToFocus = indexToFocus - 1;
       }
-
       if (match(e, ArrowDown)) {
         indexToFocus = indexToFocus + 1;
       }
     }
-
     if (indexToFocus < 0) {
       indexToFocus = focusableItems.length - 1;
     }
-
     if (indexToFocus >= focusableItems.length) {
       indexToFocus = 0;
     }
-
     if (indexToFocus !== currentItem) {
       const nodeToFocus = focusableItems[indexToFocus];
       nodeToFocus.ref.current.focus();
     }
   }
-
   function handleBlur(e) {
     if (open && onClose && isRoot && !menu.current.contains(e.relatedTarget)) {
       handleClose(e);
     }
   }
-
   function fitValue(range, axis) {
     const {
       width,
@@ -160,25 +150,28 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
         anchor: alignment === 'horizontal' ? range[0] : range[1],
         reversedAnchor: alignment === 'horizontal' ? range[1] : range[0],
         offset: isRoot ? 0 : 4 // top padding in menu, used to align the menu items
-
       }
     };
+
     const {
       max,
       size,
       anchor,
       reversedAnchor,
       offset
-    } = axes[axis]; // get values for different scenarios, set to false if they don't work
-
-    const options = [// towards max (preferred)
-    max - spacing - size - anchor >= 0 ? anchor - offset : false, // towards min / reversed (first fallback)
-    reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false, // align at max (second fallback)
+    } = axes[axis];
+
+    // get values for different scenarios, set to false if they don't work
+    const options = [
+    // towards max (preferred)
+    max - spacing - size - anchor >= 0 ? anchor - offset : false,
+    // towards min / reversed (first fallback)
+    reversedAnchor - size >= 0 ? reversedAnchor - size + offset : false,
+    // align at max (second fallback)
     max - spacing - size];
     const bestOption = options.find(option => option !== false);
     return bestOption >= spacing ? bestOption : spacing;
   }
-
   function calculatePosition() {
     if (menu.current) {
       const ranges = {
@@ -187,15 +180,13 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
       };
       return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
     }
-
     return [-1, -1];
   }
-
   useEffect(() => {
     if (open && focusableItems.length > 0) {
       focusItem();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, focusableItems]);
   useEffect(() => {
     if (open) {
@@ -204,8 +195,8 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardR
       // reset position when menu is closed in order for the --shown
       // modifier to be applied correctly
       setPosition(-1, -1);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
   const classNames = cx(className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
     // --open sets visibility and --shown sets opacity.
@@ -234,47 +225,38 @@ Menu.propTypes = {
    * A collection of MenuItems to be rendered within this Menu.
    */
   children: PropTypes.node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes.string,
-
   /**
    * A label describing the Menu.
    */
   label: PropTypes.string,
-
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */
   onClose: PropTypes.func,
-
   /**
    * Provide an optional function to be called when the Menu is opened.
    */
   onOpen: PropTypes.func,
-
   /**
    * Whether the Menu is open or not.
    */
   open: PropTypes.bool,
-
   /**
    * Specify the size of the Menu.
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
   target: PropTypes.object,
-
   /**
    * Specify the x position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([x1, x2])
    */
   x: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
-
   /**
    * Specify the y position of the Menu. Either pass a single number or an array with two numbers describing your activator's boundaries ([y1, y2])
    */

package/es/components/Menu/MenuContext.js

@@ -14,21 +14,20 @@ const menuDefaultState = {
   items: [],
   requestCloseRoot: () => {}
 };
-
 function menuReducer(state, action) {
   switch (action.type) {
     case 'enableIcons':
-      return { ...state,
+      return {
+        ...state,
         hasIcons: true
       };
-
     case 'registerItem':
-      return { ...state,
+      return {
+        ...state,
         items: [...state.items, action.payload].filter(item => item.ref.current !== null)
       };
   }
 }
-
 const MenuContext = /*#__PURE__*/React__default.createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu