@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.3386f66516

package/Alert/Alert.js

@@ -1,8 +1,20 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+"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"];
-import * as React from "react";
-import { css } from "emotion";
-var alertStyles = /*#__PURE__*/css({
+var alertStyles = /*#__PURE__*/(0, _emotion.css)({
   borderLeft: "3px solid red",
   margin: "5px 0 15px 0",
   padding: "2px 0 2px 10px",
@@ -13,7 +25,7 @@ var alertStyles = /*#__PURE__*/css({
     marginBottom: 5
   },
   ".webiny-ui-alert__message": {
-    lineHeight: "100%",
+    lineHeight: "120%",
     fontSize: 14,
     color: "var(--mdc-theme-on-surface)"
   },
@@ -38,15 +50,14 @@ var Alert = function Alert(props) {
   var title = props.title,
       type = props.type,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+      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.createElement("p", {
+  }), /*#__PURE__*/_react.default.createElement("p", {
     className: "webiny-ui-alert__title"
-  }, title), /*#__PURE__*/React.createElement("p", {
+  }, title), /*#__PURE__*/_react.default.createElement("p", {
     className: "webiny-ui-alert__message"
   }, children));
 };
 
-export { Alert };
+exports.Alert = Alert;

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;;;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"}

package/Alert/Alert.stories.js

@@ -1,29 +1,38 @@
-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,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,mCADJ,CADJ,eAMI,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,mCADJ,CANJ,CAFJ,eAcI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,6BADJ,CADJ,eAMI,6BAAC,uBAAD,qBACI,6BAAC,YAAD;IAAO,KAAK,EAAE,uBAAd;IAAuC,IAAI,EAAE;EAA7C,6BADJ,CANJ,CAdJ,CADJ;AA6BH,CAhCL,EAiCI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,YAAD;EAAd;AAAR,CAjCJ"}

package/Alert/index.js

@@ -1 +1,18 @@
-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,30 @@
-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;
+}
+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,59 @@
-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"],
+"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"];
-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({
+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,48 +62,58 @@ var listStyles = /*#__PURE__*/css({
     }
   }
 }, "label:listStyles;");
-export var Placement;
+var Placement;
+exports.Placement = Placement;
 
 (function (Placement) {
   Placement["top"] = "top";
   Placement["bottom"] = "bottom";
-})(Placement || (Placement = {}));
+})(Placement || (exports.Placement = Placement = {}));
 
-function Spinner() {
-  return /*#__PURE__*/React.createElement(MaterialSpinner, {
+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);
+  (0, _inherits2.default)(AutoComplete, _React$Component);
 
-  var _super = _createSuper(AutoComplete);
+  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;
@@ -84,7 +123,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           options = _this$props.options;
       var previousValue = previousProps.value;
 
-      if (!_isEqual(value, previousValue)) {
+      if (!(0, _isEqual2.default)(value, previousValue)) {
         var item = null;
 
         if (value) {
@@ -92,7 +131,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             item = value;
           } else {
             item = options.find(function (option) {
-              return value === getOptionValue(option, _this2.props);
+              return value === (0, _utils.getOptionValue)(option, _this2.props);
             }) || null;
           }
         }
@@ -107,20 +146,33 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
 
   }, {
     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) {
@@ -130,48 +182,44 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
         }
 
         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 = getOptionValue(item, _this3.props); // Base classes.
+        var itemValue = (0, _utils.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.
+        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 && getOptionValue(selectedItem, _this3.props) === itemValue) {
+        if (selectedItem && (0, _utils.getOptionValue)(selectedItem, _this3.props) === itemValue) {
           itemClassNames.selected = true;
         } // Render the item.
 
 
-        return /*#__PURE__*/React.createElement("li", Object.assign({
+        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",
@@ -183,21 +231,19 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           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
+        isValid: null,
+        message: null
       } : _this$props2$validati,
           placement = _this$props2.placement,
-          otherInputProps = _objectWithoutProperties(_this$props2, _excluded); // Downshift related props.
-
+          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) {
@@ -205,27 +251,26 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             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, 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
           validation: validation,
@@ -241,10 +286,12 @@ 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);
+              if (_onChange) {
+                _onChange(null);
+              }
 
               setTimeout(function () {
                 return openMenu();
@@ -252,7 +299,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             }
           },
           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...
 
@@ -266,34 +313,36 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
             }
 
             _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);
+}(_react.default.Component);
 
-_defineProperty(AutoComplete, "defaultProps", {
+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 };
+});