@webiny/app-admin 0.0.0-unstable.1e66d121db → 0.0.0-unstable.2af142b57e

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 \"./icons/round-search-24px.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":["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 \"./icons/round-search-24px.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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"}

package/plugins/globalSearch/SearchBarDropdown.js

@@ -1,52 +1,35 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 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 React = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _List = require("@webiny/ui/List");
-
 var _styled = require("./styled");
-
 var _Elevation = require("@webiny/ui/Elevation");
-
 var _Icon = require("@webiny/ui/Icon");
-
 var _roundSearch24px = require("./icons/round-search-24px.svg");
-
 var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SearchBarDropdown, _React$Component);
-
   var _super = (0, _createSuper2.default)(SearchBarDropdown);
-
   function SearchBarDropdown() {
     (0, _classCallCheck2.default)(this, SearchBarDropdown);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(SearchBarDropdown, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props$context = this.props.context,
-          downshift = _this$props$context.downshift.current,
-          plugins = _this$props$context.state.plugins;
+        downshift = _this$props$context.downshift.current,
+        plugins = _this$props$context.state.plugins;
       downshift.selectItem(plugins.current);
       downshift.setHighlightedIndex(plugins.list.indexOf(plugins.current));
       downshift.openMenu();
@@ -55,16 +38,16 @@ var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props$context2 = this.props.context,
-          downshift = _this$props$context2.downshift.current,
-          submitSearchTerm = _this$props$context2.submitSearchTerm,
-          _this$props$context2$ = _this$props$context2.state,
-          plugins = _this$props$context2$.plugins,
-          searchTerm = _this$props$context2$.searchTerm;
+        downshift = _this$props$context2.downshift.current,
+        submitSearchTerm = _this$props$context2.submitSearchTerm,
+        _this$props$context2$ = _this$props$context2.state,
+        plugins = _this$props$context2$.plugins,
+        searchTerm = _this$props$context2$.searchTerm;
       var getMenuProps = downshift.getMenuProps,
-          getItemProps = downshift.getItemProps,
-          _downshift$state = downshift.state,
-          selectedItem = _downshift$state.selectedItem,
-          highlightedIndex = _downshift$state.highlightedIndex;
+        getItemProps = downshift.getItemProps,
+        _downshift$state = downshift.state,
+        selectedItem = _downshift$state.selectedItem,
+        highlightedIndex = _downshift$state.highlightedIndex;
       return /*#__PURE__*/React.createElement(_Elevation.Elevation, {
         z: 2,
         className: _styled.searchBarDropdown
@@ -73,12 +56,12 @@ var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
         var itemClassNames = {
           highlighted: highlightedIndex === index,
           selected: false
-        }; // Add "selected" class if the item is selected.
+        };
 
+        // Add "selected" class if the item is selected.
         if (selectedItem && selectedItem === item) {
           itemClassNames.selected = true;
         }
-
         return /*#__PURE__*/React.createElement(_List.ListItem, Object.assign({
           key: item.route
         }, getItemProps({
@@ -97,5 +80,4 @@ var SearchBarDropdown = /*#__PURE__*/function (_React$Component) {
   }]);
   return SearchBarDropdown;
 }(React.Component);
-
 exports.default = SearchBarDropdown;

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 \"./icons/round-search-24px.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;;IAmBqBA,iB;;;;;;;;;;;;WACjB,6BAAoC;MAChC,0BAKI,KAAKC,KALT,CACIC,OADJ;MAAA,IAE8BC,SAF9B,uBAEQA,SAFR,CAEqBC,OAFrB;MAAA,IAGiBC,OAHjB,uBAGQC,KAHR,CAGiBD,OAHjB;MAOAF,SAAS,CAACI,UAAV,CAAqBF,OAAO,CAACD,OAA7B;MACAD,SAAS,CAACK,mBAAV,CACIH,OAAO,CAACI,IAAR,CAAaC,OAAb,CAAqBL,OAAO,CAACD,OAA7B,CADJ;MAGAD,SAAS,CAACQ,QAAV;IACH;;;WAED,kBAAyB;MACrB,2BAMI,KAAKV,KANT,CACIC,OADJ;MAAA,IAE8BC,SAF9B,wBAEQA,SAFR,CAEqBC,OAFrB;MAAA,IAGQQ,gBAHR,wBAGQA,gBAHR;MAAA,iDAIQN,KAJR;MAAA,IAIiBD,OAJjB,yBAIiBA,OAJjB;MAAA,IAI0BQ,UAJ1B,yBAI0BA,UAJ1B;MAQA,IACIC,YADJ,GAIIX,SAJJ,CACIW,YADJ;MAAA,IAEIC,YAFJ,GAIIZ,SAJJ,CAEIY,YAFJ;MAAA,uBAIIZ,SAJJ,CAGIG,KAHJ;MAAA,IAGaU,YAHb,oBAGaA,YAHb;MAAA,IAG2BC,gBAH3B,oBAG2BA,gBAH3B;MAMA,oBACI,oBAAC,oBAAD;QAAW,CAAC,EAAE,CAAd;QAAiB,SAAS,EAAEC;MAA5B,gBACI,oBAAC,UAAD,EAAUJ,YAAY,EAAtB,EACKT,OAAO,CAACI,IAAR,CAAaU,GAAb,CAAiB,UAACC,IAAD,EAAgCC,KAAhC,EAA0C;QACxD;QACA,IAAMC,cAAc,GAAG;UACnBC,WAAW,EAAEN,gBAAgB,KAAKI,KADf;UAEnBG,QAAQ,EAAE;QAFS,CAAvB,CAFwD,CAOxD;;QACA,IAAIR,YAAY,IAAIA,YAAY,KAAKI,IAArC,EAA2C;UACvCE,cAAc,CAACE,QAAf,GAA0B,IAA1B;QACH;;QAED,oBACI,oBAAC,cAAD;UACI,GAAG,EAAEJ,IAAI,CAACK;QADd,GAEQV,YAAY,CAAC;UACbM,KAAK,EAALA,KADa;UAEbD,IAAI,EAAJA,IAFa;UAGbM,SAAS,EAAE,IAAAC,mBAAA,EAAWL,cAAX,CAHE;UAIbM,OAAO,EAAE;YAAA,OAAMhB,gBAAgB,CAACQ,IAAD,CAAtB;UAAA;QAJI,CAAD,CAFpB,gBASI,oBAAC,qBAAD,qBACI,oBAAC,UAAD;UAAM,SAAS,EAAES,sBAAjB;UAAiC,IAAI,eAAE,oBAAC,+BAAD;QAAvC,EADJ,CATJ,eAYI,oBAAC,kBAAD,QACKhB,UAAU,CAACT,OAAX,IAAsB,mBAD3B,CAZJ,eAeI,oBAAC,kBAAD,eAAkBgB,IAAI,CAACU,KAAvB,CAfJ,CADJ;MAmBH,CA/BA,CADL,CADJ,CADJ;IAsCH;;;EArE0CC,KAAK,CAACC,S"}
+{"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 \"./icons/round-search-24px.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;AAA6E,IAmBxDA,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,+BAAU;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"}

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,oCADwB;EAE9BC,IAAI,EAAE,0CAFwB;EAG9BC,WAH8B,uBAGlBC,CAHkB,EAG+B;IACzD;IACA,IAAMC,WAAW,GAAG,CAAC,OAAD,EAAU,UAAV,CAApB;IAEA,OAAOA,WAAW,CAACC,QAAZ,CAAqBF,CAAC,CAACG,MAAF,CAASC,QAA9B,CAAP;EACH;AAR6B,CAA3B"}
+{"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"}

package/plugins/globalSearch/styled.js

@@ -1,20 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.searchWrapper = exports.searchBarInput = exports.searchBarDropdown = exports.iconSearchType = exports.icon = exports.SearchShortcut = exports.SearchBarWrapper = exports.SearchBarInputWrapper = void 0;
-
 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"

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":["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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"}

package/plugins/uiLayoutRenderer/index.js

@@ -1,67 +1,53 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.uiLayoutPlugin = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _UILayout = require("../../ui/UILayout");
-
 function getElementKey(element) {
   return "".concat(element.constructor.name, ":").concat(element.id);
 }
-
 var ElementID = function ElementID(_ref) {
   var children = _ref.children;
   return children;
 };
-
 var uiLayoutPlugin = new _UILayout.UILayoutPlugin(function (layout) {
   layout.setRenderer(function (_ref2) {
     var layout = _ref2.layout,
-        props = _ref2.props,
-        hasParentGrid = _ref2.hasParentGrid;
-
+      props = _ref2.props,
+      hasParentGrid = _ref2.hasParentGrid;
     if (!layout.getGrid()) {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, layout.getLayout().map(function (row, index) {
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
           key: index
         }, row.map(function (item) {
           var element = layout.getElement(item.element);
-
           if (!element) {
             console.warn("Element \"".concat(item.element, "\" was not found!"));
             return null;
           }
-
           if (!element.shouldRender(props)) {
             return null;
           }
-
           return /*#__PURE__*/_react.default.createElement(ElementID, {
             key: getElementKey(element)
           }, element.render(props));
         }));
       }));
     }
-
     var GridComponent = hasParentGrid ? _Grid.GridInner : _Grid.Grid;
     return /*#__PURE__*/_react.default.createElement(GridComponent, null, layout.getLayout().map(function (row, index) {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index
       }, row.map(function (item) {
         var element = layout.getElement(item.element);
-
         if (!element.shouldRender(props)) {
           return null;
         }
-
         return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
           key: item.element,
           span: item.width

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,aAAT,CAAuBC,OAAvB,EAA2C;EACvC,iBAAUA,OAAO,CAACC,WAAR,CAAoBC,IAA9B,cAAsCF,OAAO,CAACG,EAA9C;AACH;;AAED,IAAMC,SAAmB,GAAG,SAAtBA,SAAsB,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;EAC1C,OAAOA,QAAP;AACH,CAFD;;AAIO,IAAMC,cAAc,GAAG,IAAIC,wBAAJ,CAAmB,UAAAC,MAAM,EAAI;EACvDA,MAAM,CAACC,WAAP,CAAmB,iBAAsC;IAAA,IAAnCD,MAAmC,SAAnCA,MAAmC;IAAA,IAA3BE,KAA2B,SAA3BA,KAA2B;IAAA,IAApBC,aAAoB,SAApBA,aAAoB;;IACrD,IAAI,CAACH,MAAM,CAACI,OAAP,EAAL,EAAuB;MACnB,oBACI,6BAAC,eAAD,QACKJ,MAAM,CAACK,SAAP,GAAmBC,GAAnB,CAAuB,UAACC,GAAD,EAAMC,KAAN;QAAA,oBACpB,6BAAC,eAAD;UAAU,GAAG,EAAEA;QAAf,GACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,IAAI,EAAI;UACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAP,CAAkBD,IAAI,CAACjB,OAAvB,CAAhB;;UAEA,IAAI,CAACA,OAAL,EAAc;YACVmB,OAAO,CAACC,IAAR,qBAAyBH,IAAI,CAACjB,OAA9B;YACA,OAAO,IAAP;UACH;;UAED,IAAI,CAACA,OAAO,CAACqB,YAAR,CAAqBX,KAArB,CAAL,EAAkC;YAC9B,OAAO,IAAP;UACH;;UAED,oBACI,6BAAC,SAAD;YAAW,GAAG,EAAEX,aAAa,CAACC,OAAD;UAA7B,GACKA,OAAO,CAACsB,MAAR,CAAeZ,KAAf,CADL,CADJ;QAKH,CAjBA,CADL,CADoB;MAAA,CAAvB,CADL,CADJ;IA0BH;;IAED,IAAMa,aAAa,GAAGZ,aAAa,GAAGa,eAAH,GAAeC,UAAlD;IAEA,oBACI,6BAAC,aAAD,QACKjB,MAAM,CAACK,SAAP,GAAmBC,GAAnB,CAAuB,UAACC,GAAD,EAAMC,KAAN;MAAA,oBACpB,6BAAC,eAAD;QAAU,GAAG,EAAEA;MAAf,GACKD,GAAG,CAACD,GAAJ,CAAQ,UAAAG,IAAI,EAAI;QACb,IAAMjB,OAAO,GAAGQ,MAAM,CAACU,UAAP,CAAkBD,IAAI,CAACjB,OAAvB,CAAhB;;QACA,IAAI,CAACA,OAAO,CAACqB,YAAR,CAAqBX,KAArB,CAAL,EAAkC;UAC9B,OAAO,IAAP;QACH;;QACD,oBACI,6BAAC,UAAD;UAAM,GAAG,EAAEO,IAAI,CAACjB,OAAhB;UAAyB,IAAI,EAAEiB,IAAI,CAACS;QAApC,gBACI,6BAAC,SAAD;UAAW,GAAG,EAAE3B,aAAa,CAACC,OAAD;QAA7B,GACKA,OAAO,CAACsB,MAAR,CAAeZ,KAAf,CADL,CADJ,CADJ;MAOH,CAZA,CADL,CADoB;IAAA,CAAvB,CADL,CADJ;EAqBH,CArDD;AAsDH,CAvD6B,CAAvB"}
+{"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"}

package/styles/material-theme-assignments.scss

@@ -195,7 +195,7 @@ Fix the width of input components when inside grids
   margin-left: 2px !important;
   color: $mdc-theme-text-secondary-on-background;
   &--error {
-    color: $webiny-theme-dark-primary !important;
+    color: $mdc-theme-primary !important;
   }
 }
 
@@ -222,6 +222,7 @@ Fix the width of input components when inside grids
       overflow: auto;
       margin-top: 0;
       padding-top: 24px;
+      padding-bottom: 24px;
       background-color: $mdc-theme-surface;
 
       // add options for when tabs are inside the body
@@ -251,6 +252,9 @@ Fix the width of input components when inside grids
           padding-bottom: 25px;
         }
       }
+      > .mdc-layout-grid {
+        margin: -24px;
+      }
     }
     .mdc-dialog__actions {
       border-top: 1px solid $mdc-theme-on-background;

package/styles/material.scss

@@ -13,6 +13,7 @@ $mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-backg
 $mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
 $mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
 $mdc-typography-font-family: $webiny-theme-typography-font-family;
+$mdc-typography-subtitle2-font-weight: $webiny-theme-typography-subtitle2-font-weight;
 
 @import "~material-components-web/material-components-web.scss";
 @import "material-theme-assignments.scss";
@@ -35,6 +36,7 @@ body {
   --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
   --mdc-theme-caret-down: #{$webiny-theme-light-caret-down};
   --mdc-typography-font-family: #{$mdc-typography-font-family};
+  --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
 
   font-family: "Source Sans Pro";
 }

package/styles/theme.scss

@@ -28,10 +28,10 @@ $webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%
 
 // webiny typography
 $webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 // import required fonts
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
-//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
 
 body {
   font-size: 16px;
@@ -41,3 +41,36 @@ a {
   color: var(--webiny-theme-color-primary, #ee896b);
   text-decoration: none;
 }
+
+// Default heading styles
+h1 {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+h3 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+h6 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+@import "@webiny/ui/styles.scss";

package/ui/UIElement.js

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

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":[],"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"}

package/ui/UILayout.js

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

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":[],"sources":["UILayout.tsx"],"sourcesContent":["export { UILayout, UILayoutPlugin } from \"@webiny/ui-composer/UILayout\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA"}

package/ui/UIRenderer.js

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

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":[],"sources":["UIRenderer.tsx"],"sourcesContent":["export { UIRenderer } from \"@webiny/ui-composer/UIRenderer\";\nexport type { UIRenderParams, RenderNext } from \"@webiny/ui-composer/UIRenderer\";\n"],"mappings":";;;;;;;;;;;AAAA"}

package/ui/UIView.js

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

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":[],"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"}