@rjsf/core 6.0.0-beta.2 → 6.0.0-beta.21

package/lib/components/fields/ObjectField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
-import { getTemplate, getUiOptions, orderProperties, TranslatableString, ADDITIONAL_PROPERTY_FLAG, PROPERTIES_KEY, REF_KEY, ANY_OF_KEY, ONE_OF_KEY, } from '@rjsf/utils';
+import { getTemplate, getUiOptions, orderProperties, shouldRenderOptionalField, toFieldPathId, TranslatableString, ADDITIONAL_PROPERTY_FLAG, PROPERTIES_KEY, REF_KEY, ANY_OF_KEY, ONE_OF_KEY, isFormDataAvailable, } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
 import get from 'lodash-es/get.js';
 import has from 'lodash-es/has.js';
@@ -36,8 +36,8 @@ class ObjectField extends Component {
      * @returns - The onPropertyChange callback for the `name` property
      */
     onPropertyChange = (name, addedByAdditionalProperties = false) => {
-        return (value, newErrorSchema, id) => {
-            const { formData, onChange, errorSchema } = this.props;
+        return (value, path, newErrorSchema, id) => {
+            const { onChange } = this.props;
             if (value === undefined && addedByAdditionalProperties) {
                 // Don't set value = undefined for fields added by
                 // additionalProperties. Doing so removes them from the
@@ -48,12 +48,7 @@ class ObjectField extends Component {
                 // set empty values to the empty string.
                 value = '';
             }
-            const newFormData = { ...formData, [name]: value };
-            onChange(newFormData, errorSchema &&
-                errorSchema && {
-                ...errorSchema,
-                [name]: newErrorSchema,
-            }, id);
+            onChange(value, path, newErrorSchema, id);
         };
     };
     /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
@@ -65,10 +60,11 @@ class ObjectField extends Component {
     onDropPropertyClick = (key) => {
         return (event) => {
             event.preventDefault();
-            const { onChange, formData } = this.props;
+            const { onChange, formData, fieldPathId } = this.props;
             const copiedFormData = { ...formData };
             unset(copiedFormData, key);
-            onChange(copiedFormData);
+            // drop property will pass the name in `path` array
+            onChange(copiedFormData, fieldPathId.path);
         };
     };
     /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
@@ -95,11 +91,11 @@ class ObjectField extends Component {
      * @returns - The key change callback function
      */
     onKeyChange = (oldValue) => {
-        return (value, newErrorSchema) => {
+        return (value) => {
             if (oldValue === value) {
                 return;
             }
-            const { formData, onChange, errorSchema } = this.props;
+            const { formData, onChange, fieldPathId } = this.props;
             value = this.getAvailableKey(value, formData);
             const newFormData = {
                 ...formData,
@@ -111,11 +107,7 @@ class ObjectField extends Component {
             });
             const renamedObj = Object.assign({}, ...keyValues);
             this.setState({ wasPropertyKeyModified: true });
-            onChange(renamedObj, errorSchema &&
-                errorSchema && {
-                ...errorSchema,
-                [value]: newErrorSchema,
-            });
+            onChange(renamedObj, fieldPathId.path);
         };
     };
     /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -150,7 +142,7 @@ class ObjectField extends Component {
         if (!(schema.additionalProperties || schema.patternProperties)) {
             return;
         }
-        const { formData, onChange, registry } = this.props;
+        const { formData, onChange, registry, fieldPathId } = this.props;
         const newFormData = { ...formData };
         const newKey = this.getAvailableKey('newKey', newFormData);
         if (schema.patternProperties) {
@@ -181,28 +173,34 @@ class ObjectField extends Component {
             // Cast this to make the `set` work properly
             set(newFormData, newKey, newValue);
         }
-        onChange(newFormData);
+        // add will pass the name in `path` array
+        onChange(newFormData, fieldPathId.path);
     };
     /** Renders the `ObjectField` from the given props
      */
     render() {
-        const { schema: rawSchema, uiSchema = {}, formData, errorSchema, idSchema, name, required = false, disabled, readonly, hideError, idPrefix, idSeparator, onBlur, onFocus, registry, title, } = this.props;
-        const { fields, formContext, schemaUtils, translateString, globalUiOptions } = registry;
-        const { SchemaField } = fields;
-        const schema = schemaUtils.retrieveSchema(rawSchema, formData);
+        const { schema: rawSchema, uiSchema = {}, formData, errorSchema, fieldPathId, name, required = false, disabled, readonly, hideError, onBlur, onFocus, registry, title, } = this.props;
+        const { fields, formContext, schemaUtils, translateString, globalFormOptions, globalUiOptions } = registry;
+        const { OptionalDataControlsField, SchemaField } = fields;
+        const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
         const uiOptions = getUiOptions(uiSchema, globalUiOptions);
         const { properties: schemaProperties = {} } = schema;
         const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
         const description = uiOptions.description ?? schema.description;
-        let orderedProperties;
-        try {
-            const properties = Object.keys(schemaProperties);
-            orderedProperties = orderProperties(properties, uiOptions.order);
-        }
-        catch (err) {
-            return (_jsxs("div", { children: [_jsx("p", { className: 'rjsf-config-error', style: { color: 'red' }, children: _jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message]) }) }), _jsx("pre", { children: JSON.stringify(schema) })] }));
+        const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
+        const hasFormData = isFormDataAvailable(formData);
+        let orderedProperties = [];
+        if (!renderOptionalField || hasFormData) {
+            try {
+                const properties = Object.keys(schemaProperties);
+                orderedProperties = orderProperties(properties, uiOptions.order);
+            }
+            catch (err) {
+                return (_jsxs("div", { children: [_jsx("p", { className: 'rjsf-config-error', style: { color: 'red' }, children: _jsx(Markdown, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message]) }) }), _jsx("pre", { children: JSON.stringify(schema) })] }));
+            }
         }
         const Template = getTemplate('ObjectFieldTemplate', registry, uiOptions);
+        const optionalDataControl = renderOptionalField ? (_jsx(OptionalDataControlsField, { ...this.props, schema: schema })) : undefined;
         const templateProps = {
             // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
             title: uiOptions.label === false ? '' : templateTitle,
@@ -211,9 +209,9 @@ class ObjectField extends Component {
                 const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
                 const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
                 const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
-                const fieldIdSchema = get(idSchema, [name], {});
+                const innerFieldIdPathId = toFieldPathId(name, globalFormOptions, fieldPathId);
                 return {
-                    content: (_jsx(SchemaField, { name: name, required: this.isRequired(name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), idSchema: fieldIdSchema, idPrefix: idPrefix, idSeparator: idSeparator, formData: get(formData, name), formContext: formContext, wasPropertyKeyModified: this.state.wasPropertyKeyModified, onKeyChange: this.onKeyChange(name), onChange: this.onPropertyChange(name, addedByAdditionalProperties), onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError, onDropPropertyClick: this.onDropPropertyClick }, name)),
+                    content: (_jsx(SchemaField, { name: name, required: this.isRequired(name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), fieldPathId: innerFieldIdPathId, formData: get(formData, name), formContext: formContext, wasPropertyKeyModified: this.state.wasPropertyKeyModified, onKeyChange: this.onKeyChange(name), onChange: this.onPropertyChange(name, addedByAdditionalProperties), onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError, onDropPropertyClick: this.onDropPropertyClick }, name)),
                     name,
                     readonly,
                     disabled,
@@ -224,13 +222,15 @@ class ObjectField extends Component {
             readonly,
             disabled,
             required,
-            idSchema,
+            fieldPathId,
             uiSchema,
             errorSchema,
             schema,
             formData,
             formContext,
             registry,
+            optionalDataControl,
+            className: renderOptionalField ? 'rjsf-optional-object-field' : undefined,
         };
         return _jsx(Template, { ...templateProps, onAddClick: this.handleAddClick });
     }

package/lib/components/fields/OptionalDataControlsField.d.ts

@@ -0,0 +1,8 @@
+import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+/** The `OptionalDataControlsField` component is used to render the optional data controls for the field associated
+ * with the given props.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+export default function OptionalDataControlsField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): "" | import("react/jsx-runtime").JSX.Element | undefined;
+//# sourceMappingURL=OptionalDataControlsField.d.ts.map

package/lib/components/fields/OptionalDataControlsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionalDataControlsField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/OptionalDataControlsField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EAOf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,4DA4D3B"}

package/lib/components/fields/OptionalDataControlsField.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSchemaType, getTemplate, getUiOptions, isFormDataAvailable, optionalControlsId, TranslatableString, } from '@rjsf/utils';
+/** The `OptionalDataControlsField` component is used to render the optional data controls for the field associated
+ * with the given props.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+export default function OptionalDataControlsField(props) {
+    const { schema, uiSchema = {}, formData, disabled = false, readonly = false, onChange, errorSchema, fieldPathId, registry, } = props;
+    const { globalUiOptions = {}, schemaUtils, translateString } = registry;
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    const OptionalDataControlsTemplate = getTemplate('OptionalDataControlsTemplate', registry, uiOptions);
+    const hasFormData = isFormDataAvailable(formData);
+    let id;
+    let label;
+    let onAddClick;
+    let onRemoveClick;
+    if (disabled || readonly) {
+        id = optionalControlsId(fieldPathId, 'Msg');
+        label = hasFormData ? undefined : translateString(TranslatableString.OptionalObjectEmptyMsg);
+    }
+    else {
+        const labelEnum = hasFormData ? TranslatableString.OptionalObjectRemove : TranslatableString.OptionalObjectAdd;
+        label = translateString(labelEnum);
+        if (hasFormData) {
+            id = optionalControlsId(fieldPathId, 'Remove');
+            onRemoveClick = () => onChange(undefined, fieldPathId.path, errorSchema);
+        }
+        else {
+            id = optionalControlsId(fieldPathId, 'Add');
+            onAddClick = () => {
+                // If it has form data, store an empty object, otherwise get the default form state and use it
+                let newFormData = schemaUtils.getDefaultFormState(schema, formData, 'excludeObjectChildren');
+                if (newFormData === undefined) {
+                    // If new form data ended up being undefined, and we have pushed the add button we need to actually add data
+                    newFormData = getSchemaType(schema) === 'array' ? [] : {};
+                }
+                onChange(newFormData, fieldPathId.path, errorSchema);
+            };
+        }
+    }
+    return (label && (_jsx(OptionalDataControlsTemplate, { id: id, registry: registry, schema: schema, uiSchema: uiSchema, label: label, onAddClick: onAddClick, onRemoveClick: onRemoveClick })));
+}

package/lib/components/fields/SchemaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAKL,UAAU,EAEV,eAAe,EAQf,UAAU,EACV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AA6TrB;;GAEG;AACH,cAAM,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACpH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACpB;IACC,qBAAqB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAI9D,MAAM;CAGP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAiB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAML,UAAU,EAEV,eAAe,EAMf,UAAU,EAEV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AAkTrB;;GAEG;AACH,cAAM,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACpH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CACpB;IACC,qBAAqB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAS9D,MAAM;CAGP;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/SchemaField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, Component } from 'react';
-import { ADDITIONAL_PROPERTY_FLAG, deepEquals, descriptionId, getSchemaType, getTemplate, getUiOptions, ID_KEY, mergeObjects, TranslatableString, UI_OPTIONS_KEY, } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, descriptionId, getSchemaType, getTemplate, getUiOptions, ID_KEY, shouldRender, TranslatableString, UI_OPTIONS_KEY, } from '@rjsf/utils';
 import isObject from 'lodash-es/isObject.js';
 import omit from 'lodash-es/omit.js';
 /** The map of component type to FieldName */
@@ -19,11 +19,11 @@ const COMPONENT_TYPES = {
  *
  * @param schema - The schema from which to obtain the type
  * @param uiOptions - The UI Options that may affect the component decision
- * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+ * @param fieldPathId - The id that is passed to the `UnsupportedFieldTemplate`
  * @param registry - The registry from which fields and templates are obtained
  * @returns - The `Field` component that is used to render the actual field data
  */
-function getFieldComponent(schema, uiOptions, idSchema, registry) {
+function getFieldComponent(schema, uiOptions, fieldPathId, registry) {
     const field = uiOptions.field;
     const { fields, translateString } = registry;
     if (typeof field === 'function') {
@@ -48,7 +48,7 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
         ? fields[componentName]
         : () => {
             const UnsupportedFieldTemplate = getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
-            return (_jsx(UnsupportedFieldTemplate, { schema: schema, idSchema: idSchema, reason: translateString(TranslatableString.UnknownFieldType, [String(schema.type)]), registry: registry }));
+            return (_jsx(UnsupportedFieldTemplate, { schema: schema, fieldPathId: fieldPathId, reason: translateString(TranslatableString.UnknownFieldType, [String(schema.type)]), registry: registry }));
         };
 }
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
@@ -58,7 +58,7 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
  * @param props - The `FieldProps` for this component
  */
 function SchemaFieldRender(props) {
-    const { schema: _schema, idSchema: _idSchema, uiSchema, formData, errorSchema, idPrefix, idSeparator, name, onChange, onKeyChange, onDropPropertyClick, required, registry, wasPropertyKeyModified = false, } = props;
+    const { schema: _schema, fieldPathId, uiSchema, formData, errorSchema, name, onChange, onKeyChange, onDropPropertyClick, required, registry, wasPropertyKeyModified = false, } = props;
     const { formContext, schemaUtils, globalUiOptions } = registry;
     const uiOptions = getUiOptions(uiSchema, globalUiOptions);
     const FieldTemplate = getTemplate('FieldTemplate', registry, uiOptions);
@@ -66,16 +66,15 @@ function SchemaFieldRender(props) {
     const FieldHelpTemplate = getTemplate('FieldHelpTemplate', registry, uiOptions);
     const FieldErrorTemplate = getTemplate('FieldErrorTemplate', registry, uiOptions);
     const schema = schemaUtils.retrieveSchema(_schema, formData);
-    const fieldId = _idSchema[ID_KEY];
-    const idSchema = mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
+    const fieldId = fieldPathId[ID_KEY];
     /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
      * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
      */
-    const handleFieldComponentChange = useCallback((formData, newErrorSchema, id) => {
+    const handleFieldComponentChange = useCallback((formData, path, newErrorSchema, id) => {
         const theId = id || fieldId;
-        return onChange(formData, newErrorSchema, theId);
+        return onChange(formData, path, newErrorSchema, theId);
     }, [fieldId, onChange]);
-    const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
+    const FieldComponent = getFieldComponent(schema, uiOptions, fieldPathId, registry);
     const disabled = Boolean(uiOptions.disabled ?? props.disabled);
     const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
@@ -92,8 +91,8 @@ function SchemaFieldRender(props) {
     if (UI_OPTIONS_KEY in fieldUiSchema) {
         fieldUiSchema[UI_OPTIONS_KEY] = omit(fieldUiSchema[UI_OPTIONS_KEY], ['classNames', 'style']);
     }
-    const field = (_jsx(FieldComponent, { ...props, onChange: handleFieldComponentChange, idSchema: idSchema, schema: schema, uiSchema: fieldUiSchema, disabled: disabled, readonly: readonly, hideError: hideError, autofocus: autofocus, errorSchema: fieldErrorSchema, formContext: formContext, rawErrors: __errors }));
-    const id = idSchema[ID_KEY];
+    const field = (_jsx(FieldComponent, { ...props, onChange: handleFieldComponentChange, fieldPathId: fieldPathId, schema: schema, uiSchema: fieldUiSchema, disabled: disabled, readonly: readonly, hideError: hideError, autofocus: autofocus, errorSchema: fieldErrorSchema, formContext: formContext, rawErrors: __errors }));
+    const id = fieldPathId[ID_KEY];
     // If this schema has a title defined, but the user has set a new key/label, retain their input.
     let label;
     if (wasPropertyKeyModified) {
@@ -115,12 +114,12 @@ function SchemaFieldRender(props) {
     if (uiOptions.classNames) {
         classNames.push(uiOptions.classNames);
     }
-    const helpComponent = (_jsx(FieldHelpTemplate, { help: help, idSchema: idSchema, schema: schema, uiSchema: uiSchema, hasErrors: !hideError && __errors && __errors.length > 0, registry: registry }));
+    const helpComponent = (_jsx(FieldHelpTemplate, { help: help, fieldPathId: fieldPathId, schema: schema, uiSchema: uiSchema, hasErrors: !hideError && __errors && __errors.length > 0, registry: registry }));
     /*
      * AnyOf/OneOf errors handled by child schema
      * unless it can be rendered as select control
      */
-    const errorsComponent = hideError || ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema)) ? undefined : (_jsx(FieldErrorTemplate, { errors: __errors, errorSchema: errorSchema, idSchema: idSchema, schema: schema, uiSchema: uiSchema, registry: registry }));
+    const errorsComponent = hideError || ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema)) ? undefined : (_jsx(FieldErrorTemplate, { errors: __errors, errorSchema: errorSchema, fieldPathId: fieldPathId, schema: schema, uiSchema: uiSchema, registry: registry }));
     const fieldProps = {
         description: (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })),
         rawDescription: description,
@@ -141,7 +140,6 @@ function SchemaFieldRender(props) {
         displayLabel,
         classNames: classNames.join(' ').trim(),
         style: uiOptions.style,
-        formContext,
         formData,
         schema,
         uiSchema,
@@ -150,14 +148,16 @@ function SchemaFieldRender(props) {
     const _AnyOfField = registry.fields.AnyOfField;
     const _OneOfField = registry.fields.OneOfField;
     const isReplacingAnyOrOneOf = uiSchema?.['ui:field'] && uiSchema?.['ui:fieldReplacesAnyOrOneOf'] === true;
-    return (_jsx(FieldTemplate, { ...fieldProps, children: _jsxs(_Fragment, { children: [field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (_jsx(_AnyOfField, { name: name, disabled: disabled, readonly: readonly, hideError: hideError, errorSchema: errorSchema, formData: formData, formContext: formContext, idPrefix: idPrefix, idSchema: idSchema, idSeparator: idSeparator, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, options: schema.anyOf.map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData)), registry: registry, required: required, schema: schema, uiSchema: uiSchema })), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (_jsx(_OneOfField, { name: name, disabled: disabled, readonly: readonly, hideError: hideError, errorSchema: errorSchema, formData: formData, formContext: formContext, idPrefix: idPrefix, idSchema: idSchema, idSeparator: idSeparator, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, options: schema.oneOf.map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData)), registry: registry, required: required, schema: schema, uiSchema: uiSchema }))] }) }));
+    return (_jsx(FieldTemplate, { ...fieldProps, children: _jsxs(_Fragment, { children: [field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (_jsx(_AnyOfField, { name: name, disabled: disabled, readonly: readonly, hideError: hideError, errorSchema: errorSchema, formData: formData, formContext: formContext, fieldPathId: fieldPathId, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, options: schema.anyOf.map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData)), registry: registry, required: required, schema: schema, uiSchema: uiSchema })), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && (_jsx(_OneOfField, { name: name, disabled: disabled, readonly: readonly, hideError: hideError, errorSchema: errorSchema, formData: formData, formContext: formContext, fieldPathId: fieldPathId, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, options: schema.oneOf.map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData)), registry: registry, required: required, schema: schema, uiSchema: uiSchema }))] }) }));
 }
 /** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
  * and if so, calls the `SchemaFieldRender` component with the props.
  */
 class SchemaField extends Component {
     shouldComponentUpdate(nextProps) {
-        return !deepEquals(this.props, nextProps);
+        const { registry: { globalFormOptions }, } = this.props;
+        const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
+        return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
     }
     render() {
         return _jsx(SchemaFieldRender, { ...this.props });

package/lib/components/fields/StringField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/StringField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EACjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAsD3B;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StringField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/StringField.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,iBAAS,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACpG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA6D3B;AAED,eAAe,WAAW,CAAC"}

package/lib/components/fields/StringField.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { getWidget, getUiOptions, optionsList, hasWidget, } from '@rjsf/utils';
 /** The `StringField` component is used to render a schema field that represents a string type
  *
  * @param props - The `FieldProps` for this template
  */
 function StringField(props) {
-    const { schema, name, uiSchema, idSchema, formData, required, disabled = false, readonly = false, autofocus = false, onChange, onBlur, onFocus, registry, rawErrors, hideError, } = props;
+    const { schema, name, uiSchema, fieldPathId, formData, required, disabled = false, readonly = false, autofocus = false, onChange, onBlur, onFocus, registry, rawErrors, hideError, } = props;
     const { title, format } = schema;
     const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
     const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
@@ -17,6 +18,10 @@ function StringField(props) {
     const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
     const label = uiTitle ?? title ?? name;
     const Widget = getWidget(schema, widget, widgets);
-    return (_jsx(Widget, { options: { ...options, enumOptions }, schema: schema, uiSchema: uiSchema, id: idSchema.$id, name: name, label: label, hideLabel: !displayLabel, hideError: hideError, value: formData, onChange: onChange, onBlur: onBlur, onFocus: onFocus, required: required, disabled: disabled, readonly: readonly, formContext: formContext, autofocus: autofocus, registry: registry, placeholder: placeholder, rawErrors: rawErrors }));
+    const onWidgetChange = useCallback((value, errorSchema, id) => {
+        // String field change passes an empty path array to the parent field which adds the appropriate path
+        return onChange(value, fieldPathId.path, errorSchema, id);
+    }, [onChange, fieldPathId]);
+    return (_jsx(Widget, { options: { ...options, enumOptions }, schema: schema, uiSchema: uiSchema, id: fieldPathId.$id, name: name, label: label, hideLabel: !displayLabel, hideError: hideError, value: formData, onChange: onWidgetChange, onBlur: onBlur, onFocus: onFocus, required: required, disabled: disabled, readonly: readonly, formContext: formContext, autofocus: autofocus, registry: registry, placeholder: placeholder, rawErrors: rawErrors }));
 }
 export default StringField;

package/lib/components/fields/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,eAAe,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAcvG,iBAAS,MAAM,CACb,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,KAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAgB/B;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,eAAe,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAevG,iBAAS,MAAM,CACb,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,KAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAiB/B;AAED,eAAe,MAAM,CAAC"}

package/lib/components/fields/index.js

@@ -6,6 +6,7 @@ import LayoutMultiSchemaField from './LayoutMultiSchemaField.js';
 import MultiSchemaField from './MultiSchemaField.js';
 import NumberField from './NumberField.js';
 import ObjectField from './ObjectField.js';
+import OptionalDataControlsField from './OptionalDataControlsField.js';
 import SchemaField from './SchemaField.js';
 import StringField from './StringField.js';
 import NullField from './NullField.js';
@@ -21,6 +22,7 @@ function fields() {
         NumberField,
         ObjectField,
         OneOfField: MultiSchemaField,
+        OptionalDataControlsField,
         SchemaField,
         StringField,
         NullField,

package/lib/components/templates/ArrayFieldDescriptionTemplate.d.ts

@@ -1,6 +1,6 @@
 import { ArrayFieldDescriptionProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldDescriptionProps` for the component
  */

package/lib/components/templates/ArrayFieldDescriptionTemplate.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { descriptionId, getTemplate, getUiOptions, } from '@rjsf/utils';
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldDescriptionProps` for the component
  */
 export default function ArrayFieldDescriptionTemplate(props) {
-    const { idSchema, description, registry, schema, uiSchema } = props;
+    const { fieldPathId, description, registry, schema, uiSchema } = props;
     const options = getUiOptions(uiSchema, registry.globalUiOptions);
     const { label: displayLabel = true } = options;
     if (!description || !displayLabel) {
         return null;
     }
     const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
-    return (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry }));
+    return (_jsx(DescriptionFieldTemplate, { id: descriptionId(fieldPathId), description: description, schema: schema, uiSchema: uiSchema, registry: registry }));
 }

package/lib/components/templates/ArrayFieldItemButtonsTemplate.js

@@ -7,11 +7,11 @@ import { buttonId, } from '@rjsf/utils';
  * @param props - The `ArrayFieldItemButtonsTemplateType` props for the component
  */
 export default function ArrayFieldItemButtonsTemplate(props) {
-    const { disabled, hasCopy, hasMoveDown, hasMoveUp, hasRemove, idSchema, index, onCopyIndexClick, onDropIndexClick, onReorderClick, readonly, registry, uiSchema, } = props;
+    const { disabled, hasCopy, hasMoveDown, hasMoveUp, hasRemove, fieldPathId, index, onCopyIndexClick, onDropIndexClick, onReorderClick, readonly, registry, uiSchema, } = props;
     const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
     const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
     const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
     const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
     const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
-    return (_jsxs(_Fragment, { children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { id: buttonId(idSchema, 'moveUp'), className: 'rjsf-array-item-move-up', disabled: disabled || readonly || !hasMoveUp, onClick: onArrowUpClick, uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { id: buttonId(idSchema, 'moveDown'), className: 'rjsf-array-item-move-down', disabled: disabled || readonly || !hasMoveDown, onClick: onArrowDownClick, uiSchema: uiSchema, registry: registry })), hasCopy && (_jsx(CopyButton, { id: buttonId(idSchema, 'copy'), className: 'rjsf-array-item-copy', disabled: disabled || readonly, onClick: onCopyClick, uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { id: buttonId(idSchema, 'remove'), className: 'rjsf-array-item-remove', disabled: disabled || readonly, onClick: onRemoveClick, uiSchema: uiSchema, registry: registry }))] }));
+    return (_jsxs(_Fragment, { children: [(hasMoveUp || hasMoveDown) && (_jsx(MoveUpButton, { id: buttonId(fieldPathId, 'moveUp'), className: 'rjsf-array-item-move-up', disabled: disabled || readonly || !hasMoveUp, onClick: onArrowUpClick, uiSchema: uiSchema, registry: registry })), (hasMoveUp || hasMoveDown) && (_jsx(MoveDownButton, { id: buttonId(fieldPathId, 'moveDown'), className: 'rjsf-array-item-move-down', disabled: disabled || readonly || !hasMoveDown, onClick: onArrowDownClick, uiSchema: uiSchema, registry: registry })), hasCopy && (_jsx(CopyButton, { id: buttonId(fieldPathId, 'copy'), className: 'rjsf-array-item-copy', disabled: disabled || readonly, onClick: onCopyClick, uiSchema: uiSchema, registry: registry })), hasRemove && (_jsx(RemoveButton, { id: buttonId(fieldPathId, 'remove'), className: 'rjsf-array-item-remove', disabled: disabled || readonly, onClick: onRemoveClick, uiSchema: uiSchema, registry: registry }))] }));
 }

package/lib/components/templates/ArrayFieldTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayFieldTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAsExC"}
+{"version":3,"file":"ArrayFieldTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA0ExC"}

package/lib/components/templates/ArrayFieldTemplate.js

@@ -5,13 +5,14 @@ import { getTemplate, getUiOptions, buttonId, } from '@rjsf/utils';
  * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldTemplate(props) {
-    const { canAdd, className, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title, } = props;
+    const { canAdd, className, disabled, fieldPathId, uiSchema, items, optionalDataControl, onAddClick, readonly, registry, required, schema, title, } = props;
     const uiOptions = getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
     const ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
     const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
     // Button templates are not overridden in the uiSchema
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const { ButtonTemplates: { AddButton }, } = registry.templates;
-    return (_jsxs("fieldset", { className: className, id: idSchema.$id, children: [_jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, title: uiOptions.title || title, required: required, schema: schema, uiSchema: uiSchema, registry: registry }), _jsx(ArrayFieldDescriptionTemplate, { idSchema: idSchema, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), _jsx("div", { className: 'row array-item-list', children: items &&
-                    items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))) }), canAdd && (_jsx(AddButton, { id: buttonId(idSchema, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] }));
+    return (_jsxs("fieldset", { className: className, id: fieldPathId.$id, children: [_jsx(ArrayFieldTitleTemplate, { fieldPathId: fieldPathId, title: uiOptions.title || title, required: required, schema: schema, uiSchema: uiSchema, registry: registry, optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : undefined }), _jsx(ArrayFieldDescriptionTemplate, { fieldPathId: fieldPathId, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), !showOptionalDataControlInTitle ? optionalDataControl : undefined, _jsx("div", { className: 'row array-item-list', children: items &&
+                    items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))) }), canAdd && (_jsx(AddButton, { id: buttonId(fieldPathId, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }))] }));
 }

package/lib/components/templates/ArrayFieldTitleTemplate.d.ts

@@ -1,6 +1,6 @@
 import { ArrayFieldTitleProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */

package/lib/components/templates/ArrayFieldTitleTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayFieldTitleTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldTitleTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAsBrC"}
+{"version":3,"file":"ArrayFieldTitleTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ArrayFieldTitleTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,kDAuBrC"}

package/lib/components/templates/ArrayFieldTitleTemplate.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
- * the `idSchema`.
+ * the `fieldPathId`.
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */
 export default function ArrayFieldTitleTemplate(props) {
-    const { idSchema, title, schema, uiSchema, required, registry } = props;
+    const { fieldPathId, title, schema, uiSchema, required, registry, optionalDataControl } = props;
     const options = getUiOptions(uiSchema, registry.globalUiOptions);
     const { label: displayLabel = true } = options;
     if (!title || !displayLabel) {
         return null;
     }
     const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
-    return (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry }));
+    return (_jsx(TitleFieldTemplate, { id: titleId(fieldPathId), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry, optionalDataControl: optionalDataControl }));
 }

package/lib/components/templates/ButtonTemplates/AddButton.d.ts

@@ -1,5 +1,5 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
-export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ className, onClick, disabled, registry, }: IconButtonProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ id, className, onClick, disabled, registry, }: IconButtonProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddButton.d.ts.map

package/lib/components/templates/ButtonTemplates/AddButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddButton.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ButtonTemplates/AddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAIjH;GACG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACnH,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAiB1B"}
+{"version":3,"file":"AddButton.d.ts","sourceRoot":"","sources":["../../../../src/components/templates/ButtonTemplates/AddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAsB,MAAM,aAAa,CAAC;AAIjH;GACG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAAE,EACnH,EAAE,EACF,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAkB1B"}

package/lib/components/templates/ButtonTemplates/AddButton.js

@@ -3,7 +3,7 @@ import { TranslatableString } from '@rjsf/utils';
 import IconButton from './IconButton.js';
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
-export default function AddButton({ className, onClick, disabled, registry, }) {
+export default function AddButton({ id, className, onClick, disabled, registry, }) {
     const { translateString } = registry;
-    return (_jsx("div", { className: 'row', children: _jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: _jsx(IconButton, { iconType: 'info', icon: 'plus', className: 'btn-add col-xs-12', title: translateString(TranslatableString.AddButton), onClick: onClick, disabled: disabled, registry: registry }) }) }));
+    return (_jsx("div", { className: 'row', children: _jsx("p", { className: `col-xs-3 col-xs-offset-9 text-right ${className}`, children: _jsx(IconButton, { id: id, iconType: 'info', icon: 'plus', className: 'btn-add col-xs-12', title: translateString(TranslatableString.AddButton), onClick: onClick, disabled: disabled, registry: registry }) }) }));
 }

package/lib/components/templates/FieldErrorTemplate.js

@@ -5,11 +5,11 @@ import { errorId } from '@rjsf/utils';
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
 export default function FieldErrorTemplate(props) {
-    const { errors = [], idSchema } = props;
+    const { errors = [], fieldPathId } = props;
     if (errors.length === 0) {
         return null;
     }
-    const id = errorId(idSchema);
+    const id = errorId(fieldPathId);
     return (_jsx("div", { children: _jsx("ul", { id: id, className: 'error-detail bs-callout bs-callout-info', children: errors
                 .filter((elem) => !!elem)
                 .map((error, index) => {

package/lib/components/templates/FieldHelpTemplate.js

@@ -5,11 +5,11 @@ import { helpId } from '@rjsf/utils';
  * @param props - The `FieldHelpProps` to be rendered
  */
 export default function FieldHelpTemplate(props) {
-    const { idSchema, help } = props;
+    const { fieldPathId, help } = props;
     if (!help) {
         return null;
     }
-    const id = helpId(idSchema);
+    const id = helpId(fieldPathId);
     if (typeof help === 'string') {
         return (_jsx("p", { id: id, className: 'help-block', children: help }));
     }

package/lib/components/templates/MultiSchemaFieldTemplate.d.ts

@@ -0,0 +1,8 @@
+import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+/** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
+ * a schema from a list of schemas defined using `anyOf` or `oneOf`.
+ *
+ * @param props - The `MultiSchemaFieldTemplate` to be rendered
+ */
+export default function MultiSchemaFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: MultiSchemaFieldTemplateProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultiSchemaFieldTemplate.d.ts.map

package/lib/components/templates/MultiSchemaFieldTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSchemaFieldTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/MultiSchemaFieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,6BAA6B,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE3G;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,6BAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAQ9C"}

package/lib/components/templates/MultiSchemaFieldTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
+ * a schema from a list of schemas defined using `anyOf` or `oneOf`.
+ *
+ * @param props - The `MultiSchemaFieldTemplate` to be rendered
+ */
+export default function MultiSchemaFieldTemplate(props) {
+    const { selector, optionSchemaField } = props;
+    return (_jsxs("div", { className: 'panel panel-default panel-body', children: [_jsx("div", { className: 'form-group', children: selector }), optionSchemaField] }));
+}

package/lib/components/templates/ObjectFieldTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectFieldTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ObjectFieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EAOjB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,wBAAwB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA4DzC"}
+{"version":3,"file":"ObjectFieldTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/templates/ObjectFieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EAOjB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,KAAK,EAAE,wBAAwB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAiEzC"}