feat: Add support for user nameGenerator function

Closes #4693

Author: nlemoine

packages/core/src/components/Form.tsx

@@ -14,6 +14,7 @@ import {
   isObject,
   mergeObjects,
   NAME_KEY,
+  NameGeneratorFunction,
   PathSchema,
   StrictRJSFSchema,
   Registry,
@@ -212,6 +213,16 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    */
 
   experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>;
+  /** Optional function to generate HTML name attributes from path segments
+   * @param segments - Array of path segments representing the field hierarchy
+   * @param rootName - Optional root name prefix
+   * @returns - The generated name attribute string, or undefined to use default behavior
+   */
+  nameGenerator?: NameGeneratorFunction;
+  /** Optional root name to use with nameGenerator
+   * @default "root"
+   */
+  rootName?: string;
   // Private
   /**
    * _internalFormWrapper is currently used by the semantic-ui theme to provide a custom wrapper around `<Form />`
@@ -960,6 +971,7 @@ export default class Form<
     } = this.props;
     const { schema, schemaUtils } = this.state;
     const { fields, templates, widgets, formContext, translateString } = getDefaultRegistry<T, S, F>();
+
     return {
       fields: { ...fields, ...this.props.fields },
       templates: {
@@ -972,7 +984,13 @@ export default class Form<
       },
       widgets: { ...widgets, ...this.props.widgets },
       rootSchema: schema,
-      formContext: this.props.formContext || formContext,
+      formContext: {
+        ...(this.props.formContext || formContext),
+        ...(this.props.nameGenerator && {
+          nameGenerator: this.props.nameGenerator,
+          rootName: this.props.rootName || 'root',
+        }),
+      },
       schemaUtils,
       translateString: customTranslateString || translateString,
       globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY],
@@ -1158,6 +1176,14 @@ export default class Form<
           uiSchema={uiSchema}
           errorSchema={errorSchema}
           idSchema={idSchema}
+          pathSchema={(() => {
+            try {
+              return isObject(schema) ? registry.schemaUtils.toPathSchema(schema, '', formData) : undefined;
+            } catch {
+              // Silently handle malformed schemas in tests
+              return undefined;
+            }
+          })()}
           idPrefix={idPrefix}
           idSeparator={idSeparator}
           formData={formData}

packages/core/src/components/fields/ArrayField.tsx

@@ -12,6 +12,8 @@ import {
   FieldProps,
   FormContextType,
   IdSchema,
+  PathSchema,
+  PathSegment,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -502,6 +504,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       uiSchema = {},
       errorSchema,
       idSchema,
+      pathSchema,
       name,
       title,
       disabled = false,
@@ -534,6 +537,14 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
 
+        // Create path schema for array item with segments
+        const itemPathSegments: PathSegment[] = [...(pathSchema?.$segments || []), { type: 'array', key: index }];
+
+        const itemPathSchema: PathSchema<T> = {
+          $name: `${pathSchema?.$name || ''}.${index}`,
+          $segments: itemPathSegments,
+        };
+
         // Compute the item UI schema using the helper method
         const itemUiSchema = this.computeItemUiSchema(uiSchema, item, index, formContext);
 
@@ -547,6 +558,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           canMoveDown: index < formData.length - 1,
           itemSchema,
           itemIdSchema,
+          itemPathSchema,
           itemErrorSchema,
           itemData: itemCast,
           itemUiSchema,
@@ -738,6 +750,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       idPrefix,
       idSeparator = '_',
       idSchema,
+      pathSchema,
       name,
       title,
       disabled = false,
@@ -787,6 +800,15 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             : itemSchemas[index]) || {};
         const itemIdPrefix = idSchema.$id + idSeparator + index;
         const itemIdSchema = schemaUtils.toIdSchema(itemSchema, itemIdPrefix, itemCast, idPrefix, idSeparator);
+
+        // Create path schema for array item with segments
+        const itemPathSegments: PathSegment[] = [...(pathSchema?.$segments || []), { type: 'array', key: index }];
+
+        const itemPathSchema: PathSchema<T> = {
+          $name: `${pathSchema?.$name || ''}.${index}`,
+          $segments: itemPathSegments,
+        };
+
         // Compute the item UI schema - handle both static and dynamic cases
         let itemUiSchema: UiSchema<T[], S, F> | undefined;
         if (additional) {
@@ -816,6 +838,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           itemData: itemCast,
           itemUiSchema,
           itemIdSchema,
+          itemPathSchema,
           itemErrorSchema,
           autofocus: autofocus && index === 0,
           onBlur,
@@ -857,6 +880,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     itemData: T[];
     itemUiSchema: UiSchema<T[], S, F> | undefined;
     itemIdSchema: IdSchema<T[]>;
+    itemPathSchema?: PathSchema<T>;
     itemErrorSchema?: ErrorSchema<T[]>;
     autofocus?: boolean;
     onBlur: FieldProps<T[], S, F>['onBlur'];
@@ -876,6 +900,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       itemData,
       itemUiSchema,
       itemIdSchema,
+      itemPathSchema,
       itemErrorSchema,
       autofocus,
       onBlur,
@@ -914,6 +939,7 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
           idPrefix={idPrefix}
           idSeparator={idSeparator}
           idSchema={itemIdSchema}
+          pathSchema={itemPathSchema}
           required={this.isItemRequired(itemSchema)}
           onChange={this.onChangeForIndex(index)}
           onBlur={onBlur}

packages/core/src/components/fields/ObjectField.tsx

@@ -8,6 +8,8 @@ import {
   FormContextType,
   GenericObjectType,
   IdSchema,
+  PathSchema,
+  PathSegment,
   RJSFSchema,
   StrictRJSFSchema,
   TranslatableString,
@@ -232,6 +234,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       formData,
       errorSchema,
       idSchema,
+      pathSchema,
       name,
       required = false,
       disabled,
@@ -282,6 +285,14 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
         const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
         const fieldIdSchema: IdSchema<T> = get(idSchema, [name], {});
 
+        // Create path schema for property with segments
+        const propertyPathSegments: PathSegment[] = [...(pathSchema?.$segments || []), { type: 'object', key: name }];
+
+        const propertyPathSchema: PathSchema<T> = (pathSchema?.[name] as PathSchema<T>) || {
+          $name: `${pathSchema?.$name || ''}.${name}`,
+          $segments: propertyPathSegments,
+        };
+
         return {
           content: (
             <SchemaField
@@ -292,6 +303,7 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
               uiSchema={fieldUiSchema}
               errorSchema={get(errorSchema, name)}
               idSchema={fieldIdSchema}
+              pathSchema={propertyPathSchema}
               idPrefix={idPrefix}
               idSeparator={idSeparator}
               formData={get(formData, name)}

packages/core/src/components/fields/StringField.tsx

@@ -23,6 +23,7 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     name,
     uiSchema,
     idSchema,
+    pathSchema,
     formData,
     required,
     disabled = false,
@@ -37,6 +38,14 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   } = props;
   const { title, format } = schema;
   const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
+
+  // Generate HTML name if nameGenerator is provided
+  const { nameGenerator, rootName } = formContext || {};
+  let htmlName: string | undefined;
+
+  if (nameGenerator && pathSchema?.$segments) {
+    htmlName = nameGenerator(pathSchema.$segments, rootName);
+  }
   const enumOptions = schemaUtils.isSelect(schema) ? optionsList<T, S, F>(schema, uiSchema) : undefined;
   let defaultWidget = enumOptions ? 'select' : 'text';
   if (format && hasWidget<T, S, F>(schema, format, widgets)) {
@@ -60,6 +69,8 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       uiSchema={uiSchema}
       id={idSchema.$id}
       name={name}
+      htmlName={htmlName}
+      pathSegments={pathSchema?.$segments}
       label={label}
       hideLabel={!displayLabel}
       hideError={hideError}

packages/core/src/components/templates/BaseInputTemplate.tsx

@@ -23,6 +23,7 @@ export default function BaseInputTemplate<
   const {
     id,
     name, // remove this from ...rest
+    htmlName, // remove this from ...rest
     value,
     readonly,
     disabled,
@@ -40,11 +41,12 @@ export default function BaseInputTemplate<
     type,
     hideLabel, // remove this from ...rest
     hideError, // remove this from ...rest
+    pathSegments, // remove this from ...rest
     ...rest
   } = props;
 
   // Note: since React 15.2.0 we can't forward unknown element attributes, so we
-  // exclude the "options" and "schema" ones here.
+  // exclude the "options", "schema", and other non-HTML props here.
   if (!id) {
     console.log('No id for', props);
     throw new Error(`no id for props ${JSON.stringify(props)}`);
@@ -78,7 +80,7 @@ export default function BaseInputTemplate<
     <>
       <input
         id={id}
-        name={id}
+        name={htmlName || id}
         className='form-control'
         readOnly={readonly}
         disabled={disabled}

packages/playground/src/components/Header.tsx

@@ -15,6 +15,7 @@ import CopyLink from './CopyLink';
 import ThemeSelector, { ThemesType } from './ThemeSelector';
 import SampleSelector, { SampleSelectorProps } from './SampleSelector';
 import ValidatorSelector from './ValidatorSelector';
+import NameGeneratorSelector from './NameGeneratorSelector';
 import SubthemeSelector, { SubthemeType } from './SubthemeSelector';
 import RawValidatorTest from './RawValidatorTest';
 
@@ -254,13 +255,15 @@ type HeaderProps = {
     [validatorName: string]: ValidatorType<any, RJSFSchema, any>;
   };
   validator: string;
+  nameGenerator: string | null;
   liveSettings: LiveSettings;
   playGroundFormRef: MutableRefObject<any>;
   onSampleSelected: SampleSelectorProps['onSelected'];
   onThemeSelected: (theme: string, themeObj: ThemesType) => void;
   setSubtheme: Dispatch<SetStateAction<string | null>>;
   setStylesheet: Dispatch<SetStateAction<string | null>>;
   setValidator: Dispatch<SetStateAction<string>>;
+  setNameGenerator: Dispatch<SetStateAction<string | null>>;
   setLiveSettings: Dispatch<SetStateAction<LiveSettings>>;
   setShareURL: Dispatch<SetStateAction<string | null>>;
 };
@@ -275,12 +278,14 @@ export default function Header({
   subtheme,
   validators,
   validator,
+  nameGenerator,
   liveSettings,
   playGroundFormRef,
   onThemeSelected,
   setSubtheme,
   setStylesheet,
   setValidator,
+  setNameGenerator,
   setLiveSettings,
   setShareURL,
   sampleName,
@@ -301,6 +306,13 @@ export default function Header({
     [setValidator],
   );
 
+  const onNameGeneratorSelected = useCallback(
+    (nameGenerator: string | null) => {
+      setNameGenerator(nameGenerator);
+    },
+    [setNameGenerator],
+  );
+
   const handleSetLiveSettings = useCallback(
     ({ formData }: IChangeEvent) => {
       setLiveSettings((previousLiveSettings) => ({ ...previousLiveSettings, ...formData }));
@@ -322,6 +334,7 @@ export default function Header({
           theme,
           liveSettings,
           validator,
+          nameGenerator,
           sampleName,
         }),
       );
@@ -331,7 +344,7 @@ export default function Header({
       setShareURL(null);
       console.error(error);
     }
-  }, [formData, liveSettings, schema, theme, uiSchema, validator, setShareURL, sampleName]);
+  }, [formData, liveSettings, schema, theme, uiSchema, validator, nameGenerator, setShareURL, sampleName]);
 
   return (
     <div className='page-header'>
@@ -370,6 +383,7 @@ export default function Header({
             <SubthemeSelector subthemes={themes[theme].subthemes!} subtheme={subtheme} select={onSubthemeSelected} />
           )}
           <ValidatorSelector validators={validators} validator={validator} select={onValidatorSelected} />
+          <NameGeneratorSelector nameGenerator={nameGenerator} select={onNameGeneratorSelected} />
           <HeaderButtons playGroundFormRef={playGroundFormRef} />
           <div style={{ marginTop: '5px' }} />
           <CopyLink shareURL={shareURL} onShare={onShare} />

packages/playground/src/components/NameGeneratorSelector.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import Form, { IChangeEvent } from '@rjsf/core';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import localValidator from '@rjsf/validator-ajv8';
+
+interface NameGeneratorSelectorProps {
+  nameGenerator: string | null;
+  select: (nameGenerator: string | null) => void;
+}
+
+export default function NameGeneratorSelector({ nameGenerator, select }: NameGeneratorSelectorProps) {
+  const schema: RJSFSchema = {
+    type: 'string',
+    title: 'Name Generator',
+    oneOf: [
+      { const: '', title: 'None' },
+      { const: 'bracket', title: 'Bracket (root[field][0])' },
+      { const: 'dotnotation', title: 'Dot Notation (root.field.0)' },
+    ],
+  };
+
+  const uiSchema: UiSchema = {
+    'ui:placeholder': 'Select name generator',
+  };
+
+  const onChange = useCallback(
+    ({ formData }: IChangeEvent) => {
+      select(formData === '' ? null : formData);
+    },
+    [select],
+  );
+
+  return (
+    <Form
+      className='form_rjsf_nameGeneratorSelector'
+      idPrefix='rjsf_nameGeneratorSelector'
+      schema={schema}
+      uiSchema={uiSchema}
+      formData={nameGenerator || ''}
+      validator={localValidator}
+      onChange={onChange}
+    >
+      <div />
+    </Form>
+  );
+}