@situaction/traq-ui-ste 1.2.7 → 1.2.8

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

@@ -3,21 +3,22 @@ import { FC, ReactNode } from 'react';
 export interface TabsProps {
     /** select the type of data text or icon that we put in tabs */
     type: 'text' | 'icon' | 'button';
-    /** Array of strings representing the labels of the tabs */
+    /** Array of strings or nodes representing the labels of the tabs */
     listItems: (string | ReactNode)[];
-    /** Index of the tab that should be active by default */
+    /** Active tab (controlled) */
+    activeTab?: number;
+    /** Index of the tab that should be active by default (uncontrolled) */
     defaultActiveTab?: number;
     /** Position Tabs */
     position?: 'center' | 'right' | 'left';
-    /** Callback function to handle tab selection, receiving the selected tab's label */
-    onTabSelect: (selectedItem: string | ReactNode) => void;
-    /** Full width*/
+    /** Callback on selection (label + index) */
+    onTabSelect: (selectedItem: string | ReactNode, index?: number) => void;
+    /** Full width */
     fullWidth?: boolean;
-    /** tabs disabled */
+    /** Disabled tabs indices */
     disabledTabs?: number[];
 }
 /**
- * Tabs component that allows tab navigation with text, icons, or buttons.
- * It includes a dynamic underline to show the active tab.
+ * Tabs with dynamic underline. Works controlled (activeTab) or uncontrolled (defaultActiveTab).
  */
 export declare const Tabs: FC<TabsProps>;

package/dist/components/tabs/Tabs.js

@@ -1,8 +1,8 @@
-import { jsxs as w, jsx as l } from "react/jsx-runtime";
-import { useState as f, useRef as u, useLayoutEffect as B } from "react";
-import { Button as p } from "../button/Button.js";
-import { IconButton as S } from "../icon-button/IconButton.js";
-import '../../styles/Tabs.css';const j = "_underline_6o3gh_70", e = {
+import { jsxs as j, jsx as s } from "react/jsx-runtime";
+import { useState as R, useRef as $, useEffect as u, useLayoutEffect as k } from "react";
+import { Button as q } from "../button/Button.js";
+import { IconButton as B } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const L = "_underline_6o3gh_70", n = {
   "tab-container": "_tab-container_6o3gh_30",
   "tab-container-button": "_tab-container-button_6o3gh_34",
   "tab-container-icon": "_tab-container-icon_6o3gh_39",
@@ -12,85 +12,114 @@ import '../../styles/Tabs.css';const j = "_underline_6o3gh_70", e = {
   "tab-full-width": "_tab-full-width_6o3gh_51",
   "selected-button": "_selected-button_6o3gh_57",
   "selected-text": "_selected-text_6o3gh_63",
-  underline: j,
+  underline: L,
   "flexHorizontal-center": "_flexHorizontal-center_6o3gh_78",
   "flexHorizontal-left": "_flexHorizontal-left_6o3gh_84",
   "flexHorizontal-right": "_flexHorizontal-right_6o3gh_90"
-}, q = ({
-  listItems: c,
-  type: o,
-  onTabSelect: h,
-  defaultActiveTab: g = 0,
+}, C = (o, r) => {
+  if (!Number.isFinite(o)) return 0;
+  const b = Math.max(0, r);
+  return Math.min(Math.max(o, 0), b);
+}, D = ({
+  listItems: o,
+  type: r,
+  onTabSelect: b,
+  activeTab: _,
+  defaultActiveTab: f = 0,
   position: m = "left",
-  fullWidth: x = !1,
-  disabledTabs: b = []
-  // ✅ par défaut vide
+  fullWidth: H = !1,
+  disabledTabs: g = []
 }) => {
-  const [s, v] = f(g), [z, $] = f({}), r = u(null), R = u(null), _ = u([]), d = (t) => {
-    b.includes(t) || (v(t), h(c[t]));
-  }, H = (t) => {
-    if (r.current && t) {
-      const n = t.getBoundingClientRect(), i = r.current.getBoundingClientRect();
-      $({
-        left: `${n.left - i.left}px`,
-        width: `${n.width}px`
-      });
+  const c = _ !== void 0, [N, x] = R(f), h = C(
+    c ? _ : N,
+    (o.length || 1) - 1
+  ), [A, E] = R({}), l = $(null), z = $([]), v = (t) => {
+    g.includes(t) || (c || x(t), b(o[t], t));
+  }, w = (t) => {
+    if (!l.current || !t || r === "button") return;
+    const e = l.current.getBoundingClientRect();
+    if (e.width === 0) {
+      requestAnimationFrame(() => w(t));
+      return;
     }
-  }, C = [
-    e[`flexHorizontal-${m}`],
-    o === "button" ? e["tab-items-button"] : e["tab-items"]
-  ].filter(Boolean).join(" ");
-  return B(() => {
-    const t = _.current[s];
-    t && requestAnimationFrame(() => {
-      H(t);
+    const i = t.getBoundingClientRect();
+    E({
+      left: `${i.left - e.left}px`,
+      width: `${i.width}px`
     });
-  }, [s, c.length]), /* @__PURE__ */ w(
+  }, a = () => {
+    const t = z.current[h] ?? null;
+    requestAnimationFrame(
+      () => requestAnimationFrame(() => w(t))
+    );
+  };
+  u(() => {
+    c && a();
+  }, [_]), k(() => {
+    a();
+  }, [h, m, o.length]), u(() => {
+    c || x(C(f, (o.length || 1) - 1));
+  }, [f, o.length, c]), u(() => {
+    var t, e;
+    (e = (t = document.fonts) == null ? void 0 : t.ready) == null || e.then(() => a());
+  }, []), u(() => {
+    const t = () => a();
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), u(() => {
+    if (!l.current) return;
+    const t = new ResizeObserver(() => a());
+    return t.observe(l.current), () => t.disconnect();
+  }, []);
+  const F = [
+    n[`flexHorizontal-${m}`],
+    r === "button" ? n["tab-items-button"] : n["tab-items"]
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ j(
     "div",
     {
-      className: `tab ${e["tab-container"]} ${e[`tab-container-${o}`]} ${x && e["tab-full-width"]}`,
-      ref: r,
+      className: `tab ${n["tab-container"]} ${n[`tab-container-${r}`]} ${H && n["tab-full-width"]}`,
+      ref: l,
       children: [
-        /* @__PURE__ */ l("div", { className: C, children: c.map((t, n) => {
-          const i = b.includes(n), a = n === s;
-          return /* @__PURE__ */ l(
+        /* @__PURE__ */ s("div", { className: F, children: o.map((t, e) => {
+          const i = g.includes(e), d = e === h;
+          return /* @__PURE__ */ s(
             "div",
             {
-              ref: (N) => _.current[n] = N,
+              ref: (S) => z.current[e] = S,
               className: `
-                ${o === "button" && a ? e["selected-button"] : ""}
-                ${i ? e["tab-disabled"] : ""}
+                ${r === "button" && d ? n["selected-button"] : ""}
+                ${i ? n["tab-disabled"] : ""}
               `,
-              children: o === "icon" ? /* @__PURE__ */ l(
-                S,
+              children: r === "icon" ? /* @__PURE__ */ s(
+                B,
                 {
                   mode: "icon",
                   size: "s",
-                  selected: a,
-                  onClick: () => d(n),
+                  selected: d,
+                  onClick: () => v(e),
                   disabled: i,
                   children: t
                 }
-              ) : /* @__PURE__ */ l("div", { className: a ? e["selected-text"] : void 0, children: /* @__PURE__ */ l(
-                p,
+              ) : /* @__PURE__ */ s("div", { className: d ? n["selected-text"] : void 0, children: /* @__PURE__ */ s(
+                q,
                 {
                   size: "s",
                   label: t,
-                  mode: o === "text" ? "text" : "ghost",
-                  selected: a,
-                  onClick: () => d(n),
+                  mode: r === "text" ? "text" : "ghost",
+                  selected: d,
+                  onClick: () => v(e),
                   disabled: i
                 }
               ) })
             },
-            n
+            e
           );
         }) }),
-        o !== "button" && /* @__PURE__ */ l("div", { ref: R, className: e.underline, style: z })
+        r !== "button" && /* @__PURE__ */ s("div", { className: n.underline, style: A })
       ]
     }
   );
 };
 export {
-  q as Tabs
+  D as Tabs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",