@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

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

@@ -1,15 +1,22 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { calculateTotalElementsPerRow } from '../../utils/calculate-collapse-size.js';
-import { Tag } from '../tag/component.js';
-import styles from './index.module.css';
-import '../../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../tag/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SIZE_TO_CLASSNAME_MAP = {
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var utils_calculateCollapseSize = require('../../utils/calculate-collapse-size.js');
+var components_tag_component = require('../tag/component.js');
+var styles = require('./index.module.css');
+
+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__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -19,40 +26,42 @@ const SIZE_TO_CLASSNAME_MAP = {
     64: 'size-64',
     72: 'size-72',
 };
-const TagList = ({ size = 72, 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);
-    const [inputOnNewLine, setInputOnNewLine] = useState(false);
-    const wrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    const contentWrapperRef = useRef(null);
-    const [focusVisible] = useFocus(wrapperRef, 'keyboard');
-    const [inputFocusVisible] = useFocus(inputRef, 'keyboard');
-    useLayoutEffect_SAFE_FOR_SSR(() => {
+var TagList = function (_a) {
+    var _b, _c, _d;
+    var _e = _a.size, size = _e === void 0 ? 72 : _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(isOpen);
     }, [isOpen]);
-    useEffect(() => {
+    React.useEffect(function () {
         setVisibleElements(selectedMultiple.length);
     }, [selectedMultiple.length]);
-    useLayoutEffect_SAFE_FOR_SSR(() => {
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         if (collapseTagList && contentWrapperRef.current) {
-            const totalVisibleElements = calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
+            var totalVisibleElements = utils_calculateCollapseSize.calculateTotalElementsPerRow(contentWrapperRef.current, autocomplete && inputRef.current ? inputRef.current : null);
             setVisibleElements(totalVisibleElements);
         }
-        handleUpdatePopover?.();
+        handleUpdatePopover === null || handleUpdatePopover === void 0 ? void 0 : handleUpdatePopover();
     }, [collapseTagList, visibleElements, autocomplete]);
-    const handleFocus = useCallback(() => setFocused(true), []);
-    const handleBlur = useCallback(() => setFocused(false), []);
-    const inputTextIsOverflow = useCallback(() => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth, []);
-    const handleMouseDown = useCallback((event) => {
+    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();
     }, []);
-    const { onClick, ...restInnerProps } = (innerProps || {});
-    const handleClick = useCallback((event) => {
+    var _p = (innerProps || {}), onClick = _p.onClick, restInnerProps = tslib.__rest(_p, ["onClick"]);
+    var handleClick = React.useCallback(function (event) {
         if (onClick && contentWrapperRef.current) {
-            const eventTarget = event.target;
-            const clickedInsideContent = eventTarget !== contentWrapperRef.current &&
+            var eventTarget = event.target;
+            var clickedInsideContent = eventTarget !== contentWrapperRef.current &&
                 contentWrapperRef.current.contains(eventTarget);
             if (!clickedInsideContent) {
                 onClick(event);
@@ -62,22 +71,22 @@ const TagList = ({ size = 72, open, disabled, placeholder, selectedMultiple = []
             inputRef.current.focus();
         }
     }, [onClick]);
-    const handleKeyDown = useCallback((event) => {
-        const lastSelectedTag = selectedMultiple[selectedMultiple.length - 1];
+    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]);
-    const toggleShowMoreLessButton = useCallback((event) => {
+    var toggleShowMoreLessButton = React.useCallback(function (event) {
         if (event) {
             event.stopPropagation();
-            setShowMoreEnabled((v) => !v);
+            setShowMoreEnabled(function (v) { return !v; });
             if (handleUpdatePopover) {
                 handleUpdatePopover();
             }
         }
     }, [handleUpdatePopover]);
-    useEffect(() => {
+    React.useEffect(function () {
         /**
          * Если текст не помещается в инпут, то нужно перенести инпут на новую строку.
          */
@@ -90,41 +99,40 @@ const TagList = ({ size = 72, open, disabled, placeholder, selectedMultiple = []
             }
         }
     }, [value, inputOnNewLine, inputTextIsOverflow, moveInputToNewLine]);
-    const collapseTagTitle = useMemo(() => {
+    var collapseTagTitle = React.useMemo(function () {
         if (isShowMoreEnabled) {
             return 'Свернуть';
         }
         if (transformCollapsedTagText) {
             return transformCollapsedTagText(selectedMultiple.length - visibleElements);
         }
-        return `Ещё ${selectedMultiple.length - visibleElements}`;
+        return "\u0415\u0449\u0451 ".concat(selectedMultiple.length - visibleElements);
     }, [transformCollapsedTagText, isShowMoreEnabled, selectedMultiple.length, visibleElements]);
-    const filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
-    const hasInnerLabel = Boolean(label) && labelView !== 'outer';
-    return (React.createElement("div", { ref: wrapperRef, onFocus: handleFocus, onBlur: handleBlur, className: cn(className, styles.component, styles[SIZE_TO_CLASSNAME_MAP[size]]) },
-        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_TO_CLASSNAME_MAP[size]}`]), label: label, labelClassName: styles.label, labelView: labelView },
-            React.createElement("div", { className: cn(styles.contentWrapper, {
-                    [styles.hasInnerLabel]: hasInnerLabel,
-                    [styles.hasTags]: selectedMultiple.length > 0,
-                }), ref: contentWrapperRef },
-                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: 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: {
+    var filled = Boolean(selectedMultiple.length > 0) || Boolean(value);
+    var hasInnerLabel = Boolean(label) && labelView !== 'outer';
+    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_TO_CLASSNAME_MAP[size]]) },
+        React__default.default.createElement(FormControlComponent, tslib.__assign({}, restProps, { ref: innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, fieldClassName: cn__default.default(fieldClassName, styles__default.default.field, (_b = {},
+                _b[styles__default.default.focusVisible] = focusVisible,
+                _b[styles__default.default.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__default.default.addons, styles__default.default["addons-".concat(SIZE_TO_CLASSNAME_MAP[size])]), label: label, labelClassName: styles__default.default.label, labelView: labelView }),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.contentWrapper, (_c = {},
+                    _c[styles__default.default.hasInnerLabel] = hasInnerLabel,
+                    _c[styles__default.default.hasTags] = selectedMultiple.length > 0,
+                    _c)), ref: contentWrapperRef },
+                selectedMultiple.map(function (option, index) {
+                    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: disabled ? undefined : handleDeleteTag })) : null;
+                }),
+                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.createElement("input", { ...restInnerProps, autoComplete: 'off', ref: mergeRefs([inputRef, inputRefProp]), value: value, onChange: onInput, className: cn(styles.input, {
-                        [styles.focusVisible]: inputFocusVisible,
-                        [styles.hidden]: !isOpen && selectedMultiple.length > 0,
-                    }), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder })),
-                placeholder && !filled && !autocomplete && (React.createElement("span", { className: styles.placeholder }, placeholder))))));
+                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__default.default.input, (_d = {},
+                        _d[styles__default.default.focusVisible] = inputFocusVisible,
+                        _d[styles__default.default.hidden] = !isOpen && selectedMultiple.length > 0,
+                        _d)), disabled: disabled, onKeyDown: handleKeyDown, placeholder: filled ? '' : placeholder }))),
+                placeholder && !filled && !autocomplete && (React__default.default.createElement("span", { className: styles__default.default.placeholder }, placeholder))))));
 };
 
-export { TagList };
+exports.TagList = TagList;

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

@@ -1,11 +1,7 @@
-export { TagList } from './component.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/hooks';
-import '../../utils/calculate-collapse-size.js';
-import '../tag/component.js';
-import '../../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../tag/index.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_tagList_component = require('./component.js');
+
+
+
+exports.TagList = components_tagList_component.TagList;

package/select-with-tags/cssm/desktop/Component.desktop.js

@@ -1,20 +1,15 @@
-import React from 'react';
-import { FormControlDesktop } from '../../../form-control/cssm/desktop';
-import { Popover } from '../../../popover/cssm';
-import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
-import 'react-merge-refs';
-import '../../../select/cssm/shared';
-import '../utils/match.js';
-import '../components/tag-list/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import '../utils/calculate-collapse-size.js';
-import '../components/tag/component.js';
-import '../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../components/tag/index.module.css';
-import '../components/tag-list/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SelectWithTagsDesktop = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, FormControlComponent: FormControlDesktop, Popover: Popover, ref: ref, view: 'desktop' })));
+var tslib = require('tslib');
+var React = require('react');
+var desktop = require('../../../form-control/cssm/desktop');
+var coreComponentsPopover = require('../../../popover/cssm');
+var components_baseSelectWithTags_Component = require('../components/base-select-with-tags/Component.js');
 
-export { SelectWithTagsDesktop };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SelectWithTagsDesktop = React__default.default.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseSelectWithTags_Component.BaseSelectWithTags, tslib.__assign({}, props, { FormControlComponent: desktop.FormControlDesktop, Popover: coreComponentsPopover.Popover, ref: ref, view: 'desktop' }))); });
+
+exports.SelectWithTagsDesktop = SelectWithTagsDesktop;

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

@@ -1,17 +1,7 @@
-export { SelectWithTagsDesktop } from './Component.desktop.js';
-import 'react';
-import '../../../form-control/cssm/desktop';
-import '../../../popover/cssm';
-import '../components/base-select-with-tags/Component.js';
-import 'react-merge-refs';
-import '../../../select/cssm/shared';
-import '../utils/match.js';
-import '../components/tag-list/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import '../utils/calculate-collapse-size.js';
-import '../components/tag/component.js';
-import '../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../components/tag/index.module.css';
-import '../components/tag-list/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.SelectWithTagsDesktop = desktop_Component_desktop.SelectWithTagsDesktop;

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

@@ -1,20 +1,7 @@
-export { SelectWithTags } from './Component.responsive.js';
-import 'react';
-import '../../bottom-sheet/cssm';
-import '../../form-control/cssm/desktop';
-import '../../form-control/cssm/mobile';
-import '../../mq/cssm';
-import '../../popover/cssm';
-import './components/base-select-with-tags/Component.js';
-import 'react-merge-refs';
-import '../../select/cssm/shared';
-import './utils/match.js';
-import './components/tag-list/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import './utils/calculate-collapse-size.js';
-import './components/tag/component.js';
-import '../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import './components/tag/index.module.css';
-import './components/tag-list/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.SelectWithTags = Component_responsive.SelectWithTags;

package/select-with-tags/cssm/mobile/Component.mobile.js

@@ -1,20 +1,15 @@
-import React from 'react';
-import { BottomSheet } from '../../../bottom-sheet/cssm';
-import { FormControlMobile } from '../../../form-control/cssm/mobile';
-import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
-import 'react-merge-refs';
-import '../../../select/cssm/shared';
-import '../utils/match.js';
-import '../components/tag-list/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import '../utils/calculate-collapse-size.js';
-import '../components/tag/component.js';
-import '../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../components/tag/index.module.css';
-import '../components/tag-list/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SelectWithTagsMobile = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, ref: ref, FormControlComponent: FormControlMobile, view: 'mobile', BottomSheet: BottomSheet })));
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsBottomSheet = require('../../../bottom-sheet/cssm');
+var mobile = require('../../../form-control/cssm/mobile');
+var components_baseSelectWithTags_Component = require('../components/base-select-with-tags/Component.js');
 
-export { SelectWithTagsMobile };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SelectWithTagsMobile = React__default.default.forwardRef(function (props, ref) { return (React__default.default.createElement(components_baseSelectWithTags_Component.BaseSelectWithTags, tslib.__assign({}, props, { ref: ref, FormControlComponent: mobile.FormControlMobile, view: 'mobile', BottomSheet: coreComponentsBottomSheet.BottomSheet }))); });
+
+exports.SelectWithTagsMobile = SelectWithTagsMobile;

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

@@ -1,17 +1,7 @@
-export { SelectWithTagsMobile } from './Component.mobile.js';
-import 'react';
-import '../../../bottom-sheet/cssm';
-import '../../../form-control/cssm/mobile';
-import '../components/base-select-with-tags/Component.js';
-import 'react-merge-refs';
-import '../../../select/cssm/shared';
-import '../utils/match.js';
-import '../components/tag-list/component.js';
-import 'classnames';
-import '@alfalab/hooks';
-import '../utils/calculate-collapse-size.js';
-import '../components/tag/component.js';
-import '../../../tag/cssm/desktop';
-import '@alfalab/icons-glyph/CrossCircleMIcon';
-import '../components/tag/index.module.css';
-import '../components/tag-list/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.SelectWithTagsMobile = mobile_Component_mobile.SelectWithTagsMobile;

package/select-with-tags/cssm/utils/calculate-collapse-size.js

@@ -1,33 +1,35 @@
-const getElementSize = (element, property) => {
-    const size = +window.getComputedStyle(element).getPropertyValue(property).replace('px', '');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getElementSize = function (element, property) {
+    var size = +window.getComputedStyle(element).getPropertyValue(property).replace('px', '');
     return Number.isNaN(size) ? 0 : size;
 };
-const getTagWidth = (tag) => {
-    const tagMarginLeft = getElementSize(tag, 'margin-left');
-    const tagMarginRight = getElementSize(tag, 'margin-right');
+var getTagWidth = function (tag) {
+    var tagMarginLeft = getElementSize(tag, 'margin-left');
+    var tagMarginRight = getElementSize(tag, 'margin-right');
     return tag.getBoundingClientRect().width + tagMarginRight + tagMarginLeft;
 };
-const calculateTotalElementsPerRow = (container, input) => {
-    let containerWidth = container.getBoundingClientRect().width;
-    const containerPaddingLeft = getElementSize(container, 'padding-left');
-    const containerPaddingRight = getElementSize(container, 'padding-right');
+var calculateTotalElementsPerRow = function (container, input) {
+    var containerWidth = container.getBoundingClientRect().width;
+    var containerPaddingLeft = getElementSize(container, 'padding-left');
+    var containerPaddingRight = getElementSize(container, 'padding-right');
     containerWidth -= containerPaddingLeft + containerPaddingRight;
     if (input) {
-        const inputMinWidth = getElementSize(input, 'min-width');
-        const inputMarginLeft = getElementSize(input, 'margin-left');
-        const inputMarginRight = getElementSize(input, 'margin-right');
-        const minInputWidth = inputMarginLeft + inputMarginRight + inputMinWidth;
+        var inputMinWidth = getElementSize(input, 'min-width');
+        var inputMarginLeft = getElementSize(input, 'margin-left');
+        var inputMarginRight = getElementSize(input, 'margin-right');
+        var minInputWidth = inputMarginLeft + inputMarginRight + inputMinWidth;
         containerWidth -= minInputWidth;
     }
-    const tags = container.getElementsByTagName('button');
-    const latestTag = tags[tags.length - 1];
+    var tags = container.getElementsByTagName('button');
+    var latestTag = tags[tags.length - 1];
     if (latestTag && latestTag.getAttribute('data-collapse') === 'collapse-last-tag-element') {
         containerWidth -= getTagWidth(latestTag);
     }
-    let totalTagsWidth = 0;
-    let totalVisibleElements = 0;
-    for (let i = 0; i < tags.length; i++) {
-        const tag = tags[i];
+    var totalTagsWidth = 0;
+    var totalVisibleElements = 0;
+    for (var i = 0; i < tags.length; i++) {
+        var tag = tags[i];
         if (tag.getAttribute('data-collapse') === 'collapse-last-tag-element') {
             break;
         }
@@ -39,4 +41,4 @@ const calculateTotalElementsPerRow = (container, input) => {
     return totalVisibleElements;
 };
 
-export { calculateTotalElementsPerRow };
+exports.calculateTotalElementsPerRow = calculateTotalElementsPerRow;

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

@@ -1,2 +1,7 @@
-export { filterOptions } from './match.js';
-import '../../../select/cssm/shared';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_match = require('./match.js');
+
+
+
+exports.filterOptions = utils_match.filterOptions;

package/select-with-tags/cssm/utils/match.js

@@ -1,25 +1,31 @@
-import { isGroup } from '../../../select/cssm/shared';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const defaultMatch = (option, inputValue) => option.value.toLowerCase().indexOf((inputValue || '').toLowerCase(), 0) !== -1;
-const optionsIsGroupShapes = (options) => {
-    const item = options[0];
+var tslib = require('tslib');
+var shared = require('../../../select/cssm/shared');
+
+var defaultMatch = function (option, inputValue) {
+    return option.value.toLowerCase().indexOf((inputValue || '').toLowerCase(), 0) !== -1;
+};
+var optionsIsGroupShapes = function (options) {
+    var item = options[0];
     if (!item) {
         return false;
     }
-    return isGroup(item);
+    return shared.isGroup(item);
 };
-const filterOptions = (options, inputValue, math = defaultMatch) => {
+var filterOptions = function (options, inputValue, math) {
+    if (math === void 0) { math = defaultMatch; }
     if (optionsIsGroupShapes(options)) {
-        return options.reduce((acc, group) => {
-            const matchedOptions = group.options.filter((option) => math(option, inputValue));
+        return options.reduce(function (acc, group) {
+            var matchedOptions = group.options.filter(function (option) { return math(option, inputValue); });
             if (matchedOptions.length > 0) {
-                acc.push({ ...group, options: matchedOptions });
+                acc.push(tslib.__assign(tslib.__assign({}, group), { options: matchedOptions }));
                 return acc;
             }
             return acc;
         }, []);
     }
-    return options.filter((option) => math(option, inputValue));
+    return options.filter(function (option) { return math(option, inputValue); });
 };
 
-export { filterOptions };
+exports.filterOptions = filterOptions;

package/select-with-tags/esm/Component.responsive.js

@@ -5,6 +5,7 @@ import { FormControlDesktop } from '../../form-control/esm/desktop';
 import { FormControlMobile } from '../../form-control/esm/mobile';
 import { useMatchMedia } from '../../mq/esm';
 import { Popover } from '../../popover/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { BaseSelectWithTags } from './components/base-select-with-tags/Component.js';
 import 'react-merge-refs';
 import '../../select/esm/shared';
@@ -18,7 +19,7 @@ import '../../tag/esm/desktop';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 
 var SelectWithTags = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return (React.createElement(BaseSelectWithTags, __assign({}, restProps, { ref: ref, view: isDesktop ? 'desktop' : 'mobile', Popover: Popover, BottomSheet: BottomSheet, FormControlComponent: isDesktop ? FormControlDesktop : FormControlMobile })));
 });

package/select-with-tags/esm/index.js

@@ -6,6 +6,7 @@ import '../../form-control/esm/desktop';
 import '../../form-control/esm/mobile';
 import '../../mq/esm';
 import '../../popover/esm';
+import '../../shared/esm';
 import './components/base-select-with-tags/Component.js';
 import 'react-merge-refs';
 import '../../select/esm/shared';

package/select-with-tags/modern/Component.responsive.js

@@ -4,6 +4,7 @@ import { FormControlDesktop } from '../../form-control/modern/desktop';
 import { FormControlMobile } from '../../form-control/modern/mobile';
 import { useMatchMedia } from '../../mq/modern';
 import { Popover } from '../../popover/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { BaseSelectWithTags } from './components/base-select-with-tags/Component.js';
 import 'react-merge-refs';
 import '../../select/modern/shared';
@@ -16,7 +17,7 @@ import './components/tag/component.js';
 import '../../tag/modern/desktop';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 
-const SelectWithTags = forwardRef(({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+const SelectWithTags = forwardRef(({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
     return (React.createElement(BaseSelectWithTags, { ...restProps, ref: ref, view: isDesktop ? 'desktop' : 'mobile', Popover: Popover, BottomSheet: BottomSheet, FormControlComponent: isDesktop ? FormControlDesktop : FormControlMobile }));
 });

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

@@ -5,6 +5,7 @@ import '../../form-control/modern/desktop';
 import '../../form-control/modern/mobile';
 import '../../mq/modern';
 import '../../popover/modern';
+import '../../shared/modern';
 import './components/base-select-with-tags/Component.js';
 import 'react-merge-refs';
 import '../../select/modern/shared';

package/shared/cssm/browser.js

@@ -1,33 +1,35 @@
-import { isClient } from './isClient.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const getScrollbarSize = (() => {
-    let cachedSize;
-    return () => {
+var isClient = require('./isClient.js');
+
+var getScrollbarSize = (function () {
+    var cachedSize;
+    return function () {
         if (cachedSize !== undefined)
             return cachedSize;
-        if (!isClient())
+        if (!isClient.isClient())
             return 0;
-        const scrollDiv = document.createElement('div');
+        var scrollDiv = document.createElement('div');
         scrollDiv.style.width = '99px';
         scrollDiv.style.height = '99px';
         scrollDiv.style.position = 'absolute';
         scrollDiv.style.top = '-9999px';
         scrollDiv.style.overflow = 'scroll';
         document.body.appendChild(scrollDiv);
-        const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
         document.body.removeChild(scrollDiv);
         cachedSize = scrollbarSize;
         return scrollbarSize;
     };
 })();
 function isWebkitBased() {
-    if (!isClient())
+    if (!isClient.isClient())
         return false;
     return window.navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
 }
-const browser = {
-    getScrollbarSize,
-    isWebkitBased,
+var browser = {
+    getScrollbarSize: getScrollbarSize,
+    isWebkitBased: isWebkitBased,
 };
 
-export { browser };
+exports.browser = browser;

package/shared/cssm/createPaddingStyle.js

@@ -1,6 +1,8 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function createPaddingStyle(padding) {
     if (typeof padding === 'string' || typeof padding === 'number') {
-        return { padding };
+        return { padding: padding };
     }
     if (padding !== null && typeof padding === 'object') {
         return {
@@ -13,4 +15,4 @@ function createPaddingStyle(padding) {
     return padding;
 }
 
-export { createPaddingStyle };
+exports.createPaddingStyle = createPaddingStyle;