@bsuite/page-builder 2.0.0 → 2.1.0

package/dist/CanvasCard.d.ts

@@ -35,6 +35,34 @@ export interface CanvasCardProps {
      * and was swept. Do not reintroduce it on a plain card or table.
      */
     autoHeight?: boolean;
+    /**
+     * Whether the GRID ITEM paints a card around this slot — border, radius,
+     * background, shadow. Threaded through to {@link GridLayoutItem.chrome} by
+     * `buildCanvasCardLayout`, and per-item always beats the page-level
+     * `itemChrome` prop in either direction.
+     *
+     * Leave it undefined and the app's `itemChrome` decides. Say `chrome={false}`
+     * on a slot whose content is NOT a card — a marketing section, a page
+     * heading, a chart that supplies its own surface — in an app that has set
+     * `itemChrome` true; say `chrome` on a BARE slot in an app that has not.
+     *
+     * WHY IT EXISTS AT ALL (2.1.0). 2.0.0 inverted the grid-item chrome default
+     * and offered `GridLayoutItem.chrome` as the per-slot escape hatch. That
+     * hatch was real for the handful of pages that hand-author a layout array,
+     * and UNREACHABLE for the ~1,700 CanvasCard usages that are how BSuite pages
+     * are actually written: `CanvasCardProps` did not declare the prop and
+     * `buildCanvasCardLayout` destructured a fixed set of fields, so a `chrome`
+     * written on a CanvasCard was dropped before it could reach a layout item.
+     * crm7's 2.0.0 adoption shipped a comment promising the opt-out and zero
+     * call sites able to use it. Declaring it here is what makes the promise
+     * true.
+     *
+     * Unlike `autoHeight`, this is not a hint the grid may override: a slot that
+     * says false is never framed. It also survives a drag — see the `chrome`
+     * restore in `stripAutoHeightRows`, which exists because react-grid-layout
+     * does not round-trip custom item props.
+     */
+    chrome?: boolean;
     /** Card body — typically a single card or page-header element. */
     children: ReactNode;
 }

package/dist/CanvasCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasCard.d.ts","sourceRoot":"","sources":["../src/CanvasCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC3B,qEAAqE;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC9B,4FAA4F;IAC5F,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;OAgBG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAExD;yBAFe,UAAU"}
+{"version":3,"file":"CanvasCard.d.ts","sourceRoot":"","sources":["../src/CanvasCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,iFAAiF;IACjF,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC3B,qEAAqE;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC9B,4FAA4F;IAC5F,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;OAgBG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAExD;yBAFe,UAAU"}

package/dist/canvasCardLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasCardLayout.d.ts","sourceRoot":"","sources":["../src/canvasCardLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,GACd,IAAI,IAAI,YAAY,CAAC,eAAe,CAAC,CAKvC;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAQpD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG;IACpD,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAqBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAI,EAAE,GAAG,SAAsB,UAE7E;AAED,MAAM,WAAW,sBAAsB;IACrC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,yEAAyE;IACzE,OAAO,EAAE,WAAW,CAAC;IACrB,+EAA+E;IAC/E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,SAAS,EACnB,OAAO,GAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,GACtC,sBAAsB,CA2CxB"}
+{"version":3,"file":"canvasCardLayout.d.ts","sourceRoot":"","sources":["../src/canvasCardLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,GACd,IAAI,IAAI,YAAY,CAAC,eAAe,CAAC,CAKvC;AAQD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAQpD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG;IACpD,KAAK,EAAE,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAqBA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAI,EAAE,GAAG,SAAsB,UAE7E;AAED,MAAM,WAAW,sBAAsB;IACrC,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,yEAAyE;IACzE,OAAO,EAAE,WAAW,CAAC;IACrB,+EAA+E;IAC/E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE,SAAS,EACnB,OAAO,GAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,GACtC,sBAAsB,CAsDxB"}

package/dist/canvasCardLayout.js

@@ -115,7 +115,7 @@ export function buildCanvasCardLayout(children, options = {}) {
     for (const child of cards) {
         // autoHeight defaults to TRUE — cards track measured content height unless
         // a card explicitly opts out for a virtualized list. See CanvasCardProps.
-        const { cardKey, h = 6, minH = 2, minW = 4, autoHeight = true, children: body, } = child.props;
+        const { cardKey, h = 6, minH = 2, minW = 4, autoHeight = true, chrome, children: body, } = child.props;
         const normalizedMinW = clampColumns(minW);
         const width = clampColumns(child.props.w ?? defaultWidth, normalizedMinW);
         if (x + width > CANVAS_GRID_COLUMNS) {
@@ -133,6 +133,16 @@ export function buildCanvasCardLayout(children, options = {}) {
             minW: normalizedMinW,
             minH,
             ...(autoHeight ? { autoHeight: true } : {}),
+            // `chrome` is THREE-VALUED and only two of those values are the card's
+            // own: true and false both have to reach the layout item, and undefined
+            // has to stay absent so `layoutItem.chrome ?? itemChrome` can fall
+            // through to the app default. Writing `chrome: chrome` unconditionally
+            // would put an explicit `undefined` on every item, which is still absent
+            // to `??` but is NOT absent to a structural comparison — and
+            // `stripAutoHeightRows` compares items across a gesture. Spreading only
+            // when the author said something keeps the item shape identical to what
+            // 2.0.0 produced for the 1,729 cards that say nothing.
+            ...(chrome === undefined ? {} : { chrome }),
         });
         x += width;
         rowHeight = Math.max(rowHeight, h);

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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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,CA2sBpD"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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,CAsuBpD"}

package/dist/usePageGridLayout.js

@@ -330,8 +330,32 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
             const baseByKey = new Map(baseItems.map((item) => [item.i, item]));
             result[bp] = (layouts[bp] ?? []).map((item) => {
                 const baseItem = baseByKey.get(item.i);
+                /**
+                 * Carry `chrome` back onto EVERY item, autoHeight or not.
+                 *
+                 * react-grid-layout hands `onLayoutChange` its own item objects, which
+                 * carry only the fields it models (`i/x/y/w/h/minW/minH/…`). Every
+                 * custom field is gone. The pre-existing `autoHeight`/`hUserSet`
+                 * restore below is the same mechanism — it just lived inside the
+                 * `autoHeight` branch, so it only ever protected autoHeight items.
+                 *
+                 * `chrome` cannot live in that branch. It is meaningful on items that
+                 * are NOT autoHeight, and losing it is not a cosmetic regression that
+                 * heals on reload: `rawLayouts` prefers a saved item over the authored
+                 * default for every key it already has, so the first drag on a page
+                 * writes a chrome-less layout to user_preferences and the slot falls
+                 * back to the app's `itemChrome` permanently, for that user only. A
+                 * marketing page deliberately set frameless would silently re-frame
+                 * itself the first time someone nudged a card, and nothing would ever
+                 * put it back.
+                 *
+                 * Three-valued on purpose: `undefined` must stay ABSENT so
+                 * `layoutItem.chrome ?? itemChrome` still falls through to the app
+                 * default. Only an explicit true/false is restored.
+                 */
+                const withChrome = (next) => baseItem?.chrome === undefined ? next : { ...next, chrome: baseItem.chrome };
                 if (!baseItem?.autoHeight)
-                    return item;
+                    return withChrome(item);
                 const measuredRows = measured[item.i];
                 // MUST mirror `activeLayouts` in PageGridLayout.tsx exactly, including
                 // its `hUserSet` test. This predicts what the grid was RENDERED with;
@@ -350,25 +374,25 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
                     // for the same reason `autoHeight` is: react-grid-layout does not
                     // round-trip custom item props, so anything not restored here is
                     // silently dropped on the next commit.
-                    return {
+                    return withChrome({
                         ...item,
                         autoHeight: true,
                         h: baseItem.h,
                         minH: baseItem.minH,
                         ...(baseItem.hUserSet ? { hUserSet: true } : {}),
-                    };
+                    });
                 }
                 // A deliberate resize (bigger or smaller than the base) — keep it,
                 // still floored by the measured content height. This is the only
                 // moment in the system where a height is known to be a CHOICE rather
                 // than an authored seed, so it is where that fact gets recorded.
-                return {
+                return withChrome({
                     ...item,
                     autoHeight: true,
                     hUserSet: true,
                     h: measuredRows === undefined ? item.h : Math.max(item.h, measuredRows),
                     minH: measuredRows ?? baseItem.minH,
-                };
+                });
             });
         }
         return result;

package/package.json

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