@rjsf/shadcn 6.1.2 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/shadcn",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -64,8 +64,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "react": ">=18"
   },
   "engineStrict": false,
@@ -73,14 +73,14 @@
     "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",
     "@tailwindcss/cli": "^4.1.16",
     "eslint": "^8.57.1",
     "jsdom": "^27.0.1",
-    "tailwindcss": "^4.1.12"
+    "tailwindcss": "^4.1.18"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -7,7 +7,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 
 import { Input } from '../components/ui/input';
 import { cn } from '../lib/utils';
@@ -42,7 +42,9 @@ export default function BaseInputTemplate<
   children,
   extraProps,
   className,
+  registry,
 }: BaseInputTemplateProps<T, S, F>) {
+  const { ClearButton } = registry.templates.ButtonTemplates;
   const inputProps = {
     ...extraProps,
     ...getInputProps<T, S, F>(schema, type, options),
@@ -51,6 +53,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 (
     <div className='p-0.5'>
@@ -72,6 +82,9 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClearTextInputs && !readonly && !disabled && value && (
+        <ClearButton onClick={_onClear} registry={registry} />
+      )}
       {children}
       {Array.isArray(schema.examples) ? (
         <datalist id={examplesId(id)}>

package/src/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { ChevronDown, ChevronUp, Copy, Trash2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Copy, Trash2, X } from 'lucide-react';
 import type { VariantProps } from 'class-variance-authority';
 
 import { Button, buttonVariants } from '../components/ui/button';
@@ -109,3 +109,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: ShadIconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon={<X />} />;
+}

package/src/Templates/Templates.ts

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

package/src/components/ui/textarea.tsx

@@ -21,7 +21,7 @@ function Textarea({ className, ...props }: ComponentProps<'textarea'>) {
     <textarea
       data-slot='textarea'
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       {...props}