@bsuite/page-builder 1.0.3 → 1.0.5

package/dist/usePageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAGV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,cAAc,EACd,WAAgB,EAChB,aAAiB,EACjB,WAAkB,EAClB,gBAA6C,EAC7C,iBAA4C,EAC5C,iBAAiB,GAClB,EAAE,wBAAwB,GAAG,uBAAuB,CAwnBpD"}
+{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAGV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AA6BD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,cAAc,EACd,WAAgB,EAChB,aAAiB,EACjB,WAAkB,EAClB,gBAA6C,EAC7C,iBAA4C,EAC5C,iBAAiB,GAClB,EAAE,wBAAwB,GAAG,uBAAuB,CAirBpD"}

package/dist/usePageGridLayout.js

@@ -55,6 +55,33 @@ export const PACKAGE_LAYOUT_EPOCH = 1000;
  * opts out with an explicit `autoHeight: false`.
  */
 const DEFAULT_ITEM_AUTO_HEIGHT = true;
+/**
+ * Do two layout SETS describe the same arrangement, at every breakpoint?
+ *
+ * Compares only the five fields that place an item. Anything else react-grid-layout
+ * attaches (`moved`, `static`, `isDraggable`, measured heights) is noise here, and
+ * comparing it would make every reflow look like a change.
+ *
+ * EVERY breakpoint, not just `lg`. A gesture made while the canvas is at `md`
+ * leaves `lg` untouched, so an `lg`-only comparison reads that real gesture as a
+ * reflow and silently drops it. That is not hypothetical — it broke the D-75
+ * "folds a gesture made at md back onto lg" test the moment the comparison was
+ * introduced.
+ */
+function sameArrangement(a, b) {
+    if (!a || !b)
+        return false;
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    const fingerprint = (items) => (items ?? [])
+        .map((i) => `${i.i}:${i.x}:${i.y}:${i.w}:${i.h}`)
+        .sort()
+        .join('|');
+    for (const k of keys) {
+        if (fingerprint(a[k]) !== fingerprint(b[k]))
+            return false;
+    }
+    return true;
+}
 export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, layoutVersion = 1, canEditPage = true, editorEventNames = DEFAULT_EDITOR_EVENT_NAMES, preferenceAdapter = defaultPreferenceAdapter, defaultAutoHeight, }) {
     const effectiveLayoutVersion = layoutVersion + PACKAGE_LAYOUT_EPOCH;
     const containerRef = useRef(null);
@@ -184,13 +211,24 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         }
         return resolved;
     }, [rawLayouts, baseCols, layoutCols, defaultAutoHeight]);
-    useEffect(() => {
-        if (baseCols !== layoutCols) {
-            const rescaled = rescaleLayout(rawLayouts, baseCols, layoutCols);
-            setSavedLayout(rescaled);
-            setBaseCols(layoutCols);
-        }
-    }, [baseCols, layoutCols, rawLayouts, setBaseCols, setSavedLayout]);
+    /*
+     * THERE IS DELIBERATELY NO EFFECT HERE.
+     *
+     * This used to rescale the stored layout to the new column count and write it
+     * back, which made a column change DESTRUCTIVE and unrecoverable. Measured on
+     * `rescaleLayout` directly: an 11 -> 2 -> 11 round trip takes
+     *
+     *   a(w4 @x0) b(w3 @x4) c(w4 @x7) / d(w6 @x0) e(w5 @x6)
+     *
+     * to five items of w6 stacked one per row at x0. Everything narrows to the
+     * one-column minimum on the way down, the row-packer puts one item per row,
+     * and coming back up cannot recover an arrangement that no longer exists.
+     * That is what flattened the operator's dashboard.
+     *
+     * `currentLayouts` above already derives the DISPLAY at `layoutCols` from the
+     * authored layout at `baseCols`. Leaving storage alone makes the column
+     * control a view, and the round trip exact.
+     */
     const activeCols = useMemo(() => ({ lg: layoutCols, md: layoutCols, sm: layoutCols, xs: layoutCols, xxs: layoutCols }), [layoutCols]);
     /**
      * The compactor handed to react-grid-layout — the SAME one in edit mode and
@@ -413,15 +451,45 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         }
         return next;
     }, []);
+    /**
+     * Persist a layout the USER authored, and re-base the column count to the one
+     * they authored it at.
+     *
+     * Re-basing belongs here and ONLY here. A column-count change is a view
+     * operation and must not touch storage — see `handleColumnChange`. An edit is
+     * the one moment the stored arrangement and the stored column count are known
+     * to agree, so it is the one moment `baseCols` may move.
+     */
     const commitLayout = useCallback((layouts) => {
         const canonical = canonicaliseLayoutForPersist(layouts);
         if (!canonical)
             return;
         setSavedLayout(stripAutoHeightRows(canonical));
-    }, [canonicaliseLayoutForPersist, setSavedLayout, stripAutoHeightRows]);
+        setBaseCols(layoutCols);
+    }, [canonicaliseLayoutForPersist, layoutCols, setBaseCols, setSavedLayout, stripAutoHeightRows]);
     const onLayoutChange = useCallback((_layout, layouts) => {
         if (!isEditing)
             return;
+        /*
+         * A COLUMN-COUNT CHANGE MAKES REACT-GRID-LAYOUT REFLOW AND EMIT HERE, and
+         * that emission is not a user gesture. Committing it copies the rescaled
+         * DISPLAY back over the authored layout — which is the data loss this
+         * whole path exists to prevent, arriving through the back door.
+         *
+         * Removing the writes from `handleColumnChange` was not enough, and the
+         * unit tests did not catch it because they call the handler directly with
+         * no grid attached. Driving the deployed app is what found it: the
+         * persisted widths still marched 2,2,2 -> 4,4,4 -> 1,1,1 with the
+         * handler already inert.
+         *
+         * A reflow emits exactly `currentLayouts`, because that is what was just
+         * rendered. Any real gesture differs from it — and a gesture that does
+         * NOT differ has nothing to commit anyway, so this cannot swallow one.
+         * Identified by comparison rather than by a flag, so it needs no event
+         * ordering to be correct.
+         */
+        if (sameArrangement(layouts, currentLayouts))
+            return;
         pendingLayoutRef.current = layouts;
         if (layoutCommitFrameRef.current !== null)
             return;
@@ -438,7 +506,7 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
                 commitLayout(pending);
             }
         });
-    }, [commitLayout, isEditing]);
+    }, [commitLayout, currentLayouts, isEditing]);
     useEffect(() => {
         return () => {
             if (layoutCommitFrameRef.current !== null &&
@@ -448,12 +516,18 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             }
         };
     }, []);
+    /**
+     * Change how many columns the canvas is DISPLAYED at.
+     *
+     * This writes nothing to storage. `currentLayouts` rescales the authored
+     * layout for display on every render, so switching 11 -> 2 -> 11 returns the
+     * user to exactly what they authored. The previous version persisted the
+     * rescale, which destroyed the arrangement at the narrow end and offered no
+     * undo. Storage moves only when the user actually edits — see `commitLayout`.
+     */
     const handleColumnChange = useCallback((newCols) => {
-        const rescaled = rescaleLayout(currentLayouts, layoutCols, newCols);
-        setSavedLayout(rescaled);
         setLayoutCols(newCols);
-        setBaseCols(newCols);
-    }, [currentLayouts, layoutCols, setBaseCols, setLayoutCols, setSavedLayout]);
+    }, [setLayoutCols]);
     /**
      * Build the object handed to the preference adapter from a new `lg` array.
      *
@@ -471,6 +545,11 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
         }
         return next;
     }, [currentLayouts]);
+    /** Persist a bare `lg` item list from a mutator, re-basing the same way. */
+    const commitItems = useCallback((items) => {
+        setSavedLayout(layoutsWithLg(items));
+        setBaseCols(layoutCols);
+    }, [layoutCols, layoutsWithLg, setBaseCols, setSavedLayout]);
     const handleCompact = useCallback(() => {
         if (!currentLayouts.lg)
             return;
@@ -487,8 +566,8 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             placed.push(compacted);
             return compacted;
         });
-        startTransition(() => setSavedLayout(layoutsWithLg(result)));
-    }, [currentLayouts, layoutsWithLg, setSavedLayout]);
+        startTransition(() => commitItems(result));
+    }, [currentLayouts, commitItems]);
     const handleReset = useCallback(() => {
         startTransition(() => {
             setSavedLayout(defaultLayouts);
@@ -507,7 +586,7 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             minW: initialSize?.minW,
             minH: initialSize?.minH,
         };
-        startTransition(() => setSavedLayout(layoutsWithLg([...(currentLayouts.lg ?? []), newItem])));
+        startTransition(() => commitItems([...(currentLayouts.lg ?? []), newItem]));
     }, [currentLayouts, layoutCols, layoutsWithLg, setSavedLayout]);
     const moveWidget = useCallback((widgetKey, direction) => {
         const items = [...(currentLayouts.lg ?? [])];
@@ -524,7 +603,7 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             moved,
             ...withoutMoved.slice(targetIndex),
         ];
-        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+        startTransition(() => commitItems(nextItems));
     }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     const setWidgetLocked = useCallback((widgetKey, locked) => {
         const nextItems = (currentLayouts.lg ?? []).map((item) => {
@@ -537,11 +616,11 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
                 isResizable: !locked,
             };
         });
-        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+        startTransition(() => commitItems(nextItems));
     }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     const removeWidget = useCallback((widgetKey) => {
         const nextItems = (currentLayouts.lg ?? []).filter((item) => item.i !== widgetKey);
-        startTransition(() => setSavedLayout(layoutsWithLg(nextItems)));
+        startTransition(() => commitItems(nextItems));
     }, [currentLayouts, layoutsWithLg, setSavedLayout]);
     /**
      * Measured auto-height overrides (widgetKey -> rows). DERIVED, in-memory-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",