@carbon/react 1.23.0 → 1.24.0-rc.0

package/es/components/Menu/MenuItem.js

@@ -1,58 +1,440 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import MenuOption from './MenuOption.js';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import { CaretRight, Checkmark } from '@carbon/react/icons';
+import { useControllableState } from '../../internal/useControllableState.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Menu } from './Menu.js';
+import { MenuContext } from './MenuContext.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["label", "children", "disabled", "kind", "shortcut"];
+var _CaretRight;
 
-function MenuItem(_ref) {
-  var label = _ref.label,
-      children = _ref.children,
+var _excluded = ["children", "className", "disabled", "kind", "label", "onClick", "renderIcon", "shortcut"],
+    _excluded2 = ["className", "defaultSelected", "label", "onChange", "selected"],
+    _excluded3 = ["children", "className", "label"],
+    _excluded4 = ["className", "defaultSelectedItem", "items", "itemToString", "label", "onChange", "selectedItem"],
+    _excluded5 = ["className"];
+var hoverIntentDelay = 150; // in ms
+
+var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, forwardRef) {
+  var _cx;
+
+  var children = _ref.children,
+      className = _ref.className,
       disabled = _ref.disabled,
-      kind = _ref.kind,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? 'default' : _ref$kind,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      IconElement = _ref.renderIcon,
       shortcut = _ref.shortcut,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React__default.createElement(MenuOption, _extends({}, rest, {
-    label: label,
-    disabled: disabled,
-    kind: kind,
-    shortcut: shortcut
-  }), children);
-}
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+  var menuItem = useRef();
+  var ref = useMergedRefs([forwardRef, menuItem]);
+
+  var _useState = useState({
+    x: -1,
+    y: -1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      boundaries = _useState2[0],
+      setBoundaries = _useState2[1];
+
+  var hasChildren = Boolean(children);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      submenuOpen = _useState4[0],
+      setSubmenuOpen = _useState4[1];
+
+  var hoverIntentTimeout = useRef(null);
+  var isDisabled = disabled && !hasChildren;
+  var isDanger = kind === 'danger' && !hasChildren;
+
+  function registerItem() {
+    context.dispatch({
+      type: 'registerItem',
+      payload: {
+        ref: menuItem,
+        disabled: Boolean(disabled)
+      }
+    });
+  }
+
+  function openSubmenu() {
+    var _menuItem$current$get = menuItem.current.getBoundingClientRect(),
+        x = _menuItem$current$get.x,
+        y = _menuItem$current$get.y,
+        width = _menuItem$current$get.width,
+        height = _menuItem$current$get.height;
+
+    setBoundaries({
+      x: [x, x + width],
+      y: [y, y + height]
+    });
+    setSubmenuOpen(true);
+  }
+
+  function closeSubmenu() {
+    setSubmenuOpen(false);
+    setBoundaries({
+      x: -1,
+      y: -1
+    });
+  }
+
+  function handleClick(e) {
+    if (!isDisabled) {
+      if (hasChildren) {
+        openSubmenu();
+      } else {
+        context.state.requestCloseRoot(e);
 
+        if (onClick) {
+          onClick(e);
+        }
+      }
+    }
+  }
+
+  function handleMouseEnter() {
+    hoverIntentTimeout.current = setTimeout(function () {
+      openSubmenu();
+    }, hoverIntentDelay);
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(hoverIntentTimeout.current);
+    closeSubmenu();
+    menuItem.current.focus();
+  }
+
+  function handleKeyDown(e) {
+    if (hasChildren && match(e, ArrowRight)) {
+      openSubmenu();
+    }
+
+    if (match(e, Enter) || match(e, Space)) {
+      handleClick(e);
+    }
+
+    if (rest.onKeyDown) {
+      rest.onKeyDown(e);
+    }
+  }
+
+  var classNames = cx(className, "".concat(prefix, "--menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--menu-item--disabled"), isDisabled), _defineProperty(_cx, "".concat(prefix, "--menu-item--danger"), isDanger), _cx)); // on first render, register this menuitem in the context's state
+  // (used for keyboard navigation)
+
+  useEffect(function () {
+    registerItem(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    role: "menuitem"
+  }, rest, {
+    ref: ref,
+    className: classNames,
+    tabIndex: "-1",
+    "aria-disabled": isDisabled || null,
+    "aria-haspopup": hasChildren || null,
+    "aria-expanded": hasChildren ? submenuOpen : null,
+    onClick: handleClick,
+    onMouseEnter: hasChildren ? handleMouseEnter : null,
+    onMouseLeave: hasChildren ? handleMouseLeave : null,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__icon")
+  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__label")
+  }, label), shortcut && !hasChildren && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--menu-item__shortcut")
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+    label: label,
+    open: submenuOpen,
+    onClose: function onClose() {
+      closeSubmenu();
+      menuItem.current.focus();
+    },
+    x: boundaries.x,
+    y: boundaries.y
+  }, children)));
+});
 MenuItem.propTypes = {
   /**
-   * Specify the children of the MenuItem
+   * 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.node,
 
   /**
-   * Specify whether this MenuItem is disabled
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the MenuItem is disabled or not.
    */
   disabled: PropTypes.bool,
 
   /**
-   * Optional prop to specify the kind of the MenuItem
+   * Specify the kind of the MenuItem.
    */
   kind: PropTypes.oneOf(['default', 'danger']),
 
   /**
-   * Rendered label for the MenuItem
+   * A required label titling the MenuItem. Will be rendered as its text content.
    */
-  label: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the MenuItem is clicked.
+   */
+  onClick: PropTypes.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.oneOfType([PropTypes.func, PropTypes.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.
+   */
+  shortcut: PropTypes.string
+};
+var MenuItemSelectable = /*#__PURE__*/React__default.forwardRef(function MenuItemSelectable(_ref2, forwardRef) {
+  var className = _ref2.className,
+      defaultSelected = _ref2.defaultSelected,
+      label = _ref2.label,
+      onChange = _ref2.onChange,
+      selected = _ref2.selected,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+
+  var _useControllableState = useControllableState({
+    value: selected,
+    onChange: onChange,
+    defaultValue: defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : false
+  }),
+      _useControllableState2 = _slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx(className, "".concat(prefix, "--menu-item-selectable--selected"));
+  return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
+    ref: forwardRef,
+    label: label,
+    className: classNames,
+    role: "menuitemcheckbox",
+    "aria-checked": checked,
+    renderIcon: checked && Checkmark,
+    onClick: handleClick
+  }));
+});
+MenuItemSelectable.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the option should be selected by default.
+   */
+  defaultSelected: PropTypes.bool,
+
+  /**
+   * A required label titling this option.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection state changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Pass a bool to props.selected to control the state of this option.
+   */
+  selected: PropTypes.bool
+};
+var MenuItemGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemGroup(_ref3, forwardRef) {
+  var children = _ref3.children,
+      className = _ref3.className,
+      label = _ref3.label,
+      rest = _objectWithoutProperties(_ref3, _excluded3);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--menu-item-group"));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), children));
+});
+MenuItemGroup.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered within this group.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A required label titling this group.
+   */
+  label: PropTypes.string.isRequired
+};
+var MenuItemRadioGroup = /*#__PURE__*/React__default.forwardRef(function MenuItemRadioGroup(_ref4, forwardRef) {
+  var className = _ref4.className,
+      defaultSelectedItem = _ref4.defaultSelectedItem,
+      items = _ref4.items,
+      _ref4$itemToString = _ref4.itemToString,
+      itemToString = _ref4$itemToString === void 0 ? function (item) {
+    return item.toString();
+  } : _ref4$itemToString,
+      label = _ref4.label,
+      onChange = _ref4.onChange,
+      selectedItem = _ref4.selectedItem,
+      rest = _objectWithoutProperties(_ref4, _excluded4);
+
+  var prefix = usePrefix();
+  var context = useContext(MenuContext);
+
+  var _useControllableState3 = useControllableState({
+    value: selectedItem,
+    onChange: onChange,
+    defaultValue: defaultSelectedItem
+  }),
+      _useControllableState4 = _slicedToArray(_useControllableState3, 2),
+      selection = _useControllableState4[0],
+      setSelection = _useControllableState4[1];
+
+  function handleClick(item, e) {
+    setSelection(item);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  useEffect(function () {
+    if (!context.state.hasIcons) {
+      context.dispatch({
+        type: 'enableIcons'
+      });
+    }
+  }, [context.state.hasIcons, context]);
+  var classNames = cx(className, "".concat(prefix, "--menu-item-radio-group"));
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames,
+    role: "none",
+    ref: forwardRef
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, rest, {
+    role: "group",
+    "aria-label": label
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: i,
+      label: itemToString(item),
+      role: "menuitemradio",
+      "aria-checked": item === selection,
+      renderIcon: item === selection && Checkmark,
+      onClick: function onClick(e) {
+        handleClick(item, e);
+      }
+    });
+  })));
+});
+MenuItemRadioGroup.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the default selected item. Must match the type of props.items.
+   */
+  defaultSelectedItem: PropTypes.any,
+
+  /**
+   * Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
+   */
+  itemToString: PropTypes.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.array,
+
+  /**
+   * A required label titling this radio group.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional function to be called when the selection changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
+   */
+  selectedItem: PropTypes.any
+};
+var MenuItemDivider = /*#__PURE__*/React__default.forwardRef(function MenuItemDivider(_ref5, forwardRef) {
+  var className = _ref5.className,
+      rest = _objectWithoutProperties(_ref5, _excluded5);
 
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--menu-item-divider"));
+  return /*#__PURE__*/React__default.createElement("li", _extends({}, rest, {
+    className: classNames,
+    role: "separator",
+    ref: forwardRef
+  }));
+});
+MenuItemDivider.propTypes = {
   /**
-   * Rendered shortcut for the MenuItem
+   * Additional CSS class names.
    */
-  shortcut: PropTypes.node
+  className: PropTypes.string
 };
 
-export { MenuItem as default };
+export { MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable };

package/es/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * 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.

package/es/components/Modal/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * 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.

package/es/components/ModalWrapper/ModalWrapper.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * 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.

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * 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.

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,170 @@
+/**
+ * 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 { UseSelectProps } from 'downshift';
+import React from 'react';
+import { ListBoxSize, ListBoxType } from '../ListBox';
+import { ListBoxProps } from '../ListBox/ListBox';
+import { OnChangeData } from '../Dropdown';
+interface SharedOptions {
+    locale: string;
+}
+interface DownshiftTypedProps<ItemType> {
+    itemToString?(item: ItemType): string;
+}
+interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+    translateWithId?(messageId: MID, args?: ARGS): string;
+}
+interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    selectedItems: ItemType[];
+}
+interface MultiSelectSortingProps<ItemType> {
+    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
+}
+export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+    className?: string;
+    /**
+     * Specify the text that should be read for screen readers that describes total items selected
+     */
+    clearSelectionDescription?: string;
+    /**
+     * Specify the text that should be read for screen readers to clear selection.
+     */
+    clearSelectionText?: string;
+    /**
+     * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+     */
+    direction?: 'bottom' | 'top';
+    /**
+     * Disable the control
+     */
+    disabled?: ListBoxProps['disabled'];
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps?: Partial<UseSelectProps<ItemType>>;
+    /**
+     * Provide helper text that is used alongside the control label for
+     * additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Specify whether the title text should be hidden or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id`
+     */
+    id: string;
+    /**
+     * Allow users to pass in arbitrary items from their collection that are
+     * pre-selected
+     */
+    initialSelectedItems?: ItemType[];
+    /**
+     * Is the current selection invalid?
+     */
+    invalid?: boolean;
+    /**
+     * If invalid, what is the error?
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.JSXElementConstructor<ItemType>;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString?(item: ItemType): string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: NonNullable<React.ReactNode>;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `MultiSelect` has
+     *     been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
+     */
+    light?: boolean;
+    /**
+     * Specify the locale of the control. Used for the default `compareItems`
+     * used for sorting the list of items in the control.
+     */
+    locale?: string;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange?(data: OnChangeData<ItemType>): void;
+    /**
+     * `onMenuChange` is a utility for this controlled component to communicate to a
+     * consuming component that the menu was opend(`true`)/closed(`false`).
+     */
+    onMenuChange?(open: boolean): void;
+    /**
+     * Initialize the component with an open(`true`)/closed(`false`) menu.
+     */
+    open?: boolean;
+    /**
+     * Whether or not the Dropdown is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selected items
+     */
+    selectedItems?: ItemType[];
+    /**
+     * Specify feedback (mode) of the selection.
+     * `top`: selected item jumps to top
+     * `fixed`: selected item stays at it's position
+     * `top-after-reopen`: selected item jump to top after reopen dropdown
+     */
+    selectionFeedback?: 'fixed' | 'top' | 'top-after-reopen';
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+     */
+    size?: ListBoxSize;
+    /**
+     * Provide text to be used in a `<label>` element that is tied to the
+     * multiselect via ARIA attributes.
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Specify 'inline' to create an inline multi-select.
+     */
+    type?: ListBoxType;
+    /**
+     * Specify title to show title on hover
+     */
+    useTitleInItem?: boolean;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+type MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
+interface MultiSelectComponent {
+    <ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement | null;
+}
+declare const _default: MultiSelectComponent;
+export default _default;