@rjsf/core 6.0.0-alpha.0 → 6.0.0-beta.2

package/src/components/widgets/AltDateWidget.tsx

@@ -85,9 +85,12 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
 }: WidgetProps<T, S, F>) {
   const { translateString } = registry;
   const [lastValue, setLastValue] = useState(value);
-  const [state, setState] = useReducer((state: DateObject, action: Partial<DateObject>) => {
-    return { ...state, ...action };
-  }, parseDateString(value, time));
+  const [state, setState] = useReducer(
+    (state: DateObject, action: Partial<DateObject>) => {
+      return { ...state, ...action };
+    },
+    parseDateString(value, time),
+  );
 
   useEffect(() => {
     const stateValue = toDateString(state, time);
@@ -114,7 +117,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
       const nextState = parseDateString(new Date().toJSON(), time);
       onChange(toDateString(nextState, time));
     },
-    [disabled, readonly, time]
+    [disabled, readonly, time],
   );
 
   const handleClear = useCallback(
@@ -125,7 +128,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
       }
       onChange(undefined);
     },
-    [disabled, readonly, onChange]
+    [disabled, readonly, onChange],
   );
 
   return (
@@ -134,7 +137,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
         state,
         time,
         options.yearsRange as [number, number] | undefined,
-        options.format as DateElementFormat | undefined
+        options.format as DateElementFormat | undefined,
       ).map((elemProps, i) => (
         <li className='list-inline-item' key={i}>
           <DateElement

package/src/components/widgets/CheckboxWidget.tsx

@@ -35,7 +35,7 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
@@ -44,23 +44,23 @@ function CheckboxWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => onChange(event.target.checked),
-    [onChange]
+    [onChange],
   );
 
   const handleBlur = useCallback(
     (event: FocusEvent<HTMLInputElement>) => onBlur(id, event.target.checked),
-    [onBlur, id]
+    [onBlur, id],
   );
 
   const handleFocus = useCallback(
     (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.checked),
-    [onFocus, id]
+    [onFocus, id],
   );
   const description = options.description ?? schema.description;
 
   return (
     <div className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}>
-      {!hideLabel && !!description && (
+      {!hideLabel && description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}
           description={description}

package/src/components/widgets/CheckboxesWidget.tsx

@@ -33,13 +33,13 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id]
+    [onBlur, id],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id]
+    [onFocus, id],
   );
   return (
     <div className='checkboxes' id={id}>

package/src/components/widgets/ColorWidget.tsx

@@ -6,7 +6,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @param props - The `WidgetProps` for this component
  */
 export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { disabled, readonly, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/DateTimeWidget.tsx

@@ -16,7 +16,7 @@ import {
 export default function DateTimeWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const { onChange, value, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/DateWidget.tsx

@@ -7,7 +7,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @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>
+  props: WidgetProps<T, S, F>,
 ) {
   const { onChange, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/EmailWidget.tsx

@@ -5,7 +5,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @param props - The `WidgetProps` for this component
  */
 export default function EmailWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/FileWidget.tsx

@@ -141,7 +141,7 @@ function extractFileInfo(dataURLs: string[]): FileInfoType[] {
           type: blob.type,
         },
       ];
-    } catch (e) {
+    } catch {
       // Invalid dataURI, so just ignore it.
       return acc;
     }
@@ -153,7 +153,7 @@ function extractFileInfo(dataURLs: string[]): FileInfoType[] {
  *  It is typically used with a string property with data-url format.
  */
 function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { disabled, readonly, required, multiple, onChange, value, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
@@ -169,13 +169,13 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       processFiles(event.target.files).then((filesInfoEvent) => {
         const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
         if (multiple) {
-          onChange(value.concat(newValue[0]));
+          onChange(value.concat(newValue));
         } else {
           onChange(newValue[0]);
         }
       });
     },
-    [multiple, value, onChange]
+    [multiple, value, onChange],
   );
 
   const filesInfo = useMemo(() => extractFileInfo(Array.isArray(value) ? value : [value]), [value]);
@@ -188,7 +188,7 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
         onChange(undefined);
       }
     },
-    [multiple, value, onChange]
+    [multiple, value, onChange],
   );
   return (
     <div>

package/src/components/widgets/PasswordWidget.tsx

@@ -7,7 +7,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
 export default function PasswordWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/RadioWidget.tsx

@@ -32,17 +32,17 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id]
+    [onBlur, enumOptions, emptyValue, id],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
       onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id]
+    [onFocus, enumOptions, emptyValue, id],
   );
 
   return (
-    <div className='field-radio-group' id={id}>
+    <div className='field-radio-group' id={id} role='radiogroup'>
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, i) => {
           const checked = enumOptionsIsSelected<S>(option.value, value);

package/src/components/widgets/RangeWidget.tsx

@@ -6,7 +6,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjs
  * @param props - The `WidgetProps` for this component
  */
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const {
     value,

package/src/components/widgets/RatingWidget.tsx

@@ -0,0 +1,129 @@
+import { FocusEvent, useCallback } from 'react';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `RatingWidget` component renders a star or heart rating input
+ *
+ * Features:
+ * - Configurable number of stars/hearts (1-5) with default of 5
+ * - Supports different shapes (star, heart)
+ * - Supports minimum and maximum values from schema
+ * - Handles required, disabled, and readonly states
+ * - Provides focus and blur event handling for accessibility
+ * - Uses Unicode characters for better visual representation
+ *
+ * @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' } = 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;
+
+  /** Handles clicking on a star to set the rating */
+  const handleStarClick = useCallback(
+    (starValue: number) => {
+      if (!disabled && !readonly) {
+        onChange(starValue);
+      }
+    },
+    [onChange, disabled, readonly],
+  );
+
+  /** Handles focus events for accessibility */
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLSpanElement>) => {
+      if (onFocus) {
+        // Get the star value from the data attribute
+        const starValue = Number((event.target as HTMLElement).dataset.value);
+        onFocus(id, starValue);
+      }
+    },
+    [onFocus, id],
+  );
+
+  /** Handles blur events for accessibility */
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLSpanElement>) => {
+      if (onBlur) {
+        // Get the star value from the data attribute
+        const starValue = Number((event.target as HTMLElement).dataset.value);
+        onBlur(id, starValue);
+      }
+    },
+    [onBlur, id],
+  );
+
+  // Get the appropriate Unicode character based on shape option
+  const getSymbol = (isFilled: boolean): string => {
+    if (shape === 'heart') {
+      return isFilled ? '♥' : '♡';
+    }
+    return isFilled ? '★' : '☆';
+  };
+
+  return (
+    <>
+      <div
+        className='rating-widget'
+        style={{
+          display: 'inline-flex',
+          fontSize: '1.5rem',
+          cursor: disabled || readonly ? 'default' : 'pointer',
+        }}
+      >
+        {[...Array(numStars)].map((_, index) => {
+          const starValue = min + index;
+          const isFilled = starValue <= value;
+
+          return (
+            <span
+              key={index}
+              onClick={() => handleStarClick(starValue)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              data-value={starValue}
+              tabIndex={disabled || readonly ? -1 : 0}
+              role='radio'
+              aria-checked={starValue === value}
+              aria-label={`${starValue} ${shape === 'heart' ? 'heart' : 'star'}${starValue === 1 ? '' : 's'}`}
+              style={{
+                color: isFilled ? '#FFD700' : '#ccc',
+                padding: '0 0.2rem',
+                transition: 'color 0.2s',
+                userSelect: 'none',
+              }}
+            >
+              {getSymbol(isFilled)}
+            </span>
+          );
+        })}
+        <input
+          type='hidden'
+          id={id}
+          name={id}
+          value={value || ''}
+          required={required}
+          disabled={disabled || readonly}
+          aria-hidden='true'
+        />
+      </div>
+    </>
+  );
+}

package/src/components/widgets/SelectWidget.tsx

@@ -47,7 +47,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       const newValue = getValue(event, multiple);
       return onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
     },
-    [onFocus, id, schema, multiple, enumOptions, optEmptyVal]
+    [onFocus, id, multiple, enumOptions, optEmptyVal],
   );
 
   const handleBlur = useCallback(
@@ -55,7 +55,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       const newValue = getValue(event, multiple);
       return onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
     },
-    [onBlur, id, schema, multiple, enumOptions, optEmptyVal]
+    [onBlur, id, multiple, enumOptions, optEmptyVal],
   );
 
   const handleChange = useCallback(
@@ -63,7 +63,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       const newValue = getValue(event, multiple);
       return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
     },
-    [onChange, schema, multiple, enumOptions, optEmptyVal]
+    [onChange, multiple, enumOptions, optEmptyVal],
   );
 
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
@@ -74,6 +74,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       id={id}
       name={id}
       multiple={multiple}
+      role='combobox'
       className='form-control'
       value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
       required={required}

package/src/components/widgets/TextWidget.tsx

@@ -5,7 +5,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @param props - The `WidgetProps` for this component
  */
 export default function TextWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/TextareaWidget.tsx

@@ -20,17 +20,17 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
 }: WidgetProps<T, S, F>) {
   const handleChange = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => onChange(value === '' ? options.emptyValue : value),
-    [onChange, options.emptyValue]
+    [onChange, options.emptyValue],
   );
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value),
-    [onBlur, id]
+    [onBlur, id],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value),
-    [id, onFocus]
+    [id, onFocus],
   );
 
   return (

package/src/components/widgets/TimeWidget.tsx

@@ -7,7 +7,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @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>
+  props: WidgetProps<T, S, F>,
 ) {
   const { onChange, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/URLWidget.tsx

@@ -5,7 +5,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @param props - The `WidgetProps` for this component
  */
 export default function URLWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/UpDownWidget.tsx

@@ -5,7 +5,7 @@ import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps
  * @param props - The `WidgetProps` for this component
  */
 export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);

package/src/components/widgets/index.ts

@@ -13,6 +13,7 @@ import HiddenWidget from './HiddenWidget';
 import PasswordWidget from './PasswordWidget';
 import RadioWidget from './RadioWidget';
 import RangeWidget from './RangeWidget';
+import RatingWidget from './RatingWidget';
 import SelectWidget from './SelectWidget';
 import TextareaWidget from './TextareaWidget';
 import TextWidget from './TextWidget';
@@ -23,7 +24,7 @@ import UpDownWidget from './UpDownWidget';
 function widgets<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): RegistryWidgetsType<T, S, F> {
   return {
     AltDateWidget,
@@ -39,6 +40,7 @@ function widgets<
     PasswordWidget,
     RadioWidget,
     RangeWidget,
+    RatingWidget,
     SelectWidget,
     TextWidget,
     TextareaWidget,

package/src/getDefaultRegistry.ts

@@ -11,7 +11,7 @@ import widgets from './components/widgets';
 export default function getDefaultRegistry<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(): Omit<Registry<T, S, F>, 'schemaUtils'> {
   return {
     fields: fields<T, S, F>(),

package/src/index.ts

@@ -1,8 +1,9 @@
 import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
+import RichDescription, { RichDescriptionProps } from './components/RichDescription';
 import withTheme, { ThemeProps } from './withTheme';
 import getDefaultRegistry from './getDefaultRegistry';
 
-export type { FormProps, FormState, IChangeEvent, ThemeProps };
+export type { FormProps, FormState, IChangeEvent, ThemeProps, RichDescriptionProps };
 
-export { withTheme, getDefaultRegistry };
+export { withTheme, getDefaultRegistry, RichDescription };
 export default Form;

package/src/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.build.json",
   "include": [
     "./"
   ],
@@ -7,17 +7,25 @@
     "rootDir": "./",
     "outDir": "../lib",
     "baseUrl": "../",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "composite": true
   },
   "references": [
     {
       "path": "../../utils"
     },
-    {
-      "path": "../../validator-ajv6"
-    },
     {
       "path": "../../validator-ajv8"
     }
-  ]
+  ],
+  "tsc-alias": {
+    "resolveFullPaths": true,
+    "verbose": true,
+    "replacers": {
+      "lodash": {
+        "enabled": true,
+        "file": "lodashReplacer.js"
+      }
+    }
+  }
 }

package/src/withTheme.tsx

@@ -12,9 +12,10 @@ export type ThemeProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
 
 /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
 export default function withTheme<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  themeProps: ThemeProps<T, S, F>
+  themeProps: ThemeProps<T, S, F>,
 ): ComponentType<FormProps<T, S, F>> {
-  return forwardRef(
+  // @ts-expect-error TS2322 because the latest types complain about LegacyRef's string form not working with Form
+  return forwardRef<Form<T, S, F>, FormProps<T, S, F>>(
     ({ fields, widgets, templates, ...directProps }: FormProps<T, S, F>, ref: ForwardedRef<Form<T, S, F>>) => {
       fields = { ...themeProps?.fields, ...fields };
       widgets = { ...themeProps?.widgets, ...widgets };
@@ -37,6 +38,6 @@ export default function withTheme<T = any, S extends StrictRJSFSchema = RJSFSche
           ref={ref}
         />
       );
-    }
+    },
   );
 }