@object-ui/react 4.0.6 → 4.0.8

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @object-ui/react
 
+## 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
+
+- 7c9b85c: Fix compatibility with the framework's normalized Expression envelope format.
+
+  `@objectstack/spec` now emits predicate (`visible` / `enabled`) and template
+  (`titleFormat`) fields as `{ dialect, source }` envelopes instead of bare
+  strings. The previous implementation assumed strings and crashed the record
+  detail view (`TypeError: titleFormat.replace is not a function`) and printed
+  `Failed to evaluate expression: ${[object Object]}` for every action visibility
+  predicate.
+  - `@object-ui/core`: `ExpressionEvaluator.evaluate` / `evaluateCondition` now
+    unwrap Expression envelopes transparently.
+  - `@object-ui/react`: new `toPredicateInput()` helper to safely normalize
+    `boolean | string | Expression` predicate inputs into the `${expr}` form
+    expected by `useCondition`.
+  - `@object-ui/components`: `action-bar`, `action-button`, `action-group`,
+    `action-icon`, `action-menu` renderers use `toPredicateInput()` instead of
+    template-literal interpolation that produced `${[object Object]}`.
+  - `@object-ui/plugin-detail`, `@object-ui/plugin-kanban`,
+    `@object-ui/plugin-calendar`, `@object-ui/app-shell`,
+    `@object-ui/console`: title-format helpers accept both legacy strings and
+    the new `{ source }` envelope.
+
+  All changes are backward-compatible — legacy bare strings continue to work.
+
+- Updated dependencies [7c9b85c]
+- Updated dependencies [fd15918]
+  - @object-ui/core@4.0.7
+  - @object-ui/i18n@4.0.7
+  - @object-ui/data-objectstack@4.0.7
+  - @object-ui/types@4.0.7
+
 ## 4.0.6
 
 ### 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/dist/hooks/useExpression.d.ts

@@ -5,6 +5,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/**
+ * Normalize a schema-supplied predicate (`visible` / `enabled` / `disabled` /
+ * `hidden`) into the `${expr}` template form expected by `useCondition`.
+ *
+ * Accepts:
+ *   - `boolean` → returned as-is (predicate hooks short-circuit on booleans).
+ *   - `string`  → wrapped as `${string}` (legacy DX shorthand).
+ *   - `Expression` envelope `{ dialect, source }` (new format from
+ *     `@objectstack/spec`'s normalized predicate inputs) → unwrapped, then
+ *     wrapped as `${source}`. Both `cel` and `template` dialects already use
+ *     compatible variable syntax (`record.x`, etc.).
+ *   - `null` / `undefined` / empty → `undefined` (default visible/enabled).
+ *
+ * This is the canonical helper to use in renderers so we never end up with
+ * `${[object Object]}` after JS template-literal interpolation.
+ */
+export declare function toPredicateInput(value: unknown): string | boolean | undefined;
 /**
  * Hook for evaluating expressions with dynamic context
  *

package/dist/hooks/useExpression.js

@@ -7,6 +7,35 @@
  */
 import { useMemo } from 'react';
 import { ExpressionEvaluator } from '@object-ui/core';
+/**
+ * Normalize a schema-supplied predicate (`visible` / `enabled` / `disabled` /
+ * `hidden`) into the `${expr}` template form expected by `useCondition`.
+ *
+ * Accepts:
+ *   - `boolean` → returned as-is (predicate hooks short-circuit on booleans).
+ *   - `string`  → wrapped as `${string}` (legacy DX shorthand).
+ *   - `Expression` envelope `{ dialect, source }` (new format from
+ *     `@objectstack/spec`'s normalized predicate inputs) → unwrapped, then
+ *     wrapped as `${source}`. Both `cel` and `template` dialects already use
+ *     compatible variable syntax (`record.x`, etc.).
+ *   - `null` / `undefined` / empty → `undefined` (default visible/enabled).
+ *
+ * This is the canonical helper to use in renderers so we never end up with
+ * `${[object Object]}` after JS template-literal interpolation.
+ */
+export function toPredicateInput(value) {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    if (typeof value === 'boolean')
+        return value;
+    if (typeof value === 'string')
+        return `\${${value}}`;
+    if (typeof value === 'object' && typeof value.source === 'string') {
+        const src = value.source;
+        return src ? `\${${src}}` : undefined;
+    }
+    return undefined;
+}
 /**
  * Hook for evaluating expressions with dynamic context
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "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/core": "4.0.6",
-    "@object-ui/data-objectstack": "4.0.6",
-    "@object-ui/i18n": "4.0.6",
-    "@object-ui/types": "4.0.6"
+    "@object-ui/core": "4.0.8",
+    "@object-ui/data-objectstack": "4.0.8",
+    "@object-ui/i18n": "4.0.8",
+    "@object-ui/types": "4.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",