@rjsf/core 6.6.1 → 6.6.2

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.
@@ -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`.
  *

package/src/components/widgets/RadioWidget.tsx

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

package/src/components/widgets/RangeWidget.tsx

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

package/src/components/widgets/RatingWidget.tsx

@@ -1,5 +1,6 @@
-import { FocusEvent, useCallback } from 'react';
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FocusEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 /** The `RatingWidget` component renders a star or heart rating input
  *
@@ -80,51 +81,51 @@ export default function RatingWidget<
   };
 
   return (
-    <>
-      <div
-        className='rating-widget'
-        style={{
-          display: 'inline-flex',
-          fontSize: '1.5rem',
-          cursor: disabled || readonly ? 'default' : 'pointer',
-        }}
-      >
-        {[...Array(numStars)].map((_, index) => {
-          const starValue = min + index;
-          const isFilled = starValue <= value;
+    <div
+      className='rating-widget'
+      style={{
+        display: 'inline-flex',
+        fontSize: '1.5rem',
+        cursor: disabled || readonly ? 'default' : 'pointer',
+      }}
+    >
+      {[...Array(numStars)].map((_, index) => {
+        const starValue = min + index;
+        const isFilled = starValue <= value;
 
-          return (
-            <span
-              key={index}
-              onClick={() => handleStarClick(starValue)}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              data-value={starValue}
-              tabIndex={disabled || readonly ? -1 : 0}
-              role='radio'
-              aria-checked={starValue === value}
-              aria-label={`${starValue} ${shape === 'heart' ? 'heart' : 'star'}${starValue === 1 ? '' : 's'}`}
-              style={{
-                color: isFilled ? '#FFD700' : '#ccc',
-                padding: '0 0.2rem',
-                transition: 'color 0.2s',
-                userSelect: 'none',
-              }}
-            >
-              {getSymbol(isFilled)}
-            </span>
-          );
-        })}
-        <input
-          type='hidden'
-          id={id}
-          name={htmlName || id}
-          value={value || ''}
-          required={required}
-          disabled={disabled || readonly}
-          aria-hidden='true'
-        />
-      </div>
-    </>
+        return (
+          <span
+            // oxlint-disable-next-line react/no-array-index-key
+            key={index}
+            onClick={() => handleStarClick(starValue)}
+            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && handleStarClick(starValue)}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            data-value={starValue}
+            tabIndex={disabled || readonly ? -1 : 0}
+            role='radio'
+            aria-checked={starValue === value}
+            aria-label={`${starValue} ${shape === 'heart' ? 'heart' : 'star'}${starValue === 1 ? '' : 's'}`}
+            style={{
+              color: isFilled ? '#FFD700' : '#ccc',
+              padding: '0 0.2rem',
+              transition: 'color 0.2s',
+              userSelect: 'none',
+            }}
+          >
+            {getSymbol(isFilled)}
+          </span>
+        );
+      })}
+      <input
+        type='hidden'
+        id={id}
+        name={htmlName || id}
+        value={value || ''}
+        required={required}
+        disabled={disabled || readonly}
+        aria-hidden='true'
+      />
+    </div>
   );
 }

package/src/components/widgets/SelectWidget.tsx

@@ -1,14 +1,12 @@
-import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent, SyntheticEvent } from 'react';
+import { useCallback } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
@@ -74,11 +72,11 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   const showPlaceholderOption = !multiple && schema.default === undefined;
 
   return (
+    // oxlint-disable-next-line jsx-a11y/no-autofocus
     <select
       id={id}
       name={htmlName || id}
       multiple={multiple}
-      role='combobox'
       className='form-control'
       value={selectValue}
       required={required}
@@ -91,11 +89,15 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
     >
       {showPlaceholderOption && <option value=''>{placeholder}</option>}
       {Array.isArray(enumOptions) &&
-        enumOptions.map(({ value, label }, i) => {
-          const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
+        enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
+          const isDisabled = enumDisabled && enumDisabled.includes(enumValue);
           return (
-            <option key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
-              {label}
+            <option
+              key={String(enumValue)}
+              value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
+              disabled={isDisabled}
+            >
+              {enumLabel}
             </option>
           );
         })}

package/src/components/widgets/TextWidget.tsx

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

package/src/components/widgets/TextareaWidget.tsx

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

package/src/components/widgets/TimeWidget.tsx

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

package/src/components/widgets/URLWidget.tsx

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

package/src/components/widgets/UpDownWidget.tsx

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

package/src/components/widgets/index.ts

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

package/src/getDefaultRegistry.ts

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

package/src/getTestRegistry.tsx

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

package/src/index.ts

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

package/src/withTheme.tsx

@@ -1,7 +1,9 @@
-import { ComponentType, ForwardedRef, forwardRef } from 'react';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
-import Form, { FormProps } from './components/Form';
+import type { FormProps } from './components/Form';
+import Form from './components/Form';
 
 /** The properties for the `withTheme` function, essentially a subset of properties from the `FormProps` that can be
  * overridden while creating a theme
@@ -17,15 +19,18 @@ export default function withTheme<T = any, S extends StrictRJSFSchema = RJSFSche
 ): ComponentType<FormProps<T, S, F>> {
   // @ts-expect-error TS2322 because the latest types complain about LegacyRef's string form not working with Form
   return forwardRef<Form<T, S, F>, FormProps<T, S, F>>(
-    ({ fields, widgets, templates, ...directProps }: FormProps<T, S, F>, ref: ForwardedRef<Form<T, S, F>>) => {
-      fields = { ...themeProps?.fields, ...fields };
-      widgets = { ...themeProps?.widgets, ...widgets };
-      templates = {
+    (
+      { fields: propFields, widgets: propWidgets, templates: propTemplates, ...directProps }: FormProps<T, S, F>,
+      ref: ForwardedRef<Form<T, S, F>>,
+    ) => {
+      const fields = { ...themeProps?.fields, ...propFields };
+      const widgets = { ...themeProps?.widgets, ...propWidgets };
+      const templates = {
         ...themeProps?.templates,
-        ...templates,
+        ...propTemplates,
         ButtonTemplates: {
           ...themeProps?.templates?.ButtonTemplates,
-          ...templates?.ButtonTemplates,
+          ...propTemplates?.ButtonTemplates,
         },
       };