@snack-uikit/fields 0.8.3-preview-85c5f47b.0

package/dist/components/FieldSelect/FieldSelectMulti.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { DEFAULT_LOCALE } from './constants';
+import { FieldSelectBase } from './FieldSelectBase';
+import { getDisplayedValue } from './helpers';
+import { useList } from './hooks';
+import { SelectionMode } from './types';
+export const FieldSelectMulti = forwardRef((_a, ref) => {
+    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, open, onOpenChange, locale = DEFAULT_LOCALE, getSelectedItemsText = number => ((locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`), showCopyButton: showCopyButtonProp = true, onFocus, onBlur } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "open", "onOpenChange", "locale", "getSelectedItemsText", "showCopyButton", "onFocus", "onBlur"]);
+    const selectionMode = SelectionMode.Multi;
+    const [value, setValue] = useUncontrolledProp(valueProp, [], onChange);
+    const selected = useMemo(() => options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [options, value]);
+    const displayedValue = getDisplayedValue({ selectionMode, selected, getSelectedItemsText });
+    const valueToCopy = selected.map(op => op.label).join(', ');
+    const [inputValue, setInputValue] = useState('');
+    const showAdditionalButton = Boolean((value === null || value === void 0 ? void 0 : value.length) && value.length > 0 && !disabled);
+    const isChecked = useCallback((option) => Boolean(selected.find(op => op.value === option.value)), [selected]);
+    const [isFocused, setIsFocused] = useState(false);
+    const stayOpen = useRef(false);
+    const waitingForSearchStart = searchable && !isFocused;
+    const showDisplayValue = displayedValue && (!searchable || waitingForSearchStart);
+    const { isOpen, setIsOpen, localRef, extendedOptions, onInputKeyDown, onInputValueChange, onButtonKeyDown, clearButtonRef, copyButtonRef, showClearButton, showCopyButton, onDroplistFocusLeave, firstDroplistItemRefCallback, } = useList({
+        open,
+        onOpenChange,
+        disabled,
+        readonly,
+        inputValue,
+        setInputValue,
+        searchable,
+        options,
+        isChecked,
+        showAdditionalButton,
+        showCopyButton: showCopyButtonProp,
+    });
+    const handleOpenChange = (isOpen) => {
+        if (stayOpen.current) {
+            stayOpen.current = false;
+            return;
+        }
+        setInputValue('');
+        setIsOpen(isOpen);
+    };
+    const handlePreventListClose = event => {
+        event.preventDefault();
+        if (isOpen && waitingForSearchStart) {
+            stayOpen.current = true;
+        }
+    };
+    const handleClear = () => {
+        var _a, _b;
+        setValue([]);
+        setInputValue('');
+        stayOpen.current = false;
+        if (required) {
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            setIsOpen(true);
+        }
+        else {
+            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+            setIsOpen(false);
+        }
+    };
+    const handleChange = (option) => () => {
+        setValue((selected.find(op => op.value === option.value)
+            ? selected.filter(op => op.value !== option.value)
+            : [...selected, option]).map(op => op.value));
+    };
+    const handleFocus = event => {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const handleBlur = event => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    return (_jsx(FieldSelectBase, Object.assign({}, rest, { ref: ref, localRef: localRef, selectionMode: selectionMode, options: extendedOptions, selected: selected, disabled: disabled, readonly: readonly, required: required, searchable: searchable, onChange: handleChange, onClear: handleClear, displayedValue: showDisplayValue ? displayedValue : '', valueToCopy: valueToCopy, inputValue: inputValue, onInputValueChange: onInputValueChange, onInputKeyDown: onInputKeyDown, clearButtonRef: clearButtonRef, copyButtonRef: copyButtonRef, onButtonKeyDown: onButtonKeyDown, open: isOpen, onOpenChange: handleOpenChange, locale: locale, showCopyButton: showCopyButton, showClearButton: showClearButton, onFocus: handleFocus, onBlur: handleBlur, onContainerPrivateMouseDown: handlePreventListClose, onDroplistFocusLeave: onDroplistFocusLeave, firstDroplistItemRefCallback: firstDroplistItemRefCallback })));
+});

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Option } from './types';
+export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    options: Option[];
+    open?: boolean | undefined;
+    onOpenChange?(value: boolean): void;
+    searchable?: boolean | undefined;
+    showCopyButton?: boolean | undefined;
+    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    noDataText?: string | undefined;
+    locale?: Intl.Locale | undefined;
+} & {
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    name?: string | undefined;
+    placeholder?: string | undefined;
+    id?: string | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+} & {
+    showHintIcon?: boolean | undefined;
+    validationState?: import("../../constants").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;
+} & {
+    value?: string | undefined;
+    onChange?(value: string): void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { selectAll } from '@snack-uikit/input-private';
+import { DEFAULT_LOCALE, EMPTY_OPTION } from './constants';
+import { FieldSelectBase } from './FieldSelectBase';
+import { getDisplayedValue } from './helpers';
+import { useList } from './hooks';
+import { SelectionMode } from './types';
+export const FieldSelectSingle = forwardRef((_a, ref) => {
+    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, locale = DEFAULT_LOCALE, open, onOpenChange, showCopyButton: showCopyButtonProp = true } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "locale", "open", "onOpenChange", "showCopyButton"]);
+    const selectionMode = SelectionMode.Single;
+    const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
+    const selected = useMemo(() => { var _a; return (_a = options.find(option => option.value === value)) !== null && _a !== void 0 ? _a : EMPTY_OPTION; }, [options, value]);
+    const displayedValue = getDisplayedValue({ selectionMode, selected });
+    const [inputValue, setInputValue] = useState(selected.label);
+    const showAdditionalButton = Boolean(value && !disabled);
+    const isChecked = useCallback((option) => selected.value === option.value, [selected.value]);
+    const { isOpen, setIsOpen, localRef, extendedOptions, onInputKeyDown, onInputValueChange, onButtonKeyDown, clearButtonRef, copyButtonRef, showClearButton, showCopyButton, onDroplistFocusLeave, firstDroplistItemRefCallback, } = useList({
+        open,
+        onOpenChange,
+        disabled,
+        readonly,
+        inputValue,
+        setInputValue,
+        searchable,
+        options,
+        isChecked,
+        showCopyButton: showCopyButtonProp,
+        showAdditionalButton,
+    });
+    const handleOpenChange = (isOpen) => {
+        if (isOpen) {
+            searchable && selectAll(localRef.current);
+        }
+        else {
+            setInputValue(displayedValue);
+        }
+        setIsOpen(isOpen);
+    };
+    const handleClear = () => {
+        var _a, _b;
+        setValue('');
+        setInputValue('');
+        if (required) {
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            setIsOpen(true);
+        }
+        else {
+            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+            setIsOpen(false);
+        }
+    };
+    const handleChange = (option) => () => {
+        var _a;
+        setValue(option.value);
+        setInputValue(option.label);
+        setIsOpen(false);
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    useEffect(() => {
+        setInputValue(selected.label);
+    }, [selected]);
+    return (_jsx(FieldSelectBase, Object.assign({}, rest, { ref: ref, localRef: localRef, selectionMode: selectionMode, options: extendedOptions, selected: selected, disabled: disabled, readonly: readonly, required: required, searchable: searchable, onChange: handleChange, onClear: handleClear, valueToCopy: displayedValue, inputValue: searchable ? inputValue : displayedValue, onInputValueChange: onInputValueChange, onInputKeyDown: onInputKeyDown, clearButtonRef: clearButtonRef, copyButtonRef: copyButtonRef, onButtonKeyDown: onButtonKeyDown, open: isOpen, onOpenChange: handleOpenChange, locale: locale, showCopyButton: showCopyButton, showClearButton: showClearButton, onDroplistFocusLeave: onDroplistFocusLeave, firstDroplistItemRefCallback: firstDroplistItemRefCallback })));
+});

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

@@ -0,0 +1,3 @@
+import { Option } from './types';
+export declare const EMPTY_OPTION: Option;
+export declare const DEFAULT_LOCALE: Intl.Locale;

package/dist/components/FieldSelect/constants.js

@@ -0,0 +1,2 @@
+export const EMPTY_OPTION = { value: '', label: '' };
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

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

@@ -0,0 +1,8 @@
+import { IconSize, Size } from '@snack-uikit/input-private';
+export declare function getArrowIcon({ size, open }: {
+    size: Size;
+    open: boolean;
+}): {
+    ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
+    arrowIconSize: IconSize;
+};

package/dist/components/FieldSelect/helpers/getArrowIcon.js

@@ -0,0 +1,5 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { IconSize, Size } from '@snack-uikit/input-private';
+export function getArrowIcon({ size, open }) {
+    return { ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG, arrowIconSize: size === Size.S ? IconSize.Xs : IconSize.S };
+}

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

@@ -0,0 +1,9 @@
+import { Option, SelectionMode } from '../types';
+export declare const getDisplayedValue: (props: {
+    selectionMode: SelectionMode.Single;
+    selected: Option;
+} | {
+    selectionMode: SelectionMode.Multi;
+    selected: Option[];
+    getSelectedItemsText(amount: number): string;
+}) => string;

package/dist/components/FieldSelect/helpers/getDisplayedValue.js

@@ -0,0 +1,12 @@
+import { SelectionMode } from '../types';
+export const getDisplayedValue = (props) => {
+    if (props.selectionMode === SelectionMode.Single) {
+        return props.selected.label;
+    }
+    const { selected, getSelectedItemsText } = props;
+    const selectedOptions = selected;
+    if (selectedOptions.length > 1) {
+        return getSelectedItemsText(selectedOptions.length);
+    }
+    return selectedOptions.reduce((res, cur, index, arr) => `${res}${cur.label}${index === arr.length - 1 ? '' : ','}`, '');
+};

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

@@ -0,0 +1,2 @@
+export * from './getArrowIcon';
+export * from './getDisplayedValue';

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

@@ -0,0 +1,2 @@
+export * from './getArrowIcon';
+export * from './getDisplayedValue';

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

@@ -0,0 +1,3 @@
+export * from './useFilteredOptions';
+export * from './useList';
+export * from './useListNavigation';

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

@@ -0,0 +1,3 @@
+export * from './useFilteredOptions';
+export * from './useList';
+export * from './useListNavigation';

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

@@ -0,0 +1,7 @@
+import { Option } from '../types';
+export declare function useFilteredOptions({ searchable, touched, inputValue, options, }: {
+    searchable: boolean;
+    touched: boolean;
+    inputValue: string;
+    options: Option[];
+}): Option[];

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

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+export function useFilteredOptions({ searchable, touched, inputValue, options, }) {
+    return useMemo(() => searchable && touched && inputValue
+        ? options.filter(item => item.label.toLowerCase().includes(inputValue.toLowerCase().trim()))
+        : options, [inputValue, options, searchable, touched]);
+}

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

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { FieldSelectProps } from '../FieldSelect';
+import { Option } from '../types';
+type UseListProps = Pick<FieldSelectProps, 'readonly' | 'disabled' | 'open' | 'onOpenChange' | 'options' | 'showCopyButton'> & {
+    searchable: NonNullable<FieldSelectProps['searchable']>;
+    showAdditionalButton: boolean;
+    inputValue: string;
+    setInputValue(value: string): void;
+    isChecked(option: Option): boolean;
+};
+export declare function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, inputValue, setInputValue, options, isChecked, }: UseListProps): {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+    localRef: import("react").RefObject<HTMLInputElement>;
+    clearButtonRef: import("react").RefObject<HTMLButtonElement>;
+    showClearButton: boolean;
+    copyButtonRef: import("react").RefObject<HTMLButtonElement>;
+    showCopyButton: boolean;
+    extendedOptions: {
+        checked: boolean;
+        disabled?: boolean | undefined;
+        caption?: string | undefined;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        description?: string | undefined;
+        tagLabel?: string | undefined;
+        avatar?: Omit<import("@snack-uikit/avatar").AvatarProps, "size"> | undefined;
+        value: string;
+        label: string;
+    }[];
+    onInputKeyDown: import("react").KeyboardEventHandler<HTMLInputElement>;
+    onButtonKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
+    onInputValueChange: (value: string) => void;
+    firstDroplistItemRefCallback: (element: HTMLButtonElement | null) => void;
+    onDroplistFocusLeave: (direction: string) => void;
+};
+export {};

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

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { useFilteredOptions } from './useFilteredOptions';
+import { useListNavigation } from './useListNavigation';
+export function useList({ open, onOpenChange, readonly, disabled, searchable, showAdditionalButton, showCopyButton: showCopyButtonProp, inputValue, setInputValue, options, isChecked, }) {
+    const touched = useRef(false);
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+    const showDropList = isOpen && !readonly && !disabled;
+    const showClearButton = !readonly && (showAdditionalButton || inputValue.length > 0);
+    const showCopyButton = Boolean(showAdditionalButton && showCopyButtonProp && readonly);
+    const { extendedOptions, onInputKeyDown, onButtonKeyDown, onDroplistFocusLeave, firstDroplistItemRefCallback } = useListNavigation({
+        inputRef: localRef,
+        options: useFilteredOptions({ searchable, options, touched: touched.current, inputValue }),
+        toggleListOpen: setIsOpen,
+        isChecked,
+    });
+    const handleOpenChange = (value) => {
+        if (!value) {
+            touched.current = false;
+        }
+        setIsOpen(value);
+    };
+    const handleInputValueChange = (value) => {
+        touched.current = true;
+        setIsOpen(true);
+        setInputValue(value);
+    };
+    useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [localRef, open]);
+    return {
+        isOpen: showDropList,
+        setIsOpen: handleOpenChange,
+        localRef,
+        clearButtonRef,
+        showClearButton,
+        copyButtonRef,
+        showCopyButton,
+        extendedOptions,
+        onInputKeyDown,
+        onButtonKeyDown,
+        onInputValueChange: handleInputValueChange,
+        firstDroplistItemRefCallback,
+        onDroplistFocusLeave,
+    };
+}

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

@@ -0,0 +1,26 @@
+import { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react';
+import { Option } from '../types';
+type UseListNavigationProps = {
+    options: Option[];
+    toggleListOpen(value: boolean): void;
+    inputRef: RefObject<HTMLInputElement>;
+    isChecked(option: Option): boolean;
+};
+export declare function useListNavigation({ options, toggleListOpen, inputRef, isChecked }: UseListNavigationProps): {
+    onInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onButtonKeyDown: (event: KeyboardEvent) => void;
+    onDroplistFocusLeave: (direction: string) => void;
+    extendedOptions: {
+        checked: boolean;
+        disabled?: boolean | undefined;
+        caption?: string | undefined;
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        description?: string | undefined;
+        tagLabel?: string | undefined;
+        avatar?: Omit<import("@snack-uikit/avatar").AvatarProps, "size"> | undefined;
+        value: string;
+        label: string;
+    }[];
+    firstDroplistItemRefCallback: (element: HTMLButtonElement | null) => void;
+};
+export {};

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

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { moveCursorToEnd, runAfterRerender } from '@snack-uikit/input-private';
+export function useListNavigation({ options, toggleListOpen, inputRef, isChecked }) {
+    const setInputFocus = useCallback(() => {
+        runAfterRerender(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            moveCursorToEnd(inputRef.current);
+        });
+    }, [inputRef]);
+    const firstDroplistItemRef = useRef(null);
+    const firstDroplistItemRefCallback = useCallback((element) => {
+        firstDroplistItemRef.current = element;
+    }, [firstDroplistItemRef]);
+    const setOptionFocus = useCallback(() => {
+        runAfterRerender(() => { var _a; return (_a = firstDroplistItemRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }, [firstDroplistItemRef]);
+    const leaveElement = (event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            toggleListOpen(true);
+            setOptionFocus();
+        }
+        if (event.key === 'Tab') {
+            toggleListOpen(false);
+        }
+    };
+    const handleInputKeyDown = event => {
+        leaveElement(event);
+        if (event.key === 'Enter') {
+            toggleListOpen(true);
+            setOptionFocus();
+        }
+    };
+    const onDroplistFocusLeave = useCallback((direction) => {
+        if (['top', 'common'].includes(direction)) {
+            setInputFocus();
+        }
+    }, [setInputFocus]);
+    const extendedOptions = useMemo(() => options.map(option => (Object.assign(Object.assign({}, option), { checked: isChecked(option) }))), [isChecked, options]);
+    return {
+        onInputKeyDown: handleInputKeyDown,
+        onButtonKeyDown: leaveElement,
+        onDroplistFocusLeave,
+        extendedOptions,
+        firstDroplistItemRefCallback,
+    };
+}

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

@@ -0,0 +1 @@
+export * from './FieldSelect';

package/dist/components/FieldSelect/index.js

@@ -0,0 +1 @@
+export * from './FieldSelect';

package/dist/components/FieldSelect/styles.module.css

@@ -0,0 +1,74 @@
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+  width:100%;
+}
+
+.scrollContainerS{
+  max-height:256px;
+}
+
+.scrollContainerM{
+  max-height:320px;
+}
+
+.scrollContainerL{
+  max-height:384px;
+}
+
+.displayValue{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  height:100%;
+  background-color:inherit;
+  border:none;
+  outline:none;
+}
+
+.container{
+  flex:1 1 0;
+}
+.container[data-size=s] .arrowIcon{
+  width:var(--dimension-2m, 16px) !important;
+  height:var(--dimension-2m, 16px) !important;
+  color:var(--sys-neutral-text-light, #898989);
+}
+.container[data-size=s][data-variant=single-line-container] .displayValue{
+  width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-2m, 16px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-2m, 16px) * 2));
+  padding-left:var(--space-fields-single-line-container-s-left, 6px);
+  border-radius:var(--radius-fields-s, 12px);
+}
+.container[data-size=m] .arrowIcon{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+  color:var(--sys-neutral-text-light, #898989);
+}
+.container[data-size=m][data-variant=single-line-container] .displayValue{
+  width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-3m, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-3m, 24px) * 2));
+  padding-left:var(--space-fields-single-line-container-m-left, 8px);
+  border-radius:var(--radius-fields-m, 14px);
+}
+.container[data-size=l] .arrowIcon{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+  color:var(--sys-neutral-text-light, #898989);
+}
+.container[data-size=l][data-variant=single-line-container] .displayValue{
+  width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-3m, 24px) * 2)));
+  margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--dimension-3m, 24px) * 2));
+  padding-left:var(--space-fields-single-line-container-l-left, 10px);
+  border-radius:var(--radius-fields-l, 16px);
+}
+.container:hover .arrowIcon, .container:focus-within .arrowIcon, .container[data-focused] .arrowIcon{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.container[data-disabled] .arrowIcon, .container[data-readonly] .arrowIcon{
+  color:var(--sys-neutral-text-disabled, #9e9e9e);
+}

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

@@ -0,0 +1,53 @@
+import { ReactElement } from 'react';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { FieldDecoratorProps } from '../FieldDecorator';
+export declare enum SelectionMode {
+    Single = "single",
+    Multi = "multi"
+}
+export type Option = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar' | 'disabled'> & {
+    value: string;
+    label: string;
+};
+export type ExtendedOption = Option & {
+    checked: boolean;
+};
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
+type FieldSelectOwnProps = {
+    /** Массив опций выпадающего списка */
+    options: Option[];
+    /** Открыт ли выпадающий список */
+    open?: boolean;
+    /** Колбек открытия выпадающего списка */
+    onOpenChange?(value: boolean): void;
+    /** Можно ли искать опции внутри списка */
+    searchable?: boolean;
+    /** Показывать ли кнопку Копировать для поля (актуально только для readonly = true) */
+    showCopyButton?: boolean;
+    /** Иконка-префикс для поля */
+    prefixIcon?: ReactElement;
+    /** Текст отсутствия доступных значений */
+    noDataText?: string;
+    /** Текущая локаль */
+    locale?: Intl.Locale;
+};
+export type FieldSelectBaseProps = FieldSelectOwnProps & InputProps & WrapperProps;
+type SingleModeProps = {
+    /** Выбранное значение: <br> - одно для single mode */
+    value?: Option['value'];
+    /** Колбек смены значения */
+    onChange?(value: Option['value']): void;
+};
+type MultiModeProps = {
+    /** <br> - массив для multi mode */
+    value?: Option['value'][];
+    onChange?(value: Option['value'][]): void;
+    /** Колбек формирования текста */
+    getSelectedItemsText?(amount: number): string;
+};
+export type FieldSelectSingleProps = WithSupportProps<FieldSelectBaseProps & SingleModeProps>;
+export type FieldSelectMultiProps = WithSupportProps<FieldSelectBaseProps & MultiModeProps>;
+export {};

package/dist/components/FieldSelect/types.js

@@ -0,0 +1,5 @@
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Single"] = "single";
+    SelectionMode["Multi"] = "multi";
+})(SelectionMode || (SelectionMode = {}));

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

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { InputPrivateProps, Size } from '@snack-uikit/input-private';
+import { Tooltip } from '@snack-uikit/tooltip';
+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' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
+type FieldTextOwnProps = {
+    /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`)  */
+    showCopyButton?: boolean;
+    /** Можно ли вводить больше разрешённого кол-ва символов */
+    allowMoreThanMaxLength?: boolean;
+    /** Иконка-префикс для поля */
+    prefixIcon?: ReactElement;
+};
+export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
+export declare const FieldText: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & FieldTextOwnProps & 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;
+};
+export {};