@object-ui/react 3.0.3 → 3.1.1

package/dist/spec-bridge/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { SpecBridge } from './SpecBridge';
+export type { BridgeContext, BridgeFn, ObjectDefLite } from './types';
+export { bridgeListView } from './bridges/list-view';
+export { bridgeFormView } from './bridges/form-view';
+export { bridgePage } from './bridges/page';
+export { bridgeDashboard } from './bridges/dashboard';

package/dist/spec-bridge/index.js

@@ -0,0 +1,12 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { SpecBridge } from './SpecBridge';
+export { bridgeListView } from './bridges/list-view';
+export { bridgeFormView } from './bridges/form-view';
+export { bridgePage } from './bridges/page';
+export { bridgeDashboard } from './bridges/dashboard';

package/dist/spec-bridge/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { SchemaNode } from '@object-ui/core';
+/** Context passed to all bridge functions */
+export interface BridgeContext {
+    /** Current user context for permission checks */
+    user?: Record<string, any>;
+    /** App-level variables */
+    variables?: Record<string, any>;
+    /** Registered object definitions for field metadata lookup */
+    objectDefs?: Record<string, ObjectDefLite>;
+}
+/** Lightweight object definition for field metadata resolution */
+export interface ObjectDefLite {
+    name: string;
+    label?: string;
+    fields: Array<{
+        name: string;
+        label?: string;
+        type: string;
+        required?: boolean;
+        options?: Array<{
+            label: string;
+            value: string;
+        }>;
+    }>;
+}
+/** A bridge function transforms a spec schema into a SchemaNode tree */
+export type BridgeFn<T = any> = (spec: T, context: BridgeContext) => SchemaNode;

package/dist/spec-bridge/types.js

@@ -0,0 +1,8 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -19,22 +19,23 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^3.0.4",
-    "react-hook-form": "^7.71.1",
-    "@object-ui/core": "3.0.3",
-    "@object-ui/i18n": "3.0.3",
-    "@object-ui/types": "3.0.3"
+    "@objectstack/spec": "^3.2.1",
+    "react-hook-form": "^7.71.2",
+    "@object-ui/core": "3.1.1",
+    "@object-ui/i18n": "3.1.1",
+    "@object-ui/types": "3.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.13",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "typescript": "^5.9.3"
   },

package/src/SchemaRenderer.tsx

@@ -17,6 +17,7 @@ import {
   debugLog,
   debugTime,
   debugTimeEnd,
+  DebugCollector,
 } from '@object-ui/core';
 import { SchemaRendererContext } from './context/SchemaRendererContext';
 import { resolveI18nLabel } from './utils/i18n';
@@ -133,10 +134,48 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
       newSchema.props = newProps;
     }
 
+    // Evaluate visibility: visible / visibleOn / hidden / hiddenOn
+    const shouldHide = (() => {
+      if (newSchema.visible !== undefined) {
+        return !evaluator.evaluateCondition(newSchema.visible);
+      }
+      if (newSchema.visibleOn !== undefined) {
+        return !evaluator.evaluateCondition(newSchema.visibleOn);
+      }
+      if (newSchema.hidden !== undefined) {
+        return evaluator.evaluateCondition(newSchema.hidden);
+      }
+      if (newSchema.hiddenOn !== undefined) {
+        return evaluator.evaluateCondition(newSchema.hiddenOn);
+      }
+      return false;
+    })();
+
+    if (shouldHide) {
+      newSchema._hidden = true;
+    }
+
+    // Evaluate disabled: disabled / disabledOn
+    const isDisabled = (() => {
+      if (newSchema.disabled !== undefined) {
+        return evaluator.evaluateCondition(newSchema.disabled);
+      }
+      if (newSchema.disabledOn !== undefined) {
+        return evaluator.evaluateCondition(newSchema.disabledOn);
+      }
+      return false;
+    })();
+
+    if (isDisabled) {
+      newSchema._disabled = true;
+    }
+
     return newSchema;
   }, [schema, dataSource]);
 
   if (!evaluatedSchema) return null;
+  // Handle visibility: if evaluated schema is hidden, render nothing
+  if (evaluatedSchema?._hidden) return null;
   // If schema is just a string, render it as text
   if (typeof evaluatedSchema === 'string') return <>{evaluatedSchema}</>;
 
@@ -173,13 +212,26 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
     hiddenOn: _hiddenOn,
     disabled: _disabled,
     disabledOn: _disabledOn,
+    _hidden: __hidden,    // stripped: internal visibility flag
+    _disabled: __disabled, // stripped: internal disabled flag
     ...componentProps
   } = evaluatedSchema;
 
   // Extract AriaPropsSchema properties for accessibility
   const ariaProps = resolveAriaProps(evaluatedSchema);
 
+  // Debug-mode enhancements: extra data attributes + perf tracking
+  const isDebug = context?.debug || context?.debugFlags?.enabled;
+  const debugAttrs: Record<string, string> = {};
+  if (isDebug) {
+    debugAttrs['data-debug-type'] = evaluatedSchema.type;
+    if (evaluatedSchema.id) {
+      debugAttrs['data-debug-id'] = evaluatedSchema.id;
+    }
+  }
+
   debugTime(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
+  const renderStart = isDebug ? performance.now() : 0;
   const rendered = (
     <SchemaErrorBoundary componentType={evaluatedSchema.type}>
       {React.createElement(Component, {
@@ -187,6 +239,8 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
         ...componentProps,  // Spread non-metadata schema properties as props
         ...(evaluatedSchema.props || {}),  // Override with explicit props if provided
         ...ariaProps,  // Inject ARIA attributes from AriaPropsSchema
+        ...debugAttrs, // Debug-mode data attributes
+        disabled: __disabled || undefined,
         className: evaluatedSchema.className,
         'data-obj-id': evaluatedSchema.id,
         'data-obj-type': evaluatedSchema.type,
@@ -195,6 +249,18 @@ export const SchemaRenderer = forwardRef<any, { schema: SchemaNode } & Record<st
     </SchemaErrorBoundary>
   );
   debugTimeEnd(`render:${evaluatedSchema.type}:${evaluatedSchema.id ?? 'anon'}`);
+
+  // Report render perf to DebugCollector when debug mode is active
+  if (isDebug && renderStart) {
+    const durationMs = performance.now() - renderStart;
+    DebugCollector.getInstance().addPerf({
+      type: evaluatedSchema.type,
+      id: evaluatedSchema.id,
+      durationMs,
+      timestamp: Date.now(),
+    });
+  }
+
   return rendered;
 });
 SchemaRenderer.displayName = 'SchemaRenderer';

package/src/__tests__/LazyPluginLoader.test.tsx

@@ -166,7 +166,7 @@ describe('createLazyPlugin', () => {
 
     await waitFor(() => {
       expect(screen.getByText('Success after retry')).toBeInTheDocument();
-    }, { timeout: 5000 });
+    }, { timeout: 2000 });
 
     // First call + 2 retries (fails) + 1 success = called 3 times
     expect(importFn).toHaveBeenCalledTimes(3);

package/src/__tests__/SchemaRenderer.debug.test.tsx

@@ -0,0 +1,69 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRendererProvider } from '../context/SchemaRendererContext';
+
+// Suppress console.warn from deprecated namespace registration
+const originalWarn = console.warn;
+beforeEach(() => {
+  console.warn = vi.fn();
+});
+afterEach(() => {
+  console.warn = originalWarn;
+});
+
+// A simple test component that passes all props through to a div
+const TestDiv: React.FC<any> = (props) => {
+  const { schema, ...rest } = props;
+  return <div data-testid="test-div" {...rest} />;
+};
+
+describe('SchemaRenderer debug attributes', () => {
+  beforeEach(() => {
+    ComponentRegistry.register('test-debug-div', TestDiv);
+  });
+
+  it('should NOT inject data-debug-* attributes when debug is off', () => {
+    const { getByTestId } = render(
+      <SchemaRendererProvider dataSource={{}}>
+        <SchemaRenderer schema={{ type: 'test-debug-div', id: 'myBtn' }} />
+      </SchemaRendererProvider>,
+    );
+    const el = getByTestId('test-div');
+    expect(el.getAttribute('data-debug-type')).toBeNull();
+    expect(el.getAttribute('data-debug-id')).toBeNull();
+  });
+
+  it('should inject data-debug-type when debug is enabled', () => {
+    const { getByTestId } = render(
+      <SchemaRendererProvider dataSource={{}} debug={true}>
+        <SchemaRenderer schema={{ type: 'test-debug-div', id: 'myBtn' }} />
+      </SchemaRendererProvider>,
+    );
+    const el = getByTestId('test-div');
+    expect(el.getAttribute('data-debug-type')).toBe('test-debug-div');
+    expect(el.getAttribute('data-debug-id')).toBe('myBtn');
+  });
+
+  it('should inject data-debug-type when debugFlags.enabled is true', () => {
+    const { getByTestId } = render(
+      <SchemaRendererProvider dataSource={{}} debugFlags={{ enabled: true }}>
+        <SchemaRenderer schema={{ type: 'test-debug-div' }} />
+      </SchemaRendererProvider>,
+    );
+    const el = getByTestId('test-div');
+    expect(el.getAttribute('data-debug-type')).toBe('test-debug-div');
+    // No id on schema, so data-debug-id should not be present
+    expect(el.getAttribute('data-debug-id')).toBeNull();
+  });
+});

package/src/__tests__/SchemaRenderer.expressions.test.tsx

@@ -0,0 +1,131 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRendererContext } from '../context/SchemaRendererContext';
+
+// Simple test component
+const TestComponent = (props: any) => (
+  <div data-testid="test-component" data-disabled={props.disabled || undefined}>
+    {props.content || props.label || 'Test'}
+  </div>
+);
+
+describe('SchemaRenderer Expression Integration', () => {
+  beforeEach(() => {
+    ComponentRegistry.register('test-component', TestComponent);
+  });
+
+  afterEach(() => {
+    ComponentRegistry.unregister?.('test-component');
+  });
+
+  describe('visible / hidden expressions', () => {
+    it('renders when visible is true', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component', visible: true }} />);
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('does not render when visible is false', () => {
+      const { container } = render(<SchemaRenderer schema={{ type: 'test-component', visible: false }} />);
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('evaluates visible expression string', () => {
+      render(
+        <SchemaRendererContext.Provider value={{ dataSource: { role: 'admin' } }}>
+          <SchemaRenderer schema={{ type: 'test-component', visible: '${data.role === "admin"}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('hides when visible expression evaluates to false', () => {
+      const { container } = render(
+        <SchemaRendererContext.Provider value={{ dataSource: { role: 'viewer' } }}>
+          <SchemaRenderer schema={{ type: 'test-component', visible: '${data.role === "admin"}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('hides when hidden is true', () => {
+      const { container } = render(<SchemaRenderer schema={{ type: 'test-component', hidden: true }} />);
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('shows when hidden is false', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component', hidden: false }} />);
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('hides with hiddenOn expression', () => {
+      const { container } = render(
+        <SchemaRendererContext.Provider value={{ dataSource: { status: 'draft' } }}>
+          <SchemaRenderer schema={{ type: 'test-component', hiddenOn: '${data.status === "draft"}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('visible takes precedence over hidden', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component', visible: true, hidden: true }} />);
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled expressions', () => {
+    it('passes disabled=true when disabled expression is true', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component', disabled: true }} />);
+      expect(screen.getByTestId('test-component')).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('evaluates disabled expression string', () => {
+      render(
+        <SchemaRendererContext.Provider value={{ dataSource: { status: 'locked' } }}>
+          <SchemaRenderer schema={{ type: 'test-component', disabled: '${data.status === "locked"}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(screen.getByTestId('test-component')).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('does not set disabled when expression is false', () => {
+      render(
+        <SchemaRendererContext.Provider value={{ dataSource: { status: 'active' } }}>
+          <SchemaRenderer schema={{ type: 'test-component', disabled: '${data.status === "locked"}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(screen.getByTestId('test-component')).not.toHaveAttribute('data-disabled');
+    });
+
+    it('evaluates disabledOn expression', () => {
+      render(
+        <SchemaRendererContext.Provider value={{ dataSource: { readOnly: true } }}>
+          <SchemaRenderer schema={{ type: 'test-component', disabledOn: '${data.readOnly}' }} />
+        </SchemaRendererContext.Provider>
+      );
+      expect(screen.getByTestId('test-component')).toHaveAttribute('data-disabled', 'true');
+    });
+  });
+
+  describe('defaults', () => {
+    it('renders by default when no visibility props are set', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component' }} />);
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('is not disabled by default', () => {
+      render(<SchemaRenderer schema={{ type: 'test-component' }} />);
+      expect(screen.getByTestId('test-component')).not.toHaveAttribute('data-disabled');
+    });
+  });
+});

package/src/__tests__/useNavigationOverlay.test.ts

@@ -198,6 +198,40 @@ describe('useNavigationOverlay', () => {
 
       expect(mockWindowOpen).toHaveBeenCalledWith('/users/456', '_blank');
     });
+
+    it('should delegate to onNavigate with new_window action when onNavigate is provided', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'new_window' },
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '789' });
+      });
+
+      expect(onNavigate).toHaveBeenCalledWith('789', 'new_window');
+      expect(mockWindowOpen).not.toHaveBeenCalled();
+      expect(result.current.isOpen).toBe(false);
+    });
+
+    it('should fallback to window.open when onNavigate is not provided', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'new_window' },
+          objectName: 'accounts',
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '101' });
+      });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith('/accounts/101', '_blank');
+    });
   });
 
   // ============================================================
@@ -413,4 +447,132 @@ describe('useNavigationOverlay', () => {
       });
     });
   });
+
+  // ============================================================
+  // navigation.view property
+  // ============================================================
+
+  describe('navigation.view property', () => {
+    it('should expose the view property from config', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer', view: 'edit_form' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.view).toBe('edit_form');
+    });
+
+    it('should pass view to onNavigate for page mode', () => {
+      const onNavigate = vi.fn();
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'page', view: 'detail_view' },
+          objectName: 'contacts',
+          onNavigate,
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(onNavigate).toHaveBeenCalledWith('123', 'detail_view');
+    });
+
+    it('should include view in new_window URL', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'new_window', view: 'edit_form' },
+          objectName: 'contacts',
+        })
+      );
+
+      act(() => {
+        result.current.handleClick({ _id: '123' });
+      });
+
+      expect(mockWindowOpen).toHaveBeenCalledWith('/contacts/123/edit_form', '_blank');
+    });
+
+    it('should return undefined view when not configured', () => {
+      const { result } = renderHook(() =>
+        useNavigationOverlay({
+          navigation: { mode: 'drawer' },
+          objectName: 'contacts',
+        })
+      );
+
+      expect(result.current.view).toBeUndefined();
+    });
+  });
+
+  // ============================================================
+  // Stale closure prevention
+  // ============================================================
+
+  describe('stale closure prevention', () => {
+    it('should use latest onNavigate after re-render with new callback', () => {
+      const onNavigateV1 = vi.fn();
+      const onNavigateV2 = vi.fn();
+
+      const { result, rerender } = renderHook(
+        ({ onNavigate }) =>
+          useNavigationOverlay({
+            navigation: { mode: 'page' },
+            objectName: 'contacts',
+            onNavigate,
+          }),
+        { initialProps: { onNavigate: onNavigateV1 } }
+      );
+
+      // First click uses v1
+      act(() => {
+        result.current.handleClick({ _id: '1' });
+      });
+      expect(onNavigateV1).toHaveBeenCalledWith('1', 'view');
+      expect(onNavigateV2).not.toHaveBeenCalled();
+
+      // Re-render with new onNavigate
+      rerender({ onNavigate: onNavigateV2 });
+
+      // Second click must use v2 (not stale v1)
+      act(() => {
+        result.current.handleClick({ _id: '2' });
+      });
+      expect(onNavigateV2).toHaveBeenCalledWith('2', 'view');
+      expect(onNavigateV1).toHaveBeenCalledTimes(1); // v1 was not called again
+    });
+
+    it('should use latest onNavigate after navigation config changes from undefined to page', () => {
+      const onNavigate = vi.fn();
+
+      const { result, rerender } = renderHook(
+        ({ navigation }) =>
+          useNavigationOverlay({
+            navigation,
+            objectName: 'contacts',
+            onNavigate,
+          }),
+        { initialProps: { navigation: undefined as NavigationConfig | undefined } }
+      );
+
+      // Click with no config — should still call onNavigate (default page behavior)
+      act(() => {
+        result.current.handleClick({ _id: '1' });
+      });
+      expect(onNavigate).toHaveBeenCalledWith('1', 'view');
+
+      // Re-render with explicit page config
+      rerender({ navigation: { mode: 'page' } });
+
+      // Click should still work (not stale)
+      act(() => {
+        result.current.handleClick({ _id: '2' });
+      });
+      expect(onNavigate).toHaveBeenCalledWith('2', 'view');
+      expect(onNavigate).toHaveBeenCalledTimes(2);
+    });
+  });
 });

package/src/context/SchemaRendererContext.tsx

@@ -1,8 +1,10 @@
 import React, { createContext, useContext, useMemo } from 'react';
+import type { DebugFlags } from '@object-ui/core';
 
 interface SchemaRendererContextType {
   dataSource: any;
   debug?: boolean;
+  debugFlags?: DebugFlags;
 }
 
 const SchemaRendererContext = createContext<SchemaRendererContextType | null>(null);
@@ -12,13 +14,15 @@ export { SchemaRendererContext };
 export const SchemaRendererProvider = ({ 
   children, 
   dataSource, 
-  debug 
+  debug,
+  debugFlags,
 }: { 
   children: React.ReactNode; 
   dataSource: any; 
-  debug?: boolean 
+  debug?: boolean;
+  debugFlags?: DebugFlags;
 }) => {
-  const value = useMemo(() => ({ dataSource, debug }), [dataSource, debug]);
+  const value = useMemo(() => ({ dataSource, debug, debugFlags }), [dataSource, debug, debugFlags]);
   return (
     <SchemaRendererContext.Provider value={value}>
       {children}
@@ -37,7 +41,8 @@ export const useSchemaContext = () => {
 export const useDataScope = (path?: string) => {
   const context = useContext(SchemaRendererContext);
   const dataSource = context?.dataSource;
-  if (!dataSource || !path) return dataSource;
+  if (!path) return undefined;
+  if (!dataSource) return undefined;
   // Simple path resolution for now. In real app might be more complex
   return path.split('.').reduce((acc, part) => acc && acc[part], dataSource);
 }