@situaction/traq-ui-ste 1.2.28 → 1.2.29

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

@@ -27,5 +27,7 @@ export interface ModalProps {
     anchorRef?: RefObject<HTMLElement>;
     /** If true, show a background overlay behind the panel */
     overlayBackground?: boolean;
+    /** Base z-index for the modal stack */
+    zIndex?: number;
 }
 export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/modal/Modal.js

@@ -1,65 +1,76 @@
-import { jsxs as x, Fragment as B, jsx as m } from "react/jsx-runtime";
+import { jsxs as D, Fragment as P, jsx as v } 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,
-  overlayBackground: L,
-  modalContent: M,
-  centered: S
-}, q = h(
+import '../../styles/Modal.css';const Z = "_overlay_1hu8i_1", z = "_overlayBackground_1hu8i_11", F = "_modalContent_1hu8i_15", I = "_centered_1hu8i_22", f = {
+  overlay: Z,
+  overlayBackground: z,
+  modalContent: F,
+  centered: I
+}, S = h(
   ({
     open: t,
     onClose: d,
-    children: v,
-    position: l,
-    centered: r = !1,
+    children: y,
+    position: e,
+    centered: a = !1,
     className: _,
-    disableOverlay: g = !1,
+    disableOverlay: m = !1,
     autoCloseCondition: u,
-    anchorRef: f,
-    overlayBackground: y = !1
-  }, w) => {
-    const $ = j(null), k = w || $, [e, b] = C();
-    return E(() => {
+    anchorRef: c,
+    overlayBackground: w = !1,
+    zIndex: g = 11
+  }, $) => {
+    const k = j(null), x = $ || k, [r, B] = C();
+    if (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`
+      if (c != null && c.current && t && !e && !a) {
+        const l = c.current.getBoundingClientRect();
+        B({
+          top: `${l.bottom + window.scrollY}px`,
+          left: `${l.left + window.scrollX}px`
         });
       }
-    }, [f, t, l, r]), t ? /* @__PURE__ */ x(B, { children: [
-      !g && /* @__PURE__ */ m(
+    }, [c, t, e, a]), !t) return null;
+    const b = g, n = g + 1;
+    return /* @__PURE__ */ D(P, { children: [
+      !m && /* @__PURE__ */ v(
         "div",
         {
-          className: `${c.overlay} ${y ? c.overlayBackground : ""}`,
-          onClick: (a) => {
-            a.stopPropagation(), d();
+          className: `${f.overlay} ${w ? f.overlayBackground : ""}`,
+          style: { zIndex: b },
+          onPointerDown: (l) => {
+            l.preventDefault(), l.stopPropagation(), d();
+          },
+          onClick: (l) => {
+            l.preventDefault(), l.stopPropagation();
           }
         }
       ),
-      /* @__PURE__ */ m(
+      /* @__PURE__ */ v(
         "div",
         {
-          ref: k,
-          className: `${c.modalContent} ${_ || ""} ${r ? c.centered : ""}`,
+          ref: x,
+          className: `${f.modalContent} ${_ || ""} ${a ? f.centered : ""}`,
           style: {
+            zIndex: n,
             position: "absolute",
-            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
+            top: a ? "50%" : (e == null ? void 0 : e.top) ?? (r == null ? void 0 : r.top),
+            left: a ? "50%" : (e == null ? void 0 : e.left) ?? (r == null ? void 0 : r.left),
+            right: e == null ? void 0 : e.right,
+            bottom: e == null ? void 0 : e.bottom,
+            width: e == null ? void 0 : e.width,
+            transform: a || !(e != null && e.top) && !(e != null && e.left) && !r ? "translate(-50%, -50%)" : void 0
           },
-          onClick: (a) => a.stopPropagation(),
-          children: v
+          role: "dialog",
+          "aria-modal": !m,
+          onPointerDown: (l) => l.stopPropagation(),
+          onClick: (l) => l.stopPropagation(),
+          children: y
         }
       )
-    ] }) : null;
+    ] });
   }
 );
 export {
-  q as Modal
+  S as Modal
 };

package/package.json

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