@object-ui/react 4.0.7 → 4.0.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @object-ui/react
 
+## 4.0.9
+
+### Patch Changes
+
+- @object-ui/types@4.0.9
+- @object-ui/core@4.0.9
+- @object-ui/i18n@4.0.9
+- @object-ui/data-objectstack@4.0.9
+
+## 4.0.8
+
+### Patch Changes
+
+- Updated dependencies [3d58eaa]
+  - @object-ui/i18n@4.0.8
+  - @object-ui/types@4.0.8
+  - @object-ui/core@4.0.8
+  - @object-ui/data-objectstack@4.0.8
+
 ## 4.0.7
 
 ### Patch Changes

package/dist/SchemaRenderer.d.ts

@@ -19,9 +19,14 @@ interface SchemaErrorBoundaryState {
 export declare class SchemaErrorBoundary extends Component<{
     componentType?: string;
     children: React.ReactNode;
+    resetKey?: any;
 }, SchemaErrorBoundaryState> {
     state: SchemaErrorBoundaryState;
     static getDerivedStateFromError(error: Error): SchemaErrorBoundaryState;
+    componentDidUpdate(prevProps: {
+        componentType?: string;
+        resetKey?: any;
+    }): void;
     handleRetry: () => void;
     render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/SchemaRenderer.js

@@ -53,6 +53,17 @@ export class SchemaErrorBoundary extends Component {
     static getDerivedStateFromError(error) {
         return { hasError: true, error };
     }
+    componentDidUpdate(prevProps) {
+        // Auto-recover when the upstream component identity or an explicit reset
+        // key changes. This makes "Retry" implicit: as soon as the producer of
+        // the schema fixes the offending value (e.g. user edits the date field
+        // in view config), the broken widget re-mounts cleanly.
+        if (this.state.hasError &&
+            (prevProps.componentType !== this.props.componentType ||
+                prevProps.resetKey !== this.props.resetKey)) {
+            this.setState({ hasError: false, error: null });
+        }
+    }
     render() {
         if (this.state.hasError && this.state.error) {
             const error = this.state.error;
@@ -175,7 +186,7 @@ export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
     }
     debugTime(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
     const renderStart = isDebug ? performance.now() : 0;
-    const rendered = (_jsx(SchemaErrorBoundary, { componentType: evaluatedSchema.type, children: React.createElement(Component, {
+    const rendered = (_jsx(SchemaErrorBoundary, { componentType: evaluatedSchema.type, resetKey: evaluatedSchema.id ?? null, children: React.createElement(Component, {
             schema: evaluatedSchema,
             ...componentProps, // Spread non-metadata schema properties as props
             ...(evaluatedSchema.props || {}), // Override with explicit props if provided

package/dist/hooks/useDensityMode.d.ts

@@ -14,6 +14,14 @@ export interface DensityConfig {
     paddingClasses?: Record<DensityModeValue, string>;
     /** Font size classes for each density mode */
     fontSizeClasses?: Record<DensityModeValue, string>;
+    /**
+     * Optional callback fired whenever the active density mode changes.
+     * Typical use: persist the new value on the active view definition.
+     * The callback is *not* invoked for the initial mount; only on user-driven
+     * transitions (setMode / cycle) and when the controlled `initialMode`
+     * changes from upstream.
+     */
+    onChange?: (mode: DensityModeValue) => void;
 }
 export interface DensityResult {
     /** Current density mode */
@@ -33,16 +41,18 @@ export interface DensityResult {
  * Hook for managing view density modes (compact/comfortable/spacious).
  * Implements DensityMode from @objectstack/spec v2.0.7.
  *
+ * Behaviour:
+ * - `initialMode` acts as a controlled-ish source of truth: when it changes
+ *   externally (e.g. user switches to a different saved view) the internal
+ *   mode follows.
+ * - User-driven transitions (`setMode` / `cycle`) emit `config.onChange`,
+ *   so callers can persist the choice.
+ *
  * @example
  * ```tsx
- * const density = useDensityMode('comfortable');
- *
- * return (
- *   <div className={density.paddingClass}>
- *     <table style={{ rowHeight: density.rowHeight }}>...</table>
- *     <button onClick={density.cycle}>Toggle Density</button>
- *   </div>
- * );
+ * const density = useDensityMode(activeView?.densityMode ?? 'comfortable', {
+ *   onChange: (m) => dataSource.updateViewConfig(obj, vid, { densityMode: m }),
+ * });
  * ```
  */
 export declare function useDensityMode(initialMode?: DensityModeValue, config?: DensityConfig): DensityResult;

package/dist/hooks/useDensityMode.js

@@ -5,7 +5,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 const DEFAULT_ROW_HEIGHTS = {
     compact: 32,
     comfortable: 40,
@@ -26,27 +26,55 @@ const DENSITY_ORDER = ['compact', 'comfortable', 'spacious'];
  * Hook for managing view density modes (compact/comfortable/spacious).
  * Implements DensityMode from @objectstack/spec v2.0.7.
  *
+ * Behaviour:
+ * - `initialMode` acts as a controlled-ish source of truth: when it changes
+ *   externally (e.g. user switches to a different saved view) the internal
+ *   mode follows.
+ * - User-driven transitions (`setMode` / `cycle`) emit `config.onChange`,
+ *   so callers can persist the choice.
+ *
  * @example
  * ```tsx
- * const density = useDensityMode('comfortable');
- *
- * return (
- *   <div className={density.paddingClass}>
- *     <table style={{ rowHeight: density.rowHeight }}>...</table>
- *     <button onClick={density.cycle}>Toggle Density</button>
- *   </div>
- * );
+ * const density = useDensityMode(activeView?.densityMode ?? 'comfortable', {
+ *   onChange: (m) => dataSource.updateViewConfig(obj, vid, { densityMode: m }),
+ * });
  * ```
  */
 export function useDensityMode(initialMode = 'comfortable', config) {
-    const [mode, setMode] = useState(initialMode);
+    const [mode, setModeState] = useState(initialMode);
     const rowHeights = config?.rowHeights ?? DEFAULT_ROW_HEIGHTS;
     const paddingClasses = config?.paddingClasses ?? DEFAULT_PADDING_CLASSES;
     const fontSizeClasses = config?.fontSizeClasses ?? DEFAULT_FONT_SIZE_CLASSES;
+    // Keep latest onChange in a ref so we don't need to re-create callbacks
+    // when the parent re-renders with a new function identity.
+    const onChangeRef = useRef(config?.onChange);
+    useEffect(() => {
+        onChangeRef.current = config?.onChange;
+    }, [config?.onChange]);
+    // Track the upstream initialMode so we can detect external changes
+    // (e.g. switching views) without firing onChange for those.
+    const lastInitialRef = useRef(initialMode);
+    useEffect(() => {
+        if (initialMode !== lastInitialRef.current) {
+            lastInitialRef.current = initialMode;
+            setModeState(initialMode);
+        }
+    }, [initialMode]);
+    const setMode = useCallback((next) => {
+        setModeState((current) => {
+            if (current === next)
+                return current;
+            // Fire onChange asynchronously so React state has settled.
+            queueMicrotask(() => onChangeRef.current?.(next));
+            return next;
+        });
+    }, []);
     const cycle = useCallback(() => {
-        setMode((current) => {
+        setModeState((current) => {
             const idx = DENSITY_ORDER.indexOf(current);
-            return DENSITY_ORDER[(idx + 1) % DENSITY_ORDER.length];
+            const next = DENSITY_ORDER[(idx + 1) % DENSITY_ORDER.length];
+            queueMicrotask(() => onChangeRef.current?.(next));
+            return next;
         });
     }, []);
     return useMemo(() => ({
@@ -56,5 +84,5 @@ export function useDensityMode(initialMode = 'comfortable', config) {
         rowHeight: rowHeights[mode],
         paddingClass: paddingClasses[mode],
         fontSizeClass: fontSizeClasses[mode],
-    }), [mode, cycle, rowHeights, paddingClasses, fontSizeClasses]);
+    }), [mode, setMode, cycle, rowHeights, paddingClasses, fontSizeClasses]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -24,12 +24,12 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^4.0.4",
+    "@objectstack/spec": "^4.0.5",
     "react-hook-form": "^7.75.0",
-    "@object-ui/i18n": "4.0.7",
-    "@object-ui/core": "4.0.7",
-    "@object-ui/data-objectstack": "4.0.7",
-    "@object-ui/types": "4.0.7"
+    "@object-ui/core": "4.0.9",
+    "@object-ui/data-objectstack": "4.0.9",
+    "@object-ui/i18n": "4.0.9",
+    "@object-ui/types": "4.0.9"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",