feat: Add dynamic uiSchema support for array items (#4675)

* feat(ArrayField): add dynamic uiSchema function support

Enhances the ArrayField component to support dynamic uiSchema generation through a function-based approach, allowing UI schemas to be conditionally created based on:
- Item data content
- Item index
- Form context

This maintains backward compatibility with existing static uiSchema objects while enabling more flexible, context-aware UI rendering for array items.

Adds comprehensive documentation with examples showing practical use cases and benefits.

* feat(ArrayField): implement dynamic uiSchema.items function support

Enhances ArrayField component to properly handle dynamic uiSchema.items functions:

- Improves type safety with new ArrayElement utility type
- Adds proper function call handling for both normal and fixed arrays
- Ensures graceful error handling and fallback to empty object
- Correctly passes item data, index and formContext to function
- Adds comprehensive test suite for dynamic uiSchema functionality

This feature allows for conditional UI rendering based on item data,
significantly improving form customization capabilities.

* fix: improve error messages for dynamic uiSchema functions

- Clarifies error messages by adding "item at" to provide better context when dynamic uiSchema functions fail
- Adds test case for handling errors in dynamic uiSchema functions for fixed arrays
- Ensures consistent error handling between regular and fixed array implementations

This improves debugging experience for developers using dynamic uiSchema functionality.

* fix(ArrayField): allow undefined UI schema for array items

Updates the type annotations in ArrayField component to accept undefined
as a valid type for itemUiSchema. This preserves backward compatibility
by not defaulting to an empty object when uiSchema.items is undefined.

Previously, the code always defaulted to an empty object which could
cause unexpected behavior when checking for the existence of UI schema.

* fix: preserve undefined values in uiSchema handling

Modifies the ArrayField component to properly handle undefined uiSchema values
instead of converting them to empty objects. This maintains backward compatibility
and prevents unnecessary props from being passed to child components.

The change:
- Only applies truthy results from dynamic uiSchema functions
- Preserves undefined values in static object cases
- Updates snapshots to reflect the removed empty uiSchema objects

This fixes inconsistent behavior when working with conditionally defined UI schemas.

* fix: add id to Fieldset component in ArrayFieldTemplate

Propagates the idSchema.$id to the Fieldset component in the ArrayFieldTemplate,
ensuring consistent and accessible ID attributes in the generated HTML.

Updates test snapshots to reflect the new ID values, replacing previously null
or auto-generated IDs with consistent "root" identifiers and related ARIA
attribute references.

* docs: enhance dynamic uiSchema documentation with examples and best practices

Expands DYNAMIC_UISCHEMA_EXAMPLES.md with:
- Additional examples for falsy return values and fixed arrays
- Detailed notes on handling new items and error cases
- Performance considerations and optimization techniques
- Clarified behavior documentation for dynamic UI schemas

Improves developer experience by providing comprehensive guidance
for implementing dynamic UI schemas effectively.

* fix: replace nanoid with lodash/uniqueId and handle null uiSchema

- Replaces nanoid with lodash/uniqueId for array item ID generation
- Adds prefix "rjsf-array-item-" to generated IDs for better debugging
- Adds null/undefined checks for uiSchema in ArrayField and getUiOptions
- Adds NX Cloud ID to configuration

This change improves robustness when handling undefined UI schemas and
provides more consistent ID generation for array items.

* fix: correct CheckboxWidget event handlers and enhance getUiOptions

- Updates CheckboxWidget _onBlur and _onFocus handlers to use target.checked instead of target.value
- Adds tests for getUiOptions when uiSchema is undefined or null
- Removes nxCloudId from nx.json configuration

* refactor(ArrayField): extract UI schema computation logic and fix checkbox value handling

Refactors ArrayField by extracting computeItemUiSchema helper method to eliminate duplicate code
- Creates a shared private method for computing item UI schema that handles both function and object cases
- Used in both regular arrays and fixed arrays rendering paths
- Improves error handling for dynamic UI schema functions

Fixes CheckboxWidget components in Fluent UI and MUI packages:
- Changes onBlur/onFocus handlers to pass the checkbox checked state instead of its value

Fixes getDisplayLabel to safely handle undefined uiSchema

* fix: pass checkbox state in onFocus and onBlur callbacks

Updates all CheckboxWidget implementations to use the actual checked state
from the event target in onFocus and onBlur handlers instead of the
component's value prop.

This ensures callbacks receive the current checkbox state rather than
potentially stale values from the component props.

* fix: ensure validator passed in Form rerenders & prevent null schema errors

This commit fixes two potential issues:

1. Updates `createComponent` test utility to ensure Form components always receive
   a validator prop when rerendering, preventing potential test failures

2. Adds null checks for rootSchema in SchemaUtils to prevent errors when
   schema is undefined or null

* fix: use current value instead of event target in checkbox onFocus/onBlur

Updates focus and blur event handlers in checkbox widgets across all UI libraries to use the current value state instead of reading from event target.

This ensures consistency across implementations and fixes potential issues where the event target might not correctly reflect the current checkbox state.

* docs: updated the docs - added support for dynamic UI schema in array fields

The change includes:
- documentation with TypeScript examples
- Updated array and uiSchema documentation to reference the new capabilities

Closes #4706

* docs(migration): add documentation for dynamic UI schema for array items

Extends the v6.x upgrade guide to document the new feature that allows dynamic UI schema generation for array items.

Includes a code example demonstrating the feature and references additional documentation.

* Update CHANGELOG.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/migration-guides/v6.x upgrade guide.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/migration-guides/v6.x upgrade guide.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/json-schema/arrays.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/api-reference/dynamic-ui-schema-examples.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/api-reference/dynamic-ui-schema-examples.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/api-reference/uiSchema.md

Co-authored-by: Heath C <[email protected]>

* Update packages/docs/docs/api-reference/dynamic-ui-schema-examples.md

Co-authored-by: Heath C <[email protected]>

* docs: added about correcting checkbox widget focus handlers across all UI libraries

Fixes the checkbox widget to use current value instead of event target in
onFocus/onBlur handlers across all UI libraries:
- core
- chakra-ui
- daisyui
- fluentui-rc
- mui
- primereact
- semantic-ui

Fixes #4704

---------

Co-authored-by: Heath C <[email protected]>

Author: chathuraa

CHANGELOG.md

@@ -15,6 +15,47 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+
+# 6.0.0-beta.14
+
+## @rjsf/core
+
+- Added support for dynamic UI schema in array fields - the `items` property in `uiSchema` can now accept a function that returns a UI schema based on the array item's data, index, and form context ([#4706](https://github.com/rjsf-team/react-jsonschema-form/pull/4706))
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/utils
+
+- Updated `UiSchema` type to support dynamic array item UI schemas - the `items` property can now be either a `UiSchema` object or a function that returns a `UiSchema` ([#4706](https://github.com/rjsf-team/react-jsonschema-form/pull/4706))
+
+## @rjsf/chakra-ui
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/daisyui
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/fluentui-rc
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/mui
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/primereact
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## @rjsf/semantic-ui
+
+- Fixed checkbox widget to use current value instead of event target in onFocus/onBlur handlers, fixing [#4704](https://github.com/rjsf-team/react-jsonschema-form/issues/4704)
+
+## Dev / docs / playground
+
+- Added comprehensive documentation for dynamic UI schema feature with TypeScript examples ([#4706](https://github.com/rjsf-team/react-jsonschema-form/pull/4706))
+- Updated array documentation to reference the new dynamic UI schema capabilities ([#4706](https://github.com/rjsf-team/react-jsonschema-form/pull/4706))
+
 # 6.0.0-beta.13
 
 ## @rjsf/shadcn

packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -48,8 +48,8 @@ export default function CheckboxWidget<
   const description = options.description || schema.description;
 
   const _onChange = ({ checked }: CheckboxCheckedChangeDetails) => onChange(checked);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.checked);
 
   const chakraProps = getChakra({ uiSchema });
 

packages/core/src/components/fields/ArrayField.tsx

@@ -22,7 +22,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import { nanoid } from 'nanoid';
+import uniqueId from 'lodash/uniqueId';
 
 /** Type used to represent the keyed form data used in the state */
 type KeyedFormDataType<T> = { key: string; item: T };
@@ -37,7 +37,7 @@ type ArrayFieldState<T> = {
 
 /** Used to generate a unique ID for an element in a row */
 function generateRowId() {
-  return nanoid();
+  return uniqueId('rjsf-array-item-');
 }
 
 /** Converts the `formData` into `KeyedFormDataType` data, using the `generateRowId()` function to create the key
@@ -423,6 +423,39 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     onChange(value, undefined, idSchema && idSchema.$id);
   };
 
+  /** Helper method to compute item UI schema for both normal and fixed arrays
+   * Handles both static object and dynamic function cases
+   *
+   * @param uiSchema - The parent UI schema containing items definition
+   * @param item - The item data
+   * @param index - The index of the item
+   * @param formContext - The form context
+   * @returns The computed UI schema for the item
+   */
+  private computeItemUiSchema(
+    uiSchema: UiSchema<T[], S, F>,
+    item: T,
+    index: number,
+    formContext: F,
+  ): UiSchema<T[], S, F> | undefined {
+    if (typeof uiSchema.items === 'function') {
+      try {
+        // Call the function with item data, index, and form context
+        // TypeScript now correctly infers the types thanks to the ArrayElement type in UiSchema
+        const result = uiSchema.items(item, index, formContext);
+        // Only use the result if it's truthy
+        return result as UiSchema<T[], S, F>;
+      } catch (e) {
+        console.error(`Error executing dynamic uiSchema.items function for item at index ${index}:`, e);
+        // Fall back to undefined to allow the field to still render
+        return undefined;
+      }
+    } else {
+      // Static object case - preserve undefined to maintain backward compatibility
+      return uiSchema.items as UiSchema<T[], S, F> | undefined;
+    }
+  }
+
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
@@ -500,6 +533,10 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+
+        // Compute the item UI schema using the helper method
+        const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+
         return this.renderArrayFieldItem({
           key,
           index,
@@ -512,7 +549,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           itemIdSchema,
           itemErrorSchema,
           itemData: itemCast,
-          itemUiSchema: uiSchema.items,
+          itemUiSchema,
           autofocus: autofocus && index === 0,
           onBlur,
           onFocus,
@@ -751,11 +788,20 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             : itemSchemas[index]) || {};
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
-        const itemUiSchema = additional
-          ? uiSchema.additionalItems || {}
-          : Array.isArray(uiSchema.items)
-            ? uiSchema.items[index]
-            : uiSchema.items || {};
+        // Compute the item UI schema - handle both static and dynamic cases
+        let itemUiSchema: UiSchema<T[], S, F> | undefined;
+        if (additional) {
+          // For additional items, use additionalItems uiSchema
+          itemUiSchema = uiSchema.additionalItems as UiSchema<T[], S, F>;
+        } else {
+          // For fixed items, uiSchema.items can be an array, a function, or a single object
+          if (Array.isArray(uiSchema.items)) {
+            itemUiSchema = uiSchema.items[index] as UiSchema<T[], S, F>;
+          } else {
+            // Use the helper method for function or static object cases
+            itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
+          }
+        }
         const itemErrorSchema = errorSchema ? (errorSchema[index] as ErrorSchema<T[]>) : undefined;
 
         return this.renderArrayFieldItem({
@@ -811,7 +857,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     canMoveDown: boolean;
     itemSchema: S;
     itemData: T[];
-    itemUiSchema: UiSchema<T[], S, F>;
+    itemUiSchema: UiSchema<T[], S, F> | undefined;
     itemIdSchema: IdSchema<T[]>;
     itemErrorSchema?: ErrorSchema<T[]>;
     autofocus?: boolean;