@rjsf/react-bootstrap 6.0.0-beta.20 → 6.0.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "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",
@@ -61,8 +61,8 @@
     ]
   },
   "peerDependencies": {
-    "@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",
     "react-bootstrap": "^2.x"
   },
@@ -71,10 +71,10 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@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",
     "react-bootstrap": "^2.10.10"
   },

package/src/AddButton/AddButton.tsx

@@ -10,10 +10,10 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   const { translateString } = registry;
   return (
     <Button
+      title={translateString(TranslatableString.AddItemButton)}
       {...props}
       style={{ width: '100%' }}
       className={`ml-1 ${props.className}`}
-      title={translateString(TranslatableString.AddItemButton)}
     >
       <BsPlus />
     </Button>

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -17,8 +17,20 @@ export default function ArrayFieldTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
-  const { canAdd, disabled, fieldPathId, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
-    props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
@@ -35,6 +47,7 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -50,6 +63,7 @@ export default function ArrayFieldTemplate<
             uiSchema={uiSchema}
             required={required}
             registry={registry}
+            optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
           />
           <ArrayFieldDescriptionTemplate
             fieldPathId={fieldPathId}
@@ -59,10 +73,10 @@ export default function ArrayFieldTemplate<
             registry={registry}
           />
           <Container fluid key={`array-item-list-${fieldPathId.$id}`} className='p-0 m-0'>
-            {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} />
+            ))}
             {canAdd && (
               <Container className=''>
                 <Row className='mt-2'>

package/src/IconButton/IconButton.tsx

@@ -5,8 +5,14 @@ import { IoIosRemove } from '@react-icons/all-files/io/IoIosRemove';
 import { AiOutlineArrowUp } from '@react-icons/all-files/ai/AiOutlineArrowUp';
 import { AiOutlineArrowDown } from '@react-icons/all-files/ai/AiOutlineArrowDown';
 
+export type BootstrapIconButtonProps<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+> = IconButtonProps<T, S, F> & ButtonProps;
+
 export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F> & ButtonProps,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return (
@@ -17,7 +23,7 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
 }
 
 export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -26,7 +32,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
 }
 
 export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -37,7 +43,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
 }
 
 export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -46,7 +52,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
 }
 
 export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: IconButtonProps<T, S, F>,
+  props: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
     registry: { translateString },
@@ -54,8 +60,8 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   return (
     <IconButton
       title={translateString(TranslatableString.RemoveButton)}
-      {...props}
       variant='danger'
+      {...props}
       icon={<IoIosRemove />}
     />
   );

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -28,6 +28,7 @@ export default function ObjectFieldTemplate<
   fieldPathId,
   schema,
   formData,
+  optionalDataControl,
   onAddClick,
   disabled,
   readonly,
@@ -40,6 +41,7 @@ export default function ObjectFieldTemplate<
     registry,
     uiOptions,
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: { AddButton },
@@ -54,6 +56,7 @@ export default function ObjectFieldTemplate<
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
+          optionalDataControl={showOptionalDataControlInTitle ? optionalDataControl : undefined}
         />
       )}
       {description && (
@@ -66,6 +69,7 @@ export default function ObjectFieldTemplate<
         />
       )}
       <Container fluid className='p-0'>
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element: any, index: number) => (
           <Row key={index} style={{ marginBottom: '10px' }} className={element.hidden ? 'd-none' : undefined}>
             <Col xs={12}> {element.content}</Col>

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -0,0 +1,47 @@
+import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { BsPlus } from '@react-icons/all-files/bs/BsPlus';
+
+import IconButton, { RemoveButton } from '../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 (
+      <IconButton
+        id={id}
+        registry={registry}
+        className='rjsf-add-optional-data'
+        icon={<BsPlus />}
+        onClick={onAddClick}
+        title={label}
+        size='sm'
+        variant='secondary'
+      />
+    );
+  } else if (onRemoveClick) {
+    return (
+      <RemoveButton
+        id={id}
+        registry={registry}
+        className='rjsf-remove-optional-data'
+        onClick={onRemoveClick}
+        title={label}
+        size='sm'
+        variant='secondary'
+      />
+    );
+  }
+  return <em id={id}>{label}</em>;
+}

package/src/OptionalDataControlsTemplate/index.ts

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

package/src/Templates/Templates.ts

@@ -11,6 +11,7 @@ import FieldTemplate from '../FieldTemplate';
 import GridTemplate from '../GridTemplate';
 import MultiSchemaFieldTemplate from '../MultiSchemaFieldTemplate';
 import ObjectFieldTemplate from '../ObjectFieldTemplate';
+import OptionalDataControlsTemplate from '../OptionalDataControlsTemplate';
 import SubmitButton from '../SubmitButton';
 import TitleField from '../TitleField';
 import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
@@ -41,6 +42,7 @@ export function generateTemplates<
     GridTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate,
   };

package/src/TitleField/TitleField.tsx

@@ -1,15 +1,32 @@
 import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
 
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   title,
   uiSchema,
+  optionalDataControl,
 }: TitleFieldProps<T, S, F>) {
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  let heading = <h5>{uiOptions.title || title}</h5>;
+  if (optionalDataControl) {
+    heading = (
+      <Container fluid className='p-0'>
+        <Row>
+          <Col xs='11'>{heading}</Col>
+          <Col xs='1' style={{ marginLeft: '-5px' }}>
+            {optionalDataControl}
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
   return (
     <div id={id} className='my-1'>
-      <h5>{uiOptions.title || title}</h5>
-      <hr className='border-0 bg-secondary' style={{ height: '1px' }} />
+      {heading}
+      <hr className='border-0 bg-secondary mt-0' style={{ height: '1px' }} />
     </div>
   );
 }