@rjsf/core 6.6.1 → 6.7.0

package/src/components/widgets/RadioWidget.tsx

@@ -1,4 +1,6 @@
-import { FocusEvent, useCallback } from 'react';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -6,10 +8,6 @@ import {
   enumOptionsIsSelected,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 /** The `RadioWidget` is a widget for rendering a radio group.
@@ -35,13 +33,13 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onBlur, enumOptions, emptyValue, id, optionValueFormat],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onFocus, enumOptions, emptyValue, id, optionValueFormat],
   );
 
@@ -50,7 +48,7 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, i) => {
           const checked = enumOptionsIsSelected<S>(option.value, value);
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
           const disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
 
           const handleChange = () => onChange(option.value);
@@ -76,11 +74,11 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
           );
 
           return inline ? (
-            <label key={i} className={`radio-inline ${disabledCls}`}>
+            <label key={String(option.value)} className={`radio-inline ${disabledCls}`}>
               {radio}
             </label>
           ) : (
-            <div key={i} className={`radio ${disabledCls}`}>
+            <div key={String(option.value)} className={`radio ${disabledCls}`}>
               <label>{radio}</label>
             </div>
           );

package/src/components/widgets/RangeWidget.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
  * in a div, with the value along side it.

package/src/components/widgets/RatingWidget.tsx

@@ -1,5 +1,6 @@
-import { FocusEvent, useCallback } from 'react';
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 /** The `RatingWidget` component renders a star or heart rating input
  *
@@ -80,51 +81,51 @@ export default function RatingWidget<
   };
 
   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;
+    <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={htmlName || id}
-          value={value || ''}
-          required={required}
-          disabled={disabled || readonly}
-          aria-hidden='true'
-        />
-      </div>
-    </>
+        return (
+          <span
+            // oxlint-disable-next-line react/no-array-index-key
+            key={index}
+            onClick={() => handleStarClick(starValue)}
+            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && 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={htmlName || id}
+        value={value || ''}
+        required={required}
+        disabled={disabled || readonly}
+        aria-hidden='true'
+      />
+    </div>
   );
 }

package/src/components/widgets/SelectWidget.tsx

@@ -1,14 +1,14 @@
-import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent, SyntheticEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription,
 } from '@rjsf/utils';
 
 function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
@@ -41,6 +41,8 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   onFocus,
   placeholder,
   htmlName,
+  registry,
+  uiSchema,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
@@ -72,34 +74,49 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
 
   const selectValue = enumOptionSelectedValue<S>(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === undefined;
+  logUnsupportedDefaultForEnum<S>(id, schema, enumOptions, multiple);
 
   return (
-    <select
-      id={id}
-      name={htmlName || id}
-      multiple={multiple}
-      role='combobox'
-      className='form-control'
-      value={selectValue}
-      required={required}
-      disabled={disabled || readonly}
-      autoFocus={autofocus}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      onChange={handleChange}
-      aria-describedby={ariaDescribedByIds(id)}
-    >
-      {showPlaceholderOption && <option value=''>{placeholder}</option>}
-      {Array.isArray(enumOptions) &&
-        enumOptions.map(({ value, label }, i) => {
-          const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
-          return (
-            <option key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
-              {label}
-            </option>
-          );
-        })}
-    </select>
+    <>
+      <SelectedOptionDescription
+        id={id}
+        multiple={multiple}
+        options={options}
+        registry={registry}
+        uiSchema={uiSchema}
+        value={value}
+      />
+      {/* oxlint-disable-next-line jsx-a11y/no-autofocus */}
+      <select
+        id={id}
+        name={htmlName || id}
+        multiple={multiple}
+        className='form-control'
+        value={selectValue}
+        required={required}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onChange={handleChange}
+        aria-describedby={ariaDescribedByIds(id)}
+      >
+        {showPlaceholderOption && <option value=''>{placeholder}</option>}
+        {Array.isArray(enumOptions) &&
+          enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
+            const isDisabled = enumDisabled && enumDisabled.includes(enumValue);
+            return (
+              <option
+                key={String(enumValue)}
+                value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
+                disabled={isDisabled}
+              >
+                {enumLabel}
+              </option>
+            );
+          })}
+      </select>
+    </>
   );
 }
 

package/src/components/widgets/TextWidget.tsx

@@ -1,4 +1,5 @@
-import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /** The `TextWidget` component uses the `BaseInputTemplate`.
  *

package/src/components/widgets/TextareaWidget.tsx

@@ -1,5 +1,7 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
-import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
  *
@@ -7,7 +9,7 @@ import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, Widg
  */
 function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
-  options = {},
+  options,
   placeholder,
   value,
   required,
@@ -20,17 +22,18 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   htmlName,
 }: WidgetProps<T, S, F>) {
   const handleChange = useCallback(
-    ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) => onChange(value === '' ? options.emptyValue : value),
+    ({ target: { value: newValue } }: ChangeEvent<HTMLTextAreaElement>) =>
+      onChange(newValue === '' ? options.emptyValue : newValue),
     [onChange, options.emptyValue],
   );
 
   const handleBlur = useCallback(
-    ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target?.value),
     [onBlur, id],
   );
 
   const handleFocus = useCallback(
-    ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target?.value),
     [id, onFocus],
   );
 
@@ -39,7 +42,7 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
       id={id}
       name={htmlName || id}
       className='form-control'
-      value={value ? value : ''}
+      value={value || ''}
       placeholder={placeholder}
       required={required}
       disabled={disabled}

package/src/components/widgets/TimeWidget.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /** The `TimeWidget` component uses the `BaseInputTemplate` changing the type to `time` and transforms
  * the value to undefined when it is falsy during the `onChange` handling.

package/src/components/widgets/URLWidget.tsx

@@ -1,4 +1,5 @@
-import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
  *

package/src/components/widgets/UpDownWidget.tsx

@@ -1,4 +1,5 @@
-import { getTemplate, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
  *

package/src/components/widgets/index.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import AltDateTimeWidget from './AltDateTimeWidget';
 import AltDateWidget from './AltDateWidget';

package/src/getDefaultRegistry.ts

@@ -1,12 +1,5 @@
-import {
-  DEFAULT_ID_PREFIX,
-  DEFAULT_ID_SEPARATOR,
-  englishStringTranslator,
-  FormContextType,
-  Registry,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { FormContextType, Registry, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, englishStringTranslator } from '@rjsf/utils';
 
 import fields from './components/fields';
 import templates from './components/templates';

package/src/getTestRegistry.tsx

@@ -1,10 +1,5 @@
-import {
-  DEFAULT_ID_PREFIX,
-  DEFAULT_ID_SEPARATOR,
-  createSchemaUtils,
-  englishStringTranslator,
-  Registry,
-} from '@rjsf/utils';
+import type { Registry } from '@rjsf/utils';
+import { DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, createSchemaUtils, englishStringTranslator } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
 import getDefaultRegistry from './getDefaultRegistry';

package/src/index.ts

@@ -1,10 +1,15 @@
-import Form, { FormProps, FormState, IChangeEvent } from './components/Form';
-import RichDescription, { RichDescriptionProps } from './components/RichDescription';
-import RichHelp, { RichHelpProps } from './components/RichHelp';
-import SchemaExamples, { SchemaExamplesProps } from './components/SchemaExamples';
+import type { FormProps, FormState, IChangeEvent } from './components/Form';
+import Form from './components/Form';
+import type { RichDescriptionProps } from './components/RichDescription';
+import RichDescription from './components/RichDescription';
+import type { RichHelpProps } from './components/RichHelp';
+import RichHelp from './components/RichHelp';
+import type { SchemaExamplesProps } from './components/SchemaExamples';
+import SchemaExamples from './components/SchemaExamples';
 import getDefaultRegistry from './getDefaultRegistry';
 import getTestRegistry from './getTestRegistry';
-import withTheme, { ThemeProps } from './withTheme';
+import type { ThemeProps } from './withTheme';
+import withTheme from './withTheme';
 
 export type {
   FormProps,

package/src/withTheme.tsx

@@ -1,7 +1,9 @@
-import { ComponentType, ForwardedRef, forwardRef } from 'react';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
-import Form, { FormProps } from './components/Form';
+import type { FormProps } from './components/Form';
+import Form from './components/Form';
 
 /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
  * overridden while creating a theme
@@ -17,15 +19,18 @@ export default function withTheme<T = any, S extends StrictRJSFSchema = RJSFSche
 ): ComponentType<FormProps<T, S, F>> {
   // @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 };
-      templates = {
+    (
+      { fields: propFields, widgets: propWidgets, templates: propTemplates, ...directProps }: FormProps<T, S, F>,
+      ref: ForwardedRef<Form<T, S, F>>,
+    ) => {
+      const fields = { ...themeProps?.fields, ...propFields };
+      const widgets = { ...themeProps?.widgets, ...propWidgets };
+      const templates = {
         ...themeProps?.templates,
-        ...templates,
+        ...propTemplates,
         ButtonTemplates: {
           ...themeProps?.templates?.ButtonTemplates,
-          ...templates?.ButtonTemplates,
+          ...propTemplates?.ButtonTemplates,
         },
       };