@infomaximum/ui-kit 0.10.2 → 0.11.1

package/dist/components/Tabs/components/TabBar/TabBar.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { memo, useState, useRef, useMemo } from "react";
+import { TabItem } from "../TabItem/TabItem.js";
+import { getTabBarStyle } from "./TabBar.styles.js";
+import { EllipsisOutlined } from "@infomaximum/icons";
+import { isFunction, isUndefined } from "lodash-es";
+import { useSensor, PointerSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { useTabsDndController } from "../../hooks/useTabsDndController.js";
+import { useMoreTabsController } from "../../hooks/useMoreTabsController.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+import { Dropdown } from "../../../Dropdown/Dropdown.js";
+const TabBar = memo(({
+  items = [],
+  iconOnly = false,
+  draggable = false,
+  size = "middle",
+  border = true,
+  currentActiveKey,
+  contentWrapper,
+  extra,
+  more,
+  popupClassName,
+  styles,
+  changeActiveKey,
+  onChange,
+  onTabClick,
+  onTabScroll
+}) => {
+  var _a;
+  const theme = useTheme();
+  const [currentTabElement, setCurrentTabElement] = useState(null);
+  const prevScrollPosition = useRef(0);
+  const itemsMap = useMemo(() => new Map(items.map((item) => [item.key, item])), [items]);
+  const {
+    tabsOrder,
+    isDragging,
+    dndEvents
+  } = useTabsDndController(items);
+  const {
+    tabsRef,
+    dropdownMenu,
+    addHiddenTab,
+    deleteHiddenTab,
+    scrollToTab
+  } = useMoreTabsController(items, currentActiveKey, currentTabElement, onTabClick, onChange, changeActiveKey);
+  const handleScroll = () => {
+    if (tabsRef.current && isFunction(onTabScroll)) {
+      const scrollPosition = tabsRef.current.scrollLeft;
+      const scrollDirection = scrollPosition > prevScrollPosition.current ? "right" : "left";
+      onTabScroll(scrollDirection);
+      prevScrollPosition.current = scrollPosition;
+    }
+  };
+  const sensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  const tabBarStyle = getTabBarStyle(size, border, iconOnly, isDragging);
+  const renderTabs = () => {
+    return tabsOrder.map((key) => {
+      const item = itemsMap.get(key);
+      if (isUndefined(item)) {
+        return null;
+      }
+      return /* @__PURE__ */ createElement(TabItem, { ...item, itemKey: item.key, iconOnly, size, selected: currentActiveKey === item.key, changeActiveKey, addHiddenTab, deleteHiddenTab, setCurrentTabElement, scrollToTab, contentWrapper, key: item.key, styles: styles == null ? void 0 : styles.tabItem, onChange, onTabClick });
+    });
+  };
+  const renderTabsContainer = () => {
+    var _a2;
+    return /* @__PURE__ */ jsx("div", { ref: tabsRef, onScroll: handleScroll, css: [tabBarStyle.tabs(theme), (_a2 = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a2.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderTabsContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkJhci9UYWJCYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlHVSIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1RhYnMvY29tcG9uZW50cy9UYWJCYXIvVGFiQmFyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZU1lbW8sIHVzZVJlZiwgdXNlU3RhdGUsIHR5cGUgRkMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGFiQmFyUHJvcHMgfSBmcm9tIFwiLi9UYWJCYXIudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBUYWJJdGVtIH0gZnJvbSBcIi4uL1RhYkl0ZW0vVGFiSXRlbVwiO1xuaW1wb3J0IHsgZ2V0VGFiQmFyU3R5bGUgfSBmcm9tIFwiLi9UYWJCYXIuc3R5bGVzXCI7XG5pbXBvcnQgeyBEcm9wZG93biB9IGZyb20gXCJjb21wb25lbnRzL0Ryb3Bkb3duXCI7XG5pbXBvcnQgeyBFbGxpcHNpc091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgaXNGdW5jdGlvbiwgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBjbG9zZXN0Q2VudGVyLCBEbmRDb250ZXh0LCBQb2ludGVyU2Vuc29yLCB1c2VTZW5zb3IgfSBmcm9tIFwiQGRuZC1raXQvY29yZVwiO1xuaW1wb3J0IHsgaG9yaXpvbnRhbExpc3RTb3J0aW5nU3RyYXRlZ3ksIFNvcnRhYmxlQ29udGV4dCB9IGZyb20gXCJAZG5kLWtpdC9zb3J0YWJsZVwiO1xuaW1wb3J0IHsgdXNlVGFic0RuZENvbnRyb2xsZXIgfSBmcm9tIFwiY29tcG9uZW50cy9UYWJzL2hvb2tzL3VzZVRhYnNEbmRDb250cm9sbGVyXCI7XG5pbXBvcnQgeyB1c2VNb3JlVGFic0NvbnRyb2xsZXIgfSBmcm9tIFwiY29tcG9uZW50cy9UYWJzL2hvb2tzL3VzZU1vcmVUYWJzQ29udHJvbGxlclwiO1xuXG5leHBvcnQgY29uc3QgVGFiQmFyOiBGQzxUYWJCYXJQcm9wcz4gPSBtZW1vKFxuICAoe1xuICAgIGl0ZW1zID0gW10sXG4gICAgaWNvbk9ubHkgPSBmYWxzZSxcbiAgICBkcmFnZ2FibGUgPSBmYWxzZSxcbiAgICBzaXplID0gXCJtaWRkbGVcIixcbiAgICBib3JkZXIgPSB0cnVlLFxuICAgIGN1cnJlbnRBY3RpdmVLZXksXG4gICAgY29udGVudFdyYXBwZXIsXG4gICAgZXh0cmEsXG4gICAgbW9yZSxcbiAgICBwb3B1cENsYXNzTmFtZSxcbiAgICBzdHlsZXMsXG4gICAgY2hhbmdlQWN0aXZlS2V5LFxuICAgIG9uQ2hhbmdlLFxuICAgIG9uVGFiQ2xpY2ssXG4gICAgb25UYWJTY3JvbGwsXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBbY3VycmVudFRhYkVsZW1lbnQsIHNldEN1cnJlbnRUYWJFbGVtZW50XSA9IHVzZVN0YXRlPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gICAgY29uc3QgcHJldlNjcm9sbFBvc2l0aW9uID0gdXNlUmVmKDApO1xuXG4gICAgY29uc3QgaXRlbXNNYXAgPSB1c2VNZW1vKCgpID0+IG5ldyBNYXAoaXRlbXMubWFwKChpdGVtKSA9PiBbaXRlbS5rZXksIGl0ZW1dKSksIFtpdGVtc10pO1xuICAgIGNvbnN0IHsgdGFic09yZGVyLCBpc0RyYWdnaW5nLCBkbmRFdmVudHMgfSA9IHVzZVRhYnNEbmRDb250cm9sbGVyKGl0ZW1zKTtcbiAgICBjb25zdCB7IHRhYnNSZWYsIGRyb3Bkb3duTWVudSwgYWRkSGlkZGVuVGFiLCBkZWxldGVIaWRkZW5UYWIsIHNjcm9sbFRvVGFiIH0gPVxuICAgICAgdXNlTW9yZVRhYnNDb250cm9sbGVyKFxuICAgICAgICBpdGVtcyxcbiAgICAgICAgY3VycmVudEFjdGl2ZUtleSxcbiAgICAgICAgY3VycmVudFRhYkVsZW1lbnQsXG4gICAgICAgIG9uVGFiQ2xpY2ssXG4gICAgICAgIG9uQ2hhbmdlLFxuICAgICAgICBjaGFuZ2VBY3RpdmVLZXlcbiAgICAgICk7XG5cbiAgICBjb25zdCBoYW5kbGVTY3JvbGwgPSAoKSA9PiB7XG4gICAgICBpZiAodGFic1JlZi5jdXJyZW50ICYmIGlzRnVuY3Rpb24ob25UYWJTY3JvbGwpKSB7XG4gICAgICAgIGNvbnN0IHNjcm9sbFBvc2l0aW9uID0gdGFic1JlZi5jdXJyZW50LnNjcm9sbExlZnQ7XG4gICAgICAgIGNvbnN0IHNjcm9sbERpcmVjdGlvbiA9IHNjcm9sbFBvc2l0aW9uID4gcHJldlNjcm9sbFBvc2l0aW9uLmN1cnJlbnQgPyBcInJpZ2h0XCIgOiBcImxlZnRcIjtcbiAgICAgICAgb25UYWJTY3JvbGwoc2Nyb2xsRGlyZWN0aW9uKTtcblxuICAgICAgICBwcmV2U2Nyb2xsUG9zaXRpb24uY3VycmVudCA9IHNjcm9sbFBvc2l0aW9uO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBzZW5zb3IgPSB1c2VTZW5zb3IoUG9pbnRlclNlbnNvciwgeyBhY3RpdmF0aW9uQ29uc3RyYWludDogeyBkaXN0YW5jZTogMTAgfSB9KTtcblxuICAgIGNvbnN0IHRhYkJhclN0eWxlID0gZ2V0VGFiQmFyU3R5bGUoc2l6ZSwgYm9yZGVyLCBpY29uT25seSwgaXNEcmFnZ2luZyk7XG5cbiAgICBjb25zdCByZW5kZXJUYWJzID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIHRhYnNPcmRlci5tYXAoKGtleSkgPT4ge1xuICAgICAgICBjb25zdCBpdGVtID0gaXRlbXNNYXAuZ2V0KGtleSk7XG5cbiAgICAgICAgaWYgKGlzVW5kZWZpbmVkKGl0ZW0pKSB7XG4gICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxUYWJJdGVtXG4gICAgICAgICAgICB7Li4uaXRlbX1cbiAgICAgICAgICAgIGl0ZW1LZXk9e2l0ZW0ua2V5fVxuICAgICAgICAgICAgaWNvbk9ubHk9e2ljb25Pbmx5fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgIHNlbGVjdGVkPXtjdXJyZW50QWN0aXZlS2V5ID09PSBpdGVtLmtleX1cbiAgICAgICAgICAgIGNoYW5nZUFjdGl2ZUtleT17Y2hhbmdlQWN0aXZlS2V5fVxuICAgICAgICAgICAgYWRkSGlkZGVuVGFiPXthZGRIaWRkZW5UYWJ9XG4gICAgICAgICAgICBkZWxldGVIaWRkZW5UYWI9e2RlbGV0ZUhpZGRlblRhYn1cbiAgICAgICAgICAgIHNldEN1cnJlbnRUYWJFbGVtZW50PXtzZXRDdXJyZW50VGFiRWxlbWVudH1cbiAgICAgICAgICAgIHNjcm9sbFRvVGFiPXtzY3JvbGxUb1RhYn1cbiAgICAgICAgICAgIGNvbnRlbnRXcmFwcGVyPXtjb250ZW50V3JhcHBlcn1cbiAgICAgICAgICAgIGtleT17aXRlbS5rZXl9XG4gICAgICAgICAgICBzdHlsZXM9e3N0eWxlcz8udGFiSXRlbX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICAgIG9uVGFiQ2xpY2s9e29uVGFiQ2xpY2t9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcbiAgICAgIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJUYWJzQ29udGFpbmVyID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIHJlZj17dGFic1JlZn1cbiAgICAgICAgICBvblNjcm9sbD17aGFuZGxlU2Nyb2xsfVxuICAgICAgICAgIGNzcz17W3RhYkJhclN0eWxlLnRhYnModGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICA+XG4gICAgICAgICAge3JlbmRlclRhYnMoKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJEbmRUYWJzID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPERuZENvbnRleHQgc2Vuc29ycz17W3NlbnNvcl19IHsuLi5kbmRFdmVudHN9IGNvbGxpc2lvbkRldGVjdGlvbj17Y2xvc2VzdENlbnRlcn0+XG4gICAgICAgICAgPFNvcnRhYmxlQ29udGV4dCBpdGVtcz17dGFic09yZGVyfSBzdHJhdGVneT17aG9yaXpvbnRhbExpc3RTb3J0aW5nU3RyYXRlZ3l9PlxuICAgICAgICAgICAge3JlbmRlclRhYnNDb250YWluZXIoKX1cbiAgICAgICAgICA8L1NvcnRhYmxlQ29udGV4dD5cbiAgICAgICAgPC9EbmRDb250ZXh0PlxuICAgICAgKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY3NzPXtbdGFiQmFyU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICA8ZGl2IGNzcz17dGFiQmFyU3R5bGUuY29udGVudCgpfT5cbiAgICAgICAgICB7ZHJhZ2dhYmxlID8gcmVuZGVyRG5kVGFicygpIDogcmVuZGVyVGFic0NvbnRhaW5lcigpfVxuICAgICAgICAgIHtkcm9wZG93bk1lbnUuaXRlbXMubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgICAgICA8ZGl2IGNzcz17dGFiQmFyU3R5bGUubW9yZSh0aGVtZSl9PlxuICAgICAgICAgICAgICA8RHJvcGRvd24gey4uLm1vcmV9IG1lbnU9e2Ryb3Bkb3duTWVudX0gY2xhc3NOYW1lPXtwb3B1cENsYXNzTmFtZX0+XG4gICAgICAgICAgICAgICAgPEVsbGlwc2lzT3V0bGluZWQgLz5cbiAgICAgICAgICAgICAgPC9Ecm9wZG93bj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIHtleHRyYX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbik7XG4iXX0= */"], children: renderTabs() });
+  };
+  const renderDndTabs = () => {
+    return /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], ...dndEvents, collisionDetection: closestCenter, children: /* @__PURE__ */ jsx(SortableContext, { items: tabsOrder, strategy: horizontalListSortingStrategy, children: renderTabsContainer() }) });
+  };
+  return /* @__PURE__ */ jsxs("div", { css: [tabBarStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TabBar;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkJhci9UYWJCYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1IVyIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1RhYnMvY29tcG9uZW50cy9UYWJCYXIvVGFiQmFyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IG1lbW8sIHVzZU1lbW8sIHVzZVJlZiwgdXNlU3RhdGUsIHR5cGUgRkMgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGFiQmFyUHJvcHMgfSBmcm9tIFwiLi9UYWJCYXIudHlwZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBUYWJJdGVtIH0gZnJvbSBcIi4uL1RhYkl0ZW0vVGFiSXRlbVwiO1xuaW1wb3J0IHsgZ2V0VGFiQmFyU3R5bGUgfSBmcm9tIFwiLi9UYWJCYXIuc3R5bGVzXCI7XG5pbXBvcnQgeyBEcm9wZG93biB9IGZyb20gXCJjb21wb25lbnRzL0Ryb3Bkb3duXCI7XG5pbXBvcnQgeyBFbGxpcHNpc091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgaXNGdW5jdGlvbiwgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBjbG9zZXN0Q2VudGVyLCBEbmRDb250ZXh0LCBQb2ludGVyU2Vuc29yLCB1c2VTZW5zb3IgfSBmcm9tIFwiQGRuZC1raXQvY29yZVwiO1xuaW1wb3J0IHsgaG9yaXpvbnRhbExpc3RTb3J0aW5nU3RyYXRlZ3ksIFNvcnRhYmxlQ29udGV4dCB9IGZyb20gXCJAZG5kLWtpdC9zb3J0YWJsZVwiO1xuaW1wb3J0IHsgdXNlVGFic0RuZENvbnRyb2xsZXIgfSBmcm9tIFwiY29tcG9uZW50cy9UYWJzL2hvb2tzL3VzZVRhYnNEbmRDb250cm9sbGVyXCI7XG5pbXBvcnQgeyB1c2VNb3JlVGFic0NvbnRyb2xsZXIgfSBmcm9tIFwiY29tcG9uZW50cy9UYWJzL2hvb2tzL3VzZU1vcmVUYWJzQ29udHJvbGxlclwiO1xuXG5leHBvcnQgY29uc3QgVGFiQmFyOiBGQzxUYWJCYXJQcm9wcz4gPSBtZW1vKFxuICAoe1xuICAgIGl0ZW1zID0gW10sXG4gICAgaWNvbk9ubHkgPSBmYWxzZSxcbiAgICBkcmFnZ2FibGUgPSBmYWxzZSxcbiAgICBzaXplID0gXCJtaWRkbGVcIixcbiAgICBib3JkZXIgPSB0cnVlLFxuICAgIGN1cnJlbnRBY3RpdmVLZXksXG4gICAgY29udGVudFdyYXBwZXIsXG4gICAgZXh0cmEsXG4gICAgbW9yZSxcbiAgICBwb3B1cENsYXNzTmFtZSxcbiAgICBzdHlsZXMsXG4gICAgY2hhbmdlQWN0aXZlS2V5LFxuICAgIG9uQ2hhbmdlLFxuICAgIG9uVGFiQ2xpY2ssXG4gICAgb25UYWJTY3JvbGwsXG4gIH0pID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBbY3VycmVudFRhYkVsZW1lbnQsIHNldEN1cnJlbnRUYWJFbGVtZW50XSA9IHVzZVN0YXRlPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG4gICAgY29uc3QgcHJldlNjcm9sbFBvc2l0aW9uID0gdXNlUmVmKDApO1xuXG4gICAgY29uc3QgaXRlbXNNYXAgPSB1c2VNZW1vKCgpID0+IG5ldyBNYXAoaXRlbXMubWFwKChpdGVtKSA9PiBbaXRlbS5rZXksIGl0ZW1dKSksIFtpdGVtc10pO1xuICAgIGNvbnN0IHsgdGFic09yZGVyLCBpc0RyYWdnaW5nLCBkbmRFdmVudHMgfSA9IHVzZVRhYnNEbmRDb250cm9sbGVyKGl0ZW1zKTtcbiAgICBjb25zdCB7IHRhYnNSZWYsIGRyb3Bkb3duTWVudSwgYWRkSGlkZGVuVGFiLCBkZWxldGVIaWRkZW5UYWIsIHNjcm9sbFRvVGFiIH0gPVxuICAgICAgdXNlTW9yZVRhYnNDb250cm9sbGVyKFxuICAgICAgICBpdGVtcyxcbiAgICAgICAgY3VycmVudEFjdGl2ZUtleSxcbiAgICAgICAgY3VycmVudFRhYkVsZW1lbnQsXG4gICAgICAgIG9uVGFiQ2xpY2ssXG4gICAgICAgIG9uQ2hhbmdlLFxuICAgICAgICBjaGFuZ2VBY3RpdmVLZXlcbiAgICAgICk7XG5cbiAgICBjb25zdCBoYW5kbGVTY3JvbGwgPSAoKSA9PiB7XG4gICAgICBpZiAodGFic1JlZi5jdXJyZW50ICYmIGlzRnVuY3Rpb24ob25UYWJTY3JvbGwpKSB7XG4gICAgICAgIGNvbnN0IHNjcm9sbFBvc2l0aW9uID0gdGFic1JlZi5jdXJyZW50LnNjcm9sbExlZnQ7XG4gICAgICAgIGNvbnN0IHNjcm9sbERpcmVjdGlvbiA9IHNjcm9sbFBvc2l0aW9uID4gcHJldlNjcm9sbFBvc2l0aW9uLmN1cnJlbnQgPyBcInJpZ2h0XCIgOiBcImxlZnRcIjtcbiAgICAgICAgb25UYWJTY3JvbGwoc2Nyb2xsRGlyZWN0aW9uKTtcblxuICAgICAgICBwcmV2U2Nyb2xsUG9zaXRpb24uY3VycmVudCA9IHNjcm9sbFBvc2l0aW9uO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBzZW5zb3IgPSB1c2VTZW5zb3IoUG9pbnRlclNlbnNvciwgeyBhY3RpdmF0aW9uQ29uc3RyYWludDogeyBkaXN0YW5jZTogMTAgfSB9KTtcblxuICAgIGNvbnN0IHRhYkJhclN0eWxlID0gZ2V0VGFiQmFyU3R5bGUoc2l6ZSwgYm9yZGVyLCBpY29uT25seSwgaXNEcmFnZ2luZyk7XG5cbiAgICBjb25zdCByZW5kZXJUYWJzID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIHRhYnNPcmRlci5tYXAoKGtleSkgPT4ge1xuICAgICAgICBjb25zdCBpdGVtID0gaXRlbXNNYXAuZ2V0KGtleSk7XG5cbiAgICAgICAgaWYgKGlzVW5kZWZpbmVkKGl0ZW0pKSB7XG4gICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxUYWJJdGVtXG4gICAgICAgICAgICB7Li4uaXRlbX1cbiAgICAgICAgICAgIGl0ZW1LZXk9e2l0ZW0ua2V5fVxuICAgICAgICAgICAgaWNvbk9ubHk9e2ljb25Pbmx5fVxuICAgICAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgICAgIHNlbGVjdGVkPXtjdXJyZW50QWN0aXZlS2V5ID09PSBpdGVtLmtleX1cbiAgICAgICAgICAgIGNoYW5nZUFjdGl2ZUtleT17Y2hhbmdlQWN0aXZlS2V5fVxuICAgICAgICAgICAgYWRkSGlkZGVuVGFiPXthZGRIaWRkZW5UYWJ9XG4gICAgICAgICAgICBkZWxldGVIaWRkZW5UYWI9e2RlbGV0ZUhpZGRlblRhYn1cbiAgICAgICAgICAgIHNldEN1cnJlbnRUYWJFbGVtZW50PXtzZXRDdXJyZW50VGFiRWxlbWVudH1cbiAgICAgICAgICAgIHNjcm9sbFRvVGFiPXtzY3JvbGxUb1RhYn1cbiAgICAgICAgICAgIGNvbnRlbnRXcmFwcGVyPXtjb250ZW50V3JhcHBlcn1cbiAgICAgICAgICAgIGtleT17aXRlbS5rZXl9XG4gICAgICAgICAgICBzdHlsZXM9e3N0eWxlcz8udGFiSXRlbX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICAgIG9uVGFiQ2xpY2s9e29uVGFiQ2xpY2t9XG4gICAgICAgICAgLz5cbiAgICAgICAgKTtcbiAgICAgIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJUYWJzQ29udGFpbmVyID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIHJlZj17dGFic1JlZn1cbiAgICAgICAgICBvblNjcm9sbD17aGFuZGxlU2Nyb2xsfVxuICAgICAgICAgIGNzcz17W3RhYkJhclN0eWxlLnRhYnModGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICA+XG4gICAgICAgICAge3JlbmRlclRhYnMoKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICApO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJEbmRUYWJzID0gKCkgPT4ge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPERuZENvbnRleHQgc2Vuc29ycz17W3NlbnNvcl19IHsuLi5kbmRFdmVudHN9IGNvbGxpc2lvbkRldGVjdGlvbj17Y2xvc2VzdENlbnRlcn0+XG4gICAgICAgICAgPFNvcnRhYmxlQ29udGV4dCBpdGVtcz17dGFic09yZGVyfSBzdHJhdGVneT17aG9yaXpvbnRhbExpc3RTb3J0aW5nU3RyYXRlZ3l9PlxuICAgICAgICAgICAge3JlbmRlclRhYnNDb250YWluZXIoKX1cbiAgICAgICAgICA8L1NvcnRhYmxlQ29udGV4dD5cbiAgICAgICAgPC9EbmRDb250ZXh0PlxuICAgICAgKTtcbiAgICB9O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY3NzPXtbdGFiQmFyU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICA8ZGl2IGNzcz17dGFiQmFyU3R5bGUuY29udGVudCgpfT5cbiAgICAgICAgICB7ZHJhZ2dhYmxlID8gcmVuZGVyRG5kVGFicygpIDogcmVuZGVyVGFic0NvbnRhaW5lcigpfVxuICAgICAgICAgIHtkcm9wZG93bk1lbnUuaXRlbXMubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgICAgICA8ZGl2IGNzcz17dGFiQmFyU3R5bGUubW9yZSh0aGVtZSl9PlxuICAgICAgICAgICAgICA8RHJvcGRvd24gey4uLm1vcmV9IG1lbnU9e2Ryb3Bkb3duTWVudX0gY2xhc3NOYW1lPXtwb3B1cENsYXNzTmFtZX0+XG4gICAgICAgICAgICAgICAgPEVsbGlwc2lzT3V0bGluZWQgLz5cbiAgICAgICAgICAgICAgPC9Ecm9wZG93bj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICl9XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIHtleHRyYX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbik7XG4iXX0= */"], children: [
+    /* @__PURE__ */ jsxs("div", { css: tabBarStyle.content(), children: [
+      draggable ? renderDndTabs() : renderTabsContainer(),
+      dropdownMenu.items.length > 0 && /* @__PURE__ */ jsx("div", { css: tabBarStyle.more(theme), children: /* @__PURE__ */ jsx(Dropdown, { ...more, menu: dropdownMenu, className: popupClassName, children: /* @__PURE__ */ jsx(EllipsisOutlined, {}) }) })
+    ] }),
+    extra
+  ] });
+});
+export {
+  TabBar
+};

package/dist/components/Tabs/components/TabBar/TabBar.styles.d.ts

@@ -0,0 +1,46 @@
+import { TabsSizeType } from 'components/Tabs/Tabs.types';
+import { Theme } from 'themes';
+export declare const getTabBarStyle: (size: TabsSizeType, border: boolean, iconOnly: boolean, isDragging: boolean) => {
+    wrapper: (theme: Theme) => {
+        readonly position: "relative";
+        readonly display: "flex";
+        readonly gap: number;
+        readonly flex: "1 1 auto";
+        readonly alignItems: "center";
+        readonly "::before": {
+            readonly content: "unset" | "''";
+            readonly position: "absolute";
+            readonly width: "100%";
+            readonly borderBottom: "1px solid #D9D9D9";
+            readonly bottom: 0;
+            readonly zIndex: 0;
+        };
+    };
+    content: () => {
+        readonly display: "flex";
+        readonly flex: "1 1 auto";
+        readonly overflowX: "hidden";
+    };
+    tabs: (theme: Theme) => {
+        readonly display: "flex";
+        readonly gap: number;
+        readonly flex: "1 1 auto";
+        readonly zIndex: 1;
+        readonly overflowY: "hidden";
+        readonly overflowX: "hidden" | "scroll";
+        readonly "::-webkit-scrollbar": {
+            readonly display: "none";
+        };
+    };
+    more: (theme: Theme) => {
+        height: number;
+        width: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        flex: string;
+        svg: {
+            cursor: string;
+        };
+    };
+};

package/dist/components/Tabs/components/TabBar/TabBar.styles.js

@@ -0,0 +1,70 @@
+import { getTabsTokens } from "../../Tabs.tokens.js";
+const getTabsGap = (tabsTokens, iconOnly, isMiddleSize) => {
+  if (iconOnly) {
+    return 0;
+  }
+  if (isMiddleSize) {
+    return tabsTokens.tabsGapM;
+  }
+  return tabsTokens.tabsGapS;
+};
+const getTabBarStyle = (size, border, iconOnly, isDragging) => {
+  const isMiddleSize = size === "middle";
+  return {
+    wrapper: (theme) => {
+      const tabsTokens = getTabsTokens(theme);
+      return {
+        position: "relative",
+        display: "flex",
+        gap: isMiddleSize ? tabsTokens.tabsGapM : tabsTokens.tabsGapS,
+        flex: "1 1 auto",
+        alignItems: "center",
+        "::before": {
+          content: border ? "''" : "unset",
+          position: "absolute",
+          width: "100%",
+          borderBottom: `1px solid ${tabsTokens.tabsBorder}`,
+          bottom: 0,
+          zIndex: 0
+        }
+      };
+    },
+    content: () => ({
+      display: "flex",
+      flex: "1 1 auto",
+      overflowX: "hidden"
+    }),
+    tabs: (theme) => {
+      const tabsTokens = getTabsTokens(theme);
+      return {
+        display: "flex",
+        gap: getTabsGap(tabsTokens, iconOnly, isMiddleSize),
+        flex: "1 1 auto",
+        zIndex: 1,
+        overflowY: "hidden",
+        overflowX: isDragging ? "hidden" : "scroll",
+        "::-webkit-scrollbar": {
+          display: "none"
+        }
+      };
+    },
+    more: (theme) => {
+      const tabsTokens = getTabsTokens(theme);
+      const moreItemSize = isMiddleSize ? tabsTokens.tabsSizeM : tabsTokens.tabsSizeM;
+      return {
+        height: moreItemSize,
+        width: moreItemSize,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: "0 0 auto",
+        svg: {
+          cursor: "pointer"
+        }
+      };
+    }
+  };
+};
+export {
+  getTabBarStyle
+};

package/dist/components/Tabs/components/TabBar/TabBar.types.d.ts

@@ -0,0 +1,14 @@
+import { Interpolation } from '@emotion/react';
+import { TabsProps } from 'components/Tabs/Tabs.types';
+import { Theme } from 'themes';
+import { TabItemProps } from '../TabItem/TabItem.types';
+export interface TabBarProps extends Omit<TabsProps, "activeKey" | "defaultActiveKey" | "styles" | "renderTabBar"> {
+    currentActiveKey: string | undefined;
+    contentWrapper: HTMLDivElement | null;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        tabs?: (theme: Theme) => Interpolation;
+        tabItem?: TabItemProps["styles"];
+    };
+    changeActiveKey: (key: string) => void;
+}

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TabItemProps } from './TabItem.types';
+export declare const TabItem: FC<TabItemProps>;

package/dist/components/Tabs/components/TabItem/TabItem.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo, useRef, useEffect, useCallback } from "react";
+import { isUndefined } from "lodash-es";
+import { getTabItemStyle } from "./TabItem.styles.js";
+import { createPortal } from "react-dom";
+import { useInView } from "react-intersection-observer";
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const TabItem = memo(({
+  icon,
+  label,
+  iconOnly,
+  disabled = false,
+  size = "middle",
+  itemKey,
+  selected,
+  forceRender,
+  contentWrapper,
+  children,
+  styles,
+  changeActiveKey,
+  addHiddenTab,
+  deleteHiddenTab,
+  setCurrentTabElement,
+  scrollToTab,
+  onChange,
+  onTabClick
+}) => {
+  var _a, _b, _c, _d;
+  const theme = useTheme();
+  const itemRef = useRef(null);
+  const {
+    ref,
+    inView
+  } = useInView({
+    threshold: 0.95
+  });
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id: itemKey
+  });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  useEffect(() => {
+    if (inView) {
+      deleteHiddenTab(itemKey);
+    } else {
+      addHiddenTab(itemKey);
+    }
+  }, [addHiddenTab, deleteHiddenTab, inView, itemKey]);
+  useEffect(() => {
+    if (!selected || isUndefined(itemRef.current)) {
+      return;
+    }
+    setCurrentTabElement(itemRef.current);
+    if (inView) {
+      return;
+    }
+    scrollToTab(itemRef.current);
+  }, [selected]);
+  const handleClick = useCallback((e) => {
+    onTabClick == null ? void 0 : onTabClick(itemKey, e);
+    if (disabled || selected) {
+      return;
+    }
+    onChange == null ? void 0 : onChange(itemKey);
+    changeActiveKey(itemKey);
+  }, [changeActiveKey, disabled, itemKey, onChange, onTabClick, selected]);
+  const consolidatedRef = (node) => {
+    ref(node);
+    itemRef.current = node;
+    setNodeRef(node);
+  };
+  const withIconOnly = iconOnly || isUndefined(label);
+  const withContent = (selected || forceRender) && contentWrapper && children;
+  const tabItemStyle = getTabItemStyle(withIconOnly, disabled, selected, size, isDragging);
+  return /* @__PURE__ */ jsxs("div", { ref: consolidatedRef, style, ...listeners, ...attributes, css: [tabItemStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TabItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkl0ZW0vVGFiSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0dRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkl0ZW0vVGFiSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBtZW1vLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VSZWYsIHR5cGUgRkMsIHR5cGUgTW91c2VFdmVudCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBUYWJJdGVtUHJvcHMgfSBmcm9tIFwiLi9UYWJJdGVtLnR5cGVzXCI7XG5pbXBvcnQgeyBpc1VuZGVmaW5lZCB9IGZyb20gXCJsb2Rhc2gtZXNcIjtcbmltcG9ydCB7IGdldFRhYkl0ZW1TdHlsZSB9IGZyb20gXCIuL1RhYkl0ZW0uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSBcInJlYWN0LWRvbVwiO1xuaW1wb3J0IHsgdXNlSW5WaWV3IH0gZnJvbSBcInJlYWN0LWludGVyc2VjdGlvbi1vYnNlcnZlclwiO1xuaW1wb3J0IHsgQ1NTIH0gZnJvbSBcIkBkbmQta2l0L3V0aWxpdGllc1wiO1xuaW1wb3J0IHsgdXNlU29ydGFibGUgfSBmcm9tIFwiQGRuZC1raXQvc29ydGFibGVcIjtcblxuZXhwb3J0IGNvbnN0IFRhYkl0ZW06IEZDPFRhYkl0ZW1Qcm9wcz4gPSBtZW1vKFxuICAoe1xuICAgIGljb24sXG4gICAgbGFiZWwsXG4gICAgaWNvbk9ubHksXG4gICAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgICBzaXplID0gXCJtaWRkbGVcIixcbiAgICBpdGVtS2V5LFxuICAgIHNlbGVjdGVkLFxuICAgIGZvcmNlUmVuZGVyLFxuICAgIGNvbnRlbnRXcmFwcGVyLFxuICAgIGNoaWxkcmVuLFxuICAgIHN0eWxlcyxcbiAgICBjaGFuZ2VBY3RpdmVLZXksXG4gICAgYWRkSGlkZGVuVGFiLFxuICAgIGRlbGV0ZUhpZGRlblRhYixcbiAgICBzZXRDdXJyZW50VGFiRWxlbWVudCxcbiAgICBzY3JvbGxUb1RhYixcbiAgICBvbkNoYW5nZSxcbiAgICBvblRhYkNsaWNrLFxuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICAgIGNvbnN0IGl0ZW1SZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQgfCBudWxsPihudWxsKTtcblxuICAgIGNvbnN0IHsgcmVmLCBpblZpZXcgfSA9IHVzZUluVmlldyh7IHRocmVzaG9sZDogMC45NSB9KTtcblxuICAgIGNvbnN0IHsgaXNEcmFnZ2luZywgYXR0cmlidXRlcywgbGlzdGVuZXJzLCBzZXROb2RlUmVmLCB0cmFuc2Zvcm0sIHRyYW5zaXRpb24gfSA9IHVzZVNvcnRhYmxlKHtcbiAgICAgIGlkOiBpdGVtS2V5LFxuICAgIH0pO1xuXG4gICAgY29uc3Qgc3R5bGUgPSB7XG4gICAgICB0cmFuc2Zvcm06IENTUy5UcmFuc2xhdGUudG9TdHJpbmcodHJhbnNmb3JtKSxcbiAgICAgIHRyYW5zaXRpb24sXG4gICAgfTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoaW5WaWV3KSB7XG4gICAgICAgIGRlbGV0ZUhpZGRlblRhYihpdGVtS2V5KTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGFkZEhpZGRlblRhYihpdGVtS2V5KTtcbiAgICAgIH1cbiAgICB9LCBbYWRkSGlkZGVuVGFiLCBkZWxldGVIaWRkZW5UYWIsIGluVmlldywgaXRlbUtleV0pO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICghc2VsZWN0ZWQgfHwgaXNVbmRlZmluZWQoaXRlbVJlZi5jdXJyZW50KSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldEN1cnJlbnRUYWJFbGVtZW50KGl0ZW1SZWYuY3VycmVudCk7XG5cbiAgICAgIGlmIChpblZpZXcpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzY3JvbGxUb1RhYihpdGVtUmVmLmN1cnJlbnQpO1xuICAgIH0sIFtzZWxlY3RlZF0pO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjayhcbiAgICAgIChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICAgIG9uVGFiQ2xpY2s/LihpdGVtS2V5LCBlKTtcblxuICAgICAgICBpZiAoZGlzYWJsZWQgfHwgc2VsZWN0ZWQpIHtcbiAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBvbkNoYW5nZT8uKGl0ZW1LZXkpO1xuICAgICAgICBjaGFuZ2VBY3RpdmVLZXkoaXRlbUtleSk7XG4gICAgICB9LFxuICAgICAgW2NoYW5nZUFjdGl2ZUtleSwgZGlzYWJsZWQsIGl0ZW1LZXksIG9uQ2hhbmdlLCBvblRhYkNsaWNrLCBzZWxlY3RlZF1cbiAgICApO1xuXG4gICAgY29uc3QgY29uc29saWRhdGVkUmVmID0gKG5vZGU6IEhUTUxFbGVtZW50IHwgbnVsbCkgPT4ge1xuICAgICAgcmVmKG5vZGUpO1xuICAgICAgaXRlbVJlZi5jdXJyZW50ID0gbm9kZTtcbiAgICAgIHNldE5vZGVSZWYobm9kZSk7XG4gICAgfTtcblxuICAgIGNvbnN0IHdpdGhJY29uT25seSA9IGljb25Pbmx5IHx8IGlzVW5kZWZpbmVkKGxhYmVsKTtcbiAgICBjb25zdCB3aXRoQ29udGVudCA9IChzZWxlY3RlZCB8fCBmb3JjZVJlbmRlcikgJiYgY29udGVudFdyYXBwZXIgJiYgY2hpbGRyZW47XG5cbiAgICBjb25zdCB0YWJJdGVtU3R5bGUgPSBnZXRUYWJJdGVtU3R5bGUod2l0aEljb25Pbmx5LCBkaXNhYmxlZCwgc2VsZWN0ZWQsIHNpemUsIGlzRHJhZ2dpbmcpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgcmVmPXtjb25zb2xpZGF0ZWRSZWZ9XG4gICAgICAgIHN0eWxlPXtzdHlsZX1cbiAgICAgICAgey4uLmxpc3RlbmVyc31cbiAgICAgICAgey4uLmF0dHJpYnV0ZXN9XG4gICAgICAgIGNzcz17W3RhYkl0ZW1TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17aGFuZGxlQ2xpY2t9XG4gICAgICA+XG4gICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICA8c3BhbiBjc3M9e1t0YWJJdGVtU3R5bGUuaWNvbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/Lmljb25XcmFwcGVyPy4odGhlbWUpXX0+e2ljb259PC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7IWljb25Pbmx5ICYmIGxhYmVsICYmIChcbiAgICAgICAgICA8c3BhbiBjc3M9e1t0YWJJdGVtU3R5bGUubGFiZWxXcmFwcGVyKHRoZW1lKSwgc3R5bGVzPy5sYWJlbFdyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICAgIHt3aXRoQ29udGVudCAmJlxuICAgICAgICAgIGNyZWF0ZVBvcnRhbChcbiAgICAgICAgICAgIDxkaXYgY3NzPXtbdGFiSXRlbVN0eWxlLmNoaWxkcmVuV3JhcHBlcih0aGVtZSksIHN0eWxlcz8uY2hpbGRyZW5XcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDwvZGl2PixcbiAgICAgICAgICAgIGNvbnRlbnRXcmFwcGVyXG4gICAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbik7XG4iXX0= */"], onClick: handleClick, children: [
+    icon && /* @__PURE__ */ jsx("span", { css: [tabItemStyle.iconWrapper(theme), (_b = styles == null ? void 0 : styles.iconWrapper) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TabItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkl0ZW0vVGFiSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0dnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1RhYnMvY29tcG9uZW50cy9UYWJJdGVtL1RhYkl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWVtbywgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB0eXBlIEZDLCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGFiSXRlbVByb3BzIH0gZnJvbSBcIi4vVGFiSXRlbS50eXBlc1wiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBnZXRUYWJJdGVtU3R5bGUgfSBmcm9tIFwiLi9UYWJJdGVtLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZUluVmlldyB9IGZyb20gXCJyZWFjdC1pbnRlcnNlY3Rpb24tb2JzZXJ2ZXJcIjtcbmltcG9ydCB7IENTUyB9IGZyb20gXCJAZG5kLWtpdC91dGlsaXRpZXNcIjtcbmltcG9ydCB7IHVzZVNvcnRhYmxlIH0gZnJvbSBcIkBkbmQta2l0L3NvcnRhYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWJJdGVtOiBGQzxUYWJJdGVtUHJvcHM+ID0gbWVtbyhcbiAgKHtcbiAgICBpY29uLFxuICAgIGxhYmVsLFxuICAgIGljb25Pbmx5LFxuICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgc2l6ZSA9IFwibWlkZGxlXCIsXG4gICAgaXRlbUtleSxcbiAgICBzZWxlY3RlZCxcbiAgICBmb3JjZVJlbmRlcixcbiAgICBjb250ZW50V3JhcHBlcixcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2hhbmdlQWN0aXZlS2V5LFxuICAgIGFkZEhpZGRlblRhYixcbiAgICBkZWxldGVIaWRkZW5UYWIsXG4gICAgc2V0Q3VycmVudFRhYkVsZW1lbnQsXG4gICAgc2Nyb2xsVG9UYWIsXG4gICAgb25DaGFuZ2UsXG4gICAgb25UYWJDbGljayxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBpdGVtUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCB7IHJlZiwgaW5WaWV3IH0gPSB1c2VJblZpZXcoeyB0aHJlc2hvbGQ6IDAuOTUgfSk7XG5cbiAgICBjb25zdCB7IGlzRHJhZ2dpbmcsIGF0dHJpYnV0ZXMsIGxpc3RlbmVycywgc2V0Tm9kZVJlZiwgdHJhbnNmb3JtLCB0cmFuc2l0aW9uIH0gPSB1c2VTb3J0YWJsZSh7XG4gICAgICBpZDogaXRlbUtleSxcbiAgICB9KTtcblxuICAgIGNvbnN0IHN0eWxlID0ge1xuICAgICAgdHJhbnNmb3JtOiBDU1MuVHJhbnNsYXRlLnRvU3RyaW5nKHRyYW5zZm9ybSksXG4gICAgICB0cmFuc2l0aW9uLFxuICAgIH07XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKGluVmlldykge1xuICAgICAgICBkZWxldGVIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBhZGRIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9XG4gICAgfSwgW2FkZEhpZGRlblRhYiwgZGVsZXRlSGlkZGVuVGFiLCBpblZpZXcsIGl0ZW1LZXldKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoIXNlbGVjdGVkIHx8IGlzVW5kZWZpbmVkKGl0ZW1SZWYuY3VycmVudCkpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzZXRDdXJyZW50VGFiRWxlbWVudChpdGVtUmVmLmN1cnJlbnQpO1xuXG4gICAgICBpZiAoaW5WaWV3KSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2Nyb2xsVG9UYWIoaXRlbVJlZi5jdXJyZW50KTtcbiAgICB9LCBbc2VsZWN0ZWRdKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAoZTogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBvblRhYkNsaWNrPy4oaXRlbUtleSwgZSk7XG5cbiAgICAgICAgaWYgKGRpc2FibGVkIHx8IHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgb25DaGFuZ2U/LihpdGVtS2V5KTtcbiAgICAgICAgY2hhbmdlQWN0aXZlS2V5KGl0ZW1LZXkpO1xuICAgICAgfSxcbiAgICAgIFtjaGFuZ2VBY3RpdmVLZXksIGRpc2FibGVkLCBpdGVtS2V5LCBvbkNoYW5nZSwgb25UYWJDbGljaywgc2VsZWN0ZWRdXG4gICAgKTtcblxuICAgIGNvbnN0IGNvbnNvbGlkYXRlZFJlZiA9IChub2RlOiBIVE1MRWxlbWVudCB8IG51bGwpID0+IHtcbiAgICAgIHJlZihub2RlKTtcbiAgICAgIGl0ZW1SZWYuY3VycmVudCA9IG5vZGU7XG4gICAgICBzZXROb2RlUmVmKG5vZGUpO1xuICAgIH07XG5cbiAgICBjb25zdCB3aXRoSWNvbk9ubHkgPSBpY29uT25seSB8fCBpc1VuZGVmaW5lZChsYWJlbCk7XG4gICAgY29uc3Qgd2l0aENvbnRlbnQgPSAoc2VsZWN0ZWQgfHwgZm9yY2VSZW5kZXIpICYmIGNvbnRlbnRXcmFwcGVyICYmIGNoaWxkcmVuO1xuXG4gICAgY29uc3QgdGFiSXRlbVN0eWxlID0gZ2V0VGFiSXRlbVN0eWxlKHdpdGhJY29uT25seSwgZGlzYWJsZWQsIHNlbGVjdGVkLCBzaXplLCBpc0RyYWdnaW5nKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17Y29uc29saWRhdGVkUmVmfVxuICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjc3M9e1t0YWJJdGVtU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmljb25XcmFwcGVyKHRoZW1lKSwgc3R5bGVzPy5pY29uV3JhcHBlcj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgICAgeyFpY29uT25seSAmJiBsYWJlbCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmxhYmVsV3JhcHBlcih0aGVtZSksIHN0eWxlcz8ubGFiZWxXcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/LmNoaWxkcmVuV3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L2Rpdj4sXG4gICAgICAgICAgICBjb250ZW50V3JhcHBlclxuICAgICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], children: icon }),
+    !iconOnly && label && /* @__PURE__ */ jsx("span", { css: [tabItemStyle.labelWrapper(theme), (_c = styles == null ? void 0 : styles.labelWrapper) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TabItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkl0ZW0vVGFiSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUdnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1RhYnMvY29tcG9uZW50cy9UYWJJdGVtL1RhYkl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWVtbywgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB0eXBlIEZDLCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGFiSXRlbVByb3BzIH0gZnJvbSBcIi4vVGFiSXRlbS50eXBlc1wiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBnZXRUYWJJdGVtU3R5bGUgfSBmcm9tIFwiLi9UYWJJdGVtLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZUluVmlldyB9IGZyb20gXCJyZWFjdC1pbnRlcnNlY3Rpb24tb2JzZXJ2ZXJcIjtcbmltcG9ydCB7IENTUyB9IGZyb20gXCJAZG5kLWtpdC91dGlsaXRpZXNcIjtcbmltcG9ydCB7IHVzZVNvcnRhYmxlIH0gZnJvbSBcIkBkbmQta2l0L3NvcnRhYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWJJdGVtOiBGQzxUYWJJdGVtUHJvcHM+ID0gbWVtbyhcbiAgKHtcbiAgICBpY29uLFxuICAgIGxhYmVsLFxuICAgIGljb25Pbmx5LFxuICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgc2l6ZSA9IFwibWlkZGxlXCIsXG4gICAgaXRlbUtleSxcbiAgICBzZWxlY3RlZCxcbiAgICBmb3JjZVJlbmRlcixcbiAgICBjb250ZW50V3JhcHBlcixcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2hhbmdlQWN0aXZlS2V5LFxuICAgIGFkZEhpZGRlblRhYixcbiAgICBkZWxldGVIaWRkZW5UYWIsXG4gICAgc2V0Q3VycmVudFRhYkVsZW1lbnQsXG4gICAgc2Nyb2xsVG9UYWIsXG4gICAgb25DaGFuZ2UsXG4gICAgb25UYWJDbGljayxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBpdGVtUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCB7IHJlZiwgaW5WaWV3IH0gPSB1c2VJblZpZXcoeyB0aHJlc2hvbGQ6IDAuOTUgfSk7XG5cbiAgICBjb25zdCB7IGlzRHJhZ2dpbmcsIGF0dHJpYnV0ZXMsIGxpc3RlbmVycywgc2V0Tm9kZVJlZiwgdHJhbnNmb3JtLCB0cmFuc2l0aW9uIH0gPSB1c2VTb3J0YWJsZSh7XG4gICAgICBpZDogaXRlbUtleSxcbiAgICB9KTtcblxuICAgIGNvbnN0IHN0eWxlID0ge1xuICAgICAgdHJhbnNmb3JtOiBDU1MuVHJhbnNsYXRlLnRvU3RyaW5nKHRyYW5zZm9ybSksXG4gICAgICB0cmFuc2l0aW9uLFxuICAgIH07XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKGluVmlldykge1xuICAgICAgICBkZWxldGVIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBhZGRIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9XG4gICAgfSwgW2FkZEhpZGRlblRhYiwgZGVsZXRlSGlkZGVuVGFiLCBpblZpZXcsIGl0ZW1LZXldKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoIXNlbGVjdGVkIHx8IGlzVW5kZWZpbmVkKGl0ZW1SZWYuY3VycmVudCkpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzZXRDdXJyZW50VGFiRWxlbWVudChpdGVtUmVmLmN1cnJlbnQpO1xuXG4gICAgICBpZiAoaW5WaWV3KSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2Nyb2xsVG9UYWIoaXRlbVJlZi5jdXJyZW50KTtcbiAgICB9LCBbc2VsZWN0ZWRdKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAoZTogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBvblRhYkNsaWNrPy4oaXRlbUtleSwgZSk7XG5cbiAgICAgICAgaWYgKGRpc2FibGVkIHx8IHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgb25DaGFuZ2U/LihpdGVtS2V5KTtcbiAgICAgICAgY2hhbmdlQWN0aXZlS2V5KGl0ZW1LZXkpO1xuICAgICAgfSxcbiAgICAgIFtjaGFuZ2VBY3RpdmVLZXksIGRpc2FibGVkLCBpdGVtS2V5LCBvbkNoYW5nZSwgb25UYWJDbGljaywgc2VsZWN0ZWRdXG4gICAgKTtcblxuICAgIGNvbnN0IGNvbnNvbGlkYXRlZFJlZiA9IChub2RlOiBIVE1MRWxlbWVudCB8IG51bGwpID0+IHtcbiAgICAgIHJlZihub2RlKTtcbiAgICAgIGl0ZW1SZWYuY3VycmVudCA9IG5vZGU7XG4gICAgICBzZXROb2RlUmVmKG5vZGUpO1xuICAgIH07XG5cbiAgICBjb25zdCB3aXRoSWNvbk9ubHkgPSBpY29uT25seSB8fCBpc1VuZGVmaW5lZChsYWJlbCk7XG4gICAgY29uc3Qgd2l0aENvbnRlbnQgPSAoc2VsZWN0ZWQgfHwgZm9yY2VSZW5kZXIpICYmIGNvbnRlbnRXcmFwcGVyICYmIGNoaWxkcmVuO1xuXG4gICAgY29uc3QgdGFiSXRlbVN0eWxlID0gZ2V0VGFiSXRlbVN0eWxlKHdpdGhJY29uT25seSwgZGlzYWJsZWQsIHNlbGVjdGVkLCBzaXplLCBpc0RyYWdnaW5nKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17Y29uc29saWRhdGVkUmVmfVxuICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjc3M9e1t0YWJJdGVtU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmljb25XcmFwcGVyKHRoZW1lKSwgc3R5bGVzPy5pY29uV3JhcHBlcj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgICAgeyFpY29uT25seSAmJiBsYWJlbCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmxhYmVsV3JhcHBlcih0aGVtZSksIHN0eWxlcz8ubGFiZWxXcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/LmNoaWxkcmVuV3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L2Rpdj4sXG4gICAgICAgICAgICBjb250ZW50V3JhcHBlclxuICAgICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], children: label }),
+    withContent && createPortal(/* @__PURE__ */ jsx("div", { css: [tabItemStyle.childrenWrapper(theme), (_d = styles == null ? void 0 : styles.childrenWrapper) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:TabItem;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvVGFicy9jb21wb25lbnRzL1RhYkl0ZW0vVGFiSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0dpQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1RhYnMvY29tcG9uZW50cy9UYWJJdGVtL1RhYkl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWVtbywgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlUmVmLCB0eXBlIEZDLCB0eXBlIE1vdXNlRXZlbnQgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgVGFiSXRlbVByb3BzIH0gZnJvbSBcIi4vVGFiSXRlbS50eXBlc1wiO1xuaW1wb3J0IHsgaXNVbmRlZmluZWQgfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBnZXRUYWJJdGVtU3R5bGUgfSBmcm9tIFwiLi9UYWJJdGVtLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZUluVmlldyB9IGZyb20gXCJyZWFjdC1pbnRlcnNlY3Rpb24tb2JzZXJ2ZXJcIjtcbmltcG9ydCB7IENTUyB9IGZyb20gXCJAZG5kLWtpdC91dGlsaXRpZXNcIjtcbmltcG9ydCB7IHVzZVNvcnRhYmxlIH0gZnJvbSBcIkBkbmQta2l0L3NvcnRhYmxlXCI7XG5cbmV4cG9ydCBjb25zdCBUYWJJdGVtOiBGQzxUYWJJdGVtUHJvcHM+ID0gbWVtbyhcbiAgKHtcbiAgICBpY29uLFxuICAgIGxhYmVsLFxuICAgIGljb25Pbmx5LFxuICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgc2l6ZSA9IFwibWlkZGxlXCIsXG4gICAgaXRlbUtleSxcbiAgICBzZWxlY3RlZCxcbiAgICBmb3JjZVJlbmRlcixcbiAgICBjb250ZW50V3JhcHBlcixcbiAgICBjaGlsZHJlbixcbiAgICBzdHlsZXMsXG4gICAgY2hhbmdlQWN0aXZlS2V5LFxuICAgIGFkZEhpZGRlblRhYixcbiAgICBkZWxldGVIaWRkZW5UYWIsXG4gICAgc2V0Q3VycmVudFRhYkVsZW1lbnQsXG4gICAgc2Nyb2xsVG9UYWIsXG4gICAgb25DaGFuZ2UsXG4gICAgb25UYWJDbGljayxcbiAgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcbiAgICBjb25zdCBpdGVtUmVmID0gdXNlUmVmPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgICBjb25zdCB7IHJlZiwgaW5WaWV3IH0gPSB1c2VJblZpZXcoeyB0aHJlc2hvbGQ6IDAuOTUgfSk7XG5cbiAgICBjb25zdCB7IGlzRHJhZ2dpbmcsIGF0dHJpYnV0ZXMsIGxpc3RlbmVycywgc2V0Tm9kZVJlZiwgdHJhbnNmb3JtLCB0cmFuc2l0aW9uIH0gPSB1c2VTb3J0YWJsZSh7XG4gICAgICBpZDogaXRlbUtleSxcbiAgICB9KTtcblxuICAgIGNvbnN0IHN0eWxlID0ge1xuICAgICAgdHJhbnNmb3JtOiBDU1MuVHJhbnNsYXRlLnRvU3RyaW5nKHRyYW5zZm9ybSksXG4gICAgICB0cmFuc2l0aW9uLFxuICAgIH07XG5cbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgaWYgKGluVmlldykge1xuICAgICAgICBkZWxldGVIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBhZGRIaWRkZW5UYWIoaXRlbUtleSk7XG4gICAgICB9XG4gICAgfSwgW2FkZEhpZGRlblRhYiwgZGVsZXRlSGlkZGVuVGFiLCBpblZpZXcsIGl0ZW1LZXldKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoIXNlbGVjdGVkIHx8IGlzVW5kZWZpbmVkKGl0ZW1SZWYuY3VycmVudCkpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzZXRDdXJyZW50VGFiRWxlbWVudChpdGVtUmVmLmN1cnJlbnQpO1xuXG4gICAgICBpZiAoaW5WaWV3KSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2Nyb2xsVG9UYWIoaXRlbVJlZi5jdXJyZW50KTtcbiAgICB9LCBbc2VsZWN0ZWRdKTtcblxuICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAoZTogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBvblRhYkNsaWNrPy4oaXRlbUtleSwgZSk7XG5cbiAgICAgICAgaWYgKGRpc2FibGVkIHx8IHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgb25DaGFuZ2U/LihpdGVtS2V5KTtcbiAgICAgICAgY2hhbmdlQWN0aXZlS2V5KGl0ZW1LZXkpO1xuICAgICAgfSxcbiAgICAgIFtjaGFuZ2VBY3RpdmVLZXksIGRpc2FibGVkLCBpdGVtS2V5LCBvbkNoYW5nZSwgb25UYWJDbGljaywgc2VsZWN0ZWRdXG4gICAgKTtcblxuICAgIGNvbnN0IGNvbnNvbGlkYXRlZFJlZiA9IChub2RlOiBIVE1MRWxlbWVudCB8IG51bGwpID0+IHtcbiAgICAgIHJlZihub2RlKTtcbiAgICAgIGl0ZW1SZWYuY3VycmVudCA9IG5vZGU7XG4gICAgICBzZXROb2RlUmVmKG5vZGUpO1xuICAgIH07XG5cbiAgICBjb25zdCB3aXRoSWNvbk9ubHkgPSBpY29uT25seSB8fCBpc1VuZGVmaW5lZChsYWJlbCk7XG4gICAgY29uc3Qgd2l0aENvbnRlbnQgPSAoc2VsZWN0ZWQgfHwgZm9yY2VSZW5kZXIpICYmIGNvbnRlbnRXcmFwcGVyICYmIGNoaWxkcmVuO1xuXG4gICAgY29uc3QgdGFiSXRlbVN0eWxlID0gZ2V0VGFiSXRlbVN0eWxlKHdpdGhJY29uT25seSwgZGlzYWJsZWQsIHNlbGVjdGVkLCBzaXplLCBpc0RyYWdnaW5nKTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17Y29uc29saWRhdGVkUmVmfVxuICAgICAgICBzdHlsZT17c3R5bGV9XG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjc3M9e1t0YWJJdGVtU3R5bGUud3JhcHBlcih0aGVtZSksIHN0eWxlcz8ud3JhcHBlcj8uKHRoZW1lKV19XG4gICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmljb25XcmFwcGVyKHRoZW1lKSwgc3R5bGVzPy5pY29uV3JhcHBlcj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj5cbiAgICAgICAgKX1cbiAgICAgICAgeyFpY29uT25seSAmJiBsYWJlbCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbdGFiSXRlbVN0eWxlLmxhYmVsV3JhcHBlcih0aGVtZSksIHN0eWxlcz8ubGFiZWxXcmFwcGVyPy4odGhlbWUpXX0+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIodGhlbWUpLCBzdHlsZXM/LmNoaWxkcmVuV3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L2Rpdj4sXG4gICAgICAgICAgICBjb250ZW50V3JhcHBlclxuICAgICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], children }), contentWrapper)
+  ] });
+});
+export {
+  TabItem
+};

package/dist/components/Tabs/components/TabItem/TabItem.styles.d.ts

@@ -0,0 +1,42 @@
+import { TabsSizeType } from 'components/Tabs/Tabs.types';
+import { Theme } from 'themes';
+export declare const getTabItemStyle: (iconOnly: boolean, disabled: boolean, selected: boolean, size: TabsSizeType, isDragging: boolean) => {
+    wrapper: (theme: Theme) => {
+        readonly display: "flex";
+        readonly flexWrap: "nowrap";
+        readonly alignItems: "center";
+        readonly justifyContent: "unset" | "center";
+        readonly gap: 4;
+        readonly padding: `4px 0 ${number}px` | `8px 0 ${number}px`;
+        readonly color: "#262626" | "#595959" | "#8C8C8C" | "#BFBFBF";
+        readonly height: number;
+        readonly width: number | "fit-content";
+        readonly boxSizing: "border-box";
+        readonly cursor: "default" | "pointer" | "move";
+        readonly borderBottom: "2px solid #0CB3B3" | "2px solid transparent";
+        readonly ":hover": {
+            readonly color: "#262626" | "#595959" | "#8C8C8C" | "#BFBFBF";
+        };
+    };
+    iconWrapper: (theme: Theme) => {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        fontSize: 16;
+    };
+    labelWrapper: (theme: Theme) => {
+        whiteSpace: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+    };
+    childrenWrapper: (theme: Theme) => {
+        readonly color: "#262626";
+        readonly padding: "12px 0";
+        readonly visibility: "hidden" | "visible";
+        readonly position: "absolute" | "relative";
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 14;
+        readonly lineHeight: "20px";
+    };
+};

package/dist/components/Tabs/components/TabItem/TabItem.styles.js

@@ -0,0 +1,69 @@
+import { getTabsTokens } from "../../Tabs.tokens.js";
+const getColor = (tabsTokens, disabled, selected, isHover = false) => {
+  if (disabled) {
+    return tabsTokens.tabsTextDisabled;
+  }
+  if (selected) {
+    return tabsTokens.tabsTextSelected;
+  }
+  if (isHover) {
+    return tabsTokens.tabsTextHover;
+  }
+  return tabsTokens.tabsText;
+};
+const getCursor = (isDragging, disabled, selected) => {
+  if (isDragging) {
+    return "move";
+  }
+  if (disabled || selected) {
+    return "default";
+  }
+  return "pointer";
+};
+const getTabItemStyle = (iconOnly, disabled, selected, size, isDragging) => {
+  const isMiddleSize = size === "middle";
+  return {
+    wrapper: (theme) => {
+      const tabsTokens = getTabsTokens(theme);
+      const tabBarSize = isMiddleSize ? tabsTokens.tabsSizeM : tabsTokens.tabsSizeS;
+      const tabPadding = isMiddleSize ? theme.paddingM : theme.paddingXS;
+      return {
+        display: "flex",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        justifyContent: iconOnly ? "center" : "unset",
+        gap: theme.marginXS,
+        padding: `${tabPadding}px 0 ${tabPadding - 2}px`,
+        color: getColor(tabsTokens, disabled, selected),
+        height: tabBarSize,
+        width: iconOnly ? tabBarSize : "fit-content",
+        boxSizing: "border-box",
+        cursor: getCursor(isDragging, disabled, selected),
+        borderBottom: `2px solid ${selected ? tabsTokens.tabsIndicator : "transparent"}`,
+        ":hover": {
+          color: getColor(tabsTokens, disabled, selected, true)
+        }
+      };
+    },
+    iconWrapper: (theme) => ({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: theme.iconM
+    }),
+    labelWrapper: (theme) => ({
+      ...theme.typography.body2,
+      whiteSpace: "nowrap"
+    }),
+    childrenWrapper: (theme) => ({
+      ...theme.typography.body2,
+      color: theme.textPrimary,
+      padding: "12px 0",
+      visibility: selected ? "visible" : "hidden",
+      position: selected ? "relative" : "absolute"
+    })
+  };
+};
+export {
+  getTabItemStyle
+};

package/dist/components/Tabs/components/TabItem/TabItem.types.d.ts

@@ -0,0 +1,32 @@
+import { Interpolation } from '@emotion/react';
+import { TabsSizeType } from 'components/Tabs/Tabs.types';
+import { MouseEvent, ReactNode } from 'react';
+import { Theme } from 'themes';
+export interface TabItem {
+    key: string;
+    disabled?: boolean;
+    forceRender?: boolean;
+    label?: ReactNode;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+export interface TabItemProps extends Omit<TabItem, "key"> {
+    itemKey: string;
+    selected: boolean;
+    contentWrapper: HTMLDivElement | null;
+    changeActiveKey: (key: string) => void;
+    addHiddenTab: (itemKey: string) => void;
+    deleteHiddenTab: (itemKey: string) => void;
+    setCurrentTabElement: (tab: HTMLElement | null) => void;
+    scrollToTab: (element: HTMLElement | null) => void;
+    size?: TabsSizeType;
+    iconOnly?: boolean;
+    styles?: {
+        wrapper?: (theme: Theme) => Interpolation;
+        iconWrapper?: (theme: Theme) => Interpolation;
+        labelWrapper?: (theme: Theme) => Interpolation;
+        childrenWrapper?: (theme: Theme) => Interpolation;
+    };
+    onChange?: (activeKey: string) => void;
+    onTabClick?: (activeKey: string, event: MouseEvent) => void;
+}

package/dist/components/Tabs/forStories/items.d.ts

@@ -0,0 +1,50 @@
+export declare const baseItems: {
+    key: string;
+    label: string;
+    children: string;
+}[];
+export declare const disabledItems: ({
+    key: string;
+    label: string;
+    disabled?: undefined;
+} | {
+    key: string;
+    label: string;
+    disabled: boolean;
+})[];
+export declare const iconItems: ({
+    key: string;
+    label: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    disabled?: undefined;
+} | {
+    key: string;
+    label: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    disabled: boolean;
+})[];
+export declare const iconOnlyItems: {
+    key: string;
+    label: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+}[];
+export declare const moreTabsItems: {
+    key: string;
+    label: string;
+}[];
+export declare const extraContentItems: {
+    key: string;
+    label: string;
+}[];
+export declare const sizeItems: {
+    key: string;
+    label: string;
+}[];
+export declare const sizeItemsIcon: {
+    key: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+}[];
+export declare const borderItems: {
+    key: string;
+    label: string;
+}[];

package/dist/components/Tabs/hooks/useMoreTabsController.d.ts

@@ -0,0 +1,17 @@
+import { MouseEvent } from 'react';
+import { TabItem } from '../components/TabItem/TabItem.types';
+import { ItemType, MenuItem } from 'components/Dropdown/Dropdown.types';
+export declare const useMoreTabsController: (items: TabItem[], currentActiveKey: string | undefined, currentTabElement: HTMLElement | null, onTabClick: ((activeKey: string, event: MouseEvent) => void) | undefined, onChange: ((activeKey: string) => void) | undefined, changeActiveKey: (key: string) => void) => {
+    tabsRef: import('react').MutableRefObject<HTMLDivElement | null>;
+    dropdownMenu: {
+        items: MenuItem[];
+        onClick: (props: {
+            item: ItemType;
+            key: string;
+            e: MouseEvent;
+        }) => void;
+    };
+    addHiddenTab: (itemKey: string) => void;
+    deleteHiddenTab: (itemKey: string) => void;
+    scrollToTab: (element: HTMLElement | null) => void;
+};