@rjsf/core 6.0.0-beta.8 → 6.0.0

package/lib/components/fields/ObjectField.js

@@ -1,32 +1,52 @@
 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 { useCallback, useState } from 'react';
+import { ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, getTemplate, getUiOptions, hashObject, isFormDataAvailable, orderProperties, shouldRenderOptionalField, toFieldPathId, useDeepCompareMemo, ONE_OF_KEY, PROPERTIES_KEY, REF_KEY, TranslatableString, } from '@rjsf/utils';
 import Markdown from 'markdown-to-jsx';
 import get from 'lodash-es/get.js';
 import has from 'lodash-es/has.js';
 import isObject from 'lodash-es/isObject.js';
 import set from 'lodash-es/set.js';
 import unset from 'lodash-es/unset.js';
-/** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
- * additional property key was modified and what it was modified to
+/** Returns a flag indicating whether the `name` field is required in the object schema
  *
- * @param props - The `FieldProps` for this template
+ * @param schema - The schema to check
+ * @param name - The name of the field to check for required-ness
+ * @returns - True if the field `name` is required, false otherwise
  */
-class ObjectField extends Component {
-    /** Set up the initial state */
-    state = {
-        wasPropertyKeyModified: false,
-        additionalProperties: {},
-    };
-    /** Returns a flag indicating whether the `name` field is required in the object schema
-     *
-     * @param name - The name of the field to check for required-ness
-     * @returns - True if the field `name` is required, false otherwise
-     */
-    isRequired(name) {
-        const { schema } = this.props;
-        return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+function isRequired(schema, name) {
+    return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+}
+/** Returns a default value to be used for a new additional schema property of the given `type`
+ *
+ * @param translateString - The string translation function from the registry
+ * @param type - The type of the new additional schema property
+ */
+function getDefaultValue(translateString, type) {
+    switch (type) {
+        case 'array':
+            return [];
+        case 'boolean':
+            return false;
+        case 'null':
+            return null;
+        case 'number':
+            return 0;
+        case 'object':
+            return {};
+        case 'string':
+        default:
+            // We don't have a datatype for some reason (perhaps additionalProperties was true)
+            return translateString(TranslatableString.NewStringDefault);
     }
+}
+/** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
+ */
+function ObjectFieldProperty(props) {
+    const { fieldPathId, schema, registry, uiSchema, errorSchema, formData, onChange, onBlur, onFocus, disabled, readonly, required, hideError, propertyName, handleKeyRename, handleRemoveProperty, addedByAdditionalProperties, } = props;
+    const [wasPropertyKeyModified, setWasPropertyKeyModified] = useState(false);
+    const { globalFormOptions, fields } = registry;
+    const { SchemaField } = fields;
+    const innerFieldIdPathId = useDeepCompareMemo(toFieldPathId(propertyName, globalFormOptions, fieldPathId.path));
     /** Returns the `onPropertyChange` handler for the `name` field. Handles the special case where a user is attempting
      * to clear the data for a field added as an additional property. Calls the `onChange()` handler with the updated
      * formData.
@@ -35,42 +55,59 @@ class ObjectField extends Component {
      * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
      * @returns - The onPropertyChange callback for the `name` property
      */
-    onPropertyChange = (name, addedByAdditionalProperties = false) => {
-        return (value, newErrorSchema, id) => {
-            const { formData, onChange, errorSchema } = this.props;
-            if (value === undefined && addedByAdditionalProperties) {
-                // Don't set value = undefined for fields added by
-                // additionalProperties. Doing so removes them from the
-                // formData, which causes them to completely disappear
-                // (including the input field for the property name). Unlike
-                // fields which are "mandated" by the schema, these fields can
-                // be set to undefined by clicking a "delete field" button, so
-                // set empty values to the empty string.
-                value = '';
-            }
-            const newFormData = { ...formData, [name]: value };
-            onChange(newFormData, errorSchema &&
-                errorSchema && {
-                ...errorSchema,
-                [name]: newErrorSchema,
-            }, id);
-        };
-    };
-    /** Returns a callback to handle the onDropPropertyClick event for the given `key` which removes the old `key` data
-     * and calls the `onChange` callback with it
-     *
-     * @param key - The key for which the drop callback is desired
-     * @returns - The drop property click callback
+    const onPropertyChange = useCallback((value, path, newErrorSchema, id) => {
+        if (value === undefined && addedByAdditionalProperties) {
+            // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
+            // formData, which causes them to completely disappear (including the input field for the property name). Unlike
+            // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
+            // button, so set empty values to the empty string.
+            value = '';
+        }
+        onChange(value, path, newErrorSchema, id);
+    }, [onChange, addedByAdditionalProperties]);
+    /** The key change event handler; Called when the key associated with a field is changed for an additionalProperty.
+     * simply returns a function that call the `handleKeyChange()` event with the value
      */
-    onDropPropertyClick = (key) => {
-        return (event) => {
-            event.preventDefault();
-            const { onChange, formData } = this.props;
-            const copiedFormData = { ...formData };
-            unset(copiedFormData, key);
-            onChange(copiedFormData);
-        };
-    };
+    const onKeyRename = useCallback((value) => {
+        if (propertyName !== value) {
+            setWasPropertyKeyModified(true);
+        }
+        handleKeyRename(propertyName, value);
+    }, [propertyName, handleKeyRename]);
+    /** Returns a callback the handle the blur event, getting the value from the target and passing that along to the
+     * `handleKeyChange` function
+     */
+    const onKeyRenameBlur = useCallback((event) => {
+        const { target: { value }, } = event;
+        onKeyRename(value);
+    }, [onKeyRename]);
+    /** The property drop/removal event handler; Called when a field is removed in an additionalProperty context
+     */
+    const onRemoveProperty = useCallback(() => {
+        handleRemoveProperty(propertyName);
+    }, [propertyName, handleRemoveProperty]);
+    return (_jsx(SchemaField, { name: propertyName, required: required, schema: schema, uiSchema: uiSchema, errorSchema: errorSchema, fieldPathId: innerFieldIdPathId, formData: formData, wasPropertyKeyModified: wasPropertyKeyModified, onKeyRename: onKeyRename, onKeyRenameBlur: onKeyRenameBlur, onRemoveProperty: onRemoveProperty, onChange: onPropertyChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }));
+}
+/** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
+ * additional property key was modified and what it was modified to
+ *
+ * @param props - The `FieldProps` for this template
+ */
+export default function ObjectField(props) {
+    const { schema: rawSchema, uiSchema = {}, formData, errorSchema, fieldPathId, name, required = false, disabled, readonly, hideError, onBlur, onFocus, onChange, registry, title, } = props;
+    const { fields, schemaUtils, translateString, globalUiOptions } = registry;
+    const { OptionalDataControlsField } = fields;
+    const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    const { properties: schemaProperties = {} } = schema;
+    const formDataHash = hashObject(formData || {});
+    // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
+    const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+    const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
+    const description = uiOptions.description ?? schema.description;
+    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable(formData);
+    let orderedProperties = [];
     /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
      * that is already not assigned is found.
      *
@@ -78,81 +115,25 @@ class ObjectField extends Component {
      * @param [formData] - The form data in which to check if the desired key already exists
      * @returns - The name of the next available key from `preferredKey`
      */
-    getAvailableKey = (preferredKey, formData) => {
-        const { uiSchema, registry } = this.props;
-        const { duplicateKeySuffixSeparator = '-' } = getUiOptions(uiSchema, registry.globalUiOptions);
+    const getAvailableKey = useCallback((preferredKey, formData) => {
+        const { duplicateKeySuffixSeparator = '-' } = getUiOptions(uiSchema, globalUiOptions);
         let index = 0;
         let newKey = preferredKey;
         while (has(formData, newKey)) {
             newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
         }
         return newKey;
-    };
-    /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
-     * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
-     *
-     * @param oldValue - The old value of a field
-     * @returns - The key change callback function
-     */
-    onKeyChange = (oldValue) => {
-        return (value, newErrorSchema) => {
-            if (oldValue === value) {
-                return;
-            }
-            const { formData, onChange, errorSchema } = this.props;
-            value = this.getAvailableKey(value, formData);
-            const newFormData = {
-                ...formData,
-            };
-            const newKeys = { [oldValue]: value };
-            const keyValues = Object.keys(newFormData).map((key) => {
-                const newKey = newKeys[key] || key;
-                return { [newKey]: newFormData[key] };
-            });
-            const renamedObj = Object.assign({}, ...keyValues);
-            this.setState({ wasPropertyKeyModified: true });
-            onChange(renamedObj, errorSchema &&
-                errorSchema && {
-                ...errorSchema,
-                [value]: newErrorSchema,
-            });
-        };
-    };
-    /** Returns a default value to be used for a new additional schema property of the given `type`
-     *
-     * @param type - The type of the new additional schema property
-     */
-    getDefaultValue(type) {
-        const { registry: { translateString }, } = this.props;
-        switch (type) {
-            case 'array':
-                return [];
-            case 'boolean':
-                return false;
-            case 'null':
-                return null;
-            case 'number':
-                return 0;
-            case 'object':
-                return {};
-            case 'string':
-            default:
-                // We don't have a datatype for some reason (perhaps additionalProperties was true)
-                return translateString(TranslatableString.NewStringDefault);
-        }
-    }
+    }, [uiSchema, globalUiOptions]);
     /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
      * default data for that field has been added to the formData.
-     *
-     * @param schema - The schema element to which the new property is being added
      */
-    handleAddClick = (schema) => () => {
+    const onAddProperty = useCallback(() => {
         if (!(schema.additionalProperties || schema.patternProperties)) {
             return;
         }
-        const { formData, onChange, registry } = this.props;
+        const { translateString } = registry;
         const newFormData = { ...formData };
-        const newKey = this.getAvailableKey('newKey', newFormData);
+        const newKey = getAvailableKey('newKey', newFormData);
         if (schema.patternProperties) {
             // Cast this to make the `set` work properly
             set(newFormData, newKey, null);
@@ -168,7 +149,7 @@ class ObjectField extends Component {
                 let apSchema = schema.additionalProperties;
                 if (REF_KEY in apSchema) {
                     const { schemaUtils } = registry;
-                    apSchema = schemaUtils.retrieveSchema({ $ref: apSchema[REF_KEY] }, formData);
+                    apSchema = schemaUtils.retrieveSchema({ [REF_KEY]: apSchema[REF_KEY] }, formData);
                     type = apSchema.type;
                     constValue = apSchema.const;
                     defaultValue = apSchema.default;
@@ -177,24 +158,42 @@ class ObjectField extends Component {
                     type = 'object';
                 }
             }
-            const newValue = constValue ?? defaultValue ?? this.getDefaultValue(type);
+            const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString, type);
             // Cast this to make the `set` work properly
             set(newFormData, newKey, newValue);
         }
-        onChange(newFormData);
-    };
-    /** Renders the `ObjectField` from the given props
+        onChange(newFormData, childFieldPathId.path);
+    }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
+    /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
+     * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
+     *
+     * @param oldKey - The old key for the field
+     * @param newKey - The new key for the field
+     * @returns - The key change callback function
+     */
+    const handleKeyRename = useCallback((oldKey, newKey) => {
+        if (oldKey !== newKey) {
+            const actualNewKey = getAvailableKey(newKey, formData);
+            const newFormData = {
+                ...formData,
+            };
+            const newKeys = { [oldKey]: actualNewKey };
+            const keyValues = Object.keys(newFormData).map((key) => {
+                const newKey = newKeys[key] || key;
+                return { [newKey]: newFormData[key] };
+            });
+            const renamedObj = Object.assign({}, ...keyValues);
+            onChange(renamedObj, childFieldPathId.path);
+        }
+    }, [formData, onChange, childFieldPathId, getAvailableKey]);
+    /** Handles the remove click which removes the old `key` data and calls the `onChange` callback with it
      */
-    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 uiOptions = getUiOptions(uiSchema, globalUiOptions);
-        const { properties: schemaProperties = {} } = schema;
-        const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
-        const description = uiOptions.description ?? schema.description;
-        let orderedProperties;
+    const handleRemoveProperty = useCallback((key) => {
+        const copiedFormData = { ...formData };
+        unset(copiedFormData, key);
+        onChange(copiedFormData, childFieldPathId.path);
+    }, [onChange, childFieldPathId, formData]);
+    if (!renderOptionalField || hasFormData) {
         try {
             const properties = Object.keys(schemaProperties);
             orderedProperties = orderProperties(properties, uiOptions.order);
@@ -202,37 +201,38 @@ class ObjectField extends Component {
         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 templateProps = {
-            // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
-            title: uiOptions.label === false ? '' : templateTitle,
-            description: uiOptions.label === false ? undefined : description,
-            properties: orderedProperties.map((name) => {
-                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], {});
-                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)),
-                    name,
-                    readonly,
-                    disabled,
-                    required,
-                    hidden,
-                };
-            }),
-            readonly,
-            disabled,
-            required,
-            idSchema,
-            uiSchema,
-            errorSchema,
-            schema,
-            formData,
-            formContext,
-            registry,
-        };
-        return _jsx(Template, { ...templateProps, onAddClick: this.handleAddClick });
     }
+    const Template = getTemplate('ObjectFieldTemplate', registry, uiOptions);
+    const optionalDataControl = renderOptionalField ? (_jsx(OptionalDataControlsField, { ...props, fieldPathId: childFieldPathId, schema: schema })) : undefined;
+    const templateProps = {
+        // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
+        title: uiOptions.label === false ? '' : templateTitle,
+        description: uiOptions.label === false ? undefined : description,
+        properties: orderedProperties.map((name) => {
+            const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
+            const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+            const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
+            const content = (_jsx(ObjectFieldProperty, { propertyName: name, required: isRequired(schema, name), schema: get(schema, [PROPERTIES_KEY, name], {}), uiSchema: fieldUiSchema, errorSchema: get(errorSchema, name), fieldPathId: childFieldPathId, formData: get(formData, name), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, addedByAdditionalProperties ? `${name}-${formDataHash}` : name));
+            return {
+                content,
+                name,
+                readonly,
+                disabled,
+                required,
+                hidden,
+            };
+        }),
+        readonly,
+        disabled,
+        required,
+        fieldPathId,
+        uiSchema,
+        errorSchema,
+        schema,
+        formData,
+        registry,
+        optionalDataControl,
+        className: renderOptionalField ? 'rjsf-optional-object-field' : undefined,
+    };
+    return _jsx(Template, { ...templateProps, onAddProperty: onAddProperty });
 }
-export default ObjectField;

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,EAQL,UAAU,EAEV,eAAe,EAQf,UAAU,EAGV,gBAAgB,EAIjB,MAAM,aAAa,CAAC;AAgSrB;;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, ANY_OF_KEY, descriptionId, getSchemaType, getTemplate, getUiOptions, ID_KEY, isFormDataAvailable, ONE_OF_KEY, shouldRender, shouldRenderOptionalField, toFieldPathId, 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,13 +19,12 @@ 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 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, registry) {
     const field = uiOptions.field;
-    const { fields, translateString } = registry;
+    const { fields } = registry;
     if (typeof field === 'function') {
         return field;
     }
@@ -44,12 +43,7 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     if (!componentName && (schema.anyOf || schema.oneOf)) {
         return () => null;
     }
-    return componentName in fields
-        ? 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 componentName in fields ? fields[componentName] : fields['FallbackField'];
 }
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
  * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
@@ -58,24 +52,24 @@ 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 { formContext, schemaUtils, globalUiOptions } = registry;
+    const { schema: _schema, fieldPathId, uiSchema, formData, errorSchema, name, onChange, onKeyRename, onKeyRenameBlur, onRemoveProperty, required = false, registry, wasPropertyKeyModified = false, } = props;
+    const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
+    const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
     const uiOptions = getUiOptions(uiSchema, globalUiOptions);
     const FieldTemplate = getTemplate('FieldTemplate', registry, uiOptions);
     const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
     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, registry);
     const disabled = Boolean(uiOptions.disabled ?? props.disabled);
     const readonly = Boolean(uiOptions.readonly ?? (props.readonly || props.schema.readOnly || schema.readOnly));
     const uiSchemaHideError = uiOptions.hideError;
@@ -85,15 +79,44 @@ function SchemaFieldRender(props) {
     if (Object.keys(schema).length === 0) {
         return null;
     }
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    let displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+    /** If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't render the selection and let
+     * `StringField` component handle rendering unless there is a field override and that field replaces the any or one of
+     */
+    const isReplacingAnyOrOneOf = uiOptions.field && uiOptions.fieldReplacesAnyOrOneOf === true;
+    let XxxOfField;
+    let XxxOfOptions;
+    // When rendering the `XxxOfField` we'll need to change the fieldPathId of the main component, remembering the
+    // fieldPathId of the children for the ObjectField and ArrayField
+    let fieldPathIdProps = { fieldPathId };
+    if ((ANY_OF_KEY in schema || ONE_OF_KEY in schema) && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema)) {
+        if (schema[ANY_OF_KEY]) {
+            XxxOfField = _AnyOfField;
+            XxxOfOptions = schema[ANY_OF_KEY].map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData));
+        }
+        else if (schema[ONE_OF_KEY]) {
+            XxxOfField = _OneOfField;
+            XxxOfOptions = schema[ONE_OF_KEY].map((_schema) => schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData));
+        }
+        // When the anyOf/oneOf is an optional data control render AND it does not have form data, hide the label
+        const isOptionalRender = shouldRenderOptionalField(registry, schema, required, uiSchema);
+        const hasFormData = isFormDataAvailable(formData);
+        displayLabel = displayLabel && (!isOptionalRender || hasFormData);
+        fieldPathIdProps = {
+            childFieldPathId: fieldPathId,
+            // The main FieldComponent will add `XxxOf` onto the fieldPathId to avoid duplication with the rendering of the
+            // same FieldComponent by the `XxxOfField`
+            fieldPathId: toFieldPathId('XxxOf', globalFormOptions, fieldPathId),
+        };
+    }
     const { __errors, ...fieldErrorSchema } = errorSchema || {};
     // See #439: uiSchema: Don't pass consumed class names or style to child components
     const fieldUiSchema = omit(uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
     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, ...fieldPathIdProps, schema: schema, uiSchema: fieldUiSchema, disabled: disabled, readonly: readonly, hideError: hideError, autofocus: autofocus, errorSchema: fieldErrorSchema, 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 +138,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 || (XxxOfField && !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,
@@ -132,8 +155,9 @@ function SchemaFieldRender(props) {
         label,
         hidden,
         onChange,
-        onKeyChange,
-        onDropPropertyClick,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         required,
         disabled,
         readonly,
@@ -141,23 +165,21 @@ function SchemaFieldRender(props) {
         displayLabel,
         classNames: classNames.join(' ').trim(),
         style: uiOptions.style,
-        formContext,
         formData,
         schema,
         uiSchema,
         registry,
     };
-    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, XxxOfField && (_jsx(XxxOfField, { name: name, disabled: disabled, readonly: readonly, hideError: hideError, errorSchema: errorSchema, formData: formData, fieldPathId: fieldPathId, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, options: XxxOfOptions, 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"}