@salutejs/plasma-new-hope 0.335.0-canary.2194.17367251959.0 → 0.335.0-canary.2195.17431561580.0

package/emotion/cjs/components/Popup/Popup.js

@@ -21,11 +21,9 @@ _export(exports, {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _plasmacore = require("@salutejs/plasma-core");
-var _reactdraggable = /*#__PURE__*/ _interop_require_default(require("react-draggable"));
-var _reresizable = require("re-resizable");
 var _utils = require("../../utils");
 var _Portal = require("../Portal");
-var _utils1 = require("./utils");
+var _ui = require("./ui");
 var _PopupRoot = require("./PopupRoot");
 var _hooks = require("./hooks");
 var _Popuptokens = require("./Popup.tokens");
@@ -51,11 +49,6 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -255,12 +248,7 @@ var popupRoot = function(Root) {
             "draggable",
             "resizable"
         ]);
-        var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
-        var nodeRef = (0, _react.useRef)(null);
         var innerIsOpen = isOpen || opened;
-        var resizable = typeof outerResizable === 'boolean' ? {
-            disabled: !outerResizable
-        } : outerResizable;
         var uniqId = (0, _utils.safeUseId)();
         var innerId = id || uniqId;
         var _usePopup = (0, _hooks.usePopup)({
@@ -271,22 +259,11 @@ var popupRoot = function(Root) {
         }), isVisible = _usePopup.isVisible, animationInfo = _usePopup.animationInfo, setVisible = _usePopup.setVisible, rootId = _usePopup.rootId;
         var portalRef = (0, _react.useRef)(null);
         var contentRef = (0, _react.useRef)(null);
-        var resizableContainer = (0, _react.useRef)(null);
         var innerRef = (0, _plasmacore.useForkRef)(contentRef, outerRootRef);
         if (!isVisible && !innerIsOpen) {
             return null;
         }
         var cls = (0, _utils.cx)(className, (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation) ? _Popuptokens.classes.endAnimation : '', (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endTransition) ? _Popuptokens.classes.endTransition : '');
-        var handleResizeStart = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
-            }
-        };
-        var handleResizeStop = function() {
-            if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
-                resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
-            }
-        };
         var rootNode = /*#__PURE__*/ _react.default.createElement(Root, {
             className: cls
         }, overlay, /*#__PURE__*/ _react.default.createElement(_PopupRoot.PopupRoot, _object_spread({
@@ -297,51 +274,12 @@ var popupRoot = function(Root) {
             frame: frame,
             animationInfo: animationInfo,
             setVisible: setVisible
-        }, rest), /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
-            nodeRef: nodeRef,
-            defaultClassName: draggable ? _Popuptokens.classes.draggablePopupWrapper : undefined,
-            defaultClassNameDragging: draggable ? _Popuptokens.classes.draggingPopupWrapper : undefined,
-            disabled: !draggable,
-            cancel: ".".concat(_Popuptokens.classes.resizableHandleWrapper)
-        }, /*#__PURE__*/ _react.default.createElement("div", {
-            ref: nodeRef
-        }, /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
-            ref: resizableContainer,
-            enable: resizable && !resizable.disabled ? (0, _utils1.getResizeDirections)(resizable.directions) : false,
-            resizeRatio: (0, _utils1.getRatioBasedOnPlacement)(placement),
-            defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
-            minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
-            minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
-            maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
-            maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
-            onResizeStart: handleResizeStart,
-            onResizeStop: handleResizeStop,
-            handleComponent: {
-                topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
-                    className: _Popuptokens.classes.resizableTopRightIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
-                    className: _Popuptokens.classes.resizableBottomRightIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
-                    className: _Popuptokens.classes.resizableBottomLeftIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                })),
-                topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
-                    className: _Popuptokens.classes.resizableTopLeftIcon,
-                    color: "inherit",
-                    size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
-                }))
-            },
-            className: _Popuptokens.classes.resizableContainer,
-            handleStyles: (0, _utils1.getHandleStyles)(),
-            handleWrapperClass: _Popuptokens.classes.resizableHandleWrapper
-        }, children)))));
+        }, rest), /*#__PURE__*/ _react.default.createElement(_ui.Draggable, {
+            draggable: draggable
+        }, /*#__PURE__*/ _react.default.createElement(_ui.Resizable, {
+            resizable: outerResizable,
+            placement: placement
+        }, children))));
         if (typeof frame !== 'string' && frame && frame.current && _utils.canUseDOM) {
             return /*#__PURE__*/ _react.default.createElement(_Portal.Portal, {
                 container: frame.current

package/emotion/cjs/components/Popup/ui/Draggable/Draggable.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Draggable", {
+    enumerable: true,
+    get: function() {
+        return Draggable;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _reactdraggable = /*#__PURE__*/ _interop_require_default(require("react-draggable"));
+var _Popuptokens = require("../../Popup.tokens");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var Draggable = function(param) {
+    var children = param.children, draggable = param.draggable;
+    var nodeRef = (0, _react.useRef)(null);
+    if (!draggable) {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
+        nodeRef: nodeRef,
+        defaultClassName: draggable ? _Popuptokens.classes.draggablePopupWrapper : undefined,
+        defaultClassNameDragging: draggable ? _Popuptokens.classes.draggingPopupWrapper : undefined,
+        disabled: !draggable,
+        cancel: ".".concat(_Popuptokens.classes.resizableHandleWrapper)
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        ref: nodeRef
+    }, children));
+};

package/emotion/cjs/components/Popup/ui/Resizable/Resizable.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Resizable", {
+    enumerable: true,
+    get: function() {
+        return Resizable;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _reresizable = require("re-resizable");
+var _Popuptokens = require("../../Popup.tokens");
+var _utils = require("../../utils");
+var _Popupstyles = require("../../Popup.styles");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var Resizable = function(param) {
+    var children = param.children, outerResizable = param.resizable, placement = param.placement;
+    var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
+    var resizableContainer = (0, _react.useRef)(null);
+    var resizable = typeof outerResizable === 'boolean' ? {
+        disabled: !outerResizable
+    } : outerResizable;
+    var handleResizeStart = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+        }
+    };
+    var handleResizeStop = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(_Popuptokens.classes.resizableContainerNoSelect);
+        }
+    };
+    if (!resizable || resizable.disabled) {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_reresizable.Resizable, {
+        ref: resizableContainer,
+        enable: resizable && !resizable.disabled ? (0, _utils.getResizeDirections)(resizable.directions) : false,
+        resizeRatio: (0, _utils.getRatioBasedOnPlacement)(placement),
+        defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+        minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+        minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+        maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+        maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+        onResizeStart: handleResizeStart,
+        onResizeStop: handleResizeStop,
+        handleComponent: {
+            topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                className: _Popuptokens.classes.resizableTopRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                className: _Popuptokens.classes.resizableBottomRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                className: _Popuptokens.classes.resizableBottomLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ _react.default.createElement(_Popupstyles.IconResizeDiagonalStyled, {
+                className: _Popuptokens.classes.resizableTopLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            }))
+        },
+        className: _Popuptokens.classes.resizableContainer,
+        handleStyles: (0, _utils.getHandleStyles)(),
+        handleWrapperClass: _Popuptokens.classes.resizableHandleWrapper
+    }, children);
+};

package/emotion/cjs/components/Popup/ui/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Draggable () {
+        return _Draggable.Draggable;
+    },
+    get Resizable () {
+        return _Resizable.Resizable;
+    }
+});
+var _Draggable = require("./Draggable/Draggable");
+var _Resizable = require("./Resizable/Resizable");

package/emotion/cjs/components/Tabs/hooks/useTabItem.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTabItem", {
+    enumerable: true,
+    get: function() {
+        return useTabItem;
+    }
+});
+var _react = require("react");
+var useTabItem = function(param) {
+    var refs = param.refs, innerRef = param.innerRef, itemIndex = param.itemIndex, selected = param.selected, orientation = param.orientation, disabled = param.disabled, onIndexChange = param.onIndexChange, onClick = param.onClick;
+    var hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;
+    var navigationTabIndex = !disabled && (refs === null || refs === void 0 ? void 0 : refs.current) === itemIndex ? 0 : -1;
+    var onItemFocus = (0, _react.useCallback)(function(event) {
+        if (disabled) {
+            return;
+        }
+        if (!hasKeyNavigation && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+            if (orientation === ' vertical') {
+                innerRef.current.scrollTo({
+                    top: innerRef.current.offsetTop,
+                    behavior: 'smooth'
+                });
+                return;
+            }
+            innerRef.current.scrollTo({
+                top: 0,
+                left: innerRef.current.offsetLeft,
+                behavior: 'smooth'
+            });
+            return;
+        }
+        if (!refs) {
+            return;
+        }
+        var focusIndex = refs.items.findIndex(function(itemRef) {
+            return itemRef.current === event.target;
+        });
+        if (focusIndex === refs.current) {
+            return;
+        }
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(focusIndex);
+        refs.setCurrent(focusIndex);
+    }, [
+        refs,
+        innerRef,
+        onIndexChange,
+        disabled
+    ]);
+    var handleClick = function(event) {
+        if (!onClick) {
+            return;
+        }
+        onClick(event);
+    };
+    (0, _react.useEffect)(function() {
+        if (!refs) {
+            return;
+        }
+        refs.register(innerRef);
+        return function() {
+            return refs.unregister(innerRef);
+        };
+    }, [
+        refs
+    ]);
+    (0, _react.useLayoutEffect)(function() {
+        var _innerRef_current_parentElement;
+        if (!selected || !innerRef.current) {
+            return;
+        }
+        var scrollEl = (_innerRef_current_parentElement = innerRef.current.parentElement) === null || _innerRef_current_parentElement === void 0 ? void 0 : _innerRef_current_parentElement.parentElement;
+        if (!scrollEl) {
+            return;
+        }
+        var scrollElStyle = getComputedStyle(scrollEl);
+        if (orientation === ' vertical') {
+            scrollEl.scrollTo({
+                top: innerRef.current.offsetTop - parseInt(scrollElStyle.paddingTop, 10)
+            });
+            return;
+        }
+        scrollEl.scrollTo({
+            left: innerRef.current.offsetLeft - parseInt(scrollElStyle.paddingLeft, 10)
+        });
+    }, [
+        selected,
+        orientation
+    ]);
+    return {
+        hasKeyNavigation: hasKeyNavigation,
+        navigationTabIndex: navigationTabIndex,
+        onItemFocus: onItemFocus,
+        handleClick: handleClick
+    };
+};

package/emotion/cjs/components/Tabs/index.js

@@ -18,6 +18,12 @@ _export(exports, {
     get createTabsController () {
         return _createTabsController.createTabsController;
     },
+    get horizontalIconTabItemConfig () {
+        return _HorizontalIconTabItem.horizontalIconTabItemConfig;
+    },
+    get horizontalIconTabItemRoot () {
+        return _HorizontalIconTabItem.horizontalIconTabItemRoot;
+    },
     get horizontalTabItemConfig () {
         return _HorizontalTabItem.horizontalTabItemConfig;
     },
@@ -33,6 +39,12 @@ _export(exports, {
     get tabsTokens () {
         return _tokens.tokens;
     },
+    get verticalIconTabItemConfig () {
+        return _VerticalIconTabItem.verticalIconTabItemConfig;
+    },
+    get verticalIconTabItemRoot () {
+        return _VerticalIconTabItem.verticalIconTabItemRoot;
+    },
     get verticalTabItemConfig () {
         return _VerticalTabItem.verticalTabItemConfig;
     },
@@ -48,8 +60,10 @@ _export(exports, {
 });
 var _HorizontalTabs = require("./ui/horizontal/HorizontalTabs/HorizontalTabs");
 var _HorizontalTabItem = require("./ui/horizontal/HorizontalTabItem/HorizontalTabItem");
+var _HorizontalIconTabItem = require("./ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem");
 var _VerticalTabs = require("./ui/vertical/VerticalTabs/VerticalTabs");
 var _VerticalTabItem = require("./ui/vertical/VerticalTabItem/VerticalTabItem");
+var _VerticalIconTabItem = require("./ui/vertical/VerticalIconTabItem/VerticalIconTabItem");
 var _tokens = require("./tokens");
 var _TabsContext = require("./TabsContext");
 var _createTabsController = require("./createTabsController");

package/emotion/cjs/components/Tabs/tokens.js

@@ -105,5 +105,6 @@ var tokens = {
     valueFontStyle: '--plasma-tab-item-value-font-style',
     valueFontWeight: '--plasma-tab-item-value-font-weight',
     valueLetterSpacing: '--plasma-tab-item-value-letter-spacing',
-    valueLineHeight: '--plasma-tab-item-value-lineheight'
+    valueLineHeight: '--plasma-tab-item-value-lineheight',
+    actionContentMarginLeft: '--plasma-tab-item-action-content-margin-left'
 };

package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalIconTabItem/HorizontalIconTabItem.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get horizontalIconTabItemConfig () {
+        return horizontalIconTabItemConfig;
+    },
+    get horizontalIconTabItemRoot () {
+        return horizontalIconTabItemRoot;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _plasmacore = require("@salutejs/plasma-core");
+var _utils = require("../../../../../utils");
+var _tokens = require("../../../tokens");
+var _TabsContext = require("../../../TabsContext");
+var _useTabItem = require("../../../hooks/useTabItem");
+var _base = require("./variations/_view/base");
+var _base1 = require("./variations/_size/base");
+var _base2 = require("./variations/_disabled/base");
+var _HorizontalIconTabItemstyles = require("./HorizontalIconTabItem.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var horizontalIconTabItemRoot = function(Root) {
+    return /*#__PURE__*/ (0, _react.forwardRef)(function(props, outerRef) {
+        var size = props.size, view = props.view, children = props.children, selected = props.selected, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, actionContent = props.actionContent, itemIndex = props.itemIndex, tabIndex = props.tabIndex, className = props.className, onIndexChange = props.onIndexChange, onClick = props.onClick, isActive = props.isActive, _props_animated = props.animated, animated = _props_animated === void 0 ? true : _props_animated, rest = _object_without_properties(props, [
+            "size",
+            "view",
+            "children",
+            "selected",
+            "disabled",
+            "actionContent",
+            "itemIndex",
+            "tabIndex",
+            "className",
+            "onIndexChange",
+            "onClick",
+            "isActive",
+            "animated"
+        ]);
+        var innerRef = (0, _react.useRef)(null);
+        var ref = (0, _plasmacore.useForkRef)(outerRef, innerRef);
+        var refs = (0, _react.useContext)(_TabsContext.TabsContext);
+        var role = 'tab';
+        var animatedClass = animated ? _tokens.classes.tabItemAnimated : undefined;
+        var selectedClass = isActive || selected ? _tokens.classes.selectedTabsItem : undefined;
+        var _useTabItem1 = (0, _useTabItem.useTabItem)({
+            refs: refs,
+            innerRef: innerRef,
+            itemIndex: itemIndex,
+            selected: selected,
+            disabled: disabled,
+            onIndexChange: onIndexChange,
+            onClick: onClick,
+            orientation: rest.orientation
+        }), hasKeyNavigation = _useTabItem1.hasKeyNavigation, navigationTabIndex = _useTabItem1.navigationTabIndex, onItemFocus = _useTabItem1.onItemFocus, handleClick = _useTabItem1.handleClick;
+        return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
+            ref: ref,
+            className: (0, _utils.cx)(selectedClass, animatedClass, className),
+            disabled: disabled,
+            role: role,
+            view: view,
+            size: size,
+            tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
+            onFocus: onItemFocus,
+            onClick: handleClick
+        }, rest), /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_HorizontalIconTabItemstyles.StyledContent, {
+            className: _tokens.classes.tabContent
+        }, children), actionContent && /*#__PURE__*/ _react.default.createElement(_HorizontalIconTabItemstyles.ActionContent, null, actionContent)));
+    });
+};
+var horizontalIconTabItemConfig = {
+    name: 'HorizontalIconTabItem',
+    tag: 'button',
+    layout: horizontalIconTabItemRoot,
+    base: _HorizontalIconTabItemstyles.base,
+    variations: {
+        size: {
+            css: _base1.base
+        },
+        view: {
+            css: _base.base
+        },
+        disabled: {
+            css: _base2.base,
+            attrs: true
+        }
+    },
+    defaults: {
+        view: 'default'
+    }
+};