@payloadcms/ui 4.0.0-internal.293e026 → 4.0.0-internal.2a3c3bc

package/dist/views/Dashboard/Default/ModularDashboard/WidgetEditControl.js

@@ -3,6 +3,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useId } from 'react';
+import { Button } from '../../../../elements/Button/index.js';
 import { useModal } from '../../../../elements/Modal/index.js';
 import { EditIcon } from '../../../../icons/Edit/index.js';
 import { useConfig } from '../../../../providers/Config/index.js';
@@ -14,7 +15,8 @@ export function WidgetEditControl(t0) {
   const {
     onSave,
     widgetData,
-    widgetID
+    widgetID,
+    widgetLabel
   } = t0;
   const {
     t
@@ -62,14 +64,18 @@ export function WidgetEditControl(t0) {
     t4 = $[6];
   }
   return _jsxs(_Fragment, {
-    children: [_jsxs("button", {
+    children: [_jsx(Button, {
+      "aria-label": t("general:editLabel", {
+        label: widgetLabel
+      }),
+      buttonStyle: "secondary",
       className: "widget-wrapper__edit-btn",
-      onClick: t4,
-      type: "button",
-      children: [_jsxs("span", {
-        className: "sr-only",
-        children: [t("general:edit"), " ", widgetID]
-      }), _jsx(EditIcon, {})]
+      extraButtonProps: {
+        tabIndex: 0
+      },
+      icon: _jsx(EditIcon, {}),
+      margin: false,
+      onClick: t4
     }), _jsx(WidgetConfigDrawer, {
       drawerSlug,
       onSave,

package/dist/views/Dashboard/Default/ModularDashboard/WidgetEditControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetEditControl.js","names":["c","_c","React","useId","useModal","EditIcon","useConfig","useTranslation","WidgetConfigDrawer","getWidgetSlugFromID","widgetID","slice","lastIndexOf","WidgetEditControl","t0","$","onSave","widgetData","t","openModal","widgets","t1","config","admin","dashboard","configWidgets","undefined","t2","widgetSlug","t3","widget","slug","widgetConfig","find","hasEditableFields","Boolean","fields","length","drawerID","drawerSlug","t4","_jsxs","_Fragment","children","className","onClick","type","_jsx"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx"],"sourcesContent":["'use client'\n\nimport type { Data } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport { useModal } from '../../../../elements/Modal/index.js'\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { WidgetConfigDrawer } from './WidgetConfigDrawer.js'\n\nconst getWidgetSlugFromID = (widgetID: string): string =>\n  widgetID.slice(0, widgetID.lastIndexOf('-'))\n\nexport function WidgetEditControl({\n  onSave,\n  widgetData,\n  widgetID,\n}: {\n  onSave: (data: Data) => void\n  widgetData?: Record<string, unknown>\n  widgetID: string\n}) {\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n  const { widgets: configWidgets = [] } = useConfig().config.admin.dashboard ?? {}\n\n  const widgetSlug = getWidgetSlugFromID(widgetID)\n  const widgetConfig = configWidgets.find((widget) => widget.slug === widgetSlug)\n  const hasEditableFields = Boolean(widgetConfig?.fields?.length)\n\n  const drawerID = useId()\n  const drawerSlug = `widget-editor-${drawerID}`\n\n  if (!hasEditableFields) {\n    return null\n  }\n\n  return (\n    <>\n      <button\n        className=\"widget-wrapper__edit-btn\"\n        onClick={() => {\n          openModal(drawerSlug)\n        }}\n        type=\"button\"\n      >\n        <span className=\"sr-only\">\n          {t('general:edit')} {widgetID}\n        </span>\n        <EditIcon />\n      </button>\n      <WidgetConfigDrawer\n        drawerSlug={drawerSlug}\n        onSave={onSave}\n        widget={widgetConfig}\n        widgetData={widgetData}\n      />\n    </>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AAEnC,MAAMC,mBAAA,GAAuBC,QAAA,IAC3BA,QAAA,CAASC,KAAK,CAAC,GAAGD,QAAA,CAASE,WAAW,CAAC;AAEzC,OAAO,SAAAC,kBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EAA2B;IAAAe,MAAA;IAAAC,UAAA;IAAAP;EAAA,IAAAI,EAQjC;EACC;IAAAI;EAAA,IAAcX,cAAA;EACd;IAAAY;EAAA,IAAsBf,QAAA;EACtB;IAAAgB,OAAA,EAAAC;EAAA,IAAwCf,SAAA,GAAAgB,MAAA,CAAAC,KAAA,CAAAC,SAAA,MAAuC;EAA9D,MAAAC,aAAA,GAAAJ,EAAkB,KAAAK,SAAA,QAAlBL,EAAkB;EAAA,IAAAM,EAAA;EAAA,IAAAZ,CAAA,QAAAL,QAAA;IAEhBiB,EAAA,GAAAlB,mBAAA,CAAoBC,QAAA;IAAAK,CAAA,MAAAL,QAAA;IAAAK,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAvC,MAAAa,UAAA,GAAmBD,EAAoB;EAAA,IAAAE,EAAA;EAAA,IAAAd,CAAA,QAAAa,UAAA;IACCC,EAAA,GAAAC,MAAA,IAAYA,MAAA,CAAAC,IAAA,KAAgBH,UAAA;IAAAb,CAAA,MAAAa,UAAA;IAAAb,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAApE,MAAAiB,YAAA,GAAqBP,aAAA,CAAAQ,IAAA,CAAmBJ,EAA4B;EACpE,MAAAK,iBAAA,GAA0BC,OAAA,CAAQH,YAAA,EAAAI,MAAA,EAAAC,MAAsB;EAExD,MAAAC,QAAA,GAAiBnC,KAAA;EACjB,MAAAoC,UAAA,GAAmB,iBAAiBD,QAAA,EAAU;EAAA,KAEzCJ,iBAAA;IAAA;EAAA;EAAA,IAAAM,EAAA;EAAA,IAAAzB,CAAA,QAAAwB,UAAA,IAAAxB,CAAA,QAAAI,SAAA;IAQUqB,EAAA,GAAAA,CAAA;MACPrB,SAAA,CAAUoB,UAAA;IAAA;IACZxB,CAAA,MAAAwB,UAAA;IAAAxB,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAyB,EAAA;EAAA;IAAAA,EAAA,GAAAzB,CAAA;EAAA;EAAA,OALJ0B,KAAA,CAAAC,SAAA;IAAAC,QAAA,GACEF,KAAA,CAAC;MAAAG,SAAA,EACW;MAAAC,OAAA,EACDL,EAET;MAAAM,IAAA,EACK;MAAAH,QAAA,GAELF,KAAA,CAAC;QAAAG,SAAA,EAAe;QAAAD,QAAA,GACbzB,CAAA,CAAE,iBAAgB,KAAER,QAAA;MAAA,C,GAEvBqC,IAAA,CAAA1C,QAAA,IAAC;IAAA,C,GAEH0C,IAAA,CAAAvC,kBAAA;MAAA+B,UAAA;MAAAvB,MAAA;MAAAc,MAAA,EAGUE,YAAA;MAAAf;IAAA,C","ignoreList":[]}
+{"version":3,"file":"WidgetEditControl.js","names":["c","_c","React","useId","Button","useModal","EditIcon","useConfig","useTranslation","WidgetConfigDrawer","getWidgetSlugFromID","widgetID","slice","lastIndexOf","WidgetEditControl","t0","$","onSave","widgetData","widgetLabel","t","openModal","widgets","t1","config","admin","dashboard","configWidgets","undefined","t2","widgetSlug","t3","widget","slug","widgetConfig","find","hasEditableFields","Boolean","fields","length","drawerID","drawerSlug","t4","_jsxs","_Fragment","children","_jsx","label","buttonStyle","className","extraButtonProps","tabIndex","icon","margin","onClick"],"sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx"],"sourcesContent":["'use client'\n\nimport type { Data } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport { Button } from '../../../../elements/Button/index.js'\nimport { useModal } from '../../../../elements/Modal/index.js'\nimport { EditIcon } from '../../../../icons/Edit/index.js'\nimport { useConfig } from '../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { WidgetConfigDrawer } from './WidgetConfigDrawer.js'\n\nconst getWidgetSlugFromID = (widgetID: string): string =>\n  widgetID.slice(0, widgetID.lastIndexOf('-'))\n\nexport function WidgetEditControl({\n  onSave,\n  widgetData,\n  widgetID,\n  widgetLabel,\n}: {\n  onSave: (data: Data) => void\n  widgetData?: Record<string, unknown>\n  widgetID: string\n  widgetLabel: string\n}) {\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n  const { widgets: configWidgets = [] } = useConfig().config.admin.dashboard ?? {}\n\n  const widgetSlug = getWidgetSlugFromID(widgetID)\n  const widgetConfig = configWidgets.find((widget) => widget.slug === widgetSlug)\n  const hasEditableFields = Boolean(widgetConfig?.fields?.length)\n\n  const drawerID = useId()\n  const drawerSlug = `widget-editor-${drawerID}`\n\n  if (!hasEditableFields) {\n    return null\n  }\n\n  return (\n    <>\n      <Button\n        aria-label={t('general:editLabel', { label: widgetLabel })}\n        buttonStyle=\"secondary\"\n        className=\"widget-wrapper__edit-btn\"\n        extraButtonProps={{ tabIndex: 0 }}\n        icon={<EditIcon />}\n        margin={false}\n        onClick={() => {\n          openModal(drawerSlug)\n        }}\n      />\n      <WidgetConfigDrawer\n        drawerSlug={drawerSlug}\n        onSave={onSave}\n        widget={widgetConfig}\n        widgetData={widgetData}\n      />\n    </>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,IAASC,KAAK,QAAQ;AAE7B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AAEnC,MAAMC,mBAAA,GAAuBC,QAAA,IAC3BA,QAAA,CAASC,KAAK,CAAC,GAAGD,QAAA,CAASE,WAAW,CAAC;AAEzC,OAAO,SAAAC,kBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAA2B;IAAAgB,MAAA;IAAAC,UAAA;IAAAP,QAAA;IAAAQ;EAAA,IAAAJ,EAUjC;EACC;IAAAK;EAAA,IAAcZ,cAAA;EACd;IAAAa;EAAA,IAAsBhB,QAAA;EACtB;IAAAiB,OAAA,EAAAC;EAAA,IAAwChB,SAAA,GAAAiB,MAAA,CAAAC,KAAA,CAAAC,SAAA,MAAuC;EAA9D,MAAAC,aAAA,GAAAJ,EAAkB,KAAAK,SAAA,QAAlBL,EAAkB;EAAA,IAAAM,EAAA;EAAA,IAAAb,CAAA,QAAAL,QAAA;IAEhBkB,EAAA,GAAAnB,mBAAA,CAAoBC,QAAA;IAAAK,CAAA,MAAAL,QAAA;IAAAK,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAvC,MAAAc,UAAA,GAAmBD,EAAoB;EAAA,IAAAE,EAAA;EAAA,IAAAf,CAAA,QAAAc,UAAA;IACCC,EAAA,GAAAC,MAAA,IAAYA,MAAA,CAAAC,IAAA,KAAgBH,UAAA;IAAAd,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAApE,MAAAkB,YAAA,GAAqBP,aAAA,CAAAQ,IAAA,CAAmBJ,EAA4B;EACpE,MAAAK,iBAAA,GAA0BC,OAAA,CAAQH,YAAA,EAAAI,MAAA,EAAAC,MAAsB;EAExD,MAAAC,QAAA,GAAiBrC,KAAA;EACjB,MAAAsC,UAAA,GAAmB,iBAAiBD,QAAA,EAAU;EAAA,KAEzCJ,iBAAA;IAAA;EAAA;EAAA,IAAAM,EAAA;EAAA,IAAA1B,CAAA,QAAAyB,UAAA,IAAAzB,CAAA,QAAAK,SAAA;IAaUqB,EAAA,GAAAA,CAAA;MACPrB,SAAA,CAAUoB,UAAA;IAAA;IACZzB,CAAA,MAAAyB,UAAA;IAAAzB,CAAA,MAAAK,SAAA;IAAAL,CAAA,MAAA0B,EAAA;EAAA;IAAAA,EAAA,GAAA1B,CAAA;EAAA;EAAA,OAVJ2B,KAAA,CAAAC,SAAA;IAAAC,QAAA,GACEC,IAAA,CAAA1C,MAAA;MAAA,cACcgB,CAAA,CAAE;QAAA2B,KAAA,EAA8B5B;MAAA,CAAY;MAAA6B,WAAA,EAC5C;MAAAC,SAAA,EACF;MAAAC,gBAAA;QAAAC,QAAA;MAAA;MAAAC,IAAA,EAEJN,IAAA,CAAAxC,QAAA,IAAC;MAAA+C,MAAA;MAAAC,OAAA,EAEEZ;IAET,C,GAEFI,IAAA,CAAArC,kBAAA;MAAAgC,UAAA;MAAAxB,MAAA;MAAAe,MAAA,EAGUE,YAAA;MAAAhB;IAAA,C","ignoreList":[]}

package/dist/views/Dashboard/Default/ModularDashboard/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIxD,OAAO,KAA4B,MAAM,OAAO,CAAA;AA6BhD,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,WAAW,CAAA;IACrB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B,MAAM,EAAE,oBAAoB,CAAA;CAC7B,GAAG,IAAI,CAAA;AAYR,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EAAE,aAAa,EAC3B,OAAO,GACR,EAAE;IACD,YAAY,EAAE,oBAAoB,EAAE,CAAA;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,qBA6KA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../../src/views/Dashboard/Default/ModularDashboard/index.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAMxD,OAAO,KAAuC,MAAM,OAAO,CAAA;AA8B3D,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,WAAW,CAAA;IACrB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,UAAU,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B,MAAM,EAAE,oBAAoB,CAAA;CAC7B,GAAG,IAAI,CAAA;AAYR,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EAAE,aAAa,EAC3B,OAAO,GACR,EAAE;IACD,YAAY,EAAE,oBAAoB,EAAE,CAAA;IACpC,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB,qBA6MA"}

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,23 +67,41 @@ 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 => {
+        setActiveDragId(null);
         if (!event.over) {
-          setActiveDragId(null);
           return;
         }
         const droppableId = event.over.id;
@@ -101,24 +123,23 @@ export function ModularDashboardClient(t0) {
           moveFromIndex,
           moveToIndex
         });
-        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 +150,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 +165,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 +231,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 +257,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 +306,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 +330,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 +381,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 +401,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 +434,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 +483,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", {