@rjsf/fluentui-rc 6.1.2 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/fluentui-rc",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
   "scripts": {
     "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
@@ -68,18 +68,18 @@
     "@fluentui/react-components": "^9.63.0",
     "@fluentui/react-icons": "^2.0.298",
     "@fluentui/react-migration-v0-v9": "^9.3.10",
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "react": ">=18"
   },
   "devDependencies": {
     "@fluentui/react-components": "^9.72.4",
     "@fluentui/react-icons": "^2.0.313",
     "@fluentui/react-migration-v0-v9": "^9.6.12",
-    "@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"
   },
   "directories": {

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import { Input, InputProps, Label, makeStyles } from '@fluentui/react-components';
 import {
   ariaDescribedByIds,
@@ -51,7 +51,9 @@ export default function BaseInputTemplate<
     autofocus,
     options,
     schema,
+    registry,
   } = props;
+  const { ClearButton } = registry.templates.ButtonTemplates;
   const classes = useStyles();
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for fluentui-rc
@@ -59,6 +61,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],
+  );
   return (
     <>
       {labelValue(
@@ -86,6 +96,9 @@ export default function BaseInputTemplate<
         onBlur={_onBlur}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClearTextInputs && !readonly && !disabled && value && (
+        <ClearButton registry={registry} onClick={_onClear} />
+      )}
       {Array.isArray(schema.examples) && (
         <datalist id={examplesId(id)}>
           {(schema.examples as string[])

package/src/IconButton/IconButton.tsx

@@ -1,5 +1,11 @@
 import { Button, ButtonProps } from '@fluentui/react-components';
-import { ArrowSortUpRegular, ArrowSortDownRegular, CopyRegular, SubtractRegular } from '@fluentui/react-icons';
+import {
+  ArrowSortUpRegular,
+  ArrowSortDownRegular,
+  CopyRegular,
+  SubtractRegular,
+  DismissRegular,
+} from '@fluentui/react-icons';
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 
 export type FluentIconButtonProps<
@@ -77,3 +83,18 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FluentIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <FluentIconButton<T, S, F>
+      title={translateString(TranslatableString.ClearButton)}
+      {...props}
+      icon={<DismissRegular />}
+    />
+  );
+}

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,