@rjsf/chakra-ui 6.6.0 → 6.6.2

package/src/RadioWidget/RadioWidget.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
 import { Stack } from '@chakra-ui/react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -8,10 +9,6 @@ import {
   getOptionValueFormat,
   labelValue,
   optionId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
@@ -36,12 +33,12 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
+  const handleChange = ({ target: { value: enumValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target: { value: enumValue } }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target: { value: enumValue } }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
   const selectValue = enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, null);
@@ -58,9 +55,9 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       {...chakraProps}
     >
       <RadioGroup
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         value={selectValue}
         name={htmlName || id}
         aria-describedby={ariaDescribedByIds(id)}
@@ -68,12 +65,12 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         <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 (
                 <Radio
                   value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
-                  key={index}
+                  key={String(option.value)}
                   id={optionId(id, index)}
                   disabled={disabled || itemDisabled || readonly}
                 >

package/src/RangeWidget/RangeWidget.tsx

@@ -1,14 +1,7 @@
-import { FocusEvent } from 'react';
-import { SliderValueChangeDetails } from '@chakra-ui/react';
-import {
-  ariaDescribedByIds,
-  FormContextType,
-  labelValue,
-  rangeSpec,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FocusEvent } from 'react';
+import type { SliderValueChangeDetails } from '@chakra-ui/react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue, rangeSpec } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
 import { Slider } from '../components/ui/slider';
@@ -28,10 +21,10 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   id,
   uiSchema,
 }: WidgetProps<T, S, F>) {
-  const _onChange = ({ value }: SliderValueChangeDetails) =>
-    onChange(value === undefined ? options.emptyValue : value[0]);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ value: newValue }: SliderValueChangeDetails) =>
+    onChange(newValue === undefined ? options.emptyValue : newValue[0]);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -43,9 +36,9 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         name={id}
         disabled={disabled || readonly}
         value={[value]}
-        onValueChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onValueChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
       />
     </Field>

package/src/SelectWidget/SelectWidget.tsx

@@ -1,19 +1,17 @@
-import { FocusEvent, useMemo, useRef } from 'react';
-import { createListCollection, SelectValueChangeDetails, Select as ChakraSelect } from '@chakra-ui/react';
+import type { FocusEvent } from 'react';
+import { useMemo, useRef } from 'react';
+import type { SelectValueChangeDetails } from '@chakra-ui/react';
+import { createListCollection, Select as ChakraSelect } from '@chakra-ui/react';
+import type { EnumOptionsType, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
-  EnumOptionsType,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
   labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
-import { OptionsOrGroups } from 'chakra-react-select';
+import type { OptionsOrGroups } from 'chakra-react-select';
 
 import { Field } from '../components/ui/field';
 import { SelectRoot, SelectTrigger, SelectValueText } from '../components/ui/select';
@@ -45,41 +43,40 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onMultiChange = ({ value }: SelectValueChangeDetails) => {
-    return onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  };
+  const handleMultiChange = ({ value: newValue }: SelectValueChangeDetails) =>
+    onChange(enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, emptyValue));
 
-  const _onSingleChange = ({ value }: SelectValueChangeDetails) => {
-    const selected = enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue);
+  const handleSingleChange = ({ value: newValue }: SelectValueChangeDetails) => {
+    const selected = enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, emptyValue);
     return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
   };
 
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const showPlaceholderOption = !multiple && schema.default === undefined;
   const displayEnumOptions = useMemo((): OptionsOrGroups<any, any> => {
-    let displayEnumOptions: OptionsOrGroups<any, any> = [];
+    let computedOptions: OptionsOrGroups<any, any> = [];
     if (Array.isArray(enumOptions)) {
-      displayEnumOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
-        const { value, label } = option;
+      computedOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
+        const { value: enumValue, label: enumLabel } = option;
         return {
-          label,
-          value: enumOptionValueEncoder(value, index, optionValueFormat),
-          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+          label: enumLabel,
+          value: enumOptionValueEncoder(enumValue, index, optionValueFormat),
+          disabled: Array.isArray(enumDisabled) && enumDisabled.includes(enumValue),
         };
       });
       if (showPlaceholderOption) {
-        (displayEnumOptions as any[]).unshift({ value: '', label: placeholder || '' });
+        (computedOptions as any[]).unshift({ value: '', label: placeholder || '' });
       }
     }
-    return displayEnumOptions;
+    return computedOptions;
   }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
 
-  const isMultiple = typeof multiple !== 'undefined' && multiple !== false && Boolean(enumOptions);
+  const isMultiple = typeof multiple !== 'undefined' && multiple && Boolean(enumOptions);
 
   // Chakra's SelectRoot always expects a string array, so flatten the helper's
   // single/multiple return shape and strip the empty-single case.
@@ -114,9 +111,9 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
         name={htmlName || id}
         multiple={isMultiple}
         closeOnSelect={!isMultiple}
-        onBlur={_onBlur}
-        onValueChange={isMultiple ? _onMultiChange : _onSingleChange}
-        onFocus={_onFocus}
+        onBlur={handleBlur}
+        onValueChange={isMultiple ? handleMultiChange : handleSingleChange}
+        onFocus={handleFocus}
         autoFocus={autofocus}
         value={formValue}
         aria-describedby={ariaDescribedByIds(id)}

package/src/SubmitButton/SubmitButton.tsx

@@ -1,5 +1,6 @@
 import { Box, Button } from '@chakra-ui/react';
-import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 
 export default function SubmitButton<
   T = any,

package/src/Templates/Templates.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 ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,13 +1,7 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
 import { Textarea } from '@chakra-ui/react';
-import {
-  ariaDescribedByIds,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
 import { getChakra } from '../utils';
@@ -34,10 +28,10 @@ export default function TextareaWidget<
   rawErrors,
   uiSchema,
 }: WidgetProps<T, S, F>) {
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -57,9 +51,9 @@ export default function TextareaWidget<
         value={value ?? ''}
         placeholder={placeholder}
         autoFocus={autofocus}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         rows={options.rows}
         aria-describedby={ariaDescribedByIds(id)}
       />

package/src/Theme/Theme.tsx

@@ -1,5 +1,5 @@
-import { ThemeProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ThemeProps } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTemplates } from '../Templates';
 import { generateWidgets } from '../Widgets';

package/src/TitleField/TitleField.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Heading, Separator, Spacer } from '@chakra-ui/react';
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
 
 export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,

package/src/UpDownWidget/UpDownWidget.tsx

@@ -1,13 +1,7 @@
-import { FocusEvent } from 'react';
-import { NumberInputValueChangeDetails } from '@chakra-ui/react';
-import {
-  ariaDescribedByIds,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { FocusEvent } from 'react';
+import type { NumberInputValueChangeDetails } from '@chakra-ui/react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
 
 import { Field } from '../components/ui/field';
 import { NumberInputRoot } from '../components/ui/number-input';
@@ -18,9 +12,9 @@ export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFS
 ) {
   const { id, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } = props;
 
-  const _onChange = ({ value }: NumberInputValueChangeDetails) => onChange(value);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
+  const handleChange = ({ value: newValue }: NumberInputValueChangeDetails) => onChange(newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
 
@@ -36,9 +30,9 @@ export default function UpDownWidget<T = any, S extends StrictRJSFSchema = RJSFS
     >
       <NumberInputRoot
         value={value}
-        onValueChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onValueChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
         id={id}
         name={id}

package/src/Widgets/Widgets.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/AltDateTimeWidget';
 import AltDateWidget from '../AltDateWidget/AltDateWidget';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,13 +1,6 @@
 import { Grid, GridItem, Input } from '@chakra-ui/react';
-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 { Field } from '../components/ui/field';
 

package/src/components/ui/alert.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
 import { Alert as ChakraAlert } from '@chakra-ui/react';
 
 import { CloseButton } from './close-button';
@@ -23,7 +24,7 @@ export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
   onClose?: () => void;
 }
 
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(props, ref) {
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
   const { title, children, closable, onClose, startElement, endElement, ...rest } = props;
   return (
     <ChakraAlert.Root ref={ref} {...rest}>

package/src/components/ui/checkbox.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import type { InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
 
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
@@ -16,7 +17,7 @@ export interface CheckboxProps extends ChakraCheckbox.RootProps {
  * @param {Ref<HTMLLabelElement>} [props.rootRef] - Ref for the root element of the checkbox.
  * @returns {JSX.Element} The rendered checkbox component.
  */
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   const { icon, children, inputProps, rootRef, ...rest } = props;
   return (
     <ChakraCheckbox.Root ref={rootRef} {...rest}>

package/src/components/ui/close-button.tsx

@@ -12,10 +12,8 @@ export type CloseButtonProps = ButtonProps;
  * @param {ReactNode} [props.children] - The content to display inside the button.
  * @returns {JSX.Element} The rendered close button component.
  */
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(function CloseButton(props, ref) {
-  return (
-    <ChakraIconButton variant='ghost' aria-label='Close' ref={ref} {...props}>
-      {props.children ?? <LuX />}
-    </ChakraIconButton>
-  );
-});
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((props, ref) => (
+  <ChakraIconButton variant='ghost' aria-label='Close' ref={ref} {...props}>
+    {props.children ?? <LuX />}
+  </ChakraIconButton>
+));

package/src/components/ui/field.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
 import { Field as ChakraField } from '@chakra-ui/react';
 
 export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
@@ -19,7 +20,7 @@ export interface FieldProps extends Omit<ChakraField.RootProps, 'label'> {
  * @param {ReactNode} [props.optionalText] - Text to indicate that the field is optional.
  * @returns {JSX.Element} The rendered field component.
  */
-export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
+export const Field = forwardRef<HTMLDivElement, FieldProps>((props, ref) => {
   const { label, children, helperText, errorText, optionalText, ...rest } = props;
   return (
     <ChakraField.Root ref={ref} {...rest}>

package/src/components/ui/number-input.tsx

@@ -10,7 +10,7 @@ export type NumberInputProps = ChakraNumberInput.RootProps;
  * @param {ReactNode} [props.children] - The content to display inside the number input.
  * @returns {JSX.Element} The rendered number input component.
  */
-export const NumberInputRoot = forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(props, ref) {
+export const NumberInputRoot = forwardRef<HTMLDivElement, NumberInputProps>((props, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {

package/src/components/ui/radio.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, InputHTMLAttributes, Ref } from 'react';
+import type { InputHTMLAttributes, Ref } from 'react';
+import { forwardRef } from 'react';
 import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react';
 
 export interface RadioProps extends ChakraRadioGroup.ItemProps {
@@ -14,7 +15,7 @@ export interface RadioProps extends ChakraRadioGroup.ItemProps {
  * @param {Ref<HTMLDivElement>} [props.rootRef] - Ref for the root element of the radio.
  * @returns {JSX.Element} The rendered radio component.
  */
-export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { children, inputProps, rootRef, ...rest } = props;
   return (
     <ChakraRadioGroup.Item ref={rootRef} {...rest}>

package/src/components/ui/select.tsx

@@ -1,9 +1,22 @@
-import { forwardRef, RefObject } from 'react';
+import type { RefObject } from 'react';
+import { forwardRef } from 'react';
 import type { CollectionItem } from '@chakra-ui/react';
 import { Select as ChakraSelect, Portal } from '@chakra-ui/react';
 
 import { CloseButton } from './close-button';
 
+/**
+ * SelectClearTrigger component that renders a clear button for the select component.
+ *
+ * @param props - The properties for the clear trigger component.
+ * @returns - The rendered select clear trigger component.
+ */
+const SelectClearTrigger = forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>((props, ref) => (
+  <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
+    <CloseButton size='xs' variant='plain' focusVisibleRing='inside' focusRingWidth='2px' pointerEvents='auto' />
+  </ChakraSelect.ClearTrigger>
+));
+
 interface SelectTriggerProps extends ChakraSelect.ControlProps {
   clearable?: boolean;
 }
@@ -16,7 +29,7 @@ interface SelectTriggerProps extends ChakraSelect.ControlProps {
  * @param {ReactNode} [props.children] - The content to display inside the trigger.
  * @returns {JSX.Element} The rendered select trigger component.
  */
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(props, ref) {
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>((props, ref) => {
   const { children, clearable, ...rest } = props;
   return (
     <ChakraSelect.Control {...rest}>
@@ -29,22 +42,6 @@ export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(f
   );
 });
 
-/**
- * SelectClearTrigger component that renders a clear button for the select component.
- *
- * @param {ChakraSelect.ClearTriggerProps} props - The properties for the clear trigger component.
- * @returns {JSX.Element} The rendered select clear trigger component.
- */
-const SelectClearTrigger = forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>(
-  function SelectClearTrigger(props, ref) {
-    return (
-      <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
-        <CloseButton size='xs' variant='plain' focusVisibleRing='inside' focusRingWidth='2px' pointerEvents='auto' />
-      </ChakraSelect.ClearTrigger>
-    );
-  },
-);
-
 interface SelectContentProps extends ChakraSelect.ContentProps {
   portalled?: boolean;
   portalRef?: RefObject<HTMLElement>;
@@ -58,7 +55,7 @@ interface SelectContentProps extends ChakraSelect.ContentProps {
  * @param {RefObject<HTMLElement>} [props.portalRef] - The ref for the portal container.
  * @returns {JSX.Element} The rendered select content component.
  */
-export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(props, ref) {
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => {
   const { portalled = true, portalRef, ...rest } = props;
   return (
     <Portal disabled={!portalled} container={portalRef}>
@@ -77,7 +74,7 @@ export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(func
  * @param {ReactNode} [props.children] - The content to display inside the item.
  * @returns {JSX.Element} The rendered select item component.
  */
-export const SelectItem = forwardRef<HTMLDivElement, ChakraSelect.ItemProps>(function SelectItem(props, ref) {
+export const SelectItem = forwardRef<HTMLDivElement, ChakraSelect.ItemProps>((props, ref) => {
   const { item, children, ...rest } = props;
   return (
     <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
@@ -99,7 +96,7 @@ interface SelectValueTextProps extends Omit<ChakraSelect.ValueTextProps, 'childr
  * @param {ReactNode} [props.placeholder] - The placeholder text to display when no items are selected.
  * @returns {JSX.Element} The rendered select value text component.
  */
-export const SelectValueText = forwardRef<HTMLSpanElement, SelectValueTextProps>(function SelectValueText(props, ref) {
+export const SelectValueText = forwardRef<HTMLSpanElement, SelectValueTextProps>((props, ref) => {
   const { children, ...rest } = props;
   return (
     <ChakraSelect.ValueText {...rest} ref={ref}>
@@ -130,20 +127,18 @@ export const SelectValueText = forwardRef<HTMLSpanElement, SelectValueTextProps>
  * @param {ReactNode} [props.children] - The content to display inside the select root.
  * @returns {JSX.Element} The rendered select root component.
  */
-export const SelectRoot = forwardRef<HTMLDivElement, ChakraSelect.RootProps>(function SelectRoot(props, ref) {
-  return (
-    <ChakraSelect.Root {...props} ref={ref} positioning={{ sameWidth: true, ...props.positioning }}>
-      {props.asChild ? (
-        props.children
-      ) : (
-        <>
-          <ChakraSelect.HiddenSelect />
-          {props.children}
-        </>
-      )}
-    </ChakraSelect.Root>
-  );
-}) as ChakraSelect.RootComponent;
+export const SelectRoot = forwardRef<HTMLDivElement, ChakraSelect.RootProps>((props, ref) => (
+  <ChakraSelect.Root {...props} ref={ref} positioning={{ sameWidth: true, ...props.positioning }}>
+    {props.asChild ? (
+      props.children
+    ) : (
+      <>
+        <ChakraSelect.HiddenSelect />
+        {props.children}
+      </>
+    )}
+  </ChakraSelect.Root>
+)) as ChakraSelect.RootComponent;
 
 interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
   label: React.ReactNode;
@@ -157,7 +152,7 @@ interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
  * @param {ReactNode} [props.children] - The content to display inside the item group.
  * @returns {JSX.Element} The rendered select item group component.
  */
-export const SelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(function SelectItemGroup(props, ref) {
+export const SelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>((props, ref) => {
   const { children, label, ...rest } = props;
   return (
     <ChakraSelect.ItemGroup {...rest} ref={ref}>