@situaction/traq-ui-ste 1.2.1 → 1.2.3

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

@@ -32,8 +32,11 @@ export interface SelectProps {
     };
     /** Text displayed when no item is selected */
     placeholder?: string;
+    searchPlaceholder?: string;
     /** Condition to close the modal */
     autoCloseCondition: boolean;
+    /** Enable a search input inside the select modal to filter options */
+    searchable?: boolean;
     fullWidth?: boolean;
 }
 /**
@@ -41,4 +44,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, autoCloseCondition, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ selected, size, listItem, modeDisplay, onSelect, positionOverride, placeholder, searchPlaceholder, autoCloseCondition, searchable, fullWidth }: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/Select.js

@@ -1,181 +1,207 @@
-import { jsxs as $, jsx as r } from "react/jsx-runtime";
-import { useState as g, useRef as h, useEffect as w } from "react";
-import { Button as N } from "../button/Button.js";
-import { IconButton as q } from "../icon-button/IconButton.js";
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { useState as b, useRef as m, useEffect as p } from "react";
+import { Button as W } from "../button/Button.js";
+import { Input as H } from "../input/Input.js";
+import { IconButton as I } from "../icon-button/IconButton.js";
 import { Icon as _ } from "../icon/Icon.js";
-import { Modal as z } from "../modal/Modal.js";
+import { Modal as J } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
-const A = "_selectContainer_1o5wx_54", D = "_selected_1o5wx_57", G = "_children_1o5wx_61", H = "_active_1o5wx_78", J = "_selectList_1o5wx_82", O = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
-  selectContainer: A,
-  selected: D,
-  children: G,
-  active: H,
-  selectList: J,
-  modal: O,
-  dropdownFadeIn: Q,
-  itemLabel: X
-}, ce = ({
-  selected: b,
-  size: p = "m",
+const O = "_selectContainer_133eb_54", Q = "_selected_133eb_57", X = "_children_133eb_61", Y = "_active_133eb_78", Z = "_selectList_133eb_82", ee = "_modal_133eb_91", te = "_dropdownFadeIn_133eb_1", ne = "_itemLabel_133eb_98", re = "_searchWrapper_133eb_103", oe = "_noResults_133eb_109", u = {
+  selectContainer: O,
+  selected: Q,
+  children: X,
+  active: Y,
+  selectList: Z,
+  modal: ee,
+  dropdownFadeIn: te,
+  itemLabel: ne,
+  searchWrapper: re,
+  noResults: oe
+}, me = ({
+  selected: L,
+  size: C = "m",
   listItem: s,
-  modeDisplay: R = "all",
+  modeDisplay: x = "all",
   onSelect: B,
-  positionOverride: L,
-  placeholder: P = "Sélectionner",
-  autoCloseCondition: j,
-  fullWidth: T = !1
+  positionOverride: y,
+  placeholder: F = "Sélectionner",
+  searchPlaceholder: U,
+  autoCloseCondition: V,
+  searchable: z = !1,
+  fullWidth: S = !1
 }) => {
-  const [n, u] = g(!1), U = h(null), [V, F] = g({
+  const [t, f] = b(!1), A = m(null), [M, P] = b({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [c, C] = g(b ?? null);
-  w(() => {
-    b ? C(b) : s.length > 0 ? C(s[0]) : C(null);
-  }, [b, s]), w(() => {
-    L && F(L);
-  }, [L]);
-  const M = (e) => {
-    C(e), u(!1), B && B(e);
-  }, W = () => {
-    const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || P || "Sélectionner";
-    return R === "icon" && e ? /* @__PURE__ */ r(q, { ref: d, mode: "tertiary", size: p, onClick: () => u(!n), children: /* @__PURE__ */ r(_, { icon: c.icon }) }) : R === "text" ? /* @__PURE__ */ r(
-      N,
+  }), [c, k] = b(L ?? null), [$, q] = b("");
+  p(() => {
+    L ? k(L) : s.length > 0 ? k(s[0]) : k(null);
+  }, [L, s]), p(() => {
+    y && P(y);
+  }, [y]);
+  const D = (e) => {
+    k(e), f(!1), B && B(e);
+  }, G = () => {
+    const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || F || "Sélectionner";
+    return x === "icon" && e ? /* @__PURE__ */ r(I, { ref: d, mode: "tertiary", size: C, onClick: () => f(!t), children: /* @__PURE__ */ r(_, { icon: c.icon }) }) : x === "text" ? /* @__PURE__ */ r(
+      W,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        size: p,
-        fullWidth: T,
-        onClick: () => u(!n)
+        childrenRight: /* @__PURE__ */ r(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        size: C,
+        fullWidth: S,
+        onClick: () => f(!t)
       }
-    ) : R === "all" ? /* @__PURE__ */ r(
-      N,
+    ) : x === "all" ? /* @__PURE__ */ r(
+      W,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        size: p,
-        fullWidth: T,
+        size: C,
+        fullWidth: S,
         childrenLeft: e && /* @__PURE__ */ r(_, { icon: c.icon }),
-        childrenRight: /* @__PURE__ */ r(_, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        onClick: () => u(!n)
+        childrenRight: /* @__PURE__ */ r(_, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        onClick: () => f(!t)
       }
     ) : /* @__PURE__ */ r(
-      N,
+      W,
       {
         ref: d,
         mode: "tertiary",
-        fullWidth: T,
-        label: P ?? "Sélectionner",
-        size: p,
-        onClick: () => u(!n)
+        fullWidth: S,
+        label: F ?? "Sélectionner",
+        size: C,
+        onClick: () => f(!t)
       }
     );
-  }, E = h(null), k = h({}), [y, v] = g(""), f = h(null), K = h({}), S = (e) => {
-    if (!n) return;
+  }, E = m(null), g = m({}), [R, v] = b(""), h = m(null), K = m({}), j = s.filter(
+    (e) => (e.label ?? "").toLowerCase().includes($.toLowerCase())
+  ), N = (e) => {
+    if (!t) return;
     const o = e.key.length === 1 ? e.key.toLowerCase() : "";
     if (!o) return;
-    const a = y + o;
+    const a = R + o;
     v(a);
-    const i = s.find((t) => {
+    const i = s.find((n) => {
       var l;
-      return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
+      return (l = n.label) == null ? void 0 : l.toLowerCase().startsWith(a);
     });
     if (i) {
-      const t = k.current[i.value];
-      t == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      const n = g.current[i.value];
+      n == null || n.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
-    f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+    h.current && clearTimeout(h.current), h.current = setTimeout(() => {
       v("");
     }, 500);
   };
-  w(() => (n ? window.addEventListener("keydown", S) : (window.removeEventListener("keydown", S), v("")), () => {
-    window.removeEventListener("keydown", S);
-  }), [n, y, s]), w(() => {
+  p(() => (t ? window.addEventListener("keydown", N) : (window.removeEventListener("keydown", N), v("")), () => {
+    window.removeEventListener("keydown", N);
+  }), [t, R, s]), p(() => {
     const e = (o) => {
-      if (!n) return;
+      if (!t) return;
       const a = o.key.length === 1 ? o.key.toLowerCase() : "";
       if (!a) return;
-      const i = y + a;
+      const i = R + a;
       v(i);
-      const t = s.find(
+      const n = s.find(
         (l) => {
-          var x;
-          return (x = l.label) == null ? void 0 : x.toLowerCase().startsWith(i);
+          var T;
+          return (T = l.label) == null ? void 0 : T.toLowerCase().startsWith(i);
         }
       );
-      if (t && E.current && t.value in k.current && k.current[t.value]) {
-        const l = E.current, x = k.current[t.value];
+      if (n && E.current && n.value in g.current && g.current[n.value]) {
+        const l = E.current, T = g.current[n.value];
         l.scrollTo({
-          top: x.offsetTop - l.offsetTop,
+          top: T.offsetTop - l.offsetTop,
           behavior: "smooth"
         });
       }
-      f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+      h.current && clearTimeout(h.current), h.current = setTimeout(() => {
         v("");
       }, 700);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [n, s, y]), w(() => {
-    if (!n) return;
+  }, [t, s, R]), p(() => {
+    if (!t) return;
     const e = (o) => {
       const a = o.key.toLowerCase();
       if (a.length === 1) {
         const i = s.find(
-          (t) => {
+          (n) => {
             var l;
-            return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(a);
+            return (l = n.label) == null ? void 0 : l.toLowerCase().startsWith(a);
           }
         );
         if (i) {
-          const t = K.current[i.value];
-          t && t.scrollIntoView({ block: "start", behavior: "smooth" });
+          const n = K.current[i.value];
+          n && n.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [n, s]);
-  const d = h(null);
-  return w(() => {
-    if (n && d.current) {
+  }, [t, s]);
+  const d = m(null);
+  return p(() => {
+    if (t && d.current) {
       const e = d.current.getBoundingClientRect().height;
-      F(L || {
+      P(y || {
         top: `${e + 6}px`,
         left: "0px"
       });
     }
-  }, [n]), /* @__PURE__ */ $("div", { className: m.selectContainer, children: [
-    W(),
+  }, [t]), /* @__PURE__ */ w("div", { className: u.selectContainer, children: [
+    G(),
     /* @__PURE__ */ r(
-      z,
+      J,
       {
-        ref: U,
+        ref: A,
         anchorRef: d,
-        open: n,
-        onClose: () => u(!1),
-        position: V,
+        open: t,
+        onClose: () => f(!1),
+        position: M,
         disableOverlay: !0,
-        className: m.modal,
-        autoCloseCondition: j,
-        children: /* @__PURE__ */ r("div", { className: m.selectList, ref: E, children: s.map((e) => /* @__PURE__ */ $(
-          "div",
-          {
-            ref: (o) => K.current[e.value] = o,
-            className: `${m.children} ${(c == null ? void 0 : c.value) === e.value ? m.active : ""}`,
-            onClick: () => M(e),
-            children: [
-              e.icon && /* @__PURE__ */ r(_, { icon: e.icon, size: 16 }),
-              e.label && /* @__PURE__ */ r("div", { className: m.itemLabel, children: e.label })
-            ]
-          },
-          e.value
-        )) })
+        className: u.modal,
+        autoCloseCondition: V,
+        children: /* @__PURE__ */ w("div", { children: [
+          z && /* @__PURE__ */ w("div", { children: [
+            /* @__PURE__ */ r(
+              H,
+              {
+                type: "text",
+                placeholder: U,
+                status: "ghost",
+                sizeStyle: "s",
+                value: $,
+                onChange: (e) => q(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: u.searchWrapper })
+          ] }),
+          /* @__PURE__ */ w("div", { className: u.selectList, ref: E, children: [
+            j.map((e) => /* @__PURE__ */ w(
+              "div",
+              {
+                ref: (o) => K.current[e.value] = o,
+                className: `${u.children} ${(c == null ? void 0 : c.value) === e.value ? u.active : ""}`,
+                onClick: () => D(e),
+                children: [
+                  e.icon && /* @__PURE__ */ r(_, { icon: e.icon, size: 16 }),
+                  e.label && /* @__PURE__ */ r("div", { className: u.itemLabel, children: e.label })
+                ]
+              },
+              e.value
+            )),
+            j.length === 0 && /* @__PURE__ */ r("div", { className: `${u.noResults} textSmall`, children: "Aucun résultat" })
+          ] })
+        ] })
       }
     )
   ] });
 };
 export {
-  ce as Select
+  me as Select
 };

package/dist/styles/Select.css

@@ -1 +1 @@
-._selectContainer_1o5wx_54{position:relative}._selectContainer_1o5wx_54 ._selected_1o5wx_57{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_1o5wx_54 ._children_1o5wx_61{padding:var(--spacing-xs-6) var(--spacing-xs-5);box-sizing:border-box;width:100%;gap:.5rem;cursor:pointer;font-style:normal;line-height:1.25rem;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._selectContainer_1o5wx_54 ._children_1o5wx_61:hover{background:var(--dropdown-line-background-hover);border-radius:var(--spacing-xs-6)}._selectContainer_1o5wx_54 ._children_1o5wx_61._active_1o5wx_78{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_1o5wx_54 ._selectList_1o5wx_82{max-height:200px;overflow-y:auto;gap:.125rem;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._selectContainer_1o5wx_54 ._modal_1o5wx_91{box-shadow:0 4px 4px 0 var(--shadow-color-lowest);border-radius:4px;padding:.25rem;animation:_dropdownFadeIn_1o5wx_1 .2s ease-out;transform-origin:top left}._selectContainer_1o5wx_54 ._itemLabel_1o5wx_98{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes _dropdownFadeIn_1o5wx_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
+._selectContainer_133eb_54{position:relative}._selectContainer_133eb_54 ._selected_133eb_57{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_133eb_54 ._children_133eb_61{padding:var(--spacing-xs-6) var(--spacing-xs-5);box-sizing:border-box;width:100%;gap:.5rem;cursor:pointer;font-style:normal;line-height:1.25rem;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._selectContainer_133eb_54 ._children_133eb_61:hover{background:var(--dropdown-line-background-hover);border-radius:var(--spacing-xs-6)}._selectContainer_133eb_54 ._children_133eb_61._active_133eb_78{background:var(--button-tertiary-pressed-background);border-radius:var(--spacing-xs-6)}._selectContainer_133eb_54 ._selectList_133eb_82{max-height:200px;overflow-y:auto;gap:.125rem;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._selectContainer_133eb_54 ._modal_133eb_91{box-shadow:0 4px 4px 0 var(--shadow-color-lowest);border-radius:4px;padding:.25rem;animation:_dropdownFadeIn_133eb_1 .2s ease-out;transform-origin:top left}._selectContainer_133eb_54 ._itemLabel_133eb_98{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._selectContainer_133eb_54 ._searchWrapper_133eb_103{background-color:var(--general-border-window);height:1px;width:100%;margin-bottom:.25rem}._selectContainer_133eb_54 ._noResults_133eb_109{text-align:center;padding:.5rem 0}@keyframes _dropdownFadeIn_133eb_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

package/package.json

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