@webiny/ui 5.25.0 → 5.25.1-beta.0

package/Accordion/AccordionItem.d.ts

@@ -24,6 +24,10 @@ export interface AccordionItemProps {
      * For testing purpose
      */
     "data-testid"?: string;
+    /**
+     * Append a class name to Icon
+     */
+    iconClassName?: string;
 }
 declare const AccordionItem: React.FC<AccordionItemProps>;
 export { AccordionItem };

package/Accordion/AccordionItem.js

@@ -107,7 +107,8 @@ var AccordionItem = function AccordionItem(props) {
     onClick: toggleState,
     "data-testid": props["data-testid"]
   }, props.icon && /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(Icon, {
-    icon: props.icon
+    icon: props.icon,
+    className: props.iconClassName
   })), /*#__PURE__*/React.createElement(TitleContent, {
     className: "webiny-ui-accordion-item__title"
   }, /*#__PURE__*/React.createElement(ListItemTitle, null, props.title), props.description && /*#__PURE__*/React.createElement(ListItemDescription, null, /*#__PURE__*/React.createElement(Typography, {

package/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AccordionItem.tsx"],"names":["React","useState","useCallback","useEffect","ListItem","ListItemGraphic","ListItemMeta","Transition","Icon","styled","css","Typography","ReactComponent","UpArrow","DownArrow","classNames","Content","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","padding","cursor","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","entered","exiting","AccordionItem","props","open","setState","toggleState","className","icon","title","description","state","children"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"../List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\n\nconst Content = styled(\"div\")({\n    width: \"100%\",\n    borderRight: \"1px solid var(--mdc-theme-background)\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    borderLeft: \"1px solid var(--mdc-theme-background)\",\n    boxSizing: \"border-box\"\n});\n\nconst listItem = css({\n    padding: \"15px 20px\",\n    cursor: \"pointer\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    \"&:last-child\": {\n        borderBottom: \"none\"\n    },\n    \".mdc-list-item__graphic\": {\n        marginRight: 20\n    }\n});\n\nconst ListItemTitle = styled(\"div\")({\n    fontWeight: 600,\n    marginBottom: 5\n});\n\nconst ListItemDescription = styled(\"div\")({});\n\nconst TitleContent = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\nconst openedState = css({\n    backgroundColor: \"var(--mdc-theme-on-background)\"\n});\n\nconst duration = 150;\nconst defaultStyle = {\n    transition: `all ${duration}ms ease-in-out`,\n    opacity: 0,\n    height: 0,\n    pointerEvents: \"none\",\n    overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n    entering: {\n        opacity: 0,\n        height: 0,\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nexport interface AccordionItemProps {\n    /**\n     * Left side icon\n     */\n    icon?: React.ReactElement | null;\n\n    /**\n     * Accordion title\n     */\n    title?: React.ReactNode;\n\n    /**\n     * Optional description\n     */\n    description?: string;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n\n    /**\n     * Render item opened by default\n     */\n    open?: boolean;\n    /**\n     * For testing purpose\n     */\n    \"data-testid\"?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    useEffect(() => {\n        setState(props.open ? true : false);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={toggleState}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} />\n                    </ListItemGraphic>\n                )}\n\n                <TitleContent className=\"webiny-ui-accordion-item__title\">\n                    <ListItemTitle>{props.title}</ListItemTitle>\n                    {props.description && (\n                        <ListItemDescription>\n                            <Typography use={\"subtitle2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <ListItemMeta>\n                    <Icon icon={!open ? <DownArrow /> : <UpArrow />} />\n                </ListItemMeta>\n            </ListItem>\n            <Transition in={open} timeout={duration}>\n                {(state: TransitionStylesState) => (\n                    <Content\n                        style={{ ...defaultStyle, ...transitionStyles[state] }}\n                        className=\"webiny-ui-accordion-item__content\"\n                    >\n                        {props.children}\n                    </Content>\n                )}\n            </Transition>\n        </div>\n    );\n};\n\nexport { AccordionItem };\n"]}
+{"version":3,"sources":["AccordionItem.tsx"],"names":["React","useState","useCallback","useEffect","ListItem","ListItemGraphic","ListItemMeta","Transition","Icon","styled","css","Typography","ReactComponent","UpArrow","DownArrow","classNames","Content","width","borderRight","borderBottom","borderLeft","boxSizing","listItem","padding","cursor","marginRight","ListItemTitle","fontWeight","marginBottom","ListItemDescription","TitleContent","display","flexDirection","openedState","backgroundColor","duration","defaultStyle","transition","opacity","height","pointerEvents","overflow","transitionStyles","entering","entered","exiting","AccordionItem","props","open","setState","toggleState","className","icon","iconClassName","title","description","state","children"],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ListItem, ListItemGraphic, ListItemMeta } from \"../List\";\nimport Transition from \"react-transition-group/Transition\";\nimport { Icon } from \"~/Icon\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { Typography } from \"~/Typography\";\n\nimport { ReactComponent as UpArrow } from \"./icons/round-keyboard_arrow_up-24px.svg\";\nimport { ReactComponent as DownArrow } from \"./icons/round-keyboard_arrow_down-24px.svg\";\nimport classNames from \"classnames\";\n\nconst Content = styled(\"div\")({\n    width: \"100%\",\n    borderRight: \"1px solid var(--mdc-theme-background)\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    borderLeft: \"1px solid var(--mdc-theme-background)\",\n    boxSizing: \"border-box\"\n});\n\nconst listItem = css({\n    padding: \"15px 20px\",\n    cursor: \"pointer\",\n    borderBottom: \"1px solid var(--mdc-theme-background)\",\n    \"&:last-child\": {\n        borderBottom: \"none\"\n    },\n    \".mdc-list-item__graphic\": {\n        marginRight: 20\n    }\n});\n\nconst ListItemTitle = styled(\"div\")({\n    fontWeight: 600,\n    marginBottom: 5\n});\n\nconst ListItemDescription = styled(\"div\")({});\n\nconst TitleContent = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\"\n});\n\nconst openedState = css({\n    backgroundColor: \"var(--mdc-theme-on-background)\"\n});\n\nconst duration = 150;\nconst defaultStyle = {\n    transition: `all ${duration}ms ease-in-out`,\n    opacity: 0,\n    height: 0,\n    pointerEvents: \"none\",\n    overflow: \"hidden\"\n};\n\ntype TransitionStylesState = \"entering\" | \"entered\" | \"exiting\";\n\n/**\n * We are casting pointerEvents as any because csstype does not have PointerEvents exported. Or at least, that is the error.\n */\nconst transitionStyles = {\n    entering: {\n        opacity: 0,\n        height: 0,\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    entered: {\n        opacity: 1,\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    },\n    exiting: {\n        height: \"auto\",\n        padding: \"20px 20px 20px 65px\",\n        pointerEvents: \"auto\" as any,\n        overflow: \"initial\"\n    }\n};\n\nexport interface AccordionItemProps {\n    /**\n     * Left side icon\n     */\n    icon?: React.ReactElement | null;\n\n    /**\n     * Accordion title\n     */\n    title?: React.ReactNode;\n\n    /**\n     * Optional description\n     */\n    description?: string;\n\n    /**\n     * Append a class name\n     */\n    className?: string;\n\n    /**\n     * Render item opened by default\n     */\n    open?: boolean;\n    /**\n     * For testing purpose\n     */\n    \"data-testid\"?: string;\n    /**\n     * Append a class name to Icon\n     */\n    iconClassName?: string;\n}\n\nconst AccordionItem: React.FC<AccordionItemProps> = props => {\n    const [open, setState] = useState<boolean>(props.open ? props.open : false);\n\n    const toggleState = useCallback(() => {\n        setState(!open);\n    }, [open]);\n\n    useEffect(() => {\n        setState(props.open ? true : false);\n    }, [props.open]);\n\n    return (\n        <div className={classNames(\"webiny-ui-accordion-item\", props.className)}>\n            <ListItem\n                className={classNames(\n                    listItem,\n                    { [openedState]: open },\n                    \"webiny-ui-accordion-item__list-item\"\n                )}\n                onClick={toggleState}\n                data-testid={props[\"data-testid\"]}\n            >\n                {props.icon && (\n                    <ListItemGraphic>\n                        <Icon icon={props.icon} className={props.iconClassName} />\n                    </ListItemGraphic>\n                )}\n\n                <TitleContent className=\"webiny-ui-accordion-item__title\">\n                    <ListItemTitle>{props.title}</ListItemTitle>\n                    {props.description && (\n                        <ListItemDescription>\n                            <Typography use={\"subtitle2\"}>{props.description}</Typography>\n                        </ListItemDescription>\n                    )}\n                </TitleContent>\n                <ListItemMeta>\n                    <Icon icon={!open ? <DownArrow /> : <UpArrow />} />\n                </ListItemMeta>\n            </ListItem>\n            <Transition in={open} timeout={duration}>\n                {(state: TransitionStylesState) => (\n                    <Content\n                        style={{ ...defaultStyle, ...transitionStyles[state] }}\n                        className=\"webiny-ui-accordion-item__content\"\n                    >\n                        {props.children}\n                    </Content>\n                )}\n            </Transition>\n        </div>\n    );\n};\n\nexport { AccordionItem };\n"]}

package/AutoComplete/MultiAutoComplete.d.ts

@@ -3,7 +3,7 @@ import { AutoCompleteBaseProps } from "./types";
 interface SelectionItem {
     name: string;
 }
-declare type MultiAutoCompletePropsValue = SelectionItem[];
+declare type MultiAutoCompletePropsValue = SelectionItem[] | string[];
 export interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, "value"> {
     /**
      * Prevents adding the same item to the list twice.
@@ -57,6 +57,23 @@ export declare class MultiAutoComplete extends React.Component<MultiAutoComplete
      * Renders options - based on user's input. It will try to match input text with available options.
      */
     private renderOptions;
+    paginateMultipleSelection(): {
+        data: {
+            option: string | SelectionItem;
+            index: number;
+        }[];
+        meta: {
+            hasData: boolean;
+            totalCount: number;
+            from: number;
+            to: number;
+            page: number;
+            lastPage: number;
+            limit: number;
+            hasPrevious: boolean;
+            hasNext: boolean;
+        };
+    };
     /**
      * 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

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -6,7 +7,6 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
 import _inherits from "@babel/runtime/helpers/inherits";
 import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["unique", "value", "onChange", "onInput", "validation", "useMultipleSelectionList", "description"],
     _excluded2 = ["getInputProps", "openMenu"];
 import React from "react";
@@ -30,13 +30,13 @@ import { ReactComponent as NextAllIcon } from "./icons/skip_next-24px.svg";
 import { ReactComponent as DeleteIcon } from "./icons/baseline-close-24px.svg";
 import { ReactComponent as ReorderIcon } from "./icons/reorder_black_24dp.svg";
 import { css } from "emotion";
+import { ListItemGraphic } from "../List";
 var listItemMetaClassName = /*#__PURE__*/css({
   display: "table"
 }, "label:listItemMetaClassName;");
 var iconButtonClassName = /*#__PURE__*/css({
   display: "table-cell !important"
 }, "label:iconButtonClassName;");
-import { ListItemGraphic } from "../List";
 var style = {
   pagination: {
     bar: /*#__PURE__*/css({
@@ -84,51 +84,6 @@ var Spinner = function Spinner() {
   });
 };
 
-var DEFAULT_PER_PAGE = 10;
-
-function paginateMultipleSelection(multipleSelection, limit, page, search) {
-  // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
-  var data = Array.isArray(multipleSelection) ? multipleSelection.map(function (item, index) {
-    return _objectSpread(_objectSpread({}, item), {}, {
-      index: index
-    });
-  }) : [];
-
-  if (typeof search === "string" && search) {
-    data = data.filter(function (item) {
-      return typeof item.name === "string" && item.name.toLowerCase().includes(search.toLowerCase());
-    });
-  }
-
-  var lastPage = Math.ceil(data.length / limit);
-  var totalCount = data.length;
-  page = page || lastPage;
-  data = data.slice((page - 1) * limit, page * limit);
-  var from = 0;
-  var to = 0;
-
-  if (data.length) {
-    from = (page - 1) * limit + 1;
-    to = from + (data.length - 1);
-  }
-
-  var meta = {
-    hasData: data.length > 0,
-    totalCount: totalCount,
-    from: from,
-    to: to,
-    page: page,
-    lastPage: lastPage,
-    limit: limit,
-    hasPrevious: page > 1,
-    hasNext: page < lastPage
-  };
-  return {
-    data: data,
-    meta: meta
-  };
-}
-
 var OptionsList = function OptionsList(_ref) {
   var getMenuProps = _ref.getMenuProps,
       children = _ref.children;
@@ -196,12 +151,33 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           allowFreeInput = _this$props.allowFreeInput,
           useSimpleValues = _this$props.useSimpleValues,
           options = _this$props.options;
-      var filtered = options.filter(function (item) {
+      var values = Array.isArray(value) ? _toConsumableArray(value) : [];
+
+      var filtered = _toConsumableArray(options); // If free input is allowed, prepend typed value to the list.
+
+
+      if (allowFreeInput && this.state.inputValue) {
+        if (useSimpleValues) {
+          var existingValue = filtered.includes(this.state.inputValue);
+
+          if (!existingValue) {
+            filtered.unshift(this.state.inputValue);
+          }
+        } else {
+          var _existingValue = filtered.find(function (item) {
+            return _this2.state.inputValue === getOptionText(item, _this2.props);
+          });
+
+          if (!_existingValue) {
+            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
+          }
+        }
+      }
+
+      return filtered.filter(function (item) {
         // We need to filter received options.
         // 1) If "unique" prop was passed, we don't want to show already picked options again.
         if (unique) {
-          var values = value;
-
           if (Array.isArray(values)) {
             if (values.find(function (value) {
               return getOptionValue(value, _this2.props) === getOptionValue(item, _this2.props);
@@ -221,27 +197,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         }
 
         return getOptionText(item, _this2.props).toLowerCase().includes(_this2.state.inputValue.toLowerCase());
-      }); // If free input is allowed, prepend typed value to the list.
-
-      if (allowFreeInput && this.state.inputValue) {
-        if (useSimpleValues) {
-          var existingValue = filtered.includes(this.state.inputValue);
-
-          if (!existingValue) {
-            filtered.unshift(this.state.inputValue);
-          }
-        } else {
-          var _existingValue = filtered.find(function (item) {
-            return _this2.state.inputValue === getOptionText(item, _this2.props);
-          });
-
-          if (!_existingValue) {
-            filtered.unshift(_defineProperty({}, this.props.textProp, this.state.inputValue));
-          }
-        }
-      }
-
-      return filtered;
+      });
     }
     /**
      * Renders options - based on user's input. It will try to match input text with available options.
@@ -305,6 +261,57 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         })), renderItem.call(_this3, item, index));
       })));
     }
+  }, {
+    key: "paginateMultipleSelection",
+    value: function paginateMultipleSelection() {
+      var _this4 = this;
+
+      var value = this.props.value;
+      var limit = 10;
+      var page = this.state.multipleSelectionPage;
+      var search = this.state.multipleSelectionSearch; // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.
+
+      var data = Array.isArray(value) ? value.map(function (option, index) {
+        return {
+          option: option,
+          index: index
+        };
+      }) : [];
+
+      if (search) {
+        data = data.filter(function (item) {
+          return getOptionText(item.option, _this4.props).toLowerCase().includes(search.toLowerCase());
+        });
+      }
+
+      var lastPage = Math.ceil(data.length / limit);
+      var totalCount = data.length;
+      page = page || lastPage;
+      data = data.slice((page - 1) * limit, page * limit);
+      var from = 0;
+      var to = 0;
+
+      if (data.length) {
+        from = (page - 1) * limit + 1;
+        to = from + (data.length - 1);
+      }
+
+      var meta = {
+        hasData: data.length > 0,
+        totalCount: totalCount,
+        from: from,
+        to: to,
+        page: page,
+        lastPage: lastPage,
+        limit: limit,
+        hasPrevious: page > 1,
+        hasNext: page < lastPage
+      };
+      return {
+        data: data,
+        meta: meta
+      };
+    }
     /**
      * 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).
@@ -313,7 +320,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderMultipleSelection",
     value: function renderMultipleSelection() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props2 = this.props,
           value = _this$props2.value,
@@ -325,9 +332,9 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           renderListItemOptions = _this$props2.renderListItemOptions;
 
       if (useMultipleSelectionList) {
-        var _paginateMultipleSele = paginateMultipleSelection(value, DEFAULT_PER_PAGE, this.state.multipleSelectionPage, this.state.multipleSelectionSearch),
-            data = _paginateMultipleSele.data,
-            meta = _paginateMultipleSele.meta;
+        var _this$paginateMultipl = this.paginateMultipleSelection(),
+            data = _this$paginateMultipl.data,
+            meta = _this$paginateMultipl.meta;
 
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
           className: style.pagination.bar
@@ -336,9 +343,9 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           placeholder: "Search selected...",
           value: this.state.multipleSelectionSearch,
           onChange: function onChange(value) {
-            _this4.setMultipleSelectionSearch(value);
+            _this5.setMultipleSelectionSearch(value);
 
-            _this4.setMultipleSelectionPage(value ? 1 : 0);
+            _this5.setMultipleSelectionPage(value ? 1 : 0);
           }
         })), /*#__PURE__*/React.createElement("div", {
           className: style.pagination.pages
@@ -348,39 +355,39 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           icon: /*#__PURE__*/React.createElement(PrevAllIcon, null),
           disabled: !meta.hasData || meta.page === 1,
           onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(1);
+            return _this5.setMultipleSelectionPage(1);
           }
         }), /*#__PURE__*/React.createElement(IconButton, {
           icon: /*#__PURE__*/React.createElement(PrevIcon, null),
           disabled: !meta.hasData || !meta.hasPrevious,
           onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.page - 1);
+            return _this5.setMultipleSelectionPage(meta.page - 1);
           }
         }), /*#__PURE__*/React.createElement(IconButton, {
           icon: /*#__PURE__*/React.createElement(NextIcon, null),
           disabled: !meta.hasData || !meta.hasNext,
           onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.page + 1);
+            return _this5.setMultipleSelectionPage(meta.page + 1);
           }
         }), /*#__PURE__*/React.createElement(IconButton, {
           icon: /*#__PURE__*/React.createElement(NextAllIcon, null),
           disabled: !meta.hasData || meta.page === meta.lastPage,
           onClick: function onClick() {
-            return _this4.setMultipleSelectionPage(meta.lastPage);
+            return _this5.setMultipleSelectionPage(meta.lastPage);
           }
         })))), /*#__PURE__*/React.createElement(List, {
           className: style.pagination.list
         }, meta.hasData ? data.map(function (item, index) {
-          var key = "".concat(getOptionValue(item, _this4.props), "-").concat(index);
+          var key = "".concat(getOptionValue(item.option, _this5.props), "-").concat(index);
 
-          if (_this4.state.reorderFormVisible === key) {
+          if (_this5.state.reorderFormVisible === key) {
             return /*#__PURE__*/React.createElement(ListItem, {
               key: key
             }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
               disabled: true,
               icon: /*#__PURE__*/React.createElement(ReorderIcon, null)
             })), /*#__PURE__*/React.createElement(Input, {
-              value: _this4.state.reorderFormValue,
+              value: _this5.state.reorderFormValue,
               onKeyDown: function onKeyDown(e) {
                 var key = e.key;
 
@@ -399,13 +406,13 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
                   }
                 }
 
-                _this4.setState({
+                _this5.setState({
                   reorderFormVisible: "",
                   reorderFormValue: ""
                 });
               },
               onChange: function onChange(value) {
-                return _this4.setState({
+                return _this5.setState({
                   reorderFormValue: value
                 });
               },
@@ -424,7 +431,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(IconButton, {
             icon: /*#__PURE__*/React.createElement(ReorderIcon, null),
             onClick: function onClick() {
-              _this4.setState({
+              _this5.setState({
                 reorderFormVisible: key
               });
             }
@@ -434,9 +441,9 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
               marginRight: 8,
               minWidth: 32
             }
-          }, item.index + 1, "."), " ", renderListItemLabel && renderListItemLabel.call(_this4, item), /*#__PURE__*/React.createElement(ListItemMeta, {
+          }, item.index + 1, "."), " ", renderListItemLabel && renderListItemLabel.call(_this5, item.option), /*#__PURE__*/React.createElement(ListItemMeta, {
             className: listItemMetaClassName
-          }, renderListItemOptions && renderListItemOptions.call(_this4, item), /*#__PURE__*/React.createElement(IconButton, {
+          }, renderListItemOptions && renderListItemOptions.call(_this5, item.option), /*#__PURE__*/React.createElement(IconButton, {
             icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
             className: iconButtonClassName,
             onClick: function onClick() {
@@ -462,8 +469,8 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         disabled: disabled
       }, value.map(function (item, index) {
         return /*#__PURE__*/React.createElement(Chip, {
-          label: getOptionText(item, _this4.props),
-          key: "".concat(getOptionValue(item, _this4.props), "-").concat(index),
+          label: getOptionText(item, _this5.props),
+          key: "".concat(getOptionValue(item, _this5.props), "-").concat(index),
           trailingIcon: /*#__PURE__*/React.createElement(BaselineCloseIcon, null),
           onRemove: function onRemove() {
             if (!onChange) {
@@ -478,7 +485,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
       var props = this.props,
           _this$props3 = this.props,
@@ -507,30 +514,30 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
         },
         ref: this.downshift,
         onChange: function onChange(selection) {
-          if (!_this5.assignedValueAfterClearing.set) {
-            _this5.assignedValueAfterClearing = {
+          if (!_this6.assignedValueAfterClearing.set) {
+            _this6.assignedValueAfterClearing = {
               set: true,
               selection: selection
             };
 
-            _this5.downshift.current.clearSelection();
+            _this6.downshift.current.clearSelection();
 
-            _this5.setMultipleSelectionPage(0);
+            _this6.setMultipleSelectionPage(0);
 
             return;
           }
 
-          if (_this5.assignedValueAfterClearing.set) {
-            _this5.setState({
+          if (_this6.assignedValueAfterClearing.set) {
+            _this6.setState({
               inputValue: ""
             });
 
-            _this5.assignedValueAfterClearing.set = false;
+            _this6.assignedValueAfterClearing.set = false;
 
             if (Array.isArray(value)) {
-              _onChange && _onChange([].concat(_toConsumableArray(value), [_this5.assignedValueAfterClearing.selection]));
+              _onChange && _onChange([].concat(_toConsumableArray(value), [_this6.assignedValueAfterClearing.selection]));
             } else {
-              _onChange && _onChange([_this5.assignedValueAfterClearing.selection]);
+              _onChange && _onChange([_this6.assignedValueAfterClearing.selection]);
             }
           }
         }
@@ -545,7 +552,7 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           // Only pass description if not using "useMultipleSelectionList".
           description: useMultipleSelectionList ? null : description,
           rawOnChange: true,
-          trailingIcon: _this5.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
+          trailingIcon: _this6.props.loading && /*#__PURE__*/React.createElement(Spinner, null),
           onChange: function onChange(e) {
             return e;
           },
@@ -555,8 +562,8 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
           onKeyUp: function onKeyUp(e) {
             var inputValue = e.target.value || ""; // Set current input value into state and trigger onInput if different.
 
-            if (inputValue !== _this5.state.inputValue) {
-              _this5.setState({
+            if (inputValue !== _this6.state.inputValue) {
+              _this6.setState({
                 inputValue: inputValue
               }, function () {
                 onInput && onInput(inputValue);
@@ -567,10 +574,10 @@ export var MultiAutoComplete = /*#__PURE__*/function (_React$Component) {
             openMenu();
             otherInputProps.onFocus && otherInputProps.onFocus(e);
           }
-        }))), _this5.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
+        }))), _this6.renderOptions(_objectSpread(_objectSpread({}, rest), {}, {
           unique: unique,
           options: options
-        })), _this5.renderMultipleSelection());
+        })), _this6.renderMultipleSelection());
       }));
     }
   }]);

package/AutoComplete/MultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MultiAutoComplete.tsx"],"names":["React","Downshift","MaterialSpinner","Input","Chips","Chip","getOptionValue","getOptionText","findInAliases","List","ListItem","ListItemMeta","IconButton","classNames","Elevation","Typography","autoCompleteStyle","suggestionList","FormElementMessage","ReactComponent","BaselineCloseIcon","PrevIcon","NextIcon","PrevAllIcon","NextAllIcon","DeleteIcon","ReorderIcon","css","listItemMetaClassName","display","iconButtonClassName","ListItemGraphic","style","pagination","bar","justifyContent","alignItems","borderBottom","padding","pages","searchInput","height","list","secondaryText","color","listStyles","listStyle","paddingLeft","margin","Spinner","DEFAULT_PER_PAGE","paginateMultipleSelection","multipleSelection","limit","page","search","data","Array","isArray","map","item","index","filter","name","toLowerCase","includes","lastPage","Math","ceil","length","totalCount","slice","from","to","meta","hasData","hasPrevious","hasNext","OptionsList","getMenuProps","children","MultiAutoComplete","inputValue","multipleSelectionPage","multipleSelectionSearch","reorderFormVisible","reorderFormValue","createRef","set","selection","setState","props","unique","value","allowFreeInput","useSimpleValues","options","filtered","values","find","state","aliases","existingValue","unshift","textProp","params","isOpen","highlightedIndex","getItemProps","noResultFound","renderItem","itemValue","itemClassNames","className","call","onChange","disabled","useMultipleSelectionList","description","renderListItemLabel","renderListItemOptions","setMultipleSelectionSearch","setMultipleSelectionPage","key","e","newValue","splice","target","marginRight","minWidth","hasItems","onInput","validation","isValid","message","otherInputProps","getOptions","downshift","assignedValueAfterClearing","current","clearSelection","getInputProps","openMenu","rest","rawOnChange","trailingIcon","loading","onBlur","onKeyUp","onFocus","renderOptions","renderMultipleSelection","Component","valueProp"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { Input } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { List, ListItem, ListItemMeta } from \"~/List\";\nimport { IconButton } from \"~/Button\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as PrevIcon } from \"./icons/navigate_before-24px.svg\";\nimport { ReactComponent as NextIcon } from \"./icons/navigate_next-24px.svg\";\nimport { ReactComponent as PrevAllIcon } from \"./icons/skip_previous-24px.svg\";\nimport { ReactComponent as NextAllIcon } from \"./icons/skip_next-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as ReorderIcon } from \"./icons/reorder_black_24dp.svg\";\n\nimport { css } from \"emotion\";\n\nconst listItemMetaClassName = css({\n    display: \"table\"\n});\nconst iconButtonClassName = css({\n    display: \"table-cell !important\"\n});\nimport { ListItemGraphic } from \"~/List\";\nimport { AutoCompleteProps } from \"~/AutoComplete/AutoComplete\";\nconst style = {\n    pagination: {\n        bar: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            borderBottom: \"2px solid #fa5723\",\n            padding: \"6px 0\"\n        }),\n        pages: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\"\n        }),\n        searchInput: css({\n            height: \"42px !important\"\n        }),\n        list: css({\n            padding: \"0 0 5px 0 !important\",\n            \".mdc-list-item\": {\n                borderBottom: \"1px solid var(--mdc-theme-on-background)\"\n            }\n        }),\n        secondaryText: css({\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        })\n    }\n};\nconst listStyles = css({\n    \"&.multi-autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\ninterface SelectionItem {\n    name: string;\n}\ntype MultiAutoCompletePropsValue = SelectionItem[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n    /**\n     * Prevents adding the same item to the list twice.\n     */\n    unique: boolean;\n\n    /**\n     * Set if custom values (not from list of suggestions) are allowed.\n     */\n    allowFreeInput?: boolean;\n\n    /**\n     *  If true, will show a loading spinner on the right side of the input.\n     */\n    loading?: boolean;\n\n    /**\n     * Use data list instead of default Chips component. Useful when expecting a lot of data.\n     */\n    useMultipleSelectionList?: boolean;\n\n    /**\n     * Render list item when `useMultipleSelectionList` is used.\n     */\n    renderListItemLabel?: Function;\n    /**\n     * Render in meta wrapper\n     */\n    renderListItemOptions?: (item: any) => React.ReactNode | null;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n    /**\n     * Value is an array of strings. But can be undefined.\n     */\n    value?: MultiAutoCompletePropsValue;\n}\n\ninterface MultiAutoCompleteState {\n    inputValue: string;\n    multipleSelectionPage: number;\n    multipleSelectionSearch: string;\n    reorderFormVisible: string;\n    reorderFormValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n};\n\nconst DEFAULT_PER_PAGE = 10;\n\nfunction paginateMultipleSelection(\n    multipleSelection: MultiAutoCompletePropsValue,\n    limit: number,\n    page: number,\n    search: string\n) {\n    // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.\n    let data = Array.isArray(multipleSelection)\n        ? multipleSelection.map((item, index) => ({ ...item, index }))\n        : [];\n\n    if (typeof search === \"string\" && search) {\n        data = data.filter(item => {\n            return (\n                typeof item.name === \"string\" &&\n                item.name.toLowerCase().includes(search.toLowerCase())\n            );\n        });\n    }\n\n    const lastPage = Math.ceil(data.length / limit);\n    const totalCount = data.length;\n\n    page = page || lastPage;\n    data = data.slice((page - 1) * limit, page * limit);\n\n    let from = 0;\n    let to = 0;\n    if (data.length) {\n        from = (page - 1) * limit + 1;\n        to = from + (data.length - 1);\n    }\n\n    const meta = {\n        hasData: data.length > 0,\n        totalCount,\n        from,\n        to,\n        page: page,\n        lastPage,\n        limit,\n        hasPrevious: page > 1,\n        hasNext: page < lastPage\n    };\n\n    return { data, meta };\n}\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    unique: boolean;\n}\n\ninterface OptionsListProps {\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\ninterface AssignedValueAfterClearing {\n    set: boolean;\n    selection: string | null;\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ getMenuProps, children }) => {\n    return (\n        <Elevation z={1}>\n            <ul\n                className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nexport class MultiAutoComplete extends React.Component<\n    MultiAutoCompleteProps,\n    MultiAutoCompleteState\n> {\n    static defaultProps: Partial<MultiAutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        unique: true,\n        options: [],\n        useSimpleValues: false,\n        useMultipleSelectionList: false,\n        /**\n         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as MultiAutoComplete).props)}\n                </Typography>\n            );\n        },\n        /**\n         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderListItemLabel(item: any) {\n            return getOptionText(item, (this as unknown as MultiAutoComplete).props);\n        }\n    };\n\n    public override state: MultiAutoCompleteState = {\n        inputValue: \"\",\n        multipleSelectionPage: 0,\n        multipleSelectionSearch: \"\",\n        reorderFormVisible: \"\",\n        reorderFormValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    private downshift = React.createRef<any>();\n\n    private assignedValueAfterClearing: AssignedValueAfterClearing = {\n        set: false,\n        selection: null\n    };\n\n    setMultipleSelectionPage = (multipleSelectionPage: number): void => {\n        this.setState({ multipleSelectionPage });\n    };\n\n    setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {\n        this.setState({ multipleSelectionSearch });\n    };\n\n    getOptions() {\n        const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;\n\n        const filtered = options.filter(item => {\n            // We need to filter received options.\n            // 1) If \"unique\" prop was passed, we don't want to show already picked options again.\n            if (unique) {\n                const values = value;\n                if (Array.isArray(values)) {\n                    if (\n                        values.find(\n                            value =>\n                                getOptionValue(value, this.props) ===\n                                getOptionValue(item, this.props)\n                        )\n                    ) {\n                        return false;\n                    }\n                }\n            }\n\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 free input is allowed, prepend typed value to the list.\n        if (allowFreeInput && this.state.inputValue) {\n            if (useSimpleValues) {\n                const existingValue = filtered.includes(this.state.inputValue);\n                if (!existingValue) {\n                    filtered.unshift(this.state.inputValue);\n                }\n            } else {\n                const existingValue = filtered.find(\n                    item => this.state.inputValue === getOptionText(item, this.props)\n                );\n                if (!existingValue) {\n                    filtered.unshift({ [this.props.textProp]: this.state.inputValue });\n                }\n            }\n        }\n\n        return filtered;\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(params: RenderOptionsParams) {\n        const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;\n        if (!isOpen) {\n            return null;\n        }\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 getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        if (!options.length) {\n            return (\n                <Elevation z={1}>\n                    <ul\n                        className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                        {...getMenuProps()}\n                    >\n                        <li>\n                            <Typography use={\"body2\"}>No results.</Typography>\n                            {this.props.noResultFound}\n                        </li>\n                    </ul>\n                </Elevation>\n            );\n        }\n\n        const { renderItem } = this.props;\n        return (\n            <Elevation z={1}>\n                <ul\n                    className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                    {...getMenuProps()}\n                >\n                    {options.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                        // Render the item.\n                        return (\n                            <li\n                                key={itemValue + index}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classNames(itemClassNames)\n                                })}\n                            >\n                                {renderItem.call(this, item, index)}\n                            </li>\n                        );\n                    })}\n                </ul>\n            </Elevation>\n        );\n    }\n\n    /**\n     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for\n     * rendering selected items (we are using already existing \"Chips\" component).\n     */\n    public renderMultipleSelection() {\n        const {\n            value,\n            onChange,\n            disabled,\n            useMultipleSelectionList,\n            description,\n            renderListItemLabel,\n            renderListItemOptions\n        } = this.props;\n\n        if (useMultipleSelectionList) {\n            const { data, meta } = paginateMultipleSelection(\n                value as SelectionItem[],\n                DEFAULT_PER_PAGE,\n                this.state.multipleSelectionPage,\n                this.state.multipleSelectionSearch\n            );\n\n            return (\n                <>\n                    <div className={style.pagination.bar}>\n                        <div>\n                            <Input\n                                className={style.pagination.searchInput}\n                                placeholder={\"Search selected...\"}\n                                value={this.state.multipleSelectionSearch}\n                                onChange={value => {\n                                    this.setMultipleSelectionSearch(value);\n                                    this.setMultipleSelectionPage(value ? 1 : 0);\n                                }}\n                            />\n                        </div>\n\n                        <div className={style.pagination.pages}>\n                            <div className={meta.hasData ? \"\" : style.pagination.secondaryText}>\n                                {meta.from} - {meta.to} of {meta.totalCount}\n                            </div>\n                            <div>\n                                <IconButton\n                                    icon={<PrevAllIcon />}\n                                    disabled={!meta.hasData || meta.page === 1}\n                                    onClick={() => this.setMultipleSelectionPage(1)}\n                                />\n                                <IconButton\n                                    icon={<PrevIcon />}\n                                    disabled={!meta.hasData || !meta.hasPrevious}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page - 1)}\n                                />\n                                <IconButton\n                                    icon={<NextIcon />}\n                                    disabled={!meta.hasData || !meta.hasNext}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page + 1)}\n                                />\n                                <IconButton\n                                    icon={<NextAllIcon />}\n                                    disabled={!meta.hasData || meta.page === meta.lastPage}\n                                    onClick={() => this.setMultipleSelectionPage(meta.lastPage)}\n                                />\n                            </div>\n                        </div>\n                    </div>\n\n                    <List className={style.pagination.list}>\n                        {meta.hasData ? (\n                            data.map((item, index) => {\n                                const key = `${getOptionValue(item, this.props)}-${index}`;\n                                if (this.state.reorderFormVisible === key) {\n                                    return (\n                                        <ListItem key={key}>\n                                            <ListItemGraphic>\n                                                <IconButton disabled icon={<ReorderIcon />} />\n                                            </ListItemGraphic>\n                                            <Input\n                                                value={this.state.reorderFormValue}\n                                                onKeyDown={(e: any) => {\n                                                    const key = e.key;\n                                                    if (key !== \"Escape\" && key !== \"Enter\") {\n                                                        return;\n                                                    }\n\n                                                    if (key === \"Enter\") {\n                                                        // Reorder the item.\n                                                        const newValue = [\n                                                            ...(value as SelectionItem[])\n                                                        ];\n                                                        newValue.splice(\n                                                            e.target.value - 1,\n                                                            0,\n                                                            newValue.splice(item.index, 1)[0]\n                                                        );\n\n                                                        if (onChange) {\n                                                            onChange(newValue);\n                                                        }\n                                                    }\n\n                                                    this.setState({\n                                                        reorderFormVisible: \"\",\n                                                        reorderFormValue: \"\"\n                                                    });\n                                                }}\n                                                onChange={value =>\n                                                    this.setState({ reorderFormValue: value })\n                                                }\n                                                type={\"number\"}\n                                                autoFocus\n                                                className={style.pagination.searchInput}\n                                                placeholder={\n                                                    \"Type a new order number and press Enter, or press Esc to cancel.\"\n                                                }\n                                            />\n                                            <ListItemMeta>\n                                                <IconButton icon={<DeleteIcon />} disabled />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    );\n                                }\n\n                                return (\n                                    <ListItem key={key}>\n                                        <ListItemGraphic>\n                                            <IconButton\n                                                icon={<ReorderIcon />}\n                                                onClick={() => {\n                                                    this.setState({ reorderFormVisible: key });\n                                                }}\n                                            />\n                                        </ListItemGraphic>\n                                        <div\n                                            style={{\n                                                color: \"var(--mdc-theme-text-secondary-on-background)\",\n                                                marginRight: 8,\n                                                minWidth: 32\n                                            }}\n                                        >\n                                            {item.index + 1}.\n                                        </div>{\" \"}\n                                        {renderListItemLabel &&\n                                            renderListItemLabel.call(this, item)}\n                                        <ListItemMeta className={listItemMetaClassName}>\n                                            {renderListItemOptions &&\n                                                renderListItemOptions.call(this, item)}\n                                            <IconButton\n                                                icon={<DeleteIcon />}\n                                                className={iconButtonClassName}\n                                                onClick={() => {\n                                                    if (!onChange) {\n                                                        return;\n                                                    }\n                                                    onChange([\n                                                        ...(value as SelectionItem[]).slice(\n                                                            0,\n                                                            item.index\n                                                        ),\n                                                        ...(value as SelectionItem[]).slice(\n                                                            item.index + 1\n                                                        )\n                                                    ]);\n                                                }}\n                                            />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                );\n                            })\n                        ) : (\n                            <ListItem>\n                                <span className={style.pagination.secondaryText}>\n                                    Nothing to show.\n                                </span>\n                            </ListItem>\n                        )}\n                    </List>\n                    <div>\n                        <FormElementMessage>{description}</FormElementMessage>\n                    </div>\n                </>\n            );\n        }\n\n        const hasItems = Array.isArray(value) && value.length;\n        if (!hasItems) {\n            return null;\n        }\n\n        return (\n            <Chips disabled={disabled}>\n                {(value as SelectionItem[]).map((item, index) => (\n                    <Chip\n                        label={getOptionText(item, this.props)}\n                        key={`${getOptionValue(item, this.props)}-${index}`}\n                        trailingIcon={<BaselineCloseIcon />}\n                        onRemove={() => {\n                            if (!onChange) {\n                                return;\n                            }\n                            onChange([\n                                ...(value as SelectionItem[]).slice(0, index),\n                                ...(value as SelectionItem[]).slice(index + 1)\n                            ]);\n                        }}\n                    />\n                ))}\n            </Chips>\n        );\n    }\n\n    public override render() {\n        const {\n            props,\n            props: {\n                // options: rawOptions,\n                // allowFreeInput,\n                // useSimpleValues,\n                unique,\n                value,\n                onChange,\n                // valueProp,\n                // textProp,\n                onInput,\n                validation = { isValid: null, message: null },\n                useMultipleSelectionList,\n                description,\n                ...otherInputProps\n            }\n        } = this;\n\n        const options = this.getOptions();\n\n        return (\n            <div className={classNames(autoCompleteStyle, props.className)}>\n                <Downshift\n                    defaultSelectedItem={null}\n                    // @ts-ignore there is no className on Downshift\n                    className={autoCompleteStyle}\n                    itemToString={item => item && getOptionText(item, props)}\n                    ref={this.downshift}\n                    onChange={selection => {\n                        if (!this.assignedValueAfterClearing.set) {\n                            this.assignedValueAfterClearing = {\n                                set: true,\n                                selection\n                            };\n                            this.downshift.current.clearSelection();\n                            this.setMultipleSelectionPage(0);\n                            return;\n                        }\n\n                        if (this.assignedValueAfterClearing.set) {\n                            this.setState({ inputValue: \"\" });\n                            this.assignedValueAfterClearing.set = false;\n                            if (Array.isArray(value)) {\n                                onChange &&\n                                    onChange([...value, this.assignedValueAfterClearing.selection]);\n                            } else {\n                                onChange && onChange([this.assignedValueAfterClearing.selection]);\n                            }\n                        }\n                    }}\n                >\n                    {/* \"getInputProps\" and \"openMenu\" are not needed in renderOptions method. */}\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n\n                                    // Only pass description if not using \"useMultipleSelectionList\".\n                                    description: useMultipleSelectionList ? null : description,\n                                    rawOnChange: true,\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    onChange: e => e,\n                                    onBlur: e => e,\n                                    onKeyUp: (e: any) => {\n                                        const inputValue = e.target.value || \"\";\n\n                                        // Set current input value into state and trigger onInput if different.\n                                        if (inputValue !== this.state.inputValue) {\n                                            this.setState({ inputValue }, () => {\n                                                onInput && onInput(inputValue);\n                                            });\n                                        }\n                                    },\n                                    onFocus: e => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(e);\n                                    }\n                                })}\n                            />\n                            {this.renderOptions({ ...rest, unique, options })}\n                            {this.renderMultipleSelection()}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"sources":["MultiAutoComplete.tsx"],"names":["React","Downshift","MaterialSpinner","Input","Chips","Chip","getOptionValue","getOptionText","findInAliases","List","ListItem","ListItemMeta","IconButton","classNames","Elevation","Typography","autoCompleteStyle","suggestionList","FormElementMessage","ReactComponent","BaselineCloseIcon","PrevIcon","NextIcon","PrevAllIcon","NextAllIcon","DeleteIcon","ReorderIcon","css","ListItemGraphic","listItemMetaClassName","display","iconButtonClassName","style","pagination","bar","justifyContent","alignItems","borderBottom","padding","pages","searchInput","height","list","secondaryText","color","listStyles","listStyle","paddingLeft","margin","Spinner","OptionsList","getMenuProps","children","MultiAutoComplete","inputValue","multipleSelectionPage","multipleSelectionSearch","reorderFormVisible","reorderFormValue","createRef","set","selection","setState","props","unique","value","allowFreeInput","useSimpleValues","options","values","Array","isArray","filtered","state","existingValue","includes","unshift","find","item","textProp","filter","aliases","toLowerCase","params","isOpen","highlightedIndex","getItemProps","length","noResultFound","renderItem","map","index","itemValue","itemClassNames","className","call","limit","page","search","data","option","lastPage","Math","ceil","totalCount","slice","from","to","meta","hasData","hasPrevious","hasNext","onChange","disabled","useMultipleSelectionList","description","renderListItemLabel","renderListItemOptions","paginateMultipleSelection","setMultipleSelectionSearch","setMultipleSelectionPage","key","e","newValue","splice","target","marginRight","minWidth","hasItems","onInput","validation","isValid","message","otherInputProps","getOptions","downshift","assignedValueAfterClearing","current","clearSelection","getInputProps","openMenu","rest","rawOnChange","trailingIcon","loading","onBlur","onKeyUp","onFocus","renderOptions","renderMultipleSelection","Component","valueProp"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { Input } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { List, ListItem, ListItemMeta } from \"~/List\";\nimport { IconButton } from \"~/Button\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as PrevIcon } from \"./icons/navigate_before-24px.svg\";\nimport { ReactComponent as NextIcon } from \"./icons/navigate_next-24px.svg\";\nimport { ReactComponent as PrevAllIcon } from \"./icons/skip_previous-24px.svg\";\nimport { ReactComponent as NextAllIcon } from \"./icons/skip_next-24px.svg\";\nimport { ReactComponent as DeleteIcon } from \"./icons/baseline-close-24px.svg\";\nimport { ReactComponent as ReorderIcon } from \"./icons/reorder_black_24dp.svg\";\nimport { css } from \"emotion\";\nimport { ListItemGraphic } from \"~/List\";\nimport { AutoCompleteProps } from \"~/AutoComplete/AutoComplete\";\n\nconst listItemMetaClassName = css({\n    display: \"table\"\n});\n\nconst iconButtonClassName = css({\n    display: \"table-cell !important\"\n});\n\nconst style = {\n    pagination: {\n        bar: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            borderBottom: \"2px solid #fa5723\",\n            padding: \"6px 0\"\n        }),\n        pages: css({\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\"\n        }),\n        searchInput: css({\n            height: \"42px !important\"\n        }),\n        list: css({\n            padding: \"0 0 5px 0 !important\",\n            \".mdc-list-item\": {\n                borderBottom: \"1px solid var(--mdc-theme-on-background)\"\n            }\n        }),\n        secondaryText: css({\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        })\n    }\n};\n\nconst listStyles = css({\n    \"&.multi-autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\ninterface SelectionItem {\n    name: string;\n}\n\ntype MultiAutoCompletePropsValue = SelectionItem[] | string[];\n\nexport interface MultiAutoCompleteProps extends Omit<AutoCompleteBaseProps, \"value\"> {\n    /**\n     * Prevents adding the same item to the list twice.\n     */\n    unique: boolean;\n\n    /**\n     * Set if custom values (not from list of suggestions) are allowed.\n     */\n    allowFreeInput?: boolean;\n\n    /**\n     *  If true, will show a loading spinner on the right side of the input.\n     */\n    loading?: boolean;\n\n    /**\n     * Use data list instead of default Chips component. Useful when expecting a lot of data.\n     */\n    useMultipleSelectionList?: boolean;\n\n    /**\n     * Render list item when `useMultipleSelectionList` is used.\n     */\n    renderListItemLabel?: Function;\n    /**\n     * Render in meta wrapper\n     */\n    renderListItemOptions?: (item: any) => React.ReactNode | null;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n    /**\n     * Value is an array of strings. But can be undefined.\n     */\n    value?: MultiAutoCompletePropsValue;\n}\n\ninterface MultiAutoCompleteState {\n    inputValue: string;\n    multipleSelectionPage: number;\n    multipleSelectionSearch: string;\n    reorderFormVisible: string;\n    reorderFormValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return <MaterialSpinner size={24} spinnerColor={\"#fa5723\"} spinnerWidth={2} visible />;\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    unique: boolean;\n}\n\ninterface OptionsListProps {\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\ninterface AssignedValueAfterClearing {\n    set: boolean;\n    selection: string | null;\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ getMenuProps, children }) => {\n    return (\n        <Elevation z={1}>\n            <ul\n                className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nexport class MultiAutoComplete extends React.Component<\n    MultiAutoCompleteProps,\n    MultiAutoCompleteState\n> {\n    static defaultProps: Partial<MultiAutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        unique: true,\n        options: [],\n        useSimpleValues: false,\n        useMultipleSelectionList: false,\n        /**\n         * We cast this as MultiAutoComplete because renderItem() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as MultiAutoComplete).props)}\n                </Typography>\n            );\n        },\n        /**\n         * We cast this as MultiAutoComplete because renderListItemLabel() is executed via .call() where this is MultiAutoComplete instance.\n         */\n        renderListItemLabel(item: any) {\n            return getOptionText(item, (this as unknown as MultiAutoComplete).props);\n        }\n    };\n\n    public override state: MultiAutoCompleteState = {\n        inputValue: \"\",\n        multipleSelectionPage: 0,\n        multipleSelectionSearch: \"\",\n        reorderFormVisible: \"\",\n        reorderFormValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    private downshift = React.createRef<any>();\n\n    private assignedValueAfterClearing: AssignedValueAfterClearing = {\n        set: false,\n        selection: null\n    };\n\n    setMultipleSelectionPage = (multipleSelectionPage: number): void => {\n        this.setState({ multipleSelectionPage });\n    };\n\n    setMultipleSelectionSearch = (multipleSelectionSearch: string): void => {\n        this.setState({ multipleSelectionSearch });\n    };\n\n    getOptions() {\n        const { unique, value, allowFreeInput, useSimpleValues, options } = this.props;\n\n        const values = Array.isArray(value) ? [...value] : [];\n\n        const filtered = [...options];\n\n        // If free input is allowed, prepend typed value to the list.\n        if (allowFreeInput && this.state.inputValue) {\n            if (useSimpleValues) {\n                const existingValue = filtered.includes(this.state.inputValue);\n                if (!existingValue) {\n                    filtered.unshift(this.state.inputValue);\n                }\n            } else {\n                const existingValue = filtered.find(\n                    item => this.state.inputValue === getOptionText(item, this.props)\n                );\n                if (!existingValue) {\n                    filtered.unshift({ [this.props.textProp]: this.state.inputValue });\n                }\n            }\n        }\n\n        return filtered.filter(item => {\n            // We need to filter received options.\n            // 1) If \"unique\" prop was passed, we don't want to show already picked options again.\n            if (unique) {\n                if (Array.isArray(values)) {\n                    if (\n                        values.find(\n                            value =>\n                                getOptionValue(value, this.props) ===\n                                getOptionValue(item, this.props)\n                        )\n                    ) {\n                        return false;\n                    }\n                }\n            }\n\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\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions(params: RenderOptionsParams) {\n        const { options, isOpen, highlightedIndex, getMenuProps, getItemProps } = params;\n        if (!isOpen) {\n            return null;\n        }\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 getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        if (!options.length) {\n            return (\n                <Elevation z={1}>\n                    <ul\n                        className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                        {...getMenuProps()}\n                    >\n                        <li>\n                            <Typography use={\"body2\"}>No results.</Typography>\n                            {this.props.noResultFound}\n                        </li>\n                    </ul>\n                </Elevation>\n            );\n        }\n\n        const { renderItem } = this.props;\n        return (\n            <Elevation z={1}>\n                <ul\n                    className={classNames(\"multi-autocomplete__options-list\", listStyles)}\n                    {...getMenuProps()}\n                >\n                    {options.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                        // Render the item.\n                        return (\n                            <li\n                                key={itemValue + index}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classNames(itemClassNames)\n                                })}\n                            >\n                                {renderItem.call(this, item, index)}\n                            </li>\n                        );\n                    })}\n                </ul>\n            </Elevation>\n        );\n    }\n\n    paginateMultipleSelection() {\n        const { value } = this.props;\n        const limit = 10;\n        let page = this.state.multipleSelectionPage;\n        const search = this.state.multipleSelectionSearch;\n\n        // Assign a real index, so that later when we press delete, we know what is the actual index we're deleting.\n        let data = Array.isArray(value)\n            ? value.map((option, index) => {\n                  return { option, index };\n              })\n            : [];\n\n        if (search) {\n            data = data.filter(item => {\n                return getOptionText(item.option, this.props)\n                    .toLowerCase()\n                    .includes(search.toLowerCase());\n            });\n        }\n\n        const lastPage = Math.ceil(data.length / limit);\n        const totalCount = data.length;\n\n        page = page || lastPage;\n        data = data.slice((page - 1) * limit, page * limit);\n\n        let from = 0;\n        let to = 0;\n        if (data.length) {\n            from = (page - 1) * limit + 1;\n            to = from + (data.length - 1);\n        }\n\n        const meta = {\n            hasData: data.length > 0,\n            totalCount,\n            from,\n            to,\n            page: page,\n            lastPage,\n            limit,\n            hasPrevious: page > 1,\n            hasNext: page < lastPage\n        };\n\n        return { data, meta };\n    }\n\n    /**\n     * Once added, items can also be removed by clicking on the ✕ icon. This is the method that is responsible for\n     * rendering selected items (we are using already existing \"Chips\" component).\n     */\n    public renderMultipleSelection() {\n        const {\n            value,\n            onChange,\n            disabled,\n            useMultipleSelectionList,\n            description,\n            renderListItemLabel,\n            renderListItemOptions\n        } = this.props;\n\n        if (useMultipleSelectionList) {\n            const { data, meta } = this.paginateMultipleSelection();\n\n            return (\n                <>\n                    <div className={style.pagination.bar}>\n                        <div>\n                            <Input\n                                className={style.pagination.searchInput}\n                                placeholder={\"Search selected...\"}\n                                value={this.state.multipleSelectionSearch}\n                                onChange={value => {\n                                    this.setMultipleSelectionSearch(value);\n                                    this.setMultipleSelectionPage(value ? 1 : 0);\n                                }}\n                            />\n                        </div>\n\n                        <div className={style.pagination.pages}>\n                            <div className={meta.hasData ? \"\" : style.pagination.secondaryText}>\n                                {meta.from} - {meta.to} of {meta.totalCount}\n                            </div>\n                            <div>\n                                <IconButton\n                                    icon={<PrevAllIcon />}\n                                    disabled={!meta.hasData || meta.page === 1}\n                                    onClick={() => this.setMultipleSelectionPage(1)}\n                                />\n                                <IconButton\n                                    icon={<PrevIcon />}\n                                    disabled={!meta.hasData || !meta.hasPrevious}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page - 1)}\n                                />\n                                <IconButton\n                                    icon={<NextIcon />}\n                                    disabled={!meta.hasData || !meta.hasNext}\n                                    onClick={() => this.setMultipleSelectionPage(meta.page + 1)}\n                                />\n                                <IconButton\n                                    icon={<NextAllIcon />}\n                                    disabled={!meta.hasData || meta.page === meta.lastPage}\n                                    onClick={() => this.setMultipleSelectionPage(meta.lastPage)}\n                                />\n                            </div>\n                        </div>\n                    </div>\n\n                    <List className={style.pagination.list}>\n                        {meta.hasData ? (\n                            data.map((item, index) => {\n                                const key = `${getOptionValue(item.option, this.props)}-${index}`;\n                                if (this.state.reorderFormVisible === key) {\n                                    return (\n                                        <ListItem key={key}>\n                                            <ListItemGraphic>\n                                                <IconButton disabled icon={<ReorderIcon />} />\n                                            </ListItemGraphic>\n                                            <Input\n                                                value={this.state.reorderFormValue}\n                                                onKeyDown={(e: any) => {\n                                                    const key = e.key;\n                                                    if (key !== \"Escape\" && key !== \"Enter\") {\n                                                        return;\n                                                    }\n\n                                                    if (key === \"Enter\") {\n                                                        // Reorder the item.\n                                                        const newValue = [\n                                                            ...(value as SelectionItem[])\n                                                        ];\n                                                        newValue.splice(\n                                                            e.target.value - 1,\n                                                            0,\n                                                            newValue.splice(item.index, 1)[0]\n                                                        );\n\n                                                        if (onChange) {\n                                                            onChange(newValue);\n                                                        }\n                                                    }\n\n                                                    this.setState({\n                                                        reorderFormVisible: \"\",\n                                                        reorderFormValue: \"\"\n                                                    });\n                                                }}\n                                                onChange={value =>\n                                                    this.setState({ reorderFormValue: value })\n                                                }\n                                                type={\"number\"}\n                                                autoFocus\n                                                className={style.pagination.searchInput}\n                                                placeholder={\n                                                    \"Type a new order number and press Enter, or press Esc to cancel.\"\n                                                }\n                                            />\n                                            <ListItemMeta>\n                                                <IconButton icon={<DeleteIcon />} disabled />\n                                            </ListItemMeta>\n                                        </ListItem>\n                                    );\n                                }\n\n                                return (\n                                    <ListItem key={key}>\n                                        <ListItemGraphic>\n                                            <IconButton\n                                                icon={<ReorderIcon />}\n                                                onClick={() => {\n                                                    this.setState({ reorderFormVisible: key });\n                                                }}\n                                            />\n                                        </ListItemGraphic>\n                                        <div\n                                            style={{\n                                                color: \"var(--mdc-theme-text-secondary-on-background)\",\n                                                marginRight: 8,\n                                                minWidth: 32\n                                            }}\n                                        >\n                                            {item.index + 1}.\n                                        </div>{\" \"}\n                                        {renderListItemLabel &&\n                                            renderListItemLabel.call(this, item.option)}\n                                        <ListItemMeta className={listItemMetaClassName}>\n                                            {renderListItemOptions &&\n                                                renderListItemOptions.call(this, item.option)}\n                                            <IconButton\n                                                icon={<DeleteIcon />}\n                                                className={iconButtonClassName}\n                                                onClick={() => {\n                                                    if (!onChange) {\n                                                        return;\n                                                    }\n                                                    onChange([\n                                                        ...(value as SelectionItem[]).slice(\n                                                            0,\n                                                            item.index\n                                                        ),\n                                                        ...(value as SelectionItem[]).slice(\n                                                            item.index + 1\n                                                        )\n                                                    ]);\n                                                }}\n                                            />\n                                        </ListItemMeta>\n                                    </ListItem>\n                                );\n                            })\n                        ) : (\n                            <ListItem>\n                                <span className={style.pagination.secondaryText}>\n                                    Nothing to show.\n                                </span>\n                            </ListItem>\n                        )}\n                    </List>\n                    <div>\n                        <FormElementMessage>{description}</FormElementMessage>\n                    </div>\n                </>\n            );\n        }\n\n        const hasItems = Array.isArray(value) && value.length;\n        if (!hasItems) {\n            return null;\n        }\n\n        return (\n            <Chips disabled={disabled}>\n                {(value as SelectionItem[]).map((item, index) => (\n                    <Chip\n                        label={getOptionText(item, this.props)}\n                        key={`${getOptionValue(item, this.props)}-${index}`}\n                        trailingIcon={<BaselineCloseIcon />}\n                        onRemove={() => {\n                            if (!onChange) {\n                                return;\n                            }\n                            onChange([\n                                ...(value as SelectionItem[]).slice(0, index),\n                                ...(value as SelectionItem[]).slice(index + 1)\n                            ]);\n                        }}\n                    />\n                ))}\n            </Chips>\n        );\n    }\n\n    public override render() {\n        const {\n            props,\n            props: {\n                // options: rawOptions,\n                // allowFreeInput,\n                // useSimpleValues,\n                unique,\n                value,\n                onChange,\n                // valueProp,\n                // textProp,\n                onInput,\n                validation = { isValid: null, message: null },\n                useMultipleSelectionList,\n                description,\n                ...otherInputProps\n            }\n        } = this;\n\n        const options = this.getOptions();\n\n        return (\n            <div className={classNames(autoCompleteStyle, props.className)}>\n                <Downshift\n                    defaultSelectedItem={null}\n                    // @ts-ignore there is no className on Downshift\n                    className={autoCompleteStyle}\n                    itemToString={item => item && getOptionText(item, props)}\n                    ref={this.downshift}\n                    onChange={selection => {\n                        if (!this.assignedValueAfterClearing.set) {\n                            this.assignedValueAfterClearing = {\n                                set: true,\n                                selection\n                            };\n                            this.downshift.current.clearSelection();\n                            this.setMultipleSelectionPage(0);\n                            return;\n                        }\n\n                        if (this.assignedValueAfterClearing.set) {\n                            this.setState({ inputValue: \"\" });\n                            this.assignedValueAfterClearing.set = false;\n                            if (Array.isArray(value)) {\n                                onChange &&\n                                    onChange([...value, this.assignedValueAfterClearing.selection]);\n                            } else {\n                                onChange && onChange([this.assignedValueAfterClearing.selection]);\n                            }\n                        }\n                    }}\n                >\n                    {/* \"getInputProps\" and \"openMenu\" are not needed in renderOptions method. */}\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n\n                                    // Only pass description if not using \"useMultipleSelectionList\".\n                                    description: useMultipleSelectionList ? null : description,\n                                    rawOnChange: true,\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    onChange: e => e,\n                                    onBlur: e => e,\n                                    onKeyUp: (e: any) => {\n                                        const inputValue = e.target.value || \"\";\n\n                                        // Set current input value into state and trigger onInput if different.\n                                        if (inputValue !== this.state.inputValue) {\n                                            this.setState({ inputValue }, () => {\n                                                onInput && onInput(inputValue);\n                                            });\n                                        }\n                                    },\n                                    onFocus: e => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(e);\n                                    }\n                                })}\n                            />\n                            {this.renderOptions({ ...rest, unique, options })}\n                            {this.renderMultipleSelection()}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n"]}

package/Checkbox/CheckboxGroup.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormComponentProps } from "../types";
-interface ChildrenRenderProp {
+export interface ChildrenRenderProp {
     onChange: (id: string | number) => () => void;
     getValue: (id: string | number) => boolean;
 }

package/Checkbox/CheckboxGroup.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -35,7 +36,7 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
       }, label), this.props.children({
         onChange: function onChange(value) {
           return function () {
-            var values = Array.isArray(_this.props.value) ? _this.props.value : [];
+            var values = Array.isArray(_this.props.value) ? _toConsumableArray(_this.props.value) : [];
             var index = values.indexOf(value);
 
             if (index > -1) {

package/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxGroup.tsx"],"names":["React","webinyCheckboxTitle","FormElementMessage","CheckboxGroup","props","description","label","validation","isValid","message","children","onChange","value","values","Array","isArray","index","indexOf","splice","push","getValue","id","includes","Component"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,mBAAT;AACA,SAASC,kBAAT;;IAkBMC,a;;;;;;;;;;;;;WACF,kBAAyB;AAAA;;AACrB,wBAA8E,KAAKC,KAAnF;AAAA,UAAQC,WAAR,eAAQA,WAAR;AAAA,UAAqBC,KAArB,eAAqBA,KAArB;AAAA,8CAA4BC,UAA5B;AAAA,UAA4BA,UAA5B,sCAAyC;AAAEC,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,OAAO,EAAE;AAA1B,OAAzC;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKH,KAAK,iBACF;AACI,QAAA,SAAS,EACL,uEACAL;AAHR,SAMKK,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWM,QAAX,CAAoB;AACjBC,QAAAA,QAAQ,EAAE,kBAAAC,KAAK,EAAI;AACf,iBAAO,YAAM;AACT,gBAAMC,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,IAAkC,KAAI,CAACR,KAAL,CAAWQ,KAA7C,GAAqD,EAApE;AACA,gBAAMI,KAAK,GAAGH,MAAM,CAACI,OAAP,CAAeL,KAAf,CAAd;;AACA,gBAAII,KAAK,GAAG,CAAC,CAAb,EAAgB;AACZH,cAAAA,MAAM,CAACK,MAAP,CAAcF,KAAd,EAAqB,CAArB;AACH,aAFD,MAEO;AACHH,cAAAA,MAAM,CAACM,IAAP,CAAYP,KAAZ;AACH;;AAED,YAAA,KAAI,CAACR,KAAL,CAAWO,QAAX,IAAuB,KAAI,CAACP,KAAL,CAAWO,QAAX,CAAoBE,MAApB,CAAvB;AACH,WAVD;AAWH,SAbgB;AAcjBO,QAAAA,QAAQ,EAAE,kBAAAC,EAAE,EAAI;AACZ,cAAMR,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,IAAkC,KAAI,CAACR,KAAL,CAAWQ,KAA7C,GAAqD,EAApE;AACA,iBAAOC,MAAM,CAACS,QAAP,CAAgBD,EAAhB,CAAP;AACH;AAjBgB,OAApB,CAZL,EAgCKd,UAAU,CAACC,OAAX,KAAuB,KAAvB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BD,UAAU,CAACE,OAAtC,CAjCR,EAoCKF,UAAU,CAACC,OAAX,KAAuB,KAAvB,IAAgCH,WAAhC,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CArCR,CADJ;AA0CH;;;;EA9CuBL,KAAK,CAACuB,S;;AAiDlC,eAAepB,aAAf","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"./../types\";\nimport { webinyCheckboxTitle } from \"./Checkbox.styles\";\nimport { FormElementMessage } from \"../FormElementMessage\";\n\ninterface ChildrenRenderProp {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Checkbox components.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n};\n\nclass CheckboxGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation = { isValid: null, message: null } } = this.props;\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyCheckboxTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => {\n                        return () => {\n                            const values = Array.isArray(this.props.value) ? this.props.value : [];\n                            const index = values.indexOf(value);\n                            if (index > -1) {\n                                values.splice(index, 1);\n                            } else {\n                                values.push(value);\n                            }\n\n                            this.props.onChange && this.props.onChange(values);\n                        };\n                    },\n                    getValue: id => {\n                        const values = Array.isArray(this.props.value) ? this.props.value : [];\n                        return values.includes(id);\n                    }\n                })}\n\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default CheckboxGroup;\n"]}
+{"version":3,"sources":["CheckboxGroup.tsx"],"names":["React","webinyCheckboxTitle","FormElementMessage","CheckboxGroup","props","description","label","validation","isValid","message","children","onChange","value","values","Array","isArray","index","indexOf","splice","push","getValue","id","includes","Component"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,mBAAT;AACA,SAASC,kBAAT;;IAkBMC,a;;;;;;;;;;;;;WACF,kBAAyB;AAAA;;AACrB,wBAA8E,KAAKC,KAAnF;AAAA,UAAQC,WAAR,eAAQA,WAAR;AAAA,UAAqBC,KAArB,eAAqBA,KAArB;AAAA,8CAA4BC,UAA5B;AAAA,UAA4BA,UAA5B,sCAAyC;AAAEC,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,OAAO,EAAE;AAA1B,OAAzC;AAEA,0BACI,oBAAC,KAAD,CAAO,QAAP,QACKH,KAAK,iBACF;AACI,QAAA,SAAS,EACL,uEACAL;AAHR,SAMKK,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWM,QAAX,CAAoB;AACjBC,QAAAA,QAAQ,EAAE,kBAAAC,KAAK,EAAI;AACf,iBAAO,YAAM;AACT,gBAAMC,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,uBACL,KAAI,CAACR,KAAL,CAAWQ,KADN,IAET,EAFN;AAGA,gBAAMI,KAAK,GAAGH,MAAM,CAACI,OAAP,CAAeL,KAAf,CAAd;;AACA,gBAAII,KAAK,GAAG,CAAC,CAAb,EAAgB;AACZH,cAAAA,MAAM,CAACK,MAAP,CAAcF,KAAd,EAAqB,CAArB;AACH,aAFD,MAEO;AACHH,cAAAA,MAAM,CAACM,IAAP,CAAYP,KAAZ;AACH;;AAED,YAAA,KAAI,CAACR,KAAL,CAAWO,QAAX,IAAuB,KAAI,CAACP,KAAL,CAAWO,QAAX,CAAoBE,MAApB,CAAvB;AACH,WAZD;AAaH,SAfgB;AAgBjBO,QAAAA,QAAQ,EAAE,kBAAAC,EAAE,EAAI;AACZ,cAAMR,MAAM,GAAGC,KAAK,CAACC,OAAN,CAAc,KAAI,CAACX,KAAL,CAAWQ,KAAzB,IAAkC,KAAI,CAACR,KAAL,CAAWQ,KAA7C,GAAqD,EAApE;AACA,iBAAOC,MAAM,CAACS,QAAP,CAAgBD,EAAhB,CAAP;AACH;AAnBgB,OAApB,CAZL,EAkCKd,UAAU,CAACC,OAAX,KAAuB,KAAvB,iBACG,oBAAC,kBAAD;AAAoB,QAAA,KAAK;AAAzB,SAA2BD,UAAU,CAACE,OAAtC,CAnCR,EAsCKF,UAAU,CAACC,OAAX,KAAuB,KAAvB,IAAgCH,WAAhC,iBACG,oBAAC,kBAAD,QAAqBA,WAArB,CAvCR,CADJ;AA4CH;;;;EAhDuBL,KAAK,CAACuB,S;;AAmDlC,eAAepB,aAAf","sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"./../types\";\nimport { webinyCheckboxTitle } from \"./Checkbox.styles\";\nimport { FormElementMessage } from \"../FormElementMessage\";\n\nexport interface ChildrenRenderProp {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Checkbox components.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n};\n\nclass CheckboxGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation = { isValid: null, message: null } } = this.props;\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyCheckboxTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => {\n                        return () => {\n                            const values = Array.isArray(this.props.value)\n                                ? [...this.props.value]\n                                : [];\n                            const index = values.indexOf(value);\n                            if (index > -1) {\n                                values.splice(index, 1);\n                            } else {\n                                values.push(value);\n                            }\n\n                            this.props.onChange && this.props.onChange(values);\n                        };\n                    },\n                    getValue: id => {\n                        const values = Array.isArray(this.props.value) ? this.props.value : [];\n                        return values.includes(id);\n                    }\n                })}\n\n                {validation.isValid === false && (\n                    <FormElementMessage error>{validation.message}</FormElementMessage>\n                )}\n\n                {validation.isValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default CheckboxGroup;\n"]}

package/ImageUpload/styled.d.ts

@@ -4,13 +4,13 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "key" | "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/List/DataList/DataList.d.ts

@@ -28,6 +28,7 @@ interface DataListProps {
     search?: React.ReactElement;
     modalOverlay?: React.ReactElement;
     modalOverlayAction?: React.ReactElement;
+    subHeader?: React.ReactElement;
     meta?: Record<string, any> | null;
     setPage?: ((page: string) => void) | null;
     setPerPage?: ((page: string) => void) | null;

package/List/DataList/DataList.js

@@ -262,18 +262,20 @@ export var DataList = function DataList(props) {
   }
 
   var showOptions = props.showOptions || {};
+  var listHeaderActionsCellSpan = props.actions ? 7 : 0;
+  var listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;
   return /*#__PURE__*/React.createElement(DataListModalOverlayProvider, null, /*#__PURE__*/React.createElement(ListContainer, {
     className: "webiny-data-list",
     "data-testid": "ui.list.data-list"
   }, (props.title || props.actions) && /*#__PURE__*/React.createElement(Grid, {
     className: listHeader
   }, /*#__PURE__*/React.createElement(Cell, {
-    span: 5,
+    span: listHeaderTitleCellSpan,
     className: listTitle
   }, /*#__PURE__*/React.createElement(Typography, {
     use: "headline5"
-  }, props.title)), /*#__PURE__*/React.createElement(Cell, {
-    span: 7,
+  }, props.title)), props.actions && /*#__PURE__*/React.createElement(Cell, {
+    span: listHeaderActionsCellSpan,
     className: listActions
   }, props.actions)), Object.keys(showOptions).length > 0 && /*#__PURE__*/React.createElement(Grid, {
     className: listSubHeader
@@ -284,7 +286,7 @@ export var DataList = function DataList(props) {
     }
   }, /*#__PURE__*/React.createElement(MultiSelectAll, props), showOptions.refresh && /*#__PURE__*/React.createElement(RefreshButton, props), showOptions.pagination && /*#__PURE__*/React.createElement(Pagination, props), showOptions.sorters && /*#__PURE__*/React.createElement(Sorters, props), showOptions.filters && /*#__PURE__*/React.createElement(Filters, props), props.modalOverlayAction ? /*#__PURE__*/React.createElement(ListHeaderItem, null, props.modalOverlayAction) : null, /*#__PURE__*/React.createElement(MultiSelectActions, props))), /*#__PURE__*/React.createElement("div", {
     className: classNames(dataListContent, "webiny-data-list__content")
-  }, render, props.modalOverlay)));
+  }, props.subHeader, render, props.modalOverlay)));
 };
 DataList.defaultProps = {
   children: null,
@@ -320,6 +322,6 @@ DataList.defaultProps = {
 };
 export var ScrollList = function ScrollList(props) {
   return /*#__PURE__*/React.createElement(List, Object.assign({}, props, {
-    className: scrollList
+    className: classNames(props.className, scrollList)
   }), props.children);
 };

package/List/DataList/DataList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DataList.tsx"],"names":["React","styled","classNames","Loader","NoData","Typography","css","noop","isEmpty","Checkbox","Menu","MenuItem","Grid","Cell","RefreshIcon","SortIcon","FilterIcon","PreviousPageIcon","NextPageIcon","OptionsIcon","List","DataListModalOverlayProvider","ListContainer","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","listHeader","color","listSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","listTitle","listActions","scrollList","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","MultiSelectActions","RefreshButton","refresh","Sorters","sorters","map","sorter","label","setSorters","value","Filters","filters","Pagination","pagination","setNextPage","disabled","hasPreviousPage","setPreviousPage","hasNextPage","Array","isArray","perPageOptions","setPerPage","perPage","Search","search","cloneElement","DataList","render","loading","loader","noData","ch","children","showOptions","title","actions","Object","keys","length","justifySelf","modalOverlayAction","modalOverlay","defaultProps","meta","setPage","ScrollList"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Loader from \"./Loader\";\nimport NoData from \"./NoData\";\nimport { Typography } from \"~/Typography\";\nimport { css } from \"emotion\";\nimport noop from \"lodash/noop\";\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"../../Menu\";\nimport { Grid, Cell } from \"../../Grid\";\n\nimport {\n    RefreshIcon,\n    SortIcon,\n    FilterIcon,\n    PreviousPageIcon,\n    NextPageIcon,\n    OptionsIcon\n} from \"./icons\";\nimport { List, ListItem, ListProps } from \"..\";\nimport { DataListModalOverlayProvider } from \"./DataListModalOverlay\";\nimport { PaginationProp, SortersProp } from \"./types\";\n\nconst ListContainer = styled(\"div\")({\n    position: \"relative\",\n    height: \"100%\",\n    \".mdc-list\": {\n        paddingBottom: 0,\n        paddingTop: 0\n    },\n    \".mdc-list-item\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 20px 10px 20px\",\n        height: \"auto\",\n        minHeight: 40,\n        \".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline\": {\n            display: \"block\"\n        },\n        \".mdc-list-item__graphic\": {\n            marginRight: 20\n        },\n        \".mdc-list-item__text\": {\n            width: \"100%\",\n            margin: \"-20px 0\",\n            padding: \"20px 0\"\n        },\n        \".mdc-list-item__meta\": {\n            alignItems: \"center\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            flexDirection: \"column\",\n            position: \"relative\",\n            padding: \"5px 0\",\n            boxSizing: \"border-box\",\n            height: \"100%\",\n            whiteSpace: \"nowrap\",\n            marginTop: -10,\n            marginBottom: -10,\n            \".webiny-list-actions\": {\n                display: \"none\"\n            },\n            \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                //position: 'absolute',\n                width: \"100%\",\n                textAlign: \"right\"\n            },\n            \".webiny-list-top-caption\": {\n                marginBottom: 20\n            }\n        },\n        \"&:hover\": {\n            \".mdc-list-item__meta\": {\n                \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                    display: \"none\"\n                },\n                \".webiny-list-actions\": {\n                    display: \"flex\",\n                    height: \"100%\",\n                    alignItems: \"center\"\n                }\n            }\n        }\n    }\n});\n\nconst listHeader = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    width: \"100%\"\n});\n\nconst listSubHeader = css({\n    width: \"100%\",\n    \"&.mdc-layout-grid\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 24px 10px 12px\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\nconst ListHeaderItem = styled(\"div\")({\n    display: \"inline-block\",\n    verticalAlign: \"middle\",\n    \"&.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst listTitle = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst listActions = css({\n    textAlign: \"right\"\n});\n\nconst scrollList = css({\n    overflow: \"auto\",\n    height: \"calc(100vh - 235px)\"\n});\n\nconst dataListContent = css({\n    position: \"relative\",\n    height: \"100%\",\n    overflow: \"auto\"\n});\n\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\n    // Pass a function to take full control of list render.\n    children?: ((props: any) => React.ReactNode) | null;\n\n    // A title of paginated list.\n    title?: React.ReactNode;\n\n    // FormData that needs to be shown in the list.\n    data?: Record<string, any>[] | null;\n\n    // A callback that must refresh current view by repeating the previous query.\n    refresh?: (() => void) | null;\n\n    // If true, Loader component will be shown, disallowing any interaction.\n    loading?: boolean;\n\n    // Provide a custom loader. Shown while the content is loading.\n    loader?: React.ReactNode;\n\n    // Provide a custom no data component. Shown while there is no data to be shown.\n    noData?: React.ReactNode;\n\n    // Provide all pagination data, options and callbacks here.\n    pagination?: PaginationProp;\n\n    // Triggered once a sorter has been selected.\n    setSorters?: Function | null;\n\n    // Provide all sorters options and callbacks here.\n    sorters?: SortersProp | null;\n\n    // Provide actions that will be shown in the top right corner (eg. export or import actions).\n    actions?: React.ReactNode;\n\n    // Provide filters that will be shown in the top left corner (eg. filter by category or status).\n    filters?: React.ReactNode;\n\n    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).\n    multiSelectActions?: React.ReactNode;\n\n    // Provide callback that will be executed once user selects all list items.\n    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    showOptions?: {\n        refresh?: boolean;\n        pagination?: boolean;\n        filters?: boolean;\n        sorters?: boolean;\n        [key: string]: any;\n    };\n\n    // Provide search UI that will be shown in the top left corner.\n    search?: React.ReactElement;\n    // Provide simple modal UI that will be shown over the list content.\n    modalOverlay?: React.ReactElement;\n    // Provide an action element that handle toggling the \"Modal overlay\".\n    modalOverlayAction?: React.ReactElement;\n\n    meta?: Record<string, any> | null;\n\n    setPage?: ((page: string) => void) | null;\n\n    setPerPage?: ((page: string) => void) | null;\n\n    perPageOptions?: number[];\n}\n\nconst MultiSelectAll: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n    /**\n     * We can safely cast because we have defaults.\n     */\n    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =\n        props as Required<DataListProps>;\n\n    return (\n        <React.Fragment>\n            {typeof multiSelectAll === \"function\" && (\n                <ListHeaderItem>\n                    <Checkbox\n                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}\n                        value={isAllMultiSelected(data)}\n                        onClick={() => {\n                            multiSelectAll(!isAllMultiSelected(data), data);\n                        }}\n                    />\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst MultiSelectActions: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListProps> = props => {\n    const refresh = props.refresh;\n    if (!refresh) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <RefreshIcon onClick={() => refresh()} />\n        </ListHeaderItem>\n    );\n};\n\nconst Sorters: React.FC<DataListProps> = props => {\n    const sorters = props.sorters;\n    if (!sorters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<SortIcon />}>\n                {sorters.map(sorter => (\n                    <MenuItem\n                        key={sorter.label}\n                        onClick={() => {\n                            if (sorters && props.setSorters) {\n                                props.setSorters(sorter.value);\n                            }\n                        }}\n                    >\n                        {sorter.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Filters: React.FC<DataListProps> = props => {\n    const filters = props.filters;\n    if (!filters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<FilterIcon />}>{filters}</Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Pagination: React.FC<DataListProps> = props => {\n    const { pagination } = props;\n    if (!pagination) {\n        return null;\n    }\n\n    return (\n        <React.Fragment>\n            {pagination.setNextPage && (\n                <React.Fragment>\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasPreviousPage\n                        })}\n                    >\n                        <PreviousPageIcon\n                            onClick={() => {\n                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {\n                                    pagination.setPreviousPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasNextPage\n                        })}\n                    >\n                        <NextPageIcon\n                            onClick={() => {\n                                if (pagination.setNextPage && pagination.hasNextPage) {\n                                    pagination.setNextPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n                </React.Fragment>\n            )}\n\n            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (\n                <ListHeaderItem>\n                    <Menu handle={<OptionsIcon />}>\n                        {pagination.setPerPage &&\n                            pagination.perPageOptions.map(perPage => (\n                                <MenuItem\n                                    key={perPage}\n                                    onClick={() =>\n                                        pagination.setPerPage && pagination.setPerPage(perPage)\n                                    }\n                                >\n                                    {perPage}\n                                </MenuItem>\n                            ))}\n                    </Menu>\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst Search: React.FC<DataListProps> = props => {\n    if (!props.search) {\n        return null;\n    }\n    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;\n};\n\nexport const DataList: React.FC<DataListProps> = props => {\n    let render = null;\n\n    if (props.loading) {\n        render = props.loader;\n    } else if (isEmpty(props.data)) {\n        render = props.noData;\n    } else {\n        const ch = props.children;\n        render = typeof ch === \"function\" ? ch(props) : null;\n    }\n\n    const showOptions = props.showOptions || {};\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <Grid className={listHeader}>\n                        <Cell span={5} className={listTitle}>\n                            <Typography use=\"headline5\">{props.title}</Typography>\n                        </Cell>\n                        <Cell span={7} className={listActions}>\n                            {props.actions}\n                        </Cell>\n                    </Grid>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <Grid className={listSubHeader}>\n                        <Search {...props} />\n                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: \"end\" }}>\n                            <MultiSelectAll {...props} />\n                            {showOptions.refresh && <RefreshButton {...props} />}\n                            {showOptions.pagination && <Pagination {...props} />}\n                            {showOptions.sorters && <Sorters {...props} />}\n                            {showOptions.filters && <Filters {...props} />}\n                            {props.modalOverlayAction ? (\n                                <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>\n                            ) : null}\n                            <MultiSelectActions {...props} />\n                        </Cell>\n                    </Grid>\n                )}\n\n                <div className={classNames(dataListContent, \"webiny-data-list__content\")}>\n                    {render}\n                    {props.modalOverlay}\n                </div>\n            </ListContainer>\n        </DataListModalOverlayProvider>\n    );\n};\n\nDataList.defaultProps = {\n    children: null,\n    title: null,\n    data: null,\n    meta: null,\n    loading: false,\n    refresh: () => {\n        return void 0;\n    },\n    setPage: null,\n    setPerPage: null,\n    perPageOptions: [10, 25, 50],\n    filters: null,\n    sorters: null,\n    setSorters: null,\n    actions: null,\n    multiSelectAll: noop,\n    isAllMultiSelected: () => false,\n    isNoneMultiSelected: () => false,\n    loader: <Loader />,\n    noData: <NoData />,\n    showOptions: {\n        refresh: true,\n        pagination: true,\n        sorters: true,\n        filters: true\n    }\n};\n\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList: React.FC<ScrollListProps> = props => {\n    return (\n        <List {...props} className={scrollList}>\n            {props.children}\n        </List>\n    );\n};\n"]}
+{"version":3,"sources":["DataList.tsx"],"names":["React","styled","classNames","Loader","NoData","Typography","css","noop","isEmpty","Checkbox","Menu","MenuItem","Grid","Cell","RefreshIcon","SortIcon","FilterIcon","PreviousPageIcon","NextPageIcon","OptionsIcon","List","DataListModalOverlayProvider","ListContainer","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","listHeader","color","listSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","listTitle","listActions","scrollList","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","MultiSelectActions","RefreshButton","refresh","Sorters","sorters","map","sorter","label","setSorters","value","Filters","filters","Pagination","pagination","setNextPage","disabled","hasPreviousPage","setPreviousPage","hasNextPage","Array","isArray","perPageOptions","setPerPage","perPage","Search","search","cloneElement","DataList","render","loading","loader","noData","ch","children","showOptions","listHeaderActionsCellSpan","actions","listHeaderTitleCellSpan","title","Object","keys","length","justifySelf","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","ScrollList","className"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Loader from \"./Loader\";\nimport NoData from \"./NoData\";\nimport { Typography } from \"~/Typography\";\nimport { css } from \"emotion\";\nimport noop from \"lodash/noop\";\nimport isEmpty from \"lodash/isEmpty\";\n\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"../../Menu\";\nimport { Grid, Cell } from \"../../Grid\";\n\nimport {\n    RefreshIcon,\n    SortIcon,\n    FilterIcon,\n    PreviousPageIcon,\n    NextPageIcon,\n    OptionsIcon\n} from \"./icons\";\nimport { List, ListItem, ListProps } from \"..\";\nimport { DataListModalOverlayProvider } from \"./DataListModalOverlay\";\nimport { PaginationProp, SortersProp } from \"./types\";\n\nconst ListContainer = styled(\"div\")({\n    position: \"relative\",\n    height: \"100%\",\n    \".mdc-list\": {\n        paddingBottom: 0,\n        paddingTop: 0\n    },\n    \".mdc-list-item\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 20px 10px 20px\",\n        height: \"auto\",\n        minHeight: 40,\n        \".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline\": {\n            display: \"block\"\n        },\n        \".mdc-list-item__graphic\": {\n            marginRight: 20\n        },\n        \".mdc-list-item__text\": {\n            width: \"100%\",\n            margin: \"-20px 0\",\n            padding: \"20px 0\"\n        },\n        \".mdc-list-item__meta\": {\n            alignItems: \"center\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            flexDirection: \"column\",\n            position: \"relative\",\n            padding: \"5px 0\",\n            boxSizing: \"border-box\",\n            height: \"100%\",\n            whiteSpace: \"nowrap\",\n            marginTop: -10,\n            marginBottom: -10,\n            \".webiny-list-actions\": {\n                display: \"none\"\n            },\n            \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                //position: 'absolute',\n                width: \"100%\",\n                textAlign: \"right\"\n            },\n            \".webiny-list-top-caption\": {\n                marginBottom: 20\n            }\n        },\n        \"&:hover\": {\n            \".mdc-list-item__meta\": {\n                \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                    display: \"none\"\n                },\n                \".webiny-list-actions\": {\n                    display: \"flex\",\n                    height: \"100%\",\n                    alignItems: \"center\"\n                }\n            }\n        }\n    }\n});\n\nconst listHeader = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    width: \"100%\"\n});\n\nconst listSubHeader = css({\n    width: \"100%\",\n    \"&.mdc-layout-grid\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 24px 10px 12px\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\nconst ListHeaderItem = styled(\"div\")({\n    display: \"inline-block\",\n    verticalAlign: \"middle\",\n    \"&.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst listTitle = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst listActions = css({\n    textAlign: \"right\"\n});\n\nconst scrollList = css({\n    overflow: \"auto\",\n    height: \"calc(100vh - 235px)\"\n});\n\nconst dataListContent = css({\n    position: \"relative\",\n    height: \"100%\",\n    overflow: \"auto\"\n});\n\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\n    // Pass a function to take full control of list render.\n    children?: ((props: any) => React.ReactNode) | null;\n\n    // A title of paginated list.\n    title?: React.ReactNode;\n\n    // FormData that needs to be shown in the list.\n    data?: Record<string, any>[] | null;\n\n    // A callback that must refresh current view by repeating the previous query.\n    refresh?: (() => void) | null;\n\n    // If true, Loader component will be shown, disallowing any interaction.\n    loading?: boolean;\n\n    // Provide a custom loader. Shown while the content is loading.\n    loader?: React.ReactNode;\n\n    // Provide a custom no data component. Shown while there is no data to be shown.\n    noData?: React.ReactNode;\n\n    // Provide all pagination data, options and callbacks here.\n    pagination?: PaginationProp;\n\n    // Triggered once a sorter has been selected.\n    setSorters?: Function | null;\n\n    // Provide all sorters options and callbacks here.\n    sorters?: SortersProp | null;\n\n    // Provide actions that will be shown in the top right corner (eg. export or import actions).\n    actions?: React.ReactNode;\n\n    // Provide filters that will be shown in the top left corner (eg. filter by category or status).\n    filters?: React.ReactNode;\n\n    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).\n    multiSelectActions?: React.ReactNode;\n\n    // Provide callback that will be executed once user selects all list items.\n    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    showOptions?: {\n        refresh?: boolean;\n        pagination?: boolean;\n        filters?: boolean;\n        sorters?: boolean;\n        [key: string]: any;\n    };\n\n    // Provide search UI that will be shown in the top left corner.\n    search?: React.ReactElement;\n    // Provide simple modal UI that will be shown over the list content.\n    modalOverlay?: React.ReactElement;\n    // Provide an action element that handle toggling the \"Modal overlay\".\n    modalOverlayAction?: React.ReactElement;\n    // Provide additional UI for list sub-header.\n    subHeader?: React.ReactElement;\n\n    meta?: Record<string, any> | null;\n\n    setPage?: ((page: string) => void) | null;\n\n    setPerPage?: ((page: string) => void) | null;\n\n    perPageOptions?: number[];\n}\n\nconst MultiSelectAll: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n    /**\n     * We can safely cast because we have defaults.\n     */\n    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =\n        props as Required<DataListProps>;\n\n    return (\n        <React.Fragment>\n            {typeof multiSelectAll === \"function\" && (\n                <ListHeaderItem>\n                    <Checkbox\n                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}\n                        value={isAllMultiSelected(data)}\n                        onClick={() => {\n                            multiSelectAll(!isAllMultiSelected(data), data);\n                        }}\n                    />\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst MultiSelectActions: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListProps> = props => {\n    const refresh = props.refresh;\n    if (!refresh) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <RefreshIcon onClick={() => refresh()} />\n        </ListHeaderItem>\n    );\n};\n\nconst Sorters: React.FC<DataListProps> = props => {\n    const sorters = props.sorters;\n    if (!sorters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<SortIcon />}>\n                {sorters.map(sorter => (\n                    <MenuItem\n                        key={sorter.label}\n                        onClick={() => {\n                            if (sorters && props.setSorters) {\n                                props.setSorters(sorter.value);\n                            }\n                        }}\n                    >\n                        {sorter.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Filters: React.FC<DataListProps> = props => {\n    const filters = props.filters;\n    if (!filters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<FilterIcon />}>{filters}</Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Pagination: React.FC<DataListProps> = props => {\n    const { pagination } = props;\n    if (!pagination) {\n        return null;\n    }\n\n    return (\n        <React.Fragment>\n            {pagination.setNextPage && (\n                <React.Fragment>\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasPreviousPage\n                        })}\n                    >\n                        <PreviousPageIcon\n                            onClick={() => {\n                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {\n                                    pagination.setPreviousPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasNextPage\n                        })}\n                    >\n                        <NextPageIcon\n                            onClick={() => {\n                                if (pagination.setNextPage && pagination.hasNextPage) {\n                                    pagination.setNextPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n                </React.Fragment>\n            )}\n\n            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (\n                <ListHeaderItem>\n                    <Menu handle={<OptionsIcon />}>\n                        {pagination.setPerPage &&\n                            pagination.perPageOptions.map(perPage => (\n                                <MenuItem\n                                    key={perPage}\n                                    onClick={() =>\n                                        pagination.setPerPage && pagination.setPerPage(perPage)\n                                    }\n                                >\n                                    {perPage}\n                                </MenuItem>\n                            ))}\n                    </Menu>\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst Search: React.FC<DataListProps> = props => {\n    if (!props.search) {\n        return null;\n    }\n    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;\n};\n\nexport const DataList: React.FC<DataListProps> = props => {\n    let render = null;\n\n    if (props.loading) {\n        render = props.loader;\n    } else if (isEmpty(props.data)) {\n        render = props.noData;\n    } else {\n        const ch = props.children;\n        render = typeof ch === \"function\" ? ch(props) : null;\n    }\n\n    const showOptions = props.showOptions || {};\n\n    const listHeaderActionsCellSpan = props.actions ? 7 : 0;\n    const listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <Grid className={listHeader}>\n                        <Cell span={listHeaderTitleCellSpan} className={listTitle}>\n                            <Typography use=\"headline5\">{props.title}</Typography>\n                        </Cell>\n                        {props.actions && (\n                            <Cell span={listHeaderActionsCellSpan} className={listActions}>\n                                {props.actions}\n                            </Cell>\n                        )}\n                    </Grid>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <Grid className={listSubHeader}>\n                        <Search {...props} />\n                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: \"end\" }}>\n                            <MultiSelectAll {...props} />\n                            {showOptions.refresh && <RefreshButton {...props} />}\n                            {showOptions.pagination && <Pagination {...props} />}\n                            {showOptions.sorters && <Sorters {...props} />}\n                            {showOptions.filters && <Filters {...props} />}\n                            {props.modalOverlayAction ? (\n                                <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>\n                            ) : null}\n                            <MultiSelectActions {...props} />\n                        </Cell>\n                    </Grid>\n                )}\n\n                <div className={classNames(dataListContent, \"webiny-data-list__content\")}>\n                    {props.subHeader}\n                    {render}\n                    {props.modalOverlay}\n                </div>\n            </ListContainer>\n        </DataListModalOverlayProvider>\n    );\n};\n\nDataList.defaultProps = {\n    children: null,\n    title: null,\n    data: null,\n    meta: null,\n    loading: false,\n    refresh: () => {\n        return void 0;\n    },\n    setPage: null,\n    setPerPage: null,\n    perPageOptions: [10, 25, 50],\n    filters: null,\n    sorters: null,\n    setSorters: null,\n    actions: null,\n    multiSelectAll: noop,\n    isAllMultiSelected: () => false,\n    isNoneMultiSelected: () => false,\n    loader: <Loader />,\n    noData: <NoData />,\n    showOptions: {\n        refresh: true,\n        pagination: true,\n        sorters: true,\n        filters: true\n    }\n};\n\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList: React.FC<ScrollListProps> = props => {\n    return (\n        <List {...props} className={classNames(props.className, scrollList)}>\n            {props.children}\n        </List>\n    );\n};\n"]}

package/RichTextEditor/RichTextEditor.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { OutputBlockData, OutputData, SanitizerConfig, ToolSettings } from "@editorjs/editorjs/types";
+import { FormComponentProps } from "@webiny/form";
 export interface OnReadyParams {
     editor: any;
     initialData: OutputData;
@@ -23,5 +24,7 @@ export interface RichTextEditorProps {
     label?: string;
     description?: string;
     disabled?: boolean;
+    validation?: FormComponentProps["validation"];
+    className?: string;
 }
 export declare const RichTextEditor: React.FC<RichTextEditorProps>;

package/RichTextEditor/RichTextEditor.js

@@ -132,12 +132,16 @@ export var RichTextEditor = function RichTextEditor(props) {
   }, []);
   var label = props.label,
       description = props.description,
-      disabled = props.disabled;
+      disabled = props.disabled,
+      validation = props.validation,
+      className = props.className;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classes.wrapper, _defineProperty({}, classes.disable, disabled))
+    className: classNames(classes.wrapper, className, _defineProperty({}, classes.disable, disabled))
   }, label && /*#__PURE__*/React.createElement("div", {
     className: classNames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
   }, label), /*#__PURE__*/React.createElement("div", {
     id: elementId.current
-  })), description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+  })), validation && validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+    error: true
+  }, validation.message), validation && validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };

package/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RichTextEditor.tsx"],"names":["React","Fragment","useEffect","useRef","shortid","EditorJS","FormElementMessage","css","classNames","classes","wrapper","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","generate","editorRef","value","context","onReady","nativeProps","initialData","blocks","current","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled"],"mappings":"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","sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: OutputBlockData[]) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: OutputBlockData[];\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled } = props;\n\n    return (\n        <Fragment>\n            <div className={classNames(classes.wrapper, { [classes.disable]: disabled })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {description && <FormElementMessage>{description}</FormElementMessage>}\n        </Fragment>\n    );\n};\n"]}
+{"version":3,"sources":["RichTextEditor.tsx"],"names":["React","Fragment","useEffect","useRef","shortid","EditorJS","FormElementMessage","css","classNames","classes","wrapper","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","generate","editorRef","value","context","onReady","nativeProps","initialData","blocks","current","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled","validation","className","isValid","message"],"mappings":"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","sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormComponentProps } from \"@webiny/form\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: OutputBlockData[]) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: OutputBlockData[];\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n    validation?: FormComponentProps[\"validation\"];\n    className?: string;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled, validation, className } = props;\n\n    return (\n        <Fragment>\n            <div\n                className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}\n            >\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {validation && validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation && validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </Fragment>\n    );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "5.25.0",
+	"version": "5.25.1-beta.0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -14,8 +14,8 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.17.7",
-		"@editorjs/editorjs": "2.23.2",
+		"@babel/runtime": "7.16.7",
+		"@editorjs/editorjs": "2.22.3",
 		"@emotion/core": "10.3.1",
 		"@emotion/styled": "10.3.0",
 		"@material/base": "3.1.0",
@@ -91,11 +91,11 @@
 		"@types/react-custom-scrollbars": "^4.0.10",
 		"@types/react-transition-group": "^4.4.4",
 		"@types/shortid": "^0.0.29",
-		"@webiny/cli": "^5.25.0",
-		"@webiny/form": "^5.25.0",
-		"@webiny/project-utils": "^5.25.0",
-		"@webiny/storybook-utils": "^5.25.0",
-		"@webiny/validation": "^5.25.0",
+		"@webiny/cli": "^5.25.1-beta.0",
+		"@webiny/form": "^5.25.1-beta.0",
+		"@webiny/project-utils": "^5.25.1-beta.0",
+		"@webiny/storybook-utils": "^5.25.1-beta.0",
+		"@webiny/validation": "^5.25.1-beta.0",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -142,5 +142,5 @@
 			]
 		}
 	},
-	"gitHead": "4622d2aafbbecea051ab404859ced09a0a97434e"
+	"gitHead": "887c9678ec12921eb00edb033e9f2c1a13e35fa5"
 }

package/rmwc/base/code/utils/apply-passive.d.ts

@@ -3,6 +3,11 @@
  * Determine whether the current browser supports passive event listeners, and
  * if so, use them.
  */
-export declare function applyPassive(globalObj?: any, forceRefresh?: any): false | {
-    passive: boolean;
-};
+export declare function applyPassive(
+    globalObj?: any,
+    forceRefresh?: any
+):
+    | false
+    | {
+          passive: boolean;
+      };

package/rmwc/base/code/utils/deprecation.d.ts

@@ -3,4 +3,8 @@ export declare type DeprecateT = {
     [oldPropName: string]: string | [string, (value: any) => void];
 };
 export declare const deprecationWarning: (message: string) => void;
-export declare const handleDeprecations: (props: any, deprecate: DeprecateT, displayName: string) => any;
+export declare const handleDeprecations: (
+    props: any,
+    deprecate: DeprecateT,
+    displayName: string
+) => any;