@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/Alert/Alert.js.map

@@ -0,0 +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: \"120%\",\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\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 * 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;AAA8B;AAE9B,IAAMA,WAAW,gBAAG,IAAAC,YAAG,EAAC;EACpBC,UAAU,EAAE,eAAe;EAC3BC,MAAM,EAAE,cAAc;EACtBC,OAAO,EAAE,gBAAgB;EACzB,yBAAyB,EAAE;IACvBC,UAAU,EAAE,GAAG;IACfC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAE,6BAA6B;IACpCC,YAAY,EAAE;EAClB,CAAC;EACD,2BAA2B,EAAE;IACzBF,UAAU,EAAE,MAAM;IAClBG,QAAQ,EAAE,EAAE;IACZF,KAAK,EAAE;EACX,CAAC;EACD,4BAA4B,EAAE;IAC1BG,WAAW,EAAE;EACjB,CAAC;EACD,yBAAyB,EAAE;IACvBA,WAAW,EAAE;EACjB,CAAC;EACD,4BAA4B,EAAE;IAC1BA,WAAW,EAAE;EACjB,CAAC;EACD,2BAA2B,EAAE;IACzBA,WAAW,EAAE;EACjB;AACJ,CAAC,uBAAC;AAqBF;AACA;AACA;AACA,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IAAQC,KAAK,GAA8BD,KAAK,CAAxCC,KAAK;IAAEC,IAAI,GAAwBF,KAAK,CAAjCE,IAAI;IAAEC,QAAQ,GAAcH,KAAK,CAA3BG,QAAQ;IAAKC,IAAI,0CAAKJ,KAAK;EAEhD,oBACI,sDAASI,IAAI;IAAE,SAAS,EAAEhB,WAAW,GAAG,oCAAoC,GAAGc;EAAK,iBAChF;IAAG,SAAS,EAAE;EAAyB,GAAED,KAAK,CAAK,eACnD;IAAG,SAAS,EAAE;EAA2B,GAAEE,QAAQ,CAAK,CACtD;AAEd,CAAC;AAAC"}

package/Alert/Alert.stories.js

@@ -1,29 +1,32 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./README.md";
-import { Alert } from "./Alert";
-var story = storiesOf("Components/Alert", module);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _README = _interopRequireDefault(require("./README.md"));
+var _Alert = require("./Alert");
+var story = (0, _react2.storiesOf)("Components/Alert", module);
 story.add("usage", function () {
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Info"
-  }, /*#__PURE__*/React.createElement(Alert, {
+  }, /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
     title: "Something went wrong!",
     type: "info"
-  }, "We failed to fetch your data.")), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Alert, {
+  }, "We failed to fetch your data.")), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
     title: "Something went wrong!",
     type: "info"
-  }, "We failed to fetch your data."))), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+  }, "We failed to fetch your data."))), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
     title: "Danger"
-  }, /*#__PURE__*/React.createElement(Alert, {
+  }, /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
     title: "Something went wrong!",
     type: "danger"
-  }, "Please contact support!")), /*#__PURE__*/React.createElement(StorySandboxCode, null, /*#__PURE__*/React.createElement(Alert, {
+  }, "Please contact support!")), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, /*#__PURE__*/_react.default.createElement(_Alert.Alert, {
     title: "Something went wrong!",
     type: "danger"
   }, "Please contact support!"))));
 }, {
   info: {
-    propTables: [Alert]
+    propTables: [_Alert.Alert]
   }
 });

package/Alert/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","readme","info","propTables","Alert"],"sources":["Alert.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { Alert } from \"./Alert\";\n\nconst story = storiesOf(\"Components/Alert\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Info\"}>\n                        <Alert title={\"Something went wrong!\"} type={\"info\"}>\n                            We failed to fetch your data.\n                        </Alert>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Alert title={\"Something went wrong!\"} type={\"info\"}>\n                            We failed to fetch your data.\n                        </Alert>\n                    </StorySandboxCode>\n                </StorySandbox>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Danger\"}>\n                        <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n                            Please contact support!\n                        </Alert>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        <Alert title={\"Something went wrong!\"} type={\"danger\"}>\n                            Please contact support!\n                        </Alert>\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Alert] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AAEA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,kBAAkB,EAAEC,MAAM,CAAC;AAEnDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAO,gBAC/B,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAO,GAAC,+BAErD,CAAQ,CACO,CACR,eACf,6BAAC,mBAAY,qBACT,6BAAC,0BAAmB;IAAC,KAAK,EAAE;EAAS,gBACjC,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACU,eACtB,6BAAC,uBAAgB,qBACb,6BAAC,YAAK;IAAC,KAAK,EAAE,uBAAwB;IAAC,IAAI,EAAE;EAAS,GAAC,yBAEvD,CAAQ,CACO,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAK;EAAE;AAAE,CAAC,CACpC"}

package/Alert/index.js

@@ -1 +1,16 @@
-export * from "./Alert";
+"use strict";
+
+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];
+    }
+  });
+});

package/Alert/index.js.map

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

package/AutoComplete/AutoComplete.d.ts

@@ -1,37 +1,31 @@
-import * as React from "react";
+import React from "react";
 import { AutoCompleteBaseProps } from "./types";
 export declare enum Placement {
     top = "top",
     bottom = "bottom"
 }
-export declare type Props = AutoCompleteBaseProps & {
+export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange"> {
     placement?: Placement;
-    onChange?: (value: any, selection: any) => void;
+    onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
-};
-declare type State = {
+    noResultFound?: React.ReactNode;
+    size?: "small" | "medium" | "large";
+}
+interface State {
     inputValue: string;
-};
-declare class AutoComplete extends React.Component<Props, State> {
-    static defaultProps: {
-        valueProp: string;
-        textProp: string;
-        options: any[];
-        placement: Placement;
-        renderItem(item: any): JSX.Element;
-    };
-    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: any): void;
+    componentDidUpdate(previousProps: AutoCompleteProps): void;
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-    renderOptions({ options, isOpen, highlightedIndex, selectedItem, getMenuProps, getItemProps, placement }: any): JSX.Element;
+    private renderOptions;
     render(): JSX.Element;
 }
 export { AutoComplete };

package/AutoComplete/AutoComplete.js

@@ -1,30 +1,37 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 _isEqual from "lodash/isEqual";
-var _excluded = ["className", "options", "onChange", "value", "valueProp", "textProp", "onInput", "validation", "placement"],
-    _excluded2 = ["getInputProps", "openMenu"];
-import * as React from "react";
-import Downshift from "downshift";
-import { Input } from "../Input";
-import classNames from "classnames";
-import { Elevation } from "../Elevation";
-import { Typography } from "../Typography";
-import keycode from "keycode";
-import { autoCompleteStyle, suggestionList } from "./styles";
-import { getOptionValue, getOptionText, findInAliases } from "./utils";
-import MaterialSpinner from "react-spinner-material";
-import { css } from "emotion";
-var menuStyles = /*#__PURE__*/css({
+"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__*/css({
+var listStyles = /*#__PURE__*/(0, _emotion.css)({
   "&.autocomplete__options-list": {
     listStyle: "none",
     paddingLeft: 0,
@@ -33,200 +40,194 @@ var listStyles = /*#__PURE__*/css({
     }
   }
 }, "label:listStyles;");
-export var Placement;
-
+var Placement;
+exports.Placement = Placement;
 (function (Placement) {
   Placement["top"] = "top";
   Placement["bottom"] = "bottom";
-})(Placement || (Placement = {}));
-
-function Spinner() {
-  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+})(Placement || (exports.Placement = Placement = {}));
+var Spinner = function Spinner() {
+  return /*#__PURE__*/_react.default.createElement(_reactSpinnerMaterial.default, {
     size: 24,
-    spinnerColor: "#fa5723",
+    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) {
-  _inherits(AutoComplete, _React$Component);
-
-  var _super = _createSuper(AutoComplete);
-
+  (0, _inherits2.default)(AutoComplete, _React$Component);
+  var _super = (0, _createSuper2.default)(AutoComplete);
   function AutoComplete() {
     var _this;
-
-    _classCallCheck(this, AutoComplete);
-
+    (0, _classCallCheck2.default)(this, AutoComplete);
     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", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       inputValue: ""
     });
-
-    _defineProperty(_assertThisInitialized(_this), "downshift", /*#__PURE__*/React.createRef());
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/_react.default.createRef());
     return _this;
   }
-
-  _createClass(AutoComplete, [{
+  (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;
+        value = _this$props.value,
+        options = _this$props.options;
       var previousValue = previousProps.value;
-
-      if (!_isEqual(value, previousValue)) {
+      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 === getOptionValue(option, _this2.props);
+              return value === (0, _utils.getOptionValue)(option, _this2.props);
             }) || null;
           }
         }
-
         var downshift = this.downshift.current;
         downshift && downshift.selectItem(item);
       }
     }
+
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
      */
-
   }, {
     key: "renderOptions",
-    value: function renderOptions(_ref) {
+    value: function renderOptions(_ref2) {
       var _this3 = this;
-
-      var options = _ref.options,
-          isOpen = _ref.isOpen,
-          highlightedIndex = _ref.highlightedIndex,
-          selectedItem = _ref.selectedItem,
-          getMenuProps = _ref.getMenuProps,
-          getItemProps = _ref.getItemProps,
-          placement = _ref.placement;
-
+      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 findInAliases(item, _this3.state.inputValue);
+          return (0, _utils.findInAliases)(item, _this3.state.inputValue);
         }
-
-        return getOptionText(item, _this3.props).toLowerCase().includes(_this3.state.inputValue.toLowerCase());
+        return (0, _utils.getOptionText)(item, _this3.props).toLowerCase().includes(_this3.state.inputValue.toLowerCase());
       });
-
       if (!filtered.length) {
-        return /*#__PURE__*/React.createElement(Elevation, {
-          z: 1,
-          className: classNames(_defineProperty({}, menuStyles, placement === Placement.top))
-        }, /*#__PURE__*/React.createElement("ul", Object.assign({
-          className: classNames("autocomplete__options-list", listStyles)
-        }, getMenuProps()), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+        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."))));
+        }, "No results."), this.props.noResultFound));
       }
-
-      return /*#__PURE__*/React.createElement(Elevation, {
-        z: 1,
-        className: classNames(_defineProperty({}, menuStyles, placement === Placement.top))
-      }, /*#__PURE__*/React.createElement("ul", Object.assign({
-        className: classNames("autocomplete__options-list", listStyles)
-      }, getMenuProps()), filtered.map(function (item, index) {
+      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);
 
-        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); // Add "selected" class if the item is selected.
+        // 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);
 
-        if (selectedItem && getOptionValue(selectedItem, _this3.props) === itemValue) {
+        // 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.createElement("li", Object.assign({
+        // Render the item.
+        return /*#__PURE__*/_react.default.createElement("li", Object.assign({
           key: itemValue
         }, getItemProps({
           index: index,
           item: item,
-          className: classNames(itemClassNames)
+          className: (0, _classnames.default)(itemClassNames)
         })), renderItem.call(_this3, item, index));
-      })));
+      }));
     }
   }, {
     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,
-          valueProp = _this$props2.valueProp,
-          textProp = _this$props2.textProp,
-          onInput = _this$props2.onInput,
-          _this$props2$validati = _this$props2.validation,
-          validation = _this$props2$validati === void 0 ? {
-        isValid: null
-      } : _this$props2$validati,
-          placement = _this$props2.placement,
-          otherInputProps = _objectWithoutProperties(_this$props2, _excluded); // Downshift related 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: autoCompleteStyle,
+        className: _styles.autoCompleteStyle,
         itemToString: function itemToString(item) {
-          return getOptionText(item, _this4.props);
+          return (0, _utils.getOptionText)(item, _this4.props);
         },
         defaultSelectedItem: value,
         onChange: function onChange(selection) {
           if (!selection || !_onChange) {
             return;
           }
-
-          _onChange(getOptionValue(selection, _this4.props), selection);
-
+          _onChange((0, _utils.getOptionValue)(selection, _this4.props), selection);
           _this4.setState(function (state) {
-            return _objectSpread(_objectSpread({}, state), {}, {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
               inputValue: ""
             });
           });
         }
       };
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(autoCompleteStyle, className)
-      }, /*#__PURE__*/React.createElement(Downshift, Object.assign({}, downshiftProps, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(_styles.autoCompleteStyle, this.props.size ? "webiny-ui-autocomplete--size-".concat(this.props.size) : null, className)
+      }, /*#__PURE__*/_react.default.createElement(_downshift.default, Object.assign({}, downshiftProps, {
         ref: this.downshift
-      }), 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({
+      }), 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.createElement(Spinner, null)
+          trailingIcon: _this4.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null)
         }, otherInputProps), {}, {
+          // @ts-ignore
+          size: _this4.props.size,
           // @ts-ignore
           validation: validation,
           rawOnChange: true,
@@ -241,59 +242,59 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             otherInputProps.onFocus && otherInputProps.onFocus(ev);
           },
           onKeyDown: function onKeyDown(ev) {
-            var keyCode = keycode(ev);
-
+            var keyCode = (0, _keycode.default)(ev);
             if (keyCode === "backspace") {
-              _onChange(null);
-
               setTimeout(function () {
-                return openMenu();
+                if (_onChange) {
+                  _onChange(null);
+                  openMenu();
+                }
               }, 50);
             }
           },
           onKeyUp: function onKeyUp(ev) {
-            var keyCode = keycode(ev);
+            var keyCode = (0, _keycode.default)(ev);
             var target = ev.currentTarget;
-            var inputValue = target.value || ""; // If user pressed 'esc', 'enter' or similar...
+            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 values are the same, exit, do not update current search term.
             if (inputValue === _this4.state.inputValue) {
               return;
             }
-
             _this4.setState(function (state) {
-              return _objectSpread(_objectSpread({}, state), {}, {
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
                 inputValue: inputValue
               });
             }, function () {
               onInput && onInput(inputValue);
             });
           }
-        }))), !otherInputProps.disabled && !otherInputProps.readOnly && _this4.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+        }))), !otherInputProps.disabled && !otherInputProps.readOnly && _this4.renderOptions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
           options: options,
           placement: placement
         })));
       }));
     }
   }]);
-
   return AutoComplete;
-}(React.Component);
-
-_defineProperty(AutoComplete, "defaultProps", {
+}(_react.default.Component);
+exports.AutoComplete = AutoComplete;
+(0, _defineProperty2.default)(AutoComplete, "defaultProps", {
   valueProp: "id",
   textProp: "name",
   options: [],
   placement: Placement.bottom,
+  /**
+   * 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.createElement(Typography, {
+    return /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
       use: "body2"
-    }, getOptionText(item, this.props));
+    }, (0, _utils.getOptionText)(item, this.props));
   }
-});
-
-export { AutoComplete };
+});

package/AutoComplete/AutoComplete.js.map

@@ -0,0 +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","size","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    // Size - small, medium or large\n    size?: \"small\" | \"medium\" | \"large\";\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\n                className={classNames(\n                    autoCompleteStyle,\n                    this.props.size ? `webiny-ui-autocomplete--size-${this.props.size}` : null,\n                    className\n                )}\n            >\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                                    size: this.props.size,\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                                            setTimeout(() => {\n                                                if (onChange) {\n                                                    onChange(null);\n                                                    openMenu();\n                                                }\n                                            }, 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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"}