@webiny/app-admin 0.0.0-unstable.99666aeb00 → 0.0.0-unstable.a9593f74dd

package/plugins/globalSearch/SearchBar.js

@@ -29,21 +29,13 @@ var _ = require("../..");
 /**
  * Package react-hotkeyz does not have types.
  */
-// @ts-ignore
+// @ts-expect-error
 // UI components
 // Icons
 // Local components
 var SearchBar = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SearchBar, _React$Component);
   var _super = (0, _createSuper2.default)(SearchBar);
-  /**
-   * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
-   */
-
-  /**
-   * At some point we must programmatically focus the input.
-   */
-
   /**
    * Let's check if current route is defined in one of the registered plugins.
    * If so, then check current route query for search term and set it as default value of search input.
@@ -69,7 +61,13 @@ var SearchBar = /*#__PURE__*/function (_React$Component) {
         current: undefined
       }
     });
+    /**
+     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "downshift", /*#__PURE__*/React.createRef());
+    /**
+     * At some point we must programmatically focus the input.
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "input", /*#__PURE__*/React.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenHotkey", function (e) {
       for (var i = 0; i < _this.state.plugins.hotKeys.length; i++) {
@@ -84,6 +82,11 @@ var SearchBar = /*#__PURE__*/function (_React$Component) {
       }
       _this.input.current.focus();
     });
+    /**
+     * Re-routes to given route (provided by the plugin) with needed search query params.
+     * It also manages previous and current search terms and automatically highlighted item in dropdown.
+     * @param plugin
+     */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "submitSearchTerm", function (plugin) {
       _this.setState(function (state) {
         var newState = (0, _dotPropImmutable.set)(state, "searchTerm.previous", state.searchTerm.current);
@@ -151,7 +154,7 @@ var SearchBar = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(_reactHotkeyz.Hotkeys, {
           zIndex: 10,
           keys: {
-            // @ts-ignore
+            // @ts-expect-error
             esc: function esc() {
               return document.activeElement.blur();
             },
@@ -188,7 +191,6 @@ var SearchBar = /*#__PURE__*/function (_React$Component) {
           className: (0, _classnames.default)("mdc-text-field__input", _styled.searchBarInput),
           ref: _this2.input,
           value: _this2.state.searchTerm.current,
-          // @ts-ignore
           onClick: openMenu,
           onBlur: function onBlur() {
             _this2.cancelSearchTerm();
@@ -222,4 +224,6 @@ var SearchBarContainer = function SearchBarContainer() {
   return /*#__PURE__*/React.createElement(SearchBar, routerProps);
 };
 var _default = (0, _.makeComposable)("SearchBarContainer", SearchBarContainer);
-exports.default = _default;
+exports.default = _default;
+
+//# sourceMappingURL=SearchBar.js.map

package/plugins/globalSearch/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["SearchBar","props","active","searchTerm","previous","current","plugins","list","byType","hotKeys","undefined","React","createRef","e","i","state","length","hotKey","preventOpen","preventDefault","input","focus","plugin","setState","newState","set","query","URLSearchParams","search","JSON","stringify","history","push","pathname","route","toString","find","p","location","parse","get","downshift","item","label","downshiftProps","isOpen","openMenu","closeMenu","getInputProps","width","esc","document","activeElement","blur","handleOpenHotkey","cancelSearchTerm","enter","setTimeout","selectedItem","submitSearchTerm","classnames","searchWrapper","icon","placeholder","className","searchBarInput","ref","value","onClick","onBlur","onFocus","onChange","target","Component","SearchBarContainer","routerProps","useRouter","makeComposable"],"sources":["SearchBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { set } from \"dot-prop-immutable\";\nimport { useRouter, UseRouter } from \"@webiny/react-router\";\nimport Downshift from \"downshift\";\nimport { plugins } from \"@webiny/plugins\";\nimport { AdminGlobalSearchPlugin, AdminGlobalSearchPreventHotkeyPlugin } from \"~/types\";\nimport classnames from \"classnames\";\n/**\n * Package react-hotkeyz does not have types.\n */\n// @ts-ignore\nimport { Hotkeys } from \"react-hotkeyz\";\n\n// UI components\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport SearchBarDropdown from \"./SearchBarDropdown\";\n\n// Icons\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\n\n// Local components\nimport {\n    SearchBarWrapper,\n    SearchBarInputWrapper,\n    SearchShortcut,\n    searchBarInput,\n    icon,\n    searchWrapper\n} from \"./styled\";\nimport { makeComposable } from \"~/index\";\n\ntype SearchBarProps = UseRouter;\n\nexport interface SearchBarState {\n    active: boolean;\n    searchTerm: { previous: string; current: string };\n    plugins: {\n        list: ReadonlyArray<AdminGlobalSearchPlugin>;\n        hotKeys: ReadonlyArray<AdminGlobalSearchPreventHotkeyPlugin>;\n        current?: AdminGlobalSearchPlugin;\n    };\n}\n\nclass SearchBar extends React.Component<SearchBarProps, SearchBarState> {\n    public override state: SearchBarState = {\n        active: false,\n        searchTerm: {\n            previous: \"\",\n            current: \"\"\n        },\n        plugins: {\n            // List of all registered \"admin-global-search\" plugins.\n            get list() {\n                return plugins.byType<AdminGlobalSearchPlugin>(\"admin-global-search\");\n            },\n            hotKeys: plugins.byType<AdminGlobalSearchPreventHotkeyPlugin>(\n                \"admin-global-search-prevent-hotkey\"\n            ),\n            // Current plugin - set by examining current route and its query params (on construct).\n            current: undefined\n        }\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    public readonly downshift: any = React.createRef();\n\n    /**\n     * At some point we must programmatically focus the input.\n     */\n    private readonly input = React.createRef<HTMLInputElement>();\n\n    /**\n     * Let's check if current route is defined in one of the registered plugins.\n     * If so, then check current route query for search term and set it as default value of search input.\n     * @param props\n     */\n    constructor(props: SearchBarProps) {\n        super(props);\n        this.state.plugins.current = this.state.plugins.list.find(\n            p => p.route === props.location.pathname\n        );\n\n        if (this.state.plugins.current) {\n            let search;\n            const query = new URLSearchParams(props.location.search);\n            try {\n                search = JSON.parse(query.get(\"search\") || \"\").query;\n            } catch (e) {\n                search = query.get(\"search\");\n            }\n\n            this.state.searchTerm.current = search || \"\";\n            this.state.searchTerm.previous = this.state.searchTerm.current;\n        }\n    }\n\n    private readonly handleOpenHotkey = (e: React.KeyboardEvent): void => {\n        for (let i = 0; i < this.state.plugins.hotKeys.length; i++) {\n            const hotKey = this.state.plugins.hotKeys[i];\n            if (hotKey.preventOpen(e)) {\n                return;\n            }\n        }\n\n        e.preventDefault();\n        if (!this.input.current) {\n            return;\n        }\n        this.input.current.focus();\n    };\n\n    /**\n     * Re-routes to given route (provided by the plugin) with needed search query params.\n     * It also manages previous and current search terms and automatically highlighted item in dropdown.\n     * @param plugin\n     */\n    public readonly submitSearchTerm = (plugin: AdminGlobalSearchPlugin): void => {\n        this.setState(\n            state => {\n                const newState = set(state, \"searchTerm.previous\", state.searchTerm.current);\n                return set(newState, \"plugins.current\", plugin) as any;\n            },\n            () => {\n                const query = new URLSearchParams();\n\n                if (this.state.searchTerm.current) {\n                    // If \"search\" key in the plugin was defined, it means SearchInput values were set. Otherwise,\n                    // we need to send the plain string into the \"search\" query param. This behavior was needed\n                    // eg. for pages, since Page entity doesn't use regular SearchInput type, but plain string.\n                    if (plugin.search) {\n                        query.set(\n                            \"search\",\n                            JSON.stringify({\n                                query: this.state.searchTerm.current,\n                                ...plugin.search\n                            })\n                        );\n                    } else {\n                        query.set(\"search\", this.state.searchTerm.current);\n                    }\n                }\n\n                this.props.history.push({\n                    pathname: plugin.route,\n                    search: query.toString()\n                });\n            }\n        );\n    };\n\n    private readonly cancelSearchTerm = (): void => {\n        this.setState(state => {\n            state.searchTerm.current = state.searchTerm.previous;\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Downshift ref={this.downshift} itemToString={item => item && item.label}>\n                {downshiftProps => {\n                    const { isOpen, openMenu, closeMenu, getInputProps } = downshiftProps;\n\n                    return (\n                        <div style={{ width: \"100%\" }}>\n                            <Hotkeys\n                                zIndex={10}\n                                keys={{\n                                    // @ts-ignore\n                                    esc: () => document.activeElement.blur(),\n                                    \"/\": this.handleOpenHotkey\n                                }}\n                            />\n\n                            <Hotkeys\n                                zIndex={11}\n                                disabled={!isOpen}\n                                keys={{\n                                    esc: () => {\n                                        this.cancelSearchTerm();\n                                        closeMenu();\n                                    },\n                                    enter: () =>\n                                        setTimeout(() => {\n                                            const { selectedItem } = this.downshift.current.state;\n                                            if (selectedItem) {\n                                                closeMenu();\n                                                this.submitSearchTerm(selectedItem);\n                                            }\n                                        })\n                                }}\n                            />\n\n                            <Elevation\n                                className={classnames(searchWrapper, { active: this.state.active })}\n                                z={0}\n                            >\n                                <SearchBarWrapper>\n                                    <SearchBarInputWrapper>\n                                        <Icon className={icon} icon={<SearchIcon />} />\n\n                                        <React.Fragment>\n                                            <input\n                                                {...getInputProps({\n                                                    placeholder: \"Search...\",\n                                                    className: classnames(\n                                                        \"mdc-text-field__input\",\n                                                        searchBarInput\n                                                    ),\n                                                    ref: this.input,\n                                                    value: this.state.searchTerm.current,\n                                                    // @ts-ignore\n                                                    onClick: openMenu,\n                                                    onBlur: () => {\n                                                        this.cancelSearchTerm();\n                                                        this.setState({ active: false });\n                                                    },\n                                                    onFocus: () => {\n                                                        this.setState({ active: true });\n                                                        openMenu();\n                                                    },\n                                                    onChange: (\n                                                        e: React.ChangeEvent<HTMLInputElement>\n                                                    ) => {\n                                                        const value = e.target.value || \"\";\n                                                        this.setState(state => {\n                                                            state.searchTerm.current = value;\n                                                            return state;\n                                                        });\n                                                    }\n                                                })}\n                                            />\n                                        </React.Fragment>\n\n                                        <SearchShortcut>/</SearchShortcut>\n                                    </SearchBarInputWrapper>\n                                </SearchBarWrapper>\n                                {isOpen && <SearchBarDropdown context={this} />}\n                            </Elevation>\n                        </div>\n                    );\n                }}\n            </Downshift>\n        );\n    }\n}\n\nconst SearchBarContainer: React.FC = () => {\n    const routerProps = useRouter();\n\n    return <SearchBar {...routerProps} />;\n};\n\nexport default makeComposable(\"SearchBarContainer\", SearchBarContainer);\n"],"mappings":"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"}
+{"version":3,"names":["React","_interopRequireWildcard","require","_dotPropImmutable","_reactRouter","_downshift","_interopRequireDefault","_plugins","_classnames","_reactHotkeyz","_Icon","_Elevation","_SearchBarDropdown","_search","_styled","_","SearchBar","_React$Component","_inherits2","default","_super","_createSuper2","props","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","active","searchTerm","previous","current","plugins","list","byType","hotKeys","undefined","createRef","e","i","state","length","hotKey","preventOpen","preventDefault","input","focus","plugin","setState","newState","set","query","URLSearchParams","search","JSON","stringify","_objectSpread2","history","push","pathname","route","toString","find","p","location","parse","get","_createClass2","key","value","render","_this2","createElement","ref","downshift","itemToString","item","label","downshiftProps","isOpen","openMenu","closeMenu","getInputProps","style","width","Hotkeys","zIndex","keys","esc","document","activeElement","blur","handleOpenHotkey","disabled","cancelSearchTerm","enter","setTimeout","selectedItem","submitSearchTerm","Elevation","className","classnames","searchWrapper","z","SearchBarWrapper","SearchBarInputWrapper","Icon","icon","ReactComponent","Fragment","placeholder","searchBarInput","onClick","onBlur","onFocus","onChange","target","SearchShortcut","context","Component","SearchBarContainer","routerProps","useRouter","_default","makeComposable","exports"],"sources":["SearchBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { set } from \"dot-prop-immutable\";\nimport { useRouter, UseRouter } from \"@webiny/react-router\";\nimport Downshift from \"downshift\";\nimport { plugins } from \"@webiny/plugins\";\nimport { AdminGlobalSearchPlugin, AdminGlobalSearchPreventHotkeyPlugin } from \"~/types\";\nimport classnames from \"classnames\";\n/**\n * Package react-hotkeyz does not have types.\n */\n// @ts-expect-error\nimport { Hotkeys } from \"react-hotkeyz\";\n\n// UI components\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport SearchBarDropdown from \"./SearchBarDropdown\";\n\n// Icons\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\n\n// Local components\nimport {\n    icon,\n    searchBarInput,\n    SearchBarInputWrapper,\n    SearchBarWrapper,\n    SearchShortcut,\n    searchWrapper\n} from \"./styled\";\nimport { makeComposable } from \"~/index\";\n\ntype SearchBarProps = UseRouter;\n\nexport interface SearchBarState {\n    active: boolean;\n    searchTerm: { previous: string; current: string };\n    plugins: {\n        list: ReadonlyArray<AdminGlobalSearchPlugin>;\n        hotKeys: ReadonlyArray<AdminGlobalSearchPreventHotkeyPlugin>;\n        current?: AdminGlobalSearchPlugin;\n    };\n}\n\nclass SearchBar extends React.Component<SearchBarProps, SearchBarState> {\n    public override state: SearchBarState = {\n        active: false,\n        searchTerm: {\n            previous: \"\",\n            current: \"\"\n        },\n        plugins: {\n            // List of all registered \"admin-global-search\" plugins.\n            get list() {\n                return plugins.byType<AdminGlobalSearchPlugin>(\"admin-global-search\");\n            },\n            hotKeys: plugins.byType<AdminGlobalSearchPreventHotkeyPlugin>(\n                \"admin-global-search-prevent-hotkey\"\n            ),\n            // Current plugin - set by examining current route and its query params (on construct).\n            current: undefined\n        }\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    public readonly downshift: any = React.createRef();\n\n    /**\n     * At some point we must programmatically focus the input.\n     */\n    private readonly input = React.createRef<HTMLInputElement>();\n\n    /**\n     * Let's check if current route is defined in one of the registered plugins.\n     * If so, then check current route query for search term and set it as default value of search input.\n     * @param props\n     */\n    constructor(props: SearchBarProps) {\n        super(props);\n        this.state.plugins.current = this.state.plugins.list.find(\n            p => p.route === props.location.pathname\n        );\n\n        if (this.state.plugins.current) {\n            let search;\n            const query = new URLSearchParams(props.location.search);\n            try {\n                search = JSON.parse(query.get(\"search\") || \"\").query;\n            } catch (e) {\n                search = query.get(\"search\");\n            }\n\n            this.state.searchTerm.current = search || \"\";\n            this.state.searchTerm.previous = this.state.searchTerm.current;\n        }\n    }\n\n    private readonly handleOpenHotkey = (e: React.KeyboardEvent): void => {\n        for (let i = 0; i < this.state.plugins.hotKeys.length; i++) {\n            const hotKey = this.state.plugins.hotKeys[i];\n            if (hotKey.preventOpen(e)) {\n                return;\n            }\n        }\n\n        e.preventDefault();\n        if (!this.input.current) {\n            return;\n        }\n        this.input.current.focus();\n    };\n\n    /**\n     * Re-routes to given route (provided by the plugin) with needed search query params.\n     * It also manages previous and current search terms and automatically highlighted item in dropdown.\n     * @param plugin\n     */\n    public readonly submitSearchTerm = (plugin: AdminGlobalSearchPlugin): void => {\n        this.setState(\n            state => {\n                const newState = set(state, \"searchTerm.previous\", state.searchTerm.current);\n                return set(newState, \"plugins.current\", plugin);\n            },\n            () => {\n                const query = new URLSearchParams();\n\n                if (this.state.searchTerm.current) {\n                    // If \"search\" key in the plugin was defined, it means SearchInput values were set. Otherwise,\n                    // we need to send the plain string into the \"search\" query param. This behavior was needed\n                    // eg. for pages, since Page entity doesn't use regular SearchInput type, but plain string.\n                    if (plugin.search) {\n                        query.set(\n                            \"search\",\n                            JSON.stringify({\n                                query: this.state.searchTerm.current,\n                                ...plugin.search\n                            })\n                        );\n                    } else {\n                        query.set(\"search\", this.state.searchTerm.current);\n                    }\n                }\n\n                this.props.history.push({\n                    pathname: plugin.route,\n                    search: query.toString()\n                });\n            }\n        );\n    };\n\n    private readonly cancelSearchTerm = (): void => {\n        this.setState(state => {\n            state.searchTerm.current = state.searchTerm.previous;\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Downshift ref={this.downshift} itemToString={item => item && item.label}>\n                {downshiftProps => {\n                    const { isOpen, openMenu, closeMenu, getInputProps } = downshiftProps;\n\n                    return (\n                        <div style={{ width: \"100%\" }}>\n                            <Hotkeys\n                                zIndex={10}\n                                keys={{\n                                    // @ts-expect-error\n                                    esc: () => document.activeElement.blur(),\n                                    \"/\": this.handleOpenHotkey\n                                }}\n                            />\n\n                            <Hotkeys\n                                zIndex={11}\n                                disabled={!isOpen}\n                                keys={{\n                                    esc: () => {\n                                        this.cancelSearchTerm();\n                                        closeMenu();\n                                    },\n                                    enter: () =>\n                                        setTimeout(() => {\n                                            const { selectedItem } = this.downshift.current.state;\n                                            if (selectedItem) {\n                                                closeMenu();\n                                                this.submitSearchTerm(selectedItem);\n                                            }\n                                        })\n                                }}\n                            />\n\n                            <Elevation\n                                className={classnames(searchWrapper, { active: this.state.active })}\n                                z={0}\n                            >\n                                <SearchBarWrapper>\n                                    <SearchBarInputWrapper>\n                                        <Icon className={icon} icon={<SearchIcon />} />\n\n                                        <React.Fragment>\n                                            <input\n                                                {...getInputProps({\n                                                    placeholder: \"Search...\",\n                                                    className: classnames(\n                                                        \"mdc-text-field__input\",\n                                                        searchBarInput\n                                                    ),\n                                                    ref: this.input,\n                                                    value: this.state.searchTerm.current,\n                                                    onClick: openMenu,\n                                                    onBlur: () => {\n                                                        this.cancelSearchTerm();\n                                                        this.setState({ active: false });\n                                                    },\n                                                    onFocus: () => {\n                                                        this.setState({ active: true });\n                                                        openMenu();\n                                                    },\n                                                    onChange: (\n                                                        e: React.ChangeEvent<HTMLInputElement>\n                                                    ) => {\n                                                        const value = e.target.value || \"\";\n                                                        this.setState(state => {\n                                                            state.searchTerm.current = value;\n                                                            return state;\n                                                        });\n                                                    }\n                                                })}\n                                            />\n                                        </React.Fragment>\n\n                                        <SearchShortcut>/</SearchShortcut>\n                                    </SearchBarInputWrapper>\n                                </SearchBarWrapper>\n                                {isOpen && <SearchBarDropdown context={this} />}\n                            </Elevation>\n                        </div>\n                    );\n                }}\n            </Downshift>\n        );\n    }\n}\n\nconst SearchBarContainer = () => {\n    const routerProps = useRouter();\n\n    return <SearchBar {...routerProps} />;\n};\n\nexport default makeComposable(\"SearchBarContainer\", SearchBarContainer);\n"],"mappings":"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"}

package/plugins/globalSearch/SearchBarDropdown.js

@@ -80,4 +80,6 @@ var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
   }]);
   return SearchBarDropdown;
 }(React.Component);
-exports.default = SearchBarDropdown;
+exports.default = SearchBarDropdown;
+
+//# sourceMappingURL=SearchBarDropdown.js.map

package/plugins/globalSearch/SearchBarDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["SearchBarDropdown","props","context","downshift","current","plugins","state","selectItem","setHighlightedIndex","list","indexOf","openMenu","submitSearchTerm","searchTerm","getMenuProps","getItemProps","selectedItem","highlightedIndex","searchBarDropdown","map","item","index","itemClassNames","highlighted","selected","route","className","classnames","onClick","iconSearchType","label","React","Component"],"sources":["SearchBarDropdown.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AdminGlobalSearchPlugin } from \"~/types\";\nimport classnames from \"classnames\";\nimport { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from \"@webiny/ui/List\";\nimport { searchBarDropdown, iconSearchType } from \"./styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Actions as DownshiftActions, DownshiftState, PropGetters } from \"downshift\";\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\nimport { SearchBarState } from \"~/plugins/globalSearch/SearchBar\";\n\ninterface SearchBarDropdownPropsContextDownshiftCurrent\n    extends DownshiftActions<any>,\n        PropGetters<any> {\n    state: DownshiftState<any>;\n}\ninterface SearchBarDropdownPropsContextDownshift {\n    current: SearchBarDropdownPropsContextDownshiftCurrent;\n}\ninterface SearchBarDropdownPropsContext {\n    downshift: SearchBarDropdownPropsContextDownshift;\n    submitSearchTerm: (item: AdminGlobalSearchPlugin) => void;\n    state: SearchBarState;\n}\ninterface SearchBarDropdownProps {\n    context: SearchBarDropdownPropsContext;\n}\nexport default class SearchBarDropdown extends React.Component<SearchBarDropdownProps> {\n    public override componentDidMount() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                state: { plugins }\n            }\n        } = this.props;\n\n        downshift.selectItem(plugins.current);\n        downshift.setHighlightedIndex(\n            plugins.list.indexOf(plugins.current as AdminGlobalSearchPlugin)\n        );\n        downshift.openMenu();\n    }\n\n    public override render() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                submitSearchTerm,\n                state: { plugins, searchTerm }\n            }\n        } = this.props;\n\n        const {\n            getMenuProps,\n            getItemProps,\n            state: { selectedItem, highlightedIndex }\n        } = downshift;\n\n        return (\n            <Elevation z={2} className={searchBarDropdown}>\n                <List {...getMenuProps()}>\n                    {plugins.list.map((item: AdminGlobalSearchPlugin, index) => {\n                        // Base classes.\n                        const itemClassNames = {\n                            highlighted: highlightedIndex === index,\n                            selected: false\n                        };\n\n                        // Add \"selected\" class if the item is selected.\n                        if (selectedItem && selectedItem === item) {\n                            itemClassNames.selected = true;\n                        }\n\n                        return (\n                            <ListItem\n                                key={item.route}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classnames(itemClassNames),\n                                    onClick: () => submitSearchTerm(item)\n                                })}\n                            >\n                                <ListItemGraphic>\n                                    <Icon className={iconSearchType} icon={<SearchIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    {searchTerm.current || \"Search for all...\"}\n                                </ListItemText>\n                                <ListItemMeta>in {item.label}</ListItemMeta>\n                            </ListItem>\n                        );\n                    })}\n                </List>\n            </Elevation>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAA8F,IAmBzEA,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAClC,6BAAoC;MAChC,0BAKI,IAAI,CAACC,KAAK,CAJVC,OAAO;QACmBC,SAAS,uBAA/BA,SAAS,CAAIC,OAAO;QACXC,OAAO,uBAAhBC,KAAK,CAAID,OAAO;MAIxBF,SAAS,CAACI,UAAU,CAACF,OAAO,CAACD,OAAO,CAAC;MACrCD,SAAS,CAACK,mBAAmB,CACzBH,OAAO,CAACI,IAAI,CAACC,OAAO,CAACL,OAAO,CAACD,OAAO,CAA4B,CACnE;MACDD,SAAS,CAACQ,QAAQ,EAAE;IACxB;EAAC;IAAA;IAAA,OAED,kBAAyB;MACrB,2BAMI,IAAI,CAACV,KAAK,CALVC,OAAO;QACmBC,SAAS,wBAA/BA,SAAS,CAAIC,OAAO;QACpBQ,gBAAgB,wBAAhBA,gBAAgB;QAAA,6CAChBN,KAAK;QAAID,OAAO,yBAAPA,OAAO;QAAEQ,UAAU,yBAAVA,UAAU;MAIpC,IACIC,YAAY,GAGZX,SAAS,CAHTW,YAAY;QACZC,YAAY,GAEZZ,SAAS,CAFTY,YAAY;QAAA,mBAEZZ,SAAS,CADTG,KAAK;QAAIU,YAAY,oBAAZA,YAAY;QAAEC,gBAAgB,oBAAhBA,gBAAgB;MAG3C,oBACI,oBAAC,oBAAS;QAAC,CAAC,EAAE,CAAE;QAAC,SAAS,EAAEC;MAAkB,gBAC1C,oBAAC,UAAI,EAAKJ,YAAY,EAAE,EACnBT,OAAO,CAACI,IAAI,CAACU,GAAG,CAAC,UAACC,IAA6B,EAAEC,KAAK,EAAK;QACxD;QACA,IAAMC,cAAc,GAAG;UACnBC,WAAW,EAAEN,gBAAgB,KAAKI,KAAK;UACvCG,QAAQ,EAAE;QACd,CAAC;;QAED;QACA,IAAIR,YAAY,IAAIA,YAAY,KAAKI,IAAI,EAAE;UACvCE,cAAc,CAACE,QAAQ,GAAG,IAAI;QAClC;QAEA,oBACI,oBAAC,cAAQ;UACL,GAAG,EAAEJ,IAAI,CAACK;QAAM,GACZV,YAAY,CAAC;UACbM,KAAK,EAALA,KAAK;UACLD,IAAI,EAAJA,IAAI;UACJM,SAAS,EAAE,IAAAC,mBAAU,EAACL,cAAc,CAAC;UACrCM,OAAO,EAAE;YAAA,OAAMhB,gBAAgB,CAACQ,IAAI,CAAC;UAAA;QACzC,CAAC,CAAC,gBAEF,oBAAC,qBAAe,qBACZ,oBAAC,UAAI;UAAC,SAAS,EAAES,sBAAe;UAAC,IAAI,eAAE,oBAAC,sBAAU;QAAI,EAAG,CAC3C,eAClB,oBAAC,kBAAY,QACRhB,UAAU,CAACT,OAAO,IAAI,mBAAmB,CAC/B,eACf,oBAAC,kBAAY,QAAC,KAAG,EAACgB,IAAI,CAACU,KAAK,CAAgB,CACrC;MAEnB,CAAC,CAAC,CACC,CACC;IAEpB;EAAC;EAAA;AAAA,EArE0CC,KAAK,CAACC,SAAS;AAAA"}
+{"version":3,"names":["React","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_List","_styled","_Elevation","_Icon","_search","SearchBarDropdown","_React$Component","_inherits2","default","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","componentDidMount","_this$props$context","props","context","downshift","current","plugins","state","selectItem","setHighlightedIndex","list","indexOf","openMenu","render","_this$props$context2","submitSearchTerm","_this$props$context2$","searchTerm","getMenuProps","getItemProps","_downshift$state","selectedItem","highlightedIndex","createElement","Elevation","z","className","searchBarDropdown","List","map","item","index","itemClassNames","highlighted","selected","ListItem","Object","assign","route","classnames","onClick","ListItemGraphic","Icon","iconSearchType","icon","ReactComponent","ListItemText","ListItemMeta","label","Component","exports"],"sources":["SearchBarDropdown.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AdminGlobalSearchPlugin } from \"~/types\";\nimport classnames from \"classnames\";\nimport { List, ListItem, ListItemGraphic, ListItemText, ListItemMeta } from \"@webiny/ui/List\";\nimport { searchBarDropdown, iconSearchType } from \"./styled\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { Actions as DownshiftActions, DownshiftState, PropGetters } from \"downshift\";\nimport { ReactComponent as SearchIcon } from \"@material-design-icons/svg/outlined/search.svg\";\nimport { SearchBarState } from \"~/plugins/globalSearch/SearchBar\";\n\ninterface SearchBarDropdownPropsContextDownshiftCurrent\n    extends DownshiftActions<any>,\n        PropGetters<any> {\n    state: DownshiftState<any>;\n}\ninterface SearchBarDropdownPropsContextDownshift {\n    current: SearchBarDropdownPropsContextDownshiftCurrent;\n}\ninterface SearchBarDropdownPropsContext {\n    downshift: SearchBarDropdownPropsContextDownshift;\n    submitSearchTerm: (item: AdminGlobalSearchPlugin) => void;\n    state: SearchBarState;\n}\ninterface SearchBarDropdownProps {\n    context: SearchBarDropdownPropsContext;\n}\nexport default class SearchBarDropdown extends React.Component<SearchBarDropdownProps> {\n    public override componentDidMount() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                state: { plugins }\n            }\n        } = this.props;\n\n        downshift.selectItem(plugins.current);\n        downshift.setHighlightedIndex(\n            plugins.list.indexOf(plugins.current as AdminGlobalSearchPlugin)\n        );\n        downshift.openMenu();\n    }\n\n    public override render() {\n        const {\n            context: {\n                downshift: { current: downshift },\n                submitSearchTerm,\n                state: { plugins, searchTerm }\n            }\n        } = this.props;\n\n        const {\n            getMenuProps,\n            getItemProps,\n            state: { selectedItem, highlightedIndex }\n        } = downshift;\n\n        return (\n            <Elevation z={2} className={searchBarDropdown}>\n                <List {...getMenuProps()}>\n                    {plugins.list.map((item: AdminGlobalSearchPlugin, index) => {\n                        // Base classes.\n                        const itemClassNames = {\n                            highlighted: highlightedIndex === index,\n                            selected: false\n                        };\n\n                        // Add \"selected\" class if the item is selected.\n                        if (selectedItem && selectedItem === item) {\n                            itemClassNames.selected = true;\n                        }\n\n                        return (\n                            <ListItem\n                                key={item.route}\n                                {...getItemProps({\n                                    index,\n                                    item,\n                                    className: classnames(itemClassNames),\n                                    onClick: () => submitSearchTerm(item)\n                                })}\n                            >\n                                <ListItemGraphic>\n                                    <Icon className={iconSearchType} icon={<SearchIcon />} />\n                                </ListItemGraphic>\n                                <ListItemText>\n                                    {searchTerm.current || \"Search for all...\"}\n                                </ListItemText>\n                                <ListItemMeta>in {item.label}</ListItemMeta>\n                            </ListItem>\n                        );\n                    })}\n                </List>\n            </Elevation>\n        );\n    }\n}\n"],"mappings":"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"}

package/plugins/globalSearch/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="web" />
 import React from "react";
 export declare const globalSearchHotkey: {
     type: string;

package/plugins/globalSearch/index.js

@@ -13,4 +13,6 @@ var globalSearchHotkey = {
     return ignoreNodes.includes(e.target.nodeName);
   }
 };
-exports.globalSearchHotkey = globalSearchHotkey;
+exports.globalSearchHotkey = globalSearchHotkey;
+
+//# sourceMappingURL=index.js.map

package/plugins/globalSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["globalSearchHotkey","type","name","preventOpen","e","ignoreNodes","includes","target","nodeName"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const globalSearchHotkey = {\n    type: \"admin-global-search-prevent-hotkey\",\n    name: \"admin-global-search-prevent-hotkey-input\",\n    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean {\n        // Define a list of all node types we want to prevent the event from.\n        const ignoreNodes = [\"INPUT\", \"TEXTAREA\"];\n\n        return ignoreNodes.includes(e.target.nodeName);\n    }\n};\n"],"mappings":";;;;;;AAEO,IAAMA,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,oCAAoC;EAC1CC,IAAI,EAAE,0CAA0C;EAChDC,WAAW,uBAACC,CAAsC,EAAW;IACzD;IACA,IAAMC,WAAW,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;IAEzC,OAAOA,WAAW,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAACC,QAAQ,CAAC;EAClD;AACJ,CAAC;AAAC"}
+{"version":3,"names":["globalSearchHotkey","type","name","preventOpen","e","ignoreNodes","includes","target","nodeName","exports"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const globalSearchHotkey = {\n    type: \"admin-global-search-prevent-hotkey\",\n    name: \"admin-global-search-prevent-hotkey-input\",\n    preventOpen(e: React.ChangeEvent<HTMLInputElement>): boolean {\n        // Define a list of all node types we want to prevent the event from.\n        const ignoreNodes = [\"INPUT\", \"TEXTAREA\"];\n\n        return ignoreNodes.includes(e.target.nodeName);\n    }\n};\n"],"mappings":";;;;;;AAEO,IAAMA,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,oCAAoC;EAC1CC,IAAI,EAAE,0CAA0C;EAChDC,WAAW,WAAAA,YAACC,CAAsC,EAAW;IACzD;IACA,IAAMC,WAAW,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;IAEzC,OAAOA,WAAW,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAACC,QAAQ,CAAC;EAClD;AACJ,CAAC;AAACC,OAAA,CAAAT,kBAAA,GAAAA,kBAAA"}

package/plugins/globalSearch/styled.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
-/// <reference types="web" />
 export declare const SearchShortcut: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/plugins/globalSearch/styled.js

@@ -8,9 +8,6 @@ exports.searchWrapper = exports.searchBarInput = exports.searchBarDropdown = exp
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _emotion = require("emotion");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-// TODO remove
-// @ts-nocheck
-
 var SearchShortcut = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eh6vkyz0",
   label: "SearchShortcut"
@@ -128,4 +125,6 @@ var searchWrapper = /*#__PURE__*/(0, _emotion.css)({
     color: "var(--mdc-theme-surface)"
   }
 }, "label:searchWrapper;");
-exports.searchWrapper = searchWrapper;
+exports.searchWrapper = searchWrapper;
+
+//# sourceMappingURL=styled.js.map

package/plugins/globalSearch/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["SearchShortcut","styled","border","color","borderRadius","width","height","marginTop","textAlign","fontSize","paddingTop","boxSizing","cursor","opacity","SearchBarWrapper","display","SearchBarInputWrapper","position","searchBarInput","css","lineHeight","outline","backgroundColor","paddingLeft","borderBottom","searchBarDropdown","background","left","top","zIndex","padding","fontWeight","icon","paddingRight","iconSearchType","searchWrapper","transition","boxShadow","input"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\n\nexport const SearchShortcut = styled(\"div\")({\n    border: \"1px solid var(--mdc-theme-surface)\",\n    color: \"var(--mdc-theme-surface)\",\n    borderRadius: 5,\n    width: 20,\n    height: 24,\n    marginTop: 1,\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    paddingTop: \"3px\",\n    boxSizing: \"border-box\",\n    cursor: \"default\",\n    opacity: \"0.8\"\n});\n\nexport const SearchBarWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\"\n});\n\nexport const SearchBarInputWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\"\n});\n\nexport const searchBarInput = css({\n    width: \"100%\",\n    lineHeight: 1,\n    border: \"none\",\n    outline: \"none\",\n    backgroundColor: \"transparent\",\n    \"&.mdc-text-field__input\": {\n        paddingTop: \"5px !important\",\n        paddingLeft: \"10px !important\",\n        borderBottom: \"none !important\",\n        height: \"25px !important\",\n        color: \"var(--mdc-theme-surface)\",\n        \"&::placeholder\": {\n            color: \"var(--mdc-theme-surface) !important\",\n            opacity: \"1 !important\"\n        },\n        \"&:focus::placeholder\": {\n            color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n        }\n    }\n});\n\nexport const searchBarDropdown = css({\n    position: \"absolute\",\n    background: \"white\",\n    left: -1,\n    width: \"calc(100% + 2px)\",\n    top: 45,\n    zIndex: 2,\n    color: \"var(--mdc-theme-on-surface)\",\n    borderRadius: \"0 0 5px 5px\",\n    \".mdc-list\": {\n        padding: 0,\n        \".mdc-list-item\": {\n            \"&.selected\": {\n                fontWeight: \"bold\"\n            },\n            \"&.highlighted\": {\n                backgroundColor: \"var(--mdc-theme-on-background)\"\n            }\n        }\n    }\n});\n\nexport const icon = css({\n    \"&.mdc-button__icon\": {\n        width: \"auto !important\",\n        paddingRight: 5,\n        opacity: 0.75,\n        marginTop: 2\n    }\n});\n\nexport const iconSearchType = css({\n    cursor: \"pointer\",\n    paddingLeft: 5\n});\n\nexport const searchWrapper = css({\n    backgroundColor: \"rgba(0, 0, 0, 0.1)\",\n    display: \"flex\",\n    padding: \"10px 20px\",\n    position: \"relative\",\n    borderRadius: 4,\n    transition: \"background 100ms ease-in,width 100ms ease-out\",\n    color: \"var(--mdc-theme-surface)\",\n    border: \"1px solid transparent\",\n    \"&.active\": {\n        color: \"var(--mdc-theme-on-surface)\",\n        border: \"1px solid var(--mdc-theme-text-hint-on-dark)\",\n        background: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0 1px 1px var(--mdc-theme-text-hint-on-dark)\",\n        input: {\n            color: \"var(--mdc-theme-on-surface)\"\n        },\n        [SearchShortcut]: {\n            display: \"none\"\n        }\n    },\n    input: {\n        color: \"var(--mdc-theme-surface)\"\n    }\n});\n"],"mappings":"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"}
+{"version":3,"names":["_emotion","require","_styled","_interopRequireDefault","SearchShortcut","styled","target","label","border","color","borderRadius","width","height","marginTop","textAlign","fontSize","paddingTop","boxSizing","cursor","opacity","exports","SearchBarWrapper","display","SearchBarInputWrapper","position","searchBarInput","css","lineHeight","outline","backgroundColor","paddingLeft","borderBottom","searchBarDropdown","background","left","top","zIndex","padding","fontWeight","icon","paddingRight","iconSearchType","searchWrapper","transition","_defineProperty2","default","boxShadow","input"],"sources":["styled.ts"],"sourcesContent":["import { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\n\nexport const SearchShortcut = styled(\"div\")({\n    border: \"1px solid var(--mdc-theme-surface)\",\n    color: \"var(--mdc-theme-surface)\",\n    borderRadius: 5,\n    width: 20,\n    height: 24,\n    marginTop: 1,\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    paddingTop: \"3px\",\n    boxSizing: \"border-box\",\n    cursor: \"default\",\n    opacity: \"0.8\"\n});\n\nexport const SearchBarWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\"\n});\n\nexport const SearchBarInputWrapper = styled(\"div\")({\n    display: \"flex\",\n    width: \"100%\",\n    position: \"relative\"\n});\n\nexport const searchBarInput = css({\n    width: \"100%\",\n    lineHeight: 1,\n    border: \"none\",\n    outline: \"none\",\n    backgroundColor: \"transparent\",\n    \"&.mdc-text-field__input\": {\n        paddingTop: \"5px !important\",\n        paddingLeft: \"10px !important\",\n        borderBottom: \"none !important\",\n        height: \"25px !important\",\n        color: \"var(--mdc-theme-surface)\",\n        \"&::placeholder\": {\n            color: \"var(--mdc-theme-surface) !important\",\n            opacity: \"1 !important\"\n        },\n        \"&:focus::placeholder\": {\n            color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n        }\n    }\n});\n\nexport const searchBarDropdown = css({\n    position: \"absolute\",\n    background: \"white\",\n    left: -1,\n    width: \"calc(100% + 2px)\",\n    top: 45,\n    zIndex: 2,\n    color: \"var(--mdc-theme-on-surface)\",\n    borderRadius: \"0 0 5px 5px\",\n    \".mdc-list\": {\n        padding: 0,\n        \".mdc-list-item\": {\n            \"&.selected\": {\n                fontWeight: \"bold\"\n            },\n            \"&.highlighted\": {\n                backgroundColor: \"var(--mdc-theme-on-background)\"\n            }\n        }\n    }\n});\n\nexport const icon = css({\n    \"&.mdc-button__icon\": {\n        width: \"auto !important\",\n        paddingRight: 5,\n        opacity: 0.75,\n        marginTop: 2\n    }\n});\n\nexport const iconSearchType = css({\n    cursor: \"pointer\",\n    paddingLeft: 5\n});\n\nexport const searchWrapper = css({\n    backgroundColor: \"rgba(0, 0, 0, 0.1)\",\n    display: \"flex\",\n    padding: \"10px 20px\",\n    position: \"relative\",\n    borderRadius: 4,\n    transition: \"background 100ms ease-in,width 100ms ease-out\",\n    color: \"var(--mdc-theme-surface)\",\n    border: \"1px solid transparent\",\n    \"&.active\": {\n        color: \"var(--mdc-theme-on-surface)\",\n        border: \"1px solid var(--mdc-theme-text-hint-on-dark)\",\n        background: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0 1px 1px var(--mdc-theme-text-hint-on-dark)\",\n        input: {\n            color: \"var(--mdc-theme-on-surface)\"\n        },\n        // @ts-expect-error\n        [SearchShortcut]: {\n            display: \"none\"\n        }\n    },\n    input: {\n        color: \"var(--mdc-theme-surface)\"\n    }\n});\n"],"mappings":"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"}

package/plugins/uiLayoutRenderer/index.js

@@ -58,4 +58,6 @@ var uiLayoutPlugin = new _UILayout.UILayoutPlugin(function (layout) {
     }));
   });
 });
-exports.uiLayoutPlugin = uiLayoutPlugin;
+exports.uiLayoutPlugin = uiLayoutPlugin;
+
+//# sourceMappingURL=index.js.map

package/plugins/uiLayoutRenderer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["getElementKey","element","constructor","name","id","ElementID","children","uiLayoutPlugin","UILayoutPlugin","layout","setRenderer","props","hasParentGrid","getGrid","getLayout","map","row","index","item","getElement","console","warn","shouldRender","render","GridComponent","GridInner","Grid","width"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { Cell, Grid, GridInner } from \"@webiny/ui/Grid\";\nimport { UILayoutPlugin } from \"~/ui/UILayout\";\nimport { UIElement } from \"~/ui/UIElement\";\n\nfunction getElementKey(element: UIElement) {\n    return `${element.constructor.name}:${element.id}`;\n}\n\nconst ElementID: React.FC = ({ children }) => {\n    return children as unknown as React.ReactElement;\n};\n\nexport const uiLayoutPlugin = new UILayoutPlugin(layout => {\n    layout.setRenderer(({ layout, props, hasParentGrid }) => {\n        if (!layout.getGrid()) {\n            return (\n                <Fragment>\n                    {layout.getLayout().map((row, index) => (\n                        <Fragment key={index}>\n                            {row.map(item => {\n                                const element = layout.getElement(item.element);\n\n                                if (!element) {\n                                    console.warn(`Element \"${item.element}\" was not found!`);\n                                    return null;\n                                }\n\n                                if (!element.shouldRender(props)) {\n                                    return null;\n                                }\n\n                                return (\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                );\n                            })}\n                        </Fragment>\n                    ))}\n                </Fragment>\n            );\n        }\n\n        const GridComponent = hasParentGrid ? GridInner : Grid;\n\n        return (\n            <GridComponent>\n                {layout.getLayout().map((row, index) => (\n                    <Fragment key={index}>\n                        {row.map(item => {\n                            const element = layout.getElement(item.element);\n                            if (!element.shouldRender(props)) {\n                                return null;\n                            }\n                            return (\n                                <Cell key={item.element} span={item.width}>\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                </Cell>\n                            );\n                        })}\n                    </Fragment>\n                ))}\n            </GridComponent>\n        );\n    });\n});\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAGA,SAASA,aAAa,CAACC,OAAkB,EAAE;EACvC,iBAAUA,OAAO,CAACC,WAAW,CAACC,IAAI,cAAIF,OAAO,CAACG,EAAE;AACpD;AAEA,IAAMC,SAAmB,GAAG,SAAtBA,SAAmB,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACnC,OAAOA,QAAQ;AACnB,CAAC;AAEM,IAAMC,cAAc,GAAG,IAAIC,wBAAc,CAAC,UAAAC,MAAM,EAAI;EACvDA,MAAM,CAACC,WAAW,CAAC,iBAAsC;IAAA,IAAnCD,MAAM,SAANA,MAAM;MAAEE,KAAK,SAALA,KAAK;MAAEC,aAAa,SAAbA,aAAa;IAC9C,IAAI,CAACH,MAAM,CAACI,OAAO,EAAE,EAAE;MACnB,oBACI,6BAAC,eAAQ,QACJJ,MAAM,CAACK,SAAS,EAAE,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;QAAA,oBAC/B,6BAAC,eAAQ;UAAC,GAAG,EAAEA;QAAM,GAChBD,GAAG,CAACD,GAAG,CAAC,UAAAG,IAAI,EAAI;UACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAU,CAACD,IAAI,CAACjB,OAAO,CAAC;UAE/C,IAAI,CAACA,OAAO,EAAE;YACVmB,OAAO,CAACC,IAAI,qBAAaH,IAAI,CAACjB,OAAO,uBAAmB;YACxD,OAAO,IAAI;UACf;UAEA,IAAI,CAACA,OAAO,CAACqB,YAAY,CAACX,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAI;UACf;UAEA,oBACI,6BAAC,SAAS;YAAC,GAAG,EAAEX,aAAa,CAACC,OAAO;UAAE,GAClCA,OAAO,CAACsB,MAAM,CAACZ,KAAK,CAAC,CACd;QAEpB,CAAC,CAAC,CACK;MAAA,CACd,CAAC,CACK;IAEnB;IAEA,IAAMa,aAAa,GAAGZ,aAAa,GAAGa,eAAS,GAAGC,UAAI;IAEtD,oBACI,6BAAC,aAAa,QACTjB,MAAM,CAACK,SAAS,EAAE,CAACC,GAAG,CAAC,UAACC,GAAG,EAAEC,KAAK;MAAA,oBAC/B,6BAAC,eAAQ;QAAC,GAAG,EAAEA;MAAM,GAChBD,GAAG,CAACD,GAAG,CAAC,UAAAG,IAAI,EAAI;QACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAU,CAACD,IAAI,CAACjB,OAAO,CAAC;QAC/C,IAAI,CAACA,OAAO,CAACqB,YAAY,CAACX,KAAK,CAAC,EAAE;UAC9B,OAAO,IAAI;QACf;QACA,oBACI,6BAAC,UAAI;UAAC,GAAG,EAAEO,IAAI,CAACjB,OAAQ;UAAC,IAAI,EAAEiB,IAAI,CAACS;QAAM,gBACtC,6BAAC,SAAS;UAAC,GAAG,EAAE3B,aAAa,CAACC,OAAO;QAAE,GAClCA,OAAO,CAACsB,MAAM,CAACZ,KAAK,CAAC,CACd,CACT;MAEf,CAAC,CAAC,CACK;IAAA,CACd,CAAC,CACU;EAExB,CAAC,CAAC;AACN,CAAC,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Grid","_UILayout","getElementKey","element","concat","constructor","name","id","ElementID","_ref","children","uiLayoutPlugin","UILayoutPlugin","layout","setRenderer","_ref2","props","hasParentGrid","getGrid","default","createElement","Fragment","getLayout","map","row","index","key","item","getElement","console","warn","shouldRender","render","GridComponent","GridInner","Grid","Cell","span","width","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { Cell, Grid, GridInner } from \"@webiny/ui/Grid\";\nimport { UILayoutPlugin } from \"~/ui/UILayout\";\nimport { UIElement } from \"~/ui/UIElement\";\n\ninterface ElementIDProps {\n    children: React.ReactNode;\n}\n\nfunction getElementKey(element: UIElement) {\n    return `${element.constructor.name}:${element.id}`;\n}\n\nconst ElementID = ({ children }: ElementIDProps) => {\n    return children as unknown as React.ReactElement;\n};\n\nexport const uiLayoutPlugin = new UILayoutPlugin(layout => {\n    layout.setRenderer(({ layout, props, hasParentGrid }) => {\n        if (!layout.getGrid()) {\n            return (\n                <Fragment>\n                    {layout.getLayout().map((row, index) => (\n                        <Fragment key={index}>\n                            {row.map(item => {\n                                const element = layout.getElement(item.element);\n\n                                if (!element) {\n                                    console.warn(`Element \"${item.element}\" was not found!`);\n                                    return null;\n                                }\n\n                                if (!element.shouldRender(props)) {\n                                    return null;\n                                }\n\n                                return (\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                );\n                            })}\n                        </Fragment>\n                    ))}\n                </Fragment>\n            );\n        }\n\n        const GridComponent = hasParentGrid ? GridInner : Grid;\n\n        return (\n            <GridComponent>\n                {layout.getLayout().map((row, index) => (\n                    <Fragment key={index}>\n                        {row.map(item => {\n                            const element = layout.getElement(item.element);\n                            if (!element.shouldRender(props)) {\n                                return null;\n                            }\n                            return (\n                                <Cell key={item.element} span={item.width}>\n                                    <ElementID key={getElementKey(element)}>\n                                        {element.render(props)}\n                                    </ElementID>\n                                </Cell>\n                            );\n                        })}\n                    </Fragment>\n                ))}\n            </GridComponent>\n        );\n    });\n});\n"],"mappings":"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"}

package/styles/material-theme-assignments.scss

@@ -201,7 +201,7 @@ Fix the width of input components when inside grids
 
 // dialog
 .mdc-dialog {
-  z-index: 20;
+  z-index: 22;
   .mdc-dialog__container {
     width: 100%;
   }

package/types.d.ts

@@ -44,7 +44,7 @@ export declare type AdminFileManagerFileTypePlugin = Plugin & {
     types: string[];
     render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;
     fileDetails?: {
-        actions: Array<React.FC | React.Component>;
+        actions: Array<React.ComponentType | React.Component>;
     };
 };
 export interface AdminInstallationPluginRenderParams {
@@ -79,11 +79,20 @@ export interface FileItem {
     tags: string[];
     aliases: string[];
     createdOn: string;
-    savedOn: string;
     createdBy: {
         id: string;
         displayName: string;
     };
+    savedOn: string;
+    savedBy: {
+        id: string;
+        displayName: string;
+    };
+    modifiedOn: string;
+    modifiedBy: {
+        id: string;
+        displayName: string;
+    };
     location: {
         folderId: string;
     };
@@ -92,6 +101,9 @@ export interface FileItem {
         width?: number;
         height?: number;
     };
+    accessControl?: {
+        type: "public" | "private-authenticated";
+    };
     extensions?: Record<string, any>;
 }
 export interface FileManagerSecurityPermission extends SecurityPermission {

package/types.js

@@ -2,4 +2,6 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport { ApolloClient } from \"apollo-client\";\nimport { ItemProps, MenuProps, SectionProps } from \"~/plugins/MenuPlugin\";\n\nexport type AdminGlobalSearchPlugin = Plugin & {\n    type: \"admin-global-search\";\n    label: string;\n    route: string;\n    search?: {\n        operator?: \"and\" | \"or\";\n        fields?: Array<string>;\n    };\n};\n\nexport type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {\n    type: \"admin-global-search-prevent-hotkey\";\n    preventOpen(e: React.KeyboardEvent): boolean | void;\n};\n\n/**\n * LEGACY TYPE. Only for backwards compatibility.\n */\nexport type AdminMenuLogoPlugin = Plugin & {\n    name: \"admin-menu-logo\";\n    type: \"admin-menu-logo\";\n    render(): React.ReactElement;\n};\n\n/**\n * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.\n * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu\n */\nexport type AdminMenuPlugin = Plugin & {\n    type: \"admin-menu\";\n    render(props: {\n        Menu: React.ComponentType<MenuProps>;\n        Section: React.ComponentType<SectionProps>;\n        Item: React.ComponentType<ItemProps>;\n    }): React.ReactNode;\n    order?: number;\n};\n\nexport interface AdminFileManagerFileTypePluginRenderParams {\n    file: FileItem;\n}\nexport type AdminFileManagerFileTypePlugin = Plugin & {\n    type: \"admin-file-manager-file-type\";\n    types: string[];\n    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;\n    fileDetails?: {\n        actions: Array<React.FC | React.Component>;\n    };\n};\n\nexport interface AdminInstallationPluginRenderParams {\n    onInstalled: () => Promise<void>;\n}\nexport type AdminInstallationPlugin = Plugin & {\n    type: \"admin-installation\";\n    getInstalledVersion(params: { client: ApolloClient<object> }): Promise<string | null>;\n    title: string;\n    dependencies?: string[];\n    secure: boolean;\n    render(params: AdminInstallationPluginRenderParams): React.ReactNode;\n};\n\nexport type AdminAppPermissionRendererPlugin = Plugin & {\n    type: \"admin-app-permissions-renderer\";\n    system?: boolean;\n    render(params: any): ReactElement;\n};\n\nimport { SecurityPermission } from \"@webiny/app-security/types\";\n\n/**\n * Represents a file as we receive from the GraphQL API.\n */\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    aliases: string[];\n    createdOn: string;\n    savedOn: string;\n    createdBy: {\n        id: string;\n        displayName: string;\n    };\n    location: {\n        folderId: string;\n    };\n    meta?: {\n        private?: boolean;\n        width?: number;\n        height?: number;\n    };\n    extensions?: Record<string, any>;\n}\n\nexport interface FileManagerSecurityPermission extends SecurityPermission {\n    rwd?: string;\n    own?: boolean;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport { ApolloClient } from \"apollo-client\";\nimport { ItemProps, MenuProps, SectionProps } from \"~/plugins/MenuPlugin\";\n\nexport type AdminGlobalSearchPlugin = Plugin & {\n    type: \"admin-global-search\";\n    label: string;\n    route: string;\n    search?: {\n        operator?: \"and\" | \"or\";\n        fields?: Array<string>;\n    };\n};\n\nexport type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {\n    type: \"admin-global-search-prevent-hotkey\";\n    preventOpen(e: React.KeyboardEvent): boolean | void;\n};\n\n/**\n * LEGACY TYPE. Only for backwards compatibility.\n */\nexport type AdminMenuLogoPlugin = Plugin & {\n    name: \"admin-menu-logo\";\n    type: \"admin-menu-logo\";\n    render(): React.ReactElement;\n};\n\n/**\n * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.\n * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu\n */\nexport type AdminMenuPlugin = Plugin & {\n    type: \"admin-menu\";\n    render(props: {\n        Menu: React.ComponentType<MenuProps>;\n        Section: React.ComponentType<SectionProps>;\n        Item: React.ComponentType<ItemProps>;\n    }): React.ReactNode;\n    order?: number;\n};\n\nexport interface AdminFileManagerFileTypePluginRenderParams {\n    file: FileItem;\n}\nexport type AdminFileManagerFileTypePlugin = Plugin & {\n    type: \"admin-file-manager-file-type\";\n    types: string[];\n    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;\n    fileDetails?: {\n        actions: Array<React.ComponentType | React.Component>;\n    };\n};\n\nexport interface AdminInstallationPluginRenderParams {\n    onInstalled: () => Promise<void>;\n}\nexport type AdminInstallationPlugin = Plugin & {\n    type: \"admin-installation\";\n    getInstalledVersion(params: { client: ApolloClient<object> }): Promise<string | null>;\n    title: string;\n    dependencies?: string[];\n    secure: boolean;\n    render(params: AdminInstallationPluginRenderParams): React.ReactNode;\n};\n\nexport type AdminAppPermissionRendererPlugin = Plugin & {\n    type: \"admin-app-permissions-renderer\";\n    system?: boolean;\n    render(params: any): ReactElement;\n};\n\nimport { SecurityPermission } from \"@webiny/app-security/types\";\n\n/**\n * Represents a file as we receive from the GraphQL API.\n */\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    aliases: string[];\n    createdOn: string;\n    createdBy: {\n        id: string;\n        displayName: string;\n    };\n    savedOn: string;\n    savedBy: {\n        id: string;\n        displayName: string;\n    };\n    modifiedOn: string;\n    modifiedBy: {\n        id: string;\n        displayName: string;\n    };\n    location: {\n        folderId: string;\n    };\n    meta?: {\n        private?: boolean;\n        width?: number;\n        height?: number;\n    };\n    accessControl?: {\n        type: \"public\" | \"private-authenticated\";\n    };\n    extensions?: Record<string, any>;\n}\n\nexport interface FileManagerSecurityPermission extends SecurityPermission {\n    rwd?: string;\n    own?: boolean;\n}\n"],"mappings":""}

package/ui/UIElement.js

@@ -15,4 +15,6 @@ Object.defineProperty(exports, "UIElementPlugin", {
     return _UIElement.UIElementPlugin;
   }
 });
-var _UIElement = require("@webiny/ui-composer/UIElement");
+var _UIElement = require("@webiny/ui-composer/UIElement");
+
+//# sourceMappingURL=UIElement.js.map

package/ui/UIElement.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["UIElement.tsx"],"sourcesContent":["export type {\n    UIElementConfig,\n    ApplyFunction,\n    ShouldRender,\n    UiElementRenderProps\n} from \"@webiny/ui-composer/UIElement\";\n\nexport { UIElement, UIElementPlugin } from \"@webiny/ui-composer/UIElement\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAOA"}
+{"version":3,"names":["_UIElement","require"],"sources":["UIElement.tsx"],"sourcesContent":["export type {\n    UIElementConfig,\n    ApplyFunction,\n    ShouldRender,\n    UiElementRenderProps\n} from \"@webiny/ui-composer/UIElement\";\n\nexport { UIElement, UIElementPlugin } from \"@webiny/ui-composer/UIElement\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAOA,IAAAA,UAAA,GAAAC,OAAA"}

package/ui/UILayout.js

@@ -15,4 +15,6 @@ Object.defineProperty(exports, "UILayoutPlugin", {
     return _UILayout.UILayoutPlugin;
   }
 });
-var _UILayout = require("@webiny/ui-composer/UILayout");
+var _UILayout = require("@webiny/ui-composer/UILayout");
+
+//# sourceMappingURL=UILayout.js.map

package/ui/UILayout.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["UILayout.tsx"],"sourcesContent":["export { UILayout, UILayoutPlugin } from \"@webiny/ui-composer/UILayout\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"names":["_UILayout","require"],"sources":["UILayout.tsx"],"sourcesContent":["export { UILayout, UILayoutPlugin } from \"@webiny/ui-composer/UILayout\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA"}

package/ui/UIRenderer.js

@@ -9,4 +9,6 @@ Object.defineProperty(exports, "UIRenderer", {
     return _UIRenderer.UIRenderer;
   }
 });
-var _UIRenderer = require("@webiny/ui-composer/UIRenderer");
+var _UIRenderer = require("@webiny/ui-composer/UIRenderer");
+
+//# sourceMappingURL=UIRenderer.js.map

package/ui/UIRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["UIRenderer.tsx"],"sourcesContent":["export { UIRenderer } from \"@webiny/ui-composer/UIRenderer\";\nexport type { UIRenderParams, RenderNext } from \"@webiny/ui-composer/UIRenderer\";\n"],"mappings":";;;;;;;;;;;AAAA"}
+{"version":3,"names":["_UIRenderer","require"],"sources":["UIRenderer.tsx"],"sourcesContent":["export { UIRenderer } from \"@webiny/ui-composer/UIRenderer\";\nexport type { UIRenderParams, RenderNext } from \"@webiny/ui-composer/UIRenderer\";\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA"}

package/ui/UIView.js

@@ -21,4 +21,6 @@ Object.defineProperty(exports, "UIViewPlugin", {
     return _UIView.UIViewPlugin;
   }
 });
-var _UIView = require("@webiny/ui-composer/UIView");
+var _UIView = require("@webiny/ui-composer/UIView");
+
+//# sourceMappingURL=UIView.js.map

package/ui/UIView.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["UIView.tsx"],"sourcesContent":["export type {\n    ApplyFunction,\n    UIElementWrapperProps,\n    UIElementWrapper,\n    UIViewProps\n} from \"@webiny/ui-composer/UIView\";\nexport { UIView, UIViewComponent, UIViewPlugin } from \"@webiny/ui-composer/UIView\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA"}
+{"version":3,"names":["_UIView","require"],"sources":["UIView.tsx"],"sourcesContent":["export type {\n    ApplyFunction,\n    UIElementWrapperProps,\n    UIElementWrapper,\n    UIViewProps\n} from \"@webiny/ui-composer/UIView\";\nexport { UIView, UIViewComponent, UIViewPlugin } from \"@webiny/ui-composer/UIView\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,OAAA,GAAAC,OAAA"}

package/ui/elements/AccordionElement.js

@@ -73,7 +73,7 @@ var AccordionElement = /*#__PURE__*/function (_UIElement2) {
        * Figure out correct way to have props.children typed.
        * TODO @ts-refactor
        */
-      // @ts-ignore
+      // @ts-expect-error
       return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
         elevation: 0
       }, (0, _get2.default)((0, _getPrototypeOf2.default)(AccordionElement.prototype), "render", this).call(this, props));
@@ -81,4 +81,6 @@ var AccordionElement = /*#__PURE__*/function (_UIElement2) {
   }]);
   return AccordionElement;
 }(_UIElement3.UIElement);
-exports.AccordionElement = AccordionElement;
+exports.AccordionElement = AccordionElement;
+
+//# sourceMappingURL=AccordionElement.js.map

package/ui/elements/AccordionElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["AccordionItemElement","id","config","title","description","props","open","rest","isOpened","UIElement","AccordionElement","useGrid","items","forEach","item","addElement","getElement"],"sources":["AccordionElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\n\ninterface GetterWithProps<TProps, T> {\n    (props: TProps): T;\n}\n\ninterface Item<TProps = any> extends UIElementConfig {\n    id: string;\n    title: string;\n    description: string;\n    icon: React.ReactElement;\n    open?: boolean | GetterWithProps<TProps, boolean>;\n}\n\nexport class AccordionItemElement extends UIElement<Item> {\n    public constructor(id: string, config: Item) {\n        super(id, config);\n    }\n\n    public setTitle(title: string): void {\n        this.config.title = title;\n    }\n\n    public setDescription(description: string): void {\n        this.config.description = description;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        const { open, ...rest } = this.config;\n        const isOpened = typeof open === \"function\" ? open(props) : open;\n        return (\n            <AccordionItem open={isOpened} {...rest}>\n                {super.render(props)}\n            </AccordionItem>\n        );\n    }\n}\n\ninterface Config extends UIElementConfig {\n    items: Item[];\n}\n\nexport class AccordionElement extends UIElement<Config> {\n    public constructor(id: string, config: Config) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.config.items.forEach(item => {\n            this.addElement(new AccordionItemElement(item.id, item));\n        });\n    }\n\n    public getAccordionItemElement(id: string): AccordionItemElement {\n        return this.getElement(id) as AccordionItemElement;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        /**\n         * Figure out correct way to have props.children typed.\n         * TODO @ts-refactor\n         */\n        // @ts-ignore\n        return <Accordion elevation={0}>{super.render(props)}</Accordion>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AAAgE;AAAA,IAcnDA,oBAAoB;EAAA;EAAA;EAC7B,8BAAmBC,EAAU,EAAEC,MAAY,EAAE;IAAA;IAAA,yBACnCD,EAAE,EAAEC,MAAM;EACpB;EAAC;IAAA;IAAA,OAED,kBAAgBC,KAAa,EAAQ;MACjC,IAAI,CAACD,MAAM,CAACC,KAAK,GAAGA,KAAK;IAC7B;EAAC;IAAA;IAAA,OAED,wBAAsBC,WAAmB,EAAQ;MAC7C,IAAI,CAACF,MAAM,CAACE,WAAW,GAAGA,WAAW;IACzC;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAmB;MACjE,mBAA0B,IAAI,CAACH,MAAM;QAA7BI,IAAI,gBAAJA,IAAI;QAAKC,IAAI;MACrB,IAAMC,QAAQ,GAAG,OAAOF,IAAI,KAAK,UAAU,GAAGA,IAAI,CAACD,KAAK,CAAC,GAAGC,IAAI;MAChE,oBACI,6BAAC,wBAAa;QAAC,IAAI,EAAEE;MAAS,GAAKD,IAAI,gHACrBF,KAAK,EACP;IAExB;EAAC;EAAA;AAAA,EArBqCI,qBAAS;AAAA;AAAA,IA4BtCC,gBAAgB;EAAA;EAAA;EACzB,0BAAmBT,EAAU,EAAEC,MAAc,EAAE;IAAA;IAAA;IAC3C,2BAAMD,EAAE,EAAEC,MAAM;IAEhB,MAAKS,OAAO,CAAC,KAAK,CAAC;IAEnB,MAAKT,MAAM,CAACU,KAAK,CAACC,OAAO,CAAC,UAAAC,IAAI,EAAI;MAC9B,MAAKC,UAAU,CAAC,IAAIf,oBAAoB,CAACc,IAAI,CAACb,EAAE,EAAEa,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;IAAC;EACP;EAAC;IAAA;IAAA,OAED,iCAA+Bb,EAAU,EAAwB;MAC7D,OAAO,IAAI,CAACe,UAAU,CAACf,EAAE,CAAC;IAC9B;EAAC;IAAA;IAAA,OAED,gBAAuBI,KAA2B,EAAmB;MACjE;AACR;AACA;AACA;MACQ;MACA,oBAAO,6BAAC,oBAAS;QAAC,SAAS,EAAE;MAAE,4GAAeA,KAAK,EAAc;IACrE;EAAC;EAAA;AAAA,EAtBiCI,qBAAS;AAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_UIElement3","_Accordion","_excluded","AccordionItemElement","_UIElement","_inherits2","default","_super","_createSuper2","id","config","_classCallCheck2","call","_createClass2","key","value","setTitle","title","setDescription","description","render","props","_this$config","open","rest","_objectWithoutProperties2","isOpened","createElement","AccordionItem","Object","assign","_get2","_getPrototypeOf2","prototype","UIElement","exports","AccordionElement","_UIElement2","_super2","_this","useGrid","items","forEach","item","addElement","getAccordionItemElement","getElement","Accordion","elevation"],"sources":["AccordionElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\n\ninterface GetterWithProps<TProps, T> {\n    (props: TProps): T;\n}\n\ninterface Item<TProps = any> extends UIElementConfig {\n    id: string;\n    title: string;\n    description: string;\n    icon: React.ReactElement;\n    open?: boolean | GetterWithProps<TProps, boolean>;\n}\n\nexport class AccordionItemElement extends UIElement<Item> {\n    public constructor(id: string, config: Item) {\n        super(id, config);\n    }\n\n    public setTitle(title: string): void {\n        this.config.title = title;\n    }\n\n    public setDescription(description: string): void {\n        this.config.description = description;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        const { open, ...rest } = this.config;\n        const isOpened = typeof open === \"function\" ? open(props) : open;\n        return (\n            <AccordionItem open={isOpened} {...rest}>\n                {super.render(props)}\n            </AccordionItem>\n        );\n    }\n}\n\ninterface Config extends UIElementConfig {\n    items: Item[];\n}\n\nexport class AccordionElement extends UIElement<Config> {\n    public constructor(id: string, config: Config) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.config.items.forEach(item => {\n            this.addElement(new AccordionItemElement(item.id, item));\n        });\n    }\n\n    public getAccordionItemElement(id: string): AccordionItemElement {\n        return this.getElement(id) as AccordionItemElement;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        /**\n         * Figure out correct way to have props.children typed.\n         * TODO @ts-refactor\n         */\n        // @ts-expect-error\n        return <Accordion elevation={0}>{super.render(props)}</Accordion>;\n    }\n}\n"],"mappings":"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"}

package/ui/elements/ButtonElement.js

@@ -9,10 +9,10 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _kebabCase2 = _interopRequireDefault(require("lodash/kebabCase"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = require("@webiny/ui/Button");
 var _UIElement2 = require("../UIElement");
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var BUTTONS = {
   default: _Button.ButtonDefault,
   primary: _Button.ButtonPrimary,
@@ -32,7 +32,7 @@ var ButtonElement = /*#__PURE__*/function (_UIElement) {
        * TODO @ts-refactor
        * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'
        */
-      // @ts-ignore
+      // @ts-expect-error
       this.config.label = label;
     }
   }, {
@@ -77,10 +77,12 @@ var ButtonElement = /*#__PURE__*/function (_UIElement) {
         onClick: function onClick() {
           return _onClick(props);
         },
-        "data-testid": "button-element-".concat((0, _kebabCase2.default)(this.getLabel(props)))
+        "data-testid": "button-element-".concat((0, _kebabCase.default)(this.getLabel(props)))
       }, this.getLabel(props));
     }
   }]);
   return ButtonElement;
 }(_UIElement2.UIElement);
-exports.ButtonElement = ButtonElement;
+exports.ButtonElement = ButtonElement;
+
+//# sourceMappingURL=ButtonElement.js.map

package/ui/elements/ButtonElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","ButtonElement","label","config","props","type","onClick","Component","getType","getOnClick","getLabel","UIElement"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport { kebabCase } from \"lodash\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-ignore\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component\n                onClick={() => onClick(props)}\n                data-testid={`button-element-${kebabCase(this.getLabel(props))}`}\n            >\n                {this.getLabel(props)}\n            </Component>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAmBA,IAAMA,OAAO,GAAG;EACZC,OAAO,EAAEC,qBAAa;EACtBC,OAAO,EAAEC,qBAAa;EACtBC,SAAS,EAAEC;AACf,CAAC;AAAC,IAEWC,aAAa;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAGtB,kBACIC,KAA+C,EAC3C;MACJ;AACR;AACA;AACA;MACQ;MACA,IAAI,CAACC,MAAM,CAACD,KAAK,GAAGA,KAAK;IAC7B;EAAC;IAAA;IAAA,OAED,kBAAgBE,KAAoB,EAAU;MAC1C,IAAI,OAAO,IAAI,CAACD,MAAM,CAACD,KAAK,KAAK,UAAU,EAAE;QACzC;QACA,OAAO,IAAI,CAACC,MAAM,CAACD,KAAK,CAACE,KAAK,CAAiB;MACnD;MACA,OAAO,IAAI,CAACD,MAAM,CAACD,KAAK;IAC5B;EAAC;IAAA;IAAA,OAED,iBAAeG,IAAuB,EAAQ;MAC1C,IAAI,CAACF,MAAM,CAACE,IAAI,GAAGA,IAAI;IAC3B;EAAC;IAAA;IAAA,OAED,iBAAeD,KAAoB,EAAqB;MACpD,IAAI,OAAO,IAAI,CAACD,MAAM,CAACE,IAAI,KAAK,UAAU,EAAE;QACxC;QACA,OAAO,IAAI,CAACF,MAAM,CAACE,IAAI,CAACD,KAAK,CAAiB;MAClD;MACA,OAAO,IAAI,CAACD,MAAM,CAACE,IAAI;IAC3B;EAAC;IAAA;IAAA,OAED,oBAAkBC,OAAoC,EAAQ;MAC1D,IAAI,CAACH,MAAM,CAACG,OAAO,GAAGA,OAAO;IACjC;EAAC;IAAA;IAAA,OAED,sBAAoB;MAChB,OAAO,IAAI,CAACH,MAAM,CAACG,OAAO;IAC9B;EAAC;IAAA;IAAA,OAED,gBAAuBF,KAAmB,EAAsB;MAC5D,IAAMG,SAAS,GAAGb,OAAO,CAAC,IAAI,CAACc,OAAO,CAACJ,KAAK,CAAC,CAAC;MAC9C,IAAME,QAAO,GAAG,IAAI,CAACG,UAAU,EAAE;MAEjC,oBACI,6BAAC,SAAS;QACN,OAAO,EAAE;UAAA,OAAMH,QAAO,CAACF,KAAK,CAAC;QAAA,CAAC;QAC9B,wCAA+B,yBAAU,IAAI,CAACM,QAAQ,CAACN,KAAK,CAAC,CAAC;MAAG,GAEhE,IAAI,CAACM,QAAQ,CAACN,KAAK,CAAC,CACb;IAEpB;EAAC;EAAA;AAAA,EAtDkDO,qBAAS;AAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Button","_UIElement2","_kebabCase","BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","ButtonElement","_UIElement","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","setLabel","label","config","getLabel","props","setType","type","getType","setOnClick","onClick","getOnClick","render","Component","createElement","concat","kebabCase","UIElement","exports"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport kebabCase from \"lodash/kebabCase\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-expect-error\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component\n                onClick={() => onClick(props)}\n                data-testid={`button-element-${kebabCase(this.getLabel(props))}`}\n            >\n                {this.getLabel(props)}\n            </Component>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAkBA,IAAMI,OAAO,GAAG;EACZC,OAAO,EAAEC,qBAAa;EACtBC,OAAO,EAAEC,qBAAa;EACtBC,SAAS,EAAEC;AACf,CAAC;AAAC,IAEWC,aAAa,0BAAAC,UAAA;EAAA,IAAAC,UAAA,CAAAR,OAAA,EAAAM,aAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,CAAAV,OAAA,EAAAM,aAAA;EAAA,SAAAA,cAAA;IAAA,IAAAK,gBAAA,CAAAX,OAAA,QAAAM,aAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAA,IAAAC,aAAA,CAAAd,OAAA,EAAAM,aAAA;IAAAS,GAAA;IAAAC,KAAA,EAGtB,SAAAC,SACIC,KAA+C,EAC3C;MACJ;AACR;AACA;AACA;MACQ;MACA,IAAI,CAACC,MAAM,CAACD,KAAK,GAAGA,KAAK;IAC7B;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAI,SAAgBC,KAAoB,EAAU;MAC1C,IAAI,OAAO,IAAI,CAACF,MAAM,CAACD,KAAK,KAAK,UAAU,EAAE;QACzC;QACA,OAAO,IAAI,CAACC,MAAM,CAACD,KAAK,CAACG,KAAqB,CAAC;MACnD;MACA,OAAO,IAAI,CAACF,MAAM,CAACD,KAAK;IAC5B;EAAC;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAM,QAAeC,IAAuB,EAAQ;MAC1C,IAAI,CAACJ,MAAM,CAACI,IAAI,GAAGA,IAAI;IAC3B;EAAC;IAAAR,GAAA;IAAAC,KAAA,EAED,SAAAQ,QAAeH,KAAoB,EAAqB;MACpD,IAAI,OAAO,IAAI,CAACF,MAAM,CAACI,IAAI,KAAK,UAAU,EAAE;QACxC;QACA,OAAO,IAAI,CAACJ,MAAM,CAACI,IAAI,CAACF,KAAqB,CAAC;MAClD;MACA,OAAO,IAAI,CAACF,MAAM,CAACI,IAAI;IAC3B;EAAC;IAAAR,GAAA;IAAAC,KAAA,EAED,SAAAS,WAAkBC,OAAoC,EAAQ;MAC1D,IAAI,CAACP,MAAM,CAACO,OAAO,GAAGA,OAAO;IACjC;EAAC;IAAAX,GAAA;IAAAC,KAAA,EAED,SAAAW,WAAA,EAAoB;MAChB,OAAO,IAAI,CAACR,MAAM,CAACO,OAAO;IAC9B;EAAC;IAAAX,GAAA;IAAAC,KAAA,EAED,SAAAY,OAAuBP,KAAmB,EAAsB;MAC5D,IAAMQ,SAAS,GAAG9B,OAAO,CAAC,IAAI,CAACyB,OAAO,CAACH,KAAK,CAAC,CAAC;MAC9C,IAAMK,QAAO,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;MAEjC,oBACIlC,MAAA,CAAAO,OAAA,CAAA8B,aAAA,CAACD,SAAS;QACNH,OAAO,EAAE,SAAAA,QAAA;UAAA,OAAMA,QAAO,CAACL,KAAK,CAAC;QAAA,CAAC;QAC9B,iCAAAU,MAAA,CAA+B,IAAAC,kBAAS,EAAC,IAAI,CAACZ,QAAQ,CAACC,KAAK,CAAC,CAAC;MAAG,GAEhE,IAAI,CAACD,QAAQ,CAACC,KAAK,CACb,CAAC;IAEpB;EAAC;EAAA,OAAAf,aAAA;AAAA,EAtDkD2B,qBAAS;AAAAC,OAAA,CAAA5B,aAAA,GAAAA,aAAA"}