@rjsf/core 6.0.0-beta.9 → 6.0.1

package/src/components/fields/LayoutHeaderField.tsx

@@ -9,7 +9,7 @@ import {
   TemplatesType,
 } from '@rjsf/utils';
 
-/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `idSchema`
+/** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `fieldPathId`
  * and whether it is `required` from the props. The `title` is derived from the props as follows:
  * - If there is a title in the `uiSchema`, it is displayed
  * - Else, if there is an explicit `title` passed in the props, it is displayed
@@ -23,7 +23,7 @@ export default function LayoutHeaderField<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldProps<T, S, F>) {
-  const { idSchema, title, schema, uiSchema, required, registry, name } = props;
+  const { fieldPathId, title, schema, uiSchema, required, registry, name } = props;
   const options = getUiOptions<T, S, F>(uiSchema, registry.globalUiOptions);
   const { title: uiTitle } = options;
   const { title: schemaTitle } = schema;
@@ -38,7 +38,7 @@ export default function LayoutHeaderField<
   );
   return (
     <TitleFieldTemplate
-      id={titleId<T>(idSchema)}
+      id={titleId(fieldPathId)}
       title={fieldTitle}
       required={required}
       schema={schema}

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -96,7 +96,7 @@ export default function LayoutMultiSchemaField<
     baseType,
     disabled = false,
     formData,
-    idSchema,
+    fieldPathId,
     onBlur,
     onChange,
     options,
@@ -104,7 +104,6 @@ export default function LayoutMultiSchemaField<
     registry,
     uiSchema,
     schema,
-    formContext,
     autofocus,
     readonly,
     required,
@@ -113,7 +112,7 @@ export default function LayoutMultiSchemaField<
   } = props;
   const { widgets, schemaUtils, globalUiOptions } = registry;
   const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData)!);
-  const id = get(idSchema, ID_KEY);
+  const id = get(fieldPathId, ID_KEY);
   const discriminator = getDiscriminatorFieldFromSchema(schema);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, options);
@@ -171,16 +170,16 @@ export default function LayoutMultiSchemaField<
     if (newFormData) {
       set(newFormData, selectorField, opt);
     }
-    onChange(newFormData, undefined, id);
+    // Pass the component name in the path
+    onChange(newFormData, fieldPathId.path, undefined, id);
   };
 
   // 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 ? (
-      <FieldErrorTemplate idSchema={idSchema} schema={schema} errors={rawErrors} registry={registry} />
+      <FieldErrorTemplate fieldPathId={fieldPathId} schema={schema} errors={rawErrors} registry={registry} />
     ) : undefined;
-  const ignored = (value: string) => noop;
 
   return (
     <FieldTemplate
@@ -189,15 +188,15 @@ export default function LayoutMultiSchemaField<
       label={(title || schema.title) ?? ''}
       disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
       uiSchema={uiSchema}
-      formContext={formContext}
       required={required}
       readonly={!!readonly}
       registry={registry}
       displayLabel={displayLabel}
       errors={errors}
       onChange={onChange}
-      onDropPropertyClick={ignored}
-      onKeyChange={ignored}
+      onKeyRename={noop}
+      onKeyRenameBlur={noop}
+      onRemoveProperty={noop}
     >
       <Widget
         id={id}
@@ -206,7 +205,6 @@ export default function LayoutMultiSchemaField<
         label={(title || schema.title) ?? ''}
         disabled={disabled || (Array.isArray(enumOptions) && isEmpty(enumOptions))}
         uiSchema={uiSchema}
-        formContext={formContext}
         autofocus={autofocus}
         readonly={readonly}
         required={required}
@@ -222,6 +220,7 @@ export default function LayoutMultiSchemaField<
         onFocus={onFocus}
         value={selectedOption}
         options={widgetOptions}
+        htmlName={fieldPathId.name}
       />
     </FieldTemplate>
   );

package/src/components/fields/MultiSchemaField.tsx

@@ -9,11 +9,14 @@ import {
   FieldProps,
   FormContextType,
   getDiscriminatorFieldFromSchema,
+  getTemplate,
   getUiOptions,
   getWidget,
+  isFormDataAvailable,
   mergeSchemas,
   ONE_OF_KEY,
   RJSFSchema,
+  shouldRenderOptionalField,
   StrictRJSFSchema,
   TranslatableString,
   UiSchema,
@@ -64,7 +67,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    * @param prevState - The previous `AnyOfFieldState` for this template
    */
   componentDidUpdate(prevProps: Readonly<FieldProps<T, S, F>>, prevState: Readonly<AnyOfFieldState>) {
-    const { formData, options, idSchema } = this.props;
+    const { formData, options, fieldPathId } = this.props;
     const { selectedOption } = this.state;
     let newState = this.state;
     if (!deepEquals(prevProps.options, options)) {
@@ -75,7 +78,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
       newState = { selectedOption, retrievedOptions };
     }
-    if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
+    if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
       const { retrievedOptions } = newState;
       const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
 
@@ -113,7 +116,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    */
   onOptionChange = (option?: string) => {
     const { selectedOption, retrievedOptions } = this.state;
-    const { formData, onChange, registry } = this.props;
+    const { formData, onChange, registry, fieldPathId } = this.props;
     const { schemaUtils } = registry;
     const intOption = option !== undefined ? parseInt(option, 10) : -1;
     if (intOption === selectedOption) {
@@ -130,13 +133,13 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     }
 
     this.setState({ selectedOption: intOption }, () => {
-      onChange(newFormData, undefined, this.getFieldId());
+      onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
     });
   };
 
   getFieldId() {
-    const { idSchema, schema } = this.props;
-    return `${idSchema.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
+    const { fieldPathId, schema } = this.props;
+    return `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
   }
 
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
@@ -146,10 +149,11 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       name,
       disabled = false,
       errorSchema = {},
-      formContext,
+      formData,
       onBlur,
       onFocus,
       readonly,
+      required = false,
       registry,
       schema,
       uiSchema,
@@ -157,6 +161,14 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
     const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
     const { SchemaField: _SchemaField } = fields;
+    const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
+      'MultiSchemaFieldTemplate',
+      registry,
+      globalUiOptions,
+    );
+    const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable<T>(formData);
+
     const { selectedOption, retrievedOptions } = this.state;
     const {
       widget = 'select',
@@ -215,36 +227,45 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       };
     });
 
+    const selector =
+      !isOptionalRender || hasFormData ? (
+        <Widget
+          id={this.getFieldId()}
+          name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
+          schema={{ type: 'number', default: 0 } as S}
+          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' && (
+        <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
+      )) ||
+      null;
+
     return (
-      <div className='panel panel-default panel-body'>
-        <div className='form-group'>
-          <Widget
-            id={this.getFieldId()}
-            name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
-            schema={{ type: 'number', default: 0 } as S}
-            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}
-          />
-        </div>
-        {optionSchema && optionSchema.type !== 'null' && (
-          <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
-        )}
-      </div>
+      <MultiSchemaFieldTemplate
+        schema={schema}
+        registry={registry}
+        uiSchema={uiSchema}
+        selector={selector}
+        optionSchemaField={optionsSchemaField}
+      />
     );
   }
 }

package/src/components/fields/NullField.tsx

@@ -9,12 +9,12 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
 function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: FieldProps<T, S, F>,
 ) {
-  const { formData, onChange } = props;
+  const { formData, onChange, fieldPathId } = props;
   useEffect(() => {
     if (formData === undefined) {
-      onChange(null as unknown as T);
+      onChange(null as unknown as T, fieldPathId.path);
     }
-  }, [formData, onChange]);
+  }, [fieldPathId, formData, onChange]);
 
   return null;
 }

package/src/components/fields/NumberField.tsx

@@ -1,5 +1,13 @@
 import { useState, useCallback } from 'react';
-import { asNumber, ErrorSchema, FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  asNumber,
+  ErrorSchema,
+  FieldPathList,
+  FieldProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 // Matches a string that ends in a . character, optionally followed by a sequence of
 // digits followed by any number of 0 characters up until the end of the line.
@@ -44,7 +52,7 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
    * @param value - The current value for the change occurring
    */
   const handleChange = useCallback(
-    (value: FieldProps<T, S, F>['value'], errorSchema?: ErrorSchema<T>, id?: string) => {
+    (value: FieldProps<T, S, F>['value'], path: FieldPathList, errorSchema?: ErrorSchema<T>, id?: string) => {
       // Cache the original value in component state
       setLastValue(value);
 
@@ -62,7 +70,7 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
           ? asNumber(value.replace(trailingCharMatcher, ''))
           : asNumber(value);
 
-      onChange(processed as unknown as T, errorSchema, id);
+      onChange(processed as unknown as T, path, errorSchema, id);
     },
     [onChange],
   );