@wix/design-system 1.0.0

package/dist/cjs/MultiSelect/MultiSelect.driver.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));
+var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions/InputWithOptions.driver"));
+var _Tag = _interopRequireDefault(require("../Tag/Tag.driver"));
+var multiSelectDriverFactory = _ref => {
+  var {
+    element,
+    wrapper,
+    eventTrigger
+  } = _ref;
+  var {
+    driver,
+    inputDriver,
+    dropdownLayoutDriver
+  } = (0, _InputWithOptions.default)({
+    element,
+    wrapper,
+    eventTrigger
+  });
+  var inputWrapper = driver.inputWrapper();
+  var tags = [...inputWrapper.querySelectorAll('[data-hook="tag"]')];
+  var multiSelectDriver = Object.assign(driver, {
+    /** returns the max height of the component */
+    getMaxHeight: () => inputWrapper.style.maxHeight,
+    /** click on the input element wrapper */
+    clickOnInputWrapper: () => _testUtils.default.Simulate.click(inputWrapper),
+    /** returns true if the input is focused */
+    inputWrapperHasFocus: () => inputDriver.isFocusedStyle(),
+    /** returns true if the input is disabled */
+    inputWrapperIsDisabled: () => inputWrapper.querySelector('[data-hook="wsr-custom-input"]').hasAttribute('disabled'),
+    /** returns the number of tags selected in the input */
+    numberOfTags: () => tags.length,
+    /** returns true if a custom suffix exists */
+    customSuffixExists: () => !!inputWrapper.querySelector('[data-hook="custom-suffix"]'),
+    /** returns true if a status indicator exists */
+    statusIndicatorExists: () => !!inputWrapper.querySelector('[data-hook="input-status"]'),
+    /** returns the label of the tag given it's index */
+    getTagLabelAt: index => tags[index].textContent,
+    /** press the comma key in the input field */
+    pressCommaKey: () => inputDriver.keyDown(','),
+    /** returns the `tagDriver` for the specified tag id */
+    getTagDriverByTagId: tagId => (0, _Tag.default)({
+      element: tags.find(tag => tag.id === tagId)
+    })
+  });
+  return {
+    exists: () => !!element,
+    driver: multiSelectDriver,
+    inputDriver,
+    dropdownLayoutDriver
+  };
+};
+var _default = multiSelectDriverFactory;
+exports.default = _default;
+//# sourceMappingURL=MultiSelect.driver.js.map

package/dist/cjs/MultiSelect/MultiSelect.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["multiSelectDriverFactory","element","wrapper","eventTrigger","driver","inputDriver","dropdownLayoutDriver","inputWithOptionsDriverFactory","inputWrapper","tags","querySelectorAll","multiSelectDriver","Object","assign","getMaxHeight","style","maxHeight","clickOnInputWrapper","ReactTestUtils","Simulate","click","inputWrapperHasFocus","isFocusedStyle","inputWrapperIsDisabled","querySelector","hasAttribute","numberOfTags","length","customSuffixExists","statusIndicatorExists","getTagLabelAt","index","textContent","pressCommaKey","keyDown","getTagDriverByTagId","tagId","tagDriverFactory","find","tag","id","exists"],"sources":["../../../src/MultiSelect/MultiSelect.driver.js"],"sourcesContent":["import ReactTestUtils from 'react-dom/test-utils';\nimport inputWithOptionsDriverFactory from '../InputWithOptions/InputWithOptions.driver';\nimport tagDriverFactory from '../Tag/Tag.driver';\n\nconst multiSelectDriverFactory = ({ element, wrapper, eventTrigger }) => {\n  const { driver, inputDriver, dropdownLayoutDriver } =\n    inputWithOptionsDriverFactory({ element, wrapper, eventTrigger });\n\n  const inputWrapper = driver.inputWrapper();\n\n  const tags = [...inputWrapper.querySelectorAll('[data-hook=\"tag\"]')];\n\n  const multiSelectDriver = Object.assign(driver, {\n    /** returns the max height of the component */\n    getMaxHeight: () => inputWrapper.style.maxHeight,\n\n    /** click on the input element wrapper */\n    clickOnInputWrapper: () => ReactTestUtils.Simulate.click(inputWrapper),\n\n    /** returns true if the input is focused */\n    inputWrapperHasFocus: () => inputDriver.isFocusedStyle(),\n\n    /** returns true if the input is disabled */\n    inputWrapperIsDisabled: () =>\n      inputWrapper\n        .querySelector('[data-hook=\"wsr-custom-input\"]')\n        .hasAttribute('disabled'),\n\n    /** returns the number of tags selected in the input */\n    numberOfTags: () => tags.length,\n\n    /** returns true if a custom suffix exists */\n    customSuffixExists: () =>\n      !!inputWrapper.querySelector('[data-hook=\"custom-suffix\"]'),\n\n    /** returns true if a status indicator exists */\n    statusIndicatorExists: () =>\n      !!inputWrapper.querySelector('[data-hook=\"input-status\"]'),\n\n    /** returns the label of the tag given it's index */\n    getTagLabelAt: index => tags[index].textContent,\n\n    /** press the comma key in the input field */\n    pressCommaKey: () => inputDriver.keyDown(','),\n\n    /** returns the `tagDriver` for the specified tag id */\n    getTagDriverByTagId: tagId =>\n      tagDriverFactory({\n        element: tags.find(tag => tag.id === tagId),\n      }),\n  });\n\n  return {\n    exists: () => !!element,\n    driver: multiSelectDriver,\n    inputDriver,\n    dropdownLayoutDriver,\n  };\n};\n\nexport default multiSelectDriverFactory;\n"],"mappings":";;;;;AAAA;AACA;AACA;AAEA,IAAMA,wBAAwB,GAAG,QAAwC;EAAA,IAAvC;IAAEC,OAAO;IAAEC,OAAO;IAAEC;EAAa,CAAC;EAClE,IAAM;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAqB,CAAC,GACjD,IAAAC,yBAA6B,EAAC;IAAEN,OAAO;IAAEC,OAAO;IAAEC;EAAa,CAAC,CAAC;EAEnE,IAAMK,YAAY,GAAGJ,MAAM,CAACI,YAAY,EAAE;EAE1C,IAAMC,IAAI,GAAG,CAAC,GAAGD,YAAY,CAACE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;EAEpE,IAAMC,iBAAiB,GAAGC,MAAM,CAACC,MAAM,CAACT,MAAM,EAAE;IAC9C;IACAU,YAAY,EAAE,MAAMN,YAAY,CAACO,KAAK,CAACC,SAAS;IAEhD;IACAC,mBAAmB,EAAE,MAAMC,kBAAc,CAACC,QAAQ,CAACC,KAAK,CAACZ,YAAY,CAAC;IAEtE;IACAa,oBAAoB,EAAE,MAAMhB,WAAW,CAACiB,cAAc,EAAE;IAExD;IACAC,sBAAsB,EAAE,MACtBf,YAAY,CACTgB,aAAa,CAAC,gCAAgC,CAAC,CAC/CC,YAAY,CAAC,UAAU,CAAC;IAE7B;IACAC,YAAY,EAAE,MAAMjB,IAAI,CAACkB,MAAM;IAE/B;IACAC,kBAAkB,EAAE,MAClB,CAAC,CAACpB,YAAY,CAACgB,aAAa,CAAC,6BAA6B,CAAC;IAE7D;IACAK,qBAAqB,EAAE,MACrB,CAAC,CAACrB,YAAY,CAACgB,aAAa,CAAC,4BAA4B,CAAC;IAE5D;IACAM,aAAa,EAAEC,KAAK,IAAItB,IAAI,CAACsB,KAAK,CAAC,CAACC,WAAW;IAE/C;IACAC,aAAa,EAAE,MAAM5B,WAAW,CAAC6B,OAAO,CAAC,GAAG,CAAC;IAE7C;IACAC,mBAAmB,EAAEC,KAAK,IACxB,IAAAC,YAAgB,EAAC;MACfpC,OAAO,EAAEQ,IAAI,CAAC6B,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,EAAE,KAAKJ,KAAK;IAC5C,CAAC;EACL,CAAC,CAAC;EAEF,OAAO;IACLK,MAAM,EAAE,MAAM,CAAC,CAACxC,OAAO;IACvBG,MAAM,EAAEO,iBAAiB;IACzBN,WAAW;IACXC;EACF,CAAC;AACH,CAAC;AAAC,eAEaN,wBAAwB;AAAA"}

package/dist/cjs/MultiSelect/MultiSelect.js

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
+var _InputWithTags = _interopRequireDefault(require("./InputWithTags"));
+var _last = _interopRequireDefault(require("lodash/last"));
+var _difference = _interopRequireDefault(require("difference"));
+var _MultiSelectSt = require("./MultiSelect.st.css.js");
+var _excluded = ["className", "data-ref"],
+  _excluded2 = ["className", "ref"];
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/MultiSelect/MultiSelect.js";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+class MultiSelect extends _InputWithOptions.default {
+  constructor(props) {
+    super(props);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onPaste = this.onPaste.bind(this);
+    this._onBlur = this._onBlur.bind(this);
+    this.state = _objectSpread(_objectSpread({}, this.state), {}, {
+      pasteDetected: false
+    });
+  }
+  hideOptions() {
+    super.hideOptions();
+    if (this.props.clearOnBlur) {
+      this.clearInput();
+    }
+  }
+  onClickOutside() {
+    if (this.state.showOptions) {
+      this.hideOptions();
+    }
+  }
+  _onBlur(event) {
+    super._onBlur(event);
+    this.props.acceptOnBlur && this.submitValue(this.state.inputValue);
+  }
+  getUnselectedOptions() {
+    var optionIds = this.props.options.map(option => option.id);
+    var tagIds = this.props.tags.map(tag => tag.id);
+    var unselectedOptionsIds = (0, _difference.default)(optionIds, tagIds);
+    return this.props.options.filter(option => unselectedOptionsIds.includes(option.id));
+  }
+  dropdownAdditionalProps() {
+    var {
+      predicate,
+      emptyStateMessage
+    } = this.props;
+    var filterFunc = this.state.isEditing ? predicate : () => true;
+    var filtered = this.getUnselectedOptions().filter(filterFunc);
+    var options = filtered;
+    if (emptyStateMessage && filtered.length === 0) {
+      options = [{
+        id: 'empty-state-message',
+        value: emptyStateMessage,
+        disabled: true
+      }];
+    }
+    return {
+      options,
+      closeOnSelect: false,
+      selectedHighlight: false,
+      selectedId: -1
+    };
+  }
+  closeOnSelect() {
+    return false;
+  }
+  inputAdditionalProps() {
+    return {
+      readOnly: this.props.readOnly,
+      disableEditing: true,
+      inputElement: /*#__PURE__*/_react.default.createElement(_InputWithTags.default, {
+        onReorder: this.props.onReorder,
+        maxNumRows: this.props.maxNumRows,
+        mode: this.props.mode,
+        hideCustomSuffix: this.isDropdownLayoutVisible(),
+        customSuffix: this.props.customSuffix,
+        border: this.props.border,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 81,
+          columnNumber: 9
+        }
+      }),
+      onKeyDown: this.onKeyDown,
+      delimiters: this.props.delimiters,
+      onPaste: this.onPaste
+    };
+  }
+  onPaste() {
+    this.setState({
+      pasteDetected: true
+    });
+  }
+  _splitByDelimitersAndTrim(value) {
+    var delimitersRegexp = new RegExp(this.props.delimiters.join('|'), 'g');
+    return value.split(delimitersRegexp).map(str => str.trim()).filter(str => str);
+  }
+  _onChange(event) {
+    if (this.state.pasteDetected) {
+      var value = event.target.value;
+      this.setState({
+        pasteDetected: false
+      }, () => {
+        this.submitValue(value);
+      });
+    } else {
+      this.setState({
+        inputValue: event.target.value
+      });
+      this.props.onChange && this.props.onChange(event);
+    }
+    // If the input value is not empty, should show the options
+    if (event.target.value.trim()) {
+      this.showOptions();
+    }
+  }
+  _onSelect(option) {
+    this.onSelect(option);
+  }
+  _onManuallyInput(inputValue, event) {
+    var {
+      value
+    } = this.props;
+
+    // FIXME: InputWithOptions is not updating it's inputValue state when the `value` prop changes.
+    // So using `value` here, covers for that bug. (This is tested)
+    // BTW: Previously, `value` was used to trigger onSelect, and `inputValue` was used to trigger onManuallyInput. Which is crazy.
+    // So now both of them trigger a submit (onManuallyInput).
+    var _value = value && value.trim() || inputValue && inputValue.trim();
+    this.submitValue(_value);
+    _value && event.preventDefault();
+    if (this.closeOnSelect()) {
+      this.hideOptions();
+    }
+  }
+  getManualSubmitKeys() {
+    return ['Enter', 'Tab'].concat(this.props.delimiters);
+  }
+  onKeyDown(event) {
+    var {
+      tags,
+      value,
+      onRemoveTag
+    } = this.props;
+    if (tags.length > 0 && (event.key === 'Delete' || event.key === 'Backspace') && value && value.length === 0) {
+      onRemoveTag((0, _last.default)(tags).id);
+    }
+    if (event.key === 'Escape') {
+      this.clearInput();
+      super.hideOptions();
+    }
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event);
+    }
+  }
+  optionToTag(_ref) {
+    var {
+      id,
+      value,
+      tag,
+      theme
+    } = _ref;
+    return tag ? _objectSpread({
+      id
+    }, tag) : {
+      id,
+      label: value,
+      theme
+    };
+  }
+  onSelect(option) {
+    this.clearInput();
+    var {
+      onSelect
+    } = this.props;
+    if (onSelect) {
+      onSelect(this.props.options.find(o => o.id === option.id));
+    }
+  }
+  submitValue(inputValue) {
+    if (!inputValue) {
+      return;
+    }
+    var {
+      onManuallyInput
+    } = this.props;
+    var values = this._splitByDelimitersAndTrim(inputValue);
+    onManuallyInput && values.length && onManuallyInput(values);
+    this.clearInput();
+  }
+  clearInput() {
+    this.input.current && this.input.current.clear();
+    if (this.props.onChange) {
+      this.props.onChange({
+        target: {
+          value: ''
+        }
+      });
+    }
+  }
+}
+MultiSelect.autoSizeInput = _ref2 => {
+  var {
+      className,
+      'data-ref': dataRef
+    } = _ref2,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var inputClassName = (0, _classnames.default)(className, _MultiSelectSt.classes.autoSizeInput);
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
+    ref: dataRef,
+    className: inputClassName,
+    __self: MultiSelect,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 206,
+      columnNumber: 12
+    }
+  }));
+};
+MultiSelect.autoSizeInputWithRef = () => /*#__PURE__*/_react.default.forwardRef((props, ref) => (_ref3 => {
+  var {
+      className,
+      ref
+    } = _ref3,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+  var inputClassName = (0, _classnames.default)(className, _MultiSelectSt.classes.autoSizeInput);
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: inputClassName,
+    __self: MultiSelect,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 213,
+      columnNumber: 16
+    }
+  }));
+})(_objectSpread(_objectSpread({}, props), {}, {
+  ref
+})));
+MultiSelect.displayName = 'MultiSelect';
+MultiSelect.propTypes = {
+  /** Associate a control with the regions that it controls.*/
+  ariaControls: _propTypes.default.string,
+  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.*/
+  ariaDescribedby: _propTypes.default.string,
+  /** Define a string that labels the current element in case where a text label is not visible on the screen. */
+  ariaLabel: _propTypes.default.string,
+  /** Control the border style of input */
+  border: _propTypes.default.oneOf(['standard', 'round', 'bottomLine', 'none']),
+  /** Closes list once list item is selected */
+  closeOnSelect: _propTypes.default.bool,
+  /** Allows to pass all common popover props. */
+  popoverProps: _propTypes.default.shape({
+    appendTo: _propTypes.default.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
+    maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    flip: _propTypes.default.bool,
+    fixed: _propTypes.default.bool,
+    placement: _propTypes.default.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
+    dynamicWidth: _propTypes.default.bool
+  }),
+  /** Callback predicate for the filtering options function */
+  predicate: _propTypes.default.func,
+  /** Optional list of strings that are selected suggestions. */
+  tags: _propTypes.default.array,
+  /** Max number of visible lines */
+  maxNumRows: _propTypes.default.number,
+  /** Delimiters that will trigger a Submit action (call to onTagsAdded). By default it is [,] but also enter and tab keys work. */
+  delimiters: _propTypes.default.array,
+  /** Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. */
+  emptyStateMessage: _propTypes.default.node,
+  /** Specifies whether there are more items to be loaded. */
+  hasMore: _propTypes.default.bool,
+  /** Specifies whether lazy loading of the dropdown layout items is enabled. */
+  infiniteScroll: _propTypes.default.bool,
+  /** Defines a callback function which is called on a request to render more list items. */
+  loadMore: _propTypes.default.func,
+  /** Passing 'select' will render a readOnly input with menuArrow suffix **/
+  mode: _propTypes.default.string,
+  /** The status of the Multiselect */
+  status: _propTypes.default.oneOf(['loading', 'warning', 'error']),
+  /** Text to be shown in the status icon tooltip */
+  statusMessage: _propTypes.default.string,
+  /** When this callback function is set, tags can be reordered. The expected callback signature is `onReorder({addedIndex: number, removedIndex: number}) => void` **/
+  onReorder: _propTypes.default.func,
+  /** A callback which is called when the user enters something in the input and then confirms the input with some action like Enter key or Tab. */
+  onManuallyInput: _propTypes.default.func,
+  /** A callback which is called when options dropdown is shown */
+  onOptionsShow: _propTypes.default.func,
+  /** A callback which is called when options dropdown is hidden */
+  onOptionsHide: _propTypes.default.func,
+  /** A callback which is called when the user selects an option from the list. `onSelect(option: Option): void` - Option is the original option from the provided options prop. */
+  onSelect: _propTypes.default.func,
+  /** A node to display as input suffix when the dropdown is closed */
+  customSuffix: _propTypes.default.node,
+  /** When set to true this component is disabled */
+  disabled: _propTypes.default.bool,
+  /** When set to false, the input will not be cleared on blur */
+  clearOnBlur: _propTypes.default.bool,
+  /** When set to true, the input will be submitted as new tag on blur */
+  acceptOnBlur: _propTypes.default.bool,
+  /** A callback function to be called when a tag should be removed. The expected callback signature is `onRemoveTag(tagId: number | string) => void.` */
+  onRemoveTag: _propTypes.default.func,
+  /** Specifies whether input should be read only */
+  readOnly: _propTypes.default.bool
+};
+MultiSelect.defaultProps = _objectSpread(_objectSpread({}, _InputWithOptions.default.defaultProps), {}, {
+  predicate: () => true,
+  tags: [],
+  delimiters: [','],
+  clearOnBlur: true,
+  customInput: MultiSelect.autoSizeInputWithRef()
+});
+var _default = MultiSelect;
+exports.default = _default;
+//# sourceMappingURL=MultiSelect.js.map

package/dist/cjs/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MultiSelect","InputWithOptions","constructor","props","onKeyDown","bind","onPaste","_onBlur","state","pasteDetected","hideOptions","clearOnBlur","clearInput","onClickOutside","showOptions","event","acceptOnBlur","submitValue","inputValue","getUnselectedOptions","optionIds","options","map","option","id","tagIds","tags","tag","unselectedOptionsIds","difference","filter","includes","dropdownAdditionalProps","predicate","emptyStateMessage","filterFunc","isEditing","filtered","length","value","disabled","closeOnSelect","selectedHighlight","selectedId","inputAdditionalProps","readOnly","disableEditing","inputElement","onReorder","maxNumRows","mode","isDropdownLayoutVisible","customSuffix","border","delimiters","setState","_splitByDelimitersAndTrim","delimitersRegexp","RegExp","join","split","str","trim","_onChange","target","onChange","_onSelect","onSelect","_onManuallyInput","_value","preventDefault","getManualSubmitKeys","concat","onRemoveTag","key","last","optionToTag","theme","label","find","o","onManuallyInput","values","input","current","clear","autoSizeInput","className","dataRef","rest","inputClassName","classNames","classes","autoSizeInputWithRef","React","forwardRef","ref","displayName","propTypes","ariaControls","PropTypes","string","ariaDescribedby","ariaLabel","oneOf","bool","popoverProps","shape","appendTo","maxWidth","oneOfType","number","minWidth","flip","fixed","placement","dynamicWidth","func","array","node","hasMore","infiniteScroll","loadMore","status","statusMessage","onOptionsShow","onOptionsHide","defaultProps","customInput"],"sources":["../../../src/MultiSelect/MultiSelect.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport InputWithOptions from '../InputWithOptions';\nimport InputWithTags from './InputWithTags';\nimport last from 'lodash/last';\nimport difference from 'difference';\nimport { classes } from './MultiSelect.st.css';\n\nclass MultiSelect extends InputWithOptions {\n  constructor(props) {\n    super(props);\n\n    this.onKeyDown = this.onKeyDown.bind(this);\n    this.onPaste = this.onPaste.bind(this);\n    this._onBlur = this._onBlur.bind(this);\n    this.state = { ...this.state, pasteDetected: false };\n  }\n\n  hideOptions() {\n    super.hideOptions();\n    if (this.props.clearOnBlur) {\n      this.clearInput();\n    }\n  }\n\n  onClickOutside() {\n    if (this.state.showOptions) {\n      this.hideOptions();\n    }\n  }\n\n  _onBlur(event) {\n    super._onBlur(event);\n    this.props.acceptOnBlur && this.submitValue(this.state.inputValue);\n  }\n\n  getUnselectedOptions() {\n    const optionIds = this.props.options.map(option => option.id);\n    const tagIds = this.props.tags.map(tag => tag.id);\n    const unselectedOptionsIds = difference(optionIds, tagIds);\n    return this.props.options.filter(option =>\n      unselectedOptionsIds.includes(option.id),\n    );\n  }\n\n  dropdownAdditionalProps() {\n    const { predicate, emptyStateMessage } = this.props;\n\n    const filterFunc = this.state.isEditing ? predicate : () => true;\n    const filtered = this.getUnselectedOptions().filter(filterFunc);\n\n    let options = filtered;\n    if (emptyStateMessage && filtered.length === 0) {\n      options = [\n        {\n          id: 'empty-state-message',\n          value: emptyStateMessage,\n          disabled: true,\n        },\n      ];\n    }\n\n    return {\n      options,\n      closeOnSelect: false,\n      selectedHighlight: false,\n      selectedId: -1,\n    };\n  }\n\n  closeOnSelect() {\n    return false;\n  }\n\n  inputAdditionalProps() {\n    return {\n      readOnly: this.props.readOnly,\n      disableEditing: true,\n      inputElement: (\n        <InputWithTags\n          onReorder={this.props.onReorder}\n          maxNumRows={this.props.maxNumRows}\n          mode={this.props.mode}\n          hideCustomSuffix={this.isDropdownLayoutVisible()}\n          customSuffix={this.props.customSuffix}\n          border={this.props.border}\n        />\n      ),\n      onKeyDown: this.onKeyDown,\n      delimiters: this.props.delimiters,\n      onPaste: this.onPaste,\n    };\n  }\n\n  onPaste() {\n    this.setState({ pasteDetected: true });\n  }\n\n  _splitByDelimitersAndTrim(value) {\n    const delimitersRegexp = new RegExp(this.props.delimiters.join('|'), 'g');\n    return value\n      .split(delimitersRegexp)\n      .map(str => str.trim())\n      .filter(str => str);\n  }\n\n  _onChange(event) {\n    if (this.state.pasteDetected) {\n      const value = event.target.value;\n      this.setState({ pasteDetected: false }, () => {\n        this.submitValue(value);\n      });\n    } else {\n      this.setState({ inputValue: event.target.value });\n      this.props.onChange && this.props.onChange(event);\n    }\n    // If the input value is not empty, should show the options\n    if (event.target.value.trim()) {\n      this.showOptions();\n    }\n  }\n\n  _onSelect(option) {\n    this.onSelect(option);\n  }\n\n  _onManuallyInput(inputValue, event) {\n    const { value } = this.props;\n\n    // FIXME: InputWithOptions is not updating it's inputValue state when the `value` prop changes.\n    // So using `value` here, covers for that bug. (This is tested)\n    // BTW: Previously, `value` was used to trigger onSelect, and `inputValue` was used to trigger onManuallyInput. Which is crazy.\n    // So now both of them trigger a submit (onManuallyInput).\n    const _value = (value && value.trim()) || (inputValue && inputValue.trim());\n\n    this.submitValue(_value);\n    _value && event.preventDefault();\n\n    if (this.closeOnSelect()) {\n      this.hideOptions();\n    }\n  }\n\n  getManualSubmitKeys() {\n    return ['Enter', 'Tab'].concat(this.props.delimiters);\n  }\n\n  onKeyDown(event) {\n    const { tags, value, onRemoveTag } = this.props;\n\n    if (\n      tags.length > 0 &&\n      (event.key === 'Delete' || event.key === 'Backspace') &&\n      value &&\n      value.length === 0\n    ) {\n      onRemoveTag(last(tags).id);\n    }\n\n    if (event.key === 'Escape') {\n      this.clearInput();\n      super.hideOptions();\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(event);\n    }\n  }\n\n  optionToTag({ id, value, tag, theme }) {\n    return tag ? { id, ...tag } : { id, label: value, theme };\n  }\n\n  onSelect(option) {\n    this.clearInput();\n\n    const { onSelect } = this.props;\n\n    if (onSelect) {\n      onSelect(this.props.options.find(o => o.id === option.id));\n    }\n  }\n\n  submitValue(inputValue) {\n    if (!inputValue) {\n      return;\n    }\n\n    const { onManuallyInput } = this.props;\n    const values = this._splitByDelimitersAndTrim(inputValue);\n    onManuallyInput && values.length && onManuallyInput(values);\n\n    this.clearInput();\n  }\n\n  clearInput() {\n    this.input.current && this.input.current.clear();\n    if (this.props.onChange) {\n      this.props.onChange({ target: { value: '' } });\n    }\n  }\n\n  static autoSizeInput = ({ className, 'data-ref': dataRef, ...rest }) => {\n    const inputClassName = classNames(className, classes.autoSizeInput);\n    return <input {...rest} ref={dataRef} className={inputClassName} />;\n  };\n\n  static autoSizeInputWithRef = () =>\n    React.forwardRef((props, ref) =>\n      (({ className, ref, ...rest }) => {\n        const inputClassName = classNames(className, classes.autoSizeInput);\n        return <input {...rest} ref={ref} className={inputClassName} />;\n      })({ ...props, ref }),\n    );\n}\n\nMultiSelect.displayName = 'MultiSelect';\n\nMultiSelect.propTypes = {\n  /** Associate a control with the regions that it controls.*/\n  ariaControls: PropTypes.string,\n\n  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.*/\n  ariaDescribedby: PropTypes.string,\n\n  /** Define a string that labels the current element in case where a text label is not visible on the screen. */\n  ariaLabel: PropTypes.string,\n\n  /** Control the border style of input */\n  border: PropTypes.oneOf(['standard', 'round', 'bottomLine', 'none']),\n\n  /** Closes list once list item is selected */\n  closeOnSelect: PropTypes.bool,\n\n  /** Allows to pass all common popover props. */\n  popoverProps: PropTypes.shape({\n    appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    flip: PropTypes.bool,\n    fixed: PropTypes.bool,\n    placement: PropTypes.oneOf([\n      'auto-start',\n      'auto',\n      'auto-end',\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n    dynamicWidth: PropTypes.bool,\n  }),\n\n  /** Callback predicate for the filtering options function */\n  predicate: PropTypes.func,\n\n  /** Optional list of strings that are selected suggestions. */\n  tags: PropTypes.array,\n\n  /** Max number of visible lines */\n  maxNumRows: PropTypes.number,\n\n  /** Delimiters that will trigger a Submit action (call to onTagsAdded). By default it is [,] but also enter and tab keys work. */\n  delimiters: PropTypes.array,\n\n  /** Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. */\n  emptyStateMessage: PropTypes.node,\n\n  /** Specifies whether there are more items to be loaded. */\n  hasMore: PropTypes.bool,\n\n  /** Specifies whether lazy loading of the dropdown layout items is enabled. */\n  infiniteScroll: PropTypes.bool,\n\n  /** Defines a callback function which is called on a request to render more list items. */\n  loadMore: PropTypes.func,\n\n  /** Passing 'select' will render a readOnly input with menuArrow suffix **/\n  mode: PropTypes.string,\n\n  /** The status of the Multiselect */\n  status: PropTypes.oneOf(['loading', 'warning', 'error']),\n\n  /** Text to be shown in the status icon tooltip */\n  statusMessage: PropTypes.string,\n\n  /** When this callback function is set, tags can be reordered. The expected callback signature is `onReorder({addedIndex: number, removedIndex: number}) => void` **/\n  onReorder: PropTypes.func,\n\n  /** A callback which is called when the user enters something in the input and then confirms the input with some action like Enter key or Tab. */\n  onManuallyInput: PropTypes.func,\n\n  /** A callback which is called when options dropdown is shown */\n  onOptionsShow: PropTypes.func,\n\n  /** A callback which is called when options dropdown is hidden */\n  onOptionsHide: PropTypes.func,\n\n  /** A callback which is called when the user selects an option from the list. `onSelect(option: Option): void` - Option is the original option from the provided options prop. */\n  onSelect: PropTypes.func,\n\n  /** A node to display as input suffix when the dropdown is closed */\n  customSuffix: PropTypes.node,\n\n  /** When set to true this component is disabled */\n  disabled: PropTypes.bool,\n\n  /** When set to false, the input will not be cleared on blur */\n  clearOnBlur: PropTypes.bool,\n\n  /** When set to true, the input will be submitted as new tag on blur */\n  acceptOnBlur: PropTypes.bool,\n\n  /** A callback function to be called when a tag should be removed. The expected callback signature is `onRemoveTag(tagId: number | string) => void.` */\n  onRemoveTag: PropTypes.func,\n\n  /** Specifies whether input should be read only */\n  readOnly: PropTypes.bool,\n};\n\nMultiSelect.defaultProps = {\n  ...InputWithOptions.defaultProps,\n  predicate: () => true,\n  tags: [],\n  delimiters: [','],\n  clearOnBlur: true,\n  customInput: MultiSelect.autoSizeInputWithRef(),\n};\n\nexport default MultiSelect;\n"],"mappings":"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"}

package/dist/cjs/MultiSelect/MultiSelect.meta.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.testkitTests = exports.ssrTests = exports.requiredProps = exports.a11yTests = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// This object should contain a mock value for each required prop of this component
+var requiredProps = {};
+
+// This array should contain an object only for tests you wish to run on all compliance tests
+exports.requiredProps = requiredProps;
+var sharedTests = [{
+  title: 'render',
+  props: _objectSpread({}, requiredProps)
+}];
+var testkitTests = [...sharedTests];
+exports.testkitTests = testkitTests;
+var ssrTests = [...sharedTests];
+exports.ssrTests = ssrTests;
+var a11yTests = [...sharedTests];
+exports.a11yTests = a11yTests;
+//# sourceMappingURL=MultiSelect.meta.js.map

package/dist/cjs/MultiSelect/MultiSelect.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requiredProps","sharedTests","title","props","testkitTests","ssrTests","a11yTests"],"sources":["../../../src/MultiSelect/MultiSelect.meta.tsx"],"sourcesContent":["import { MultiSelectProps } from '.';\n\n// This object should contain a mock value for each required prop of this component\nexport const requiredProps: MultiSelectProps = {};\n\n// This array should contain an object only for tests you wish to run on all compliance tests\nconst sharedTests = [\n  {\n    title: 'render',\n    props: {\n      ...requiredProps,\n    } as MultiSelectProps,\n  },\n];\n\nexport const testkitTests = [...sharedTests];\n\nexport const ssrTests = [...sharedTests];\n\nexport const a11yTests = [...sharedTests];\n"],"mappings":";;;;;;;;AAEA;AACO,IAAMA,aAA+B,GAAG,CAAC,CAAC;;AAEjD;AAAA;AACA,IAAMC,WAAW,GAAG,CAClB;EACEC,KAAK,EAAE,QAAQ;EACfC,KAAK,oBACAH,aAAa;AAEpB,CAAC,CACF;AAEM,IAAMI,YAAY,GAAG,CAAC,GAAGH,WAAW,CAAC;AAAC;AAEtC,IAAMI,QAAQ,GAAG,CAAC,GAAGJ,WAAW,CAAC;AAAC;AAElC,IAAMK,SAAS,GAAG,CAAC,GAAGL,WAAW,CAAC;AAAC"}

package/dist/cjs/MultiSelect/MultiSelect.st.css

@@ -0,0 +1,4 @@
+.autoSizeInput {
+  width: 1px;
+  min-width: 1px;
+}

package/dist/cjs/MultiSelect/MultiSelect.st.css.js

@@ -0,0 +1,24 @@
+
+
+const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
+
+
+
+var _namespace_ = "wds_1_0_0_MultiSelect";
+var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
+
+module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
+module.exports.style = /*#__PURE__*/ _style_;
+module.exports.st = /*#__PURE__*/ _style_;
+
+module.exports.namespace = _namespace_;
+module.exports.classes = {"root":"wds_1_0_0_MultiSelect__root","autoSizeInput":"wds_1_0_0_MultiSelect__autoSizeInput"};
+module.exports.keyframes = {}; 
+module.exports.layers = {};
+module.exports.containers = {};
+module.exports.stVars = {}; 
+module.exports.vars = {}; 
+
+
+
+

package/dist/cjs/MultiSelect/MultiSelect.uni.driver.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=MultiSelect.uni.driver.d.js.map

package/dist/cjs/MultiSelect/MultiSelect.uni.driver.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/MultiSelect/MultiSelect.uni.driver.d.ts"],"sourcesContent":["import { InputWithOptionsUniDriver } from '../InputWithOptions/InputWithOptions.uni.driver';\nimport { TextSize, TextWeight } from '../Text';\nimport { BaseUniDriver } from 'wix-ui-test-utils/base-driver';\nimport { TagUniDriver } from '../Tag/Tag.uni.driver';\nimport { OmitPolyfill } from '../common';\n\nexport interface MultiSelectUniDriver\n  extends OmitPolyfill<InputWithOptionsUniDriver, 'driver'> {\n  exists: () => Promise<boolean>;\n  driver: InputWithOptionsUniDriver['driver'] & {\n    getMaxHeight: () => Promise<any>;\n    clickOnInputWrapper: () => Promise<void>;\n    inputWrapperHasFocus: () => Promise<any>;\n    inputWrapperIsDisabled: () => Promise<any>;\n    numberOfTags: () => Promise<number>;\n    getTagLabelAt: (index: number) => Promise<string>;\n    pressCommaKey: () => Promise<void>;\n    getTagDriverByTagId: (tagId: string) => Promise<\n      TagUniDriver & {\n        isCloseButtonSmall: () => Promise<boolean>;\n        isCloseButtonLarge: () => Promise<boolean>;\n        getTextSize: () => TextSize;\n        getTextWeight: () => TextWeight;\n        isClickable: () => Promise<boolean>;\n      }\n    >;\n    customSuffixExists: () => Promise<boolean>;\n    statusIndicatorExists: () => Promise<boolean>;\n  } & Pick<InputWithOptionsUniDriver, 'driver'> &\n    BaseUniDriver;\n}\n"],"mappings":""}

package/dist/cjs/MultiSelect/MultiSelect.uni.driver.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.multiselectUniDriverFactory = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _baseDriver = require("wix-ui-test-utils/base-driver");
+var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));
+var _InputWithOptionsUni = require("../InputWithOptions/InputWithOptions.uni.driver");
+var _TagPrivateUni = require("../Tag/Tag.private.uni.driver");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var multiselectUniDriverFactory = (base, body) => {
+  var {
+    driver,
+    inputDriver,
+    dropdownLayoutDriver
+  } = (0, _InputWithOptionsUni.inputWithOptionsUniDriverFactory)(base, body);
+  var getInputWrapper = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)(function* () {
+      return (yield driver.inputWrapper()).childNodes[0];
+    });
+    return function getInputWrapper() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var tags = base.$$('[data-hook="tag"]');
+  var multiSelectDriver = _objectSpread(_objectSpread(_objectSpread({}, (0, _baseDriver.baseUniDriverFactory)(base)), driver), {}, {
+    /** returns the max height of the component */
+    getMaxHeight: function () {
+      var _getMaxHeight = (0, _asyncToGenerator2.default)(function* () {
+        return (yield getInputWrapper()).style.maxHeight;
+      });
+      function getMaxHeight() {
+        return _getMaxHeight.apply(this, arguments);
+      }
+      return getMaxHeight;
+    }(),
+    /** click on the input element wrapper */
+    clickOnInputWrapper: function () {
+      var _clickOnInputWrapper = (0, _asyncToGenerator2.default)(function* () {
+        return _testUtils.default.Simulate.click(yield getInputWrapper());
+      });
+      function clickOnInputWrapper() {
+        return _clickOnInputWrapper.apply(this, arguments);
+      }
+      return clickOnInputWrapper;
+    }(),
+    /** returns true if the input is focused */
+    inputWrapperHasFocus: () => inputDriver.isFocusedStyle(),
+    /** returns true if the input is disabled */
+    inputWrapperIsDisabled: function () {
+      var _inputWrapperIsDisabled = (0, _asyncToGenerator2.default)(function* () {
+        return !!(yield base.$('[data-hook="wsr-custom-input"]')).attr('disabled');
+      });
+      function inputWrapperIsDisabled() {
+        return _inputWrapperIsDisabled.apply(this, arguments);
+      }
+      return inputWrapperIsDisabled;
+    }(),
+    /** returns the number of tags selected in the input */
+    numberOfTags: () => tags.count(),
+    /** returns the label of the tag given it's index */
+    getTagLabelAt: index => tags.get(index).text(),
+    /** press the comma key in the input field */
+    pressCommaKey: () => inputDriver.pressKey(','),
+    /** returns the `tagDriver` for the specified tag id */
+    getTagDriverByTagId: function () {
+      var _getTagDriverByTagId = (0, _asyncToGenerator2.default)(function* (tagId) {
+        return (0, _TagPrivateUni.tagPrivateUniDriverFactory)(tags.filter( /*#__PURE__*/function () {
+          var _ref2 = (0, _asyncToGenerator2.default)(function* (tag) {
+            return (yield tag._prop('id')) === tagId;
+          });
+          return function (_x2) {
+            return _ref2.apply(this, arguments);
+          };
+        }()).get(0));
+      });
+      function getTagDriverByTagId(_x) {
+        return _getTagDriverByTagId.apply(this, arguments);
+      }
+      return getTagDriverByTagId;
+    }(),
+    /** returns true if a custom suffix exists */
+    customSuffixExists: function () {
+      var _customSuffixExists = (0, _asyncToGenerator2.default)(function* () {
+        return !!(yield getInputWrapper()).querySelector('[data-hook="custom-suffix"]');
+      });
+      function customSuffixExists() {
+        return _customSuffixExists.apply(this, arguments);
+      }
+      return customSuffixExists;
+    }(),
+    /** returns true if a status indicator exists */
+    statusIndicatorExists: function () {
+      var _statusIndicatorExists = (0, _asyncToGenerator2.default)(function* () {
+        return !!(yield getInputWrapper()).querySelector('[data-hook="input-status"]');
+      });
+      function statusIndicatorExists() {
+        return _statusIndicatorExists.apply(this, arguments);
+      }
+      return statusIndicatorExists;
+    }()
+  });
+  return {
+    exists: function () {
+      var _exists = (0, _asyncToGenerator2.default)(function* () {
+        return base.exists();
+      });
+      function exists() {
+        return _exists.apply(this, arguments);
+      }
+      return exists;
+    }(),
+    driver: multiSelectDriver,
+    inputDriver,
+    dropdownLayoutDriver
+  };
+};
+exports.multiselectUniDriverFactory = multiselectUniDriverFactory;
+//# sourceMappingURL=MultiSelect.uni.driver.js.map