@rjsf/mantine 6.0.0-beta.20 → 6.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mantine",
-  "version": "6.0.0-beta.20",
+  "version": "6.0.0-beta.21",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -64,8 +64,8 @@
     "@mantine/core": ">=8",
     "@mantine/dates": ">=8",
     "@mantine/hooks": ">=8",
-    "@rjsf/core": "^6.0.0-beta.20",
-    "@rjsf/utils": "^6.0.0-beta.20",
+    "@rjsf/core": "^6.0.0-beta.21",
+    "@rjsf/utils": "^6.0.0-beta.21",
     "react": ">=18"
   },
   "devDependencies": {
@@ -74,10 +74,10 @@
     "@mantine/hooks": "^8.3.1",
     "@restart/hooks": "^0.6.2",
     "@restart/ui": "^1.9.4",
-    "@rjsf/core": "^6.0.0-beta.20",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.20",
-    "@rjsf/utils": "^6.0.0-beta.20",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.20",
+    "@rjsf/core": "^6.0.0-beta.21",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.21",
+    "@rjsf/utils": "^6.0.0-beta.21",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.21",
     "eslint": "^8.57.1",
     "uncontrollable": "^9.0.0"
   },

package/src/templates/ArrayFieldTemplate.tsx

@@ -25,6 +25,7 @@ export default function ArrayFieldTemplate<
     disabled,
     fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     required,
@@ -50,6 +51,7 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -63,6 +65,7 @@ export default function ArrayFieldTemplate<
       schema={schema}
       uiSchema={uiSchema}
       registry={registry}
+      optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
     />
   );
 
@@ -77,14 +80,12 @@ export default function ArrayFieldTemplate<
           registry={registry}
         />
       )}
-
       <Box className='row rjsf-array-item-list'>
-        {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-            <ArrayFieldItemTemplate key={key} {...itemProps} />
-          ))}
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+        {items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
+          <ArrayFieldItemTemplate key={key} {...itemProps} />
+        ))}
       </Box>
-
       {canAdd && (
         <Group justify='flex-end'>
           <AddButton

package/src/templates/ObjectFieldTemplate.tsx

@@ -29,6 +29,7 @@ export default function ObjectFieldTemplate<
     description,
     disabled,
     properties,
+    optionalDataControl,
     onAddClick,
     readonly,
     required,
@@ -45,6 +46,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -63,6 +65,7 @@ export default function ObjectFieldTemplate<
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
@@ -80,13 +83,13 @@ export default function ObjectFieldTemplate<
         verticalSpacing={gridVerticalSpacing as MantineSpacing | undefined}
         mb='sm'
       >
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties
           .filter((e) => !e.hidden)
           .map((element: ObjectFieldTemplatePropertyType) => (
             <Box key={element.name}>{element.content}</Box>
           ))}
       </SimpleGrid>
-
       {canExpand(schema, uiSchema, formData) && (
         <Group mt='xs' justify='flex-end'>
           <AddButton

package/src/templates/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,44 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import AddButton from './ButtonTemplates/AddButton';
+import { RemoveButton } from './ButtonTemplates/IconButton';
+
+/** The OptionalDataControlsTemplate renders one of three different states. If
+ * there is an `onAddClick()` function, it renders the "Add" button. If there is
+ * an `onRemoveClick()` function, it renders the "Remove" button. Otherwise it
+ * renders the "No data found" section. All of them use the `label` as either
+ * the `title` of buttons or simply outputting it.
+ *
+ * @param props - The `OptionalDataControlsTemplateProps` for the template
+ */
+export default function OptionalDataControlsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: OptionalDataControlsTemplateProps<T, S, F>) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return (
+      <AddButton
+        id={id}
+        registry={registry}
+        icon='plus'
+        className='rjsf-add-optional-data'
+        onClick={onAddClick}
+        title={label}
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        icon='remove'
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/templates/TitleField.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-import { Title } from '@mantine/core';
+import { Grid, Title } from '@mantine/core';
 
 /** The `TitleField` is the template to use to render the title of a field
  *
@@ -8,10 +8,19 @@ import { Title } from '@mantine/core';
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: TitleFieldProps<T, S, F>,
 ) {
-  const { id, title } = props;
-  return title ? (
+  const { id, title, optionalDataControl } = props;
+  let heading = title ? (
     <Title id={id} order={3} fw='normal'>
       {title}
     </Title>
   ) : null;
+  if (optionalDataControl) {
+    heading = (
+      <Grid>
+        <Grid.Col span='auto'>{heading}</Grid.Col>
+        <Grid.Col span='content'>{optionalDataControl}</Grid.Col>
+      </Grid>
+    );
+  }
+  return heading;
 }

package/src/templates/index.ts

@@ -12,6 +12,7 @@ import FieldTemplate from './FieldTemplate';
 import FieldHelpTemplate from './FieldHelpTemplate';
 import GridTemplate from './GridTemplate';
 import ObjectFieldTemplate from './ObjectFieldTemplate';
+import OptionalDataControlsTemplate from './OptionalDataControlsTemplate';
 import TitleField from './TitleField';
 import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
 import MultiSchemaFieldTemplate from './MultiSchemaFieldTemplate';
@@ -34,6 +35,7 @@ export function generateTemplates<
     FieldHelpTemplate,
     GridTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
     MultiSchemaFieldTemplate,