@situaction/traq-ui-ste 1.2.31 → 1.2.33

package/dist/components/select/Select.d.ts

@@ -4,7 +4,7 @@ import * as PhosphorIcons from "@phosphor-icons/react";
 export type SelectItem = {
     label?: string;
     icon?: keyof typeof PhosphorIcons | null;
-    sizeIcon?: number;
+    iconSize?: number;
     value: string;
 };
 export interface SelectProps {
@@ -40,10 +40,11 @@ export interface SelectProps {
     /** Enable a search input inside the select modal to filter options **/
     searchable?: boolean;
     fullWidth?: boolean;
+    iconSize?: number;
 }
 /**
  * Select component that allows users to choose an option from a list.
  * It supports three display modes: 'all' (icon + text), 'icon' (only icon), and 'text' (only text).
  * The selected value is displayed in a button, and a modal opens to show the list of options.
  */
-export declare const Select: ({ selected, size, listItem, modeDisplay, onSelect, positionOverride, placeholder, searchPlaceholder, autoCloseCondition, searchable, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ selected, size, listItem, modeDisplay, onSelect, positionOverride, placeholder, searchPlaceholder, autoCloseCondition, searchable, fullWidth, iconSize }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/Select.js

@@ -1,51 +1,52 @@
 import { jsxs as L, jsx as s } from "react/jsx-runtime";
 import { useState as y, useRef as v, useEffect as d } from "react";
 import { Button as W } from "../button/Button.js";
-import { Input as G } from "../input/Input.js";
-import { IconButton as H } from "../icon-button/IconButton.js";
+import { Input as H } from "../input/Input.js";
+import { IconButton as J } from "../icon-button/IconButton.js";
 import "../accordion/Accordion.js";
 import { Icon as _ } from "../icon/Icon.js";
-import { Modal as I } from "../modal/Modal.js";
+import { Modal as Q } from "../modal/Modal.js";
 import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
-const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_133eb_78", Y = "_selectList_133eb_82", Z = "_modal_133eb_91", O = "_itemLabel_133eb_98", ee = "_searchWrapper_133eb_103", te = "_noResults_133eb_109", f = {
-  selectContainer: J,
-  children: Q,
-  active: X,
-  selectList: Y,
-  modal: Z,
-  itemLabel: O,
-  searchWrapper: ee,
-  noResults: te
-}, me = ({
+const X = "_selectContainer_133eb_54", Y = "_children_133eb_61", Z = "_active_133eb_78", O = "_selectList_133eb_82", I = "_modal_133eb_91", ee = "_itemLabel_133eb_98", te = "_searchWrapper_133eb_103", ne = "_noResults_133eb_109", f = {
+  selectContainer: X,
+  children: Y,
+  active: Z,
+  selectList: O,
+  modal: I,
+  itemLabel: ee,
+  searchWrapper: te,
+  noResults: ne
+}, pe = ({
   selected: k,
   size: g = "m",
   listItem: h,
   modeDisplay: E = "all",
-  onSelect: B,
+  onSelect: z,
   positionOverride: b,
   placeholder: x = "Sélectionner",
   searchPlaceholder: U,
   autoCloseCondition: w,
   searchable: V = !1,
-  fullWidth: T = !1
+  fullWidth: S = !1,
+  iconSize: A = 20
 }) => {
-  const [t, l] = y(!1), [A, K] = y({
+  const [t, l] = y(!1), [F, B] = y({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [n, S] = y(k ?? null), [$, F] = y(""), u = v(null), z = v(null), N = v(null), P = v({}), j = v({}), p = v(null);
+  }), [n, T] = y(k ?? null), [K, M] = y(""), u = v(null), $ = v(null), N = v(null), P = v({}), j = v({}), p = v(null);
   d(() => {
-    S(k || null);
+    T(k || null);
   }, [k]), d(() => {
-    b && K(b);
+    b && B(b);
   }, [b]);
-  const M = (e) => {
-    S(e), l(!1), B && B(e);
-  }, q = () => {
+  const q = (e) => {
+    T(e), l(!1), z && z(e);
+  }, G = () => {
     const e = n == null ? void 0 : n.icon, r = (n == null ? void 0 : n.label) ?? x;
-    return E === "icon" && e ? /* @__PURE__ */ s(H, { ref: u, mode: "tertiary", size: g, onClick: () => l(!t), children: /* @__PURE__ */ s(_, { icon: n.icon }) }) : E === "text" ? /* @__PURE__ */ s(
+    return E === "icon" && e ? /* @__PURE__ */ s(J, { ref: u, mode: "tertiary", size: g, onClick: () => l(!t), children: /* @__PURE__ */ s(_, { size: A, icon: n.icon }) }) : E === "text" ? /* @__PURE__ */ s(
       W,
       {
         ref: u,
@@ -53,7 +54,7 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
         label: n ? r : x,
         childrenRight: /* @__PURE__ */ s(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         size: g,
-        fullWidth: T,
+        fullWidth: S,
         onClick: () => l(!t),
         "aria-expanded": t,
         "aria-haspopup": "listbox"
@@ -65,7 +66,7 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
         mode: "tertiary",
         label: n ? r : x,
         size: g,
-        fullWidth: T,
+        fullWidth: S,
         childrenLeft: e && /* @__PURE__ */ s(_, { icon: n.icon }),
         childrenRight: /* @__PURE__ */ s(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         onClick: () => l(!t),
@@ -77,7 +78,7 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
       {
         ref: u,
         mode: "tertiary",
-        fullWidth: T,
+        fullWidth: S,
         label: x ?? "Sélectionner",
         size: g,
         onClick: () => l(!t),
@@ -86,7 +87,7 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
       }
     );
   }, D = h.filter(
-    (e) => String(e.label ?? "").toLowerCase().includes($.toLowerCase())
+    (e) => String(e.label ?? "").toLowerCase().includes(K.toLowerCase())
   ), [C, R] = y("");
   return d(() => {
     if (t) {
@@ -146,12 +147,12 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
   }, [t, h]), d(() => {
     if (t && u.current) {
       const e = u.current.getBoundingClientRect().height;
-      K(b || { top: `${e + 6}px`, left: "0px" });
+      B(b || { top: `${e + 6}px`, left: "0px" });
     }
   }, [t, b]), d(() => {
     if (!t || !w) return;
     const e = (r) => {
-      const c = r.target, i = u.current, o = z.current;
+      const c = r.target, i = u.current, o = $.current;
       i && i.contains(c) || o && o.contains(c) || l(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e, { passive: !0 }), () => {
@@ -164,28 +165,28 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [t, w]), /* @__PURE__ */ L("div", { className: f.selectContainer, children: [
-    q(),
+    G(),
     /* @__PURE__ */ s(
-      I,
+      Q,
       {
         anchorRef: u,
         open: t,
         onClose: () => l(!1),
-        position: A,
+        position: F,
         disableOverlay: !0,
         className: f.modal,
         autoCloseCondition: w,
-        children: /* @__PURE__ */ L("div", { ref: z, children: [
+        children: /* @__PURE__ */ L("div", { ref: $, children: [
           V && /* @__PURE__ */ L("div", { children: [
             /* @__PURE__ */ s(
-              G,
+              H,
               {
                 type: "text",
                 placeholder: U,
                 status: "ghost",
                 sizeStyle: "s",
-                value: $,
-                onChange: (e) => F(e.target.value)
+                value: K,
+                onChange: (e) => M(e.target.value)
               }
             ),
             /* @__PURE__ */ s("div", { className: f.searchWrapper })
@@ -196,11 +197,11 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
               {
                 ref: (r) => j.current[e.value] = r,
                 className: `${f.children} ${(n == null ? void 0 : n.value) === e.value ? f.active : ""}`,
-                onClick: () => M(e),
+                onClick: () => q(e),
                 role: "option",
                 "aria-selected": (n == null ? void 0 : n.value) === e.value,
                 children: [
-                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: e.sizeIcon ? e.sizeIcon : 20 }),
+                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: e.iconSize ? e.iconSize : 16 }),
                   e.label && /* @__PURE__ */ s("div", { className: f.itemLabel, children: e.label })
                 ]
               },
@@ -214,5 +215,5 @@ const J = "_selectContainer_133eb_54", Q = "_children_133eb_61", X = "_active_13
   ] });
 };
 export {
-  me as Select
+  pe as Select
 };

package/dist/components/tabs/Tabs.js

@@ -1,8 +1,8 @@
-import { jsxs as A, jsx as l } from "react/jsx-runtime";
-import { useState as z, useRef as w, useCallback as B, useEffect as u, useLayoutEffect as E } from "react";
-import { Button as F } from "../button/Button.js";
-import { IconButton as p } from "../icon-button/IconButton.js";
-import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { useState as N, useRef as j, useCallback as A, useEffect as u, useLayoutEffect as F } from "react";
+import { Button as q } from "../button/Button.js";
+import { IconButton as L } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const M = "_underline_1jy9f_82", n = {
   "tab-container": "_tab-container_1jy9f_30",
   "tab-container-button": "_tab-container-button_1jy9f_34",
   "tab-container-icon": "_tab-container-icon_1jy9f_39",
@@ -14,56 +14,52 @@ import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
   "selected-button": "_selected-button_1jy9f_63",
   "noSelect-button": "_noSelect-button_1jy9f_70",
   "selected-text": "_selected-text_1jy9f_74",
-  underline: q,
+  underline: M,
   "flexHorizontal-center": "_flexHorizontal-center_1jy9f_90",
   "flexHorizontal-left": "_flexHorizontal-left_1jy9f_96",
   "flexHorizontal-right": "_flexHorizontal-right_1jy9f_102"
-}, C = (i, o) => {
+}, S = (i, o) => {
   if (!Number.isFinite(i)) return 0;
-  const b = Math.max(0, o);
-  return Math.min(Math.max(i, 0), b);
-}, O = ({
+  const d = Math.max(0, o);
+  return Math.min(Math.max(i, 0), d);
+}, G = ({
   listItems: i,
   type: o,
-  onTabSelect: b,
-  activeTab: d,
-  defaultActiveTab: _ = 0,
-  position: j = "left",
-  fullWidth: R = !1,
-  disabledTabs: x = []
+  onTabSelect: d,
+  activeTab: _,
+  defaultActiveTab: m = 0,
+  position: v = "left",
+  fullWidth: h = !1,
+  disabledTabs: z = []
 }) => {
-  const c = d !== void 0, [N, y] = z(_), m = C(
-    c ? d : N,
+  const l = _ !== void 0, [H, g] = N(m), f = S(
+    l ? _ : H,
     (i.length || 1) - 1
-  ), [S, H] = z({}), a = w(null), g = w([]), h = (t) => {
-    x.includes(t) || (c || y(t), b(i[t], t));
-  }, v = (t) => {
+  ), [$, B] = N({}), a = j(null), w = j([]), R = j([]), x = (t) => {
+    z.includes(t) || (l || g(t), d(i[t], t));
+  }, C = (t) => {
     if (!a.current || !t || o === "button") return;
     const e = a.current.getBoundingClientRect();
     if (e.width === 0) {
-      requestAnimationFrame(() => v(t));
+      requestAnimationFrame(() => C(t));
       return;
     }
     const s = t.getBoundingClientRect();
-    H({
+    B({
       left: `${s.left - e.left}px`,
       width: `${s.width}px`
     });
-  }, r = B(() => {
-    const t = g.current[m] ?? null;
-    requestAnimationFrame(
-      () => requestAnimationFrame(() => v(t))
-    );
-  }, [m, o]);
+  }, r = A(() => {
+    const t = (h ? R.current[f] : null) ?? w.current[f] ?? null;
+    requestAnimationFrame(() => requestAnimationFrame(() => C(t)));
+  }, [f, o, h]);
   u(() => {
-    c && r();
-  }, [c, r, d]), E(() => {
+    l && r();
+  }, [l, r, _]), F(() => {
     r();
-  }, [r, j, i.length]), u(() => {
-    c || y(
-      C(_, (i.length || 1) - 1)
-    );
-  }, [_, i.length, c]), u(() => {
+  }, [r, v, i.length]), u(() => {
+    l || g(S(m, (i.length || 1) - 1));
+  }, [m, i.length, l]), u(() => {
     var t, e;
     (e = (t = document.fonts) == null ? void 0 : t.ready) == null || e.then(() => r());
   }, [r]), u(() => {
@@ -74,65 +70,65 @@ import '../../styles/Tabs.css';const q = "_underline_1jy9f_82", n = {
     const t = new ResizeObserver(() => r());
     return t.observe(a.current), () => t.disconnect();
   }, [r]);
-  const $ = [
-    n[`flexHorizontal-${j}`],
+  const k = [
+    n[`flexHorizontal-${v}`],
     o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${R && n["tab-full-width"]}`,
+      className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${h && n["tab-full-width"]}`,
       ref: a,
       children: [
-        /* @__PURE__ */ l("div", { className: $, children: i.map((t, e) => {
-          const s = x.includes(e), f = e === m;
-          return /* @__PURE__ */ l(
+        /* @__PURE__ */ c("div", { className: k, children: i.map((t, e) => {
+          const s = z.includes(e), b = e === f;
+          return /* @__PURE__ */ c(
             "div",
             {
-              ref: (k) => g.current[e] = k,
+              ref: (y) => w.current[e] = y,
               className: [
-                o === "button" && f ? n["selected-button"] : n["noSelect-button"],
+                o === "button" && b ? n["selected-button"] : n["noSelect-button"],
                 typeof t != "string" ? n["noSelect-button"] : "",
                 s ? n["tab-disabled"] : ""
               ].filter(Boolean).join(" "),
-              children: o === "icon" ? /* @__PURE__ */ l(
-                p,
+              children: /* @__PURE__ */ c(
+                "span",
                 {
-                  mode: "icon",
-                  size: "s",
-                  selected: f,
-                  onClick: () => h(e),
-                  disabled: s,
-                  children: t
+                  ref: (y) => R.current[e] = y,
+                  style: { display: "inline-flex" },
+                  children: o === "icon" ? /* @__PURE__ */ c(
+                    L,
+                    {
+                      mode: "icon",
+                      size: "s",
+                      selected: b,
+                      onClick: () => x(e),
+                      disabled: s,
+                      children: t
+                    }
+                  ) : o === "button" ? /* @__PURE__ */ c("div", { className: n["tab-type-button"], onClick: () => x(e), children: t }) : /* @__PURE__ */ c("div", { className: b ? n["selected-text"] : void 0, children: /* @__PURE__ */ c(
+                    q,
+                    {
+                      size: "s",
+                      label: t,
+                      mode: o === "text" ? "text" : "ghost",
+                      selected: b,
+                      onClick: () => x(e),
+                      disabled: s,
+                      fullWidth: !0
+                    }
+                  ) })
                 }
-              ) : o === "button" ? /* @__PURE__ */ l(
-                "div",
-                {
-                  className: n["tab-type-button"],
-                  onClick: () => h(e),
-                  children: t
-                }
-              ) : /* @__PURE__ */ l("div", { className: f ? n["selected-text"] : void 0, children: /* @__PURE__ */ l(
-                F,
-                {
-                  size: "s",
-                  label: t,
-                  mode: o === "text" ? "text" : "ghost",
-                  selected: f,
-                  onClick: () => h(e),
-                  disabled: s,
-                  fullWidth: !0
-                }
-              ) })
+              )
             },
             e
           );
         }) }),
-        o !== "button" && /* @__PURE__ */ l("div", { className: n.underline, style: S })
+        o !== "button" && /* @__PURE__ */ c("div", { className: n.underline, style: $ })
       ]
     }
   );
 };
 export {
-  O as Tabs
+  G as Tabs
 };

package/package.json

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