@alfalab/core-components 43.2.0 → 44.1.0

package/select-with-tags/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/components/base-select-with-tags/Component.js

@@ -0,0 +1,114 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var shared = require('../../../select/shared');
+var utils_match = require('../../utils/match.js');
+var components_tagList_component = require('../tag-list/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils/calculate-collapse-size.js');
+require('../tag/component.js');
+require('../../../tag/desktop');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+var BaseSelectWithTags = React.forwardRef(function (_a, ref) {
+    var _b = _a.OptionsList, OptionsList = _b === void 0 ? shared.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? shared.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? shared.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? shared.Arrow : _e, value = _a.value, selectedProp = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, onOpen = _a.onOpen, onInput = _a.onInput, onChange = _a.onChange, options = _a.options, _g = _a.autocomplete, autocomplete = _g === void 0 ? true : _g, match = _a.match, _h = _a.allowUnselect, allowUnselect = _h === void 0 ? true : _h, _j = _a.collapseTagList, collapseTagList = _j === void 0 ? false : _j, _k = _a.moveInputToNewLine, moveInputToNewLine = _k === void 0 ? true : _k, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, view = _a.view, FormControlComponent = _a.FormControlComponent, dataTestId = _a.dataTestId, openProp = _a.open, searchProps = _a.searchProps, restProps = tslib.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onOpen", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "Tag", "view", "FormControlComponent", "dataTestId", "open", "searchProps"]);
+    var controlled = Boolean(selectedProp);
+    var _l = React.useState(selectedProp || []), selectedTags = _l[0], setSelectedTags = _l[1];
+    var _m = React.useState(false), open = _m[0], setOpen = _m[1];
+    var updatePopover = React.useRef(function () { return null; });
+    var inputRef = React.useRef(null);
+    var frozenValue = React.useRef([]);
+    var selected = selectedProp || selectedTags;
+    var isAutocomplete = autocomplete || Boolean(match);
+    var resetValue = function () {
+        if (value) {
+            var event_1 = { target: { value: '' } };
+            onInput(event_1);
+        }
+    };
+    var handleUpdatePopover = React.useCallback(function () {
+        if (updatePopover && updatePopover.current) {
+            requestAnimationFrame(function () { var _a; return (_a = updatePopover.current) === null || _a === void 0 ? void 0 : _a.call(updatePopover); });
+        }
+    }, []);
+    var updateSelectedTags = function (payload) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(payload);
+        if (!controlled) {
+            setSelectedTags(payload.selectedMultiple);
+        }
+    };
+    var handleDeleteTag = function (deletedKey) {
+        var tags = selected.filter(function (tag) {
+            var key = typeof tag === 'string' ? tag : tag.key;
+            return deletedKey !== key;
+        });
+        updateSelectedTags({ selectedMultiple: tags });
+    };
+    var handleChange = function (payload) {
+        updateSelectedTags(payload);
+        resetValue();
+    };
+    var handleOpen = function (payload) {
+        var isOpen = payload.open;
+        if (isOpen) {
+            frozenValue.current = selected;
+        }
+        else {
+            resetValue();
+        }
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(payload);
+        setOpen(isOpen);
+    };
+    var filteredOptions = React.useMemo(function () { return utils_match.filterOptions(options, value, match); }, [options, value, match]);
+    var isOpen = Boolean(openProp !== null && openProp !== void 0 ? openProp : open);
+    return (React__default.default.createElement(shared.BaseSelect, tslib.__assign({}, restProps, { open: isOpen, dataTestId: dataTestId, view: view, ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: tslib.__assign({ value: value, isOpen: isOpen, autocomplete: view === 'desktop' && isAutocomplete, onInput: onInput, handleDeleteTag: handleDeleteTag, Tag: Tag, collapseTagList: collapseTagList, moveInputToNewLine: moveInputToNewLine, transformCollapsedTagText: transformCollapsedTagText, transformTagText: transformTagText, handleUpdatePopover: handleUpdatePopover, FormControlComponent: FormControlComponent }, (view === 'mobile' && isOpen
+            ? { selectedMultiple: frozenValue.current }
+            : null)), selected: selected, autocomplete: view === 'desktop' && isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen }, (view === 'mobile'
+        ? (function () {
+            var _a;
+            var handleApply = function () {
+                setOpen(false);
+                resetValue();
+            };
+            var handleClear = function () {
+                setOpen(false);
+                updateSelectedTags({ selectedMultiple: [] });
+                resetValue();
+            };
+            var handleClose = function () {
+                updateSelectedTags({ selectedMultiple: frozenValue.current });
+            };
+            var handleOptionsListTouchMove = function () {
+                var input = inputRef.current;
+                if (input && document.activeElement === input) {
+                    input.blur();
+                }
+            };
+            return {
+                showSearch: isAutocomplete,
+                Search: shared.Search,
+                searchProps: tslib.__assign(tslib.__assign({ filterFn: function () { return true; } }, searchProps), { value: value, componentProps: tslib.__assign(tslib.__assign({ leftAddons: null, clear: true, onClear: resetValue }, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps), { ref: mergeRefs__default.default([
+                            inputRef,
+                            (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.ref,
+                        ]), onChange: onInput }) }),
+                bottomSheetProps: {
+                    onClose: handleClose,
+                    containerProps: {
+                        onTouchMove: handleOptionsListTouchMove,
+                    },
+                },
+                optionsListProps: tslib.__assign({ footer: (React__default.default.createElement(shared.Footer, { showClear: true, handleClear: handleClear, handleApply: handleApply, dataTestId: dataTestId })) }, restProps.optionsListProps),
+            };
+        })()
+        : null))));
+});
+
+exports.BaseSelectWithTags = BaseSelectWithTags;

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

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

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

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseSelectWithTags_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-merge-refs');
+require('../../../select/shared');
+require('../../utils/match.js');
+require('../tag-list/component.js');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils/calculate-collapse-size.js');
+require('../tag/component.js');
+require('../../../tag/desktop');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
+
+
+
+exports.BaseSelectWithTags = components_baseSelectWithTags_Component.BaseSelectWithTags;

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

@@ -4,31 +4,31 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var desktop = require('../../../tag/desktop');
-var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
+var CrossCircleMIcon = require('@alfalab/icons-glyph/CrossCircleMIcon');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tag":"select-with-tags__tag_hrq6s","tagNoClose":"select-with-tags__tagNoClose_hrq6s","tagContentWrap":"select-with-tags__tagContentWrap_hrq6s","tagCross":"select-with-tags__tagCross_hrq6s"};
+var styles = {"tag":"select-with-tags__tag_alm4j","tagNoClose":"select-with-tags__tagNoClose_alm4j","tagContentWrap":"select-with-tags__tagContentWrap_alm4j","cursorPointer":"select-with-tags__cursorPointer_alm4j","tagCross":"select-with-tags__tagCross_alm4j"};
 require('./index.css');
 
 var Tag = function (_a) {
-    var _b;
-    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
+    var _b, _c;
+    var _d = _a.option, content = _d.content, key = _d.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, checked = _a.checked, disabled = _a.disabled, props = tslib.__rest(_a, ["option", "onClick", "handleDeleteTag", "checked", "disabled"]);
     var handleClick = React.useCallback(function () {
         if (handleDeleteTag) {
             handleDeleteTag(key);
         }
     }, [handleDeleteTag, key]);
-    return (React__default.default.createElement(desktop.TagDesktop, tslib.__assign({ key: key, size: 'xxs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default.default(styles.tag, (_b = {}, _b[styles.tagNoClose] = !handleDeleteTag, _b)) }, props),
-        React__default.default.createElement("span", { className: styles.tagContentWrap },
+    return (React__default.default.createElement(desktop.TagDesktop, tslib.__assign({ key: key, size: 'xxs', shape: 'rectangular', onClick: onClick, checked: checked, className: cn__default.default(styles.tag, (_b = {}, _b[styles.tagNoClose] = !handleDeleteTag, _b)), disabled: disabled }, props),
+        React__default.default.createElement("span", { className: cn__default.default(styles.tagContentWrap, (_c = {}, _c[styles.cursorPointer] = !disabled, _c)) },
             content,
             handleDeleteTag && (
             // eslint-disable-next-line
             React__default.default.createElement("span", { className: styles.tagCross, onClick: handleClick },
-                React__default.default.createElement(CrossCompactMIcon.CrossCompactMIcon, null))))));
+                React__default.default.createElement(CrossCircleMIcon.CrossCircleMIcon, { width: 16, height: 16 }))))));
 };
 
 exports.Tag = Tag;

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

@@ -1,7 +1,10 @@
-/* hash: 1hsrm */
+/* hash: 1pc0w */
 :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_hrq6s {
-    padding: 0;
-    padding-left: var(--gap-m);
-    margin: var(--gap-2xs);
+} .select-with-tags__tag_alm4j {
+    padding: 0 0 0 var(--gap-xs);
+    margin: var(--gap-3xs);
     cursor: default
-} .select-with-tags__tag_hrq6s:active:not(:disabled) {
+} .select-with-tags__tag_alm4j:not(.select-with-tags__tagNoClose_alm4j):active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_hrq6s:hover:not(:disabled):not(:active) {
+    } .select-with-tags__tag_alm4j:not(.select-with-tags__tagNoClose_alm4j):hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
-    } .select-with-tags__tag_hrq6s > span {
+    } .select-with-tags__tag_alm4j > span {
         width: 100%;
         height: 100%;
-    } .select-with-tags__tagNoClose_hrq6s {
-    padding-right: var(--gap-m);
-} .select-with-tags__tagContentWrap_hrq6s {
+    } .select-with-tags__tag_alm4j.select-with-tags__tag_alm4j {
+    min-width: unset;
+} .select-with-tags__tagNoClose_alm4j {
+    padding-right: var(--gap-xs);
+    padding-left: var(--gap-xs);
+} .select-with-tags__tagContentWrap_alm4j {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     align-items: center;
     height: 100%;
+} .select-with-tags__cursorPointer_alm4j {
     cursor: pointer;
-} .select-with-tags__tagCross_hrq6s {
-    padding-right: var(--gap-xs);
+} .select-with-tags__tagCross_alm4j {
+    padding: 0 6px;
     height: 100%
-} .select-with-tags__tagCross_hrq6s:hover {
-        opacity: 0.7;
-    } .select-with-tags__tagCross_hrq6s:active {
-        opacity: 0.5;
-    } .select-with-tags__tagCross_hrq6s svg {
+} .select-with-tags__tagCross_alm4j > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted);
+    } .select-with-tags__tagCross_alm4j:hover > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-hover);
+    } .select-with-tags__tagCross_alm4j:active > svg {
+        fill: var(--color-light-neutral-translucent-700-inverted-press);
+    } .select-with-tags__tagCross_alm4j svg {
         height: 100%;
     }

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

@@ -5,7 +5,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('../../../tag/desktop');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
 
 
 

package/select-with-tags/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/components/tag-list/component.js

@@ -2,46 +2,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsFormControl = require('../../../form-control');
 var hooks = require('@alfalab/hooks');
 var utils_calculateCollapseSize = require('../../utils/calculate-collapse-size.js');
 var components_tag_component = require('../tag/component.js');
 require('../../../tag/desktop');
-require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('@alfalab/icons-glyph/CrossCircleMIcon');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select-with-tags__component_1vyiq","xl":"select-with-tags__xl_1vyiq","contentWrapper":"select-with-tags__contentWrapper_1vyiq","l":"select-with-tags__l_1vyiq","m":"select-with-tags__m_1vyiq","s":"select-with-tags__s_1vyiq","contentWrapperVertical":"select-with-tags__contentWrapperVertical_1vyiq","hasInnerLabel":"select-with-tags__hasInnerLabel_1vyiq","hasTags":"select-with-tags__hasTags_1vyiq","addons":"select-with-tags__addons_1vyiq","field":"select-with-tags__field_1vyiq","input":"select-with-tags__input_1vyiq","block":"select-with-tags__block_1vyiq","focusVisible":"select-with-tags__focusVisible_1vyiq","placeholder":"select-with-tags__placeholder_1vyiq","addons-size-m":"select-with-tags__addons-size-m_1vyiq","addons-size-l":"select-with-tags__addons-size-l_1vyiq","addons-size-xl":"select-with-tags__addons-size-xl_1vyiq","label":"select-with-tags__label_1vyiq"};
+var styles = {"component":"select-with-tags__component_dbh43","xl":"select-with-tags__xl_dbh43","contentWrapper":"select-with-tags__contentWrapper_dbh43","placeholder":"select-with-tags__placeholder_dbh43","input":"select-with-tags__input_dbh43","l":"select-with-tags__l_dbh43","m":"select-with-tags__m_dbh43","s":"select-with-tags__s_dbh43","hasInnerLabel":"select-with-tags__hasInnerLabel_dbh43","hasTags":"select-with-tags__hasTags_dbh43","addons":"select-with-tags__addons_dbh43","field":"select-with-tags__field_dbh43","disabled":"select-with-tags__disabled_dbh43","hidden":"select-with-tags__hidden_dbh43","block":"select-with-tags__block_dbh43","focusVisible":"select-with-tags__focusVisible_dbh43","addons-size-m":"select-with-tags__addons-size-m_dbh43","addons-size-l":"select-with-tags__addons-size-l_dbh43","addons-size-xl":"select-with-tags__addons-size-xl_dbh43","label":"select-with-tags__label_dbh43"};
 require('./index.css');
 
 var TagList = function (_a) {
     var _b, _c, _d;
-    var _e = _a.size, size = _e === void 0 ? 'xl' : _e, open = _a.open, disabled = _a.disabled, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, fieldClassName = _a.fieldClassName, _g = _a.value, value = _g === void 0 ? '' : _g, autocomplete = _a.autocomplete, label = _a.label; _a.valueRenderer; var onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isPopoverOpen = _a.isPopoverOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h; _a.setSelectedItems; _a.toggleMenu; var labelView = _a.labelView, restProps = tslib.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isPopoverOpen", "handleUpdatePopover", "Tag", "setSelectedItems", "toggleMenu", "labelView"]);
-    var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(false), isShowMoreEnabled = _k[0], setShowMoreEnabled = _k[1];
-    var _l = React.useState(1), visibleElements = _l[0], setVisibleElements = _l[1];
-    var _m = React.useState(false), inputOnNewLine = _m[0], setInputOnNewLine = _m[1];
+    var _e = _a.size, size = _e === void 0 ? 'xl' : _e, open = _a.open, disabled = _a.disabled, placeholder = _a.placeholder, _f = _a.selectedMultiple, selectedMultiple = _f === void 0 ? [] : _f, Arrow = _a.Arrow, innerProps = _a.innerProps, className = _a.className, fieldClassName = _a.fieldClassName, _g = _a.value, value = _g === void 0 ? '' : _g, autocomplete = _a.autocomplete, label = _a.label; _a.valueRenderer; var onInput = _a.onInput, handleDeleteTag = _a.handleDeleteTag, collapseTagList = _a.collapseTagList, moveInputToNewLine = _a.moveInputToNewLine, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, isOpen = _a.isOpen, handleUpdatePopover = _a.handleUpdatePopover, _h = _a.Tag, Tag = _h === void 0 ? components_tag_component.Tag : _h; _a.setSelectedItems; _a.toggleMenu; var labelView = _a.labelView, _j = _a.inputRef, inputRefProp = _j === void 0 ? null : _j, FormControlComponent = _a.FormControlComponent, restProps = tslib.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isOpen", "handleUpdatePopover", "Tag", "setSelectedItems", "toggleMenu", "labelView", "inputRef", "FormControlComponent"]);
+    var _k = React.useState(false), focused = _k[0], setFocused = _k[1];
+    var _l = React.useState(false), isShowMoreEnabled = _l[0], setShowMoreEnabled = _l[1];
+    var _m = React.useState(1), visibleElements = _m[0], setVisibleElements = _m[1];
+    var _o = React.useState(false), inputOnNewLine = _o[0], setInputOnNewLine = _o[1];
     var wrapperRef = React.useRef(null);
     var inputRef = React.useRef(null);
     var contentWrapperRef = React.useRef(null);
     var focusVisible = hooks.useFocus(wrapperRef, 'keyboard')[0];
     var inputFocusVisible = hooks.useFocus(inputRef, 'keyboard')[0];
     hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
-        setShowMoreEnabled(isPopoverOpen);
-    }, [isPopoverOpen]);
+        setShowMoreEnabled(isOpen);
+    }, [isOpen]);
     React.useEffect(function () {
         setVisibleElements(selectedMultiple.length);
-        setShowMoreEnabled(false);
-    }, [selectedMultiple]);
+    }, [selectedMultiple.length]);
     hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         if (collapseTagList && contentWrapperRef.current) {
             var totalVisibleElements = utils_calculateCollapseSize.calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
             setVisibleElements(totalVisibleElements);
         }
+        handleUpdatePopover === null || handleUpdatePopover === void 0 ? void 0 : handleUpdatePopover();
     }, [collapseTagList, visibleElements, autocomplete]);
     var handleFocus = React.useCallback(function () { return setFocused(true); }, []);
     var handleBlur = React.useCallback(function () { return setFocused(false); }, []);
@@ -49,7 +50,7 @@ var TagList = function (_a) {
     var handleMouseDown = React.useCallback(function (event) {
         event.preventDefault();
     }, []);
-    var onClick = innerProps.onClick, restInnerProps = tslib.__rest(innerProps, ["onClick"]);
+    var _p = (innerProps || {}), onClick = _p.onClick, restInnerProps = tslib.__rest(_p, ["onClick"]);
     var handleClick = React.useCallback(function (event) {
         if (onClick && contentWrapperRef.current) {
             var eventTarget = event.target;
@@ -98,37 +99,32 @@ var TagList = function (_a) {
         if (transformCollapsedTagText) {
             return transformCollapsedTagText(selectedMultiple.length - visibleElements);
         }
-        return "+".concat(selectedMultiple.length - visibleElements);
+        return "\u0415\u0449\u0451 ".concat(selectedMultiple.length - visibleElements);
     }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
     var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
     var hasInnerLabel = Boolean(label) && labelView !== 'outer';
-    /**
-     * Флаг который позволит добавлять класс с вертикальными
-     * отступами если элементы не помещаются в один ряд,
-     * для того чтобы не менялась высота инпута
-     */
-    var shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !hasInnerLabel);
     return (React__default.default.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn__default.default(className, styles.component, styles[size]) },
-        React__default.default.createElement(coreComponentsFormControl.FormControl, tslib.__assign({}, restProps, { ref: innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles.field, (_b = {},
+        React__default.default.createElement(FormControlComponent, tslib.__assign({}, restProps, { ref: innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles.field, (_b = {},
                 _b[styles.focusVisible] = focusVisible,
+                _b[styles.disabled] = disabled,
                 _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default.default(styles.addons, styles["addons-size-".concat(size)]), label: label, labelClassName: styles.label, labelView: labelView }),
             React__default.default.createElement("div", { className: cn__default.default(styles.contentWrapper, (_c = {},
                     _c[styles.hasInnerLabel] = hasInnerLabel,
                     _c[styles.hasTags] = selectedMultiple.length > 0,
-                    _c[styles.contentWrapperVertical] = shouldAddVerticalMargin,
                     _c)), ref: contentWrapperRef },
                 selectedMultiple.map(function (option, index) {
-                    return isShowMoreEnabled || index + 1 <= visibleElements ? (React__default.default.createElement(Tag, { option: tslib.__assign(tslib.__assign({}, option), { content: transformTagText
+                    return (collapseTagList && isShowMoreEnabled) || index + 1 <= visibleElements ? (React__default.default.createElement(Tag, { checked: true, disabled: disabled, option: tslib.__assign(tslib.__assign({}, option), { content: transformTagText
                                 ? transformTagText(option.content)
-                                : option.content }), key: option.key, handleDeleteTag: handleDeleteTag })) : null;
+                                : option.content }), key: option.key, handleDeleteTag: disabled ? undefined : handleDeleteTag })) : null;
                 }),
-                visibleElements < selectedMultiple.length && (React__default.default.createElement(Tag, { "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, option: {
+                collapseTagList && visibleElements < selectedMultiple.length && (React__default.default.createElement(Tag, { disabled: disabled, "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, view: 'filled', option: {
                         key: 'collapse',
                         content: collapseTagTitle,
                     } })),
-                autocomplete && (React__default.default.createElement("input", tslib.__assign({}, restInnerProps, { autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn__default.default(styles.input, (_d = {},
+                autocomplete && (React__default.default.createElement("input", tslib.__assign({}, restInnerProps, { autoComplete: 'off', ref: mergeRefs__default.default([inputRef, inputRefProp]), value: value, onChange: onInput, className: cn__default.default(styles.input, (_d = {},
                         _d[styles.focusVisible] = inputFocusVisible,
                         _d[styles.block] = inputOnNewLine,
+                        _d[styles.hidden] = !isOpen && selectedMultiple.length > 0,
                         _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),
                 placeholder && !filled && !autocomplete && (React__default.default.createElement("span", { className: styles.placeholder }, placeholder))))));
 };

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

@@ -1,4 +1,4 @@
-/* hash: 1sxql */
+/* hash: 1z09l */
 :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_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-l) var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-m) var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-m) var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-s) var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-l);
-    padding-bottom: var(--gap-l);
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-m);
-    padding-bottom: var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-xs);
-    padding-bottom: var(--gap-xs);
-} .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 18px 14px;
+    } .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 14px 10px;
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 10px;
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 6px;
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: 6px;
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: 6px;
+    } .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43 {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
-    margin: var(--gap-2xs-neg)
-} .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq:not(.select-with-tags__contentWrapperVertical_1vyiq):not(.select-with-tags__hasInnerLabel_1vyiq) {
-        padding-top: 0;
-        padding-bottom: 0;
-    } .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq.select-with-tags__hasInnerLabel_1vyiq {
+    width: 100%
+} .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43.select-with-tags__hasInnerLabel_dbh43 {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
-    } .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq.select-with-tags__hasTags_1vyiq.select-with-tags__hasInnerLabel_1vyiq {
+    } .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43.select-with-tags__hasTags_dbh43.select-with-tags__hasInnerLabel_dbh43 {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
-    } .select-with-tags__component_1vyiq:hover .select-with-tags__addons_1vyiq {
+    } .select-with-tags__component_dbh43:hover .select-with-tags__addons_dbh43 {
     opacity: 0.7;
-} .select-with-tags__field_1vyiq {
+} .select-with-tags__field_dbh43 {
     cursor: pointer;
-} .select-with-tags__input_1vyiq {
+} .select-with-tags__disabled_dbh43 {
+    cursor: not-allowed;
+} .select-with-tags__input_dbh43 {
     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_1vyiq:disabled {
-        color: var(--color-light-text-secondary);
-    } .select-with-tags__input_1vyiq::placeholder {
+} .select-with-tags__input_dbh43:disabled,
+    .select-with-tags__input_dbh43:disabled::placeholder {
+        color: var(--color-light-text-tertiary);
+    } .select-with-tags__input_dbh43::placeholder {
         color: var(--color-light-text-secondary);
-    } .select-with-tags__input_1vyiq:focus::placeholder {
+    } .select-with-tags__input_dbh43:focus::placeholder {
         color: var(--color-light-text-tertiary);
-    } .select-with-tags__block_1vyiq {
+    } .select-with-tags__hidden_dbh43 {
+    max-height: 0;
+    margin: 0;
+} .select-with-tags__block_dbh43 {
     min-width: 100%;
-} .select-with-tags__focusVisible_1vyiq {
+} .select-with-tags__focusVisible_dbh43 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .select-with-tags__placeholder_1vyiq {
+} .select-with-tags__placeholder_dbh43 {
     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_1vyiq {
+} .select-with-tags__addons_dbh43 {
     align-self: flex-start;
     padding-top: var(--gap-s);
-} .select-with-tags__addons-size-m_1vyiq {
+} .select-with-tags__addons-size-m_dbh43 {
     padding-top: var(--gap-m);
-} .select-with-tags__addons-size-l_1vyiq {
+} .select-with-tags__addons-size-l_dbh43 {
     padding-top: var(--gap-l);
-} .select-with-tags__addons-size-xl_1vyiq {
+} .select-with-tags__addons-size-xl_dbh43 {
     padding-top: var(--gap-xl);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__label_dbh43 {
     top: 5px;
     left: 12px;
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__label_dbh43 {
     top: 8px;
     left: 12px;
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__label_dbh43 {
     top: 10px;
     left: 16px;
-} .select-with-tags__component_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__label_dbh43 {
     top: 14px;
     left: 16px;
-} .select-with-tags__component_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43 .select-with-tags__label_dbh43 {
     top: 14px;
     align-items: flex-start;
     height: auto;