@rjsf/daisyui 6.0.0-beta.2

package/src/widgets/RatingWidget/RatingWidget.tsx

@@ -0,0 +1,120 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `RatingWidget` component renders a star or heart rating input with DaisyUI styling
+ *
+ * Features:
+ * - Configurable number of stars/hearts (1-5) with default of 5
+ * - Supports different shapes (star, heart)
+ * - Supports different colors (red, orange, yellow, lime, green, blue, purple, pink)
+ * - Supports different sizes (xs, sm, md, lg, xl)
+ * - Uses DaisyUI's mask and star/heart styling
+ * - Supports minimum and maximum values from schema
+ * - Handles required, disabled, and readonly states
+ * - Provides focus and blur event handling for accessibility
+ * - Uses radio inputs for a11y compatibility
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RatingWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  id,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus,
+  onChange,
+  onFocus,
+  onBlur,
+  schema,
+  options,
+}: WidgetProps<T, S, F>) {
+  const { stars = 5, shape = 'star', color = 'orange', size = 'md', colorGradient = false } = options;
+
+  // Use schema.maximum if provided, otherwise use stars option (limited to 1-5)
+  const numStars = schema.maximum ? Math.min(schema.maximum, 5) : Math.min(Math.max(stars as number, 1), 5);
+  const min = schema.minimum || 0;
+
+  // Generate shape class
+  const maskClass = shape === 'heart' ? 'mask-heart' : 'mask-star-2';
+
+  // Generate size class
+  const sizeClass = size === 'md' ? '' : `rating-${size}`;
+
+  /** Handles change events from radio inputs */
+  const _onChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      onChange(parseInt(value));
+    },
+    [onChange],
+  );
+
+  /** Handles focus events for accessibility */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        const starValue = Number(event.target.value);
+        onFocus(id, starValue);
+      }
+    },
+    [onFocus, id],
+  );
+
+  /** Handles blur events for accessibility */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        const starValue = Number(event.target.value);
+        onBlur(id, starValue);
+      }
+    },
+    [onBlur, id],
+  );
+
+  /** Get color class for a specific star/heart
+   *
+   * @param index - The index of the star/heart (0-based)
+   * @returns The appropriate color class
+   */
+  const getColorClass = (index: number): string => {
+    if (!colorGradient) {
+      return `bg-${color}-400`;
+    }
+
+    // For gradient effect, use different colors based on position
+    const colors = ['red', 'orange', 'yellow', 'lime', 'green'];
+    const colorIdx = Math.min(index, colors.length - 1);
+    return `bg-${colors[colorIdx]}-400`;
+  };
+
+  return (
+    <div className='form-control w-full'>
+      <div className={`rating gap-1 ${sizeClass}`}>
+        {[...Array(numStars)].map((_, index) => {
+          const starValue = min + index;
+          return (
+            <input
+              key={index}
+              type='radio'
+              name={id}
+              value={starValue}
+              checked={value === starValue}
+              onChange={_onChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              className={`mask ${maskClass} ${getColorClass(index)}`}
+              disabled={disabled || readonly}
+              required={required}
+              autoFocus={autofocus && index === 0}
+              aria-label={`${starValue} ${shape === 'heart' ? 'heart' : 'star'}${starValue === 1 ? '' : 's'}`}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/widgets/RatingWidget/index.ts

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

package/src/widgets/SelectWidget/SelectWidget.tsx

@@ -0,0 +1,161 @@
+import { FocusEvent, useCallback } from 'react';
+import {
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `SelectWidget` component renders a select input with DaisyUI styling
+ *
+ * Features:
+ * - Supports both single and multiple selection
+ * - Handles enumerated objects and primitive values
+ * - Uses DaisyUI select styling with proper width
+ * - Supports required, disabled, and readonly states
+ * - Manages focus and blur events for accessibility
+ * - Provides placeholder option when needed
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  schema,
+  id,
+  options,
+  label,
+  disabled,
+  placeholder,
+  readonly,
+  value,
+  multiple,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, emptyValue: optEmptyVal } = options;
+  multiple = typeof multiple === 'undefined' ? false : !!multiple;
+
+  const getDisplayValue = (val: any) => {
+    if (!val) {
+      return '';
+    }
+    if (typeof val === 'object') {
+      if (val.name) {
+        return val.name;
+      }
+      return val.label || JSON.stringify(val);
+    }
+    return String(val);
+  };
+
+  const isEnumeratedObject = enumOptions && enumOptions[0]?.value && typeof enumOptions[0].value === 'object';
+
+  const handleOptionClick = useCallback(
+    (event: React.MouseEvent<HTMLLIElement>) => {
+      const index = Number(event.currentTarget.dataset.value);
+      if (isNaN(index)) {
+        return;
+      }
+
+      if (multiple) {
+        const currentValue = Array.isArray(value) ? value : [];
+        const optionValue = isEnumeratedObject
+          ? enumOptions[index].value
+          : enumOptionsValueForIndex<S>(String(index), enumOptions, optEmptyVal);
+        const newValue = currentValue.includes(optionValue)
+          ? currentValue.filter((v) => v !== optionValue)
+          : [...currentValue, optionValue];
+        onChange(newValue);
+      } else {
+        onChange(
+          isEnumeratedObject
+            ? enumOptions[index].value
+            : enumOptionsValueForIndex<S>(String(index), enumOptions, optEmptyVal),
+        );
+      }
+    },
+    [value, multiple, isEnumeratedObject, enumOptions, optEmptyVal, onChange],
+  );
+
+  const _onBlur = useCallback(
+    ({ target }: FocusEvent<HTMLDivElement>) => {
+      const dataValue = target?.getAttribute('data-value');
+      if (dataValue !== null) {
+        onBlur(id, enumOptionsValueForIndex<S>(dataValue, enumOptions, optEmptyVal));
+      }
+    },
+    [onBlur, id, enumOptions, optEmptyVal],
+  );
+
+  const _onFocus = useCallback(
+    ({ target }: FocusEvent<HTMLDivElement>) => {
+      const dataValue = target?.getAttribute('data-value');
+      if (dataValue !== null) {
+        onFocus(id, enumOptionsValueForIndex<S>(dataValue, enumOptions, optEmptyVal));
+      }
+    },
+    [onFocus, id, enumOptions, optEmptyVal],
+  );
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  const selectedValues = Array.isArray(selectedIndexes) ? selectedIndexes : [selectedIndexes];
+
+  const optionsList =
+    enumOptions ||
+    (Array.isArray(schema.examples) ? schema.examples.map((example) => ({ value: example, label: example })) : []);
+
+  return (
+    <div className='form-control w-full'>
+      <div className='dropdown w-full'>
+        <div
+          tabIndex={0}
+          role='button'
+          className={`btn btn-outline w-full text-left flex justify-between items-center ${
+            disabled || readonly ? 'btn-disabled' : ''
+          }`}
+          onBlur={_onBlur}
+          onFocus={_onFocus}
+        >
+          <span className='truncate'>
+            {selectedValues.length > 0
+              ? selectedValues.map((index) => optionsList[Number(index)]?.label).join(', ')
+              : placeholder || label || 'Select...'}
+          </span>
+          <span className='ml-2'>▼</span>
+        </div>
+        <ul className='dropdown-content z-[1] bg-base-100 w-full max-h-60 overflow-auto rounded-box shadow-lg'>
+          {optionsList.map(({ label }, i) => (
+            <li
+              key={i}
+              role='button'
+              tabIndex={0}
+              className={`px-4 py-2 hover:bg-base-200 cursor-pointer ${
+                selectedValues.includes(String(i)) ? 'bg-primary/10' : ''
+              }`}
+              onClick={handleOptionClick}
+              data-value={i}
+            >
+              <div className='flex items-center gap-2'>
+                {multiple && (
+                  <input
+                    type='checkbox'
+                    className='checkbox checkbox-sm'
+                    checked={selectedValues.includes(String(i))}
+                    readOnly
+                  />
+                )}
+                <span>{isEnumeratedObject ? label : getDisplayValue(label)}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/widgets/SelectWidget/index.ts

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

package/src/widgets/TextareaWidget/TextareaWidget.tsx

@@ -0,0 +1,77 @@
+import { FocusEvent, useCallback } from 'react';
+import { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `TextareaWidget` component renders a multi-line text input with DaisyUI styling
+ *
+ * Features:
+ * - Handles multi-line text input with proper styling
+ * - Supports required, disabled, and readonly states
+ * - Manages focus and blur events for accessibility
+ * - Uses DaisyUI's textarea component for consistent styling
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const { id, value, required, disabled, readonly, onChange, onFocus, onBlur, options } = props;
+
+  /** Handle focus events
+   *
+   * @param event - The focus event
+   */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLTextAreaElement>) => {
+      if (onFocus) {
+        onFocus(id, event.target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  /** Handle blur events
+   *
+   * @param event - The blur event
+   */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLTextAreaElement>) => {
+      if (onBlur) {
+        onBlur(id, event.target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  /** Handle change events
+   *
+   * @param event - The change event
+   */
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(event.target.value);
+    },
+    [onChange],
+  );
+
+  // Extract rows and other textarea-specific props from options
+  const rows = options?.rows || 5;
+
+  return (
+    <div className='form-control'>
+      <textarea
+        id={id}
+        value={value || ''}
+        required={required}
+        disabled={disabled || readonly}
+        readOnly={readonly}
+        rows={rows}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className='textarea textarea-bordered w-full'
+      />
+    </div>
+  );
+}

package/src/widgets/TextareaWidget/index.ts

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

package/src/widgets/TimeWidget/TimeWidget.tsx

@@ -0,0 +1,72 @@
+import { FocusEvent, useCallback } from 'react';
+import { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `TimeWidget` component renders a time input with DaisyUI styling
+ *
+ * Features:
+ * - Provides a time picker with hours and minutes
+ * - Handles required, disabled, and readonly states
+ * - Manages focus and blur events for accessibility
+ * - Uses DaisyUI's input styling with proper width
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { id, value, onChange, onFocus, onBlur, required, disabled, readonly } = props;
+
+  /** Handle focus events
+   *
+   * @param event - The focus event
+   */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(id, event.target.value);
+      }
+    },
+    [onFocus, id],
+  );
+
+  /** Handle blur events
+   *
+   * @param event - The blur event
+   */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(id, event.target.value);
+      }
+    },
+    [onBlur, id],
+  );
+
+  /** 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'>
+      <input
+        type='time'
+        id={id}
+        className='input input-bordered w-full'
+        value={value || ''}
+        required={required}
+        disabled={disabled || readonly}
+        readOnly={readonly}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+    </div>
+  );
+}

package/src/widgets/TimeWidget/index.ts

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

package/src/widgets/ToggleWidget/ToggleWidget.tsx

@@ -0,0 +1,70 @@
+import { ChangeEvent, useCallback } from 'react';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `ToggleWidget` component renders a toggle switch input with DaisyUI styling
+ *
+ * Features:
+ * - Provides a visual toggle switch rather than a standard checkbox
+ * - Supports different sizes through options (sm, md, lg)
+ * - Handles required, disabled, and readonly states
+ * - Manages focus and blur events for accessibility
+ * - Includes an optional label from options
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ToggleWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ id, value, required, disabled, readonly, autofocus, onChange, onFocus, onBlur, options }: WidgetProps<T, S, F>) {
+  /** Handle change events from the toggle input
+   *
+   * @param event - The change event
+   */
+  const _onChange = useCallback(
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked),
+    [onChange],
+  );
+
+  /** Handle focus events
+   */
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
+
+  /** Handle blur events
+   */
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
+
+  // Get size from options or use default "md"
+  const { size = 'md' } = options;
+
+  // Only add size class if it's not the default size
+  const sizeClass = size !== 'md' ? `toggle-${size}` : '';
+
+  return (
+    <div className='form-control'>
+      <label className='cursor-pointer label my-auto'>
+        <input
+          type='checkbox'
+          id={id}
+          checked={value}
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          onChange={_onChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={`toggle ${sizeClass}`}
+        />
+        <span className='label-text'>{options.label}</span>
+      </label>
+    </div>
+  );
+}

package/src/widgets/ToggleWidget/index.ts

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

package/src/widgets/Widgets.tsx

@@ -0,0 +1,58 @@
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import AltDateTimeWidget from './AltDateTimeWidget/AltDateTimeWidget';
+import AltDateWidget from './AltDateWidget/AltDateWidget';
+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';
+import SelectWidget from './SelectWidget/SelectWidget';
+import TextareaWidget from './TextareaWidget/TextareaWidget';
+import TimeWidget from './TimeWidget/TimeWidget';
+import ToggleWidget from './ToggleWidget/ToggleWidget';
+
+export {
+  AltDateTimeWidget,
+  AltDateWidget,
+  CheckboxesWidget,
+  CheckboxWidget,
+  DateTimeWidget,
+  DateWidget,
+  FileWidget,
+  RadioWidget,
+  RangeWidget,
+  RatingWidget,
+  SelectWidget,
+  TextareaWidget,
+  TimeWidget,
+  ToggleWidget,
+};
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    AltDateTimeWidget,
+    AltDateWidget,
+    CheckboxesWidget,
+    CheckboxWidget,
+    DateTimeWidget,
+    DateWidget,
+    FileWidget,
+    RadioWidget,
+    RangeWidget,
+    RatingWidget,
+    SelectWidget,
+    TextareaWidget,
+    TimeWidget,
+    toggle: ToggleWidget,
+  };
+}
+
+export default generateWidgets;

package/src/widgets/index.ts

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