@situaction/traq-ui-ste 1.1.38 → 1.1.40

package/dist/components/editable-field/EditableField.d.ts

@@ -15,10 +15,12 @@ interface EditableFieldProps extends Partial<LabelInputProps> {
     edit: boolean;
     /** Callback when value is changed (only in edit mode) */
     onChange?: (val: string) => void;
+    /** If true, value is displayed as a clickable link */
+    isLink?: boolean;
 }
 /**
  * EditableField displays either a read-only value or an editable input.
  * It supports all props from InputLabel.
  */
-export declare const EditableField: ({ label, value, placeholder, edit, onChange, ...inputLabelProps }: EditableFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditableField: ({ label, value, placeholder, edit, onChange, isLink, ...inputLabelProps }: EditableFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,30 +1,47 @@
-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_13at1_30", o = "_statiqueField_13at1_40", l = {
-  editableField: m,
-  statiqueField: o
-}, p = ({
-  label: i,
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { InputLabel as p } from "../input-label/InputLabel.js";
+import '../../styles/EditableField.css';const F = "_editableField_1gd32_30", _ = "_statiqueField_1gd32_40", b = "_link_1gd32_48", i = {
+  editableField: F,
+  statiqueField: _,
+  link: b
+}, k = ({
+  label: l,
   value: e,
   placeholder: d,
-  edit: s,
-  onChange: a,
-  ...r
+  edit: a,
+  onChange: n,
+  isLink: r = !1,
+  ...o
   // Spread to pass all remaining props to InputLabel
-}) => s ? /* @__PURE__ */ t(
-  c,
-  {
-    label: i,
-    defaultValue: e || "",
-    placeholder: d || "",
-    onSubmit: a || (() => {
-    }),
-    ...r
-  }
-) : /* @__PURE__ */ n("div", { className: l.editableField, children: [
-  /* @__PURE__ */ t("span", { className: "textSmall", children: i }),
-  /* @__PURE__ */ t("div", { className: `${l.statiqueField} textSmall`, children: (e == null ? void 0 : e.trim()) || " " })
-] });
+}) => {
+  if (a)
+    return /* @__PURE__ */ t(
+      p,
+      {
+        label: l,
+        defaultValue: e || "",
+        placeholder: d || "",
+        onSubmit: n || (() => {
+        }),
+        ...o
+      }
+    );
+  const s = (e == null ? void 0 : e.trim()) || " ";
+  return /* @__PURE__ */ m("div", { className: i.editableField, children: [
+    /* @__PURE__ */ t("span", { className: "textSmall", children: l }),
+    r && e ? /* @__PURE__ */ t(
+      "a",
+      {
+        href: e,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: `${i.statiqueField} ${i.link} textSmall`,
+        onClick: (c) => c.stopPropagation(),
+        children: s
+      }
+    ) : /* @__PURE__ */ t("div", { className: `${i.statiqueField} textSmall`, children: s })
+  ] });
+};
 export {
-  p as EditableField
+  k as EditableField
 };

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

@@ -25,5 +25,7 @@ export interface ModalProps {
     autoCloseCondition?: boolean;
     /** Optional anchor reference for positioning */
     anchorRef?: RefObject<HTMLElement>;
+    /** If true, show a background overlay behind the panel */
+    overlayBackground?: boolean;
 }
 export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/modal/Modal.js

@@ -1,47 +1,49 @@
-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 = {
+import { jsxs as x, Fragment as B, jsx as m } from "react/jsx-runtime";
+import { forwardRef as h, useRef as j, useState as C, useEffect as E, useLayoutEffect as N } from "react";
+import '../../styles/Modal.css';const F = "_overlay_1hu8i_1", L = "_overlayBackground_1hu8i_11", M = "_modalContent_1hu8i_15", S = "_centered_1hu8i_22", c = {
   overlay: F,
-  modalContent: L,
-  centered: M
-}, Y = k(
+  overlayBackground: L,
+  modalContent: M,
+  centered: S
+}, q = h(
   ({
-    open: a,
-    onClose: c,
-    children: _,
+    open: t,
+    onClose: d,
+    children: v,
     position: l,
     centered: r = !1,
-    className: b,
-    disableOverlay: v = !1,
-    autoCloseCondition: m,
-    anchorRef: f
-  }, g) => {
-    const w = C(null), y = g || w, [e, x] = E();
-    return N(() => {
-      !m && m !== void 0 && a && c();
-    }, [m, a, c]), B(() => {
-      if (f != null && f.current && a && !l && !r) {
-        const t = f.current.getBoundingClientRect();
-        x({
-          top: `${t.bottom + window.scrollY}px`,
-          left: `${t.left + window.scrollX}px`
+    className: _,
+    disableOverlay: g = !1,
+    autoCloseCondition: u,
+    anchorRef: f,
+    overlayBackground: y = !1
+  }, w) => {
+    const $ = j(null), k = w || $, [e, b] = C();
+    return E(() => {
+      !u && u !== void 0 && t && d();
+    }, [u, t, d]), N(() => {
+      if (f != null && f.current && t && !l && !r) {
+        const a = f.current.getBoundingClientRect();
+        b({
+          top: `${a.bottom + window.scrollY}px`,
+          left: `${a.left + window.scrollX}px`
         });
       }
-    }, [f, a, l, r]), a ? /* @__PURE__ */ $(j, { children: [
-      !v && /* @__PURE__ */ u(
+    }, [f, t, l, r]), t ? /* @__PURE__ */ x(B, { children: [
+      !g && /* @__PURE__ */ m(
         "div",
         {
-          className: d.overlay,
-          onClick: (t) => {
-            t.stopPropagation(), c();
+          className: `${c.overlay} ${y ? c.overlayBackground : ""}`,
+          onClick: (a) => {
+            a.stopPropagation(), d();
           }
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ m(
         "div",
         {
-          ref: y,
-          className: `${d.modalContent} ${b || ""} ${r ? d.centered : ""}`,
+          ref: k,
+          className: `${c.modalContent} ${_ || ""} ${r ? c.centered : ""}`,
           style: {
             position: "absolute",
             top: r ? "50%" : (l == null ? void 0 : l.top) ?? (e == null ? void 0 : e.top),
@@ -51,13 +53,13 @@ import '../../styles/Modal.css';const F = "_overlay_b1r7c_1", L = "_modalContent
             width: l == null ? void 0 : l.width,
             transform: r || !(l != null && l.top) && !(l != null && l.left) && !e ? "translate(-50%, -50%)" : void 0
           },
-          onClick: (t) => t.stopPropagation(),
-          children: _
+          onClick: (a) => a.stopPropagation(),
+          children: v
         }
       )
     ] }) : null;
   }
 );
 export {
-  Y as Modal
+  q as Modal
 };

package/dist/components/panel/side-panel/SidePanel.js

@@ -1,49 +1,47 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { useState as y, useRef as L, useEffect as f } from "react";
-import '../../../styles/SidePanel.css';const x = "_panel_lk5yy_1", v = "_openPanelBtn_lk5yy_9", b = "_box_lk5yy_18", B = "_panelLeft_lk5yy_29", C = "_panelRight_lk5yy_36", H = "_panelOpenedLeft_lk5yy_43", S = "_panelOpenedRight_lk5yy_47", E = "_panelHidden_lk5yy_51", N = "_displayPanel_lk5yy_55", g = "_hidePanel_lk5yy_59", e = {
-  panel: x,
-  openPanelBtn: v,
-  box: b,
-  panelLeft: B,
-  panelRight: C,
-  panelOpenedLeft: H,
-  panelOpenedRight: S,
-  panelHidden: E,
-  displayPanel: N,
-  hidePanel: g
-}, I = ({
-  children: u,
-  width: s,
-  left: c = !0,
+import { jsx as r } from "react/jsx-runtime";
+import { useState as _, useRef as R, useEffect as y } from "react";
+import '../../../styles/SidePanel.css';const L = "_panel_lk5yy_1", x = "_openPanelBtn_lk5yy_9", v = "_box_lk5yy_18", b = "_panelLeft_lk5yy_29", B = "_panelRight_lk5yy_36", C = "_panelOpenedLeft_lk5yy_43", H = "_panelOpenedRight_lk5yy_47", S = "_panelHidden_lk5yy_51", E = "_displayPanel_lk5yy_55", N = "_hidePanel_lk5yy_59", e = {
+  panel: L,
+  openPanelBtn: x,
+  box: v,
+  panelLeft: b,
+  panelRight: B,
+  panelOpenedLeft: C,
+  panelOpenedRight: H,
+  panelHidden: S,
+  displayPanel: E,
+  hidePanel: N
+}, $ = ({
+  children: f,
+  width: a,
+  left: o = !0,
   opened: n = !1,
   onToggle: t
 }) => {
-  const [l, i] = y(n), [m, p] = y(n), a = L(null), h = {
-    "--dynamic-left": `-${s}`,
-    "--dynamic-right": `-${s}`,
-    width: s
-  }, P = c ? e.panelLeft : e.panelRight, k = c ? e.panelOpenedLeft : e.panelOpenedRight, O = [
+  const [l, s] = _(n), [u, i] = _(n), p = R(null), m = {
+    "--dynamic-left": `-${a}`,
+    "--dynamic-right": `-${a}`,
+    width: a
+  }, h = o ? e.panelLeft : e.panelRight, P = o ? e.panelOpenedLeft : e.panelOpenedRight, k = [
     e.panel,
-    P,
+    h,
     !l && e.panelHidden,
-    l && k,
-    m ? e.displayPanel : e.hidePanel
+    l && P,
+    u ? e.displayPanel : e.hidePanel
   ].filter(Boolean).join(" ");
-  return f(() => {
-    n ? (p(!0), setTimeout(() => i(!0), 10)) : (i(!1), setTimeout(() => p(!1), 300));
-  }, [n]), f(() => {
-    const d = (R) => {
-      var r;
-      const o = R.target;
-      o.closest("[data-ignore-outside-click]") || // déjà présent
-      (r = a.current) != null && r.contains(o) || a.current && !a.current.contains(o) && (i(!1), t == null || t(!1), setTimeout(() => p(!1), 300));
+  return y(() => {
+    n ? (i(!0), setTimeout(() => s(!0), 10)) : (s(!1), setTimeout(() => i(!1), 300));
+  }, [n]), y(() => {
+    const d = (O) => {
+      const c = O.target;
+      c.closest("[data-ignore-outside-click]") || p.current && !p.current.contains(c) && (s(!1), t == null || t(!1), setTimeout(() => i(!1), 300));
     };
     if (l)
       return document.addEventListener("mousedown", d), () => {
         document.removeEventListener("mousedown", d);
       };
-  }, [l, t]), /* @__PURE__ */ _("div", { style: h, className: O, children: /* @__PURE__ */ _("div", { ref: a, className: e.box, children: u }) });
+  }, [l, t]), /* @__PURE__ */ r("div", { style: m, className: k, children: /* @__PURE__ */ r("div", { ref: p, className: e.box, children: f }) });
 };
 export {
-  I as SidePanel
+  $ as SidePanel
 };

package/dist/styles/EditableField.css

@@ -1 +1 @@
-._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}
+._editableField_1gd32_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem;cursor:default}._statiqueField_1gd32_40{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem;box-sizing:border-box}._link_1gd32_48{color:var(--primary-color);text-decoration:underline;cursor:pointer}._link_1gd32_48:hover{text-decoration:none}

package/dist/styles/Modal.css

@@ -1 +1 @@
-._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%}
+._overlay_1hu8i_1{position:fixed;top:0;left:0;right:0;bottom:0;z-index:11;pointer-events:auto}._overlayBackground_1hu8i_11{background-color:#0000004d}._modalContent_1hu8i_15{position:absolute;z-index:12;border:1px solid var(--general-border-window);background-color:var(--background-primary)}._centered_1hu8i_22{max-width:90%;max-height:90%}

package/package.json

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