@rjsf/mantine 6.6.1 → 6.7.0

package/src/widgets/CheckboxesWidget.tsx

@@ -1,5 +1,7 @@
-import { FocusEvent, useCallback } from 'react';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { Checkbox, Flex, Input } from '@mantine/core';
+import type { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -8,10 +10,6 @@ import {
   getOptionValueFormat,
   optionId,
   titleId,
-  FormContextType,
-  WidgetProps,
-  RJSFSchema,
-  StrictRJSFSchema,
 } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
@@ -97,12 +95,12 @@ export default function CheckboxesWidget<
           <Flex mt='xs' direction={inline ? 'row' : 'column'} gap='xs' wrap='wrap'>
             {enumOptions.map((option, i) => (
               <Checkbox
-                key={i}
+                key={String(option.value)}
                 id={optionId(id, i)}
                 name={htmlName || id}
                 value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
                 label={option.label}
-                disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
+                disabled={Array.isArray(enumDisabled) && enumDisabled.includes(option.value)}
                 autoFocus={i === 0 && autofocus}
                 onBlur={handleBlur}
                 onFocus={handleFocus}

package/src/widgets/ColorWidget.tsx

@@ -1,13 +1,8 @@
-import { FocusEvent, useCallback } from 'react';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { ColorInput } from '@mantine/core';
-import {
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  labelValue,
-  ariaDescribedByIds,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { labelValue, ariaDescribedByIds } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -48,7 +43,7 @@ export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onBlur) {
-        onBlur(id, target && target.value);
+        onBlur(id, target?.value);
       }
     },
     [onBlur, id],
@@ -57,7 +52,7 @@ export default function ColorWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onFocus) {
-        onFocus(id, target && target.value);
+        onFocus(id, target?.value);
       }
     },
     [onFocus, id],

package/src/widgets/DateTime/AltDateTimeWidget.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 /** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
  *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.

package/src/widgets/DateTime/AltDateWidget.tsx

@@ -1,16 +1,6 @@
 import { Flex, Box, Group, Button, Select, Input } from '@mantine/core';
-import {
-  ariaDescribedByIds,
-  dateRangeOptions,
-  titleId,
-  DateObject,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  useAltDateWidgetProps,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { DateObject, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, dateRangeOptions, titleId, TranslatableString, useAltDateWidgetProps } from '@rjsf/utils';
 
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
  * @param props - The `WidgetProps` for this component
@@ -34,6 +24,7 @@ export default function AltDateWidget<
         {elements.map((elemProps, i) => {
           const elemId = `${id}_${elemProps.type}`;
           return (
+            // oxlint-disable-next-line react/no-array-index-key
             <Box key={i}>
               <Select
                 id={elemId}
@@ -67,6 +58,7 @@ export default function AltDateWidget<
       {rawErrors &&
         rawErrors?.length > 0 &&
         rawErrors.map((error: string, index: number) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <Input.Error key={`alt-date-widget-input-errors-${index}`}>{error}</Input.Error>
         ))}
     </>

package/src/widgets/DateTime/DateTimeInput.tsx

@@ -1,13 +1,7 @@
 import { useCallback } from 'react';
 import { DateInput } from '@mantine/dates';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  labelValue,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
 import dayjs from 'dayjs';
 
 const dateParser = (input: string, format: string) => {

package/src/widgets/DateTime/DateTimeWidget.tsx

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

package/src/widgets/DateTime/DateWidget.tsx

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

package/src/widgets/DateTime/TimeWidget.tsx

@@ -1,13 +1,8 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { TimeInput } from '@mantine/dates';
-import {
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  labelValue,
-  ariaDescribedByIds,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { labelValue, ariaDescribedByIds } from '@rjsf/utils';
 
 /** The `TimeWidget` component uses the `TimeInput` component from `@mantine/dates` for rendering.
  *
@@ -46,7 +41,7 @@ export default function TimeWidget<T = any, S extends StrictRJSFSchema = RJSFSch
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onBlur) {
-        onBlur(id, target && target.value);
+        onBlur(id, target?.value);
       }
     },
     [onBlur, id],
@@ -55,7 +50,7 @@ export default function TimeWidget<T = any, S extends StrictRJSFSchema = RJSFSch
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onFocus) {
-        onFocus(id, target && target.value);
+        onFocus(id, target?.value);
       }
     },
     [onFocus, id],

package/src/widgets/FileWidget.tsx

@@ -1,14 +1,7 @@
 import { useCallback } from 'react';
 import { FileInput, Pill } from '@mantine/core';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  labelValue,
-  RJSFSchema,
-  StrictRJSFSchema,
-  useFileWidgetProps,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue, useFileWidgetProps } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -43,6 +36,7 @@ export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSch
     (files: any) => {
       if (typeof files === 'object') {
         // handleChange is async; DOM event handlers are void-returning, so we intentionally don't await
+        // oxlint-disable-next-line no-floating-promises, no-void
         void handleChange(files);
       }
     },
@@ -54,6 +48,7 @@ export default function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSch
       return (
         <Pill.Group>
           {filesInfo.map((file, index) => (
+            // oxlint-disable-next-line react/no-array-index-key
             <Pill key={index} withRemoveButton onRemove={() => handleRemove(index)}>
               {file.name}
             </Pill>

package/src/widgets/PasswordWidget.tsx

@@ -1,13 +1,8 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { PasswordInput } from '@mantine/core';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  labelValue,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -39,7 +34,7 @@ export default function PasswordWidget<
     onFocus,
   } = props;
 
-  const emptyValue = options.emptyValue;
+  const { emptyValue } = options;
   const themeProps = cleanupOptions(options);
 
   const handleChange = useCallback(
@@ -52,7 +47,7 @@ export default function PasswordWidget<
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onBlur) {
-        onBlur(id, target && target.value);
+        onBlur(id, target?.value);
       }
     },
     [onBlur, id],
@@ -61,7 +56,7 @@ export default function PasswordWidget<
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onFocus) {
-        onFocus(id, target && target.value);
+        onFocus(id, target?.value);
       }
     },
     [onFocus, id],

package/src/widgets/RadioWidget.tsx

@@ -1,5 +1,7 @@
-import { FocusEvent, useCallback } from 'react';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { Radio, Flex } from '@mantine/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -7,10 +9,6 @@ import {
   enumOptionsIndexForValue,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
@@ -56,7 +54,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onBlur) {
-        onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
+        onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
     [onBlur, id, enumOptions, emptyValue, optionValueFormat],
@@ -65,7 +63,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onFocus) {
-        onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
+        onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
     [onFocus, id, enumOptions, emptyValue, optionValueFormat],
@@ -90,11 +88,11 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         <Flex mt='xs' direction={inline ? 'row' : 'column'} gap='xs' wrap='wrap'>
           {enumOptions.map((option, i) => (
             <Radio
-              key={i}
+              key={String(option.value)}
               id={optionId(id, i)}
               value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
               label={option.label}
-              disabled={Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1}
+              disabled={Array.isArray(enumDisabled) && enumDisabled.includes(option.value)}
               autoFocus={i === 0 && autofocus}
               onBlur={handleBlur}
               onFocus={handleFocus}

package/src/widgets/RangeWidget.tsx

@@ -1,14 +1,7 @@
 import { useCallback } from 'react';
 import { Slider, Input } from '@mantine/core';
-import {
-  ariaDescribedByIds,
-  rangeSpec,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  titleId,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, rangeSpec, titleId } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -88,6 +81,7 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       {rawErrors &&
         rawErrors?.length > 0 &&
         rawErrors.map((error: string, index: number) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <Input.Error key={`range-widget-input-errors-${index}`}>{error}</Input.Error>
         ))}
     </>

package/src/widgets/SelectWidget.tsx

@@ -1,5 +1,7 @@
-import { FocusEvent, useCallback, useMemo } from 'react';
+import type { FocusEvent } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Select, MultiSelect } from '@mantine/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -7,10 +9,8 @@ import {
   enumOptionValueEncoder,
   getOptionValueFormat,
   labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription,
 } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
@@ -36,6 +36,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     hideLabel,
     multiple,
     rawErrors,
+    schema,
     options,
     onChange,
     onBlur,
@@ -45,6 +46,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
   const themeProps = cleanupOptions(options);
+  logUnsupportedDefaultForEnum<S>(id, schema, enumOptions, multiple);
 
   const handleChange = useCallback(
     (nextValue: any) => {
@@ -58,7 +60,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onBlur) {
-        onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
+        onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
     [onBlur, id, enumOptions, emptyValue, optionValueFormat],
@@ -67,7 +69,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) => {
       if (onFocus) {
-        onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
+        onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue));
       }
     },
     [onFocus, id, enumOptions, emptyValue, optionValueFormat],
@@ -79,7 +81,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
         key: String(index),
         value: enumOptionValueEncoder(option.value, index, optionValueFormat),
         label: option.label,
-        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.includes(option.value),
       }));
     }
     return [];
@@ -104,15 +106,20 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     ...themeProps,
   };
 
-  return multiple ? (
-    <MultiSelect
-      {...sharedProps}
-      value={enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[]}
-    />
-  ) : (
-    <Select
-      {...sharedProps}
-      value={enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, null) as string | null}
-    />
+  return (
+    <>
+      <SelectedOptionDescription {...props} />
+      {multiple ? (
+        <MultiSelect
+          {...sharedProps}
+          value={enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[]}
+        />
+      ) : (
+        <Select
+          {...sharedProps}
+          value={enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, null) as string | null}
+        />
+      )}
+    </>
   );
 }

package/src/widgets/TextareaWidget.tsx

@@ -1,13 +1,8 @@
-import { ReactElement, ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ReactElement, ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
 import { Textarea } from '@mantine/core';
-import {
-  StrictRJSFSchema,
-  RJSFSchema,
-  FormContextType,
-  WidgetProps,
-  labelValue,
-  ariaDescribedByIds,
-} from '@rjsf/utils';
+import type { StrictRJSFSchema, RJSFSchema, FormContextType, WidgetProps } from '@rjsf/utils';
+import { labelValue, ariaDescribedByIds } from '@rjsf/utils';
 
 import { cleanupOptions } from '../utils';
 
@@ -52,7 +47,7 @@ export default function TextareaWidget<
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLTextAreaElement>) => {
       if (onBlur) {
-        onBlur(id, target && target.value);
+        onBlur(id, target?.value);
       }
     },
     [onBlur, id],
@@ -61,7 +56,7 @@ export default function TextareaWidget<
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLTextAreaElement>) => {
       if (onFocus) {
-        onFocus(id, target && target.value);
+        onFocus(id, target?.value);
       }
     },
     [onFocus, id],

package/src/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 dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';