@consta/uikit 3.22.0 → 3.24.0

package/__internal__/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__/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__/src/components/TabsCanary/Line/TabsLine.js

@@ -0,0 +1,26 @@
+import './TabsLine.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+import { getTabsWidth } from '../helpers';
+var cnTabsLine = cn('TabsLine');
+export var TabsBorderLine = function (_a) {
+    var linePosition = _a.linePosition;
+    return React.createElement(TabsLine, { type: "border", linePosition: linePosition, size: "100%" });
+};
+export var 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 = getTabsWidth(previousTabsDimensions);
+    return React.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.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__/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__/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__/src/components/TabsCanary/MoreItems/TabsMoreItems.js

@@ -0,0 +1,49 @@
+import { __read } from "tslib";
+import './TabsMoreItems.css';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Transition } from 'react-transition-group';
+import FocusTrap from 'focus-trap-react';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { IconMeatball } from '../../../icons/IconMeatball/IconMeatball';
+import { animateTimeout, cnMixPopoverAnimate, } from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';
+import { cn } from '../../../utils/bem';
+import { Button } from '../../Button/Button';
+import { Popover } from '../../Popover/Popover';
+var cnTabsMoreItems = cn('TabsMoreItems');
+function TabsMoreItemsRender(props, ref) {
+    var items = props.items, renderItem = props.renderItem, getItemLabel = props.getItemLabel, getItemChecked = props.getItemChecked, height = props.height;
+    var _a = __read(useFlag(false), 2), isOpen = _a[0], _b = _a[1], off = _b.off, toogle = _b.toogle;
+    var buttonRef = useRef(null);
+    var popoverRef = useRef(null);
+    var _c = __read(useState('downStartLeft'), 2), direction = _c[0], setDirection = _c[1];
+    useEffect(function () {
+        items.length === 0 && off();
+    }, [items]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: useForkRef([ref, buttonRef]), className: cnTabsMoreItems('Button'), style: { height: height } },
+            React.createElement(Button, { size: "xs", view: "ghost", onlyIcon: true, iconLeft: IconMeatball, onClick: toogle })),
+        React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) {
+            var _a;
+            return (React.createElement(Popover, { anchorRef: buttonRef, offset: -1, ref: popoverRef, direction: "downStartRight", spareDirection: "downStartLeft", className: cnTabsMoreItems('Popover', [cnMixPopoverAnimate({ animate: animate, direction: direction })]), onSetDirection: setDirection, possibleDirections: [
+                    'downStartRight',
+                    'downStartLeft',
+                    'upStartRight',
+                    'upStartLeft',
+                    'downCenter',
+                    'upCenter',
+                ] },
+                React.createElement(FocusTrap, { 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.createElement("div", { className: cnTabsMoreItems('Content') }, items.map(function (item) { return (React.createElement("div", { key: getItemLabel(item), className: cnTabsMoreItems('Item', { active: getItemChecked(item) }) }, renderItem(item, off))); })))));
+        })));
+}
+export var TabsMoreItems = forwardRef(TabsMoreItemsRender);

package/__internal__/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__/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__/src/components/TabsCanary/Tab/TabsTab.js

@@ -0,0 +1,17 @@
+import './TabsTab.css';
+import React, { forwardRef } from 'react';
+import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
+import { cn } from '../../../utils/bem';
+import { getByMap } from '../../../utils/getByMap';
+export var cnTabsTab = cn('TabsTab');
+var sizeMap = {
+    s: 'xs',
+    m: 's'
+};
+export var TabsTab = 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(sizeMap, size, iconSizeProp);
+    return (React.createElement("button", { className: cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
+        Icon && React.createElement(Icon, { className: cnTabsTab('Icon'), size: iconSize }),
+        !onlyIcon && label));
+});

package/__internal__/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__/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__/src/components/TabsCanary/TabsCanary.js

@@ -0,0 +1,67 @@
+import { __assign, __read, __rest, __spread } from "tslib";
+import './Tabs.css';
+import React, { createRef, forwardRef, useMemo } from 'react';
+import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
+import { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';
+import { cn } from '../../utils/bem';
+import { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';
+import { cnTabsTab, TabsTab } from './Tab/TabsTab';
+import { getTabsDirection, getTabsWrapper, withDefaultGetters } from './helpers';
+import { tabsDefaultFitMode, tabsDefaultLinePosition, tabsDefaultSize, tabsDefaultView, } from './types';
+export var cnTabs = cn('Tabs');
+function renderItemDefault(props) {
+    var onChange = props.onChange, otherProps = __rest(props, ["onChange"]);
+    return React.createElement(TabsTab, __assign({}, otherProps, { onChange: onChange }));
+}
+function TabsRender(props, ref) {
+    var _a = withDefaultGetters(props), _b = _a.size, size = _b === void 0 ? tabsDefaultSize : _b, className = _a.className, items = _a.items, _c = _a.view, view = _c === void 0 ? tabsDefaultView : _c, value = _a.value, _d = _a.linePosition, linePosition = _d === void 0 ? tabsDefaultLinePosition : _d, _e = _a.fitMode, fitMode = _e === void 0 ? 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 = __rest(_a, ["size", "className", "items", "view", "value", "linePosition", "fitMode", "onlyIcon", "getItemIcon", "getItemLabel", "onChange", "iconSize", "renderItem"]);
+    var _g = useChoiceGroup({
+        value: value || null,
+        getKey: getItemLabel,
+        callBack: onChange,
+        multiple: false
+    }), getOnChange = _g.getOnChange, getChecked = _g.getChecked;
+    var tabsDirection = getTabsDirection(linePosition);
+    var isVertical = tabsDirection === 'vertical';
+    var tabRefs = useMemo(function () { return new Array(items.length).fill(null).map(function () { return createRef(); }); }, [items, fitMode, isVertical]);
+    var tabsDimensions = 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, __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.createElement("div", { className: cnTabs('List', { direction: tabsDirection, linePosition: linePosition }) },
+            items.map(function (item, idx) { return (React.createElement("div", { ref: tabRefs[idx], key: getItemLabel(item), className: cnTabs('Tab', { direction: tabsDirection }, [getTabClassName === null || getTabClassName === void 0 ? void 0 : getTabClassName(idx)]) }, renderItem(item))); }),
+            withRunningLine && (React.createElement(TabsRunningLine, { linePosition: linePosition, tabsDimensions: tabsDimensions, activeTabIdx: activeTabIdx }))));
+    };
+    var Wrapper = getTabsWrapper(tabsDirection, fitMode);
+    return (React.createElement("div", __assign({ className: cnTabs({ size: size, view: view, direction: tabsDirection }, [className]), ref: ref }, otherProps),
+        React.createElement(Wrapper, { tabRefs: tabRefs, tabsDimensions: tabsDimensions, renderItem: renderItem, renderItemsList: renderItemsList, getItemLabel: getItemLabel, getItemChecked: getChecked, items: items }),
+        view === 'bordered' && React.createElement(TabsBorderLine, { linePosition: linePosition })));
+}
+export var Tabs = forwardRef(TabsRender);
+export { TabsTab, cnTabsTab };
+export * from './types';