@payloadcms/ui 4.0.0-internal.d3909a9 → 4.0.0-internal.d7d662c

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

@@ -43,7 +43,7 @@ const WIDTH_TO_PERCENTAGE = {
   full: 100
 };
 export function ModularDashboardClient(t0) {
-  const $ = _c(27);
+  const $ = _c(55);
   const {
     clientLayout: initialLayout,
     widgets
@@ -70,77 +70,213 @@ export function ModularDashboardClient(t0) {
   const [activeControlsWidgetID, setActiveControlsWidgetID] = useState(null);
   const sensors = useDashboardSensors();
   let t1;
+  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 ($[0] !== isEditing) {
-    t1 = () => {
+  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);
       }
     };
-    t2 = [isEditing];
-    $[0] = isEditing;
-    $[1] = t1;
-    $[2] = t2;
+    t9 = [isEditing];
+    $[27] = isEditing;
+    $[28] = t8;
+    $[29] = t9;
   } else {
-    t1 = $[1];
-    t2 = $[2];
+    t8 = $[28];
+    t9 = $[29];
   }
-  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 = () => {
+  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);
       };
-      $[22] = t4;
+      $[50] = t11;
     } else {
-      t4 = $[22];
+      t11 = $[50];
     }
-    let t5;
-    if ($[23] !== currentLayout || $[24] !== moveWidget) {
-      t5 = event => {
+    let t12;
+    if ($[51] !== currentLayout || $[52] !== moveWidget) {
+      t12 = event_1 => {
         setActiveDragId(null);
-        if (!event.over) {
+        if (!event_1.over) {
           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) {
-          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
         });
+        if (indexes.moveFromIndex !== indexes.moveToIndex) {
+          moveWidget(indexes);
+        }
       };
-      $[23] = currentLayout;
-      $[24] = moveWidget;
-      $[25] = t5;
+      $[51] = currentLayout;
+      $[52] = moveWidget;
+      $[53] = t12;
     } else {
-      t5 = $[25];
+      t12 = $[53];
     }
-    let t6;
-    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = 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);
       };
-      $[26] = t6;
+      $[54] = t13;
     } else {
-      t6 = $[26];
+      t13 = $[54];
     }
-    t3 = _jsxs("div", {
+    t10 = _jsxs("div", {
       children: [_jsx(DndContext, {
+        accessibility: {
+          announcements
+        },
         autoScroll: {
           enabled: true,
           threshold: {
@@ -150,9 +286,9 @@ export function ModularDashboardClient(t0) {
         },
         collisionDetection: closestInXAxis,
         id: "dashboard-dnd-context",
-        onDragCancel: t4,
-        onDragEnd: t5,
-        onDragStart: t6,
+        onDragCancel: t11,
+        onDragEnd: t12,
+        onDragStart: t13,
         sensors,
         children: _jsxs("div", {
           className: `modular-dashboard ${isEditing ? "editing" : ""}`,
@@ -167,19 +303,19 @@ export function ModularDashboardClient(t0) {
             })
           }), 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);
+            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: label_0,
               style: {
                 width: `${WIDTH_TO_PERCENTAGE[widget_1.item.width]}%`
               },
               width: widget_1.item.width,
-              children: t7 => {
+              children: t14 => {
                 const {
                   dragHandle
-                } = t7;
+                } = 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, {
@@ -194,7 +330,7 @@ export function ModularDashboardClient(t0) {
                       },
                       widgetData: widget_1.item.data,
                       widgetID: widget_1.item.id,
-                      widgetLabel: label
+                      widgetLabel: label_0
                     }), _jsx(WidgetWidthDropdown, {
                       currentWidth: widget_1.item.width,
                       maxWidth: widget_1.item.maxWidth,
@@ -203,10 +339,10 @@ export function ModularDashboardClient(t0) {
                         setActiveControlsWidgetID(isOpen ? widget_1.item.id : null);
                       },
                       onResize: width => resizeWidget(widget_1.item.id, width),
-                      widgetLabel: label
+                      widgetLabel: label_0
                     }), _jsx(Button, {
                       "aria-label": t("general:deleteLabel", {
-                        label
+                        label: label_0
                       }),
                       buttonStyle: "destructive",
                       className: "widget-wrapper__delete-btn",
@@ -257,108 +393,173 @@ export function ModularDashboardClient(t0) {
         widgets
       }), cancelModal]
     });
-    $[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;
+    $[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 {
-    t3 = $[21];
+    t10 = $[49];
   }
-  return t3;
+  return t10;
 }
-function WidgetWidthDropdown({
-  currentWidth,
-  maxWidth,
-  minWidth,
-  onOpenChange,
-  onResize,
-  widgetLabel
-}) {
+function WidgetWidthDropdown(t0) {
+  const $ = _c(19);
+  const {
+    currentWidth,
+    maxWidth,
+    minWidth,
+    onOpenChange,
+    onResize,
+    widgetLabel
+  } = t0;
   const {
     t
   } = useTranslation();
-  // 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]);
+  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, {
-    onToggleClose: () => onOpenChange(false),
-    onToggleOpen: onOpenChange,
-    popupType: "menu",
-    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);
-      })
-    }),
-    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: {
+  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,
-        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"
-  });
+        ...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
+      });
+    };
+    $[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(16);
@@ -516,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