@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,480 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var Downshift = require('downshift');
+var isEqual = require('lodash.isequal');
+var PropTypes = require('prop-types');
+var React = require('react');
+require('../ListBox/index.js');
+var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
+var itemToString = require('./tools/itemToString.js');
+var sorting = require('./tools/sorting.js');
+var Selection = require('../../internal/Selection.js');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var createPropAdapter = require('../../tools/createPropAdapter.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
+var index = require('../FeatureFlags/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var ListBox = require('../ListBox/ListBox.js');
+var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var noop = function noop() {};
+
+var getInstanceId = setupGetInstanceId["default"]();
+var _useSelect$stateChang = Downshift.useSelect.stateChangeTypes,
+    ItemClick = _useSelect$stateChang.ItemClick,
+    MenuBlur = _useSelect$stateChang.MenuBlur,
+    MenuKeyDownArrowDown = _useSelect$stateChang.MenuKeyDownArrowDown,
+    MenuKeyDownArrowUp = _useSelect$stateChang.MenuKeyDownArrowUp,
+    MenuKeyDownEnter = _useSelect$stateChang.MenuKeyDownEnter,
+    MenuKeyDownEscape = _useSelect$stateChang.MenuKeyDownEscape,
+    MenuKeyDownSpaceButton = _useSelect$stateChang.MenuKeyDownSpaceButton,
+    ToggleButtonClick = _useSelect$stateChang.ToggleButtonClick;
+var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function MultiSelect(_ref, ref) {
+  var _cx, _cx2, _cx4;
+
+  var containerClassName = _ref.className,
+      id = _ref.id,
+      items = _ref.items,
+      itemToElement = _ref.itemToElement,
+      _itemToString = _ref.itemToString,
+      titleText = _ref.titleText,
+      hideLabel = _ref.hideLabel,
+      helperText = _ref.helperText,
+      label = _ref.label,
+      type = _ref.type,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      initialSelectedItems = _ref.initialSelectedItems,
+      sortItems = _ref.sortItems,
+      compareItems = _ref.compareItems,
+      clearSelectionText = _ref.clearSelectionText,
+      clearSelectionDescription = _ref.clearSelectionDescription,
+      light = _ref.light,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      useTitleInItem = _ref.useTitleInItem,
+      translateWithId = _ref.translateWithId,
+      downshiftProps = _ref.downshiftProps,
+      open = _ref.open,
+      selectionFeedback = _ref.selectionFeedback,
+      onChange = _ref.onChange,
+      onMenuChange = _ref.onMenuChange,
+      direction = _ref.direction,
+      selected = _ref.selectedItems;
+  var prefix = usePrefix.usePrefix();
+
+  var _useRef = React.useRef(getInstanceId()),
+      multiSelectInstanceId = _useRef.current;
+
+  var _useState = React.useState(null),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      highlightedIndex = _useState2[0],
+      setHighlightedIndex = _useState2[1];
+
+  var _useState3 = React.useState(open),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var _useState5 = React.useState(open),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      prevOpenProp = _useState6[0],
+      setPrevOpenProp = _useState6[1];
+
+  var _useState7 = React.useState([]),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      topItems = _useState8[0],
+      setTopItems = _useState8[1];
+
+  var _useSelection = Selection.useSelection({
+    disabled: disabled,
+    initialSelectedItems: initialSelectedItems,
+    onChange: onChange,
+    selectedItems: selected
+  }),
+      controlledSelectedItems = _useSelection.selectedItems,
+      onItemChange = _useSelection.onItemChange,
+      clearSelection = _useSelection.clearSelection;
+
+  var _useSelect = Downshift.useSelect(createPropAdapter.mapDownshiftProps(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, downshiftProps), {}, {
+    highlightedIndex: highlightedIndex,
+    isOpen: isOpen,
+    itemToString: function itemToString(items) {
+      return items.map(function (item) {
+        return _itemToString(item);
+      }).join(', ');
+    },
+    onStateChange: onStateChange,
+    selectedItem: controlledSelectedItems,
+    items: items
+  }))),
+      getToggleButtonProps = _useSelect.getToggleButtonProps,
+      getLabelProps = _useSelect.getLabelProps,
+      getMenuProps = _useSelect.getMenuProps,
+      getItemProps = _useSelect.getItemProps,
+      selectedItems = _useSelect.selectedItem;
+  /**
+   * wrapper function to forward changes to consumer
+   */
+
+
+  var setIsOpenWrapper = function setIsOpenWrapper(open) {
+    setIsOpen(open);
+
+    if (onMenuChange) {
+      onMenuChange(open);
+    }
+  };
+  /**
+   * programmatically control this `open` prop
+   */
+
+
+  if (prevOpenProp !== open) {
+    setIsOpenWrapper(open);
+    setPrevOpenProp(open);
+  }
+
+  var inline = type === 'inline';
+  var showWarning = !invalid && warn;
+  var enabled = index.useFeatureFlag('enable-v11-release');
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _cx));
+  var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
+  var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
+  var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
+  var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx4)); // needs to be capitalized for react to render it correctly
+
+  var ItemToElement = itemToElement;
+  var sortOptions = {
+    selectedItems: controlledSelectedItems,
+    itemToString: _itemToString,
+    compareItems: compareItems,
+    locale: 'en'
+  };
+
+  if (selectionFeedback === 'fixed') {
+    sortOptions.selectedItems = [];
+  } else if (selectionFeedback === 'top-after-reopen') {
+    sortOptions.selectedItems = topItems;
+  }
+
+  function onStateChange(changes) {
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
+    }
+
+    var type = changes.type;
+
+    switch (type) {
+      case ItemClick:
+      case MenuKeyDownSpaceButton:
+      case MenuKeyDownEnter:
+        if (changes.selectedItem === undefined) {
+          break;
+        }
+
+        onItemChange(changes.selectedItem);
+        break;
+
+      case MenuKeyDownArrowDown:
+      case MenuKeyDownArrowUp:
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+
+      case MenuBlur:
+      case MenuKeyDownEscape:
+        setIsOpenWrapper(false);
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+
+      case ToggleButtonClick:
+        setIsOpenWrapper(changes.isOpen || false);
+        setHighlightedIndex(changes.highlightedIndex);
+        break;
+    }
+  }
+
+  var onKeyDown = function onKeyDown(e) {
+    if (match.match(e, keys.Delete) && !disabled) {
+      clearSelection();
+      e.stopPropagation();
+    }
+  };
+
+  var toggleButtonProps = getToggleButtonProps();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    className: titleClasses
+  }, getLabelProps()), titleText && titleText, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--visually-hidden")
+  }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText)), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    type: type,
+    size: size,
+    className: className,
+    disabled: disabled,
+    light: light,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    isOpen: isOpen,
+    id: id
+  }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: "".concat(prefix, "--list-box__invalid-icon")
+  }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+  }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    className: "".concat(prefix, "--list-box__field"),
+    disabled: disabled,
+    "aria-disabled": disabled
+  }, toggleButtonProps, {
+    ref: mergeRefs["default"](toggleButtonProps.ref, ref),
+    onKeyDown: onKeyDown
+  }), selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Selection, {
+    clearSelection: !disabled ? clearSelection : noop,
+    selectionCount: selectedItems.length,
+    translateWithId: translateWithId,
+    disabled: disabled
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    id: fieldLabelId,
+    className: "".concat(prefix, "--list-box__label")
+  }, label), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuIcon, {
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  })), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Menu, _rollupPluginBabelHelpers["extends"]({
+    "aria-multiselectable": "true"
+  }, getMenuProps()), isOpen && sortItems(items, sortOptions).map(function (item, index) {
+    var _getItemProps;
+
+    var itemProps = getItemProps((_getItemProps = {
+      item: item
+    }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', isChecked ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
+
+    var itemText = _itemToString(item);
+
+    var isChecked = selectedItems.filter(function (selected) {
+      return isEqual__default["default"](selected, item);
+    }).length > 0;
+    return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+      key: itemProps.id,
+      isActive: isChecked,
+      "aria-label": itemText,
+      isHighlighted: highlightedIndex === index,
+      title: itemText
+    }, itemProps), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--checkbox-wrapper")
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      title: useTitleInItem ? itemText : null,
+      className: "".concat(prefix, "--checkbox-label"),
+      "data-contained-checkbox-state": isChecked,
+      id: "".concat(itemProps.id, "__checkbox")
+    }, itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+      key: itemProps.id
+    }, item)) : itemText)));
+  }))), !inline && !invalid && !warn && helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
+    className: helperClasses
+  }, helperText));
+});
+MultiSelect.displayName = 'MultiSelect';
+MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, MultiSelectPropTypes.sortingPropTypes), {}, {
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
+   */
+  initialSelectedItems: PropTypes__default["default"].array,
+
+  /**
+   * Is the current selection invalid?
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * If invalid, what is the error?
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes__default["default"].func,
+
+  /**
+   * 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: PropTypes__default["default"].func,
+
+  /**
+   * 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: PropTypes__default["default"].array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes__default["default"].string,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was opend(`true`)/closed(`false`).
+   */
+  onMenuChange: PropTypes__default["default"].func,
+
+  /**
+   * Initialize the component with an open(`true`)/closed(`false`) menu.
+   */
+  open: PropTypes__default["default"].bool,
+
+  /**
+   * For full control of the selected items
+   */
+  selectedItems: PropTypes__default["default"].array,
+
+  /**
+   * 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: PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Provide text to be used in a `<label>` element that is tied to the
+   * multiselect via ARIA attributes.
+   */
+  titleText: PropTypes__default["default"].node,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * Specify 'inline' to create an inline multi-select.
+   */
+  type: PropTypes__default["default"].oneOf(['default', 'inline']),
+
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+});
+MultiSelect.defaultProps = {
+  compareItems: sorting.defaultCompareItems,
+  disabled: false,
+  locale: 'en',
+  itemToString: itemToString.defaultItemToString,
+  initialSelectedItems: [],
+  sortItems: sorting.defaultSortItems,
+  type: 'default',
+  light: false,
+  title: false,
+  open: false,
+  selectionFeedback: 'top-after-reopen',
+  direction: 'bottom',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: ',
+  selectedItems: null
+};
+var MultiSelect$1 = MultiSelect;
+
+exports["default"] = MultiSelect$1;

package/lib/components/MultiSelect/MultiSelectPropTypes.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var sortingPropTypes = {
+  /**
+   * Provide a compare function that is used to determine the ordering of
+   * options. `compareItems` has the following function signature:
+   *
+   * compareFunction :
+   *  (itemA: string, itemB: string, { locale: string }) => number
+   */
+  compareItems: PropTypes__default["default"].func.isRequired,
+
+  /**
+   * Provide a method that sorts all options in the control. Overriding this
+   * prop means that you also have to handle the sort logic for selected versus
+   * un-selected items. If you just want to control ordering, consider the
+   * `compareItems` prop instead.
+   *
+   * `sortItems` has the following signature:
+   *
+   * sortItems :
+   *   (items: Array<Item>, {
+   *     selectedItems: Array<Item>,
+   *     itemToString: Item => string,
+   *     compareItems: (itemA: string, itemB: string, {
+   *       locale: string
+   *     }) => number,
+   *     locale: string,
+   *   }) => Array<Item>
+   */
+  sortItems: PropTypes__default["default"].func.isRequired
+};
+
+exports.sortingPropTypes = sortingPropTypes;

package/lib/components/MultiSelect/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
+var MultiSelect = require('./MultiSelect.js');
+var FilterableMultiSelect$2 = require('./FilterableMultiSelect.js');
+var FilterableMultiSelect$1 = require('./next/FilterableMultiSelect.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+FilterableMultiSelect$1["default"].displayName = 'MultiSelect.Filterable';
+MultiSelect["default"].Filterable = FilterableMultiSelect$2["default"];
+var FilterableMultiSelect = FeatureFlags__namespace.enabled('enable-v11-release') ? FilterableMultiSelect$1["default"] : FilterableMultiSelect$2["default"];
+
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject.deprecateFieldOnObject(MultiSelect["default"], 'Filterable', FilterableMultiSelect);
+}
+
+exports["default"] = MultiSelect["default"];
+exports.FilterableMultiSelect = FilterableMultiSelect;