@wordpress/grid 0.1.1-next.v.202606191442.0

package/build/dashboard-grid/index.cjs

@@ -0,0 +1,591 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/grid/src/dashboard-grid/index.tsx
+var dashboard_grid_exports = {};
+__export(dashboard_grid_exports, {
+  DashboardGrid: () => DashboardGrid
+});
+module.exports = __toCommonJS(dashboard_grid_exports);
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_clsx = __toESM(require("clsx"));
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_grid_item = require("./grid-item.cjs");
+var import_grid_overlay = require("../shared/grid-overlay.cjs");
+var import_resize_snap = require("../shared/resize-snap.cjs");
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(
+    `style[${STYLE_HASH_ATTRIBUTE}]`
+  )) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(
+    targetDocument,
+    (runtime.documents.get(targetDocument) ?? 0) + 1
+  );
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/grid/src/shared/layout-shift-animation.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("9e5573e51f", "._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:transform var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1))}@media (prefers-reduced-motion:reduce){._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:none}}");
+}
+var layout_shift_animation_default = { "layout-animating": "_2db63116caa90ae9__layout-animating" };
+
+// packages/grid/src/dashboard-grid/index.tsx
+var import_item_exit_overlay = require("../shared/item-exit-overlay.cjs");
+var import_use_layout_shift_animation = require("../shared/use-layout-shift-animation.cjs");
+var import_use_item_exit_animation = require("../shared/use-item-exit-animation.cjs");
+var import_resolve_fill_widths = require("./resolve-fill-widths.cjs");
+var import_drag_overlay_drop_animation = require("../shared/drag-overlay-drop-animation.cjs");
+
+// packages/grid/src/dashboard-grid/grid.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("52d51e7d5c", "._960c435c33759f46__grid{display:grid;gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));position:relative}._48e8cd4225dcb813__drag-preview-frame{border-radius:var(--wp-grid-drag-preview-radius,0);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);cursor:grabbing;height:100%;pointer-events:none}._4b471bf24f891d2d__drag-preview-frame__lift{height:100%;transform:scale(var(--wp-grid-drag-preview-scale,1.05));transform-origin:center}@media not (prefers-reduced-motion:reduce){._48e8cd4225dcb813__drag-preview-frame{animation:_08fdf90ef86c4706__wp-grid-drag-preview-shadow-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}._4b471bf24f891d2d__drag-preview-frame__lift{animation:_8aaeb335436989f9__wp-grid-drag-preview-scale-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}}@media not (prefers-reduced-motion:reduce){@keyframes _08fdf90ef86c4706__wp-grid-drag-preview-shadow-enter{0%{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}to{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}}@keyframes _8aaeb335436989f9__wp-grid-drag-preview-scale-enter{0%{transform:scale(1)}to{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}}}@media not (prefers-reduced-motion:reduce){._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting{animation:a7ead84bfd25ff8a__wp-grid-drag-preview-shadow-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting ._4b471bf24f891d2d__drag-preview-frame__lift{animation:_234ccad5c20d49f8__wp-grid-drag-preview-scale-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}@keyframes a7ead84bfd25ff8a__wp-grid-drag-preview-shadow-exit{0%{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}to{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}}@keyframes _234ccad5c20d49f8__wp-grid-drag-preview-scale-exit{0%{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}to{transform:scale(1)}}}._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting ._4b471bf24f891d2d__drag-preview-frame__lift{transform:scale(1)}@media (prefers-reduced-motion:reduce){._48e8cd4225dcb813__drag-preview-frame{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}._4b471bf24f891d2d__drag-preview-frame__lift{transform:none}._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003);transition:none}._48e8cd4225dcb813__drag-preview-frame._66b0aefb2bc02eb9__dragPreviewFrameExiting ._4b471bf24f891d2d__drag-preview-frame__lift{transition:none}}");
+}
+var grid_default = { "grid": "_960c435c33759f46__grid", "drag-preview-frame": "_48e8cd4225dcb813__drag-preview-frame", "drag-preview-frame__lift": "_4b471bf24f891d2d__drag-preview-frame__lift", "wp-grid-drag-preview-shadow-enter": "_08fdf90ef86c4706__wp-grid-drag-preview-shadow-enter", "wp-grid-drag-preview-scale-enter": "_8aaeb335436989f9__wp-grid-drag-preview-scale-enter", "dragPreviewFrameExiting": "_66b0aefb2bc02eb9__dragPreviewFrameExiting", "wp-grid-drag-preview-shadow-exit": "a7ead84bfd25ff8a__wp-grid-drag-preview-shadow-exit", "wp-grid-drag-preview-scale-exit": "_234ccad5c20d49f8__wp-grid-drag-preview-scale-exit" };
+
+// packages/grid/src/dashboard-grid/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var dashboardDragDropAnimation = (0, import_drag_overlay_drop_animation.createDashboardDragDropAnimation)(
+  grid_default["drag-preview-frame"],
+  grid_default.dragPreviewFrameExiting
+);
+var FALLBACK_GAP_PX = 24;
+var DEFAULT_COLUMNS = 6;
+var NO_SORT_STRATEGY = () => null;
+var DashboardGrid = (0, import_element.forwardRef)(
+  function DashboardGrid2(props, ref) {
+    const {
+      layout,
+      columns,
+      children,
+      className,
+      style,
+      rowHeight = "auto",
+      minColumnWidth,
+      editMode = false,
+      onChangeLayout,
+      onPreviewLayout,
+      renderResizeHandle,
+      renderDragPreview,
+      renderGridOverlay,
+      ...divProps
+    } = props;
+    const [temporaryLayout, setTemporaryLayout] = (0, import_element.useState)();
+    const [activeId, setActiveId] = (0, import_element.useState)(null);
+    const [isResizing, setIsResizing] = (0, import_element.useState)(false);
+    const [resizeSnapPreview, setResizeSnapPreview] = (0, import_element.useState)(null);
+    const latestLayoutRef = (0, import_element.useRef)();
+    const lastReorderCursorRef = (0, import_element.useRef)(null);
+    const resizeBaselineRef = (0, import_element.useRef)(null);
+    const captureLayoutSnapshotRef = (0, import_element.useRef)(() => {
+    });
+    const childrenCacheRef = (0, import_element.useRef)(
+      /* @__PURE__ */ new Map()
+    );
+    const activeLayout = temporaryLayout ?? layout;
+    const [gridRoot, setGridRoot] = (0, import_element.useState)(
+      null
+    );
+    const [containerWidth, setContainerWidth] = (0, import_element.useState)(0);
+    const [containerHeight, setContainerHeight] = (0, import_element.useState)(0);
+    const [gapPx, setGapPx] = (0, import_element.useState)(FALLBACK_GAP_PX);
+    const resizeObserverRef = (0, import_compose.useResizeObserver)(
+      ([{ contentRect }]) => {
+        setContainerWidth(contentRect.width);
+        setContainerHeight(contentRect.height);
+      }
+    );
+    const mergedGridRef = (0, import_compose.useMergeRefs)([
+      setGridRoot,
+      resizeObserverRef,
+      ref
+    ]);
+    (0, import_element.useLayoutEffect)(() => {
+      if (!gridRoot) {
+        return;
+      }
+      const { width, height } = gridRoot.getBoundingClientRect();
+      if (width > 0) {
+        setContainerWidth(width);
+      }
+      if (height > 0) {
+        setContainerHeight(height);
+      }
+      const parsed = Number.parseFloat(
+        window.getComputedStyle(gridRoot).columnGap
+      );
+      if (Number.isFinite(parsed) && parsed > 0) {
+        setGapPx(parsed);
+      }
+    }, [gridRoot]);
+    const effectiveColumns = (0, import_element.useMemo)(() => {
+      if (!minColumnWidth) {
+        return columns ?? DEFAULT_COLUMNS;
+      }
+      const totalWidthPerColumn = minColumnWidth + gapPx;
+      const maxFit = Math.max(
+        1,
+        Math.floor((containerWidth + gapPx) / totalWidthPerColumn)
+      );
+      return columns !== void 0 ? Math.min(columns, maxFit) : maxFit;
+    }, [minColumnWidth, gapPx, containerWidth, columns]);
+    const columnWidth = (containerWidth - (effectiveColumns - 1) * gapPx) / effectiveColumns;
+    const minResizeWidthPx = (0, import_resize_snap.gridSpanToPixelSize)(
+      1,
+      1,
+      columnWidth,
+      gapPx,
+      null
+    ).widthPx;
+    const rowHeightPx = typeof rowHeight === "number" ? rowHeight : null;
+    const minResizeHeightPx = rowHeightPx === null ? void 0 : (0, import_resize_snap.gridSpanToPixelSize)(1, 1, columnWidth, gapPx, rowHeightPx).heightPx ?? void 0;
+    const layoutMap = (0, import_element.useMemo)(() => {
+      const map = /* @__PURE__ */ new Map();
+      activeLayout.forEach((item) => map.set(item.key, item));
+      return map;
+    }, [activeLayout]);
+    const layoutKeys = (0, import_element.useMemo)(
+      () => new Set(layout.map((item) => item.key)),
+      [layout]
+    );
+    const sortedItems = (0, import_element.useMemo)(
+      () => activeLayout.map((item, index) => ({ item, index })).sort(
+        (a, b) => (a.item.order ?? a.index) - (b.item.order ?? b.index)
+      ).map(({ item }) => item.key),
+      [activeLayout]
+    );
+    const items = sortedItems;
+    const resolvedItemMap = (0, import_element.useMemo)(() => {
+      const fillWidths = (0, import_resolve_fill_widths.resolveFillWidths)(
+        items,
+        layoutMap,
+        effectiveColumns
+      );
+      if (fillWidths.size === 0) {
+        return layoutMap;
+      }
+      const map = /* @__PURE__ */ new Map();
+      for (const [key, item] of layoutMap) {
+        const fillW = fillWidths.get(key);
+        map.set(
+          key,
+          fillW !== void 0 ? { ...item, width: fillW } : item
+        );
+      }
+      return map;
+    }, [items, layoutMap, effectiveColumns]);
+    const [childrenMap, actionableAreaMap, remaining, renderedByKey] = (0, import_element.useMemo)(() => {
+      const childMap = /* @__PURE__ */ new Map();
+      const actionableMap = /* @__PURE__ */ new Map();
+      const rest = [];
+      const byKey = /* @__PURE__ */ new Map();
+      import_element.Children.forEach(children, (child) => {
+        if (!(0, import_element.isValidElement)(child)) {
+          rest.push(child);
+          return;
+        }
+        const key = child.key?.toString();
+        if (!key) {
+          rest.push(child);
+          return;
+        }
+        const { actionableArea } = child.props;
+        const stripped = actionableArea !== void 0 ? (0, import_element.cloneElement)(child, {
+          actionableArea: void 0
+        }) : child;
+        byKey.set(key, stripped);
+        if (layoutKeys.has(key)) {
+          if (actionableArea !== void 0) {
+            actionableMap.set(key, actionableArea);
+          }
+          childMap.set(key, stripped);
+        } else {
+          rest.push(child);
+        }
+      });
+      return [childMap, actionableMap, rest, byKey];
+    }, [children, layoutKeys]);
+    (0, import_element.useLayoutEffect)(() => {
+      for (const [key, child] of renderedByKey) {
+        childrenCacheRef.current.set(key, child);
+      }
+    }, [renderedByKey]);
+    const sensors = (0, import_core.useSensors)(
+      (0, import_core.useSensor)(import_core.PointerSensor),
+      (0, import_core.useSensor)(import_core.KeyboardSensor, {
+        coordinateGetter: import_sortable.sortableKeyboardCoordinates
+      })
+    );
+    const handleDragStart = (0, import_compose.useEvent)((event) => {
+      setActiveId(String(event.active.id));
+      lastReorderCursorRef.current = null;
+    });
+    const handleDragCancel = (0, import_compose.useEvent)(() => {
+      setActiveId(null);
+      latestLayoutRef.current = void 0;
+      lastReorderCursorRef.current = null;
+      resizeBaselineRef.current = null;
+      setIsResizing(false);
+      setResizeSnapPreview(null);
+      setTemporaryLayout(void 0);
+    });
+    const handleDragMove = (0, import_compose.useEvent)((event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      const activeRect = active.rect.current.translated;
+      if (!activeRect) {
+        return;
+      }
+      const activeCenterX = activeRect.left + activeRect.width / 2;
+      const activeCenterY = activeRect.top + activeRect.height / 2;
+      const lastCursor = lastReorderCursorRef.current;
+      if (lastCursor) {
+        const dx = activeCenterX - lastCursor.x;
+        const dy = activeCenterY - lastCursor.y;
+        if (dx * dx + dy * dy < 100) {
+          return;
+        }
+      }
+      const overCenterX = over.rect.left + over.rect.width / 2;
+      const insertAfter = activeCenterX > overCenterX;
+      const currentIndex = items.indexOf(String(active.id));
+      const overIndex = items.indexOf(String(over.id));
+      let newIndex;
+      if (insertAfter) {
+        newIndex = currentIndex > overIndex ? overIndex + 1 : overIndex;
+      } else {
+        newIndex = currentIndex > overIndex ? overIndex : overIndex - 1;
+      }
+      newIndex = Math.max(0, Math.min(newIndex, items.length - 1));
+      if (newIndex === currentIndex) {
+        return;
+      }
+      const updatedItems = (0, import_sortable.arrayMove)(items, currentIndex, newIndex);
+      const updatedLayout = activeLayout.map((item) => ({
+        ...item,
+        order: updatedItems.indexOf(item.key)
+      }));
+      lastReorderCursorRef.current = {
+        x: activeCenterX,
+        y: activeCenterY
+      };
+      latestLayoutRef.current = updatedLayout;
+      captureLayoutSnapshotRef.current();
+      setTemporaryLayout(updatedLayout);
+      onPreviewLayout?.(updatedLayout);
+    });
+    const persistTemporaryLayout = (0, import_compose.useEvent)(() => {
+      const latest = latestLayoutRef.current;
+      latestLayoutRef.current = void 0;
+      resizeBaselineRef.current = null;
+      setIsResizing(false);
+      setResizeSnapPreview(null);
+      if (!onChangeLayout || !latest) {
+        setTemporaryLayout(void 0);
+        return;
+      }
+      onChangeLayout(latest);
+      setTemporaryLayout(void 0);
+    });
+    const handleResize = (0, import_compose.useEvent)((id, delta) => {
+      if (!editMode) {
+        return;
+      }
+      if (!isResizing) {
+        setIsResizing(true);
+      }
+      const relativeDelta = {
+        width: Math.round(delta.width / (columnWidth + gapPx)),
+        height: rowHeight === "auto" ? 0 : Math.round(delta.height / (rowHeight + gapPx))
+      };
+      if (!resizeBaselineRef.current) {
+        const baseItem = activeLayout.find(
+          (item) => item.key === id
+        );
+        const resolvedItem = resolvedItemMap.get(id);
+        let baseWidth;
+        if (baseItem?.width === "full") {
+          baseWidth = effectiveColumns;
+        } else if (baseItem?.width === "fill") {
+          baseWidth = typeof resolvedItem?.width === "number" ? resolvedItem.width : 1;
+        } else {
+          baseWidth = baseItem?.width ?? 1;
+        }
+        resizeBaselineRef.current = {
+          width: baseWidth,
+          height: baseItem?.height ?? 1
+        };
+      }
+      const baseline = resizeBaselineRef.current;
+      const newWidth = Math.max(
+        1,
+        Math.min(
+          baseline.width + relativeDelta.width,
+          effectiveColumns
+        )
+      );
+      const newHeight = Math.max(
+        1,
+        baseline.height + relativeDelta.height
+      );
+      setResizeSnapPreview({
+        id,
+        snap: (0, import_resize_snap.gridSpanToPixelSize)(
+          newWidth,
+          newHeight,
+          columnWidth,
+          gapPx,
+          rowHeightPx
+        )
+      });
+      const pendingItem = latestLayoutRef.current?.find(
+        (item) => item.key === id
+      );
+      const currentItem = pendingItem ?? activeLayout.find((item) => item.key === id);
+      if (currentItem && currentItem.width === newWidth && (currentItem.height ?? 1) === newHeight) {
+        return;
+      }
+      const updatedLayout = activeLayout.map(
+        (item) => item.key === id ? { ...item, width: newWidth, height: newHeight } : item
+      );
+      latestLayoutRef.current = updatedLayout;
+      captureLayoutSnapshotRef.current();
+      setTemporaryLayout(updatedLayout);
+      onPreviewLayout?.(updatedLayout);
+    });
+    const activeClone = activeId ? childrenMap.get(activeId) : null;
+    const DragPreview = renderDragPreview;
+    const dragOverlayContent = activeId && activeClone ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: grid_default["drag-preview-frame"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: grid_default["drag-preview-frame__lift"], children: DragPreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragPreview, { itemId: activeId, children: activeClone }) : activeClone }) }) : null;
+    const Overlay = renderGridOverlay ?? import_grid_overlay.GridOverlay;
+    const overlayRowHeight = typeof rowHeight === "number" ? rowHeight : void 0;
+    const overlayRows = (0, import_element.useMemo)(() => {
+      if (overlayRowHeight === void 0 || containerHeight <= 0) {
+        return void 0;
+      }
+      const rowTile = overlayRowHeight + gapPx;
+      return Math.max(
+        1,
+        Math.floor((containerHeight + gapPx) / rowTile)
+      );
+    }, [overlayRowHeight, containerHeight, gapPx]);
+    const gridOverlay = (0, import_element.useMemo)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Overlay,
+        {
+          columns: effectiveColumns,
+          rowHeight: overlayRowHeight,
+          rows: overlayRows,
+          isActive: editMode
+        }
+      ),
+      [
+        Overlay,
+        editMode,
+        effectiveColumns,
+        overlayRowHeight,
+        overlayRows
+      ]
+    );
+    const layoutFingerprint = (0, import_element.useMemo)(
+      () => (0, import_use_layout_shift_animation.getLayoutFingerprint)([...resolvedItemMap.values()]),
+      [resolvedItemMap]
+    );
+    const excludeLayoutAnimationKey = activeId ?? (isResizing ? resizeSnapPreview?.id : null);
+    const { captureLayoutSnapshot, getPositionsBeforeLastChange } = (0, import_use_layout_shift_animation.useLayoutShiftAnimation)({
+      container: gridRoot,
+      enabled: editMode,
+      layoutFingerprint,
+      excludeItemKey: excludeLayoutAnimationKey
+    });
+    const { exitingItems, clearExitingItem } = (0, import_use_item_exit_animation.useItemExitAnimation)({
+      container: gridRoot,
+      enabled: editMode,
+      layoutKeys,
+      getPositionsBeforeLastChange,
+      childrenCacheRef
+    });
+    const layoutAnimating = editMode;
+    (0, import_element.useLayoutEffect)(() => {
+      captureLayoutSnapshotRef.current = captureLayoutSnapshot;
+    }, [captureLayoutSnapshot]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.DndContext,
+      {
+        sensors,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        onDragMove: handleDragMove,
+        onDragEnd: () => {
+          persistTemporaryLayout();
+          lastReorderCursorRef.current = null;
+          setActiveId(null);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items, strategy: NO_SORT_STRATEGY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...divProps,
+              ref: mergedGridRef,
+              className: (0, import_clsx.default)(
+                grid_default.grid,
+                layoutAnimating && layout_shift_animation_default["layout-animating"],
+                className
+              ),
+              "data-wp-grid-dragging": activeId || void 0,
+              "data-wp-grid-resizing": isResizing || void 0,
+              style: {
+                ...style,
+                gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+                gridAutoRows: rowHeight
+              },
+              children: [
+                gridOverlay,
+                items.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_grid_item.GridItem,
+                  {
+                    item: resolvedItemMap.get(
+                      id
+                    ),
+                    maxColumns: effectiveColumns,
+                    disabled: !editMode,
+                    verticalResizable: rowHeight !== "auto",
+                    interacting: activeId !== null || isResizing,
+                    dragging: activeId !== null,
+                    onResize: handleResize,
+                    onResizeEnd: persistTemporaryLayout,
+                    resizeSnapPreview: resizeSnapPreview?.id === id ? resizeSnapPreview.snap : null,
+                    minResizeWidthPx,
+                    minResizeHeightPx,
+                    actionableArea: actionableAreaMap.get(id),
+                    renderResizeHandle,
+                    children: childrenMap.get(id)
+                  },
+                  id
+                )),
+                remaining,
+                exitingItems.map(({ key, rect, child }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_item_exit_overlay.ItemExitOverlay,
+                  {
+                    itemKey: key,
+                    rect,
+                    onAnimationEnd: () => clearExitingItem(key),
+                    children: child
+                  },
+                  `exiting-${key}`
+                ))
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { dropAnimation: dashboardDragDropAnimation, children: dragOverlayContent })
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DashboardGrid
+});
+//# sourceMappingURL=index.cjs.map