@alfalab/core-components 20.2.0 → 20.4.0

package/select/modern/typings.d.ts

@@ -71,6 +71,10 @@ type BaseSelectProps = {
      * Начальное состояние селекта
      */
     defaultOpen?: boolean;
+    /**
+     * Управление открытием
+     */
+    open?: boolean;
     /**
      * Возможность выбрать несколько значений
      */

package/select/presets/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-2a25a340.js');
+require('../tslib.es6-0f234b35.js');
 require('react');
 require('classnames');
 require('../components/checkmark/Component.js');

package/select/presets/useLazyLoading/hook.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-2a25a340.js');
+var tslib_es6 = require('../../tslib.es6-0f234b35.js');
 var React = require('react');
 require('classnames');
 require('../../components/checkmark/Component.js');
@@ -903,7 +903,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     window.IntersectionObserverEntry = IntersectionObserverEntry;
 }());
 
-var styles = {"skeleton":"select__skeleton_ansiq"};
+var styles = {"skeleton":"select__skeleton_1n68q"};
 require('./index.css');
 
 var DEBOUNCE_TIMEOUT = 300;

package/select/presets/useLazyLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: ansiq */
-.select__skeleton_ansiq {
+/* hash: 1n68q */
+.select__skeleton_1n68q {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/select/presets/useSelectWithLoading/hook.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-2a25a340.js');
+var tslib_es6 = require('../../tslib.es6-0f234b35.js');
 var React = require('react');
 require('classnames');
 require('../../components/checkmark/Component.js');
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"skeleton":"select__skeleton_tynxj"};
+var styles = {"skeleton":"select__skeleton_7grgu"};
 require('./index.css');
 
 function useSelectWithLoading(_a) {

package/select/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: tynxj */
-.select__skeleton_tynxj {
+/* hash: 7grgu */
+.select__skeleton_7grgu {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/select/tslib.es6-0f234b35.d.ts

@@ -0,0 +1,32 @@
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding };

package/select/tslib.es6-0f234b35.js

@@ -0,0 +1,49 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+function __rest(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;
+}
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+        s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+exports.__rest = __rest;
+exports.__spreadArrays = __spreadArrays;

package/select/typings.d.ts

@@ -71,6 +71,10 @@ type BaseSelectProps = {
      * Начальное состояние селекта
      */
     defaultOpen?: boolean;
+    /**
+     * Управление открытием
+     */
+    open?: boolean;
     /**
      * Возможность выбрать несколько значений
      */

package/select-with-tags/component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { BaseSelectProps } from "../select";
-declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "name" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & {
+declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "open" | "name" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & {
     value: string;
     onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
     selected?: (string | import("../select").OptionShape)[] | undefined;

package/select-with-tags/cssm/component.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseSelectProps } from "../../select";
+declare const SelectWithTags: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onScroll" | "preventFlip" | "open" | "name" | "options" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "Option" | "optionsListClassName" | "optionClassName" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "showEmptyOptionsList"> & {
+    value: string;
+    onInput: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    selected?: (string | import("../../select").OptionShape)[] | undefined;
+    onChange?: ((payload: {
+        selectedMultiple: (string | import("../../select").OptionShape)[];
+        name?: string | undefined;
+    }) => void) | undefined;
+    autocomplete?: boolean | undefined;
+    match?: import("./types").OptionMatcher | undefined;
+    emptyListPlaceholder?: string | undefined;
+    Tag?: React.FC<import("./types").TagProps> | undefined;
+    collapseTagList?: boolean | undefined;
+    moveInputToNewLine?: boolean | undefined;
+    transformCollapsedTagText?: ((collapsedCount: number) => string) | undefined;
+    transformTagText?: ((tagText?: React.ReactNode) => React.ReactNode) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTags };

package/select-with-tags/cssm/component.js

@@ -0,0 +1,88 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-ce870b46.js');
+var React = require('react');
+var coreComponentsSelect = require('../../select/cssm');
+require('classnames');
+require('@alfalab/hooks');
+require('../../form-control/cssm');
+require('../../tag/cssm');
+require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('./components/tag/index.module.css');
+require('./components/tag/component.js');
+require('./utils/calculate-collapse-size.js');
+require('./components/tag-list/index.module.css');
+var components_tagList_component = require('./components/tag-list/component.js');
+var utils_match = require('./utils/match.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var SelectWithTags = React.forwardRef(function (_a, ref) {
+    var _b = _a.OptionsList, OptionsList = _b === void 0 ? coreComponentsSelect.OptionsList : _b, _c = _a.Optgroup, Optgroup = _c === void 0 ? coreComponentsSelect.Optgroup : _c, _d = _a.Option, Option = _d === void 0 ? coreComponentsSelect.Option : _d, _e = _a.Arrow, Arrow = _e === void 0 ? coreComponentsSelect.Arrow : _e, value = _a.value, selected = _a.selected, _f = _a.size, size = _f === void 0 ? 'xl' : _f, 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, _l = _a.emptyListPlaceholder, emptyListPlaceholder = _l === void 0 ? 'Ничего не найдено.' : _l, transformCollapsedTagText = _a.transformCollapsedTagText, transformTagText = _a.transformTagText, Tag = _a.Tag, restProps = tslib_es6.__rest(_a, ["OptionsList", "Optgroup", "Option", "Arrow", "value", "selected", "size", "onInput", "onChange", "options", "autocomplete", "match", "allowUnselect", "collapseTagList", "moveInputToNewLine", "emptyListPlaceholder", "transformCollapsedTagText", "transformTagText", "Tag"]);
+    var controlled = Boolean(selected);
+    var _m = React.useState(selected || []), selectedTags = _m[0], setSelectedTags = _m[1];
+    var _o = React.useState(false), isPopoverOpen = _o[0], setPopoverOpen = _o[1];
+    var updatePopover = React.useRef(function () { return null; });
+    var resetValue = React.useCallback(function () {
+        var event = { target: { value: '' } };
+        onInput(event);
+    }, [onInput]);
+    var handleUpdatePopover = React.useCallback(function () {
+        if (updatePopover && updatePopover.current) {
+            updatePopover.current();
+        }
+    }, []);
+    var handleDeleteTag = React.useCallback(function (deletedKey) {
+        var tags = selected || selectedTags;
+        tags = tags.filter(function (tag) {
+            var key = typeof tag === 'string' ? tag : tag.key;
+            return deletedKey !== key;
+        });
+        if (onChange) {
+            onChange({ selectedMultiple: tags });
+        }
+        if (!controlled) {
+            setSelectedTags(tags);
+        }
+    }, [controlled, onChange, selected, selectedTags]);
+    var handleChange = React.useCallback(function (_a) {
+        var selectedMultiple = _a.selectedMultiple, name = _a.name;
+        if (onChange) {
+            onChange({ selectedMultiple: selectedMultiple, name: name });
+        }
+        if (!controlled) {
+            setSelectedTags(selectedMultiple);
+        }
+        if (value) {
+            resetValue();
+        }
+    }, [onChange, controlled, value, resetValue]);
+    var handleOpen = React.useCallback(function (_a) {
+        var open = _a.open;
+        if (!open && value) {
+            resetValue();
+        }
+        setPopoverOpen(open);
+    }, [resetValue, value]);
+    var filteredOptions = utils_match.filterOptions(options, value, match);
+    var isAutocomplete = autocomplete || Boolean(match);
+    return (React__default['default'].createElement(coreComponentsSelect.BaseSelect, tslib_es6.__assign({}, restProps, { ref: ref, Option: Option, Field: components_tagList_component.TagList, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, multiple: true, updatePopover: updatePopover, allowUnselect: allowUnselect, showEmptyOptionsList: true, fieldProps: {
+            value: value,
+            autocomplete: isAutocomplete,
+            onInput: onInput,
+            handleDeleteTag: handleDeleteTag,
+            Tag: Tag,
+            collapseTagList: collapseTagList,
+            moveInputToNewLine: moveInputToNewLine,
+            transformCollapsedTagText: transformCollapsedTagText,
+            transformTagText: transformTagText,
+            handleUpdatePopover: handleUpdatePopover,
+            isPopoverOpen: isPopoverOpen,
+        }, optionsListProps: {
+            emptyPlaceholder: emptyListPlaceholder,
+        }, selected: selected || selectedTags, autocomplete: isAutocomplete, size: size, options: filteredOptions, onChange: handleChange, onOpen: handleOpen })));
+});
+
+exports.SelectWithTags = SelectWithTags;

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

@@ -0,0 +1,2 @@
+export * from "./tag-list/index";
+export * from "./tag/index";

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

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../../form-control/cssm');
+require('../../../tag/cssm');
+require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('./tag/index.module.css');
+var components_tag_component = require('./tag/component.js');
+require('../utils/calculate-collapse-size.js');
+require('./tag-list/index.module.css');
+var components_tagList_component = require('./tag-list/component.js');
+
+
+
+exports.Tag = components_tag_component.Tag;
+exports.TagList = components_tagList_component.TagList;

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

@@ -0,0 +1,3 @@
+import { TagComponent } from "../../types";
+declare const Tag: TagComponent;
+export { Tag };

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

@@ -0,0 +1,33 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTag = require('../../../../tag/cssm');
+var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Tag = function (_a) {
+    var _b;
+    var _c = _a.option, content = _c.content, key = _c.key, onClick = _a.onClick, handleDeleteTag = _a.handleDeleteTag, props = tslib_es6.__rest(_a, ["option", "onClick", "handleDeleteTag"]);
+    var handleClick = React.useCallback(function () {
+        if (handleDeleteTag) {
+            handleDeleteTag(key);
+        }
+    }, [handleDeleteTag, key]);
+    return (React__default['default'].createElement(coreComponentsTag.Tag, tslib_es6.__assign({ key: key, size: 'xs', onClick: onClick, checked: !!handleDeleteTag, className: cn__default['default'](styles__default['default'].tag, (_b = {}, _b[styles__default['default'].tagNoClose] = !handleDeleteTag, _b)) }, props),
+        React__default['default'].createElement("span", { className: styles__default['default'].tagContentWrap },
+            content,
+            handleDeleteTag && (
+            // eslint-disable-next-line
+            React__default['default'].createElement("span", { className: styles__default['default'].tagCross, onClick: handleClick },
+                React__default['default'].createElement(CrossCompactMIcon.CrossCompactMIcon, null))))));
+};
+
+exports.Tag = Tag;

package/select-with-tags/cssm/components/tag/index.d.ts

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

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('../../../../tag/cssm');
+require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('./index.module.css');
+var components_tag_component = require('./component.js');
+
+
+
+exports.Tag = components_tag_component.Tag;

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

@@ -0,0 +1,50 @@
+.tag {
+    padding: 0;
+    padding-left: var(--gap-m);
+    margin: var(--gap-2xs);
+    cursor: default
+}
+
+.tag:active:not(:disabled) {
+        background-color: var(--tag-background-color-checked);
+        color: var(--tag-text-color-checked);
+    }
+
+.tag:hover:not(:disabled):not(:active) {
+        background-color: var(--tag-background-color-checked);
+        color: var(--tag-text-color-checked);
+    }
+
+.tag > span {
+        width: 100%;
+        height: 100%;
+    }
+
+.tagNoClose {
+    padding-right: var(--gap-m);
+}
+
+.tagContentWrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+}
+
+.tagCross {
+    padding-right: var(--gap-xs);
+    height: 100%
+}
+
+.tagCross:hover {
+        opacity: 0.7;
+    }
+
+.tagCross:active {
+        opacity: 0.5;
+    }
+
+.tagCross svg {
+        height: 100%;
+    }

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

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

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

@@ -0,0 +1,133 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var React = require('react');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var coreComponentsFormControl = require('../../../../form-control/cssm');
+require('../../../../tag/cssm');
+require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('../tag/index.module.css');
+var components_tag_component = require('../tag/component.js');
+var utils_calculateCollapseSize = require('../../utils/calculate-collapse-size.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+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, valueRenderer = _a.valueRenderer, 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, restProps = tslib_es6.__rest(_a, ["size", "open", "disabled", "placeholder", "selectedMultiple", "Arrow", "innerProps", "className", "fieldClassName", "value", "autocomplete", "label", "valueRenderer", "onInput", "handleDeleteTag", "collapseTagList", "moveInputToNewLine", "transformCollapsedTagText", "transformTagText", "isPopoverOpen", "handleUpdatePopover", "Tag"]);
+    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 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];
+    React.useLayoutEffect(function () {
+        setShowMoreEnabled(isPopoverOpen);
+    }, [isPopoverOpen]);
+    React.useLayoutEffect(function () {
+        setVisibleElements(selectedMultiple.length);
+        setShowMoreEnabled(false);
+    }, [selectedMultiple]);
+    React.useLayoutEffect(function () {
+        if (collapseTagList && contentWrapperRef.current) {
+            var totalVisibleElements = utils_calculateCollapseSize.calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
+            setVisibleElements(totalVisibleElements);
+        }
+    }, [collapseTagList, visibleElements, autocomplete]);
+    var handleFocus = React.useCallback(function () { return setFocused(true); }, []);
+    var handleBlur = React.useCallback(function () { return setFocused(false); }, []);
+    var inputTextIsOverflow = React.useCallback(function () { return inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth; }, []);
+    var handleMouseDown = React.useCallback(function (event) {
+        event.preventDefault();
+    }, []);
+    var onClick = innerProps.onClick, restInnerProps = tslib_es6.__rest(innerProps, ["onClick"]);
+    var handleClick = React.useCallback(function (event) {
+        if (onClick && contentWrapperRef.current) {
+            var eventTarget = event.target;
+            var clickedInsideContent = eventTarget !== contentWrapperRef.current &&
+                contentWrapperRef.current.contains(eventTarget);
+            if (!clickedInsideContent) {
+                onClick(event);
+            }
+        }
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [onClick]);
+    var handleKeyDown = React.useCallback(function (event) {
+        var lastSelectedTag = selectedMultiple[selectedMultiple.length - 1];
+        if (event.key === 'Backspace' && !value && handleDeleteTag && lastSelectedTag) {
+            handleDeleteTag(lastSelectedTag.key);
+        }
+    }, [handleDeleteTag, selectedMultiple, value]);
+    var toggleShowMoreLessButton = React.useCallback(function (event) {
+        event.stopPropagation();
+        setShowMoreEnabled(function (v) { return !v; });
+        if (handleUpdatePopover) {
+            handleUpdatePopover();
+        }
+    }, [handleUpdatePopover]);
+    React.useEffect(function () {
+        /**
+         * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
+         */
+        if (moveInputToNewLine) {
+            if (inputTextIsOverflow() && !inputOnNewLine) {
+                setInputOnNewLine(true);
+            }
+            else if (value.length === 0) {
+                setInputOnNewLine(false);
+            }
+        }
+    }, [value, inputOnNewLine, inputTextIsOverflow, moveInputToNewLine]);
+    var collapseTagTitle = React.useMemo(function () {
+        if (isShowMoreEnabled) {
+            return 'Свернуть';
+        }
+        if (transformCollapsedTagText) {
+            return transformCollapsedTagText(selectedMultiple.length - visibleElements);
+        }
+        return "+" + (selectedMultiple.length - visibleElements);
+    }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
+    var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
+    /**
+     * Флаг который позволит добавлять класс с вертикальными
+     * отступами если элементы не помещаются в один ряд,
+     * для того чтобы не менялась высота инпута
+     */
+    var shouldAddVerticalMargin = Boolean((!collapseTagList || isShowMoreEnabled) && !label);
+    return (React__default['default'].createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn__default['default'](className, styles__default['default'].component, styles__default['default'][size]) },
+        React__default['default'].createElement(coreComponentsFormControl.FormControl, tslib_es6.__assign({}, restProps, { ref: innerProps.ref, fieldClassName: cn__default['default'](fieldClassName, styles__default['default'].field, (_b = {},
+                _b[styles__default['default'].focusVisible] = focusVisible,
+                _b)), block: true, size: size, focused: open || focused, disabled: disabled, filled: filled || !!placeholder, onMouseDown: handleMouseDown, rightAddons: Arrow, onClick: handleClick, addonsClassName: cn__default['default'](styles__default['default'].addons, styles__default['default']["addons-size-" + size]), label: label, labelClassName: styles__default['default'].label }),
+            React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].contentWrapper, (_c = {},
+                    _c[styles__default['default'].hasLabel] = Boolean(label),
+                    _c[styles__default['default'].hasTags] = selectedMultiple.length > 0,
+                    _c[styles__default['default'].contentWrapperVertical] = shouldAddVerticalMargin,
+                    _c)), ref: contentWrapperRef },
+                selectedMultiple.map(function (option, index) {
+                    return isShowMoreEnabled || index + 1 <= visibleElements ? (React__default['default'].createElement(Tag, { option: tslib_es6.__assign(tslib_es6.__assign({}, option), { content: transformTagText
+                                ? transformTagText(option.content)
+                                : option.content }), key: option.key, handleDeleteTag: handleDeleteTag })) : null;
+                }),
+                visibleElements < selectedMultiple.length && (React__default['default'].createElement(Tag, { "data-collapse": 'collapse-last-tag-element', onClick: toggleShowMoreLessButton, option: {
+                        key: 'collapse',
+                        content: collapseTagTitle,
+                    } })),
+                autocomplete && (React__default['default'].createElement("input", tslib_es6.__assign({}, restInnerProps, { autoComplete: 'off', ref: inputRef, value: value, onChange: onInput, className: cn__default['default'](styles__default['default'].input, (_d = {},
+                        _d[styles__default['default'].focusVisible] = inputFocusVisible,
+                        _d[styles__default['default'].block] = inputOnNewLine,
+                        _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),
+                placeholder && !filled && !autocomplete && (React__default['default'].createElement("span", { className: styles__default['default'].placeholder }, placeholder))))));
+};
+
+exports.TagList = TagList;

package/select-with-tags/cssm/components/tag-list/index.d.ts

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

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

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../tslib.es6-ce870b46.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../../../form-control/cssm');
+require('../../../../tag/cssm');
+require('@alfalab/icons-glyph/CrossCompactMIcon');
+require('../tag/index.module.css');
+require('../tag/component.js');
+require('../../utils/calculate-collapse-size.js');
+require('./index.module.css');
+var components_tagList_component = require('./component.js');
+
+
+
+exports.TagList = components_tagList_component.TagList;