@situaction/traq-ui-ste 1.2.35 → 1.2.39

package/dist/components/accordion/Accordion.d.ts

@@ -38,7 +38,7 @@ export interface AccordionProps {
     /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
     toggleOnHeaderClick?: boolean;
     /** Visual mode for all accordion items */
-    mode?: "primary" | "secondary";
+    mode?: "primary" | "secondary" | "ghost";
     /** If true, only one item can be open at a time */
     singleOpen?: boolean;
     /** Controlled open ids (optional) */

package/dist/components/accordion/item/AccordionItem.d.ts

@@ -19,7 +19,7 @@ interface AccordionItemProps {
     /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
     toggleOnHeaderClick?: boolean;
     /** Visual mode for the accordion item */
-    mode?: "primary" | "secondary";
+    mode?: "primary" | "secondary" | "ghost";
     /** Controlled open state (optional) */
     open?: boolean;
     /** Toggle callback used when open is controlled */

package/dist/components/accordion/item/AccordionItem.js

@@ -1,67 +1,68 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { useState as k, useEffect as y, useMemo as B } from "react";
+import { useState as y, useEffect as B, useMemo as O } from "react";
 import { IconButton as w } from "../../icon-button/IconButton.js";
-import '../../../styles/AccordionItem.css';const O = "_accordionHeader_bor6q_7", A = "_title_bor6q_31", M = "_fullHeight_bor6q_36", H = "_block_bor6q_40", I = "_tile_bor6q_48", L = "_secondaryOpen_bor6q_56", e = {
-  accordionHeader: O,
-  "padding-s": "_padding-s_bor6q_15",
-  "padding-m": "_padding-m_bor6q_19",
-  "padding-l": "_padding-l_bor6q_23",
-  "padding-xl": "_padding-xl_bor6q_27",
-  title: A,
-  fullHeight: M,
-  block: H,
-  tile: I,
-  secondaryOpen: L
-}, z = ({
-  header: m,
-  children: f,
-  iconPosition: a = "right",
+import '../../../styles/AccordionItem.css';const A = "_accordionHeader_10lt2_7", M = "_title_10lt2_31", H = "_fullHeight_10lt2_36", I = "_block_10lt2_40", L = "_tile_10lt2_48", N = "_secondaryOpen_10lt2_56", Z = "_ghost_10lt2_61", l = {
+  accordionHeader: A,
+  "padding-s": "_padding-s_10lt2_15",
+  "padding-m": "_padding-m_10lt2_19",
+  "padding-l": "_padding-l_10lt2_23",
+  "padding-xl": "_padding-xl_10lt2_27",
+  title: M,
+  fullHeight: H,
+  block: I,
+  tile: L,
+  secondaryOpen: N,
+  ghost: Z
+}, q = ({
+  header: f,
+  children: m,
+  iconPosition: c = "right",
   defaultOpen: d = !1,
-  type: c = "block",
-  paddingHeader: b = "m",
-  onClickHeader: s,
+  type: h = "block",
+  paddingHeader: u = "m",
+  onClickHeader: n,
   toggleOnHeaderClick: v = !1,
-  mode: h = "primary",
+  mode: o = "primary",
   open: g,
-  onToggle: r
+  onToggle: a
 }) => {
-  const l = g !== void 0, [u, _] = k(!1);
-  y(() => {
-    l || _(!!d);
-  }, [d, l]);
-  const i = l ? !!g : u, n = () => {
-    if (l) {
-      r == null || r();
+  const i = g !== void 0, [x, _] = y(!1);
+  B(() => {
+    i || _(!!d);
+  }, [d, i]);
+  const e = i ? !!g : x, r = () => {
+    if (i) {
+      a == null || a();
       return;
     }
-    _((o) => !o);
-  }, x = (o) => {
-    if (o.target.closest("button")) {
-      o.stopPropagation();
+    _((s) => !s);
+  }, b = (s) => {
+    if (s.target.closest("button")) {
+      s.stopPropagation();
       return;
     }
-    v && n(), s == null || s();
-  }, q = B(() => [
-    c === "tile" ? e.tile : e.block,
-    h === "secondary" && i ? e.secondaryOpen : ""
-  ].filter(Boolean).join(" "), [c, h, i]);
-  return /* @__PURE__ */ p("div", { className: q, children: [
+    v && r(), n == null || n();
+  }, k = O(() => o === "ghost" ? l.ghost : [
+    h === "tile" ? l.tile : l.block,
+    o === "secondary" && e ? l.secondaryOpen : ""
+  ].filter(Boolean).join(" "), [h, o, e]);
+  return /* @__PURE__ */ p("div", { className: k, children: [
     /* @__PURE__ */ p(
       "div",
       {
-        className: `${e.accordionHeader} ${e[`padding-${b}`]}`,
-        onClick: x,
+        className: `${l.accordionHeader} ${l[`padding-${u}`]}`,
+        onClick: b,
         "data-ignore-outside-click": !0,
         children: [
-          a === "left" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) }),
-          /* @__PURE__ */ t("div", { className: e.title, children: m }),
-          a === "right" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) })
+          c === "left" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: r, children: e ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) }),
+          /* @__PURE__ */ t("div", { className: l.title, children: f }),
+          c === "right" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: r, children: e ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) })
         ]
       }
     ),
-    i && f
+    e && m
   ] });
 };
 export {
-  z as AccordionItem
+  q as AccordionItem
 };

package/dist/components/menu/Menu.d.ts

@@ -12,6 +12,8 @@ export interface MenuItem {
     label: string;
     /** Callback function executed when the item is clicked */
     onClick: () => void;
+    /** Disabled button */
+    disabled?: boolean;
 }
 /**
  * Interface for a parameterized menu item that can open a modal or execute a custom action.
@@ -32,6 +34,8 @@ export interface MenuParam {
         bottom: string;
         left: string;
     };
+    /** Disabled button */
+    disabled?: boolean;
 }
 /**
  * Props for the Menu component, which renders a vertical navigation menu with actions and optional modal parameters.

package/dist/components/menu/Menu.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useState as c, useRef as M, useEffect as B } from "react";
 import { Button as $ } from "../button/Button.js";
 import { IconButton as f } from "../icon-button/IconButton.js";
@@ -10,7 +10,7 @@ import "../carousel/Carousel.js";
 import "../carousel/FadeCarousel.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css                   */
-const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_textEllipsis_11eub_47", G = "_pointer_11eub_52", J = "_fullImg_11eub_55", K = "_menuParams_11eub_61", Q = "_line_11eub_67", T = "_borderRadiusM_11eub_74", U = "_menuItem_11eub_78", X = "_longLogo_11eub_87", Y = "_flexVerticalBetweenStart_11eub_92", Z = "_flexHorizontalCenter_11eub_106", ee = "_flexVerticalBetweenCenter_11eub_121", e = {
+const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21", D = "_close_11eub_25", q = "_menuButton_11eub_29", A = "_closeIcon_11eub_37", F = "_textEllipsis_11eub_47", G = "_pointer_11eub_52", J = "_fullImg_11eub_55", K = "_menuParams_11eub_61", Q = "_line_11eub_67", T = "_borderRadiusM_11eub_74", U = "_menuItem_11eub_78", X = "_longLogo_11eub_87", Y = "_flexVerticalBetweenStart_11eub_92", Z = "_flexHorizontalCenter_11eub_106", ee = "_flexVerticalBetweenCenter_11eub_121", o = {
   fullHeight: y,
   fullWidth: O,
   open: j,
@@ -28,87 +28,89 @@ const y = "_fullHeight_11eub_15", O = "_fullWidth_11eub_18", j = "_open_11eub_21
   flexVerticalBetweenStart: Y,
   flexHorizontalCenter: Z,
   flexVerticalBetweenCenter: ee
-}, _e = ({ menuItems: s = [], menuParams: a = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: u }) => {
-  const [l, g] = c(I ?? !1), [b, x] = c(u ?? (s.length > 0 ? s[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
+}, _e = ({ menuItems: i = [], menuParams: d = [], shortLogo: m, logo: p, isOpen: h, defaultOpen: I = !1, selectedId: r }) => {
+  const [t, b] = c(I ?? !1), [g, x] = c(r ?? (i.length > 0 ? i[0].id : null)), w = M(null), [H, _] = c(!1), [L, C] = c(!1), [k, E] = c(null), [z, R] = c({}), V = M(null);
   B(() => {
-    u != null && x(u);
-  }, [u]);
-  const v = (o, i) => {
-    if (o.stopPropagation(), x(i), s) {
-      const t = s.find((r) => r.id === i);
-      t == null || t.onClick();
+    r != null && x(r);
+  }, [r]);
+  const v = (e, s) => {
+    if (e.stopPropagation(), x(s), i) {
+      const n = i.find((a) => a.id === s);
+      n == null || n.onClick();
     }
   }, S = () => {
-    g(!l), _(!1);
-  }, P = (o) => {
-    var i;
-    if (a) {
-      const t = a.find((r) => r.id === o);
-      if (!t) return;
-      if (t.content) {
-        const r = l ? "200px" : "40px";
-        E(t.content), R({ ...t.position, left: r }), C(!0);
+    b(!t), _(!1);
+  }, P = (e) => {
+    var s;
+    if (d) {
+      const n = d.find((a) => a.id === e);
+      if (!n) return;
+      if (n.content) {
+        const a = t ? "200px" : "40px";
+        E(n.content), R({ ...n.position, left: a }), C(!0);
       } else
-        (i = t.onClick) == null || i.call(t);
+        (s = n.onClick) == null || s.call(n);
     }
   };
   return B(() => {
-    h && h(l);
-  }, [l]), /* @__PURE__ */ n("nav", { ref: w, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${l ? e.open : e.close}`, children: [
-    /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
-      /* @__PURE__ */ n(
+    h && h(t);
+  }, [t]), /* @__PURE__ */ l("nav", { ref: w, children: /* @__PURE__ */ u("div", { className: `${o.flexVerticalBetweenStart} ${o.fullHeight} ${t ? o.open : o.close}`, children: [
+    /* @__PURE__ */ u("div", { className: o.fullWidth, children: [
+      /* @__PURE__ */ l(
         "div",
         {
-          className: `${e.flexHorizontalCenter} ${e.pointer} ${e.textEllipsis}`,
+          className: `${o.flexHorizontalCenter} ${o.pointer} ${o.textEllipsis}`,
           onClick: () => S(),
-          children: l ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
-            p && /* @__PURE__ */ n("img", { className: e.longLogo, src: p, alt: "Logo situaction" }),
-            /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
-          ] }) : /* @__PURE__ */ n(
+          children: t ? /* @__PURE__ */ u("div", { className: o.fullImg, children: [
+            p && /* @__PURE__ */ l("img", { className: o.longLogo, src: p, alt: "Logo situaction" }),
+            /* @__PURE__ */ l(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(N, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ l(
             "div",
             {
-              className: e.closeIcon,
+              className: o.closeIcon,
               onMouseEnter: () => _(!0),
               onMouseLeave: () => _(!1),
-              onClick: () => g(!l),
-              children: H || !m ? /* @__PURE__ */ n(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ n(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ n("img", { src: m, alt: "Logo situaction" })
+              onClick: () => b(!t),
+              children: H || !m ? /* @__PURE__ */ l(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ l(N, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ l("img", { src: m, alt: "Logo situaction" })
             }
           )
         }
       ),
-      /* @__PURE__ */ n("div", { className: e.menuItem, children: s && s.map((o) => l ? /* @__PURE__ */ n("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ n(
+      /* @__PURE__ */ l("div", { className: o.menuItem, children: i && i.map((e) => t ? /* @__PURE__ */ l("div", { className: `${o.textEllipsis} ${o.menuButton}`, children: /* @__PURE__ */ l(
         $,
         {
-          mode: b === o.id ? "secondary" : "ghost",
-          label: o.label,
-          onClick: (i) => v(i, o.id),
-          childrenLeft: o.icon
+          mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
+          label: e.label,
+          disabled: e.disabled,
+          onClick: (s) => v(s, e.id),
+          childrenLeft: e.icon
         }
-      ) }, `button-${o.id}`) : /* @__PURE__ */ n("div", { className: e.textEllipsis, children: /* @__PURE__ */ n(
+      ) }, `button-${e.id}`) : /* @__PURE__ */ l("div", { className: o.textEllipsis, children: /* @__PURE__ */ l(
         f,
         {
-          mode: b === o.id ? "secondary" : "ghost",
-          children: o.icon,
-          onClick: (i) => v(i, o.id)
+          mode: e.disabled ? "ghost" : g === e.id ? "secondary" : "ghost",
+          children: e.icon,
+          disabled: e.disabled,
+          onClick: (s) => v(s, e.id)
         }
-      ) }, `icon-${o.id}`)) }),
-      /* @__PURE__ */ n("div", { className: e.line })
+      ) }, `icon-${e.id}`)) }),
+      /* @__PURE__ */ l("div", { className: o.line })
     ] }),
-    /* @__PURE__ */ d("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
-      a && a.map((o) => /* @__PURE__ */ n(
+    /* @__PURE__ */ u("div", { className: `${o.menuParams} ${o.flexVerticalBetweenCenter}`, children: [
+      d && d.map((e) => /* @__PURE__ */ l(
         "div",
         {
-          className: `${e.fullWidth} ${e.textEllipsis}`,
-          onClick: () => P(o.id),
-          children: l ? /* @__PURE__ */ n("div", { className: e.menuButton, children: /* @__PURE__ */ n($, { mode: "ghost", label: o.label, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ n(f, { mode: "ghost", children: o.icon })
+          className: `${o.fullWidth} ${o.textEllipsis}`,
+          onClick: () => P(e.id),
+          children: t ? /* @__PURE__ */ l("div", { className: o.menuButton, children: /* @__PURE__ */ l($, { mode: "ghost", label: e.label, disabled: e.disabled, childrenLeft: e.icon }, e.id) }) : /* @__PURE__ */ l(f, { mode: "ghost", children: e.icon, disabled: e.disabled })
         },
-        `param-icon-${o.id}`
+        `param-icon-${e.id}`
       )),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ l(
         W,
         {
           ref: V,
-          className: e.borderRadiusM,
+          className: o.borderRadiusM,
           open: L,
           onClose: () => C(!1),
           position: z,

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Size } from '../interface';
 
 import * as PhosphorIcons from "@phosphor-icons/react";
@@ -40,6 +41,14 @@ export interface SelectProps {
     /** Enable a search input inside the select modal to filter options **/
     searchable?: boolean;
     fullWidth?: boolean;
+    /** Custom trigger — replaces the default button. Can be anything (Tag, chip, etc.) **/
+    children?: ReactNode;
+    /** Custom render for each item in the dropdown list **/
+    renderItem?: (item: SelectItem) => ReactNode;
+    /** Extra icon displayed on the right of the trigger button (before the caret) **/
+    triggerIcon?: ReactNode;
+    /** Width of the dropdown panel: 'auto' (natural size) or 'full' (fills the container). Default: 'auto' **/
+    dropdownWidth?: 'auto' | 'full';
     iconSize?: number;
 }
 /**
@@ -47,4 +56,4 @@ export interface SelectProps {
  * 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, iconSize }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ selected, size, listItem, modeDisplay, onSelect, positionOverride, placeholder, searchPlaceholder, autoCloseCondition, searchable, fullWidth, children, renderItem, triggerIcon, dropdownWidth, iconSize }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/Select.js

@@ -1,214 +1,242 @@
-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 H } from "../input/Input.js";
-import { IconButton as J } from "../icon-button/IconButton.js";
+import { jsxs as m, jsx as o, Fragment as G } from "react/jsx-runtime";
+import { useState as _, useRef as b, useEffect as d } from "react";
+import { Button as S } from "../button/Button.js";
+import { Input as I } from "../input/Input.js";
+import { IconButton as ee } from "../icon-button/IconButton.js";
 import "../../index-CxdrhfJv.mjs";
 import "../accordion/Accordion.js";
-import { Icon as _ } from "../icon/Icon.js";
-import { Modal as Q } from "../modal/Modal.js";
+import { Icon as T } from "../icon/Icon.js";
+import { Modal as te } 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 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
-}, ve = ({
+const ne = "_selectContainer_133eb_54", re = "_children_133eb_61", oe = "_active_133eb_78", se = "_selectList_133eb_82", ae = "_modal_133eb_91", ce = "_itemLabel_133eb_98", ie = "_searchWrapper_133eb_103", le = "_noResults_133eb_109", f = {
+  selectContainer: ne,
+  children: re,
+  active: oe,
+  selectList: se,
+  modal: ae,
+  itemLabel: ce,
+  searchWrapper: ie,
+  noResults: le
+}, xe = ({
   selected: k,
-  size: g = "m",
+  size: w = "m",
   listItem: h,
-  modeDisplay: E = "all",
+  modeDisplay: N = "all",
   onSelect: z,
-  positionOverride: b,
+  positionOverride: L,
   placeholder: x = "Sélectionner",
-  searchPlaceholder: U,
-  autoCloseCondition: w,
-  searchable: V = !1,
-  fullWidth: S = !1,
-  iconSize: A = 20
+  searchPlaceholder: H,
+  autoCloseCondition: y,
+  searchable: J = !1,
+  fullWidth: g = !1,
+  children: P,
+  renderItem: F,
+  triggerIcon: R,
+  dropdownWidth: V = "auto",
+  iconSize: Q = 20
 }) => {
-  const [t, l] = y(!1), [F, B] = y({
+  const [t, l] = _(!1), [X, A] = _({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [n, T] = y(k ?? null), [K, M] = y(""), u = v(null), $ = v(null), N = v(null), P = v({}), j = v({}), p = v(null);
+  }), [r, B] = _(k ?? null), [D, Y] = _(""), u = b(null), M = b(null), K = b(null), $ = b({}), U = b({}), v = b(null);
   d(() => {
-    T(k || null);
+    B(k || null);
   }, [k]), d(() => {
-    b && B(b);
-  }, [b]);
-  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(J, { ref: u, mode: "tertiary", size: g, onClick: () => l(!t), children: /* @__PURE__ */ s(_, { size: A, icon: n.icon }) }) : E === "text" ? /* @__PURE__ */ s(
-      W,
+    L && A(L);
+  }, [L]);
+  const Z = (e) => {
+    B(e), l(!1), z && z(e);
+  }, W = /* @__PURE__ */ o(T, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }), j = R ? /* @__PURE__ */ m(G, { children: [
+    R,
+    W
+  ] }) : W, O = () => {
+    if (P)
+      return /* @__PURE__ */ o(
+        S,
+        {
+          ref: u,
+          mode: "tertiary",
+          label: "",
+          size: w,
+          fullWidth: g,
+          childrenLeft: R ? /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "center", gap: "var(--spacing-xs-3)" }, children: [
+            R,
+            P
+          ] }) : P,
+          childrenRight: W,
+          onClick: () => l(!t),
+          "aria-expanded": t,
+          "aria-haspopup": "listbox"
+        }
+      );
+    const e = r == null ? void 0 : r.icon, n = (r == null ? void 0 : r.label) ?? x;
+    return N === "icon" && e ? /* @__PURE__ */ o(ee, { ref: u, mode: "tertiary", size: w, onClick: () => l(!t), children: /* @__PURE__ */ o(T, { size: Q, icon: r.icon }) }) : N === "text" ? /* @__PURE__ */ o(
+      S,
       {
         ref: u,
         mode: "tertiary",
-        label: n ? r : x,
-        childrenRight: /* @__PURE__ */ s(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        size: g,
-        fullWidth: S,
+        label: r ? n : x,
+        childrenRight: j,
+        size: w,
+        fullWidth: g,
         onClick: () => l(!t),
         "aria-expanded": t,
         "aria-haspopup": "listbox"
       }
-    ) : E === "all" ? /* @__PURE__ */ s(
-      W,
+    ) : N === "all" ? /* @__PURE__ */ o(
+      S,
       {
         ref: u,
         mode: "tertiary",
-        label: n ? r : x,
-        size: g,
-        fullWidth: S,
-        childrenLeft: e && /* @__PURE__ */ s(_, { icon: n.icon }),
-        childrenRight: /* @__PURE__ */ s(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        label: r ? n : x,
+        size: w,
+        fullWidth: g,
+        childrenLeft: e && /* @__PURE__ */ o(T, { icon: r.icon }),
+        childrenRight: j,
         onClick: () => l(!t),
         "aria-expanded": t,
         "aria-haspopup": "listbox"
       }
-    ) : /* @__PURE__ */ s(
-      W,
+    ) : /* @__PURE__ */ o(
+      S,
       {
         ref: u,
         mode: "tertiary",
-        fullWidth: S,
+        fullWidth: g,
         label: x ?? "Sélectionner",
-        size: g,
+        size: w,
+        childrenRight: j,
         onClick: () => l(!t),
         "aria-expanded": t,
         "aria-haspopup": "listbox"
       }
     );
-  }, D = h.filter(
-    (e) => String(e.label ?? "").toLowerCase().includes(K.toLowerCase())
-  ), [C, R] = y("");
+  }, q = h.filter(
+    (e) => String(e.label ?? "").toLowerCase().includes(D.toLowerCase())
+  ), [C, E] = _("");
   return d(() => {
     if (t) {
-      const e = (r) => {
-        const c = r.key.length === 1 ? r.key.toLowerCase() : "";
-        if (!c) return;
-        const i = C + c;
-        R(i);
-        const o = h.find((a) => {
-          var m;
-          return (m = a.label) == null ? void 0 : m.toLowerCase().startsWith(i);
+      const e = (n) => {
+        const a = n.key.length === 1 ? n.key.toLowerCase() : "";
+        if (!a) return;
+        const i = C + a;
+        E(i);
+        const s = h.find((c) => {
+          var p;
+          return (p = c.label) == null ? void 0 : p.toLowerCase().startsWith(i);
         });
-        if (o) {
-          const a = P.current[o.value];
-          a == null || a.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        if (s) {
+          const c = $.current[s.value];
+          c == null || c.scrollIntoView({ behavior: "smooth", block: "nearest" });
         }
-        p.current && clearTimeout(p.current), p.current = setTimeout(() => R(""), 500);
+        v.current && clearTimeout(v.current), v.current = setTimeout(() => E(""), 500);
       };
       return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
     }
   }, [t, C, h]), d(() => {
-    const e = (r) => {
+    const e = (n) => {
       if (!t) return;
-      const c = r.key.length === 1 ? r.key.toLowerCase() : "";
-      if (!c) return;
-      const i = C + c;
-      R(i);
-      const o = h.find(
-        (a) => {
-          var m;
-          return (m = a.label) == null ? void 0 : m.toLowerCase().startsWith(i);
+      const a = n.key.length === 1 ? n.key.toLowerCase() : "";
+      if (!a) return;
+      const i = C + a;
+      E(i);
+      const s = h.find(
+        (c) => {
+          var p;
+          return (p = c.label) == null ? void 0 : p.toLowerCase().startsWith(i);
         }
       );
-      if (o && N.current && P.current[o.value]) {
-        const a = N.current, m = P.current[o.value];
-        a.scrollTo({ top: m.offsetTop - a.offsetTop, behavior: "smooth" });
+      if (s && K.current && $.current[s.value]) {
+        const c = K.current, p = $.current[s.value];
+        c.scrollTo({ top: p.offsetTop - c.offsetTop, behavior: "smooth" });
       }
-      p.current && clearTimeout(p.current), p.current = setTimeout(() => R(""), 700);
+      v.current && clearTimeout(v.current), v.current = setTimeout(() => E(""), 700);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
   }, [t, h, C]), d(() => {
     if (!t) return;
-    const e = (r) => {
-      const c = r.key.toLowerCase();
-      if (c.length === 1) {
-        const i = h.find((o) => {
-          var a;
-          return (a = o.label) == null ? void 0 : a.toLowerCase().startsWith(c);
+    const e = (n) => {
+      const a = n.key.toLowerCase();
+      if (a.length === 1) {
+        const i = h.find((s) => {
+          var c;
+          return (c = s.label) == null ? void 0 : c.toLowerCase().startsWith(a);
         });
         if (i) {
-          const o = j.current[i.value];
-          o && o.scrollIntoView({ block: "start", behavior: "smooth" });
+          const s = U.current[i.value];
+          s && s.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [t, h]), d(() => {
-    if (t && u.current) {
-      const e = u.current.getBoundingClientRect().height;
-      B(b || { top: `${e + 6}px`, left: "0px" });
+    const e = u.current;
+    if (t && e) {
+      const { height: n } = e.getBoundingClientRect(), a = { top: `${n + 6}px`, left: "0px" };
+      A(L || { ...a, ...V === "full" ? { width: "calc(100% - var(--spacing-xs-6) * 2)" } : {} });
     }
-  }, [t, b]), d(() => {
-    if (!t || !w) return;
-    const e = (r) => {
-      const c = r.target, i = u.current, o = $.current;
-      i && i.contains(c) || o && o.contains(c) || l(!1);
+  }, [t, L, V]), d(() => {
+    if (!t || !y) return;
+    const e = (n) => {
+      const a = n.target, i = u.current, s = M.current;
+      i && i.contains(a) || s && s.contains(a) || l(!1);
     };
     return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e, { passive: !0 }), () => {
       document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
     };
-  }, [t, w]), d(() => {
-    if (!t || !w) return;
-    const e = (r) => {
-      r.key === "Escape" && l(!1);
+  }, [t, y]), d(() => {
+    if (!t || !y) return;
+    const e = (n) => {
+      n.key === "Escape" && l(!1);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [t, w]), /* @__PURE__ */ L("div", { className: f.selectContainer, children: [
-    G(),
-    /* @__PURE__ */ s(
-      Q,
+  }, [t, y]), /* @__PURE__ */ m("div", { className: f.selectContainer, children: [
+    O(),
+    /* @__PURE__ */ o(
+      te,
       {
         anchorRef: u,
         open: t,
         onClose: () => l(!1),
-        position: F,
+        position: X,
         disableOverlay: !0,
         className: f.modal,
-        autoCloseCondition: w,
-        children: /* @__PURE__ */ L("div", { ref: $, children: [
-          V && /* @__PURE__ */ L("div", { children: [
-            /* @__PURE__ */ s(
-              H,
+        autoCloseCondition: y,
+        children: /* @__PURE__ */ m("div", { ref: M, children: [
+          J && /* @__PURE__ */ m("div", { children: [
+            /* @__PURE__ */ o(
+              I,
               {
                 type: "text",
-                placeholder: U,
+                placeholder: H,
                 status: "ghost",
                 sizeStyle: "s",
-                value: K,
-                onChange: (e) => M(e.target.value)
+                value: D,
+                onChange: (e) => Y(e.target.value)
               }
             ),
-            /* @__PURE__ */ s("div", { className: f.searchWrapper })
+            /* @__PURE__ */ o("div", { className: f.searchWrapper })
           ] }),
-          /* @__PURE__ */ L("div", { className: f.selectList, ref: N, children: [
-            D.map((e) => /* @__PURE__ */ L(
+          /* @__PURE__ */ m("div", { className: f.selectList, ref: K, children: [
+            q.map((e) => /* @__PURE__ */ o(
               "div",
               {
-                ref: (r) => j.current[e.value] = r,
-                className: `${f.children} ${(n == null ? void 0 : n.value) === e.value ? f.active : ""}`,
-                onClick: () => q(e),
+                ref: (n) => U.current[e.value] = n,
+                className: `${f.children} ${(r == null ? void 0 : r.value) === e.value ? f.active : ""}`,
+                onClick: () => Z(e),
                 role: "option",
-                "aria-selected": (n == null ? void 0 : n.value) === e.value,
-                children: [
-                  e.icon && /* @__PURE__ */ s(_, { icon: e.icon, size: e.iconSize ? e.iconSize : 16 }),
-                  e.label && /* @__PURE__ */ s("div", { className: f.itemLabel, children: e.label })
-                ]
+                "aria-selected": (r == null ? void 0 : r.value) === e.value,
+                children: F ? F(e) : /* @__PURE__ */ m(G, { children: [
+                  e.icon && /* @__PURE__ */ o(T, { icon: e.icon, size: e.iconSize ? e.iconSize : 16 }),
+                  e.label && /* @__PURE__ */ o("div", { className: f.itemLabel, children: e.label })
+                ] })
               },
               e.value
             )),
-            D.length === 0 && /* @__PURE__ */ s("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
+            q.length === 0 && /* @__PURE__ */ o("div", { className: `${f.noResults} textSmall`, children: "Aucun résultat" })
           ] })
         ] })
       }
@@ -216,5 +244,5 @@ const X = "_selectContainer_133eb_54", Y = "_children_133eb_61", Z = "_active_13
   ] });
 };
 export {
-  ve as Select
+  xe as Select
 };

package/dist/styles/AccordionItem.css

@@ -1 +1 @@
-@charset "UTF-8";._accordionHeader_bor6q_7{display:flex;align-items:center;justify-content:space-between;border-radius:.375rem;gap:.375rem}._padding-s_bor6q_15{padding:var(--spacing-xs-4)}._padding-m_bor6q_19{padding:var(--spacing-xs-2)}._padding-l_bor6q_23{padding:var(--spacing-xs)}._padding-xl_bor6q_27{padding:var(--spacing-s)}._title_bor6q_31{flex-grow:1;text-align:left}._fullHeight_bor6q_36{height:100%}._block_bor6q_40{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_bor6q_48 ._accordionHeader_bor6q_7{border-radius:.375rem;background:var(--background-primary);margin-bottom:.375rem;border:1px solid var(--general-border-window)}._secondaryOpen_bor6q_56{background:var(--skeleton-step-empty-background)}
+@charset "UTF-8";._accordionHeader_10lt2_7{display:flex;align-items:center;justify-content:space-between;border-radius:.375rem;gap:.375rem}._padding-s_10lt2_15{padding:var(--spacing-xs-4)}._padding-m_10lt2_19{padding:var(--spacing-xs-2)}._padding-l_10lt2_23{padding:var(--spacing-xs)}._padding-xl_10lt2_27{padding:var(--spacing-s)}._title_10lt2_31{flex-grow:1;text-align:left}._fullHeight_10lt2_36{height:100%}._block_10lt2_40{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_10lt2_48 ._accordionHeader_10lt2_7{border-radius:.375rem;background:var(--background-primary);margin-bottom:.375rem;border:1px solid var(--general-border-window)}._secondaryOpen_10lt2_56{background:var(--skeleton-step-empty-background)}._ghost_10lt2_61 ._accordionHeader_10lt2_7{padding-left:0;padding-right:0}

package/package.json

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