@inntechcorp/it-design 3.1.22 → 3.1.24

package/dist/index.cjs.js

@@ -4856,6 +4856,16 @@
 
   height: ${e=>e.$height?e.$height+"px":"75px"};
 
+  &.itd-tabs-scroll ul {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
 `,Vf=l.div`
 
   font-size: 14px;
@@ -5041,7 +5051,7 @@
       color: inherit;
     }
   }
-`,Yf=({tabs:e=[],activeTabKey:o="",className:i="",variant:s="default",height:l,onTabChange:d})=>{const{t:c}=t.useTranslation("itd"),[u,p]=n.useState(o),[f,h]=n.useState([]),[g,m]=n.useState(!1),b=n.useRef(null),x=n.useRef(null);n.useEffect(()=>{u!==o&&p(o)},[o]),n.useEffect(()=>{const e=b.current,t=x.current;if(!e||!t)return;const r=()=>{const r=t.querySelectorAll("li.tab-item"),n=t.querySelector(".more-menu-wrapper"),o=n?.querySelector("button");if(!r.length||!n||!o)return;r.forEach(e=>{e.classList.remove("--hidden")}),n.classList.remove("--hidden");let i=0;r.forEach(e=>{i+=e.offsetWidth+30}),i+=o.offsetWidth;const a=e.parentElement;let s=e.offsetWidth;if(a){const t=window.getComputedStyle(a);if("flex"===t.display){let r=0;Array.from(a.children).forEach(t=>{t!==e&&(r+=t.offsetWidth)});const n=parseFloat(t.paddingLeft)||0,o=parseFloat(t.paddingRight)||0;s=a.offsetWidth-r-n-o}}let l=o.offsetWidth;const d=[];let c=!1;r.forEach((e,t)=>{const r=e,n=r.offsetWidth+30;c?(r.classList.add("--hidden"),d.push(t)):s>=l+n?l+=n:(c=!0,r.classList.add("--hidden"),d.push(t))}),0===d.length&&n.classList.add("--hidden"),h(d)},n=setTimeout(r,100),o=new ResizeObserver(()=>{r()});return o.observe(e),e.parentElement&&o.observe(e.parentElement),window.addEventListener("resize",r),()=>{clearTimeout(n),o.disconnect(),window.removeEventListener("resize",r)}},[e]);const v=(t,r)=>(()=>{let t=!1;return e.map(e=>{e.link&&(t=!0)}),t})()?"":u?u===t?"active":"":o&&0===r?"active":"",y=e=>{p(e),d&&d(e)},w=(e,t)=>r.jsx("a",{className:v(e.key,t),onClick:()=>y(e.key),children:r.jsx("span",{children:e.tab})}),A=(e,t)=>r.jsx(a.NavLink,{className:v(e.key,t),onClick:()=>y(e.key),to:e.link?e.link:"",children:r.jsx("span",{children:e.tab})});return r.jsxs(Bf,{ref:b,$height:l,className:`itd-tabs ${i||""}`,children:[r.jsx(Vf,{$isBold:"bold"===s,children:r.jsxs("ul",{ref:x,children:[e.map((e,t)=>r.jsx("li",{className:"tab-item",children:e.link?A(e,t):w(e,t)},e.key)),r.jsxs(Uf,{className:"more-menu-wrapper --hidden",onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),children:[r.jsxs(Gf,{$isBold:"bold"===s,className:g?"--open":"",children:[r.jsx("span",{children:c("tabs.more")}),r.jsx(()=>r.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"currentColor",children:r.jsx("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),{})]}),g&&f.length>0&&r.jsx(Wf,{children:e.map((e,t)=>((e,t)=>{const n=`dropdown-item ${v(e.key,t)} ${f.includes(t)?"":"--hidden"}`.trim();return e.link?r.jsx(a.NavLink,{className:n,onClick:()=>y(e.key),to:e.link,children:r.jsx("span",{children:e.tab})},e.key):r.jsx("a",{className:n,onClick:()=>y(e.key),children:r.jsx("span",{children:e.tab})},e.key)})(e,t))})]})]})}),(()=>{const t=e.filter(e=>e.key===u)[0];if(t&&t.children)return r.jsx(Hf,{className:"itd-content-body",children:t.children})})()]})},qf=l.div`
+`,Yf=({tabs:e=[],activeTabKey:o="",className:i="",variant:s="default",height:l,overflow:d=!0,onTabChange:c})=>{const{t:u}=t.useTranslation("itd"),[p,f]=n.useState(o),[h,g]=n.useState([]),[m,b]=n.useState(!1),x=n.useRef(null),v=n.useRef(null);n.useEffect(()=>{p!==o&&f(o)},[o]),n.useEffect(()=>{const e=v.current;if(!d)return e&&e.querySelectorAll("li.tab-item.--hidden").forEach(e=>{e.classList.remove("--hidden")}),void g([]);const t=x.current;if(!t||!e)return;const r=()=>{const r=e.querySelectorAll("li.tab-item"),n=e.querySelector(".more-menu-wrapper"),o=n?.querySelector("button");if(!r.length||!n||!o)return;r.forEach(e=>{e.classList.remove("--hidden")}),n.classList.remove("--hidden");let i=0;r.forEach(e=>{i+=e.offsetWidth+30}),i+=o.offsetWidth;const a=t.parentElement;let s=t.offsetWidth;if(a){const e=window.getComputedStyle(a);if("flex"===e.display){let r=0;Array.from(a.children).forEach(e=>{e!==t&&(r+=e.offsetWidth)});const n=parseFloat(e.paddingLeft)||0,o=parseFloat(e.paddingRight)||0;s=a.offsetWidth-r-n-o}}let l=o.offsetWidth;const d=[];let c=!1;r.forEach((e,t)=>{const r=e,n=r.offsetWidth+30;c?(r.classList.add("--hidden"),d.push(t)):s>=l+n?l+=n:(c=!0,r.classList.add("--hidden"),d.push(t))}),0===d.length&&n.classList.add("--hidden"),g(d)},n=setTimeout(r,100),o=new ResizeObserver(()=>{r()});return o.observe(t),t.parentElement&&o.observe(t.parentElement),window.addEventListener("resize",r),()=>{clearTimeout(n),o.disconnect(),window.removeEventListener("resize",r)}},[e,d]);const y=(t,r)=>(()=>{let t=!1;return e.map(e=>{e.link&&(t=!0)}),t})()?"":p?p===t?"active":"":o&&0===r?"active":"",w=e=>{f(e),c&&c(e)},A=(e,t)=>r.jsx("a",{className:y(e.key,t),onClick:()=>w(e.key),children:r.jsx("span",{children:e.tab})}),k=(e,t)=>r.jsx(a.NavLink,{className:y(e.key,t),onClick:()=>w(e.key),to:e.link?e.link:"",children:r.jsx("span",{children:e.tab})});return r.jsxs(Bf,{ref:x,$height:l,className:`itd-tabs${d?"":" itd-tabs-scroll"} ${i||""}`.trim(),children:[r.jsx(Vf,{$isBold:"bold"===s,children:r.jsxs("ul",{ref:v,children:[e.map((e,t)=>r.jsx("li",{className:"tab-item",children:e.link?k(e,t):A(e,t)},e.key)),d&&r.jsxs(Uf,{className:"more-menu-wrapper --hidden",onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),children:[r.jsxs(Gf,{$isBold:"bold"===s,className:m?"--open":"",children:[r.jsx("span",{children:u("tabs.more")}),r.jsx(()=>r.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"currentColor",children:r.jsx("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),{})]}),m&&h.length>0&&r.jsx(Wf,{children:e.map((e,t)=>((e,t)=>{const n=`dropdown-item ${y(e.key,t)} ${h.includes(t)?"":"--hidden"}`.trim();return e.link?r.jsx(a.NavLink,{className:n,onClick:()=>w(e.key),to:e.link,children:r.jsx("span",{children:e.tab})},e.key):r.jsx("a",{className:n,onClick:()=>w(e.key),children:r.jsx("span",{children:e.tab})},e.key)})(e,t))})]})]})}),(()=>{const t=e.filter(e=>e.key===p)[0];if(t&&t.children)return r.jsx(Hf,{className:"itd-content-body",children:t.children})})()]})},qf=l.div`
 
   position: relative;
   width: 100%;

package/dist/index.d.ts

@@ -817,7 +817,7 @@ type TinyScrollbarProps = {
 };
 declare function TinyScrollbar({ className, children, style }: TinyScrollbarProps): react_jsx_runtime.JSX.Element;
 
-declare const Tabs: ({ tabs, activeTabKey, className, variant, height, onTabChange }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ tabs, activeTabKey, className, variant, height, overflow, onTabChange }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 declare const Card: ({ title, titleSeparator, extra, tabs, onTabChange, minWidth, minHeight, children, activeTabKey, updating, contentPadding, }: CardProps) => react_jsx_runtime.JSX.Element;
 
@@ -1583,6 +1583,7 @@ type TabsProps = {
     onTabChange?: (key: string) => void;
     variant?: "default" | "bold";
     height?: number;
+    overflow?: boolean;
     className?: string;
 };
 

package/dist/index.esm.js

@@ -4856,6 +4856,16 @@ import e from"i18next";import{useTranslation as t,initReactI18next as r}from"rea
 
   height: ${e=>e.$height?e.$height+"px":"75px"};
 
+  &.itd-tabs-scroll ul {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
 `,tg=M.div`
 
   font-size: 14px;
@@ -5041,7 +5051,7 @@ import e from"i18next";import{useTranslation as t,initReactI18next as r}from"rea
       color: inherit;
     }
   }
-`,ag=({tabs:e=[],activeTabKey:r="",className:i="",variant:a="default",height:l,onTabChange:u})=>{const{t:p}=t("itd"),[h,f]=s(r),[g,m]=s([]),[b,v]=s(!1),x=c(null),y=c(null);d(()=>{h!==r&&f(r)},[r]),d(()=>{const e=x.current,t=y.current;if(!e||!t)return;const r=()=>{const r=t.querySelectorAll("li.tab-item"),n=t.querySelector(".more-menu-wrapper"),i=n?.querySelector("button");if(!r.length||!n||!i)return;r.forEach(e=>{e.classList.remove("--hidden")}),n.classList.remove("--hidden");let o=0;r.forEach(e=>{o+=e.offsetWidth+30}),o+=i.offsetWidth;const a=e.parentElement;let l=e.offsetWidth;if(a){const t=window.getComputedStyle(a);if("flex"===t.display){let r=0;Array.from(a.children).forEach(t=>{t!==e&&(r+=t.offsetWidth)});const n=parseFloat(t.paddingLeft)||0,i=parseFloat(t.paddingRight)||0;l=a.offsetWidth-r-n-i}}let s=i.offsetWidth;const d=[];let c=!1;r.forEach((e,t)=>{const r=e,n=r.offsetWidth+30;c?(r.classList.add("--hidden"),d.push(t)):l>=s+n?s+=n:(c=!0,r.classList.add("--hidden"),d.push(t))}),0===d.length&&n.classList.add("--hidden"),m(d)},n=setTimeout(r,100),i=new ResizeObserver(()=>{r()});return i.observe(e),e.parentElement&&i.observe(e.parentElement),window.addEventListener("resize",r),()=>{clearTimeout(n),i.disconnect(),window.removeEventListener("resize",r)}},[e]);const w=(t,n)=>(()=>{let t=!1;return e.map(e=>{e.link&&(t=!0)}),t})()?"":h?h===t?"active":"":r&&0===n?"active":"",A=e=>{f(e),u&&u(e)},k=(e,t)=>n("a",{className:w(e.key,t),onClick:()=>A(e.key),children:n("span",{children:e.tab})}),_=(e,t)=>n(F,{className:w(e.key,t),onClick:()=>A(e.key),to:e.link?e.link:"",children:n("span",{children:e.tab})});return o(eg,{ref:x,$height:l,className:`itd-tabs ${i||""}`,children:[n(tg,{$isBold:"bold"===a,children:o("ul",{ref:y,children:[e.map((e,t)=>n("li",{className:"tab-item",children:e.link?_(e,t):k(e,t)},e.key)),o(ng,{className:"more-menu-wrapper --hidden",onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),children:[o(ig,{$isBold:"bold"===a,className:b?"--open":"",children:[n("span",{children:p("tabs.more")}),n(()=>n("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"currentColor",children:n("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),{})]}),b&&g.length>0&&n(og,{children:e.map((e,t)=>((e,t)=>{const r=`dropdown-item ${w(e.key,t)} ${g.includes(t)?"":"--hidden"}`.trim();return e.link?n(F,{className:r,onClick:()=>A(e.key),to:e.link,children:n("span",{children:e.tab})},e.key):n("a",{className:r,onClick:()=>A(e.key),children:n("span",{children:e.tab})},e.key)})(e,t))})]})]})}),(()=>{const t=e.filter(e=>e.key===h)[0];if(t&&t.children)return n(rg,{className:"itd-content-body",children:t.children})})()]})},lg=M.div`
+`,ag=({tabs:e=[],activeTabKey:r="",className:i="",variant:a="default",height:l,overflow:u=!0,onTabChange:p})=>{const{t:h}=t("itd"),[f,g]=s(r),[m,b]=s([]),[v,x]=s(!1),y=c(null),w=c(null);d(()=>{f!==r&&g(r)},[r]),d(()=>{const e=w.current;if(!u)return e&&e.querySelectorAll("li.tab-item.--hidden").forEach(e=>{e.classList.remove("--hidden")}),void b([]);const t=y.current;if(!t||!e)return;const r=()=>{const r=e.querySelectorAll("li.tab-item"),n=e.querySelector(".more-menu-wrapper"),i=n?.querySelector("button");if(!r.length||!n||!i)return;r.forEach(e=>{e.classList.remove("--hidden")}),n.classList.remove("--hidden");let o=0;r.forEach(e=>{o+=e.offsetWidth+30}),o+=i.offsetWidth;const a=t.parentElement;let l=t.offsetWidth;if(a){const e=window.getComputedStyle(a);if("flex"===e.display){let r=0;Array.from(a.children).forEach(e=>{e!==t&&(r+=e.offsetWidth)});const n=parseFloat(e.paddingLeft)||0,i=parseFloat(e.paddingRight)||0;l=a.offsetWidth-r-n-i}}let s=i.offsetWidth;const d=[];let c=!1;r.forEach((e,t)=>{const r=e,n=r.offsetWidth+30;c?(r.classList.add("--hidden"),d.push(t)):l>=s+n?s+=n:(c=!0,r.classList.add("--hidden"),d.push(t))}),0===d.length&&n.classList.add("--hidden"),b(d)},n=setTimeout(r,100),i=new ResizeObserver(()=>{r()});return i.observe(t),t.parentElement&&i.observe(t.parentElement),window.addEventListener("resize",r),()=>{clearTimeout(n),i.disconnect(),window.removeEventListener("resize",r)}},[e,u]);const A=(t,n)=>(()=>{let t=!1;return e.map(e=>{e.link&&(t=!0)}),t})()?"":f?f===t?"active":"":r&&0===n?"active":"",k=e=>{g(e),p&&p(e)},_=(e,t)=>n("a",{className:A(e.key,t),onClick:()=>k(e.key),children:n("span",{children:e.tab})}),S=(e,t)=>n(F,{className:A(e.key,t),onClick:()=>k(e.key),to:e.link?e.link:"",children:n("span",{children:e.tab})});return o(eg,{ref:y,$height:l,className:`itd-tabs${u?"":" itd-tabs-scroll"} ${i||""}`.trim(),children:[n(tg,{$isBold:"bold"===a,children:o("ul",{ref:w,children:[e.map((e,t)=>n("li",{className:"tab-item",children:e.link?S(e,t):_(e,t)},e.key)),u&&o(ng,{className:"more-menu-wrapper --hidden",onMouseEnter:()=>x(!0),onMouseLeave:()=>x(!1),children:[o(ig,{$isBold:"bold"===a,className:v?"--open":"",children:[n("span",{children:h("tabs.more")}),n(()=>n("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"currentColor",children:n("path",{d:"M2.5 4.5L6 8L9.5 4.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),{})]}),v&&m.length>0&&n(og,{children:e.map((e,t)=>((e,t)=>{const r=`dropdown-item ${A(e.key,t)} ${m.includes(t)?"":"--hidden"}`.trim();return e.link?n(F,{className:r,onClick:()=>k(e.key),to:e.link,children:n("span",{children:e.tab})},e.key):n("a",{className:r,onClick:()=>k(e.key),children:n("span",{children:e.tab})},e.key)})(e,t))})]})]})}),(()=>{const t=e.filter(e=>e.key===f)[0];if(t&&t.children)return n(rg,{className:"itd-content-body",children:t.children})})()]})},lg=M.div`
 
   position: relative;
   width: 100%;

package/dist/stories/Tabs.stories.d.ts

@@ -6,7 +6,12 @@ declare const meta: {
         layout: string;
     };
     tags: string[];
-    argTypes: {};
+    argTypes: {
+        overflow: {
+            control: "boolean";
+            description: string;
+        };
+    };
     args: {
         onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
@@ -16,3 +21,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Bold: Story;
 export declare const WithLink: Story;
+export declare const NoOverflow: Story;

package/dist/tabs/index.d.ts

@@ -1,3 +1,3 @@
 import { TabsProps } from "../index";
-declare const Tabs: ({ tabs, activeTabKey, className, variant, height, onTabChange }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ tabs, activeTabKey, className, variant, height, overflow, onTabChange }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/types/TabsProps.d.ts

@@ -11,5 +11,6 @@ export type TabsProps = {
     onTabChange?: (key: string) => void;
     variant?: "default" | "bold";
     height?: number;
+    overflow?: boolean;
     className?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inntechcorp/it-design",
-  "version": "3.1.22",
+  "version": "3.1.24",
   "description": "All in one Design library for web applications.",
   "author": "Inn.Tech",
   "license": "ISC",