@snack-uikit/fields 0.36.3 → 0.36.5-preview-c8fb5dcc.0

package/dist/esm/components/FieldColor/FieldColor.d.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef } from 'react';
 import { ColorPickerProps } from '@snack-uikit/color-picker';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -20,6 +21,8 @@ type FieldDateOwnProps = {
     showClearButton?: boolean;
     value?: string;
     onChange?(value: string): void;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 } & Omit<ColorPickerProps, 'onChange' | 'value'>;
 export type FieldColorProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
 export declare const FieldColor: import("react").ForwardRefExoticComponent<{
@@ -40,5 +43,7 @@ export declare const FieldColor: import("react").ForwardRefExoticComponent<{
     showClearButton?: boolean;
     value?: string;
     onChange?(value: string): void;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 } & Omit<ColorPickerProps, "value" | "onChange"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/esm/components/FieldColor/FieldColor.js

@@ -24,7 +24,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldColor = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onChange, onOpenChange, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, withAlpha, autoApply, placeholder, onFocus, onBlur, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur", "onCopyButtonClick"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onChange, onOpenChange, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, withAlpha, autoApply, placeholder, onFocus, onBlur, onCopyButtonClick, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur", "onCopyButtonClick", "decoratorRef"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const localRef = useRef(null);
     const showDropList = isOpen && !readonly && !disabled;
@@ -62,7 +62,7 @@ export const FieldColor = forwardRef((_a, ref) => {
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [open]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, 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: 'auto' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'auto' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,

package/dist/esm/components/FieldDate/FieldDate.d.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef } from 'react';
 import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -29,6 +30,8 @@ type FieldDateOwnProps = {
      */
     showClearButton?: boolean;
     mode: Mode;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 } & Pick<CalendarProps, 'buildCellProps'> & ({
     mode: typeof MODES.Date;
 } | FieldDateWithSeconds);

package/dist/esm/components/FieldDate/FieldDate.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -26,7 +26,7 @@ import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldDate = forwardRef((_a, ref) => {
     var _b;
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, buildCellProps, error, mode, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode", "onCopyButtonClick"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, buildCellProps, error, mode, onCopyButtonClick, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode", "onCopyButtonClick", "decoratorRef"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
@@ -154,7 +154,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, caption: caption, 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: 'auto' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'auto' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,

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

@@ -12,4 +12,15 @@ export type FieldDecoratorProps = WithSupportProps<{
     readonly?: boolean;
     error?: string;
 } & HeaderProps & FooterProps>;
-export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, caption, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare const FieldDecorator: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    className?: string;
+    /** Контент */
+    children: ReactNode;
+    /** Деактивирован ли элемент */
+    disabled?: boolean;
+    /** Является ли поле доступным только на чтение */
+    readonly?: boolean;
+    error?: string;
+} & HeaderProps & FooterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/FieldDecorator/FieldDecorator.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { forwardRef } from 'react';
 import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
@@ -18,9 +19,9 @@ import { getValidationState } from '../../utils/getValidationState';
 import { Footer } from './Footer';
 import { Header } from './Header';
 import styles from './styles.module.css';
-export function FieldDecorator(_a) {
+export const FieldDecorator = forwardRef((_a, ref) => {
     var { children, className, label, labelTooltip, required, labelFor, caption, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "caption", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
     const isFieldActive = !disabled && !readonly;
     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, caption: caption, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
-}
+    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, ref: ref, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, caption: caption, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
+});

package/dist/esm/components/FieldSecure/FieldSecure.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ForwardedRef, ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -19,6 +19,8 @@ type FieldSecureOwnProps = {
     prefixIcon?: ReactElement;
     /** Свойство позволяет грузить данные в поле по требованию */
     asyncValueGetter?(): Promise<string>;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldSecure/FieldSecure.js

@@ -30,7 +30,7 @@ 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, caption, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, asyncValueGetter, autoComplete, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter", "autoComplete", "onCopyButtonClick"]);
+    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, caption, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, asyncValueGetter, autoComplete, onCopyButtonClick, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter", "autoComplete", "onCopyButtonClick", "decoratorRef"]);
     const localRef = useRef(null);
     const copyButtonRef = useRef(null);
     const hideButtonRef = useRef(null);
@@ -111,5 +111,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, caption: caption, 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: postfixButtons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, 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', autoComplete: autoComplete }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: postfixButtons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, 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', autoComplete: autoComplete }) }) }) })));
 });

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

@@ -28,4 +28,5 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
+    decoratorRef?: import("react").ForwardedRef<HTMLDivElement>;
 } & Pick<import("@snack-uikit/list").DroplistProps, "scrollToSelectedItem" | "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldSelect/FieldSelectMultiple.js

@@ -32,7 +32,7 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 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, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter"]);
+    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, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, decoratorRef } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "decoratorRef"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -124,7 +124,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
     });
     const result = isSearchUnavailable ? items : searchFunction(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
-    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: {
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, ref: decoratorRef, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, triggerElemRef: localRef, trigger: 'click', selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: value => {

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

@@ -26,4 +26,5 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
+    decoratorRef?: import("react").ForwardedRef<HTMLDivElement>;
 } & Pick<import("@snack-uikit/list").DroplistProps, "scrollToSelectedItem" | "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "resetSearchOnOptionSelection"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/FieldSelect/FieldSelectSingle.js

@@ -29,7 +29,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((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, prefix, postfix, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true, onCopyButtonClick } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "onCopyButtonClick"]);
+    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, prefix, postfix, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true, onCopyButtonClick, decoratorRef } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "onCopyButtonClick", "decoratorRef"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -125,7 +125,7 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
     });
     const result = isSearchUnavailable ? items : filterFunction(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, selection: {
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(props), { validationState: fieldValidationState, ref: decoratorRef, children: _jsx(Droplist, Object.assign({}, extractListProps(props), { items: result, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, ItemContentProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
@@ -72,6 +72,8 @@ type FiledSelectCommonProps = WithSupportProps<{
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 }> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'dataFiltered' | 'untouchableScrollbars' | 'scrollToSelectedItem'>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & Omit<FiledSelectCommonProps, 'resetSearchOnOptionSelection'>;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {

package/dist/esm/components/FieldSlider/FieldSlider.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -19,6 +19,8 @@ type FieldSliderOwnProps = {
     prefix?: ReactNode;
     /** Произвольный постфикс для поля */
     postfix?: ReactNode;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
 export declare const FieldSlider: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldSlider/FieldSlider.js

@@ -31,7 +31,7 @@ const getDefaultValue = (range, min, max, value) => {
     return value !== null && value !== void 0 ? value : min;
 };
 export const FieldSlider = forwardRef((_a, ref) => {
-    var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, caption, hint, showHintIcon, size = SIZE.S, textInputFormatter, unbindInputFromMarks, postfixIcon, prefix, postfix } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "textInputFormatter", "unbindInputFromMarks", "postfixIcon", "prefix", "postfix"]);
+    var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, caption, hint, showHintIcon, size = SIZE.S, textInputFormatter, unbindInputFromMarks, postfixIcon, prefix, postfix, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "textInputFormatter", "unbindInputFromMarks", "postfixIcon", "prefix", "postfix", "decoratorRef"]);
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl({
         value: valueProp,
         defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -148,5 +148,5 @@ export const FieldSlider = forwardRef((_a, ref) => {
     useEffect(() => {
         handleTextValueChange();
     }, [marks, min, max, handleTextValueChange]);
-    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }), postfix: _jsxs(_Fragment, { children: [postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), postfixIcon] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
+    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size, ref: decoratorRef }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }), postfix: _jsxs(_Fragment, { children: [postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), postfixIcon] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
 });

package/dist/esm/components/FieldStepper/FieldStepper.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, ForwardedRef, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -17,6 +17,8 @@ type FieldStepperOwnProps = {
     prefix?: ReactNode;
     /** Произвольный постфикс для поля */
     postfix?: ReactNode;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
 export declare const FieldStepper: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -41,7 +41,7 @@ const SymbolWidth = {
     l: 10,
 };
 export const FieldStepper = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix"]);
+    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "decoratorRef"]);
     const { t } = useLocale('Fields');
     const [value = 0, setValue] = useValueControl({
         value: valueProp,
@@ -113,7 +113,7 @@ export const FieldStepper = forwardRef((_a, ref) => {
             return;
         }
     };
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
                                 width: String(value).length * SymbolWidth[size],
                                 maxWidth: '100%',
                             }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, step: step, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }), _jsx("div", { className: cn({ [styles.postfixWrapper]: postfixSettings.show }), children: postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }) })] }) }) }) })));

package/dist/esm/components/FieldText/FieldText.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Button } from '../../types';
@@ -25,6 +25,8 @@ type FieldTextOwnProps = {
     postfix?: ReactNode;
     /** Кнопка действия внутри поля */
     button?: Button;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldText/FieldText.js

@@ -21,7 +21,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { getContainerVariant } from './helpers';
 export const FieldText = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "decoratorRef"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -91,5 +91,5 @@ export const FieldText = forwardRef((_a, ref) => {
         onInputKeyDown(event);
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     };
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, "data-test-id": 'field-text__input' }) }) })));
 });

package/dist/esm/components/FieldTextArea/FieldTextArea.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ForwardedRef } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TextAreaProps } from '../../helperComponents';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -24,6 +24,8 @@ type FieldTextAreaOwnProps = {
     showClearButton?: boolean;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -22,7 +22,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick"]);
+    var { id, name, value: valueProp, placeholder, maxLength, minRows = 3, maxRows = 1000, disabled = false, resizable = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = true, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, error, size = SIZE.S, validationState = VALIDATION_STATE.Default, onCopyButtonClick, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "minRows", "maxRows", "disabled", "resizable", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "error", "size", "validationState", "onCopyButtonClick", "decoratorRef"]);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
@@ -56,5 +56,5 @@ export const FieldTextArea = 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, caption: caption, 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, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows, '--min-rows': minRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: postfixButtons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, minRows: minRows, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
 });

package/dist/esm/components/FieldTime/FieldTime.d.ts

@@ -1,3 +1,4 @@
+import { ForwardedRef } from 'react';
 import { TimePickerProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -24,6 +25,8 @@ type FieldTimeOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /** Ref для корневой обертки компонента */
+    decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
 export declare const FieldTime: import("react").ForwardRefExoticComponent<{

package/dist/esm/components/FieldTime/FieldTime.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { TimePicker } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
@@ -40,7 +40,7 @@ const getStringTimeValue = (time, { showSeconds, locale }) => {
     });
 };
 export const FieldTime = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, showSeconds = true, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, onCopyButtonClick } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick"]);
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, showSeconds = true, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, onCopyButtonClick, decoratorRef } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "showSeconds", "size", "validationState", "error", "onCopyButtonClick", "decoratorRef"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
@@ -152,7 +152,7 @@ export const FieldTime = forwardRef((_a, ref) => {
             e.stopPropagation();
         }
     }, [timeInputClickHandler, isOpen]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, 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: 'auto' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState, ref: decoratorRef }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'auto' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,

package/dist/esm/helperComponents/ButtonFieldList/ButtonFieldList.d.ts

@@ -1,4 +1,4 @@
 import { ButtonFieldProps } from '../ButtonField';
-export declare const ButtonFieldList: import("react").ForwardRefExoticComponent<Omit<ButtonFieldProps, "hasArrow" | "arrowOpen"> & Pick<import("@snack-uikit/list").DroplistProps, "open" | "onOpenChange" | "items"> & {
+export declare const ButtonFieldList: import("react").ForwardRefExoticComponent<Omit<ButtonFieldProps, "hasArrow" | "arrowOpen"> & Pick<import("@snack-uikit/list").DroplistProps, "open" | "onOpenChange" | "items" | "search"> & {
     selection?: Omit<import("@snack-uikit/list").SelectionSingleState, "mode">;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/helperComponents/ButtonFieldList/ButtonFieldList.js

@@ -17,10 +17,10 @@ import { ButtonField } from '../ButtonField';
 import { getPlacement } from './helpers';
 import styles from './styles.module.css';
 export const ButtonFieldList = forwardRef((_a, ref) => {
-    var { items, selection, open, onOpenChange } = _a, rest = __rest(_a, ["items", "selection", "open", "onOpenChange"]);
+    var { items, selection, open, onOpenChange, search } = _a, rest = __rest(_a, ["items", "selection", "open", "onOpenChange", "search"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const placement = getPlacement(rest);
-    return (_jsx(Droplist, { "data-test-id": 'button-field-list', items: items, selection: Object.assign({ mode: 'single' }, selection), open: isOpen, onOpenChange: setIsOpen, closeDroplistOnItemClick: true, 
+    return (_jsx(Droplist, { "data-test-id": 'button-field-list', items: items, selection: Object.assign({ mode: 'single' }, selection), open: isOpen, onOpenChange: setIsOpen, closeDroplistOnItemClick: true, search: search, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         triggerElemRef: ref, size: rest.size, placement: placement, children: _jsx(ButtonField, Object.assign({}, rest, { hasArrow: true, arrowOpen: isOpen, className: styles.triggerClassName })) }));

package/dist/esm/types/allFields.d.ts

@@ -9,7 +9,7 @@ export type AsyncValueRequest = Promise<{
     success: boolean;
     value?: string;
 }>;
-export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange'> & {
+export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange' | 'search'> & {
     selection?: Omit<SelectionSingleState, 'mode'>;
 };
 export type Button = Omit<NativeDroplistProps, 'items'> & {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.36.3",
+  "version": "0.36.5-preview-c8fb5dcc.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.5",
-    "@snack-uikit/calendar": "0.11.15",
+    "@snack-uikit/calendar": "0.11.16",
     "@snack-uikit/color-picker": "0.3.11",
     "@snack-uikit/divider": "3.2.2",
     "@snack-uikit/dropdown": "0.4.2",
     "@snack-uikit/icons": "0.24.1",
     "@snack-uikit/input-private": "4.5.0",
-    "@snack-uikit/list": "0.22.3",
+    "@snack-uikit/list": "0.23.0",
     "@snack-uikit/scroll": "0.9.2",
     "@snack-uikit/skeleton": "0.6.1",
     "@snack-uikit/slider": "0.3.5",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "137a71cea0541ba2cbe468c3eb73df8bb8ea9ca0"
+  "gitHead": "981796332767b10d08aedd9691a8f4180fbff196"
 }

package/src/components/FieldColor/FieldColor.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { ForwardedRef, forwardRef, useEffect, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { ColorPicker, ColorPickerProps } from '@snack-uikit/color-picker';
@@ -51,6 +51,8 @@ type FieldDateOwnProps = {
 
   value?: string;
   onChange?(value: string): void;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 } & Omit<ColorPickerProps, 'onChange' | 'value'>;
 
 export type FieldColorProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
@@ -85,6 +87,7 @@ export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(
       onFocus,
       onBlur,
       onCopyButtonClick,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -152,6 +155,7 @@ export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(
         size={size}
         error={error}
         validationState={fieldValidationState}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <Dropdown