@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/components/ListView/ListViewSidebar.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { Heading, Separator } from "@webiny/admin-ui";
+const SidebarSection = ({ grow, maxHeight, scrollable, children })=>{
+    const style = {};
+    if (maxHeight) style.maxHeight = maxHeight;
+    const classes = [
+        grow ? "flex-1" : void 0,
+        false !== scrollable ? "overflow-y-scroll" : void 0
+    ].filter(Boolean).join(" ");
+    return /*#__PURE__*/ react.createElement("div", {
+        className: classes,
+        style: style
+    }, children);
+};
+const ListViewSidebar = ({ title, children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col h-main-content"
+    }, title ? /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm px-md"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 5
+    }, title)), /*#__PURE__*/ react.createElement(Separator, null)) : null, children);
+ListViewSidebar.Section = SidebarSection;
+export { ListViewSidebar };
+
+//# sourceMappingURL=ListViewSidebar.js.map

package/components/ListView/ListViewSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewSidebar.js","sources":["../../../src/components/ListView/ListViewSidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading, Separator } from \"@webiny/admin-ui\";\n\nexport interface SidebarSectionProps {\n    grow?: boolean;\n    maxHeight?: string;\n    scrollable?: boolean;\n    children: React.ReactNode;\n}\n\nconst SidebarSection = ({ grow, maxHeight, scrollable, children }: SidebarSectionProps) => {\n    const style: React.CSSProperties = {};\n    if (maxHeight) {\n        style.maxHeight = maxHeight;\n    }\n\n    const classes = [\n        grow ? \"flex-1\" : undefined,\n        scrollable !== false ? \"overflow-y-scroll\" : undefined\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    return (\n        <div className={classes} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport interface ListViewSidebarProps {\n    title?: string;\n    children: React.ReactNode;\n}\n\nconst ListViewSidebar = ({ title, children }: ListViewSidebarProps) => {\n    return (\n        <div className={\"flex flex-col h-main-content\"}>\n            {title ? (\n                <>\n                    <div className={\"py-sm px-md\"}>\n                        <Heading level={5}>{title}</Heading>\n                    </div>\n                    <Separator />\n                </>\n            ) : null}\n            {children}\n        </div>\n    );\n};\n\nListViewSidebar.Section = SidebarSection;\n\nexport { ListViewSidebar };\n"],"names":["SidebarSection","grow","maxHeight","scrollable","children","style","classes","undefined","Boolean","ListViewSidebar","title","Heading","Separator"],"mappings":";;AAUA,MAAMA,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,EAAEC,QAAQ,EAAuB;IAClF,MAAMC,QAA6B,CAAC;IACpC,IAAIH,WACAG,MAAM,SAAS,GAAGH;IAGtB,MAAMI,UAAU;QACZL,OAAO,WAAWM;QACH,UAAfJ,aAAuB,sBAAsBI;KAChD,CACI,MAAM,CAACC,SACP,IAAI,CAAC;IAEV,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWF;QAAS,OAAOD;OAC3BD;AAGb;AAOA,MAAMK,kBAAkB,CAAC,EAAEC,KAAK,EAAEN,QAAQ,EAAwB,GACvD,WAAP,GACI,oBAAC;QAAI,WAAW;OACXM,QAAQ,WAARA,GACG,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,SAAOA;QAAC,OAAO;OAAID,SAAAA,WAAAA,GAExB,oBAACE,WAASA,SAEd,MACHR;AAKbK,gBAAgB,OAAO,GAAGT"}

package/components/ListView/ListViewTable.d.ts

@@ -0,0 +1,18 @@
+export interface UseListViewTablePropsOptions {
+    namespace: string;
+    nameColumnId?: string;
+}
+export declare function useListViewTableProps({ namespace, nameColumnId }: UseListViewTablePropsOptions): {
+    loading: boolean;
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[];
+    onSortingChange: (updater: any) => void;
+    onSelectRow: (documents: Array<{
+        id: string;
+    }>) => void;
+    selectedIds: Set<string>;
+    namespace: string;
+    nameColumnId: string | undefined;
+};

package/components/ListView/ListViewTable.js

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { useListView } from "./context.js";
+function useListViewTableProps({ namespace, nameColumnId }) {
+    const { list, actions } = useListView();
+    const sorting = useMemo(()=>{
+        if (!list.sort) return [];
+        return [
+            {
+                id: list.sort.field,
+                desc: "DESC" === list.sort.direction
+            }
+        ];
+    }, [
+        list.sort
+    ]);
+    return {
+        loading: list.pagination.loading,
+        sorting,
+        onSortingChange: (updater)=>{
+            const newSorting = "function" == typeof updater ? updater(sorting) : updater;
+            if (newSorting.length > 0) actions.sort.set(newSorting[0].id, newSorting[0].desc ? "DESC" : "ASC");
+        },
+        onSelectRow: (documents)=>{
+            actions.selection.selectRows(documents.map((d)=>d.id));
+        },
+        selectedIds: list.selection.selectedIds,
+        namespace,
+        nameColumnId
+    };
+}
+export { useListViewTableProps };
+
+//# sourceMappingURL=ListViewTable.js.map

package/components/ListView/ListViewTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListViewTable.js","sources":["../../../src/components/ListView/ListViewTable.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useListView } from \"./context.js\";\n\nexport interface UseListViewTablePropsOptions {\n    namespace: string;\n    nameColumnId?: string;\n}\n\nexport function useListViewTableProps({ namespace, nameColumnId }: UseListViewTablePropsOptions) {\n    const { list, actions } = useListView();\n\n    const sorting = useMemo(() => {\n        if (!list.sort) {\n            return [];\n        }\n        return [{ id: list.sort.field, desc: list.sort.direction === \"DESC\" }];\n    }, [list.sort]);\n\n    return {\n        loading: list.pagination.loading,\n        sorting,\n        onSortingChange: (updater: any) => {\n            const newSorting = typeof updater === \"function\" ? updater(sorting) : updater;\n            if (newSorting.length > 0) {\n                actions.sort.set(newSorting[0].id, newSorting[0].desc ? \"DESC\" : \"ASC\");\n            }\n        },\n        onSelectRow: (documents: Array<{ id: string }>) => {\n            actions.selection.selectRows(documents.map(d => d.id));\n        },\n        selectedIds: list.selection.selectedIds,\n        namespace,\n        nameColumnId\n    };\n}\n"],"names":["useListViewTableProps","namespace","nameColumnId","list","actions","useListView","sorting","useMemo","updater","newSorting","documents","d"],"mappings":";;AAQO,SAASA,sBAAsB,EAAEC,SAAS,EAAEC,YAAY,EAAgC;IAC3F,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAE1B,MAAMC,UAAUC,QAAQ;QACpB,IAAI,CAACJ,KAAK,IAAI,EACV,OAAO,EAAE;QAEb,OAAO;YAAC;gBAAE,IAAIA,KAAK,IAAI,CAAC,KAAK;gBAAE,MAAMA,AAAwB,WAAxBA,KAAK,IAAI,CAAC,SAAS;YAAY;SAAE;IAC1E,GAAG;QAACA,KAAK,IAAI;KAAC;IAEd,OAAO;QACH,SAASA,KAAK,UAAU,CAAC,OAAO;QAChCG;QACA,iBAAiB,CAACE;YACd,MAAMC,aAAa,AAAmB,cAAnB,OAAOD,UAAyBA,QAAQF,WAAWE;YACtE,IAAIC,WAAW,MAAM,GAAG,GACpBL,QAAQ,IAAI,CAAC,GAAG,CAACK,UAAU,CAAC,EAAE,CAAC,EAAE,EAAEA,UAAU,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS;QAEzE;QACA,aAAa,CAACC;YACVN,QAAQ,SAAS,CAAC,UAAU,CAACM,UAAU,GAAG,CAACC,CAAAA,IAAKA,EAAE,EAAE;QACxD;QACA,aAAaR,KAAK,SAAS,CAAC,WAAW;QACvCF;QACAC;IACJ;AACJ"}

package/components/ListView/context.d.ts

@@ -0,0 +1,3 @@
+import type { ListViewContextValue } from "./types.js";
+export declare const ListViewProvider: import("react").Provider<ListViewContextValue | undefined>;
+export declare function useListView(): ListViewContextValue;

package/components/ListView/context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const ListViewContext = createContext(void 0);
+const ListViewProvider = ListViewContext.Provider;
+function useListView() {
+    const ctx = useContext(ListViewContext);
+    if (!ctx) throw new Error("useListView() must be used within a <ListView> component.");
+    return ctx;
+}
+export { ListViewProvider, useListView };
+
+//# sourceMappingURL=context.js.map

package/components/ListView/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/context.js","sources":["../../../src/components/ListView/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ListViewContextValue } from \"./types.js\";\n\nconst ListViewContext = createContext<ListViewContextValue | undefined>(undefined);\n\nexport const ListViewProvider = ListViewContext.Provider;\n\nexport function useListView(): ListViewContextValue {\n    const ctx = useContext(ListViewContext);\n    if (!ctx) {\n        throw new Error(\"useListView() must be used within a <ListView> component.\");\n    }\n    return ctx;\n}\n"],"names":["ListViewContext","createContext","undefined","ListViewProvider","useListView","ctx","useContext","Error"],"mappings":";AAGA,MAAMA,kBAAkBC,cAAgDC;AAEjE,MAAMC,mBAAmBH,gBAAgB,QAAQ;AAEjD,SAASI;IACZ,MAAMC,MAAMC,WAAWN;IACvB,IAAI,CAACK,KACD,MAAM,IAAIE,MAAM;IAEpB,OAAOF;AACX"}

package/components/ListView/index.d.ts

@@ -0,0 +1,24 @@
+import { ListViewBase } from "./ListView.js";
+import { ListViewSidebar } from "./ListViewSidebar.js";
+import { ListViewHeader } from "./ListViewHeader.js";
+import { ListViewBottomBar } from "./ListViewBottomBar.js";
+export declare const ListView: typeof ListViewBase & {
+    Sidebar: typeof ListViewSidebar & {
+        Section: ({ grow, maxHeight, scrollable, children }: import("./ListViewSidebar.js").SidebarSectionProps) => import("react").JSX.Element;
+    };
+    Header: typeof ListViewHeader;
+    BottomBar: typeof ListViewBottomBar;
+    BulkActions: (({ itemLabel, itemLabelPlural, actions: bulkActions }: import("./ListViewBulkActions.js").ListViewBulkActionsProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<import("./ListViewBulkActions.js").ListViewBulkActionsProps> & {
+        readonly type: ({ itemLabel, itemLabelPlural, actions: bulkActions }: import("./ListViewBulkActions.js").ListViewBulkActionsProps) => import("react").JSX.Element;
+    };
+    Filters: (({ filters, filtersToWhere, children }: import("./ListViewFilters.js").ListViewFiltersProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<import("./ListViewFilters.js").ListViewFiltersProps> & {
+        readonly type: ({ filters, filtersToWhere, children }: import("./ListViewFilters.js").ListViewFiltersProps) => import("react").JSX.Element;
+    };
+    Content: (({ loadMoreThreshold, loadMoreDebounceMs, empty, searchEmpty, children }: import("./ListViewContent.js").ListViewContentProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<import("./ListViewContent.js").ListViewContentProps> & {
+        readonly type: ({ loadMoreThreshold, loadMoreDebounceMs, empty, searchEmpty, children }: import("./ListViewContent.js").ListViewContentProps) => import("react").JSX.Element;
+    };
+};
+export { useListView } from "./context.js";
+export { useListViewTableProps } from "./ListViewTable.js";
+export type { ListViewContextValue } from "./types.js";
+export type { ListViewProps } from "./ListView.js";

package/components/ListView/index.js

@@ -0,0 +1,22 @@
+import { ListViewBase } from "./ListView.js";
+import { ListViewSidebar } from "./ListViewSidebar.js";
+import { ListViewHeader } from "./ListViewHeader.js";
+import { ListViewBottomBar } from "./ListViewBottomBar.js";
+import { ListViewBulkActions } from "./ListViewBulkActions.js";
+import { ListViewFilters } from "./ListViewFilters.js";
+import { ListViewContent } from "./ListViewContent.js";
+const ListView = Object.assign(ListViewBase, {
+    Sidebar: Object.assign(ListViewSidebar, {
+        Section: ListViewSidebar.Section
+    }),
+    Header: ListViewHeader,
+    BottomBar: ListViewBottomBar,
+    BulkActions: ListViewBulkActions,
+    Filters: ListViewFilters,
+    Content: ListViewContent
+});
+export { useListView } from "./context.js";
+export { useListViewTableProps } from "./ListViewTable.js";
+export { ListView };
+
+//# sourceMappingURL=index.js.map

package/components/ListView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/index.js","sources":["../../../src/components/ListView/index.ts"],"sourcesContent":["import { ListViewBase } from \"./ListView.js\";\nimport { ListViewSidebar } from \"./ListViewSidebar.js\";\nimport { ListViewHeader } from \"./ListViewHeader.js\";\nimport { ListViewBottomBar } from \"./ListViewBottomBar.js\";\nimport { ListViewBulkActions } from \"./ListViewBulkActions.js\";\nimport { ListViewFilters } from \"./ListViewFilters.js\";\nimport { ListViewContent } from \"./ListViewContent.js\";\n\nexport const ListView = Object.assign(ListViewBase, {\n    Sidebar: Object.assign(ListViewSidebar, {\n        Section: ListViewSidebar.Section\n    }),\n    Header: ListViewHeader,\n    BottomBar: ListViewBottomBar,\n    BulkActions: ListViewBulkActions,\n    Filters: ListViewFilters,\n    Content: ListViewContent\n});\n\nexport { useListView } from \"./context.js\";\nexport { useListViewTableProps } from \"./ListViewTable.js\";\nexport type { ListViewContextValue } from \"./types.js\";\nexport type { ListViewProps } from \"./ListView.js\";\n"],"names":["ListView","Object","ListViewBase","ListViewSidebar","ListViewHeader","ListViewBottomBar","ListViewBulkActions","ListViewFilters","ListViewContent"],"mappings":";;;;;;;AAQO,MAAMA,WAAWC,OAAO,MAAM,CAACC,cAAc;IAChD,SAASD,OAAO,MAAM,CAACE,iBAAiB;QACpC,SAASA,gBAAgB,OAAO;IACpC;IACA,QAAQC;IACR,WAAWC;IACX,aAAaC;IACb,SAASC;IACT,SAASC;AACb"}

package/components/ListView/types.d.ts

@@ -0,0 +1,7 @@
+import type { IListViewModel, IListActions } from "../../presentation/listPresenter/abstractions.js";
+export interface ListViewContextValue {
+    list: IListViewModel<any>;
+    actions: IListActions;
+    showingFilters: boolean;
+    onToggleFilters?: () => void;
+}

package/components/OptionsMenu/OptionsMenuItem.d.ts

@@ -4,6 +4,7 @@ export interface OptionsMenuItemProps {
     disabled?: boolean;
     icon: React.ReactElement;
     label: string;
+    variant?: "destructive";
     ["data-testid"]?: string;
     className?: string;
 }

package/components/OptionsMenu/OptionsMenuItem.js

@@ -11,6 +11,7 @@ const OptionsMenuItem = (props)=>/*#__PURE__*/ react.createElement(DropdownMenu.
             element: props.icon
         }),
         text: props.label,
+        variant: props.variant,
         className: props.className
     });
 export { OptionsMenuItem };

package/components/OptionsMenu/OptionsMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/OptionsMenu/OptionsMenuItem.js","sources":["../../../src/components/OptionsMenu/OptionsMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\n\nexport interface OptionsMenuItemProps {\n    onAction: () => void;\n    disabled?: boolean;\n    icon: React.ReactElement;\n    label: string;\n    [\"data-testid\"]?: string;\n    className?: string;\n}\n\nexport const OptionsMenuItem = (props: OptionsMenuItemProps) => {\n    return (\n        <DropdownMenu.Item\n            onClick={() => {\n                props.onAction();\n            }}\n            disabled={props.disabled ?? false}\n            data-testid={props[\"data-testid\"]}\n            icon={<DropdownMenu.Item.Icon label={props.label} element={props.icon} />}\n            text={props.label}\n            className={props.className}\n        />\n    );\n};\n"],"names":["OptionsMenuItem","props","DropdownMenu"],"mappings":";;AAYO,MAAMA,kBAAkB,CAACC,QACrB,WAAP,GACI,oBAACC,aAAa,IAAI;QACd,SAAS;YACLD,MAAM,QAAQ;QAClB;QACA,UAAUA,MAAM,QAAQ,IAAI;QAC5B,eAAaA,KAAK,CAAC,cAAc;QACjC,oBAAM,oBAACC,aAAa,IAAI,CAAC,IAAI;YAAC,OAAOD,MAAM,KAAK;YAAE,SAASA,MAAM,IAAI;;QACrE,MAAMA,MAAM,KAAK;QACjB,WAAWA,MAAM,SAAS"}
+{"version":3,"file":"components/OptionsMenu/OptionsMenuItem.js","sources":["../../../src/components/OptionsMenu/OptionsMenuItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\n\nexport interface OptionsMenuItemProps {\n    onAction: () => void;\n    disabled?: boolean;\n    icon: React.ReactElement;\n    label: string;\n    variant?: \"destructive\";\n    [\"data-testid\"]?: string;\n    className?: string;\n}\n\nexport const OptionsMenuItem = (props: OptionsMenuItemProps) => {\n    return (\n        <DropdownMenu.Item\n            onClick={() => {\n                props.onAction();\n            }}\n            disabled={props.disabled ?? false}\n            data-testid={props[\"data-testid\"]}\n            icon={<DropdownMenu.Item.Icon label={props.label} element={props.icon} />}\n            text={props.label}\n            variant={props.variant}\n            className={props.className}\n        />\n    );\n};\n"],"names":["OptionsMenuItem","props","DropdownMenu"],"mappings":";;AAaO,MAAMA,kBAAkB,CAACC,QACrB,WAAP,GACI,oBAACC,aAAa,IAAI;QACd,SAAS;YACLD,MAAM,QAAQ;QAClB;QACA,UAAUA,MAAM,QAAQ,IAAI;QAC5B,eAAaA,KAAK,CAAC,cAAc;QACjC,oBAAM,oBAACC,aAAa,IAAI,CAAC,IAAI;YAAC,OAAOD,MAAM,KAAK;YAAE,SAASA,MAAM,IAAI;;QACrE,MAAMA,MAAM,KAAK;QACjB,SAASA,MAAM,OAAO;QACtB,WAAWA,MAAM,SAAS"}

package/components/OverlayLayout/OverlayLayout.js

@@ -28,13 +28,15 @@ const OverlayLayout = ({ barMiddle, barLeft, barRight, children, onExited = noop
         hideOverlay: hideOverlay
     }), /*#__PURE__*/ react.createElement(OverlayContent, {
         visible: visible
-    }, /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(OverlayHeader, {
+    }, /*#__PURE__*/ react.createElement(OverlayHeader, {
         start: barLeft,
         middle: barMiddle,
         end: barRight,
         variant: variant,
         hideOverlay: hideOverlay
-    }), children))));
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-h-0 overflow-hidden"
+    }, children))));
 };
 export { OverlayLayout };
 

package/components/OverlayLayout/OverlayLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/OverlayLayout/OverlayLayout.js","sources":["../../../src/components/OverlayLayout/OverlayLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport noop from \"lodash/noop.js\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\nimport type { overlayHeaderVariants } from \"./components/index.js\";\nimport { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from \"./components/index.js\";\nimport { Portal, type VariantProps } from \"@webiny/admin-ui\";\n\nconst noScrollBodyClassNames = [\"overflow-hidden\", \"h-screen\"];\n\nexport interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n}\n\nexport const OverlayLayout: React.FC<OverlayLayoutProps> = ({\n    barMiddle,\n    barLeft,\n    barRight,\n    children,\n    onExited = noop,\n    variant\n}) => {\n    const [visible, setVisible] = useState(true);\n\n    const hideOverlay = useCallback(() => {\n        setVisible(false);\n    }, []);\n\n    useEffect(() => {\n        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));\n\n        return () => {\n            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));\n        };\n    }, []);\n\n    return (\n        <Portal data-role=\"overlay-layout\" className={\"absolute z-overlay\"}>\n            <OverlayRoot visible={visible} onExited={onExited}>\n                <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />\n                <OverlayContent visible={visible}>\n                    <>\n                        <OverlayHeader\n                            start={barLeft}\n                            middle={barMiddle}\n                            end={barRight}\n                            variant={variant}\n                            hideOverlay={hideOverlay}\n                        />\n\n                        {children}\n                    </>\n                </OverlayContent>\n            </OverlayRoot>\n        </Portal>\n    );\n};\n"],"names":["noScrollBodyClassNames","OverlayLayout","barMiddle","barLeft","barRight","children","onExited","noop","variant","visible","setVisible","useState","hideOverlay","useCallback","useEffect","className","document","Portal","OverlayRoot","OverlayBackdrop","OverlayContent","OverlayHeader"],"mappings":";;;;AAOA,MAAMA,yBAAyB;IAAC;IAAmB;CAAW;AAUvD,MAAMC,gBAA8C,CAAC,EACxDC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,IAAI,EACfC,OAAO,EACV;IACG,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,cAAcC,YAAY;QAC5BH,WAAW;IACf,GAAG,EAAE;IAELI,UAAU;QACNd,uBAAuB,OAAO,CAACe,CAAAA,YAAaC,SAAS,IAAI,CAAC,SAAS,CAAC,GAAG,CAACD;QAExE,OAAO;YACHf,uBAAuB,OAAO,CAACe,CAAAA,YAAaC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAACD;QAC/E;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,QAAMA;QAAC,aAAU;QAAiB,WAAW;qBAC1C,oBAACC,aAAWA;QAAC,SAAST;QAAS,UAAUH;qBACrC,oBAACa,iBAAeA;QAAC,SAASV;QAAS,aAAaG;sBAChD,oBAACQ,gBAAcA;QAAC,SAASX;qBACrB,wDACI,oBAACY,eAAaA;QACV,OAAOlB;QACP,QAAQD;QACR,KAAKE;QACL,SAASI;QACT,aAAaI;QAGhBP;AAMzB"}
+{"version":3,"file":"components/OverlayLayout/OverlayLayout.js","sources":["../../../src/components/OverlayLayout/OverlayLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport noop from \"lodash/noop.js\";\nimport type { ExitHandler } from \"react-transition-group/Transition\";\nimport type { overlayHeaderVariants } from \"./components/index.js\";\nimport { OverlayBackdrop, OverlayContent, OverlayHeader, OverlayRoot } from \"./components/index.js\";\nimport { Portal, type VariantProps } from \"@webiny/admin-ui\";\n\nconst noScrollBodyClassNames = [\"overflow-hidden\", \"h-screen\"];\n\nexport interface OverlayLayoutProps extends VariantProps<typeof overlayHeaderVariants> {\n    barMiddle?: React.ReactNode;\n    barLeft?: React.ReactNode;\n    barRight?: React.ReactNode;\n    children: React.ReactNode;\n    onExited?: ExitHandler<HTMLElement>;\n}\n\nexport const OverlayLayout: React.FC<OverlayLayoutProps> = ({\n    barMiddle,\n    barLeft,\n    barRight,\n    children,\n    onExited = noop,\n    variant\n}) => {\n    const [visible, setVisible] = useState(true);\n\n    const hideOverlay = useCallback(() => {\n        setVisible(false);\n    }, []);\n\n    useEffect(() => {\n        noScrollBodyClassNames.forEach(className => document.body.classList.add(className));\n\n        return () => {\n            noScrollBodyClassNames.forEach(className => document.body.classList.remove(className));\n        };\n    }, []);\n\n    return (\n        <Portal data-role=\"overlay-layout\" className={\"absolute z-overlay\"}>\n            <OverlayRoot visible={visible} onExited={onExited}>\n                <OverlayBackdrop visible={visible} hideOverlay={hideOverlay} />\n                <OverlayContent visible={visible}>\n                    <OverlayHeader\n                        start={barLeft}\n                        middle={barMiddle}\n                        end={barRight}\n                        variant={variant}\n                        hideOverlay={hideOverlay}\n                    />\n                    <div className={\"flex-1 min-h-0 overflow-hidden\"}>{children}</div>\n                </OverlayContent>\n            </OverlayRoot>\n        </Portal>\n    );\n};\n"],"names":["noScrollBodyClassNames","OverlayLayout","barMiddle","barLeft","barRight","children","onExited","noop","variant","visible","setVisible","useState","hideOverlay","useCallback","useEffect","className","document","Portal","OverlayRoot","OverlayBackdrop","OverlayContent","OverlayHeader"],"mappings":";;;;AAOA,MAAMA,yBAAyB;IAAC;IAAmB;CAAW;AAUvD,MAAMC,gBAA8C,CAAC,EACxDC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,WAAWC,IAAI,EACfC,OAAO,EACV;IACG,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IAEvC,MAAMC,cAAcC,YAAY;QAC5BH,WAAW;IACf,GAAG,EAAE;IAELI,UAAU;QACNd,uBAAuB,OAAO,CAACe,CAAAA,YAAaC,SAAS,IAAI,CAAC,SAAS,CAAC,GAAG,CAACD;QAExE,OAAO;YACHf,uBAAuB,OAAO,CAACe,CAAAA,YAAaC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAACD;QAC/E;IACJ,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACE,QAAMA;QAAC,aAAU;QAAiB,WAAW;qBAC1C,oBAACC,aAAWA;QAAC,SAAST;QAAS,UAAUH;qBACrC,oBAACa,iBAAeA;QAAC,SAASV;QAAS,aAAaG;sBAChD,oBAACQ,gBAAcA;QAAC,SAASX;qBACrB,oBAACY,eAAaA;QACV,OAAOlB;QACP,QAAQD;QACR,KAAKE;QACL,SAASI;QACT,aAAaI;sBAEjB,oBAAC;QAAI,WAAW;OAAmCP;AAKvE"}

package/components/OverlayLayout/components/OverlayContent.js

@@ -5,6 +5,7 @@ const OverlayContent = ({ visible, className, style, children, ...props })=>/*#_
         className: cn([
             "fixed inset-x-0 top-lg z-overlay",
             "w-screen",
+            "flex flex-col",
             "rounded-t-lg overflow-hidden",
             "bg-neutral-base",
             "transition ease-in-out",

package/components/OverlayLayout/components/OverlayContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/OverlayLayout/components/OverlayContent.js","sources":["../../../../src/components/OverlayLayout/components/OverlayContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n}\n\nconst OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {\n    return (\n        <div\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                [\n                    \"fixed inset-x-0 top-lg z-overlay\",\n                    \"w-screen\",\n                    \"rounded-t-lg overflow-hidden\",\n                    \"bg-neutral-base\",\n                    \"transition ease-in-out\",\n                    \"data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in data-[state=open]:duration-500\",\n                    \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150\"\n                ],\n                className\n            )}\n            style={{ ...style, height: \"calc(100vh - 24px)\" }}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { OverlayContent, type OverlayContentProps };\n"],"names":["OverlayContent","visible","className","style","children","props","cn"],"mappings":";;AAOA,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAA4B,GACnF,WAAP,GACI,oBAAC;QACG,cAAYJ,UAAU,SAAS;QAC/B,WAAWK,GACP;YACI;YACA;YACA;YACA;YACA;YACA;YACA;SACH,EACDJ;QAEJ,OAAO;YAAE,GAAGC,KAAK;YAAE,QAAQ;QAAqB;QAC/C,GAAGE,KAAK;OAERD"}
+{"version":3,"file":"components/OverlayLayout/components/OverlayContent.js","sources":["../../../../src/components/OverlayLayout/components/OverlayContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\ninterface OverlayContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    visible?: boolean;\n}\n\nconst OverlayContent = ({ visible, className, style, children, ...props }: OverlayContentProps) => {\n    return (\n        <div\n            data-state={visible ? \"open\" : \"closed\"}\n            className={cn(\n                [\n                    \"fixed inset-x-0 top-lg z-overlay\",\n                    \"w-screen\",\n                    \"flex flex-col\",\n                    \"rounded-t-lg overflow-hidden\",\n                    \"bg-neutral-base\",\n                    \"transition ease-in-out\",\n                    \"data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom data-[state=open]:fade-in data-[state=open]:duration-500\",\n                    \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:duration-150\"\n                ],\n                className\n            )}\n            style={{ ...style, height: \"calc(100vh - 24px)\" }}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport { OverlayContent, type OverlayContentProps };\n"],"names":["OverlayContent","visible","className","style","children","props","cn"],"mappings":";;AAOA,MAAMA,iBAAiB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAA4B,GACnF,WAAP,GACI,oBAAC;QACG,cAAYJ,UAAU,SAAS;QAC/B,WAAWK,GACP;YACI;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACH,EACDJ;QAEJ,OAAO;YAAE,GAAGC,KAAK;YAAE,QAAQ;QAAqB;QAC/C,GAAGE,KAAK;OAERD"}

package/components/OverlayLayout/components/OverlayHeader.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "@webiny/admin-ui";
 declare const overlayHeaderVariants: (props?: ({
-    variant?: "strong" | "default" | null | undefined;
+    variant?: "default" | "strong" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface OverlayHeaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof overlayHeaderVariants> {
     start?: React.ReactNode;

package/components/Permissions/Permissions.js

@@ -3,13 +3,14 @@ import { Accordion } from "@webiny/admin-ui";
 import { useAdminConfig } from "../../config/AdminConfig.js";
 import { PermissionValueProvider } from "../../permissions/PermissionValueContext.js";
 import { PermissionRenderer } from "../../permissions/PermissionRenderer.js";
+import { mergeByName } from "./mergeByName.js";
 const byTitle = (a, b)=>a.title.localeCompare(b.title);
 const Permissions = ({ id, value, onChange })=>{
     const { permissionRenderers } = useAdminConfig();
     const renderers = useMemo(()=>{
         const systemRenderers = [];
         const appRenderers = [];
-        for (const renderer of permissionRenderers)if (renderer.system) systemRenderers.push(renderer);
+        for (const renderer of mergeByName(permissionRenderers))if (renderer.system) systemRenderers.push(renderer);
         else appRenderers.push(renderer);
         return [
             ...systemRenderers.sort(byTitle),

package/components/Permissions/Permissions.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/Permissions/Permissions.js","sources":["../../../src/components/Permissions/Permissions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\nimport type { PermissionRendererConfig } from \"~/permissions/types.js\";\nimport { PermissionValueProvider } from \"~/permissions/PermissionValueContext.js\";\nimport { PermissionRenderer } from \"~/permissions/PermissionRenderer.js\";\n\nconst byTitle = (a: PermissionRendererConfig, b: PermissionRendererConfig) => {\n    return a.title.localeCompare(b.title);\n};\n\ninterface PermissionsProps extends BindComponentRenderProp {\n    id: string;\n}\n\nexport const Permissions = ({ id, value, onChange }: PermissionsProps) => {\n    const { permissionRenderers } = useAdminConfig();\n\n    const renderers = useMemo<PermissionRendererConfig[]>(() => {\n        const systemRenderers: PermissionRendererConfig[] = [];\n        const appRenderers: PermissionRendererConfig[] = [];\n\n        for (const renderer of permissionRenderers) {\n            if (renderer.system) {\n                systemRenderers.push(renderer);\n            } else {\n                appRenderers.push(renderer);\n            }\n        }\n\n        return [...systemRenderers.sort(byTitle), ...appRenderers.sort(byTitle)];\n    }, [permissionRenderers]);\n\n    return (\n        <Accordion>\n            <PermissionValueProvider value={value} onChange={onChange}>\n                {renderers.map(renderer => {\n                    return (\n                        <Accordion.Item\n                            key={renderer.name + \".\" + id}\n                            title={renderer.title}\n                            description={renderer.description}\n                            icon={\n                                renderer.icon ? (\n                                    <Accordion.Item.Icon\n                                        icon={renderer.icon}\n                                        label={renderer.title}\n                                    />\n                                ) : undefined\n                            }\n                            data-testid={`permission.${renderer.name}`}\n                        >\n                            {renderer.schema ? (\n                                <PermissionRenderer schema={renderer.schema} />\n                            ) : (\n                                renderer.element\n                            )}\n                        </Accordion.Item>\n                    );\n                })}\n            </PermissionValueProvider>\n        </Accordion>\n    );\n};\n"],"names":["byTitle","a","b","Permissions","id","value","onChange","permissionRenderers","useAdminConfig","renderers","useMemo","systemRenderers","appRenderers","renderer","Accordion","PermissionValueProvider","undefined","PermissionRenderer"],"mappings":";;;;;AAQA,MAAMA,UAAU,CAACC,GAA6BC,IACnCD,EAAE,KAAK,CAAC,aAAa,CAACC,EAAE,KAAK;AAOjC,MAAMC,cAAc,CAAC,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAoB;IACjE,MAAM,EAAEC,mBAAmB,EAAE,GAAGC;IAEhC,MAAMC,YAAYC,QAAoC;QAClD,MAAMC,kBAA8C,EAAE;QACtD,MAAMC,eAA2C,EAAE;QAEnD,KAAK,MAAMC,YAAYN,oBACnB,IAAIM,SAAS,MAAM,EACfF,gBAAgB,IAAI,CAACE;aAErBD,aAAa,IAAI,CAACC;QAI1B,OAAO;eAAIF,gBAAgB,IAAI,CAACX;eAAaY,aAAa,IAAI,CAACZ;SAAS;IAC5E,GAAG;QAACO;KAAoB;IAExB,OAAO,WAAP,GACI,oBAACO,WAASA,MAAAA,WAAAA,GACN,oBAACC,yBAAuBA;QAAC,OAAOV;QAAO,UAAUC;OAC5CG,UAAU,GAAG,CAACI,CAAAA,WACJ,WAAP,GACI,oBAACC,UAAU,IAAI;YACX,KAAKD,SAAS,IAAI,GAAG,MAAMT;YAC3B,OAAOS,SAAS,KAAK;YACrB,aAAaA,SAAS,WAAW;YACjC,MACIA,SAAS,IAAI,GAAG,WAAH,GACT,oBAACC,UAAU,IAAI,CAAC,IAAI;gBAChB,MAAMD,SAAS,IAAI;gBACnB,OAAOA,SAAS,KAAK;iBAEzBG;YAER,eAAa,CAAC,WAAW,EAAEH,SAAS,IAAI,EAAE;WAEzCA,SAAS,MAAM,GAAG,WAAH,GACZ,oBAACI,oBAAkBA;YAAC,QAAQJ,SAAS,MAAM;aAE3CA,SAAS,OAAO;AAQhD"}
+{"version":3,"file":"components/Permissions/Permissions.js","sources":["../../../src/components/Permissions/Permissions.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\nimport type { PermissionRendererConfig } from \"~/permissions/types.js\";\nimport { PermissionValueProvider } from \"~/permissions/PermissionValueContext.js\";\nimport { PermissionRenderer } from \"~/permissions/PermissionRenderer.js\";\nimport { mergeByName } from \"./mergeByName.js\";\n\nconst byTitle = (a: PermissionRendererConfig, b: PermissionRendererConfig) => {\n    return a.title.localeCompare(b.title);\n};\n\ninterface PermissionsProps extends BindComponentRenderProp {\n    id: string;\n}\n\nexport const Permissions = ({ id, value, onChange }: PermissionsProps) => {\n    const { permissionRenderers } = useAdminConfig();\n\n    const renderers = useMemo<PermissionRendererConfig[]>(() => {\n        const systemRenderers: PermissionRendererConfig[] = [];\n        const appRenderers: PermissionRendererConfig[] = [];\n\n        for (const renderer of mergeByName(permissionRenderers)) {\n            if (renderer.system) {\n                systemRenderers.push(renderer);\n            } else {\n                appRenderers.push(renderer);\n            }\n        }\n\n        return [...systemRenderers.sort(byTitle), ...appRenderers.sort(byTitle)];\n    }, [permissionRenderers]);\n\n    return (\n        <Accordion>\n            <PermissionValueProvider value={value} onChange={onChange}>\n                {renderers.map(renderer => {\n                    return (\n                        <Accordion.Item\n                            key={renderer.name + \".\" + id}\n                            title={renderer.title}\n                            description={renderer.description}\n                            icon={\n                                renderer.icon ? (\n                                    <Accordion.Item.Icon\n                                        icon={renderer.icon}\n                                        label={renderer.title}\n                                    />\n                                ) : undefined\n                            }\n                            data-testid={`permission.${renderer.name}`}\n                        >\n                            {renderer.schema ? (\n                                <PermissionRenderer schema={renderer.schema} />\n                            ) : (\n                                renderer.element\n                            )}\n                        </Accordion.Item>\n                    );\n                })}\n            </PermissionValueProvider>\n        </Accordion>\n    );\n};\n"],"names":["byTitle","a","b","Permissions","id","value","onChange","permissionRenderers","useAdminConfig","renderers","useMemo","systemRenderers","appRenderers","renderer","mergeByName","Accordion","PermissionValueProvider","undefined","PermissionRenderer"],"mappings":";;;;;;AASA,MAAMA,UAAU,CAACC,GAA6BC,IACnCD,EAAE,KAAK,CAAC,aAAa,CAACC,EAAE,KAAK;AAOjC,MAAMC,cAAc,CAAC,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAoB;IACjE,MAAM,EAAEC,mBAAmB,EAAE,GAAGC;IAEhC,MAAMC,YAAYC,QAAoC;QAClD,MAAMC,kBAA8C,EAAE;QACtD,MAAMC,eAA2C,EAAE;QAEnD,KAAK,MAAMC,YAAYC,YAAYP,qBAC/B,IAAIM,SAAS,MAAM,EACfF,gBAAgB,IAAI,CAACE;aAErBD,aAAa,IAAI,CAACC;QAI1B,OAAO;eAAIF,gBAAgB,IAAI,CAACX;eAAaY,aAAa,IAAI,CAACZ;SAAS;IAC5E,GAAG;QAACO;KAAoB;IAExB,OAAO,WAAP,GACI,oBAACQ,WAASA,MAAAA,WAAAA,GACN,oBAACC,yBAAuBA;QAAC,OAAOX;QAAO,UAAUC;OAC5CG,UAAU,GAAG,CAACI,CAAAA,WACJ,WAAP,GACI,oBAACE,UAAU,IAAI;YACX,KAAKF,SAAS,IAAI,GAAG,MAAMT;YAC3B,OAAOS,SAAS,KAAK;YACrB,aAAaA,SAAS,WAAW;YACjC,MACIA,SAAS,IAAI,GAAG,WAAH,GACT,oBAACE,UAAU,IAAI,CAAC,IAAI;gBAChB,MAAMF,SAAS,IAAI;gBACnB,OAAOA,SAAS,KAAK;iBAEzBI;YAER,eAAa,CAAC,WAAW,EAAEJ,SAAS,IAAI,EAAE;WAEzCA,SAAS,MAAM,GAAG,WAAH,GACZ,oBAACK,oBAAkBA;YAAC,QAAQL,SAAS,MAAM;aAE3CA,SAAS,OAAO;AAQhD"}

package/components/Permissions/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./StyledComponents.js";
 export { Permissions } from "./Permissions.js";
+export { mergeByName } from "./mergeByName.js";
 export { CannotUseAaclAlert } from "./CannotUseAaclAlert.js";
 export * from "./PermissionsGroup.js";

package/components/Permissions/index.js

@@ -1,4 +1,5 @@
 export * from "./StyledComponents.js";
 export * from "./PermissionsGroup.js";
 export { Permissions } from "./Permissions.js";
+export { mergeByName } from "./mergeByName.js";
 export { CannotUseAaclAlert } from "./CannotUseAaclAlert.js";

package/components/Permissions/mergeByName.d.ts

@@ -0,0 +1,11 @@
+import type { PermissionRendererConfig } from "../../permissions/types.js";
+/**
+ * Collapses renderers that share the same group `name` into a single renderer,
+ * concatenating their schema entities (deduped by entity id). This lets multiple
+ * apps contribute their own entities to one shared permission group (e.g. several
+ * dev tools each registering into "dev-tools") while the UI still shows one group.
+ *
+ * Group metadata (title, description, icon, system) is taken from the first
+ * registration of a given name; subsequent registrations only add entities.
+ */
+export declare const mergeByName: (renderers: PermissionRendererConfig[]) => PermissionRendererConfig[];

package/components/Permissions/mergeByName.js

@@ -0,0 +1,33 @@
+const mergeByName = (renderers)=>{
+    const byName = new Map();
+    for (const renderer of renderers){
+        const existing = byName.get(renderer.name);
+        if (!existing) {
+            byName.set(renderer.name, renderer.schema ? {
+                ...renderer,
+                schema: {
+                    ...renderer.schema,
+                    entities: [
+                        ...renderer.schema.entities ?? []
+                    ]
+                }
+            } : {
+                ...renderer
+            });
+            continue;
+        }
+        if (existing.schema && renderer.schema) {
+            const entities = existing.schema.entities ?? [];
+            const seen = new Set(entities.map((entity)=>entity.id));
+            for (const entity of renderer.schema.entities ?? [])if (!seen.has(entity.id)) {
+                entities.push(entity);
+                seen.add(entity.id);
+            }
+            existing.schema.entities = entities;
+        }
+    }
+    return Array.from(byName.values());
+};
+export { mergeByName };
+
+//# sourceMappingURL=mergeByName.js.map

package/components/Permissions/mergeByName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Permissions/mergeByName.js","sources":["../../../src/components/Permissions/mergeByName.ts"],"sourcesContent":["import type { PermissionRendererConfig } from \"~/permissions/types.js\";\n\n/**\n * Collapses renderers that share the same group `name` into a single renderer,\n * concatenating their schema entities (deduped by entity id). This lets multiple\n * apps contribute their own entities to one shared permission group (e.g. several\n * dev tools each registering into \"dev-tools\") while the UI still shows one group.\n *\n * Group metadata (title, description, icon, system) is taken from the first\n * registration of a given name; subsequent registrations only add entities.\n */\nexport const mergeByName = (renderers: PermissionRendererConfig[]): PermissionRendererConfig[] => {\n    const byName = new Map<string, PermissionRendererConfig>();\n\n    for (const renderer of renderers) {\n        const existing = byName.get(renderer.name);\n\n        if (!existing) {\n            // Clone the schema (and its entities) so we never mutate the registered config.\n            byName.set(\n                renderer.name,\n                renderer.schema\n                    ? {\n                          ...renderer,\n                          schema: {\n                              ...renderer.schema,\n                              entities: [...(renderer.schema.entities ?? [])]\n                          }\n                      }\n                    : { ...renderer }\n            );\n            continue;\n        }\n\n        // Merge additional entities into the already-seen group.\n        if (existing.schema && renderer.schema) {\n            const entities = existing.schema.entities ?? [];\n            const seen = new Set(entities.map(entity => entity.id));\n            for (const entity of renderer.schema.entities ?? []) {\n                if (!seen.has(entity.id)) {\n                    entities.push(entity);\n                    seen.add(entity.id);\n                }\n            }\n            existing.schema.entities = entities;\n        }\n    }\n\n    return Array.from(byName.values());\n};\n"],"names":["mergeByName","renderers","byName","Map","renderer","existing","entities","seen","Set","entity","Array"],"mappings":"AAWO,MAAMA,cAAc,CAACC;IACxB,MAAMC,SAAS,IAAIC;IAEnB,KAAK,MAAMC,YAAYH,UAAW;QAC9B,MAAMI,WAAWH,OAAO,GAAG,CAACE,SAAS,IAAI;QAEzC,IAAI,CAACC,UAAU;YAEXH,OAAO,GAAG,CACNE,SAAS,IAAI,EACbA,SAAS,MAAM,GACT;gBACI,GAAGA,QAAQ;gBACX,QAAQ;oBACJ,GAAGA,SAAS,MAAM;oBAClB,UAAU;2BAAKA,SAAS,MAAM,CAAC,QAAQ,IAAI,EAAE;qBAAE;gBACnD;YACJ,IACA;gBAAE,GAAGA,QAAQ;YAAC;YAExB;QACJ;QAGA,IAAIC,SAAS,MAAM,IAAID,SAAS,MAAM,EAAE;YACpC,MAAME,WAAWD,SAAS,MAAM,CAAC,QAAQ,IAAI,EAAE;YAC/C,MAAME,OAAO,IAAIC,IAAIF,SAAS,GAAG,CAACG,CAAAA,SAAUA,OAAO,EAAE;YACrD,KAAK,MAAMA,UAAUL,SAAS,MAAM,CAAC,QAAQ,IAAI,EAAE,CAC/C,IAAI,CAACG,KAAK,GAAG,CAACE,OAAO,EAAE,GAAG;gBACtBH,SAAS,IAAI,CAACG;gBACdF,KAAK,GAAG,CAACE,OAAO,EAAE;YACtB;YAEJJ,SAAS,MAAM,CAAC,QAAQ,GAAGC;QAC/B;IACJ;IAEA,OAAOI,MAAM,IAAI,CAACR,OAAO,MAAM;AACnC"}

package/components/RolesMultiAutocomplete/index.d.ts

@@ -3,5 +3,9 @@ import { MultiAutoComplete } from "@webiny/admin-ui";
 type RolesMultiAutocompleteProps = Omit<React.ComponentProps<typeof MultiAutoComplete>, "options" | "onValuesChange"> & {
     onChange?: (values: string[]) => void;
 };
-export declare const RolesMultiAutocomplete: ({ onChange, values, ...props }: RolesMultiAutocompleteProps) => React.JSX.Element;
+export declare const RolesMultiAutocomplete: (({ onChange, ...props }: RolesMultiAutocompleteProps) => React.JSX.Element) & React.NamedExoticComponent<Omit<import("@webiny/admin-ui/MultiAutoComplete/primitives").MultiAutoCompletePrimitiveProps & import("@webiny/admin-ui").FormComponentProps<any>, "onValuesChange" | "options"> & {
+    onChange?: (values: string[]) => void;
+}> & {
+    readonly type: ({ onChange, ...props }: RolesMultiAutocompleteProps) => React.JSX.Element;
+};
 export {};

package/components/RolesMultiAutocomplete/index.js

@@ -1,26 +1,36 @@
-import react, { useCallback, useMemo } from "react";
+import react, { useCallback, useEffect, useMemo } from "react";
 import { MultiAutoComplete } from "@webiny/admin-ui";
-import { LIST_ROLES } from "./graphql.js";
-import { useQuery } from "@apollo/react-hooks";
-const RolesMultiAutocomplete = ({ onChange, values, ...props })=>{
-    const { data, loading } = useQuery(LIST_ROLES);
-    const rawOptions = loading || !data ? [] : data.security.roles.data;
-    const options = useMemo(()=>rawOptions.map((role)=>({
-                label: role.name,
-                value: role.id
-            })), [
-        rawOptions
+import { useFeature } from "@webiny/app";
+import { observer } from "mobx-react-lite";
+import { RolesAutocompletePresenterFeature } from "../../presentation/accessManagement/roles/rolesAutocomplete/feature.js";
+const RolesMultiAutocomplete = observer(({ onChange, ...props })=>{
+    const { presenter } = useFeature(RolesAutocompletePresenterFeature);
+    useEffect(()=>{
+        presenter.init();
+    }, [
+        presenter
     ]);
     const onValuesChange = useCallback((ids)=>onChange?.(ids), [
         onChange
     ]);
+    const values = useMemo(()=>{
+        const selected = Array.isArray(props.values) ? props.values : Array.isArray(props.value) ? props.value : [];
+        return selected.reduce((acc, s)=>{
+            if ("string" == typeof s) acc.push(s);
+            else if ("object" == typeof s && s?.id) acc.push(s.id);
+            return acc;
+        }, []);
+    }, [
+        props.values,
+        props.value
+    ]);
     return /*#__PURE__*/ react.createElement(MultiAutoComplete, {
         ...props,
-        options: options,
-        values: loading ? void 0 : values,
+        options: presenter.vm.options,
+        values: presenter.vm.loading ? void 0 : values,
         onValuesChange: onValuesChange
     });
-};
+});
 export { RolesMultiAutocomplete };
 
 //# sourceMappingURL=index.js.map

package/components/RolesMultiAutocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/RolesMultiAutocomplete/index.js","sources":["../../../src/components/RolesMultiAutocomplete/index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_ROLES } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype RolesMultiAutocompleteProps = Omit<\n    React.ComponentProps<typeof MultiAutoComplete>,\n    \"options\" | \"onValuesChange\"\n> & {\n    onChange?: (values: string[]) => void;\n};\n\nexport const RolesMultiAutocomplete = ({\n    onChange,\n    values,\n    ...props\n}: RolesMultiAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_ROLES);\n    const rawOptions = loading || !data ? [] : data.security.roles.data;\n\n    const options = useMemo(\n        () => rawOptions.map((role: any) => ({ label: role.name, value: role.id })),\n        [rawOptions]\n    );\n\n    const onValuesChange = useCallback((ids: string[]) => onChange?.(ids), [onChange]);\n\n    return (\n        <MultiAutoComplete\n            {...props}\n            options={options}\n            values={loading ? undefined : (values as string[] | undefined)}\n            onValuesChange={onValuesChange}\n        />\n    );\n};\n"],"names":["RolesMultiAutocomplete","onChange","values","props","data","loading","useQuery","LIST_ROLES","rawOptions","options","useMemo","role","onValuesChange","useCallback","ids","MultiAutoComplete","undefined"],"mappings":";;;;AAYO,MAAMA,yBAAyB,CAAC,EACnCC,QAAQ,EACRC,MAAM,EACN,GAAGC,OACuB;IAC1B,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC,SAASC;IACnC,MAAMC,aAAaH,WAAW,CAACD,OAAO,EAAE,GAAGA,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI;IAEnE,MAAMK,UAAUC,QACZ,IAAMF,WAAW,GAAG,CAAC,CAACG,OAAe;gBAAE,OAAOA,KAAK,IAAI;gBAAE,OAAOA,KAAK,EAAE;YAAC,KACxE;QAACH;KAAW;IAGhB,MAAMI,iBAAiBC,YAAY,CAACC,MAAkBb,WAAWa,MAAM;QAACb;KAAS;IAEjF,OAAO,WAAP,GACI,oBAACc,mBAAiBA;QACb,GAAGZ,KAAK;QACT,SAASM;QACT,QAAQJ,UAAUW,SAAad;QAC/B,gBAAgBU;;AAG5B"}
+{"version":3,"file":"components/RolesMultiAutocomplete/index.js","sources":["../../../src/components/RolesMultiAutocomplete/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { MultiAutoComplete } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { observer } from \"mobx-react-lite\";\nimport { RolesAutocompletePresenterFeature } from \"~/presentation/accessManagement/roles/rolesAutocomplete/feature.js\";\n\ntype RolesMultiAutocompleteProps = Omit<\n    React.ComponentProps<typeof MultiAutoComplete>,\n    \"options\" | \"onValuesChange\"\n> & {\n    onChange?: (values: string[]) => void;\n};\n\nexport const RolesMultiAutocomplete = observer(\n    ({ onChange, ...props }: RolesMultiAutocompleteProps) => {\n        const { presenter } = useFeature(RolesAutocompletePresenterFeature);\n\n        useEffect(() => {\n            presenter.init();\n        }, [presenter]);\n\n        const onValuesChange = useCallback((ids: string[]) => onChange?.(ids), [onChange]);\n\n        const values = useMemo(() => {\n            const selected = Array.isArray(props.values)\n                ? props.values\n                : Array.isArray(props.value)\n                  ? props.value\n                  : [];\n\n            return selected.reduce<string[]>((acc, s) => {\n                if (typeof s === \"string\") {\n                    acc.push(s);\n                } else if (typeof s === \"object\" && s?.id) {\n                    acc.push(s.id);\n                }\n                return acc;\n            }, []);\n        }, [props.values, props.value]);\n\n        return (\n            <MultiAutoComplete\n                {...props}\n                options={presenter.vm.options}\n                values={presenter.vm.loading ? undefined : values}\n                onValuesChange={onValuesChange}\n            />\n        );\n    }\n);\n"],"names":["RolesMultiAutocomplete","observer","onChange","props","presenter","useFeature","RolesAutocompletePresenterFeature","useEffect","onValuesChange","useCallback","ids","values","useMemo","selected","Array","acc","s","MultiAutoComplete","undefined"],"mappings":";;;;;AAaO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAAoC;IAChD,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IAEjCC,UAAU;QACNH,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,MAAMI,iBAAiBC,YAAY,CAACC,MAAkBR,WAAWQ,MAAM;QAACR;KAAS;IAEjF,MAAMS,SAASC,QAAQ;QACnB,MAAMC,WAAWC,MAAM,OAAO,CAACX,MAAM,MAAM,IACrCA,MAAM,MAAM,GACZW,MAAM,OAAO,CAACX,MAAM,KAAK,IACvBA,MAAM,KAAK,GACX,EAAE;QAEV,OAAOU,SAAS,MAAM,CAAW,CAACE,KAAKC;YACnC,IAAI,AAAa,YAAb,OAAOA,GACPD,IAAI,IAAI,CAACC;iBACN,IAAI,AAAa,YAAb,OAAOA,KAAkBA,GAAG,IACnCD,IAAI,IAAI,CAACC,EAAE,EAAE;YAEjB,OAAOD;QACX,GAAG,EAAE;IACT,GAAG;QAACZ,MAAM,MAAM;QAAEA,MAAM,KAAK;KAAC;IAE9B,OAAO,WAAP,GACI,oBAACc,mBAAiBA;QACb,GAAGd,KAAK;QACT,SAASC,UAAU,EAAE,CAAC,OAAO;QAC7B,QAAQA,UAAU,EAAE,CAAC,OAAO,GAAGc,SAAYP;QAC3C,gBAAgBH;;AAG5B"}

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "@webiny/admin-ui";
 declare const simpleFormInnerVariants: (props?: ({
-    size?: "full" | "md" | "lg" | "xl" | null | undefined;
+    size?: "full" | "lg" | "md" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;

package/components/SimpleUI/InputField.d.ts

@@ -8,5 +8,6 @@ interface InputBoxProps {
     type?: "string" | "number";
     [key: string]: any;
 }
-declare const _default: React.MemoExoticComponent<({ className, value, onChange, onKeyDown, label, description, validation, defaultValue, ...props }: InputBoxProps) => React.JSX.Element>;
+declare const InputField: ({ className, value, onChange, onKeyDown, label, description, validation, defaultValue, ...props }: InputBoxProps) => React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof InputField>;
 export default _default;

package/components/SingleImageUpload.d.ts

@@ -64,5 +64,4 @@ export interface SingleImageUploadProps extends FormComponentProps {
      */
     variant?: FilePickerProps["variant"];
 }
-declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;
-export default SingleImageUpload;
+export declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;

package/components/SingleImageUpload.js

@@ -35,7 +35,6 @@ const SingleImageUpload = (props)=>{
             }))
     });
 };
-const components_SingleImageUpload = SingleImageUpload;
-export default components_SingleImageUpload;
+export { SingleImageUpload };
 
 //# sourceMappingURL=SingleImageUpload.js.map

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/SingleImageUpload.js","sources":["../../src/components/SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: Pick<FileManagerFileItem, \"id\" | \"src\"> | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"names":["SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","useCallback","FileManager","showFileManager","FilePicker","FileItem"],"mappings":";;;AAkFA,MAAMA,oBAAoB,CAACC;IACvB,MAAM,EACFC,MAAM,EACNC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,KAAK,EACLC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,IAAI,EACP,GAAGb;IAEJ,MAAMc,WAAWC,YACb,CAACJ;QACG,IAAI,CAACX,MAAM,QAAQ,EACf;QAGJ,IAAIW,SAAS,CAACN,iBAAiB,YAC3BL,MAAM,QAAQ,CAAC;YAAE,IAAIW,MAAM,EAAE;YAAE,KAAKA,MAAM,GAAG;QAAC;QAIlD,IAAIA,SAASN,iBAAiB,YAC1BL,MAAM,QAAQ,CAACW;QAInBX,MAAM,QAAQ,CAAC;IACnB,GACA;QAACA,MAAM,QAAQ;KAAC;IAGpB,OAAO,WAAP,GACI,oBAACgB,aAAWA;QACR,UAAUF;QACV,QAAQb;QACR,QAAQ,CAACA;QACT,SAASM;QACT,QAAQ,CAAC,EAAEU,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOZ;gBACP,aAAaH;gBACb,YAAYO;gBACZ,WAAWR;gBACX,UAAUE;gBACV,OAAOO,QAAQQ,SAAS,aAAa,CAACR,MAAM,GAAG,IAAI;gBACnD,cAAcM;gBACd,cAAc,IAAMH,SAAS;gBAC7B,mBAAmBN;gBACnB,eAAeC;gBACf,SAASG;gBACT,MAAMC;;;AAM9B;AAEA,qCAAed"}
+{"version":3,"file":"components/SingleImageUpload.js","sources":["../../src/components/SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: Pick<FileManagerFileItem, \"id\" | \"src\"> | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nexport const SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n"],"names":["SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","useCallback","FileManager","showFileManager","FilePicker","FileItem"],"mappings":";;;AAkFO,MAAMA,oBAAoB,CAACC;IAC9B,MAAM,EACFC,MAAM,EACNC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,KAAK,EACvBC,KAAK,EACLC,OAAO,EACPC,iBAAiB,EACjBC,aAAa,EACbC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,IAAI,EACP,GAAGb;IAEJ,MAAMc,WAAWC,YACb,CAACJ;QACG,IAAI,CAACX,MAAM,QAAQ,EACf;QAGJ,IAAIW,SAAS,CAACN,iBAAiB,YAC3BL,MAAM,QAAQ,CAAC;YAAE,IAAIW,MAAM,EAAE;YAAE,KAAKA,MAAM,GAAG;QAAC;QAIlD,IAAIA,SAASN,iBAAiB,YAC1BL,MAAM,QAAQ,CAACW;QAInBX,MAAM,QAAQ,CAAC;IACnB,GACA;QAACA,MAAM,QAAQ;KAAC;IAGpB,OAAO,WAAP,GACI,oBAACgB,aAAWA;QACR,UAAUF;QACV,QAAQb;QACR,QAAQ,CAACA;QACT,SAASM;QACT,QAAQ,CAAC,EAAEU,eAAe,EAAE,iBACxB,wDACI,oBAACC,YAAUA;gBACP,OAAOZ;gBACP,aAAaH;gBACb,YAAYO;gBACZ,WAAWR;gBACX,UAAUE;gBACV,OAAOO,QAAQQ,SAAS,aAAa,CAACR,MAAM,GAAG,IAAI;gBACnD,cAAcM;gBACd,cAAc,IAAMH,SAAS;gBAC7B,mBAAmBN;gBACnB,eAAeC;gBACf,SAASG;gBACT,MAAMC;;;AAM9B"}

package/components/SplitView/SplitView.d.ts

@@ -8,6 +8,6 @@ export declare const SplitView: ({ children, className, namespace, ...props }: S
 interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
     span?: ColumnProps["span"];
 }
-export declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-export declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export declare const LeftPanel: ({ children, className, span, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export declare const RightPanel: ({ children, className, span, ...props }: SplitViewPanelProps) => React.JSX.Element;
 export {};

package/components/SplitView/SplitView.js

@@ -4,7 +4,7 @@ import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
 import * as __rspack_external_react from "react";
 const SplitView = ({ children, className, namespace = "splitView", ...props })=>{
     const localStorage = useLocalStorage();
-    const layout = useLocalStorageValue(namespace);
+    const layout = useLocalStorageValue(`${namespace}/panels`);
     const saveLayout = (0, __rspack_external_react.useCallback)((layout)=>{
         localStorage.set(`${namespace}/panels`, layout);
     }, [
@@ -21,13 +21,13 @@ const SplitView = ({ children, className, namespace = "splitView", ...props })=>
 };
 const getDefaultSize = (span)=>{
     const spanValue = "number" == typeof span && span > 0 && span <= 12 ? span : 6;
-    return spanValue / 12 * 100;
+    return `${spanValue / 12 * 100}%`;
 };
-const LeftPanel = ({ children, className, ...props })=>{
-    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);
+const LeftPanel = ({ children, className, span, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(span || 5);
     return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
         defaultSize: defaultSize,
-        minSize: 10,
+        minSize: "10%",
         id: "leftPanel",
         className: cn("webiny-split-view__right-panel", className),
         ...props
@@ -37,11 +37,11 @@ const LeftPanel = ({ children, className, ...props })=>{
         orientation: "vertical"
     })));
 };
-const RightPanel = ({ children, className, ...props })=>{
-    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);
+const RightPanel = ({ children, className, span, ...props })=>{
+    const defaultSize = props.defaultSize ?? getDefaultSize(span || 7);
     return /*#__PURE__*/ __rspack_external_react.createElement(Panel, {
         defaultSize: defaultSize,
-        minSize: 30,
+        minSize: "30%",
         id: "rightPanel",
         className: cn("overflow-scroll! webiny-split-view__right-panel", className),
         ...props,