@infomaximum/ui-kit 0.17.2 → 0.17.3

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

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 import { TabItem } from '../components/TabItem/TabItem.types';
 import { DropdownItemKeyType, ItemType, MenuItem } from 'components/Dropdown/Dropdown.types';
 export declare const useMoreTabsController: (items: TabItem[], currentActiveKey: DropdownItemKeyType | undefined, currentTabElement: HTMLElement | null, onTabClick: ((activeKey: DropdownItemKeyType, event: MouseEvent) => void) | undefined, onChange: ((activeKey: DropdownItemKeyType) => void) | undefined, changeActiveKey: (key: DropdownItemKeyType) => void) => {
-    tabsRef: import('react').MutableRefObject<HTMLDivElement | null>;
+    tabsRef: import('react').RefObject<HTMLDivElement>;
     dropdownMenu: {
         items: MenuItem[];
         onClick: (props: {
@@ -14,4 +14,7 @@ export declare const useMoreTabsController: (items: TabItem[], currentActiveKey:
     addHiddenTab: (itemKey: DropdownItemKeyType) => void;
     deleteHiddenTab: (itemKey: DropdownItemKeyType) => void;
     scrollToTab: (element: HTMLElement | null) => void;
+    updateHiddenTabs: () => void;
+    hasHiddenTabs: boolean;
+    tabItemsRefsMap: Map<DropdownItemKeyType, HTMLElement>;
 };

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

@@ -1,18 +1,46 @@
-import { useState, useRef, useCallback, useMemo } from "react";
+import { useState, useRef, useCallback, useLayoutEffect, useMemo } from "react";
 import { isMenuItem } from "../../Dropdown/Dropdown.types.js";
 import { isFunction } from "lodash-es";
+import { useStatic } from "../../../hooks/useStatic/useStatic.js";
+import { getIntersectionRatio, intersectionThreshold } from "../Tabs.utils.js";
 const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTabClick, onChange, changeActiveKey) => {
-  const [hiddenTabs, setHiddenTabs] = useState([]);
+  const [hiddenTabs, setHiddenTabs] = useState(() => /* @__PURE__ */ new Set());
   const tabsRef = useRef(null);
+  const tabItemsRefsMap = useStatic(() => /* @__PURE__ */ new Map());
+  const updateHiddenTabs = useCallback(() => {
+    const tabs = tabsRef.current;
+    if (!tabs) {
+      return;
+    }
+    const tabsRect = tabs.getBoundingClientRect();
+    const updatedHiddenTabs = /* @__PURE__ */ new Set();
+    tabItemsRefsMap.forEach((tabItem, tabItemKey) => {
+      const tabItemRect = tabItem.getBoundingClientRect();
+      const intersectionRatio = getIntersectionRatio(tabItemRect, tabsRect);
+      if (intersectionRatio < intersectionThreshold) {
+        updatedHiddenTabs.add(tabItemKey);
+      }
+    });
+    if (updatedHiddenTabs.size) {
+      setHiddenTabs(updatedHiddenTabs);
+    }
+  }, [tabItemsRefsMap]);
+  useLayoutEffect(() => {
+    updateHiddenTabs();
+  }, [updateHiddenTabs]);
   const addHiddenTab = useCallback((itemKey) => {
-    setHiddenTabs((prev) => [...prev, itemKey]);
+    setHiddenTabs((prev) => new Set(prev).add(itemKey));
   }, []);
   const deleteHiddenTab = useCallback((itemKey) => {
-    setHiddenTabs((prev) => prev.filter((item) => item !== itemKey));
+    setHiddenTabs((prev) => {
+      const next = new Set(prev);
+      next.delete(itemKey);
+      return next;
+    });
   }, []);
   const dropdownItems = useMemo(() => {
     return items.reduce((acc, item) => {
-      if (!hiddenTabs.includes(item.key)) {
+      if (!hiddenTabs.has(item.key)) {
         return acc;
       }
       const dropdownItem = {
@@ -61,7 +89,10 @@ const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTab
     dropdownMenu,
     addHiddenTab,
     deleteHiddenTab,
-    scrollToTab
+    scrollToTab,
+    updateHiddenTabs,
+    hasHiddenTabs: Boolean(hiddenTabs.size),
+    tabItemsRefsMap
   };
 };
 export {

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

@@ -1,8 +1,7 @@
 import { TabItem } from '../components/TabItem/TabItem.types';
 import { DragEndEvent } from '@dnd-kit/core';
-import { DropdownItemKeyType } from 'components/Dropdown/Dropdown.types';
 export declare const useTabsDndController: (items: TabItem[], draggable: boolean) => {
-    tabsOrder: DropdownItemKeyType[];
+    tabsOrder: import('../../Dropdown/Dropdown.types').DropdownItemKeyType[];
     isDragging: boolean;
     dndEvents: {
         onDragStart: () => void;

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

@@ -2,13 +2,16 @@ import { useState, useRef, useEffect, useCallback } from "react";
 import { arrayMove } from "@dnd-kit/sortable";
 import { getTabKeysWithoutOrdering, getOrderedTabKeys } from "../Tabs.utils.js";
 const useTabsDndController = (items, draggable) => {
-  const [tabsOrder, setTabsOrder] = useState([]);
+  const [tabsOrder, setTabsOrder] = useState(() => getTabKeysWithoutOrdering(items));
   const [isDragging, setIsDragging] = useState(false);
-  const isInitialMount = useRef(true);
+  const isInitialMountRef = useRef(true);
   useEffect(() => {
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
+    }
     const newTabKeys = getTabKeysWithoutOrdering(items);
-    if (!draggable || isInitialMount.current) {
-      isInitialMount.current = false;
+    if (!draggable) {
       setTabsOrder(newTabKeys);
       return;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",