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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/DashboardWidgetCard.js","sources":["../../../../src/Dashboard/components/dnd/DashboardWidgetCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { useRef } from \"react\";\nimport { useDrag } from \"react-dnd\";\nimport { DragPreviewImage } from \"react-dnd\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { Tooltip } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\nimport { ReactComponent as RemoveIcon } from \"@webiny/icons/delete.svg\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport { DASHBOARD_WIDGET_DND_TYPE } from \"./dragItem.js\";\nimport type { DashboardWidgetDragItem } from \"./dragItem.js\";\n\n// Transparent 1px gif. Hides the browser's drag preview so DashboardDragLayer's card is the only one.\nconst EMPTY_DRAG_IMAGE =\n    \"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\";\n\ninterface DashboardWidgetCardProps {\n    name: string;\n    title: string;\n    isDragging: boolean;\n    presenter: DashboardLayoutPresenter.Interface;\n    /** Reports the card's DOM node to the column so it can measure drop slots. */\n    registerRef: (name: string, node: HTMLElement | null) => void;\n    children: React.ReactNode;\n}\n\n/*\n * A widget in Customize mode. The whole card is the drag target: an overlay covers the widget, so\n * its own links and buttons can't catch the pointer, and a remove button sits in the corner.\n */\nexport const DashboardWidgetCard = ({\n    name,\n    title,\n    isDragging,\n    presenter,\n    registerRef,\n    children\n}: DashboardWidgetCardProps) => {\n    const cardRef = useRef<HTMLElement | null>(null);\n\n    const [, drag, preview] = useDrag({\n        type: DASHBOARD_WIDGET_DND_TYPE,\n        item: () => {\n            presenter.beginDrag(name);\n            const height = cardRef.current?.getBoundingClientRect().height ?? 0;\n            return { name, title, height } satisfies DashboardWidgetDragItem;\n        },\n        end: () => {\n            presenter.endDrag();\n        }\n    });\n\n    return (\n        <>\n            <DragPreviewImage connect={preview} src={EMPTY_DRAG_IMAGE} />\n            <div\n                ref={node => {\n                    cardRef.current = node;\n                    registerRef(name, node);\n                }}\n                className={cn(\n                    // A named group: a plain `group` here would also trigger `group-hover:` styles inside the\n                    // widget (e.g. every Tabs trigger at once), since those match any `.group` ancestor.\n                    \"group/card relative rounded-xl transition-opacity\",\n                    isDragging && \"opacity-50\"\n                )}\n            >\n                {/*\n                    `inert` keeps the widget out of the tab order and away from clicks. It's set\n                    through a ref because React 18's types don't know the attribute yet.\n                */}\n                <div ref={node => node?.setAttribute(\"inert\", \"\")} className={\"select-none\"}>\n                    {children}\n                </div>\n                <div\n                    ref={node => {\n                        drag(node);\n                    }}\n                    role={\"button\"}\n                    aria-label={`Drag ${title} to move it`}\n                    data-testid={`dashboard-card-${name}`}\n                    className={cn(\n                        // `rounded-xl` matches the DS Widget, so the outline follows its corners.\n                        \"absolute inset-0 z-10 cursor-grab rounded-xl active:cursor-grabbing\",\n                        \"ring-2 ring-inset ring-primary/30 transition-colors\",\n                        \"hover:bg-primary/5 hover:ring-primary/60\"\n                    )}\n                />\n                {/*\n                    On the corner, half outside the card, so it never covers the widget's own\n                    actions. Only the card under the pointer (or with focus) shows it, so six cards\n                    don't mean six buttons.\n                */}\n                <div\n                    className={cn(\n                        \"absolute -right-sm -top-sm z-20 opacity-0 transition-opacity\",\n                        \"group-hover/card:opacity-100 focus-within:opacity-100\"\n                    )}\n                >\n                    <Tooltip\n                        content={\"Remove from dashboard\"}\n                        trigger={\n                            <IconButton\n                                variant={\"tertiary\"}\n                                size={\"sm\"}\n                                icon={<RemoveIcon />}\n                                aria-label={`Remove ${title} from the dashboard`}\n                                onClick={() => presenter.removeWidget(name)}\n                            />\n                        }\n                    />\n                </div>\n            </div>\n        </>\n    );\n};\n"],"names":["EMPTY_DRAG_IMAGE","DashboardWidgetCard","name","title","isDragging","presenter","registerRef","children","cardRef","useRef","drag","preview","useDrag","DASHBOARD_WIDGET_DND_TYPE","height","DragPreviewImage","node","cn","Tooltip","IconButton","RemoveIcon"],"mappings":";;;;;AAaA,MAAMA,mBACF;AAgBG,MAAMC,sBAAsB,CAAC,EAChCC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,WAAW,EACXC,QAAQ,EACe;IACvB,MAAMC,UAAUC,OAA2B;IAE3C,MAAM,GAAGC,MAAMC,QAAQ,GAAGC,QAAQ;QAC9B,MAAMC;QACN,MAAM;YACFR,UAAU,SAAS,CAACH;YACpB,MAAMY,SAASN,QAAQ,OAAO,EAAE,wBAAwB,UAAU;YAClE,OAAO;gBAAEN;gBAAMC;gBAAOW;YAAO;QACjC;QACA,KAAK;YACDT,UAAU,OAAO;QACrB;IACJ;IAEA,OAAO,WAAP,GACI,wDACI,oBAACU,kBAAgBA;QAAC,SAASJ;QAAS,KAAKX;sBACzC,oBAAC;QACG,KAAKgB,CAAAA;YACDR,QAAQ,OAAO,GAAGQ;YAClBV,YAAYJ,MAAMc;QACtB;QACA,WAAWC,GAGP,qDACAb,cAAc;qBAOlB,oBAAC;QAAI,KAAKY,CAAAA,OAAQA,MAAM,aAAa,SAAS;QAAK,WAAW;OACzDT,WAAAA,WAAAA,GAEL,oBAAC;QACG,KAAKS,CAAAA;YACDN,KAAKM;QACT;QACA,MAAM;QACN,cAAY,CAAC,KAAK,EAAEb,MAAM,WAAW,CAAC;QACtC,eAAa,CAAC,eAAe,EAAED,MAAM;QACrC,WAAWe,GAEP,uEACA,uDACA;sBAQR,oBAAC;QACG,WAAWA,GACP,gEACA;qBAGJ,oBAACC,SAAOA;QACJ,SAAS;QACT,uBACI,oBAACC,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAUA;YACjB,cAAY,CAAC,OAAO,EAAEjB,MAAM,mBAAmB,CAAC;YAChD,SAAS,IAAME,UAAU,YAAY,CAACH;;;AAQtE"}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import type { DashboardDropTarget } from "../../dashboardLayout/presenter/abstractions.js";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface DashboardWidgetColumnProps {
+    columnIndex: number;
+    /** Ordered widget names for this column (from the presenter's view model). */
+    names: string[];
+    draggingName: string | null;
+    dropTarget: DashboardDropTarget | null;
+    canRemoveColumn: boolean;
+    elements: Map<string, React.ReactElement>;
+    titles: Map<string, {
+        title: string;
+    }>;
+    presenter: DashboardLayoutPresenter.Interface;
+    onBrowseWidgets: () => void;
+}
+export declare const DashboardWidgetColumn: ({ columnIndex, names, draggingName, dropTarget, canRemoveColumn, elements, titles, presenter, onBrowseWidgets }: DashboardWidgetColumnProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/DashboardWidgetColumn.js

@@ -0,0 +1,72 @@
+import react, { useRef } from "react";
+import { useDrop } from "react-dnd";
+import { DASHBOARD_WIDGET_DND_TYPE } from "./dragItem.js";
+import { DashboardWidgetCard } from "./DashboardWidgetCard.js";
+import { WidgetDropIndicator } from "./WidgetDropIndicator.js";
+import { ColumnEmptyState } from "./ColumnEmptyState.js";
+const DashboardWidgetColumn = ({ columnIndex, names, draggingName, dropTarget, canRemoveColumn, elements, titles, presenter, onBrowseWidgets })=>{
+    const cardRefs = useRef(new Map());
+    const registerRef = (name, node)=>{
+        if (node) cardRefs.current.set(name, node);
+        else cardRefs.current.delete(name);
+    };
+    const [{ item }, drop] = useDrop({
+        accept: DASHBOARD_WIDGET_DND_TYPE,
+        collect: (monitor)=>({
+                item: monitor.getItem()
+            }),
+        hover: (_item, monitor)=>{
+            const pointer = monitor.getClientOffset();
+            if (!pointer) return;
+            let beforeName = null;
+            for (const name of names){
+                const node = cardRefs.current.get(name);
+                if (!node) continue;
+                const rect = node.getBoundingClientRect();
+                if (pointer.y < rect.top + rect.height / 2) {
+                    beforeName = name;
+                    break;
+                }
+            }
+            presenter.hoverSlot(columnIndex, beforeName);
+        },
+        drop: ()=>{
+            presenter.drop();
+        }
+    });
+    const isDragging = null !== draggingName;
+    const showIndicatorBefore = (name)=>isDragging && null !== dropTarget && dropTarget.column === columnIndex && dropTarget.beforeName === name;
+    let indicator = null;
+    if (item) indicator = /*#__PURE__*/ react.createElement(WidgetDropIndicator, {
+        title: item.title,
+        height: item.height
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            drop(node);
+        },
+        className: "relative flex min-h-[120px] flex-1 flex-col gap-lg",
+        "data-testid": `dashboard-column-${columnIndex}`
+    }, names.map((name)=>{
+        const element = elements.get(name);
+        if (!element) return null;
+        return /*#__PURE__*/ react.createElement(react.Fragment, {
+            key: name
+        }, showIndicatorBefore(name) ? indicator : null, /*#__PURE__*/ react.createElement(DashboardWidgetCard, {
+            name: name,
+            title: titles.get(name)?.title ?? name,
+            isDragging: name === draggingName,
+            presenter: presenter,
+            registerRef: registerRef
+        }, element));
+    }), names.length > 0 && showIndicatorBefore(null) && indicator, 0 === names.length && /*#__PURE__*/ react.createElement(ColumnEmptyState, {
+        canRemove: canRemoveColumn,
+        onRemove: ()=>presenter.removeColumn(columnIndex),
+        onBrowse: onBrowseWidgets,
+        dragging: isDragging,
+        active: showIndicatorBefore(null)
+    }));
+};
+export { DashboardWidgetColumn };
+
+//# sourceMappingURL=DashboardWidgetColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/DashboardWidgetColumn.js","sources":["../../../../src/Dashboard/components/dnd/DashboardWidgetColumn.tsx"],"sourcesContent":["import React from \"react\";\nimport { useRef } from \"react\";\nimport { useDrop } from \"react-dnd\";\nimport { DASHBOARD_WIDGET_DND_TYPE } from \"./dragItem.js\";\nimport type { DashboardWidgetDragItem } from \"./dragItem.js\";\nimport { DashboardWidgetCard } from \"./DashboardWidgetCard.js\";\nimport { WidgetDropIndicator } from \"./WidgetDropIndicator.js\";\nimport { ColumnEmptyState } from \"./ColumnEmptyState.js\";\nimport type { DashboardDropTarget } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\n\ninterface DashboardWidgetColumnProps {\n    columnIndex: number;\n    /** Ordered widget names for this column (from the presenter's view model). */\n    names: string[];\n    draggingName: string | null;\n    dropTarget: DashboardDropTarget | null;\n    canRemoveColumn: boolean;\n    elements: Map<string, React.ReactElement>;\n    titles: Map<string, { title: string }>;\n    presenter: DashboardLayoutPresenter.Interface;\n    onBrowseWidgets: () => void;\n}\n\nexport const DashboardWidgetColumn = ({\n    columnIndex,\n    names,\n    draggingName,\n    dropTarget,\n    canRemoveColumn,\n    elements,\n    titles,\n    presenter,\n    onBrowseWidgets\n}: DashboardWidgetColumnProps) => {\n    // The whole column is one drop target. On hover we measure each card's midpoint to decide\n    // which slot the pointer is nearest, so gaps (and the indicator itself) never miss a drop.\n    const cardRefs = useRef(new Map<string, HTMLElement>());\n\n    const registerRef = (name: string, node: HTMLElement | null) => {\n        if (node) {\n            cardRefs.current.set(name, node);\n        } else {\n            cardRefs.current.delete(name);\n        }\n    };\n\n    const [{ item }, drop] = useDrop({\n        accept: DASHBOARD_WIDGET_DND_TYPE,\n        collect: monitor => ({ item: monitor.getItem<DashboardWidgetDragItem | null>() }),\n        hover: (_item, monitor) => {\n            const pointer = monitor.getClientOffset();\n            if (!pointer) {\n                return;\n            }\n            let beforeName: string | null = null;\n            for (const name of names) {\n                const node = cardRefs.current.get(name);\n                if (!node) {\n                    continue;\n                }\n                const rect = node.getBoundingClientRect();\n                if (pointer.y < rect.top + rect.height / 2) {\n                    beforeName = name;\n                    break;\n                }\n            }\n            presenter.hoverSlot(columnIndex, beforeName);\n        },\n        drop: () => {\n            presenter.drop();\n        }\n    });\n\n    const isDragging = draggingName !== null;\n    const showIndicatorBefore = (name: string | null) =>\n        isDragging &&\n        dropTarget !== null &&\n        dropTarget.column === columnIndex &&\n        dropTarget.beforeName === name;\n\n    // The slot takes the dragged card's size and names it, so it shows exactly what lands there.\n    let indicator = null;\n    if (item) {\n        indicator = <WidgetDropIndicator title={item.title} height={item.height} />;\n    }\n\n    return (\n        <div\n            ref={node => {\n                drop(node);\n            }}\n            className={\"relative flex min-h-[120px] flex-1 flex-col gap-lg\"}\n            data-testid={`dashboard-column-${columnIndex}`}\n        >\n            {names.map(name => {\n                const element = elements.get(name);\n                if (!element) {\n                    return null;\n                }\n                return (\n                    <React.Fragment key={name}>\n                        {showIndicatorBefore(name) ? indicator : null}\n                        <DashboardWidgetCard\n                            name={name}\n                            title={titles.get(name)?.title ?? name}\n                            isDragging={name === draggingName}\n                            presenter={presenter}\n                            registerRef={registerRef}\n                        >\n                            {element}\n                        </DashboardWidgetCard>\n                    </React.Fragment>\n                );\n            })}\n            {names.length > 0 && showIndicatorBefore(null) && indicator}\n            {/* An empty column stays put and becomes the target itself, like the editor's empty slots. */}\n            {names.length === 0 && (\n                <ColumnEmptyState\n                    canRemove={canRemoveColumn}\n                    onRemove={() => presenter.removeColumn(columnIndex)}\n                    onBrowse={onBrowseWidgets}\n                    dragging={isDragging}\n                    active={showIndicatorBefore(null)}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["DashboardWidgetColumn","columnIndex","names","draggingName","dropTarget","canRemoveColumn","elements","titles","presenter","onBrowseWidgets","cardRefs","useRef","Map","registerRef","name","node","item","drop","useDrop","DASHBOARD_WIDGET_DND_TYPE","monitor","_item","pointer","beforeName","rect","isDragging","showIndicatorBefore","indicator","WidgetDropIndicator","element","React","DashboardWidgetCard","ColumnEmptyState"],"mappings":";;;;;;AAwBO,MAAMA,wBAAwB,CAAC,EAClCC,WAAW,EACXC,KAAK,EACLC,YAAY,EACZC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,MAAM,EACNC,SAAS,EACTC,eAAe,EACU;IAGzB,MAAMC,WAAWC,OAAO,IAAIC;IAE5B,MAAMC,cAAc,CAACC,MAAcC;QAC/B,IAAIA,MACAL,SAAS,OAAO,CAAC,GAAG,CAACI,MAAMC;aAE3BL,SAAS,OAAO,CAAC,MAAM,CAACI;IAEhC;IAEA,MAAM,CAAC,EAAEE,IAAI,EAAE,EAAEC,KAAK,GAAGC,QAAQ;QAC7B,QAAQC;QACR,SAASC,CAAAA,UAAY;gBAAE,MAAMA,QAAQ,OAAO;YAAmC;QAC/E,OAAO,CAACC,OAAOD;YACX,MAAME,UAAUF,QAAQ,eAAe;YACvC,IAAI,CAACE,SACD;YAEJ,IAAIC,aAA4B;YAChC,KAAK,MAAMT,QAAQZ,MAAO;gBACtB,MAAMa,OAAOL,SAAS,OAAO,CAAC,GAAG,CAACI;gBAClC,IAAI,CAACC,MACD;gBAEJ,MAAMS,OAAOT,KAAK,qBAAqB;gBACvC,IAAIO,QAAQ,CAAC,GAAGE,KAAK,GAAG,GAAGA,KAAK,MAAM,GAAG,GAAG;oBACxCD,aAAaT;oBACb;gBACJ;YACJ;YACAN,UAAU,SAAS,CAACP,aAAasB;QACrC;QACA,MAAM;YACFf,UAAU,IAAI;QAClB;IACJ;IAEA,MAAMiB,aAAatB,AAAiB,SAAjBA;IACnB,MAAMuB,sBAAsB,CAACZ,OACzBW,cACArB,AAAe,SAAfA,cACAA,WAAW,MAAM,KAAKH,eACtBG,WAAW,UAAU,KAAKU;IAG9B,IAAIa,YAAY;IAChB,IAAIX,MACAW,YAAY,WAAZA,GAAY,oBAACC,qBAAmBA;QAAC,OAAOZ,KAAK,KAAK;QAAE,QAAQA,KAAK,MAAM;;IAG3E,OAAO,WAAP,GACI,oBAAC;QACG,KAAKD,CAAAA;YACDE,KAAKF;QACT;QACA,WAAW;QACX,eAAa,CAAC,iBAAiB,EAAEd,aAAa;OAE7CC,MAAM,GAAG,CAACY,CAAAA;QACP,MAAMe,UAAUvB,SAAS,GAAG,CAACQ;QAC7B,IAAI,CAACe,SACD,OAAO;QAEX,OAAO,WAAP,GACI,oBAACC,MAAAA,QAAc;YAAC,KAAKhB;WAChBY,oBAAoBZ,QAAQa,YAAY,oBACzC,oBAACI,qBAAmBA;YAChB,MAAMjB;YACN,OAAOP,OAAO,GAAG,CAACO,OAAO,SAASA;YAClC,YAAYA,SAASX;YACrB,WAAWK;YACX,aAAaK;WAEZgB;IAIjB,IACC3B,MAAM,MAAM,GAAG,KAAKwB,oBAAoB,SAASC,WAEjDzB,AAAiB,MAAjBA,MAAM,MAAM,IAAU,WAAL,GACd,oBAAC8B,kBAAgBA;QACb,WAAW3B;QACX,UAAU,IAAMG,UAAU,YAAY,CAACP;QACvC,UAAUQ;QACV,UAAUgB;QACV,QAAQC,oBAAoB;;AAKhD"}

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface WidgetDropIndicatorProps {
+    title: string;
+    height: number;
+}
+/**
+ * The slot a dragged widget would drop into: an empty card the size of the dragged one, titled
+ * like it. It grows from nothing when it appears, so the cards below slide instead of jump.
+ */
+export declare const WidgetDropIndicator: ({ title, height }: WidgetDropIndicatorProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/WidgetDropIndicator.js

@@ -0,0 +1,29 @@
+import react, { useEffect, useState } from "react";
+import { Text, cn } from "@webiny/admin-ui";
+const FALLBACK_HEIGHT = 80;
+const WidgetDropIndicator = ({ title, height })=>{
+    const [grown, setGrown] = useState(false);
+    useEffect(()=>{
+        const frame = requestAnimationFrame(()=>setGrown(true));
+        return ()=>cancelAnimationFrame(frame);
+    }, []);
+    let targetHeight = FALLBACK_HEIGHT;
+    if (height > 0) targetHeight = height;
+    return /*#__PURE__*/ react.createElement("div", {
+        "aria-hidden": true,
+        "data-testid": "dashboard-widget-drop-indicator",
+        className: cn("pointer-events-none w-full flex-none overflow-hidden", "rounded-xl border-2 border-dashed", "motion-safe:transition-[height] motion-safe:duration-200 motion-safe:ease-out"),
+        style: {
+            height: grown ? targetHeight : 0,
+            borderColor: "var(--color-primary-400)",
+            backgroundColor: "color-mix(in srgb, var(--color-primary-500) 6%, transparent)"
+        }
+    }, /*#__PURE__*/ react.createElement(Text, {
+        as: "div",
+        size: "md",
+        className: "px-lg pt-md-plus font-semibold text-accent-primary"
+    }, title));
+};
+export { WidgetDropIndicator };
+
+//# sourceMappingURL=WidgetDropIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/WidgetDropIndicator.js","sources":["../../../../src/Dashboard/components/dnd/WidgetDropIndicator.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { cn } from \"@webiny/admin-ui\";\n\n// Used when the dragged card couldn't be measured.\nconst FALLBACK_HEIGHT = 80;\n\ninterface WidgetDropIndicatorProps {\n    // The dragged widget's title, shown in the slot.\n    title: string;\n    // The dragged card's height, so the slot reserves exactly the space the widget will take.\n    height: number;\n}\n\n/**\n * The slot a dragged widget would drop into: an empty card the size of the dragged one, titled\n * like it. It grows from nothing when it appears, so the cards below slide instead of jump.\n */\nexport const WidgetDropIndicator = ({ title, height }: WidgetDropIndicatorProps) => {\n    const [grown, setGrown] = useState(false);\n\n    useEffect(() => {\n        // One frame at zero height first, so the browser has something to transition from.\n        const frame = requestAnimationFrame(() => setGrown(true));\n        return () => cancelAnimationFrame(frame);\n    }, []);\n\n    let targetHeight = FALLBACK_HEIGHT;\n    if (height > 0) {\n        targetHeight = height;\n    }\n\n    return (\n        <div\n            aria-hidden\n            data-testid={\"dashboard-widget-drop-indicator\"}\n            className={cn(\n                \"pointer-events-none w-full flex-none overflow-hidden\",\n                // `rounded-xl` and the 2px border match the cards' outline in Customize mode.\n                \"rounded-xl border-2 border-dashed\",\n                \"motion-safe:transition-[height] motion-safe:duration-200 motion-safe:ease-out\"\n            )}\n            style={{\n                height: grown ? targetHeight : 0,\n                borderColor: \"var(--color-primary-400)\",\n                backgroundColor: \"color-mix(in srgb, var(--color-primary-500) 6%, transparent)\"\n            }}\n        >\n            {/* Where the card's own title sits, and out of the way of the drag chip under the pointer. */}\n            <Text\n                as={\"div\"}\n                size={\"md\"}\n                className={\"px-lg pt-md-plus font-semibold text-accent-primary\"}\n            >\n                {title}\n            </Text>\n        </div>\n    );\n};\n"],"names":["FALLBACK_HEIGHT","WidgetDropIndicator","title","height","grown","setGrown","useState","useEffect","frame","requestAnimationFrame","cancelAnimationFrame","targetHeight","cn","Text"],"mappings":";;AAOA,MAAMA,kBAAkB;AAajB,MAAMC,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAA4B;IAC3E,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAS;IAEnCC,UAAU;QAEN,MAAMC,QAAQC,sBAAsB,IAAMJ,SAAS;QACnD,OAAO,IAAMK,qBAAqBF;IACtC,GAAG,EAAE;IAEL,IAAIG,eAAeX;IACnB,IAAIG,SAAS,GACTQ,eAAeR;IAGnB,OAAO,WAAP,GACI,oBAAC;QACG;QACA,eAAa;QACb,WAAWS,GACP,wDAEA,qCACA;QAEJ,OAAO;YACH,QAAQR,QAAQO,eAAe;YAC/B,aAAa;YACb,iBAAiB;QACrB;qBAGA,oBAACE,MAAIA;QACD,IAAI;QACJ,MAAM;QACN,WAAW;OAEVX;AAIjB"}

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface WidgetSlotProps {
+    host: HTMLDivElement;
+}
+export declare const WidgetSlot: ({ host }: WidgetSlotProps) => React.JSX.Element;
+export {};

package/Dashboard/components/dnd/WidgetSlot.js

@@ -0,0 +1,9 @@
+import react from "react";
+const WidgetSlot = ({ host })=>/*#__PURE__*/ react.createElement("div", {
+        ref: (node)=>{
+            if (node && host.parentNode !== node) node.appendChild(host);
+        }
+    });
+export { WidgetSlot };
+
+//# sourceMappingURL=WidgetSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/WidgetSlot.js","sources":["../../../../src/Dashboard/components/dnd/WidgetSlot.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface WidgetSlotProps {\n    // The widget's container from `useWidgetHosts`.\n    host: HTMLDivElement;\n}\n\n// Marks where a widget sits and moves the widget's container here. See `useWidgetHosts`.\nexport const WidgetSlot = ({ host }: WidgetSlotProps) => {\n    return (\n        <div\n            ref={node => {\n                if (node && host.parentNode !== node) {\n                    node.appendChild(host);\n                }\n            }}\n        />\n    );\n};\n"],"names":["WidgetSlot","host","node"],"mappings":";AAQO,MAAMA,aAAa,CAAC,EAAEC,IAAI,EAAmB,GACzC,WAAP,GACI,oBAAC;QACG,KAAKC,CAAAA;YACD,IAAIA,QAAQD,KAAK,UAAU,KAAKC,MAC5BA,KAAK,WAAW,CAACD;QAEzB"}

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

@@ -0,0 +1,6 @@
+export declare const DASHBOARD_WIDGET_DND_TYPE = "dashboard-widget";
+export interface DashboardWidgetDragItem {
+    name: string;
+    title: string;
+    height: number;
+}

package/Dashboard/components/dnd/dragItem.js

@@ -0,0 +1,4 @@
+const DASHBOARD_WIDGET_DND_TYPE = "dashboard-widget";
+export { DASHBOARD_WIDGET_DND_TYPE };
+
+//# sourceMappingURL=dragItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/dragItem.js","sources":["../../../../src/Dashboard/components/dnd/dragItem.ts"],"sourcesContent":["export const DASHBOARD_WIDGET_DND_TYPE = \"dashboard-widget\";\n\n// What a dragged widget carries, so any column can size and label the slot it would drop into.\nexport interface DashboardWidgetDragItem {\n    name: string;\n    title: string;\n    // The card's height when the drag started, in pixels.\n    height: number;\n}\n"],"names":["DASHBOARD_WIDGET_DND_TYPE"],"mappings":"AAAO,MAAMA,4BAA4B"}

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

@@ -0,0 +1 @@
+export declare const useWidgetHosts: () => (name: string) => HTMLDivElement;

package/Dashboard/components/dnd/useWidgetHosts.js

@@ -0,0 +1,16 @@
+import { useCallback, useRef } from "react";
+const useWidgetHosts = ()=>{
+    const hosts = useRef(new Map());
+    return useCallback((name)=>{
+        let host = hosts.current.get(name);
+        if (!host) {
+            host = document.createElement("div");
+            host.dataset.widgetHost = name;
+            hosts.current.set(name, host);
+        }
+        return host;
+    }, []);
+};
+export { useWidgetHosts };
+
+//# sourceMappingURL=useWidgetHosts.js.map