@situaction/traq-ui-ste 1.1.24 → 1.1.26

package/dist/components/menu/Menu.js

@@ -26,33 +26,33 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
   flexHorizontalBetween: Z,
   flexVertical: ee,
   flexVerticalBetweenCenter: oe
-}, fe = ({ menuItems: s = [], menuParams: d = [], shortLogo: m, logo: x, isOpen: h, defaultOpen: N = !1, selectedId: a }) => {
-  const [t, p] = c(N ?? !1), [g, B] = c(a ?? (s.length > 0 ? s[0].id : null)), V = M(null), [H, _] = c(!1), [I, C] = c(!1), [k, E] = c(null), [z, R] = c({}), L = M(null);
+}, fe = ({ menuItems: s = [], menuParams: r = [], shortLogo: x, logo: m, isOpen: h, defaultOpen: N = !1, selectedId: d }) => {
+  const [t, p] = c(N ?? !1), [g, B] = c(d ?? (s.length > 0 ? s[0].id : null)), I = M(null), [V, _] = c(!1), [H, C] = c(!1), [k, E] = c(null), [z, R] = c({}), L = M(null);
   $(() => {
-    console.log("menu selectionné : ", a), a != null && B(a);
-  }, [a]);
+    d != null && B(d);
+  }, [d]);
   const v = (o, i) => {
     if (o.stopPropagation(), B(i), s) {
-      const n = s.find((r) => r.id === i);
+      const n = s.find((a) => a.id === i);
       n == null || n.onClick();
     }
   }, S = () => {
     p(!t), _(!1);
   }, P = (o) => {
     var i;
-    if (d) {
-      const n = d.find((r) => r.id === o);
+    if (r) {
+      const n = r.find((a) => a.id === o);
       if (!n) return;
       if (n.content) {
-        const r = t ? "200px" : "40px";
-        E(n.content), R({ ...n.position, left: r }), C(!0);
+        const a = t ? "200px" : "40px";
+        E(n.content), R({ ...n.position, left: a }), C(!0);
       } else
         (i = n.onClick) == null || i.call(n);
     }
   };
   return $(() => {
     h && h(t);
-  }, [t]), /* @__PURE__ */ l("nav", { ref: V, children: /* @__PURE__ */ f("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
+  }, [t]), /* @__PURE__ */ l("nav", { ref: I, children: /* @__PURE__ */ f("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${t ? e.open : e.close}`, children: [
     /* @__PURE__ */ f("div", { className: e.fullWidth, children: [
       /* @__PURE__ */ l(
         "div",
@@ -60,7 +60,7 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
           className: `${e.flexHorizontalBetween} ${e.pointer} ${e.textEllipsis}`,
           onClick: () => S(),
           children: t ? /* @__PURE__ */ f("div", { className: e.fullImg, children: [
-            x && /* @__PURE__ */ l("img", { src: x, alt: "Logo situaction" }),
+            m && /* @__PURE__ */ l("img", { src: m, alt: "Logo situaction" }),
             /* @__PURE__ */ l(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(w, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
           ] }) : /* @__PURE__ */ l(
             "div",
@@ -69,7 +69,7 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
               onMouseEnter: () => _(!0),
               onMouseLeave: () => _(!1),
               onClick: () => p(!t),
-              children: H || !m ? /* @__PURE__ */ l(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(w, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: m, alt: "Logo situaction" })
+              children: V || !x ? /* @__PURE__ */ l(u, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(w, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: x, alt: "Logo situaction" })
             }
           )
         }
@@ -93,7 +93,7 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
       /* @__PURE__ */ l("div", { className: e.line })
     ] }),
     /* @__PURE__ */ f("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
-      d && d.map((o) => /* @__PURE__ */ l(
+      r && r.map((o) => /* @__PURE__ */ l(
         "div",
         {
           className: `${e.fullWidth} ${e.textEllipsis}`,
@@ -107,7 +107,7 @@ const y = "_fullHeight_o2xi7_15", O = "_fullWidth_o2xi7_18", j = "_open_o2xi7_21
         {
           ref: L,
           className: e.borderRadiusM,
-          open: I,
+          open: H,
           onClose: () => C(!1),
           position: z,
           children: k

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

@@ -11,6 +11,7 @@ export interface TabsProps {
     position?: 'center' | 'right' | 'left';
     /** Callback function to handle tab selection, receiving the selected tab's label */
     onTabSelect: (selectedItem: string | ReactNode) => void;
+    fullWidth?: boolean;
 }
 /**
  * Tabs component that allows tab navigation with text, icons, or buttons.

package/dist/components/tabs/Tabs.js

@@ -1,76 +1,80 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
-import { useState as m, useRef as _, useEffect as d, useLayoutEffect as C } from "react";
+import { jsxs as H, jsx as a } from "react/jsx-runtime";
+import { useState as u, useRef as s, useLayoutEffect as $ } from "react";
 import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
-import { Button as N } from "../button/Button.js";
-import { IconButton as $ } from "../icon-button/IconButton.js";
-const p = "_underline_12jm7_57", n = {
-  "tab-container": "_tab-container_12jm7_23",
-  "tab-container-button": "_tab-container-button_12jm7_27",
-  "tab-container-icon": "_tab-container-icon_12jm7_32",
-  "tab-container-text": "_tab-container-text_12jm7_32",
-  "tab-items": "_tab-items_12jm7_35",
-  "tab-items-button": "_tab-items-button_12jm7_39",
-  "selected-button": "_selected-button_12jm7_44",
-  "selected-text": "_selected-text_12jm7_50",
+import { Button as C } from "../button/Button.js";
+import { IconButton as N } from "../icon-button/IconButton.js";
+const p = "_underline_1twz4_63", n = {
+  "tab-container": "_tab-container_1twz4_23",
+  "tab-container-button": "_tab-container-button_1twz4_27",
+  "tab-container-icon": "_tab-container-icon_1twz4_32",
+  "tab-container-text": "_tab-container-text_1twz4_32",
+  "tab-items": "_tab-items_1twz4_35",
+  "tab-items-button": "_tab-items-button_1twz4_39",
+  "tab-full-width": "_tab-full-width_1twz4_44",
+  "selected-button": "_selected-button_1twz4_50",
+  "selected-text": "_selected-text_1twz4_56",
   underline: p,
-  "flexHorizontal-center": "_flexHorizontal-center_12jm7_65",
-  "flexHorizontal-left": "_flexHorizontal-left_12jm7_71",
-  "flexHorizontal-right": "_flexHorizontal-right_12jm7_77"
-}, E = ({ listItems: o, type: l, onTabSelect: x, defaultActiveTab: a = 0, position: h = "left" }) => {
-  const [r, b] = m(a), [j, g] = m({}), i = _(null), z = _(null), s = _(new Array(o.length).fill(null));
-  d(() => {
-    s.current = new Array(o.length).fill(null);
-  }, [o.length]);
-  const f = (t) => {
-    b(t), x(o[t]);
-  }, R = (t) => {
-    if (i.current && t) {
-      const e = t.getBoundingClientRect(), u = i.current.getBoundingClientRect();
-      g({
-        left: `${e.left - u.left}px`,
+  "flexHorizontal-center": "_flexHorizontal-center_1twz4_71",
+  "flexHorizontal-left": "_flexHorizontal-left_1twz4_77",
+  "flexHorizontal-right": "_flexHorizontal-right_1twz4_83"
+}, A = ({
+  listItems: i,
+  type: o,
+  onTabSelect: f,
+  defaultActiveTab: d = 0,
+  position: m = "left",
+  fullWidth: z = !1
+}) => {
+  const [l, w] = u(d), [x, h] = u({}), c = s(null), g = s(null), _ = s([]), b = (t) => {
+    w(t), f(i[t]);
+  }, v = (t) => {
+    if (c.current && t) {
+      const e = t.getBoundingClientRect(), r = c.current.getBoundingClientRect();
+      h({
+        left: `${e.left - r.left}px`,
         width: `${e.width}px`
       });
     }
-  }, H = [
-    n[`flexHorizontal-${h}`],
-    l === "button" ? n["tab-items-button"] : n["tab-items"]
+  }, R = [
+    n[`flexHorizontal-${m}`],
+    o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
-  return C(() => {
-    const t = s.current[r];
-    t && R(t);
-  }, [r, o.length]), d(() => {
-    b(a);
-  }, [a]), /* @__PURE__ */ v("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${l}`]}`, ref: i, children: [
-    /* @__PURE__ */ c("div", { className: H, children: o.map((t, e) => /* @__PURE__ */ c(
+  return $(() => {
+    const t = _.current[l];
+    t && requestAnimationFrame(() => {
+      v(t);
+    });
+  }, [l, i.length]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${z && n["tab-full-width"]}`, ref: c, children: [
+    /* @__PURE__ */ a("div", { className: R, children: i.map((t, e) => /* @__PURE__ */ a(
       "div",
       {
-        ref: (u) => s.current[e] = u,
-        className: l === "button" && e === r ? n["selected-button"] : "",
-        children: l === "icon" ? /* @__PURE__ */ c(
-          $,
+        ref: (r) => _.current[e] = r,
+        className: o === "button" && e === l ? n["selected-button"] : "",
+        children: o === "icon" ? /* @__PURE__ */ a(
+          N,
           {
             mode: "icon",
             size: "s",
-            selected: e === r,
-            onClick: () => f(e),
+            selected: e === l,
+            onClick: () => b(e),
             children: t
           }
-        ) : /* @__PURE__ */ c("div", { className: e === r ? n["selected-text"] : void 0, children: /* @__PURE__ */ c(
-          N,
+        ) : /* @__PURE__ */ a("div", { className: e === l ? n["selected-text"] : void 0, children: /* @__PURE__ */ a(
+          C,
           {
             size: "s",
             label: t,
-            mode: l === "text" ? "text" : "ghost",
-            selected: e === r,
-            onClick: () => f(e)
+            mode: o === "text" ? "text" : "ghost",
+            selected: e === l,
+            onClick: () => b(e)
           }
         ) })
       },
       e
     )) }),
-    l !== "button" && /* @__PURE__ */ c("div", { ref: z, className: n.underline, style: j })
+    o !== "button" && /* @__PURE__ */ a("div", { ref: g, className: n.underline, style: x })
   ] });
 };
 export {
-  E as Tabs
+  A as Tabs
 };

package/dist/styles/Tabs.css

@@ -1 +1 @@
-._tab-container_12jm7_23{position:relative;line-height:1.25rem}._tab-container-button_12jm7_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_12jm7_32,._tab-container-text_12jm7_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_12jm7_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_12jm7_39{gap:.25rem;padding:.125rem}._selected-button_12jm7_44{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._selected-text_12jm7_50>button{font-weight:600!important}._selected-text_12jm7_50>button:hover{background-color:transparent!important}._underline_12jm7_57{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_12jm7_65{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_12jm7_71{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_12jm7_77{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}
+._tab-container_1twz4_23{position:relative;line-height:1.25rem}._tab-container-button_1twz4_27{border-radius:.375rem;border:1px solid var(--tabs-button-border);background:var(--tabs-button-background)}._tab-container-icon_1twz4_32,._tab-container-text_1twz4_32{border-bottom:1px solid var(--tabs-line-border)}._tab-items_1twz4_35{gap:2.25rem;padding:.625rem .125rem}._tab-items-button_1twz4_39{gap:.25rem;padding:.125rem}._tab-full-width_1twz4_44{width:100%;display:flex;justify-content:center}._selected-button_1twz4_50{border:1px solid var(--button-tertiary-default-border);background:var(--tabs-button-background-button);border-radius:.25rem}._selected-text_1twz4_56>button{font-weight:600!important}._selected-text_1twz4_56>button:hover{background-color:transparent!important}._underline_1twz4_63{position:absolute;bottom:0;height:2px;background-color:var(--tabs-cell-active-border);transition:all .3s ease}._flexHorizontal-center_1twz4_71{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_1twz4_77{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_1twz4_83{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}

package/package.json

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