@rjsf/react-bootstrap 6.1.2 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -61,8 +61,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "react": ">=18",
     "react-bootstrap": "^2.x"
   },
@@ -71,10 +71,10 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@rjsf/core": "^6.x",
-    "@rjsf/snapshot-tests": "^6.x",
-    "@rjsf/utils": "^6.x",
-    "@rjsf/validator-ajv8": "^6.x",
+    "@rjsf/core": "^6.2.0",
+    "@rjsf/snapshot-tests": "^6.2.0",
+    "@rjsf/utils": "^6.2.0",
+    "@rjsf/validator-ajv8": "^6.2.0",
     "eslint": "^8.57.1",
     "react-bootstrap": "^2.10.10"
   },

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import Form from 'react-bootstrap/Form';
 import {
   ariaDescribedByIds,
@@ -33,7 +33,9 @@ export default function BaseInputTemplate<
   rawErrors = [],
   children,
   extraProps,
+  registry,
 }: BaseInputTemplateProps<T, S, F>) {
+  const { ClearButton } = registry.templates.ButtonTemplates;
   const inputProps = {
     ...extraProps,
     ...getInputProps<T, S, F>(schema, type, options),
@@ -42,6 +44,14 @@ export default function BaseInputTemplate<
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const _onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
 
   // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
   return (
@@ -63,6 +73,9 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClearTextInputs && !readonly && !disabled && value && (
+        <ClearButton registry={registry} onClick={_onClear} />
+      )}
       {children}
       {Array.isArray(schema.examples) ? (
         <datalist id={examplesId(id)}>

package/src/IconButton/IconButton.tsx

@@ -4,6 +4,7 @@ import { IoIosCopy } from '@react-icons/all-files/io/IoIosCopy';
 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';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
 
 export type BootstrapIconButtonProps<
   T = any,
@@ -66,3 +67,12 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: BootstrapIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon={<IoMdClose />} />;
+}

package/src/Templates/Templates.ts

@@ -4,7 +4,7 @@ import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../BaseInputTemplate/BaseInputTemplate';
 import DescriptionField from '../DescriptionField';
 import ErrorList from '../ErrorList';
-import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from '../IconButton';
 import FieldErrorTemplate from '../FieldErrorTemplate';
 import FieldHelpTemplate from '../FieldHelpTemplate';
 import FieldTemplate from '../FieldTemplate';
@@ -33,6 +33,7 @@ export function generateTemplates<
       MoveUpButton,
       RemoveButton,
       SubmitButton,
+      ClearButton,
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -70,7 +70,7 @@ export default function WrapIfAdditionalTemplate<
         </Form.Group>
       </Col>
       <Col xs={6}>{children}</Col>
-      <Col xs={1} className={`py-${padding} d-grid gap-2`} style={{ marginTop: `${margin}px` }}>
+      <Col xs={1} className={`py-${padding} d-grid gap-2`} style={{ marginTop: `${margin}px`, maxHeight: `2.5rem` }}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove w-100'