@object-ui/react 0.3.1 → 2.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @object-ui/react@2.0.0 build /home/runner/work/objectui/objectui/packages/react
+> tsc
+

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @object-ui/react
 
+## 2.0.0
+
+### Major Changes
+
+- b859617: Release v1.0.0 — unify all package versions to 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [b859617]
+  - @object-ui/types@2.0.0
+  - @object-ui/core@2.0.0
+  - @object-ui/i18n@2.0.0
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/LazyPluginLoader.d.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 React from 'react';
+export interface LazyPluginOptions {
+    /**
+     * Fallback component to show while loading
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Number of retry attempts on load failure (default: 2)
+     */
+    retries?: number;
+    /**
+     * Delay in ms between retries (default: 1000)
+     */
+    retryDelay?: number;
+    /**
+     * Custom error fallback component
+     */
+    errorFallback?: React.ComponentType<{
+        error: Error;
+        retry: () => void;
+    }>;
+}
+/**
+ * Create a lazy-loaded plugin component with Suspense wrapper
+ *
+ * @param importFn - Dynamic import function that returns a module with default export
+ * @param options - Configuration options for the lazy plugin
+ * @returns A component that lazy loads the plugin
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid')
+ * );
+ *
+ * // With custom fallback
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   { fallback: <div>Loading grid...</div> }
+ * );
+ *
+ * // With retry and error handling
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   {
+ *     retries: 3,
+ *     errorFallback: ({ error, retry }) => (
+ *       <div>
+ *         <p>Failed to load: {error.message}</p>
+ *         <button onClick={retry}>Retry</button>
+ *       </div>
+ *     ),
+ *   }
+ * );
+ * ```
+ */
+export declare function createLazyPlugin<P extends object = any>(importFn: () => Promise<{
+    default: React.ComponentType<P>;
+}>, options?: LazyPluginOptions): React.ComponentType<P>;
+/**
+ * Preload a plugin module without rendering it.
+ * Useful for preloading plugins that will be needed soon.
+ *
+ * @param importFn - Dynamic import function
+ * @returns Promise that resolves when the module is loaded
+ *
+ * @example
+ * ```tsx
+ * // Preload on hover
+ * const loadGrid = () => import('@object-ui/plugin-grid');
+ * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
+ * ```
+ */
+export declare function preloadPlugin<T = unknown>(importFn: () => Promise<T>): Promise<T>;

package/dist/LazyPluginLoader.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { lazy, Suspense, Component } from 'react';
+class PluginErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { hasError: false, error: null }
+        });
+        Object.defineProperty(this, "handleRetry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: null });
+            }
+        });
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            const FallbackComponent = this.props.fallback;
+            if (FallbackComponent) {
+                return _jsx(FallbackComponent, { error: this.state.error, retry: this.handleRetry });
+            }
+            return null;
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Create a lazy-loaded import function with retry support
+ */
+function createRetryImport(importFn, retries, retryDelay) {
+    return () => {
+        let attempt = 0;
+        const tryImport = () => importFn().catch((err) => {
+            attempt++;
+            if (attempt <= retries) {
+                return new Promise((resolve) => setTimeout(() => resolve(tryImport()), retryDelay));
+            }
+            throw err;
+        });
+        return tryImport();
+    };
+}
+/**
+ * Create a lazy-loaded plugin component with Suspense wrapper
+ *
+ * @param importFn - Dynamic import function that returns a module with default export
+ * @param options - Configuration options for the lazy plugin
+ * @returns A component that lazy loads the plugin
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid')
+ * );
+ *
+ * // With custom fallback
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   { fallback: <div>Loading grid...</div> }
+ * );
+ *
+ * // With retry and error handling
+ * const ObjectGrid = createLazyPlugin(
+ *   () => import('@object-ui/plugin-grid'),
+ *   {
+ *     retries: 3,
+ *     errorFallback: ({ error, retry }) => (
+ *       <div>
+ *         <p>Failed to load: {error.message}</p>
+ *         <button onClick={retry}>Retry</button>
+ *       </div>
+ *     ),
+ *   }
+ * );
+ * ```
+ */
+export function createLazyPlugin(importFn, options) {
+    const { retries = 2, retryDelay = 1000, errorFallback } = options || {};
+    const retryImport = retries > 0
+        ? createRetryImport(importFn, retries, retryDelay)
+        : importFn;
+    const LazyComponent = lazy(retryImport);
+    const PluginWrapper = (props) => {
+        const content = (_jsx(Suspense, { fallback: options?.fallback || null, children: _jsx(LazyComponent, { ...props }) }));
+        if (errorFallback) {
+            return (_jsx(PluginErrorBoundary, { fallback: errorFallback, children: content }));
+        }
+        return content;
+    };
+    return PluginWrapper;
+}
+/**
+ * Preload a plugin module without rendering it.
+ * Useful for preloading plugins that will be needed soon.
+ *
+ * @param importFn - Dynamic import function
+ * @returns Promise that resolves when the module is loaded
+ *
+ * @example
+ * ```tsx
+ * // Preload on hover
+ * const loadGrid = () => import('@object-ui/plugin-grid');
+ * <button onMouseEnter={() => preloadPlugin(loadGrid)}>Show Grid</button>
+ * ```
+ */
+export function preloadPlugin(importFn) {
+    return importFn();
+}

package/dist/SchemaRenderer.js

@@ -6,26 +6,58 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef } from 'react';
-import { ComponentRegistry } from '@object-ui/core';
+import React, { forwardRef, useContext, useMemo } from 'react';
+import { ComponentRegistry, ExpressionEvaluator } from '@object-ui/core';
+import { SchemaRendererContext } from './context/SchemaRendererContext';
 export const SchemaRenderer = forwardRef(({ schema, ...props }, _ref) => {
-    if (!schema)
+    const context = useContext(SchemaRendererContext);
+    const dataSource = context?.dataSource || {};
+    // Evaluate schema expressions against the data source
+    const evaluatedSchema = useMemo(() => {
+        if (!schema || typeof schema === 'string')
+            return schema;
+        const evaluator = new ExpressionEvaluator({ data: dataSource });
+        // Shallow copy
+        const newSchema = { ...schema };
+        // COMPAT: Hoist 'properties' up to schema level
+        // This allows support for strict configs that wrap all props in 'properties'
+        if (newSchema.properties) {
+            Object.assign(newSchema, newSchema.properties);
+        }
+        // Evaluate 'content' (common in Text, Button)
+        if (typeof newSchema.content === 'string') {
+            newSchema.content = evaluator.evaluate(newSchema.content);
+        }
+        // Evaluate 'props'
+        if (newSchema.props) {
+            const newProps = { ...newSchema.props };
+            for (const [key, val] of Object.entries(newProps)) {
+                newProps[key] = evaluator.evaluate(val);
+            }
+            newSchema.props = newProps;
+        }
+        return newSchema;
+    }, [schema, dataSource]);
+    if (!evaluatedSchema)
         return null;
     // If schema is just a string, render it as text
-    if (typeof schema === 'string')
-        return _jsx(_Fragment, { children: schema });
-    const Component = ComponentRegistry.get(schema.type);
+    if (typeof evaluatedSchema === 'string')
+        return _jsx(_Fragment, { children: evaluatedSchema });
+    const Component = ComponentRegistry.get(evaluatedSchema.type);
     if (!Component) {
-        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: schema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(schema, null, 2) })] }));
+        return (_jsxs("div", { className: "p-4 border border-red-500 rounded text-red-500 bg-red-50 my-2", children: ["Unknown component type: ", _jsx("strong", { children: evaluatedSchema.type }), _jsx("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(evaluatedSchema, null, 2) })] }));
     }
     // Note: We don't forward the ref to the Component because components in the registry
     // may not support refs. The SchemaRenderer itself can still receive refs for its own use.
+    // Extract schema metadata properties that should NOT be passed as React props
+    const { type: _type, children: _children, body: _body, schema: _schema, visible: _visible, visibleOn: _visibleOn, hidden: _hidden, hiddenOn: _hiddenOn, disabled: _disabled, disabledOn: _disabledOn, ...componentProps } = evaluatedSchema;
     return React.createElement(Component, {
-        schema,
-        ...(schema.props || {}),
-        className: schema.className,
-        'data-obj-id': schema.id,
-        'data-obj-type': schema.type,
+        schema: evaluatedSchema,
+        ...componentProps, // Spread non-metadata schema properties as props
+        ...(evaluatedSchema.props || {}), // Override with explicit props if provided
+        className: evaluatedSchema.className,
+        'data-obj-id': evaluatedSchema.id,
+        'data-obj-type': evaluatedSchema.type,
         ...props
     });
 });

package/dist/components/form/FieldFactory.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveI18nLabel } from '../../utils/i18n';
 /**
  * FieldFactory component that renders different input types based on
  * the widget property or field type
@@ -11,6 +12,10 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
     const widgetType = field.widget || 'text';
     const fieldName = field.field;
     const error = errors[fieldName];
+    // Resolve I18nLabel values to plain strings
+    const fieldLabel = resolveI18nLabel(field.label);
+    const fieldPlaceholder = resolveI18nLabel(field.placeholder);
+    const fieldHelpText = resolveI18nLabel(field.helpText);
     // Helper function to handle multiple select value conversion
     const handleMultipleSelectValue = (value) => {
         if (extendedField.multiple && value instanceof HTMLCollection) {
@@ -19,14 +24,13 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         return value;
     };
     // Handle conditional visibility
-    // Note: visibleOn expression evaluation is not yet implemented
-    // Fields are always visible unless explicitly hidden
-    // Skip if explicitly hidden
+    // Fields are hidden when explicitly hidden or when visibleOn evaluates to false
+    // Note: dependsOn is handled at the FormSectionRenderer level
     if (field.hidden) {
         return null;
     }
     // Common field wrapper
-    const renderField = (input) => (_jsxs("div", { className: "space-y-2", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), input, field.helpText && (_jsx("p", { className: "text-sm text-gray-500", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600", children: error.message }))] }));
+    const renderField = (input) => (_jsxs("div", { className: "space-y-2", children: [fieldLabel && (_jsxs("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: [fieldLabel, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), input, fieldHelpText && (_jsx("p", { className: "text-sm text-gray-500", children: fieldHelpText })), error && (_jsx("p", { className: "text-sm text-red-600", children: error.message }))] }));
     // Render based on widget type
     switch (widgetType.toLowerCase()) {
         case 'text':
@@ -35,71 +39,71 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         case 'password':
         case 'url':
         case 'tel':
-            return renderField(_jsx("input", { id: fieldName, type: widgetType === 'string' ? 'text' : widgetType, placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: widgetType === 'string' ? 'text' : widgetType, placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'number':
         case 'integer':
         case 'float':
-            return renderField(_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: widgetType === 'integer' ? '1' : 'any', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: widgetType === 'integer' ? '1' : 'any', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     valueAsNumber: true,
                 }) }));
         case 'checkbox':
         case 'boolean':
-            return (_jsxs("div", { className: "flex items-start space-x-2", children: [_jsx("input", { id: fieldName, type: "checkbox", disabled: disabled, className: "mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50", ...register(fieldName) }), _jsxs("div", { className: "flex-1", children: [field.label && (_jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), field.helpText && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: field.helpText })), error && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: error.message }))] })] }));
+            return (_jsxs("div", { className: "flex items-start space-x-2", children: [_jsx("input", { id: fieldName, type: "checkbox", disabled: disabled, className: "mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50", ...register(fieldName) }), _jsxs("div", { className: "flex-1", children: [fieldLabel && (_jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [fieldLabel, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), fieldHelpText && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: fieldHelpText })), error && (_jsx("p", { className: "text-sm text-red-600 mt-1", children: error.message }))] })] }));
         case 'textarea':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder, disabled: disabled, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder, disabled: disabled, rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'select':
         case 'dropdown':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'date':
-            return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "date", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'datetime':
         case 'datetime-local':
-            return renderField(_jsx("input", { id: fieldName, type: "datetime-local", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "datetime-local", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'time':
-            return renderField(_jsx("input", { id: fieldName, type: "time", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "time", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'currency':
-            return renderField(_jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-3 top-2 text-gray-500", children: "$" }), _jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", className: "w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                            required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("span", { className: "absolute left-3 top-2 text-gray-500", children: "$" }), _jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: "0.01", className: "w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${fieldLabel || fieldName} is required` : false,
                             valueAsNumber: true,
                         }) })] }));
         case 'percent':
-            return renderField(_jsxs("div", { className: "relative", children: [_jsx("input", { id: fieldName, type: "number", placeholder: field.placeholder, disabled: disabled, step: "0.01", min: "0", max: "100", className: "w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                            required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsxs("div", { className: "relative", children: [_jsx("input", { id: fieldName, type: "number", placeholder: fieldPlaceholder, disabled: disabled, step: "0.01", min: "0", max: "100", className: "w-full pr-8 pl-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                            required: field.required ? `${fieldLabel || fieldName} is required` : false,
                             valueAsNumber: true,
                         }) }), _jsx("span", { className: "absolute right-3 top-2 text-gray-500", children: "%" })] }));
         case 'phone':
-            return renderField(_jsx("input", { id: fieldName, type: "tel", placeholder: field.placeholder || '+1 (555) 000-0000', disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "tel", placeholder: fieldPlaceholder || '+1 (555) 000-0000', disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'markdown':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter markdown text...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter markdown text...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'html':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter HTML...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter HTML...', disabled: disabled, rows: 8, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'file':
             return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(','), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'image':
             return renderField(_jsx("input", { id: fieldName, type: "file", disabled: disabled, multiple: extendedField.multiple, accept: extendedField.accept?.join(',') || 'image/*', className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
         case 'location':
             return renderField(_jsxs("div", { className: "space-y-2", children: [_jsx("input", { id: `${fieldName}-lat`, type: "number", placeholder: "Latitude", disabled: disabled, step: "any", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(`${fieldName}.lat`, {
@@ -112,23 +116,23 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
         case 'lookup':
         case 'master_detail':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select an option' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'user':
         case 'owner':
             return renderField(_jsxs("select", { id: fieldName, disabled: disabled, multiple: extendedField.multiple, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     setValueAs: handleMultipleSelectValue,
-                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: field.placeholder || 'Select user' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
+                }), children: [!extendedField.multiple && _jsx("option", { value: "", children: fieldPlaceholder || 'Select user' }), extendedField.options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
         case 'formula':
         case 'summary':
         case 'auto_number':
             // Read-only computed fields - display as disabled text input
             return renderField(_jsx("input", { id: fieldName, type: "text", disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
         case 'object':
-            return renderField(_jsx("textarea", { id: fieldName, placeholder: field.placeholder || 'Enter JSON object...', disabled: disabled, rows: 6, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("textarea", { id: fieldName, placeholder: fieldPlaceholder || 'Enter JSON object...', disabled: disabled, rows: 6, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed font-mono text-sm", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                     validate: (value) => {
                         if (!value)
                             return true;
@@ -143,14 +147,14 @@ export const FieldFactory = ({ field, methods, disabled = false, }) => {
                 }) }));
         case 'vector':
             // Vector fields are typically read-only or require specialized input
-            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder || 'Vector data (read-only)', disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: fieldPlaceholder || 'Vector data (read-only)', disabled: true, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 cursor-not-allowed text-gray-600", ...register(fieldName) }));
         case 'grid':
             // Grid fields require complex table/grid editor - placeholder for now
             return renderField(_jsx("div", { className: "w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600", children: _jsx("p", { className: "text-sm", children: "Grid editor not yet implemented" }) }));
         default:
             // Default to text input
-            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: field.placeholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
-                    required: field.required ? `${field.label || fieldName} is required` : false,
+            return renderField(_jsx("input", { id: fieldName, type: "text", placeholder: fieldPlaceholder, disabled: disabled, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed", ...register(fieldName, {
+                    required: field.required ? `${fieldLabel || fieldName} is required` : false,
                 }) }));
     }
 };

package/dist/components/form/FormRenderer.js

@@ -9,6 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { FieldFactory } from './FieldFactory';
+import { ExpressionEvaluator } from '@object-ui/core';
+import { resolveI18nLabel } from '../../utils/i18n';
 /**
  * FormRenderer component that renders forms based on FormViewSchema
  * from @objectstack/spec
@@ -58,6 +60,33 @@ const COL_SPAN = {
     3: 'col-span-3',
     4: 'col-span-4',
 };
+/**
+ * Evaluate whether a field should be visible based on visibleOn expression
+ * and dependsOn parent field value.
+ */
+function evaluateFieldVisibility(fieldConfig, formValues) {
+    // If explicitly hidden, skip
+    if (fieldConfig.hidden) {
+        return false;
+    }
+    // Evaluate visibleOn expression
+    if (fieldConfig.visibleOn) {
+        try {
+            const evaluator = new ExpressionEvaluator({ data: formValues, form: formValues });
+            return evaluator.evaluateCondition(fieldConfig.visibleOn);
+        }
+        catch {
+            // On error, default to visible
+            return true;
+        }
+    }
+    // Evaluate dependsOn: field is hidden if parent field has no value
+    if (fieldConfig.dependsOn) {
+        const parentValue = formValues[fieldConfig.dependsOn];
+        return parentValue !== undefined && parentValue !== null && parentValue !== '';
+    }
+    return true;
+}
 /**
  * Renders a form section with grid layout
  */
@@ -65,17 +94,30 @@ const FormSectionRenderer = ({ section, methods, disabled = false, }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(section.collapsed || false);
     // Determine grid columns based on section.columns
     const gridCols = GRID_COLS[section.columns || 1];
+    // Collect whether there are any conditional fields
+    const hasConditionalFields = React.useMemo(() => {
+        return section.fields.some((field) => {
+            if (typeof field === 'string')
+                return false;
+            return !!field.dependsOn || !!field.visibleOn;
+        });
+    }, [section.fields]);
+    // Watch form values for conditional field evaluation
+    // Only watch when there are fields with dependsOn or visibleOn to avoid
+    // unnecessary re-renders in forms without conditional fields.
+    const allFormValues = methods.watch();
+    const formValues = hasConditionalFields ? allFormValues : undefined;
     const handleToggleCollapse = () => {
         if (section.collapsible) {
             setIsCollapsed(!isCollapsed);
         }
     };
-    return (_jsxs("div", { className: "border rounded-lg p-4", children: [section.label && (_jsxs("div", { className: `flex items-center justify-between mb-4 ${section.collapsible ? 'cursor-pointer' : ''}`, onClick: handleToggleCollapse, children: [_jsx("h3", { className: "text-lg font-semibold", children: section.label }), section.collapsible && (_jsx("span", { className: "text-sm text-gray-500", children: isCollapsed ? '▶' : '▼' }))] })), !isCollapsed && (_jsx("div", { className: `grid ${gridCols} gap-4`, children: section.fields.map((field, index) => {
+    return (_jsxs("div", { className: "border rounded-lg p-4", children: [section.label && (_jsxs("div", { className: `flex items-center justify-between mb-4 ${section.collapsible ? 'cursor-pointer' : ''}`, onClick: handleToggleCollapse, children: [_jsx("h3", { className: "text-lg font-semibold", children: resolveI18nLabel(section.label) }), section.collapsible && (_jsx("span", { className: "text-sm text-gray-500", children: isCollapsed ? '▶' : '▼' }))] })), !isCollapsed && (_jsx("div", { className: `grid ${gridCols} gap-4`, children: section.fields.map((field, index) => {
                     // Handle both string fields (legacy) and FormFieldSchema objects
                     const fieldName = typeof field === 'string' ? field : field.field;
                     const fieldConfig = typeof field === 'string' ? { field: fieldName } : field;
-                    // Skip hidden fields
-                    if (fieldConfig.hidden) {
+                    // Evaluate visibility: static hidden, visibleOn expression, dependsOn parent
+                    if (!evaluateFieldVisibility(fieldConfig, formValues || {})) {
                         return null;
                     }
                     // Calculate colSpan for grid