@rjsf/shadcn 6.6.0 → 6.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/shadcn",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -56,7 +56,7 @@
     "lint": "oxlint src test",
     "precommit": "lint-staged",
     "test": "vitest run",
-    "test:update": "vitest run --update-snapshots"
+    "test:update": "vitest run --update"
   },
   "lint-staged": {
     "{src,test}/**/*.{ts,tsx}": [
@@ -65,8 +65,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.5.x",
-    "@rjsf/utils": "^6.5.x",
+    "@rjsf/core": "^6.6.x",
+    "@rjsf/utils": "^6.6.x",
     "react": ">=18"
   },
   "engineStrict": false,
@@ -74,12 +74,11 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@rjsf/core": "6.6.0",
-    "@rjsf/snapshot-tests": "6.6.0",
-    "@rjsf/utils": "6.6.0",
-    "@rjsf/validator-ajv8": "6.6.0",
+    "@rjsf/core": "6.6.2",
+    "@rjsf/snapshot-tests": "6.6.2",
+    "@rjsf/utils": "6.6.2",
+    "@rjsf/validator-ajv8": "6.6.2",
     "@tailwindcss/cli": "^4.3.0",
-    "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0"
   },
   "dependencies": {

package/src/AddButton/AddButton.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import { PlusCircle } from 'lucide-react';
 
 import { Button } from '../components/ui/button';

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,11 +1,5 @@
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldItemTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,12 +1,5 @@
-import {
-  ArrayFieldTemplateProps,
-  buttonId,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { buttonId, getTemplate, getUiOptions } from '@rjsf/utils';
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,14 +1,8 @@
-import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
 import { SchemaExamples } from '@rjsf/core';
-import {
-  ariaDescribedByIds,
-  BaseInputTemplateProps,
-  examplesId,
-  FormContextType,
-  getInputProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, getInputProps } from '@rjsf/utils';
 
 import { Input } from '../components/ui/input';
 import { cn } from '../lib/utils';
@@ -50,11 +44,11 @@ export default function BaseInputTemplate<
     ...extraProps,
     ...getInputProps<T, S, F>(schema, type, options),
   };
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
-  const _onClear = useCallback(
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const handleClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
@@ -78,13 +72,13 @@ export default function BaseInputTemplate<
         list={schema.examples ? examplesId(id) : undefined}
         {...inputProps}
         value={value || value === 0 ? value : ''}
-        onChange={onChangeOverride || _onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={onChangeOverride || handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {options.allowClearTextInputs && !readonly && !disabled && value && (
-        <ClearButton onClick={_onClear} registry={registry} />
+        <ClearButton onClick={handleClear} registry={registry} />
       )}
       {children}
       <SchemaExamples id={id} schema={schema} />

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,14 +1,5 @@
-import {
-  ariaDescribedByIds,
-  descriptionId,
-  FormContextType,
-  getTemplate,
-  labelValue,
-  RJSFSchema,
-  schemaRequiresTrueValue,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequiresTrueValue } from '@rjsf/utils';
 
 import { Checkbox } from '../components/ui/checkbox';
 import { Label } from '../components/ui/label';
@@ -51,9 +42,9 @@ export default function CheckboxWidget<
     options,
   );
 
-  const _onChange = (checked: boolean) => onChange(checked);
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleChange = (checked: boolean) => onChange(checked);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
 
   const description = options.description || schema.description;
   return (
@@ -78,9 +69,9 @@ export default function CheckboxWidget<
           required={required}
           disabled={disabled || readonly}
           autoFocus={autofocus}
-          onCheckedChange={_onChange}
-          onBlur={_onBlur}
-          onFocus={_onFocus}
+          onCheckedChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
           className={className}
         />
         <Label className='leading-tight' htmlFor={id}>

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,4 +1,5 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -6,11 +7,7 @@ import {
   enumOptionsIsSelected,
   enumOptionsSelectValue,
   getOptionValueFormat,
-  FormContextType,
   optionId,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { Checkbox } from '../components/ui/checkbox';
@@ -44,9 +41,9 @@ export default function CheckboxesWidget<
   const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
-  const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
+  const handleBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && (target as any).value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && (target as any).value, enumOptions, optionValueFormat, emptyValue));
 
   return (
@@ -54,7 +51,7 @@ export default function CheckboxesWidget<
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, index: number) => {
           const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
           const indexOptionId = optionId(id, index);
 
           return (
@@ -74,8 +71,8 @@ export default function CheckboxesWidget<
                 className={className}
                 checked={checked}
                 autoFocus={autofocus && index === 0}
-                onBlur={_onBlur}
-                onFocus={_onFocus}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
                 aria-describedby={ariaDescribedByIds(id)}
               />
               <Label className='leading-tight' htmlFor={optionId(id, index)}>

package/src/DescriptionField/DescriptionField.tsx

@@ -1,5 +1,5 @@
 import { RichDescription } from '@rjsf/core';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *

package/src/ErrorList/ErrorList.tsx

@@ -1,4 +1,5 @@
-import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import { AlertCircle } from 'lucide-react';
 
 import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
@@ -17,9 +18,10 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
       <AlertCircle className='h-4 w-4' />
       <AlertTitle>{translateString(TranslatableString.ErrorsLabel)}</AlertTitle>
       <AlertDescription className='flex flex-col gap-1'>
-        {errors.map((error, i: number) => {
-          return <span key={i}>&#x2022; {error.stack}</span>;
-        })}
+        {errors.map((error, i: number) => (
+          // oxlint-disable-next-line react/no-array-index-key
+          <span key={i}>&#x2022; {error.stack}</span>
+        ))}
       </AlertDescription>
     </Alert>
   );

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,4 +1,5 @@
-import { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema, errorId } from '@rjsf/utils';
+import type { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { errorId } from '@rjsf/utils';
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
@@ -17,13 +18,12 @@ export default function FieldErrorTemplate<
 
   return (
     <div className='flex flex-col gap-1' id={id}>
-      {errors.map((error, i: number) => {
-        return (
-          <span className={'text-xs font-medium text-destructive mb-1'} key={i}>
-            {error}
-          </span>
-        );
-      })}
+      {errors.map((error, i: number) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <span className='text-xs font-medium text-destructive mb-1' key={i}>
+          {error}
+        </span>
+      ))}
     </div>
   );
 }

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
 import { RichHelp } from '@rjsf/core';
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import type { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId } from '@rjsf/utils';
 
 import { cn } from '../lib/utils';
 

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,11 +1,5 @@
-import {
-  FieldTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { FieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 import { cn } from '../lib/utils';
 

package/src/Form/Form.tsx

@@ -1,6 +1,7 @@
-import { ComponentType } from 'react';
-import { FormProps, withTheme } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType } from 'react';
+import type { FormProps } from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTheme } from '../Theme';
 

package/src/GridTemplate/GridTemplate.tsx

@@ -1,4 +1,4 @@
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 
 import { cn } from '../lib/utils';
 

package/src/IconButton/IconButton.tsx

@@ -1,8 +1,11 @@
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { memo } from 'react';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import type { VariantProps } from 'class-variance-authority';
 import { ChevronDown, ChevronUp, Copy, Trash2, X } from 'lucide-react';
 
-import { Button, buttonVariants } from '../components/ui/button';
+import type { buttonVariants } from '../components/ui/button';
+import { Button } from '../components/ui/button';
 
 export type ShadIconButtonProps<
   T = any,
@@ -17,7 +20,7 @@ export type ShadIconButtonProps<
  *
  * @param props - The combined props from RJSF IconButtonProps and Shadcn ButtonProps, including icon and event handlers
  */
-export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function IconButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
@@ -27,6 +30,8 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
     </Button>
   );
 }
+const IconButton = memo(IconButtonFn) as typeof IconButtonFn;
+export default IconButton;
 
 /** Renders a copy button for RJSF array fields that allows users to duplicate array items.
  * The button includes a copy icon and uses the RJSF translation system for the tooltip text.
@@ -34,7 +39,7 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
  *
  * @param props - The RJSF icon button properties, including registry for translations and event handlers
  */
-export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function CopyButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const {
@@ -44,6 +49,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon={<Copy className='h-4 w-4' />} />
   );
 }
+export const CopyButton = memo(CopyButtonFn) as typeof CopyButtonFn;
 
 /** Renders a move down button for RJSF array fields that allows reordering of array items.
  * The button includes a chevron-down icon and uses the RJSF translation system for the tooltip text.
@@ -51,7 +57,7 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
  *
  * @param props - The RJSF icon button properties, including registry for translations and event handlers
  */
-export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveDownButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const {
@@ -65,6 +71,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
     />
   );
 }
+export const MoveDownButton = memo(MoveDownButtonFn) as typeof MoveDownButtonFn;
 
 /** Renders a move up button for RJSF array fields that allows reordering of array items.
  * The button includes a chevron-up icon and uses the RJSF translation system for the tooltip text.
@@ -72,7 +79,7 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
  *
  * @param props - The RJSF icon button properties, including registry for translations and event handlers
  */
-export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveUpButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const {
@@ -86,6 +93,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const MoveUpButton = memo(MoveUpButtonFn) as typeof MoveUpButtonFn;
 
 /** Renders a remove button for RJSF array fields that allows deletion of array items.
  * The button includes a trash icon and uses the RJSF translation system for the tooltip text.
@@ -94,7 +102,7 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
  *
  * @param props - The RJSF icon button properties, including registry for translations and event handlers
  */
-export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function RemoveButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const {
@@ -104,13 +112,14 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     <IconButton
       title={translateString(TranslatableString.RemoveButton)}
       {...props}
-      className={'border-destructive'}
+      className='border-destructive'
       icon={<Trash2 className='h-4 w-4 stroke-destructive' />}
     />
   );
 }
+export const RemoveButton = memo(RemoveButtonFn) as typeof RemoveButtonFn;
 
-export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ClearButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ShadIconButtonProps<T, S, F>,
 ) {
   const {
@@ -118,3 +127,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon={<X />} />;
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { cn } from '../lib/utils';
 

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,15 +1,5 @@
-import {
-  buttonId,
-  canExpand,
-  descriptionId,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  ObjectFieldTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  titleId,
-} from '@rjsf/utils';
+import type { FormContextType, ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { buttonId, canExpand, descriptionId, getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
@@ -72,8 +62,8 @@ export default function ObjectFieldTemplate<
       )}
       <div className='flex flex-col gap-2'>
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-        {properties.map((element: any, index: number) => (
-          <div key={index} className={`${element.hidden ? 'hidden' : ''} flex`}>
+        {properties.map((element: any) => (
+          <div key={element.name} className={`${element.hidden ? 'hidden' : ''} flex`}>
             <div className='w-full'>{element.content}</div>
           </div>
         ))}

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { PlusCircle } from 'lucide-react';
 
 import IconButton, { RemoveButton } from '../IconButton';
@@ -29,7 +29,8 @@ export default function OptionalDataControlsTemplate<
         size='xs'
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

package/src/RadioWidget/RadioWidget.tsx

@@ -1,15 +1,12 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   enumOptionsIsSelected,
   getOptionValueFormat,
-  FormContextType,
   optionId,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { Label } from '../components/ui/label';
@@ -36,11 +33,11 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = (value: string) =>
-    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleChange = (enumValue: string) =>
+    onChange(enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const inline = Boolean(options && options.inline);
@@ -52,17 +49,17 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         required={required}
         disabled={disabled || readonly}
         onValueChange={(e: string) => {
-          _onChange(e);
+          handleChange(e);
         }}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
         orientation={inline ? 'horizontal' : 'vertical'}
         className={cn('flex flex-wrap', { 'flex-col': !inline }, className)}
       >
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {
-            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
             const checked = enumOptionsIsSelected<S>(option.value, value);
             return (
               <div className='flex items-center gap-2' key={optionId(id, index)}>

package/src/RangeWidget/RangeWidget.tsx

@@ -1,4 +1,5 @@
-import { ariaDescribedByIds, FormContextType, rangeSpec, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, rangeSpec } from '@rjsf/utils';
 import _pick from 'lodash/pick';
 
 import { Slider } from '../components/ui/slider';
@@ -41,8 +42,8 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   onChange,
   label,
   id,
-}: WidgetProps<T, S, F>): JSX.Element {
-  const _onChange = (value: number[]) => onChange(value[0]);
+}: WidgetProps<T, S, F>) {
+  const handleChange = (newValue: number[]) => onChange(newValue[0]);
 
   const sliderProps = { value, label, id, ...rangeSpec<S>(schema) };
   const uiProps = { id, ..._pick((options.props as object) || {}, allowedProps) };
@@ -54,7 +55,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         max={sliderProps.max}
         step={sliderProps.step}
         value={[value as number]}
-        onValueChange={_onChange}
+        onValueChange={handleChange}
         {...uiProps}
         aria-describedby={ariaDescribedByIds(id)}
       />

package/src/SelectWidget/SelectWidget.tsx

@@ -1,13 +1,10 @@
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { FancyMultiSelect } from '../components/ui/fancy-multi-select';
@@ -42,19 +39,19 @@ export default function SelectWidget<
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onFancyFocus = () => {
+  const handleFancyFocus = () => {
     onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyValue));
   };
 
-  const _onFancyBlur = () => {
+  const handleFancyBlur = () => {
     onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyValue));
   };
 
-  const items = (enumOptions as any)?.map(({ value, label }: any, index: number) => ({
-    value: multiple ? value : enumOptionValueEncoder(value, index, optionValueFormat),
-    label: label,
+  const items = (enumOptions as any)?.map(({ value: enumValue, label: enumLabel }: any, index: number) => ({
+    value: multiple ? enumValue : enumOptionValueEncoder(enumValue, index, optionValueFormat),
+    label: enumLabel,
     index,
-    disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
+    disabled: Array.isArray(enumDisabled) && enumDisabled.includes(enumValue),
   }));
 
   const cnClassName = cn({ 'border-destructive': rawErrors.length > 0 }, className);
@@ -73,8 +70,8 @@ export default function SelectWidget<
           required={required}
           placeholder={placeholder}
           className={cnClassName}
-          onFocus={_onFancyFocus}
-          onBlur={_onFancyBlur}
+          onFocus={handleFancyFocus}
+          onBlur={handleFancyBlur}
           ariaDescribedby={ariaDescribedByIds(id)}
         />
       ) : (
@@ -89,8 +86,8 @@ export default function SelectWidget<
           onValueChange={(values) => {
             onChange(enumOptionValueDecoder<S>(values.map(String), enumOptions, optionValueFormat, optEmptyValue));
           }}
-          onFocus={_onFancyFocus}
-          onBlur={_onFancyBlur}
+          onFocus={handleFancyFocus}
+          onBlur={handleFancyBlur}
         />
       )}
     </div>

package/src/SubmitButton/SubmitButton.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 
 import { Button } from '../components/ui/button';
 import { cn } from '../lib/utils';