Chore: Convert ObjectField to function components (rjsf-team#4806)

* Chore: Convert ObjectField to a stateless component
The work to convert `ObjectField` to a stateless functional component with some optimizations

* - Responded to code walkthru feedback

* - Updated documentation

* - Added `useFieldPathId()`

* - Responded to reviewer feedback

Author: heath-freenome

CHANGELOG.md

@@ -20,27 +20,61 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/antd
 
 - 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
+
+## @rjsf/chakra-ui
+
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
 
 ## @rjsf/core
 
 - Updated `MultiSchemaField` and `SchemaField` to properly display `anyOf`/`oneOf` optional data fields by hiding the label and selector control when it is an optional field AND there is no form data
 - Updated `ArrayField`, `BooleanField`, `LayoutMultiSchemaField`, `MultiSchemaField`, `ObjectField`, `SchemaField`, `StringField` and `BaseInputTemplate` to remove `formContext` from the props
+- 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
 
 ## @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
+
+## @rjsf/fluentui-rc
+
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+
+## @rjsf/mantine
+
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
 
 ## @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
 
 ## @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
+
+## @rjsf/react-bootstrap
+
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
+
+## @rjsf/semantic-ui
+
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to rename the old `additionalProperties` interface props to the new ones
 
 ## @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
+
+## @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
 
 ## 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
@@ -49,6 +83,9 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated the `Sample` and `LiveSettings` types to support the `liveSettings` inside of a sample
 - Updated the `Playground`'s `onSampleSelected` callback to merge any `liveSettings` in the sample on top of those already used in the playground
 - Updated the `customFieldAnyOf` sample to switch `IdSchema` to `FieldPathId`
+- 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
 
 # 6.0.0-beta.21
 

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

@@ -34,8 +34,9 @@ export default function FieldTemplate<
     hidden,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     rawErrors,
     rawDescription,
     rawHelp,
@@ -86,8 +87,9 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
       readonly={readonly}
       required={required}
       schema={schema}

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

@@ -40,7 +40,7 @@ export default function ObjectFieldTemplate<
     disabled,
     formData,
     fieldPathId,
-    onAddClick,
+    onAddProperty,
     optionalDataControl,
     properties,
     readonly,
@@ -160,7 +160,7 @@ export default function ObjectFieldTemplate<
                 id={buttonId(fieldPathId, 'add')}
                 className='rjsf-object-property-expand'
                 disabled={disabled || readonly}
-                onClick={onAddClick(schema)}
+                onClick={onAddProperty}
                 uiSchema={uiSchema}
                 registry={registry}
               />

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

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import { Col, Row, Form, Input } from 'antd';
 import {
   ADDITIONAL_PROPERTY_FLAG,
@@ -35,8 +34,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     required,
     registry,
@@ -66,8 +65,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
-
   // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
@@ -97,7 +94,7 @@ export default function WrapIfAdditionalTemplate<
                 disabled={disabled || (readonlyAsDisabled && readonly)}
                 id={`${id}-key`}
                 name={`${id}-key`}
-                onBlur={!readonly ? handleBlur : undefined}
+                onBlur={!readonly ? onKeyRenameBlur : undefined}
                 style={INPUT_STYLE}
                 type='text'
               />
@@ -112,7 +109,7 @@ export default function WrapIfAdditionalTemplate<
             id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove'
             disabled={disabled || readonly}
-            onClick={onDropPropertyClick(label)}
+            onClick={onRemoveProperty}
             uiSchema={buttonUiOptions}
             registry={registry}
           />

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

@@ -22,8 +22,9 @@ export default function FieldTemplate<
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     registry,
     required,
@@ -53,8 +54,9 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
       readonly={readonly}
       required={required}
       schema={schema}

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

@@ -29,7 +29,7 @@ export default function ObjectFieldTemplate<
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -81,7 +81,7 @@ export default function ObjectFieldTemplate<
             <AddButton
               id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'
-              onClick={onAddClick(schema)}
+              onClick={onAddProperty}
               disabled={disabled || readonly}
               uiSchema={uiSchema}
               registry={registry}

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

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -24,8 +23,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -45,8 +44,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
-
   return (
     <Grid key={`${id}-key`} className={classNames} style={style} alignItems='center' gap={2}>
       <GridItem>
@@ -56,7 +53,7 @@ export default function WrapIfAdditionalTemplate<
             disabled={disabled || readonly}
             id={`${id}-key`}
             name={`${id}-key`}
-            onBlur={!readonly ? handleBlur : undefined}
+            onBlur={!readonly ? onKeyRenameBlur : undefined}
             type='text'
             mb={1}
           />
@@ -68,7 +65,7 @@ export default function WrapIfAdditionalTemplate<
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemoveProperty}
           uiSchema={uiSchema}
           registry={registry}
         />