@snack-uikit/fields 0.18.4-preview-5d3667ec.0 → 0.19.1

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.1 (2024-04-24)
+
+
+### Bug Fixes
+
+* **FF-0011:** validationState reacts on error prop ([d4a6cb5](https://github.com/cloud-ru-tech/snack-uikit/commit/d4a6cb517662520476f6b690c0a24b37311eb369))
+* **FF-00:** fix input behavior for field-slider non-linear marks ([67fda28](https://github.com/cloud-ru-tech/snack-uikit/commit/67fda2853485bd69039351d71dbe9db5d14e163f))
+
+
+
+
+
+# 0.19.0 (2024-04-23)
+
+
+### Bug Fixes
+
+* **PDS-59:** upd tests ([df72712](https://github.com/cloud-ru-tech/snack-uikit/commit/df7271268ac1621316dbb98b274e3d6602515b23))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-59:** upd typings accordance with list; fix focus control ([827ff9f](https://github.com/cloud-ru-tech/snack-uikit/commit/827ff9f03ca5bae4664bc69664e4b8d812191103))
+
+
+
+
 ## 0.18.3 (2024-04-22)
 
 

package/README.md

@@ -180,7 +180,7 @@ const [isOpen, setIsOpen] = useState(false);
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | length | `{ current: number; max?: number; }` | - | Допустимая длинна текста |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 ## FieldText
 ### Props
@@ -312,6 +312,8 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| pinBottom* | `OptionProps[]` | - |  |
+| pinTop* | `OptionProps[]` | - |  |
 | options* | `OptionProps[]` | - |  |
 | disabled | `boolean` | false | Является ли поле деактивированным |
 | readonly | `boolean` | false false | Является ли поле доступным только для чтения |
@@ -332,9 +334,9 @@ const [isOpen, setIsOpen] = useState(false);
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | loading | `boolean` | - |  |
-| value | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Controlled состояние |
-| onChange | `((value: any) => void) \| ((value: any) => void)` | - | Controlled обработчик измения состояния |
-| defaultValue | `SelectionSingleValueType \| SelectionSingleValueType[]` | - | Начальное состояние |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
 | searchable | `boolean` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
@@ -347,8 +349,6 @@ const [isOpen, setIsOpen] = useState(false);
 | open | `boolean` | - |  |
 | onOpenChange | `(open: boolean) => void` | - |  |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
 | dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |

package/dist/components/FieldDate/FieldDate.js

@@ -14,13 +14,14 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
-import { Dropdown } from '@snack-uikit/droplist';
+import { Dropdown } from '@snack-uikit/dropdown';
 import { CalendarSVG } from '@snack-uikit/icons';
 import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { DEFAULT_LOCALE, SlotKey } from './constants';
 import { useDateField } from './hooks';
@@ -45,6 +46,7 @@ export const FieldDate = forwardRef((_a, ref) => {
     const showAdditionalButton = Boolean(valueProp && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
     const checkForLeavingFocus = useCallback((event) => {
         if (event.key === 'ArrowDown') {
             setPickerAutofocus(true);
@@ -133,7 +135,7 @@ export const FieldDate = forwardRef((_a, ref) => {
             e.stopPropagation();
         }
     }, [dateInputClickHandler, isOpen]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,
@@ -143,5 +145,5 @@ export const FieldDate = forwardRef((_a, ref) => {
                             element === null || element === void 0 ? void 0 : element.focus();
                             setPickerAutofocus(false);
                         }
-                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(CalendarSVG, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
+                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(CalendarSVG, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
 });

package/dist/components/FieldDecorator/FieldDecorator.d.ts

@@ -12,4 +12,4 @@ export type FieldDecoratorProps = WithSupportProps<{
     readonly?: boolean;
     error?: string;
 } & HeaderProps & FooterProps>;
-export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState: validationStateProp, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FieldDecorator/FieldDecorator.js

@@ -14,12 +14,13 @@ import cn from 'classnames';
 import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
+import { getValidationState } from '../../utils/getValidationState';
 import { Footer } from './Footer';
 import { Header } from './Header';
 import styles from './styles.module.css';
 export function FieldDecorator(_a) {
-    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState: validationStateProp = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
+    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
     const isFieldActive = !disabled && !readonly;
-    const validationState = error ? VALIDATION_STATE.Error : validationStateProp;
-    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? validationState : VALIDATION_STATE.Default })] })));
+    const fieldValidationState = getValidationState({ validationState, error });
+    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
 }

package/dist/components/FieldSecure/FieldSecure.js

@@ -17,6 +17,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldSecure = forwardRef((_a, ref) => {
     var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error"]);
@@ -35,6 +36,7 @@ export const FieldSecure = forwardRef((_a, ref) => {
     });
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
+    const fieldValidationState = getValidationState({ validationState, error });
     const toggleHidden = () => {
         setHidden(!hidden);
         if (!readonly) {
@@ -53,5 +55,5 @@ export const FieldSecure = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
 });

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

@@ -9,6 +9,8 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
+    pinTop: import("./types").OptionProps[];
+    pinBottom: import("./types").OptionProps[];
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;
@@ -22,4 +24,4 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -14,18 +14,23 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
+import { useFuzzySearch } from './legacy';
 import styles from './styles.module.css';
 import { extractListProps, getArrowIcon, updateMultipleItems } from './utils';
 const BASE_MIN_WIDTH = 4;
-const defaultSelectedOptionFormatter = item => (item === null || item === void 0 ? void 0 : item.content.option) || '';
+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"]);
@@ -47,6 +52,9 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
         var _a;
         setValue(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.disabled).map(item => item.id));
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (rest.required) {
+            setOpen(true);
+        }
     };
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
@@ -108,7 +116,8 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     };
     const fuzzySearch = useFuzzySearch(items);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: validationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
+    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, selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: value => {
@@ -117,7 +126,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                 },
             }, dataFiltered: (_b = rest.dataFiltered) !== null && _b !== void 0 ? _b : 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: 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: [selectedItems &&
+                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 => {
                                             var _a;
                                             return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id));

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

@@ -7,6 +7,8 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
+    pinTop: import("./types").OptionProps[];
+    pinBottom: import("./types").OptionProps[];
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;
@@ -20,4 +22,4 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -14,16 +14,21 @@ import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
+import { useFuzzySearch } from './legacy';
 import styles from './styles.module.css';
 import { extractListProps, getArrowIcon, updateItems } from './utils';
-const defaultSelectedOptionFormatter = item => (item === null || item === void 0 ? void 0 : item.content.option) || '';
+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"]);
@@ -35,7 +40,10 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         onChange: onChangeProp,
     });
     const [{ selectedItem, items = [] }, setItems] = useState(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
-    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option) !== null && _b !== void 0 ? _b : '', selectedOptionFormatter }));
+    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 }));
     const prevSelectedItem = useRef(selectedItem);
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
@@ -43,6 +51,8 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     useEffect(() => {
         if (prevSelectedItem.current &&
             prevSelectedItem.current.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) &&
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
             prevSelectedItem.current.content.option === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.content.option)) {
             return;
         }
@@ -54,7 +64,10 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
         var _a;
         setValue(undefined);
         (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [setValue]);
+        if (required) {
+            setOpen(true);
+        }
+    }, [required, setOpen, setValue]);
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
@@ -110,11 +123,12 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const result = autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
         ? items
         : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: validationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
+    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: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, 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 ? setInputValue : undefined, value: searchable ? inputValue : selectedOptionFormatter(selectedItem), readonly: readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
+            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: fieldValidationState, 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 ? 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,
                         }) }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
 });

package/dist/components/FieldSelect/hooks.js

@@ -1,7 +1,10 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { extractChildIds, isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
+import { 
+// extractChildIds,
+isAccordionItemProps, isNextListItemProps, } from '@snack-uikit/list';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { extractChildIds } from './legacy';
 import { isBaseOptionProps } from './utils';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
@@ -74,7 +77,10 @@ export function useHandleDeleteItem(setValue) {
             return;
         }
         if (isBaseOptionProps(item)) {
-            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => v !== item.id));
+            setValue((value) => value === null || value === void 0 ? void 0 : value.filter(v => 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            v !== item.id));
         }
     }, [setValue]);
 }

package/dist/components/FieldSelect/legacy/components/Items/hooks.d.ts

@@ -0,0 +1,12 @@
+import { ItemProps } from '@snack-uikit/list';
+type UseGroupItemSelectionProps = {
+    items: ItemProps[];
+    id?: string | number;
+    disabled?: boolean;
+};
+export declare function useLegacyGroupItemSelection({ id, items, disabled }: UseGroupItemSelectionProps): {
+    checked: boolean | undefined;
+    isIndeterminate: boolean;
+    handleOnSelect: () => void;
+};
+export {};

package/dist/components/FieldSelect/legacy/components/Items/hooks.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { useSelectionContext } from '@snack-uikit/list';
+import { extractAllChildIds, extractChildIds } from '../../utils';
+export function useLegacyGroupItemSelection({ id = '', items, disabled }) {
+    const { value, setValue, isSelectionMultiple } = useSelectionContext();
+    const { childIds, allChildIds } = useMemo(() => ({ childIds: extractChildIds({ items }), allChildIds: extractAllChildIds({ items }) }), [items]);
+    const isIndeterminate = isSelectionMultiple
+        ? allChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
+        : allChildIds.includes(value !== null && value !== void 0 ? value : '');
+    const checked = isSelectionMultiple ? allChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId)) : undefined;
+    useEffect(() => {
+        if (isSelectionMultiple) {
+            if (checked && !(value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([id !== null && id !== void 0 ? id : '']));
+            }
+            if (!checked && (value === null || value === void 0 ? void 0 : value.includes(id))) {
+                setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id));
+            }
+        }
+    }, [checked, disabled, id, isSelectionMultiple, setValue, value]);
+    const handleOnSelect = () => {
+        if (checked) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !childIds.includes(itemId)));
+            return;
+        }
+        if (isIndeterminate) {
+            setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...childIds, id])));
+            return;
+        }
+        setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).concat([...childIds, id !== null && id !== void 0 ? id : '']));
+    };
+    return { checked, isIndeterminate, handleOnSelect };
+}

package/dist/components/FieldSelect/legacy/components/index.d.ts

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/dist/components/FieldSelect/legacy/components/index.js

@@ -0,0 +1 @@
+export { useLegacyGroupItemSelection } from './Items/hooks';

package/dist/components/FieldSelect/legacy/hooks.d.ts

@@ -0,0 +1,5 @@
+import { ItemProps } from '@snack-uikit/list';
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export declare function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number): (search: string) => import("@snack-uikit/list/dist/components/Items").Item[] | import("@snack-uikit/list/dist/components/Items").FlattenItem[];

package/dist/components/FieldSelect/legacy/hooks.js

@@ -0,0 +1,19 @@
+import FuzzySearch from 'fuzzy-search';
+import { useCallback, useMemo } from 'react';
+import { kindFlattenItems } from '@snack-uikit/list';
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch(items, minSearchInputLength) {
+    const flattenItems = useMemo(() => {
+        const { flattenItems } = kindFlattenItems({ items });
+        return Object.values(flattenItems);
+    }, [items]);
+    return useCallback((search) => {
+        const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description', 'label'], {});
+        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+            ? searcher.search(search)
+            : items;
+    }, [flattenItems, items, minSearchInputLength]);
+}

package/dist/components/FieldSelect/legacy/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

package/dist/components/FieldSelect/legacy/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export { useFuzzySearch } from './hooks';
+export { extractChildIds, flattenItems } from './utils';

package/dist/components/FieldSelect/legacy/utils.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+import { AccordionItemProps, BaseItemProps, ItemProps, NextListItemProps } from '@snack-uikit/list';
+type WithCollapsedItemsProps = {
+    items: ItemProps[];
+    openCollapsedItems: Array<number | string>;
+};
+export declare function withCollapsedItems({ items, openCollapsedItems }: WithCollapsedItemsProps): {
+    items: import("@snack-uikit/list/dist/components/Items").Item[];
+    itemRefs: RefObject<HTMLElement>[];
+    ids: (string | number)[];
+    expandedIds: (string | number)[];
+};
+/**
+ * Функция возвращает массив id дочерних items
+ * @function  extractItemIds
+ */
+export declare function extractItemIds(items: ItemProps[]): Array<string | number>;
+export declare function extractChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
+export declare function extractAllChildIds({ items }: {
+    items: ItemProps[];
+}): Array<string | number>;
+/**
+ *  Функция разворачивает массив айтемов в плоский список
+ *  @function  flattenItems
+ */
+export declare function flattenItems(items: ItemProps[]): (BaseItemProps | AccordionItemProps | NextListItemProps)[];
+export {};

package/dist/components/FieldSelect/legacy/utils.js

@@ -0,0 +1,107 @@
+import { isAccordionItemProps, isBaseItemProps, isGroupItemProps, isNextListItemProps, } from '@snack-uikit/list';
+export function withCollapsedItems({ items, openCollapsedItems }) {
+    let itemRefs = [];
+    let newItems = [];
+    let ids = [];
+    let expandedIds = [];
+    items.forEach(item => {
+        var _a;
+        if (((isBaseItemProps(item) && !item.inactive) || isNextListItemProps(item) || isAccordionItemProps(item)) &&
+            !item.disabled) {
+            newItems = newItems.concat([item]);
+            ids = ids.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']);
+            if (item.itemRef) {
+                itemRefs = itemRefs.concat([item.itemRef]);
+            }
+        }
+        if (isNextListItemProps(item) && item.id && !item.disabled) {
+            expandedIds = expandedIds.concat(item.id);
+        }
+        if (isGroupItemProps(item)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+        }
+        if (isAccordionItemProps(item) && item.id && openCollapsedItems.includes(item.id)) {
+            const { itemRefs: nestedItemsRefs, ids: nestedIds, items: nestedItems, expandedIds: nestedExpandedIds, } = withCollapsedItems({
+                items: item.items,
+                openCollapsedItems,
+            });
+            ids = ids.concat(nestedIds);
+            newItems = newItems.concat(nestedItems);
+            itemRefs = itemRefs.concat(nestedItemsRefs);
+            expandedIds = expandedIds.concat(nestedExpandedIds);
+        }
+    });
+    return { items, itemRefs, ids, expandedIds };
+}
+/**
+ * Функция возвращает массив id дочерних items
+ * @function  extractItemIds
+ */
+export function extractItemIds(items) {
+    return items.reduce((prev, item) => {
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractItemIds(item.items));
+        }
+        return item.id ? prev.concat([item.id]) : prev;
+    }, []);
+}
+export function extractChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.disabled && !item.inactive))
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractChildIds({ items: item.items }));
+        }
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractChildIds({ items: item.items }));
+        }
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+    }, []);
+}
+export function extractAllChildIds({ items }) {
+    return items
+        .filter(item => isAccordionItemProps(item) ||
+        isNextListItemProps(item) ||
+        isGroupItemProps(item) ||
+        (isBaseItemProps(item) && !item.inactive))
+        .reduce((prev, item) => {
+        var _a;
+        if (isAccordionItemProps(item) || isNextListItemProps(item)) {
+            return prev.concat([(_a = item.id) !== null && _a !== void 0 ? _a : '']).concat(extractAllChildIds({ items: item.items }));
+        }
+        if (isGroupItemProps(item)) {
+            return prev.concat(extractAllChildIds({ items: item.items }));
+        }
+        return item.id && !isGroupItemProps(item) ? prev.concat([item.id]) : prev;
+    }, []);
+}
+/**
+ *  Функция разворачивает массив айтемов в плоский список
+ *  @function  flattenItems
+ */
+export function flattenItems(items) {
+    const flattenItems = [];
+    function flatten(item) {
+        if (!isGroupItemProps(item)) {
+            flattenItems.push(item);
+        }
+        if ('items' in item) {
+            for (const nestedItem of item.items) {
+                flatten(nestedItem);
+            }
+        }
+    }
+    for (const item of items) {
+        flatten(item);
+    }
+    return flattenItems;
+}