@rjsf/daisyui 6.1.2 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/daisyui",
-  "version": "6.1.2",
+  "version": "6.2.3",
   "description": "Daisy UI components for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -68,19 +68,19 @@
     "@fortawesome/react-fontawesome": "^3.1.0",
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.11.1",
-    "tailwindcss": "^4.1.12"
+    "tailwindcss": "^4.1.18"
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.x",
-    "@rjsf/utils": "^6.x",
+    "@rjsf/core": "^6.2.x",
+    "@rjsf/utils": "^6.2.x",
     "daisyui": "^5.0.29",
     "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",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

package/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import {
   WidgetProps,
   StrictRJSFSchema,
@@ -46,7 +46,9 @@ export default function BaseInputTemplate<
     type,
     label,
     placeholder,
+    registry,
   } = props;
+  const { ClearButton } = registry.templates.ButtonTemplates;
 
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   let className = 'input input-bordered w-full';
@@ -74,29 +76,43 @@ export default function BaseInputTemplate<
     [onFocus, id],
   );
 
+  const _onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
+
   return (
     <>
       <div className='form-control'>
         <label htmlFor={id} className='label hidden' style={{ display: 'none' }}>
           <span className='label-text'>{label}</span>
         </label>
-        <input
-          id={id}
-          name={htmlName || id}
-          value={value || value === 0 ? value : ''}
-          placeholder={placeholder}
-          required={required}
-          disabled={disabled || readonly}
-          autoFocus={autofocus}
-          className={className}
-          multiple={isMulti}
-          {...rest}
-          {...htmlInputProps}
-          onChange={onChangeOverride || _onChange}
-          onBlur={_onBlur}
-          onFocus={_onFocus}
-          aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
-        />
+        <div style={{ position: 'relative' }}>
+          <input
+            id={id}
+            name={htmlName || id}
+            value={value || value === 0 ? value : ''}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled || readonly}
+            autoFocus={autofocus}
+            className={className}
+            multiple={isMulti}
+            {...rest}
+            {...htmlInputProps}
+            onChange={onChangeOverride || _onChange}
+            onBlur={_onBlur}
+            onFocus={_onFocus}
+            aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
+          />
+          {options.allowClearTextInputs && !readonly && !disabled && value && (
+            <ClearButton registry={registry} onClick={_onClear} />
+          )}
+        </div>
       </div>
       {Array.isArray(schema.examples) && (
         <datalist id={examplesId(id)}>

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -1,5 +1,5 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { faCopy, faArrowDown, faArrowUp, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faCopy, faArrowDown, faArrowUp, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 import DaisyUIButton from './DaisyUIButton';
@@ -60,3 +60,20 @@ 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 {
+    registry: { translateString },
+  } = props;
+
+  return (
+    <DaisyUIButton
+      title={translateString(TranslatableString.ClearButton)}
+      {...props}
+      iconType='default'
+      icon={faXmark as IconDefinition}
+    />
+  );
+}

package/src/templates/ButtonTemplates/index.ts

@@ -1,9 +1,9 @@
 import AddButton from './AddButton';
 import SubmitButton from './SubmitButton';
-import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+import { ClearButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
 
 export { AddButton };
-export { CopyButton, MoveDownButton, MoveUpButton, RemoveButton };
+export { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton };
 export { SubmitButton };
 
 // Create a default export with all button templates
@@ -14,6 +14,7 @@ const buttonTemplates = {
   MoveUpButton,
   RemoveButton,
   SubmitButton,
+  ClearButton,
 };
 
 export default buttonTemplates;

package/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -50,6 +50,7 @@ export default function FieldTemplate<
     rawDescription,
     hidden,
     onChange,
+    fieldPathId,
     ...divProps
   } = props;
 

package/src/templates/Templates.tsx

@@ -4,7 +4,15 @@ import ArrayFieldItemButtonsTemplate from './ArrayFieldItemButtonsTemplate';
 import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate/ArrayFieldTemplate';
 import BaseInputTemplate from './BaseInputTemplate/BaseInputTemplate';
-import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton, SubmitButton } from './ButtonTemplates';
+import {
+  AddButton,
+  CopyButton,
+  MoveDownButton,
+  MoveUpButton,
+  RemoveButton,
+  SubmitButton,
+  ClearButton,
+} from './ButtonTemplates';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import FieldErrorTemplate from './FieldErrorTemplate';
@@ -48,6 +56,7 @@ export function generateTemplates<
       MoveDownButton,
       MoveUpButton,
       RemoveButton,
+      ClearButton,
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,