@alfalab/core-components 43.1.3 → 44.0.0

package/select-with-tags/modern/components/base-select-with-tags/Component.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import React from 'react';
+import { ForwardRefExoticComponent } from "react";
+import { BottomSheetProps } from "../../../../bottom-sheet";
+import { FormControlProps } from "../../../../form-control";
+import { PopoverProps } from "../../../../popover";
+import { BaseSelectProps, OptionShape } from "../../../../select/shared";
+declare const BaseSelectWithTags: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onChange" | "selected" | "multiple" | "autocomplete" | "nativeSelect" | "Field"> & {
+    value: string;
+    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selected?: (string | OptionShape)[] | undefined;
+    onChange?: ((payload: {
+        selectedMultiple: (string | OptionShape)[];
+        initiator?: OptionShape | null | undefined;
+        name?: string | undefined;
+    }) => void) | undefined;
+    autocomplete?: boolean | undefined;
+    match?: import("../../types").OptionMatcher | undefined;
+    Tag?: import("../../types").TagComponent | undefined;
+    collapseTagList?: boolean | undefined;
+    moveInputToNewLine?: boolean | undefined;
+    transformCollapsedTagText?: ((collapsedCount: number) => string) | undefined;
+    transformTagText?: ((tagText?: React.ReactNode) => React.ReactNode) | undefined;
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & {
+    view: 'mobile' | 'desktop';
+    FormControlComponent: ForwardRefExoticComponent<FormControlProps>;
+    Popover?: React.ForwardRefExoticComponent<PopoverProps> | undefined;
+    BottomSheet?: React.ForwardRefExoticComponent<BottomSheetProps> | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { BaseSelectWithTags };

package/select-with-tags/modern/components/base-select-with-tags/Component.js

@@ -0,0 +1,133 @@
+import React, { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { BaseSelect, Search, Footer, OptionsList, Optgroup, Option, Arrow } from '../../../../select/modern/shared';
+import { filterOptions } from '../../utils/match.js';
+import { TagList } from '../tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../tag/component.js';
+import '../../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../../utils/calculate-collapse-size.js';
+
+const BaseSelectWithTags = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Arrow: Arrow$1 = Arrow, value, selected: selectedProp, size = 'xl', onOpen, onInput, onChange, options, autocomplete = true, match, allowUnselect = true, collapseTagList = false, moveInputToNewLine = true, transformCollapsedTagText, transformTagText, Tag, view, FormControlComponent, dataTestId, open: openProp, searchProps, ...restProps }, ref) => {
+    const controlled = Boolean(selectedProp);
+    const [selectedTags, setSelectedTags] = useState(selectedProp || []);
+    const [open, setOpen] = useState(false);
+    const updatePopover = useRef(() => null);
+    const inputRef = useRef(null);
+    const frozenValue = useRef([]);
+    const selected = selectedProp || selectedTags;
+    const isAutocomplete = autocomplete || Boolean(match);
+    const resetValue = () => {
+        if (value) {
+            const event = { target: { value: '' } };
+            onInput(event);
+        }
+    };
+    const handleUpdatePopover = useCallback(() => {
+        if (updatePopover && updatePopover.current) {
+            requestAnimationFrame(() => updatePopover.current?.());
+        }
+    }, []);
+    const updateSelectedTags = (payload) => {
+        onChange?.(payload);
+        if (!controlled) {
+            setSelectedTags(payload.selectedMultiple);
+        }
+    };
+    const handleDeleteTag = (deletedKey) => {
+        const tags = selected.filter((tag) => {
+            const key = typeof tag === 'string' ? tag : tag.key;
+            return deletedKey !== key;
+        });
+        updateSelectedTags({ selectedMultiple: tags });
+    };
+    const handleChange = (payload) => {
+        updateSelectedTags(payload);
+        resetValue();
+    };
+    const handleOpen = (payload) => {
+        const { open: isOpen } = payload;
+        if (isOpen) {
+            frozenValue.current = selected;
+        }
+        else {
+            resetValue();
+        }
+        onOpen?.(payload);
+        setOpen(isOpen);
+    };
+    const filteredOptions = useMemo(() => filterOptions(options, value, match), [options, value, match]);
+    const isOpen = Boolean(openProp ?? open);
+    return (React.createElement(BaseSelect, { ...restProps, open: isOpen, dataTestId: dataTestId, view: view, ref: ref, Option: Option$1, Field: TagList, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
+            value,
+            isOpen,
+            autocomplete: view === 'desktop' && isAutocomplete,
+            onInput,
+            handleDeleteTag,
+            Tag,
+            collapseTagList,
+            moveInputToNewLine,
+            transformCollapsedTagText,
+            transformTagText,
+            handleUpdatePopover,
+            FormControlComponent,
+            ...(view === 'mobile' && isOpen
+                ? { selectedMultiple: frozenValue.current }
+                : null),
+        }, selected: selected, autocomplete: view === 'desktop' && isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen, ...(view === 'mobile'
+            ? (() => {
+                const handleApply = () => {
+                    setOpen(false);
+                    resetValue();
+                };
+                const handleClear = () => {
+                    setOpen(false);
+                    updateSelectedTags({ selectedMultiple: [] });
+                    resetValue();
+                };
+                const handleClose = () => {
+                    updateSelectedTags({ selectedMultiple: frozenValue.current });
+                };
+                const handleOptionsListTouchMove = () => {
+                    const input = inputRef.current;
+                    if (input && document.activeElement === input) {
+                        input.blur();
+                    }
+                };
+                return {
+                    showSearch: isAutocomplete,
+                    Search,
+                    searchProps: {
+                        filterFn: () => true,
+                        ...searchProps,
+                        value,
+                        componentProps: {
+                            leftAddons: null,
+                            clear: true,
+                            onClear: resetValue,
+                            ...searchProps?.componentProps,
+                            ref: mergeRefs([
+                                inputRef,
+                                searchProps?.componentProps?.ref,
+                            ]),
+                            onChange: onInput,
+                        },
+                    },
+                    bottomSheetProps: {
+                        onClose: handleClose,
+                        containerProps: {
+                            onTouchMove: handleOptionsListTouchMove,
+                        },
+                    },
+                    optionsListProps: {
+                        footer: (React.createElement(Footer, { showClear: true, handleClear: handleClear, handleApply: handleApply, dataTestId: dataTestId })),
+                        ...restProps.optionsListProps,
+                    },
+                };
+            })()
+            : null) }));
+});
+
+export { BaseSelectWithTags };

package/select-with-tags/modern/components/base-select-with-tags/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/select-with-tags/modern/components/base-select-with-tags/index.js

@@ -0,0 +1,12 @@
+export { BaseSelectWithTags } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import '../../../../select/modern/shared';
+import '../tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../tag/component.js';
+import '../../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../../utils/match.js';
+import '../../utils/calculate-collapse-size.js';

package/select-with-tags/modern/components/tag/component.js

@@ -1,24 +1,24 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
 import { TagDesktop } from '../../../../tag/modern/desktop';
-import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
+import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 
-const styles = {"tag":"select-with-tags__tag_tmrfn","tagNoClose":"select-with-tags__tagNoClose_tmrfn","tagContentWrap":"select-with-tags__tagContentWrap_tmrfn","tagCross":"select-with-tags__tagCross_tmrfn"};
+const styles = {"tag":"select-with-tags__tag_1dfjv","tagNoClose":"select-with-tags__tagNoClose_1dfjv","tagContentWrap":"select-with-tags__tagContentWrap_1dfjv","cursorPointer":"select-with-tags__cursorPointer_1dfjv","tagCross":"select-with-tags__tagCross_1dfjv"};
 require('./index.css');
 
-const Tag = ({ option: { content, key }, onClick, handleDeleteTag, ...props }) => {
+const Tag = ({ option: { content, key }, onClick, handleDeleteTag, checked, disabled, ...props }) => {
     const handleClick = useCallback(() => {
         if (handleDeleteTag) {
             handleDeleteTag(key);
         }
     }, [handleDeleteTag, key]);
-    return (React.createElement(TagDesktop, { key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn(styles.tag, { [styles.tagNoClose]: !handleDeleteTag }), ...props },
-        React.createElement("span", { className: styles.tagContentWrap },
+    return (React.createElement(TagDesktop, { key: key, size: 'xxs', shape: 'rectangular', onClick: onClick, checked: checked, className: cn(styles.tag, { [styles.tagNoClose]: !handleDeleteTag }), disabled: disabled, ...props },
+        React.createElement("span", { className: cn(styles.tagContentWrap, { [styles.cursorPointer]: !disabled }) },
             content,
             handleDeleteTag && (
             // eslint-disable-next-line
             React.createElement("span", { className: styles.tagCross, onClick: handleClick },
-                React.createElement(CrossCompactMIcon, null))))));
+                React.createElement(CrossCircleMIcon, { width: 16, height: 16 }))))));
 };
 
 export { Tag };

package/select-with-tags/modern/components/tag/index.css

@@ -1,7 +1,10 @@
-/* hash: 1hsrm */
+/* hash: 1l540 */
 :root {
 } /* deprecated */ :root {
     --color-light-accent-secondary: #0e0e0e;
+    --color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
+    --color-light-neutral-translucent-700-inverted-hover: rgba(239, 240, 252, 0.65);
+    --color-light-neutral-translucent-700-inverted-press: rgba(243, 245, 254, 0.75);
     --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -14,9 +17,8 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-2xs: 4px;
+    --gap-3xs: 2px;
     --gap-xs: 8px;
-    --gap-m: 16px;
 } :root {
 } :root {
 } :root {
@@ -47,35 +49,40 @@
     /* mobile */
 
     /* mobile inverted */
-} .select-with-tags__tag_tmrfn {
-    padding: 0;
-    padding-left: var(--gap-m);
-    margin: var(--gap-2xs);
+} .select-with-tags__tag_1dfjv {
+    padding: 0 0 0 var(--gap-xs);
+    margin: var(--gap-3xs);
     cursor: default
-} .select-with-tags__tag_tmrfn:active:not(:disabled) {
+} .select-with-tags__tag_1dfjv:not(.select-with-tags__tagNoClose_1dfjv):active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_tmrfn:hover:not(:disabled):not(:active) {
+    } .select-with-tags__tag_1dfjv:not(.select-with-tags__tagNoClose_1dfjv):hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_tmrfn > span {
+    } .select-with-tags__tag_1dfjv > span {
         width: 100%;
         height: 100%;
-    } .select-with-tags__tagNoClose_tmrfn {
-    padding-right: var(--gap-m);
-} .select-with-tags__tagContentWrap_tmrfn {
+    } .select-with-tags__tag_1dfjv.select-with-tags__tag_1dfjv {
+    min-width: unset;
+} .select-with-tags__tagNoClose_1dfjv {
+    padding-right: var(--gap-xs);
+    padding-left: var(--gap-xs);
+} .select-with-tags__tagContentWrap_1dfjv {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     height: 100%;
+} .select-with-tags__cursorPointer_1dfjv {
     cursor: pointer;
-} .select-with-tags__tagCross_tmrfn {
-    padding-right: var(--gap-xs);
+} .select-with-tags__tagCross_1dfjv {
+    padding: 0 6px;
     height: 100%
-} .select-with-tags__tagCross_tmrfn:hover {
-        opacity: 0.7;
-    } .select-with-tags__tagCross_tmrfn:active {
-        opacity: 0.5;
-    } .select-with-tags__tagCross_tmrfn svg {
+} .select-with-tags__tagCross_1dfjv > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted);
+    } .select-with-tags__tagCross_1dfjv:hover > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-hover);
+    } .select-with-tags__tagCross_1dfjv:active > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-press);
+    } .select-with-tags__tagCross_1dfjv svg {
         height: 100%;
     }

package/select-with-tags/modern/components/tag/index.js

@@ -2,4 +2,4 @@ export { Tag } from './component.js';
 import 'react';
 import 'classnames';
 import '../../../../tag/modern/desktop';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';

package/select-with-tags/modern/components/tag-list/component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, MutableRefObject, ReactNode } from 'react';
+import { ChangeEvent, FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
 import { FormControlProps } from "../../../../form-control";
 import { FieldProps } from "../../../../select/shared";
 import { TagComponent } from "../../types";
@@ -6,15 +6,16 @@ type TagListOwnProps = {
     value?: string;
     handleDeleteTag?: (key: string) => void;
     onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
-    inputRef?: MutableRefObject<HTMLInputElement>;
+    inputRef?: RefObject<HTMLInputElement>;
     autocomplete?: boolean;
-    isPopoverOpen?: boolean;
+    isOpen?: boolean;
     collapseTagList?: boolean;
     moveInputToNewLine?: boolean;
     transformCollapsedTagText?: (collapsedCount: number) => string;
     transformTagText?: (tagText?: ReactNode) => ReactNode;
     Tag?: TagComponent;
     handleUpdatePopover?: () => void;
+    FormControlComponent: ForwardRefExoticComponent<FormControlProps & RefAttributes<HTMLDivElement>>;
 };
-declare const TagList: FC<FieldProps & FormControlProps & TagListOwnProps>;
+declare const TagList: FC<Partial<FieldProps> & FormControlProps & TagListOwnProps>;
 export { TagList };

package/select-with-tags/modern/components/tag-list/component.js

@@ -1,16 +1,16 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { FormControl } from '../../../../form-control/modern';
 import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { calculateTotalElementsPerRow } from '../../utils/calculate-collapse-size.js';
 import { Tag } from '../tag/component.js';
 import '../../../../tag/modern/desktop';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
 
-const styles = {"component":"select-with-tags__component_75tgj","xl":"select-with-tags__xl_75tgj","contentWrapper":"select-with-tags__contentWrapper_75tgj","l":"select-with-tags__l_75tgj","m":"select-with-tags__m_75tgj","s":"select-with-tags__s_75tgj","contentWrapperVertical":"select-with-tags__contentWrapperVertical_75tgj","hasInnerLabel":"select-with-tags__hasInnerLabel_75tgj","hasTags":"select-with-tags__hasTags_75tgj","addons":"select-with-tags__addons_75tgj","field":"select-with-tags__field_75tgj","input":"select-with-tags__input_75tgj","block":"select-with-tags__block_75tgj","focusVisible":"select-with-tags__focusVisible_75tgj","placeholder":"select-with-tags__placeholder_75tgj","addons-size-m":"select-with-tags__addons-size-m_75tgj","addons-size-l":"select-with-tags__addons-size-l_75tgj","addons-size-xl":"select-with-tags__addons-size-xl_75tgj","label":"select-with-tags__label_75tgj"};
+const styles = {"component":"select-with-tags__component_8subl","xl":"select-with-tags__xl_8subl","contentWrapper":"select-with-tags__contentWrapper_8subl","placeholder":"select-with-tags__placeholder_8subl","input":"select-with-tags__input_8subl","l":"select-with-tags__l_8subl","m":"select-with-tags__m_8subl","s":"select-with-tags__s_8subl","hasInnerLabel":"select-with-tags__hasInnerLabel_8subl","hasTags":"select-with-tags__hasTags_8subl","addons":"select-with-tags__addons_8subl","field":"select-with-tags__field_8subl","disabled":"select-with-tags__disabled_8subl","hidden":"select-with-tags__hidden_8subl","block":"select-with-tags__block_8subl","focusVisible":"select-with-tags__focusVisible_8subl","addons-size-m":"select-with-tags__addons-size-m_8subl","addons-size-l":"select-with-tags__addons-size-l_8subl","addons-size-xl":"select-with-tags__addons-size-xl_8subl","label":"select-with-tags__label_8subl"};
 require('./index.css');
 
-const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple = [], Arrow, innerProps, className, fieldClassName, value = '', autocomplete, label, valueRenderer, onInput, handleDeleteTag, collapseTagList, moveInputToNewLine, transformCollapsedTagText, transformTagText, isPopoverOpen, handleUpdatePopover, Tag: Tag$1 = Tag, setSelectedItems, toggleMenu, labelView, ...restProps }) => {
+const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple = [], Arrow, innerProps, className, fieldClassName, value = '', autocomplete, label, valueRenderer, onInput, handleDeleteTag, collapseTagList, moveInputToNewLine, transformCollapsedTagText, transformTagText, isOpen, handleUpdatePopover, Tag: Tag$1 = Tag, setSelectedItems, toggleMenu, labelView, inputRef: inputRefProp = null, FormControlComponent, ...restProps }) => {
     const [focused, setFocused] = useState(false);
     const [isShowMoreEnabled, setShowMoreEnabled] = useState(false);
     const [visibleElements, setVisibleElements] = useState(1);
@@ -21,17 +21,17 @@ const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple =
     const [focusVisible] = useFocus(wrapperRef, 'keyboard');
     const [inputFocusVisible] = useFocus(inputRef, 'keyboard');
     useLayoutEffect_SAFE_FOR_SSR(() => {
-        setShowMoreEnabled(isPopoverOpen);
-    }, [isPopoverOpen]);
+        setShowMoreEnabled(isOpen);
+    }, [isOpen]);
     useEffect(() => {
         setVisibleElements(selectedMultiple.length);
-        setShowMoreEnabled(false);
-    }, [selectedMultiple]);
+    }, [selectedMultiple.length]);
     useLayoutEffect_SAFE_FOR_SSR(() => {
         if (collapseTagList && contentWrapperRef.current) {
             const totalVisibleElements = calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
             setVisibleElements(totalVisibleElements);
         }
+        handleUpdatePopover?.();
     }, [collapseTagList, visibleElements, autocomplete]);
     const handleFocus = useCallback(() => setFocused(true), []);
     const handleBlur = useCallback(() => setFocused(false), []);
@@ -39,7 +39,7 @@ const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple =
     const handleMouseDown = useCallback((event) => {
         event.preventDefault();
     }, []);
-    const { onClick, ...restInnerProps } = innerProps;
+    const { onClick, ...restInnerProps } = (innerProps || {});
     const handleClick = useCallback((event) => {
         if (onClick && contentWrapperRef.current) {
             const eventTarget = event.target;
@@ -88,38 +88,33 @@ const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple =
         if (transformCollapsedTagText) {
             return transformCollapsedTagText(selectedMultiple.length - visibleElements);
         }
-        return `+${selectedMultiple.length - visibleElements}`;
+        return `Ещё ${selectedMultiple.length - visibleElements}`;
     }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
     const filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
     const hasInnerLabel = Boolean(label) && labelView !== 'outer';
-    /**
-     * Флаг который позволит добавлять класс с вертикальными
-     * отступами если элементы не помещаются в один ряд,
-     * для того чтобы не менялась высота инпута
-     */
-    const shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !hasInnerLabel);
     return (React.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn(className, styles.component, styles[size]) },
-        React.createElement(FormControl, { ...restProps, ref: innerProps.ref, fieldClassName: cn(fieldClassName, styles.field, {
+        React.createElement(FormControlComponent, { ...restProps, ref: innerProps?.ref, fieldClassName: cn(fieldClassName, styles.field, {
                 [styles.focusVisible]: focusVisible,
+                [styles.disabled]: disabled,
             }), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn(styles.addons, styles[`addons-size-${size}`]), label: label, labelClassName: styles.label, labelView: labelView },
             React.createElement("div", { className: cn(styles.contentWrapper, {
                     [styles.hasInnerLabel]: hasInnerLabel,
                     [styles.hasTags]: selectedMultiple.length > 0,
-                    [styles.contentWrapperVertical]: shouldAddVerticalMargin,
                 }), ref: contentWrapperRef },
-                selectedMultiple.map((option, index) => isShowMoreEnabled || index + 1 <= visibleElements ? (React.createElement(Tag$1, { option: {
+                selectedMultiple.map((option, index) => (collapseTagList && isShowMoreEnabled) || index + 1 <= visibleElements ? (React.createElement(Tag$1, { checked: true, disabled: disabled, option: {
                         ...option,
                         content: transformTagText
                             ? transformTagText(option.content)
                             : option.content,
-                    }, key: option.key, handleDeleteTag: handleDeleteTag })) : null),
-                visibleElements < selectedMultiple.length && (React.createElement(Tag$1, { "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, option: {
+                    }, key: option.key, handleDeleteTag: disabled ? undefined : handleDeleteTag })) : null),
+                collapseTagList && visibleElements < selectedMultiple.length && (React.createElement(Tag$1, { disabled: disabled, "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, view: 'filled', option: {
                         key: 'collapse',
                         content: collapseTagTitle,
                     } })),
-                autocomplete && (React.createElement("input", { ...restInnerProps, autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn(styles.input, {
+                autocomplete && (React.createElement("input", { ...restInnerProps, autoComplete: 'off', ref: mergeRefs([inputRef, inputRefProp]), value: value, onChange: onInput, className: cn(styles.input, {
                         [styles.focusVisible]: inputFocusVisible,
                         [styles.block]: inputOnNewLine,
+                        [styles.hidden]: !isOpen && selectedMultiple.length > 0,
                     }), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder })),
                 placeholder && !filled && !autocomplete && (React.createElement("span", { className: styles.placeholder }, placeholder))))));
 };

package/select-with-tags/modern/components/tag-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sxql */
+/* hash: 1lxux */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -16,57 +16,59 @@
     /* Hard up */
 } :root {
 } :root {
+    --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-l: 20px;
     --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .select-with-tags__component_75tgj.select-with-tags__xl_75tgj .select-with-tags__contentWrapper_75tgj {
-    padding: var(--gap-l) var(--gap-m);
-} .select-with-tags__component_75tgj.select-with-tags__l_75tgj .select-with-tags__contentWrapper_75tgj {
-    padding: var(--gap-m) var(--gap-m);
-} .select-with-tags__component_75tgj.select-with-tags__m_75tgj .select-with-tags__contentWrapper_75tgj {
-    padding: var(--gap-m) var(--gap-s);
-} .select-with-tags__component_75tgj.select-with-tags__s_75tgj .select-with-tags__contentWrapper_75tgj {
-    padding: var(--gap-s) var(--gap-s);
-} .select-with-tags__component_75tgj.select-with-tags__xl_75tgj .select-with-tags__contentWrapperVertical_75tgj {
-    padding-top: var(--gap-l);
-    padding-bottom: var(--gap-l);
-} .select-with-tags__component_75tgj.select-with-tags__l_75tgj .select-with-tags__contentWrapperVertical_75tgj {
-    padding-top: var(--gap-m);
-    padding-bottom: var(--gap-m);
-} .select-with-tags__component_75tgj.select-with-tags__m_75tgj .select-with-tags__contentWrapperVertical_75tgj {
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-} .select-with-tags__component_75tgj.select-with-tags__s_75tgj .select-with-tags__contentWrapperVertical_75tgj {
-    padding-top: var(--gap-xs);
-    padding-bottom: var(--gap-xs);
-} .select-with-tags__component_75tgj .select-with-tags__contentWrapper_75tgj {
+} .select-with-tags__component_8subl.select-with-tags__xl_8subl .select-with-tags__contentWrapper_8subl {
+        padding: 18px 14px;
+    } .select-with-tags__component_8subl.select-with-tags__xl_8subl .select-with-tags__placeholder_8subl {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__xl_8subl .select-with-tags__input_8subl {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__l_8subl .select-with-tags__contentWrapper_8subl {
+        padding: 14px 10px;
+    } .select-with-tags__component_8subl.select-with-tags__l_8subl .select-with-tags__placeholder_8subl {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__l_8subl .select-with-tags__input_8subl {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__m_8subl .select-with-tags__contentWrapper_8subl {
+        padding: 10px;
+    } .select-with-tags__component_8subl.select-with-tags__m_8subl .select-with-tags__placeholder_8subl {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__m_8subl .select-with-tags__input_8subl {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_8subl.select-with-tags__s_8subl .select-with-tags__contentWrapper_8subl {
+        padding: 6px;
+    } .select-with-tags__component_8subl.select-with-tags__s_8subl .select-with-tags__placeholder_8subl {
+        padding-left: 6px;
+    } .select-with-tags__component_8subl.select-with-tags__s_8subl .select-with-tags__input_8subl {
+        margin-left: 6px;
+    } .select-with-tags__component_8subl .select-with-tags__contentWrapper_8subl {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
-    margin: var(--gap-2xs-neg)
-} .select-with-tags__component_75tgj .select-with-tags__contentWrapper_75tgj:not(.select-with-tags__contentWrapperVertical_75tgj):not(.select-with-tags__hasInnerLabel_75tgj) {
-        padding-top: 0;
-        padding-bottom: 0;
-    } .select-with-tags__component_75tgj .select-with-tags__contentWrapper_75tgj.select-with-tags__hasInnerLabel_75tgj {
+    width: 100%
+} .select-with-tags__component_8subl .select-with-tags__contentWrapper_8subl.select-with-tags__hasInnerLabel_8subl {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
-    } .select-with-tags__component_75tgj .select-with-tags__contentWrapper_75tgj.select-with-tags__hasTags_75tgj.select-with-tags__hasInnerLabel_75tgj {
+    } .select-with-tags__component_8subl .select-with-tags__contentWrapper_8subl.select-with-tags__hasTags_8subl.select-with-tags__hasInnerLabel_8subl {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
-    } .select-with-tags__component_75tgj:hover .select-with-tags__addons_75tgj {
+    } .select-with-tags__component_8subl:hover .select-with-tags__addons_8subl {
     opacity: 0.7;
-} .select-with-tags__field_75tgj {
+} .select-with-tags__field_8subl {
     cursor: pointer;
-} .select-with-tags__input_75tgj {
+} .select-with-tags__disabled_8subl {
+    cursor: not-allowed;
+} .select-with-tags__input_8subl {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -80,46 +82,50 @@
     border: none;
     font-family: var(--font-family);
     color: var(--color-light-text-primary)
-} .select-with-tags__input_75tgj:disabled {
-        color: var(--color-light-text-secondary);
-    } .select-with-tags__input_75tgj::placeholder {
+} .select-with-tags__input_8subl:disabled,
+    .select-with-tags__input_8subl:disabled::placeholder {
+        color: var(--color-light-text-tertiary);
+    } .select-with-tags__input_8subl::placeholder {
         color: var(--color-light-text-secondary);
-    } .select-with-tags__input_75tgj:focus::placeholder {
+    } .select-with-tags__input_8subl:focus::placeholder {
         color: var(--color-light-text-tertiary);
-    } .select-with-tags__block_75tgj {
+    } .select-with-tags__hidden_8subl {
+    max-height: 0;
+    margin: 0;
+} .select-with-tags__block_8subl {
     min-width: 100%;
-} .select-with-tags__focusVisible_75tgj {
+} .select-with-tags__focusVisible_8subl {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .select-with-tags__placeholder_75tgj {
+} .select-with-tags__placeholder_8subl {
     display: flex;
     align-items: center;
     min-height: 28px;
     padding-left: var(--gap-2xs);
-    color: var(--color-light-text-tertiary);
+    color: var(--color-light-text-secondary);
     pointer-events: none;
-} .select-with-tags__addons_75tgj {
+} .select-with-tags__addons_8subl {
     align-self: flex-start;
     padding-top: var(--gap-s);
-} .select-with-tags__addons-size-m_75tgj {
+} .select-with-tags__addons-size-m_8subl {
     padding-top: var(--gap-m);
-} .select-with-tags__addons-size-l_75tgj {
+} .select-with-tags__addons-size-l_8subl {
     padding-top: var(--gap-l);
-} .select-with-tags__addons-size-xl_75tgj {
+} .select-with-tags__addons-size-xl_8subl {
     padding-top: var(--gap-xl);
-} .select-with-tags__component_75tgj.select-with-tags__s_75tgj .select-with-tags__label_75tgj {
+} .select-with-tags__component_8subl.select-with-tags__s_8subl .select-with-tags__label_8subl {
     top: 5px;
     left: 12px;
-} .select-with-tags__component_75tgj.select-with-tags__m_75tgj .select-with-tags__label_75tgj {
+} .select-with-tags__component_8subl.select-with-tags__m_8subl .select-with-tags__label_8subl {
     top: 8px;
     left: 12px;
-} .select-with-tags__component_75tgj.select-with-tags__l_75tgj .select-with-tags__label_75tgj {
+} .select-with-tags__component_8subl.select-with-tags__l_8subl .select-with-tags__label_8subl {
     top: 10px;
     left: 16px;
-} .select-with-tags__component_75tgj.select-with-tags__xl_75tgj .select-with-tags__label_75tgj {
+} .select-with-tags__component_8subl.select-with-tags__xl_8subl .select-with-tags__label_8subl {
     top: 14px;
     left: 16px;
-} .select-with-tags__component_75tgj .select-with-tags__label_75tgj {
+} .select-with-tags__component_8subl .select-with-tags__label_8subl {
     top: 14px;
     align-items: flex-start;
     height: auto;

package/select-with-tags/modern/components/tag-list/index.js

@@ -1,9 +1,9 @@
 export { TagList } from './component.js';
 import 'react';
+import 'react-merge-refs';
 import 'classnames';
-import '../../../../form-control/modern';
 import '@alfalab/hooks';
 import '../tag/component.js';
 import '../../../../tag/modern/desktop';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '../../utils/calculate-collapse-size.js';

package/select-with-tags/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectWithTagsDesktopProps } from "../types";
+declare const SelectWithTagsDesktop: React.ForwardRefExoticComponent<SelectWithTagsDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTagsDesktop };