@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.7b53b6d

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(55);
   const {
     clientLayout: initialLayout,
     widgets
   } = t0;
   const {
+    i18n,
     t
   } = useTranslation();
   const {
@@ -63,63 +67,216 @@ 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 = () => {
+  if ($[0] !== currentLayout || $[1] !== i18n || $[2] !== t || $[3] !== widgets) {
+    t1 = t2 => {
+      const {
+        id,
+        index
+      } = t2;
+      const widgetID = String(id).replace(/-(?:before|after)$/, "");
+      const slug = widgetID.slice(0, widgetID.lastIndexOf("-"));
+      const label = getTranslation(widgets.find(widget => widget.slug === slug)?.label ?? toWords(slug), i18n);
+      const position = index ?? currentLayout.findIndex(widget_0 => widget_0.item.id === widgetID);
+      return `${label}, ${t("general:order")}: ${position + 1}`;
+    };
+    $[0] = currentLayout;
+    $[1] = i18n;
+    $[2] = t;
+    $[3] = widgets;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const describeWidget = t1;
+  let t2;
+  if ($[5] !== describeWidget || $[6] !== t) {
+    t2 = t3 => {
+      const {
+        active
+      } = t3;
+      return `${t("general:cancel")}: ${describeWidget({
+        id: active.id
+      })}`;
+    };
+    $[5] = describeWidget;
+    $[6] = t;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const announceCancel = t2;
+  let t3;
+  if ($[8] !== currentLayout || $[9] !== describeWidget || $[10] !== t) {
+    t3 = t4 => {
+      const {
+        active: active_0,
+        over
+      } = t4;
+      if (!over) {
+        return;
+      }
+      const {
+        moveToIndex
+      } = getWidgetMoveIndexes({
+        activeID: active_0.id,
+        layout: currentLayout,
+        overID: over.id
+      });
+      return t("hierarchy:itemsMovedTo", {
+        title: describeWidget({
+          id: active_0.id
+        }),
+        destination: describeWidget({
+          id: over.id,
+          index: moveToIndex
+        })
+      });
+    };
+    $[8] = currentLayout;
+    $[9] = describeWidget;
+    $[10] = t;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const announceMove = t3;
+  let t4;
+  if ($[12] !== announceCancel || $[13] !== announceMove || $[14] !== currentLayout) {
+    t4 = event => {
+      if (event.over) {
+        const {
+          moveFromIndex,
+          moveToIndex: moveToIndex_0
+        } = getWidgetMoveIndexes({
+          activeID: event.active.id,
+          layout: currentLayout,
+          overID: event.over.id
+        });
+        if (moveFromIndex !== moveToIndex_0) {
+          return announceMove(event);
+        }
+      }
+      return announceCancel(event);
+    };
+    $[12] = announceCancel;
+    $[13] = announceMove;
+    $[14] = currentLayout;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== announceMove || $[17] !== t) {
+    t5 = event_0 => {
+      const message = announceMove(event_0);
+      return message ? `${t("general:move")}: ${message}` : undefined;
+    };
+    $[16] = announceMove;
+    $[17] = t;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== describeWidget || $[20] !== t) {
+    t6 = t7 => {
+      const {
+        active: active_1
+      } = t7;
+      return `${t("general:dragToReorder")}: ${describeWidget({
+        id: active_1.id
+      })}`;
+    };
+    $[19] = describeWidget;
+    $[20] = t;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  let t7;
+  if ($[22] !== announceCancel || $[23] !== t4 || $[24] !== t5 || $[25] !== t6) {
+    t7 = {
+      onDragCancel: announceCancel,
+      onDragEnd: t4,
+      onDragOver: t5,
+      onDragStart: t6
+    };
+    $[22] = announceCancel;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  const announcements = t7;
+  let t8;
+  let t9;
+  if ($[27] !== isEditing) {
+    t8 = () => {
+      if (!isEditing) {
+        setActiveControlsWidgetID(null);
+      }
+    };
+    t9 = [isEditing];
+    $[27] = isEditing;
+    $[28] = t8;
+    $[29] = t9;
+  } else {
+    t8 = $[28];
+    t9 = $[29];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[30] !== activeControlsWidgetID || $[31] !== activeDragId || $[32] !== addWidget || $[33] !== announcements || $[34] !== cancel || $[35] !== cancelModal || $[36] !== currentLayout || $[37] !== deleteWidget || $[38] !== i18n || $[39] !== isEditing || $[40] !== moveWidget || $[41] !== resetLayout || $[42] !== resizeWidget || $[43] !== saveLayout || $[44] !== sensors || $[45] !== setIsEditing || $[46] !== t || $[47] !== updateWidgetData || $[48] !== widgets) {
+    let t11;
+    if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = () => {
         setActiveDragId(null);
       };
-      $[17] = t2;
+      $[50] = t11;
     } else {
-      t2 = $[17];
+      t11 = $[50];
     }
-    let t3;
-    if ($[18] !== currentLayout || $[19] !== moveWidget) {
-      t3 = event => {
-        if (!event.over) {
-          setActiveDragId(null);
-          return;
-        }
-        const droppableId = event.over.id;
-        const i = droppableId.lastIndexOf("-");
-        const slug = droppableId.slice(0, i);
-        const position = droppableId.slice(i + 1);
-        if (slug === event.active.id) {
+    let t12;
+    if ($[51] !== currentLayout || $[52] !== moveWidget) {
+      t12 = event_1 => {
+        setActiveDragId(null);
+        if (!event_1.over) {
           return;
         }
-        const moveFromIndex = currentLayout?.findIndex(widget => widget.item.id === event.active.id);
-        let moveToIndex = currentLayout?.findIndex(widget_0 => widget_0.item.id === slug);
-        if (moveFromIndex < moveToIndex) {
-          moveToIndex--;
-        }
-        if (position === "after") {
-          moveToIndex++;
-        }
-        moveWidget({
-          moveFromIndex,
-          moveToIndex
+        const indexes = getWidgetMoveIndexes({
+          activeID: event_1.active.id,
+          layout: currentLayout,
+          overID: event_1.over.id
         });
-        setActiveDragId(null);
+        if (indexes.moveFromIndex !== indexes.moveToIndex) {
+          moveWidget(indexes);
+        }
       };
-      $[18] = currentLayout;
-      $[19] = moveWidget;
-      $[20] = t3;
+      $[51] = currentLayout;
+      $[52] = moveWidget;
+      $[53] = t12;
     } else {
-      t3 = $[20];
+      t12 = $[53];
     }
-    let t4;
-    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = event_0 => {
-        setActiveDragId(event_0.active.id);
+    let t13;
+    if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = event_2 => {
+        setActiveDragId(event_2.active.id);
       };
-      $[21] = t4;
+      $[54] = t13;
     } else {
-      t4 = $[21];
+      t13 = $[54];
     }
-    t1 = _jsxs("div", {
+    t10 = _jsxs("div", {
       children: [_jsx(DndContext, {
+        accessibility: {
+          announcements
+        },
         autoScroll: {
           enabled: true,
           threshold: {
@@ -129,9 +286,9 @@ export function ModularDashboardClient(t0) {
         },
         collisionDetection: closestInXAxis,
         id: "dashboard-dnd-context",
-        onDragCancel: t2,
-        onDragEnd: t3,
-        onDragStart: t4,
+        onDragCancel: t11,
+        onDragEnd: t12,
+        onDragStart: t13,
         sensors,
         children: _jsxs("div", {
           className: `modular-dashboard ${isEditing ? "editing" : ""}`,
@@ -144,50 +301,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_0 = getTranslation(widgets.find(widgetConfig => widgetConfig.slug === slug_0)?.label ?? toWords(slug_0), i18n);
+            return _jsx(DraggableItem, {
               disabled: !isEditing,
               id: widget_1.item.id,
+              label: label_0,
               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: t14 => {
+                const {
+                  dragHandle
+                } = t14;
+                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_0
+                    }), _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_0
+                    }), _jsx(Button, {
+                      "aria-label": t("general:deleteLabel", {
+                        label: label_0
+                      }),
+                      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 +367,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,90 +393,179 @@ 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;
+    $[30] = activeControlsWidgetID;
+    $[31] = activeDragId;
+    $[32] = addWidget;
+    $[33] = announcements;
+    $[34] = cancel;
+    $[35] = cancelModal;
+    $[36] = currentLayout;
+    $[37] = deleteWidget;
+    $[38] = i18n;
+    $[39] = isEditing;
+    $[40] = moveWidget;
+    $[41] = resetLayout;
+    $[42] = resizeWidget;
+    $[43] = saveLayout;
+    $[44] = sensors;
+    $[45] = setIsEditing;
+    $[46] = t;
+    $[47] = updateWidgetData;
+    $[48] = widgets;
+    $[49] = t10;
   } else {
-    t1 = $[16];
+    t10 = $[49];
   }
-  return t1;
+  return t10;
 }
-function _temp(e) {
-  return e.stopPropagation();
-}
-function WidgetWidthDropdown({
-  currentWidth,
-  maxWidth,
-  minWidth,
-  onResize
-}) {
-  // Filter options based on minWidth and maxWidth
-  const validOptions = useMemo(() => {
-    const minPercentage = WIDTH_TO_PERCENTAGE[minWidth];
-    const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth];
-    return Object.entries(WIDTH_TO_PERCENTAGE).map(([key, value]) => ({
-      width: key,
-      percentage: value
-    })).filter(option => option.percentage >= minPercentage && option.percentage <= maxPercentage);
-  }, [minWidth, maxWidth]);
+function WidgetWidthDropdown(t0) {
+  const $ = _c(19);
+  const {
+    currentWidth,
+    maxWidth,
+    minWidth,
+    onOpenChange,
+    onResize,
+    widgetLabel
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const minPercentage = WIDTH_TO_PERCENTAGE[minWidth];
+  const maxPercentage = WIDTH_TO_PERCENTAGE[maxWidth];
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = Object.entries(WIDTH_TO_PERCENTAGE).map(_temp);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== maxPercentage || $[2] !== minPercentage) {
+    t2 = t1.filter(option => option.percentage >= minPercentage && option.percentage <= maxPercentage);
+    $[1] = maxPercentage;
+    $[2] = minPercentage;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const validOptions = t2;
   const isDisabled = validOptions.length <= 1;
   if (isDisabled) {
     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",
+  let t3;
+  if ($[4] !== onOpenChange) {
+    t3 = () => onOpenChange(false);
+    $[4] = onOpenChange;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== currentWidth || $[7] !== onResize || $[8] !== validOptions) {
+    t4 = t5 => {
+      const {
+        close
+      } = t5;
+      return _jsx(PopupList.ButtonGroup, {
+        children: validOptions.map(option_0 => {
+          const isSelected = option_0.width === currentWidth;
+          return _jsxs(PopupList.Button, {
+            active: isSelected,
+            onClick: () => {
+              onResize(option_0.width);
+              close();
+            },
+            children: [_jsx("span", {
+              className: "widget-wrapper__size-btn-label",
+              children: option_0.width
+            }), _jsxs("span", {
+              className: "widget-wrapper__size-btn-percentage",
+              children: [option_0.percentage.toFixed(0), "%"]
+            })]
+          }, option_0.width);
+        })
+      });
+    };
+    $[6] = currentWidth;
+    $[7] = onResize;
+    $[8] = validOptions;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== currentWidth || $[11] !== t || $[12] !== widgetLabel) {
+    t5 = t6 => {
+      const {
+        active: _active,
+        onClick,
+        onKeyDown,
+        ...ariaProps
+      } = t6;
+      return _jsx(Button, {
+        "aria-label": t("dashboard:resizeWidget", {
+          label: widgetLabel,
+          size: currentWidth
+        }),
+        buttonStyle: "secondary",
+        className: "widget-wrapper__size-btn",
+        extraButtonProps: {
+          onKeyDown,
+          ...ariaProps,
+          tabIndex: 0
+        },
+        icon: _jsx(ChevronIcon, {
+          className: "widget-wrapper__size-btn-icon",
+          size: 16
+        }),
+        margin: false,
+        onClick,
+        selected: _active,
         children: currentWidth
-      }), /*#__PURE__*/_jsx(ChevronIcon, {
-        className: "widget-wrapper__size-btn-icon"
-      })]
-    }),
-    buttonType: "custom",
-    render: ({
-      close
-    }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-      children: validOptions.map(option_0 => {
-        const isSelected = option_0.width === currentWidth;
-        return /*#__PURE__*/_jsxs(PopupList.Button, {
-          active: isSelected,
-          onClick: () => {
-            onResize(option_0.width);
-            close();
-          },
-          children: [/*#__PURE__*/_jsx("span", {
-            className: "widget-wrapper__size-btn-label",
-            children: option_0.width
-          }), /*#__PURE__*/_jsxs("span", {
-            className: "widget-wrapper__size-btn-percentage",
-            children: [option_0.percentage.toFixed(0), "%"]
-          })]
-        }, option_0.width);
-      })
-    }),
-    size: "small",
-    verticalAlign: "bottom"
-  });
+      });
+    };
+    $[10] = currentWidth;
+    $[11] = t;
+    $[12] = widgetLabel;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== onOpenChange || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+    t6 = _jsx(Popup, {
+      onToggleClose: t3,
+      onToggleOpen: onOpenChange,
+      popupType: "menu",
+      render: t4,
+      renderButton: t5,
+      size: "small",
+      verticalAlign: "bottom"
+    });
+    $[14] = onOpenChange;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+}
+function _temp(t0) {
+  const [key, value] = t0;
+  return {
+    width: key,
+    percentage: value
+  };
 }
 function DraggableItem(props) {
-  const $ = _c(13);
+  const $ = _c(16);
+  const {
+    t
+  } = useTranslation();
   let t0;
   if ($[0] !== props.disabled || $[1] !== props.id) {
     t0 = {
@@ -320,20 +582,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 +602,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 +635,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 +684,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", {
@@ -441,4 +717,25 @@ function DroppableItem(t0) {
   }
   return t8;
 }
+function getWidgetMoveIndexes({
+  activeID,
+  layout,
+  overID
+}) {
+  const widgetID = String(overID).replace(/-(?:before|after)$/, '');
+  const moveFromIndex = layout.findIndex(widget => widget.item.id === activeID);
+  let moveToIndex = layout.findIndex(widget => widget.item.id === widgetID);
+  if (widgetID !== activeID) {
+    if (moveFromIndex < moveToIndex) {
+      moveToIndex--;
+    }
+    if (String(overID).endsWith('-after')) {
+      moveToIndex++;
+    }
+  }
+  return {
+    moveFromIndex,
+    moveToIndex
+  };
+}
 //# sourceMappingURL=index.client.js.map