@consta/uikit 3.22.0 → 3.24.0

package/__internal__/cjs-src/components/TabsCanary/FitModeScrollWrapper/TabsFitModeScrollWrapper.js

@@ -0,0 +1,66 @@
+"use strict";
+exports.__esModule = true;
+exports.TabsFitModeScrollWrapper = void 0;
+var tslib_1 = require("tslib");
+require("./TabsFitModeScrollWrapper.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useResizeObserved_1 = require("../../../hooks/useResizeObserved/useResizeObserved");
+var useScrollPosition_1 = require("../../../hooks/useScrollPosition/useScrollPosition");
+var IconArrowLeft_1 = require("../../../icons/IconArrowLeft/IconArrowLeft");
+var IconArrowRight_1 = require("../../../icons/IconArrowRight/IconArrowRight");
+var bem_1 = require("../../../utils/bem");
+var Button_1 = require("../../Button/Button");
+var helpers_1 = require("../helpers");
+var cnTabsFitModeScrollWrapper = bem_1.cn('TabsFitModeScrollWrapper');
+exports.TabsFitModeScrollWrapper = function (_a) {
+    var tabsDimensions = _a.tabsDimensions, items = _a.items, renderItemsList = _a.renderItemsList, getItemChecked = _a.getItemChecked;
+    var scrollContainerRef = react_1["default"].useRef(null);
+    var _b = tslib_1.__read(useResizeObserved_1.useResizeObserved(react_1["default"].useMemo(function () { return [scrollContainerRef]; }, [scrollContainerRef]), function (el) {
+        var _a;
+        return ({
+            isScrollable: el && el.scrollWidth > el.offsetWidth,
+            width: (_a = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _a !== void 0 ? _a : 0,
+            paddingLeft: el ? parseInt(getComputedStyle(el).paddingLeft, 10) : 0
+        });
+    }), 1), _c = _b[0], isScrollable = _c.isScrollable, containerWidth = _c.width, containerPaddingLeft = _c.paddingLeft;
+    var scrollLeft = useScrollPosition_1.useScrollPosition(scrollContainerRef.current).scrollLeft;
+    var _d = tslib_1.__read(helpers_1.getVisibleTabsRange({
+        tabsDimensions: tabsDimensions,
+        containerWidth: containerWidth,
+        containerPaddingLeft: containerPaddingLeft,
+        scrollLeft: scrollLeft
+    }), 2), firstVisibleTabIdx = _d[0], lastVisibleTabIdx = _d[1];
+    var scrollTabIntoView = function (idx) {
+        var _a;
+        var tabIsVisible = idx >= firstVisibleTabIdx && idx <= lastVisibleTabIdx;
+        if (!tabIsVisible) {
+            var previousTabsWidth = helpers_1.getTabsWidth(tabsDimensions.slice(0, idx));
+            (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                left: previousTabsWidth,
+                behavior: 'smooth'
+            });
+        }
+    };
+    var scrollPrev = function () {
+        scrollTabIntoView(firstVisibleTabIdx - 1);
+    };
+    var scrollNext = function () {
+        scrollTabIntoView(lastVisibleTabIdx + 1);
+    };
+    // Подскролливаем к выбранному табу
+    var checkedTabIdx = items.findIndex(getItemChecked);
+    react_1["default"].useEffect(function () {
+        if (isScrollable) {
+            scrollTabIntoView(checkedTabIdx);
+        }
+    }, [checkedTabIdx, isScrollable]);
+    return (react_1["default"].createElement("div", { className: cnTabsFitModeScrollWrapper() },
+        isScrollable && (react_1["default"].createElement(react_1["default"].Fragment, null, ['prev', 'next'].map(function (buttonTo) { return (react_1["default"].createElement(Button_1.Button, { key: buttonTo, view: "clear", size: "xs", onlyIcon: true, disabled: buttonTo === 'prev'
+                ? firstVisibleTabIdx === 0
+                : lastVisibleTabIdx === items.length - 1, iconLeft: buttonTo === 'prev' ? IconArrowLeft_1.IconArrowLeft : IconArrowRight_1.IconArrowRight, className: cnTabsFitModeScrollWrapper('Button', { to: buttonTo }), onClick: buttonTo === 'prev' ? scrollPrev : scrollNext })); }))),
+        react_1["default"].createElement("div", { className: cnTabsFitModeScrollWrapper('Content'), ref: scrollContainerRef }, renderItemsList({
+            getTabClassName: function (idx) {
+                return cnTabsFitModeScrollWrapper('Tab', { noMargin: idx === items.length - 1 });
+            }
+        }))));
+};

package/__internal__/cjs-src/components/TabsCanary/Line/TabsLine.css

@@ -0,0 +1,51 @@
+.TabsLine {
+  position: absolute;
+}
+
+  .TabsLine_type_border {
+    --line-thickness: 1px;
+    background-color: var(--color-bg-border);
+  }
+
+  .TabsLine_type_running {
+    --line-thickness: 2px;
+    background-color: var(--color-bg-brand);
+    -webkit-transition: width 0.25s, height 0.25s, -webkit-transform 0.25s;
+    transition: width 0.25s, height 0.25s, -webkit-transform 0.25s;
+    transition: transform 0.25s, width 0.25s, height 0.25s;
+    transition: transform 0.25s, width 0.25s, height 0.25s, -webkit-transform 0.25s;
+  }
+
+  .TabsLine_position_bottom,
+  .TabsLine_position_top {
+    left: 0;
+    width: var(--line-length);
+    height: var(--line-thickness);
+    -webkit-transform: translateX(var(--line-offset));
+            transform: translateX(var(--line-offset));
+  }
+
+  .TabsLine_position_bottom {
+    bottom: 0;
+  }
+
+  .TabsLine_position_top {
+    top: 0;
+  }
+
+  .TabsLine_position_left,
+  .TabsLine_position_right {
+    top: 0;
+    width: var(--line-thickness);
+    height: var(--line-length);
+    -webkit-transform: translateY(var(--line-offset));
+            transform: translateY(var(--line-offset));
+  }
+
+  .TabsLine_position_left {
+    left: 0;
+  }
+
+  .TabsLine_position_right {
+    right: 0;
+  }

package/__internal__/cjs-src/components/TabsCanary/Line/TabsLine.d.ts

@@ -0,0 +1,11 @@
+import './TabsLine.css';
+import React from 'react';
+import { TabDimensions, TabsPropLinePosition } from '../types';
+export declare const TabsBorderLine: React.FC<{
+    linePosition: TabsPropLinePosition;
+}>;
+export declare const TabsRunningLine: React.FC<{
+    linePosition: TabsPropLinePosition;
+    activeTabIdx: number;
+    tabsDimensions: TabDimensions[];
+}>;

package/__internal__/cjs-src/components/TabsCanary/Line/TabsLine.js

@@ -0,0 +1,30 @@
+"use strict";
+exports.__esModule = true;
+exports.TabsRunningLine = exports.TabsBorderLine = void 0;
+var tslib_1 = require("tslib");
+require("./TabsLine.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var helpers_1 = require("../helpers");
+var cnTabsLine = bem_1.cn('TabsLine');
+exports.TabsBorderLine = function (_a) {
+    var linePosition = _a.linePosition;
+    return react_1["default"].createElement(TabsLine, { type: "border", linePosition: linePosition, size: "100%" });
+};
+exports.TabsRunningLine = function (_a) {
+    var _b, _c;
+    var linePosition = _a.linePosition, activeTabIdx = _a.activeTabIdx, tabsDimensions = _a.tabsDimensions;
+    var previousTabsDimensions = tabsDimensions.slice(0, activeTabIdx);
+    var size = (_c = (_b = tabsDimensions[activeTabIdx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0;
+    var offset = helpers_1.getTabsWidth(previousTabsDimensions);
+    return react_1["default"].createElement(TabsLine, { type: "running", linePosition: linePosition, size: size, offset: offset });
+};
+var TabsLine = function (_a) {
+    var _b;
+    var type = _a.type, linePosition = _a.linePosition, size = _a.size, _c = _a.offset, offset = _c === void 0 ? '0px' : _c;
+    return (react_1["default"].createElement("div", { className: cnTabsLine({ type: type, position: linePosition }), style: (_b = {},
+            _b['--line-length'] = formatCSSValue(size),
+            _b['--line-offset'] = formatCSSValue(offset),
+            _b) }));
+};
+var formatCSSValue = function (n) { return (typeof n === 'number' ? n + "px" : n); };

package/__internal__/cjs-src/components/TabsCanary/MoreItems/TabsMoreItems.css

@@ -0,0 +1,45 @@
+.TabsMoreItems-Button {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .TabsMoreItems-Content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: var(--space-s) 0;
+    background: var(--color-bg-default);
+    border: 1px solid var(--color-bg-border);
+    border-radius: var(--control-radius);
+    -webkit-box-shadow: var(--shadow-modal);
+            box-shadow: var(--shadow-modal);
+
+    /* Если текст будет переноситься на несколько строк,
+    не получится сразу правильно вычислить направление попапа и он будет скакать при открытии */
+    white-space: nowrap;
+  }
+  .TabsMoreItems-Item {
+    padding: 0 var(--space-s);
+  }
+  .TabsMoreItems-Item_active {
+      position: relative;
+    }
+  .TabsMoreItems-Item_active::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -1px;
+        bottom: 0;
+        width: 2px;
+        background: var(--color-bg-brand);
+      }
+  .TabsMoreItems-Item > * {
+      width: 100%;
+    }

package/__internal__/cjs-src/components/TabsCanary/MoreItems/TabsMoreItems.d.ts

@@ -0,0 +1,3 @@
+import './TabsMoreItems.css';
+import { TabsMoreItemsComponent } from '../types';
+export declare const TabsMoreItems: TabsMoreItemsComponent;

package/__internal__/cjs-src/components/TabsCanary/MoreItems/TabsMoreItems.js

@@ -0,0 +1,52 @@
+"use strict";
+exports.__esModule = true;
+exports.TabsMoreItems = void 0;
+var tslib_1 = require("tslib");
+require("./TabsMoreItems.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var focus_trap_react_1 = tslib_1.__importDefault(require("focus-trap-react"));
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var IconMeatball_1 = require("../../../icons/IconMeatball/IconMeatball");
+var MixPopoverAnimate_1 = require("../../../mixs/MixPopoverAnimate/MixPopoverAnimate");
+var bem_1 = require("../../../utils/bem");
+var Button_1 = require("../../Button/Button");
+var Popover_1 = require("../../Popover/Popover");
+var cnTabsMoreItems = bem_1.cn('TabsMoreItems');
+function TabsMoreItemsRender(props, ref) {
+    var items = props.items, renderItem = props.renderItem, getItemLabel = props.getItemLabel, getItemChecked = props.getItemChecked, height = props.height;
+    var _a = tslib_1.__read(useFlag_1.useFlag(false), 2), isOpen = _a[0], _b = _a[1], off = _b.off, toogle = _b.toogle;
+    var buttonRef = react_1.useRef(null);
+    var popoverRef = react_1.useRef(null);
+    var _c = tslib_1.__read(react_1.useState('downStartLeft'), 2), direction = _c[0], setDirection = _c[1];
+    react_1.useEffect(function () {
+        items.length === 0 && off();
+    }, [items]);
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("div", { ref: useForkRef_1.useForkRef([ref, buttonRef]), className: cnTabsMoreItems('Button'), style: { height: height } },
+            react_1["default"].createElement(Button_1.Button, { size: "xs", view: "ghost", onlyIcon: true, iconLeft: IconMeatball_1.IconMeatball, onClick: toogle })),
+        react_1["default"].createElement(react_transition_group_1.Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: MixPopoverAnimate_1.animateTimeout }, function (animate) {
+            var _a;
+            return (react_1["default"].createElement(Popover_1.Popover, { anchorRef: buttonRef, offset: -1, ref: popoverRef, direction: "downStartRight", spareDirection: "downStartLeft", className: cnTabsMoreItems('Popover', [MixPopoverAnimate_1.cnMixPopoverAnimate({ animate: animate, direction: direction })]), onSetDirection: setDirection, possibleDirections: [
+                    'downStartRight',
+                    'downStartLeft',
+                    'upStartRight',
+                    'upStartLeft',
+                    'downCenter',
+                    'upCenter',
+                ] },
+                react_1["default"].createElement(focus_trap_react_1["default"], { focusTrapOptions: {
+                        fallbackFocus: (_a = buttonRef.current) !== null && _a !== void 0 ? _a : undefined,
+                        clickOutsideDeactivates: function (e) {
+                            var _a;
+                            var isClickInsideButton = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target);
+                            return !isClickInsideButton;
+                        },
+                        allowOutsideClick: true,
+                        onDeactivate: off
+                    } },
+                    react_1["default"].createElement("div", { className: cnTabsMoreItems('Content') }, items.map(function (item) { return (react_1["default"].createElement("div", { key: getItemLabel(item), className: cnTabsMoreItems('Item', { active: getItemChecked(item) }) }, renderItem(item, off))); })))));
+        })));
+}
+exports.TabsMoreItems = react_1.forwardRef(TabsMoreItemsRender);

package/__internal__/cjs-src/components/TabsCanary/Tab/TabsTab.css

@@ -0,0 +1,69 @@
+.TabsTab {
+  --tab-indent: var(--space-m);
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: var(--space-xs) 0;
+  color: var(--color-typo-secondary);
+  background-color: transparent;
+  border: none;
+  font-family: var(--font);
+  font-size: var(--tab-font-size);
+  line-height: var(--line-height-text-s);
+  text-align: left;
+  cursor: pointer;
+  -webkit-transition: color 0.2s;
+  transition: color 0.2s;
+}
+
+  .TabsTab_size_s {
+      --only-icon-size: var(--space-l);
+      --tab-font-size: var(--size-text-s);
+    }
+
+  .TabsTab_size_m {
+      --only-icon-size: var(--space-xl);
+      --tab-font-size: var(--size-text-m);
+    }
+
+  .TabsTab_checked,
+  .TabsTab:hover {
+    color: var(--color-typo-primary);
+  }
+
+  /* Увеличиваем область клика и фокуса */
+
+  .TabsTab::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: calc(-1 * var(--space-2xs));
+    left: calc(-1 * var(--space-2xs));
+    bottom: 0;
+    display: block;
+    border-radius: var(--control-radius);
+  }
+
+  .TabsTab:focus {
+    outline: none;
+  }
+
+  .TabsTab-Icon {
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+  }
+
+  .TabsTab:not(.TabsTab_onlyIcon) .TabsTab-Icon {
+    margin-right: calc(var(--tab-indent) * 0.5);
+  }
+
+  .TabsTab_onlyIcon {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    width: var(--only-icon-size);
+  }

package/__internal__/cjs-src/components/TabsCanary/Tab/TabsTab.d.ts

@@ -0,0 +1,5 @@
+import './TabsTab.css';
+import React from 'react';
+import { TabsTabProps } from '../types';
+export declare const cnTabsTab: import("@bem-react/classname").ClassNameFormatter;
+export declare const TabsTab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<HTMLButtonElement>>;

package/__internal__/cjs-src/components/TabsCanary/Tab/TabsTab.js

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.TabsTab = exports.cnTabsTab = void 0;
+var tslib_1 = require("tslib");
+require("./TabsTab.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var MixFocus_1 = require("../../../mixs/MixFocus/MixFocus");
+var bem_1 = require("../../../utils/bem");
+var getByMap_1 = require("../../../utils/getByMap");
+exports.cnTabsTab = bem_1.cn('TabsTab');
+var sizeMap = {
+    s: 'xs',
+    m: 's'
+};
+exports.TabsTab = react_1.forwardRef(function (props, ref) {
+    var label = props.label, onChange = props.onChange, checked = props.checked, size = props.size, onlyIcon = props.onlyIcon, Icon = props.icon, iconSizeProp = props.iconSize, className = props.className;
+    var iconSize = getByMap_1.getByMap(sizeMap, size, iconSizeProp);
+    return (react_1["default"].createElement("button", { className: exports.cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [MixFocus_1.cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
+        Icon && react_1["default"].createElement(Icon, { className: exports.cnTabsTab('Icon'), size: iconSize }),
+        !onlyIcon && label));
+});

package/__internal__/cjs-src/components/TabsCanary/Tabs.css

@@ -0,0 +1,57 @@
+.Tabs {
+  position: relative;
+}
+
+  .Tabs_size_s {
+    --list-offset: var(--space-s);
+  }
+
+  .Tabs_size_m {
+    --list-offset: var(--space-m);
+  }
+
+  .Tabs-List {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .Tabs-List_direction_horizontal {
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      white-space: nowrap;
+    }
+
+  .Tabs-List_direction_vertical {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+    }
+
+  .Tabs-List_linePosition_left {
+      padding-left: var(--list-offset);
+    }
+
+  .Tabs-List_linePosition_right {
+      padding-right: var(--list-offset);
+    }
+
+  .Tabs-Tab {
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+  }
+
+  .Tabs-Tab_direction_horizontal {
+      margin-right: var(--space-m);
+    }
+
+  .Tabs-Tab_direction_vertical {
+      text-align: left;
+    }
+
+  .Tabs-Tab_direction_vertical > * {
+        width: 100%;
+      }

package/__internal__/cjs-src/components/TabsCanary/TabsCanary.d.ts

@@ -0,0 +1,7 @@
+import './Tabs.css';
+import { cnTabsTab, TabsTab } from './Tab/TabsTab';
+import { TabsComponent } from './types';
+export declare const cnTabs: import("@bem-react/classname").ClassNameFormatter;
+export declare const Tabs: TabsComponent;
+export { TabsTab, cnTabsTab };
+export * from './types';

package/__internal__/cjs-src/components/TabsCanary/TabsCanary.js

@@ -0,0 +1,71 @@
+"use strict";
+exports.__esModule = true;
+exports.cnTabsTab = exports.TabsTab = exports.Tabs = exports.cnTabs = void 0;
+var tslib_1 = require("tslib");
+require("./Tabs.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
+var useResizeObserved_1 = require("../../hooks/useResizeObserved/useResizeObserved");
+var bem_1 = require("../../utils/bem");
+var TabsLine_1 = require("./Line/TabsLine");
+var TabsTab_1 = require("./Tab/TabsTab");
+exports.cnTabsTab = TabsTab_1.cnTabsTab;
+exports.TabsTab = TabsTab_1.TabsTab;
+var helpers_1 = require("./helpers");
+var types_1 = require("./types");
+exports.cnTabs = bem_1.cn('Tabs');
+function renderItemDefault(props) {
+    var onChange = props.onChange, otherProps = tslib_1.__rest(props, ["onChange"]);
+    return react_1["default"].createElement(TabsTab_1.TabsTab, tslib_1.__assign({}, otherProps, { onChange: onChange }));
+}
+function TabsRender(props, ref) {
+    var _a = helpers_1.withDefaultGetters(props), _b = _a.size, size = _b === void 0 ? types_1.tabsDefaultSize : _b, className = _a.className, items = _a.items, _c = _a.view, view = _c === void 0 ? types_1.tabsDefaultView : _c, value = _a.value, _d = _a.linePosition, linePosition = _d === void 0 ? types_1.tabsDefaultLinePosition : _d, _e = _a.fitMode, fitMode = _e === void 0 ? types_1.tabsDefaultFitMode : _e, onlyIcon = _a.onlyIcon, getItemIcon = _a.getItemIcon, getItemLabel = _a.getItemLabel, onChange = _a.onChange, iconSize = _a.iconSize, _f = _a.renderItem, renderItemProp = _f === void 0 ? renderItemDefault : _f, otherProps = tslib_1.__rest(_a, ["size", "className", "items", "view", "value", "linePosition", "fitMode", "onlyIcon", "getItemIcon", "getItemLabel", "onChange", "iconSize", "renderItem"]);
+    var _g = useChoiceGroup_1.useChoiceGroup({
+        value: value || null,
+        getKey: getItemLabel,
+        callBack: onChange,
+        multiple: false
+    }), getOnChange = _g.getOnChange, getChecked = _g.getChecked;
+    var tabsDirection = helpers_1.getTabsDirection(linePosition);
+    var isVertical = tabsDirection === 'vertical';
+    var tabRefs = react_1.useMemo(function () { return new Array(items.length).fill(null).map(function () { return react_1.createRef(); }); }, [items, fitMode, isVertical]);
+    var tabsDimensions = useResizeObserved_1.useResizeObserved(tabRefs, function (el) {
+        var _a;
+        return ({
+            size: (_a = el === null || el === void 0 ? void 0 : el[isVertical ? 'offsetHeight' : 'offsetWidth']) !== null && _a !== void 0 ? _a : 0,
+            gap: el ? parseInt(getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'], 10) : 0
+        });
+    });
+    var activeTabIdx = items.findIndex(getChecked);
+    var renderItem = function (item, onClick) {
+        return renderItemProp({
+            item: item,
+            onChange: function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+                getOnChange(item).apply(void 0, tslib_1.__spread(args));
+            },
+            checked: getChecked(item),
+            label: getItemLabel(item).toString(),
+            icon: getItemIcon === null || getItemIcon === void 0 ? void 0 : getItemIcon(item),
+            onlyIcon: onlyIcon,
+            size: size,
+            iconSize: iconSize
+        });
+    };
+    var renderItemsList = function (_a) {
+        var _b = _a.withRunningLine, withRunningLine = _b === void 0 ? true : _b, getTabClassName = _a.getTabClassName;
+        return (react_1["default"].createElement("div", { className: exports.cnTabs('List', { direction: tabsDirection, linePosition: linePosition }) },
+            items.map(function (item, idx) { return (react_1["default"].createElement("div", { ref: tabRefs[idx], key: getItemLabel(item), className: exports.cnTabs('Tab', { direction: tabsDirection }, [getTabClassName === null || getTabClassName === void 0 ? void 0 : getTabClassName(idx)]) }, renderItem(item))); }),
+            withRunningLine && (react_1["default"].createElement(TabsLine_1.TabsRunningLine, { linePosition: linePosition, tabsDimensions: tabsDimensions, activeTabIdx: activeTabIdx }))));
+    };
+    var Wrapper = helpers_1.getTabsWrapper(tabsDirection, fitMode);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnTabs({ size: size, view: view, direction: tabsDirection }, [className]), ref: ref }, otherProps),
+        react_1["default"].createElement(Wrapper, { tabRefs: tabRefs, tabsDimensions: tabsDimensions, renderItem: renderItem, renderItemsList: renderItemsList, getItemLabel: getItemLabel, getItemChecked: getChecked, items: items }),
+        view === 'bordered' && react_1["default"].createElement(TabsLine_1.TabsBorderLine, { linePosition: linePosition })));
+}
+exports.Tabs = react_1.forwardRef(TabsRender);
+tslib_1.__exportStar(require("./types"), exports);