@payloadcms/next 3.69.0-internal.5029b68 → 3.70.0-canary.0

package/dist/views/Dashboard/Default/ModularDashboard/utils/sensors.js

@@ -0,0 +1,264 @@
+import { KeyboardCode, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+/**
+ * Get all droppable widget positions, filtering out overlapping "before" droppables
+ * and assigning row numbers based on Y position.
+ */
+function getDroppablePositions() {
+  const positionTolerance = 5;
+  const rowTolerance = 10;
+  const result = [];
+  let currentRow = 0;
+  let currentY = null;
+  const allDroppables = Array.from(document.querySelectorAll('.droppable-widget'));
+  for (let i = 0; i < allDroppables.length; i++) {
+    const element = allDroppables[i];
+    const rect = element.getBoundingClientRect();
+    // Skip hidden elements
+    if (rect.width === 0 || rect.height === 0) {
+      continue;
+    }
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const testId = element.getAttribute('data-testid') || '';
+    const isBeforeDroppable = testId.endsWith('-before');
+    // Skip "before" droppables that overlap with another droppable
+    if (isBeforeDroppable) {
+      const hasOverlapping = allDroppables.some((other, otherIndex) => {
+        if (otherIndex === i) {
+          return false;
+        }
+        const otherRect = other.getBoundingClientRect();
+        const otherCenterX = otherRect.left + otherRect.width / 2;
+        const otherCenterY = otherRect.top + otherRect.height / 2;
+        return Math.abs(otherCenterX - centerX) < positionTolerance && Math.abs(otherCenterY - centerY) < positionTolerance;
+      });
+      if (hasOverlapping) {
+        continue;
+      }
+    }
+    // Assign row number based on Y position change
+    if (currentY === null) {
+      currentY = centerY;
+    } else if (Math.abs(centerY - currentY) >= rowTolerance) {
+      currentRow++;
+      currentY = centerY;
+    }
+    result.push({
+      centerX,
+      centerY,
+      element,
+      isBeforeDroppable,
+      rect,
+      row: currentRow
+    });
+  }
+  return result;
+}
+/**
+ * Find the row with the closest Y position to the given posY.
+ * Returns the row index, or null if no droppables exist.
+ */
+function findClosestRow(droppables, posY) {
+  if (droppables.length === 0) {
+    return null;
+  }
+  let closestRow = droppables[0].row;
+  let minYDistance = Infinity;
+  for (const droppable of droppables) {
+    const yDistance = Math.abs(droppable.centerY - posY);
+    if (yDistance < minYDistance) {
+      minYDistance = yDistance;
+      closestRow = droppable.row;
+    }
+  }
+  return closestRow;
+}
+/**
+ * Find the closest droppable within a specific row by X position.
+ * Returns the droppable and its index, or null if no droppables in that row.
+ */
+function findClosestDroppableInRow(droppables, rowIndex, posX) {
+  let closestIndex = -1;
+  let minXDistance = Infinity;
+  for (let i = 0; i < droppables.length; i++) {
+    const droppable = droppables[i];
+    if (droppable.row === rowIndex) {
+      const xDistance = Math.abs(droppable.centerX - posX);
+      if (xDistance < minXDistance) {
+        minXDistance = xDistance;
+        closestIndex = i;
+      }
+    }
+  }
+  if (closestIndex === -1) {
+    return null;
+  }
+  return {
+    droppable: droppables[closestIndex],
+    index: closestIndex
+  };
+}
+/**
+ * Find the target droppable based on direction
+ * - ArrowRight/Left: Next/previous in DOM order (now that overlapping droppables are filtered)
+ * - ArrowUp/Down: Closest in adjacent row (row +1 or -1) by X position
+ */
+function findTargetDroppable(droppables, currentCenterX, currentCenterY, direction) {
+  // Find the closest row, then the closest droppable in that row
+  const currentRow = findClosestRow(droppables, currentCenterY);
+  if (currentRow === null) {
+    return null;
+  }
+  const currentDroppable = findClosestDroppableInRow(droppables, currentRow, currentCenterX);
+  if (!currentDroppable) {
+    return null;
+  }
+  const {
+    index: currentIndex
+  } = currentDroppable;
+  switch (direction) {
+    case 'ArrowDown':
+      {
+        const targetRow = currentRow + 1;
+        return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null;
+      }
+    case 'ArrowLeft':
+      // Previous in DOM order
+      return droppables[currentIndex - 1] || null;
+    case 'ArrowRight':
+      // Next in DOM order
+      return droppables[currentIndex + 1] || null;
+    case 'ArrowUp':
+      {
+        const targetRow = currentRow - 1;
+        return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null;
+      }
+    default:
+      return null;
+  }
+}
+/**
+ * Custom coordinate getter that jumps directly to droppable positions
+ * instead of moving in pixel increments. This works better with scrolling
+ * and provides more predictable navigation.
+ */
+const droppableJumpKeyboardCoordinateGetter = (event, {
+  context,
+  currentCoordinates
+}) => {
+  const {
+    collisionRect
+  } = context;
+  const {
+    code
+  } = event;
+  if (!collisionRect) {
+    return currentCoordinates;
+  }
+  // Only handle arrow keys
+  if (!['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(code)) {
+    return currentCoordinates;
+  }
+  // Prevent default browser scroll behavior for arrow keys
+  event.preventDefault();
+  // Clear scrollableAncestors to prevent dnd-kit from scrolling instead of moving
+  // This must be done on every keydown because context is updated by dnd-kit
+  if (context.scrollableAncestors) {
+    context.scrollableAncestors.length = 0;
+  }
+  // Get all droppable widgets and their positions
+  const droppables = getDroppablePositions();
+  if (droppables.length === 0) {
+    return currentCoordinates;
+  }
+  // Current position center (viewport coordinates from collisionRect)
+  const currentCenterX = collisionRect.left + collisionRect.width / 2;
+  const currentCenterY = collisionRect.top + collisionRect.height / 2;
+  // Find the target droppable based on direction
+  const targetDroppable = findTargetDroppable(droppables, currentCenterX, currentCenterY, code);
+  // If we found a target, scroll if needed and calculate the delta
+  if (targetDroppable) {
+    const viewportHeight = window.innerHeight;
+    const targetRect = targetDroppable.rect;
+    const scrollPadding = 20 // Extra padding to ensure element is fully visible
+    ;
+    // Check if target droppable is fully visible in viewport
+    const isAboveViewport = targetRect.top < scrollPadding;
+    const isBelowViewport = targetRect.bottom > viewportHeight - scrollPadding;
+    // Scroll to make target visible (using instant scroll for synchronous behavior)
+    if (isAboveViewport) {
+      const scrollAmount = targetRect.top - scrollPadding;
+      // don't use smooth scroll here, because it will mess up the delta calculation
+      window.scrollBy({
+        behavior: 'instant',
+        top: scrollAmount
+      });
+    } else if (isBelowViewport) {
+      const scrollAmount = targetRect.bottom - viewportHeight + scrollPadding;
+      window.scrollBy({
+        behavior: 'instant',
+        top: scrollAmount
+      });
+    }
+    // After scroll, recalculate target position (it may have changed due to scroll)
+    const newTargetRect = targetDroppable.element.getBoundingClientRect();
+    const newTargetCenterX = newTargetRect.left + newTargetRect.width / 2;
+    const newTargetCenterY = newTargetRect.top + newTargetRect.height / 2;
+    // Calculate delta using current overlay position (which didn't change) and new target position
+    const deltaX = newTargetCenterX - currentCenterX;
+    const deltaY = newTargetCenterY - currentCenterY;
+    // Add delta to currentCoordinates to position overlay's center at target's center
+    return {
+      x: currentCoordinates.x + deltaX,
+      y: currentCoordinates.y + deltaY
+    };
+  }
+  // No valid target found, stay in place
+  return currentCoordinates;
+};
+/**
+ * Custom KeyboardSensor that only activates when focus is directly on the
+ * draggable element, not on any of its descendants. This allows interactive
+ * elements inside draggables (like buttons) to work normally with the keyboard.
+ */
+class DirectFocusKeyboardSensor extends KeyboardSensor {
+  static activators = [{
+    eventName: 'onKeyDown',
+    handler: (event, {
+      keyboardCodes = {
+        cancel: [KeyboardCode.Esc],
+        end: [KeyboardCode.Space, KeyboardCode.Enter],
+        start: [KeyboardCode.Space, KeyboardCode.Enter]
+      },
+      onActivation
+    }, {
+      active
+    }) => {
+      const {
+        code
+      } = event.nativeEvent;
+      // Only activate if focus is directly on the draggable node, not descendants
+      if (event.target !== active.node.current) {
+        return false;
+      }
+      if (keyboardCodes.start.includes(code)) {
+        event.preventDefault();
+        onActivation?.({
+          event: event.nativeEvent
+        });
+        return true;
+      }
+      return false;
+    }
+  }];
+}
+export function useDashboardSensors() {
+  return useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), useSensor(DirectFocusKeyboardSensor, {
+    coordinateGetter: droppableJumpKeyboardCoordinateGetter
+  }));
+}
+//# sourceMappingURL=sensors.js.map

package/dist/views/Dashboard/Default/ModularDashboard/utils/sensors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensors.js","names":["KeyboardCode","KeyboardSensor","PointerSensor","useSensor","useSensors","getDroppablePositions","positionTolerance","rowTolerance","result","currentRow","currentY","allDroppables","Array","from","document","querySelectorAll","i","length","element","rect","getBoundingClientRect","width","height","centerX","left","centerY","top","testId","getAttribute","isBeforeDroppable","endsWith","hasOverlapping","some","other","otherIndex","otherRect","otherCenterX","otherCenterY","Math","abs","push","row","findClosestRow","droppables","posY","closestRow","minYDistance","Infinity","droppable","yDistance","findClosestDroppableInRow","rowIndex","posX","closestIndex","minXDistance","xDistance","index","findTargetDroppable","currentCenterX","currentCenterY","direction","currentDroppable","currentIndex","targetRow","droppableJumpKeyboardCoordinateGetter","event","context","currentCoordinates","collisionRect","code","includes","preventDefault","scrollableAncestors","targetDroppable","viewportHeight","window","innerHeight","targetRect","scrollPadding","isAboveViewport","isBelowViewport","bottom","scrollAmount","scrollBy","behavior","newTargetRect","newTargetCenterX","newTargetCenterY","deltaX","deltaY","x","y","DirectFocusKeyboardSensor","activators","eventName","handler","keyboardCodes","cancel","Esc","end","Space","Enter","start","onActivation","active","nativeEvent","target","node","current","useDashboardSensors","activationConstraint","distance","coordinateGetter"],"sources":["../../../../../../src/views/Dashboard/Default/ModularDashboard/utils/sensors.ts"],"sourcesContent":["import type { KeyboardCoordinateGetter, KeyboardSensorOptions } from '@dnd-kit/core'\n\nimport { KeyboardCode, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'\n\ntype DroppablePosition = {\n  centerX: number\n  centerY: number\n  element: Element\n  isBeforeDroppable: boolean\n  rect: DOMRect\n  row: number\n}\n\n/**\n * Get all droppable widget positions, filtering out overlapping \"before\" droppables\n * and assigning row numbers based on Y position.\n */\nfunction getDroppablePositions(): DroppablePosition[] {\n  const positionTolerance = 5\n  const rowTolerance = 10\n  const result: DroppablePosition[] = []\n  let currentRow = 0\n  let currentY: null | number = null\n\n  const allDroppables = Array.from(document.querySelectorAll('.droppable-widget'))\n\n  for (let i = 0; i < allDroppables.length; i++) {\n    const element = allDroppables[i]\n    const rect = element.getBoundingClientRect()\n\n    // Skip hidden elements\n    if (rect.width === 0 || rect.height === 0) {\n      continue\n    }\n\n    const centerX = rect.left + rect.width / 2\n    const centerY = rect.top + rect.height / 2\n    const testId = element.getAttribute('data-testid') || ''\n    const isBeforeDroppable = testId.endsWith('-before')\n\n    // Skip \"before\" droppables that overlap with another droppable\n    if (isBeforeDroppable) {\n      const hasOverlapping = allDroppables.some((other, otherIndex) => {\n        if (otherIndex === i) {\n          return false\n        }\n        const otherRect = other.getBoundingClientRect()\n        const otherCenterX = otherRect.left + otherRect.width / 2\n        const otherCenterY = otherRect.top + otherRect.height / 2\n        return (\n          Math.abs(otherCenterX - centerX) < positionTolerance &&\n          Math.abs(otherCenterY - centerY) < positionTolerance\n        )\n      })\n      if (hasOverlapping) {\n        continue\n      }\n    }\n\n    // Assign row number based on Y position change\n    if (currentY === null) {\n      currentY = centerY\n    } else if (Math.abs(centerY - currentY) >= rowTolerance) {\n      currentRow++\n      currentY = centerY\n    }\n\n    result.push({\n      centerX,\n      centerY,\n      element,\n      isBeforeDroppable,\n      rect,\n      row: currentRow,\n    })\n  }\n\n  return result\n}\n\n/**\n * Find the row with the closest Y position to the given posY.\n * Returns the row index, or null if no droppables exist.\n */\nfunction findClosestRow(droppables: DroppablePosition[], posY: number): null | number {\n  if (droppables.length === 0) {\n    return null\n  }\n\n  let closestRow = droppables[0].row\n  let minYDistance = Infinity\n\n  for (const droppable of droppables) {\n    const yDistance = Math.abs(droppable.centerY - posY)\n    if (yDistance < minYDistance) {\n      minYDistance = yDistance\n      closestRow = droppable.row\n    }\n  }\n\n  return closestRow\n}\n\n/**\n * Find the closest droppable within a specific row by X position.\n * Returns the droppable and its index, or null if no droppables in that row.\n */\nfunction findClosestDroppableInRow(\n  droppables: DroppablePosition[],\n  rowIndex: number,\n  posX: number,\n): { droppable: DroppablePosition; index: number } | null {\n  let closestIndex = -1\n  let minXDistance = Infinity\n\n  for (let i = 0; i < droppables.length; i++) {\n    const droppable = droppables[i]\n    if (droppable.row === rowIndex) {\n      const xDistance = Math.abs(droppable.centerX - posX)\n      if (xDistance < minXDistance) {\n        minXDistance = xDistance\n        closestIndex = i\n      }\n    }\n  }\n\n  if (closestIndex === -1) {\n    return null\n  }\n\n  return { droppable: droppables[closestIndex], index: closestIndex }\n}\n\n/**\n * Find the target droppable based on direction\n * - ArrowRight/Left: Next/previous in DOM order (now that overlapping droppables are filtered)\n * - ArrowUp/Down: Closest in adjacent row (row +1 or -1) by X position\n */\nfunction findTargetDroppable(\n  droppables: DroppablePosition[],\n  currentCenterX: number,\n  currentCenterY: number,\n  direction: string,\n): DroppablePosition | null {\n  // Find the closest row, then the closest droppable in that row\n  const currentRow = findClosestRow(droppables, currentCenterY)\n\n  if (currentRow === null) {\n    return null\n  }\n\n  const currentDroppable = findClosestDroppableInRow(droppables, currentRow, currentCenterX)\n\n  if (!currentDroppable) {\n    return null\n  }\n\n  const { index: currentIndex } = currentDroppable\n\n  switch (direction) {\n    case 'ArrowDown': {\n      const targetRow = currentRow + 1\n      return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null\n    }\n\n    case 'ArrowLeft':\n      // Previous in DOM order\n      return droppables[currentIndex - 1] || null\n\n    case 'ArrowRight':\n      // Next in DOM order\n      return droppables[currentIndex + 1] || null\n\n    case 'ArrowUp': {\n      const targetRow = currentRow - 1\n      return findClosestDroppableInRow(droppables, targetRow, currentCenterX)?.droppable || null\n    }\n\n    default:\n      return null\n  }\n}\n\n/**\n * Custom coordinate getter that jumps directly to droppable positions\n * instead of moving in pixel increments. This works better with scrolling\n * and provides more predictable navigation.\n */\nconst droppableJumpKeyboardCoordinateGetter: KeyboardCoordinateGetter = (\n  event,\n  { context, currentCoordinates },\n) => {\n  const { collisionRect } = context\n  const { code } = event\n\n  if (!collisionRect) {\n    return currentCoordinates\n  }\n\n  // Only handle arrow keys\n  if (!['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(code)) {\n    return currentCoordinates\n  }\n\n  // Prevent default browser scroll behavior for arrow keys\n  event.preventDefault()\n\n  // Clear scrollableAncestors to prevent dnd-kit from scrolling instead of moving\n  // This must be done on every keydown because context is updated by dnd-kit\n  if (context.scrollableAncestors) {\n    context.scrollableAncestors.length = 0\n  }\n\n  // Get all droppable widgets and their positions\n  const droppables = getDroppablePositions()\n\n  if (droppables.length === 0) {\n    return currentCoordinates\n  }\n\n  // Current position center (viewport coordinates from collisionRect)\n  const currentCenterX = collisionRect.left + collisionRect.width / 2\n  const currentCenterY = collisionRect.top + collisionRect.height / 2\n\n  // Find the target droppable based on direction\n  const targetDroppable = findTargetDroppable(droppables, currentCenterX, currentCenterY, code)\n\n  // If we found a target, scroll if needed and calculate the delta\n  if (targetDroppable) {\n    const viewportHeight = window.innerHeight\n    const targetRect = targetDroppable.rect\n    const scrollPadding = 20 // Extra padding to ensure element is fully visible\n\n    // Check if target droppable is fully visible in viewport\n    const isAboveViewport = targetRect.top < scrollPadding\n    const isBelowViewport = targetRect.bottom > viewportHeight - scrollPadding\n\n    // Scroll to make target visible (using instant scroll for synchronous behavior)\n    if (isAboveViewport) {\n      const scrollAmount = targetRect.top - scrollPadding\n      // don't use smooth scroll here, because it will mess up the delta calculation\n      window.scrollBy({ behavior: 'instant', top: scrollAmount })\n    } else if (isBelowViewport) {\n      const scrollAmount = targetRect.bottom - viewportHeight + scrollPadding\n      window.scrollBy({ behavior: 'instant', top: scrollAmount })\n    }\n\n    // After scroll, recalculate target position (it may have changed due to scroll)\n    const newTargetRect = targetDroppable.element.getBoundingClientRect()\n    const newTargetCenterX = newTargetRect.left + newTargetRect.width / 2\n    const newTargetCenterY = newTargetRect.top + newTargetRect.height / 2\n\n    // Calculate delta using current overlay position (which didn't change) and new target position\n    const deltaX = newTargetCenterX - currentCenterX\n    const deltaY = newTargetCenterY - currentCenterY\n\n    // Add delta to currentCoordinates to position overlay's center at target's center\n    return {\n      x: currentCoordinates.x + deltaX,\n      y: currentCoordinates.y + deltaY,\n    }\n  }\n\n  // No valid target found, stay in place\n  return currentCoordinates\n}\n\n/**\n * Custom KeyboardSensor that only activates when focus is directly on the\n * draggable element, not on any of its descendants. This allows interactive\n * elements inside draggables (like buttons) to work normally with the keyboard.\n */\nclass DirectFocusKeyboardSensor extends KeyboardSensor {\n  static override activators = [\n    {\n      eventName: 'onKeyDown' as const,\n      handler: (\n        event: React.KeyboardEvent,\n        {\n          keyboardCodes = {\n            cancel: [KeyboardCode.Esc],\n            end: [KeyboardCode.Space, KeyboardCode.Enter],\n            start: [KeyboardCode.Space, KeyboardCode.Enter],\n          },\n          onActivation,\n        }: KeyboardSensorOptions,\n        { active }: { active: { node: React.MutableRefObject<HTMLElement | null> } },\n      ) => {\n        const { code } = event.nativeEvent\n\n        // Only activate if focus is directly on the draggable node, not descendants\n        if (event.target !== active.node.current) {\n          return false\n        }\n\n        if (keyboardCodes.start.includes(code)) {\n          event.preventDefault()\n          onActivation?.({ event: event.nativeEvent })\n          return true\n        }\n\n        return false\n      },\n    },\n  ]\n}\n\nexport function useDashboardSensors() {\n  return useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(DirectFocusKeyboardSensor, {\n      coordinateGetter: droppableJumpKeyboardCoordinateGetter,\n    }),\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Dashboard/Default/index.d.ts

@@ -1,7 +1,6 @@
 import type { groupNavItems } from '@payloadcms/ui/shared';
 import type { AdminViewServerPropsOnly, ClientUser, Locale } from 'payload';
 import React from 'react';
-import './index.scss';
 export type DashboardViewClientProps = {
     locale: Locale;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Dashboard/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAOxF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE;YAAE,SAAS,EAAE,OAAO,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;SAAE,CAAA;QAC/F,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,IAAI,EAAE,MAAM,CAAA;KACb,CAAC,CAAA;IACF;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;CAC7C,GAAG,wBAAwB,CAAA;AAE5B,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,GAAG,4BAA4B,CAAA;AAE9F,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,qBAsK/D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Dashboard/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAIxF,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAWD,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE;YAAE,SAAS,EAAE,OAAO,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;SAAE,CAAA;QAC/F,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,IAAI,EAAE,MAAM,CAAA;KACb,CAAC,CAAA;IACF;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;CAC7C,GAAG,wBAAwB,CAAA;AAE5B,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,GAAG,4BAA4B,CAAA;AAE9F,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,qBAqC/D"}

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

@@ -1,166 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-import { Button, Card, Gutter, Locked } from '@payloadcms/ui';
+import { Gutter } from '@payloadcms/ui';
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
-import { EntityType } from '@payloadcms/ui/shared';
-import { formatAdminURL } from 'payload/shared';
-import React, { Fragment } from 'react';
+import React from 'react';
+import { ModularDashboard } from './ModularDashboard/index.js';
 const baseClass = 'dashboard';
 export function DefaultDashboard(props) {
   const {
-    globalData,
     i18n,
-    i18n: {
-      t
-    },
     locale,
-    navGroups,
     params,
-    payload: {
-      config: {
-        admin: {
-          components: {
-            afterDashboard,
-            beforeDashboard
-          }
-        },
-        routes: {
-          admin: adminRoute
-        },
-        serverURL
-      }
-    },
     payload,
     permissions,
     searchParams,
     user
   } = props;
-  return /*#__PURE__*/_jsx("div", {
+  const {
+    afterDashboard,
+    beforeDashboard
+  } = payload.config.admin.components;
+  return /*#__PURE__*/_jsxs(Gutter, {
     className: baseClass,
-    children: /*#__PURE__*/_jsxs(Gutter, {
-      className: `${baseClass}__wrap`,
-      children: [beforeDashboard && RenderServerComponent({
-        Component: beforeDashboard,
-        importMap: payload.importMap,
-        serverProps: {
-          i18n,
-          locale,
-          params,
-          payload,
-          permissions,
-          searchParams,
-          user
-        }
-      }), /*#__PURE__*/_jsx(Fragment, {
-        children: !navGroups || navGroups?.length === 0 ? /*#__PURE__*/_jsx("p", {
-          children: "no nav groups...."
-        }) : navGroups.map(({
-          entities,
-          label
-        }, groupIndex) => {
-          return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__group`,
-            children: [/*#__PURE__*/_jsx("h2", {
-              className: `${baseClass}__label`,
-              children: label
-            }), /*#__PURE__*/_jsx("ul", {
-              className: `${baseClass}__card-list`,
-              children: entities.map(({
-                slug,
-                type,
-                label
-              }, entityIndex) => {
-                let title;
-                let buttonAriaLabel;
-                let createHREF;
-                let href;
-                let hasCreatePermission;
-                let isLocked = null;
-                let userEditing = null;
-                if (type === EntityType.collection) {
-                  title = getTranslation(label, i18n);
-                  buttonAriaLabel = t('general:showAllLabel', {
-                    label: title
-                  });
-                  href = formatAdminURL({
-                    adminRoute,
-                    path: `/collections/${slug}`,
-                    serverURL
-                  });
-                  createHREF = formatAdminURL({
-                    adminRoute,
-                    path: `/collections/${slug}/create`,
-                    serverURL
-                  });
-                  hasCreatePermission = permissions?.collections?.[slug]?.create;
-                }
-                if (type === EntityType.global) {
-                  title = getTranslation(label, i18n);
-                  buttonAriaLabel = t('general:editLabel', {
-                    label: getTranslation(label, i18n)
-                  });
-                  href = formatAdminURL({
-                    adminRoute,
-                    path: `/globals/${slug}`,
-                    serverURL
-                  });
-                  // Find the lock status for the global
-                  const globalLockData = globalData.find(global => global.slug === slug);
-                  if (globalLockData) {
-                    isLocked = globalLockData.data._isLocked;
-                    userEditing = globalLockData.data._userEditing;
-                    // Check if the lock is expired
-                    const lockDuration = globalLockData?.lockDuration;
-                    const lastEditedAt = new Date(globalLockData.data?._lastEditedAt).getTime();
-                    const lockDurationInMilliseconds = lockDuration * 1000;
-                    const lockExpirationTime = lastEditedAt + lockDurationInMilliseconds;
-                    if (new Date().getTime() > lockExpirationTime) {
-                      isLocked = false;
-                      userEditing = null;
-                    }
-                  }
-                }
-                return /*#__PURE__*/_jsx("li", {
-                  children: /*#__PURE__*/_jsx(Card, {
-                    actions: isLocked && user?.id !== userEditing?.id ? /*#__PURE__*/_jsx(Locked, {
-                      className: `${baseClass}__locked`,
-                      user: userEditing
-                    }) : hasCreatePermission && type === EntityType.collection ? /*#__PURE__*/_jsx(Button, {
-                      "aria-label": t('general:createNewLabel', {
-                        label
-                      }),
-                      buttonStyle: "icon-label",
-                      el: "link",
-                      icon: "plus",
-                      iconStyle: "with-border",
-                      round: true,
-                      to: createHREF
-                    }) : undefined,
-                    buttonAriaLabel: buttonAriaLabel,
-                    href: href,
-                    id: `card-${slug}`,
-                    title: getTranslation(label, i18n),
-                    titleAs: "h3"
-                  })
-                }, entityIndex);
-              })
-            })]
-          }, groupIndex);
-        })
-      }), afterDashboard && RenderServerComponent({
-        Component: afterDashboard,
-        importMap: payload.importMap,
-        serverProps: {
-          i18n,
-          locale,
-          params,
-          payload,
-          permissions,
-          searchParams,
-          user
-        }
-      })]
-    })
+    children: [beforeDashboard && RenderServerComponent({
+      Component: beforeDashboard,
+      importMap: payload.importMap,
+      serverProps: {
+        i18n,
+        locale,
+        params,
+        payload,
+        permissions,
+        searchParams,
+        user
+      }
+    }), /*#__PURE__*/_jsx(ModularDashboard, {
+      ...props
+    }), afterDashboard && RenderServerComponent({
+      Component: afterDashboard,
+      importMap: payload.importMap,
+      serverProps: {
+        i18n,
+        locale,
+        params,
+        payload,
+        permissions,
+        searchParams,
+        user
+      }
+    })]
   });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","Button","Card","Gutter","Locked","RenderServerComponent","EntityType","formatAdminURL","React","Fragment","baseClass","DefaultDashboard","props","globalData","i18n","t","locale","navGroups","params","payload","config","admin","components","afterDashboard","beforeDashboard","routes","adminRoute","serverURL","permissions","searchParams","user","_jsx","className","_jsxs","Component","importMap","serverProps","length","map","entities","label","groupIndex","slug","type","entityIndex","title","buttonAriaLabel","createHREF","href","hasCreatePermission","isLocked","userEditing","collection","path","collections","create","global","globalLockData","find","data","_isLocked","_userEditing","lockDuration","lastEditedAt","Date","_lastEditedAt","getTime","lockDurationInMilliseconds","lockExpirationTime","actions","id","buttonStyle","el","icon","iconStyle","round","to","undefined","titleAs"],"sources":["../../../../src/views/Dashboard/Default/index.tsx"],"sourcesContent":["import type { groupNavItems } from '@payloadcms/ui/shared'\nimport type { AdminViewServerPropsOnly, ClientUser, Locale, ServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, Card, Gutter, Locked } from '@payloadcms/ui'\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport { EntityType } from '@payloadcms/ui/shared'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'dashboard'\n\nexport type DashboardViewClientProps = {\n  locale: Locale\n}\n\nexport type DashboardViewServerPropsOnly = {\n  globalData: Array<{\n    data: { _isLocked: boolean; _lastEditedAt: string; _userEditing: ClientUser | number | string }\n    lockDuration?: number\n    slug: string\n  }>\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ComponentType\n  navGroups?: ReturnType<typeof groupNavItems>\n} & AdminViewServerPropsOnly\n\nexport type DashboardViewServerProps = DashboardViewClientProps & DashboardViewServerPropsOnly\n\nexport function DefaultDashboard(props: DashboardViewServerProps) {\n  const {\n    globalData,\n    i18n,\n    i18n: { t },\n    locale,\n    navGroups,\n    params,\n    payload: {\n      config: {\n        admin: {\n          components: { afterDashboard, beforeDashboard },\n        },\n        routes: { admin: adminRoute },\n        serverURL,\n      },\n    },\n    payload,\n    permissions,\n    searchParams,\n    user,\n  } = props\n\n  return (\n    <div className={baseClass}>\n      <Gutter className={`${baseClass}__wrap`}>\n        {beforeDashboard &&\n          RenderServerComponent({\n            Component: beforeDashboard,\n            importMap: payload.importMap,\n            serverProps: {\n              i18n,\n              locale,\n              params,\n              payload,\n              permissions,\n              searchParams,\n              user,\n            } satisfies ServerProps,\n          })}\n\n        <Fragment>\n          {!navGroups || navGroups?.length === 0 ? (\n            <p>no nav groups....</p>\n          ) : (\n            navGroups.map(({ entities, label }, groupIndex) => {\n              return (\n                <div className={`${baseClass}__group`} key={groupIndex}>\n                  <h2 className={`${baseClass}__label`}>{label}</h2>\n                  <ul className={`${baseClass}__card-list`}>\n                    {entities.map(({ slug, type, label }, entityIndex) => {\n                      let title: string\n                      let buttonAriaLabel: string\n                      let createHREF: string\n                      let href: string\n                      let hasCreatePermission: boolean\n                      let isLocked = null\n                      let userEditing = null\n\n                      if (type === EntityType.collection) {\n                        title = getTranslation(label, i18n)\n\n                        buttonAriaLabel = t('general:showAllLabel', { label: title })\n\n                        href = formatAdminURL({\n                          adminRoute,\n                          path: `/collections/${slug}`,\n                          serverURL,\n                        })\n\n                        createHREF = formatAdminURL({\n                          adminRoute,\n                          path: `/collections/${slug}/create`,\n                          serverURL,\n                        })\n\n                        hasCreatePermission = permissions?.collections?.[slug]?.create\n                      }\n\n                      if (type === EntityType.global) {\n                        title = getTranslation(label, i18n)\n\n                        buttonAriaLabel = t('general:editLabel', {\n                          label: getTranslation(label, i18n),\n                        })\n\n                        href = formatAdminURL({\n                          adminRoute,\n                          path: `/globals/${slug}`,\n                          serverURL,\n                        })\n\n                        // Find the lock status for the global\n                        const globalLockData = globalData.find((global) => global.slug === slug)\n                        if (globalLockData) {\n                          isLocked = globalLockData.data._isLocked\n                          userEditing = globalLockData.data._userEditing\n\n                          // Check if the lock is expired\n                          const lockDuration = globalLockData?.lockDuration\n                          const lastEditedAt = new Date(\n                            globalLockData.data?._lastEditedAt,\n                          ).getTime()\n\n                          const lockDurationInMilliseconds = lockDuration * 1000\n                          const lockExpirationTime = lastEditedAt + lockDurationInMilliseconds\n\n                          if (new Date().getTime() > lockExpirationTime) {\n                            isLocked = false\n                            userEditing = null\n                          }\n                        }\n                      }\n\n                      return (\n                        <li key={entityIndex}>\n                          <Card\n                            actions={\n                              isLocked && user?.id !== userEditing?.id ? (\n                                <Locked className={`${baseClass}__locked`} user={userEditing} />\n                              ) : hasCreatePermission && type === EntityType.collection ? (\n                                <Button\n                                  aria-label={t('general:createNewLabel', {\n                                    label,\n                                  })}\n                                  buttonStyle=\"icon-label\"\n                                  el=\"link\"\n                                  icon=\"plus\"\n                                  iconStyle=\"with-border\"\n                                  round\n                                  to={createHREF}\n                                />\n                              ) : undefined\n                            }\n                            buttonAriaLabel={buttonAriaLabel}\n                            href={href}\n                            id={`card-${slug}`}\n                            title={getTranslation(label, i18n)}\n                            titleAs=\"h3\"\n                          />\n                        </li>\n                      )\n                    })}\n                  </ul>\n                </div>\n              )\n            })\n          )}\n        </Fragment>\n        {afterDashboard &&\n          RenderServerComponent({\n            Component: afterDashboard,\n            importMap: payload.importMap,\n            serverProps: {\n              i18n,\n              locale,\n              params,\n              payload,\n              permissions,\n              searchParams,\n              user,\n            } satisfies ServerProps,\n          })}\n      </Gutter>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Gutter","RenderServerComponent","React","ModularDashboard","baseClass","DefaultDashboard","props","i18n","locale","params","payload","permissions","searchParams","user","afterDashboard","beforeDashboard","config","admin","components","_jsxs","className","Component","importMap","serverProps","_jsx"],"sources":["../../../../src/views/Dashboard/Default/index.tsx"],"sourcesContent":["import type { groupNavItems } from '@payloadcms/ui/shared'\nimport type { AdminViewServerPropsOnly, ClientUser, Locale, ServerProps } from 'payload'\n\nimport { Gutter } from '@payloadcms/ui'\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport { ModularDashboard } from './ModularDashboard/index.js'\n\nconst baseClass = 'dashboard'\n\nexport type DashboardViewClientProps = {\n  locale: Locale\n}\n\n// Neither DashboardViewClientProps, DashboardViewServerPropsOnly, nor\n// DashboardViewServerProps make much sense. They were created\n// before the modular dashboard existed, and they are tightly coupled to\n// the default layout of collection and global cards. All of their values\n// could have been derived from the req object, and the same likely applies\n// to other views. These types remain only for backward compatibility.\n// It is recommended to use the modular dashboard widgets, which have props\n// that are more agnostic to their content.\n\nexport type DashboardViewServerPropsOnly = {\n  globalData: Array<{\n    data: { _isLocked: boolean; _lastEditedAt: string; _userEditing: ClientUser | number | string }\n    lockDuration?: number\n    slug: string\n  }>\n  /**\n   * @deprecated\n   * This prop is deprecated and will be removed in the next major version.\n   * Components now import their own `Link` directly from `next/link`.\n   */\n  Link?: React.ComponentType\n  navGroups?: ReturnType<typeof groupNavItems>\n} & AdminViewServerPropsOnly\n\nexport type DashboardViewServerProps = DashboardViewClientProps & DashboardViewServerPropsOnly\n\nexport function DefaultDashboard(props: DashboardViewServerProps) {\n  const { i18n, locale, params, payload, permissions, searchParams, user } = props\n  const { afterDashboard, beforeDashboard } = payload.config.admin.components\n\n  return (\n    <Gutter className={baseClass}>\n      {beforeDashboard &&\n        RenderServerComponent({\n          Component: beforeDashboard,\n          importMap: payload.importMap,\n          serverProps: {\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          } satisfies ServerProps,\n        })}\n      <ModularDashboard {...props} />\n      {afterDashboard &&\n        RenderServerComponent({\n          Component: afterDashboard,\n          importMap: payload.importMap,\n          serverProps: {\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          } satisfies ServerProps,\n        })}\n    </Gutter>\n  )\n}\n"],"mappings":";AAGA,SAASA,MAAM,QAAQ;AACvB,SAASC,qBAAqB,QAAQ;AACtC,OAAOC,KAAA,MAAW;AAElB,SAASC,gBAAgB,QAAQ;AAEjC,MAAMC,SAAA,GAAY;AAgClB,OAAO,SAASC,iBAAiBC,KAA+B;EAC9D,MAAM;IAAEC,IAAI;IAAEC,MAAM;IAAEC,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,YAAY;IAAEC;EAAI,CAAE,GAAGP,KAAA;EAC3E,MAAM;IAAEQ,cAAc;IAAEC;EAAe,CAAE,GAAGL,OAAA,CAAQM,MAAM,CAACC,KAAK,CAACC,UAAU;EAE3E,oBACEC,KAAA,CAACnB,MAAA;IAAOoB,SAAA,EAAWhB,SAAA;eAChBW,eAAA,IACCd,qBAAA,CAAsB;MACpBoB,SAAA,EAAWN,eAAA;MACXO,SAAA,EAAWZ,OAAA,CAAQY,SAAS;MAC5BC,WAAA,EAAa;QACXhB,IAAA;QACAC,MAAA;QACAC,MAAA;QACAC,OAAA;QACAC,WAAA;QACAC,YAAA;QACAC;MACF;IACF,I,aACFW,IAAA,CAACrB,gBAAA;MAAkB,GAAGG;QACrBQ,cAAA,IACCb,qBAAA,CAAsB;MACpBoB,SAAA,EAAWP,cAAA;MACXQ,SAAA,EAAWZ,OAAA,CAAQY,SAAS;MAC5BC,WAAA,EAAa;QACXhB,IAAA;QACAC,MAAA;QACAC,MAAA;QACAC,OAAA;QACAC,WAAA;QACAC,YAAA;QACAC;MACF;IACF;;AAGR","ignoreList":[]}

package/dist/views/Dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Dashboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAa,MAAM,SAAS,CAAA;AAK9D,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,wBAAsB,aAAa,CAAC,KAAK,EAAE,oBAAoB,8BAmH9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Dashboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAKnD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,wBAAsB,aAAa,CAAC,KAAK,EAAE,oBAAoB,8BA0C9D"}

package/dist/views/Dashboard/index.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HydrateAuthProvider, SetStepNav } from '@payloadcms/ui';
 import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
-import { EntityType, groupNavItems } from '@payloadcms/ui/shared';
+import { getGlobalData, getNavGroups } from '@payloadcms/ui/shared';
 import React, { Fragment } from 'react';
 import { DefaultDashboard } from './Default/index.js';
-const globalLockDurationDefault = 300;
 export async function DashboardView(props) {
   const {
     locale,
@@ -20,56 +19,8 @@ export async function DashboardView(props) {
     req,
     visibleEntities
   } = props.initPageResult;
-  const collections = config.collections.filter(collection => permissions?.collections?.[collection.slug]?.read && visibleEntities.collections.includes(collection.slug));
-  const globals = config.globals.filter(global => permissions?.globals?.[global.slug]?.read && visibleEntities.globals.includes(global.slug));
-  // Query locked global documents only if there are globals in the config
-  let globalData = [];
-  if (config.globals.length > 0) {
-    const lockedDocuments = await payload.find({
-      collection: 'payload-locked-documents',
-      depth: 1,
-      overrideAccess: false,
-      pagination: false,
-      req,
-      select: {
-        globalSlug: true,
-        updatedAt: true,
-        user: true
-      },
-      where: {
-        globalSlug: {
-          exists: true
-        }
-      }
-    });
-    // Map over globals to include `lockDuration` and lock data for each global slug
-    globalData = config.globals.map(global => {
-      const lockDuration = typeof global.lockDocuments === 'object' ? global.lockDocuments.duration : globalLockDurationDefault;
-      const lockedDoc = lockedDocuments.docs.find(doc => doc.globalSlug === global.slug);
-      return {
-        slug: global.slug,
-        data: {
-          _isLocked: !!lockedDoc,
-          _lastEditedAt: lockedDoc?.updatedAt ?? null,
-          _userEditing: lockedDoc?.user?.value ?? null
-        },
-        lockDuration
-      };
-    });
-  }
-  const navGroups = groupNavItems([...(collections.map(collection => {
-    const entityToGroup = {
-      type: EntityType.collection,
-      entity: collection
-    };
-    return entityToGroup;
-  }) ?? []), ...(globals.map(global => {
-    const entityToGroup = {
-      type: EntityType.global,
-      entity: global
-    };
-    return entityToGroup;
-  }) ?? [])], permissions, i18n);
+  const globalData = await getGlobalData(req);
+  const navGroups = getNavGroups(permissions, visibleEntities, config, i18n);
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(HydrateAuthProvider, {
       permissions: permissions