@snack-uikit/fields 0.23.8 → 0.23.9

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.23.9 (2024-08-12)
+
+
+### Bug Fixes
+
+* **FF-0000:** select disabled error validation state ([c64c9e9](https://github.com/cloud-ru-tech/snack-uikit/commit/c64c9e9da6f48d2e7e28a54083b9dd4dfa44ed10))
+
+
+
+
+
 ## 0.23.8 (2024-08-07)
 
 ### Only dependencies have been changed

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -31,9 +31,9 @@ const defaultSelectedOptionFormatter = item =>
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
-export const FieldSelectMultiple = forwardRef((_a, ref) => {
-    var _b;
-    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+export const FieldSelectMultiple = forwardRef((props, ref) => {
+    var _a;
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -117,7 +117,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const fuzzySearch = useFuzzySearch(items);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, trigger: 'click', selection: {
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, triggerElemRef: localRef, trigger: 'click', selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: value => {
@@ -128,7 +128,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                         updateInputValue();
                     }
                 },
-            }, dataFiltered: (_b = rest.dataFiltered) !== null && _b !== void 0 ? _b : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
+            }, dataFiltered: (_a = rest.dataFiltered) !== null && _a !== void 0 ? _a : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
                 return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: fieldValidationState, 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: [selectedItems &&
                                         selectedItems.map(option => {

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -29,9 +29,9 @@ const defaultSelectedOptionFormatter = item =>
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
-export const FieldSelectSingle = forwardRef((_a, ref) => {
-    var _b;
-    var { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+export const FieldSelectSingle = forwardRef((props, ref) => {
+    var _a;
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -43,7 +43,7 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        defaultValue: (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _b !== void 0 ? _b : '', selectedOptionFormatter }));
+        defaultValue: (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _a !== void 0 ? _a : '', selectedOptionFormatter }));
     const prevSelectedItem = useRef(selectedItem);
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
@@ -124,7 +124,7 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         ? items
         : fuzzySearch(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: fieldValidationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.23.8",
+  "version": "0.23.9",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "cd3b85a6cd111a1b9487d310b2eb5d5a85374841"
+  "gitHead": "14c15e506968994bb934ef059e62c49b6fd065e4"
 }

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -25,247 +25,239 @@ const defaultSelectedOptionFormatter: SelectedOptionFormatter = item =>
   // @ts-expect-error
   item?.content.option || '';
 
-export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMultipleProps>(
-  (
-    {
-      id,
-      name,
-      placeholder,
-      size = 's',
-      options,
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-      disabled = false,
-      readonly = false,
-      searchable = true,
-      showClearButton = true,
-      onKeyDown: onInputKeyDownProp,
-      validationState = 'default',
-      search,
-      autocomplete = false,
-      prefixIcon,
-      removeByBackspace = false,
-      addOptionByEnter = false,
-      open: openProp,
-      onOpenChange,
-      selectedOptionFormatter = defaultSelectedOptionFormatter,
-      ...rest
-    },
-    ref,
-  ) => {
-    const localRef = useRef<HTMLInputElement>(null);
-    const inputPlugRef = useRef<HTMLSpanElement>(null);
-    const contentRef = useRef<HTMLDivElement>(null);
+export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMultipleProps>((props, ref) => {
+  const {
+    id,
+    name,
+    placeholder,
+    size = 's',
+    options,
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+    disabled = false,
+    readonly = false,
+    searchable = true,
+    showClearButton = true,
+    onKeyDown: onInputKeyDownProp,
+    validationState = 'default',
+    search,
+    autocomplete = false,
+    prefixIcon,
+    removeByBackspace = false,
+    addOptionByEnter = false,
+    open: openProp,
+    onOpenChange,
+    selectedOptionFormatter = defaultSelectedOptionFormatter,
+    ...rest
+  } = props;
+  const localRef = useRef<HTMLInputElement>(null);
+  const inputPlugRef = useRef<HTMLSpanElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
-    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
 
-    const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-    });
+  const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
 
-    const [{ selectedItems, items = [] }, setItems] = useState<{
-      selectedItems?: ItemWithId[];
-      items: ItemProps[];
-    }>(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
+  const [{ selectedItems, items = [] }, setItems] = useState<{
+    selectedItems?: ItemWithId[];
+    items: ItemProps[];
+  }>(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
 
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
-      ...search,
-      defaultValue: '',
-      selectedOptionFormatter,
-    });
+  const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
+    ...search,
+    defaultValue: '',
+    selectedOptionFormatter,
+  });
 
-    useLayoutEffect(() => {
-      setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
-    }, [options, value]);
+  useLayoutEffect(() => {
+    setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
+  }, [options, value]);
 
-    const onClear = () => {
-      setValue(selectedItems?.filter(item => item.disabled).map(item => item.id));
-      localRef.current?.focus();
+  const onClear = () => {
+    setValue(selectedItems?.filter(item => item.disabled).map(item => item.id));
+    localRef.current?.focus();
 
-      if (rest.required) {
-        setOpen(true);
-      }
-    };
+    if (rest.required) {
+      setOpen(true);
+    }
+  };
 
-    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+  const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
 
-    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
-      readonly,
-      size,
-      showClearButton:
-        showClearButton && !disabled && !readonly && Boolean(selectedItems?.find(item => !item.disabled)),
-      showCopyButton: false,
-      inputRef: localRef,
-      onClear,
-    });
+  const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+    readonly,
+    size,
+    showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems?.find(item => !item.disabled)),
+    showCopyButton: false,
+    inputRef: localRef,
+    onClear,
+  });
 
-    const commonHandleOnKeyDown = useHandleOnKeyDown({
-      inputKeyDownNavigationHandler,
-      onInputKeyDownProp,
-      setOpen,
-    });
+  const commonHandleOnKeyDown = useHandleOnKeyDown({
+    inputKeyDownNavigationHandler,
+    onInputKeyDownProp,
+    setOpen,
+  });
 
-    const handleItemDelete = useHandleDeleteItem(setValue);
-    const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
-      if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
-        if (selectedItems?.length && !selectedItems.slice(-1)[0].disabled) {
-          handleItemDelete(selectedItems.pop() as BaseItemProps)();
-        }
+  const handleItemDelete = useHandleDeleteItem(setValue);
+  const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
+    if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
+      if (selectedItems?.length && !selectedItems.slice(-1)[0].disabled) {
+        handleItemDelete(selectedItems.pop() as BaseItemProps)();
       }
+    }
 
-      if (e.code === 'Enter') {
-        e.stopPropagation();
-        e.preventDefault();
-      }
+    if (e.code === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+    }
 
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        if (!(value ?? []).includes(inputValue)) {
-          setValue((value: SelectionSingleValueType[]) => (value ?? []).concat(inputValue));
-          updateInputValue();
-        }
+    if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
+      if (!(value ?? []).includes(inputValue)) {
+        setValue((value: SelectionSingleValueType[]) => (value ?? []).concat(inputValue));
+        updateInputValue();
       }
+    }
 
-      if (!open && prevInputValue.current !== inputValue) {
-        setOpen(true);
-      }
+    if (!open && prevInputValue.current !== inputValue) {
+      setOpen(true);
+    }
 
-      commonHandleOnKeyDown(onKeyDown)(e);
-    };
+    commonHandleOnKeyDown(onKeyDown)(e);
+  };
 
-    const handleOpenChange = (open: boolean) => {
-      if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
-        setOpen(open);
+  const handleOpenChange = (open: boolean) => {
+    if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+      setOpen(open);
 
-        if (!open) {
-          if (inputPlugRef.current) {
-            inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
-          }
+      if (!open) {
+        if (inputPlugRef.current) {
+          inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
         }
+      }
 
-        if (open) {
-          if (inputPlugRef.current) {
-            inputPlugRef.current.style.width = 'unset';
-          }
+      if (open) {
+        if (inputPlugRef.current) {
+          inputPlugRef.current.style.width = 'unset';
         }
       }
-    };
+    }
+  };
 
-    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
-      if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
-        updateInputValue();
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+      updateInputValue();
 
-        rest?.onBlur?.(e);
-      }
-    };
+      rest?.onBlur?.(e);
+    }
+  };
 
-    const fuzzySearch = useFuzzySearch(items);
-    const result =
-      autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
+  const fuzzySearch = useFuzzySearch(items);
+  const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
 
-    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+  const fieldValidationState = getValidationState({ validationState, error: rest.error });
 
-    return (
-      <FieldDecorator
-        {...extractSupportProps(rest)}
-        {...extractFieldDecoratorProps(rest)}
-        labelFor={id}
+  return (
+    <FieldDecorator
+      {...extractSupportProps(rest)}
+      {...extractFieldDecoratorProps(props)}
+      validationState={fieldValidationState}
+    >
+      <Droplist
+        {...extractListProps(props)}
+        items={result}
+        triggerElemRef={localRef}
+        trigger='click'
+        selection={{
+          mode: 'multiple',
+          value: value,
+          onChange: value => {
+            setValue(value);
+            if (inputValue) {
+              localRef.current?.focus();
+              updateInputValue();
+            }
+          },
+        }}
+        dataFiltered={rest.dataFiltered ?? Boolean(inputValue.length)}
         size={size}
-        validationState={fieldValidationState}
+        open={!disabled && !readonly && open}
+        onOpenChange={handleOpenChange}
       >
-        <Droplist
-          {...extractListProps(rest)}
-          items={result}
-          triggerElemRef={localRef}
-          trigger='click'
-          selection={{
-            mode: 'multiple',
-            value: value,
-            onChange: value => {
-              setValue(value);
-              if (inputValue) {
-                localRef.current?.focus();
-                updateInputValue();
-              }
-            },
-          }}
-          dataFiltered={rest.dataFiltered ?? Boolean(inputValue.length)}
-          size={size}
-          open={!disabled && !readonly && open}
-          onOpenChange={handleOpenChange}
-        >
-          {({ onKeyDown }) => (
-            <FieldContainerPrivate
-              className={cn(styles.container, styles.tagContainer)}
-              validationState={fieldValidationState}
-              disabled={disabled}
-              readonly={readonly}
-              focused={open}
-              variant='single-line-container'
-              inputRef={localRef}
-              size={size}
-              prefix={prefixIcon}
-            >
-              <>
-                <div className={styles.contentWrapper} ref={contentRef}>
-                  {selectedItems &&
-                    selectedItems.map(option => (
-                      <Tag
-                        size={size === 'l' ? 's' : 'xs'}
-                        tabIndex={-1}
-                        label={selectedOptionFormatter(option)}
-                        key={option.id}
-                        appearance={option.appearance ?? 'neutral'}
-                        onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
-                      />
-                    ))}
-
-                  <div
-                    className={styles.inputWrapper}
-                    style={{
-                      minWidth: value
-                        ? Math.min(
-                            contentRef.current?.clientWidth ?? BASE_MIN_WIDTH,
-                            inputPlugRef.current?.clientWidth ?? BASE_MIN_WIDTH,
-                          )
-                        : '100%',
-                    }}
-                  >
-                    <InputPrivate
-                      id={id}
-                      name={name}
-                      type='text'
-                      disabled={disabled}
-                      placeholder={!selectedItems || !selectedItems.length ? placeholder : undefined}
-                      ref={mergeRefs(ref, localRef)}
-                      onChange={searchable ? setInputValue : undefined}
-                      value={searchable ? inputValue : ''}
-                      readonly={!searchable || readonly}
-                      data-test-id='field-select__input'
-                      onKeyDown={handleOnKeyDown(onKeyDown)}
-                      onBlur={handleBlur}
-                      className={cn({
-                        [styles.readonlyCursor]: !searchable,
-                      })}
+        {({ onKeyDown }) => (
+          <FieldContainerPrivate
+            className={cn(styles.container, styles.tagContainer)}
+            validationState={fieldValidationState}
+            disabled={disabled}
+            readonly={readonly}
+            focused={open}
+            variant='single-line-container'
+            inputRef={localRef}
+            size={size}
+            prefix={prefixIcon}
+          >
+            <>
+              <div className={styles.contentWrapper} ref={contentRef}>
+                {selectedItems &&
+                  selectedItems.map(option => (
+                    <Tag
+                      size={size === 'l' ? 's' : 'xs'}
+                      tabIndex={-1}
+                      label={selectedOptionFormatter(option)}
+                      key={option.id}
+                      appearance={option.appearance ?? 'neutral'}
+                      onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
                     />
-                  </div>
-                </div>
+                  ))}
 
-                <div className={styles.postfix}>
-                  {buttons}
-                  <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
+                <div
+                  className={styles.inputWrapper}
+                  style={{
+                    minWidth: value
+                      ? Math.min(
+                          contentRef.current?.clientWidth ?? BASE_MIN_WIDTH,
+                          inputPlugRef.current?.clientWidth ?? BASE_MIN_WIDTH,
+                        )
+                      : '100%',
+                  }}
+                >
+                  <InputPrivate
+                    id={id}
+                    name={name}
+                    type='text'
+                    disabled={disabled}
+                    placeholder={!selectedItems || !selectedItems.length ? placeholder : undefined}
+                    ref={mergeRefs(ref, localRef)}
+                    onChange={searchable ? setInputValue : undefined}
+                    value={searchable ? inputValue : ''}
+                    readonly={!searchable || readonly}
+                    data-test-id='field-select__input'
+                    onKeyDown={handleOnKeyDown(onKeyDown)}
+                    onBlur={handleBlur}
+                    className={cn({
+                      [styles.readonlyCursor]: !searchable,
+                    })}
+                  />
                 </div>
+              </div>
+
+              <div className={styles.postfix}>
+                {buttons}
+                <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
+              </div>
 
-                <span ref={inputPlugRef} className={styles.inputPlug}>
-                  {inputValue}
-                </span>
-              </>
-            </FieldContainerPrivate>
-          )}
-        </Droplist>
-      </FieldDecorator>
-    );
-  },
-);
+              <span ref={inputPlugRef} className={styles.inputPlug}>
+                {inputValue}
+              </span>
+            </>
+          </FieldContainerPrivate>
+        )}
+      </Droplist>
+    </FieldDecorator>
+  );
+});

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -32,224 +32,215 @@ const defaultSelectedOptionFormatter: SelectedOptionFormatter = item =>
   // @ts-expect-error
   item?.content.option || '';
 
-export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>(
-  (
-    {
-      id,
-      name,
-      placeholder,
-      size = 's',
-      options,
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-      disabled = false,
-      readonly = false,
-      searchable = true,
-      showCopyButton = true,
-      showClearButton = true,
-      onKeyDown: onInputKeyDownProp,
-      required = false,
-      validationState = 'default',
-      search,
-      autocomplete = false,
-      prefixIcon,
-      addOptionByEnter = false,
-      open: openProp,
-      onOpenChange,
-      selectedOptionFormatter = defaultSelectedOptionFormatter,
-      ...rest
-    },
-    ref,
-  ) => {
-    const localRef = useRef<HTMLInputElement>(null);
-    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
-    const [value, setValue] = useValueControl<SelectionSingleValueType>({
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-    });
-
-    const [{ selectedItem, items = [] }, setItems] = useState<{
-      selectedItem?: ItemWithId;
-      items: ItemProps[];
-    }>(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
-
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
-      ...search,
+export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>((props, ref) => {
+  const {
+    id,
+    name,
+    placeholder,
+    size = 's',
+    options,
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+    disabled = false,
+    readonly = false,
+    searchable = true,
+    showCopyButton = true,
+    showClearButton = true,
+    onKeyDown: onInputKeyDownProp,
+    required = false,
+    validationState = 'default',
+    search,
+    autocomplete = false,
+    prefixIcon,
+    addOptionByEnter = false,
+    open: openProp,
+    onOpenChange,
+    selectedOptionFormatter = defaultSelectedOptionFormatter,
+    ...rest
+  } = props;
+  const localRef = useRef<HTMLInputElement>(null);
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
+  const [value, setValue] = useValueControl<SelectionSingleValueType>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+
+  const [{ selectedItem, items = [] }, setItems] = useState<{
+    selectedItem?: ItemWithId;
+    items: ItemProps[];
+  }>(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
+
+  const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput({
+    ...search,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    defaultValue: selectedItem?.content.option ?? '',
+    selectedOptionFormatter,
+  });
+
+  const prevSelectedItem = useRef<ItemWithId | undefined>(selectedItem);
+
+  useLayoutEffect(() => {
+    setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
+  }, [options, value]);
+
+  useEffect(() => {
+    if (
+      prevSelectedItem.current &&
+      prevSelectedItem.current.id === selectedItem?.id &&
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      defaultValue: selectedItem?.content.option ?? '',
-      selectedOptionFormatter,
-    });
-
-    const prevSelectedItem = useRef<ItemWithId | undefined>(selectedItem);
-
-    useLayoutEffect(() => {
-      setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
-    }, [options, value]);
-
-    useEffect(() => {
-      if (
-        prevSelectedItem.current &&
-        prevSelectedItem.current.id === selectedItem?.id &&
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        prevSelectedItem.current.content.option === selectedItem?.content.option
-      ) {
-        return;
-      }
-
-      prevSelectedItem.current = selectedItem;
+      prevSelectedItem.current.content.option === selectedItem?.content.option
+    ) {
+      return;
+    }
+
+    prevSelectedItem.current = selectedItem;
+    updateInputValue(selectedItem);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedItem, prevSelectedItem]);
+
+  const onClear = useCallback(() => {
+    setValue(undefined);
+    localRef.current?.focus();
+    if (required) {
+      setOpen(true);
+    }
+  }, [required, setOpen, setValue]);
+
+  const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+
+  const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+    readonly,
+    size,
+    showClearButton: showClearButton && !disabled && !readonly && value !== undefined,
+    showCopyButton,
+    inputRef: localRef,
+    onClear,
+    valueToCopy: selectedOptionFormatter(selectedItem),
+  });
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
       updateInputValue(selectedItem);
 
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedItem, prevSelectedItem]);
+      rest?.onBlur?.(e);
+    }
+  };
 
-    const onClear = useCallback(() => {
-      setValue(undefined);
-      localRef.current?.focus();
-      if (required) {
-        setOpen(true);
-      }
-    }, [required, setOpen, setValue]);
-
-    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-
-    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
-      readonly,
-      size,
-      showClearButton: showClearButton && !disabled && !readonly && value !== undefined,
-      showCopyButton,
-      inputRef: localRef,
-      onClear,
-      valueToCopy: selectedOptionFormatter(selectedItem),
-    });
-
-    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
-      if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
-        updateInputValue(selectedItem);
+  const commonHandleOnKeyDown = useHandleOnKeyDown({
+    inputKeyDownNavigationHandler,
+    onInputKeyDownProp,
+    setOpen,
+  });
 
-        rest?.onBlur?.(e);
-      }
-    };
-
-    const commonHandleOnKeyDown = useHandleOnKeyDown({
-      inputKeyDownNavigationHandler,
-      onInputKeyDownProp,
-      setOpen,
-    });
-
-    const handleSelectionChange = useCallback(
-      (newValue?: SelectionSingleValueType) => {
-        if (newValue !== undefined) {
-          localRef.current?.focus();
-
-          setOpen(false);
-          setValue(newValue);
-        }
-      },
-      [setOpen, setValue],
-    );
-
-    const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
-      if (!open && prevInputValue.current !== inputValue) {
-        setOpen(true);
-      }
+  const handleSelectionChange = useCallback(
+    (newValue?: SelectionSingleValueType) => {
+      if (newValue !== undefined) {
+        localRef.current?.focus();
 
-      if (e.code === 'Enter') {
-        e.stopPropagation();
-        e.preventDefault();
+        setOpen(false);
+        setValue(newValue);
       }
+    },
+    [setOpen, setValue],
+  );
 
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        handleSelectionChange(inputValue);
-      }
+  const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
+    if (!open && prevInputValue.current !== inputValue) {
+      setOpen(true);
+    }
 
-      commonHandleOnKeyDown(onKeyDown)(e);
-    };
+    if (e.code === 'Enter') {
+      e.stopPropagation();
+      e.preventDefault();
+    }
 
-    const handleOpenChange = (open: boolean) => {
-      if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
-        setOpen(open);
+    if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
+      handleSelectionChange(inputValue);
+    }
 
-        if (!open) {
-          updateInputValue(selectedItem);
-        }
+    commonHandleOnKeyDown(onKeyDown)(e);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+      setOpen(open);
+
+      if (!open) {
+        updateInputValue(selectedItem);
       }
-    };
-
-    const fuzzySearch = useFuzzySearch(items);
-    const result =
-      autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
-        ? items
-        : fuzzySearch(inputValue);
-
-    const fieldValidationState = getValidationState({ validationState, error: rest.error });
-
-    return (
-      <FieldDecorator
-        {...extractSupportProps(rest)}
-        {...extractFieldDecoratorProps(rest)}
-        validationState={fieldValidationState}
-        required={required}
-        readonly={readonly}
-        labelFor={id}
-        disabled={disabled}
+    }
+  };
+
+  const fuzzySearch = useFuzzySearch(items);
+  const result =
+    autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
+      ? items
+      : fuzzySearch(inputValue);
+
+  const fieldValidationState = getValidationState({ validationState, error: rest.error });
+
+  return (
+    <FieldDecorator
+      {...extractSupportProps(rest)}
+      {...extractFieldDecoratorProps(props)}
+      validationState={fieldValidationState}
+    >
+      <Droplist
+        {...extractListProps(props)}
+        items={result}
+        selection={{
+          mode: 'single',
+          value: value,
+          onChange: handleSelectionChange,
+        }}
         size={size}
+        open={open}
+        onOpenChange={handleOpenChange}
+        trigger='click'
+        triggerElemRef={localRef}
       >
-        <Droplist
-          {...extractListProps(rest)}
-          items={result}
-          selection={{
-            mode: 'single',
-            value: value,
-            onChange: handleSelectionChange,
-          }}
-          size={size}
-          open={open}
-          onOpenChange={handleOpenChange}
-          trigger='click'
-          triggerElemRef={localRef}
-        >
-          {({ onKeyDown }) => (
-            <FieldContainerPrivate
-              className={styles.container}
-              validationState={fieldValidationState}
+        {({ onKeyDown }) => (
+          <FieldContainerPrivate
+            className={styles.container}
+            validationState={fieldValidationState}
+            disabled={disabled}
+            readonly={readonly}
+            focused={open}
+            variant={'single-line-container'}
+            inputRef={localRef}
+            size={size}
+            prefix={prefixIcon}
+          >
+            <InputPrivate
+              id={id}
+              name={name}
+              type='text'
               disabled={disabled}
+              placeholder={placeholder}
+              ref={mergeRefs(ref, localRef)}
+              onChange={searchable ? setInputValue : undefined}
+              value={searchable ? inputValue : selectedOptionFormatter(selectedItem)}
               readonly={readonly}
-              focused={open}
-              variant={'single-line-container'}
-              inputRef={localRef}
-              size={size}
-              prefix={prefixIcon}
-            >
-              <InputPrivate
-                id={id}
-                name={name}
-                type='text'
-                disabled={disabled}
-                placeholder={placeholder}
-                ref={mergeRefs(ref, localRef)}
-                onChange={searchable ? setInputValue : undefined}
-                value={searchable ? inputValue : selectedOptionFormatter(selectedItem)}
-                readonly={readonly}
-                data-test-id='field-select__input'
-                onKeyDown={handleOnKeyDown(onKeyDown)}
-                onBlur={handleBlur}
-                className={cn({
-                  [styles.readonlyCursor]: !searchable,
-                })}
-              />
-
-              <div className={styles.postfix}>
-                {buttons}
-                <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
-              </div>
-            </FieldContainerPrivate>
-          )}
-        </Droplist>
-      </FieldDecorator>
-    );
-  },
-);
+              data-test-id='field-select__input'
+              onKeyDown={handleOnKeyDown(onKeyDown)}
+              onBlur={handleBlur}
+              className={cn({
+                [styles.readonlyCursor]: !searchable,
+              })}
+            />
+
+            <div className={styles.postfix}>
+              {buttons}
+              <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
+            </div>
+          </FieldContainerPrivate>
+        )}
+      </Droplist>
+    </FieldDecorator>
+  );
+});