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

package/tabs/cssm/components/primary-tablist/Component.js

@@ -1,51 +1,56 @@
-import React, { useRef, useEffect } from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
-import cn from 'classnames';
-import { KeyboardFocusable } from '../../../../keyboard-focusable/cssm';
-import { fnUtils } from '../../../../shared/cssm';
-import { useTabs } from '../../hooks/use-tabs.js';
-import { ScrollableContainer } from '../scrollable-container/Component.js';
-import { Title } from '../title/Component.js';
-import 'react-merge-refs';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import '../scrollable-container/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, platform, textStyle, }) => {
-    const lineRef = useRef(null);
-    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
-        titles,
-        selectedId,
-        onChange,
-    });
-    useEffect(() => {
+var tslib = require('tslib');
+var React = require('react');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
+var coreComponentsKeyboardFocusable = require('../../../../keyboard-focusable/cssm');
+var coreComponentsShared = require('../../../../shared/cssm');
+var hooks_useTabs = require('../../hooks/use-tabs.js');
+var components_scrollableContainer_Component = require('../scrollable-container/Component.js');
+var components_title_Component = require('../title/Component.js');
+
+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 PrimaryTabList = function (_a) {
+    var size = _a.size, _b = _a.styles, styles = _b === void 0 ? {} : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, platform = _a.platform, textStyle = _a.textStyle;
+    var lineRef = React.useRef(null);
+    var _f = hooks_useTabs.useTabs({
+        titles: titles,
+        selectedId: selectedId,
+        onChange: onChange,
+    }), selectedTab = _f.selectedTab, focusedTab = _f.focusedTab, getTabListItemProps = _f.getTabListItemProps;
+    React.useEffect(function () {
         if (selectedTab) {
-            const updateLineWidth = () => {
+            var updateLineWidth = function () {
                 if (lineRef.current) {
-                    lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
-                    lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+                    lineRef.current.style.width = "".concat(selectedTab.offsetWidth, "px");
+                    lineRef.current.style.transform = "translateX(".concat(selectedTab.offsetLeft, "px)");
                 }
             };
-            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-            const observer = new ResizeObserver$1(updateLineWidth);
-            observer.observe(selectedTab);
-            return () => observer.disconnect();
+            var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
+            var observer_1 = new ResizeObserver_1(updateLineWidth);
+            observer_1.observe(selectedTab);
+            return function () { return observer_1.disconnect(); };
         }
-        return fnUtils.noop;
+        return coreComponentsShared.fnUtils.noop;
     }, [selectedTab]);
-    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], {
-            [styles.fullWidthScroll]: fullWidthScroll,
-        }) },
-        titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
-        React.createElement("div", { className: styles.line, ref: lineRef })));
-    const wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);
-    return scrollable ? (React.createElement(ScrollableContainer, { containerWrapperClassName: wrapperClassName, activeChild: focusedTab || selectedTab, containerClassName: containerClassName, scrollControlsClassName: cn(textStyle && styles.scrollControls), fullWidthScroll: fullWidthScroll, view: 'primary', size: textStyle ? undefined : size, platform: platform }, renderContent())) : (React.createElement("div", { className: cn(styles.container, wrapperClassName, containerClassName) }, renderContent()));
+    var renderContent = function () {
+        var _a;
+        return (React__default.default.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn__default.default(styles.component, className, !textStyle && size && styles[size], (_a = {},
+                _a[styles.fullWidthScroll] = fullWidthScroll,
+                _a)) },
+            titles.map(function (_a, index) {
+                _a.dataTestId; _a.toggleRef; var restTitleProps = tslib.__rest(_a, ["dataTestId", "toggleRef"]);
+                return (React__default.default.createElement(coreComponentsKeyboardFocusable.KeyboardFocusable, { key: restTitleProps.id }, function (ref, focused) { return (React__default.default.createElement(components_title_Component.Title, tslib.__assign({}, getTabListItemProps(index, ref), restTitleProps, { focused: focused, styles: styles }))); }));
+            }),
+            React__default.default.createElement("div", { className: styles.line, ref: lineRef })));
+    };
+    var wrapperClassName = cn__default.default(textStyle && styles[textStyle], styles[platform]);
+    return scrollable ? (React__default.default.createElement(components_scrollableContainer_Component.ScrollableContainer, { containerWrapperClassName: wrapperClassName, activeChild: focusedTab || selectedTab, containerClassName: containerClassName, scrollControlsClassName: cn__default.default(textStyle && styles.scrollControls), fullWidthScroll: fullWidthScroll, view: 'primary', size: textStyle ? undefined : size, platform: platform }, renderContent())) : (React__default.default.createElement("div", { className: cn__default.default(styles.container, wrapperClassName, containerClassName) }, renderContent()));
 };
 
-export { PrimaryTabList };
+exports.PrimaryTabList = PrimaryTabList;

package/tabs/cssm/components/primary-tablist/Component.mobile.js

@@ -1,29 +1,18 @@
-import React from 'react';
-import { PrimaryTabList } from './Component.js';
-import styles$1 from './index.module.css';
-import mobileStyles from './mobile.module.css';
-import '@juggle/resize-observer';
-import 'classnames';
-import '../../../../keyboard-focusable/cssm';
-import '../../../../shared/cssm';
-import '../../hooks/use-tabs.js';
-import 'react-merge-refs';
-import '../scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import '../scrollable-container/index.module.css';
-import '../title/Component.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {
-    ...styles$1,
-    ...mobileStyles,
-};
-const PrimaryTabListMobile = (props) => (React.createElement(PrimaryTabList, { ...props, styles: styles, platform: 'mobile' }));
+var tslib = require('tslib');
+var React = require('react');
+var components_primaryTablist_Component = require('./Component.js');
+var styles$1 = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
 
-export { PrimaryTabListMobile };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles$1);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var styles = tslib.__assign(tslib.__assign({}, styles__default.default), mobileStyles__default.default);
+var PrimaryTabListMobile = function (props) { return (React__default.default.createElement(components_primaryTablist_Component.PrimaryTabList, tslib.__assign({}, props, { styles: styles, platform: 'mobile' }))); };
+
+exports.PrimaryTabListMobile = PrimaryTabListMobile;

package/tabs/cssm/components/primary-tablist/Component.responsive.js

@@ -1,31 +1,20 @@
-import React from 'react';
-import { useMatchMedia } from '../../../../mq/cssm';
-import { PrimaryTabListDesktop } from './Component.desktop.js';
-import { PrimaryTabListMobile } from './Component.mobile.js';
-import './Component.js';
-import '@juggle/resize-observer';
-import 'classnames';
-import '../../../../keyboard-focusable/cssm';
-import '../../../../shared/cssm';
-import '../../hooks/use-tabs.js';
-import 'react-merge-refs';
-import '../scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import '../scrollable-container/index.module.css';
-import '../title/Component.js';
-import './index.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const PrimaryTabListResponsive = ({ size, breakpoint = 1024, fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
-    return isDesktop ? (React.createElement(PrimaryTabListDesktop, { breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue, ...restProps })) : (React.createElement(PrimaryTabListMobile, { breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, ...restProps }));
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../../../mq/cssm');
+var coreComponentsShared = require('../../../../shared/cssm');
+var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
+var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var PrimaryTabListResponsive = function (_a) {
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    return isDesktop ? (React__default.default.createElement(components_primaryTablist_Component_desktop.PrimaryTabListDesktop, tslib.__assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React__default.default.createElement(components_primaryTablist_Component_mobile.PrimaryTabListMobile, tslib.__assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };
 
-export { PrimaryTabListResponsive };
+exports.PrimaryTabListResponsive = PrimaryTabListResponsive;

package/tabs/cssm/components/scroll-controls/Component.js

@@ -1,38 +1,50 @@
-import React, { forwardRef, useState, useEffect } from 'react';
-import cn from 'classnames';
-import _debounce from 'lodash.debounce';
-import { IconButton } from '../../../../icon-button/cssm';
-import { ChevronLeftCompactSIcon } from '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import { ChevronRightCompactSIcon } from '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab } from './utils.js';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ScrollControls = forwardRef(({ containerRef, view, size: sizeProp, className }, ref) => {
-    const container = containerRef.current;
-    const [disabledState, updateDisabledState] = useState(() => getDisabledState(container));
-    useEffect(() => {
-        const handleScroll = _debounce(() => updateDisabledState(getDisabledState(container)), 100, { leading: true, maxWait: 100, trailing: true });
-        container?.addEventListener('scroll', handleScroll);
-        return () => container?.removeEventListener('scroll', handleScroll);
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var _debounce = require('lodash.debounce');
+var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var ChevronLeftCompactSIcon = require('@alfalab/icons-glyph/ChevronLeftCompactSIcon');
+var ChevronRightCompactSIcon = require('@alfalab/icons-glyph/ChevronRightCompactSIcon');
+var components_scrollControls_utils = require('./utils.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 cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var _debounce__default = /*#__PURE__*/_interopDefaultCompat(_debounce);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var ScrollControls = React.forwardRef(function (_a, ref) {
+    var _b;
+    var containerRef = _a.containerRef, view = _a.view, sizeProp = _a.size, className = _a.className;
+    var container = containerRef.current;
+    var _c = React.useState(function () { return components_scrollControls_utils.getDisabledState(container); }), disabledState = _c[0], updateDisabledState = _c[1];
+    React.useEffect(function () {
+        var handleScroll = _debounce__default.default(function () { return updateDisabledState(components_scrollControls_utils.getDisabledState(container)); }, 100, { leading: true, maxWait: 100, trailing: true });
+        container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
+        return function () { return container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll); };
     }, [container]);
-    const getSize = () => {
+    var getSize = function () {
         if (view === 'primary') {
             return sizeProp === 'xl' ? 'xs' : 'xxs';
         }
         return sizeProp && ['s', 'm', 'l', 'xl'].includes(sizeProp) ? 's' : 'xs';
     };
-    const handleScrollLeft = () => scrollIntoFirstTab(container);
-    const handleScrollRight = () => scrollIntoLastTab(container);
-    const commonButtonProps = {
-        className: styles.button,
+    var handleScrollLeft = function () { return components_scrollControls_utils.scrollIntoFirstTab(container); };
+    var handleScrollRight = function () { return components_scrollControls_utils.scrollIntoLastTab(container); };
+    var commonButtonProps = {
+        className: styles__default.default.button,
         size: getSize(),
         view: 'secondary',
     };
-    return (React.createElement("div", { ref: ref, className: cn(styles.component, styles[view], sizeProp && styles[sizeProp], className, {
-            [styles.borderVisible]: !disabledState.toRight,
-        }) },
-        React.createElement(IconButton, { ...commonButtonProps, icon: ChevronLeftCompactSIcon, disabled: disabledState.toLeft, onClick: handleScrollLeft }),
-        React.createElement(IconButton, { ...commonButtonProps, icon: ChevronRightCompactSIcon, disabled: disabledState.toRight, onClick: handleScrollRight })));
+    return (React__default.default.createElement("div", { ref: ref, className: cn__default.default(styles__default.default.component, styles__default.default[view], sizeProp && styles__default.default[sizeProp], className, (_b = {},
+            _b[styles__default.default.borderVisible] = !disabledState.toRight,
+            _b)) },
+        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronLeftCompactSIcon.ChevronLeftCompactSIcon, disabled: disabledState.toLeft, onClick: handleScrollLeft })),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, commonButtonProps, { icon: ChevronRightCompactSIcon.ChevronRightCompactSIcon, disabled: disabledState.toRight, onClick: handleScrollRight }))));
 });
 
-export { ScrollControls };
+exports.ScrollControls = ScrollControls;

package/tabs/cssm/components/scroll-controls/index.js

@@ -1,9 +1,7 @@
-export { ScrollControls } from './Component.js';
-import 'react';
-import 'classnames';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import './utils.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_scrollControls_Component = require('./Component.js');
+
+
+
+exports.ScrollControls = components_scrollControls_Component.ScrollControls;

package/tabs/cssm/components/scroll-controls/utils.js

@@ -1,10 +1,12 @@
-const ADDITIONAL_OFFSET = 15;
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ADDITIONAL_OFFSET = 15;
 function getTabs(container) {
     return Array.from(container.querySelectorAll('button[role="tab"]'));
 }
 function findLastVisibleTab(container) {
-    const tabs = getTabs(container);
-    return tabs.reduce((res, tab) => {
+    var tabs = getTabs(container);
+    return tabs.reduce(function (res, tab) {
         if (tab.offsetLeft + ADDITIONAL_OFFSET < container.clientWidth + container.scrollLeft) {
             return tab;
         }
@@ -12,8 +14,8 @@ function findLastVisibleTab(container) {
     }, tabs[0]);
 }
 function findFirstVisibleTab(container) {
-    const tabs = getTabs(container);
-    return tabs.reduceRight((res, tab) => {
+    var tabs = getTabs(container);
+    return tabs.reduceRight(function (res, tab) {
         if (tab.offsetLeft + tab.clientWidth > container.scrollLeft + ADDITIONAL_OFFSET) {
             return tab;
         }
@@ -41,10 +43,12 @@ function scrollIntoFirstTab(container) {
 function getDisabledState(container) {
     if (!container)
         return { toLeft: false, toRight: false };
-    const scrollOffset = 2;
-    const toLeft = container.scrollLeft <= scrollOffset;
-    const toRight = container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;
-    return { toLeft, toRight };
+    var scrollOffset = 2;
+    var toLeft = container.scrollLeft <= scrollOffset;
+    var toRight = container.scrollLeft + container.clientWidth >= container.scrollWidth - scrollOffset;
+    return { toLeft: toLeft, toRight: toRight };
 }
 
-export { getDisabledState, scrollIntoFirstTab, scrollIntoLastTab };
+exports.getDisabledState = getDisabledState;
+exports.scrollIntoFirstTab = scrollIntoFirstTab;
+exports.scrollIntoLastTab = scrollIntoLastTab;

package/tabs/cssm/components/scrollable-container/Component.js

@@ -1,37 +1,43 @@
-import React, { useRef, useState, useEffect } from 'react';
-import cn from 'classnames';
-import { compute } from 'compute-scroll-into-view';
-import { ScrollControls } from '../scroll-controls/Component.js';
-import styles from './index.module.css';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var computeScrollIntoView = require('compute-scroll-into-view');
+var components_scrollControls_Component = require('../scroll-controls/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 cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 /**
  * Дополнительная прокрутка при клике на не поместившийся таб
  */
-const ADDITIONAL_SCROLL_LEFT_VALUE = 50;
-const isOverflown = ({ clientWidth, scrollWidth }, controlsNode) => {
-    const controlsWidth = controlsNode?.offsetWidth || 0;
+var ADDITIONAL_SCROLL_LEFT_VALUE = 50;
+var isOverflown = function (_a, controlsNode) {
+    var clientWidth = _a.clientWidth, scrollWidth = _a.scrollWidth;
+    var controlsWidth = (controlsNode === null || controlsNode === void 0 ? void 0 : controlsNode.offsetWidth) || 0;
     return scrollWidth > clientWidth + controlsWidth;
 };
-const ScrollableContainer = ({ containerWrapperClassName, containerClassName, scrollControlsClassName, children, activeChild, fullWidthScroll, view, size, platform, }) => {
-    const containerRef = useRef(null);
-    const controlsRef = useRef(null);
-    const [overflown, setOverflown] = useState(false);
-    useEffect(() => {
+var ScrollableContainer = function (_a) {
+    var _b;
+    var containerWrapperClassName = _a.containerWrapperClassName, containerClassName = _a.containerClassName, scrollControlsClassName = _a.scrollControlsClassName, children = _a.children, activeChild = _a.activeChild, fullWidthScroll = _a.fullWidthScroll, view = _a.view, size = _a.size, platform = _a.platform;
+    var containerRef = React.useRef(null);
+    var controlsRef = React.useRef(null);
+    var _c = React.useState(false), overflown = _c[0], setOverflown = _c[1];
+    React.useEffect(function () {
         if (activeChild) {
-            const actions = compute(activeChild, {
+            var actions = computeScrollIntoView.compute(activeChild, {
                 scrollMode: 'if-needed',
                 block: 'nearest',
                 inline: 'nearest',
-                boundary: (parent) => !parent.isSameNode(containerRef.current),
+                boundary: function (parent) { return !parent.isSameNode(containerRef.current); },
             });
             // TODO: animate?
-            actions.forEach(({ el, left }) => {
+            actions.forEach(function (_a) {
+                var el = _a.el, left = _a.left;
                 // eslint-disable-next-line no-param-reassign
                 el.scrollLeft =
                     el.scrollLeft > left
@@ -40,11 +46,11 @@ const ScrollableContainer = ({ containerWrapperClassName, containerClassName, sc
             });
         }
     }, [activeChild]);
-    useEffect(() => {
-        const scrollableNode = containerRef.current;
-        const tabsContainer = scrollableNode?.firstElementChild;
+    React.useEffect(function () {
+        var scrollableNode = containerRef.current;
+        var tabsContainer = scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.firstElementChild;
         if (platform === 'desktop' && scrollableNode && tabsContainer && window.ResizeObserver) {
-            const observerCb = () => {
+            var observerCb = function () {
                 if (isOverflown(scrollableNode, controlsRef.current)) {
                     setOverflown(true);
                 }
@@ -52,18 +58,18 @@ const ScrollableContainer = ({ containerWrapperClassName, containerClassName, sc
                     setOverflown(false);
                 }
             };
-            const observer = new ResizeObserver(observerCb);
-            observer.observe(scrollableNode);
-            observer.observe(tabsContainer);
-            return () => observer.disconnect();
+            var observer_1 = new ResizeObserver(observerCb);
+            observer_1.observe(scrollableNode);
+            observer_1.observe(tabsContainer);
+            return function () { return observer_1.disconnect(); };
         }
-        return () => { };
+        return function () { };
     }, [platform]);
-    return (React.createElement("div", { className: cn(styles.scrollableContainerWrapper, containerWrapperClassName) },
-        React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName, {
-                [styles.fullWidthScroll]: fullWidthScroll,
-            }) }, children),
-        overflown && platform === 'desktop' ? (React.createElement(ScrollControls, { className: scrollControlsClassName, ref: controlsRef, containerRef: containerRef, view: view, size: size })) : null));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.scrollableContainerWrapper, containerWrapperClassName) },
+        React__default.default.createElement("div", { ref: containerRef, className: cn__default.default(styles__default.default.container, containerClassName, (_b = {},
+                _b[styles__default.default.fullWidthScroll] = fullWidthScroll,
+                _b)) }, children),
+        overflown && platform === 'desktop' ? (React__default.default.createElement(components_scrollControls_Component.ScrollControls, { className: scrollControlsClassName, ref: controlsRef, containerRef: containerRef, view: view, size: size })) : null));
 };
 
-export { ScrollableContainer };
+exports.ScrollableContainer = ScrollableContainer;

package/tabs/cssm/components/scrollable-container/index.js

@@ -1,12 +1,7 @@
-export { ScrollableContainer } from './Component.js';
-import 'react';
-import 'classnames';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_scrollableContainer_Component = require('./Component.js');
+
+
+
+exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;

package/tabs/cssm/components/secondary-tablist/Component.desktop.js

@@ -1,22 +1,19 @@
-import React from 'react';
-import { TagDesktop } from '../../../../tag/cssm/desktop';
-import { SecondaryTabList } from './Component.js';
-import commonStyles from './index.module.css';
-import 'classnames';
-import '../../hooks/use-tabs.js';
-import 'react-merge-refs';
-import '../../../../shared/cssm';
-import '../scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import '../scrollable-container/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SecondaryTabListDesktop = ({ size = 's', ...restProps }) => (React.createElement(SecondaryTabList, { ...restProps, TagComponent: TagDesktop, size: size, styles: commonStyles, tagSize: size, platform: 'desktop' }));
+var tslib = require('tslib');
+var React = require('react');
+var desktop = require('../../../../tag/cssm/desktop');
+var components_secondaryTablist_Component = require('./Component.js');
+var commonStyles = require('./index.module.css');
 
-export { SecondaryTabListDesktop };
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
+
+var SecondaryTabListDesktop = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, restProps = tslib.__rest(_a, ["size"]);
+    return (React__default.default.createElement(components_secondaryTablist_Component.SecondaryTabList, tslib.__assign({}, restProps, { TagComponent: desktop.TagDesktop, size: size, styles: commonStyles__default.default, tagSize: size, platform: 'desktop' })));
+};
+
+exports.SecondaryTabListDesktop = SecondaryTabListDesktop;

package/tabs/cssm/components/secondary-tablist/Component.js

@@ -1,37 +1,36 @@
-import React from 'react';
-import cn from 'classnames';
-import { useTabs } from '../../hooks/use-tabs.js';
-import { ScrollableContainer } from '../scrollable-container/Component.js';
-import 'react-merge-refs';
-import '../../../../shared/cssm';
-import 'compute-scroll-into-view';
-import '../scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../scroll-controls/utils.js';
-import '../scroll-controls/index.module.css';
-import '../scrollable-container/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SecondaryTabList = ({ styles = {}, className, containerClassName, size, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, tagSize = 'xs', onChange, dataTestId, TagComponent, platform, tagShape, tagView, }) => {
-    const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
-        titles,
-        selectedId,
-        onChange,
-    });
-    const renderContent = () => {
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var hooks_useTabs = require('../../hooks/use-tabs.js');
+var components_scrollableContainer_Component = require('../scrollable-container/Component.js');
+
+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 SecondaryTabList = function (_a) {
+    var _b = _a.styles, styles = _b === void 0 ? {} : _b, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, fullWidthScroll = _a.fullWidthScroll, _f = _a.tagSize, tagSize = _f === void 0 ? 'xs' : _f, onChange = _a.onChange, dataTestId = _a.dataTestId, TagComponent = _a.TagComponent, platform = _a.platform, tagShape = _a.tagShape, tagView = _a.tagView;
+    var _g = hooks_useTabs.useTabs({
+        titles: titles,
+        selectedId: selectedId,
+        onChange: onChange,
+    }), focusedTab = _g.focusedTab, selectedTab = _g.selectedTab, getTabListItemProps = _g.getTabListItemProps;
+    var renderContent = function () {
+        var _a;
         if (!TagComponent)
             return null;
-        return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
-                [styles.fullWidthScroll]: fullWidthScroll,
-            }) }, titles.map((item, index) => {
+        return (React__default.default.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn__default.default(styles.component, className, size && styles[size], (_a = {},
+                _a[styles.fullWidthScroll] = fullWidthScroll,
+                _a)) }, titles.map(function (item, index) {
             if (item.hidden)
                 return null;
-            return (React.createElement(TagComponent, { ...getTabListItemProps(index), shape: tagShape, view: tagView, key: item.id, className: cn(styles.title, item.toggleClassName), checked: item.id === selectedId, size: tagSize, rightAddons: item.rightAddons }, item.title));
+            return (React__default.default.createElement(TagComponent, tslib.__assign({}, getTabListItemProps(index), { shape: tagShape, view: tagView, key: item.id, className: cn__default.default(styles.title, item.toggleClassName), checked: item.id === selectedId, size: tagSize, rightAddons: item.rightAddons }), item.title));
         })));
     };
-    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll, view: 'secondary', size: size, platform: platform }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
+    return scrollable ? (React__default.default.createElement(components_scrollableContainer_Component.ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll, view: 'secondary', size: size, platform: platform }, renderContent())) : (React__default.default.createElement("div", { className: cn__default.default(styles.container, containerClassName) }, renderContent()));
 };
 
-export { SecondaryTabList };
+exports.SecondaryTabList = SecondaryTabList;