Commit bd54461
feat: Add dynamic uiSchema support for array items (rjsf-team#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 rjsf-team#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 rjsf-team#4704
---------
Co-authored-by: Heath C <[email protected]>1 parent 91d95a5 commit bd54461
File tree
22 files changed
+918
-83
lines changed- packages
- chakra-ui/src/CheckboxWidget
- core
- src/components/fields
- test
- daisyui
- src/widgets/CheckboxWidget
- test/__snapshots__
- docs/docs
- api-reference
- json-schema
- migration-guides
- fluentui-rc/src/CheckboxWidget
- mui/src/CheckboxWidget
- primereact
- src
- ArrayFieldTemplate
- CheckboxWidget
- test/__snapshots__
- semantic-ui/src/CheckboxWidget
- utils
- src
- schema
- test
22 files changed
+918
-83
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
15 | 15 | | |
16 | 16 | | |
17 | 17 | | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
| 44 | + | |
| 45 | + | |
| 46 | + | |
| 47 | + | |
| 48 | + | |
| 49 | + | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + | |
| 54 | + | |
| 55 | + | |
| 56 | + | |
| 57 | + | |
| 58 | + | |
18 | 59 | | |
19 | 60 | | |
20 | 61 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
48 | 48 | | |
49 | 49 | | |
50 | 50 | | |
51 | | - | |
52 | | - | |
| 51 | + | |
| 52 | + | |
53 | 53 | | |
54 | 54 | | |
55 | 55 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
22 | 22 | | |
23 | 23 | | |
24 | 24 | | |
25 | | - | |
| 25 | + | |
26 | 26 | | |
27 | 27 | | |
28 | 28 | | |
| |||
37 | 37 | | |
38 | 38 | | |
39 | 39 | | |
40 | | - | |
| 40 | + | |
41 | 41 | | |
42 | 42 | | |
43 | 43 | | |
| |||
423 | 423 | | |
424 | 424 | | |
425 | 425 | | |
| 426 | + | |
| 427 | + | |
| 428 | + | |
| 429 | + | |
| 430 | + | |
| 431 | + | |
| 432 | + | |
| 433 | + | |
| 434 | + | |
| 435 | + | |
| 436 | + | |
| 437 | + | |
| 438 | + | |
| 439 | + | |
| 440 | + | |
| 441 | + | |
| 442 | + | |
| 443 | + | |
| 444 | + | |
| 445 | + | |
| 446 | + | |
| 447 | + | |
| 448 | + | |
| 449 | + | |
| 450 | + | |
| 451 | + | |
| 452 | + | |
| 453 | + | |
| 454 | + | |
| 455 | + | |
| 456 | + | |
| 457 | + | |
| 458 | + | |
426 | 459 | | |
427 | 460 | | |
428 | 461 | | |
| |||
500 | 533 | | |
501 | 534 | | |
502 | 535 | | |
| 536 | + | |
| 537 | + | |
| 538 | + | |
| 539 | + | |
503 | 540 | | |
504 | 541 | | |
505 | 542 | | |
| |||
512 | 549 | | |
513 | 550 | | |
514 | 551 | | |
515 | | - | |
| 552 | + | |
516 | 553 | | |
517 | 554 | | |
518 | 555 | | |
| |||
751 | 788 | | |
752 | 789 | | |
753 | 790 | | |
754 | | - | |
755 | | - | |
756 | | - | |
757 | | - | |
758 | | - | |
| 791 | + | |
| 792 | + | |
| 793 | + | |
| 794 | + | |
| 795 | + | |
| 796 | + | |
| 797 | + | |
| 798 | + | |
| 799 | + | |
| 800 | + | |
| 801 | + | |
| 802 | + | |
| 803 | + | |
| 804 | + | |
759 | 805 | | |
760 | 806 | | |
761 | 807 | | |
| |||
811 | 857 | | |
812 | 858 | | |
813 | 859 | | |
814 | | - | |
| 860 | + | |
815 | 861 | | |
816 | 862 | | |
817 | 863 | | |
| |||
0 commit comments