Implemented the GridTemplate for all themes

- In all themes except `@rjsf/core`:
  - Implemented the `GridTemplate` using the theme specific grid, adding them to the `templates` in the Registry
- In `@rjsf/core` cleaned up the documentation for the already implemented `GridTemplate`
- In `@rjsf/mui` switched to using the `Grid2` component instead of the deprecated `Grid`
- Updated the `CHANGELOG_V6.md` accordingly

Author: heath-freenome

CHANGELOG_v6.md

@@ -21,18 +21,21 @@ should change the heading of the (upcoming) version to include a major version b
 
 - 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
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme 
 
 ## @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
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
 
 ## @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
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
 
 ## @rjsf/fluent-ui
 
@@ -42,16 +45,20 @@ should change the heading of the (upcoming) version to include a major version b
 
 - 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
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
 
 ## @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
+- Updated the theme to use `Grid2` instead of the deprecated `Grid`
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
 
 ## @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
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
 
 ## @rjsf/utils
 

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

@@ -0,0 +1,15 @@
+import { Col, Row } from 'antd';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for antd, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Row`/`Col`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the antd grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  if (column) {
+    return <Col {...rest}>{children}</Col>;
+  }
+  return <Row {...rest}>{children}</Row>;
+}

packages/antd/src/templates/index.ts

@@ -8,6 +8,7 @@ import ErrorList from './ErrorList';
 import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
 import FieldErrorTemplate from './FieldErrorTemplate';
 import FieldTemplate from './FieldTemplate';
+import GridTemplate from './GridTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
 import SubmitButton from './SubmitButton';
 import TitleField from './TitleField';
@@ -34,6 +35,7 @@ export function generateTemplates<
     ErrorListTemplate: ErrorList,
     FieldErrorTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

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

@@ -0,0 +1,15 @@
+import { Grid, GridItem } from '@chakra-ui/react';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for chakra-ui, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Grid`/`GridItem`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the chakra-ui grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  if (column) {
+    return <GridItem {...rest}>{children}</GridItem>;
+  }
+  return <Grid {...rest}>{children}</Grid>;
+}

packages/chakra-ui/src/GridTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './GridTemplate';
+export * from './GridTemplate';

packages/chakra-ui/src/Templates/Templates.ts

@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
+import GridTemplate from '../GridTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

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

@@ -1,13 +1,12 @@
 import { GridTemplateProps } from '@rjsf/utils';
 
-/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column
- * information coming in via the `className` prop.
+/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column information coming in via the `className`
+ * prop. Also spreads all the other props provided by the user directly on the div.
  *
- * @param props - The GridTemplateProps, including the expected className for
- *        the bootstrap 3 grid behavior
+ * @param props - The GridTemplateProps, including the expected className for the bootstrap 3 grid behavior
  */
 export default function GridTemplate(props: GridTemplateProps) {
-  const { children, overrides, column, className, ...rest } = props;
+  const { children, column, className, ...rest } = props;
   const classNames = column ? className : `row ${className}`;
   return (
     <div className={classNames} {...rest}>

packages/fluentui-rc/src/GridTemplate/GridTemplate.tsx

@@ -0,0 +1,12 @@
+import { Flex } from '@fluentui/react-migration-v0-v9';
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for fluentui-rc, which is expecting the column sizing information coming in via the
+ * extra props provided by the caller, which are spread directly on the `Flex`.
+ *
+ * @param props - The GridTemplateProps, including the extra props containing the fluentui-rc grid positioning details
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+  return <Flex {...rest}>{children}</Flex>;
+}

packages/fluentui-rc/src/GridTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './GridTemplate';
+export * from './GridTemplate';

packages/fluentui-rc/src/Templates/Templates.ts

@@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
+import GridTemplate from '../GridTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
@@ -36,6 +37,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,