@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -0,0 +1,576 @@
+/**
+ * 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.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import cx from 'classnames';
+import Downshift from 'downshift';
+import isEqual from 'lodash.isequal';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { defaultFilterItems } from '../ComboBox/tools/filter.js';
+import { sortingPropTypes } from './MultiSelectPropTypes.js';
+import '../ListBox/index.js';
+import Selection from '../../internal/Selection.js';
+import { mapDownshiftProps } from '../../tools/createPropAdapter.js';
+import { defaultItemToString } from './tools/itemToString.js';
+import mergeRefs from '../../tools/mergeRefs.js';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
+import { FeatureFlagContext } from '../FeatureFlags/index.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
+import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
+import ListBox from '../ListBox/ListBox.js';
+import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { Space } from '../../internal/keyboard/keys.js';
+
+var getInstanceId = setupGetInstanceId();
+
+var FilterableMultiSelect = /*#__PURE__*/function (_React$Component) {
+  _inherits(FilterableMultiSelect, _React$Component);
+
+  var _super = _createSuper(FilterableMultiSelect);
+
+  function FilterableMultiSelect(props) {
+    var _this;
+
+    _classCallCheck(this, FilterableMultiSelect);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (changes) {
+      if (_this.props.onChange) {
+        _this.props.onChange(changes);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnMenuChange", function (isOpen) {
+      _this.setState(function (state) {
+        return {
+          isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : !state.isOpen
+        };
+      });
+
+      if (_this.props.onMenuChange) {
+        _this.props.onMenuChange(isOpen);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnOuterClick", function () {
+      _this.handleOnMenuChange(false);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnStateChange", function (changes, downshift) {
+      if (changes.isOpen && !_this.state.isOpen) {
+        _this.setState({
+          topItems: downshift.selectedItem
+        });
+      }
+
+      var type = changes.type;
+      var stateChangeTypes = Downshift.stateChangeTypes;
+
+      switch (type) {
+        case stateChangeTypes.keyDownArrowDown:
+        case stateChangeTypes.keyDownArrowUp:
+        case stateChangeTypes.keyDownHome:
+        case stateChangeTypes.keyDownEnd:
+          _this.setState({
+            highlightedIndex: changes.highlightedIndex !== undefined ? changes.highlightedIndex : null
+          });
+
+          if (stateChangeTypes.keyDownArrowDown === type && !_this.state.isOpen) {
+            _this.handleOnMenuChange(true);
+          }
+
+          break;
+
+        case stateChangeTypes.keyDownEscape:
+          _this.handleOnMenuChange(false);
+
+          break;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnInputKeyDown", function (event) {
+      event.stopPropagation();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOnInputValueChange", function (inputValue, _ref) {
+      var type = _ref.type;
+
+      if (type !== Downshift.stateChangeTypes.changeInput) {
+        return;
+      }
+
+      _this.setState(function () {
+        if (Array.isArray(inputValue)) {
+          return {
+            inputValue: ''
+          };
+        }
+
+        return {
+          inputValue: inputValue || ''
+        };
+      });
+
+      if (inputValue && !_this.state.isOpen) {
+        _this.handleOnMenuChange(true);
+      } else if (!inputValue && _this.state.isOpen) {
+        _this.handleOnMenuChange(false);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearInputValue", function () {
+      _this.setState({
+        inputValue: ''
+      }, function () {
+        if (_this.textInput.current) {
+          _this.textInput.current.focus();
+        }
+      });
+    });
+
+    _this.filterableMultiSelectInstanceId = getInstanceId();
+    _this.state = {
+      isOpen: props.open,
+      inputValue: '',
+      topItems: [],
+      inputFocused: false,
+      highlightedIndex: null
+    };
+    _this.textInput = /*#__PURE__*/React__default.createRef();
+    return _this;
+  }
+
+  _createClass(FilterableMultiSelect, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          highlightedIndex = _this$state.highlightedIndex,
+          isOpen = _this$state.isOpen,
+          inputValue = _this$state.inputValue;
+      var _this$props = this.props,
+          ariaLabel = _this$props.ariaLabel,
+          containerClassName = _this$props.className,
+          direction = _this$props.direction,
+          disabled = _this$props.disabled,
+          filterItems = _this$props.filterItems,
+          items = _this$props.items,
+          itemToElement = _this$props.itemToElement,
+          itemToString = _this$props.itemToString,
+          titleText = _this$props.titleText,
+          hideLabel = _this$props.hideLabel,
+          helperText = _this$props.helperText,
+          type = _this$props.type,
+          initialSelectedItems = _this$props.initialSelectedItems,
+          id = _this$props.id,
+          locale = _this$props.locale,
+          size = _this$props.size,
+          placeholder = _this$props.placeholder,
+          sortItems = _this$props.sortItems,
+          compareItems = _this$props.compareItems,
+          light = _this$props.light,
+          invalid = _this$props.invalid,
+          invalidText = _this$props.invalidText,
+          warn = _this$props.warn,
+          warnText = _this$props.warnText,
+          useTitleInItem = _this$props.useTitleInItem,
+          translateWithId = _this$props.translateWithId,
+          downshiftProps = _this$props.downshiftProps;
+      var inline = type === 'inline';
+      var showWarning = !invalid && warn; // needs to be capitalized for react to render it correctly
+
+      var ItemToElement = itemToElement;
+      var scope = this.context;
+      var enabled;
+
+      if (scope.enabled) {
+        enabled = scope.enabled('enable-v11-release');
+      }
+
+      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
+        var _cx, _cx2, _cx3, _cx4;
+
+        var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
+        var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(_this2.filterableMultiSelectInstanceId);
+        var labelId = "".concat(id, "-label");
+        var titleClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label"), true), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
+        var helperClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--form__helper-text"), true), _defineProperty(_cx3, "".concat(prefix, "--form__helper-text--disabled"), disabled), _cx3));
+        var inputClasses = cx((_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--text-input"), true), _defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !_this2.state.inputValue), _defineProperty(_cx4, "".concat(prefix, "--text-input--light"), light), _cx4));
+        var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+          id: helperId,
+          className: helperClasses
+        }, helperText) : null;
+        var menuId = "".concat(id, "__menu");
+        var inputId = "".concat(id, "-input");
+        return /*#__PURE__*/React__default.createElement(Selection, {
+          disabled: disabled,
+          onChange: _this2.handleOnChange,
+          initialSelectedItems: initialSelectedItems,
+          render: function render(_ref2) {
+            var selectedItems = _ref2.selectedItems,
+                onItemChange = _ref2.onItemChange,
+                _clearSelection = _ref2.clearSelection;
+            return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, mapDownshiftProps(downshiftProps), {
+              highlightedIndex: highlightedIndex,
+              id: id,
+              isOpen: isOpen,
+              inputValue: inputValue,
+              onInputValueChange: _this2.handleOnInputValueChange,
+              onChange: function onChange(selectedItem) {
+                if (selectedItem !== null) {
+                  onItemChange(selectedItem);
+                }
+              },
+              itemToString: itemToString,
+              onStateChange: _this2.handleOnStateChange,
+              onOuterClick: _this2.handleOnOuterClick,
+              selectedItem: selectedItems,
+              labelId: labelId,
+              menuId: menuId,
+              inputId: inputId
+            }), function (_ref3) {
+              var _cx5;
+
+              var getInputProps = _ref3.getInputProps,
+                  getItemProps = _ref3.getItemProps,
+                  getLabelProps = _ref3.getLabelProps,
+                  getMenuProps = _ref3.getMenuProps,
+                  getRootProps = _ref3.getRootProps,
+                  getToggleButtonProps = _ref3.getToggleButtonProps,
+                  isOpen = _ref3.isOpen,
+                  inputValue = _ref3.inputValue,
+                  selectedItem = _ref3.selectedItem;
+              var className = cx("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), _this2.state.inputFocused), _cx5));
+              var rootProps = getRootProps({}, {
+                suppressRefError: true
+              });
+              var labelProps = getLabelProps();
+              var buttonProps = getToggleButtonProps({
+                disabled: disabled,
+                onClick: function onClick() {
+                  _this2.handleOnMenuChange(!_this2.state.isOpen);
+
+                  if (_this2.textInput.current) {
+                    _this2.textInput.current.focus();
+                  }
+                },
+                // When we moved the "root node" of Downshift to the <input> for
+                // ARIA 1.2 compliance, we unfortunately hit this branch for the
+                // "mouseup" event that downshift listens to:
+                // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+                //
+                // As a result, it will reset the state of the component and so we
+                // stop the event from propagating to prevent this. This allows the
+                // toggleMenu behavior for the toggleButton to correctly open and
+                // close the menu.
+                onMouseUp: function onMouseUp(event) {
+                  event.stopPropagation();
+                }
+              });
+              var inputProps = getInputProps({
+                'aria-controls': isOpen ? menuId : null,
+                'aria-describedby': helperText ? helperId : null,
+                // Remove excess aria `aria-labelledby`. HTML <label for>
+                // provides this aria information.
+                'aria-labelledby': null,
+                disabled: disabled,
+                placeholder: placeholder,
+                onClick: function onClick() {
+                  _this2.handleOnMenuChange(true);
+                },
+                onKeyDown: function onKeyDown(event) {
+                  if (match(event, Space)) {
+                    event.stopPropagation();
+                  }
+                },
+                onFocus: function onFocus() {
+                  _this2.setState({
+                    inputFocused: true
+                  });
+                },
+                onBlur: function onBlur() {
+                  _this2.setState({
+                    inputFocused: false
+                  });
+                }
+              });
+              var menuProps = getMenuProps({
+                'aria-label': ariaLabel
+              }, {
+                suppressRefError: true
+              });
+              return /*#__PURE__*/React__default.createElement("div", {
+                className: wrapperClasses
+              }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
+                className: titleClasses
+              }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+                className: className,
+                disabled: disabled,
+                light: light,
+                invalid: invalid,
+                invalidText: invalidText,
+                warn: warn,
+                warnText: warnText,
+                isOpen: isOpen,
+                size: size
+              }, /*#__PURE__*/React__default.createElement("div", {
+                className: "".concat(prefix, "--list-box__field")
+              }, selectedItem.length > 0 && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+                clearSelection: function clearSelection() {
+                  _clearSelection();
+
+                  if (_this2.textInput.current) {
+                    _this2.textInput.current.focus();
+                  }
+                },
+                selectionCount: selectedItem.length,
+                translateWithId: translateWithId,
+                disabled: disabled
+              }), /*#__PURE__*/React__default.createElement("input", _extends({
+                className: inputClasses
+              }, rootProps, inputProps, {
+                ref: mergeRefs(_this2.textInput, rootProps.ref)
+              })), invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+                className: "".concat(prefix, "--list-box__invalid-icon")
+              }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
+                className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+              }), inputValue && /*#__PURE__*/React__default.createElement(ListBoxSelection, {
+                clearSelection: _this2.clearInputValue,
+                disabled: disabled,
+                translateWithId: translateWithId,
+                onMouseUp: function onMouseUp(event) {
+                  // If we do not stop this event from propagating,
+                  // it seems like Downshift takes our event and
+                  // prevents us from getting `onClick` /
+                  // `clearSelection` from the underlying <button> in
+                  // ListBoxSelection
+                  event.stopPropagation();
+                }
+              }), /*#__PURE__*/React__default.createElement(ListBoxTrigger, _extends({}, buttonProps, {
+                isOpen: isOpen,
+                translateWithId: translateWithId
+              }))), isOpen ? /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, sortItems(filterItems(items, {
+                itemToString: itemToString,
+                inputValue: inputValue
+              }), {
+                selectedItems: {
+                  top: selectedItems,
+                  fixed: [],
+                  'top-after-reopen': _this2.state.topItems
+                }[_this2.props.selectionFeedback],
+                itemToString: itemToString,
+                compareItems: compareItems,
+                locale: locale
+              }).map(function (item, index) {
+                var itemProps = getItemProps({
+                  item: item,
+                  disabled: item.disabled
+                });
+                var itemText = itemToString(item);
+                var isChecked = selectedItem.filter(function (selected) {
+                  return isEqual(selected, item);
+                }).length > 0;
+                return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
+                  key: itemProps.id,
+                  "aria-label": itemText,
+                  isActive: isChecked,
+                  isHighlighted: highlightedIndex === index,
+                  title: itemText
+                }, itemProps), /*#__PURE__*/React__default.createElement("div", {
+                  className: "".concat(prefix, "--checkbox-wrapper")
+                }, /*#__PURE__*/React__default.createElement("span", {
+                  title: useTitleInItem ? itemText : null,
+                  className: "".concat(prefix, "--checkbox-label"),
+                  "data-contained-checkbox-state": isChecked,
+                  id: "".concat(itemProps.id, "-item")
+                }, itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+                  key: itemProps.id
+                }, item)) : itemText)));
+              })) : null), !inline && !invalid && !warn ? helper : null);
+            });
+          }
+        });
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref4, state) {
+      var open = _ref4.open;
+
+      /**
+       * programmatically control this `open` prop
+       */
+      var prevOpen = state.prevOpen;
+      return prevOpen === open ? null : {
+        isOpen: open,
+        prevOpen: open
+      };
+    }
+  }]);
+
+  return FilterableMultiSelect;
+}(React__default.Component);
+
+_defineProperty(FilterableMultiSelect, "propTypes", _objectSpread2(_objectSpread2({
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in arbitrary items from their collection that are
+   * pre-selected
+   */
+  initialSelectedItems: PropTypes.array,
+
+  /**
+   * Is the current selection invalid?
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * If invalid, what is the error?
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.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.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.array.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Specify the locale of the control. Used for the default `compareItems`
+   * used for sorting the list of items in the control.
+   */
+  locale: PropTypes.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.func,
+
+  /**
+   * `onMenuChange` is a utility for this controlled component to communicate to a
+   * consuming component that the menu was opened(`true`)/closed(`false`).
+   */
+  onMenuChange: PropTypes.func,
+
+  /**
+   * Initialize the component with an open(`true`)/closed(`false`) menu.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Generic `placeholder` that will be used as the textual representation of
+   * what this field is for
+   */
+  placeholder: PropTypes.string.isRequired,
+
+  /**
+   * 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.oneOf(['top', 'fixed', 'top-after-reopen']),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxSize
+}, sortingPropTypes), {}, {
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify title to show title on hover
+   */
+  useTitleInItem: PropTypes.bool,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+}));
+
+_defineProperty(FilterableMultiSelect, "contextType", FeatureFlagContext);
+
+_defineProperty(FilterableMultiSelect, "defaultProps", {
+  ariaLabel: 'Choose an item',
+  compareItems: defaultCompareItems,
+  direction: 'bottom',
+  disabled: false,
+  filterItems: defaultFilterItems,
+  initialSelectedItems: [],
+  itemToString: defaultItemToString,
+  locale: 'en',
+  sortItems: defaultSortItems,
+  light: false,
+  open: false,
+  selectionFeedback: 'top-after-reopen'
+});
+
+export { FilterableMultiSelect as default };