@infomaximum/ui-kit 0.10.1 → 0.11.0

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+XG4gICAgICAgICl9XG4gICAgICAgIHt3aXRoQ29udGVudCAmJlxuICAgICAgICAgIGNyZWF0ZVBvcnRhbChcbiAgICAgICAgICAgIDxkaXYgY3NzPXtbdGFiSXRlbVN0eWxlLmNoaWxkcmVuV3JhcHBlcigpLCBzdHlsZXM/LmNoaWxkcmVuV3JhcHBlcj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L2Rpdj4sXG4gICAgICAgICAgICBjb250ZW50V3JhcHBlclxuICAgICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], 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+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIoKSwgc3R5bGVzPy5jaGlsZHJlbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9kaXY+LFxuICAgICAgICAgICAgY29udGVudFdyYXBwZXJcbiAgICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], 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+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIoKSwgc3R5bGVzPy5jaGlsZHJlbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9kaXY+LFxuICAgICAgICAgICAgY29udGVudFdyYXBwZXJcbiAgICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: label }),
+    withContent && createPortal(/* @__PURE__ */ jsx("div", { css: [tabItemStyle.childrenWrapper(), (_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+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgICB7d2l0aENvbnRlbnQgJiZcbiAgICAgICAgICBjcmVhdGVQb3J0YWwoXG4gICAgICAgICAgICA8ZGl2IGNzcz17W3RhYkl0ZW1TdHlsZS5jaGlsZHJlbldyYXBwZXIoKSwgc3R5bGVzPy5jaGlsZHJlbldyYXBwZXI/Lih0aGVtZSldfT5cbiAgICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgPC9kaXY+LFxuICAgICAgICAgICAgY29udGVudFdyYXBwZXJcbiAgICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children }), contentWrapper)
+  ] });
+});
+export {
+  TabItem
+};

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

@@ -0,0 +1,38 @@
+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: () => {
+        readonly padding: "12px 0";
+        readonly visibility: "hidden" | "visible";
+        readonly position: "absolute" | "relative";
+    };
+};

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

@@ -0,0 +1,67 @@
+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: () => ({
+      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;
+};

package/dist/components/Tabs/hooks/useMoreTabsController.js

@@ -0,0 +1,68 @@
+import { useState, useRef, useCallback, useMemo } from "react";
+import { isMenuItem } from "../../Dropdown/Dropdown.types.js";
+const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTabClick, onChange, changeActiveKey) => {
+  const [hiddenTabs, setHiddenTabs] = useState([]);
+  const tabsRef = useRef(null);
+  const addHiddenTab = useCallback((itemKey) => {
+    setHiddenTabs((prev) => [...prev, itemKey]);
+  }, []);
+  const deleteHiddenTab = useCallback((itemKey) => {
+    setHiddenTabs((prev) => prev.filter((item) => item !== itemKey));
+  }, []);
+  const dropdownItems = useMemo(() => {
+    return items.reduce((acc, item) => {
+      if (!hiddenTabs.includes(item.key)) {
+        return acc;
+      }
+      const dropdownItem = {
+        key: item.key,
+        icon: item.icon,
+        label: item.label,
+        disabled: item.disabled
+      };
+      return [...acc, dropdownItem];
+    }, []);
+  }, [hiddenTabs, items]);
+  const scrollToTab = useCallback((element) => {
+    if (tabsRef.current && element) {
+      const leftPos = element.offsetLeft + element.offsetWidth < tabsRef.current.offsetWidth ? element.offsetLeft : element.offsetLeft - tabsRef.current.offsetWidth + element.offsetWidth;
+      tabsRef.current.scrollTo({
+        left: leftPos
+      });
+    }
+  }, []);
+  const handleDropdownItemClick = useCallback((props) => {
+    const {
+      item,
+      key,
+      e
+    } = props;
+    const selected = key === currentActiveKey;
+    onTabClick == null ? void 0 : onTabClick(key, e);
+    if (isMenuItem(item) && (item == null ? void 0 : item.disabled)) {
+      return;
+    }
+    if (selected) {
+      scrollToTab(currentTabElement);
+      return;
+    }
+    onChange == null ? void 0 : onChange(key);
+    changeActiveKey(key);
+  }, [changeActiveKey, currentActiveKey, currentTabElement, onChange, onTabClick, scrollToTab]);
+  const dropdownMenu = useMemo(() => {
+    return {
+      items: dropdownItems,
+      onClick: handleDropdownItemClick
+    };
+  }, [dropdownItems, handleDropdownItemClick]);
+  return {
+    tabsRef,
+    dropdownMenu,
+    addHiddenTab,
+    deleteHiddenTab,
+    scrollToTab
+  };
+};
+export {
+  useMoreTabsController
+};

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

@@ -0,0 +1,10 @@
+import { TabItem } from '../components/TabItem/TabItem.types';
+import { DragEndEvent } from '@dnd-kit/core';
+export declare const useTabsDndController: (items: TabItem[]) => {
+    tabsOrder: string[];
+    isDragging: boolean;
+    dndEvents: {
+        onDragStart: () => void;
+        onDragEnd: (e: DragEndEvent) => void;
+    };
+};

package/dist/components/Tabs/hooks/useTabsDndController.js

@@ -0,0 +1,36 @@
+import { useState, useCallback } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+const useTabsDndController = (items) => {
+  const [tabsOrder, setTabsOrder] = useState(items.map((item) => item.key));
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+  const handleDragEnd = useCallback((e) => {
+    const {
+      active,
+      over
+    } = e;
+    setIsDragging(false);
+    if (active.id === (over == null ? void 0 : over.id)) {
+      return;
+    }
+    setTabsOrder((prev) => {
+      const activeIndex = prev.findIndex((key) => key === active.id);
+      const overIndex = prev.findIndex((key) => key === (over == null ? void 0 : over.id));
+      return arrayMove(prev, activeIndex, overIndex);
+    });
+  }, []);
+  const dndEvents = {
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  };
+  return {
+    tabsOrder,
+    isDragging,
+    dndEvents
+  };
+};
+export {
+  useTabsDndController
+};

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.types';

package/dist/index.d.ts

@@ -33,7 +33,9 @@ export { Dropdown } from './components/Dropdown';
 export type { DropdownProps, DropdownMenu } from './components/Dropdown';
 export { type ProgressProps, Progress } from './components/Progress';
 export { Avatar } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar';
+export type { AvatarProps, AvatarColorType } from './components/Avatar';
+export { Tabs } from './components/Tabs';
+export type { TabsProps } from './components/Tabs';
 export { Tag } from './components/Tag';
 export type { TagProps, CheckableProps } from './components/Tag';
 export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvider';

package/dist/index.js

@@ -21,6 +21,7 @@ import { Upload } from "./components/Upload/Upload.js";
 import { Dropdown } from "./components/Dropdown/Dropdown.js";
 import { Progress } from "./components/Progress/Progress.js";
 import { Avatar } from "./components/Avatar/Avatar.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
 import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
@@ -44,6 +45,7 @@ export {
   Radio,
   Select,
   Switch,
+  Tabs,
   Tag,
   ThemeProvider,
   TimePicker,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,6 +34,9 @@
     "update-icons": "node scripts/updateIcons/updateIcons.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.0.0",
     "@floating-ui/react": "^0.27.6",
     "@infomaximum/icons": "^1.3.2",
@@ -42,13 +45,17 @@
     "rc-picker": "^4.11.3",
     "rc-util": "^5.44.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
     "dayjs": "^1.0.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^10",
+    "@dnd-kit/utilities": "^3"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.13.5",

package/dist/docComponents/Demonstration/Demonstration.d.ts

@@ -1,4 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { DemonstrationVerticalInnerProps } from './Demonstration.types';
-export declare const Demonstration: FC<PropsWithChildren>;
-export declare const DemonstrationVerticalInner: FC<DemonstrationVerticalInnerProps>;

package/dist/docComponents/Demonstration/Demonstration.styles.d.ts

@@ -1,9 +0,0 @@
-export declare const demonstrationStyle: {
-    padding: string;
-};
-export declare const demonstrationVerticalInnerStyle: {
-    readonly display: "inline-flex";
-    readonly flexDirection: "column";
-    readonly rowGap: 16;
-    readonly alignItems: "start";
-};

package/dist/docComponents/Demonstration/Demonstration.types.d.ts

@@ -1,5 +0,0 @@
-import { Interpolation } from '@emotion/react';
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export type DemonstrationVerticalInnerProps = PropsWithChildren & {
-    css?: Interpolation;
-} & Pick<HTMLAttributes<HTMLElement>, "className">;

package/dist/docComponents/Description/Description.d.ts

@@ -1,5 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-export declare const DescriptionComponent: FC<PropsWithChildren>;
-export declare const Description: FC<{
-    children?: import('react').ReactNode | undefined;
-}>;