Added new templates, utility function and refactored ArrayFieldItemTemplate (#4489)

* Added new templates, utility function and refactored ArrayFieldItemTemplate
- In `@rjsf/utils`:
  - Refactored the `ArrayFieldItemTemplateType` to extract out all the button related props to `ArrayFieldItemButtonsTemplateType`, adding `buttonsProps: ArrayFieldItemButtonsTemplateType` as a new prop
    - Also created a deprecated alias type `ArrayFieldTemplateItemType` that points to `ArrayFieldItemTemplateType` for backwards compatibility
  - Added new `GridTemplateProps` type
  - Added two the following new, required props to `TemplatesType`:
    - `ArrayFieldItemButtonsTemplate: ComponentType<ArrayFieldItemButtonsTemplateType<T, S, F>>;`
    - `GridTemplate: ComponentType<GridTemplateProps>`
  - Added a new `buttonId<T>(id: IdSchema<T> | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')` used to generate consistent ids for RJSF buttons
- In `@rjsf/core`:
  - Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType`
  - Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function
  - Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
  - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
- All other themes:
  - Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
  - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
- Updated the playground to remove `fluent-ui` theme
- Updated the `custom-templates.md` documentation for the changes to the `ArrayFieldTemplateItem` and add the two new templates
- Updated the `utility-functions.md` documentation to add the `buttonId()` function
- Added the `v6.x upgrade guide.md` documentation
- Updated `CHANGELOG_V6.md` accordingly

* - Updated changelog

* Apply suggestions from code review

- Self feedback

* Update packages/docs/docs/advanced-customization/custom-templates.md

- Self review

Author: heath-freenome

CHANGELOG_v6.md

@@ -17,13 +17,68 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 6.0.0-beta.1
 
+## @rjsf/antd
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/chakra-ui
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/core
+
+- BREAKING CHANGE: Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType`
+- Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function
+- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/fluent-ui
+
+- BREAKING CHANGE: Deleted this theme in favor of `fluentui-rc`
+
+## @rjsf/fluentui-rc
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/mui
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/semantic-ui
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+
+## @rjsf/utils
+
+- BREAKING CHANGE: Refactored the `ArrayFieldItemTemplateType` to extract out all the button related props to `ArrayFieldItemButtonsTemplateType`, adding `buttonsProps: ArrayFieldItemButtonsTemplateType` as a new prop
+  - Also created a deprecated alias type `ArrayFieldTemplateItemType` that points to `ArrayFieldItemTemplateType` for backwards compatibility
+- Added new `GridTemplateProps` type
+- BREAKING CHANGE: Added two the following new, required props to `TemplatesType`:
+  - `ArrayFieldItemButtonsTemplate: ComponentType<ArrayFieldItemButtonsTemplateType<T, S, F>>;`
+  - `GridTemplate: ComponentType<GridTemplateProps>`
+- Added a new `buttonId<T>(id: IdSchema<T> | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')` used to generate consistent ids for RJSF buttons
+
+## Dev / docs / playground
+
+- Updated the playground to remove `fluent-ui` theme
+- Updated the `custom-templates.md` documentation for the changes to the `ArrayFieldTemplateItem` and add the two new templates
+- Updated the `utility-functions.md` documentation to add the `buttonId()` function
+- Added the `v6.x upgrade guide.md` documentation
+
+# 6.0.0-alpha.0
+
 ## @rjsf/bootstrap-4
 
-- Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6.
+- BREAKING CHANGE: Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6.
 
 ## @rjsf/material-ui
 
-- Removed `@rjsf/material-ui` package. Material UI v4 (`@material-ui/core`) has been deprecated since September 2021. To use Material UI v5 (`@mui/core`) with RJSF, please use the `@rjsf/mui` theme instead.
+- BREAKING CHANGE: Removed `@rjsf/material-ui` package. Material UI v4 (`@material-ui/core`) has been deprecated since September 2021. To use Material UI v5 (`@mui/core`) with RJSF, please use the `@rjsf/mui` theme instead.
 
 ## @rjsf/react-bootstrap
 
@@ -33,3 +88,7 @@ should change the heading of the (upcoming) version to include a major version b
 - IconButton: Remove deprecated `block` prop
 - RangeWidget: Use `FormRange` component
 - SelectWidget: Use new FormSelect component, remove `bsPrefix` prop to achieve correct styling
+
+## Dev / docs / playground
+
+- Updated the playground to remove `material-ui-4` theme and replace the `bootstrap-4` theme with `react-bootstrap`

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

@@ -1,5 +1,12 @@
 import { Button, Col, Row } from 'antd';
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  getUiOptions,
+  getTemplate,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 const BTN_GRP_STYLE = {
   width: '100%',
@@ -11,30 +18,20 @@ const BTN_STYLE = {
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const {
-    children,
-    disabled,
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    hasToolbar,
-    index,
-    onCopyIndexClick,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
+  const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-    uiSchema,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    uiOptions
+  );
   const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext;
 
   return (
@@ -44,42 +41,7 @@ export default function ArrayFieldItemTemplate<
       {hasToolbar && (
         <Col flex='192px'>
           <Button.Group style={BTN_GRP_STYLE}>
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveUpButton
-                disabled={disabled || readonly || !hasMoveUp}
-                onClick={onReorderClick(index, index - 1)}
-                style={BTN_STYLE}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveDownButton
-                disabled={disabled || readonly || !hasMoveDown}
-                onClick={onReorderClick(index, index + 1)}
-                style={BTN_STYLE}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasCopy && (
-              <CopyButton
-                disabled={disabled || readonly}
-                onClick={onCopyIndexClick(index)}
-                style={BTN_STYLE}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasRemove && (
-              <RemoveButton
-                disabled={disabled || readonly}
-                onClick={onDropIndexClick(index)}
-                style={BTN_STYLE}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
+            <ArrayFieldItemButtonsTemplate {...buttonsProps} style={BTN_STYLE} />
           </Button.Group>
         </Col>
       )}

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

@@ -7,6 +7,7 @@ import {
   GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
+  buttonId,
 } from '@rjsf/utils';
 import classNames from 'classnames';
 import { Col, Row, ConfigProvider } from 'antd';
@@ -18,7 +19,7 @@ const DESCRIPTION_COL_STYLE = {
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldTemplateItemType` props for the component
+ * @param props - The `ArrayFieldItemTemplateType` props for the component
  */
 export default function ArrayFieldTemplate<
   T = any,
@@ -109,6 +110,7 @@ export default function ArrayFieldTemplate<
             <Row gutter={rowGutter} justify='end'>
               <Col flex='192px'>
                 <AddButton
+                  id={buttonId<T>(idSchema, 'add')}
                   className='array-item-add'
                   disabled={disabled || readonly}
                   onClick={onAddClick}

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

@@ -15,6 +15,7 @@ import {
   getTemplate,
   getUiOptions,
   titleId,
+  buttonId,
 } from '@rjsf/utils';
 import { Col, Row, ConfigProvider } from 'antd';
 import { useContext } from 'react';
@@ -153,6 +154,7 @@ export default function ObjectFieldTemplate<
           <Row gutter={rowGutter} justify='end'>
             <Col flex='192px'>
               <AddButton
+                id={buttonId<T>(idSchema, 'add')}
                 className='object-property-expand'
                 disabled={disabled || readonly}
                 onClick={onAddClick(schema)}

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

@@ -8,6 +8,7 @@ import {
   StrictRJSFSchema,
   TranslatableString,
   WrapIfAdditionalTemplateProps,
+  buttonId,
 } from '@rjsf/utils';
 
 const VERTICAL_LABEL_COL = { span: 24 };
@@ -108,6 +109,7 @@ export default function WrapIfAdditionalTemplate<
         </Col>
         <Col flex='192px'>
           <RemoveButton
+            id={buttonId<T>(id, 'remove')}
             className='array-item-remove'
             disabled={disabled || readonly}
             onClick={onDropPropertyClick(label)}