@wordpress/grid 0.1.0

package/build-module/dashboard-grid/grid-item.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dashboard-grid/grid-item.tsx", "../../../style-runtime/src/index.ts", "../../src/shared/actionable-area-slot.module.css", "../../src/dashboard-grid/grid-item.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport actionableAreaStyles from '../shared/actionable-area-slot.module.css';\nimport { GRID_ITEM_DATA_KEY } from '../shared/grid-item-key';\nimport ResizeHandle from '../shared/resize-handle';\nimport { clampResizeDelta, type ResizeSnapSize } from '../shared/resize-snap';\nimport type { ResizeDelta } from '../shared/types';\nimport type { GridItemProps } from './types';\nimport styles from './grid-item.module.css';\n\nfunction getItemCursor(\n\tdisabled: boolean,\n\tinteracting: boolean\n): React.CSSProperties[ 'cursor' ] {\n\tif ( disabled ) {\n\t\treturn 'default';\n\t}\n\n\tif ( interacting ) {\n\t\treturn undefined;\n\t}\n\n\treturn 'grab';\n}\n\nexport function GridItem( {\n\titem,\n\tmaxColumns,\n\tdisabled = false,\n\tverticalResizable = true,\n\tinteracting = false,\n\tdragging = false,\n\tchildren,\n\tactionableArea = null,\n\tonResize,\n\tonResizeEnd,\n\tresizeSnapPreview = null,\n\tminResizeWidthPx,\n\tminResizeHeightPx,\n\trenderResizeHandle,\n}: GridItemProps ) {\n\tconst [ resizeDelta, setResizeDelta ] = useState< ResizeDelta | null >(\n\t\tnull\n\t);\n\tconst [ initialContentSize, setInitialContentSize ] = useState< {\n\t\twidth: number;\n\t\theight: number;\n\t} | null >( null );\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\tconst {\n\t\tattributes,\n\t\tlisteners,\n\t\tsetNodeRef,\n\t\tsetActivatorNodeRef,\n\t\tisDragging,\n\t} = useSortable( {\n\t\tid: item.key,\n\t\tdisabled,\n\t} );\n\tconst mergedRef = useMergeRefs( [ itemRef, setNodeRef ] );\n\tconst contentMergedRef = useMergeRefs( [ contentRef ] );\n\t/*\n\t * With `<DragOverlay>` handling the cursor-following clone, the\n\t * sortable item stays put in its grid cell and acts as a\n\t * placeholder. No `transform` is applied here — applying one\n\t * would double-move the placeholder alongside the overlay.\n\t */\n\tconst style = {\n\t\tgridColumnEnd: `span ${\n\t\t\titem.width === 'full'\n\t\t\t\t? maxColumns\n\t\t\t\t: Math.min(\n\t\t\t\t\t\ttypeof item.width === 'number' ? item.width : 1,\n\t\t\t\t\t\tmaxColumns\n\t\t\t\t  )\n\t\t}`,\n\t\tgridRowEnd: `span ${ item.height || 1 }`,\n\t};\n\n\tconst isResizing = resizeDelta !== null;\n\tconst itemClassName = clsx(\n\t\tstyles.item,\n\t\tisDragging && styles[ 'is-dragging' ],\n\t\tisResizing && styles[ 'is-resizing' ]\n\t);\n\n\tconst handleResize = ( delta: ResizeDelta ) => {\n\t\tconst contentNode = contentRef.current;\n\t\tlet baselineSize = initialContentSize;\n\t\tif ( contentNode && ! baselineSize ) {\n\t\t\tconst { width, height } = contentNode.getBoundingClientRect();\n\t\t\tbaselineSize = { width, height };\n\t\t\tsetInitialContentSize( baselineSize );\n\t\t}\n\t\tlet clamped: ResizeDelta = {\n\t\t\twidth: delta.width,\n\t\t\theight: verticalResizable ? delta.height : 0,\n\t\t};\n\t\tif ( baselineSize ) {\n\t\t\tclamped = clampResizeDelta( clamped, baselineSize, {\n\t\t\t\twidth: minResizeWidthPx,\n\t\t\t\theight: verticalResizable ? minResizeHeightPx : undefined,\n\t\t\t} );\n\t\t}\n\t\tsetResizeDelta( clamped );\n\t\tonResize( item.key, clamped );\n\t};\n\n\tconst handleResizeEnd = () => {\n\t\tsetResizeDelta( null );\n\t\tsetInitialContentSize( null );\n\t\tonResizeEnd();\n\t};\n\n\tconst continuousContentStyle: React.CSSProperties | undefined =\n\t\tresizeDelta && initialContentSize\n\t\t\t? {\n\t\t\t\t\twidth: initialContentSize.width + resizeDelta.width,\n\t\t\t\t\theight: verticalResizable\n\t\t\t\t\t\t? initialContentSize.height + resizeDelta.height\n\t\t\t\t\t\t: undefined,\n\t\t\t  }\n\t\t\t: undefined;\n\n\tconst previewOverlay = resizeSnapPreview ? (\n\t\t<SnapPreviewOverlay snap={ resizeSnapPreview } />\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tref={ mergedRef }\n\t\t\tclassName={ itemClassName }\n\t\t\tstyle={ style }\n\t\t\t{ ...{ [ GRID_ITEM_DATA_KEY ]: item.key } }\n\t\t\tdata-wp-grid-item-resizing={ isResizing || undefined }\n\t\t>\n\t\t\t{ actionableArea ? (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ actionableAreaStyles[ 'actionable-area-slot' ] }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ { display: 'contents' } }\n\t\t\t\t\t\t{ ...( dragging ? { inert: '' } : {} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ actionableArea }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null }\n\n\t\t\t<div\n\t\t\t\tref={ setActivatorNodeRef }\n\t\t\t\t{ ...attributes }\n\t\t\t\t{ ...listeners }\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tcursor: getItemCursor( disabled, interacting ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ contentMergedRef }\n\t\t\t\t\tclassName={ styles[ 'item-content' ] }\n\t\t\t\t\tstyle={ continuousContentStyle }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t\t{ ! disabled && (\n\t\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\t\titemId={ item.key }\n\t\t\t\t\t\t\tverticalResizable={ verticalResizable }\n\t\t\t\t\t\t\tonResize={ handleResize }\n\t\t\t\t\t\t\tonResizeEnd={ handleResizeEnd }\n\t\t\t\t\t\t\trenderResizeHandle={ renderResizeHandle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t{ previewOverlay }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction SnapPreviewOverlay( { snap }: { snap: ResizeSnapSize } ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ styles[ 'preview-overlay' ] }\n\t\t\tstyle={ {\n\t\t\t\twidth: snap.widthPx,\n\t\t\t\theight: snap.heightPx ?? '100%',\n\t\t\t} }\n\t\t/>\n\t);\n}\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"ac1094954c\", \"._1c54fe8165d3023e__actionable-area-slot{opacity:1}@media (prefers-reduced-motion:no-preference){._1c54fe8165d3023e__actionable-area-slot{transition:opacity var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1))}}[data-wp-grid-resizing] ._1c54fe8165d3023e__actionable-area-slot{opacity:0;pointer-events:none}\");\n}\nexport default {\"actionable-area-slot\":\"_1c54fe8165d3023e__actionable-area-slot\"};\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"62860ded21\", \"._5d1abcb332a18701__item{position:relative}._54de57c12d3ce67e__item-content{height:100%;position:relative}._3e086aa073b9bbd9__is-resizing{overflow:visible;z-index:1}._3e086aa073b9bbd9__is-resizing ._54de57c12d3ce67e__item-content{overflow:visible;position:relative;z-index:2}._81d4e1a6c979f1e4__is-dragging{pointer-events:none}[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{border-radius:var(--wp-grid-placeholder-radius,0)}@media not (prefers-reduced-motion:reduce){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{animation:_0447be8a7068a873__wp-grid-item-placeholder-in 0ms linear var(--wpds-motion-duration-sm,.1s) forwards;opacity:1;outline-color:transparent;outline-style:var(--wp-grid-placeholder-outline-style,dashed);outline-width:0}@keyframes _0447be8a7068a873__wp-grid-item-placeholder-in{to{opacity:var(--wp-grid-placeholder-opacity,.4);outline-color:var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)));outline-width:var(--wpds-border-width-sm,2px)}}}@media (prefers-reduced-motion:reduce){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{opacity:var(--wp-grid-placeholder-opacity,.4);outline:var(--wpds-border-width-sm,2px) var(--wp-grid-placeholder-outline-style,dashed) var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)))}}@media (forced-colors:active){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{--wp-grid-placeholder-outline-color:Highlight}}._2028fc095dbc5cb2__preview-overlay{background:transparent;border:var(--wpds-border-width-sm,2px) var(--wp-grid-resize-preview-outline-style,solid) var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)));border-radius:var(--wp-grid-placeholder-radius,0);box-sizing:border-box;inset-inline-start:0;pointer-events:none;position:absolute;top:0;z-index:0}@media (forced-colors:active){._2028fc095dbc5cb2__preview-overlay{border-color:Highlight}}\");\n}\nexport default {\"item\":\"_5d1abcb332a18701__item\",\"item-content\":\"_54de57c12d3ce67e__item-content\",\"is-resizing\":\"_3e086aa073b9bbd9__is-resizing\",\"is-dragging\":\"_81d4e1a6c979f1e4__is-dragging\",\"wp-grid-item-placeholder-in\":\"_0447be8a7068a873__wp-grid-item-placeholder-in\",\"preview-overlay\":\"_2028fc095dbc5cb2__preview-overlay\"};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/dashboard-grid/index.mjs

@@ -0,0 +1,579 @@
+// packages/grid/src/dashboard-grid/index.tsx
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates
+} from "@dnd-kit/sortable";
+import clsx from "clsx";
+import { useResizeObserver, useEvent, useMergeRefs } from "@wordpress/compose";
+import {
+  forwardRef,
+  useMemo,
+  Children,
+  cloneElement,
+  isValidElement,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "@wordpress/element";
+import { GridItem } from "./grid-item.mjs";
+import { GridOverlay } from "../shared/grid-overlay.mjs";
+import { gridSpanToPixelSize } from "../shared/resize-snap.mjs";
+
+// 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
+import { ItemExitOverlay } from "../shared/item-exit-overlay.mjs";
+import {
+  getLayoutFingerprint,
+  useLayoutShiftAnimation
+} from "../shared/use-layout-shift-animation.mjs";
+import { useItemExitAnimation } from "../shared/use-item-exit-animation.mjs";
+import { resolveFillWidths } from "./resolve-fill-widths.mjs";
+import { createDashboardDragDropAnimation } from "../shared/drag-overlay-drop-animation.mjs";
+
+// 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
+import { jsx, jsxs } from "react/jsx-runtime";
+var dashboardDragDropAnimation = 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 = 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] = useState();
+    const [activeId, setActiveId] = useState(null);
+    const [isResizing, setIsResizing] = useState(false);
+    const [resizeSnapPreview, setResizeSnapPreview] = useState(null);
+    const latestLayoutRef = useRef();
+    const lastReorderCursorRef = useRef(null);
+    const resizeBaselineRef = useRef(null);
+    const captureLayoutSnapshotRef = useRef(() => {
+    });
+    const childrenCacheRef = useRef(
+      /* @__PURE__ */ new Map()
+    );
+    const activeLayout = temporaryLayout ?? layout;
+    const [gridRoot, setGridRoot] = useState(
+      null
+    );
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [gapPx, setGapPx] = useState(FALLBACK_GAP_PX);
+    const resizeObserverRef = useResizeObserver(
+      ([{ contentRect }]) => {
+        setContainerWidth(contentRect.width);
+        setContainerHeight(contentRect.height);
+      }
+    );
+    const mergedGridRef = useMergeRefs([
+      setGridRoot,
+      resizeObserverRef,
+      ref
+    ]);
+    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 = 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 = gridSpanToPixelSize(
+      1,
+      1,
+      columnWidth,
+      gapPx,
+      null
+    ).widthPx;
+    const rowHeightPx = typeof rowHeight === "number" ? rowHeight : null;
+    const minResizeHeightPx = rowHeightPx === null ? void 0 : gridSpanToPixelSize(1, 1, columnWidth, gapPx, rowHeightPx).heightPx ?? void 0;
+    const layoutMap = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      activeLayout.forEach((item) => map.set(item.key, item));
+      return map;
+    }, [activeLayout]);
+    const layoutKeys = useMemo(
+      () => new Set(layout.map((item) => item.key)),
+      [layout]
+    );
+    const sortedItems = 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 = useMemo(() => {
+      const fillWidths = 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] = useMemo(() => {
+      const childMap = /* @__PURE__ */ new Map();
+      const actionableMap = /* @__PURE__ */ new Map();
+      const rest = [];
+      const byKey = /* @__PURE__ */ new Map();
+      Children.forEach(children, (child) => {
+        if (!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 ? 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]);
+    useLayoutEffect(() => {
+      for (const [key, child] of renderedByKey) {
+        childrenCacheRef.current.set(key, child);
+      }
+    }, [renderedByKey]);
+    const sensors = useSensors(
+      useSensor(PointerSensor),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+      })
+    );
+    const handleDragStart = useEvent((event) => {
+      setActiveId(String(event.active.id));
+      lastReorderCursorRef.current = null;
+    });
+    const handleDragCancel = useEvent(() => {
+      setActiveId(null);
+      latestLayoutRef.current = void 0;
+      lastReorderCursorRef.current = null;
+      resizeBaselineRef.current = null;
+      setIsResizing(false);
+      setResizeSnapPreview(null);
+      setTemporaryLayout(void 0);
+    });
+    const handleDragMove = 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 = 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 = 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 = 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: 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__ */ jsx("div", { className: grid_default["drag-preview-frame"], children: /* @__PURE__ */ jsx("div", { className: grid_default["drag-preview-frame__lift"], children: DragPreview ? /* @__PURE__ */ jsx(DragPreview, { itemId: activeId, children: activeClone }) : activeClone }) }) : null;
+    const Overlay = renderGridOverlay ?? GridOverlay;
+    const overlayRowHeight = typeof rowHeight === "number" ? rowHeight : void 0;
+    const overlayRows = 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 = useMemo(
+      () => /* @__PURE__ */ jsx(
+        Overlay,
+        {
+          columns: effectiveColumns,
+          rowHeight: overlayRowHeight,
+          rows: overlayRows,
+          isActive: editMode
+        }
+      ),
+      [
+        Overlay,
+        editMode,
+        effectiveColumns,
+        overlayRowHeight,
+        overlayRows
+      ]
+    );
+    const layoutFingerprint = useMemo(
+      () => getLayoutFingerprint([...resolvedItemMap.values()]),
+      [resolvedItemMap]
+    );
+    const excludeLayoutAnimationKey = activeId ?? (isResizing ? resizeSnapPreview?.id : null);
+    const { captureLayoutSnapshot, getPositionsBeforeLastChange } = useLayoutShiftAnimation({
+      container: gridRoot,
+      enabled: editMode,
+      layoutFingerprint,
+      excludeItemKey: excludeLayoutAnimationKey
+    });
+    const { exitingItems, clearExitingItem } = useItemExitAnimation({
+      container: gridRoot,
+      enabled: editMode,
+      layoutKeys,
+      getPositionsBeforeLastChange,
+      childrenCacheRef
+    });
+    const layoutAnimating = editMode;
+    useLayoutEffect(() => {
+      captureLayoutSnapshotRef.current = captureLayoutSnapshot;
+    }, [captureLayoutSnapshot]);
+    return /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        onDragMove: handleDragMove,
+        onDragEnd: () => {
+          persistTemporaryLayout();
+          lastReorderCursorRef.current = null;
+          setActiveId(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(SortableContext, { items, strategy: NO_SORT_STRATEGY, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...divProps,
+              ref: mergedGridRef,
+              className: clsx(
+                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__ */ jsx(
+                  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__ */ jsx(
+                  ItemExitOverlay,
+                  {
+                    itemKey: key,
+                    rect,
+                    onAnimationEnd: () => clearExitingItem(key),
+                    children: child
+                  },
+                  `exiting-${key}`
+                ))
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dashboardDragDropAnimation, children: dragOverlayContent })
+        ]
+      }
+    );
+  }
+);
+export {
+  DashboardGrid
+};
+//# sourceMappingURL=index.mjs.map