@payloadcms/ui 4.0.0-internal.c3ac604 → 4.0.0-internal.cb69780

package/dist/views/Dashboard/Default/ModularDashboard/index.client.js

@@ -4,16 +4,19 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
-import React, { useMemo, useState } from 'react';
+import { getTranslation } from '@payloadcms/translations';
+import { toWords } from 'payload/shared';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button } from '../../../../elements/Button/index.js';
 import { Popup } from '../../../../elements/Popup/index.js';
 import * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
-import { XIcon } from '../../../../icons/X/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { DashboardStepNav } from './DashboardStepNav.js';
 import { useDashboardLayout } from './useDashboardLayout.js';
 import { closestInXAxis } from './utils/collisionDetection.js';
 import { useDashboardSensors } from './utils/sensors.js';
+import { WidgetContent } from './WidgetContent/index.js';
 import { WidgetEditControl } from './WidgetEditControl.js';
 /**
  * Custom modifier that only applies snapCenterToCursor for pointer events.
@@ -40,12 +43,13 @@ const WIDTH_TO_PERCENTAGE = {
   full: 100
 };
 export function ModularDashboardClient(t0) {
-  const $ = _c(22);
+  const $ = _c(27);
   const {
     clientLayout: initialLayout,
     widgets
   } = t0;
   const {
+    i18n,
     t
   } = useTranslation();
   const {
@@ -63,21 +67,39 @@ export function ModularDashboardClient(t0) {
     updateWidgetData
   } = useDashboardLayout(initialLayout);
   const [activeDragId, setActiveDragId] = useState(null);
+  const [activeControlsWidgetID, setActiveControlsWidgetID] = useState(null);
   const sensors = useDashboardSensors();
   let t1;
-  if ($[0] !== activeDragId || $[1] !== addWidget || $[2] !== cancel || $[3] !== cancelModal || $[4] !== currentLayout || $[5] !== deleteWidget || $[6] !== isEditing || $[7] !== moveWidget || $[8] !== resetLayout || $[9] !== resizeWidget || $[10] !== saveLayout || $[11] !== sensors || $[12] !== setIsEditing || $[13] !== t || $[14] !== updateWidgetData || $[15] !== widgets) {
-    let t2;
-    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = () => {
+  let t2;
+  if ($[0] !== isEditing) {
+    t1 = () => {
+      if (!isEditing) {
+        setActiveControlsWidgetID(null);
+      }
+    };
+    t2 = [isEditing];
+    $[0] = isEditing;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== activeControlsWidgetID || $[4] !== activeDragId || $[5] !== addWidget || $[6] !== cancel || $[7] !== cancelModal || $[8] !== currentLayout || $[9] !== deleteWidget || $[10] !== i18n || $[11] !== isEditing || $[12] !== moveWidget || $[13] !== resetLayout || $[14] !== resizeWidget || $[15] !== saveLayout || $[16] !== sensors || $[17] !== setIsEditing || $[18] !== t || $[19] !== updateWidgetData || $[20] !== widgets) {
+    let t4;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = () => {
         setActiveDragId(null);
       };
-      $[17] = t2;
+      $[22] = t4;
     } else {
-      t2 = $[17];
+      t4 = $[22];
     }
-    let t3;
-    if ($[18] !== currentLayout || $[19] !== moveWidget) {
-      t3 = event => {
+    let t5;
+    if ($[23] !== currentLayout || $[24] !== moveWidget) {
+      t5 = event => {
         if (!event.over) {
           setActiveDragId(null);
           return;
@@ -103,22 +125,22 @@ export function ModularDashboardClient(t0) {
         });
         setActiveDragId(null);
       };
-      $[18] = currentLayout;
-      $[19] = moveWidget;
-      $[20] = t3;
+      $[23] = currentLayout;
+      $[24] = moveWidget;
+      $[25] = t5;
     } else {
-      t3 = $[20];
+      t5 = $[25];
     }
-    let t4;
-    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = event_0 => {
+    let t6;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = event_0 => {
         setActiveDragId(event_0.active.id);
       };
-      $[21] = t4;
+      $[26] = t6;
     } else {
-      t4 = $[21];
+      t6 = $[26];
     }
-    t1 = _jsxs("div", {
+    t3 = _jsxs("div", {
       children: [_jsx(DndContext, {
         autoScroll: {
           enabled: true,
@@ -129,9 +151,9 @@ export function ModularDashboardClient(t0) {
         },
         collisionDetection: closestInXAxis,
         id: "dashboard-dnd-context",
-        onDragCancel: t2,
-        onDragEnd: t3,
-        onDragStart: t4,
+        onDragCancel: t4,
+        onDragEnd: t5,
+        onDragStart: t6,
         sensors,
         children: _jsxs("div", {
           className: `modular-dashboard ${isEditing ? "editing" : ""}`,
@@ -144,50 +166,64 @@ export function ModularDashboardClient(t0) {
             children: _jsx("p", {
               children: t("dashboard:noItems")
             })
-          }), currentLayout?.map((widget_1, _index) => _jsx(React.Fragment, {
-            children: _jsx(DraggableItem, {
+          }), currentLayout?.map(widget_1 => {
+            const slug_0 = widget_1.item.id.slice(0, widget_1.item.id.lastIndexOf("-"));
+            const label = getTranslation(widgets.find(widgetConfig => widgetConfig.slug === slug_0)?.label ?? toWords(slug_0), i18n);
+            return _jsx(DraggableItem, {
               disabled: !isEditing,
               id: widget_1.item.id,
+              label,
               style: {
                 width: `${WIDTH_TO_PERCENTAGE[widget_1.item.width]}%`
               },
               width: widget_1.item.width,
-              children: _jsxs("div", {
-                className: `widget-wrapper ${isEditing ? "widget-wrapper--editing" : ""}`,
-                children: [_jsx("div", {
-                  "aria-hidden": isEditing,
-                  className: "widget-content",
-                  inert: isEditing,
-                  children: widget_1.component
-                }), isEditing && _jsxs("div", {
-                  className: "widget-wrapper__controls",
-                  onPointerDown: _temp,
-                  children: [_jsx(WidgetEditControl, {
-                    onSave: data => {
-                      updateWidgetData(widget_1.item.id, data);
-                    },
-                    widgetData: widget_1.item.data,
-                    widgetID: widget_1.item.id
-                  }), _jsx(WidgetWidthDropdown, {
-                    currentWidth: widget_1.item.width,
-                    maxWidth: widget_1.item.maxWidth,
-                    minWidth: widget_1.item.minWidth,
-                    onResize: width => resizeWidget(widget_1.item.id, width)
-                  }), _jsxs("button", {
-                    className: "widget-wrapper__delete-btn",
-                    onClick: () => deleteWidget(widget_1.item.id),
-                    type: "button",
-                    children: [_jsx("span", {
-                      className: "sr-only",
-                      children: t("dashboard:deleteWidget", {
-                        id: widget_1.item.id
-                      })
-                    }), _jsx(XIcon, {})]
+              children: t7 => {
+                const {
+                  dragHandle
+                } = t7;
+                return _jsxs("div", {
+                  className: ["widget-wrapper", isEditing ? "widget-wrapper--editing" : "", activeControlsWidgetID === widget_1.item.id ? "widget-wrapper--controls-active" : ""].filter(Boolean).join(" "),
+                  children: [_jsx(WidgetContent, {
+                    id: `${widget_1.item.id}-content`,
+                    isEditing,
+                    children: widget_1.component
+                  }), dragHandle, isEditing && _jsxs("div", {
+                    className: "widget-wrapper__controls",
+                    children: [_jsx(WidgetEditControl, {
+                      onSave: data => {
+                        updateWidgetData(widget_1.item.id, data);
+                      },
+                      widgetData: widget_1.item.data,
+                      widgetID: widget_1.item.id,
+                      widgetLabel: label
+                    }), _jsx(WidgetWidthDropdown, {
+                      currentWidth: widget_1.item.width,
+                      maxWidth: widget_1.item.maxWidth,
+                      minWidth: widget_1.item.minWidth,
+                      onOpenChange: isOpen => {
+                        setActiveControlsWidgetID(isOpen ? widget_1.item.id : null);
+                      },
+                      onResize: width => resizeWidget(widget_1.item.id, width),
+                      widgetLabel: label
+                    }), _jsx(Button, {
+                      "aria-label": t("general:deleteLabel", {
+                        label
+                      }),
+                      buttonStyle: "destructive",
+                      className: "widget-wrapper__delete-btn",
+                      extraButtonProps: {
+                        tabIndex: 0
+                      },
+                      icon: "x",
+                      margin: false,
+                      onClick: () => deleteWidget(widget_1.item.id),
+                      round: true
+                    })]
                   })]
-                })]
-              })
-            })
-          }, widget_1.item.id)), _jsx(DragOverlay, {
+                });
+              }
+            }, widget_1.item.id);
+          }), _jsx(DragOverlay, {
             className: "drag-overlay",
             dropAnimation: {
               duration: 100
@@ -196,6 +232,8 @@ export function ModularDashboardClient(t0) {
             children: activeDragId ? (() => {
               const draggedWidget = currentLayout?.find(widget_2 => widget_2.item.id === activeDragId);
               return draggedWidget ? _jsx("div", {
+                "aria-hidden": "true",
+                inert: true,
                 style: {
                   transform: "scale(0.25)"
                 },
@@ -220,37 +258,41 @@ export function ModularDashboardClient(t0) {
         widgets
       }), cancelModal]
     });
-    $[0] = activeDragId;
-    $[1] = addWidget;
-    $[2] = cancel;
-    $[3] = cancelModal;
-    $[4] = currentLayout;
-    $[5] = deleteWidget;
-    $[6] = isEditing;
-    $[7] = moveWidget;
-    $[8] = resetLayout;
-    $[9] = resizeWidget;
-    $[10] = saveLayout;
-    $[11] = sensors;
-    $[12] = setIsEditing;
-    $[13] = t;
-    $[14] = updateWidgetData;
-    $[15] = widgets;
-    $[16] = t1;
+    $[3] = activeControlsWidgetID;
+    $[4] = activeDragId;
+    $[5] = addWidget;
+    $[6] = cancel;
+    $[7] = cancelModal;
+    $[8] = currentLayout;
+    $[9] = deleteWidget;
+    $[10] = i18n;
+    $[11] = isEditing;
+    $[12] = moveWidget;
+    $[13] = resetLayout;
+    $[14] = resizeWidget;
+    $[15] = saveLayout;
+    $[16] = sensors;
+    $[17] = setIsEditing;
+    $[18] = t;
+    $[19] = updateWidgetData;
+    $[20] = widgets;
+    $[21] = t3;
   } else {
-    t1 = $[16];
+    t3 = $[21];
   }
-  return t1;
-}
-function _temp(e) {
-  return e.stopPropagation();
+  return t3;
 }
 function WidgetWidthDropdown({
   currentWidth,
   maxWidth,
   minWidth,
-  onResize
+  onOpenChange,
+  onResize,
+  widgetLabel
 }) {
+  const {
+    t
+  } = useTranslation();
   // Filter options based on minWidth and maxWidth
   const validOptions = useMemo(() => {
     const minPercentage = WIDTH_TO_PERCENTAGE[minWidth];
@@ -265,18 +307,9 @@ function WidgetWidthDropdown({
     return null;
   }
   return /*#__PURE__*/_jsx(Popup, {
-    button: /*#__PURE__*/_jsxs("button", {
-      className: "widget-wrapper__size-btn",
-      onPointerDown: e => e.stopPropagation(),
-      type: "button",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "widget-wrapper__size-btn-text",
-        children: currentWidth
-      }), /*#__PURE__*/_jsx(ChevronIcon, {
-        className: "widget-wrapper__size-btn-icon"
-      })]
-    }),
-    buttonType: "custom",
+    onToggleClose: () => onOpenChange(false),
+    onToggleOpen: onOpenChange,
+    popupType: "menu",
     render: ({
       close
     }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
@@ -298,12 +331,41 @@ function WidgetWidthDropdown({
         }, option_0.width);
       })
     }),
+    renderButton: ({
+      active: _active,
+      onClick,
+      onKeyDown,
+      ...ariaProps
+    }) => /*#__PURE__*/_jsx(Button, {
+      "aria-label": t('dashboard:resizeWidget', {
+        label: widgetLabel,
+        size: currentWidth
+      }),
+      buttonStyle: "secondary",
+      className: "widget-wrapper__size-btn",
+      extraButtonProps: {
+        onKeyDown,
+        ...ariaProps,
+        tabIndex: 0
+      },
+      icon: /*#__PURE__*/_jsx(ChevronIcon, {
+        className: "widget-wrapper__size-btn-icon",
+        size: 16
+      }),
+      margin: false,
+      onClick: onClick,
+      selected: _active,
+      children: currentWidth
+    }),
     size: "small",
     verticalAlign: "bottom"
   });
 }
 function DraggableItem(props) {
-  const $ = _c(13);
+  const $ = _c(16);
+  const {
+    t
+  } = useTranslation();
   let t0;
   if ($[0] !== props.disabled || $[1] !== props.id) {
     t0 = {
@@ -320,20 +382,17 @@ function DraggableItem(props) {
     attributes,
     isDragging,
     listeners,
+    setActivatorNodeRef,
     setNodeRef
   } = useDraggable(t0);
   const t1 = isDragging ? 0.3 : 1;
   let t2;
-  if ($[3] !== attributes || $[4] !== listeners || $[5] !== props.children || $[6] !== props.disabled || $[7] !== props.id || $[8] !== props.style || $[9] !== props.width || $[10] !== setNodeRef || $[11] !== t1) {
+  if ($[3] !== attributes || $[4] !== listeners || $[5] !== props.children || $[6] !== props.disabled || $[7] !== props.id || $[8] !== props.label || $[9] !== props.style || $[10] !== props.width || $[11] !== setActivatorNodeRef || $[12] !== setNodeRef || $[13] !== t || $[14] !== t1) {
     const mergedStyles = {
       ...props.style,
       opacity: t1,
       position: "relative"
     };
-    const draggableProps = props.disabled ? {} : {
-      ...listeners,
-      ...attributes
-    };
     t2 = _jsxs("div", {
       className: "widget",
       "data-slug": props.id,
@@ -343,15 +402,29 @@ function DraggableItem(props) {
         id: props.id,
         position: "before"
       }), _jsx("div", {
+        "aria-label": props.label,
+        "aria-labelledby": props.disabled ? undefined : `${props.id}-content`,
         className: "draggable",
         id: props.id,
         ref: setNodeRef,
-        ...draggableProps,
+        role: "group",
         style: {
           width: "100%",
-          height: "100%"
+          height: "100%",
+          position: "relative"
         },
-        children: props.children
+        tabIndex: props.disabled ? undefined : 0,
+        children: props.children({
+          dragHandle: !props.disabled && _jsx("button", {
+            ...attributes,
+            ...listeners,
+            "aria-describedby": [attributes["aria-describedby"], `${props.id}-content`].filter(Boolean).join(" "),
+            "aria-label": t("general:dragToReorder"),
+            className: "widget-wrapper__edit-overlay widget-wrapper__drag-btn",
+            ref: setActivatorNodeRef,
+            type: "button"
+          })
+        })
       }), _jsx(DroppableItem, {
         id: props.id,
         position: "after"
@@ -362,13 +435,16 @@ function DraggableItem(props) {
     $[5] = props.children;
     $[6] = props.disabled;
     $[7] = props.id;
-    $[8] = props.style;
-    $[9] = props.width;
-    $[10] = setNodeRef;
-    $[11] = t1;
-    $[12] = t2;
+    $[8] = props.label;
+    $[9] = props.style;
+    $[10] = props.width;
+    $[11] = setActivatorNodeRef;
+    $[12] = setNodeRef;
+    $[13] = t;
+    $[14] = t1;
+    $[15] = t2;
   } else {
-    t2 = $[12];
+    t2 = $[15];
   }
   return t2;
 }
@@ -408,7 +484,7 @@ function DroppableItem(t0) {
   const t4 = `${id}-${position}`;
   const t5 = position === "before" ? -2 : "auto";
   const t6 = position === "after" ? -2 : "auto";
-  const t7 = isOver ? "var(--color-bg-success)" : "transparent";
+  const t7 = isOver ? "var(--color-bg-brand-secondary)" : "transparent";
   let t8;
   if ($[5] !== setNodeRef || $[6] !== t4 || $[7] !== t5 || $[8] !== t6 || $[9] !== t7) {
     t8 = _jsx("div", {

package/dist/views/Dashboard/Default/ModularDashboard/index.client.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","React","useMemo","useState","Popup","PopupList","ChevronIcon","XIcon","useTranslation","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WidgetEditControl","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","updateWidgetData","activeDragId","setActiveDragId","sensors","t1","t2","Symbol","for","t3","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t4","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","_index","Fragment","DraggableItem","disabled","width","inert","component","onPointerDown","_temp","onSave","data","widgetData","widgetID","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onResize","onClick","type","dropAnimation","duration","modifiers","draggedWidget","find","widget_2","e","stopPropagation","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","filter","option","isDisabled","button","buttonType","render","close","ButtonGroup","isSelected","Button","toFixed","size","verticalAlign","props","attributes","isDragging","listeners","setNodeRef","mergedStyles","opacity","draggableProps","DroppableItem","ref","height","isOver","t5","t6","t7","t8","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Modifier } from '@dnd-kit/core'\nimport type { ClientWidget, WidgetWidth } from 'payload'\n\nimport { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'\nimport { snapCenterToCursor } from '@dnd-kit/modifiers'\nimport React, { useMemo, useState } from 'react'\n\nimport { Popup } from '../../../../elements/Popup/index.js'\nimport * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\nimport { WidgetEditControl } from './WidgetEditControl.js'\n\n/**\n * Custom modifier that only applies snapCenterToCursor for pointer events.\n * During keyboard navigation, we handle positioning ourselves via the coordinate getter.\n */\nconst snapCenterToCursorOnlyForPointer: Modifier = (args) => {\n  const { activatorEvent } = args\n\n  // Only apply snap for pointer events (mouse/touch), not keyboard\n  // Check activatorEvent.type since KeyboardEvent may not exist on server\n  if (activatorEvent && 'key' in activatorEvent) {\n    return args.transform\n  }\n\n  return snapCenterToCursor(args)\n}\n\nexport type WidgetItem = {\n  data?: Record<string, unknown>\n  id: string\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  width: WidgetWidth\n}\n\nexport type WidgetInstanceClient = {\n  component: React.ReactNode\n  item: WidgetItem\n}\n\nexport type DropTargetWidget = {\n  position: 'after' | 'before'\n  widget: WidgetInstanceClient\n} | null\n\n/* eslint-disable perfectionist/sort-objects */\nconst WIDTH_TO_PERCENTAGE = {\n  'x-small': 25,\n  small: (1 / 3) * 100,\n  medium: 50,\n  large: (2 / 3) * 100,\n  'x-large': 75,\n  full: 100,\n} as const\n\nexport function ModularDashboardClient({\n  clientLayout: initialLayout,\n  widgets,\n}: {\n  clientLayout: WidgetInstanceClient[]\n  widgets: ClientWidget[]\n}) {\n  const { t } = useTranslation()\n  const {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n    updateWidgetData,\n  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\n\n  return (\n    <div>\n      <DndContext\n        autoScroll={{\n          enabled: true,\n          threshold: {\n            x: 0, // No horizontal scroll\n            y: 0.2, // Allow vertical scroll at 20% from edge\n          },\n        }}\n        collisionDetection={closestInXAxis}\n        // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665\n        id=\"dashboard-dnd-context\"\n        onDragCancel={() => {\n          setActiveDragId(null)\n        }}\n        onDragEnd={(event) => {\n          if (!event.over) {\n            setActiveDragId(null)\n            return\n          }\n          const droppableId = event.over.id as string\n          const i = droppableId.lastIndexOf('-')\n          const slug = droppableId.slice(0, i)\n          const position = droppableId.slice(i + 1)\n\n          if (slug === event.active.id) {\n            return\n          }\n\n          const moveFromIndex = currentLayout?.findIndex(\n            (widget) => widget.item.id === event.active.id,\n          )\n          let moveToIndex = currentLayout?.findIndex((widget) => widget.item.id === slug)\n          if (moveFromIndex < moveToIndex) {\n            moveToIndex--\n          }\n          if (position === 'after') {\n            moveToIndex++\n          }\n          moveWidget({ moveFromIndex, moveToIndex })\n          setActiveDragId(null)\n        }}\n        onDragStart={(event) => {\n          setActiveDragId(event.active.id as string)\n        }}\n        sensors={sensors}\n      >\n        <div\n          className={`modular-dashboard ${isEditing ? 'editing' : ''}`}\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            // Don't add gap here! We need to use padding on the widgets instead\n            // to make sure all rows have the same width always.\n          }}\n        >\n          {currentLayout?.length === 0 && (\n            <div className=\"modular-dashboard__empty\">\n              <p>{t('dashboard:noItems')}</p>\n            </div>\n          )}\n          {currentLayout?.map((widget, _index) => (\n            <React.Fragment key={widget.item.id}>\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                }}\n                width={widget.item.width}\n              >\n                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>\n                  <div aria-hidden={isEditing} className=\"widget-content\" inert={isEditing}>\n                    {widget.component}\n                  </div>\n                  {isEditing && (\n                    <div\n                      className=\"widget-wrapper__controls\"\n                      onPointerDown={(e) => e.stopPropagation()}\n                    >\n                      <WidgetEditControl\n                        onSave={(data) => {\n                          updateWidgetData(widget.item.id, data)\n                        }}\n                        widgetData={widget.item.data}\n                        widgetID={widget.item.id}\n                      />\n                      <WidgetWidthDropdown\n                        currentWidth={widget.item.width}\n                        maxWidth={widget.item.maxWidth}\n                        minWidth={widget.item.minWidth}\n                        onResize={(width) => resizeWidget(widget.item.id, width)}\n                      />\n                      <button\n                        className=\"widget-wrapper__delete-btn\"\n                        onClick={() => deleteWidget(widget.item.id)}\n                        type=\"button\"\n                      >\n                        <span className=\"sr-only\">\n                          {t('dashboard:deleteWidget', { id: widget.item.id })}\n                        </span>\n                        <XIcon />\n                      </button>\n                    </div>\n                  )}\n                </div>\n              </DraggableItem>\n            </React.Fragment>\n          ))}\n          <DragOverlay\n            className=\"drag-overlay\"\n            dropAnimation={{\n              duration: 100,\n            }}\n            // Uses custom modifier that only applies for pointer, not keyboard navigation.\n            modifiers={[snapCenterToCursorOnlyForPointer]}\n          >\n            {activeDragId\n              ? (() => {\n                  const draggedWidget = currentLayout?.find(\n                    (widget) => widget.item.id === activeDragId,\n                  )\n                  return draggedWidget ? (\n                    <div\n                      style={{\n                        transform: 'scale(0.25)',\n                      }}\n                    >\n                      <div\n                        className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}\n                      >\n                        <div className=\"widget-content\">{draggedWidget.component}</div>\n                      </div>\n                    </div>\n                  ) : null\n                })()\n              : null}\n          </DragOverlay>\n        </div>\n      </DndContext>\n      <DashboardStepNav\n        addWidget={addWidget}\n        cancel={cancel}\n        isEditing={isEditing}\n        resetLayout={resetLayout}\n        saveLayout={saveLayout}\n        setIsEditing={setIsEditing}\n        widgets={widgets}\n      />\n      {cancelModal}\n    </div>\n  )\n}\n\nfunction WidgetWidthDropdown({\n  currentWidth,\n  maxWidth,\n  minWidth,\n  onResize,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onResize: (width: WidgetWidth) => void\n}) {\n  // Filter options based on minWidth and maxWidth\n  const validOptions = useMemo(() => {\n    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth]\n    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth]\n\n    return Object.entries(WIDTH_TO_PERCENTAGE)\n      .map(([key, value]) => ({\n        width: key as WidgetWidth,\n        percentage: value,\n      }))\n      .filter((option) => option.percentage >= minPercentage && option.percentage <= maxPercentage)\n  }, [minWidth, maxWidth])\n\n  const isDisabled = validOptions.length <= 1\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <Popup\n      button={\n        <button\n          className=\"widget-wrapper__size-btn\"\n          onPointerDown={(e) => e.stopPropagation()}\n          type=\"button\"\n        >\n          <span className=\"widget-wrapper__size-btn-text\">{currentWidth}</span>\n          <ChevronIcon className=\"widget-wrapper__size-btn-icon\" />\n        </button>\n      }\n      buttonType=\"custom\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          {validOptions.map((option) => {\n            const isSelected = option.width === currentWidth\n            return (\n              <PopupList.Button\n                active={isSelected}\n                key={option.width}\n                onClick={() => {\n                  onResize(option.width)\n                  close()\n                }}\n              >\n                <span className=\"widget-wrapper__size-btn-label\">{option.width}</span>\n                <span className=\"widget-wrapper__size-btn-percentage\">\n                  {option.percentage.toFixed(0)}%\n                </span>\n              </PopupList.Button>\n            )\n          })}\n        </PopupList.ButtonGroup>\n      )}\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: React.ReactNode\n  disabled?: boolean\n  id: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { attributes, isDragging, listeners, setNodeRef } = useDraggable({\n    id: props.id,\n    disabled: props.disabled,\n  })\n\n  const mergedStyles: React.CSSProperties = {\n    ...props.style,\n    opacity: isDragging ? 0.3 : 1,\n    position: 'relative',\n  }\n\n  // Only apply draggable attributes and listeners when not disabled\n  // to prevent disabling interactive elements inside the widget\n  const draggableProps = props.disabled ? {} : { ...listeners, ...attributes }\n\n  return (\n    <div className=\"widget\" data-slug={props.id} data-width={props.width} style={mergedStyles}>\n      <DroppableItem id={props.id} position=\"before\" />\n      <div\n        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        {...draggableProps}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n      >\n        {props.children}\n      </div>\n      <DroppableItem id={props.id} position=\"after\" />\n    </div>\n  )\n}\n\nfunction DroppableItem({ id, position }: { id: string; position: 'after' | 'before' }) {\n  const { setNodeRef, isOver } = useDroppable({ id: `${id}-${position}`, data: { position } })\n\n  return (\n    <div\n      className=\"droppable-widget\"\n      data-testid={`${id}-${position}`}\n      ref={setNodeRef}\n      style={{\n        position: 'absolute',\n        left: position === 'before' ? -2 : 'auto',\n        right: position === 'after' ? -2 : 'auto',\n        top: 0,\n        bottom: 0,\n        borderRadius: '1000px',\n        width: '4px',\n        backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.client.js","names":["c","_c","DndContext","DragOverlay","useDraggable","useDroppable","snapCenterToCursor","getTranslation","toWords","React","useEffect","useMemo","useState","Button","Popup","PopupList","ChevronIcon","useTranslation","DashboardStepNav","useDashboardLayout","closestInXAxis","useDashboardSensors","WidgetContent","WidgetEditControl","snapCenterToCursorOnlyForPointer","args","activatorEvent","transform","WIDTH_TO_PERCENTAGE","small","medium","large","full","ModularDashboardClient","t0","$","clientLayout","initialLayout","widgets","i18n","t","addWidget","cancel","cancelModal","currentLayout","deleteWidget","isEditing","moveWidget","resetLayout","resizeWidget","saveLayout","setIsEditing","updateWidgetData","activeDragId","setActiveDragId","activeControlsWidgetID","setActiveControlsWidgetID","sensors","t1","t2","t3","t4","Symbol","for","t5","event","over","droppableId","id","i","lastIndexOf","slug","slice","position","active","moveFromIndex","findIndex","widget","item","moveToIndex","widget_0","t6","event_0","_jsxs","children","_jsx","autoScroll","enabled","threshold","x","y","collisionDetection","onDragCancel","onDragEnd","onDragStart","className","style","display","flexWrap","length","map","widget_1","slug_0","label","find","widgetConfig","DraggableItem","disabled","width","t7","dragHandle","filter","Boolean","join","component","onSave","data","widgetData","widgetID","widgetLabel","WidgetWidthDropdown","currentWidth","maxWidth","minWidth","onOpenChange","isOpen","onResize","buttonStyle","extraButtonProps","tabIndex","icon","margin","onClick","round","dropAnimation","duration","modifiers","draggedWidget","widget_2","inert","validOptions","minPercentage","maxPercentage","Object","entries","key","value","percentage","option","isDisabled","onToggleClose","onToggleOpen","popupType","render","close","ButtonGroup","isSelected","toFixed","renderButton","_active","onKeyDown","ariaProps","size","selected","verticalAlign","props","attributes","isDragging","listeners","setActivatorNodeRef","setNodeRef","mergedStyles","opacity","DroppableItem","undefined","ref","role","height","type","isOver","t8","left","right","top","bottom","borderRadius","backgroundColor","marginBottom","marginTop","pointerEvents","zIndex"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"sourcesContent":["'use client'\n\nimport type { Modifier } from '@dnd-kit/core'\nimport type { ClientWidget, WidgetWidth } from 'payload'\n\nimport { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'\nimport { snapCenterToCursor } from '@dnd-kit/modifiers'\nimport { getTranslation } from '@payloadcms/translations'\nimport { toWords } from 'payload/shared'\nimport React, { useEffect, useMemo, useState } from 'react'\n\nimport { Button } from '../../../../elements/Button/index.js'\nimport { Popup } from '../../../../elements/Popup/index.js'\nimport * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { DashboardStepNav } from './DashboardStepNav.js'\nimport { useDashboardLayout } from './useDashboardLayout.js'\nimport { closestInXAxis } from './utils/collisionDetection.js'\nimport { useDashboardSensors } from './utils/sensors.js'\nimport { WidgetContent } from './WidgetContent/index.js'\nimport { WidgetEditControl } from './WidgetEditControl.js'\n\n/**\n * Custom modifier that only applies snapCenterToCursor for pointer events.\n * During keyboard navigation, we handle positioning ourselves via the coordinate getter.\n */\nconst snapCenterToCursorOnlyForPointer: Modifier = (args) => {\n  const { activatorEvent } = args\n\n  // Only apply snap for pointer events (mouse/touch), not keyboard\n  // Check activatorEvent.type since KeyboardEvent may not exist on server\n  if (activatorEvent && 'key' in activatorEvent) {\n    return args.transform\n  }\n\n  return snapCenterToCursor(args)\n}\n\nexport type WidgetItem = {\n  data?: Record<string, unknown>\n  id: string\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  width: WidgetWidth\n}\n\nexport type WidgetInstanceClient = {\n  component: React.ReactNode\n  item: WidgetItem\n}\n\nexport type DropTargetWidget = {\n  position: 'after' | 'before'\n  widget: WidgetInstanceClient\n} | null\n\n/* eslint-disable perfectionist/sort-objects */\nconst WIDTH_TO_PERCENTAGE = {\n  'x-small': 25,\n  small: (1 / 3) * 100,\n  medium: 50,\n  large: (2 / 3) * 100,\n  'x-large': 75,\n  full: 100,\n} as const\n\nexport function ModularDashboardClient({\n  clientLayout: initialLayout,\n  widgets,\n}: {\n  clientLayout: WidgetInstanceClient[]\n  widgets: ClientWidget[]\n}) {\n  const { i18n, t } = useTranslation()\n  const {\n    addWidget,\n    cancel,\n    cancelModal,\n    currentLayout,\n    deleteWidget,\n    isEditing,\n    moveWidget,\n    resetLayout,\n    resizeWidget,\n    saveLayout,\n    setIsEditing,\n    updateWidgetData,\n  } = useDashboardLayout(initialLayout)\n\n  const [activeDragId, setActiveDragId] = useState<null | string>(null)\n  const [activeControlsWidgetID, setActiveControlsWidgetID] = useState<null | string>(null)\n  const sensors = useDashboardSensors()\n\n  useEffect(() => {\n    if (!isEditing) {\n      setActiveControlsWidgetID(null)\n    }\n  }, [isEditing])\n\n  return (\n    <div>\n      <DndContext\n        autoScroll={{\n          enabled: true,\n          threshold: {\n            x: 0, // No horizontal scroll\n            y: 0.2, // Allow vertical scroll at 20% from edge\n          },\n        }}\n        collisionDetection={closestInXAxis}\n        // https://github.com/clauderic/dnd-kit/issues/926#issuecomment-1640115665\n        id=\"dashboard-dnd-context\"\n        onDragCancel={() => {\n          setActiveDragId(null)\n        }}\n        onDragEnd={(event) => {\n          if (!event.over) {\n            setActiveDragId(null)\n            return\n          }\n          const droppableId = event.over.id as string\n          const i = droppableId.lastIndexOf('-')\n          const slug = droppableId.slice(0, i)\n          const position = droppableId.slice(i + 1)\n\n          if (slug === event.active.id) {\n            return\n          }\n\n          const moveFromIndex = currentLayout?.findIndex(\n            (widget) => widget.item.id === event.active.id,\n          )\n          let moveToIndex = currentLayout?.findIndex((widget) => widget.item.id === slug)\n          if (moveFromIndex < moveToIndex) {\n            moveToIndex--\n          }\n          if (position === 'after') {\n            moveToIndex++\n          }\n          moveWidget({ moveFromIndex, moveToIndex })\n          setActiveDragId(null)\n        }}\n        onDragStart={(event) => {\n          setActiveDragId(event.active.id as string)\n        }}\n        sensors={sensors}\n      >\n        <div\n          className={`modular-dashboard ${isEditing ? 'editing' : ''}`}\n          style={{\n            display: 'flex',\n            flexWrap: 'wrap',\n            // Don't add gap here! We need to use padding on the widgets instead\n            // to make sure all rows have the same width always.\n          }}\n        >\n          {currentLayout?.length === 0 && (\n            <div className=\"modular-dashboard__empty\">\n              <p>{t('dashboard:noItems')}</p>\n            </div>\n          )}\n          {currentLayout?.map((widget) => {\n            const slug = widget.item.id.slice(0, widget.item.id.lastIndexOf('-'))\n            const label = getTranslation(\n              widgets.find((widgetConfig) => widgetConfig.slug === slug)?.label ?? toWords(slug),\n              i18n,\n            )\n\n            return (\n              <DraggableItem\n                disabled={!isEditing}\n                id={widget.item.id}\n                key={widget.item.id}\n                label={label}\n                style={{\n                  width: `${WIDTH_TO_PERCENTAGE[widget.item.width]}%`,\n                }}\n                width={widget.item.width}\n              >\n                {({ dragHandle }) => (\n                  <div\n                    className={[\n                      'widget-wrapper',\n                      isEditing ? 'widget-wrapper--editing' : '',\n                      activeControlsWidgetID === widget.item.id\n                        ? 'widget-wrapper--controls-active'\n                        : '',\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                  >\n                    <WidgetContent id={`${widget.item.id}-content`} isEditing={isEditing}>\n                      {widget.component}\n                    </WidgetContent>\n                    {dragHandle}\n                    {isEditing && (\n                      <div className=\"widget-wrapper__controls\">\n                        <WidgetEditControl\n                          onSave={(data) => {\n                            updateWidgetData(widget.item.id, data)\n                          }}\n                          widgetData={widget.item.data}\n                          widgetID={widget.item.id}\n                          widgetLabel={label}\n                        />\n                        <WidgetWidthDropdown\n                          currentWidth={widget.item.width}\n                          maxWidth={widget.item.maxWidth}\n                          minWidth={widget.item.minWidth}\n                          onOpenChange={(isOpen) => {\n                            setActiveControlsWidgetID(isOpen ? widget.item.id : null)\n                          }}\n                          onResize={(width) => resizeWidget(widget.item.id, width)}\n                          widgetLabel={label}\n                        />\n                        <Button\n                          aria-label={t('general:deleteLabel', { label })}\n                          buttonStyle=\"destructive\"\n                          className=\"widget-wrapper__delete-btn\"\n                          extraButtonProps={{ tabIndex: 0 }}\n                          icon=\"x\"\n                          margin={false}\n                          onClick={() => deleteWidget(widget.item.id)}\n                          round\n                        />\n                      </div>\n                    )}\n                  </div>\n                )}\n              </DraggableItem>\n            )\n          })}\n          <DragOverlay\n            className=\"drag-overlay\"\n            dropAnimation={{\n              duration: 100,\n            }}\n            // Uses custom modifier that only applies for pointer, not keyboard navigation.\n            modifiers={[snapCenterToCursorOnlyForPointer]}\n          >\n            {activeDragId\n              ? (() => {\n                  const draggedWidget = currentLayout?.find(\n                    (widget) => widget.item.id === activeDragId,\n                  )\n                  return draggedWidget ? (\n                    <div\n                      aria-hidden=\"true\"\n                      inert\n                      style={{\n                        transform: 'scale(0.25)',\n                      }}\n                    >\n                      <div\n                        className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}\n                      >\n                        <div className=\"widget-content\">{draggedWidget.component}</div>\n                      </div>\n                    </div>\n                  ) : null\n                })()\n              : null}\n          </DragOverlay>\n        </div>\n      </DndContext>\n      <DashboardStepNav\n        addWidget={addWidget}\n        cancel={cancel}\n        isEditing={isEditing}\n        resetLayout={resetLayout}\n        saveLayout={saveLayout}\n        setIsEditing={setIsEditing}\n        widgets={widgets}\n      />\n      {cancelModal}\n    </div>\n  )\n}\n\nfunction WidgetWidthDropdown({\n  currentWidth,\n  maxWidth,\n  minWidth,\n  onOpenChange,\n  onResize,\n  widgetLabel,\n}: {\n  currentWidth: WidgetWidth\n  maxWidth: WidgetWidth\n  minWidth: WidgetWidth\n  onOpenChange: (isOpen: boolean) => void\n  onResize: (width: WidgetWidth) => void\n  widgetLabel: string\n}) {\n  const { t } = useTranslation()\n\n  // Filter options based on minWidth and maxWidth\n  const validOptions = useMemo(() => {\n    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth]\n    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth]\n\n    return Object.entries(WIDTH_TO_PERCENTAGE)\n      .map(([key, value]) => ({\n        width: key as WidgetWidth,\n        percentage: value,\n      }))\n      .filter((option) => option.percentage >= minPercentage && option.percentage <= maxPercentage)\n  }, [minWidth, maxWidth])\n\n  const isDisabled = validOptions.length <= 1\n\n  if (isDisabled) {\n    return null\n  }\n\n  return (\n    <Popup\n      onToggleClose={() => onOpenChange(false)}\n      onToggleOpen={onOpenChange}\n      popupType=\"menu\"\n      render={({ close }) => (\n        <PopupList.ButtonGroup>\n          {validOptions.map((option) => {\n            const isSelected = option.width === currentWidth\n            return (\n              <PopupList.Button\n                active={isSelected}\n                key={option.width}\n                onClick={() => {\n                  onResize(option.width)\n                  close()\n                }}\n              >\n                <span className=\"widget-wrapper__size-btn-label\">{option.width}</span>\n                <span className=\"widget-wrapper__size-btn-percentage\">\n                  {option.percentage.toFixed(0)}%\n                </span>\n              </PopupList.Button>\n            )\n          })}\n        </PopupList.ButtonGroup>\n      )}\n      renderButton={({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          aria-label={t('dashboard:resizeWidget', { label: widgetLabel, size: currentWidth })}\n          buttonStyle=\"secondary\"\n          className=\"widget-wrapper__size-btn\"\n          extraButtonProps={{\n            onKeyDown,\n            ...ariaProps,\n            tabIndex: 0,\n          }}\n          icon={<ChevronIcon className=\"widget-wrapper__size-btn-icon\" size={16} />}\n          margin={false}\n          onClick={onClick}\n          selected={_active}\n        >\n          {currentWidth}\n        </Button>\n      )}\n      size=\"small\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n\nfunction DraggableItem(props: {\n  children: (args: { dragHandle: React.ReactNode }) => React.ReactNode\n  disabled?: boolean\n  id: string\n  label: string\n  style?: React.CSSProperties\n  width: WidgetWidth\n}) {\n  const { t } = useTranslation()\n  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef } = useDraggable({\n    id: props.id,\n    disabled: props.disabled,\n  })\n\n  const mergedStyles: React.CSSProperties = {\n    ...props.style,\n    opacity: isDragging ? 0.3 : 1,\n    position: 'relative',\n  }\n\n  return (\n    <div className=\"widget\" data-slug={props.id} data-width={props.width} style={mergedStyles}>\n      <DroppableItem id={props.id} position=\"before\" />\n      <div\n        aria-label={props.label}\n        aria-labelledby={props.disabled ? undefined : `${props.id}-content`}\n        className=\"draggable\"\n        id={props.id}\n        ref={setNodeRef}\n        role=\"group\"\n        style={{\n          width: '100%',\n          height: '100%',\n          position: 'relative',\n        }}\n        tabIndex={props.disabled ? undefined : 0}\n      >\n        {props.children({\n          dragHandle: !props.disabled && (\n            <button\n              {...attributes}\n              {...listeners}\n              aria-describedby={[attributes['aria-describedby'], `${props.id}-content`]\n                .filter(Boolean)\n                .join(' ')}\n              aria-label={t('general:dragToReorder')}\n              className=\"widget-wrapper__edit-overlay widget-wrapper__drag-btn\"\n              ref={setActivatorNodeRef}\n              type=\"button\"\n            />\n          ),\n        })}\n      </div>\n      <DroppableItem id={props.id} position=\"after\" />\n    </div>\n  )\n}\n\nfunction DroppableItem({ id, position }: { id: string; position: 'after' | 'before' }) {\n  const { setNodeRef, isOver } = useDroppable({ id: `${id}-${position}`, data: { position } })\n\n  return (\n    <div\n      className=\"droppable-widget\"\n      data-testid={`${id}-${position}`}\n      ref={setNodeRef}\n      style={{\n        position: 'absolute',\n        left: position === 'before' ? -2 : 'auto',\n        right: position === 'after' ? -2 : 'auto',\n        top: 0,\n        bottom: 0,\n        borderRadius: '1000px',\n        width: '4px',\n        backgroundColor: isOver ? 'var(--color-bg-brand-secondary)' : 'transparent',\n        marginBottom: '10px',\n        marginTop: '10px',\n        pointerEvents: 'none',\n        zIndex: 1000,\n      }}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}