@bsuite/page-builder 2.7.1-next.0 → 2.7.1-next.2

package/README.md

@@ -51,6 +51,13 @@ When adding `autoHeight` to an existing page's layout, bump that page's
 
 ## Edit-mode chrome (2.7.1-next.0+)
 
+`PAGE_GRID_EDITING_EVENT` reports committed changes from `2.7.1-next.1`.
+Its `{ pageKey, editing }` payload and event name are unchanged. The matching
+canvas DOM is updated before listeners run, including when Save & Exit uses
+a React transition. Initial mounting, unchanged state and abandoned transitions
+do not emit notifications. Consumers must match the page key and preserve
+focus on surviving inputs when synchronizing their header controls.
+
 While the canvas editor is open, each grid item renders an in-flow strip
 (`[data-slot="grid-item-editor-chrome"]`) above the card content: the widget
 name and a Hide control. The strip is **not** absolutely positioned over the

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AA2pB7F,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,qBAu+BrB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAsBxC,OAAO,KAAK,EAAe,mBAAmB,EAA4B,MAAM,YAAY,CAAC;AA4pB7F,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,qBAu+BrB"}

package/dist/PageGridLayout.js

@@ -358,13 +358,14 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
                          * `cardStyleVars` carries ONLY the properties the operator changed
                          * (see cardStyle.ts). An untouched page spreads an empty object, so
                          * this attribute is identical to what it was before the card editor
-                         * existed. `boxShadow` is set as a real declaration rather than a
-                         * custom property because it has to beat the `shadow-sm` class.
+                         * existed. A chrome-owning surface applies `boxShadow` directly
+                         * to beat its default class. Layout-only wrappers pass the token
+                         * to the painted consumer without drawing a second shadow.
                          */
                         style: {
                             contain: 'layout style',
                             ...cardStyleVars,
-                            ...(cardStyleVars && '--card-shadow' in cardStyleVars
+                            ...(chrome && cardStyleVars && '--card-shadow' in cardStyleVars
                                 ? { boxShadow: cardStyleVars['--card-shadow'] }
                                 : null),
                             ...(cardStyleVars && '--card-padding' in cardStyleVars

package/dist/usePageGridLayout.d.ts

@@ -1,13 +1,10 @@
 import type { GridLayouts, LayoutMigration, UsePageGridLayoutOptions, UsePageGridLayoutResult } from './types.js';
 export declare const DEFAULT_EDITOR_EVENT_NAMES: readonly ["bsuite-open-page-editor", "bsu-open-page-editor", "crm7-open-page-editor", "conduit-open-page-editor", "r80-open-page-editor"];
 /**
- * Event name broadcast on `window` whenever any PageGridLayout transitions
- * its `isEditing` state. Launcher widgets (e.g. floating "Edit Page" FABs)
- * subscribe to this so they can hide themselves while the canvas editor is
- * already active — prevents the redundant-affordance UX issue where a
- * "Edit Page" button sits in the corner while the editor banner is visible
- * at the top. `detail.editing` is the new state; `detail.pageKey` lets
- * launchers scope by page if they handle multiple grids on one screen.
+ * Broadcast after a PageGridLayout commits an editing-state change. Header
+ * launchers use this to synchronize their label and restore keyboard focus
+ * after canvas controls disappear. Initial state and abandoned transitions do
+ * not publish an event. `detail.pageKey` identifies the changed canvas.
  */
 export declare const PAGE_GRID_EDITING_EVENT = "bsuite-page-grid-editing";
 /**

package/dist/usePageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAEV,WAAW,EACX,eAAe,EACf,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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,UAAU,GACX,EAAE;IACD,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACzD,GAAG,WAAW,GAAG,IAAI,CA+BrB;AAED,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,EACjB,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,uBAAuB,CA8yBpD"}
+{"version":3,"file":"usePageGridLayout.d.ts","sourceRoot":"","sources":["../src/usePageGridLayout.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAEV,WAAW,EACX,eAAe,EACf,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,YAAY,CAAC;AAEpB,eAAO,MAAM,0BAA0B,2IAM7B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAiBzC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,UAAU,GACX,EAAE;IACD,KAAK,EAAE,WAAW,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACzD,GAAG,WAAW,GAAG,IAAI,CA+BrB;AAED,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,EACjB,gBAAgB,GACjB,EAAE,wBAAwB,GAAG,uBAAuB,CAuyBpD"}

package/dist/usePageGridLayout.js

@@ -11,13 +11,10 @@ export const DEFAULT_EDITOR_EVENT_NAMES = [
     'r80-open-page-editor',
 ];
 /**
- * Event name broadcast on `window` whenever any PageGridLayout transitions
- * its `isEditing` state. Launcher widgets (e.g. floating "Edit Page" FABs)
- * subscribe to this so they can hide themselves while the canvas editor is
- * already active — prevents the redundant-affordance UX issue where a
- * "Edit Page" button sits in the corner while the editor banner is visible
- * at the top. `detail.editing` is the new state; `detail.pageKey` lets
- * launchers scope by page if they handle multiple grids on one screen.
+ * Broadcast after a PageGridLayout commits an editing-state change. Header
+ * launchers use this to synchronize their label and restore keyboard focus
+ * after canvas controls disappear. Initial state and abandoned transitions do
+ * not publish an event. `detail.pageKey` identifies the changed canvas.
  */
 export const PAGE_GRID_EDITING_EVENT = 'bsuite-page-grid-editing';
 /**
@@ -124,19 +121,16 @@ export function usePageGridLayout({ pageKey, defaultLayouts, defaultCols = 12, l
     const effectiveLayoutVersion = layoutVersion + PACKAGE_LAYOUT_EPOCH;
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
-    const [isEditing, setIsEditingState] = useState(false);
-    const setIsEditing = useCallback((next) => {
-        setIsEditingState((previous) => {
-            const resolved = typeof next === 'function' ? next(previous) : next;
-            if (resolved !== previous && typeof window !== 'undefined') {
-                // Broadcast to FAB launchers so they can hide while the editor is open.
-                window.dispatchEvent(new CustomEvent(PAGE_GRID_EDITING_EVENT, {
-                    detail: { pageKey, editing: resolved },
-                }));
-            }
-            return resolved;
-        });
-    }, [pageKey]);
+    const [isEditing, setIsEditing] = useState(false);
+    const publishedEditing = useRef(false);
+    useEffect(() => {
+        if (publishedEditing.current === isEditing)
+            return;
+        publishedEditing.current = isEditing;
+        window.dispatchEvent(new CustomEvent(PAGE_GRID_EDITING_EVENT, {
+            detail: { pageKey, editing: isEditing },
+        }));
+    }, [isEditing, pageKey]);
     const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
     useLayoutEffect(() => {
         const el = containerRef.current;

package/package.json

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