@syncfusion/ej2-react-form-renderer 0.1.1-beta → 0.1.2-beta

package/README.md

@@ -78,7 +78,7 @@ function App() {
 
   return (
     <FormRenderer
-      dataSchema={schema}
+      schema={schema}
       onSubmit={handleSubmit}
       onChange={handleChange}
     />
@@ -105,8 +105,7 @@ export default App;
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `dataSchema` | `DataSchema \| FormSchema \| string` | Form schema (JSON or object) |
-| `uiSchema` | `UISchema \| string` | Optional UI layout schema |
+| `schema` | `Schema \| FormSchema \| string` | Form schema (JSON or object) |
 | `layout` | `'single' \| 'twocolumn' \| 'threecolumn' \| 'fourcolumn'` | Form layout (when no UI schema) |
 | `onSubmit` | `(args: SubmitEventArgs) => void` | Submit handler |
 | `onChange` | `(args: ChangeEventArgs) => void` | Field change handler |
@@ -125,12 +124,6 @@ export const FormLayout = {
 } as const;
 ```
 
-## Schema Formats
-
-The FormRenderer supports multiple schema formats:
-
-1. **DataSchema**: JSON Schema-compatible format
-2. **UISchema**: Separate UI layout configuration
 
 ## Support
 
@@ -145,4 +138,4 @@ Product support is available through the following channels:
 
 > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.
+© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-form-renderer",
-  "version": "0.1.1-beta",
+  "version": "0.1.2-beta",
   "description": "Form renderer component for rendering dynamic JSON-driven forms with Syncfusion EJ2 React components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -42,7 +42,7 @@
     "@syncfusion/ej2-react-navigations": "*",
     "@syncfusion/ej2-react-notifications": "*",
     "@syncfusion/ej2-react-popups": "*",
-    "@syncfusion/ej2-react-richtexteditor": "^32.1.1",
+    "@syncfusion/ej2-react-richtexteditor": "*",
     "@syncfusion/ej2-react-splitbuttons": "*"
   },
   "devDependencies": {}

package/src/CheckboxGroup.js

@@ -39,7 +39,8 @@ const CheckboxGroup = ({ component, formState, value, onChange, optionRef }) =>
         width: '100%'
     };
     const htmlAttrs = resolveAttributes(component.htmlAttributes);
-    return (_jsx("div", { className: `checkbox-group ${component.cssClass || ''}`, style: containerStyle, ...htmlAttrs, role: "group", "aria-label": groupLabel, title: component.tooltip, children: _jsx("div", { className: "checkbox-group-items", style: itemsStyle, children: (component.options || ['Option 1']).map((option, idx) => {
+    const options = Array.isArray(component.options) ? component.options : ['Option 1'];
+    return (_jsx("div", { className: `checkbox-group ${component.cssClass || ''}`, style: containerStyle, ...htmlAttrs, role: "group", "aria-label": groupLabel, title: component.tooltip, children: _jsx("div", { className: "checkbox-group-items", style: itemsStyle, children: (options).map((option, idx) => {
                 const optionValue = typeof option === 'string' ? option : (option.value ?? option.label ?? option.key);
                 const optionLabel = typeof option === 'string' ? option : (option.label ?? option.value ?? String(optionValue));
                 return (_jsx(CheckBoxComponent, { id: `${component.id}_${idx}`, label: optionLabel, checked: selectedItems.includes(optionValue), disabled: component.disabled, labelPosition: component.checkboxLabelPosition || 'After', change: (e) => handleCheckboxChange(optionValue, e.checked), cssClass: `${component.cssClass}${component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''}`, htmlAttributes: htmlAttrs, ref: optionRef ? (el) => optionRef(el, idx) : undefined }, `${component.id}-${idx}`));

package/src/ConditionalRuleEngine.d.ts

@@ -34,7 +34,7 @@
  * ```
  */
 import React from 'react';
-import type { ConditionType, FormComponentConditions } from '../FormBuilder/types/FormSchema';
+import type { ConditionType, FormComponentConditions, ConditionalDataRule, ChoiceBasedFieldRule } from '../FormBuilder/types/FormSchema';
 /**
  * Form field value type (aligned with FormValidator)
  */
@@ -250,4 +250,46 @@ export declare class ConditionalRuleEngine {
      * ```
      */
     static getConditionalValue(conditions: FormComponentConditions | undefined, formValues: Record<string, FormValueType>): any;
+    /**
+     * Evaluate conditional data availability
+     * Returns true if any conditional data rule's condition is met
+     *
+     * @param conditionalDataRules - Array of ConditionalDataRule objects
+     * @param formValues - Current form field values
+     * @returns Index of first matching rule, or -1 if none match
+     */
+    static evaluateConditionalDataRules(conditionalDataRules: ConditionalDataRule[] | undefined, formValues: Record<string, FormValueType>): number;
+    /**
+   * Get filtered options for a dependent dropdown based on choice-based field rule
+   *
+   * If choiceBasedField rule exists and primary field has a value,
+   * return only the mapped dependent options for that primary value.
+   * Otherwise return all options.
+   *
+   * @param rule - ChoiceBasedFieldRule configuration
+   * @param allDependentOptions - Complete list of dependent field options
+   * @param formValues - Current form values
+   * @param primaryFieldId - ID of primary field
+   * @returns Filtered options array
+   *
+   * @example
+   * ```typescript
+   * const rule = {
+   *   primaryFieldId: 'dept-id',
+   *   choiceMapping: {
+   *     'Marketing': ['Markers', 'Sticky Notes'],
+   *     'Finance': ['Calculator']
+   *   }
+   * };
+   *
+   * const filtered = ConditionalRuleEngine.getChoiceBasedOptions(
+   *   rule,
+   *   ['Markers', 'Sticky Notes', 'Calculator'],
+   *   { 'dept-id': 'Marketing' },
+   *   'dept-id'
+   * );
+   * // Returns: ['Markers', 'Sticky Notes']
+   * ```
+   */
+    static getChoiceBasedOptions(rule: ChoiceBasedFieldRule, allDependentOptions: string[], formValues: Record<string, FormValueType>, primaryFieldId: string): string[];
 }

package/src/ConditionalRuleEngine.js

@@ -486,4 +486,81 @@ export class ConditionalRuleEngine {
             return undefined;
         }
     }
+    /**
+     * Evaluate conditional data availability
+     * Returns true if any conditional data rule's condition is met
+     *
+     * @param conditionalDataRules - Array of ConditionalDataRule objects
+     * @param formValues - Current form field values
+     * @returns Index of first matching rule, or -1 if none match
+     */
+    static evaluateConditionalDataRules(conditionalDataRules, formValues) {
+        if (!conditionalDataRules || !Array.isArray(conditionalDataRules)) {
+            return -1;
+        }
+        for (let i = 0; i < conditionalDataRules.length; i++) {
+            const rule = conditionalDataRules[i];
+            if (this.evaluateCondition(rule.condition, formValues)) {
+                return i; // Return index of first matching rule
+            }
+        }
+        return -1;
+    }
+    /**
+   * Get filtered options for a dependent dropdown based on choice-based field rule
+   *
+   * If choiceBasedField rule exists and primary field has a value,
+   * return only the mapped dependent options for that primary value.
+   * Otherwise return all options.
+   *
+   * @param rule - ChoiceBasedFieldRule configuration
+   * @param allDependentOptions - Complete list of dependent field options
+   * @param formValues - Current form values
+   * @param primaryFieldId - ID of primary field
+   * @returns Filtered options array
+   *
+   * @example
+   * ```typescript
+   * const rule = {
+   *   primaryFieldId: 'dept-id',
+   *   choiceMapping: {
+   *     'Marketing': ['Markers', 'Sticky Notes'],
+   *     'Finance': ['Calculator']
+   *   }
+   * };
+   *
+   * const filtered = ConditionalRuleEngine.getChoiceBasedOptions(
+   *   rule,
+   *   ['Markers', 'Sticky Notes', 'Calculator'],
+   *   { 'dept-id': 'Marketing' },
+   *   'dept-id'
+   * );
+   * // Returns: ['Markers', 'Sticky Notes']
+   * ```
+   */
+    static getChoiceBasedOptions(rule, allDependentOptions, formValues, primaryFieldId) {
+        try {
+            // Get primary field value from form
+            const primaryValue = formValues[primaryFieldId];
+            if (primaryValue === null || primaryValue === undefined) {
+                // No primary value selected - return all or empty based on rule config
+                return rule.showAllWhenNotMapped ? allDependentOptions : [];
+            }
+            // Ensure primary value is treated as string for comparison
+            const primaryValueStr = String(primaryValue);
+            // Check if this primary value is mapped in the rule
+            if (primaryValueStr in rule.choiceMapping) {
+                const mappedOptions = rule.choiceMapping[primaryValueStr];
+                // Validate mapped options exist in all options (safety check)
+                return mappedOptions.filter(opt => allDependentOptions.includes(opt));
+            }
+            // Primary value not mapped - return all or empty based on rule config
+            return rule.showAllWhenNotMapped ? allDependentOptions : [];
+        }
+        catch (error) {
+            console.error('Error in getChoiceBasedOptions:', error);
+            // Safe default - return all options
+            return allDependentOptions;
+        }
+    }
 }

package/src/DataGridComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useImperativeHandle, useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Edit, Page, Resize, Sort, } from '@syncfusion/ej2-react-grids';
+import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Edit, Page, Filter, Resize, Sort, } from '@syncfusion/ej2-react-grids';
 (() => {
     try {
         const filterPrefix = '[EJ2Grid.Warning]';
@@ -36,7 +36,7 @@ import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Edit
  * - Maps GridColumn.validationRules to ColumnDirective.validationRules
  * - Renders Syncfusion toolbar with CRUD actions based on allowAdding/Editing/Deleting
  */
-export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [], height = '200px', width = '100%', locale, cssClass, pageSize = 6, allowPaging = true, allowAdding = true, allowEditing = true, allowDeleting = true, onDataChange }, ref) => {
+export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [], height = '200px', width = '100%', locale, cssClass, pageSize = 6, allowPaging = true, allowAdding = true, allowEditing = true, allowDeleting = true, allowFiltering = false, onDataChange }, ref) => {
     // Internal state: maintain current grid data
     const [_currentData, setCurrentData] = useState(Array.isArray(dataSource) ? dataSource : []);
     const gridRef = useRef(null);
@@ -55,11 +55,14 @@ export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [
             }
             setTimeout(() => {
                 if (gridRef.current?.refresh) {
+                    if (dataSource && Array.isArray(dataSource) && dataSource.length > 0) {
+                        gridRef.current.dataSource = dataSource;
+                    }
                     gridRef.current.refresh();
                 }
             }, 10);
         }
-    }, [columns, allowAdding, allowDeleting, allowEditing, allowPaging, pageSize]);
+    }, [columns, allowAdding, allowDeleting, allowEditing, allowPaging, pageSize, allowFiltering]);
     useEffect(() => {
         const normalized = Array.isArray(dataSource) ? dataSource : [];
         setCurrentData(normalized);
@@ -134,11 +137,11 @@ export const DataGridComponent = React.forwardRef(({ id, columns, dataSource = [
      * Memoize toolbar to prevent unnecessary re-renders
      */
     const toolbarConfig = useMemo(() => buildToolbar(), [buildToolbar]);
-    return (_jsx("div", { className: "datagrid-wrapper", style: { width, height: 'auto' }, children: _jsx("div", { className: "datagrid-grid", children: _jsxs(GridComponent, { ref: gridRef, id: id, dataSource: _currentData, allowPaging: allowPaging, pageSettings: { pageSize }, editSettings: {
+    return (_jsx("div", { className: "datagrid-wrapper", style: { width, height: 'auto' }, children: _jsx("div", { className: "datagrid-grid", children: _jsxs(GridComponent, { ref: gridRef, id: id, dataSource: _currentData, allowPaging: allowPaging, filterSettings: { mode: "Immediate" }, pageSettings: { pageSize }, editSettings: {
                     allowEditing,
                     allowAdding,
                     allowDeleting,
                     mode: 'Normal',
-                }, locale: locale || 'en-US', cssClass: cssClass, toolbar: toolbarConfig, actionComplete: handleActionComplete, height: typeof height === 'string' ? height : `${height}px`, width: typeof width === 'string' ? width : `${width}px`, allowSorting: true, allowFiltering: false, allowSelection: true, children: [_jsx(ColumnsDirective, { children: columns && columns.length > 0 && columns.map((col) => (_jsx(ColumnDirective, { field: col.field, headerText: col.headerText, type: col.type || 'string', isPrimaryKey: col.isPrimaryKey || false, width: col.width, format: col.type === 'date' ? (col.format || 'MM/dd/yyyy') : col.format, editType: col.editType, validationRules: mapValidationRules(col) }, col.field))) }), _jsx(Inject, { services: [Edit, Toolbar, Page, Resize, Sort] })] }) }) }));
+                }, locale: locale || 'en-US', cssClass: cssClass, toolbar: toolbarConfig, actionComplete: handleActionComplete, height: typeof height === 'string' ? height : `${height}px`, width: typeof width === 'string' ? width : `${width}px`, allowSorting: true, allowFiltering: allowFiltering, allowSelection: true, children: [_jsx(ColumnsDirective, { children: columns && columns.length > 0 && columns.map((col) => (_jsx(ColumnDirective, { field: col.field, headerText: col.headerText, type: col.type || 'string', isPrimaryKey: col.isPrimaryKey || false, width: col.width, format: col.type === 'date' ? (col.format || 'MM/dd/yyyy') : col.format, editType: col.editType, validationRules: mapValidationRules(col) }, col.field))) }), _jsx(Inject, { services: [Edit, Toolbar, Page, Resize, Sort, Filter] })] }) }) }));
 });
 DataGridComponent.displayName = 'DataGridComponent';

package/src/FormRenderer.d.ts

@@ -38,13 +38,7 @@ export interface FormRendererProps extends Omit<React.HTMLAttributes<HTMLDivElem
      * - FormSchema object (components converted to DataSchema)
      * - DataSchema object (used directly)
      */
-    dataSchema?: DataSchema | string | FormSchema | any;
-    /**
-     * UI Schema - can be provided as:
-     * - JSON string (validated and parsed)
-     * - UISchema object (used directly)
-     */
-    uiSchema?: UISchema | string;
+    schema?: DataSchema | string | FormSchema | any;
     /**
      * Specifies the locale/language for the form component.
      * Supports locale-specific formatting and translations.