feat: Add support for user nameGenerator function (rjsf-team#4773)

* feat: Add `htmlName` prop

* feat: Add `idPrefix` arg to `nameGeneratorFunction`

* fix: Wrong prop order

* feat: Add common name generators

* feat: Handle multiple values field(s)

* fix: Use consistent variable name

Co-authored-by: Heath C <[email protected]>

* docs: Describe `nameGenerator` prop & add feature in the migration guide

* docs: Add `@rjsf/utils` and `@rjsf/core` changelog entries

* feat: Add `htmlName` to antd theme

* feat: Add `htmlName` to Chakra UI theme

* feat: Add `htmlName` to Daisy UI theme

* feat: Add `htmlName` to Fluent UI theme

* feat: Add `htmlName` to Mantine theme

* feat: Add `htmlName` to Mui theme

* feat: Add `htmlName` to Primereact theme

* feat: Add `htmlName` to React Bootstrap theme

* feat: Add `htmlName` to Semantic UI theme

* feat: Add `htmlName` to Shadcn theme

* docs: Add theme changes to changelog

* chore: Minor standard fixes

Authored-by: Heath C <[email protected]>

---------

Co-authored-by: Heath C <[email protected]>

Author: nlemoine

CHANGELOG.md

@@ -21,10 +21,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Updated most of the widgets to get `formContext` from the `registry` instead of the `props` since it will no longer be passed
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/chakra-ui
 
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/core
 
@@ -33,48 +35,61 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `ObjectField` to refactor the code from a class component to two stateless functional components, replacing the 3 generator-props with the 4 memoized props mentioned in the `@rjsf/utils` changes
 - Updated `Form` to "memoize" the `fieldPathId` and `registry` into the `FormState`, adding a `toIChangeEvent()` helper to restrict the state returned on the `IChangeEvent` interface callbacks
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Added `nameGenerator` prop to `Form` component to enable custom HTML `name` attribute generation for form fields
 
 ## @rjsf/daisyui
 
 - Updated the test mocks to remove `formContext` for the widget mock
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/fluentui-rc
 
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/mantine
 
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/mui
 
 - Updated `BaseInputTemplate` and `SelectWidget` to remove `formContext` from the props
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/primereact
 
 - Updated `SelectWidget` to remove `formContext` from the props
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/react-bootstrap
 
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/semantic-ui
 
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute
 
 ## @rjsf/shadcn
 
 - Updated the test mocks to remove `formContext` for the widget mock and added `globalFormOptions` in the registry mock
 - Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `SelectWidget`, and `TextareaWidget` to use `htmlName` for the HTML `name` attribute (Note: `RadioWidget` does not support `htmlName` due to Radix UI RadioGroup limitations)
 
 ## @rjsf/utils
 
 - BREAKING CHANGE: Updated `FieldTemplateProps` and `WrapIfAdditionalTemplateProps` to replace the `onKeyChange()` and `onDropPropertyClick()` callback generator props with the `onKeyRename()`, `onKeyRenameBlur()` and `onRemoveProperty()` callback props
 - BREAKING CHANGE: Updated `ObjectFieldTemplateProps` to replace the `onAddClick()` callback generator prop with the `onAddProperty()` callback prop
 - Added new hook `useDeepCompareMemo()` and its associated tests
+- Added `NameGeneratorFunction` type and two built-in name generators: `bracketNameGenerator` and `dotNotationNameGenerator`
+- Updated `GlobalFormOptions` type to include optional `nameGenerator` field
+- Updated `toFieldPathId()` function to support name generation via the `nameGenerator` option in `GlobalFormOptions`
+- Added `htmlName` field to `WidgetProps` interface to provide the generated HTML `name` attribute to widgets
 
 ## Dev / docs / playground
 - Updated the `formTests.tsx` snapshots to add an `anyOf` of all arrays with different item types and removed the disabling of the optional data controls feature for the optional object with oneOfs
@@ -86,6 +101,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated the `custom-templates.md` documentation to reflect the `additionalProperties`-based interface props replacement
 - Updated the `utility-functions.mf` documenation to add the new `useDeepCompareMemo()` hook
 - Updated the `v6.x upgrade guide.md` documentation to add the BREAKING CHANGES to the `FieldTemplateProps`, `ObjectFieldTemplateProps` and `WrapIfAdditionalTemplateProps` interface props changes and the `useDeepCompareMemo()` hook
+- Added documentation for the `nameGenerator` prop in `form-props.md` and v6.x upgrade guide
 
 # 6.0.0-beta.21
 
@@ -209,7 +225,7 @@ should change the heading of the (upcoming) version to include a major version b
   - `ObjectField` and `ArrayField` to use `toFieldPathId` instead of `toIdSchema()` to generate the `fieldPathId`s of all its children
   - Updated the `onChange` handling of fields to make `path` required and either pass it straight through, or use the `fieldPathId.path` instead of using an empty array or appending path information
   - Updated `Form` to use `toFieldPathId()` to generate `fieldPathId` instead of `idSchema`, always providing the `idPrefix` and `idSeparator` in the `globalFormOptions` and make the `path: FieldPathList` required
-  - Updated `LayoutGridField` to remove the `IdSchema` related code in favor of `FieldPathId` code 
+  - Updated `LayoutGridField` to remove the `IdSchema` related code in favor of `FieldPathId` code
 - Also exported the `getTestRegistry()` function from the main `index.ts` to assist developers in creating `registry` object for tests
 - Updated all of the test to deal with the `idSchema` -> `fieldPathId` changes
 

packages/antd/src/templates/BaseInputTemplate/index.tsx

@@ -30,6 +30,7 @@ export default function BaseInputTemplate<
     disabled,
     registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onChangeOverride,
@@ -60,7 +61,7 @@ export default function BaseInputTemplate<
       <InputNumber
         disabled={disabled || (readonlyAsDisabled && readonly)}
         id={id}
-        name={id}
+        name={htmlName || id}
         onBlur={!readonly ? handleBlur : undefined}
         onChange={!readonly ? handleNumberChange : undefined}
         onFocus={!readonly ? handleFocus : undefined}
@@ -75,7 +76,7 @@ export default function BaseInputTemplate<
       <Input
         disabled={disabled || (readonlyAsDisabled && readonly)}
         id={id}
-        name={id}
+        name={htmlName || id}
         onBlur={!readonly ? handleBlur : undefined}
         onChange={!readonly ? handleTextChange : undefined}
         onFocus={!readonly ? handleFocus : undefined}

packages/antd/src/widgets/CheckboxWidget/index.tsx

@@ -20,7 +20,8 @@ export default function CheckboxWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
-  const { autofocus, disabled, registry, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+  const { autofocus, disabled, registry, id, htmlName, label, hideLabel, onBlur, onChange, onFocus, readonly, value } =
+    props;
   const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
@@ -42,7 +43,7 @@ export default function CheckboxWidget<
       checked={typeof value === 'undefined' ? false : value}
       disabled={disabled || (readonlyAsDisabled && readonly)}
       id={id}
-      name={id}
+      name={htmlName || id}
       onChange={!readonly ? handleChange : undefined}
       {...extraProps}
       aria-describedby={ariaDescribedByIds(id)}

packages/antd/src/widgets/CheckboxesWidget/index.tsx

@@ -21,7 +21,19 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ autofocus, disabled, registry, id, onBlur, onChange, onFocus, options, readonly, value }: WidgetProps<T, S, F>) {
+>({
+  autofocus,
+  disabled,
+  registry,
+  id,
+  htmlName,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
   const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
@@ -49,7 +61,7 @@ export default function CheckboxesWidget<
     <>
       <Checkbox.Group
         disabled={disabled || (readonlyAsDisabled && readonly)}
-        name={id}
+        name={htmlName || id}
         onChange={!readonly ? handleChange : undefined}
         value={selectedIndexes}
         {...extraProps}
@@ -60,7 +72,7 @@ export default function CheckboxesWidget<
             <span key={i}>
               <Checkbox
                 id={optionId(id, i)}
-                name={id}
+                name={htmlName || id}
                 autoFocus={i === 0 ? autofocus : false}
                 disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
                 value={String(i)}

packages/antd/src/widgets/RadioWidget/index.tsx

@@ -22,6 +22,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   disabled,
   registry,
   id,
+  htmlName,
   onBlur,
   onChange,
   onFocus,
@@ -49,7 +50,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     <Radio.Group
       disabled={disabled || (readonlyAsDisabled && readonly)}
       id={id}
-      name={id}
+      name={htmlName || id}
       onChange={!readonly ? handleChange : undefined}
       onBlur={!readonly ? handleBlur : undefined}
       onFocus={!readonly ? handleFocus : undefined}
@@ -60,7 +61,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         enumOptions.map((option, i) => (
           <Radio
             id={optionId(id, i)}
-            name={id}
+            name={htmlName || id}
             autoFocus={i === 0 ? autofocus : false}
             disabled={disabled || (Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1)}
             key={i}

packages/antd/src/widgets/SelectWidget/index.tsx

@@ -31,6 +31,7 @@ export default function SelectWidget<
   disabled,
   registry,
   id,
+  htmlName,
   multiple,
   onBlur,
   onChange,
@@ -67,7 +68,7 @@ export default function SelectWidget<
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
   const extraProps = {
-    name: id,
+    name: htmlName || id,
   };
 
   const showPlaceholderOption = !multiple && schema.default === undefined;

packages/antd/src/widgets/TextareaWidget/index.tsx

@@ -21,7 +21,19 @@ export default function TextareaWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({ disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value }: WidgetProps<T, S, F>) {
+>({
+  disabled,
+  registry,
+  id,
+  htmlName,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
   const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
 
@@ -42,7 +54,7 @@ export default function TextareaWidget<
     <Input.TextArea
       disabled={disabled || (readonlyAsDisabled && readonly)}
       id={id}
-      name={id}
+      name={htmlName || id}
       onBlur={!readonly ? handleBlur : undefined}
       onChange={!readonly ? handleChange : undefined}
       onFocus={!readonly ? handleFocus : undefined}

packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -21,6 +21,7 @@ export default function BaseInputTemplate<
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
+    htmlName,
     type,
     value,
     label,
@@ -60,7 +61,7 @@ export default function BaseInputTemplate<
     >
       <Input
         id={id}
-        name={id}
+        name={htmlName || id}
         value={value || value === 0 ? value : ''}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}

packages/chakra-ui/src/CheckboxWidget/CheckboxWidget.tsx

@@ -23,6 +23,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -66,7 +67,7 @@ export default function CheckboxWidget<
       )}
       <Checkbox
         id={id}
-        name={id}
+        name={htmlName || id}
         checked={typeof value === 'undefined' ? false : value}
         disabled={disabled || readonly}
         onCheckedChange={_onChange}

packages/chakra-ui/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -22,6 +22,7 @@ export default function CheckboxesWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -70,7 +71,7 @@ export default function CheckboxesWidget<
                 <Checkbox
                   key={index}
                   id={optionId(id, index)}
-                  name={id}
+                  name={htmlName || id}
                   value={String(index)}
                   disabled={disabled || itemDisabled || readonly}
                   onBlur={_onBlur}