@rjsf/core 6.6.1 → 6.7.0

package/src/components/templates/ButtonTemplates/IconButton.tsx

@@ -1,6 +1,8 @@
-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';
 
-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: IconButtonProps<T, S, F>,
 ) {
   const { iconType = 'default', icon, className, uiSchema, registry, ...otherProps } = props;
@@ -10,8 +12,10 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
     </button>
   );
 }
+const IconButton = memo(IconButtonFn) as typeof IconButtonFn;
+export default IconButton;
 
-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: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -19,8 +23,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   } = props;
   return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon='copy' />;
 }
+export const CopyButton = memo(CopyButtonFn) as typeof CopyButtonFn;
 
-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: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -28,8 +33,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
   } = props;
   return <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon='arrow-down' />;
 }
+export const MoveDownButton = memo(MoveDownButtonFn) as typeof MoveDownButtonFn;
 
-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: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -37,8 +43,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon='arrow-up' />;
 }
+export const MoveUpButton = memo(MoveUpButtonFn) as typeof MoveUpButtonFn;
 
-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: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -48,8 +55,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} iconType='danger' icon='remove' />
   );
 }
+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>({
   id,
   className,
   onClick,
@@ -72,3 +80,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/components/templates/ButtonTemplates/SubmitButton.tsx

@@ -1,4 +1,5 @@
-import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */

package/src/components/templates/ButtonTemplates/index.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import AddButton from './AddButton';
 import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from './IconButton';

package/src/components/templates/CyclicSchemaExpandTemplate.tsx

@@ -0,0 +1,31 @@
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <div className='text-danger'>{translateString(TranslatableString.CycleDetected, [name])}</div>
+      <div>
+        <button
+          id={buttonId}
+          type='button'
+          className='btn btn-sm btn-warning'
+          onClick={() => onExpand(fieldPathId[ID_KEY])}
+        >
+          {translateString(TranslatableString.ExpandButton)}
+        </button>{' '}
+      </div>
+    </div>
+  );
+}

package/src/components/templates/DescriptionField.tsx

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

package/src/components/templates/ErrorList.tsx

@@ -1,11 +1,5 @@
-import {
-  ErrorListProps,
-  FormContextType,
-  RJSFValidationError,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-} from '@rjsf/utils';
+import type { ErrorListProps, FormContextType, RJSFValidationError, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 
 /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
  *
@@ -22,13 +16,12 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
         <h3 className='panel-title'>{translateString(TranslatableString.ErrorsLabel)}</h3>
       </div>
       <ul className='list-group'>
-        {errors.map((error: RJSFValidationError, i: number) => {
-          return (
-            <li key={i} className='list-group-item text-danger'>
-              {error.stack}
-            </li>
-          );
-        })}
+        {errors.map((error: RJSFValidationError, i: number) => (
+          // oxlint-disable-next-line react/no-array-index-key
+          <li key={i} className='list-group-item text-danger'>
+            {error.stack}
+          </li>
+        ))}
       </ul>
     </div>
   );

package/src/components/templates/FallbackFieldTemplate.tsx

@@ -1,4 +1,5 @@
-import { FallbackFieldTemplateProps, FormContextType, getTemplate, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FallbackFieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /**
  * The `FallbackFieldTemplate` is used to render a field when no field matches. The field renders a type selector and

package/src/components/templates/FieldErrorTemplate.tsx

@@ -1,4 +1,5 @@
-import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } 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
  *
@@ -20,13 +21,12 @@ export default function FieldErrorTemplate<
       <ul id={id} className='error-detail bs-callout bs-callout-info'>
         {errors
           .filter((elem) => !!elem)
-          .map((error, index: number) => {
-            return (
-              <li className='text-danger' key={index}>
-                {error}
-              </li>
-            );
-          })}
+          .map((error, index: number) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <li className='text-danger' key={index}>
+              {error}
+            </li>
+          ))}
       </ul>
     </div>
   );

package/src/components/templates/FieldHelpTemplate.tsx

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

package/src/components/templates/FieldTemplate/FieldTemplate.tsx

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

package/src/components/templates/FieldTemplate/Label.tsx

@@ -1,13 +1,13 @@
 const REQUIRED_FIELD_SYMBOL = '*';
 
-export type LabelProps = {
+export interface LabelProps {
   /** The label for the field */
   label?: string;
   /** A boolean value stating if the field is required */
   required?: boolean;
   /** The id of the input field being labeled */
   id?: string;
-};
+}
 
 /** Renders a label for a field
  *

package/src/components/templates/GridTemplate.tsx

@@ -1,4 +1,4 @@
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 
 /** Renders a `GridTemplate` for bootstrap 3, which is expecting the column information coming in via the `className`
  * prop. Also spreads all the other props provided by the user directly on the div.

package/src/components/templates/MultiSchemaFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `MultiSchemaFieldTemplate` component renders the layout for the MultiSchemaField, which supports choosing
  * a schema from a list of schemas defined using `anyOf` or `oneOf`.

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -1,16 +1,11 @@
-import {
+import type {
   FormContextType,
   ObjectFieldTemplatePropertyType,
   ObjectFieldTemplateProps,
   RJSFSchema,
   StrictRJSFSchema,
-  canExpand,
-  descriptionId,
-  getTemplate,
-  getUiOptions,
-  titleId,
-  buttonId,
 } from '@rjsf/utils';
+import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, buttonId } 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

package/src/components/templates/OptionalDataControlsTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import IconButton from './ButtonTemplates/IconButton';
 
@@ -27,7 +27,8 @@ export default function OptionalDataControlsTemplate<
         title={label}
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <IconButton
         id={id}

package/src/components/templates/TitleField.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 const REQUIRED_FIELD_SYMBOL = '*';
 

package/src/components/templates/UnsupportedField.tsx

@@ -1,5 +1,6 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString, UnsupportedFieldProps } from '@rjsf/utils';
-import { Markdown } from 'markdown-to-jsx';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, UnsupportedFieldProps } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
+import { Markdown } from 'markdown-to-jsx/react';
 
 /** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
  * react-jsonschema-form.
@@ -13,7 +14,7 @@ function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const { translateString } = registry;
   let translateEnum: TranslatableString = TranslatableString.UnsupportedField;
   const translateParams: string[] = [];
-  if (fieldPathId && fieldPathId.$id) {
+  if (fieldPathId?.$id) {
     translateEnum = TranslatableString.UnsupportedFieldWithId;
     translateParams.push(fieldPathId.$id);
   }

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -1,12 +1,5 @@
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WrapIfAdditionalTemplateProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString } from '@rjsf/utils';
 
 import Label from './FieldTemplate/Label';
 

package/src/components/templates/index.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
 import ArrayFieldItemButtonsTemplate from './ArrayFieldItemButtonsTemplate';
@@ -7,6 +7,7 @@ import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
 import ButtonTemplates from './ButtonTemplates';
+import CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import FallbackFieldTemplate from './FallbackFieldTemplate';
@@ -34,6 +35,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     ArrayFieldTitleTemplate,
     ButtonTemplates: ButtonTemplates<T, S, F>(),
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
     FallbackFieldTemplate,

package/src/components/widgets/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/components/widgets/AltDateWidget.tsx

@@ -1,12 +1,5 @@
-import {
-  DateElement,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WidgetProps,
-  useAltDateWidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { DateElement, TranslatableString, useAltDateWidgetProps } from '@rjsf/utils';
 
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
  * @param props - The `WidgetProps` for this component
@@ -21,6 +14,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
   return (
     <ul className='list-inline'>
       {elements.map((elemProps, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
         <li className='list-inline-item' key={i}>
           <DateElement
             rootId={id}
@@ -38,16 +32,16 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
       ))}
       {(options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (
         <li className='list-inline-item'>
-          <a href='#' className='btn btn-info btn-now' onClick={handleSetNow}>
+          <button type='button' className='btn btn-info btn-now' onClick={handleSetNow}>
             {translateString(TranslatableString.NowLabel)}
-          </a>
+          </button>
         </li>
       )}
       {(options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (
         <li className='list-inline-item'>
-          <a href='#' className='btn btn-warning btn-clear' onClick={handleClear}>
+          <button type='button' className='btn btn-warning btn-clear' onClick={handleClear}>
             {translateString(TranslatableString.ClearLabel)}
-          </a>
+          </button>
         </li>
       )}
     </ul>

package/src/components/widgets/CheckboxWidget.tsx

@@ -1,14 +1,12 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   descriptionId,
   getTemplate,
   labelValue,
   schemaRequiresTrueValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
   getUiOptions,
 } from '@rjsf/utils';
 

package/src/components/widgets/CheckboxesWidget.tsx

@@ -1,4 +1,6 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -8,10 +10,6 @@ import {
   enumOptionsSelectValue,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  WidgetProps,
-  RJSFSchema,
-  StrictRJSFSchema,
 } from '@rjsf/utils';
 
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
@@ -37,13 +35,13 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
 
   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, id, enumOptions, emptyValue, 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, id, enumOptions, emptyValue, optionValueFormat],
   );
 
@@ -52,7 +50,7 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, index) => {
           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 disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
 
           const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -82,11 +80,11 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
             </span>
           );
           return inline ? (
-            <label key={index} className={`checkbox-inline ${disabledCls}`}>
+            <label key={String(option.value)} className={`checkbox-inline ${disabledCls}`}>
               {checkbox}
             </label>
           ) : (
-            <div key={index} className={`checkbox ${disabledCls}`}>
+            <div key={String(option.value)} className={`checkbox ${disabledCls}`}>
               <label>{checkbox}</label>
             </div>
           );

package/src/components/widgets/ColorWidget.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 `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
  * either disabled or readonly.

package/src/components/widgets/DateTimeWidget.tsx

@@ -1,12 +1,5 @@
-import {
-  getTemplate,
-  localToUTC,
-  utcToLocal,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate, localToUTC, utcToLocal } from '@rjsf/utils';
 
 /** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
  * the value to/from utc using the appropriate utility functions.
@@ -25,7 +18,7 @@ export default function DateTimeWidget<
       type='datetime-local'
       {...props}
       value={utcToLocal(value)}
-      onChange={(value) => onChange(localToUTC(value))}
+      onChange={(newValue) => onChange(localToUTC(newValue))}
     />
   );
 }

package/src/components/widgets/DateWidget.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 `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
  * the value to undefined when it is falsy during the `onChange` handling.

package/src/components/widgets/EmailWidget.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 `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
  *

package/src/components/widgets/FileWidget.tsx

@@ -1,17 +1,15 @@
-import { ChangeEvent } from 'react';
-import {
+import type { ChangeEvent } from 'react';
+import type {
   FileInfoType,
   FormContextType,
-  getTemplate,
   Registry,
   RJSFSchema,
   StrictRJSFSchema,
-  TranslatableString,
   UIOptionsType,
-  useFileWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
-import { Markdown } from 'markdown-to-jsx';
+import { getTemplate, TranslatableString, useFileWidgetProps } from '@rjsf/utils';
+import { Markdown } from 'markdown-to-jsx/react';
 
 function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   fileInfo,
@@ -25,12 +23,13 @@ function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
   if (!dataURL) {
     return null;
   }
+  const previewLabel = translateString(TranslatableString.PreviewLabel);
 
   // If type is JPEG or PNG then show image preview.
   // Originally, any type of image was supported, but this was changed into a whitelist
   // since SVGs and animated GIFs are also images, which are generally considered a security risk.
   if (['image/jpeg', 'image/png'].includes(type)) {
-    return <img src={dataURL} style={{ maxWidth: '100%' }} className='file-preview' />;
+    return <img src={dataURL} alt={previewLabel} style={{ maxWidth: '100%' }} className='file-preview' />;
   }
 
   // otherwise, let users download file
@@ -39,7 +38,7 @@ function FileInfoPreview<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
     <>
       {' '}
       <a download={`preview-${name}`} href={dataURL} className='file-download'>
-        {translateString(TranslatableString.PreviewLabel)}
+        {previewLabel}
       </a>
     </>
   );
@@ -71,6 +70,7 @@ function FilesInfo<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
         const { name, size, type } = fileInfo;
         const handleRemove = () => onRemove(key);
         return (
+          // oxlint-disable-next-line react/no-array-index-key
           <li key={key}>
             <Markdown>{translateString(TranslatableString.FilesInfo, [name, type, String(size)])}</Markdown>
             {preview && <FileInfoPreview<T, S, F> fileInfo={fileInfo} registry={registry} />}
@@ -96,6 +96,7 @@ function FileWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const handleOnChangeEvent = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       // 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(event.target.files);
     }
   };

package/src/components/widgets/HiddenWidget.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 /** The `HiddenWidget` is a widget for rendering a hidden input field.
  *  It is typically used by setting type to "hidden".

package/src/components/widgets/PasswordWidget.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 `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
  *