@megafon/ui-core 9.0.0-alpha.9 → 9.1.0

package/dist/lib/components/Stepper/Stepper.js

@@ -0,0 +1,168 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.from.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.string.iterator.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _StepperItem = _interopRequireWildcard(require("./StepperItem"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-9-stepper');
+var Stepper = function Stepper(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClassName = _ref$classes2.root,
+    itemsWrapClassName = _ref$classes2.itemsWrap,
+    itemClassName = _ref$classes2.item,
+    itemIconButtonClassName = _ref$classes2.itemIconButton,
+    itemTitleClassName = _ref$classes2.itemTitle,
+    itemTextClassname = _ref$classes2.itemText,
+    itemLinkClassName = _ref$classes2.itemLink,
+    rootRef = _ref.rootRef,
+    _ref$activeStep = _ref.activeStep,
+    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
+    _ref$stepCount = _ref.stepCount,
+    stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    isNumeric = _ref.isNumeric,
+    isDisabled = _ref.isDisabled,
+    isAllChecked = _ref.isAllChecked,
+    _ref$showActiveStepCo = _ref.showActiveStepContent,
+    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$dataAttrs = _ref.dataAttrs,
+    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
+    rootAttrs = _ref$dataAttrs2.root,
+    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
+    itemAttrs = _ref$dataAttrs2.item,
+    itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
+    itemTitleAttrs = _ref$dataAttrs2.itemTitle,
+    itemTextAttrs = _ref$dataAttrs2.itemText,
+    itemLinkAttrs = _ref$dataAttrs2.itemLink,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return null;
+    } : _ref$onChange;
+  var _React$useState = React.useState(activeStep),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
+  var hasCustomItems = !!items.length;
+  var isHorizontalContent = isHorizontal || showActiveStepContent;
+  var currentItems = hasCustomItems ? items : Array.from({
+    length: stepCount
+  });
+  var isCorrectDisabled = React.useMemo(function () {
+    return !!isAllChecked || !!isDisabled;
+  }, [isAllChecked, isDisabled]);
+  var defineItemTheme = React.useCallback(function (index) {
+    switch (true) {
+      case isAllChecked:
+      case index < currentIndex:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
+        }
+      case index === currentIndex:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.ACTIVE;
+        }
+      default:
+        {
+          return _StepperItem.STEPPER_ITEM_THEME_ENUM.DEFAULT;
+        }
+    }
+  }, [currentIndex, isAllChecked]);
+  var handleClickItem = React.useCallback(function (index) {
+    return function () {
+      if (isCorrectDisabled) {
+        return;
+      }
+      setCurrentIndex(index);
+      onChange(index);
+    };
+  }, [isCorrectDisabled, onChange]);
+  React.useEffect(function () {
+    if (activeStep === undefined) {
+      return;
+    }
+    setCurrentIndex(activeStep);
+  }, [activeStep]);
+  var renderIcon = React.useCallback(function (index, theme) {
+    var isChecked = theme === _StepperItem.STEPPER_ITEM_THEME_ENUM.CHECKED;
+    if (isNumeric || !isChecked) {
+      return index + 1;
+    }
+    return /*#__PURE__*/React.createElement(CheckedIcon, null);
+  }, [isNumeric]);
+  var renderItem = React.useCallback(function (props, index) {
+    return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, props, {
+      key: index,
+      className: itemClassName,
+      classes: {
+        iconButton: itemIconButtonClassName,
+        title: itemTitleClassName,
+        text: itemTextClassname,
+        link: itemLinkClassName
+      },
+      dataAttrs: {
+        root: itemAttrs,
+        iconButton: itemIconButtonAttrs,
+        title: itemTitleAttrs,
+        text: itemTextAttrs,
+        link: itemLinkAttrs
+      }
+    }));
+  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
+  var renderItems = React.useMemo(function () {
+    return currentItems.map(function (elem, i) {
+      var item = elem || {};
+      var itemTheme = defineItemTheme(i);
+      var itemIcon = item.icon || renderIcon(i, itemTheme);
+      return renderItem((0, _extends2["default"])((0, _extends2["default"])({}, item), {
+        icon: itemIcon,
+        hasSeparator: i < currentItems.length - 1,
+        isHorizontal: isHorizontalContent,
+        isDisabled: isCorrectDisabled,
+        align: align,
+        theme: itemTheme,
+        view: showActiveStepContent ? _StepperItem.STEPPER_ITEM_VIEW_ENUM.ICON : _StepperItem.STEPPER_ITEM_VIEW_ENUM.DEFAULT,
+        onClick: handleClickItem(i)
+      }), i);
+    });
+  }, [align, currentItems, isCorrectDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
+  var renderSingleItem = renderItem((0, _extends2["default"])((0, _extends2["default"])({}, currentItems[currentIndex]), {
+    isDisabled: isCorrectDisabled,
+    align: align,
+    view: _StepperItem.STEPPER_ITEM_VIEW_ENUM.CONTENT
+  }));
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
+    className: cn([className, rootClassName], {
+      'is-horizontal': isHorizontalContent
+    }),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(itemsWrapAttrs), {
+    className: cn('items-wrap', [itemsWrapClassName])
+  }), renderItems), showActiveStepContent && renderSingleItem);
+};
+var _default = exports["default"] = Stepper;

package/dist/lib/components/Stepper/StepperItem.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-9-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon-button{background-color:var(--night20)}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon{background-color:var(--night)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon{background-color:var(--brandGreen)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-9-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:auto}}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__content,.mfui-9-stepper-item_align_left .mfui-9-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-9-stepper-item__icon-button,.mfui-9-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border:none;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:40px;justify-content:center;outline:none;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-9-stepper-item__icon-button:disabled{cursor:default}.mfui-9-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-9-stepper-item__icon svg{height:20px;width:20px;fill:var(--stcWhite)}.mfui-9-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-9-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-9-stepper-item__link{margin-top:13px}

package/dist/lib/components/Stepper/StepperItem.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import './StepperItem.scss';
+export declare enum STEPPER_ITEM_THEME_ENUM {
+    CHECKED = "checked",
+    ACTIVE = "active",
+    DEFAULT = "default"
+}
+export declare enum STEPPER_ITEM_VIEW_ENUM {
+    ICON = "icon",
+    CONTENT = "content",
+    DEFAULT = "default"
+}
+export interface IStepperItemProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы элементов */
+    classes?: {
+        iconButton?: string;
+        title?: string;
+        text?: string;
+        link?: string;
+    };
+    /** Тема */
+    theme?: STEPPER_ITEM_THEME_ENUM;
+    /** Заголовок */
+    title?: string;
+    /** Текст */
+    text?: string;
+    /** Текст ссылки */
+    linkText?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Иконка */
+    icon?: string | number | JSX.Element;
+    /** Наличие разделителя */
+    hasSeparator?: boolean;
+    /** Направление */
+    isHorizontal?: boolean;
+    /** Отключение */
+    isDisabled?: boolean;
+    /** Выравнивание */
+    align?: 'center' | 'left';
+    /** Варианты отображения */
+    view?: STEPPER_ITEM_VIEW_ENUM;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        iconButton?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+    /** Обработчик события клика */
+    onClick?: () => void;
+}
+declare const StepperItem: React.FC<IStepperItemProps>;
+export default StepperItem;

package/dist/lib/components/Stepper/StepperItem.js

@@ -0,0 +1,110 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.STEPPER_ITEM_VIEW_ENUM = exports.STEPPER_ITEM_THEME_ENUM = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.link.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Button = _interopRequireDefault(require("../Buttons/Button/Button"));
+var _Header = _interopRequireDefault(require("../Header/Header"));
+var _Paragraph = _interopRequireDefault(require("../Paragraph/Paragraph"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var STEPPER_ITEM_THEME_ENUM;
+(function (STEPPER_ITEM_THEME_ENUM) {
+  STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
+  STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
+  STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_THEME_ENUM || (exports.STEPPER_ITEM_THEME_ENUM = STEPPER_ITEM_THEME_ENUM = {}));
+var STEPPER_ITEM_VIEW_ENUM;
+(function (STEPPER_ITEM_VIEW_ENUM) {
+  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
+  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
+  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_VIEW_ENUM || (exports.STEPPER_ITEM_VIEW_ENUM = STEPPER_ITEM_VIEW_ENUM = {}));
+var cn = (0, _uiHelpers.cnCreate)('mfui-9-stepper-item');
+var StepperItem = function StepperItem(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    iconButtonClassName = _ref$classes2.iconButton,
+    titleClassName = _ref$classes2.title,
+    textClassName = _ref$classes2.text,
+    linkClassName = _ref$classes2.link,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
+    title = _ref.title,
+    text = _ref.text,
+    linkText = _ref.linkText,
+    linkUrl = _ref.linkUrl,
+    icon = _ref.icon,
+    hasSeparator = _ref.hasSeparator,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    isDisabled = _ref.isDisabled,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
+    _ref$dataAttrs = _ref.dataAttrs,
+    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
+    rootAttrs = _ref$dataAttrs2.root,
+    iconButtonAttrs = _ref$dataAttrs2.iconButton,
+    titleAttrs = _ref$dataAttrs2.title,
+    textAttrs = _ref$dataAttrs2.text,
+    linkAttrs = _ref$dataAttrs2.link,
+    onClick = _ref.onClick;
+  var hasLink = !!linkText && !!linkUrl;
+  var hasContent = !!title || !!text || hasLink;
+  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
+  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
+  var renderContent = /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, title && /*#__PURE__*/React.createElement(_Header["default"], {
+    className: cn([titleClassName]),
+    dataAttrs: {
+      root: titleAttrs
+    },
+    as: "h5",
+    align: align
+  }, title), text && /*#__PURE__*/React.createElement(_Paragraph["default"], {
+    className: cn([textClassName]),
+    dataAttrs: {
+      root: textAttrs
+    },
+    hasMargin: false,
+    align: align
+  }, text), hasLink && /*#__PURE__*/React.createElement(_Button["default"], {
+    className: cn('link', [linkClassName]),
+    dataAttrs: {
+      root: linkAttrs
+    },
+    href: linkUrl,
+    type: "text",
+    sizeAll: "extra-small"
+  }, linkText));
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
+    className: cn([className], {
+      theme: theme,
+      align: align,
+      'is-horizontal': isHorizontal
+    })
+  }), showIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-button-area')
+  }, /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(iconButtonAttrs), {
+    className: cn('icon-button', [iconButtonClassName]),
+    type: "button",
+    disabled: isDisabled,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('icon')
+  }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
+    className: cn('separator')
+  })), showContent && renderContent);
+};
+var _default = exports["default"] = StepperItem;

package/dist/lib/components/Switcher/Switcher.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-9-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-9-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-9-switcher__content_left{margin-left:0;margin-right:12px}.mfui-9-switcher__content_left+.mfui-9-switcher__input{margin-left:auto}.mfui-9-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-9-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-9-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-9-switcher__timer{background:var(--base);border-radius:50%}.mfui-9-switcher__timer,.mfui-9-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-switcher__timer-icon{fill:var(--spbSky2)}.mfui-9-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-9-switcher__input,.mfui-9-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-9-switcher__input_disabled,.mfui-9-switcher__input_loaded,.mfui-9-switcher__input_waiting{cursor:default}.mfui-9-switcher__input:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-9-switcher__input_checked:not(.mfui-9-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-switcher__input_checked:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky2)}.mfui-9-switcher__input_checked .mfui-9-switcher__pointer{left:22px}.mfui-9-switcher__input_checked .mfui-9-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-9-switcher__label{position:relative}.mfui-9-switcher__hidden-input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-switcher__hidden-input:focus-visible+.mfui-9-switcher__input{outline:1px auto -webkit-focus-ring-color}.mfui-9-switcher_disabled .mfui-9-switcher__content{color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked),.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked):not(.mfui-9-switcher__input_disabled):hover,.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__timer-icon{fill:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-9-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-9-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-9-switcher__content_left{margin-left:0;margin-right:12px}.mfui-9-switcher__content_left+.mfui-9-switcher__input{margin-left:auto}.mfui-9-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-9-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-9-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-9-switcher__timer{background:var(--base);border-radius:50%}.mfui-9-switcher__timer,.mfui-9-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-switcher__timer-icon{fill:var(--spbSky2)}.mfui-9-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-9-switcher__input,.mfui-9-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-9-switcher__input_disabled,.mfui-9-switcher__input_loaded,.mfui-9-switcher__input_waiting{cursor:default}.mfui-9-switcher__input:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-9-switcher__input_checked:not(.mfui-9-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-switcher__input_checked:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky2)}.mfui-9-switcher__input_checked .mfui-9-switcher__pointer{left:22px}.mfui-9-switcher__input_checked .mfui-9-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-9-switcher__label{position:relative}.mfui-9-switcher__hidden-input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-switcher__hidden-input:focus-visible+.mfui-9-switcher__input{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-switcher_disabled .mfui-9-switcher__content{color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked),.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked):not(.mfui-9-switcher__input_disabled):hover,.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__timer-icon{fill:var(--spbSky3)}

package/dist/lib/components/Switcher/Switcher.js

@@ -18,7 +18,9 @@ var WaitingIcon = function WaitingIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+    d: "M10.006 3.998c3.857 0 7 3.127 7 6.985 0 3.857-3.143 6.984-7 6.984s-7-3.127-7.001-6.984c0-3.858 3.143-6.985 7-6.985zM10 7.004a.5.5 0 00-.5.5v3.501H7a.5.5 0 000 1h3a.5.5 0 00.5-.5v-4a.5.5 0 00-.5-.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.594 3.124a.514.514 0 01.715 0l2.15 2.105a.487.487 0 010 .7.515.515 0 01-.714 0l-2.15-2.105a.487.487 0 010-.7zM4.92 3.109a.515.515 0 01.716.005.487.487 0 01-.005.698l-2.165 2.09a.514.514 0 01-.715-.004.487.487 0 01.005-.7l2.164-2.09z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-switcher');
@@ -70,7 +72,6 @@ var Switcher = function Switcher(_ref) {
   }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.hiddenInput), {
     className: cn('hidden-input'),
     type: "checkbox",
-    tabIndex: isInteractiveDisabled ? undefined : 0,
     checked: checked,
     onChange: handleChange,
     disabled: disabled,

package/dist/lib/components/Tabs/Tabs.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-9-tabs .swiper-wrapper,.mfui-9-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-9-tabs__swiper-wrapper:after,.mfui-9-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-9-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-9-tabs__swiper-wrapper:after{right:0}.mfui-9-tabs__swiper-wrapper_beginning:before,.mfui-9-tabs__swiper-wrapper_end:after{display:none}.mfui-9-tabs__swiper{background-color:var(--spbSky0);border-radius:16px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-9-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-9-tabs__panel{display:none}.mfui-9-tabs__panel_current{display:block}.mfui-9-tabs__underline{background-color:var(--base);border-radius:12px;bottom:0;left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-9-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-9-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-9-tabs__arrow{display:none}}.mfui-9-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-9-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-9-tabs__arrow_prev{left:14px}.mfui-9-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-9-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-9-tabs__tab-inner{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,fill,opacity;transition-property:color,fill,opacity;white-space:nowrap;fill:var(--content)}.mfui-9-tabs__tab-inner:hover{text-decoration:none}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{opacity:1}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-9-tabs__tab-inner_with-icon{padding-left:8px}.mfui-9-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-9-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-9-tabs__tab-icon svg{height:100%;width:100%}.mfui-9-tabs__tab-counter{color:var(--spbSky3);margin-left:4px}.mfui-9-tabs__tab-bubble{margin-left:4px}.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:8px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:16px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:24px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-icon{margin-right:4px}.mfui-9-tabs_size_large .mfui-9-tabs__tab-bubble,.mfui-9-tabs_size_large .mfui-9-tabs__tab-counter{margin-left:8px}.mfui-9-tabs_auto-width .mfui-9-tabs__swiper{max-width:100%;width:auto}.mfui-9-tabs_auto-width .mfui-9-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-9-tabs_auto-width.mfui-9-tabs_h-align_center .mfui-9-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-9-tabs_sticky .mfui-9-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-9-tabs_tab-color_gray .mfui-9-tabs__swiper{background-color:var(--spbSky1)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__swiper{background-color:var(--stcBlack20)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__underline{background-color:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:active{background-color:var(--stcBlack0)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-tabs .swiper-wrapper{position:relative;width:100%;z-index:0}.mfui-9-tabs .swiper-wrapper,.mfui-9-tabs__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-tabs__wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-9-tabs__swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.mfui-9-tabs__swiper-wrapper:after,.mfui-9-tabs__swiper-wrapper:before{background:-webkit-gradient(linear,right top,left top,from(var(--stcBlack5)),color-stop(64%,transparent));background:linear-gradient(270deg,var(--stcBlack5) 0,transparent 64%);border-radius:0 12px 12px 0;bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:64px;z-index:1}.mfui-9-tabs__swiper-wrapper:before{left:0;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.mfui-9-tabs__swiper-wrapper:after{right:0}.mfui-9-tabs__swiper-wrapper_beginning:before,.mfui-9-tabs__swiper-wrapper_end:after{display:none}.mfui-9-tabs__swiper{background-color:var(--spbSky0);border-radius:16px;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;overflow:hidden;padding:4px;position:relative;width:100%}.mfui-9-tabs__slide{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-flex:1;-ms-flex:1;flex:1}.mfui-9-tabs__panel{display:none}.mfui-9-tabs__panel_current{display:block}.mfui-9-tabs__underline{background-color:var(--base);border-radius:12px;bottom:0;left:auto;overflow:hidden;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;z-index:0}.mfui-9-tabs__underline:before{background-color:var(--stcWhite20);content:"";display:block;height:100%;width:100%}.mfui-9-tabs__arrow{background-color:var(--content);border-radius:50%;cursor:pointer;display:block;height:16px;opacity:1;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,opacity;transition-property:background-color,opacity;width:16px;z-index:2;fill:var(--base)}@media screen and (max-width:1023px){.mfui-9-tabs__arrow{display:none}}.mfui-9-tabs__arrow:hover{background-color:var(--spbSky3)}.mfui-9-tabs__arrow:active{background-color:var(--buttonDown)}.mfui-9-tabs__arrow_prev{left:14px}.mfui-9-tabs__arrow_next{right:14px;-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.mfui-9-tabs__arrow_hide{opacity:0;pointer-events:none}.mfui-9-tabs__tab-inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;color:inherit;font-family:inherit;font-size:15px;font-size:inherit;font-weight:500;line-height:24px;line-height:inherit;margin:0;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;box-sizing:border-box;color:var(--content);cursor:pointer;height:36px;justify-content:center;padding:2px 12px;text-align:center;text-decoration:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,fill,opacity;transition-property:color,fill,opacity;white-space:nowrap;width:100%;fill:var(--content)}.mfui-9-tabs__tab-inner:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-tabs__tab-inner:focus{outline:none}.mfui-9-tabs__tab-inner:disabled{color:inherit;cursor:auto}.mfui-9-tabs__tab-inner:hover{text-decoration:none}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current){opacity:.8}@media screen and (min-width:1024px){.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{color:var(--content);fill:var(--content)}}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):hover{opacity:1}.mfui-9-tabs__tab-inner:not(.mfui-9-tabs__tab-inner_current):active{color:var(--buttonDown);fill:var(--buttonDown)}.mfui-9-tabs__tab-inner_with-icon{padding-left:8px}.mfui-9-tabs__tab-inner_current{color:var(--content);cursor:auto;fill:var(--content)}.mfui-9-tabs__tab-icon{height:32px;margin-right:4px;width:32px}.mfui-9-tabs__tab-icon svg{height:100%;width:100%}.mfui-9-tabs__tab-counter{color:var(--spbSky3);margin-left:4px}.mfui-9-tabs__tab-bubble{margin-left:4px}.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:6px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__swiper{padding:8px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:48px;padding:8px 24px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner{height:56px;padding:12px 40px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:16px}@media screen and (min-width:768px){.mfui-9-tabs_size_large .mfui-9-tabs__tab-inner_with-icon{padding-left:24px}}.mfui-9-tabs_size_large .mfui-9-tabs__tab-icon{margin-right:4px}.mfui-9-tabs_size_large .mfui-9-tabs__tab-bubble,.mfui-9-tabs_size_large .mfui-9-tabs__tab-counter{margin-left:8px}.mfui-9-tabs__wrapper_auto-width .mfui-9-tabs__swiper{max-width:100%;width:auto}.mfui-9-tabs__wrapper_auto-width .mfui-9-tabs__slide{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.mfui-9-tabs__wrapper_auto-width.mfui-9-tabs__wrapper_h-align_center .mfui-9-tabs__swiper-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -48px;padding:0 48px}}@media screen and (max-width:767px){.mfui-9-tabs_indents .mfui-9-tabs__swiper-wrapper{margin:0 -16px;padding:0 16px}}.mfui-9-tabs_sticky .mfui-9-tabs__swiper-wrapper{background-color:var(--base);left:0;position:fixed;right:0;top:0;z-index:100}.mfui-9-tabs_tab-color_gray .mfui-9-tabs__swiper{background-color:var(--spbSky1)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__swiper{background-color:var(--stcBlack20)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current){color:var(--stcWhite);opacity:.8;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner:not(.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current):hover{color:var(--stcWhite);opacity:1;fill:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__tab-inner_current{color:var(--stcBlack);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__underline{background-color:var(--stcWhite)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow{background-color:var(--stcWhite);fill:var(--stcBlack)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:hover{background-color:var(--stcWhite50)}.mfui-9-tabs_tab-color_green:not(.mfui-9-tabs_sticky) .mfui-9-tabs__arrow:active{background-color:var(--stcBlack0)}

package/dist/lib/components/Tabs/Tabs.d.ts

@@ -59,6 +59,8 @@ export interface ITabsProps {
     renderOnlyCurrentPanel?: boolean;
     /** Внешний контейнер для режима фиксация табов */
     outerObserveContainer?: HTMLDivElement | null;
+    /** Функция рендера компонента-обертки для всех табов */
+    renderTabsWrapper?: (tabs: React.ReactNode) => React.ReactNode;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: TabsChildrenType;

package/dist/lib/components/Tabs/Tabs.js

@@ -31,7 +31,7 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12 13l-3-3 3-3-1-1-4 4 4 4z"
+    d: "M8.502 5.304a1 1 0 011.436 1.392L7.713 8.993H14.5a1 1 0 110 2H7.7l2.238 2.31a1 1 0 01-1.436 1.393l-3.61-3.726a1.396 1.396 0 010-1.94l3.61-3.726z"
   }));
 };
 var Swiper = null;
@@ -81,6 +81,7 @@ var Tabs = function Tabs(_ref) {
     children = _ref.children,
     dataAttrs = _ref.dataAttrs,
     onTabClick = _ref.onTabClick,
+    renderTabsWrapper = _ref.renderTabsWrapper,
     outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef({});
   var rootRef = React.useRef(null);
@@ -275,7 +276,7 @@ var Tabs = function Tabs(_ref) {
       href = _ref3.href,
       rel = _ref3.rel,
       attr = _ref3.attr;
-    var ElementType = href ? 'a' : 'div';
+    var ElementType = href ? 'a' : 'button';
     var bubbleSizeWithTitle = size === 'medium' ? 'medium' : 'big';
     return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
       href: href,
@@ -285,7 +286,10 @@ var Tabs = function Tabs(_ref) {
         'with-icon': !!icon
       }),
       onClick: handleTabInnerClick(index)
-    }, (0, _uiHelpers.filterDataAttrs)(attr, index + 1)), !!icon && /*#__PURE__*/React.createElement("div", {
+    }, (0, _uiHelpers.filterDataAttrs)(attr, index + 1), {
+      role: "tab",
+      tabIndex: currentIndex === index ? -1 : 0
+    }), !!icon && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-icon')
     }, icon), !!title && /*#__PURE__*/React.createElement("div", {
       className: cn('tab-title')
@@ -345,7 +349,8 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
-        }, [classes === null || classes === void 0 ? void 0 : classes.panel])
+        }, [classes === null || classes === void 0 ? void 0 : classes.panel]),
+        role: "tabpanel"
       }), panel);
     });
   }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel, classes === null || classes === void 0 ? void 0 : classes.panel]);
@@ -403,63 +408,67 @@ var Tabs = function Tabs(_ref) {
   if (!Swiper) {
     return null;
   }
+  var renderSwiper = function renderSwiper() {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      ref: tabListRef,
+      style: {
+        height: tabListHeight
+      }
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
+      className: cn('wrapper', {
+        'auto-width': autoWidth,
+        'h-align': align
+      }, [classes === null || classes === void 0 ? void 0 : classes.wrapper])
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      className: cn('swiper-wrapper', {
+        beginning: isBeginning,
+        end: isEnd
+      }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
+      style: {
+        paddingLeft: stickyOffset.left,
+        paddingRight: stickyOffset.right
+      }
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
+      simulateTouch: false,
+      className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
+      watchOverflow: true,
+      slidesPerView: "auto",
+      initialSlide: currentIndex,
+      onSwiper: handleSwiper,
+      onReachBeginning: handleReachBeginning,
+      onReachEnd: handleReachEnd,
+      onFromEdge: handleFromEdge,
+      observer: true
+    }), renderTabs(), /*#__PURE__*/React.createElement("div", {
+      className: cn('underline'),
+      slot: "wrapper-start",
+      style: {
+        width: "".concat(underlineWidth, "px"),
+        transform: "translateX(".concat(underlineTranslate, "px)"),
+        transitionProperty: underlineTransition
+      }
+    }), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+      className: cn('arrow', {
+        prev: true,
+        hide: isBeginning
+      }),
+      onClick: handlePrevArrowClick
+    })), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+      className: cn('arrow', {
+        next: true,
+        hide: isEnd
+      }),
+      onClick: handleNextArrowClick
+    })))));
+  };
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       'tab-color': tabColorTheme,
-      'h-align': align,
       indents: !(classes === null || classes === void 0 ? void 0 : classes.innerIndents),
-      sticky: isSticky,
-      'auto-width': autoWidth
+      sticky: isSticky
     }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    ref: tabListRef,
-    style: {
-      height: tabListHeight
-    }
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper), {
-    className: cn('wrapper', [classes === null || classes === void 0 ? void 0 : classes.wrapper])
-  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn('swiper-wrapper', {
-      beginning: isBeginning,
-      end: isEnd
-    }, [classes === null || classes === void 0 ? void 0 : classes.swiperWrapper]),
-    style: {
-      paddingLeft: stickyOffset.left,
-      paddingRight: stickyOffset.right
-    }
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiperWrapper)), /*#__PURE__*/React.createElement(Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
-    simulateTouch: false,
-    className: cn('swiper', [classes === null || classes === void 0 ? void 0 : classes.innerIndents]),
-    watchOverflow: true,
-    slidesPerView: "auto",
-    initialSlide: currentIndex,
-    onSwiper: handleSwiper,
-    onReachBeginning: handleReachBeginning,
-    onReachEnd: handleReachEnd,
-    onFromEdge: handleFromEdge,
-    observer: true
-  }), renderTabs(), /*#__PURE__*/React.createElement("div", {
-    className: cn('underline'),
-    slot: "wrapper-start",
-    style: {
-      width: "".concat(underlineWidth, "px"),
-      transform: "translateX(".concat(underlineTranslate, "px)"),
-      transitionProperty: underlineTransition
-    }
-  }), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
-    className: cn('arrow', {
-      prev: true,
-      hide: isBeginning
-    }),
-    onClick: handlePrevArrowClick
-  })), /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
-    className: cn('arrow', {
-      next: true,
-      hide: isEnd
-    }),
-    onClick: handleNextArrowClick
-  }))))), renderPanels());
+  }), renderTabsWrapper ? renderTabsWrapper(renderSwiper()) : renderSwiper(), renderPanels());
 };
 var _default = exports["default"] = Tabs;