@webiny/app-admin-ui 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/Dashboard/Welcome.js

@@ -1,32 +1,119 @@
-import react from "react";
-import { Grid, Heading } from "@webiny/admin-ui";
-import { useAdminConfig, useSecurity } from "@webiny/app-admin";
-const Welcome = ()=>{
+import react, { useEffect, useMemo, useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Heading, Text } from "@webiny/admin-ui";
+import { createReactiveComponent, useAdminConfig, useSecurity } from "@webiny/app-admin";
+import { useDashboardLayoutPresenter } from "./dashboardLayout/presenter/useDashboardLayoutPresenter.js";
+import { toColumnIndex } from "./dashboardLayout/toColumnIndex.js";
+import { AddWidgetDrawer } from "./components/addWidgetDrawer/AddWidgetDrawer.js";
+import { DashboardToolbar } from "./components/DashboardToolbar.js";
+import { EditableColumns } from "./components/layout/EditableColumns.js";
+import { StaticColumns } from "./components/layout/StaticColumns.js";
+import { useColumnsThatFit } from "./components/layout/useColumnsThatFit.js";
+import { useWidgetPortals } from "./components/layout/useWidgetPortals.js";
+import { DASHBOARD_MAX_WIDTH } from "./components/layout/layoutConstants.js";
+const WelcomeBase = ()=>{
     const { identity } = useSecurity();
     const { widgets } = useAdminConfig();
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "my-xxl"
+    const presenter = useDashboardLayoutPresenter();
+    const elements = useMemo(()=>{
+        const map = new Map();
+        widgets.forEach((widget)=>map.set(widget.name, widget.element));
+        return map;
+    }, [
+        widgets
+    ]);
+    const titles = useMemo(()=>{
+        const map = new Map();
+        widgets.forEach((widget)=>map.set(widget.name, {
+                title: widget.title ?? widget.name
+            }));
+        return map;
+    }, [
+        widgets
+    ]);
+    const widgetsKey = widgets.map((w)=>`${w.name}:${toColumnIndex(w.column)}`).join("|");
+    useEffect(()=>{
+        const inputs = widgets.map((widget)=>({
+                name: widget.name,
+                column: toColumnIndex(widget.column)
+            }));
+        presenter.init(identity.id, inputs);
+    }, [
+        identity?.id,
+        widgetsKey
+    ]);
+    useEffect(()=>()=>presenter.dispose(), [
+        presenter
+    ]);
+    const { vm } = presenter;
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const openDrawer = ()=>setDrawerOpen(true);
+    const drawerWidgets = widgets.map((widget)=>{
+        const registeredColumn = toColumnIndex(widget.column);
+        return {
+            name: widget.name,
+            title: widget.title ?? widget.name,
+            description: widget.description,
+            group: widget.group,
+            preview: widget.preview,
+            added: !vm.hidden.includes(widget.name),
+            defaultColumn: Math.min(registeredColumn, vm.columnCount - 1)
+        };
+    });
+    const { ref: containerRef, visibleCount, allFit } = useColumnsThatFit(vm.columnCount);
+    const placed = vm.columns.flat();
+    const { slots, portals } = useWidgetPortals(placed, elements);
+    const editing = vm.editing && allFit;
+    let subtitle = "Your dashboard. Arrange the widgets however you work best.";
+    let columns = /*#__PURE__*/ react.createElement(StaticColumns, {
+        columns: vm.columns,
+        visibleCount: visibleCount,
+        slots: slots
+    });
+    if (editing) {
+        subtitle = "Drag widgets to rearrange them, and click Done when you're finished.";
+        columns = /*#__PURE__*/ react.createElement(EditableColumns, {
+            vm: vm,
+            slots: slots,
+            titles: titles,
+            presenter: presenter,
+            onBrowseWidgets: openDrawer
+        });
+    }
+    return /*#__PURE__*/ react.createElement(DndProvider, {
+        backend: HTML5Backend
     }, /*#__PURE__*/ react.createElement("div", {
-        className: "mb-3xl"
-    }, /*#__PURE__*/ react.createElement(Heading, {
+        className: "my-xxl",
+        ref: containerRef
+    }, portals, /*#__PURE__*/ react.createElement("div", {
+        className: "mb-xl flex items-center justify-between gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
         level: 3
-    }, `Hi ${identity.displayName}, what are we doing today?`)), /*#__PURE__*/ react.createElement(Grid, {
-        gap: "spacious",
-        className: "max-w-[1200px]"
-    }, /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 6
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg"
-    }, widgets.filter((w)=>"left" === w.column).map((widget)=>/*#__PURE__*/ react.createElement(react.Fragment, {
-            key: widget.name
-        }, widget.element)))), /*#__PURE__*/ react.createElement(Grid.Column, {
-        span: 6
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg"
-    }, widgets.filter((w)=>"right" === w.column).map((widget)=>/*#__PURE__*/ react.createElement(react.Fragment, {
-            key: widget.name
-        }, widget.element))))));
+    }, `Hi ${identity.displayName}, what are we doing today?`), /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "mt-xs text-neutral-strong"
+    }, subtitle)), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-none items-center gap-sm"
+    }, /*#__PURE__*/ react.createElement(DashboardToolbar, {
+        vm: vm,
+        editing: editing,
+        canCustomize: allFit,
+        presenter: presenter,
+        onAddWidget: openDrawer
+    }))), columns, /*#__PURE__*/ react.createElement(AddWidgetDrawer, {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        widgets: drawerWidgets,
+        columnCount: vm.columnCount,
+        presenter: presenter
+    })));
 };
+const Welcome = createReactiveComponent(WelcomeBase);
 const Dashboard_Welcome = Welcome;
 export default Dashboard_Welcome;
 

package/Dashboard/Welcome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard/Welcome.js","sources":["../../src/Dashboard/Welcome.tsx"],"sourcesContent":["import React from \"react\";\nimport { Grid, Heading } from \"@webiny/admin-ui\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { useAdminConfig } from \"@webiny/app-admin\";\n\nconst Welcome = () => {\n    const { identity } = useSecurity();\n    const { widgets } = useAdminConfig();\n\n    return (\n        <div className={\"my-xxl\"}>\n            <div className={\"mb-3xl\"}>\n                <Heading\n                    level={3}\n                >{`Hi ${identity!.displayName}, what are we doing today?`}</Heading>\n            </div>\n            <Grid gap={\"spacious\"} className={\"max-w-[1200px]\"}>\n                <Grid.Column span={6}>\n                    <div className={\"flex flex-col gap-lg\"}>\n                        {widgets\n                            .filter(w => w.column === \"left\")\n                            .map(widget => (\n                                <React.Fragment key={widget.name}>{widget.element}</React.Fragment>\n                            ))}\n                    </div>\n                </Grid.Column>\n                <Grid.Column span={6}>\n                    <div className={\"flex flex-col gap-lg\"}>\n                        {widgets\n                            .filter(w => w.column === \"right\")\n                            .map(widget => (\n                                <React.Fragment key={widget.name}>{widget.element}</React.Fragment>\n                            ))}\n                    </div>\n                </Grid.Column>\n            </Grid>\n        </div>\n    );\n};\n\nexport default Welcome;\n"],"names":["Welcome","identity","useSecurity","widgets","useAdminConfig","Heading","Grid","w","widget","React"],"mappings":";;;AAKA,MAAMA,UAAU;IACZ,MAAM,EAAEC,QAAQ,EAAE,GAAGC;IACrB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IAEpB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,SAAOA;QACJ,OAAO;OACT,CAAC,GAAG,EAAEJ,SAAU,WAAW,CAAC,0BAA0B,CAAC,kBAE7D,oBAACK,MAAIA;QAAC,KAAK;QAAY,WAAW;qBAC9B,oBAACA,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;OACXH,QACI,MAAM,CAACI,CAAAA,IAAKA,AAAa,WAAbA,EAAE,MAAM,EACpB,GAAG,CAACC,CAAAA,SAAAA,WAAAA,GACD,oBAACC,MAAAA,QAAc;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO,oBAIjE,oBAACF,KAAK,MAAM;QAAC,MAAM;qBACf,oBAAC;QAAI,WAAW;OACXH,QACI,MAAM,CAACI,CAAAA,IAAKA,AAAa,YAAbA,EAAE,MAAM,EACpB,GAAG,CAACC,CAAAA,SAAAA,WAAAA,GACD,oBAACC,MAAAA,QAAc;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO;AAOjF;AAEA,0BAAeR"}
+{"version":3,"file":"Dashboard/Welcome.js","sources":["../../src/Dashboard/Welcome.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useMemo } from \"react\";\nimport { useState } from \"react\";\nimport { DndProvider } from \"react-dnd\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { Heading } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { useSecurity } from \"@webiny/app-admin\";\nimport { useAdminConfig } from \"@webiny/app-admin\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport { useDashboardLayoutPresenter } from \"./dashboardLayout/presenter/useDashboardLayoutPresenter.js\";\nimport { toColumnIndex } from \"./dashboardLayout/toColumnIndex.js\";\nimport { AddWidgetDrawer } from \"./components/addWidgetDrawer/AddWidgetDrawer.js\";\nimport type { DrawerWidget } from \"./components/addWidgetDrawer/types.js\";\nimport { DashboardToolbar } from \"./components/DashboardToolbar.js\";\nimport { EditableColumns } from \"./components/layout/EditableColumns.js\";\nimport { StaticColumns } from \"./components/layout/StaticColumns.js\";\nimport { useColumnsThatFit } from \"./components/layout/useColumnsThatFit.js\";\nimport { useWidgetPortals } from \"./components/layout/useWidgetPortals.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./components/layout/layoutConstants.js\";\n\nconst WelcomeBase = () => {\n    const { identity } = useSecurity();\n    const { widgets } = useAdminConfig();\n    const presenter = useDashboardLayoutPresenter();\n\n    // Map of widget name -> React element, so the presenter can deal purely in names.\n    const elements = useMemo(() => {\n        const map = new Map<string, React.ReactElement>();\n        widgets.forEach(widget => map.set(widget.name, widget.element));\n        return map;\n    }, [widgets]);\n\n    // Widget titles, for the cards' labels while customizing.\n    const titles = useMemo(() => {\n        const map = new Map<string, { title: string }>();\n        widgets.forEach(widget => map.set(widget.name, { title: widget.title ?? widget.name }));\n        return map;\n    }, [widgets]);\n\n    // Re-initialize the presenter when the user or the set of registered widgets changes.\n    const widgetsKey = widgets.map(w => `${w.name}:${toColumnIndex(w.column)}`).join(\"|\");\n    useEffect(() => {\n        const inputs = widgets.map(widget => ({\n            name: widget.name,\n            column: toColumnIndex(widget.column)\n        }));\n        presenter.init(identity!.id, inputs);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [identity?.id, widgetsKey]);\n\n    // The presenter is a singleton; leaving the dashboard resets per-visit state like Customize mode.\n    useEffect(() => {\n        return () => presenter.dispose();\n    }, [presenter]);\n\n    // A reactive component re-renders when anything it reads from `vm` changes.\n    const { vm } = presenter;\n\n    const [drawerOpen, setDrawerOpen] = useState(false);\n    const openDrawer = () => setDrawerOpen(true);\n    const drawerWidgets: DrawerWidget[] = widgets.map(widget => {\n        // Same clamping the presenter applies, so \"(default)\" marks the column it would pick.\n        const registeredColumn = toColumnIndex(widget.column);\n        return {\n            name: widget.name,\n            title: widget.title ?? widget.name,\n            description: widget.description,\n            group: widget.group,\n            preview: widget.preview,\n            added: !vm.hidden.includes(widget.name),\n            defaultColumn: Math.min(registeredColumn, vm.columnCount - 1)\n        };\n    });\n\n    const { ref: containerRef, visibleCount, allFit } = useColumnsThatFit(vm.columnCount);\n    const placed = vm.columns.flat();\n    const { slots, portals } = useWidgetPortals(placed, elements);\n\n    // Customize mode needs every chosen column on screen; too narrow, and it isn't offered.\n    const editing = vm.editing && allFit;\n\n    let subtitle = \"Your dashboard. Arrange the widgets however you work best.\";\n    let columns = <StaticColumns columns={vm.columns} visibleCount={visibleCount} slots={slots} />;\n    if (editing) {\n        subtitle = \"Drag widgets to rearrange them, and click Done when you're finished.\";\n        columns = (\n            <EditableColumns\n                vm={vm}\n                slots={slots}\n                titles={titles}\n                presenter={presenter}\n                onBrowseWidgets={openDrawer}\n            />\n        );\n    }\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <div className={\"my-xxl\"} ref={containerRef}>\n                {portals}\n                <div\n                    className={\"mb-xl flex items-center justify-between gap-lg\"}\n                    style={{ maxWidth: DASHBOARD_MAX_WIDTH }}\n                >\n                    <div>\n                        <Heading\n                            level={3}\n                        >{`Hi ${identity!.displayName}, what are we doing today?`}</Heading>\n                        <Text as={\"div\"} size={\"md\"} className={\"mt-xs text-neutral-strong\"}>\n                            {subtitle}\n                        </Text>\n                    </div>\n                    <div className={\"flex flex-none items-center gap-sm\"}>\n                        <DashboardToolbar\n                            vm={vm}\n                            editing={editing}\n                            canCustomize={allFit}\n                            presenter={presenter}\n                            onAddWidget={openDrawer}\n                        />\n                    </div>\n                </div>\n                {columns}\n                <AddWidgetDrawer\n                    open={drawerOpen}\n                    onOpenChange={setDrawerOpen}\n                    widgets={drawerWidgets}\n                    columnCount={vm.columnCount}\n                    presenter={presenter}\n                />\n            </div>\n        </DndProvider>\n    );\n};\n\nconst Welcome = createReactiveComponent(WelcomeBase);\n\nexport default Welcome;\n"],"names":["WelcomeBase","identity","useSecurity","widgets","useAdminConfig","presenter","useDashboardLayoutPresenter","elements","useMemo","map","Map","widget","titles","widgetsKey","w","toColumnIndex","useEffect","inputs","vm","drawerOpen","setDrawerOpen","useState","openDrawer","drawerWidgets","registeredColumn","Math","containerRef","visibleCount","allFit","useColumnsThatFit","placed","slots","portals","useWidgetPortals","editing","subtitle","columns","StaticColumns","EditableColumns","DndProvider","HTML5Backend","DASHBOARD_MAX_WIDTH","Heading","Text","DashboardToolbar","AddWidgetDrawer","Welcome","createReactiveComponent"],"mappings":"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"}

package/Dashboard/components/DashboardToolbar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../dashboardLayout/presenter/abstractions.js";
+interface DashboardToolbarProps {
+    vm: DashboardLayoutPresenter.ViewModel;
+    editing: boolean;
+    canCustomize: boolean;
+    presenter: DashboardLayoutPresenter.Interface;
+    onAddWidget: () => void;
+}
+export declare const DashboardToolbar: ({ vm, editing, canCustomize, presenter, onAddWidget }: DashboardToolbarProps) => React.JSX.Element;
+export {};

package/Dashboard/components/DashboardToolbar.js

@@ -0,0 +1,48 @@
+import react from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/restart_alt.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as dashboard_customize_svg_ReactComponent } from "@webiny/icons/dashboard_customize.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
+import { ColumnCountControl } from "./dnd/ColumnCountControl.js";
+const DashboardToolbar = ({ vm, editing, canCustomize, presenter, onAddWidget })=>{
+    if (editing) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ColumnCountControl, {
+        columnCount: vm.columnCount,
+        disabled: null !== vm.draggingName,
+        presenter: presenter
+    }), /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Reset to default layout",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "md",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            "aria-label": "Reset to default layout",
+            onClick: ()=>presenter.resetToDefault()
+        })
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "tertiary",
+        text: "Add widget",
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
+        onClick: onAddWidget
+    }), /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        text: "Done",
+        icon: /*#__PURE__*/ react.createElement(check_svg_ReactComponent, null),
+        onClick: ()=>presenter.stopEditing()
+    }));
+    let hint = "Rearrange, add or remove widgets";
+    if (!canCustomize) hint = "Make the window wider to customize the dashboard";
+    return /*#__PURE__*/ react.createElement(Tooltip, {
+        content: hint,
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "tertiary",
+            text: "Customize",
+            icon: /*#__PURE__*/ react.createElement(dashboard_customize_svg_ReactComponent, null),
+            disabled: !canCustomize,
+            onClick: ()=>presenter.startEditing()
+        })
+    });
+};
+export { DashboardToolbar };
+
+//# sourceMappingURL=DashboardToolbar.js.map

package/Dashboard/components/DashboardToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/DashboardToolbar.js","sources":["../../../src/Dashboard/components/DashboardToolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as RestartAltIcon } from \"@webiny/icons/restart_alt.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DashboardCustomizeIcon } from \"@webiny/icons/dashboard_customize.svg\";\nimport { ReactComponent as CheckIcon } from \"@webiny/icons/check.svg\";\nimport { ColumnCountControl } from \"./dnd/ColumnCountControl.js\";\nimport type { DashboardLayoutPresenter } from \"../dashboardLayout/presenter/abstractions.js\";\n\ninterface DashboardToolbarProps {\n    vm: DashboardLayoutPresenter.ViewModel;\n    // Customize mode is on and every chosen column fits on screen.\n    editing: boolean;\n    // Every chosen column fits on screen, so Customize mode can be offered.\n    canCustomize: boolean;\n    presenter: DashboardLayoutPresenter.Interface;\n    onAddWidget: () => void;\n}\n\n// Top-right controls: one \"Customize\" button normally, the full editing set in Customize mode.\nexport const DashboardToolbar = ({\n    vm,\n    editing,\n    canCustomize,\n    presenter,\n    onAddWidget\n}: DashboardToolbarProps) => {\n    if (editing) {\n        return (\n            <>\n                <ColumnCountControl\n                    columnCount={vm.columnCount}\n                    disabled={vm.draggingName !== null}\n                    presenter={presenter}\n                />\n                <Tooltip\n                    content={\"Reset to default layout\"}\n                    trigger={\n                        <IconButton\n                            variant={\"tertiary\"}\n                            size={\"md\"}\n                            icon={<RestartAltIcon />}\n                            aria-label={\"Reset to default layout\"}\n                            onClick={() => presenter.resetToDefault()}\n                        />\n                    }\n                />\n                <Button\n                    variant={\"tertiary\"}\n                    text={\"Add widget\"}\n                    icon={<AddIcon />}\n                    onClick={onAddWidget}\n                />\n                <Button\n                    variant={\"primary\"}\n                    text={\"Done\"}\n                    icon={<CheckIcon />}\n                    onClick={() => presenter.stopEditing()}\n                />\n            </>\n        );\n    }\n\n    let hint = \"Rearrange, add or remove widgets\";\n    if (!canCustomize) {\n        hint = \"Make the window wider to customize the dashboard\";\n    }\n\n    return (\n        <Tooltip\n            content={hint}\n            trigger={\n                <Button\n                    variant={\"tertiary\"}\n                    text={\"Customize\"}\n                    icon={<DashboardCustomizeIcon />}\n                    disabled={!canCustomize}\n                    onClick={() => presenter.startEditing()}\n                />\n            }\n        />\n    );\n};\n"],"names":["DashboardToolbar","vm","editing","canCustomize","presenter","onAddWidget","ColumnCountControl","Tooltip","IconButton","RestartAltIcon","Button","AddIcon","CheckIcon","hint","DashboardCustomizeIcon"],"mappings":";;;;;;;AAsBO,MAAMA,mBAAmB,CAAC,EAC7BC,EAAE,EACFC,OAAO,EACPC,YAAY,EACZC,SAAS,EACTC,WAAW,EACS;IACpB,IAAIH,SACA,OAAO,WAAP,GACI,wDACI,oBAACI,oBAAkBA;QACf,aAAaL,GAAG,WAAW;QAC3B,UAAUA,AAAoB,SAApBA,GAAG,YAAY;QACzB,WAAWG;sBAEf,oBAACG,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAcA;YACrB,cAAY;YACZ,SAAS,IAAML,UAAU,cAAc;;sBAInD,oBAACM,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,wBAAOA;QACd,SAASN;sBAEb,oBAACK,QAAMA;QACH,SAAS;QACT,MAAM;QACN,oBAAM,oBAACE,0BAASA;QAChB,SAAS,IAAMR,UAAU,WAAW;;IAMpD,IAAIS,OAAO;IACX,IAAI,CAACV,cACDU,OAAO;IAGX,OAAO,WAAP,GACI,oBAACN,SAAOA;QACJ,SAASM;QACT,uBACI,oBAACH,QAAMA;YACH,SAAS;YACT,MAAM;YACN,oBAAM,oBAACI,wCAAsBA;YAC7B,UAAU,CAACX;YACX,SAAS,IAAMC,UAAU,YAAY;;;AAKzD"}

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface AddToColumnMenuProps {
+    widget: DrawerWidget;
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const AddToColumnMenu: ({ widget, columnCount, presenter }: AddToColumnMenuProps) => React.JSX.Element;
+export {};

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.js

@@ -0,0 +1,30 @@
+import react from "react";
+import { Button, DropdownMenu } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/expand_more.svg";
+const AddToColumnMenu = ({ widget, columnCount, presenter })=>{
+    const columns = Array.from({
+        length: columnCount
+    }, (_, index)=>index);
+    return /*#__PURE__*/ react.createElement(DropdownMenu, {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            size: "sm",
+            variant: "tertiary",
+            text: "Add",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            iconPosition: "end"
+        })
+    }, /*#__PURE__*/ react.createElement(DropdownMenu.Label, {
+        text: "Add to"
+    }), columns.map((index)=>{
+        let text = `Column ${index + 1}`;
+        if (index === widget.defaultColumn) text = `${text} (default)`;
+        return /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            key: index,
+            text: text,
+            onClick: ()=>presenter.addWidget(widget.name, index)
+        });
+    }));
+};
+export { AddToColumnMenu };
+
+//# sourceMappingURL=AddToColumnMenu.js.map

package/Dashboard/components/addWidgetDrawer/AddToColumnMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/AddToColumnMenu.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/AddToColumnMenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { DropdownMenu } from \"@webiny/admin-ui\";\nimport { ReactComponent as ExpandMoreIcon } from \"@webiny/icons/expand_more.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DrawerWidget } from \"./types.js\";\n\ninterface AddToColumnMenuProps {\n    widget: DrawerWidget;\n    columnCount: number;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\n// One item per current column; the widget lands at the bottom of the chosen one.\nexport const AddToColumnMenu = ({ widget, columnCount, presenter }: AddToColumnMenuProps) => {\n    const columns = Array.from({ length: columnCount }, (_, index) => index);\n\n    return (\n        <DropdownMenu\n            trigger={\n                <Button\n                    size={\"sm\"}\n                    variant={\"tertiary\"}\n                    text={\"Add\"}\n                    icon={<ExpandMoreIcon />}\n                    iconPosition={\"end\"}\n                />\n            }\n        >\n            <DropdownMenu.Label text={\"Add to\"} />\n            {columns.map(index => {\n                let text = `Column ${index + 1}`;\n                if (index === widget.defaultColumn) {\n                    text = `${text} (default)`;\n                }\n                return (\n                    <DropdownMenu.Item\n                        key={index}\n                        text={text}\n                        onClick={() => presenter.addWidget(widget.name, index)}\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["AddToColumnMenu","widget","columnCount","presenter","columns","Array","_","index","DropdownMenu","Button","ExpandMoreIcon","text"],"mappings":";;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAwB;IACpF,MAAMC,UAAUC,MAAM,IAAI,CAAC;QAAE,QAAQH;IAAY,GAAG,CAACI,GAAGC,QAAUA;IAElE,OAAO,WAAP,GACI,oBAACC,cAAYA;QACT,uBACI,oBAACC,QAAMA;YACH,MAAM;YACN,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAcA;YACrB,cAAc;;qBAItB,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBJ,QAAQ,GAAG,CAACG,CAAAA;QACT,IAAII,OAAO,CAAC,OAAO,EAAEJ,QAAQ,GAAG;QAChC,IAAIA,UAAUN,OAAO,aAAa,EAC9BU,OAAO,GAAGA,KAAK,UAAU,CAAC;QAE9B,OAAO,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKD;YACL,MAAMI;YACN,SAAS,IAAMR,UAAU,SAAS,CAACF,OAAO,IAAI,EAAEM;;IAG5D;AAGZ"}

package/Dashboard/components/addWidgetDrawer/AddWidgetDrawer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface AddWidgetDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    widgets: DrawerWidget[];
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const AddWidgetDrawer: ({ open, onOpenChange, widgets, columnCount, presenter }: AddWidgetDrawerProps) => React.JSX.Element;
+export {};

package/Dashboard/components/addWidgetDrawer/AddWidgetDrawer.js

@@ -0,0 +1,61 @@
+import react, { useState } from "react";
+import { Drawer, Tabs } from "@webiny/admin-ui";
+import { WidgetTabContent } from "./WidgetTabContent.js";
+const AddWidgetDrawer = ({ open, onOpenChange, widgets, columnCount, presenter })=>{
+    const [search, setSearch] = useState("");
+    const changeOpen = (next)=>{
+        if (!next) setSearch("");
+        onOpenChange(next);
+    };
+    const onDashboard = widgets.filter((widget)=>widget.added);
+    const notAdded = widgets.filter((widget)=>!widget.added);
+    let defaultTab = "all";
+    if (notAdded.length > 0) defaultTab = "notAdded";
+    const renderTab = (items, emptyTitle, emptyDescription)=>/*#__PURE__*/ react.createElement(WidgetTabContent, {
+            items: items,
+            search: search,
+            onSearch: setSearch,
+            emptyTitle: emptyTitle,
+            emptyDescription: emptyDescription,
+            columnCount: columnCount,
+            presenter: presenter
+        });
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        open: open,
+        onOpenChange: changeOpen,
+        modal: true,
+        title: "Add widget",
+        description: "Pick a column when you add a widget. You can drag it anywhere after.",
+        width: 400,
+        bodyPadding: false,
+        headerSeparator: false,
+        showCloseButton: true
+    }, /*#__PURE__*/ react.createElement(Tabs, {
+        separator: true,
+        spacing: "lg",
+        defaultValue: defaultTab,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "notAdded",
+                value: "notAdded",
+                trigger: `Not added (${notAdded.length})`,
+                content: renderTab(notAdded, "All widgets are on your dashboard", "Remove a widget from its menu and it shows up here.")
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "onDashboard",
+                value: "onDashboard",
+                trigger: `On dashboard (${onDashboard.length})`,
+                content: renderTab(onDashboard, "Your dashboard is empty", "Add a widget from the Not added tab.")
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "all",
+                value: "all",
+                trigger: `All (${widgets.length})`,
+                content: renderTab(widgets, "No widgets available", "No app has registered a dashboard widget.")
+            })
+        ]
+    }));
+};
+export { AddWidgetDrawer };
+
+//# sourceMappingURL=AddWidgetDrawer.js.map

package/Dashboard/components/addWidgetDrawer/AddWidgetDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/AddWidgetDrawer.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/AddWidgetDrawer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useState } from \"react\";\nimport { Drawer } from \"@webiny/admin-ui\";\nimport { Tabs } from \"@webiny/admin-ui\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DrawerWidget } from \"./types.js\";\nimport { WidgetTabContent } from \"./WidgetTabContent.js\";\n\ninterface AddWidgetDrawerProps {\n    open: boolean;\n    onOpenChange: (open: boolean) => void;\n    widgets: DrawerWidget[];\n    columnCount: number;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\nexport const AddWidgetDrawer = ({\n    open,\n    onOpenChange,\n    widgets,\n    columnCount,\n    presenter\n}: AddWidgetDrawerProps) => {\n    const [search, setSearch] = useState(\"\");\n\n    const changeOpen = (next: boolean) => {\n        // Every visit starts with an empty search.\n        if (!next) {\n            setSearch(\"\");\n        }\n        onOpenChange(next);\n    };\n\n    const onDashboard = widgets.filter(widget => widget.added);\n    const notAdded = widgets.filter(widget => !widget.added);\n\n    // Open where the user can act. When everything is added already, show the whole list.\n    let defaultTab = \"all\";\n    if (notAdded.length > 0) {\n        defaultTab = \"notAdded\";\n    }\n\n    const renderTab = (items: DrawerWidget[], emptyTitle: string, emptyDescription: string) => (\n        <WidgetTabContent\n            items={items}\n            search={search}\n            onSearch={setSearch}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            columnCount={columnCount}\n            presenter={presenter}\n        />\n    );\n\n    return (\n        <Drawer\n            open={open}\n            onOpenChange={changeOpen}\n            modal={true}\n            title={\"Add widget\"}\n            description={\"Pick a column when you add a widget. You can drag it anywhere after.\"}\n            width={400}\n            bodyPadding={false}\n            headerSeparator={false}\n            showCloseButton={true}\n        >\n            <Tabs\n                separator={true}\n                spacing={\"lg\"}\n                defaultValue={defaultTab}\n                tabs={[\n                    <Tabs.Tab\n                        key={\"notAdded\"}\n                        value={\"notAdded\"}\n                        trigger={`Not added (${notAdded.length})`}\n                        content={renderTab(\n                            notAdded,\n                            \"All widgets are on your dashboard\",\n                            \"Remove a widget from its menu and it shows up here.\"\n                        )}\n                    />,\n                    <Tabs.Tab\n                        key={\"onDashboard\"}\n                        value={\"onDashboard\"}\n                        trigger={`On dashboard (${onDashboard.length})`}\n                        content={renderTab(\n                            onDashboard,\n                            \"Your dashboard is empty\",\n                            \"Add a widget from the Not added tab.\"\n                        )}\n                    />,\n                    <Tabs.Tab\n                        key={\"all\"}\n                        value={\"all\"}\n                        trigger={`All (${widgets.length})`}\n                        content={renderTab(\n                            widgets,\n                            \"No widgets available\",\n                            \"No app has registered a dashboard widget.\"\n                        )}\n                    />\n                ]}\n            />\n        </Drawer>\n    );\n};\n"],"names":["AddWidgetDrawer","open","onOpenChange","widgets","columnCount","presenter","search","setSearch","useState","changeOpen","next","onDashboard","widget","notAdded","defaultTab","renderTab","items","emptyTitle","emptyDescription","WidgetTabContent","Drawer","Tabs"],"mappings":";;;AAgBO,MAAMA,kBAAkB,CAAC,EAC5BC,IAAI,EACJC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,SAAS,EACU;IACnB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAMC,aAAa,CAACC;QAEhB,IAAI,CAACA,MACDH,UAAU;QAEdL,aAAaQ;IACjB;IAEA,MAAMC,cAAcR,QAAQ,MAAM,CAACS,CAAAA,SAAUA,OAAO,KAAK;IACzD,MAAMC,WAAWV,QAAQ,MAAM,CAACS,CAAAA,SAAU,CAACA,OAAO,KAAK;IAGvD,IAAIE,aAAa;IACjB,IAAID,SAAS,MAAM,GAAG,GAClBC,aAAa;IAGjB,MAAMC,YAAY,CAACC,OAAuBC,YAAoBC,mBAAAA,WAAAA,GAC1D,oBAACC,kBAAgBA;YACb,OAAOH;YACP,QAAQV;YACR,UAAUC;YACV,YAAYU;YACZ,kBAAkBC;YAClB,aAAad;YACb,WAAWC;;IAInB,OAAO,WAAP,GACI,oBAACe,QAAMA;QACH,MAAMnB;QACN,cAAcQ;QACd,OAAO;QACP,OAAO;QACP,aAAa;QACb,OAAO;QACP,aAAa;QACb,iBAAiB;QACjB,iBAAiB;qBAEjB,oBAACY,MAAIA;QACD,WAAW;QACX,SAAS;QACT,cAAcP;QACd,MAAM;0BACF,oBAACO,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS,CAAC,WAAW,EAAER,SAAS,MAAM,CAAC,CAAC,CAAC;gBACzC,SAASE,UACLF,UACA,qCACA;;0BAGR,oBAACQ,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS,CAAC,cAAc,EAAEV,YAAY,MAAM,CAAC,CAAC,CAAC;gBAC/C,SAASI,UACLJ,aACA,2BACA;;0BAGR,oBAACU,KAAK,GAAG;gBACL,KAAK;gBACL,OAAO;gBACP,SAAS,CAAC,KAAK,EAAElB,QAAQ,MAAM,CAAC,CAAC,CAAC;gBAClC,SAASY,UACLZ,SACA,wBACA;;SAGX;;AAIjB"}

package/Dashboard/components/addWidgetDrawer/DrawerWidgetRow.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface DrawerWidgetRowProps {
+    widget: DrawerWidget;
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const DrawerWidgetRow: ({ widget, columnCount, presenter }: DrawerWidgetRowProps) => React.JSX.Element;
+export {};

package/Dashboard/components/addWidgetDrawer/DrawerWidgetRow.js

@@ -0,0 +1,38 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { AddToColumnMenu } from "./AddToColumnMenu.js";
+import { WidgetPreviewFrame } from "./WidgetPreviewFrame.js";
+const DrawerWidgetRow = ({ widget, columnCount, presenter })=>{
+    let action = /*#__PURE__*/ react.createElement(AddToColumnMenu, {
+        widget: widget,
+        columnCount: columnCount,
+        presenter: presenter
+    });
+    if (widget.added) action = /*#__PURE__*/ react.createElement(Button, {
+        size: "sm",
+        variant: "tertiary",
+        text: "Added",
+        disabled: true
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm rounded-md border-sm border-neutral-muted p-sm-extra"
+    }, /*#__PURE__*/ react.createElement(WidgetPreviewFrame, {
+        preview: widget.preview,
+        added: widget.added
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-start gap-md"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "min-w-0 flex-1"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "font-semibold"
+    }, widget.title), widget.description && /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "mt-xxs text-neutral-strong"
+    }, widget.description)), action));
+};
+export { DrawerWidgetRow };
+
+//# sourceMappingURL=DrawerWidgetRow.js.map

package/Dashboard/components/addWidgetDrawer/DrawerWidgetRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/DrawerWidgetRow.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/DrawerWidgetRow.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DrawerWidget } from \"./types.js\";\nimport { AddToColumnMenu } from \"./AddToColumnMenu.js\";\nimport { WidgetPreviewFrame } from \"./WidgetPreviewFrame.js\";\n\ninterface DrawerWidgetRowProps {\n    widget: DrawerWidget;\n    columnCount: number;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\nexport const DrawerWidgetRow = ({ widget, columnCount, presenter }: DrawerWidgetRowProps) => {\n    let action = (\n        <AddToColumnMenu widget={widget} columnCount={columnCount} presenter={presenter} />\n    );\n    if (widget.added) {\n        action = <Button size={\"sm\"} variant={\"tertiary\"} text={\"Added\"} disabled={true} />;\n    }\n\n    return (\n        <div\n            className={\"flex flex-col gap-sm rounded-md border-sm border-neutral-muted p-sm-extra\"}\n        >\n            <WidgetPreviewFrame preview={widget.preview} added={widget.added} />\n            <div className={\"flex items-start gap-md\"}>\n                <div className={\"min-w-0 flex-1\"}>\n                    <Text as={\"div\"} size={\"md\"} className={\"font-semibold\"}>\n                        {widget.title}\n                    </Text>\n                    {widget.description && (\n                        <Text as={\"div\"} size={\"sm\"} className={\"mt-xxs text-neutral-strong\"}>\n                            {widget.description}\n                        </Text>\n                    )}\n                </div>\n                {action}\n            </div>\n        </div>\n    );\n};\n"],"names":["DrawerWidgetRow","widget","columnCount","presenter","action","AddToColumnMenu","Button","WidgetPreviewFrame","Text"],"mappings":";;;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAwB;IACpF,IAAIC,SAAS,WAATA,GACA,oBAACC,iBAAeA;QAAC,QAAQJ;QAAQ,aAAaC;QAAa,WAAWC;;IAE1E,IAAIF,OAAO,KAAK,EACZG,SAAS,WAATA,GAAS,oBAACE,QAAMA;QAAC,MAAM;QAAM,SAAS;QAAY,MAAM;QAAS,UAAU;;IAG/E,OAAO,WAAP,GACI,oBAAC;QACG,WAAW;qBAEX,oBAACC,oBAAkBA;QAAC,SAASN,OAAO,OAAO;QAAE,OAAOA,OAAO,KAAK;sBAChE,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACO,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnCP,OAAO,KAAK,GAEhBA,OAAO,WAAW,IAAI,WAAJ,GACf,oBAACO,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnCP,OAAO,WAAW,IAI9BG;AAIjB"}

package/Dashboard/components/addWidgetDrawer/WidgetPreviewFrame.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface WidgetPreviewFrameProps {
+    preview?: React.ReactElement;
+    added: boolean;
+}
+export declare const WidgetPreviewFrame: ({ preview, added }: WidgetPreviewFrameProps) => React.JSX.Element;
+export {};

package/Dashboard/components/addWidgetDrawer/WidgetPreviewFrame.js

@@ -0,0 +1,44 @@
+import react, { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "@webiny/admin-ui";
+import { WidgetSketch } from "./WidgetSketch.js";
+const RENDER_WIDTH = 520;
+const FRAME_HEIGHT = 150;
+const WidgetPreviewFrame = ({ preview, added })=>{
+    const frameRef = useRef(null);
+    const [scale, setScale] = useState(0);
+    useLayoutEffect(()=>{
+        const frame = frameRef.current;
+        if (!frame) return;
+        frame.setAttribute("inert", "");
+        const fit = ()=>setScale(frame.clientWidth / RENDER_WIDTH);
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(frame);
+        return ()=>observer.disconnect();
+    }, []);
+    let content = /*#__PURE__*/ react.createElement("div", {
+        className: "flex h-full items-center justify-center"
+    }, /*#__PURE__*/ react.createElement(WidgetSketch, {
+        added: added
+    }));
+    if (preview) content = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "origin-top-left p-md",
+        style: {
+            width: RENDER_WIDTH,
+            transform: `scale(${scale})`
+        }
+    }, preview), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-x-0 bottom-0 h-xl bg-gradient-to-t from-neutral-light"
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        "aria-hidden": true,
+        ref: frameRef,
+        className: cn("pointer-events-none relative overflow-hidden rounded-sm bg-neutral-light", "select-none", added && "opacity-60"),
+        style: {
+            height: FRAME_HEIGHT
+        }
+    }, content);
+};
+export { WidgetPreviewFrame };
+
+//# sourceMappingURL=WidgetPreviewFrame.js.map

package/Dashboard/components/addWidgetDrawer/WidgetPreviewFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/WidgetPreviewFrame.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/WidgetPreviewFrame.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLayoutEffect } from \"react\";\nimport { useRef } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { WidgetSketch } from \"./WidgetSketch.js\";\n\n// The preview renders at a dashboard column's width, then shrinks to the frame's width.\nconst RENDER_WIDTH = 520;\nconst FRAME_HEIGHT = 150;\n\ninterface WidgetPreviewFrameProps {\n    preview?: React.ReactElement;\n    // Already on the dashboard; the preview is dimmed to match the disabled \"Added\" button.\n    added: boolean;\n}\n\nexport const WidgetPreviewFrame = ({ preview, added }: WidgetPreviewFrameProps) => {\n    const frameRef = useRef<HTMLDivElement>(null);\n    const [scale, setScale] = useState(0);\n\n    useLayoutEffect(() => {\n        const frame = frameRef.current;\n        if (!frame) {\n            return;\n        }\n        // A preview is a picture: its links and buttons must not take focus or clicks.\n        frame.setAttribute(\"inert\", \"\");\n\n        const fit = () => setScale(frame.clientWidth / RENDER_WIDTH);\n        fit();\n        const observer = new ResizeObserver(fit);\n        observer.observe(frame);\n        return () => observer.disconnect();\n    }, []);\n\n    let content = (\n        <div className={\"flex h-full items-center justify-center\"}>\n            <WidgetSketch added={added} />\n        </div>\n    );\n    if (preview) {\n        content = (\n            <>\n                <div\n                    className={\"origin-top-left p-md\"}\n                    style={{ width: RENDER_WIDTH, transform: `scale(${scale})` }}\n                >\n                    {preview}\n                </div>\n                {/* Taller widgets are cropped; the fade makes the cut look intentional. */}\n                <div\n                    className={\n                        \"absolute inset-x-0 bottom-0 h-xl bg-gradient-to-t from-neutral-light\"\n                    }\n                />\n            </>\n        );\n    }\n\n    return (\n        <div\n            aria-hidden\n            ref={frameRef}\n            className={cn(\n                \"pointer-events-none relative overflow-hidden rounded-sm bg-neutral-light\",\n                \"select-none\",\n                added && \"opacity-60\"\n            )}\n            style={{ height: FRAME_HEIGHT }}\n        >\n            {content}\n        </div>\n    );\n};\n"],"names":["RENDER_WIDTH","FRAME_HEIGHT","WidgetPreviewFrame","preview","added","frameRef","useRef","scale","setScale","useState","useLayoutEffect","frame","fit","observer","ResizeObserver","content","WidgetSketch","cn"],"mappings":";;;AAQA,MAAMA,eAAe;AACrB,MAAMC,eAAe;AAQd,MAAMC,qBAAqB,CAAC,EAAEC,OAAO,EAAEC,KAAK,EAA2B;IAC1E,MAAMC,WAAWC,OAAuB;IACxC,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IAEnCC,gBAAgB;QACZ,MAAMC,QAAQN,SAAS,OAAO;QAC9B,IAAI,CAACM,OACD;QAGJA,MAAM,YAAY,CAAC,SAAS;QAE5B,MAAMC,MAAM,IAAMJ,SAASG,MAAM,WAAW,GAAGX;QAC/CY;QACA,MAAMC,WAAW,IAAIC,eAAeF;QACpCC,SAAS,OAAO,CAACF;QACjB,OAAO,IAAME,SAAS,UAAU;IACpC,GAAG,EAAE;IAEL,IAAIE,UAAU,WAAVA,GACA,oBAAC;QAAI,WAAW;qBACZ,oBAACC,cAAYA;QAAC,OAAOZ;;IAG7B,IAAID,SACAY,UAAU,WAAVA,GACI,wDACI,oBAAC;QACG,WAAW;QACX,OAAO;YAAE,OAAOf;YAAc,WAAW,CAAC,MAAM,EAAEO,MAAM,CAAC,CAAC;QAAC;OAE1DJ,UAAAA,WAAAA,GAGL,oBAAC;QACG,WACI;;IAOpB,OAAO,WAAP,GACI,oBAAC;QACG;QACA,KAAKE;QACL,WAAWY,GACP,4EACA,eACAb,SAAS;QAEb,OAAO;YAAE,QAAQH;QAAa;OAE7Bc;AAGb"}

package/Dashboard/components/addWidgetDrawer/WidgetSketch.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const WidgetSketch: ({ added }: {
+    added: boolean;
+}) => React.JSX.Element;

package/Dashboard/components/addWidgetDrawer/WidgetSketch.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { cn } from "@webiny/admin-ui";
+const WidgetSketch = ({ added })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("flex h-[58px] w-[84px] flex-none flex-col gap-xxs overflow-hidden rounded-sm", "border-sm border-neutral-muted bg-neutral-base p-xs")
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-[3px]"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: cn("size-[7px] rounded-[2px]", added ? "bg-neutral-strong" : "bg-primary")
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "h-[4px] w-[30px] rounded-[2px] bg-neutral-strong/40"
+    })), /*#__PURE__*/ react.createElement("span", {
+        className: "h-[4px] w-full rounded-[2px] bg-neutral-muted"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "h-[4px] w-3/4 rounded-[2px] bg-neutral-muted"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "mt-[2px] h-[12px] w-[40px] rounded-[3px] bg-neutral-dimmed"
+    }));
+export { WidgetSketch };
+
+//# sourceMappingURL=WidgetSketch.js.map

package/Dashboard/components/addWidgetDrawer/WidgetSketch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/WidgetSketch.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/WidgetSketch.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@webiny/admin-ui\";\n\n// A tiny sketch of a widget card, for widgets that don't provide a preview.\nexport const WidgetSketch = ({ added }: { added: boolean }) => {\n    return (\n        <div\n            className={cn(\n                \"flex h-[58px] w-[84px] flex-none flex-col gap-xxs overflow-hidden rounded-sm\",\n                \"border-sm border-neutral-muted bg-neutral-base p-xs\"\n            )}\n        >\n            <div className={\"flex items-center gap-[3px]\"}>\n                <span\n                    className={cn(\n                        \"size-[7px] rounded-[2px]\",\n                        added ? \"bg-neutral-strong\" : \"bg-primary\"\n                    )}\n                />\n                <span className={\"h-[4px] w-[30px] rounded-[2px] bg-neutral-strong/40\"} />\n            </div>\n            <span className={\"h-[4px] w-full rounded-[2px] bg-neutral-muted\"} />\n            <span className={\"h-[4px] w-3/4 rounded-[2px] bg-neutral-muted\"} />\n            <span className={\"mt-[2px] h-[12px] w-[40px] rounded-[3px] bg-neutral-dimmed\"} />\n        </div>\n    );\n};\n"],"names":["WidgetSketch","added","cn"],"mappings":";;AAIO,MAAMA,eAAe,CAAC,EAAEC,KAAK,EAAsB,GAC/C,WAAP,GACI,oBAAC;QACG,WAAWC,GACP,gFACA;qBAGJ,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WAAWA,GACP,4BACAD,QAAQ,sBAAsB;sBAGtC,oBAAC;QAAK,WAAW;uBAErB,oBAAC;QAAK,WAAW;sBACjB,oBAAC;QAAK,WAAW;sBACjB,oBAAC;QAAK,WAAW"}

package/Dashboard/components/addWidgetDrawer/WidgetTabContent.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DrawerWidget } from "./types.js";
+interface WidgetTabContentProps {
+    items: DrawerWidget[];
+    search: string;
+    onSearch: (value: string) => void;
+    emptyTitle: string;
+    emptyDescription: string;
+    columnCount: number;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const WidgetTabContent: ({ items, search, onSearch, emptyTitle, emptyDescription, columnCount, presenter }: WidgetTabContentProps) => React.JSX.Element;
+export {};