@webiny/app-admin-ui 6.5.0-beta.0 → 6.5.0-beta.2

package/CommandPalette/CommandPalette.js

@@ -3,7 +3,7 @@ import { Command } from "cmdk";
 import { CommandPaletteFeature, createReactiveComponent, useAdminConfig, useHotkeys } from "@webiny/app-admin";
 import { useContainer, useFeature } from "@webiny/app";
 import { RouterGateway } from "@webiny/app/features/router/abstractions.js";
-import { EmptyState, Icon, Text } from "@webiny/admin-ui";
+import { EmptyState, Icon, ScrollArea, Text } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/search.svg";
 import { ReactComponent as keyboard_return_svg_ReactComponent } from "@webiny/icons/keyboard_return.svg";
 import { ReactComponent as keyboard_arrow_up_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_up.svg";
@@ -126,13 +126,10 @@ const CommandPaletteBase = ()=>{
         spellCheck: false,
         placeholder: "Search for pages and actions…",
         className: "min-w-0 flex-1 border-0 bg-transparent text-lg text-neutral-primary outline-none"
-    }), /*#__PURE__*/ react.createElement(Kbd, null, "esc")), /*#__PURE__*/ react.createElement(Command.List, {
-        className: "p-xs-plus",
-        style: {
-            flex: 1,
-            minHeight: 0,
-            overflowY: "auto"
-        }
+    }), /*#__PURE__*/ react.createElement(Kbd, null, "esc")), /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "min-h-0 flex-1"
+    }, /*#__PURE__*/ react.createElement(Command.List, {
+        className: "p-xs-plus"
     }, /*#__PURE__*/ react.createElement(Command.Empty, null, /*#__PURE__*/ react.createElement(EmptyState, {
         type: "select",
         title: `No results for “${query}”`,
@@ -145,7 +142,7 @@ const CommandPaletteBase = ()=>{
         }, group.rows.map((row)=>/*#__PURE__*/ react.createElement(CommandItemRow, {
                 key: row.key,
                 row: row
-            })))))), /*#__PURE__*/ react.createElement("div", {
+            }))))))), /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus text-neutral-muted"
     }, /*#__PURE__*/ react.createElement(Text, {
         size: "sm"

package/CommandPalette/CommandPalette.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette/CommandPalette.js","sources":["../../src/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Command } from \"cmdk\";\nimport {\n    CommandPaletteFeature,\n    createReactiveComponent,\n    useAdminConfig,\n    useHotkeys\n} from \"@webiny/app-admin\";\nimport { useContainer, useFeature } from \"@webiny/app\";\nimport { RouterGateway } from \"@webiny/app/features/router/abstractions.js\";\nimport { EmptyState, Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ReturnIcon } from \"@webiny/icons/keyboard_return.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/keyboard_arrow_up.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { NAVIGATION_GROUP, PALETTE_HOTKEY_ZINDEX } from \"./constants.js\";\nimport type { CommandGroup } from \"./types.js\";\nimport { commandVmsToGroups, deriveNavigationRows } from \"./deriveRows.js\";\nimport { CommandDetail, CommandItemRow, GroupHeading, HintIcon, Kbd } from \"./components/index.js\";\n\nconst CommandPaletteBase = () => {\n    const [query, setQuery] = useState(\"\");\n    const { presenter } = useFeature(CommandPaletteFeature);\n    const { menus } = useAdminConfig();\n    const container = useContainer();\n    const { vm } = presenter;\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const close = useCallback(() => {\n        presenter.close();\n        setQuery(\"\");\n    }, [presenter]);\n\n    const navigateTo = useCallback(\n        (to: string) => {\n            container.resolve(RouterGateway).pushState(to);\n            close();\n        },\n        [container, close]\n    );\n\n    const runCommand = useCallback((name: string) => presenter.useCommand(name), [presenter]);\n\n    // mod+k toggles; backspace backs out of a detail view; command shortcuts run directly.\n    const keys = useMemo(\n        () => ({\n            \"mod+k\": (e: KeyboardEvent) => {\n                e.preventDefault();\n                presenter.toggle();\n                setQuery(\"\");\n            },\n            backspace: (e: KeyboardEvent) => {\n                // This is a global (document-level) handler, so only act while the palette\n                // is actually open — otherwise it would swallow Backspace everywhere.\n                if (!presenter.vm.isOpen) {\n                    return;\n                }\n                // Never intercept Backspace while the user is editing text: <input>,\n                // <textarea>, or any contentEditable (e.g. rich-text/lexical) element.\n                const target = e.target;\n                if (\n                    target instanceof HTMLInputElement ||\n                    target instanceof HTMLTextAreaElement ||\n                    (target instanceof HTMLElement && target.isContentEditable)\n                ) {\n                    return;\n                }\n                e.preventDefault();\n                presenter.cancelCommand();\n            },\n            ...presenter.shortcutKeys\n        }),\n        [presenter, presenter.shortcutKeys]\n    );\n\n    useHotkeys({ zIndex: PALETTE_HOTKEY_ZINDEX, keys });\n\n    const groups = useMemo<CommandGroup[]>(() => {\n        const result: CommandGroup[] = [];\n        const navigationRows = deriveNavigationRows(menus, navigateTo);\n        if (navigationRows.length > 0) {\n            result.push({ title: NAVIGATION_GROUP, rows: navigationRows });\n        }\n        result.push(...commandVmsToGroups(vm.commands, runCommand));\n        return result;\n    }, [menus, vm.commands, navigateTo, runCommand]);\n\n    if (!vm.isOpen) {\n        return null;\n    }\n\n    const active = vm.activeCommand;\n\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n            e.preventDefault();\n            if (active) {\n                presenter.cancelCommand();\n            } else {\n                close();\n            }\n        }\n    };\n\n    return (\n        <div\n            role=\"presentation\"\n            onClick={close}\n            className=\"fixed inset-0 z-overlay flex items-start justify-center bg-neutral-dark/50\"\n            style={{ padding: \"13vh 16px 16px\", backdropFilter: \"blur(2px)\" }}\n        >\n            <div\n                onClick={e => e.stopPropagation()}\n                onKeyDown={onKeyDown}\n                className=\"flex w-full flex-col overflow-hidden rounded-lg border border-neutral-dimmed bg-neutral-base shadow-xxl\"\n                style={{ maxWidth: 660, height: \"45vh\" }}\n            >\n                {active ? (\n                    <CommandDetail\n                        active={active}\n                        onBack={() => presenter.cancelCommand()}\n                        onClose={close}\n                    />\n                ) : (\n                    <Command\n                        label=\"Command palette\"\n                        style={{ display: \"flex\", flexDirection: \"column\", flex: 1, minHeight: 0 }}\n                    >\n                        <div className=\"flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus\">\n                            <Icon\n                                icon={<SearchIcon />}\n                                color={\"neutral-light\"}\n                                size={\"md\"}\n                                label={\"Search\"}\n                            />\n                            <Command.Input\n                                autoFocus\n                                value={query}\n                                onValueChange={setQuery}\n                                spellCheck={false}\n                                placeholder=\"Search for pages and actions…\"\n                                className=\"min-w-0 flex-1 border-0 bg-transparent text-lg text-neutral-primary outline-none\"\n                            />\n                            <Kbd>esc</Kbd>\n                        </div>\n\n                        <Command.List\n                            className=\"p-xs-plus\"\n                            style={{ flex: 1, minHeight: 0, overflowY: \"auto\" }}\n                        >\n                            <Command.Empty>\n                                <EmptyState\n                                    type=\"select\"\n                                    title={`No results for “${query}”`}\n                                    description=\"Try a page name, or an action like “new entry”.\"\n                                />\n                            </Command.Empty>\n\n                            {groups.map(group => (\n                                <Command.Group\n                                    key={group.title}\n                                    heading={<GroupHeading title={group.title} />}\n                                >\n                                    {group.rows.map(row => (\n                                        <CommandItemRow key={row.key} row={row} />\n                                    ))}\n                                </Command.Group>\n                            ))}\n                        </Command.List>\n                    </Command>\n                )}\n\n                <div className=\"flex items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus text-neutral-muted\">\n                    <Text size=\"sm\">Webiny command palette</Text>\n                    <div className=\"flex items-center gap-md\">\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ArrowUpIcon />} />\n                                <HintIcon element={<ArrowDownIcon />} />\n                            </Kbd>\n                            Navigate\n                        </Text>\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ReturnIcon />} />\n                            </Kbd>\n                            Select\n                        </Text>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const CommandPalette = createReactiveComponent(CommandPaletteBase);\n"],"names":["CommandPaletteBase","query","setQuery","useState","presenter","useFeature","CommandPaletteFeature","menus","useAdminConfig","container","useContainer","vm","useEffect","close","useCallback","navigateTo","to","RouterGateway","runCommand","name","keys","useMemo","e","target","HTMLInputElement","HTMLTextAreaElement","HTMLElement","useHotkeys","PALETTE_HOTKEY_ZINDEX","groups","result","navigationRows","deriveNavigationRows","NAVIGATION_GROUP","commandVmsToGroups","active","onKeyDown","CommandDetail","Command","Icon","SearchIcon","Kbd","EmptyState","group","GroupHeading","row","CommandItemRow","Text","HintIcon","ArrowUpIcon","ArrowDownIcon","ReturnIcon","CommandPalette","createReactiveComponent"],"mappings":"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"}
+{"version":3,"file":"CommandPalette/CommandPalette.js","sources":["../../src/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Command } from \"cmdk\";\nimport {\n    CommandPaletteFeature,\n    createReactiveComponent,\n    useAdminConfig,\n    useHotkeys\n} from \"@webiny/app-admin\";\nimport { useContainer, useFeature } from \"@webiny/app\";\nimport { RouterGateway } from \"@webiny/app/features/router/abstractions.js\";\nimport { EmptyState, Icon, Text } from \"@webiny/admin-ui\";\nimport { ScrollArea } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as ReturnIcon } from \"@webiny/icons/keyboard_return.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/keyboard_arrow_up.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { NAVIGATION_GROUP, PALETTE_HOTKEY_ZINDEX } from \"./constants.js\";\nimport type { CommandGroup } from \"./types.js\";\nimport { commandVmsToGroups, deriveNavigationRows } from \"./deriveRows.js\";\nimport { CommandDetail, CommandItemRow, GroupHeading, HintIcon, Kbd } from \"./components/index.js\";\n\nconst CommandPaletteBase = () => {\n    const [query, setQuery] = useState(\"\");\n    const { presenter } = useFeature(CommandPaletteFeature);\n    const { menus } = useAdminConfig();\n    const container = useContainer();\n    const { vm } = presenter;\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const close = useCallback(() => {\n        presenter.close();\n        setQuery(\"\");\n    }, [presenter]);\n\n    const navigateTo = useCallback(\n        (to: string) => {\n            container.resolve(RouterGateway).pushState(to);\n            close();\n        },\n        [container, close]\n    );\n\n    const runCommand = useCallback((name: string) => presenter.useCommand(name), [presenter]);\n\n    // mod+k toggles; backspace backs out of a detail view; command shortcuts run directly.\n    const keys = useMemo(\n        () => ({\n            \"mod+k\": (e: KeyboardEvent) => {\n                e.preventDefault();\n                presenter.toggle();\n                setQuery(\"\");\n            },\n            backspace: (e: KeyboardEvent) => {\n                // This is a global (document-level) handler, so only act while the palette\n                // is actually open — otherwise it would swallow Backspace everywhere.\n                if (!presenter.vm.isOpen) {\n                    return;\n                }\n                // Never intercept Backspace while the user is editing text: <input>,\n                // <textarea>, or any contentEditable (e.g. rich-text/lexical) element.\n                const target = e.target;\n                if (\n                    target instanceof HTMLInputElement ||\n                    target instanceof HTMLTextAreaElement ||\n                    (target instanceof HTMLElement && target.isContentEditable)\n                ) {\n                    return;\n                }\n                e.preventDefault();\n                presenter.cancelCommand();\n            },\n            ...presenter.shortcutKeys\n        }),\n        [presenter, presenter.shortcutKeys]\n    );\n\n    useHotkeys({ zIndex: PALETTE_HOTKEY_ZINDEX, keys });\n\n    const groups = useMemo<CommandGroup[]>(() => {\n        const result: CommandGroup[] = [];\n        const navigationRows = deriveNavigationRows(menus, navigateTo);\n        if (navigationRows.length > 0) {\n            result.push({ title: NAVIGATION_GROUP, rows: navigationRows });\n        }\n        result.push(...commandVmsToGroups(vm.commands, runCommand));\n        return result;\n    }, [menus, vm.commands, navigateTo, runCommand]);\n\n    if (!vm.isOpen) {\n        return null;\n    }\n\n    const active = vm.activeCommand;\n\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n            e.preventDefault();\n            if (active) {\n                presenter.cancelCommand();\n            } else {\n                close();\n            }\n        }\n    };\n\n    return (\n        <div\n            role=\"presentation\"\n            onClick={close}\n            className=\"fixed inset-0 z-overlay flex items-start justify-center bg-neutral-dark/50\"\n            style={{ padding: \"13vh 16px 16px\", backdropFilter: \"blur(2px)\" }}\n        >\n            <div\n                onClick={e => e.stopPropagation()}\n                onKeyDown={onKeyDown}\n                className=\"flex w-full flex-col overflow-hidden rounded-lg border border-neutral-dimmed bg-neutral-base shadow-xxl\"\n                style={{ maxWidth: 660, height: \"45vh\" }}\n            >\n                {active ? (\n                    <CommandDetail\n                        active={active}\n                        onBack={() => presenter.cancelCommand()}\n                        onClose={close}\n                    />\n                ) : (\n                    <Command\n                        label=\"Command palette\"\n                        style={{ display: \"flex\", flexDirection: \"column\", flex: 1, minHeight: 0 }}\n                    >\n                        <div className=\"flex items-center gap-sm border-b border-neutral-subtle px-md py-sm-plus\">\n                            <Icon\n                                icon={<SearchIcon />}\n                                color={\"neutral-light\"}\n                                size={\"md\"}\n                                label={\"Search\"}\n                            />\n                            <Command.Input\n                                autoFocus\n                                value={query}\n                                onValueChange={setQuery}\n                                spellCheck={false}\n                                placeholder=\"Search for pages and actions…\"\n                                className=\"min-w-0 flex-1 border-0 bg-transparent text-lg text-neutral-primary outline-none\"\n                            />\n                            <Kbd>esc</Kbd>\n                        </div>\n\n                        {/*\n                         * The list scrolls inside a `ScrollArea`, so it shows the same scrollbar\n                         * as the rest of the admin instead of the operating system's.\n                         */}\n                        <ScrollArea className=\"min-h-0 flex-1\">\n                            <Command.List className=\"p-xs-plus\">\n                                <Command.Empty>\n                                    <EmptyState\n                                        type=\"select\"\n                                        title={`No results for “${query}”`}\n                                        description=\"Try a page name, or an action like “new entry”.\"\n                                    />\n                                </Command.Empty>\n\n                                {groups.map(group => (\n                                    <Command.Group\n                                        key={group.title}\n                                        heading={<GroupHeading title={group.title} />}\n                                    >\n                                        {group.rows.map(row => (\n                                            <CommandItemRow key={row.key} row={row} />\n                                        ))}\n                                    </Command.Group>\n                                ))}\n                            </Command.List>\n                        </ScrollArea>\n                    </Command>\n                )}\n\n                <div className=\"flex items-center justify-between gap-sm border-t border-neutral-subtle bg-neutral-subtle px-sm py-xs-plus text-neutral-muted\">\n                    <Text size=\"sm\">Webiny command palette</Text>\n                    <div className=\"flex items-center gap-md\">\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ArrowUpIcon />} />\n                                <HintIcon element={<ArrowDownIcon />} />\n                            </Kbd>\n                            Navigate\n                        </Text>\n                        <Text size=\"sm\" className=\"inline-flex items-center gap-xs\">\n                            <Kbd>\n                                <HintIcon element={<ReturnIcon />} />\n                            </Kbd>\n                            Select\n                        </Text>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport const CommandPalette = createReactiveComponent(CommandPaletteBase);\n"],"names":["CommandPaletteBase","query","setQuery","useState","presenter","useFeature","CommandPaletteFeature","menus","useAdminConfig","container","useContainer","vm","useEffect","close","useCallback","navigateTo","to","RouterGateway","runCommand","name","keys","useMemo","e","target","HTMLInputElement","HTMLTextAreaElement","HTMLElement","useHotkeys","PALETTE_HOTKEY_ZINDEX","groups","result","navigationRows","deriveNavigationRows","NAVIGATION_GROUP","commandVmsToGroups","active","onKeyDown","CommandDetail","Command","Icon","SearchIcon","Kbd","ScrollArea","EmptyState","group","GroupHeading","row","CommandItemRow","Text","HintIcon","ArrowUpIcon","ArrowDownIcon","ReturnIcon","CommandPalette","createReactiveComponent"],"mappings":"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"}

package/Layout.js

@@ -1,6 +1,6 @@
 import react, { useCallback, useMemo, useRef } from "react";
 import react_helmet from "react-helmet";
-import { LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
+import { DebuggerIndicator, LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
 import { HeaderBar, SidebarProvider, cn, useSidebar } from "@webiny/admin-ui";
 import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
 import { CommandPalette } from "./CommandPalette/CommandPalette.js";
@@ -27,7 +27,7 @@ const LayoutContent = ({ title, startElement = null, hideNavigation = false, chi
         }, startElement),
         end: /*#__PURE__*/ react.createElement("div", {
             className: "flex gap-x-sm items-center justify-end"
-        }, /*#__PURE__*/ react.createElement(TenantSelector, null), /*#__PURE__*/ react.createElement(UserMenu, null))
+        }, /*#__PURE__*/ react.createElement(DebuggerIndicator, null), /*#__PURE__*/ react.createElement(TenantSelector, null), /*#__PURE__*/ react.createElement(UserMenu, null))
     }), /*#__PURE__*/ react.createElement("main", {
         className: "relative overflow-y-auto h-main-content"
     }, children)));

package/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/Layout.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport { LayoutRenderer, Navigation, TenantSelector, UserMenu } from \"@webiny/app-admin\";\nimport { HeaderBar, SidebarProvider, cn, useSidebar } from \"@webiny/admin-ui\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { CommandPalette } from \"./CommandPalette/CommandPalette.js\";\n\nconst SIDEBAR_STATE_KEY = \"navigation/state\";\n\ntype SidebarCachedState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\nconst parseSidebarState = (raw: unknown): SidebarCachedState | undefined => {\n    try {\n        if (typeof raw === \"object\" && raw !== null) {\n            return raw as SidebarCachedState;\n        }\n        if (typeof raw === \"string\") {\n            return JSON.parse(raw) as SidebarCachedState;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n    return undefined;\n};\n\nconst LayoutContent = ({\n    title,\n    startElement = null,\n    hideNavigation = false,\n    children\n}: LayoutProps) => {\n    const { pinned } = useSidebar();\n\n    const widthClassNames = {\n        \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n        \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n    };\n\n    return (\n        <>\n            {title ? <Helmet title={title} /> : null}\n            <CommandPalette />\n            {hideNavigation ? null : <Navigation />}\n            <div\n                className={cn(\n                    \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                    hideNavigation ? undefined : widthClassNames\n                )}\n            >\n                <HeaderBar\n                    start={<div className=\"flex items-center gap-sm\">{startElement}</div>}\n                    end={\n                        <div className={\"flex gap-x-sm items-center justify-end\"}>\n                            <TenantSelector />\n                            <UserMenu />\n                        </div>\n                    }\n                />\n                <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n            </div>\n        </>\n    );\n};\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout(props: LayoutProps) {\n        const localStorage = useLocalStorage();\n        const localStorageRef = useRef(localStorage);\n        localStorageRef.current = localStorage;\n\n        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);\n        const cachedState = useMemo(() => parseSidebarState(rawState), [rawState]);\n\n        const onChangeState = useCallback((newState: SidebarCachedState) => {\n            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));\n        }, []);\n\n        return (\n            <SidebarProvider state={cachedState} onChangeState={onChangeState}>\n                <LayoutContent {...props} />\n            </SidebarProvider>\n        );\n    };\n});\n"],"names":["SIDEBAR_STATE_KEY","parseSidebarState","raw","JSON","LayoutContent","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","CommandPalette","Navigation","cn","undefined","HeaderBar","TenantSelector","UserMenu","Layout","LayoutRenderer","props","localStorage","useLocalStorage","localStorageRef","useRef","rawState","useLocalStorageValue","cachedState","useMemo","onChangeState","useCallback","newState","SidebarProvider"],"mappings":";;;;;;AAQA,MAAMA,oBAAoB;AAQ1B,MAAMC,oBAAoB,CAACC;IACvB,IAAI;QACA,IAAI,AAAe,YAAf,OAAOA,OAAoBA,AAAQ,SAARA,KAC3B,OAAOA;QAEX,IAAI,AAAe,YAAf,OAAOA,KACP,OAAOC,KAAK,KAAK,CAACD;IAE1B,EAAE,OAAM,CAER;AAEJ;AAEA,MAAME,gBAAgB,CAAC,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;IACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkB;QACpB,yDAAyDF;QACzD,0DAA0D,CAACA;IAC/D;IAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;QAAC,OAAOP;SAAY,oBACpC,oBAACQ,gBAAcA,OACdN,iBAAiB,OAAO,WAAP,GAAO,oBAACO,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;QACG,WAAWC,GACP,+EACAR,iBAAiBS,SAAYL;qBAGjC,oBAACM,WAASA;QACN,qBAAO,oBAAC;YAAI,WAAU;WAA4BX;QAClD,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACY,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;sBAIrB,oBAAC;QAAK,WAAW;OAA4CX;AAI7E;AAEO,MAAMY,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgBC,KAAkB;QACrC,MAAMC,eAAeC;QACrB,MAAMC,kBAAkBC,OAAOH;QAC/BE,gBAAgB,OAAO,GAAGF;QAE1B,MAAMI,WAAWC,qBAAqB5B;QACtC,MAAM6B,cAAcC,QAAQ,IAAM7B,kBAAkB0B,WAAW;YAACA;SAAS;QAEzE,MAAMI,gBAAgBC,YAAY,CAACC;YAC/BR,gBAAgB,OAAO,CAAC,GAAG,CAACzB,mBAAmBG,KAAK,SAAS,CAAC8B;QAClE,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACC,iBAAeA;YAAC,OAAOL;YAAa,eAAeE;yBAChD,oBAAC3B,eAAkBkB;IAG/B"}
+{"version":3,"file":"Layout.js","sources":["../src/Layout.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport {\n    DebuggerIndicator,\n    LayoutRenderer,\n    Navigation,\n    TenantSelector,\n    UserMenu\n} from \"@webiny/app-admin\";\nimport { HeaderBar, SidebarProvider, cn, useSidebar } from \"@webiny/admin-ui\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { CommandPalette } from \"./CommandPalette/CommandPalette.js\";\n\nconst SIDEBAR_STATE_KEY = \"navigation/state\";\n\ntype SidebarCachedState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\nconst parseSidebarState = (raw: unknown): SidebarCachedState | undefined => {\n    try {\n        if (typeof raw === \"object\" && raw !== null) {\n            return raw as SidebarCachedState;\n        }\n        if (typeof raw === \"string\") {\n            return JSON.parse(raw) as SidebarCachedState;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n    return undefined;\n};\n\nconst LayoutContent = ({\n    title,\n    startElement = null,\n    hideNavigation = false,\n    children\n}: LayoutProps) => {\n    const { pinned } = useSidebar();\n\n    const widthClassNames = {\n        \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n        \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n    };\n\n    return (\n        <>\n            {title ? <Helmet title={title} /> : null}\n            <CommandPalette />\n            {hideNavigation ? null : <Navigation />}\n            <div\n                className={cn(\n                    \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                    hideNavigation ? undefined : widthClassNames\n                )}\n            >\n                <HeaderBar\n                    start={<div className=\"flex items-center gap-sm\">{startElement}</div>}\n                    end={\n                        <div className={\"flex gap-x-sm items-center justify-end\"}>\n                            <DebuggerIndicator />\n                            <TenantSelector />\n                            <UserMenu />\n                        </div>\n                    }\n                />\n                <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n            </div>\n        </>\n    );\n};\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout(props: LayoutProps) {\n        const localStorage = useLocalStorage();\n        const localStorageRef = useRef(localStorage);\n        localStorageRef.current = localStorage;\n\n        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);\n        const cachedState = useMemo(() => parseSidebarState(rawState), [rawState]);\n\n        const onChangeState = useCallback((newState: SidebarCachedState) => {\n            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));\n        }, []);\n\n        return (\n            <SidebarProvider state={cachedState} onChangeState={onChangeState}>\n                <LayoutContent {...props} />\n            </SidebarProvider>\n        );\n    };\n});\n"],"names":["SIDEBAR_STATE_KEY","parseSidebarState","raw","JSON","LayoutContent","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","CommandPalette","Navigation","cn","undefined","HeaderBar","DebuggerIndicator","TenantSelector","UserMenu","Layout","LayoutRenderer","props","localStorage","useLocalStorage","localStorageRef","useRef","rawState","useLocalStorageValue","cachedState","useMemo","onChangeState","useCallback","newState","SidebarProvider"],"mappings":";;;;;;AAcA,MAAMA,oBAAoB;AAQ1B,MAAMC,oBAAoB,CAACC;IACvB,IAAI;QACA,IAAI,AAAe,YAAf,OAAOA,OAAoBA,AAAQ,SAARA,KAC3B,OAAOA;QAEX,IAAI,AAAe,YAAf,OAAOA,KACP,OAAOC,KAAK,KAAK,CAACD;IAE1B,EAAE,OAAM,CAER;AAEJ;AAEA,MAAME,gBAAgB,CAAC,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;IACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkB;QACpB,yDAAyDF;QACzD,0DAA0D,CAACA;IAC/D;IAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;QAAC,OAAOP;SAAY,oBACpC,oBAACQ,gBAAcA,OACdN,iBAAiB,OAAO,WAAP,GAAO,oBAACO,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;QACG,WAAWC,GACP,+EACAR,iBAAiBS,SAAYL;qBAGjC,oBAACM,WAASA;QACN,qBAAO,oBAAC;YAAI,WAAU;WAA4BX;QAClD,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACY,mBAAiBA,OAAAA,WAAAA,GAClB,oBAACC,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;sBAIrB,oBAAC;QAAK,WAAW;OAA4CZ;AAI7E;AAEO,MAAMa,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgBC,KAAkB;QACrC,MAAMC,eAAeC;QACrB,MAAMC,kBAAkBC,OAAOH;QAC/BE,gBAAgB,OAAO,GAAGF;QAE1B,MAAMI,WAAWC,qBAAqB7B;QACtC,MAAM8B,cAAcC,QAAQ,IAAM9B,kBAAkB2B,WAAW;YAACA;SAAS;QAEzE,MAAMI,gBAAgBC,YAAY,CAACC;YAC/BR,gBAAgB,OAAO,CAAC,GAAG,CAAC1B,mBAAmBG,KAAK,SAAS,CAAC+B;QAClE,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACC,iBAAeA;YAAC,OAAOL;YAAa,eAAeE;yBAChD,oBAAC5B,eAAkBmB;IAG/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/app-admin-ui",
-	"version": "6.5.0-beta.0",
+	"version": "6.5.0-beta.2",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -14,10 +14,10 @@
 	"license": "MIT",
 	"dependencies": {
 		"@types/react": "18.3.31",
-		"@webiny/admin-ui": "6.5.0-beta.0",
-		"@webiny/app": "6.5.0-beta.0",
-		"@webiny/app-admin": "6.5.0-beta.0",
-		"@webiny/icons": "6.5.0-beta.0",
+		"@webiny/admin-ui": "6.5.0-beta.2",
+		"@webiny/app": "6.5.0-beta.2",
+		"@webiny/app-admin": "6.5.0-beta.2",
+		"@webiny/icons": "6.5.0-beta.2",
 		"cmdk": "1.1.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
@@ -25,7 +25,7 @@
 	},
 	"devDependencies": {
 		"@types/react-helmet": "6.1.11",
-		"@webiny/build-tools": "6.5.0-beta.0",
+		"@webiny/build-tools": "6.5.0-beta.2",
 		"rimraf": "6.1.3",
 		"typescript": "7.0.2"
 	},