@situaction/traq-ui-ste 1.1.35 → 1.1.37

package/dist/components/editable-select/EditableSelect.d.ts

@@ -15,8 +15,6 @@ interface EditableSelectProps {
     onSelect?: (selected: SelectItem) => void;
     /** The currently selected item */
     selected?: SelectItem;
-    /** Condition that automatically closes the dropdown */
-    autoCloseCondition?: boolean;
     /** If true, the select takes full width */
     fullWidth?: boolean;
 }
@@ -25,5 +23,5 @@ interface EditableSelectProps {
  * and a Select dropdown based on the `edit` prop. It is commonly used
  * in forms or data views where inline editing is required.
  */
-export declare const EditableSelect: ({ label, listItems, value, placeholder, edit, onSelect, selected, autoCloseCondition, fullWidth }: EditableSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableSelect: ({ label, listItems, value, placeholder, edit, onSelect, selected, fullWidth }: EditableSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/editable-select/EditableSelect.js

@@ -1,37 +1,36 @@
-import { jsxs as l, Fragment as S, jsx as e } from "react/jsx-runtime";
-import { Select as x } from "../select/Select.js";
-import '../../styles/EditableSelect.css';const p = "_editableSelect_6vsm4_30", _ = "_statiqueField_6vsm4_40", i = {
-  editableSelect: p,
-  statiqueField: _
-}, F = ({
-  label: s,
+import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { Select as S } from "../select/Select.js";
+import '../../styles/EditableSelect.css';const x = "_editableSelect_j0aoc_30", f = "_statiqueField_j0aoc_40", s = {
+  editableSelect: x,
+  statiqueField: f
+}, _ = ({
+  label: l,
   listItems: a,
   value: t,
   placeholder: c,
   edit: d,
-  onSelect: m,
-  selected: r,
-  autoCloseCondition: n = !1,
+  onSelect: r,
+  selected: n,
   fullWidth: o = !1
-}) => d ? /* @__PURE__ */ l(S, { children: [
-  /* @__PURE__ */ e("span", { className: "textSmall", children: s }),
+}) => d ? /* @__PURE__ */ i(m, { children: [
+  /* @__PURE__ */ e("span", { className: "textSmall", children: l }),
   /* @__PURE__ */ e(
-    x,
+    S,
     {
       size: "s",
       listItem: a,
       placeholder: c,
       modeDisplay: "text",
-      onSelect: m,
-      selected: r,
-      autoCloseCondition: n,
-      fullWidth: o
+      onSelect: r,
+      selected: n,
+      autoCloseCondition: !0,
+      fullWidth: o ?? !1
     }
   )
-] }) : /* @__PURE__ */ l("div", { className: i.editableSelect, children: [
-  /* @__PURE__ */ e("span", { className: "textSmall", children: s }),
-  /* @__PURE__ */ e("div", { className: `${i.statiqueField} textSmall`, children: (t == null ? void 0 : t.trim()) || "-" })
+] }) : /* @__PURE__ */ i("div", { className: s.editableSelect, children: [
+  /* @__PURE__ */ e("span", { className: "textSmall", children: l }),
+  /* @__PURE__ */ e("div", { className: `${s.statiqueField} textSmall`, children: (t == null ? void 0 : t.trim()) || "-" })
 ] });
 export {
-  F as EditableSelect
+  _ as EditableSelect
 };

package/dist/components/modal/Modal.d.ts

@@ -1,17 +1,13 @@
 import { ReactNode, RefObject } from 'react';
 
 export interface ModalProps {
-    /** Determines whether the modal is open or closed.
-     * If true, the modal is displayed; if false, it is hidden. */
+    /** Determines whether the modal is open or closed */
     open: boolean;
-    /** Callback function to handle closing the modal.
-     * Triggered when clicking outside the modal content. */
+    /** Callback function to handle closing the modal */
     onClose: () => void;
-    /** Content to be displayed inside the modal.
-     * Typically includes child components or HTML elements. */
+    /** Content to be displayed inside the modal */
     children: ReactNode;
-    /** Optional object to specify the positioning of the modal.
-     * Supports CSS properties such as top, left, right, bottom, and width. */
+    /** Optional custom position for the modal */
     position?: {
         top?: string;
         left?: string;
@@ -19,17 +15,15 @@ export interface ModalProps {
         bottom?: string;
         width?: string;
     };
-    /** Optional additional CSS class names to apply custom styles to the modal. */
+    /** Centers the modal automatically in the middle of the screen */
+    centered?: boolean;
+    /** Optional additional CSS classes */
     className?: string;
-    /** Option to disable the overlay and the blocking of events outside the modal */
+    /** Disable overlay and event blocking */
     disableOverlay?: boolean;
-    /** Condition to close the modal */
+    /** Auto-close condition */
     autoCloseCondition?: boolean;
+    /** Optional anchor reference for positioning */
     anchorRef?: RefObject<HTMLElement>;
 }
-/**
- * Modal component that renders content in a floating layer above the main UI.
- * It supports custom positioning and closes when clicking outside of its content area.
- * The component uses a ref to detect clicks outside the modal.
- */
 export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/modal/Modal.js

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

package/dist/components/select/Select.js

@@ -18,7 +18,7 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
 }, ce = ({
   selected: _,
   size: b = "m",
-  listItem: c,
+  listItem: s,
   modeDisplay: g = "all",
   onSelect: B,
   positionOverride: R,
@@ -29,17 +29,17 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
   const [n, u] = x(!1), U = h(null), [V, F] = x({
     top: "calc(100% + 6px)",
     left: "0px"
-  }), [s, L] = x(_ ?? null);
+  }), [c, L] = x(_ ?? null);
   w(() => {
-    _ ? L(_) : c.length > 0 ? L(c[0]) : L(null), console.log(c);
-  }, [_, c]), w(() => {
+    _ ? L(_) : s.length > 0 ? L(s[0]) : L(null);
+  }, [_, s]), 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(
+    const e = c == null ? void 0 : c.icon, o = (c == null ? void 0 : c.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: c.icon }) }) : g === "text" ? /* @__PURE__ */ r(
       N,
       {
         ref: d,
@@ -58,7 +58,7 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
         label: o,
         size: b,
         fullWidth: T,
-        childrenLeft: e && /* @__PURE__ */ r(p, { icon: s.icon }),
+        childrenLeft: e && /* @__PURE__ */ r(p, { icon: c.icon }),
         childrenRight: /* @__PURE__ */ r(p, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
         onClick: () => u(!n)
       }
@@ -77,11 +77,11 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
     if (!n) return;
     const o = e.key.length === 1 ? e.key.toLowerCase() : "";
     if (!o) return;
-    const i = k + o;
-    v(i);
-    const a = c.find((t) => {
-      var l;
-      return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(i);
+    const l = k + o;
+    v(l);
+    const a = s.find((t) => {
+      var i;
+      return (i = t.label) == null ? void 0 : i.toLowerCase().startsWith(l);
     });
     if (a) {
       const t = C.current[a.value];
@@ -93,23 +93,23 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
   };
   w(() => (n ? window.addEventListener("keydown", S) : (window.removeEventListener("keydown", S), v("")), () => {
     window.removeEventListener("keydown", S);
-  }), [n, k, c]), w(() => {
+  }), [n, k, s]), w(() => {
     const e = (o) => {
       if (!n) return;
-      const i = o.key.length === 1 ? o.key.toLowerCase() : "";
-      if (!i) return;
-      const a = k + i;
+      const l = o.key.length === 1 ? o.key.toLowerCase() : "";
+      if (!l) return;
+      const a = k + l;
       v(a);
-      const t = c.find(
-        (l) => {
+      const t = s.find(
+        (i) => {
           var y;
-          return (y = l.label) == null ? void 0 : y.toLowerCase().startsWith(a);
+          return (y = i.label) == null ? void 0 : y.toLowerCase().startsWith(a);
         }
       );
       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,
+        const i = E.current, y = C.current[t.value];
+        i.scrollTo({
+          top: y.offsetTop - i.offsetTop,
           behavior: "smooth"
         });
       }
@@ -118,15 +118,15 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
       }, 700);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [n, c, k]), w(() => {
+  }, [n, s, k]), w(() => {
     if (!n) return;
     const e = (o) => {
-      const i = o.key.toLowerCase();
-      if (i.length === 1) {
-        const a = c.find(
+      const l = o.key.toLowerCase();
+      if (l.length === 1) {
+        const a = s.find(
           (t) => {
-            var l;
-            return (l = t.label) == null ? void 0 : l.toLowerCase().startsWith(i);
+            var i;
+            return (i = t.label) == null ? void 0 : i.toLowerCase().startsWith(l);
           }
         );
         if (a) {
@@ -136,7 +136,7 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [n, c]);
+  }, [n, s]);
   const d = h(null);
   return w(() => {
     if (n && d.current) {
@@ -159,11 +159,11 @@ const z = "_selectContainer_1o5wx_54", A = "_selected_1o5wx_57", D = "_children_
         disableOverlay: !0,
         className: m.modal,
         autoCloseCondition: j,
-        children: /* @__PURE__ */ r("div", { className: m.selectList, ref: E, children: c.map((e) => /* @__PURE__ */ $(
+        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} ${(s == null ? void 0 : s.value) === e.value ? m.active : ""}`,
+            className: `${m.children} ${(c == null ? void 0 : c.value) === e.value ? m.active : ""}`,
             onClick: () => M(e),
             children: [
               e.icon && /* @__PURE__ */ r(p, { icon: e.icon, size: 16 }),

package/dist/styles/EditableSelect.css

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

package/dist/styles/Modal.css

@@ -1 +1 @@
-@charset "UTF-8";._overlay_lv2n7_2{position:fixed;top:0;left:0;right:0;bottom:0;z-index:3;pointer-events:auto}._modalContent_lv2n7_12{position:absolute;z-index:12;border:1px solid var(--general-border-window);background-color:var(--background-primary)}
+._overlay_b1r7c_1{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0000004d;z-index:11;pointer-events:auto}._modalContent_b1r7c_12{position:absolute;z-index:12;border:1px solid var(--general-border-window);background-color:var(--background-primary)}._centered_b1r7c_19{max-width:90%;max-height:90%}

package/package.json

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