@rjsf/daisyui 6.0.0-beta.2

package/src/widgets/DateWidget/DateWidget.tsx

@@ -0,0 +1,393 @@
+import { memo, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { format, isSameDay, isToday, isValid } from 'date-fns';
+import { ClassNames, DayPicker, ModifiersClassNames, UI } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+/**
+ * Props for the DatePicker popup component
+ */
+interface DatePickerProps {
+  /** Currently selected date */
+  selectedDate?: Date;
+  /** Currently displayed month */
+  month: Date;
+  /** Handler for month changes */
+  onMonthChange: (date: Date) => void;
+  /** Handler for date selection */
+  onSelect: (date: Date | undefined) => void;
+}
+
+/**
+ * Custom hook to manage the picker's popup state and displayed month
+ *
+ * @param initialDate - Initial date to display, defaults to today
+ * @returns State and handlers for the date picker
+ */
+function useDatePickerState(initialDate?: Date) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [month, setMonth] = useState<Date>(initialDate ?? new Date());
+  return { isOpen, setIsOpen, month, setMonth };
+}
+
+/**
+ * Custom hook to detect clicks outside an element and run a callback
+ *
+ * @param ref - React ref to the element to monitor
+ * @param callback - Function to call when a click outside is detected
+ */
+function useClickOutside(ref: RefObject<HTMLDivElement>, callback: () => void) {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [ref, callback]);
+}
+
+/**
+ * Predefined DayPicker styles using DaisyUI classes
+ */
+const dayPickerStyles: { classNames: Partial<ClassNames>; modifiers: Partial<ModifiersClassNames> } = {
+  classNames: {
+    [UI.Root]: 'relative',
+    [UI.Nav]: 'hidden',
+    [UI.Chevron]: 'hidden',
+    [UI.CaptionLabel]: 'hidden',
+    [UI.Dropdowns]: 'flex justify-between gap-4 px-4 pb-4',
+    [UI.Dropdown]: 'select select-bordered select-sm w-32',
+    [UI.MonthsDropdown]: 'select select-bordered select-sm',
+    [UI.YearsDropdown]: 'select select-bordered select-sm',
+    [UI.Months]: 'flex justify-center',
+    [UI.Month]: 'w-full',
+    [UI.MonthCaption]: 'flex justify-center',
+    [UI.MonthGrid]: 'w-full',
+    [UI.Weekdays]: 'grid grid-cols-7 text-center border-b mb-2 pb-1 text-base-content/60 uppercase',
+    [UI.Weekday]: 'p-1 font-medium text-base-content/60 text-sm',
+    [UI.Week]: 'grid grid-cols-7',
+    [UI.Day]: 'w-10 h-8 p-0 relative rounded-md',
+    [UI.DayButton]:
+      'btn btn-ghost absolute inset-0 flex items-center justify-center w-full h-full cursor-pointer rounded-md hover:btn-primary',
+  },
+  modifiers: {
+    selected: 'btn btn-accent min-h-0 h-full',
+    outside: 'text-base-content/30 hover:btn-ghost',
+    disabled: 'opacity-50 cursor-not-allowed hover:btn-disabled',
+  },
+};
+
+/**
+ * Popup component for the calendar
+ *
+ * Renders a DayPicker calendar for selecting dates
+ *
+ * @param props - The DatePickerProps for this component
+ */
+function DatePickerPopup({ selectedDate, month, onMonthChange, onSelect }: DatePickerProps) {
+  const customDayModifiers = {
+    selected: selectedDate,
+    'custom-today': (date: Date) => isToday(date) && !(selectedDate && isSameDay(date, selectedDate)),
+  };
+
+  const customModifiersClassNames: ModifiersClassNames = {
+    ...dayPickerStyles.modifiers,
+    'custom-today': 'btn btn-outline btn-info min-h-0 h-full',
+  };
+
+  return (
+    <div className='p-3' style={{ minWidth: '320px', minHeight: '350px' }}>
+      <DayPicker
+        mode='single'
+        selected={selectedDate}
+        month={month}
+        onMonthChange={onMonthChange}
+        onSelect={onSelect}
+        captionLayout='dropdown'
+        fromYear={1900}
+        toYear={new Date().getFullYear() + 10}
+        showOutsideDays
+        classNames={dayPickerStyles.classNames}
+        modifiers={customDayModifiers}
+        modifiersClassNames={customModifiersClassNames}
+      />
+    </div>
+  );
+}
+
+// Use React.memo to optimize re-renders
+const MemoizedDatePickerPopup = memo(DatePickerPopup);
+
+/** The `DateWidget` component provides a date picker with DaisyUI styling.
+ *
+ * Features:
+ * - Calendar popup with month/year dropdown navigation
+ * - Accessible keyboard navigation
+ * - Date formatting using date-fns
+ * - Date-only selection (time component set to 00:00:00)
+ * - Manages focus and blur events for accessibility
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { id, value, onChange, onFocus, onBlur, schema } = props;
+  // Initialize the local date from the parent's value.
+  const initialDate = useMemo(() => (value ? new Date(value) : undefined), [value]);
+  const [localDate, setLocalDate] = useState<Date | undefined>(initialDate);
+
+  // When the parent's value changes externally, update local state.
+  useEffect(() => {
+    setLocalDate(initialDate);
+  }, [initialDate]);
+
+  const { isOpen, setIsOpen, month, setMonth } = useDatePickerState(initialDate);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  // Close the popup when clicking outside and commit changes.
+  useClickOutside(containerRef, () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onChange(localDate ? localDate.toISOString() : '');
+      // Manually invoke the blur handler to ensure blur event is triggered
+      if (onBlur) {
+        onBlur(id, value);
+      }
+    }
+  });
+
+  // When the local date changes, update the displayed month.
+  useEffect(() => {
+    if (localDate) {
+      setMonth(localDate);
+    }
+  }, [localDate, setMonth]);
+
+  // Update the month when the user navigates the calendar.
+  const handleMonthChange = useCallback((date: Date) => setMonth(date), [setMonth]);
+
+  // Update local state on day selection (but do not commit immediately).
+  const handleSelect = useCallback((date: Date | undefined) => {
+    if (date) {
+      // Remove any time component by setting hours, minutes, seconds, and milliseconds to zero.
+      date.setHours(0, 0, 0, 0);
+      setLocalDate(date);
+    }
+  }, []);
+
+  // Add a portal container to the document body if it doesn't exist
+  useEffect(() => {
+    // Check if the portal container exists, create it if not
+    let portalContainer = document.getElementById('date-picker-portal');
+    if (!portalContainer) {
+      portalContainer = document.createElement('div');
+      portalContainer.id = 'date-picker-portal';
+      document.body.appendChild(portalContainer);
+    }
+
+    // Clean up on unmount
+    return () => {
+      // Only remove if no other date pickers are using it and if portalContainer exists
+      const container = document.getElementById('date-picker-portal');
+      if (container && document.querySelectorAll('.date-picker-popup').length === 0) {
+        container.remove();
+      }
+    };
+  }, []);
+
+  // Get the document and window objects (will work in iframes too)
+  const getDocumentAndWindow = () => {
+    // Try to get the iframe's document and window if we're in one
+    let doc = document;
+    let win = window;
+
+    try {
+      // If we're in an iframe, try to access the parent
+      if (window.frameElement) {
+        // We're in an iframe
+        const iframe = window.frameElement as HTMLIFrameElement;
+        // Get the iframe's contentDocument and contentWindow
+        if (iframe.contentDocument) {
+          doc = iframe.contentDocument;
+        }
+        if (iframe.contentWindow) {
+          win = iframe.contentWindow as typeof window;
+        }
+      }
+    } catch (e) {
+      // Security error, we're in a cross-origin iframe
+      console.log('Unable to access parent frame:', e);
+    }
+
+    return { doc, win };
+  };
+
+  // Render the calendar at a specific position
+  const renderCalendar = useCallback(() => {
+    if (!containerRef.current || !inputRef.current) {
+      return;
+    }
+
+    // Get the proper document and window
+    const { win } = getDocumentAndWindow();
+
+    const inputRect = inputRef.current.getBoundingClientRect();
+    const containerWidth = 320; // Minimum width we've set
+
+    // Position the calendar relative to the input but with fixed positioning
+    containerRef.current.style.position = 'fixed';
+    containerRef.current.style.top = `${inputRect.bottom + 5}px`;
+
+    // Prevent it from going off-screen on the right
+    const rightEdge = inputRect.left + containerWidth;
+    const windowWidth = win.innerWidth;
+
+    if (rightEdge > windowWidth - 20) {
+      // Align to the right edge if it would overflow
+      containerRef.current.style.left = `${Math.max(20, windowWidth - 20 - containerWidth)}px`;
+    } else {
+      // Otherwise align to the left edge of the input
+      containerRef.current.style.left = `${inputRect.left}px`;
+    }
+
+    // Ensure the calendar is visible
+    containerRef.current.style.zIndex = '99999';
+  }, [containerRef, inputRef]);
+
+  // Handle window resize to reposition the calendar
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    // Position initially
+    renderCalendar();
+
+    // Update position on resize
+    window.addEventListener('resize', renderCalendar);
+    window.addEventListener('scroll', renderCalendar);
+
+    return () => {
+      window.removeEventListener('resize', renderCalendar);
+      window.removeEventListener('scroll', renderCalendar);
+    };
+  }, [isOpen, renderCalendar]);
+
+  // Toggle popup visibility.
+  const togglePicker = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsOpen((prev) => !prev);
+      if (!isOpen && onFocus) {
+        onFocus(id, value);
+      }
+
+      // Position calculation will happen in the effect hook
+    },
+    [isOpen, id, onFocus, setIsOpen, value],
+  );
+
+  // Handle focus event
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [id, onFocus, value]);
+
+  // Handle blur event
+  const handleBlur = useCallback(() => {
+    if (!isOpen && onBlur) {
+      onBlur(id, value);
+    }
+  }, [id, onBlur, value, isOpen]);
+
+  // Close popup on escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+        if (onBlur) {
+          onBlur(id, value);
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [id, isOpen, onBlur, value]);
+
+  // Add the handleDoneClick callback near the top of the component, with the other event handlers
+  /** Handle clicking the "Done" button
+   */
+  const handleDoneClick = useCallback(() => {
+    setIsOpen(false);
+    onChange(localDate ? localDate.toISOString() : '');
+    if (onBlur) {
+      onBlur(id, value);
+    }
+    inputRef.current?.focus();
+  }, [localDate, onChange, onBlur, id, value]);
+
+  return (
+    <div className='form-control my-4 w-full relative'>
+      <div
+        className='w-full'
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            togglePicker(e as unknown as React.MouseEvent);
+          }
+        }}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        ref={inputRef}
+      >
+        <div
+          id={id}
+          className={`input input-bordered w-full flex items-center justify-between cursor-pointer ${
+            isOpen ? 'ring-2 ring-primary/50' : ''
+          }`}
+          onClick={togglePicker}
+          role='button'
+          aria-haspopup='true'
+          aria-expanded={isOpen}
+          tabIndex={-1}
+        >
+          <span className={localDate && isValid(localDate) ? '' : 'text-base-content/50'}>
+            {localDate && isValid(localDate) ? format(localDate, 'PP') : schema.title}
+          </span>
+          <FontAwesomeIcon icon={faCalendar} className='ml-2 h-4 w-4 text-primary' />
+        </div>
+        {isOpen && (
+          <div
+            ref={containerRef}
+            className='date-picker-popup fixed z-[99999] w-full max-w-xs bg-base-100 border border-base-300 shadow-lg rounded-box'
+            style={{
+              maxHeight: 'none',
+              overflow: 'visible',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <MemoizedDatePickerPopup
+              selectedDate={localDate}
+              month={month}
+              onMonthChange={handleMonthChange}
+              onSelect={handleSelect}
+            />
+            <div className='p-3 flex justify-end border-t border-base-300'>
+              <button type='button' className='btn btn-sm btn-primary' onClick={handleDoneClick}>
+                Done
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/widgets/DateWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DateWidget';
+export * from './DateWidget';

package/src/widgets/FileWidget/FileWidget.tsx

@@ -0,0 +1,86 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `FileWidget` component provides a file input with DaisyUI styling
+ *
+ * Features:
+ * - Handles both single and multiple file uploads
+ * - Supports file type filtering via accept attribute
+ * - Properly manages disabled and readonly states
+ * - Handles focus and blur events
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { id, required, disabled, readonly, schema, onChange, onFocus, onBlur, options = {} } = props;
+
+  // Ensure isMulti is explicitly a boolean.
+  const isMulti: boolean = schema.type === 'array' || Boolean(options.multiple);
+
+  // Accept attribute for restricting file types (e.g., "image/*"), if defined in options.
+  const accept: string | undefined = typeof options.accept === 'string' ? options.accept : undefined;
+
+  /** Handle file selection changes
+   *
+   * @param event - The change event from the file input
+   */
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files) {
+        return;
+      }
+      // Convert FileList to array for multiple upload handling.
+      const fileList = Array.from(event.target.files);
+      if (isMulti) {
+        onChange(fileList);
+      } else {
+        // For single file, send the first file (or null if none chosen)
+        onChange(fileList[0] || null);
+      }
+    },
+    [onChange, isMulti],
+  );
+
+  /** Handle focus events
+   *
+   * @param event - The focus event
+   */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, event.target.files ? Array.from(event.target.files) : null);
+      }
+    },
+    [onFocus, id],
+  );
+
+  /** Handle blur events
+   *
+   * @param event - The blur event
+   */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, event.target.files ? Array.from(event.target.files) : null);
+      }
+    },
+    [onBlur, id],
+  );
+
+  return (
+    <input
+      id={id}
+      type='file'
+      className='file-input w-full'
+      required={required}
+      disabled={disabled || readonly}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      multiple={isMulti}
+      accept={accept}
+    />
+  );
+}

package/src/widgets/FileWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FileWidget';
+export * from './FileWidget';

package/src/widgets/RadioWidget/RadioWidget.tsx

@@ -0,0 +1,114 @@
+import { FocusEvent, useCallback } from 'react';
+import { WidgetProps, StrictRJSFSchema, FormContextType, RJSFSchema } from '@rjsf/utils';
+
+/** The `RadioWidget` component renders a group of radio buttons with DaisyUI styling
+ *
+ * Features:
+ * - Supports both primitive values and objects in enum options
+ * - Handles selection state for various data types
+ * - Uses DaisyUI radio styling with accessible labels
+ * - Supports disabled and readonly states
+ * - Provides focus and blur event handling
+ * - Renders radio buttons in a vertical layout for better spacing
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  onChange,
+  onFocus,
+  onBlur,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions } = options;
+  const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === 'object';
+
+  /** Gets the actual value from an option
+   *
+   * @param option - The option object to get value from
+   * @returns The option's value
+   */
+  const getValue = (option: any) => {
+    return option.value;
+  };
+
+  /** Determines if an option is checked based on the current value
+   *
+   * @param option - The option to check
+   * @returns Whether the option should be checked
+   */
+  const isChecked = (option: any) => {
+    if (isEnumeratedObject) {
+      return value && value.name === option.value.name;
+    }
+    return value === option.value;
+  };
+
+  /** Handles focus events for accessibility */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        const index = Number(event.target.dataset.index);
+        const optionValue = enumOptions?.[index]?.value;
+        onFocus(id, optionValue);
+      }
+    },
+    [onFocus, id, enumOptions],
+  );
+
+  /** Handles blur events for accessibility */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        const index = Number(event.target.dataset.index);
+        const optionValue = enumOptions?.[index]?.value;
+        onBlur(id, optionValue);
+      }
+    },
+    [onBlur, id, enumOptions],
+  );
+
+  /** Handles change events for radio options */
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const index = Number(event.target.dataset.index);
+      const option = enumOptions?.[index];
+      if (option) {
+        onChange(isEnumeratedObject ? option.value : option.value);
+        event.target.blur();
+      }
+    },
+    [onChange, isEnumeratedObject, enumOptions],
+  );
+
+  return (
+    <div className='form-control'>
+      {/* Display the options in a vertical flex layout for better spacing */}
+      <div className='flex flex-col gap-2 mt-1'>
+        {enumOptions?.map((option, index) => (
+          <label key={option.value} className='flex items-center cursor-pointer gap-2'>
+            <input
+              type='radio'
+              id={`${id}-${option.value}`}
+              className='radio'
+              name={id}
+              value={getValue(option)}
+              checked={isChecked(option)}
+              required={required}
+              disabled={disabled || readonly}
+              data-index={index}
+              onChange={handleChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+            <span className='label-text'>{option.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/widgets/RadioWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioWidget';
+export * from './RadioWidget';

package/src/widgets/RangeWidget/RangeWidget.tsx

@@ -0,0 +1,78 @@
+import { FocusEvent, useCallback } from 'react';
+import { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `RangeWidget` component renders a range slider input with DaisyUI styling
+ *
+ * Features:
+ * - Visual slider control for numerical values
+ * - Displays current value next to the slider
+ * - Supports min, max, and step attributes from schema
+ * - Handles required, disabled, and readonly states
+ * - Supports focus and blur events for accessibility
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  value,
+  required,
+  disabled,
+  readonly,
+  onChange,
+  onFocus,
+  onBlur,
+  schema,
+}: WidgetProps<T, S, F>) {
+  /** Handle focus events
+   *
+   * @param event - The focus event
+   */
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    if (onFocus) {
+      onFocus(id, event.target.value);
+    }
+  };
+
+  /** Handle blur events
+   *
+   * @param event - The blur event
+   */
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    if (onBlur) {
+      onBlur(id, event.target.value);
+    }
+  };
+
+  /** Handle change events
+   *
+   * @param event - The change event
+   */
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(event.target.value);
+    },
+    [onChange],
+  );
+
+  return (
+    <div className='form-control'>
+      <div className='flex items-center'>
+        <input
+          type='range'
+          id={id}
+          className='range'
+          value={value || schema.default}
+          required={required}
+          disabled={disabled || readonly}
+          min={schema.minimum}
+          max={schema.maximum}
+          step={schema.multipleOf || 1}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        <span className='label-text ml-4'>{value}</span>
+      </div>
+    </div>
+  );
+}

package/src/widgets/RangeWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RangeWidget';
+export * from './RangeWidget';