@rjsf/mui 6.1.2 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -64,8 +64,8 @@
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "react": ">=18"
   },
   "devDependencies": {
@@ -74,10 +74,10 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@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"
   },
   "publishConfig": {

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,5 +1,7 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -51,6 +53,7 @@ export default function BaseInputTemplate<
     InputLabelProps,
     ...textFieldProps
   } = props;
+  const { ClearButton } = registry.templates.ButtonTemplates;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   const { step, min, max, accept, ...rest } = inputProps;
@@ -65,6 +68,14 @@ export default function BaseInputTemplate<
         shrink: true,
       }
     : InputLabelProps;
+  const _onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
 
   return (
     <>
@@ -85,6 +96,15 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         {...(textFieldProps as TextFieldProps)}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+        InputProps={{
+          ...textFieldProps.InputProps,
+          endAdornment:
+            options.allowClearTextInputs && value && !readonly && !disabled ? (
+              <InputAdornment position='end'>
+                <ClearButton registry={registry} onClick={_onClear} />
+              </InputAdornment>
+            ) : undefined,
+        }}
       />
       {Array.isArray(schema.examples) && (
         <datalist id={examplesId(id)}>

package/src/IconButton/IconButton.tsx

@@ -3,6 +3,7 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import RemoveIcon from '@mui/icons-material/Remove';
+import ClearIcon from '@mui/icons-material/Clear';
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
 export default function MuiIconButton<
@@ -79,3 +80,19 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const { iconType, ...otherProps } = props;
+  const {
+    registry: { translateString },
+  } = otherProps;
+  return (
+    <MuiIconButton
+      title={translateString(TranslatableString.ClearButton)}
+      {...otherProps}
+      icon={<ClearIcon fontSize={iconType === 'default' ? undefined : 'small'} />}
+    />
+  );
+}

package/src/Templates/Templates.ts

@@ -6,7 +6,7 @@ import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../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';
@@ -34,6 +34,7 @@ export function generateTemplates<
       MoveUpButton,
       RemoveButton,
       SubmitButton,
+      ClearButton,
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,