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

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutMultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/LayoutMultiSchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,eAAe,EAEf,UAAU,EACV,eAAe,EAOf,UAAU,EAIV,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACT,MAAM,aAAa,CAAC;AAQrB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,OAAO,GACb,CAAC,GAAG,SAAS,CAQf;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC,EAAE,EACZ,WAAW,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAC5B,QAAQ,CAAC,EAAE,CAAC,GACX,eAAe,CAAC,CAAC,CAAC,EAAE,CAatB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,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,2CAuI3B"}
+{"version":3,"file":"LayoutMultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/LayoutMultiSchemaField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,eAAe,EAEf,UAAU,EACV,eAAe,EAOf,UAAU,EAIV,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACT,MAAM,aAAa,CAAC;AAQrB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,OAAO,GACb,CAAC,GAAG,SAAS,CAQf;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAClH,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC,EAAE,EACZ,WAAW,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAC5B,QAAQ,CAAC,EAAE,CAAC,GACX,eAAe,CAAC,CAAC,CAAC,EAAE,CAatB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,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,2CAsI3B"}

package/lib/components/fields/LayoutMultiSchemaField.js

@@ -55,7 +55,7 @@ export function computeEnumOptions(schema, options, schemaUtils, uiSchema, formD
  * is active. If no `selectorField` is specified, then an error is thrown.
  */
 export default function LayoutMultiSchemaField(props) {
-    const { name, baseType, disabled = false, formData, fieldPathId, onBlur, onChange, options, onFocus, registry, uiSchema, schema, formContext, autofocus, readonly, required, errorSchema, hideError = false, } = props;
+    const { name, baseType, disabled = false, formData, fieldPathId, onBlur, onChange, options, onFocus, registry, uiSchema, schema, autofocus, readonly, required, errorSchema, hideError = false, } = props;
     const { widgets, schemaUtils, globalUiOptions } = registry;
     const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
     const id = get(fieldPathId, ID_KEY);
@@ -110,6 +110,5 @@ export default function LayoutMultiSchemaField(props) {
     // filtering the options based on the type of widget because `selectField` does not recognize the `convertOther` prop
     const widgetOptions = { enumOptions, ...uiOptions };
     const errors = !hideFieldError && rawErrors.length > 0 ? (_jsx(FieldErrorTemplate, { fieldPathId: fieldPathId, schema: schema, errors: rawErrors, registry: registry })) : undefined;
-    const ignored = (value) => noop;
-    return (_jsx(FieldTemplate, { id: id, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, required: required, readonly: !!readonly, registry: registry, displayLabel: displayLabel, errors: errors, onChange: onChange, onDropPropertyClick: ignored, onKeyChange: ignored, children: _jsx(Widget, { id: id, name: name, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, formContext: formContext, autofocus: autofocus, readonly: readonly, required: required, registry: registry, multiple: false, rawErrors: rawErrors, hideError: hideFieldError, hideLabel: !displayLabel, errorSchema: fieldErrorSchema, placeholder: placeholder, onChange: onOptionChange, onBlur: onBlur, onFocus: onFocus, value: selectedOption, options: widgetOptions }) }));
+    return (_jsx(FieldTemplate, { id: id, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, required: required, readonly: !!readonly, registry: registry, displayLabel: displayLabel, errors: errors, onChange: onChange, onKeyRename: noop, onKeyRenameBlur: noop, onRemoveProperty: noop, children: _jsx(Widget, { id: id, name: name, schema: schema, label: (title || schema.title) ?? '', disabled: disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions)), uiSchema: uiSchema, autofocus: autofocus, readonly: readonly, required: required, registry: registry, multiple: false, rawErrors: rawErrors, hideError: hideFieldError, hideLabel: !displayLabel, errorSchema: fieldErrorSchema, placeholder: placeholder, onChange: onOptionChange, onBlur: onBlur, onFocus: onFocus, value: selectedOption, options: widgetOptions, htmlName: fieldPathId.name }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/MultiSchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAIL,UAAU,EACV,eAAe,EAOf,UAAU,EACV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAErB,4DAA4D;AAC5D,KAAK,eAAe,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,IAAI;IAC9D,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,gBAAgB,EAAE,CAAC,EAAE,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,cAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACnH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACnB,eAAe,CAAC,CAAC,CAAC,CACnB;IACC;;;OAGG;gBACS,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAiBtC;;;;;OAKG;IACH,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,eAAe,CAAC;IAyBjG;;;;;OAKG;IACH,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;IAW/E;;;;;OAKG;IACH,cAAc,GAAI,SAAS,MAAM,UAqB/B;IAEF,UAAU;IAKV;OACG;IACH,MAAM;CAyHP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MultiSchemaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/MultiSchemaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAIL,UAAU,EACV,eAAe,EAQf,UAAU,EAEV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAErB,4DAA4D;AAC5D,KAAK,eAAe,CAAC,CAAC,SAAS,gBAAgB,GAAG,UAAU,IAAI;IAC9D,oCAAoC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,gBAAgB,EAAE,CAAC,EAAE,CAAC;CACvB,CAAC;AAEF;;;;GAIG;AACH,cAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACnH,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACnB,eAAe,CAAC,CAAC,CAAC,CACnB;IACC;;;OAGG;gBACS,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAiBtC;;;;;OAKG;IACH,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,eAAe,CAAC;IAyBjG;;;;;OAKG;IACH,iBAAiB,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE;IAW/E;;;;;OAKG;IACH,cAAc,GAAI,SAAS,MAAM,UAqB/B;IAEF,UAAU;IAKV;OACG;IACH,MAAM;CA4HP;AAED,eAAe,UAAU,CAAC"}

package/lib/components/fields/MultiSchemaField.js

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import get from 'lodash-es/get.js';
 import isEmpty from 'lodash-es/isEmpty.js';
 import omit from 'lodash-es/omit.js';
-import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getTemplate, getUiOptions, getWidget, mergeSchemas, ONE_OF_KEY, TranslatableString, } from '@rjsf/utils';
+import { ANY_OF_KEY, deepEquals, ERRORS_KEY, getDiscriminatorFieldFromSchema, getTemplate, getUiOptions, getWidget, isFormDataAvailable, mergeSchemas, ONE_OF_KEY, shouldRenderOptionalField, TranslatableString, } from '@rjsf/utils';
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
  *
@@ -96,10 +96,12 @@ class AnyOfField extends Component {
     /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
      */
     render() {
-        const { name, disabled = false, errorSchema = {}, formContext, onBlur, onFocus, readonly, registry, schema, uiSchema, } = this.props;
+        const { name, disabled = false, errorSchema = {}, formData, onBlur, onFocus, readonly, required = false, registry, schema, uiSchema, } = this.props;
         const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
         const { SchemaField: _SchemaField } = fields;
         const MultiSchemaFieldTemplate = getTemplate('MultiSchemaFieldTemplate', registry, globalUiOptions);
+        const isOptionalRender = shouldRenderOptionalField(registry, schema, required, uiSchema);
+        const hasFormData = isFormDataAvailable(formData);
         const { selectedOption, retrievedOptions } = this.state;
         const { widget = 'select', placeholder, autofocus, autocomplete, title = schema.title, ...uiOptions } = getUiOptions(uiSchema, globalUiOptions);
         const Widget = getWidget({ type: 'number' }, widget, widgets);
@@ -149,7 +151,7 @@ class AnyOfField extends Component {
                 value: index,
             };
         });
-        const selector = (_jsx(Widget, { id: this.getFieldId(), name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`, schema: { type: 'number', default: 0 }, onChange: this.onOptionChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled || isEmpty(enumOptions), multiple: false, rawErrors: rawErrors, errorSchema: fieldErrorSchema, value: selectedOption >= 0 ? selectedOption : undefined, options: { enumOptions, ...uiOptions }, registry: registry, formContext: formContext, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly }));
+        const selector = !isOptionalRender || hasFormData ? (_jsx(Widget, { id: this.getFieldId(), name: `${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`, schema: { type: 'number', default: 0 }, onChange: this.onOptionChange, onBlur: onBlur, onFocus: onFocus, disabled: disabled || isEmpty(enumOptions), multiple: false, rawErrors: rawErrors, errorSchema: fieldErrorSchema, value: selectedOption >= 0 ? selectedOption : undefined, options: { enumOptions, ...uiOptions }, registry: registry, placeholder: placeholder, autocomplete: autocomplete, autofocus: autofocus, label: title ?? name, hideLabel: !displayLabel, readonly: readonly })) : undefined;
         const optionsSchemaField = (optionSchema && optionSchema.type !== 'null' && (_jsx(_SchemaField, { ...this.props, schema: optionSchema, uiSchema: optionUiSchema }))) ||
             null;
         return (_jsx(MultiSchemaFieldTemplate, { schema: schema, registry: registry, uiSchema: uiSchema, selector: selector, optionSchemaField: optionsSchemaField }));

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

@@ -1,74 +1,8 @@
-import { Component } from 'react';
-import { ErrorSchema, FieldPathList, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-/** Type used for the state of the `ObjectField` component */
-type ObjectFieldState = {
-    /** Flag indicating whether an additional property key was modified */
-    wasPropertyKeyModified: boolean;
-    /** The set of additional properties */
-    additionalProperties: object;
-};
+import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** 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
  */
-declare class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<FieldProps<T, S, F>, ObjectFieldState> {
-    /** Set up the initial state */
-    state: {
-        wasPropertyKeyModified: boolean;
-        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: string): boolean;
-    /** 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.
-     *
-     * @param name - The name of the property
-     * @param addedByAdditionalProperties - Flag indicating whether this property is an additional property
-     * @returns - The onPropertyChange callback for the `name` property
-     */
-    onPropertyChange: (name: string, addedByAdditionalProperties?: boolean) => (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => void;
-    /** 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
-     */
-    onDropPropertyClick: (key: string) => (event: DragEvent) => void;
-    /** Computes the next available key name from the `preferredKey`, indexing through the already existing keys until one
-     * that is already not assigned is found.
-     *
-     * @param preferredKey - The preferred name of a new key
-     * @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: string, formData?: T) => string;
-    /** 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: any) => (value: any) => void;
-    /** 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?: RJSFSchema['type']): {} | null;
-    /** 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: S) => () => void;
-    /** Renders the `ObjectField` from the given props
-     */
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default ObjectField;
+export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ObjectField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAML,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAQjB,MAAM,aAAa,CAAC;AAQrB,6DAA6D;AAC7D,KAAK,gBAAgB,GAAG;IACtB,sEAAsE;IACtE,sBAAsB,EAAE,OAAO,CAAC;IAChC,uCAAuC;IACvC,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;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,EACnB,gBAAgB,CACjB;IACC,+BAA+B;IAC/B,KAAK;;;MAGH;IAEF;;;;OAIG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM;IAKvB;;;;;;;OAOG;IACH,gBAAgB,GAAI,MAAM,MAAM,EAAE,qCAAmC,MAC3D,OAAO,CAAC,GAAG,SAAS,EAAE,MAAM,aAAa,EAAE,iBAAiB,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,UAc/F;IAEF;;;;;OAKG;IACH,mBAAmB,GAAI,KAAK,MAAM,MACxB,OAAO,SAAS,UAQxB;IAEF;;;;;;OAMG;IACH,eAAe,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,YAUnD;IAEF;;;;;OAKG;IACH,WAAW,GAAI,UAAU,GAAG,MAClB,OAAO,GAAG,UAqBlB;IAEF;;;OAGG;IACH,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC;IAsBzC;;;;OAIG;IACH,cAAc,GAAI,QAAQ,CAAC,gBAsCzB;IAEF;OACG;IACH,MAAM;CA4GP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ObjectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ObjectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAcL,UAAU,EACV,eAAe,EAMf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAuKrB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACnH,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CAmN3B"}

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, shouldRenderOptionalField, toFieldPathId, TranslatableString, ADDITIONAL_PROPERTY_FLAG, PROPERTIES_KEY, REF_KEY, ANY_OF_KEY, ONE_OF_KEY, isFormDataAvailable, } 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,38 +55,57 @@ 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, 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
-                // 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);
-        };
-    };
-    /** 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, fieldPathId } = this.props;
-            const copiedFormData = { ...formData };
-            unset(copiedFormData, key);
-            // drop property will pass the name in `path` array
-            onChange(copiedFormData, fieldPathId.path);
-        };
-    };
+    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 || {});
+    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.
      *
@@ -74,77 +113,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) => {
-            if (oldValue === value) {
-                return;
-            }
-            const { formData, onChange, fieldPathId } = 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, fieldPathId.path);
-        };
-    };
-    /** 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, fieldPathId } = 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);
@@ -160,7 +147,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;
@@ -169,70 +156,81 @@ 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);
         }
-        // add will pass the name in `path` array
         onChange(newFormData, fieldPathId.path);
-    };
-    /** Renders the `ObjectField` from the given props
+    }, [formData, onChange, registry, fieldPathId, 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
      */
-    render() {
-        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;
-        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 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, fieldPathId.path);
+        }
+    }, [formData, onChange, fieldPathId, getAvailableKey]);
+    /** Handles the remove click which removes the old `key` data and calls the `onChange` callback with it
+     */
+    const handleRemoveProperty = useCallback((key) => {
+        const copiedFormData = { ...formData };
+        unset(copiedFormData, key);
+        onChange(copiedFormData, fieldPathId.path);
+    }, [onChange, fieldPathId, formData]);
+    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,
-            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 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), 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,
-                    required,
-                    hidden,
-                };
-            }),
-            readonly,
-            disabled,
-            required,
-            fieldPathId,
-            uiSchema,
-            errorSchema,
-            schema,
-            formData,
-            formContext,
-            registry,
-            optionalDataControl,
-            className: renderOptionalField ? 'rjsf-optional-object-field' : undefined,
-        };
-        return _jsx(Template, { ...templateProps, onAddClick: this.handleAddClick });
     }
+    const Template = getTemplate('ObjectFieldTemplate', registry, uiOptions);
+    const optionalDataControl = renderOptionalField ? (_jsx(OptionalDataControlsField, { ...props, 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: fieldPathId, 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/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,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"}
+{"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,EAOL,UAAU,EAEV,eAAe,EAQf,UAAU,EAGV,gBAAgB,EAGjB,MAAM,aAAa,CAAC;AAuRrB;;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"}