Implemented the GridTemplate for all themes

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,

packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
   ArrayFieldTemplateItemType,
@@ -35,19 +35,19 @@ export default function ArrayFieldItemTemplate<
     minWidth: 0,
   };
   return (
-    <Grid container={true} alignItems='center'>
-      <Grid item={true} xs style={{ overflow: 'auto' }}>
+    <Grid2 container={true} alignItems='center'>
+      <Grid2 size='auto' style={{ overflow: 'auto' }}>
         <Box mb={2}>
           <Paper elevation={2}>
             <Box p={2}>{children}</Box>
           </Paper>
         </Box>
-      </Grid>
+      </Grid2>
       {hasToolbar && (
-        <Grid item={true}>
+        <Grid2>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
-        </Grid>
+        </Grid2>
       )}
-    </Grid>
+    </Grid2>
   );
 }

packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
   getTemplate,
@@ -66,8 +66,8 @@ export default function ArrayFieldTemplate<
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (
-          <Grid container justifyContent='flex-end'>
-            <Grid item={true}>
+          <Grid2 container justifyContent='flex-end'>
+            <Grid2>
               <Box mt={2}>
                 <AddButton
                   id={buttonId<T>(idSchema, 'add')}
@@ -78,8 +78,8 @@ export default function ArrayFieldTemplate<
                   registry={registry}
                 />
               </Box>
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         )}
       </Box>
     </Paper>

packages/mui/src/GridTemplate/GridTemplate.tsx

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

packages/mui/src/GridTemplate/index.ts

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

packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import {
   FormContextType,
   ObjectFieldTemplateProps,
@@ -69,21 +69,21 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid container={true} spacing={2} style={{ marginTop: '10px' }}>
+      <Grid2 container={true} spacing={2} style={{ marginTop: '10px' }}>
         {properties.map((element, index) =>
-          // Remove the <Grid> if the inner element is hidden as the <Grid>
+          // Remove the <Grid2> if the inner element is hidden as the <Grid2>
           // itself would otherwise still take up space.
           element.hidden ? (
             element.content
           ) : (
-            <Grid item={true} xs={12} key={index} style={{ marginBottom: '10px' }}>
+            <Grid2 size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
               {element.content}
-            </Grid>
+            </Grid2>
           )
         )}
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <Grid container justifyContent='flex-end'>
-            <Grid item={true}>
+          <Grid2 container justifyContent='flex-end'>
+            <Grid2>
               <AddButton
                 id={buttonId<T>(idSchema, 'add')}
                 className='object-property-expand'
@@ -92,10 +92,10 @@ export default function ObjectFieldTemplate<
                 uiSchema={uiSchema}
                 registry={registry}
               />
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         )}
-      </Grid>
+      </Grid2>
     </>
   );
 }

packages/mui/src/Templates/Templates.ts

@@ -10,6 +10,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';
@@ -37,6 +38,7 @@ export function generateTemplates<
     FieldErrorTemplate,
     FieldHelpTemplate,
     FieldTemplate,
+    GridTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,

packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FocusEvent } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import TextField from '@mui/material/TextField';
 import {
   ADDITIONAL_PROPERTY_FLAG,
@@ -59,8 +59,8 @@ export default function WrapIfAdditionalTemplate<
   const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
 
   return (
-    <Grid container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
-      <Grid item xs>
+    <Grid2 container key={`${id}-key`} alignItems='center' spacing={2} className={classNames} style={style}>
+      <Grid2 size='auto'>
         <TextField
           fullWidth={true}
           required={required}
@@ -72,11 +72,9 @@ export default function WrapIfAdditionalTemplate<
           onBlur={!readonly ? handleBlur : undefined}
           type='text'
         />
-      </Grid>
-      <Grid item={true} xs>
-        {children}
-      </Grid>
-      <Grid item={true}>
+      </Grid2>
+      <Grid2 size='auto'>{children}</Grid2>
+      <Grid2>
         <RemoveButton
           id={buttonId<T>(id, 'remove')}
           className='array-item-remove'
@@ -87,7 +85,7 @@ export default function WrapIfAdditionalTemplate<
           uiSchema={uiSchema}
           registry={registry}
         />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }