@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.06b2ede40f

package/AutoComplete/MultiAutoComplete.js

@@ -1,569 +1,87 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-var _excluded = ["options", "allowFreeInput", "useSimpleValues", "unique", "value", "onChange", "valueProp", "textProp", "onInput", "validation", "useMultipleSelectionList", "description"],
-    _excluded2 = ["getInputProps", "openMenu"];
-import * as React from "react";
-import Downshift from "downshift";
-import MaterialSpinner from "react-spinner-material";
-import { Input } from "../Input";
-import { Chips, Chip } from "../Chips";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import { List, ListItem, ListItemMeta } from "../List";
-import { IconButton } from "../Button";
-import classNames from "classnames";
-import { Elevation } from "../Elevation";
-import { Typography } from "../Typography";
-import { autoCompleteStyle, suggestionList } from "./styles";
-import { FormElementMessage } from "../FormElementMessage";
-import { ReactComponent as BaselineCloseIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
-import { ReactComponent as PrevIcon } from "@svgr/webpack!./icons/navigate_before-24px.svg";
-import { ReactComponent as NextIcon } from "@svgr/webpack!./icons/navigate_next-24px.svg";
-import { ReactComponent as PrevAllIcon } from "@svgr/webpack!./icons/skip_previous-24px.svg";
-import { ReactComponent as NextAllIcon } from "@svgr/webpack!./icons/skip_next-24px.svg";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!./icons/baseline-close-24px.svg";
-import { ReactComponent as ReorderIcon } from "@svgr/webpack!./icons/reorder_black_24dp.svg";
-import { css } from "emotion";
-import { ListItemGraphic } from "../List";
-var style = {
-  pagination: {
-    bar: /*#__PURE__*/css({
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      borderBottom: "2px solid #fa5723",
-      padding: "6px 0"
-    }, "label:bar;"),
-    pages: /*#__PURE__*/css({
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center"
-    }, "label:pages;"),
-    searchInput: /*#__PURE__*/css({
-      height: "42px !important"
-    }, "label:searchInput;"),
-    list: /*#__PURE__*/css({
-      padding: "0 0 5px 0 !important",
-      ".mdc-list-item": {
-        borderBottom: "1px solid var(--mdc-theme-on-background)"
-      }
-    }, "label:list;"),
-    secondaryText: /*#__PURE__*/css({
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }, "label:secondaryText;")
-  }
-};
-var listStyles = /*#__PURE__*/css({
-  "&.multi-autocomplete__options-list": {
-    listStyle: "none",
-    paddingLeft: 0,
-    "& li": {
-      margin: 0
+import React, { useCallback, useMemo } from "react";
+import { MultiAutoComplete as AdminMultiAutoComplete } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const MultiAutoComplete = ({
+  onChange,
+  value = [],
+  valueProp = "id",
+  textProp = "name",
+  renderItem,
+  noResultFound,
+  useSimpleValues,
+  loading,
+  allowFreeInput,
+  unique = true,
+  renderMultipleSelection,
+  onInput,
+  ...props
+}) => {
+  const getOption = useCallback(option => {
+    if (useSimpleValues) {
+      return {
+        label: option,
+        value: option,
+        item: option
+      };
     }
-  }
-}, "label:listStyles;");
-
-function Spinner() {
-  return /*#__PURE__*/React.createElement(MaterialSpinner, {
-    size: 24,
-    spinnerColor: "#fa5723",
-    spinnerWidth: 2,
-    visible: true
-  });
-}
-
-var DEFAULT_PER_PAGE = 10;
-
-function paginateMultipleSelection(multipleSelection, limit, page, search) {
-  // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
-  var data = Array.isArray(multipleSelection) ? multipleSelection.map(function (item, index) {
-    return _objectSpread(_objectSpread({}, item), {}, {
-      index: index
-    });
-  }) : [];
-
-  if (typeof search === "string" && search) {
-    data = data.filter(function (item) {
-      return typeof item.name === "string" && item.name.toLowerCase().includes(search.toLowerCase());
-    });
-  }
-
-  var lastPage = Math.ceil(data.length / limit);
-  var totalCount = data.length;
-  page = page || lastPage;
-  data = data.slice((page - 1) * limit, page * limit);
-  var from = 0;
-  var to = 0;
-
-  if (data.length) {
-    from = (page - 1) * limit + 1;
-    to = from + (data.length - 1);
-  }
-
-  var meta = {
-    hasData: data.length > 0,
-    totalCount: totalCount,
-    from: from,
-    to: to,
-    page: page,
-    lastPage: lastPage,
-    limit: limit,
-    hasPrevious: page > 1,
-    hasNext: page < lastPage
-  };
-  return {
-    data: data,
-    meta: meta
-  };
-}
-
-export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
-  _inherits(MultiAutoComplete, _React$Component);
-
-  var _super = _createSuper(MultiAutoComplete);
-
-  function MultiAutoComplete() {
-    var _this;
-
-    _classCallCheck(this, MultiAutoComplete);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      inputValue: "",
-      multipleSelectionPage: 0,
-      multipleSelectionSearch: "",
-      reorderFormVisible: "",
-      reorderFormValue: ""
+    return {
+      label: option[textProp],
+      value: option[valueProp],
+      disabled: option.disabled,
+      item: option
+    };
+  }, [textProp, valueProp, useSimpleValues]);
+  const options = useMemo(() => {
+    return props.options.map(option => {
+      return getOption(option);
     });
-
-    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "assignedValueAfterClearing", {
-      set: false,
-      selection: null
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionPage", function (multipleSelectionPage) {
-      _this.setState({
-        multipleSelectionPage: multipleSelectionPage
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setMultipleSelectionSearch", function (multipleSelectionSearch) {
-      _this.setState({
-        multipleSelectionSearch: multipleSelectionSearch
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(MultiAutoComplete, [{
-    key: "getOptions",
-    value: function getOptions() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          unique = _this$props.unique,
-          value = _this$props.value,
-          allowFreeInput = _this$props.allowFreeInput,
-          useSimpleValues = _this$props.useSimpleValues,
-          options = _this$props.options;
-      var filtered = options.filter(function (item) {
-        // We need to filter received options.
-        // 1) If "unique" prop was passed, we don't want to show already picked options again.
-        if (unique) {
-          var values = value;
-
-          if (Array.isArray(values)) {
-            if (values.find(function (value) {
-              return getOptionValue(value, _this2.props) === getOptionValue(item, _this2.props);
-            })) {
-              return false;
-            }
-          }
-        } // 2) At the end, we want to show only options that are matched by typed text.
-
-
-        if (!_this2.state.inputValue) {
-          return true;
-        }
-
-        if (item.aliases) {
-          return findInAliases(item, _this2.state.inputValue);
-        }
-
-        return getOptionText(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
-      }); // If free input is allowed, prepend typed value to the list.
-
-      if (allowFreeInput && this.state.inputValue) {
-        if (useSimpleValues) {
-          var existingValue = filtered.includes(this.state.inputValue);
-
-          if (!existingValue) {
-            filtered.unshift(this.state.inputValue);
-          }
-        } else {
-          var _existingValue = filtered.find(function (item) {
-            return _this2.state.inputValue === getOptionText(item, _this2.props);
-          });
-
-          if (!_existingValue) {
-            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
-          }
-        }
-      }
-
-      return filtered;
+  }, [props.options]);
+  const values = useMemo(() => {
+    if (!value) {
+      return [];
     }
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     * @param options
-     * @param isOpen
-     * @param highlightedIndex
-     * @param selectedItem
-     * @param getMenuProps
-     * @param getItemProps
-     * @returns {*}
-     */
-
-  }, {
-    key: "renderOptions",
-    value: function renderOptions(_ref) {
-      var _this3 = this;
-
-      var options = _ref.options,
-          isOpen = _ref.isOpen,
-          highlightedIndex = _ref.highlightedIndex,
-          getMenuProps = _ref.getMenuProps,
-          getItemProps = _ref.getItemProps;
-
-      if (!isOpen) {
-        return null;
-      }
-
-      if (!options.length) {
-        return /*#__PURE__*/React.createElement(Elevation, {
-          z: 1
-        }, /*#__PURE__*/React.createElement("ul", Object.assign({
-          className: classNames("multi-autocomplete__options-list", listStyles)
-        }, getMenuProps()), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
-          use: "body2"
-        }, "No results."))));
-      }
-
-      var renderItem = this.props.renderItem;
-      return /*#__PURE__*/React.createElement(Elevation, {
-        z: 1
-      }, /*#__PURE__*/React.createElement("ul", Object.assign({
-        className: classNames("multi-autocomplete__options-list", listStyles)
-      }, getMenuProps()), options.map(function (item, index) {
-        var _itemClassNames;
-
-        var itemValue = getOptionValue(item, _this3.props); // Base classes.
-
-        var itemClassNames = (_itemClassNames = {}, _defineProperty(_itemClassNames, suggestionList, true), _defineProperty(_itemClassNames, "highlighted", highlightedIndex === index), _defineProperty(_itemClassNames, "selected", false), _itemClassNames); // Render the item.
-
-        return /*#__PURE__*/React.createElement("li", Object.assign({
-          key: itemValue + index
-        }, getItemProps({
-          index: index,
-          item: item,
-          className: classNames(itemClassNames)
-        })), renderItem.call(_this3, item, index));
-      })));
-    }
-    /**
-     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
-     * rendering selected items (we are using already existing "Chips" component).
-     * @returns {*}
-     */
-
-  }, {
-    key: "renderMultipleSelection",
-    value: function renderMultipleSelection() {
-      var _this4 = this;
-
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange,
-          disabled = _this$props2.disabled,
-          useMultipleSelectionList = _this$props2.useMultipleSelectionList,
-          description = _this$props2.description,
-          renderListItemLabel = _this$props2.renderListItemLabel;
-
-      if (useMultipleSelectionList) {
-        var _paginateMultipleSele = paginateMultipleSelection(value, DEFAULT_PER_PAGE, this.state.multipleSelectionPage, this.state.multipleSelectionSearch),
-            data = _paginateMultipleSele.data,
-            meta = _paginateMultipleSele.meta;
-
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-          className: style.pagination.bar
-        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
-          className: style.pagination.searchInput,
-          placeholder: "Search selected...",
-          value: this.state.multipleSelectionSearch,
-          onChange: function onChange(value) {
-            _this4.setMultipleSelectionSearch(value);
-
-            _this4.setMultipleSelectionPage(value ? 1 : 0);
-          }
-        })), /*#__PURE__*/React.createElement("div", {
-          className: style.pagination.pages
-        }, /*#__PURE__*/React.createElement("div", {
-          className: meta.hasData ? "" : style.pagination.secondaryText
-        }, meta.from, " - ", meta.to, " of ", meta.totalCount), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(PrevAllIcon, null),
-          disabled: !meta.hasData || meta.page === 1,
-          onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(1);
-          }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(PrevIcon, null),
-          disabled: !meta.hasData || !meta.hasPrevious,
-          onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.page - 1);
-          }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(NextIcon, null),
-          disabled: !meta.hasData || !meta.hasNext,
-          onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.page + 1);
-          }
-        }), /*#__PURE__*/React.createElement(IconButton, {
-          icon: /*#__PURE__*/React.createElement(NextAllIcon, null),
-          disabled: !meta.hasData || meta.page === meta.lastPage,
-          onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.lastPage);
-          }
-        })))), /*#__PURE__*/React.createElement(List, {
-          className: style.pagination.list
-        }, meta.hasData ? data.map(function (item, index) {
-          var key = "".concat(getOptionValue(item, _this4.props), "-").concat(index);
-
-          if (_this4.state.reorderFormVisible === key) {
-            return /*#__PURE__*/React.createElement(ListItem, {
-              key: key
-            }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
-              disabled: true,
-              icon: /*#__PURE__*/React.createElement(ReorderIcon, null)
-            })), /*#__PURE__*/React.createElement(Input, {
-              value: _this4.state.reorderFormValue,
-              onKeyDown: function onKeyDown(e) {
-                var key = e.key;
-
-                if (key !== "Escape" && key !== "Enter") {
-                  return;
-                }
-
-                if (key === "Enter") {
-                  // Reorder the item.
-                  var newValue = _toConsumableArray(value);
-
-                  newValue.splice(e.target.value - 1, 0, newValue.splice(item.index, 1)[0]);
-                  onChange(newValue);
-                }
-
-                _this4.setState({
-                  reorderFormVisible: "",
-                  reorderFormValue: ""
-                });
-              },
-              onChange: function onChange(value) {
-                return _this4.setState({
-                  reorderFormValue: value
-                });
-              },
-              type: "number",
-              autoFocus: true,
-              className: style.pagination.searchInput,
-              placeholder: "Type a new order number and press Enter, or press Esc to cancel."
-            }), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
-              icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-              disabled: true
-            })));
-          }
-
-          return /*#__PURE__*/React.createElement(ListItem, {
-            key: key
-          }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(ReorderIcon, null),
-            onClick: function onClick() {
-              _this4.setState({
-                reorderFormVisible: key
-              });
-            }
-          })), /*#__PURE__*/React.createElement("div", {
-            style: {
-              color: "var(--mdc-theme-text-secondary-on-background)",
-              marginRight: 8,
-              minWidth: 32
-            }
-          }, item.index + 1, "."), " ", renderListItemLabel.call(_this4, item), /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-            onClick: function onClick() {
-              if (onChange) {
-                onChange([].concat(_toConsumableArray(value.slice(0, item.index)), _toConsumableArray(value.slice(item.index + 1))));
-              }
-            }
-          })));
-        }) : /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement("span", {
-          className: style.pagination.secondaryText
-        }, "Nothing to show."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormElementMessage, null, description)));
+    return value.map(val => {
+      if (typeof val === "string") {
+        return val;
       }
-
-      var hasItems = Array.isArray(value) && value.length;
-
-      if (!hasItems) {
-        return null;
+      return val[valueProp];
+    }).filter(Boolean);
+  }, [value, valueProp]);
+  const onValuesChange = useCallback(values => {
+    const selectedOptions = [];
+    for (const value of values) {
+      const option = options.find(option => option.value === value);
+      if (option) {
+        selectedOptions.push(option);
+      } else {
+        selectedOptions.push(getOption(value));
       }
-
-      return /*#__PURE__*/React.createElement(Chips, {
-        disabled: disabled
-      }, value.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(Chip, {
-          label: getOptionText(item, _this4.props),
-          key: "".concat(getOptionValue(item, _this4.props), "-").concat(index),
-          trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
-          onRemove: function onRemove() {
-            if (onChange) {
-              onChange([].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1))));
-            }
-          }
-        });
-      }));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
-
-      var props = this.props,
-          _this$props3 = this.props,
-          rawOptions = _this$props3.options,
-          allowFreeInput = _this$props3.allowFreeInput,
-          useSimpleValues = _this$props3.useSimpleValues,
-          unique = _this$props3.unique,
-          value = _this$props3.value,
-          _onChange = _this$props3.onChange,
-          valueProp = _this$props3.valueProp,
-          textProp = _this$props3.textProp,
-          onInput = _this$props3.onInput,
-          _this$props3$validati = _this$props3.validation,
-          validation = _this$props3$validati === void 0 ? {
-        isValid: null
-      } : _this$props3$validati,
-          useMultipleSelectionList = _this$props3.useMultipleSelectionList,
-          description = _this$props3.description,
-          otherInputProps = _objectWithoutProperties(_this$props3, _excluded);
-
-      var options = this.getOptions();
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(autoCompleteStyle, props.className)
-      }, /*#__PURE__*/React.createElement(Downshift, {
-        defaultSelectedItem: null // @ts-ignore
-        ,
-        className: autoCompleteStyle,
-        itemToString: function itemToString(item) {
-          return item && getOptionText(item, props);
-        },
-        ref: this.downshift,
-        onChange: function onChange(selection) {
-          if (!_this5.assignedValueAfterClearing.set) {
-            _this5.assignedValueAfterClearing = {
-              set: true,
-              selection: selection
-            };
-
-            _this5.downshift.current.clearSelection();
-
-            _this5.setMultipleSelectionPage(0);
-
-            return;
-          }
-
-          if (_this5.assignedValueAfterClearing.set) {
-            _this5.setState({
-              inputValue: ""
-            });
-
-            _this5.assignedValueAfterClearing.set = false;
-
-            if (Array.isArray(value)) {
-              _onChange && _onChange([].concat(_toConsumableArray(value), [_this5.assignedValueAfterClearing.selection]));
-            } else {
-              _onChange && _onChange([_this5.assignedValueAfterClearing.selection]);
-            }
-          }
-        }
-      }, function (_ref2) {
-        var getInputProps = _ref2.getInputProps,
-            openMenu = _ref2.openMenu,
-            rest = _objectWithoutProperties(_ref2, _excluded2);
-
-        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, getInputProps(_objectSpread(_objectSpread({}, otherInputProps), {}, {
-          // @ts-ignore
-          validation: validation,
-          // Only pass description if not using "useMultipleSelectionList".
-          description: useMultipleSelectionList ? null : description,
-          rawOnChange: true,
-          trailingIcon: _this5.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
-          onChange: function onChange(e) {
-            return e;
-          },
-          onBlur: function onBlur(e) {
-            return e;
-          },
-          onKeyUp: function onKeyUp(e) {
-            var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
-
-            if (inputValue !== _this5.state.inputValue) {
-              _this5.setState({
-                inputValue: inputValue
-              }, function () {
-                onInput && onInput(inputValue);
-              });
-            }
-          },
-          onFocus: function onFocus(e) {
-            openMenu();
-            otherInputProps.onFocus && otherInputProps.onFocus(e);
-          }
-        }))), _this5.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
-          unique: unique,
-          options: options
-        })), _this5.renderMultipleSelection());
-      }));
+    const selectedItems = selectedOptions.map(option => option.item);
+    onChange?.(selectedItems);
+  }, [onChange, options]);
+  const selectedOptionRenderer = useMemo(() => {
+    if (renderMultipleSelection === null) {
+      return () => null;
     }
-  }]);
-
-  return MultiAutoComplete;
-}(React.Component);
+    return renderMultipleSelection;
+  }, [renderMultipleSelection]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminMultiAutoComplete, Object.assign({}, props, {
+    size: "lg",
+    values: values,
+    options: options,
+    optionRenderer: renderItem,
+    selectedOptionRenderer: selectedOptionRenderer,
+    emptyMessage: noResultFound,
+    onValuesChange: onValuesChange,
+    onValueSearch: onInput,
+    loading: loading,
+    allowFreeInput: allowFreeInput,
+    uniqueValues: unique
+  })));
+};
 
-_defineProperty(MultiAutoComplete, "defaultProps", {
-  valueProp: "id",
-  textProp: "name",
-  unique: true,
-  options: [],
-  useSimpleValues: false,
-  useMultipleSelectionList: false,
-  renderItem: function renderItem(item) {
-    return /*#__PURE__*/React.createElement(Typography, {
-      use: "body2"
-    }, getOptionText(item, this.props));
-  },
-  renderListItemLabel: function renderListItemLabel(item) {
-    return getOptionText(item, this.props);
-  }
-});
+//# sourceMappingURL=MultiAutoComplete.js.map

package/AutoComplete/MultiAutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","MultiAutoComplete","AdminMultiAutoComplete","onChange","value","valueProp","textProp","renderItem","noResultFound","useSimpleValues","loading","allowFreeInput","unique","renderMultipleSelection","onInput","props","getOption","option","label","item","disabled","options","map","values","val","filter","Boolean","onValuesChange","selectedOptions","find","push","selectedItems","selectedOptionRenderer","createElement","Fragment","Object","assign","size","optionRenderer","emptyMessage","onValueSearch","uniqueValues"],"sources":["MultiAutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type { AutoCompleteBaseProps } from \"./types\";\nimport { MultiAutoComplete as AdminMultiAutoComplete } from \"@webiny/admin-ui\";\n\ninterface SelectionItem {\n    name: string;\n}\n\ntype MultiAutoCompletePropsValue = SelectionItem[] | string[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n    /**\n     * Prevents adding the same item to the list twice.\n     */\n    unique?: boolean;\n\n    /**\n     * Set if custom values (not from list of suggestions) are allowed.\n     */\n    allowFreeInput?: boolean;\n\n    /**\n     *  If true, will show a loading spinner on the right side of the input.\n     */\n    loading?: boolean;\n\n    /**\n     * Use custom renderer for selected items.\n     */\n    renderMultipleSelection?: ((items: any, index: number) => React.ReactNode | null) | null;\n\n    /**\n     * Use data list instead of default Chips component. Useful when expecting a lot of data.\n     */\n    useMultipleSelectionList?: boolean;\n\n    /**\n     * Render list item when `useMultipleSelectionList` is used.\n     */\n    renderListItemLabel?: (item: any) => React.ReactNode;\n\n    /**\n     * Render in meta wrapper\n     */\n    renderListItemOptions?: (item: any) => React.ReactNode | null;\n\n    /**\n     *  A component that renders supporting UI in case of no result found.\n     */\n    noResultFound?: React.ReactNode;\n\n    /**\n     * Value is an array of strings. But can be undefined.\n     */\n    value?: MultiAutoCompletePropsValue;\n\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `MultiAutoComplete` component from the `@webiny/admin-ui` package instead.\n */\nexport const MultiAutoComplete = ({\n    onChange,\n    value = [],\n    valueProp = \"id\",\n    textProp = \"name\",\n    renderItem,\n    noResultFound,\n    useSimpleValues,\n    loading,\n    allowFreeInput,\n    unique = true,\n    renderMultipleSelection,\n    onInput,\n    ...props\n}: MultiAutoCompleteProps) => {\n    const getOption = useCallback(\n        (option: any) => {\n            if (useSimpleValues) {\n                return {\n                    label: option,\n                    value: option,\n                    item: option\n                };\n            }\n\n            return {\n                label: option[textProp],\n                value: option[valueProp],\n                disabled: option.disabled,\n                item: option\n            };\n        },\n        [textProp, valueProp, useSimpleValues]\n    );\n\n    const options = useMemo(() => {\n        return props.options.map(option => {\n            return getOption(option);\n        });\n    }, [props.options]);\n\n    const values = useMemo(() => {\n        if (!value) {\n            return [];\n        }\n\n        return value\n            .map((val: SelectionItem | string) => {\n                if (typeof val === \"string\") {\n                    return val;\n                }\n\n                return val[valueProp as keyof SelectionItem] as string;\n            })\n            .filter(Boolean);\n    }, [value, valueProp]);\n\n    const onValuesChange = useCallback(\n        (values: any) => {\n            const selectedOptions = [];\n\n            for (const value of values) {\n                const option = options.find(option => option.value === value);\n\n                if (option) {\n                    selectedOptions.push(option);\n                } else {\n                    selectedOptions.push(getOption(value));\n                }\n            }\n\n            const selectedItems = selectedOptions.map(option => option.item);\n\n            onChange?.(selectedItems);\n        },\n        [onChange, options]\n    );\n\n    const selectedOptionRenderer = useMemo(() => {\n        if (renderMultipleSelection === null) {\n            return () => null;\n        }\n        return renderMultipleSelection;\n    }, [renderMultipleSelection]);\n\n    return (\n        <>\n            <AdminMultiAutoComplete\n                {...props}\n                size={\"lg\"}\n                values={values}\n                options={options}\n                optionRenderer={renderItem}\n                selectedOptionRenderer={selectedOptionRenderer}\n                emptyMessage={noResultFound}\n                onValuesChange={onValuesChange}\n                onValueSearch={onInput}\n                loading={loading}\n                allowFreeInput={allowFreeInput}\n                uniqueValues={unique}\n            />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/AutoComplete/index.js

@@ -1,2 +1,4 @@
 export * from "./AutoComplete";
-export * from "./MultiAutoComplete";
+export * from "./MultiAutoComplete";
+
+//# sourceMappingURL=index.js.map

package/AutoComplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./AutoComplete\";\nexport * from \"./MultiAutoComplete\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}