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

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

@@ -0,0 +1,741 @@
+'use client';
+
+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 { 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 { 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.
+ * During keyboard navigation, we handle positioning ourselves via the coordinate getter.
+ */
+const snapCenterToCursorOnlyForPointer = args => {
+  const {
+    activatorEvent
+  } = args;
+  // Only apply snap for pointer events (mouse/touch), not keyboard
+  // Check activatorEvent.type since KeyboardEvent may not exist on server
+  if (activatorEvent && 'key' in activatorEvent) {
+    return args.transform;
+  }
+  return snapCenterToCursor(args);
+};
+/* eslint-disable perfectionist/sort-objects */
+const WIDTH_TO_PERCENTAGE = {
+  'x-small': 25,
+  small: 1 / 3 * 100,
+  medium: 50,
+  large: 2 / 3 * 100,
+  'x-large': 75,
+  full: 100
+};
+export function ModularDashboardClient(t0) {
+  const $ = _c(55);
+  const {
+    clientLayout: initialLayout,
+    widgets
+  } = t0;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    addWidget,
+    cancel,
+    cancelModal,
+    currentLayout,
+    deleteWidget,
+    isEditing,
+    moveWidget,
+    resetLayout,
+    resizeWidget,
+    saveLayout,
+    setIsEditing,
+    updateWidgetData
+  } = useDashboardLayout(initialLayout);
+  const [activeDragId, setActiveDragId] = useState(null);
+  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 ($[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);
+      };
+      $[50] = t11;
+    } else {
+      t11 = $[50];
+    }
+    let t12;
+    if ($[51] !== currentLayout || $[52] !== moveWidget) {
+      t12 = event_1 => {
+        setActiveDragId(null);
+        if (!event_1.over) {
+          return;
+        }
+        const indexes = getWidgetMoveIndexes({
+          activeID: event_1.active.id,
+          layout: currentLayout,
+          overID: event_1.over.id
+        });
+        if (indexes.moveFromIndex !== indexes.moveToIndex) {
+          moveWidget(indexes);
+        }
+      };
+      $[51] = currentLayout;
+      $[52] = moveWidget;
+      $[53] = t12;
+    } else {
+      t12 = $[53];
+    }
+    let t13;
+    if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = event_2 => {
+        setActiveDragId(event_2.active.id);
+      };
+      $[54] = t13;
+    } else {
+      t13 = $[54];
+    }
+    t10 = _jsxs("div", {
+      children: [_jsx(DndContext, {
+        accessibility: {
+          announcements
+        },
+        autoScroll: {
+          enabled: true,
+          threshold: {
+            x: 0,
+            y: 0.2
+          }
+        },
+        collisionDetection: closestInXAxis,
+        id: "dashboard-dnd-context",
+        onDragCancel: t11,
+        onDragEnd: t12,
+        onDragStart: t13,
+        sensors,
+        children: _jsxs("div", {
+          className: `modular-dashboard ${isEditing ? "editing" : ""}`,
+          style: {
+            display: "flex",
+            flexWrap: "wrap"
+          },
+          children: [currentLayout?.length === 0 && _jsx("div", {
+            className: "modular-dashboard__empty",
+            children: _jsx("p", {
+              children: t("dashboard:noItems")
+            })
+          }), 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: 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, {
+            className: "drag-overlay",
+            dropAnimation: {
+              duration: 100
+            },
+            modifiers: [snapCenterToCursorOnlyForPointer],
+            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)"
+                },
+                children: _jsx("div", {
+                  className: `widget-wrapper ${isEditing ? "widget-wrapper--editing" : ""}`,
+                  children: _jsx("div", {
+                    className: "widget-content",
+                    children: draggedWidget.component
+                  })
+                })
+              }) : null;
+            })() : null
+          })]
+        })
+      }), _jsx(DashboardStepNav, {
+        addWidget,
+        cancel,
+        isEditing,
+        resetLayout,
+        saveLayout,
+        setIsEditing,
+        widgets
+      }), cancelModal]
+    });
+    $[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 {
+    t10 = $[49];
+  }
+  return t10;
+}
+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;
+  }
+  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
+      });
+    };
+    $[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);
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== props.disabled || $[1] !== props.id) {
+    t0 = {
+      id: props.id,
+      disabled: props.disabled
+    };
+    $[0] = props.disabled;
+    $[1] = props.id;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const {
+    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.label || $[9] !== props.style || $[10] !== props.width || $[11] !== setActivatorNodeRef || $[12] !== setNodeRef || $[13] !== t || $[14] !== t1) {
+    const mergedStyles = {
+      ...props.style,
+      opacity: t1,
+      position: "relative"
+    };
+    t2 = _jsxs("div", {
+      className: "widget",
+      "data-slug": props.id,
+      "data-width": props.width,
+      style: mergedStyles,
+      children: [_jsx(DroppableItem, {
+        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,
+        role: "group",
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative"
+        },
+        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"
+      })]
+    });
+    $[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;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  return t2;
+}
+function DroppableItem(t0) {
+  const $ = _c(11);
+  const {
+    id,
+    position
+  } = t0;
+  const t1 = `${id}-${position}`;
+  let t2;
+  if ($[0] !== position) {
+    t2 = {
+      position
+    };
+    $[0] = position;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t1 || $[3] !== t2) {
+    t3 = {
+      id: t1,
+      data: t2
+    };
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const {
+    setNodeRef,
+    isOver
+  } = useDroppable(t3);
+  const t4 = `${id}-${position}`;
+  const t5 = position === "before" ? -2 : "auto";
+  const t6 = position === "after" ? -2 : "auto";
+  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", {
+      className: "droppable-widget",
+      "data-testid": t4,
+      ref: setNodeRef,
+      style: {
+        position: "absolute",
+        left: t5,
+        right: t6,
+        top: 0,
+        bottom: 0,
+        borderRadius: "1000px",
+        width: "4px",
+        backgroundColor: t7,
+        marginBottom: "10px",
+        marginTop: "10px",
+        pointerEvents: "none",
+        zIndex: 1000
+      }
+    });
+    $[5] = setNodeRef;
+    $[6] = t4;
+    $[7] = t5;
+    $[8] = t6;
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  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