@bsuite/page-builder 1.0.3 → 1.0.4

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;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,CA4pBpD"}

package/dist/usePageGridLayout.js

@@ -184,13 +184,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,12 +424,22 @@ 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;
@@ -448,12 +469,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 +498,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 +519,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 +539,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 +556,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 +569,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.4",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",