@genesislcap/foundation-react-utils 15.39.0 → 15.40.0-FUI-2628.1

package/README.md

@@ -47,6 +47,47 @@ resolving a second copy of the library, which breaks the `instanceof` checks `fl
 relies on internally; the entry point logs a warning when the version it loads differs from the one
 the theme was generated against.
 
+## foundation-workspace
+
+Workspaces (save/load of layouts, grid column state and filters) work in React through the element
+wrappers `@genesislcap/foundation-workspace/react` already ships, plus one hook for filter state:
+
+```tsx
+import { registerFactory } from '@genesislcap/foundation-layout';
+import { reactFactory } from '@genesislcap/foundation-react-utils';
+import { useWorkspaceFilter } from '@genesislcap/foundation-react-utils/workspace';
+import { GridRegister, LayoutWrapper, WorkspaceManager } from '@genesislcap/foundation-workspace/react';
+
+const PositionsPanel = () => {
+  const [search, setSearch] = useState('');
+  useWorkspaceFilter('positions-search', search, setSearch);
+  return (
+    <GridRegister gridKey="positions">
+      <RapidGridPro persistColumnStateKey="positions">…</RapidGridPro>
+    </GridRegister>
+  );
+};
+
+registerFactory('positions', reactFactory(PositionsPanel));
+
+<LayoutWrapper layoutKey="my-layout">
+  <rapid-layout auto-save-key="my-layout">
+    <rapid-layout-region>
+      <rapid-layout-item registration="positions" title="Positions" />
+    </rapid-layout-region>
+  </rapid-layout>
+</LayoutWrapper>
+
+<WorkspaceManager />
+```
+
+- Register `workspaceComponents` from `@genesislcap/foundation-workspace` with your design system.
+- Render layout panes through `registerFactory` + `reactFactory`, not as JSX children of
+  `rapid-layout-item`. Loading a saved layout rebuilds the panes, and cloned DOM loses React-set
+  properties such as `gridOptions`.
+- `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.
+
 ## 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

@@ -531,6 +531,70 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/workspace/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "useWorkspaceFilter",
+          "declaration": {
+            "name": "useWorkspaceFilter",
+            "module": "./use-workspace-filter"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/workspace/use-workspace-filter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "useWorkspaceFilter",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "filterKey",
+              "type": {
+                "text": "string"
+              },
+              "description": "Unique key the value is saved under. An empty key skips registration."
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current filter value."
+            },
+            {
+              "name": "setValue",
+              "type": {
+                "text": "(value: string) => void"
+              },
+              "description": "Called with the saved value when a workspace is loaded."
+            }
+          ],
+          "description": "Registers a piece of React filter state with the foundation-workspace `FilterRegistry`, so\n`<workspace-manager>` saves it with the workspace and restores it on load."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "useWorkspaceFilter",
+          "declaration": {
+            "name": "useWorkspaceFilter",
+            "module": "src/workspace/use-workspace-filter.ts"
+          }
+        }
+      ]
     }
   ]
 }

package/dist/dts/index.d.ts

@@ -18,6 +18,7 @@
  *   Rapid Design System theme for it installed on import. Import from there rather than adding
  *   `flexlayout-react` to an app's own dependencies.
  * - `./router` — route table helpers (`renderAppRoutes` and friends).
+ * - `./workspace` — foundation-workspace helpers (`useWorkspaceFilter`).
  */
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
 export { createReactRenderer } from './create-react-renderer';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -0,0 +1,19 @@
+/**
+ * `@genesislcap/foundation-react-utils/workspace`
+ *
+ * React helpers for `@genesislcap/foundation-workspace` (save/load of layouts, grid column state
+ * and filters).
+ *
+ * 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
+ * `@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.
+ */
+export { useWorkspaceFilter } from './use-workspace-filter';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/dts/workspace/use-workspace-filter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Registers a piece of React filter state with the foundation-workspace `FilterRegistry`, so
+ * `<workspace-manager>` saves it with the workspace and restores it on load.
+ *
+ * @remarks
+ * Grids and layouts are covered by the `GridRegister` / `LayoutWrapper` elements; filters have no
+ * element wrapper because their value lives in app state, so this hook is the React equivalent.
+ *
+ * - Registers on mount and unregisters on unmount (or when `filterKey` changes).
+ * - The registry always reads the latest `value` and calls the latest `setValue`, so neither needs
+ *   to be memoised.
+ * - On mount, the registry applies its stored value for `filterKey` (if any): the loaded
+ *   workspace's value, or this filter's last value from earlier in the session. This covers a
+ *   filter that wasn't mounted when the workspace loaded (e.g. on another route), and a filter
+ *   inside a layout pane that a layout reload remounts.
+ * - On unmount, the registry keeps the last value, so saving a workspace while the filter isn't
+ *   mounted still includes it.
+ *
+ * @param filterKey - Unique key the value is saved under. An empty key skips registration.
+ * @param value - Current filter value.
+ * @param setValue - Called with the saved value when a workspace is loaded.
+ *
+ * @example
+ * ```tsx
+ * const [instrument, setInstrument] = useState('');
+ * useWorkspaceFilter('positions-instrument', instrument, setInstrument);
+ * ```
+ * @alpha
+ */
+export declare function useWorkspaceFilter(filterKey: string, value: string, setValue: (value: string) => void): void;
+//# sourceMappingURL=use-workspace-filter.d.ts.map

package/dist/dts/workspace/use-workspace-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-workspace-filter.d.ts","sourceRoot":"","sources":["../../../src/workspace/use-workspace-filter.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAChC,IAAI,CAwBN"}

package/dist/esm/index.js

@@ -18,6 +18,7 @@
  *   Rapid Design System theme for it installed on import. Import from there rather than adding
  *   `flexlayout-react` to an app's own dependencies.
  * - `./router` — route table helpers (`renderAppRoutes` and friends).
+ * - `./workspace` — foundation-workspace helpers (`useWorkspaceFilter`).
  */
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
 export { createReactRenderer } from './create-react-renderer';

package/dist/esm/workspace/index.js

@@ -0,0 +1,18 @@
+/**
+ * `@genesislcap/foundation-react-utils/workspace`
+ *
+ * React helpers for `@genesislcap/foundation-workspace` (save/load of layouts, grid column state
+ * and filters).
+ *
+ * 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
+ * `@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.
+ */
+export { useWorkspaceFilter } from './use-workspace-filter';

package/dist/esm/workspace/use-workspace-filter.js

@@ -0,0 +1,48 @@
+import { FilterRegistry } from '@genesislcap/foundation-workspace';
+import { DI } from '@genesislcap/web-core';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+/**
+ * Registers a piece of React filter state with the foundation-workspace `FilterRegistry`, so
+ * `<workspace-manager>` saves it with the workspace and restores it on load.
+ *
+ * @remarks
+ * Grids and layouts are covered by the `GridRegister` / `LayoutWrapper` elements; filters have no
+ * element wrapper because their value lives in app state, so this hook is the React equivalent.
+ *
+ * - Registers on mount and unregisters on unmount (or when `filterKey` changes).
+ * - The registry always reads the latest `value` and calls the latest `setValue`, so neither needs
+ *   to be memoised.
+ * - On mount, the registry applies its stored value for `filterKey` (if any): the loaded
+ *   workspace's value, or this filter's last value from earlier in the session. This covers a
+ *   filter that wasn't mounted when the workspace loaded (e.g. on another route), and a filter
+ *   inside a layout pane that a layout reload remounts.
+ * - On unmount, the registry keeps the last value, so saving a workspace while the filter isn't
+ *   mounted still includes it.
+ *
+ * @param filterKey - Unique key the value is saved under. An empty key skips registration.
+ * @param value - Current filter value.
+ * @param setValue - Called with the saved value when a workspace is loaded.
+ *
+ * @example
+ * ```tsx
+ * const [instrument, setInstrument] = useState('');
+ * useWorkspaceFilter('positions-instrument', instrument, setInstrument);
+ * ```
+ * @alpha
+ */
+export function useWorkspaceFilter(filterKey, value, setValue) {
+    const latest = useRef({ value, setValue });
+    useLayoutEffect(() => {
+        latest.current = { value, setValue };
+    });
+    useEffect(() => {
+        if (!filterKey) {
+            return undefined;
+        }
+        const filterRegistry = DI.getOrCreateDOMContainer().get(FilterRegistry);
+        filterRegistry.registerFilter(filterKey, () => ({ filterKey, value: latest.current.value }), (savedValue) => latest.current.setValue(savedValue));
+        return () => {
+            filterRegistry.unregisterFilter(filterKey);
+        };
+    }, [filterKey]);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-react-utils",
   "description": "Genesis Foundation React Utils",
-  "version": "15.39.0",
+  "version": "15.40.0-FUI-2628.1",
   "sideEffects": [
     "./dist/esm/flexlayout/index.js"
   ],
@@ -21,6 +21,10 @@
       "types": "./dist/dts/flexlayout/index.d.ts",
       "default": "./dist/esm/flexlayout/index.js"
     },
+    "./workspace": {
+      "types": "./dist/dts/workspace/index.d.ts",
+      "default": "./dist/esm/workspace/index.js"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -30,6 +34,9 @@
       ],
       "flexlayout": [
         "./dist/dts/flexlayout/index.d.ts"
+      ],
+      "workspace": [
+        "./dist/dts/workspace/index.d.ts"
       ]
     }
   },
@@ -56,13 +63,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "15.39.0",
-    "@genesislcap/genx": "15.39.0",
-    "@genesislcap/rollup-builder": "15.39.0",
-    "@genesislcap/ts-builder": "15.39.0",
-    "@genesislcap/uvu-playwright-builder": "15.39.0",
-    "@genesislcap/vite-builder": "15.39.0",
-    "@genesislcap/webpack-builder": "15.39.0",
+    "@genesislcap/foundation-testing": "15.40.0-FUI-2628.1",
+    "@genesislcap/genx": "15.40.0-FUI-2628.1",
+    "@genesislcap/rollup-builder": "15.40.0-FUI-2628.1",
+    "@genesislcap/ts-builder": "15.40.0-FUI-2628.1",
+    "@genesislcap/uvu-playwright-builder": "15.40.0-FUI-2628.1",
+    "@genesislcap/vite-builder": "15.40.0-FUI-2628.1",
+    "@genesislcap/webpack-builder": "15.40.0-FUI-2628.1",
     "react-router-dom": "^7.1.3"
   },
   "peerDependencies": {
@@ -76,11 +83,12 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-forms": "15.39.0",
-    "@genesislcap/foundation-layout": "15.39.0",
-    "@genesislcap/foundation-logger": "15.39.0",
-    "@genesislcap/rapid-design-system": "15.39.0",
-    "@genesislcap/web-core": "15.39.0",
+    "@genesislcap/foundation-forms": "15.40.0-FUI-2628.1",
+    "@genesislcap/foundation-layout": "15.40.0-FUI-2628.1",
+    "@genesislcap/foundation-logger": "15.40.0-FUI-2628.1",
+    "@genesislcap/foundation-workspace": "15.40.0-FUI-2628.1",
+    "@genesislcap/rapid-design-system": "15.40.0-FUI-2628.1",
+    "@genesislcap/web-core": "15.40.0-FUI-2628.1",
     "@jsonforms/core": "^3.2.1",
     "@r2wc/core": "1.3.1",
     "@r2wc/react-to-web-component": "^2.0.2",