@snack-uikit/fields 0.9.2 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.10.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.9.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -38,11 +38,11 @@ const [isOpen, setIsOpen] = useState(false);
   labelTooltip='You can choose any date'
   required={true}
   hint='You have entered wrong date'
-  size={FieldDate.sizes.S}
-  validationState={FieldDate.validationStates.Default}
+  size='s'
+  validationState='default'
 />
 
-...
+// ...
 
 const [value, setValue] = useState('1234');
 const [isHidden, setIsHidden] = useState(false);
@@ -66,12 +66,12 @@ const [isHidden, setIsHidden] = useState(false);
   labelTooltip='You can enter password here'
   required={true}
   hint='You have entered wrong password'
-  size={FieldSecure.sizes.S}
-  validationState={FieldSecure.validationStates.Error}
+  size='s'
+  validationState='error'
   prefixIcon={<PlaceholderSVG/>}
 />
 
-...
+// ...
 
 const [value, setValue] = useState('abc');
 
@@ -92,12 +92,12 @@ const [value, setValue] = useState('abc');
   labelTooltip='You can input any text'
   required={true}
   hint='You have entered wrong answer'
-  size={FieldText.sizes.S}
-  validationState={FieldText.validationStates.Error}
+  size='s'
+  validationState='error'
   prefixIcon={<PlaceholderSVG/>}
 />
 
-...
+// ...
 
 const [value, setValue] = useState('abc');
 
@@ -120,17 +120,17 @@ const [value, setValue] = useState('abc');
   labelTooltip='You can input any text'
   required={true}
   hint='You have entered wrong answer'
-  size={FieldTextArea.sizes.S}
-  validationState={FieldTextArea.validationStates.Error}
+  size='s'
+  validationState='error'
 />
 
-...
+// ...
 
 const [value, setValue] = useState('1234');
 const [isOpen, setIsOpen] = useState(false);
 
 <FieldSelect
-  mode={FieldSelect.selectionModes.Single}
+  mode='single'
   value={value}
   onChange={setValue}
   options={[{value: 'op1', label: 'Option 1'}, {value: 'op2', label: 'Option 2'}]}
@@ -150,8 +150,8 @@ const [isOpen, setIsOpen] = useState(false);
   labelTooltip='You can choose any option'
   required={true}
   hint='You have chosen wrong item'
-  size={FieldSelect.sizes.S}
-  validationState={FieldSelect.validationStates.Error}
+  size='s'
+  validationState='error'
   prefixIcon={<PlaceholderSVG/>}
 />
 ```
@@ -170,11 +170,11 @@ const [isOpen, setIsOpen] = useState(false);
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | labelFor | `string` | - | Аттрибут for |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| 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.Default | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 ## FieldText
 ### Props
@@ -197,10 +197,10 @@ const [isOpen, setIsOpen] = useState(false);
 | label | `string` | - | Лейбл |
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | ValidationState.Default | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
@@ -226,10 +226,10 @@ const [isOpen, setIsOpen] = useState(false);
 | label | `string` | - | Лейбл |
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | ValidationState.Default | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | ref | `Ref<HTMLTextAreaElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
@@ -256,10 +256,10 @@ const [isOpen, setIsOpen] = useState(false);
 | label | `string` | - | Лейбл |
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | ValidationState.Default | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
@@ -283,10 +283,10 @@ const [isOpen, setIsOpen] = useState(false);
 | label | `string` | - | Лейбл |
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | Size.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | ValidationState.Default | Состояние валидации |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
@@ -295,7 +295,7 @@ const [isOpen, setIsOpen] = useState(false);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | options* | `Option[]` | - | Массив опций выпадающего списка |
-| selectionMode | enum SelectionMode: `"single"`, `"multi"` | SelectionMode.Single |  |
+| selectionMode | "single" \| "multi" | single |  |
 | open | `boolean` | - | Открыт ли выпадающий список |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия выпадающего списка |
 | searchable | `boolean` | - | Можно ли искать опции внутри списка |
@@ -315,7 +315,7 @@ const [isOpen, setIsOpen] = useState(false);
 | labelTooltip | `string` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | Tooltip.placements.Top | Расположение подсказки лейбла |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | hint | `string` | - | Подсказка внизу |
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |

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

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { InputPrivateProps, Size } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ValidationState } from '../../constants';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
@@ -21,9 +19,5 @@ type FieldDateOwnProps = {
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
 export declare const FieldDate: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string | undefined;
-} & import("react").AriaAttributes & FieldDateOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>> & {
-    sizes: typeof Size;
-    validationStates: typeof ValidationState;
-    labelTooltipPlacements: typeof Tooltip.placements;
-};
+} & import("react").AriaAttributes & FieldDateOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldDate/FieldDate.js

@@ -16,10 +16,9 @@ import { useUncontrolledProp } from 'uncontrollable';
 import { Calendar } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/droplist';
 import { CalendarSVG } from '@snack-uikit/icons';
-import { IconSize, InputPrivate, runAfterRerender, Size, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
@@ -30,18 +29,18 @@ import { useHandlers } from './hooks/useHandlers';
 import styles from './styles.module.css';
 import { parseDate } from './utils';
 const CALENDAR_SIZE_MAP = {
-    [Size.S]: Calendar.sizes.S,
-    [Size.M]: Calendar.sizes.M,
-    [Size.L]: Calendar.sizes.M,
+    [SIZE.S]: 's',
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'm',
 };
-const ForwardedFieldDate = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = Size.S, validationState = ValidationState.Default, locale = DEFAULT_LOCALE } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "locale"]);
+export const FieldDate = forwardRef((_a, ref) => {
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, locale = DEFAULT_LOCALE } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "locale"]);
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const [pickerAutofocus, setPickerAutofocus] = useState(false);
     const localRef = useRef(null);
     const clearButtonRef = useRef(null);
     const copyButtonRef = useRef(null);
-    const calendarIconSize = size === Size.S ? IconSize.Xs : IconSize.S;
+    const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
     const showDropList = isOpen && !readonly && !disabled;
     const showAdditionalButton = Boolean(valueProp && !disabled);
     const showClearButton = showAdditionalButton && !readonly;
@@ -134,19 +133,15 @@ const ForwardedFieldDate = 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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: Dropdown.triggers.Click, triggerClassName: styles.triggerClassName, widthStrategy: Dropdown.widthStrategies.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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,
                 onOpenChange: setIsOpen,
-            }), { content: _jsx("div", Object.assign({ className: styles.calendarWrapper, "data-size": size }, { children: _jsx(Calendar, { mode: Calendar.modes.Date, size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, navigationStartRef: element => {
+            }), { content: _jsx("div", Object.assign({ className: styles.calendarWrapper, "data-size": size }, { children: _jsx(Calendar, { mode: 'date', size: CALENDAR_SIZE_MAP[size], value: valueProp ? parseDate(valueProp) : undefined, onChangeValue: handleSelectDate, navigationStartRef: element => {
                         if (pickerAutofocus) {
                             element === null || element === void 0 ? void 0 : element.focus();
                             setPickerAutofocus(false);
                         }
-                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) })) }, { children: _jsx(FieldContainerPrivate, Object.assign({ className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: ContainerVariant.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: InputPrivate.types.Text, id: id, name: name, "data-test-id": 'field-date__input' }) })) })) })));
+                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) })) }, { children: _jsx(FieldContainerPrivate, Object.assign({ 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' }) })) })) })));
 });
-export const FieldDate = ForwardedFieldDate;
-FieldDate.sizes = Size;
-FieldDate.validationStates = ValidationState;
-FieldDate.labelTooltipPlacements = Tooltip.placements;

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

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
-import { Size } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ValidationState } from '../../constants';
 import { FooterProps } from './Footer';
 import { HeaderProps } from './Header';
 export type FieldDecoratorProps = WithSupportProps<{
@@ -14,7 +12,3 @@ export type FieldDecoratorProps = WithSupportProps<{
     readonly?: boolean;
 } & HeaderProps & FooterProps>;
 export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace FieldDecorator {
-    var validationStates: typeof ValidationState;
-    var sizes: typeof Size;
-}

package/dist/components/FieldDecorator/FieldDecorator.js

@@ -11,16 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { Size } from '@snack-uikit/input-private';
+import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ValidationState } from '../../constants';
+import { VALIDATION_STATE } from '../../constants';
 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, validationState = ValidationState.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "validationState"]);
+    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "validationState"]);
     const isFieldActive = !disabled && !readonly;
-    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: hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? validationState : ValidationState.Default })] })));
+    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: hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? validationState : VALIDATION_STATE.Default })] })));
 }
-FieldDecorator.validationStates = ValidationState;
-FieldDecorator.sizes = Size;

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

@@ -1,5 +1,5 @@
 import { Size } from '@snack-uikit/input-private';
-import { ValidationState } from '../../constants';
+import { ValidationState } from '../../types';
 export type FooterProps = {
     /** Допустимая длинна текста */
     length?: {

package/dist/components/FieldDecorator/Footer.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
-import { ValidationState } from '../../constants';
+import { VALIDATION_STATE } from '../../constants';
 import styles from './styles.module.css';
 function getValidationIcon(props) {
     var _a;
     let Component;
     let showIcon;
     switch (props.validationState) {
-        case ValidationState.Success:
+        case VALIDATION_STATE.Success:
             Component = CheckFilledSVG;
             showIcon = true;
             break;
-        case ValidationState.Error:
+        case VALIDATION_STATE.Error:
             Component = CrossFilledSVG;
             showIcon = true;
             break;
-        case ValidationState.Warning:
+        case VALIDATION_STATE.Warning:
             Component = AlarmFilledSVG;
             showIcon = true;
             break;
-        case ValidationState.Default:
+        case VALIDATION_STATE.Default:
         default:
             Component = InfoFilledSVG;
             showIcon = false;
@@ -28,7 +28,7 @@ function getValidationIcon(props) {
     }
     return ((_a = props.showHintIcon) !== null && _a !== void 0 ? _a : showIcon) ? (_jsx(Component, { size: 16, "data-validation": props.validationState, className: styles.hintIcon })) : null;
 }
-export function Footer({ length, hint, size, validationState = ValidationState.Default, showHintIcon }) {
+export function Footer({ length, hint, size, validationState = VALIDATION_STATE.Default, showHintIcon }) {
     const isReverseContainer = !hint && length;
     const limitExceeded = length && length.max && length.current > length.max;
     const icon = useMemo(() => getValidationIcon({ validationState, showHintIcon }), [showHintIcon, validationState]);

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

@@ -13,7 +13,7 @@ export type HeaderProps = {
     size?: Size;
     /**
      * Расположение подсказки лейбла
-     * @default Tooltip.placements.Top
+     * @default top
      */
     labelTooltipPlacement?: TooltipProps['placement'];
 };

package/dist/components/FieldDecorator/Header.js

@@ -3,6 +3,6 @@ import { QuestionSVG } from '@snack-uikit/icons';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import styles from './styles.module.css';
-export function Header({ label = '', labelTooltip, labelFor, size, required = false, labelTooltipPlacement = Tooltip.placements.Top, }) {
+export function Header({ label = '', labelTooltip, labelFor, size, required = false, labelTooltipPlacement = 'top', }) {
     return (_jsx("span", Object.assign({ className: styles.header, "data-size": size }, { children: label && (_jsxs("span", Object.assign({ className: styles.labelLayout }, { children: [_jsx("label", Object.assign({ className: styles.label, htmlFor: labelFor, "data-test-id": 'field-decorator__label' }, { children: _jsx(TruncateString, { text: label }) })), required && _jsx("span", Object.assign({ "data-test-id": 'field-decorator__required-sign' }, { children: "*" })), labelTooltip && (_jsx(Tooltip, Object.assign({ tip: labelTooltip, placement: labelTooltipPlacement, "data-test-id": 'field-decorator__label-tooltip' }, { children: _jsx(QuestionSVG, { size: 16, className: styles.icon, "data-test-id": 'field-decorator__label-tooltip-trigger' }) })))] }))) })));
 }

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

@@ -1,8 +1,6 @@
 import { ReactElement } from 'react';
-import { InputPrivateProps, Size } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ValidationState } from '../../constants';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'size' | 'validationState' | 'showHintIcon' | 'labelTooltipPlacement'>;
@@ -21,9 +19,5 @@ type FieldSecureOwnProps = {
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string | undefined;
-} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>> & {
-    sizes: typeof Size;
-    validationStates: typeof ValidationState;
-    labelTooltipPlacements: typeof Tooltip.placements;
-};
+} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "disabled" | "readonly" | "name" | "placeholder" | "id" | "maxLength" | "onFocus" | "onBlur"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldSecure/FieldSecure.js

@@ -13,15 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useMemo, useRef } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
-import { InputPrivate, moveCursorToEnd, runAfterRerender, Size, useButtonNavigation, } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
+import { InputPrivate, moveCursorToEnd, runAfterRerender, SIZE, useButtonNavigation, } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useHideButton } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-const ForwardedFieldSecure = 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 = ValidationState.Default, prefixIcon } = _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"]);
+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 } = _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"]);
     const localRef = useRef(null);
     const copyButtonRef = useRef(null);
     const hideButtonRef = useRef(null);
@@ -47,9 +46,5 @@ const ForwardedFieldSecure = 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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, Object.assign({ size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: ContainerVariant.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 ? InputPrivate.types.Password : InputPrivate.types.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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, Object.assign({ 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' }) })) })));
 });
-export const FieldSecure = ForwardedFieldSecure;
-FieldSecure.sizes = Size;
-FieldSecure.validationStates = ValidationState;
-FieldSecure.labelTooltipPlacements = Tooltip.placements;

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

@@ -1,16 +1,9 @@
 /// <reference types="react" />
-import { Size } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
-import { ValidationState } from '../../constants';
-import { FieldSelectMultiProps, FieldSelectSingleProps, SelectionMode } from './types';
+import { SELECTION_MODE } from './constants';
+import { FieldSelectMultiProps, FieldSelectSingleProps } from './types';
 export type FieldSelectProps = ({
-    selectionMode?: SelectionMode.Single;
+    selectionMode?: typeof SELECTION_MODE.Single;
 } & FieldSelectSingleProps) | ({
-    selectionMode: SelectionMode.Multi;
+    selectionMode: typeof SELECTION_MODE.Multi;
 } & FieldSelectMultiProps);
-export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLInputElement>> & {
-    sizes: typeof Size;
-    validationStates: typeof ValidationState;
-    selectionModes: typeof SelectionMode;
-    labelTooltipPlacements: typeof Tooltip.placements;
-};
+export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelect.js

@@ -11,24 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Size } from '@snack-uikit/input-private';
-import { Tooltip } from '@snack-uikit/tooltip';
-import { ValidationState } from '../../constants';
+import { SELECTION_MODE } from './constants';
 import { FieldSelectMulti } from './FieldSelectMulti';
 import { FieldSelectSingle } from './FieldSelectSingle';
-import { SelectionMode } from './types';
-const ForwardedFieldSelect = forwardRef((_a, ref) => {
-    var { selectionMode = SelectionMode.Single } = _a, props = __rest(_a, ["selectionMode"]);
+export const FieldSelect = forwardRef((_a, ref) => {
+    var { selectionMode = SELECTION_MODE.Single } = _a, props = __rest(_a, ["selectionMode"]);
     switch (selectionMode) {
-        case SelectionMode.Multi:
+        case SELECTION_MODE.Multi:
             return _jsx(FieldSelectMulti, Object.assign({}, props, { ref: ref }));
-        case SelectionMode.Single:
+        case SELECTION_MODE.Single:
         default:
             return _jsx(FieldSelectSingle, Object.assign({}, props, { ref: ref }));
     }
 });
-export const FieldSelect = ForwardedFieldSelect;
-FieldSelect.sizes = Size;
-FieldSelect.validationStates = ValidationState;
-FieldSelect.selectionModes = SelectionMode;
-FieldSelect.labelTooltipPlacements = Tooltip.placements;

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

@@ -1,5 +1,6 @@
 import { KeyboardEventHandler, MouseEventHandler, RefCallback, RefObject } from 'react';
-import { ExtendedOption, FieldSelectBaseProps, Option, SelectionMode } from './types';
+import { SELECTION_MODE } from './constants';
+import { ExtendedOption, FieldSelectBaseProps, Option } from './types';
 type BaseProps = Omit<FieldSelectBaseProps, 'open' | 'onOpenChange' | 'options'> & Required<Pick<FieldSelectBaseProps, 'open' | 'onOpenChange'>> & {
     localRef: RefObject<HTMLInputElement>;
     options: ExtendedOption[];
@@ -16,14 +17,14 @@ type BaseProps = Omit<FieldSelectBaseProps, 'open' | 'onOpenChange' | 'options'>
     copyButtonRef: RefObject<HTMLButtonElement>;
     onClick?: MouseEventHandler<HTMLElement>;
     onContainerPrivateMouseDown?: MouseEventHandler<HTMLElement>;
-    onDroplistFocusLeave: (direction: string) => void;
+    onDroplistFocusLeave(direction: string): void;
     firstDroplistItemRefCallback: RefCallback<HTMLButtonElement>;
 };
 type Props = ({
-    selectionMode: SelectionMode.Single;
+    selectionMode: typeof SELECTION_MODE.Single;
     selected: Option;
 } & BaseProps) | ({
-    selectionMode: SelectionMode.Multi;
+    selectionMode: typeof SELECTION_MODE.Multi;
     selected: Option[];
 } & BaseProps);
 export declare const FieldSelectBase: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectBase.js

@@ -13,20 +13,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import mergeRefs from 'merge-refs';
 import { forwardRef, useMemo, } from 'react';
 import { Droplist } from '@snack-uikit/droplist';
-import { InputPrivate, Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ContainerVariant, ValidationState } from '../../constants';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
 import { useHandlers } from '../FieldDate/hooks/useHandlers';
 import { FieldDecorator } from '../FieldDecorator';
+import { SELECTION_MODE } from './constants';
 import { getArrowIcon } from './helpers';
 import styles from './styles.module.css';
-import { SelectionMode } from './types';
 export const FieldSelectBase = forwardRef((_a, ref) => {
-    var { selectionMode, onClear, showClearButton, clearButtonRef, copyButtonRef, onChange, inputValue, onInputValueChange, displayedValue, valueToCopy, localRef, onInputKeyDown: onInputKeyDownProp, onButtonKeyDown: onButtonKeyDownProp, id, name, placeholder, options, disabled = false, readonly = false, searchable = true, showCopyButton = true, open, onOpenChange, onFocus, onBlur, onContainerPrivateMouseDown, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = Size.S, validationState = ValidationState.Default, prefixIcon, locale, noDataText = (locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? 'Нет данных' : 'No data', firstDroplistItemRefCallback, onDroplistFocusLeave } = _a, rest = __rest(_a, ["selectionMode", "onClear", "showClearButton", "clearButtonRef", "copyButtonRef", "onChange", "inputValue", "onInputValueChange", "displayedValue", "valueToCopy", "localRef", "onInputKeyDown", "onButtonKeyDown", "id", "name", "placeholder", "options", "disabled", "readonly", "searchable", "showCopyButton", "open", "onOpenChange", "onFocus", "onBlur", "onContainerPrivateMouseDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "locale", "noDataText", "firstDroplistItemRefCallback", "onDroplistFocusLeave"]);
+    var { selectionMode, onClear, showClearButton, clearButtonRef, copyButtonRef, onChange, inputValue, onInputValueChange, displayedValue, valueToCopy, localRef, onInputKeyDown: onInputKeyDownProp, onButtonKeyDown: onButtonKeyDownProp, id, name, placeholder, options, disabled = false, readonly = false, searchable = true, showCopyButton = true, open, onOpenChange, onFocus, onBlur, onContainerPrivateMouseDown, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, locale, noDataText = (locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? 'Нет данных' : 'No data', firstDroplistItemRefCallback, onDroplistFocusLeave } = _a, rest = __rest(_a, ["selectionMode", "onClear", "showClearButton", "clearButtonRef", "copyButtonRef", "onChange", "inputValue", "onInputValueChange", "displayedValue", "valueToCopy", "localRef", "onInputKeyDown", "onButtonKeyDown", "id", "name", "placeholder", "options", "disabled", "readonly", "searchable", "showCopyButton", "open", "onOpenChange", "onFocus", "onBlur", "onContainerPrivateMouseDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "locale", "noDataText", "firstDroplistItemRefCallback", "onDroplistFocusLeave"]);
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-    const Item = selectionMode === SelectionMode.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
+    const Item = selectionMode === SELECTION_MODE.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
     const { onInputKeyDown: inputKeyDownNavigationHandler, inputTabIndex, setInitialTabIndices, buttons, } = useButtonNavigation({
@@ -47,5 +47,5 @@ export const FieldSelectBase = forwardRef((_a, ref) => {
         },
         onDroplistFocusLeave,
     ]);
-    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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: Droplist.triggers.Click, triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: Droplist.placements.Bottom, onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, Object.assign({ className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: ContainerVariant.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }) }, { children: [_jsx(InputPrivate, { id: id, name: name, type: InputPrivate.types.Text, placeholder: placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", Object.assign({ className: styles.displayValue, "data-test-id": 'field-select__displayed-value' }, { children: displayedValue })))] })) }, { children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
+    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, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, Object.assign({ className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }) }, { children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", Object.assign({ className: styles.displayValue, "data-test-id": 'field-select__displayed-value' }, { children: displayedValue })))] })) }, { children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
 });

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

@@ -21,14 +21,14 @@ export declare const FieldSelectMulti: import("react").ForwardRefExoticComponent
     onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
 } & {
     showHintIcon?: boolean | undefined;
-    validationState?: import("../../constants").ValidationState | undefined;
+    validationState?: import("../../types").ValidationState | undefined;
     hint?: string | undefined;
     size?: import("@snack-uikit/input-private").Size | undefined;
     label?: string | undefined;
     className?: string | undefined;
     labelTooltip?: string | undefined;
     required?: boolean | undefined;
-    labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/constants").Placement | undefined;
+    labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
 } & {
     value?: string[] | undefined;
     onChange?(value: string[]): void;