@rjsf/chakra-ui 6.6.0 → 6.6.2

package/lib/utils.d.ts

@@ -1,5 +1,5 @@
-import { Field as ChakraField } from '@chakra-ui/react';
-import { UiSchema } from '@rjsf/utils';
+import type { Field as ChakraField } from '@chakra-ui/react';
+import type { UiSchema } from '@rjsf/utils';
 export interface ChakraUiSchema extends Omit<UiSchema, 'ui:options'> {
     'ui:options'?: ChakraUiOptions;
 }

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAGvD,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC;AAQ1C,MAAM,UAAU,SAAS,CAAC,WAA2B,EAAE;IACrD,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAEpF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACvC;;;WAGG;QACH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;YACpD,OAAQ,WAAmB,CAAC,GAAG,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAGvD,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC;AAQ1C,MAAM,UAAU,SAAS,CAAC,WAA2B,EAAE;IACrD,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAEpF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACvC;;;WAGG;QACH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;YACpD,OAAQ,WAAmB,CAAC,GAAG,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -49,7 +49,7 @@
     "lint": "oxlint src test",
     "precommit": "lint-staged",
     "test": "vitest run",
-    "test:update": "vitest run --update-snapshots",
+    "test:update": "vitest run --update",
     "test:watch": "vitest",
     "type-check": "tsc --noEmit"
   },
@@ -65,8 +65,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=3.16.1",
-    "@rjsf/core": "^6.5.x",
-    "@rjsf/utils": "^6.5.x",
+    "@rjsf/core": "^6.6.x",
+    "@rjsf/utils": "^6.6.x",
     "chakra-react-select": ">=6",
     "react": ">=18"
   },
@@ -86,14 +86,13 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@chakra-ui/cli": "^3.35.0",
     "@chakra-ui/react": "^3.35.0",
     "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
-    "@rjsf/core": "6.6.0",
-    "@rjsf/snapshot-tests": "6.6.0",
-    "@rjsf/utils": "6.6.0",
-    "@rjsf/validator-ajv8": "6.6.0",
+    "@rjsf/core": "6.6.2",
+    "@rjsf/snapshot-tests": "6.6.2",
+    "@rjsf/utils": "6.6.2",
+    "@rjsf/validator-ajv8": "6.6.2",
     "chakra-react-select": "^6.1.3"
   },
   "dependencies": {

package/src/AddButton/AddButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@chakra-ui/react';
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import { PlusIcon } from 'lucide-react';
 
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({

package/src/AltDateTimeWidget/AltDateTimeWidget.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   time = true,

package/src/AltDateWidget/AltDateWidget.tsx

@@ -1,14 +1,6 @@
 import { Box, Button, FieldsetRoot } from '@chakra-ui/react';
-import {
-  DateElement,
-  DateElementProp,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  useAltDateWidgetProps,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { DateElementProp, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { DateElement, TranslatableString, useAltDateWidgetProps } from '@rjsf/utils';
 
 import { getChakra } from '../utils';
 

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,12 +1,6 @@
 import { Box, ButtonGroup, HStack } from '@chakra-ui/react';
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { ArrayFieldItemTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 export default function ArrayFieldItemTemplate<
   T = any,
@@ -22,7 +16,7 @@ export default function ArrayFieldItemTemplate<
   );
 
   return (
-    <HStack alignItems={'flex-end'} py={1}>
+    <HStack alignItems='flex-end' py={1}>
       <Box w='100%'>{children}</Box>
       {hasToolbar && (
         <Box>

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,13 +1,6 @@
 import { Box, Grid, GridItem } from '@chakra-ui/react';
-import {
-  getTemplate,
-  getUiOptions,
-  ArrayFieldTemplateProps,
-  StrictRJSFSchema,
-  RJSFSchema,
-  FormContextType,
-  buttonId,
-} from '@rjsf/utils';
+import type { ArrayFieldTemplateProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import { getTemplate, getUiOptions, buttonId } from '@rjsf/utils';
 
 export default function ArrayFieldTemplate<
   T = any,

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,16 +1,9 @@
-import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
 import { Input } from '@chakra-ui/react';
 import { SchemaExamples } from '@rjsf/core';
-import {
-  ariaDescribedByIds,
-  BaseInputTemplateProps,
-  examplesId,
-  labelValue,
-  FormContextType,
-  getInputProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, labelValue, getInputProps } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
 import { getChakra } from '../utils';
@@ -45,10 +38,10 @@ export default function BaseInputTemplate<
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   const { ClearButton } = registry.templates.ButtonTemplates;
 
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
   const onClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
@@ -74,9 +67,9 @@ export default function BaseInputTemplate<
         id={id}
         name={htmlName || id}
         value={value || value === 0 ? value : ''}
-        onChange={onChangeOverride || _onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={onChangeOverride || handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         autoFocus={autofocus}
         placeholder={placeholder}
         {...inputProps}

package/src/ChakraFrameProvider.tsx

@@ -25,12 +25,10 @@ const memoizedCreateCacheWithContainer = weakMemoize((container: HTMLElement) =>
 
 export const __createChakraFrameProvider =
   (props: any) =>
-  ({ document }: any) => {
-    return (
-      <div style={{ margin: 2 }}>
-        <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
-          <ChakraProvider value={defaultSystem}>{props.children}</ChakraProvider>
-        </CacheProvider>
-      </div>
-    );
-  };
+  ({ document }: any) => (
+    <div style={{ margin: 2 }}>
+      <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
+        <ChakraProvider value={defaultSystem}>{props.children}</ChakraProvider>
+      </CacheProvider>
+    </div>
+  );

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,15 +1,13 @@
-import { FocusEvent } from 'react';
-import { CheckboxCheckedChangeDetails, Text } from '@chakra-ui/react';
+import type { FocusEvent } from 'react';
+import type { CheckboxCheckedChangeDetails } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
+import type { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   descriptionId,
   getTemplate,
   labelValue,
-  WidgetProps,
   schemaRequiresTrueValue,
-  StrictRJSFSchema,
-  RJSFSchema,
-  FormContextType,
   getUiOptions,
 } from '@rjsf/utils';
 
@@ -51,9 +49,9 @@ export default function CheckboxWidget<
   const isCheckbox = uiOptions.widget === 'checkbox';
   const description = isCheckbox ? undefined : (options.description ?? schema.description);
 
-  const _onChange = ({ checked }: CheckboxCheckedChangeDetails) => onChange(checked);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.checked);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.checked);
+  const handleChange = ({ checked }: CheckboxCheckedChangeDetails) => onChange(checked);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.checked);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.checked);
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -73,9 +71,9 @@ export default function CheckboxWidget<
         name={htmlName || id}
         checked={typeof value === 'undefined' ? false : value}
         disabled={disabled || readonly}
-        onCheckedChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onCheckedChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
       >
         {labelValue(<Text>{label}</Text>, hideLabel || !label)}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,16 +1,13 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
 import { CheckboxGroup, FieldsetRoot, Stack, Text, FieldsetLegend } from '@chakra-ui/react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
   optionId,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
   labelValue,
 } from '@rjsf/utils';
 
@@ -41,9 +38,9 @@ export default function CheckboxesWidget<
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement | any>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
@@ -71,16 +68,16 @@ export default function CheckboxesWidget<
         <Stack direction={row ? 'row' : 'column'}>
           {Array.isArray(enumOptions) &&
             enumOptions.map((option, index) => {
-              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
               return (
                 <Checkbox
-                  key={index}
+                  key={String(option.value)}
                   id={optionId(id, index)}
                   name={htmlName || id}
                   value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   disabled={disabled || itemDisabled || readonly}
-                  onBlur={_onBlur}
-                  onFocus={_onFocus}
+                  onBlur={handleBlur}
+                  onFocus={handleFocus}
                 >
                   {option.label && <Text>{option.label}</Text>}
                 </Checkbox>

package/src/DescriptionField/DescriptionField.tsx

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

package/src/ErrorList/ErrorList.tsx

@@ -1,5 +1,6 @@
 import { ListItem, ListRoot } from '@chakra-ui/react';
-import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 
 import { Alert } from '../components/ui/alert';
 
@@ -12,6 +13,7 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
     <Alert status='error' title={translateString(TranslatableString.ErrorsLabel)} mb={3}>
       <ListRoot listStylePosition='inside'>
         {errors.map((error, i) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <ListItem key={i}>{error.stack}</ListItem>
         ))}
       </ListRoot>

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,5 +1,6 @@
 import { Fieldset } from '@chakra-ui/react';
-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
  *
@@ -16,11 +17,10 @@ export default function FieldErrorTemplate<
   }
   const id = errorId(fieldPathId);
 
-  return errors.map((error, i: number) => {
-    return (
-      <Fieldset.ErrorText mt={0} key={i} id={id}>
-        {error}
-      </Fieldset.ErrorText>
-    );
-  });
+  return errors.map((error, i: number) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    <Fieldset.ErrorText mt={0} key={i} id={id}>
+      {error}
+    </Fieldset.ErrorText>
+  ));
 }

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@chakra-ui/react';
 import { RichHelp } from '@rjsf/core';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId } from '@rjsf/utils';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,12 +1,6 @@
 import { Fieldset } from '@chakra-ui/react';
-import {
-  FieldTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { FieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 export default function FieldTemplate<
   T = any,

package/src/Form/Form.tsx

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

package/src/GridTemplate/GridTemplate.tsx

@@ -1,5 +1,5 @@
 import { Grid, GridItem } from '@chakra-ui/react';
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 
 /** Renders a `GridTemplate` for chakra-ui, which is expecting the column sizing information coming in via the
  * extra props provided by the caller, which are spread directly on the `Grid`/`GridItem`.

package/src/IconButton/ChakraIconButton.tsx

@@ -1,6 +1,12 @@
 import { memo } from 'react';
-import { IconButton, IconButtonProps } from '@chakra-ui/react';
-import { FormContextType, IconButtonProps as RJSFIconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { IconButtonProps } from '@chakra-ui/react';
+import { IconButton } from '@chakra-ui/react';
+import type {
+  FormContextType,
+  IconButtonProps as RJSFIconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 export type ChakraIconButtonProps<
   T = any,
@@ -14,7 +20,7 @@ function ChakraIconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const { icon, iconType, uiSchema, registry, ...otherProps } = props;
 
   return (
-    <IconButton aria-label={props.title!} {...otherProps}>
+    <IconButton aria-label={props.title} {...otherProps}>
       {icon}
     </IconButton>
   );

package/src/IconButton/IconButton.tsx

@@ -1,9 +1,12 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { memo } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import { ArrowUpIcon, ArrowDownIcon, CopyIcon, DeleteIcon, X } from 'lucide-react';
 
-import ChakraIconButton, { ChakraIconButtonProps } from './ChakraIconButton';
+import type { ChakraIconButtonProps } from './ChakraIconButton';
+import ChakraIconButton from './ChakraIconButton';
 
-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: ChakraIconButtonProps<T, S, F>,
 ) {
   const {
@@ -13,8 +16,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     <ChakraIconButton<T, S, F> title={translateString(TranslatableString.CopyButton)} {...props} icon={<CopyIcon />} />
   );
 }
+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: ChakraIconButtonProps<T, S, F>,
 ) {
   const {
@@ -28,8 +32,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
     />
   );
 }
+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: ChakraIconButtonProps<T, S, F>,
 ) {
   const {
@@ -43,8 +48,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+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: ChakraIconButtonProps<T, S, F>,
 ) {
   const {
@@ -58,8 +64,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const RemoveButton = memo(RemoveButtonFn) as typeof RemoveButtonFn;
 
-export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ClearButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ChakraIconButtonProps<T, S, F>,
 ) {
   const {
@@ -67,3 +74,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <ChakraIconButton<T, S, F> title={translateString(TranslatableString.ClearButton)} {...props} icon={<X />} />;
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,5 +1,5 @@
 import { Box, Card } from '@chakra-ui/react';
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function MultiSchemaFieldTemplate<
   T = any,

package/src/NativeSelectWidget/NativeSelectWidget.tsx

@@ -1,17 +1,9 @@
-import { ChangeEvent, FocusEvent, useMemo } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import { useMemo } from 'react';
 import { createListCollection, NativeSelect } from '@chakra-ui/react';
-import {
-  ariaDescribedByIds,
-  EnumOptionsType,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
-import { OptionsOrGroups } from 'chakra-react-select';
+import type { EnumOptionsType, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue } from '@rjsf/utils';
+import type { OptionsOrGroups } from 'chakra-react-select';
 
 import { Field } from '../components/ui/field';
 import { getChakra } from '../utils';
@@ -52,14 +44,13 @@ export default function NativeSelectWidget<
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
 
-  const _onChange = ({ target }: ChangeEvent<HTMLSelectElement>) => {
-    return onChange(enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
-  };
+  const handleChange = ({ target }: ChangeEvent<HTMLSelectElement>) =>
+    onChange(enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
-  const _onBlur = ({ target }: FocusEvent<HTMLSelectElement>) =>
+  const handleBlur = ({ target }: FocusEvent<HTMLSelectElement>) =>
     onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
-  const _onFocus = ({ target }: FocusEvent<HTMLSelectElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLSelectElement>) =>
     onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
 
   const showPlaceholderOption = !multiple && schema.default === undefined;
@@ -67,20 +58,20 @@ export default function NativeSelectWidget<
     valueLabelMap: Record<string | number, string>;
     displayEnumOptions: OptionsOrGroups<any, any>;
   } => {
-    const valueLabelMap: Record<string | number, string> = {};
-    let displayEnumOptions: OptionsOrGroups<any, any> = [];
+    const computedValueLabelMap: Record<string | number, string> = {};
+    let computedOptions: OptionsOrGroups<any, any> = [];
     if (Array.isArray(enumOptions)) {
-      displayEnumOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
-        const { value, label } = option;
-        valueLabelMap[index] = label || String(value);
+      computedOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
+        const { value: enumValue, label: enumLabel } = option;
+        computedValueLabelMap[index] = enumLabel || String(enumValue);
         return {
-          label,
+          label: enumLabel,
           value: String(index),
-          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+          disabled: Array.isArray(enumDisabled) && enumDisabled.includes(enumValue),
         };
       });
     }
-    return { valueLabelMap: valueLabelMap, displayEnumOptions: displayEnumOptions };
+    return { valueLabelMap: computedValueLabelMap, displayEnumOptions: computedOptions };
   }, [enumDisabled, enumOptions]);
 
   const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, false);
@@ -116,9 +107,9 @@ export default function NativeSelectWidget<
       <NativeSelect.Root>
         <NativeSelect.Field
           id={id}
-          onBlur={_onBlur}
-          onChange={_onChange}
-          onFocus={_onFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
           autoFocus={autofocus}
           value={formValue}
           aria-describedby={ariaDescribedByIds(id)}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,16 +1,6 @@
 import { Grid, GridItem } from '@chakra-ui/react';
-import {
-  buttonId,
-  canExpand,
-  descriptionId,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  ObjectFieldTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  titleId,
-} from '@rjsf/utils';
+import type { FormContextType, ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { buttonId, canExpand, descriptionId, getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 
 export default function ObjectFieldTemplate<
   T = any,
@@ -69,12 +59,8 @@ export default function ObjectFieldTemplate<
       )}
       <Grid gap={description ? 2 : 4} mb={4}>
         {!showOptionalDataControlInTitle ? <GridItem>{optionalDataControl}</GridItem> : undefined}
-        {properties.map((element, index) =>
-          element.hidden ? (
-            element.content
-          ) : (
-            <GridItem key={`${fieldPathId.$id}-${element.name}-${index}`}>{element.content}</GridItem>
-          ),
+        {properties.map((element) =>
+          element.hidden ? element.content : <GridItem key={element.name}>{element.content}</GridItem>,
         )}
         {canExpand<T, S, F>(schema, uiSchema, formData) && (
           <GridItem justifySelf='flex-end'>

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

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