@genesislcap/foundation-react-utils 15.46.2-FUI-2628.2 → 15.46.2-FUI-2628.3

package/README.md

@@ -88,6 +88,24 @@ registerFactory('positions', reactFactory(PositionsPanel));
 - `useWorkspaceFilter` also applies the current workspace's saved value on mount, so a filter
   inside a pane that is recreated by a layout load still picks up its saved value.
 
+### flexlayout-react layouts
+
+`LayoutWrapper` only covers `rapid-layout`. For a flexlayout-react layout, hold the `Model` in
+state and register it with `useWorkspaceFlexLayout`; loading a workspace hands you a new model:
+
+```tsx
+import { Layout, Model } from '@genesislcap/foundation-react-utils/flexlayout';
+import { useWorkspaceFlexLayout } from '@genesislcap/foundation-react-utils/workspace';
+
+const [model, setModel] = useState(() => Model.fromJson(defaultLayout));
+useWorkspaceFlexLayout('home-layout', model, setModel);
+
+return <Layout model={model} factory={factory} />;
+```
+
+Tabs opened or closed by a loaded layout mount and unmount as usual, so `GridRegister` and
+`useWorkspaceFilter` inside them pick up the workspace's state as they register.
+
 ## License
 
 Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

package/dist/custom-elements.json

@@ -544,6 +544,14 @@
             "name": "useWorkspaceFilter",
             "module": "./use-workspace-filter"
           }
+        },
+        {
+          "kind": "js",
+          "name": "useWorkspaceFlexLayout",
+          "declaration": {
+            "name": "useWorkspaceFlexLayout",
+            "module": "./use-workspace-flex-layout"
+          }
         }
       ]
     },
@@ -595,6 +603,55 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/workspace/use-workspace-flex-layout.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "useWorkspaceFlexLayout",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "layoutKey",
+              "type": {
+                "text": "string"
+              },
+              "description": "Unique key the layout is saved under. An empty key skips registration."
+            },
+            {
+              "name": "model",
+              "type": {
+                "text": "Model"
+              },
+              "description": "The model currently rendered by `<Layout>`."
+            },
+            {
+              "name": "setModel",
+              "type": {
+                "text": "(model: Model) => void"
+              },
+              "description": "Called with a new model when a workspace is loaded."
+            }
+          ],
+          "description": "Registers a flexlayout-react `Model` with the foundation-workspace `LayoutRegistry`, so\n`<workspace-manager>` saves the layout (which tabs are open, how they're split and sized, which\nis selected) with the workspace and restores it on load."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "useWorkspaceFlexLayout",
+          "declaration": {
+            "name": "useWorkspaceFlexLayout",
+            "module": "src/workspace/use-workspace-flex-layout.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/dts/workspace/index.d.ts

@@ -7,13 +7,16 @@
  * Exposed as a subpath (`/workspace`) rather than from the package root so that consumers which
  * don't use workspaces don't load foundation-workspace (and the grid-pro graph behind it).
  *
- * Grids, layouts and the save/load UI need no hook: use the element wrappers from
+ * Grids, `rapid-layout` and the save/load UI need no hook: use the element wrappers from
  * `@genesislcap/foundation-workspace/react` (`GridRegister`, `LayoutWrapper`, `WorkspaceManager`).
  * Inside a `rapid-layout`, render panes through `registerFactory` + `reactFactory` rather than as
  * JSX children, because loading a saved layout rebuilds panes and cloned DOM loses React state.
  *
  * Key exports:
  * - `useWorkspaceFilter` — register React filter state so workspaces save and restore it.
+ * - `useWorkspaceFlexLayout` — register a flexlayout-react `Model` so workspaces save and restore
+ *   the layout.
  */
 export { useWorkspaceFilter } from './use-workspace-filter';
+export { useWorkspaceFlexLayout } from './use-workspace-flex-layout';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/workspace/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/workspace/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/workspace/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/dts/workspace/use-workspace-flex-layout.d.ts

@@ -0,0 +1,34 @@
+import { Model } from 'flexlayout-react';
+/**
+ * Registers a flexlayout-react `Model` with the foundation-workspace `LayoutRegistry`, so
+ * `<workspace-manager>` saves the layout (which tabs are open, how they're split and sized, which
+ * is selected) with the workspace and restores it on load.
+ *
+ * @remarks
+ * The React counterpart of `LayoutWrapper` (`layout-register`), which only covers `rapid-layout`.
+ * A workspace stores the model's `toJson()`; loading one builds a new model with `Model.fromJson`
+ * and hands it to `setModel`, so the app renders `<Layout model={model} />` from state.
+ *
+ * - Registers on mount and unregisters on unmount (or when `layoutKey` changes). Registering
+ *   applies the layout's stored config straight away, when a workspace loaded earlier has one.
+ * - The registry always reads the latest `model` and calls the latest `setModel`, so neither needs
+ *   to be memoised.
+ * - Tabs that a loaded layout closes unmount, and ones it opens mount: their grids and filters
+ *   (`GridRegister`, `useWorkspaceFilter`) pick up the workspace's state as they register.
+ * - A saved config that flexlayout-react can't read is logged and ignored; the current layout
+ *   stays.
+ *
+ * @param layoutKey - Unique key the layout is saved under. An empty key skips registration.
+ * @param model - The model currently rendered by `<Layout>`.
+ * @param setModel - Called with a new model when a workspace is loaded.
+ *
+ * @example
+ * ```tsx
+ * const [model, setModel] = useState(() => Model.fromJson(defaultLayout));
+ * useWorkspaceFlexLayout('home-layout', model, setModel);
+ * return <Layout model={model} factory={factory} />;
+ * ```
+ * @alpha
+ */
+export declare function useWorkspaceFlexLayout(layoutKey: string, model: Model, setModel: (model: Model) => void): void;
+//# sourceMappingURL=use-workspace-flex-layout.d.ts.map

package/dist/dts/workspace/use-workspace-flex-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-workspace-flex-layout.d.ts","sourceRoot":"","sources":["../../../src/workspace/use-workspace-flex-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAmB,MAAM,kBAAkB,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAC/B,IAAI,CAkCN"}

package/dist/esm/workspace/index.js

@@ -7,12 +7,15 @@
  * Exposed as a subpath (`/workspace`) rather than from the package root so that consumers which
  * don't use workspaces don't load foundation-workspace (and the grid-pro graph behind it).
  *
- * Grids, layouts and the save/load UI need no hook: use the element wrappers from
+ * Grids, `rapid-layout` and the save/load UI need no hook: use the element wrappers from
  * `@genesislcap/foundation-workspace/react` (`GridRegister`, `LayoutWrapper`, `WorkspaceManager`).
  * Inside a `rapid-layout`, render panes through `registerFactory` + `reactFactory` rather than as
  * JSX children, because loading a saved layout rebuilds panes and cloned DOM loses React state.
  *
  * Key exports:
  * - `useWorkspaceFilter` — register React filter state so workspaces save and restore it.
+ * - `useWorkspaceFlexLayout` — register a flexlayout-react `Model` so workspaces save and restore
+ *   the layout.
  */
 export { useWorkspaceFilter } from './use-workspace-filter';
+export { useWorkspaceFlexLayout } from './use-workspace-flex-layout';

package/dist/esm/workspace/use-workspace-flex-layout.js

@@ -0,0 +1,84 @@
+import { LayoutRegistry } from '@genesislcap/foundation-workspace';
+import { DI } from '@genesislcap/web-core';
+import { Model } from 'flexlayout-react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+/**
+ * Registers a flexlayout-react `Model` with the foundation-workspace `LayoutRegistry`, so
+ * `<workspace-manager>` saves the layout (which tabs are open, how they're split and sized, which
+ * is selected) with the workspace and restores it on load.
+ *
+ * @remarks
+ * The React counterpart of `LayoutWrapper` (`layout-register`), which only covers `rapid-layout`.
+ * A workspace stores the model's `toJson()`; loading one builds a new model with `Model.fromJson`
+ * and hands it to `setModel`, so the app renders `<Layout model={model} />` from state.
+ *
+ * - Registers on mount and unregisters on unmount (or when `layoutKey` changes). Registering
+ *   applies the layout's stored config straight away, when a workspace loaded earlier has one.
+ * - The registry always reads the latest `model` and calls the latest `setModel`, so neither needs
+ *   to be memoised.
+ * - Tabs that a loaded layout closes unmount, and ones it opens mount: their grids and filters
+ *   (`GridRegister`, `useWorkspaceFilter`) pick up the workspace's state as they register.
+ * - A saved config that flexlayout-react can't read is logged and ignored; the current layout
+ *   stays.
+ *
+ * @param layoutKey - Unique key the layout is saved under. An empty key skips registration.
+ * @param model - The model currently rendered by `<Layout>`.
+ * @param setModel - Called with a new model when a workspace is loaded.
+ *
+ * @example
+ * ```tsx
+ * const [model, setModel] = useState(() => Model.fromJson(defaultLayout));
+ * useWorkspaceFlexLayout('home-layout', model, setModel);
+ * return <Layout model={model} factory={factory} />;
+ * ```
+ * @alpha
+ */
+export function useWorkspaceFlexLayout(layoutKey, model, setModel) {
+    const latest = useRef({ model, setModel });
+    useLayoutEffect(() => {
+        latest.current = { model, setModel };
+    });
+    useEffect(() => {
+        if (!layoutKey) {
+            return undefined;
+        }
+        const layoutRegistry = DI.getOrCreateDOMContainer().get(LayoutRegistry);
+        const layout = {
+            // A flexlayout Model is complete as soon as it exists; there's no first load to wait for.
+            hasFirstLoaded: true,
+            getLayout: () => latest.current.model.toJson(),
+            loadLayout: (saved) => {
+                const next = readModel(saved);
+                if (next) {
+                    latest.current.setModel(next);
+                }
+                else {
+                    console.warn(`useWorkspaceFlexLayout: ignoring unreadable layout for ${layoutKey}`);
+                }
+            },
+            addEventListener: () => { },
+        };
+        layoutRegistry.registerLayout(layoutKey, layout);
+        return () => {
+            layoutRegistry.unregisterLayout(layoutKey);
+        };
+    }, [layoutKey]);
+}
+/**
+ * Builds a model from a saved flexlayout config, or returns null for anything else — e.g. a
+ * `rapid-layout` config saved under the same key. `Model.fromJson` doesn't validate: it builds a
+ * broken model from malformed JSON rather than throwing.
+ */
+function readModel(saved) {
+    const json = saved;
+    const root = json === null || json === void 0 ? void 0 : json.layout;
+    if (!root || typeof root !== 'object' || typeof root.type !== 'string') {
+        return null;
+    }
+    try {
+        return Model.fromJson(json);
+    }
+    catch (_a) {
+        return null;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-react-utils",
   "description": "Genesis Foundation React Utils",
-  "version": "15.46.2-FUI-2628.2",
+  "version": "15.46.2-FUI-2628.3",
   "sideEffects": [
     "./dist/esm/flexlayout/index.js"
   ],
@@ -63,12 +63,12 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "15.46.2-FUI-2628.2",
-    "@genesislcap/genx": "15.46.2-FUI-2628.2",
-    "@genesislcap/ts-builder": "15.46.2-FUI-2628.2",
-    "@genesislcap/uvu-playwright-builder": "15.46.2-FUI-2628.2",
-    "@genesislcap/vite-builder": "15.46.2-FUI-2628.2",
-    "@genesislcap/webpack-builder": "15.46.2-FUI-2628.2",
+    "@genesislcap/foundation-testing": "15.46.2-FUI-2628.3",
+    "@genesislcap/genx": "15.46.2-FUI-2628.3",
+    "@genesislcap/ts-builder": "15.46.2-FUI-2628.3",
+    "@genesislcap/uvu-playwright-builder": "15.46.2-FUI-2628.3",
+    "@genesislcap/vite-builder": "15.46.2-FUI-2628.3",
+    "@genesislcap/webpack-builder": "15.46.2-FUI-2628.3",
     "react-router-dom": "^7.1.3"
   },
   "peerDependencies": {
@@ -82,12 +82,12 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-forms": "15.46.2-FUI-2628.2",
-    "@genesislcap/foundation-layout": "15.46.2-FUI-2628.2",
-    "@genesislcap/foundation-logger": "15.46.2-FUI-2628.2",
-    "@genesislcap/foundation-workspace": "15.46.2-FUI-2628.2",
-    "@genesislcap/rapid-design-system": "15.46.2-FUI-2628.2",
-    "@genesislcap/web-core": "15.46.2-FUI-2628.2",
+    "@genesislcap/foundation-forms": "15.46.2-FUI-2628.3",
+    "@genesislcap/foundation-layout": "15.46.2-FUI-2628.3",
+    "@genesislcap/foundation-logger": "15.46.2-FUI-2628.3",
+    "@genesislcap/foundation-workspace": "15.46.2-FUI-2628.3",
+    "@genesislcap/rapid-design-system": "15.46.2-FUI-2628.3",
+    "@genesislcap/web-core": "15.46.2-FUI-2628.3",
     "@jsonforms/core": "^3.2.1",
     "@r2wc/core": "1.3.1",
     "@r2wc/react-to-web-component": "^2.0.2",