@carbon/react 1.29.1 → 1.30.0-rc.0

package/lib/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/lib/components/ListItem/ListItem.js

@@ -21,9 +21,8 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const ListItem = _ref => {
+function ListItem(_ref) {
   let {
-    children,
     className,
     ...other
   } = _ref;
@@ -31,20 +30,17 @@ const ListItem = _ref => {
   const classNames = cx__default["default"](`${prefix}--list__item`, className);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     className: classNames
-  }, other), children);
-};
-
+  }, other));
+}
 ListItem.propTypes = {
   /**
    * Specify the content for the ListItem
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Specify an optional className to apply to the underlying `<li>` node
    */
   className: PropTypes__default["default"].string
 };
-var ListItem$1 = ListItem;
 
-exports["default"] = ListItem$1;
+exports["default"] = ListItem;

package/lib/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/lib/components/Loading/Loading.js

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

package/lib/components/Menu/Menu.js

@@ -47,7 +47,8 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
   const context = React.useContext(MenuContext.MenuContext);
   const isRoot = context.state.isRoot;
   const menuSize = isRoot ? size : context.state.size;
-  const [childState, childDispatch] = React.useReducer(MenuContext.menuReducer, { ...context.state,
+  const [childState, childDispatch] = React.useReducer(MenuContext.menuReducer, {
+    ...context.state,
     isRoot: false,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
@@ -62,13 +63,11 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
   const ref = useMergedRefs.useMergedRefs([forwardRef, menu]);
   const [position, setPosition] = React.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;
@@ -77,13 +76,11 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
       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, {
@@ -96,60 +93,53 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
     } 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.match(e, keys.Escape) || !isRoot && match.match(e, keys.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.match(e, keys.ArrowUp)) {
         indexToFocus = indexToFocus - 1;
       }
-
       if (match.match(e, keys.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,
@@ -170,25 +160,28 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
         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 = {
@@ -197,15 +190,13 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
       };
       return [fitValue(ranges.x, 'x'), fitValue(ranges.y, 'y')];
     }
-
     return [-1, -1];
   }
-
   React.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]);
   React.useEffect(() => {
     if (open) {
@@ -214,8 +205,8 @@ const Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_re
       // 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__default["default"](className, `${prefix}--menu`, `${prefix}--menu--${menuSize}`, {
     // --open sets visibility and --shown sets opacity.
@@ -244,47 +235,38 @@ Menu.propTypes = {
    * A collection of MenuItems to be rendered within this Menu.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * A label describing the Menu.
    */
   label: PropTypes__default["default"].string,
-
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */
   onClose: PropTypes__default["default"].func,
-
   /**
    * Provide an optional function to be called when the Menu is opened.
    */
   onOpen: PropTypes__default["default"].func,
-
   /**
    * Whether the Menu is open or not.
    */
   open: PropTypes__default["default"].bool,
-
   /**
    * Specify the size of the Menu.
    */
   size: PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * Specify a DOM node where the Menu should be rendered in. Defaults to document.body.
    */
   target: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].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/lib/components/Menu/MenuContext.js

@@ -22,21 +22,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["default"].createContext({
   state: menuDefaultState,
   // 'dispatch' is populated by the root menu

package/lib/components/Menu/MenuItem.js

@@ -56,7 +56,6 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
   const hoverIntentTimeout = React.useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
-
   function registerItem() {
     context.dispatch({
       type: 'registerItem',
@@ -66,7 +65,6 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       }
     });
   }
-
   function openSubmenu() {
     const {
       x,
@@ -80,7 +78,6 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
     });
     setSubmenuOpen(true);
   }
-
   function closeSubmenu() {
     setSubmenuOpen(false);
     setBoundaries({
@@ -88,56 +85,50 @@ const MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function Menu
       y: -1
     });
   }
-
   function handleClick(e) {
     if (!isDisabled) {
       if (hasChildren) {
         openSubmenu();
       } else {
         context.state.requestCloseRoot(e);
-
         if (onClick) {
           onClick(e);
         }
       }
     }
   }
-
   function handleMouseEnter() {
     hoverIntentTimeout.current = setTimeout(() => {
       openSubmenu();
     }, hoverIntentDelay);
   }
-
   function handleMouseLeave() {
     clearTimeout(hoverIntentTimeout.current);
     closeSubmenu();
     menuItem.current.focus();
   }
-
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
       e.stopPropagation();
     }
-
     if (match.match(e, keys.Enter) || match.match(e, keys.Space)) {
       handleClick(e);
     }
-
     if (rest.onKeyDown) {
       rest.onKeyDown(e);
     }
   }
-
   const classNames = cx__default["default"](className, `${prefix}--menu-item`, {
     [`${prefix}--menu-item--disabled`]: isDisabled,
     [`${prefix}--menu-item--danger`]: isDanger
-  }); // on first render, register this menuitem in the context's state
-  // (used for keyboard navigation)
+  });
 
+  // on first render, register this menuitem in the context's state
+  // (used for keyboard navigation)
   React.useEffect(() => {
-    registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    registerItem();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
     role: "menuitem"
@@ -176,37 +167,30 @@ MenuItem.propTypes = {
    * Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the MenuItem is disabled or not.
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify the kind of the MenuItem.
    */
   kind: PropTypes__default["default"].oneOf(['default', 'danger']),
-
   /**
    * A required label titling the MenuItem. Will be rendered as its text content.
    */
   label: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional function to be called when the MenuItem is clicked.
    */
   onClick: PropTypes__default["default"].func,
-
   /**
    * This prop is not intended for use. The only supported icons are Checkmarks to depict single- and multi-selects. This prop is used by MenuItemSelectable and MenuItemRadioGroup automatically.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
   /**
    * Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
    */
@@ -228,15 +212,12 @@ const MenuItemSelectable = /*#__PURE__*/React__default["default"].forwardRef(fun
     onChange,
     defaultValue: defaultSelected ?? false
   });
-
   function handleClick(e) {
     setChecked(!checked);
-
     if (onChange) {
       onChange(e);
     }
   }
-
   React.useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
@@ -260,22 +241,18 @@ MenuItemSelectable.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the option should be selected by default.
    */
   defaultSelected: PropTypes__default["default"].bool,
-
   /**
    * A required label titling this option.
    */
   label: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional function to be called when the selection state changes.
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Pass a bool to props.selected to control the state of this option.
    */
@@ -304,12 +281,10 @@ MenuItemGroup.propTypes = {
    * A collection of MenuItems to be rendered within this group.
    */
   children: PropTypes__default["default"].node,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * A required label titling this group.
    */
@@ -333,15 +308,12 @@ const MenuItemRadioGroup = /*#__PURE__*/React__default["default"].forwardRef(fun
     onChange,
     defaultValue: defaultSelectedItem
   });
-
   function handleClick(item, e) {
     setSelection(item);
-
     if (onChange) {
       onChange(e);
     }
   }
-
   React.useEffect(() => {
     if (!context.state.hasIcons) {
       context.dispatch({
@@ -373,32 +345,26 @@ MenuItemRadioGroup.propTypes = {
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify the default selected item. Must match the type of props.items.
    */
   defaultSelectedItem: PropTypes__default["default"].any,
-
   /**
    * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
    */
   itemToString: PropTypes__default["default"].func,
-
   /**
    * Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
    */
   items: PropTypes__default["default"].array,
-
   /**
    * A required label titling this radio group.
    */
   label: PropTypes__default["default"].string.isRequired,
-
   /**
    * Provide an optional function to be called when the selection changes.
    */
   onChange: PropTypes__default["default"].func,
-
   /**
    * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
    */

package/lib/components/MenuButton/index.js

@@ -28,7 +28,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const spacing = 4; // top and bottom spacing between the button and the menu. in px
-
 const validButtonKinds = ['primary', 'tertiary', 'ghost'];
 const defaultButtonKind = 'primary';
 const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function MenuButton(_ref, forwardRef) {
@@ -55,7 +54,6 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
     handleMousedown,
     handleClose
   } = useAttachedMenu.useAttachedMenu(triggerRef);
-
   function handleClick() {
     if (triggerRef.current) {
       const {
@@ -65,11 +63,9 @@ const MenuButton = /*#__PURE__*/React__default["default"].forwardRef(function Me
       hookOnClick();
     }
   }
-
   function handleOpen() {
     menuRef.current.style.width = `${width}px`;
   }
-
   const triggerClasses = cx__default["default"](`${prefix}--menu-button__trigger`, {
     [`${prefix}--menu-button__trigger--open`]: open
   }, className);
@@ -103,27 +99,22 @@ MenuButton.propTypes = {
    * A collection of MenuItems to be rendered as actions for this MenuButton.
    */
   children: PropTypes__default["default"].node.isRequired,
-
   /**
    * Additional CSS class names.
    */
   className: PropTypes__default["default"].string,
-
   /**
    * Specify whether the MenuButton should be disabled, or not.
    */
   disabled: PropTypes__default["default"].bool,
-
   /**
    * Specify the type of button to be used as the base for the trigger button.
    */
   kind: PropTypes__default["default"].oneOf(validButtonKinds),
-
   /**
    * Provide the label to be renderd on the trigger button.
    */
   label: PropTypes__default["default"].string.isRequired,
-
   /**
    * Specify the size of the button and menu.
    */