react-overflow-tabs/dist/index.js

A lightweight React hook for responsive tab navigation with automatic overflow handling. Works with any UI framework (Tailwind, Bootstrap, MUI, custom CSS).

"use strict";var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)u(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!K.call(e,r)&&r!==o&&u(e,r,{get:()=>t[r],enumerable:!(a=E(t,r))||a.enumerable});return e};var z=e=>x(u({},"__esModule",{value:!0}),e);var M={};h(M,{useOverflowTabs:()=>w});module.exports=z(M);var l=require("react");var A=e=>e?typeof e=="object"&&"current"in e?e.current:e:null,y=A;var H=e=>{let t=e!=null?e:"[data-overflow-key]";return t.startsWith("[")&&t.endsWith("]")?t.slice(1,-1):t},p=H;var L=e=>{let[t,o]=(0,l.useState)([]),[a,r]=(0,l.useState)([]),[g,b]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{let c=y(e.container);if(!c)return;let m=p(e.tabSelector),v=Array.from(c.querySelectorAll(`[${m}]`));if(o(v.map(f=>f.getAttribute(m))),e.disabled==!0){r([]),b(!1);return}let O=new Set,i=new Set,T=new IntersectionObserver(f=>{let d=!1;for(let n of f){let s=n.target.getAttribute(m);if(!s)continue;O.add(s);let S=i.size;n.intersectionRatio<1?i.add(s):i.delete(s),i.size!=S&&(d=!0)}if(d){let n=Array.from(i);r(n.reverse()),o(Array.from(O).filter(s=>!n.includes(s))),b(n.length>0)}},{root:c,threshold:.999});return v.forEach(f=>T.observe(f)),()=>{T.disconnect()}},[e.container,e.tabSelector,e.disabled]),{visibleKeys:t,overflowKeys:a,isOverflowing:g}},w=L;0&&(module.exports={useOverflowTabs});