@snack-uikit/fields 0.16.0 → 0.16.1-preview-cde51e4b.0

package/README.md

@@ -340,6 +340,7 @@ const [isOpen, setIsOpen] = useState(false);
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
+| removeByBackspace | `boolean` | - |  |
 ## FieldStepper
 ### Props
 | name | type | default value | description |

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -2,6 +2,8 @@
 export declare const FieldSelectMultiple: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
     loading?: boolean | undefined;
+} & {
+    removeByBackspace?: boolean | undefined;
 } & Omit<import("@snack-uikit/list").SelectionMultipleState, "mode"> & Omit<{
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -25,7 +25,7 @@ import styles from './styles.module.css';
 import { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
 const BASE_MIN_WIDTH = 4;
 export const FieldSelectMultiple = forwardRef((_a, ref) => {
-    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, loading, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, validationState = 'default', footer, search, autocomplete = false, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "loading", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "validationState", "footer", "search", "autocomplete", "prefixIcon", "error"]);
+    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, loading, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, validationState = 'default', footer, search, autocomplete = false, prefixIcon, error, removeByBackspace = false } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "loading", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "validationState", "footer", "search", "autocomplete", "prefixIcon", "error", "removeByBackspace"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -50,7 +50,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
             });
         }
     }, [options, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String(selectedOption !== null && selectedOption !== void 0 ? selectedOption : '') }));
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '' }));
     const onClear = () => {
         var _a;
         setValue(undefined);
@@ -62,7 +62,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && Boolean(value),
+        showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
         showCopyButton: false,
         inputRef: localRef,
         onClear,
@@ -74,7 +74,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     });
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown) => (e) => {
-        if (e.code === 'Backspace' && inputValue === '') {
+        if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
             if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) && !selectedOption.slice(-1)[0].disabled) {
                 handleItemDelete(selectedOption.pop())();
             }
@@ -103,7 +103,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     };
     const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    const result = autocomplete || !searchable || prevInputValue.current !== inputValue ? items : fuzzySearch(inputValue);
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), { error: error, required: required, readonly: readonly, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, hint: hint, disabled: disabled, showHintIcon: showHintIcon, size: size, validationState: validationState, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', placement: 'bottom', "data-test-id": 'field-select__list', items: result, triggerElemRef: localRef, scroll: true, marker: true, footer: footer, selection: {
                 mode: 'multiple',
                 value: value,
@@ -111,7 +111,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
             }, size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
                 return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedOption &&
-                                        selectedOption.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.option), onDelete: !option.disabled && !disabled ? handleItemDelete(option) : undefined }, option.value))), _jsx("div", { className: styles.inputWrapper, style: {
+                                        selectedOption.map(option => (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: String(option.option), onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.value))), _jsx("div", { className: styles.inputWrapper, style: {
                                             minWidth: value
                                                 ? Math.min((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : BASE_MIN_WIDTH, (_d = (_c = inputPlugRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : BASE_MIN_WIDTH)
                                                 : '100%',

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, useFuzzySearch } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -22,7 +22,7 @@ import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.css';
 import { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
 export const FieldSelectSingle = forwardRef((_a, ref) => {
-    var _b;
+    var _b, _c;
     var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, loading, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, validationState = 'default', footer, search, autocomplete = false, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "loading", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "validationState", "footer", "search", "autocomplete", "prefixIcon", "error"]);
     const localRef = useRef(null);
     const [open, setOpen] = useState(false);
@@ -33,16 +33,14 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     });
     const items = useMemo(() => transformOptionsToItems(options), [options]);
     const selectedOption = useMemo(() => extractSelectedOptions(options, value), [options, value]);
-    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String(selectedOption !== null && selectedOption !== void 0 ? selectedOption : '') }));
-    useEffect(() => {
-        var _a;
-        !open && onInputValueChange(String((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _a !== void 0 ? _a : ''));
-    }, [onInputValueChange, open, selectedOption]);
-    useEffect(() => {
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : '') }));
+    const handleBlur = (e) => {
         var _a, _b;
-        onInputValueChange(String((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _a !== void 0 ? _a : ''));
-        prevInputValue.current = String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : '');
-    }, [prevInputValue, onInputValueChange, selectedOption]);
+        if (!open && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== inputValue) {
+            onInputValueChange((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _a !== void 0 ? _a : '');
+        }
+        (_b = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _b === void 0 ? void 0 : _b.call(rest, e);
+    };
     const onClear = () => {
         var _a;
         setValue('');
@@ -54,11 +52,11 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
-        showClearButton: showClearButton && Boolean(value),
+        showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
         showCopyButton,
         inputRef: localRef,
         onClear,
-        valueToCopy: String((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _b !== void 0 ? _b : ''),
+        valueToCopy: String((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.option) !== null && _c !== void 0 ? _c : ''),
     });
     const commonHandleOnKeyDown = useHandleOnKeyDown({
         inputKeyDownNavigationHandler,
@@ -72,9 +70,12 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         commonHandleOnKeyDown(onKeyDown)(e);
     };
     const handleSelectionChange = (newValue) => {
-        var _a;
+        var _a, _b, _c;
         setValue(newValue);
-        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        const selectedValue = (_b = (_a = extractSelectedOptions(options, newValue)) === null || _a === void 0 ? void 0 : _a.option) !== null && _b !== void 0 ? _b : '';
+        onInputValueChange(selectedValue);
+        prevInputValue.current = selectedValue;
+        (_c = localRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         if (newValue) {
             setOpen(false);
         }
@@ -85,10 +86,10 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         }
     };
     const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
     return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), { error: error, required: required, readonly: readonly, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, hint: hint, disabled: disabled, showHintIcon: showHintIcon, size: size, validationState: validationState, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', placement: 'bottom', "data-test-id": 'field-select__list', items: result, triggerElemRef: localRef, scroll: true, marker: true, footer: footer, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: inputValue, readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown) }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) }) })));
+            }, size: size, open: open, onOpenChange: handleOpenChange, loading: loading, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? onInputValueChange : undefined, value: inputValue, readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) }) })));
 });

package/dist/components/FieldSelect/types.d.ts

@@ -50,7 +50,9 @@ type FiledSelectCommonProps = WithSupportProps<{
     autocomplete?: boolean;
 }>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
-export type FieldSelectMultipleProps = FieldSelectPrivateProps & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
+    removeByBackspace?: boolean;
+} & Omit<SelectionMultipleState, 'mode'> & Omit<FiledSelectCommonProps, 'showCopyButton'>;
 export type FieldSelectProps = (FieldSelectSingleProps & {
     selection?: 'single';
 }) | (FieldSelectMultipleProps & {

package/dist/hooks/useValueControl.js

@@ -1,6 +1,6 @@
 import { useUncontrolledProp } from 'uncontrollable';
 export function useValueControl({ value, onChange, defaultValue }) {
-    return useUncontrolledProp(value, value !== null && value !== void 0 ? value : defaultValue, (newValue) => {
+    return useUncontrolledProp(value, defaultValue, (newValue) => {
         const newState = typeof newValue === 'function' ? newValue(value) : newValue;
         onChange === null || onChange === void 0 ? void 0 : onChange(newState);
     });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.16.0",
+  "version": "0.16.1-preview-cde51e4b.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "eca9622fe5915bb18e60c4eb7a195ebc04f19f9c"
+  "gitHead": "c292f662f2a75b1c9dd814f64b9ac9887f040726"
 }

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -46,6 +46,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       autocomplete = false,
       prefixIcon,
       error,
+      removeByBackspace = false,
       ...rest
     },
     ref,
@@ -82,7 +83,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: String(selectedOption ?? ''),
+      defaultValue: '',
     });
 
     const onClear = () => {
@@ -98,7 +99,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && Boolean(value),
+      showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
       showCopyButton: false,
       inputRef: localRef,
       onClear,
@@ -112,7 +113,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.code === 'Backspace' && inputValue === '') {
+      if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
         if (selectedOption?.length && !selectedOption.slice(-1)[0].disabled) {
           handleItemDelete(selectedOption.pop())();
         }
@@ -146,7 +147,8 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     };
 
     const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    const result =
+      autocomplete || !searchable || prevInputValue.current !== inputValue ? items : fuzzySearch(inputValue);
 
     return (
       <FieldDecorator
@@ -204,7 +206,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
                         tabIndex={-1}
                         label={String(option.option)}
                         key={option.value}
-                        onDelete={!option.disabled && !disabled ? handleItemDelete(option) : undefined}
+                        onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
                       />
                     ))}
 

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef, useState } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
@@ -60,18 +60,16 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: String(selectedOption ?? ''),
+      defaultValue: String(selectedOption?.option ?? ''),
     });
 
-    useEffect(() => {
-      !open && onInputValueChange(String(selectedOption?.option ?? ''));
-    }, [onInputValueChange, open, selectedOption]);
-
-    useEffect(() => {
-      onInputValueChange(String(selectedOption?.option ?? ''));
+    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+      if (!open && selectedOption?.option !== inputValue) {
+        onInputValueChange(selectedOption?.option ?? '');
+      }
 
-      prevInputValue.current = String(selectedOption?.option ?? '');
-    }, [prevInputValue, onInputValueChange, selectedOption]);
+      rest?.onBlur?.(e);
+    };
 
     const onClear = () => {
       setValue('');
@@ -86,7 +84,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && Boolean(value),
+      showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
       showCopyButton,
       inputRef: localRef,
       onClear,
@@ -109,6 +107,9 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
     const handleSelectionChange = (newValue?: SelectionSingleValueType) => {
       setValue(newValue);
+      const selectedValue = extractSelectedOptions(options, newValue)?.option ?? '';
+      onInputValueChange(selectedValue);
+      prevInputValue.current = selectedValue;
       localRef.current?.focus();
 
       if (newValue) {
@@ -123,7 +124,8 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     };
 
     const fuzzySearch = useFuzzySearch(items);
-    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
+    const result =
+      autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
 
     return (
       <FieldDecorator
@@ -184,6 +186,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
                 readonly={!searchable || readonly}
                 data-test-id='field-select__input'
                 onKeyDown={handleOnKeyDown(onKeyDown)}
+                onBlur={handleBlur}
               />
 
               <div className={styles.postfix}>

package/src/components/FieldSelect/types.ts

@@ -85,8 +85,10 @@ export type FieldSelectSingleProps = FieldSelectPrivateProps &
   WrapperProps &
   FiledSelectCommonProps;
 
-export type FieldSelectMultipleProps = FieldSelectPrivateProps &
-  Omit<SelectionMultipleState, 'mode'> &
+export type FieldSelectMultipleProps = FieldSelectPrivateProps & { removeByBackspace?: boolean } & Omit<
+    SelectionMultipleState,
+    'mode'
+  > &
   Omit<FiledSelectCommonProps, 'showCopyButton'>;
 
 export type FieldSelectProps =

package/src/hooks/useValueControl.ts

@@ -7,7 +7,7 @@ type UseValueControl<TValue> = {
 };
 
 export function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>) {
-  return useUncontrolledProp<TValue>(value, value ?? defaultValue, (newValue: TValue) => {
+  return useUncontrolledProp<TValue>(value, defaultValue, (newValue: TValue) => {
     const newState = typeof newValue === 'function' ? newValue(value) : newValue;
 
     onChange?.(newState);