@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -0,0 +1,543 @@
+/**
+ * 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 cx = require('classnames');
+var Downshift = require('downshift');
+var PropTypes = require('prop-types');
+var React = require('react');
+require('../Text/index.js');
+var iconsReact = require('@carbon/icons-react');
+require('../ListBox/index.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 Text = require('../Text/Text.js');
+var ListBox = require('../ListBox/ListBox.js');
+var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
+var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.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 PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["ariaLabel", "className", "direction", "disabled", "downshiftProps", "helperText", "id", "initialSelectedItem", "invalid", "invalidText", "items", "itemToElement", "itemToString", "light", "onChange", "onInputChange", "onToggleClick", "placeholder", "selectedItem", "shouldFilterItem", "size", "titleText", "translateWithId", "type", "warn", "warnText", "onStateChange"];
+
+var defaultItemToString = function defaultItemToString(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item && item.label;
+};
+
+var defaultShouldFilterItem = function defaultShouldFilterItem() {
+  return true;
+};
+
+var getInputValue = function getInputValue(_ref) {
+  var initialSelectedItem = _ref.initialSelectedItem,
+      inputValue = _ref.inputValue,
+      itemToString = _ref.itemToString,
+      selectedItem = _ref.selectedItem;
+
+  if (selectedItem) {
+    return itemToString(selectedItem);
+  } // TODO: consistent `initialSelectedItem` behavior with other listbox components in v11
+
+
+  if (initialSelectedItem) {
+    return itemToString(initialSelectedItem);
+  }
+
+  return inputValue || '';
+};
+
+var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
+  var items = _ref2.items,
+      itemToString = _ref2.itemToString;
+
+  if (!inputValue) {
+    return -1;
+  }
+
+  var searchValue = inputValue.toLowerCase();
+
+  for (var i = 0; i < items.length; i++) {
+    var item = itemToString(items[i]).toLowerCase();
+
+    if (item.indexOf(searchValue) !== -1) {
+      return i;
+    }
+  }
+
+  return -1;
+};
+
+var getInstanceId = setupGetInstanceId["default"]();
+var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var _cx, _Text;
+
+  var ariaLabel = props.ariaLabel,
+      containerClassName = props.className,
+      direction = props.direction,
+      disabled = props.disabled,
+      downshiftProps = props.downshiftProps,
+      helperText = props.helperText,
+      id = props.id,
+      initialSelectedItem = props.initialSelectedItem,
+      invalid = props.invalid,
+      invalidText = props.invalidText,
+      items = props.items,
+      itemToElement = props.itemToElement,
+      itemToString = props.itemToString,
+      light = props.light,
+      onChange = props.onChange,
+      onInputChange = props.onInputChange,
+      onToggleClick = props.onToggleClick,
+      placeholder = props.placeholder,
+      selectedItem = props.selectedItem,
+      shouldFilterItem = props.shouldFilterItem,
+      size = props.size,
+      titleText = props.titleText,
+      translateWithId = props.translateWithId;
+      props.type;
+      var warn = props.warn,
+      warnText = props.warnText;
+      props.onStateChange;
+      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var textInput = React.useRef();
+  var comboBoxInstanceId = getInstanceId();
+
+  var _useState = React.useState(getInputValue({
+    initialSelectedItem: initialSelectedItem,
+    inputValue: '',
+    itemToString: itemToString,
+    selectedItem: selectedItem
+  })),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevSelectedItem = _useState4[0],
+      setPrevSelectedItem = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      doneInitialSelectedItem = _useState6[0],
+      setDoneInitialSelectedItem = _useState6[1];
+
+  var savedOnInputChange = React.useRef(onInputChange);
+
+  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
+    setDoneInitialSelectedItem(true);
+    setPrevSelectedItem(selectedItem);
+    setInputValue(getInputValue({
+      initialSelectedItem: initialSelectedItem,
+      inputValue: inputValue,
+      itemToString: itemToString,
+      selectedItem: selectedItem
+    }));
+  }
+
+  var filterItems = function filterItems(items, itemToString, inputValue) {
+    return items.filter(function (item) {
+      return shouldFilterItem({
+        item: item,
+        itemToString: itemToString,
+        inputValue: inputValue
+      });
+    });
+  };
+
+  var handleOnChange = function handleOnChange(selectedItem) {
+    if (onChange) {
+      onChange({
+        selectedItem: selectedItem
+      });
+    }
+  };
+
+  var handleOnInputValueChange = function handleOnInputValueChange(inputValue) {
+    setInputValue(inputValue || '');
+  };
+
+  React.useEffect(function () {
+    savedOnInputChange.current = onInputChange;
+  }, [onInputChange]);
+  React.useEffect(function () {
+    if (savedOnInputChange.current) {
+      savedOnInputChange.current(inputValue);
+    }
+  }, [inputValue]);
+
+  var handleSelectionClear = function handleSelectionClear() {
+    if (textInput !== null && textInput !== void 0 && textInput.current) {
+      textInput.current.focus();
+    }
+  };
+
+  var handleOnStateChange = function handleOnStateChange(newState, _ref3) {
+    var setHighlightedIndex = _ref3.setHighlightedIndex;
+
+    if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
+      var _inputValue = newState.inputValue;
+      var filteredItems = filterItems(items, itemToString, _inputValue);
+      setHighlightedIndex(findHighlightedIndex(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+        items: filteredItems
+      }), _inputValue));
+    }
+  };
+
+  var handleToggleClick = function handleToggleClick(isOpen) {
+    return function (event) {
+      if (onToggleClick) {
+        onToggleClick(event);
+      }
+
+      if (event.target === textInput.current && isOpen) {
+        event.preventDownshiftDefault = true;
+        event.persist();
+      }
+    };
+  };
+
+  var enabled = index.useFeatureFlag('enable-v11-release');
+  var showWarning = !invalid && warn;
+  var className = cx__default["default"]("".concat(prefix, "--combo-box"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--combo-box--warning"), showWarning), _cx));
+  var titleClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
+  var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
+  var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null]);
+  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
+
+  var ItemToElement = itemToElement;
+  return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, createPropAdapter.mapDownshiftProps(downshiftProps), {
+    onChange: handleOnChange,
+    onInputValueChange: handleOnInputValueChange,
+    onStateChange: function onStateChange() {
+      var _downshiftProps$onSta;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      handleOnStateChange.apply(void 0, args);
+      downshiftProps === null || downshiftProps === void 0 ? void 0 : (_downshiftProps$onSta = downshiftProps.onStateChange) === null || _downshiftProps$onSta === void 0 ? void 0 : _downshiftProps$onSta.call.apply(_downshiftProps$onSta, [downshiftProps].concat(args));
+    },
+    inputValue: inputValue || '',
+    itemToString: itemToString,
+    initialSelectedItem: initialSelectedItem,
+    inputId: id,
+    selectedItem: selectedItem
+  }), function (_ref4) {
+    var _textInput$current;
+
+    var getInputProps = _ref4.getInputProps,
+        getItemProps = _ref4.getItemProps,
+        getLabelProps = _ref4.getLabelProps,
+        getMenuProps = _ref4.getMenuProps,
+        getRootProps = _ref4.getRootProps,
+        getToggleButtonProps = _ref4.getToggleButtonProps,
+        isOpen = _ref4.isOpen,
+        inputValue = _ref4.inputValue,
+        selectedItem = _ref4.selectedItem,
+        highlightedIndex = _ref4.highlightedIndex,
+        clearSelection = _ref4.clearSelection,
+        toggleMenu = _ref4.toggleMenu;
+    var rootProps = getRootProps({}, {
+      suppressRefError: true
+    });
+    var labelProps = getLabelProps();
+    var buttonProps = getToggleButtonProps({
+      disabled: disabled,
+      onClick: handleToggleClick(isOpen),
+      // 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 if the menu is already open.
+      // This allows the toggleMenu behavior for the toggleButton to correctly open and
+      // close the menu.
+      onMouseUp: function onMouseUp(event) {
+        if (isOpen) {
+          event.stopPropagation();
+        }
+      }
+    });
+    var inputProps = getInputProps({
+      // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
+      'aria-labelledby': null,
+      disabled: disabled,
+      placeholder: placeholder,
+      onClick: function onClick() {
+        toggleMenu();
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (match.match(event, keys.Space)) {
+          event.stopPropagation();
+        }
+
+        if (match.match(event, keys.Enter) && !inputValue) {
+          toggleMenu();
+        }
+      }
+    });
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: wrapperClasses
+    }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
+      as: "label",
+      className: titleClasses
+    }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+      className: className,
+      disabled: disabled,
+      invalid: invalid,
+      invalidText: invalidText,
+      isOpen: isOpen,
+      light: light,
+      size: size,
+      warn: warn,
+      warnText: warnText
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--list-box__field")
+    }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({
+      role: "combobox",
+      disabled: disabled,
+      className: inputClasses,
+      type: "text",
+      tabIndex: "0",
+      "aria-autocomplete": "list",
+      "aria-expanded": rootProps['aria-expanded'],
+      "aria-haspopup": "listbox",
+      "aria-controls": inputProps['aria-controls'],
+      title: textInput === null || textInput === void 0 ? void 0 : (_textInput$current = textInput.current) === null || _textInput$current === void 0 ? void 0 : _textInput$current.value
+    }, inputProps, rest, {
+      ref: mergeRefs["default"](textInput, ref)
+    })), 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")
+    }), inputValue && /*#__PURE__*/React__default["default"].createElement(ListBoxSelection["default"], {
+      clearSelection: clearSelection,
+      translateWithId: translateWithId,
+      disabled: disabled,
+      onClearSelection: handleSelectionClear
+    }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
+      isOpen: isOpen,
+      translateWithId: translateWithId
+    }))), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Menu, getMenuProps({
+      'aria-label': ariaLabel
+    }), isOpen ? filterItems(items, itemToString, inputValue).map(function (item, index) {
+      var _getItemProps;
+
+      var itemProps = getItemProps((_getItemProps = {
+        item: item,
+        index: index
+      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
+      return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+        key: itemProps.id,
+        isActive: selectedItem === item,
+        tabIndex: "-1",
+        isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
+        title: itemToElement ? item.text : itemToString(item)
+      }, itemProps), itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+        key: itemProps.id
+      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
+        className: "".concat(prefix, "--list-box__menu-item__selected-icon")
+      }));
+    }) : null)), helperText && !invalid && !warn && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+      as: "div",
+      id: comboBoxHelperId,
+      className: helperClasses
+    }, helperText))));
+  });
+});
+ComboBox.displayName = 'ComboBox';
+ComboBox.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes__default["default"].string,
+
+  /**
+   * An optional className to add to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the direction of the combobox dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes__default["default"].string,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Optional 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,
+
+  /**
+   * should use "light theme" (white background)?
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component when a specific dropdown item is selected.
+   * @param {{ selectedItem }}
+   */
+  onChange: PropTypes__default["default"].func.isRequired,
+
+  /**
+   * Callback function to notify consumer when the text input changes.
+   * This provides support to change available items based on the text.
+   * @param {string} inputText
+   */
+  onInputChange: PropTypes__default["default"].func,
+
+  /**
+   * Helper function passed to Downshift that allows the user to observe internal
+   * state changes
+   */
+  onStateChange: PropTypes__default["default"].func,
+
+  /**
+   * Callback function that fires when the combobox menu toggle is clicked
+   * @param {MouseEvent} event
+   */
+  onToggleClick: PropTypes__default["default"].func,
+
+  /**
+   * Used to provide a placeholder text node before a user enters any input.
+   * This is only present if the control has no items selected
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * For full control of the selection
+   */
+  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify your own filtering logic by passing in a `shouldFilterItem`
+   * function that takes in the current input and an item and passes back
+   * whether or not the item should be filtered.
+   */
+  shouldFilterItem: PropTypes__default["default"].func,
+
+  /**
+   * 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
+   * combobox via ARIA attributes.
+   */
+  titleText: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * Currently supports either the default type, or an inline variant
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * 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
+};
+ComboBox.defaultProps = {
+  disabled: false,
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  shouldFilterItem: defaultShouldFilterItem,
+  type: 'default',
+  ariaLabel: 'Choose an item',
+  light: false,
+  direction: 'bottom'
+};
+var ComboBox$1 = ComboBox;
+
+exports["default"] = ComboBox$1;

package/lib/components/ComboBox/tools/filter.js

@@ -0,0 +1,24 @@
+/**
+ * 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 defaultFilterItems = function defaultFilterItems(items, _ref) {
+  var itemToString = _ref.itemToString,
+      inputValue = _ref.inputValue;
+  return items.filter(function (item) {
+    if (!inputValue) {
+      return true;
+    }
+
+    return itemToString(item).toLowerCase().includes(inputValue.toLowerCase());
+  });
+};
+
+exports.defaultFilterItems = defaultFilterItems;