@rjsf/daisyui 6.0.0-beta.9 → 6.0.1

package/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
 import {
   WrapIfAdditionalTemplateProps,
   StrictRJSFSchema,
   RJSFSchema,
   FormContextType,
-  TranslatableString,
   buttonId,
+  ADDITIONAL_PROPERTY_FLAG,
+  TranslatableString,
 } from '@rjsf/utils';
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -27,48 +27,52 @@ export default function WrapIfAdditionalTemplate<
     readonly,
     required,
     schema,
-    onKeyChange,
-    onDropPropertyClick,
+    uiSchema,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     registry,
     ...rest
   } = props;
 
-  const { translateString } = registry;
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const { templates, translateString } = registry;
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
 
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      onKeyChange(event.target.value);
-    },
-    [onKeyChange],
-  );
-
-  const handleRemove = useCallback(() => {
-    onDropPropertyClick(label)();
-  }, [onDropPropertyClick, label]);
+  if (!additional) {
+    return <div className={classNames}>{children}</div>;
+  }
 
   return (
     <div className={`wrap-if-additional-template ${classNames}`} {...rest}>
-      <div className='flex items-center'>
-        <input
-          type='text'
-          className='input input-bordered'
-          id={`${id}-key`}
-          onBlur={handleBlur}
-          defaultValue={label}
-          disabled={disabled || readonly}
-        />
-        {schema.additionalProperties && (
-          <button
-            id={buttonId<T>(id, 'remove')}
-            className='rjsf-array-item-remove btn btn-danger ml-2'
-            onClick={handleRemove}
+      <div className='flex items-baseline' style={{ justifyContent: 'space-between' }}>
+        <div>
+          <label htmlFor={`${id}-key`} className='label'>
+            <span className='label-text'>{keyLabel}</span>
+          </label>
+          <input
+            type='text'
+            className='input input-bordered'
+            id={`${id}-key`}
+            onBlur={onKeyRenameBlur}
+            defaultValue={label}
+            disabled={disabled || readonly}
+          />
+        </div>
+        {children}
+        <div className='flex self-center'>
+          <RemoveButton
+            id={buttonId(id, 'remove')}
+            className='rjsf-object-property-remove'
             disabled={disabled || readonly}
-          >
-            {translateString(TranslatableString.RemoveButton)}
-          </button>
-        )}
+            onClick={onRemoveProperty}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </div>
       </div>
-      {children}
     </div>
   );
 }

package/src/widgets/AltDateWidget/AltDateWidget.tsx

@@ -1,187 +1,13 @@
-import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react';
 import {
-  ariaDescribedByIds,
+  DateElement,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  WidgetProps,
   TranslatableString,
-  parseDateString,
-  toDateString,
-  dateRangeOptions,
-  DateObject as RJSFDateObject,
-  Registry,
+  useAltDateWidgetProps,
+  WidgetProps,
 } from '@rjsf/utils';
 
-/** Interface for date object with optional string fields for each date/time component */
-interface DateObject {
-  year?: string;
-  month?: string;
-  day?: string;
-  hour?: string;
-  minute?: string;
-  second?: string;
-}
-
-/** Determines if the date object has all required fields to form a valid date
- *
- * @param state - The date object to check
- * @param time - Whether to check time fields as well
- * @returns True if all required fields are present
- */
-function readyForChange(state: DateObject, time = false) {
-  return state.year && state.month && state.day && (!time || (state.hour && state.minute && state.second));
-}
-
-/** Supported date element display formats */
-type DateElementFormat = 'YMD' | 'MDY' | 'DMY';
-
-/** Gets configuration for date elements based on format and ranges
- *
- * @param state - The current date object state
- * @param time - Whether to include time elements
- * @param yearsRange - Optional range of years to display
- * @param format - Format for ordering date elements (year, month, day)
- * @returns Array of element properties for rendering
- */
-function getDateElementProps(
-  state: DateObject,
-  time: boolean,
-  yearsRange?: [number, number],
-  format: DateElementFormat = 'YMD',
-) {
-  const rangeOptions = yearsRange ?? [1900, new Date().getFullYear() + 2];
-  // Define the order based on the format
-  const formats: Record<DateElementFormat, Array<keyof DateObject>> = {
-    YMD: ['year', 'month', 'day'],
-    MDY: ['month', 'day', 'year'],
-    DMY: ['day', 'month', 'year'],
-  };
-
-  // Get the elements in the specified order
-  const dateElements = formats[format].map((key) => ({
-    type: key,
-    value: state[key],
-    range:
-      key === 'year'
-        ? (rangeOptions as [number, number])
-        : key === 'month'
-          ? ([1, 12] as [number, number])
-          : key === 'day'
-            ? ([1, 31] as [number, number])
-            : ([0, 59] as [number, number]),
-  }));
-
-  // Add time elements if needed
-  if (time) {
-    dateElements.push(
-      { type: 'hour', value: state.hour, range: [0, 23] as [number, number] },
-      { type: 'minute', value: state.minute, range: [0, 59] as [number, number] },
-      { type: 'second', value: state.second, range: [0, 59] as [number, number] },
-    );
-  }
-
-  return dateElements;
-}
-
-/** Props for the DateElement component */
-interface DateElementProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
-  /** Type of date element (year, month, day, etc.) */
-  type: string;
-  /** Min/max range for the element values */
-  range: [number, number];
-  /** Current value */
-  value?: string;
-  /** Function to call when value is selected */
-  select: (property: keyof DateObject, value: any) => void;
-  /** Base ID for the form element */
-  rootId: string;
-  /** Name attribute for the form element */
-  name: string;
-  /** Whether the input is disabled */
-  disabled?: boolean;
-  /** Whether the input is readonly */
-  readonly?: boolean;
-  /** Whether the input should autofocus */
-  autofocus?: boolean;
-  /** Registry containing widgets and templates */
-  registry: Registry<T, S, F>;
-  /** Function called when input loses focus */
-  onBlur: (id: string, value: string) => void;
-  /** Function called when input gains focus */
-  onFocus: (id: string, value: string) => void;
-}
-
-/** Component for rendering individual date/time elements (year, month, day, etc.)
- *
- * Renders a select input for each date component with appropriate options.
- *
- * @param props - The props for the component
- */
-function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  type,
-  range,
-  value,
-  select,
-  rootId,
-  name,
-  disabled,
-  readonly,
-  autofocus,
-  registry,
-  onBlur,
-  onFocus,
-}: DateElementProps<T, S, F>) {
-  const id = `${rootId}_${type}`;
-  const { SelectWidget } = registry.widgets as Registry<T, S, F>['widgets'];
-
-  // Memoize the onChange handler
-  const handleChange = useCallback(
-    (value: any) => {
-      select(type as keyof DateObject, value);
-    },
-    [select, type],
-  );
-
-  return (
-    <SelectWidget
-      schema={{ type: 'integer' } as S}
-      id={id}
-      name={name}
-      className='select select-bordered select-sm w-full'
-      options={{ enumOptions: dateRangeOptions<S>(range[0], range[1]) }}
-      placeholder={type}
-      value={value}
-      disabled={disabled}
-      readonly={readonly}
-      autofocus={autofocus}
-      onChange={handleChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      registry={registry}
-      label=''
-      aria-describedby={ariaDescribedByIds<T>(rootId)}
-      required={false}
-    />
-  );
-}
-
-/** Converts our DateObject to the expected format for toDateString
- *
- * @param dateObj - The internal DateObject
- * @returns A properly formatted object for the utils toDateString function
- */
-function convertToRJSFDateObject(dateObj: DateObject): RJSFDateObject {
-  return {
-    year: dateObj.year ? parseInt(dateObj.year) : 0,
-    month: dateObj.month ? parseInt(dateObj.month) : 0,
-    day: dateObj.day ? parseInt(dateObj.day) : 0,
-    hour: dateObj.hour ? parseInt(dateObj.hour) : 0,
-    minute: dateObj.minute ? parseInt(dateObj.minute) : 0,
-    second: dateObj.second ? parseInt(dateObj.second) : 0,
-  };
-}
-
 /** The `AltDateWidget` component provides an alternative date/time input
  * with individual fields for year, month, day, and optionally time components.
  *
@@ -199,87 +25,25 @@ export default function AltDateWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({
-  time = false,
-  disabled = false,
-  readonly = false,
-  autofocus = false,
-  options = {},
-  id,
-  name,
-  registry,
-  onBlur,
-  onFocus,
-  onChange,
-  value,
-}: WidgetProps<T, S, F>) {
+>(props: WidgetProps<T, S, F>) {
+  const {
+    disabled = false,
+    readonly = false,
+    autofocus = false,
+    options = {},
+    id,
+    name,
+    registry,
+    onBlur,
+    onFocus,
+  } = props;
   const { translateString } = registry;
-  const [lastValue, setLastValue] = useState(value);
-
-  // Use a type-safe version of parseDateString result
-  const initialState = parseDateString(value, time) as unknown as DateObject;
-
-  // Create a reducer for date objects
-  const dateReducer = (state: DateObject, action: Partial<DateObject>): DateObject => {
-    return { ...state, ...action };
-  };
-
-  const [state, setState] = useReducer(dateReducer, initialState);
-
-  // Handle changes in props or state
-  useEffect(() => {
-    const rjsfDateObj = convertToRJSFDateObject(state);
-    const stateValue = toDateString(rjsfDateObj, time);
-    if (readyForChange(state, time) && stateValue !== value) {
-      // Valid date changed via the selects
-      onChange(stateValue);
-    } else if (lastValue !== value) {
-      // New value from props
-      setLastValue(value);
-      setState(parseDateString(value, time) as unknown as DateObject);
-    }
-  }, [time, value, onChange, state, lastValue]);
-
-  // Handle individual field changes
-  const handleChange = useCallback((property: keyof DateObject, value: string) => {
-    setState({ [property]: value });
-  }, []);
-
-  // Set current date
-  const handleSetNow = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nextState = parseDateString(new Date().toJSON(), time) as unknown as DateObject;
-      const rjsfDateObj = convertToRJSFDateObject(nextState);
-      onChange(toDateString(rjsfDateObj, time));
-    },
-    [disabled, readonly, time, onChange],
-  );
-
-  // Clear the date
-  const handleClear = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      onChange(undefined);
-    },
-    [disabled, readonly, onChange],
-  );
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
 
   return (
     <div className='space-y-3'>
       <div className='grid grid-cols-3 gap-2'>
-        {getDateElementProps(
-          state,
-          time,
-          options.yearsRange as [number, number] | undefined,
-          options.format as DateElementFormat | undefined,
-        ).map((elemProps, i) => (
+        {elements.map((elemProps, i) => (
           <div key={i} className='form-control'>
             <label className='label'>
               <span className='label-text capitalize'>{elemProps.type}</span>
@@ -287,6 +51,7 @@ export default function AltDateWidget<
             <DateElement
               rootId={id}
               name={name}
+              className='select select-bordered select-sm'
               select={handleChange}
               type={elemProps.type}
               range={elemProps.range}

package/src/widgets/CheckboxWidget/CheckboxWidget.tsx

@@ -19,6 +19,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     required,
     disabled,
@@ -42,7 +43,7 @@ export default function CheckboxWidget<
 
   /** Handle focus events
    */
-  const handleFocus = useCallback(() => {
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {
     if (onFocus) {
       onFocus(id, value);
     }
@@ -50,7 +51,7 @@ export default function CheckboxWidget<
 
   /** Handle blur events
    */
-  const handleBlur = useCallback(() => {
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {
     if (onBlur) {
       onBlur(id, value);
     }
@@ -71,6 +72,7 @@ export default function CheckboxWidget<
     <input
       type='checkbox'
       id={id}
+      name={htmlName || id}
       checked={value}
       required={required}
       disabled={disabled || readonly}
@@ -85,7 +87,7 @@ export default function CheckboxWidget<
     <div className='form-control'>
       {!hideLabel && description && (
         <DescriptionFieldTemplate
-          id={descriptionId<T>(id)}
+          id={descriptionId(id)}
           description={description}
           schema={schema}
           uiSchema={uiSchema}

package/src/widgets/CheckboxesWidget/CheckboxesWidget.tsx

@@ -17,6 +17,7 @@ import { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjs
  */
 export default function CheckboxesWidget<T, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -106,7 +107,7 @@ export default function CheckboxesWidget<T, S extends StrictRJSFSchema = RJSFSch
               type='checkbox'
               id={`${id}-${option.value}`}
               className='checkbox'
-              name={id}
+              name={htmlName || id}
               checked={isChecked(option)}
               required={required}
               disabled={disabled || readonly}

package/src/widgets/DateTimeWidget/DateTimeWidget.tsx

@@ -277,7 +277,7 @@ export default function DateTimeWidget<
     // Need to use native DOM events since we're attaching to document
     document.addEventListener('keydown', handleEscape as (e: KeyboardEvent) => void);
     return () => document.removeEventListener('keydown', handleEscape as (e: KeyboardEvent) => void);
-  }, [id, isOpen, onBlur, value]);
+  }, [id, isOpen, setIsOpen, onBlur, value]);
 
   // Add the handleDoneClick callback near the top of the component, with the other event handlers
   /** Handle clicking the "Done" button
@@ -289,7 +289,7 @@ export default function DateTimeWidget<
       onBlur(id, value);
     }
     inputRef.current?.focus();
-  }, [localDate, onChange, onBlur, id, value]);
+  }, [localDate, onChange, onBlur, id, value, setIsOpen]);
 
   return (
     <div className='form-control my-4 w-full relative'>

package/src/widgets/DateWidget/DateWidget.tsx

@@ -320,7 +320,7 @@ export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSch
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [id, isOpen, onBlur, value]);
+  }, [id, isOpen, setIsOpen, onBlur, value]);
 
   // Add the handleDoneClick callback near the top of the component, with the other event handlers
   /** Handle clicking the "Done" button
@@ -332,7 +332,7 @@ export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       onBlur(id, value);
     }
     inputRef.current?.focus();
-  }, [localDate, onChange, onBlur, id, value]);
+  }, [localDate, onChange, onBlur, id, value, setIsOpen]);
 
   return (
     <div className='form-control my-4 w-full relative'>

package/src/widgets/RadioWidget/RadioWidget.tsx

@@ -15,6 +15,7 @@ import { WidgetProps, StrictRJSFSchema, FormContextType, RJSFSchema } from '@rjs
  */
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -95,7 +96,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               type='radio'
               id={`${id}-${option.value}`}
               className='radio'
-              name={id}
+              name={htmlName || id}
               value={getValue(option)}
               checked={isChecked(option)}
               required={required}

package/src/widgets/TextareaWidget/TextareaWidget.tsx

@@ -16,7 +16,7 @@ export default function TextareaWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
-  const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+  const { id, htmlName, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
 
   /** Handle focus events
    *
@@ -62,6 +62,7 @@ export default function TextareaWidget<
     <div className='form-control'>
       <textarea
         id={id}
+        name={htmlName || id}
         value={value || ''}
         required={required}
         disabled={disabled || readonly}

package/src/widgets/Widgets.tsx

@@ -6,7 +6,6 @@ import CheckboxWidget from './CheckboxWidget/CheckboxWidget';
 import CheckboxesWidget from './CheckboxesWidget/CheckboxesWidget';
 import DateTimeWidget from './DateTimeWidget/DateTimeWidget';
 import DateWidget from './DateWidget/DateWidget';
-import FileWidget from './FileWidget/FileWidget';
 import RadioWidget from './RadioWidget/RadioWidget';
 import RangeWidget from './RangeWidget/RangeWidget';
 import RatingWidget from './RatingWidget/RatingWidget';
@@ -22,7 +21,6 @@ export {
   CheckboxWidget,
   DateTimeWidget,
   DateWidget,
-  FileWidget,
   RadioWidget,
   RangeWidget,
   RatingWidget,
@@ -44,7 +42,6 @@ export function generateWidgets<
     CheckboxWidget,
     DateTimeWidget,
     DateWidget,
-    FileWidget,
     RadioWidget,
     RangeWidget,
     RatingWidget,