@rjsf/primereact 6.1.2 → 6.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/primereact",
-  "version": "6.1.2",
+  "version": "6.2.4",
   "description": "PrimeReact theme, fields and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -61,17 +61,17 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "primeicons": ">=6.0.0",
     "primereact": ">=8.0.0",
     "react": ">=18"
   },
   "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",
     "@rollup/plugin-replace": "^6.0.3",
     "eslint": "^8.57.1",
     "primeflex": "^4.0.0",

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -34,6 +34,9 @@ export default function ArrayFieldTemplate<
     title,
     registry,
     required,
+    // Destructure the following props out so that they aren't put into the DOM
+    formData,
+    rawErrors,
     ...rest
   } = props;
 

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, MouseEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -37,36 +37,50 @@ export default function BaseInputTemplate<
     rawErrors = [],
   } = props;
 
+  const { ClearButton } = registry.templates.ButtonTemplates;
   const { AutoCompleteWidget } = registry.widgets;
 
-  if (Array.isArray(schema.examples)) {
-    return <AutoCompleteWidget {...props} />;
-  }
-
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   const primeProps = (options.prime || {}) as object;
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
+  const _onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
+
+  if (Array.isArray(schema.examples)) {
+    return <AutoCompleteWidget {...props} />;
+  }
 
   return (
-    <InputText
-      id={id}
-      name={htmlName || id}
-      placeholder={placeholder}
-      {...primeProps}
-      {...inputProps}
-      required={required}
-      autoFocus={autofocus}
-      disabled={disabled || readonly}
-      list={schema.examples ? examplesId(id) : undefined}
-      value={value || value === 0 ? value : ''}
-      invalid={rawErrors.length > 0}
-      onChange={onChangeOverride || _onChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
-    />
+    <>
+      <InputText
+        id={id}
+        name={htmlName || id}
+        placeholder={placeholder}
+        {...primeProps}
+        {...inputProps}
+        required={required}
+        autoFocus={autofocus}
+        disabled={disabled || readonly}
+        list={schema.examples ? examplesId(id) : undefined}
+        value={value || value === 0 ? value : ''}
+        invalid={rawErrors.length > 0}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+      />
+      {options.allowClearTextInputs && !readonly && !disabled && value && (
+        <ClearButton registry={registry} onClick={_onClear} />
+      )}
+    </>
   );
 }

package/src/IconButton/IconButton.tsx

@@ -49,3 +49,12 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} icon='trash' />;
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: PrimeIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon='times' />;
+}

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';
@@ -36,6 +36,7 @@ export function generateTemplates<
       MoveUpButton,
       RemoveButton,
       SubmitButton,
+      ClearButton,
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,