@situaction/traq-ui-ste 1.2.30 → 1.2.32

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

@@ -4,6 +4,7 @@ import * as PhosphorIcons from "@phosphor-icons/react";
 export type SelectItem = {
     label?: string;
     icon?: keyof typeof PhosphorIcons | null;
+    iconSize?: number;
     value: string;
 };
 export interface SelectProps {
@@ -39,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 J } 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 Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_133eb_78", Z = "_selectList_133eb_82", O = "_modal_133eb_91", I = "_itemLabel_133eb_98", ee = "_searchWrapper_133eb_103", te = "_noResults_133eb_109", f = {
-  selectContainer: Q,
-  children: X,
-  active: Y,
-  selectList: Z,
-  modal: O,
-  itemLabel: I,
-  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: V,
+  searchPlaceholder: U,
   autoCloseCondition: w,
-  searchable: z = !1,
-  fullWidth: T = !1
+  searchable: V = !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), j = v(null), N = v(null), P = v({}), D = 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 Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_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 Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_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 Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
       {
         ref: u,
         mode: "tertiary",
-        fullWidth: T,
+        fullWidth: S,
         label: x ?? "Sélectionner",
         size: g,
         onClick: () => l(!t),
@@ -85,8 +86,8 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
         "aria-haspopup": "listbox"
       }
     );
-  }, U = h.filter(
-    (e) => String(e.label ?? "").toLowerCase().includes($.toLowerCase())
+  }, D = h.filter(
+    (e) => String(e.label ?? "").toLowerCase().includes(K.toLowerCase())
   ), [C, R] = y("");
   return d(() => {
     if (t) {
@@ -137,7 +138,7 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
           return (a = o.label) == null ? void 0 : a.toLowerCase().startsWith(c);
         });
         if (i) {
-          const o = D.current[i.value];
+          const o = j.current[i.value];
           o && o.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
@@ -146,12 +147,12 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_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 = j.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,49 +165,49 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [t, w]), /* @__PURE__ */ L("div", { className: f.selectContainer, children: [
-    q(),
+    G(),
     /* @__PURE__ */ s(
-      J,
+      Q,
       {
         anchorRef: u,
         open: t,
         onClose: () => l(!1),
-        position: A,
+        position: F,
         disableOverlay: !0,
         className: f.modal,
         autoCloseCondition: w,
-        children: /* @__PURE__ */ L("div", { ref: j, children: [
-          z && /* @__PURE__ */ L("div", { children: [
+        children: /* @__PURE__ */ L("div", { ref: $, children: [
+          V && /* @__PURE__ */ L("div", { children: [
             /* @__PURE__ */ s(
-              G,
+              H,
               {
                 type: "text",
-                placeholder: V,
+                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 })
           ] }),
           /* @__PURE__ */ L("div", { className: f.selectList, ref: N, children: [
-            U.map((e) => /* @__PURE__ */ L(
+            D.map((e) => /* @__PURE__ */ L(
               "div",
               {
-                ref: (r) => D.current[e.value] = r,
+                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: 16 }),
+                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: e.iconSize ? e.iconSize : 16 }),
                   e.label && /* @__PURE__ */ s("div", { className: f.itemLabel, children: e.label })
                 ]
               },
               e.value
             )),
-            U.length === 0 && /* @__PURE__ */ s("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
+            D.length === 0 && /* @__PURE__ */ s("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
           ] })
         ] })
       }
@@ -214,5 +215,5 @@ const Q = "_selectContainer_133eb_54", X = "_children_133eb_61", Y = "_active_13
   ] });
 };
 export {
-  me as Select
+  pe as Select
 };

package/package.json

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