@bsuite/page-builder 2.8.0-next.0 → 2.8.0

package/dist/PageGridLayout.d.ts

@@ -7,5 +7,14 @@ export declare const PAGE_GRID_SAVE_EVENT = "bsuite-page-grid-save";
 export interface PageGridSaveEventDetail {
     pageKey: string;
 }
+/**
+ * True when a chrome-on surface's content brings no inset of its own.
+ *
+ * Walk down pure wrappers (no padding, exactly one element child) to the
+ * first element that does layout work, then call it bare only if it has no
+ * left and no top padding. A slot is never bare while anything inside it is a
+ * Card or a PageHeader. The in-edit label strip is skipped, not measured.
+ */
+export declare function hasBareContent(surface: HTMLElement): boolean;
 export declare function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, isResizable, resizeHandles, tenantId, defaultAutoHeight, layoutMigrations, itemChrome, addEntityWidgetEventNames, createEntityWidget, onRegisterEntityWidget, relationshipCatalog, addRelationshipWidgetEventNames, createRelationshipWidget, onRegisterRelationshipWidget, onRelationshipWidgetRejected, }: PageGridLayoutProps): React.JSX.Element;
 //# sourceMappingURL=PageGridLayout.d.ts.map

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAE7F,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAC5D,MAAM,WAAW,uBAAuB;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAmsB5D,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAKhB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAoqCrB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AAE7F,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAC5D,MAAM,WAAW,uBAAuB;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAyR5D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAoB5D;AAscD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAKhB,UAAkB,EAClB,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACnB,+BAA6E,EAC7E,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,GAC7B,EAAE,mBAAmB,qBAoqCrB"}

package/dist/PageGridLayout.js

@@ -169,8 +169,42 @@ function warnOnceAboutCollapsedContent(el) {
         + '(an aspect ratio, a px/rem height, or min-height), or pass autoHeight={false} on '
         + 'this card so it renders into the constrained scrollable wrapper instead.');
 }
-/** Inset for a chrome-on surface whose content declares no surface of its own. */
-const CHROME_BARE_CONTENT_INSET = '[&:not(:has([data-slot=card])):not(:has([data-slot=page-header]))]:p-6 md:[&:not(:has([data-slot=card])):not(:has([data-slot=page-header]))]:p-7';
+/** Content elements that declare a surface, and therefore an inset, of their own. */
+const SELF_SURFACED = '[data-slot="card"], [data-slot="page-header"]';
+/**
+ * True when a chrome-on surface's content brings no inset of its own.
+ *
+ * Walk down pure wrappers (no padding, exactly one element child) to the
+ * first element that does layout work, then call it bare only if it has no
+ * left and no top padding. A slot is never bare while anything inside it is a
+ * Card or a PageHeader. The in-edit label strip is skipped, not measured.
+ */
+export function hasBareContent(surface) {
+    if (surface.querySelector(SELF_SURFACED))
+        return false;
+    const root = surface.querySelector('[data-slot="grid-item-body"]') ?? surface;
+    const firstContent = (el) => {
+        for (const child of Array.from(el.children)) {
+            if (child.getAttribute('data-slot') === 'grid-item-editor-chrome')
+                continue;
+            // The autoHeight measure wrapper is structure, not content.
+            if (child.classList.contains('flow-root') && el === root)
+                return firstContent(child);
+            return child;
+        }
+        return null;
+    };
+    let el = firstContent(root);
+    if (!el)
+        return false;
+    const padded = (node) => {
+        const cs = getComputedStyle(node);
+        return (Number.parseFloat(cs.paddingLeft) || 0) > 0 || (Number.parseFloat(cs.paddingTop) || 0) > 0;
+    };
+    while (!padded(el) && el.children.length === 1)
+        el = el.children[0];
+    return !padded(el);
+}
 const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, isEditing, label, pageKey, onHide, editingPaused = false, autoHeight, onAutoHeightChange, chrome = false, cardStyleVars, children: injectedChildren, className: injectedClassName, style: injectedStyle, ...rest }, ref) {
     // Auto-height measurement (blueprint amendment A1). `measureRef` wraps
     // `content` with NO height constraint of its own — its parent has
@@ -196,6 +230,41 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     const scopedContent = (_jsx(ElementScopeProvider, { scope: { pageKey, cardKey: id, cardLabel: label, isEditing }, children: _jsx(CardPaddingBoundary, { padding: cardPadding, children: content }) }));
     const measureRef = useRef(null);
     const surfaceRef = useRef(null);
+    /**
+     * Does this chrome-on slot hold content that brings no inset of its own?
+     * (crm7#2734). The chrome surface paints a border and no padding, so a bare
+     * filter bar or hand-rolled header sat on the border. A blanket inset is
+     * wrong twice over: most slots nest their own Card, and many widgets pad
+     * themselves (`p-6`) without declaring any marker. The first release used
+     * a CSS `:has()` guard and double-padded exactly those widgets, which CSS
+     * cannot see. So the decision is MEASURED: see `hasBareContent`.
+     */
+    const [bareContent, setBareContent] = useState(false);
+    useLayoutEffect(() => {
+        const surface = surfaceRef.current;
+        if (!chrome || !surface) {
+            setBareContent(false);
+            return;
+        }
+        const detect = () => setBareContent(hasBareContent(surface));
+        detect();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        let frame = null;
+        const schedule = typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function'
+            ? window.requestAnimationFrame.bind(window)
+            : (cb) => setTimeout(cb, 0);
+        const mo = new MutationObserver(() => {
+            if (frame !== null)
+                return;
+            frame = schedule(() => {
+                frame = null;
+                detect();
+            });
+        });
+        mo.observe(surface, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'data-slot', 'style'] });
+        return () => mo.disconnect();
+    }, [chrome]);
     const lastReportedRowsRef = useRef(null);
     const measureRafRef = useRef(null);
     /**
@@ -274,7 +343,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
             warnOnceAboutCollapsedContent(el);
         // Re-measure when edit chrome mounts/unmounts so the strip is in the
         // row count in edit mode and gone again on lossless return.
-    }, [autoHeight, onAutoHeightChange, reportRows, isEditing, cardStyleVars]);
+    }, [autoHeight, onAutoHeightChange, reportRows, isEditing, cardStyleVars, bareContent]);
     useEffect(() => {
         if (!autoHeight || !onAutoHeightChange)
             return;
@@ -326,7 +395,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     const outerClass = cn('relative group overflow-visible', isEditing && 'drag-handle', 
     // Paused editing (bsuite#3277) cannot move a card, so it must not promise to.
     isEditing && !editingPaused && 'cursor-move', injectedClassName);
-    return (_jsxs("div", { ref: ref, className: outerClass, style: injectedStyle, ...rest, children: [_jsxs("div", { className: "h-full w-full relative", children: [isEditing && (_jsx("div", { className: "absolute inset-0 z-10 pointer-events-none rounded-3xl border-2 border-transparent group-hover:border-primary/50 transition-colors bg-primary/5" })), _jsx("div", { "data-slot": "grid-item-surface", "data-chrome": chrome ? 'on' : 'off', "data-grid-slot-key": id, ref: surfaceRef, "data-card-padding": !chrome && cardStyleVars && '--card-padding' in cardStyleVars ? '' : undefined, className: chrome
+    return (_jsxs("div", { ref: ref, className: outerClass, style: injectedStyle, ...rest, children: [_jsxs("div", { className: "h-full w-full relative", children: [isEditing && (_jsx("div", { className: "absolute inset-0 z-10 pointer-events-none rounded-3xl border-2 border-transparent group-hover:border-primary/50 transition-colors bg-primary/5" })), _jsx("div", { "data-slot": "grid-item-surface", "data-chrome": chrome ? 'on' : 'off', "data-bare-content": chrome && bareContent ? '' : undefined, "data-grid-slot-key": id, ref: surfaceRef, "data-card-padding": !chrome && cardStyleVars && '--card-padding' in cardStyleVars ? '' : undefined, className: chrome
                             ? // ONE radius token, read by the grid item AND available to any
                                 // app card that opts into the same surface. Two surfaces
                                 // reading the SAME var is what makes their corners align, and
@@ -366,18 +435,9 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                                 // manually-resized slot h-full is still right: the user chose that
                                 // height and the chrome should fill it.
                                 autoHeight ? 'h-fit' : 'h-full', 
-                                // THE INSET, ONLY FOR CONTENT THAT BRINGS NONE (crm7#2734).
-                                // The surface painted no padding, so content that is not
-                                // itself a card sat on the border: hand-rolled headers,
-                                // filter bars, plain sections, 182 slots in crm7 alone. A
-                                // blanket inset is wrong, because most slots nest their own
-                                // Card and would gain a gutter. So the surface pads only
-                                // when nothing inside it declares its own surface or inset:
-                                // `data-slot="card"` (shadcn's convention) or
-                                // `data-slot="page-header"`. The value is PageHeader's own
-                                // p-6 md:p-7, so a bare slot and a header line up. An
-                                // operator-set --card-padding is inline style and still wins.
-                                CHROME_BARE_CONTENT_INSET)
+                                // PageHeader's own inset, so a bare slot and a header line up.
+                                // An operator --card-padding is inline style and still wins.
+                                bareContent && 'p-6 md:p-7')
                             : // Chrome OFF: layout only. Identical box, no paint.
                                 cn('w-full transition-all flex flex-col', autoHeight ? 'h-fit' : 'h-full'), 
                         /*

package/package.json

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