@situaction/traq-ui-ste 1.1.33 → 1.1.35

package/dist/components/editable-field/EditableField.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { InputLabel as c } from "../input-label/InputLabel.js";
-import '../../styles/EditableField.css';const m = "_editableField_12vkl_30", o = "_statiqueField_12vkl_40", l = {
+import '../../styles/EditableField.css';const m = "_editableField_13at1_30", o = "_statiqueField_13at1_40", l = {
   editableField: m,
   statiqueField: o
 }, p = ({

package/dist/components/modal/Modal.js

@@ -1,54 +1,54 @@
-import { jsxs as N, Fragment as S, jsx as v } from "react/jsx-runtime";
-import { forwardRef as W, useRef as k, useState as w, useEffect as g, useLayoutEffect as n } from "react";
-import '../../styles/Modal.css';const q = "_overlay_lv2n7_2", A = "_modalContent_lv2n7_12", y = {
-  overlay: q,
-  modalContent: A
-}, D = W(
-  ({ open: l, onClose: a, children: x, position: e, className: _, disableOverlay: b = !1, autoCloseCondition: m, anchorRef: d }, E) => {
-    const $ = k(null), c = E || $, [r, h] = w(), [L, j] = w();
-    return g(() => {
-      !m && m !== void 0 && l && a();
-    }, [m, l, a]), n(() => {
-      if (d != null && d.current && l && !e) {
-        const t = d.current.getBoundingClientRect();
-        h({
-          top: `${t.bottom + window.scrollY}px`,
-          left: `${t.left + window.scrollX}px`
-        }), j(`${t.width}px`);
+import { jsxs as j, Fragment as M, jsx as v } from "react/jsx-runtime";
+import { forwardRef as N, useRef as S, useState as k, useEffect as w, useLayoutEffect as q } from "react";
+import '../../styles/Modal.css';const A = "_overlay_lv2n7_2", B = "_modalContent_lv2n7_12", g = {
+  overlay: A,
+  modalContent: B
+}, O = N(
+  ({ open: t, onClose: d, children: y, position: e, className: _, disableOverlay: b = !1, autoCloseCondition: m, anchorRef: a }, x) => {
+    const E = S(null), c = x || E, [l, $] = k();
+    return w(() => {
+      !m && m !== void 0 && t && d();
+    }, [m, t, d]), q(() => {
+      if (a != null && a.current && t && !e) {
+        const r = a.current.getBoundingClientRect();
+        $({
+          top: `${r.bottom + window.scrollY}px`,
+          left: `${r.left + window.scrollX}px`
+        });
       }
-    }, [d, l, e]), g(() => {
-      const t = (u) => {
+    }, [a, t, e]), w(() => {
+      const r = (u) => {
         const f = c.current;
-        f && !f.contains(u.target) && l && ![...document.querySelectorAll(".dialog")].some(
-          (M) => M.contains(u.target)
-        ) && a();
+        f && !f.contains(u.target) && t && ![...document.querySelectorAll(".dialog")].some(
+          (L) => L.contains(u.target)
+        ) && d();
       };
-      return document.addEventListener("mousedown", t), () => {
-        document.removeEventListener("mousedown", t);
+      return document.addEventListener("mousedown", r), () => {
+        document.removeEventListener("mousedown", r);
       };
-    }, [a, l, c]), l ? /* @__PURE__ */ N(S, { children: [
-      !b && /* @__PURE__ */ v("div", { className: y.overlay }),
+    }, [d, t, c]), t ? /* @__PURE__ */ j(M, { children: [
+      !b && /* @__PURE__ */ v("div", { className: g.overlay }),
       /* @__PURE__ */ v(
         "div",
         {
           ref: c,
-          className: `${y.modalContent} ${_ || ""}`,
-          onMouseDown: (t) => t.stopPropagation(),
+          className: `${g.modalContent} ${_ || ""}`,
+          onMouseDown: (r) => r.stopPropagation(),
           style: {
             position: "absolute",
-            top: (e == null ? void 0 : e.top) ?? (r == null ? void 0 : r.top) ?? "50%",
-            left: (e == null ? void 0 : e.left) ?? (r == null ? void 0 : r.left) ?? "50%",
+            top: (e == null ? void 0 : e.top) ?? (l == null ? void 0 : l.top) ?? "50%",
+            left: (e == null ? void 0 : e.left) ?? (l == null ? void 0 : l.left) ?? "50%",
             right: e == null ? void 0 : e.right,
             bottom: e == null ? void 0 : e.bottom,
-            width: (e == null ? void 0 : e.width) ?? L ?? "auto",
-            transform: !(e != null && e.top) && !(e != null && e.left) && !r ? "translate(-50%, -50%)" : void 0
+            width: e == null ? void 0 : e.width,
+            transform: !(e != null && e.top) && !(e != null && e.left) && !l ? "translate(-50%, -50%)" : void 0
           },
-          children: x
+          children: y
         }
       )
     ] }) : null;
   }
 );
 export {
-  D as Modal
+  O as Modal
 };

package/dist/components/select/Select.js

@@ -1,13 +1,13 @@
 import { jsxs as $, jsx as r } from "react/jsx-runtime";
-import { useState as k, useRef as h, useEffect as w } from "react";
-import { Button as S } from "../button/Button.js";
-import { IconButton as O } from "../icon-button/IconButton.js";
+import { useState as x, useRef as h, useEffect as w } from "react";
+import { Button as N } from "../button/Button.js";
+import { IconButton as W } from "../icon-button/IconButton.js";
 import { Icon as p } from "../icon/Icon.js";
-import { Modal as W } from "../modal/Modal.js";
+import { Modal as q } from "../modal/Modal.js";
 import "../theme/ThemeContext.js";
 import '../../styles/Size.css';import '../../styles/Select.css';/* empty css                   */
-const q = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_1o5wx_61", G = "_active_1o5wx_78", H = "_selectList_1o5wx_82", J = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
-  selectContainer: q,
+const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_1o5wx_61", G = "_active_1o5wx_78", H = "_selectList_1o5wx_82", J = "_modal_1o5wx_91", Q = "_dropdownFadeIn_1o5wx_1", X = "_itemLabel_1o5wx_98", m = {
+  selectContainer: z,
   selected: A,
   children: D,
   active: G,
@@ -16,101 +16,100 @@ const q = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
   dropdownFadeIn: Q,
   itemLabel: X
 }, ce = ({
-  selected: y,
-  size: _ = "m",
-  listItem: a,
-  modeDisplay: x = "all",
-  onSelect: N,
-  positionOverride: g,
-  placeholder: B = "Sélectionner",
+  selected: _,
+  size: b = "m",
+  listItem: c,
+  modeDisplay: g = "all",
+  onSelect: B,
+  positionOverride: R,
+  placeholder: P = "Sélectionner",
   autoCloseCondition: j,
-  fullWidth: R = !1
+  fullWidth: T = !1
 }) => {
-  const [t, u] = k(!1), U = h(null), [V, P] = k({
+  const [n, u] = x(!1), U = h(null), [V, F] = x({
     top: "calc(100% + 6px)",
-    left: "0px",
-    width: "100%"
-  }), [c, F] = k(y ?? null);
+    left: "0px"
+  }), [s, L] = x(_ ?? null);
   w(() => {
-    F(y ?? null);
-  }, [y]), w(() => {
-    g && P(g);
-  }, [g]);
-  const I = (e) => {
-    F(e), u(!1), N && N(e);
-  }, M = () => {
-    const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.label) || B || "Sélectionner";
-    return x === "icon" && e ? /* @__PURE__ */ r(O, { ref: d, mode: "tertiary", size: _, onClick: () => u(!t), children: /* @__PURE__ */ r(p, { icon: c.icon }) }) : x === "text" ? /* @__PURE__ */ r(
-      S,
+    _ ? L(_) : c.length > 0 ? L(c[0]) : L(null), console.log(c);
+  }, [_, c]), w(() => {
+    R && F(R);
+  }, [R]);
+  const M = (e) => {
+    L(e), u(!1), B && B(e);
+  }, O = () => {
+    const e = s == null ? void 0 : s.icon, o = (s == null ? void 0 : s.label) || P || "Sélectionner";
+    return g === "icon" && e ? /* @__PURE__ */ r(W, { ref: d, mode: "tertiary", size: b, onClick: () => u(!n), children: /* @__PURE__ */ r(p, { icon: s.icon }) }) : g === "text" ? /* @__PURE__ */ r(
+      N,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        childrenRight: /* @__PURE__ */ r(p, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        size: _,
-        fullWidth: R,
-        onClick: () => u(!t)
+        childrenRight: /* @__PURE__ */ r(p, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        size: b,
+        fullWidth: T,
+        onClick: () => u(!n)
       }
-    ) : x === "all" ? /* @__PURE__ */ r(
-      S,
+    ) : g === "all" ? /* @__PURE__ */ r(
+      N,
       {
         ref: d,
         mode: "tertiary",
         label: o,
-        size: _,
-        fullWidth: R,
-        childrenLeft: e && /* @__PURE__ */ r(p, { icon: c.icon }),
-        childrenRight: /* @__PURE__ */ r(p, { icon: t ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
-        onClick: () => u(!t)
+        size: b,
+        fullWidth: T,
+        childrenLeft: e && /* @__PURE__ */ r(p, { icon: s.icon }),
+        childrenRight: /* @__PURE__ */ r(p, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        onClick: () => u(!n)
       }
     ) : /* @__PURE__ */ r(
-      S,
+      N,
       {
         ref: d,
         mode: "tertiary",
-        fullWidth: R,
-        label: B ?? "Sélectionner",
-        size: _,
-        onClick: () => u(!t)
+        fullWidth: T,
+        label: P ?? "Sélectionner",
+        size: b,
+        onClick: () => u(!n)
       }
     );
-  }, T = h(null), b = h({}), [L, v] = k(""), f = h(null), K = h({}), E = (e) => {
-    if (!t) return;
+  }, E = h(null), C = h({}), [k, v] = x(""), f = h(null), K = h({}), S = (e) => {
+    if (!n) return;
     const o = e.key.length === 1 ? e.key.toLowerCase() : "";
     if (!o) return;
-    const i = L + o;
+    const i = k + o;
     v(i);
-    const l = a.find((n) => {
-      var s;
-      return (s = n.label) == null ? void 0 : s.toLowerCase().startsWith(i);
+    const a = c.find((t) => {
+      var l;
+      return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(i);
     });
-    if (l) {
-      const n = b.current[l.value];
-      n == null || n.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    if (a) {
+      const t = C.current[a.value];
+      t == null || t.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
     f.current && clearTimeout(f.current), f.current = setTimeout(() => {
       v("");
     }, 500);
   };
-  w(() => (t ? window.addEventListener("keydown", E) : (window.removeEventListener("keydown", E), v("")), () => {
-    window.removeEventListener("keydown", E);
-  }), [t, L, a]), w(() => {
+  w(() => (n ? window.addEventListener("keydown", S) : (window.removeEventListener("keydown", S), v("")), () => {
+    window.removeEventListener("keydown", S);
+  }), [n, k, c]), w(() => {
     const e = (o) => {
-      if (!t) return;
+      if (!n) return;
       const i = o.key.length === 1 ? o.key.toLowerCase() : "";
       if (!i) return;
-      const l = L + i;
-      v(l);
-      const n = a.find(
-        (s) => {
-          var C;
-          return (C = s.label) == null ? void 0 : C.toLowerCase().startsWith(l);
+      const a = k + i;
+      v(a);
+      const t = c.find(
+        (l) => {
+          var y;
+          return (y = l.label) == null ? void 0 : y.toLowerCase().startsWith(a);
         }
       );
-      if (n && T.current && n.value in b.current && b.current[n.value]) {
-        const s = T.current, C = b.current[n.value];
-        s.scrollTo({
-          top: C.offsetTop - s.offsetTop,
+      if (t && E.current && t.value in C.current && C.current[t.value]) {
+        const l = E.current, y = C.current[t.value];
+        l.scrollTo({
+          top: y.offsetTop - l.offsetTop,
           behavior: "smooth"
         });
       }
@@ -119,56 +118,55 @@ const q = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
       }, 700);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [t, a, L]), w(() => {
-    if (!t) return;
+  }, [n, c, k]), w(() => {
+    if (!n) return;
     const e = (o) => {
       const i = o.key.toLowerCase();
       if (i.length === 1) {
-        const l = a.find(
-          (n) => {
-            var s;
-            return (s = n.label) == null ? void 0 : s.toLowerCase().startsWith(i);
+        const a = c.find(
+          (t) => {
+            var l;
+            return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(i);
           }
         );
-        if (l) {
-          const n = K.current[l.value];
-          n && n.scrollIntoView({ block: "start", behavior: "smooth" });
+        if (a) {
+          const t = K.current[a.value];
+          t && t.scrollIntoView({ block: "start", behavior: "smooth" });
         }
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [t, a]);
+  }, [n, c]);
   const d = h(null);
   return w(() => {
-    if (t && d.current) {
+    if (n && d.current) {
       const e = d.current.getBoundingClientRect().height;
-      P({
+      F({
         top: `${e + 6}px`,
-        left: "0px",
-        width: "100%"
+        left: "0px"
       });
     }
-  }, [t]), /* @__PURE__ */ $("div", { className: m.selectContainer, children: [
-    M(),
+  }, [n]), /* @__PURE__ */ $("div", { className: m.selectContainer, children: [
+    O(),
     /* @__PURE__ */ r(
-      W,
+      q,
       {
         ref: U,
         anchorRef: d,
-        open: t,
+        open: n,
         onClose: () => u(!1),
         position: V,
         disableOverlay: !0,
         className: m.modal,
         autoCloseCondition: j,
-        children: /* @__PURE__ */ r("div", { className: m.selectList, ref: T, children: a.map((e) => /* @__PURE__ */ $(
+        children: /* @__PURE__ */ r("div", { className: m.selectList, ref: E, children: c.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: () => I(e),
+            className: `${m.children} ${(s == null ? void 0 : s.value) === e.value ? m.active : ""}`,
+            onClick: () => M(e),
             children: [
-              e.icon && /* @__PURE__ */ r(p, { icon: e.icon }),
+              e.icon && /* @__PURE__ */ r(p, { icon: e.icon, size: 16 }),
               e.label && /* @__PURE__ */ r("div", { className: m.itemLabel, children: e.label })
             ]
           },

package/dist/styles/EditableField.css

@@ -1 +1 @@
-._editableField_12vkl_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem;cursor:default}._statiqueField_12vkl_40{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}
+._editableField_13at1_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem;cursor:default}._statiqueField_13at1_40{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem;box-sizing:border-box}

package/package.json

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