@webiny/ui 5.22.0-beta.3 → 5.23.0-beta.0

package/AutoComplete/AutoComplete.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { ControllerStateAndHelpers } from "downshift";
 import { AutoCompleteBaseProps } from "./types";
 export declare enum Placement {
     top = "top",
@@ -13,12 +14,19 @@ export declare type Props = AutoCompleteBaseProps & {
 declare type State = {
     inputValue: string;
 };
+interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
+    options: Props["options"];
+    placement: Props["placement"];
+}
 declare class AutoComplete extends React.Component<Props, State> {
     static defaultProps: {
         valueProp: string;
         textProp: string;
         options: any[];
         placement: Placement;
+        /**
+         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.
+         */
         renderItem(item: any): JSX.Element;
     };
     state: {
@@ -32,7 +40,7 @@ declare class AutoComplete extends React.Component<Props, State> {
     /**
      * 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;
+    renderOptions({ options, isOpen, highlightedIndex, selectedItem, getMenuProps, getItemProps, placement }: RenderOptionsParams): JSX.Element;
     render(): JSX.Element;
 }
 export { AutoComplete };

package/AutoComplete/AutoComplete.js

@@ -49,6 +49,18 @@ function Spinner() {
   });
 }
 
+var OptionsList = function OptionsList(_ref) {
+  var placement = _ref.placement,
+      getMenuProps = _ref.getMenuProps,
+      children = _ref.children;
+  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()), children));
+};
+
 var AutoComplete = /*#__PURE__*/function (_React$Component) {
   _inherits(AutoComplete, _React$Component);
 
@@ -107,20 +119,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.createElement(OptionsList, {
+          placement: placement,
+          getMenuProps: getMenuProps
+        }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+          use: "body2"
+        }, "Start typing to find entry")));
+      }
 
       var renderItem = this.props.renderItem;
       var filtered = options.filter(function (item) {
@@ -137,22 +162,18 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
       });
 
       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.createElement(OptionsList, {
+          placement: placement,
+          getMenuProps: getMenuProps
+        }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
           use: "body2"
-        }, "No results."), this.props.noResultFound)));
+        }, "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.createElement(OptionsList, {
+        placement: placement,
+        getMenuProps: getMenuProps
+      }, filtered.map(function (item, index) {
         var _itemClassNames;
 
         var itemValue = getOptionValue(item, _this3.props); // Base classes.
@@ -171,7 +192,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           item: item,
           className: classNames(itemClassNames)
         })), renderItem.call(_this3, item, index));
-      })));
+      }));
     }
   }, {
     key: "render",
@@ -218,10 +239,10 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
         className: classNames(autoCompleteStyle, className)
       }, /*#__PURE__*/React.createElement(Downshift, Object.assign({}, downshiftProps, {
         ref: this.downshift
-      }), function (_ref2) {
-        var getInputProps = _ref2.getInputProps,
-            openMenu = _ref2.openMenu,
-            rest = _objectWithoutProperties(_ref2, _excluded2);
+      }), function (_ref3) {
+        var getInputProps = _ref3.getInputProps,
+            openMenu = _ref3.openMenu,
+            rest = _objectWithoutProperties(_ref3, _excluded2);
 
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, getInputProps(_objectSpread(_objectSpread({
           // This prop is above `otherInputProps` since it can be overridden by the user.
@@ -289,6 +310,10 @@ _defineProperty(AutoComplete, "defaultProps", {
   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, {
       use: "body2"

package/AutoComplete/MultiAutoComplete.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
+import { ControllerStateAndHelpers } from "downshift";
 import { AutoCompleteBaseProps } from "./types";
+import { Props } from "./AutoComplete";
 export declare type MultiAutoCompleteProps = AutoCompleteBaseProps & {
     /**
      * Prevents adding the same item to the list twice.
@@ -30,6 +32,10 @@ declare type State = {
     reorderFormVisible: string;
     reorderFormValue: string;
 };
+interface RenderOptionsParams extends Omit<ControllerStateAndHelpers<any>, "getInputProps" | "openMenu"> {
+    options: Props["options"];
+    unique: boolean;
+}
 export declare class MultiAutoComplete extends React.Component<MultiAutoCompleteProps, State> {
     static defaultProps: {
         valueProp: string;
@@ -38,7 +44,13 @@ export declare class MultiAutoComplete extends React.Component<MultiAutoComplete
         options: any[];
         useSimpleValues: boolean;
         useMultipleSelectionList: boolean;
+        /**
+         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
+         */
         renderItem(item: any): JSX.Element;
+        /**
+         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
+         */
         renderListItemLabel(item: any): any;
     };
     state: {
@@ -51,7 +63,7 @@ export declare class MultiAutoComplete extends React.Component<MultiAutoComplete
     /**
      * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
      */
-    downshift: any;
+    downshift: React.RefObject<any>;
     assignedValueAfterClearing: {
         set: boolean;
         selection: any;
@@ -61,15 +73,8 @@ export declare class MultiAutoComplete extends React.Component<MultiAutoComplete
     getOptions(): any[];
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
-     * @param options
-     * @param isOpen
-     * @param highlightedIndex
-     * @param selectedItem
-     * @param getMenuProps
-     * @param getItemProps
-     * @returns {*}
      */
-    renderOptions({ options, isOpen, highlightedIndex, getMenuProps, getItemProps }: any): JSX.Element;
+    renderOptions(params: RenderOptionsParams): JSX.Element;
     /**
      * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for
      * rendering selected items (we are using already existing "Chips" component).

package/AutoComplete/MultiAutoComplete.js

@@ -123,6 +123,16 @@ function paginateMultipleSelection(multipleSelection, limit, page, search) {
   };
 }
 
+var OptionsList = function OptionsList(_ref) {
+  var getMenuProps = _ref.getMenuProps,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Elevation, {
+    z: 1
+  }, /*#__PURE__*/React.createElement("ul", Object.assign({
+    className: classNames("multi-autocomplete__options-list", listStyles)
+  }, getMenuProps()), children));
+};
+
 export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   _inherits(MultiAutoComplete, _React$Component);
 
@@ -229,29 +239,34 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
     }
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
-     * @param options
-     * @param isOpen
-     * @param highlightedIndex
-     * @param selectedItem
-     * @param getMenuProps
-     * @param getItemProps
-     * @returns {*}
      */
 
   }, {
     key: "renderOptions",
-    value: function renderOptions(_ref) {
+    value: function renderOptions(params) {
       var _this3 = this;
 
-      var options = _ref.options,
-          isOpen = _ref.isOpen,
-          highlightedIndex = _ref.highlightedIndex,
-          getMenuProps = _ref.getMenuProps,
-          getItemProps = _ref.getItemProps;
+      var options = params.options,
+          isOpen = params.isOpen,
+          highlightedIndex = params.highlightedIndex,
+          getMenuProps = params.getMenuProps,
+          getItemProps = params.getItemProps;
 
       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.createElement(OptionsList, {
+          getMenuProps: getMenuProps
+        }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Typography, {
+          use: "body2"
+        }, "Start typing to find entry")));
+      }
 
       if (!options.length) {
         return /*#__PURE__*/React.createElement(Elevation, {
@@ -558,11 +573,19 @@ _defineProperty(MultiAutoComplete, "defaultProps", {
   options: [],
   useSimpleValues: false,
   useMultipleSelectionList: false,
+
+  /**
+   * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.
+   */
   renderItem: function renderItem(item) {
     return /*#__PURE__*/React.createElement(Typography, {
       use: "body2"
     }, getOptionText(item, this.props));
   },
+
+  /**
+   * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.
+   */
   renderListItemLabel: function renderListItemLabel(item) {
     return getOptionText(item, this.props);
   }

package/ImageEditor/toolbar/filter.js

@@ -6,6 +6,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _debounce from "lodash/debounce";
+
+/**
+ * When using Caman, we added @ts-ignore because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.
+ * TODO: use some other library to edit images
+ */
 import React from "react";
 import { ReactComponent as FilterIcon } from "./icons/filter.svg";
 import { Slider } from "../../Slider";
@@ -103,10 +108,13 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
       Caman(canvas.current, function () {
         var _this2 = this;
 
+        // @ts-ignore
         this.revert(false);
-        Object.keys(values).forEach(function (key) {
+        Object.keys(values).forEach( // @ts-ignore
+        function (key) {
           return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
-        });
+        }); // @ts-ignore
+
         this.render();
         component.setState({
           processing: false
@@ -201,7 +209,9 @@ var tool = {
     var canvas = _ref2.canvas;
     // @ts-ignore
     Caman(canvas.current, function () {
-      this.revert(false);
+      // @ts-ignore
+      this.revert(false); // @ts-ignore
+
       this.render();
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "5.22.0-beta.3",
+	"version": "5.23.0-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -47,7 +47,7 @@
 		"@rmwc/top-app-bar": "5.7.2",
 		"@rmwc/types": "5.6.0",
 		"@rmwc/typography": "5.7.2",
-		"@svgr/webpack": "6.2.0",
+		"@svgr/webpack": "6.2.1",
 		"brace": "0.11.1",
 		"classnames": "2.3.1",
 		"cropperjs": "1.5.12",
@@ -81,11 +81,11 @@
 		"@storybook/addon-knobs": "^5.0.5",
 		"@storybook/addon-links": "^5.0.5",
 		"@storybook/react": "^5.2.8",
-		"@webiny/cli": "^5.22.0-beta.3",
-		"@webiny/form": "^5.22.0-beta.3",
-		"@webiny/project-utils": "^5.22.0-beta.3",
-		"@webiny/storybook-utils": "^5.22.0-beta.3",
-		"@webiny/validation": "^5.22.0-beta.3",
+		"@webiny/cli": "^5.23.0-beta.0",
+		"@webiny/form": "^5.23.0-beta.0",
+		"@webiny/project-utils": "^5.23.0-beta.0",
+		"@webiny/storybook-utils": "^5.23.0-beta.0",
+		"@webiny/validation": "^5.23.0-beta.0",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -99,6 +99,7 @@
 		"rimraf": "^3.0.2",
 		"sass": "^1.38.0",
 		"sass-loader": "^12.1.0",
+		"ttypescript": "^1.5.13",
 		"typescript": "^4.1.3",
 		"webpack": "^4.46.0"
 	},
@@ -132,5 +133,5 @@
 			]
 		}
 	},
-	"gitHead": "7a6b4ce3b9f31fe0702fffd28b7959c637e9a20b"
+	"gitHead": "deb16c58954f7396c848f04806a2028aa53cc97b"
 }