@webiny/app-admin-ui 0.0.0-unstable.0156a4c312

package/Dashboard/components/assets/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Social Icons" clip-path="url(#clip0_2021_7937)">
+<path id="Vector" d="M23.5221 6.18547C23.3864 5.67489 23.119 5.20889 22.7466 4.83413C22.3743 4.45936 21.91 4.18897 21.4003 4.05002C19.5239 3.54547 12.0239 3.54547 12.0239 3.54547C12.0239 3.54547 4.52393 3.54547 2.64756 4.05002C2.13786 4.18897 1.67358 4.45936 1.30121 4.83413C0.928842 5.20889 0.661431 5.67489 0.525744 6.18547C0.0239258 8.07002 0.0239258 12 0.0239258 12C0.0239258 12 0.0239258 15.93 0.525744 17.8146C0.661431 18.3251 0.928842 18.7911 1.30121 19.1659C1.67358 19.5407 2.13786 19.8111 2.64756 19.95C4.52393 20.4546 12.0239 20.4546 12.0239 20.4546C12.0239 20.4546 19.5239 20.4546 21.4003 19.95C21.91 19.8111 22.3743 19.5407 22.7466 19.1659C23.119 18.7911 23.3864 18.3251 23.5221 17.8146C24.0239 15.93 24.0239 12 24.0239 12C24.0239 12 24.0239 8.07002 23.5221 6.18547Z" fill="#FF0302"/>
+<path id="Vector_2" d="M9.56934 15.5687V8.4314L15.8421 12L9.56934 15.5687Z" fill="#FEFEFE"/>
+</g>
+<defs>
+<clipPath id="clip0_2021_7937">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/dnd/useWidgetHosts.js","sources":["../../../../src/Dashboard/components/dnd/useWidgetHosts.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useRef } from \"react\";\n\n/*\n * One detached container per widget, created once and kept for the life of the dashboard.\n *\n * Each widget renders into its container through a portal, and `WidgetSlot` moves the container\n * to wherever the widget currently sits. The portal's container never changes, so React never\n * remounts the widget: switching Customize mode or dropping a widget into another column doesn't\n * reload it.\n */\nexport const useWidgetHosts = () => {\n    const hosts = useRef(new Map<string, HTMLDivElement>());\n\n    return useCallback((name: string): HTMLDivElement => {\n        let host = hosts.current.get(name);\n        if (!host) {\n            host = document.createElement(\"div\");\n            host.dataset.widgetHost = name;\n            hosts.current.set(name, host);\n        }\n        return host;\n    }, []);\n};\n"],"names":["useWidgetHosts","hosts","useRef","Map","useCallback","name","host","document"],"mappings":";AAWO,MAAMA,iBAAiB;IAC1B,MAAMC,QAAQC,OAAO,IAAIC;IAEzB,OAAOC,YAAY,CAACC;QAChB,IAAIC,OAAOL,MAAM,OAAO,CAAC,GAAG,CAACI;QAC7B,IAAI,CAACC,MAAM;YACPA,OAAOC,SAAS,aAAa,CAAC;YAC9BD,KAAK,OAAO,CAAC,UAAU,GAAGD;YAC1BJ,MAAM,OAAO,CAAC,GAAG,CAACI,MAAMC;QAC5B;QACA,OAAOA;IACX,GAAG,EAAE;AACT"}

package/Dashboard/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AssistanceWidget.js";
+export * from "./CommunityWidget.js";
+export * from "./MissingPermissionsWidget.js";

package/Dashboard/components/index.js

@@ -0,0 +1,3 @@
+export * from "./AssistanceWidget.js";
+export * from "./CommunityWidget.js";
+export * from "./MissingPermissionsWidget.js";

package/Dashboard/components/layout/EditableColumns.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DashboardLayoutPresenter } from "../../dashboardLayout/presenter/abstractions.js";
+interface EditableColumnsProps {
+    vm: DashboardLayoutPresenter.ViewModel;
+    slots: Map<string, React.ReactElement>;
+    titles: Map<string, {
+        title: string;
+    }>;
+    presenter: DashboardLayoutPresenter.Interface;
+    onBrowseWidgets: () => void;
+}
+export declare const EditableColumns: ({ vm, slots, titles, presenter, onBrowseWidgets }: EditableColumnsProps) => React.JSX.Element;
+export {};

package/Dashboard/components/layout/EditableColumns.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { DashboardDragLayer } from "../dnd/DashboardDragLayer.js";
+import { DashboardWidgetColumn } from "../dnd/DashboardWidgetColumn.js";
+import { MIN_COLUMN_COUNT } from "../../dashboardLayout/types.js";
+import { DASHBOARD_MAX_WIDTH } from "./layoutConstants.js";
+const EditableColumns = ({ vm, slots, titles, presenter, onBrowseWidgets })=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DashboardDragLayer, null), /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-lg",
+        style: {
+            maxWidth: DASHBOARD_MAX_WIDTH
+        }
+    }, vm.columns.map((names, index)=>/*#__PURE__*/ react.createElement(DashboardWidgetColumn, {
+            key: index,
+            columnIndex: index,
+            names: names,
+            draggingName: vm.draggingName,
+            dropTarget: vm.dropTarget,
+            canRemoveColumn: vm.columnCount > MIN_COLUMN_COUNT,
+            elements: slots,
+            titles: titles,
+            presenter: presenter,
+            onBrowseWidgets: onBrowseWidgets
+        }))));
+export { EditableColumns };
+
+//# sourceMappingURL=EditableColumns.js.map

package/Dashboard/components/layout/EditableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard/components/layout/EditableColumns.js","sources":["../../../../src/Dashboard/components/layout/EditableColumns.tsx"],"sourcesContent":["import React from \"react\";\nimport { DashboardDragLayer } from \"../dnd/DashboardDragLayer.js\";\nimport { DashboardWidgetColumn } from \"../dnd/DashboardWidgetColumn.js\";\nimport { MIN_COLUMN_COUNT } from \"../../dashboardLayout/types.js\";\nimport type { DashboardLayoutPresenter } from \"../../dashboardLayout/presenter/abstractions.js\";\nimport { DASHBOARD_MAX_WIDTH } from \"./layoutConstants.js\";\n\ninterface EditableColumnsProps {\n    vm: DashboardLayoutPresenter.ViewModel;\n    slots: Map<string, React.ReactElement>;\n    titles: Map<string, { title: string }>;\n    presenter: DashboardLayoutPresenter.Interface;\n    onBrowseWidgets: () => void;\n}\n\n// Customize mode: every column is a drop target and every widget can be dragged or removed.\nexport const EditableColumns = ({\n    vm,\n    slots,\n    titles,\n    presenter,\n    onBrowseWidgets\n}: EditableColumnsProps) => {\n    return (\n        <>\n            <DashboardDragLayer />\n            <div className={\"flex gap-lg\"} style={{ maxWidth: DASHBOARD_MAX_WIDTH }}>\n                {vm.columns.map((names, index) => (\n                    <DashboardWidgetColumn\n                        key={index}\n                        columnIndex={index}\n                        names={names}\n                        draggingName={vm.draggingName}\n                        dropTarget={vm.dropTarget}\n                        canRemoveColumn={vm.columnCount > MIN_COLUMN_COUNT}\n                        elements={slots}\n                        titles={titles}\n                        presenter={presenter}\n                        onBrowseWidgets={onBrowseWidgets}\n                    />\n                ))}\n            </div>\n        </>\n    );\n};\n"],"names":["EditableColumns","vm","slots","titles","presenter","onBrowseWidgets","DashboardDragLayer","DASHBOARD_MAX_WIDTH","names","index","DashboardWidgetColumn","MIN_COLUMN_COUNT"],"mappings":";;;;;AAgBO,MAAMA,kBAAkB,CAAC,EAC5BC,EAAE,EACFC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,eAAe,EACI,GACZ,WAAP,GACI,wDACI,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAAC;QAAI,WAAW;QAAe,OAAO;YAAE,UAAUC;QAAoB;OACjEN,GAAG,OAAO,CAAC,GAAG,CAAC,CAACO,OAAOC,QAAAA,WAAAA,GACpB,oBAACC,uBAAqBA;YAClB,KAAKD;YACL,aAAaA;YACb,OAAOD;YACP,cAAcP,GAAG,YAAY;YAC7B,YAAYA,GAAG,UAAU;YACzB,iBAAiBA,GAAG,WAAW,GAAGU;YAClC,UAAUT;YACV,QAAQC;YACR,WAAWC;YACX,iBAAiBC"}

package/Dashboard/components/layout/StaticColumns.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface StaticColumnsProps {
+    columns: string[][];
+    visibleCount: number;
+    slots: Map<string, React.ReactElement>;
+}
+export declare const StaticColumns: ({ columns, visibleCount, slots }: StaticColumnsProps) => React.JSX.Element;
+export {};