@rjsf/core 6.6.1 → 6.7.0

package/src/components/fields/ObjectField.tsx

@@ -1,4 +1,17 @@
-import { FocusEvent, useCallback, useRef, useState } from 'react';
+import type { FocusEvent } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import type {
+  ErrorSchema,
+  FieldPathId,
+  FieldPathList,
+  FieldProps,
+  FormContextType,
+  GenericObjectType,
+  Registry,
+  RJSFMarkedSchema,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
@@ -9,25 +22,16 @@ import {
   shouldRenderOptionalField,
   toFieldPathId,
   useDeepCompareMemo,
-  ErrorSchema,
-  FieldPathId,
-  FieldPathList,
-  FieldProps,
-  FormContextType,
-  GenericObjectType,
   ONE_OF_KEY,
   PROPERTIES_KEY,
   REF_KEY,
-  Registry,
-  RJSFSchema,
-  StrictRJSFSchema,
   TranslatableString,
 } from '@rjsf/utils';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import { Markdown } from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx/react';
 
 import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
 
@@ -38,7 +42,7 @@ import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
  * @returns - True if the field `name` is required, false otherwise
  */
 function isRequired<S extends StrictRJSFSchema = RJSFSchema>(schema: S, name: string) {
-  return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+  return Array.isArray(schema.required) && schema.required.includes(name);
 }
 
 /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -86,7 +90,7 @@ interface ObjectFieldPropertyProps<
 
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
-function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ObjectFieldPropertyFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ObjectFieldPropertyProps<T, S, F>,
 ) {
   const {
@@ -125,14 +129,15 @@ function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F
    */
   const onPropertyChange = useCallback(
     (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
+      // formData, which causes them to completely disappear (including the input field for the property name). Unlike
+      // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
+      // button, so set empty values to the empty string.
+      let normalizedValue = value;
       if (value === undefined && addedByAdditionalProperties) {
-        // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
-        // formData, which causes them to completely disappear (including the input field for the property name). Unlike
-        // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
-        // button, so set empty values to the empty string.
-        value = '' as unknown as T;
+        normalizedValue = '' as unknown as T;
       }
-      onChange(value, path, newErrorSchema, id);
+      onChange(normalizedValue, path, newErrorSchema, id);
     },
     [onChange, addedByAdditionalProperties],
   );
@@ -193,6 +198,8 @@ function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   );
 }
 
+const ObjectFieldProperty = memo(ObjectFieldPropertyFn) as typeof ObjectFieldPropertyFn;
+
 /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
  * additional property key was modified and what it was modified to
  *
@@ -222,8 +229,11 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const { OptionalDataControlsField } = fields;
   const formDataRef = useRef(formData);
   formDataRef.current = formData;
-  const schema: S = schemaUtils.retrieveSchema(rawSchema, formData, true);
-  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const schema: S = useMemo(
+    () => schemaUtils.retrieveSchema(rawSchema, formData, true),
+    [schemaUtils, rawSchema, formData],
+  );
+  const uiOptions = useMemo(() => getUiOptions<T, S, F>(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
   const { properties: schemaProperties = {} } = schema;
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
@@ -243,13 +253,14 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
    * @returns - The name of the next available key from `preferredKey`
    */
   const getAvailableKey = useCallback(
-    (preferredKey: string, formData?: T) => {
+    (preferredKey: string, existingFormData?: T) => {
       const { duplicateKeySuffixSeparator = '-' } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
 
       let index = 0;
       let newKey = preferredKey;
-      while (has(formData, newKey)) {
-        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+      while (has(existingFormData, newKey)) {
+        index += 1;
+        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${index}`;
       }
       return newKey;
     },
@@ -263,7 +274,6 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { translateString } = registry;
     const newFormData = { ...formData } as T;
     const newKey = getAvailableKey('newKey', newFormData);
     if (schema.patternProperties) {
@@ -279,11 +289,10 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         defaultValue = schema.additionalProperties.default;
         let apSchema = schema.additionalProperties;
         if (REF_KEY in apSchema) {
-          const { schemaUtils } = registry;
           apSchema = schemaUtils.retrieveSchema({ [REF_KEY]: apSchema[REF_KEY] } as S, formData);
           type = apSchema.type;
           constValue = apSchema.const;
-          defaultValue = apSchema.default;
+          defaultValue = schemaUtils.getDefaultFormState(apSchema as S, defaultValue as T) as RJSFSchema['default'];
         }
         if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
           type = 'object';
@@ -300,7 +309,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
     }
     onChange(newFormData, childFieldPathId.path);
-  }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
+  }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
 
   /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
    * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
@@ -319,8 +328,9 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         };
         const newKeys: GenericObjectType = { [oldKey]: actualNewKey };
         const keyValues = Object.keys(newFormData).map((key) => {
-          const newKey = newKeys[key] || key;
-          return { [newKey]: newFormData[key] };
+          // `Object.hasOwn` so a falsy rename target (e.g. `""`) isn't dropped.
+          const mappedKey = Object.hasOwn(newKeys, key) ? newKeys[key] : key;
+          return { [mappedKey]: newFormData[key] };
         });
         const renamedObj = Object.assign({}, ...keyValues);
 
@@ -384,20 +394,22 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
     title: uiOptions.label === false ? '' : templateTitle,
     description: uiOptions.label === false ? undefined : description,
-    properties: orderedProperties.map((name) => {
-      const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
-      const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+    properties: orderedProperties.map((propertyName) => {
+      const addedByAdditionalProperties = Boolean(
+        (schema.properties?.[propertyName] as RJSFMarkedSchema)?.[ADDITIONAL_PROPERTY_FLAG],
+      );
+      const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (
         <ObjectFieldProperty<T, S, F>
-          key={getStableKey(name)}
-          propertyName={name}
-          required={isRequired<S>(schema, name)}
-          schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
+          key={getStableKey(propertyName)}
+          propertyName={propertyName}
+          required={isRequired<S>(schema, propertyName)}
+          schema={get(schema, [PROPERTIES_KEY, propertyName], {}) as S}
           uiSchema={fieldUiSchema}
-          errorSchema={get(errorSchema, [name])}
+          errorSchema={get(errorSchema, [propertyName])}
           fieldPathId={childFieldPathId}
-          formData={get(formData, [name])}
+          formData={get(formData, [propertyName])}
           handleKeyRename={handleKeyRename}
           handleRemoveProperty={handleRemoveProperty}
           addedByAdditionalProperties={addedByAdditionalProperties}
@@ -412,7 +424,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       );
       return {
         content,
-        name,
+        name: propertyName,
         readonly,
         disabled,
         required,

package/src/components/fields/OptionalDataControlsField.tsx

@@ -1,14 +1,16 @@
-import {
+import type {
   FieldProps,
   FormContextType,
+  OptionalDataControlsTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import {
   getSchemaType,
   getTemplate,
   getUiOptions,
   isFormDataAvailable,
   optionalControlsId,
-  OptionalDataControlsTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
   TranslatableString,
 } from '@rjsf/utils';
 

package/src/components/fields/SchemaField.tsx

@@ -1,8 +1,6 @@
-import { useCallback, Component, ComponentType } from 'react';
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  ANY_OF_KEY,
-  descriptionId,
+import type { ComponentType } from 'react';
+import { useCallback, memo } from 'react';
+import type {
   ErrorSchema,
   Field,
   FieldPathId,
@@ -10,28 +8,36 @@ import {
   FieldProps,
   FieldTemplateProps,
   FormContextType,
+  Registry,
+  RJSFMarkedSchema,
+  RJSFSchema,
+  StrictRJSFSchema,
+  UIOptionsType,
+} from '@rjsf/utils';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  ANY_OF_KEY,
+  deepEquals,
+  descriptionId,
   getSchemaType,
   getTemplate,
   getUiOptions,
   ID_KEY,
   isFormDataAvailable,
   ONE_OF_KEY,
-  Registry,
   resolveUiSchema,
-  RJSFSchema,
-  shouldRender,
+  RJSF_REF_CYCLE_KEY,
+  shallowEquals,
   shouldRenderOptionalField,
-  StrictRJSFSchema,
   toFieldPathId,
   TranslatableString,
   UI_OPTIONS_KEY,
-  UIOptionsType,
 } from '@rjsf/utils';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
 
 /** The map of component type to FieldName */
-const COMPONENT_TYPES: { [key: string]: string } = {
+const COMPONENT_TYPES: Record<string, string> = {
   array: 'ArrayField',
   boolean: 'BooleanField',
   integer: 'NumberField',
@@ -55,8 +61,8 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   uiOptions: UIOptionsType<T, S, F>,
   registry: Registry<T, S, F>,
 ): ComponentType<FieldProps<T, S, F>> {
-  const field = uiOptions.field;
-  const { fields } = registry;
+  const { field } = uiOptions;
+  const { fields, schemaUtils } = registry;
   if (typeof field === 'function') {
     return field;
   }
@@ -74,13 +80,17 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     componentName = schemaId;
   }
 
-  // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
-  // render a field and let the MultiSchemaField component handle the form display
-  if (!componentName && (schema.anyOf || schema.oneOf)) {
+  // If the schema uses 'anyOf' or 'oneOf' and is not a pure select (all-constant options),
+  // let the MultiSchemaField component handle the form display entirely.
+  // ObjectField is excluded: it renders shared properties (defined at the parent schema
+  // level) alongside the XxxOfField option selector.
+  // All other field types — including primitives and arrays — have no shared renderable
+  // properties, so the outer FieldComponent would only produce a spurious duplicate input.
+  if ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) && componentName !== 'ObjectField') {
     return () => null;
   }
 
-  return componentName in fields ? fields[componentName] : fields['FallbackField'];
+  return componentName in fields ? fields[componentName] : fields.FallbackField;
 }
 
 /** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
@@ -108,7 +118,26 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     wasPropertyKeyModified = false,
   } = props;
   const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
-  const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
+  const { AnyOfField: _AnyOfField, OneOfField: _OneOfField, CyclicSchemaField } = fields;
+  const fieldId = fieldPathId[ID_KEY];
+
+  /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
+   * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
+   */
+  const handleFieldComponentChange = useCallback(
+    (newFormData: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      const theId = id || fieldId;
+      return onChange(newFormData, path, newErrorSchema, theId);
+    },
+    [fieldId, onChange],
+  );
+
+  // Stop $ref cycles: when resolveAllReferences detects a repeated property $ref it tags the schema with this flag.
+  // The check must come after all hook calls to satisfy React's rules of hooks.
+  if ((_schema as RJSFMarkedSchema)[RJSF_REF_CYCLE_KEY]) {
+    return <CyclicSchemaField {...props} />;
+  }
+
   const uiSchema = resolveUiSchema<T, S, F>(_schema, _uiSchema, registry);
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
@@ -120,18 +149,6 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const fieldId = fieldPathId[ID_KEY];
-
-  /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
-   * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
-   */
-  const handleFieldComponentChange = useCallback(
-    (formData: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
-      const theId = id || fieldId;
-      return onChange(formData, path, newErrorSchema, theId);
-    },
-    [fieldId, onChange],
-  );
 
   const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, registry);
 
@@ -162,13 +179,13 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   if ((ANY_OF_KEY in schema || ONE_OF_KEY in schema) && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema)) {
     if (schema[ANY_OF_KEY]) {
       XxxOfField = _AnyOfField;
-      XxxOfOptions = schema[ANY_OF_KEY].map((_schema) =>
-        schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
+      XxxOfOptions = schema[ANY_OF_KEY].map((xxxOfSchema) =>
+        schemaUtils.retrieveSchema(isObject(xxxOfSchema) ? (xxxOfSchema as S) : ({} as S), formData),
       );
     } else if (schema[ONE_OF_KEY]) {
       XxxOfField = _OneOfField;
-      XxxOfOptions = schema[ONE_OF_KEY].map((_schema) =>
-        schemaUtils.retrieveSchema(isObject(_schema) ? (_schema as S) : ({} as S), formData),
+      XxxOfOptions = schema[ONE_OF_KEY].map((xxxOfSchema) =>
+        schemaUtils.retrieveSchema(isObject(xxxOfSchema) ? (xxxOfSchema as S) : ({} as S), formData),
       );
     }
     // When the anyOf/oneOf is an optional data control render AND it does not have form data, hide the label
@@ -224,7 +241,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   }
 
   const description = uiOptions.description || props.schema.description || schema.description || '';
-  const help = uiOptions.help;
+  const { help } = uiOptions;
   const hidden = uiOptions.widget === 'hidden' || deprecatedHandling === 'hide';
 
   const classNames = ['rjsf-field', `rjsf-field-${getSchemaType(schema)}`];
@@ -324,24 +341,22 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   );
 }
 
-/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
- * and if so, calls the `SchemaFieldRender` component with the props.
+/** The `SchemaField` component wraps `SchemaFieldRender` with a custom memoization comparator that  determines whether it is necessary to rerender the component based on any props changes
+ * using `experimental_componentUpdateStrategy`.
+ *
+ * The cast to `typeof SchemaFieldRender` preserves the generic type signature (<T, S, F>) for consumers,
+ * since React.memo's return type erases generic parameters.
  */
-class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
-  FieldProps<T, S, F>
-> {
-  shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
-    const {
-      registry: { globalFormOptions },
-    } = this.props;
-    const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
-
-    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
+const SchemaField = memo(SchemaFieldRender, (prevProps, nextProps) => {
+  const { experimental_componentUpdateStrategy = 'customDeep' } = nextProps.registry.globalFormOptions;
+  if (experimental_componentUpdateStrategy === 'always') {
+    return false; // always re-render — never consider props equal
   }
-
-  render() {
-    return <SchemaFieldRender<T, S, F> {...this.props} />;
+  if (experimental_componentUpdateStrategy === 'shallow') {
+    return shallowEquals(prevProps, nextProps);
   }
-}
+  // default: 'customDeep'
+  return deepEquals(prevProps, nextProps);
+}) as unknown as typeof SchemaFieldRender;
 
 export default SchemaField;

package/src/components/fields/StringField.tsx

@@ -1,15 +1,6 @@
 import { useCallback } from 'react';
-import {
-  getWidget,
-  getUiOptions,
-  optionsList,
-  hasWidget,
-  FieldProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  ErrorSchema,
-} from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, ErrorSchema } from '@rjsf/utils';
+import { getWidget, getUiOptions, optionsList, hasWidget } from '@rjsf/utils';
 
 /** The `StringField` component is used to render a schema field that represents a string type
  *
@@ -48,10 +39,8 @@ function StringField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const label = uiTitle ?? title ?? schemaTitle ?? name;
   const Widget = getWidget<T, S, F>(schema, widget, widgets);
   const onWidgetChange = useCallback(
-    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) => {
-      // String field change passes an empty path array to the parent field which adds the appropriate path
-      return onChange(value, fieldPathId.path, errorSchema, id);
-    },
+    (value: T | undefined, errorSchema?: ErrorSchema, id?: string) =>
+      onChange(value, fieldPathId.path, errorSchema, id),
     [onChange, fieldPathId],
   );
   return (

package/src/components/fields/index.ts

@@ -1,7 +1,8 @@
-import { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import ArrayField from './ArrayField';
 import BooleanField from './BooleanField';
+import CyclicSchemaField from './CyclicSchemaField';
 import FallbackField from './FallbackField';
 import LayoutGridField from './LayoutGridField';
 import LayoutHeaderField from './LayoutHeaderField';
@@ -24,6 +25,7 @@ function fields<
     ArrayField: ArrayField as unknown as Field<T, S, F>,
     // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
     BooleanField,
+    CyclicSchemaField,
     FallbackField,
     LayoutGridField,
     LayoutHeaderField,

package/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -1,12 +1,5 @@
-import {
-  descriptionId,
-  getTemplate,
-  getUiOptions,
-  ArrayFieldDescriptionProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldDescriptionProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { descriptionId, getTemplate, getUiOptions } from '@rjsf/utils';
 
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
  * the `fieldPathId`.

package/src/components/templates/ArrayFieldItemButtonsTemplate.tsx

@@ -1,10 +1,5 @@
-import {
-  ArrayFieldItemButtonsTemplateProps,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldItemButtonsTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { buttonId } from '@rjsf/utils';
 
 /** The `ArrayFieldTemplateItemButtons` component is the template used to render the buttons associate3d with items of
  * an array.

package/src/components/templates/ArrayFieldItemTemplate.tsx

@@ -1,12 +1,6 @@
-import { CSSProperties } from 'react';
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { CSSProperties } from 'react';
+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/components/templates/ArrayFieldTemplate.tsx

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

package/src/components/templates/ArrayFieldTitleTemplate.tsx

@@ -1,13 +1,5 @@
-import {
-  getTemplate,
-  getUiOptions,
-  titleId,
-  ArrayFieldTitleProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TemplatesType,
-} from '@rjsf/utils';
+import type { ArrayFieldTitleProps, FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import { getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
  * the `fieldPathId`.

package/src/components/templates/BaseInputTemplate.tsx

@@ -1,13 +1,7 @@
-import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
-import {
-  ariaDescribedByIds,
-  BaseInputTemplateProps,
-  examplesId,
-  getInputProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
+import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, getInputProps } from '@rjsf/utils';
 
 import SchemaExamples from '../SchemaExamples';
 
@@ -49,6 +43,7 @@ export default function BaseInputTemplate<
   // Note: since React 15.2.0 we can't forward unknown element attributes, so we
   // exclude the "options" and "schema" ones here.
   if (!id) {
+    // oxlint-disable-next-line no-console
     console.log('No id for', props);
     throw new Error(`no id for props ${JSON.stringify(props)}`);
   }
@@ -64,19 +59,17 @@ export default function BaseInputTemplate<
     inputValue = value == null ? '' : value;
   }
 
-  const _onChange = useCallback(
-    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
+  const handleChange = useCallback(
+    ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
+      onChange(newValue === '' ? options.emptyValue : newValue),
     [onChange, options],
   );
-  const _onBlur = useCallback(
-    ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
-    [onBlur, id],
-  );
-  const _onFocus = useCallback(
-    ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
+  const handleBlur = useCallback(({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target?.value), [onBlur, id]);
+  const handleFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target?.value),
     [onFocus, id],
   );
-  const _onClear = useCallback(
+  const handleClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
@@ -97,13 +90,13 @@ export default function BaseInputTemplate<
         value={inputValue}
         {...inputProps}
         list={schema.examples ? examplesId(id) : undefined}
-        onChange={onChangeOverride || _onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={onChangeOverride || handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {options.allowClearTextInputs && !readonly && !disabled && inputValue && (
-        <ClearButton registry={registry} onClick={_onClear} />
+        <ClearButton registry={registry} onClick={handleClear} />
       )}
       <SchemaExamples id={id} schema={schema} />
     </>

package/src/components/templates/ButtonTemplates/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 IconButton from './IconButton';