@webiny/ui 0.0.0-unstable.fcdad0bc61 → 0.0.0-unstable.fdd9228b5d

package/Alert/Alert.js

@@ -1,63 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Alert = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emotion = require("emotion");
-
-var _excluded = ["title", "type", "children"];
-var alertStyles = /*#__PURE__*/(0, _emotion.css)({
-  borderLeft: "3px solid red",
-  margin: "5px 0 15px 0",
-  padding: "2px 0 2px 10px",
-  ".webiny-ui-alert__title": {
-    fontWeight: 600,
-    lineHeight: "150%",
-    color: "var(--mdc-theme-on-surface)",
-    marginBottom: 5
-  },
-  ".webiny-ui-alert__message": {
-    lineHeight: "100%",
-    fontSize: 14,
-    color: "var(--mdc-theme-on-surface)"
-  },
-  "&.webiny-ui-alert--success": {
-    borderColor: "#21CEAF"
-  },
-  "&.webiny-ui-alert--info": {
-    borderColor: "#29A9DB"
-  },
-  "&.webiny-ui-alert--warning": {
-    borderColor: "#F45C3C"
-  },
-  "&.webiny-ui-alert--danger": {
-    borderColor: "#E4495C"
-  }
-}, "label:alertStyles;");
-
+import React from "react";
+import { Alert as AdminUiAlert } from "@webiny/admin-ui";
 /**
- * Use Alert component to display user's avatar.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Alert` component from the `@webiny/admin-ui` package instead.
  */
-var Alert = function Alert(props) {
-  var title = props.title,
-      type = props.type,
-      children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, rest, {
-    className: alertStyles + " webiny-ui-alert webiny-ui-alert--" + type
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    className: "webiny-ui-alert__title"
-  }, title), /*#__PURE__*/_react.default.createElement("p", {
-    className: "webiny-ui-alert__message"
-  }, children));
+const Alert = props => {
+  const {
+    title,
+    type,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(AdminUiAlert, Object.assign({
+    type: type,
+    variant: "subtle"
+  }, rest), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, title)), /*#__PURE__*/React.createElement("div", null, children));
 };
+export { Alert };
 
-exports.Alert = Alert;
+//# sourceMappingURL=Alert.js.map

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["alertStyles","css","borderLeft","margin","padding","fontWeight","lineHeight","color","marginBottom","fontSize","borderColor","Alert","props","title","type","children","rest"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\n\nconst alertStyles = css({\n    borderLeft: \"3px solid red\",\n    margin: \"5px 0 15px 0\",\n    padding: \"2px 0 2px 10px\",\n    \".webiny-ui-alert__title\": {\n        fontWeight: 600,\n        lineHeight: \"150%\",\n        color: \"var(--mdc-theme-on-surface)\",\n        marginBottom: 5\n    },\n    \".webiny-ui-alert__message\": {\n        lineHeight: \"100%\",\n        fontSize: 14,\n        color: \"var(--mdc-theme-on-surface)\"\n    },\n    \"&.webiny-ui-alert--success\": {\n        borderColor: \"#21CEAF\"\n    },\n    \"&.webiny-ui-alert--info\": {\n        borderColor: \"#29A9DB\"\n    },\n    \"&.webiny-ui-alert--warning\": {\n        borderColor: \"#F45C3C\"\n    },\n    \"&.webiny-ui-alert--danger\": {\n        borderColor: \"#E4495C\"\n    }\n});\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\ninterface AlertProps {\n    // Alert title.\n    title: string;\n\n    // Alert type.\n    type: AlertType;\n\n    // Alert message.\n    children?: React.ReactNode;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n}\n\n/**\n * Use Alert component to display user's avatar.\n */\nconst Alert: React.FC<AlertProps> = props => {\n    const { title, type, children, ...rest } = props;\n\n    return (\n        <div {...rest} className={alertStyles + \" webiny-ui-alert webiny-ui-alert--\" + type}>\n            <p className={\"webiny-ui-alert__title\"}>{title}</p>\n            <p className={\"webiny-ui-alert__message\"}>{children}</p>\n        </div>\n    );\n};\n\nexport { Alert };\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;AAEA,IAAMA,WAAW,gBAAG,IAAAC,YAAA,EAAI;EACpBC,UAAU,EAAE,eADQ;EAEpBC,MAAM,EAAE,cAFY;EAGpBC,OAAO,EAAE,gBAHW;EAIpB,2BAA2B;IACvBC,UAAU,EAAE,GADW;IAEvBC,UAAU,EAAE,MAFW;IAGvBC,KAAK,EAAE,6BAHgB;IAIvBC,YAAY,EAAE;EAJS,CAJP;EAUpB,6BAA6B;IACzBF,UAAU,EAAE,MADa;IAEzBG,QAAQ,EAAE,EAFe;IAGzBF,KAAK,EAAE;EAHkB,CAVT;EAepB,8BAA8B;IAC1BG,WAAW,EAAE;EADa,CAfV;EAkBpB,2BAA2B;IACvBA,WAAW,EAAE;EADU,CAlBP;EAqBpB,8BAA8B;IAC1BA,WAAW,EAAE;EADa,CArBV;EAwBpB,6BAA6B;IACzBA,WAAW,EAAE;EADY;AAxBT,CAAJ,uBAApB;;AAgDA;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA8B,CAAAC,KAAK,EAAI;EACzC,IAAQC,KAAR,GAA2CD,KAA3C,CAAQC,KAAR;EAAA,IAAeC,IAAf,GAA2CF,KAA3C,CAAeE,IAAf;EAAA,IAAqBC,QAArB,GAA2CH,KAA3C,CAAqBG,QAArB;EAAA,IAAkCC,IAAlC,0CAA2CJ,KAA3C;EAEA,oBACI,sDAASI,IAAT;IAAe,SAAS,EAAEhB,WAAW,GAAG,oCAAd,GAAqDc;EAA/E,iBACI;IAAG,SAAS,EAAE;EAAd,GAAyCD,KAAzC,CADJ,eAEI;IAAG,SAAS,EAAE;EAAd,GAA2CE,QAA3C,CAFJ,CADJ;AAMH,CATD"}
+{"version":3,"names":["React","Alert","AdminUiAlert","props","title","type","children","rest","createElement","Object","assign","variant"],"sources":["Alert.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert as AdminUiAlert } from \"@webiny/admin-ui\";\n\nexport type AlertType = \"success\" | \"info\" | \"warning\" | \"danger\";\n\nexport interface AlertProps {\n    // Alert title.\n    title: string;\n\n    // Alert type.\n    type: AlertType;\n\n    // Alert message.\n    children?: React.ReactNode;\n\n    // CSS class name\n    className?: string;\n\n    // Style object\n    style?: React.CSSProperties;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Alert` component from the `@webiny/admin-ui` package instead.\n */\nconst Alert = (props: AlertProps) => {\n    const { title, type, children, ...rest } = props;\n\n    return (\n        <AdminUiAlert type={type} variant={\"subtle\"} {...rest}>\n            <div>\n                <strong>{title}</strong>\n            </div>\n            <div>{children}</div>\n        </AdminUiAlert>\n    );\n};\n\nexport { Alert };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,IAAIC,YAAY,QAAQ,kBAAkB;AAqBxD;AACA;AACA;AACA;AACA,MAAMD,KAAK,GAAIE,KAAiB,IAAK;EACjC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAEhD,oBACIH,KAAA,CAAAQ,aAAA,CAACN,YAAY,EAAAO,MAAA,CAAAC,MAAA;IAACL,IAAI,EAAEA,IAAK;IAACM,OAAO,EAAE;EAAS,GAAKJ,IAAI,gBACjDP,KAAA,CAAAQ,aAAA,2BACIR,KAAA,CAAAQ,aAAA,iBAASJ,KAAc,CACtB,CAAC,eACNJ,KAAA,CAAAQ,aAAA,cAAMF,QAAc,CACV,CAAC;AAEvB,CAAC;AAED,SAASL,KAAK","ignoreList":[]}

package/Alert/index.js

@@ -1,18 +1,3 @@
-"use strict";
+export * from "./Alert";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Alert = require("./Alert");
-
-Object.keys(_Alert).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Alert[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Alert[key];
-    }
-  });
-});
+//# sourceMappingURL=index.js.map

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":"AAAA","ignoreList":[]}

package/AutoComplete/AutoComplete.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AutoCompleteBaseProps } from "./types";
+import type { AutoCompleteBaseProps } from "./types";
 export declare enum Placement {
     top = "top",
     bottom = "bottom"
@@ -9,22 +9,11 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
     onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
     noResultFound?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+    displayResetAction?: boolean;
 }
-interface State {
-    inputValue: string;
-}
-declare class AutoComplete extends React.Component<AutoCompleteProps, State> {
-    static defaultProps: Partial<AutoCompleteProps>;
-    state: State;
-    /**
-     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
-     */
-    downshift: any;
-    componentDidUpdate(previousProps: AutoCompleteProps): void;
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-    private renderOptions;
-    render(): JSX.Element;
-}
-export { AutoComplete };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const AutoComplete: ({ size, onChange, valueProp, textProp, renderItem, noResultFound, useSimpleValues, onInput, ...props }: AutoCompleteProps) => React.JSX.Element;

package/AutoComplete/AutoComplete.js

@@ -1,348 +1,72 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Placement = exports.AutoComplete = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _downshift = _interopRequireDefault(require("downshift"));
-
-var _Input = require("../Input");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Elevation = require("../Elevation");
-
-var _Typography = require("../Typography");
-
-var _keycode = _interopRequireDefault(require("keycode"));
-
-var _styles = require("./styles");
-
-var _utils = require("./utils");
-
-var _reactSpinnerMaterial = _interopRequireDefault(require("react-spinner-material"));
-
-var _emotion = require("emotion");
-
-var _excluded = ["className", "options", "onChange", "value", "onInput", "validation", "placement"],
-    _excluded2 = ["getInputProps", "openMenu"];
-var menuStyles = /*#__PURE__*/(0, _emotion.css)({
-  top: "unset !important",
-  bottom: 75
-}, "label:menuStyles;");
-var listStyles = /*#__PURE__*/(0, _emotion.css)({
-  "&.autocomplete__options-list": {
-    listStyle: "none",
-    paddingLeft: 0,
-    "& li": {
-      margin: 0
-    }
-  }
-}, "label:listStyles;");
-var Placement;
-exports.Placement = Placement;
-
-(function (Placement) {
+import React, { useCallback, useMemo } from "react";
+import { AutoComplete as AdminAutoComplete } from "@webiny/admin-ui";
+export let Placement = /*#__PURE__*/function (Placement) {
   Placement["top"] = "top";
   Placement["bottom"] = "bottom";
-})(Placement || (exports.Placement = Placement = {}));
-
-var Spinner = function Spinner() {
-  return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
-    size: 24,
-    spinnerColor: "var(--mdc-theme-primary)",
-    spinnerWidth: 2,
-    visible: true
-  });
-};
-
-var OptionsList = function OptionsList(_ref) {
-  var placement = _ref.placement,
-      getMenuProps = _ref.getMenuProps,
-      children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_Elevation.Elevation, {
-    z: 1,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, menuStyles, placement === Placement.top))
-  }, /*#__PURE__*/_react.default.createElement("ul", Object.assign({
-    className: (0, _classnames.default)("autocomplete__options-list", listStyles)
-  }, getMenuProps()), children));
-};
-
-var AutoComplete = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(AutoComplete, _React$Component);
-
-  var _super = (0, _createSuper2.default)(AutoComplete);
-
-  function AutoComplete() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, AutoComplete);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  return Placement;
+}({});
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.
+ */
+export const AutoComplete = ({
+  size,
+  onChange,
+  valueProp = "id",
+  textProp = "name",
+  renderItem,
+  noResultFound,
+  useSimpleValues,
+  onInput,
+  ...props
+}) => {
+  const inputSize = useMemo(() => {
+    if (size === "medium") {
+      return "md";
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      inputValue: ""
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
-    return _this;
-  }
-
-  (0, _createClass2.default)(AutoComplete, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(previousProps) {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          value = _this$props.value,
-          options = _this$props.options;
-      var previousValue = previousProps.value;
-
-      if (!(0, _isEqual2.default)(value, previousValue)) {
-        var item = null;
-
-        if (value) {
-          if (typeof value === "object") {
-            item = value;
-          } else {
-            item = options.find(function (option) {
-              return value === (0, _utils.getOptionValue)(option, _this2.props);
-            }) || null;
-          }
-        }
-
-        var downshift = this.downshift.current;
-        downshift && downshift.selectItem(item);
+    return "lg";
+  }, [size]);
+  const options = useMemo(() => {
+    return props.options.map(option => {
+      if (useSimpleValues) {
+        return {
+          label: option,
+          value: option
+        };
       }
+      return {
+        label: option[textProp],
+        value: option[valueProp],
+        disabled: option.disabled,
+        item: option
+      };
+    });
+  }, [props.options, textProp, valueProp, useSimpleValues]);
+  const value = useMemo(() => {
+    if (!props.value) {
+      return undefined;
     }
-    /**
-     * Renders options - based on user's input. It will try to match input text with available options.
-     */
-
-  }, {
-    key: "renderOptions",
-    value: function renderOptions(_ref2) {
-      var _this3 = this;
-
-      var options = _ref2.options,
-          isOpen = _ref2.isOpen,
-          highlightedIndex = _ref2.highlightedIndex,
-          selectedItem = _ref2.selectedItem,
-          getMenuProps = _ref2.getMenuProps,
-          getItemProps = _ref2.getItemProps,
-          placement = _ref2.placement;
-
-      if (!isOpen) {
-        return null;
-      }
-      /**
-       * Suggest user to start typing when there are no options available to choose from.
-       */
-
-
-      if (!this.state.inputValue && !options.length) {
-        return /*#__PURE__*/_react.default.createElement(OptionsList, {
-          placement: placement,
-          getMenuProps: getMenuProps
-        }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-          use: "body2"
-        }, "Start typing to find entry")));
-      }
-
-      var renderItem = this.props.renderItem;
-      var filtered = options.filter(function (item) {
-        // 2) At the end, we want to show only options that are matched by typed text.
-        if (!_this3.state.inputValue) {
-          return true;
-        }
-
-        if (item.aliases) {
-          return (0, _utils.findInAliases)(item, _this3.state.inputValue);
-        }
-
-        return (0, _utils.getOptionText)(item, _this3.props).toLowerCase().includes(_this3.state.inputValue.toLowerCase());
-      });
-
-      if (!filtered.length) {
-        return /*#__PURE__*/_react.default.createElement(OptionsList, {
-          placement: placement,
-          getMenuProps: getMenuProps
-        }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-          use: "body2"
-        }, "No results."), this.props.noResultFound));
-      }
-
-      return /*#__PURE__*/_react.default.createElement(OptionsList, {
-        placement: placement,
-        getMenuProps: getMenuProps
-      }, filtered.map(function (item, index) {
-        var _itemClassNames;
-
-        var itemValue = (0, _utils.getOptionValue)(item, _this3.props); // Base classes.
-
-        var itemClassNames = (_itemClassNames = {}, (0, _defineProperty2.default)(_itemClassNames, _styles.suggestionList, true), (0, _defineProperty2.default)(_itemClassNames, "highlighted", highlightedIndex === index), (0, _defineProperty2.default)(_itemClassNames, "selected", false), _itemClassNames); // Add "selected" class if the item is selected.
-
-        if (selectedItem && (0, _utils.getOptionValue)(selectedItem, _this3.props) === itemValue) {
-          itemClassNames.selected = true;
-        } // Render the item.
-
-
-        return /*#__PURE__*/_react.default.createElement("li", Object.assign({
-          key: itemValue
-        }, getItemProps({
-          index: index,
-          item: item,
-          className: (0, _classnames.default)(itemClassNames)
-        })), renderItem.call(_this3, item, index));
-      }));
+    if (useSimpleValues && typeof props.value === "string") {
+      return props.value;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          options = _this$props2.options,
-          _onChange = _this$props2.onChange,
-          value = _this$props2.value,
-          onInput = _this$props2.onInput,
-          _this$props2$validati = _this$props2.validation,
-          validation = _this$props2$validati === void 0 ? {
-        isValid: null,
-        message: null
-      } : _this$props2$validati,
-          placement = _this$props2.placement,
-          otherInputProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded); // Downshift related props.
-
-      var downshiftProps = {
-        className: _styles.autoCompleteStyle,
-        itemToString: function itemToString(item) {
-          return (0, _utils.getOptionText)(item, _this4.props);
-        },
-        defaultSelectedItem: value,
-        onChange: function onChange(selection) {
-          if (!selection || !_onChange) {
-            return;
-          }
-
-          _onChange((0, _utils.getOptionValue)(selection, _this4.props), selection);
-
-          _this4.setState(function (state) {
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-              inputValue: ""
-            });
-          });
-        }
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(_styles.autoCompleteStyle, className)
-      }, /*#__PURE__*/_react.default.createElement(_downshift.default, Object.assign({}, downshiftProps, {
-        ref: this.downshift
-      }), function (_ref3) {
-        var getInputProps = _ref3.getInputProps,
-            openMenu = _ref3.openMenu,
-            rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-        return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, getInputProps((0, _objectSpread2.default)((0, _objectSpread2.default)({
-          // This prop is above `otherInputProps` since it can be overridden by the user.
-          trailingIcon: _this4.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null)
-        }, otherInputProps), {}, {
-          // @ts-ignore
-          validation: validation,
-          rawOnChange: true,
-          onChange: function onChange(ev) {
-            return ev;
-          },
-          onBlur: function onBlur(ev) {
-            return ev;
-          },
-          onFocus: function onFocus(ev) {
-            openMenu();
-            otherInputProps.onFocus && otherInputProps.onFocus(ev);
-          },
-          onKeyDown: function onKeyDown(ev) {
-            var keyCode = (0, _keycode.default)(ev);
-
-            if (keyCode === "backspace") {
-              if (_onChange) {
-                _onChange(null);
-              }
-
-              setTimeout(function () {
-                return openMenu();
-              }, 50);
-            }
-          },
-          onKeyUp: function onKeyUp(ev) {
-            var keyCode = (0, _keycode.default)(ev);
-            var target = ev.currentTarget;
-            var inputValue = target.value || ""; // If user pressed 'esc', 'enter' or similar...
-
-            if (keyCode && keyCode.length > 1 && keyCode !== "backspace") {
-              return;
-            } // If values are the same, exit, do not update current search term.
-
-
-            if (inputValue === _this4.state.inputValue) {
-              return;
-            }
-
-            _this4.setState(function (state) {
-              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-                inputValue: inputValue
-              });
-            }, function () {
-              onInput && onInput(inputValue);
-            });
-          }
-        }))), !otherInputProps.disabled && !otherInputProps.readOnly && _this4.renderOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-          options: options,
-          placement: placement
-        })));
-      }));
+    return props.value[valueProp];
+  }, [props.value, valueProp]);
+  const onValueChange = useCallback(value => {
+    const option = options.find(option => option.value === value);
+    if (!option) {
+      return;
     }
-  }]);
-  return AutoComplete;
-}(_react.default.Component);
-
-exports.AutoComplete = AutoComplete;
-(0, _defineProperty2.default)(AutoComplete, "defaultProps", {
-  valueProp: "id",
-  textProp: "name",
-  options: [],
-  placement: Placement.bottom,
+    onChange?.(value, option.item);
+  }, [onChange, options]);
+  return /*#__PURE__*/React.createElement(AdminAutoComplete, Object.assign({}, props, {
+    value: value,
+    options: options,
+    onValueChange: onValueChange,
+    onValueSearch: onInput,
+    size: inputSize,
+    optionRenderer: renderItem,
+    emptyMessage: noResultFound
+  }));
+};
 
-  /**
-   * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
-   */
-  renderItem: function renderItem(item) {
-    return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-      use: "body2"
-    }, (0, _utils.getOptionText)(item, this.props));
-  }
-});
+//# sourceMappingURL=AutoComplete.js.map

package/AutoComplete/AutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n    top: \"unset !important\",\n    bottom: 75\n});\n\nconst listStyles = css({\n    \"&.autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div className={classNames(autoCompleteStyle, className)}>\n                <Downshift {...downshiftProps} ref={this.downshift}>\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    // This prop is above `otherInputProps` since it can be overridden by the user.\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n                                    rawOnChange: true,\n                                    onChange: ev => ev,\n                                    onBlur: ev => ev,\n                                    onFocus: ev => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);\n                                    },\n                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        if (keyCode === \"backspace\") {\n                                            if (onChange) {\n                                                onChange(null);\n                                            }\n                                            setTimeout(() => openMenu(), 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useMemo","AutoComplete","AdminAutoComplete","Placement","size","onChange","valueProp","textProp","renderItem","noResultFound","useSimpleValues","onInput","props","inputSize","options","map","option","label","value","disabled","item","undefined","onValueChange","find","createElement","Object","assign","onValueSearch","optionRenderer","emptyMessage"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport type { AutoCompleteBaseProps } from \"./types\";\nimport { AutoComplete as AdminAutoComplete } from \"@webiny/admin-ui\";\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n\n    // Size - small, medium or large\n    size?: \"small\" | \"medium\" | \"large\";\n\n    // Indicates if the reset action should be displayed.\n    displayResetAction?: boolean;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `AutoComplete` component from the `@webiny/admin-ui` package instead.\n */\nexport const AutoComplete = ({\n    size,\n    onChange,\n    valueProp = \"id\",\n    textProp = \"name\",\n    renderItem,\n    noResultFound,\n    useSimpleValues,\n    onInput,\n    ...props\n}: AutoCompleteProps) => {\n    const inputSize = useMemo(() => {\n        if (size === \"medium\") {\n            return \"md\";\n        }\n\n        return \"lg\";\n    }, [size]);\n\n    const options = useMemo(() => {\n        return props.options.map(option => {\n            if (useSimpleValues) {\n                return {\n                    label: option,\n                    value: option\n                };\n            }\n\n            return {\n                label: option[textProp],\n                value: option[valueProp],\n                disabled: option.disabled,\n                item: option\n            };\n        });\n    }, [props.options, textProp, valueProp, useSimpleValues]);\n\n    const value = useMemo(() => {\n        if (!props.value) {\n            return undefined;\n        }\n\n        if (useSimpleValues && typeof props.value === \"string\") {\n            return props.value;\n        }\n\n        return props.value[valueProp as keyof AutoCompleteProps[\"value\"]] as string;\n    }, [props.value, valueProp]);\n\n    const onValueChange = useCallback(\n        (value: any) => {\n            const option = options.find(option => option.value === value);\n\n            if (!option) {\n                return;\n            }\n\n            onChange?.(value, option.item);\n        },\n        [onChange, options]\n    );\n\n    return (\n        <AdminAutoComplete\n            {...props}\n            value={value}\n            options={options}\n            onValueChange={onValueChange}\n            onValueSearch={onInput}\n            size={inputSize}\n            optionRenderer={renderItem}\n            emptyMessage={noResultFound}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEnD,SAASC,YAAY,IAAIC,iBAAiB,QAAQ,kBAAkB;AAEpE,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAyBrB;AACA;AACA;AACA;AACA,OAAO,MAAMF,YAAY,GAAGA,CAAC;EACzBG,IAAI;EACJC,QAAQ;EACRC,SAAS,GAAG,IAAI;EAChBC,QAAQ,GAAG,MAAM;EACjBC,UAAU;EACVC,aAAa;EACbC,eAAe;EACfC,OAAO;EACP,GAAGC;AACY,CAAC,KAAK;EACrB,MAAMC,SAAS,GAAGb,OAAO,CAAC,MAAM;IAC5B,IAAII,IAAI,KAAK,QAAQ,EAAE;MACnB,OAAO,IAAI;IACf;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,MAAMU,OAAO,GAAGd,OAAO,CAAC,MAAM;IAC1B,OAAOY,KAAK,CAACE,OAAO,CAACC,GAAG,CAACC,MAAM,IAAI;MAC/B,IAAIN,eAAe,EAAE;QACjB,OAAO;UACHO,KAAK,EAAED,MAAM;UACbE,KAAK,EAAEF;QACX,CAAC;MACL;MAEA,OAAO;QACHC,KAAK,EAAED,MAAM,CAACT,QAAQ,CAAC;QACvBW,KAAK,EAAEF,MAAM,CAACV,SAAS,CAAC;QACxBa,QAAQ,EAAEH,MAAM,CAACG,QAAQ;QACzBC,IAAI,EAAEJ;MACV,CAAC;IACL,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,KAAK,CAACE,OAAO,EAAEP,QAAQ,EAAED,SAAS,EAAEI,eAAe,CAAC,CAAC;EAEzD,MAAMQ,KAAK,GAAGlB,OAAO,CAAC,MAAM;IACxB,IAAI,CAACY,KAAK,CAACM,KAAK,EAAE;MACd,OAAOG,SAAS;IACpB;IAEA,IAAIX,eAAe,IAAI,OAAOE,KAAK,CAACM,KAAK,KAAK,QAAQ,EAAE;MACpD,OAAON,KAAK,CAACM,KAAK;IACtB;IAEA,OAAON,KAAK,CAACM,KAAK,CAACZ,SAAS,CAAqC;EACrE,CAAC,EAAE,CAACM,KAAK,CAACM,KAAK,EAAEZ,SAAS,CAAC,CAAC;EAE5B,MAAMgB,aAAa,GAAGvB,WAAW,CAC5BmB,KAAU,IAAK;IACZ,MAAMF,MAAM,GAAGF,OAAO,CAACS,IAAI,CAACP,MAAM,IAAIA,MAAM,CAACE,KAAK,KAAKA,KAAK,CAAC;IAE7D,IAAI,CAACF,MAAM,EAAE;MACT;IACJ;IAEAX,QAAQ,GAAGa,KAAK,EAAEF,MAAM,CAACI,IAAI,CAAC;EAClC,CAAC,EACD,CAACf,QAAQ,EAAES,OAAO,CACtB,CAAC;EAED,oBACIhB,KAAA,CAAA0B,aAAA,CAACtB,iBAAiB,EAAAuB,MAAA,CAAAC,MAAA,KACVd,KAAK;IACTM,KAAK,EAAEA,KAAM;IACbJ,OAAO,EAAEA,OAAQ;IACjBQ,aAAa,EAAEA,aAAc;IAC7BK,aAAa,EAAEhB,OAAQ;IACvBP,IAAI,EAAES,SAAU;IAChBe,cAAc,EAAEpB,UAAW;IAC3BqB,YAAY,EAAEpB;EAAc,EAC/B,CAAC;AAEV,CAAC","ignoreList":[]}