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

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 {};

package/Dashboard/components/addWidgetDrawer/WidgetTabContent.js

@@ -0,0 +1,76 @@
+import react from "react";
+import { EmptyState, Icon, Input, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { DrawerWidgetRow } from "./DrawerWidgetRow.js";
+const DEFAULT_GROUP = "Other";
+const matchesSearch = (widget, query)=>{
+    if (!query) return true;
+    const fields = [
+        widget.title,
+        widget.description,
+        widget.group
+    ];
+    return fields.some((value)=>value?.toLowerCase().includes(query));
+};
+const groupWidgets = (widgets)=>{
+    const byGroup = new Map();
+    for (const widget of widgets){
+        const group = widget.group ?? DEFAULT_GROUP;
+        const items = byGroup.get(group) ?? [];
+        byGroup.set(group, [
+            ...items,
+            widget
+        ]);
+    }
+    return [
+        ...byGroup.entries()
+    ];
+};
+const WidgetTabContent = ({ items, search, onSearch, emptyTitle, emptyDescription, columnCount, presenter })=>{
+    const query = search.trim().toLowerCase();
+    const matches = items.filter((widget)=>matchesSearch(widget, query));
+    const groups = groupWidgets(matches);
+    let emptyState = null;
+    if (0 === items.length) emptyState = /*#__PURE__*/ react.createElement(EmptyState, {
+        size: "sm",
+        type: "layout",
+        title: emptyTitle,
+        description: emptyDescription
+    });
+    else if (0 === matches.length) emptyState = /*#__PURE__*/ react.createElement(EmptyState, {
+        size: "sm",
+        type: "select",
+        title: `No widgets match "${search}"`,
+        description: "Try a different search."
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "pb-lg"
+    }, items.length > 0 && /*#__PURE__*/ react.createElement(Input, {
+        placeholder: "Search widgets",
+        value: search,
+        onChange: onSearch,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Search",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }), emptyState && /*#__PURE__*/ react.createElement("div", {
+        className: "mt-lg"
+    }, emptyState), groups.map(([group, groupItems])=>/*#__PURE__*/ react.createElement("div", {
+            key: group,
+            className: "mt-lg"
+        }, /*#__PURE__*/ react.createElement(Text, {
+            as: "div",
+            size: "sm",
+            className: "mb-sm font-semibold uppercase tracking-wide text-neutral-strong"
+        }, group), /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-sm"
+        }, groupItems.map((widget)=>/*#__PURE__*/ react.createElement(DrawerWidgetRow, {
+                key: widget.name,
+                widget: widget,
+                columnCount: columnCount,
+                presenter: presenter
+            }))))));
+};
+export { WidgetTabContent };
+
+//# sourceMappingURL=WidgetTabContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/addWidgetDrawer/WidgetTabContent.js","sources":["../../../../src/Dashboard/components/addWidgetDrawer/WidgetTabContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { EmptyState } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DrawerWidget } from \"./types.js\";\nimport { DrawerWidgetRow } from \"./DrawerWidgetRow.js\";\n\nconst DEFAULT_GROUP = \"Other\";\n\nconst matchesSearch = (widget: DrawerWidget, query: string): boolean => {\n    if (!query) {\n        return true;\n    }\n    const fields = [widget.title, widget.description, widget.group];\n    return fields.some(value => value?.toLowerCase().includes(query));\n};\n\nconst groupWidgets = (widgets: DrawerWidget[]): [string, DrawerWidget[]][] => {\n    const byGroup = new Map<string, DrawerWidget[]>();\n    for (const widget of widgets) {\n        const group = widget.group ?? DEFAULT_GROUP;\n        const items = byGroup.get(group) ?? [];\n        byGroup.set(group, [...items, widget]);\n    }\n    return [...byGroup.entries()];\n};\n\ninterface WidgetTabContentProps {\n    items: DrawerWidget[];\n    search: string;\n    onSearch: (value: string) => void;\n    emptyTitle: string;\n    emptyDescription: string;\n    columnCount: number;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\nexport const WidgetTabContent = ({\n    items,\n    search,\n    onSearch,\n    emptyTitle,\n    emptyDescription,\n    columnCount,\n    presenter\n}: WidgetTabContentProps) => {\n    const query = search.trim().toLowerCase();\n    const matches = items.filter(widget => matchesSearch(widget, query));\n    const groups = groupWidgets(matches);\n\n    let emptyState: React.ReactNode = null;\n    if (items.length === 0) {\n        emptyState = (\n            <EmptyState\n                size={\"sm\"}\n                type={\"layout\"}\n                title={emptyTitle}\n                description={emptyDescription}\n            />\n        );\n    } else if (matches.length === 0) {\n        emptyState = (\n            <EmptyState\n                size={\"sm\"}\n                type={\"select\"}\n                title={`No widgets match \"${search}\"`}\n                description={\"Try a different search.\"}\n            />\n        );\n    }\n\n    return (\n        <div className={\"pb-lg\"}>\n            {items.length > 0 && (\n                <Input\n                    placeholder={\"Search widgets\"}\n                    value={search}\n                    onChange={onSearch}\n                    startIcon={<Icon label={\"Search\"} icon={<SearchIcon />} />}\n                />\n            )}\n            {emptyState && <div className={\"mt-lg\"}>{emptyState}</div>}\n            {groups.map(([group, groupItems]) => (\n                <div key={group} className={\"mt-lg\"}>\n                    <Text\n                        as={\"div\"}\n                        size={\"sm\"}\n                        className={\n                            \"mb-sm font-semibold uppercase tracking-wide text-neutral-strong\"\n                        }\n                    >\n                        {group}\n                    </Text>\n                    <div className={\"flex flex-col gap-sm\"}>\n                        {groupItems.map(widget => (\n                            <DrawerWidgetRow\n                                key={widget.name}\n                                widget={widget}\n                                columnCount={columnCount}\n                                presenter={presenter}\n                            />\n                        ))}\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};\n"],"names":["DEFAULT_GROUP","matchesSearch","widget","query","fields","value","groupWidgets","widgets","byGroup","Map","group","items","WidgetTabContent","search","onSearch","emptyTitle","emptyDescription","columnCount","presenter","matches","groups","emptyState","EmptyState","Input","Icon","SearchIcon","groupItems","Text","DrawerWidgetRow"],"mappings":";;;;AAUA,MAAMA,gBAAgB;AAEtB,MAAMC,gBAAgB,CAACC,QAAsBC;IACzC,IAAI,CAACA,OACD,OAAO;IAEX,MAAMC,SAAS;QAACF,OAAO,KAAK;QAAEA,OAAO,WAAW;QAAEA,OAAO,KAAK;KAAC;IAC/D,OAAOE,OAAO,IAAI,CAACC,CAAAA,QAASA,OAAO,cAAc,SAASF;AAC9D;AAEA,MAAMG,eAAe,CAACC;IAClB,MAAMC,UAAU,IAAIC;IACpB,KAAK,MAAMP,UAAUK,QAAS;QAC1B,MAAMG,QAAQR,OAAO,KAAK,IAAIF;QAC9B,MAAMW,QAAQH,QAAQ,GAAG,CAACE,UAAU,EAAE;QACtCF,QAAQ,GAAG,CAACE,OAAO;eAAIC;YAAOT;SAAO;IACzC;IACA,OAAO;WAAIM,QAAQ,OAAO;KAAG;AACjC;AAYO,MAAMI,mBAAmB,CAAC,EAC7BD,KAAK,EACLE,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,gBAAgB,EAChBC,WAAW,EACXC,SAAS,EACW;IACpB,MAAMf,QAAQU,OAAO,IAAI,GAAG,WAAW;IACvC,MAAMM,UAAUR,MAAM,MAAM,CAACT,CAAAA,SAAUD,cAAcC,QAAQC;IAC7D,MAAMiB,SAASd,aAAaa;IAE5B,IAAIE,aAA8B;IAClC,IAAIV,AAAiB,MAAjBA,MAAM,MAAM,EACZU,aAAa,WAAbA,GACI,oBAACC,YAAUA;QACP,MAAM;QACN,MAAM;QACN,OAAOP;QACP,aAAaC;;SAGlB,IAAIG,AAAmB,MAAnBA,QAAQ,MAAM,EACrBE,aAAa,WAAbA,GACI,oBAACC,YAAUA;QACP,MAAM;QACN,MAAM;QACN,OAAO,CAAC,kBAAkB,EAAET,OAAO,CAAC,CAAC;QACrC,aAAa;;IAKzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXF,MAAM,MAAM,GAAG,KAAK,WAAL,GACZ,oBAACY,OAAKA;QACF,aAAa;QACb,OAAOV;QACP,UAAUC;QACV,yBAAW,oBAACU,MAAIA;YAAC,OAAO;YAAU,oBAAM,oBAACC,gBAAUA;;QAG1DJ,cAAc,WAAdA,GAAc,oBAAC;QAAI,WAAW;OAAUA,aACxCD,OAAO,GAAG,CAAC,CAAC,CAACV,OAAOgB,WAAW,iBAC5B,oBAAC;YAAI,KAAKhB;YAAO,WAAW;yBACxB,oBAACiB,MAAIA;YACD,IAAI;YACJ,MAAM;YACN,WACI;WAGHjB,QAAAA,WAAAA,GAEL,oBAAC;YAAI,WAAW;WACXgB,WAAW,GAAG,CAACxB,CAAAA,SAAAA,WAAAA,GACZ,oBAAC0B,iBAAeA;gBACZ,KAAK1B,OAAO,IAAI;gBAChB,QAAQA;gBACR,aAAae;gBACb,WAAWC;;AAQ3C"}

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

@@ -0,0 +1,10 @@
+import type React from "react";
+export interface DrawerWidget {
+    name: string;
+    title: string;
+    description?: string;
+    group?: string;
+    preview?: React.ReactElement;
+    added: boolean;
+    defaultColumn: number;
+}

package/Dashboard/components/dnd/ColumnCountControl.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface ColumnCountControlProps {
+    columnCount: number;
+    disabled?: boolean;
+    presenter: DashboardLayoutPresenter.Interface;
+}
+export declare const ColumnCountControl: ({ columnCount, disabled, presenter }: ColumnCountControlProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/ColumnCountControl.js

@@ -0,0 +1,52 @@
+import react from "react";
+import { Icon, ToggleGroup } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/view_column_2.svg";
+import { ReactComponent as view_column_svg_ReactComponent } from "@webiny/icons/view_column.svg";
+import { ReactComponent as view_column_4_svg_ReactComponent } from "@webiny/icons/view_column_4.svg";
+const ITEMS = [
+    {
+        value: "2",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "2 columns",
+            size: "sm"
+        }),
+        tooltip: "2 columns"
+    },
+    {
+        value: "3",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(view_column_svg_ReactComponent, null),
+            label: "3 columns",
+            size: "sm"
+        }),
+        tooltip: "3 columns"
+    },
+    {
+        value: "4",
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(view_column_4_svg_ReactComponent, null),
+            label: "4 columns",
+            size: "sm"
+        }),
+        tooltip: "4 columns"
+    }
+];
+const ColumnCountControl = ({ columnCount, disabled, presenter })=>/*#__PURE__*/ react.createElement(ToggleGroup, {
+        type: "single",
+        variant: "ghost",
+        size: "sm",
+        bordered: true,
+        items: ITEMS,
+        value: String(columnCount),
+        disabled: disabled,
+        onChange: (value)=>{
+            if (value) {
+                const count = Number(value);
+                presenter.setColumnCount(count);
+            }
+        }
+    });
+export { ColumnCountControl };
+
+//# sourceMappingURL=ColumnCountControl.js.map

package/Dashboard/components/dnd/ColumnCountControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/ColumnCountControl.js","sources":["../../../../src/Dashboard/components/dnd/ColumnCountControl.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ToggleGroup } from \"@webiny/admin-ui\";\nimport { ReactComponent as TwoColumnsIcon } from \"@webiny/icons/view_column_2.svg\";\nimport { ReactComponent as ThreeColumnsIcon } from \"@webiny/icons/view_column.svg\";\nimport { ReactComponent as FourColumnsIcon } from \"@webiny/icons/view_column_4.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\n\ninterface ColumnCountControlProps {\n    columnCount: number;\n    disabled?: boolean;\n    presenter: DashboardLayoutPresenter.Interface;\n}\n\n// Covers MIN_COLUMN_COUNT..MAX_COLUMN_COUNT; add an icon here if that range grows.\n// `Icon`'s label is what gives each icon-only toggle an accessible name.\nconst ITEMS = [\n    {\n        value: \"2\",\n        icon: <Icon icon={<TwoColumnsIcon />} label={\"2 columns\"} size={\"sm\"} />,\n        tooltip: \"2 columns\"\n    },\n    {\n        value: \"3\",\n        icon: <Icon icon={<ThreeColumnsIcon />} label={\"3 columns\"} size={\"sm\"} />,\n        tooltip: \"3 columns\"\n    },\n    {\n        value: \"4\",\n        icon: <Icon icon={<FourColumnsIcon />} label={\"4 columns\"} size={\"sm\"} />,\n        tooltip: \"4 columns\"\n    }\n];\n\nexport const ColumnCountControl = ({\n    columnCount,\n    disabled,\n    presenter\n}: ColumnCountControlProps) => {\n    return (\n        <ToggleGroup\n            type={\"single\"}\n            variant={\"ghost\"}\n            size={\"sm\"}\n            bordered={true}\n            items={ITEMS}\n            value={String(columnCount)}\n            disabled={disabled}\n            onChange={value => {\n                // Clicking the active option would clear it; a count is always required.\n                if (value) {\n                    const count = Number(value);\n                    presenter.setColumnCount(count);\n                }\n            }}\n        />\n    );\n};\n"],"names":["ITEMS","Icon","TwoColumnsIcon","ThreeColumnsIcon","FourColumnsIcon","ColumnCountControl","columnCount","disabled","presenter","ToggleGroup","String","value","count","Number"],"mappings":";;;;;AAgBA,MAAMA,QAAQ;IACV;QACI,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAcA;YAAK,OAAO;YAAa,MAAM;;QAChE,SAAS;IACb;IACA;QACI,OAAO;QACP,MAAM,WAAN,GAAM,oBAACD,MAAIA;YAAC,oBAAM,oBAACE,gCAAgBA;YAAK,OAAO;YAAa,MAAM;;QAClE,SAAS;IACb;IACA;QACI,OAAO;QACP,MAAM,WAAN,GAAM,oBAACF,MAAIA;YAAC,oBAAM,oBAACG,kCAAeA;YAAK,OAAO;YAAa,MAAM;;QACjE,SAAS;IACb;CACH;AAEM,MAAMC,qBAAqB,CAAC,EAC/BC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACa,GACf,WAAP,GACI,oBAACC,aAAWA;QACR,MAAM;QACN,SAAS;QACT,MAAM;QACN,UAAU;QACV,OAAOT;QACP,OAAOU,OAAOJ;QACd,UAAUC;QACV,UAAUI,CAAAA;YAEN,IAAIA,OAAO;gBACP,MAAMC,QAAQC,OAAOF;gBACrBH,UAAU,cAAc,CAACI;YAC7B;QACJ"}

package/Dashboard/components/dnd/ColumnEmptyState.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ColumnEmptyStateProps {
+    canRemove: boolean;
+    onRemove: () => void;
+    onBrowse: () => void;
+    dragging: boolean;
+    active: boolean;
+}
+export declare const ColumnEmptyState: ({ canRemove, onRemove, onBrowse, dragging, active }: ColumnEmptyStateProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/ColumnEmptyState.js

@@ -0,0 +1,52 @@
+import react from "react";
+import { Button, Icon, Text, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/dashboard_customize.svg";
+import { ReactComponent as add_circle_svg_ReactComponent } from "@webiny/icons/add_circle.svg";
+const IDLE_CLASSES = "border-neutral-strong/40 bg-neutral-base/50 hover:border-neutral-strong/60";
+const CAN_DROP_CLASSES = "border-primary/50 bg-primary/5";
+const ACTIVE_CLASSES = "border-primary bg-primary/10";
+const ColumnEmptyState = ({ canRemove, onRemove, onBrowse, dragging, active })=>{
+    let stateClasses = IDLE_CLASSES;
+    if (active) stateClasses = ACTIVE_CLASSES;
+    else if (dragging) stateClasses = CAN_DROP_CLASSES;
+    let icon = /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Empty column",
+        size: "sm",
+        color: "neutral-strong"
+    });
+    if (dragging) icon = /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(add_circle_svg_ReactComponent, null),
+        label: "Drop here",
+        size: "sm",
+        color: "accent"
+    });
+    let body = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-center text-neutral-strong"
+    }, "Drop a widget here", /*#__PURE__*/ react.createElement("br", null), "or ", /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: onBrowse,
+        className: "cursor-pointer text-primary hover:underline"
+    }, "browse widgets")), canRemove && /*#__PURE__*/ react.createElement(Button, {
+        size: "sm",
+        variant: "ghost",
+        text: "Remove column",
+        onClick: onRemove
+    }));
+    if (dragging) body = /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "sm",
+        className: "text-center text-primary"
+    }, "Drop it here");
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-testid": "dashboard-empty-column",
+        className: cn("flex min-h-[220px] flex-col items-center justify-center gap-sm rounded-xl", "border-2 border-dashed p-lg transition-colors", stateClasses)
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: cn("flex size-xl items-center justify-center rounded-md", dragging ? "bg-primary/10" : "bg-neutral-dimmed")
+    }, icon), body);
+};
+export { ColumnEmptyState };
+
+//# sourceMappingURL=ColumnEmptyState.js.map

package/Dashboard/components/dnd/ColumnEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/ColumnEmptyState.js","sources":["../../../../src/Dashboard/components/dnd/ColumnEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as DashboardCustomizeIcon } from \"@webiny/icons/dashboard_customize.svg\";\nimport { ReactComponent as AddCircleIcon } from \"@webiny/icons/add_circle.svg\";\n\ninterface ColumnEmptyStateProps {\n    canRemove: boolean;\n    onRemove: () => void;\n    onBrowse: () => void;\n    // A widget is being dragged somewhere on the dashboard.\n    dragging: boolean;\n    // ...and it's over this column.\n    active: boolean;\n}\n\nconst IDLE_CLASSES = \"border-neutral-strong/40 bg-neutral-base/50 hover:border-neutral-strong/60\";\nconst CAN_DROP_CLASSES = \"border-primary/50 bg-primary/5\";\nconst ACTIVE_CLASSES = \"border-primary bg-primary/10\";\n\nexport const ColumnEmptyState = ({\n    canRemove,\n    onRemove,\n    onBrowse,\n    dragging,\n    active\n}: ColumnEmptyStateProps) => {\n    let stateClasses = IDLE_CLASSES;\n    if (active) {\n        stateClasses = ACTIVE_CLASSES;\n    } else if (dragging) {\n        stateClasses = CAN_DROP_CLASSES;\n    }\n\n    let icon = (\n        <Icon\n            icon={<DashboardCustomizeIcon />}\n            label={\"Empty column\"}\n            size={\"sm\"}\n            color={\"neutral-strong\"}\n        />\n    );\n    if (dragging) {\n        icon = <Icon icon={<AddCircleIcon />} label={\"Drop here\"} size={\"sm\"} color={\"accent\"} />;\n    }\n\n    let body = (\n        <>\n            <Text as={\"div\"} size={\"sm\"} className={\"text-center text-neutral-strong\"}>\n                {\"Drop a widget here\"}\n                <br />\n                {\"or \"}\n                <button\n                    type={\"button\"}\n                    onClick={onBrowse}\n                    className={\"cursor-pointer text-primary hover:underline\"}\n                >\n                    {\"browse widgets\"}\n                </button>\n            </Text>\n            {canRemove && (\n                <Button size={\"sm\"} variant={\"ghost\"} text={\"Remove column\"} onClick={onRemove} />\n            )}\n        </>\n    );\n    if (dragging) {\n        body = (\n            <Text as={\"div\"} size={\"sm\"} className={\"text-center text-primary\"}>\n                {\"Drop it here\"}\n            </Text>\n        );\n    }\n\n    return (\n        <div\n            data-testid={\"dashboard-empty-column\"}\n            className={cn(\n                // `rounded-xl` and the 2px border match the cards' outline and the drop slot.\n                \"flex min-h-[220px] flex-col items-center justify-center gap-sm rounded-xl\",\n                \"border-2 border-dashed p-lg transition-colors\",\n                stateClasses\n            )}\n        >\n            <span\n                className={cn(\n                    \"flex size-xl items-center justify-center rounded-md\",\n                    dragging ? \"bg-primary/10\" : \"bg-neutral-dimmed\"\n                )}\n            >\n                {icon}\n            </span>\n            {body}\n        </div>\n    );\n};\n"],"names":["IDLE_CLASSES","CAN_DROP_CLASSES","ACTIVE_CLASSES","ColumnEmptyState","canRemove","onRemove","onBrowse","dragging","active","stateClasses","icon","Icon","DashboardCustomizeIcon","AddCircleIcon","body","Text","Button","cn"],"mappings":";;;;AAkBA,MAAMA,eAAe;AACrB,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEhB,MAAMC,mBAAmB,CAAC,EAC7BC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACc;IACpB,IAAIC,eAAeT;IACnB,IAAIQ,QACAC,eAAeP;SACZ,IAAIK,UACPE,eAAeR;IAGnB,IAAIS,OAAO,WAAPA,GACA,oBAACC,MAAIA;QACD,oBAAM,oBAACC,gBAAsBA;QAC7B,OAAO;QACP,MAAM;QACN,OAAO;;IAGf,IAAIL,UACAG,OAAO,WAAPA,GAAO,oBAACC,MAAIA;QAAC,oBAAM,oBAACE,+BAAaA;QAAK,OAAO;QAAa,MAAM;QAAM,OAAO;;IAGjF,IAAIC,OAAO,WAAPA,GACA,wDACI,oBAACC,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnC,oCACD,oBAAC,aACA,qBACD,oBAAC;QACG,MAAM;QACN,SAAST;QACT,WAAW;OAEV,oBAGRF,aAAa,WAAbA,GACG,oBAACY,QAAMA;QAAC,MAAM;QAAM,SAAS;QAAS,MAAM;QAAiB,SAASX;;IAIlF,IAAIE,UACAO,OAAO,WAAPA,GACI,oBAACC,MAAIA;QAAC,IAAI;QAAO,MAAM;QAAM,WAAW;OACnC;IAKb,OAAO,WAAP,GACI,oBAAC;QACG,eAAa;QACb,WAAWE,GAEP,6EACA,iDACAR;qBAGJ,oBAAC;QACG,WAAWQ,GACP,uDACAV,WAAW,kBAAkB;OAGhCG,OAEJI;AAGb"}

package/Dashboard/components/dnd/DashboardDragLayer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * A custom drag preview that follows the cursor. The native HTML5 preview is suppressed
+ * (see DashboardWidgetCard), so this chip is the only thing the user sees moving.
+ */
+export declare const DashboardDragLayer: () => React.JSX.Element | null;

package/Dashboard/components/dnd/DashboardDragLayer.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { useDragLayer } from "react-dnd";
+import { Icon, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
+const DashboardDragLayer = ()=>{
+    const { isDragging, item, offset } = useDragLayer((monitor)=>({
+            isDragging: monitor.isDragging(),
+            item: monitor.getItem(),
+            offset: monitor.getClientOffset()
+        }));
+    if (!isDragging || !item || !offset) return null;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "pointer-events-none fixed left-0 top-0 z-[9999]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            transform: `translate(${offset.x + 12}px, ${offset.y + 12}px)`
+        },
+        className: cn("flex items-center gap-sm whitespace-nowrap rounded-lg border-sm", "border-neutral-dimmed bg-neutral-base px-sm-extra py-sm-plus text-md", "font-semibold text-neutral-primary shadow-lg")
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        label: "Dragging",
+        size: "sm",
+        color: "neutral-light"
+    }), item.title));
+};
+export { DashboardDragLayer };
+
+//# sourceMappingURL=DashboardDragLayer.js.map

package/Dashboard/components/dnd/DashboardDragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/DashboardDragLayer.js","sources":["../../../../src/Dashboard/components/dnd/DashboardDragLayer.tsx"],"sourcesContent":["import React from \"react\";\nimport { useDragLayer } from \"react-dnd\";\nimport type { XYCoord } from \"react-dnd\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as DragIndicatorIcon } from \"@webiny/icons/drag_indicator.svg\";\n\nimport type { DashboardWidgetDragItem } from \"./dragItem.js\";\n\ninterface DragLayerState {\n    isDragging: boolean;\n    item: DashboardWidgetDragItem | null;\n    offset: XYCoord | null;\n}\n\n/**\n * A custom drag preview that follows the cursor. The native HTML5 preview is suppressed\n * (see DashboardWidgetCard), so this chip is the only thing the user sees moving.\n */\nexport const DashboardDragLayer = () => {\n    const { isDragging, item, offset } = useDragLayer<\n        DragLayerState,\n        DashboardWidgetDragItem | null\n    >(monitor => ({\n        isDragging: monitor.isDragging(),\n        item: monitor.getItem(),\n        offset: monitor.getClientOffset()\n    }));\n\n    if (!isDragging || !item || !offset) {\n        return null;\n    }\n\n    return (\n        <div className={\"pointer-events-none fixed left-0 top-0 z-[9999]\"}>\n            <div\n                style={{\n                    transform: `translate(${offset.x + 12}px, ${offset.y + 12}px)`\n                }}\n                className={cn(\n                    \"flex items-center gap-sm whitespace-nowrap rounded-lg border-sm\",\n                    \"border-neutral-dimmed bg-neutral-base px-sm-extra py-sm-plus text-md\",\n                    \"font-semibold text-neutral-primary shadow-lg\"\n                )}\n            >\n                <Icon\n                    icon={<DragIndicatorIcon />}\n                    label={\"Dragging\"}\n                    size={\"sm\"}\n                    color={\"neutral-light\"}\n                />\n                {item.title}\n            </div>\n        </div>\n    );\n};\n"],"names":["DashboardDragLayer","isDragging","item","offset","useDragLayer","monitor","cn","Icon","DragIndicatorIcon"],"mappings":";;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGC,aAGnCC,CAAAA,UAAY;YACV,YAAYA,QAAQ,UAAU;YAC9B,MAAMA,QAAQ,OAAO;YACrB,QAAQA,QAAQ,eAAe;QACnC;IAEA,IAAI,CAACJ,cAAc,CAACC,QAAQ,CAACC,QACzB,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,OAAO;YACH,WAAW,CAAC,UAAU,EAAEA,OAAO,CAAC,GAAG,GAAG,IAAI,EAAEA,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAClE;QACA,WAAWG,GACP,mEACA,wEACA;qBAGJ,oBAACC,MAAIA;QACD,oBAAM,oBAACC,gBAAiBA;QACxB,OAAO;QACP,MAAM;QACN,OAAO;QAEVN,KAAK,KAAK;AAI3B"}

package/Dashboard/components/dnd/DashboardWidgetCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface DashboardWidgetCardProps {
+    name: string;
+    title: string;
+    isDragging: boolean;
+    presenter: DashboardLayoutPresenter.Interface;
+    /** Reports the card's DOM node to the column so it can measure drop slots. */
+    registerRef: (name: string, node: HTMLElement | null) => void;
+    children: React.ReactNode;
+}
+export declare const DashboardWidgetCard: ({ name, title, isDragging, presenter, registerRef, children }: DashboardWidgetCardProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/DashboardWidgetCard.js

@@ -0,0 +1,59 @@
+import react, { useRef } from "react";
+import { DragPreviewImage, useDrag } from "react-dnd";
+import { IconButton, Tooltip, cn } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { DASHBOARD_WIDGET_DND_TYPE } from "./dragItem.js";
+const EMPTY_DRAG_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+const DashboardWidgetCard = ({ name, title, isDragging, presenter, registerRef, children })=>{
+    const cardRef = useRef(null);
+    const [, drag, preview] = useDrag({
+        type: DASHBOARD_WIDGET_DND_TYPE,
+        item: ()=>{
+            presenter.beginDrag(name);
+            const height = cardRef.current?.getBoundingClientRect().height ?? 0;
+            return {
+                name,
+                title,
+                height
+            };
+        },
+        end: ()=>{
+            presenter.endDrag();
+        }
+    });
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DragPreviewImage, {
+        connect: preview,
+        src: EMPTY_DRAG_IMAGE
+    }), /*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            cardRef.current = node;
+            registerRef(name, node);
+        },
+        className: cn("group/card relative rounded-xl transition-opacity", isDragging && "opacity-50")
+    }, /*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>node?.setAttribute("inert", ""),
+        className: "select-none"
+    }, children), /*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            drag(node);
+        },
+        role: "button",
+        "aria-label": `Drag ${title} to move it`,
+        "data-testid": `dashboard-card-${name}`,
+        className: cn("absolute inset-0 z-10 cursor-grab rounded-xl active:cursor-grabbing", "ring-2 ring-inset ring-primary/30 transition-colors", "hover:bg-primary/5 hover:ring-primary/60")
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: cn("absolute -right-sm -top-sm z-20 opacity-0 transition-opacity", "group-hover/card:opacity-100 focus-within:opacity-100")
+    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: "Remove from dashboard",
+        trigger: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "tertiary",
+            size: "sm",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            "aria-label": `Remove ${title} from the dashboard`,
+            onClick: ()=>presenter.removeWidget(name)
+        })
+    }))));
+};
+export { DashboardWidgetCard };
+
+//# sourceMappingURL=DashboardWidgetCard.js.map