@ogcio/design-system-react 1.12.3 → 1.13.0

package/dist/modal/modal.content.js

@@ -1,4 +1,4 @@
-import { jsxs as i, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as t, Fragment as r } from "react/jsx-runtime";
 import { Button as o } from "../button/button.js";
 import { ModalTitle as e, ModalBody as a, ModalFooter as n } from "./modal.js";
 const c = /* @__PURE__ */ i(r, { children: [

package/dist/modal/modal.js

@@ -1,129 +1,134 @@
 "use client";
-import { jsx as r, jsxs as p, Fragment as T } from "react/jsx-runtime";
-import { Children as x, cloneElement as f, isValidElement as k, useState as F } from "react";
+import { jsx as e, jsxs as g, Fragment as B } from "react/jsx-runtime";
+import { useState as x, cloneElement as f, isValidElement as b, useRef as I, Children as E } from "react";
+import { createPortal as H } from "react-dom";
 import { Button as A } from "../button/button.js";
-import { cn as s } from "../cn.js";
-import { Heading as I } from "../heading/heading.js";
-import { Icon as E } from "../icon/icon.js";
-import { IconButton as R } from "../icon-button/icon-button.js";
-const v = (e, a, t) => {
-  var i;
-  return k(t) ? t.type === e || ((i = t == null ? void 0 : t._owner) == null ? void 0 : i.name) === a : !1;
-}, B = {
+import { cn as c } from "../cn.js";
+import { Heading as O } from "../heading/heading.js";
+import { useAriaHider as P } from "../hooks/use-aria-hider.js";
+import { useFocusTrap as S } from "../hooks/use-focus-trap.js";
+import { Icon as V } from "../icon/icon.js";
+import { IconButton as _ } from "../icon-button/icon-button.js";
+const h = (o, t, a) => {
+  var l;
+  return b(a) ? a.type === o || ((l = a == null ? void 0 : a._owner) == null ? void 0 : l.name) === t : !1;
+}, T = {
   flat: 0,
   secondary: 1,
   primary: 2
-}, O = ({
-  label: e,
-  size: a = "small",
-  ...t
+}, w = ({
+  label: o,
+  size: t = "small",
+  ...a
 }) => {
   let n = "sm";
-  return (a === "large" || a === "medium") && (n = "md"), e ? /* @__PURE__ */ r(
+  return (t === "large" || t === "medium") && (n = "md"), o ? /* @__PURE__ */ e(
     A,
     {
-      onClick: t.onClick,
+      onClick: a.onClick,
       variant: "flat",
-      size: a,
+      size: t,
       appearance: "dark",
       className: "gi-modal-icon",
-      "aria-label": e,
-      ...t,
-      children: /* @__PURE__ */ p(T, { children: [
-        e,
-        /* @__PURE__ */ r(E, { icon: "close", size: n })
+      "aria-label": o,
+      ...a,
+      children: /* @__PURE__ */ g(B, { children: [
+        o,
+        /* @__PURE__ */ e(V, { icon: "close", size: n })
       ] })
     }
-  ) : /* @__PURE__ */ r(
-    R,
+  ) : /* @__PURE__ */ e(
+    _,
     {
       className: "gi-modal-icon",
       icon: {
         icon: "close"
       },
       "aria-label": "Close modal",
-      onClick: t.onClick,
+      onClick: a.onClick,
       variant: "flat",
-      size: a,
+      size: t,
       appearance: "dark",
-      ...t
+      ...a
     }
   );
-}, V = ({
-  position: e = "center",
-  size: a = "lg",
-  closeOnClick: t = !0,
+}, D = ({
+  position: o = "center",
+  size: t = "lg",
+  closeOnClick: a = !0,
   closeOnOverlayClick: n = !0,
-  isOpen: i,
-  onClose: c,
-  closeButtonLabel: d,
+  isOpen: l,
+  onClose: d,
+  closeButtonLabel: s,
   className: m,
-  children: o,
-  closeButtonSize: g,
-  dataTestId: u,
+  children: r,
+  closeButtonSize: u,
+  dataTestId: p,
   ...y
 }) => {
-  const h = x.toArray(o), C = h.find(
-    (l) => v(M, "ModalTitle", l)
-  ), N = h.find(
-    (l) => v(_, "ModalFooter", l)
-  ), b = C ? f(C, {
-    as: a === "sm" ? "h5" : "h4"
-  }) : null, j = h.map(
-    (l) => N ? f(l, {
-      dataModalSize: a
-    }) : l
-  ).filter((l) => !v(M, "ModalTitle", l));
-  return /* @__PURE__ */ r(
+  const C = I(null);
+  P(C.current, l);
+  const v = E.toArray(r), k = v.find(
+    (i) => h(N, "ModalTitle", i)
+  ), M = v.find(
+    (i) => h(W, "ModalFooter", i)
+  ), F = k ? f(k, {
+    as: t === "sm" ? "h5" : "h4"
+  }) : null, j = v.map(
+    (i) => M ? f(i, {
+      dataModalSize: t
+    }) : i
+  ).filter((i) => !h(N, "ModalTitle", i));
+  return /* @__PURE__ */ e(q, { modalRef: C, isOpen: l, children: /* @__PURE__ */ e(
     "div",
     {
       ...y,
-      className: s("gi-modal", {
-        "gi-modal-open": i,
-        "gi-modal-close": !i
+      ref: C,
+      className: c("gi-modal", {
+        "gi-modal-open": l,
+        "gi-modal-close": !l
       }),
-      "data-testid": u || "modal",
-      "data-element": "modal",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-describedby": "gi-modal-body",
-      onClick: (l) => {
-        l.target.dataset.element === "modal" && t && n && c();
+      "data-testid": p || "modal",
+      onClick: (i) => {
+        i.currentTarget === i.target && a && n && d();
       },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ g(
         "div",
         {
           "data-testid": "modal-container",
-          "data-size": a,
-          "data-position": e,
-          className: s(
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "dialog",
+          "data-size": t,
+          "data-position": o,
+          className: c(
             "gi-modal-container-control",
             {
               "gi-modal-container": !m,
-              "gi-modal-container-center": e === "center",
-              "gi-modal-container-left": e === "left",
-              "gi-modal-container-right": e === "right",
-              "gi-modal-container-bottom": e === "bottom"
+              "gi-modal-container-center": o === "center",
+              "gi-modal-container-left": o === "left",
+              "gi-modal-container-right": o === "right",
+              "gi-modal-container-bottom": o === "bottom"
             },
             m
           ),
           children: [
-            /* @__PURE__ */ p("div", { children: [
-              b,
-              t && /* @__PURE__ */ r(
-                O,
+            /* @__PURE__ */ g("div", { children: [
+              F,
+              a && /* @__PURE__ */ e(
+                w,
                 {
-                  onClick: c,
-                  label: d,
-                  size: g
+                  onClick: d,
+                  label: s,
+                  size: u
                 }
               )
             ] }),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ e(
               "div",
               {
-                className: s({
-                  "gi-pb-6": !N
+                className: c({
+                  "gi-pb-6": !M
                 }),
                 children: j
               }
@@ -132,55 +137,57 @@ const v = (e, a, t) => {
         }
       )
     }
-  );
-}, M = ({ children: e, as: a = "h4", ...t }) => /* @__PURE__ */ r("div", { className: "gi-flex-1", id: "gi-modal-title", children: /* @__PURE__ */ r(I, { as: a, ...t, children: e }) }), J = ({
-  children: e,
-  className: a
-}) => /* @__PURE__ */ r(
+  ) });
+}, N = ({ children: o, as: t = "h4", ...a }) => /* @__PURE__ */ e("div", { className: "gi-flex-1", id: a.id, "aria-label": o == null ? void 0 : o.toString(), children: /* @__PURE__ */ e(O, { as: t, ...a, children: o }) }), R = ({
+  children: o,
+  className: t
+}) => /* @__PURE__ */ e(
   "div",
   {
     id: "gi-modal-body",
-    className: s(
+    "aria-label": "Modal content",
+    role: "document",
+    className: c(
       {
-        "gi-modal-body": !a
+        "gi-modal-body": !t
       },
-      a
+      t
     ),
-    children: e
+    children: o
   }
-), _ = ({
-  className: e,
-  children: a,
-  orientation: t,
+), W = ({
+  className: o,
+  children: t,
+  orientation: a,
   dataModalSize: n
 }) => {
-  const d = (Array.isArray(a) ? a : [a]).filter(
-    (o) => k(o) && o.type === A
-  ).sort((o, g) => {
-    const u = o.props.variant ?? "primary", y = g.props.variant ?? "primary";
-    return (B[u] || 0) - (B[y] || 0);
-  }), m = s({
-    "gi-justify-center sm:gi-justify-start": !t && n !== "sm",
-    "gi-justify-center": t === "vertical" || n === "sm",
-    "gi-justify-start": t === "horizontal"
+  const s = (Array.isArray(t) ? t : [t]).filter(
+    (r) => b(r) && r.type === A
+  ).sort((r, u) => {
+    const p = r.props.variant ?? "primary", y = u.props.variant ?? "primary";
+    return (T[p] || 0) - (T[y] || 0);
+  }), m = c({
+    "gi-justify-center sm:gi-justify-start": !a && n !== "sm",
+    "gi-justify-center": a === "vertical" || n === "sm",
+    "gi-justify-start": a === "horizontal"
   });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: s(e, {
-        "gi-pt-6": d.length === 0,
-        "gi-modal-footer": d.length
+      className: c(o, {
+        "gi-pt-6": s.length === 0,
+        "gi-modal-footer": s.length
       }),
-      children: d.length > 0 && /* @__PURE__ */ r(
+      children: s.length > 0 && /* @__PURE__ */ e(
         "div",
         {
-          "data-orientation": t || "unset",
+          "data-orientation": a || "unset",
           "data-modal-size": n,
-          children: d.map(
-            (o) => {
-              var g;
-              return f(o, {
-                className: s((g = o == null ? void 0 : o.props) == null ? void 0 : g.className, m)
+          children: s.map(
+            (r) => {
+              var u;
+              return f(r, {
+                className: c((u = r == null ? void 0 : r.props) == null ? void 0 : u.className, m)
               });
             }
           ) || null
@@ -188,35 +195,42 @@ const v = (e, a, t) => {
       )
     }
   );
-}, K = ({
-  children: e,
-  triggerButton: a,
-  startsOpen: t,
+}, q = ({
+  children: o,
+  modalRef: t,
+  isOpen: a
+}) => (S(t == null ? void 0 : t.current, a, {
+  initialFocus: !1,
+  fallbackFocus: () => t == null ? void 0 : t.current
+}), typeof document > "u" ? null : H(o, document.body)), tt = ({
+  children: o,
+  triggerButton: t,
+  startsOpen: a,
   ...n
 }) => {
-  const [i, c] = F(!!t), d = () => c(!0), m = () => c(!1), o = f(a, {
+  const [l, d] = x(!!a), s = () => d(!0), m = () => d(!1), r = f(t, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
-    onClick: d
+    onClick: s
   });
-  return /* @__PURE__ */ p(T, { children: [
-    o,
-    /* @__PURE__ */ r(
-      V,
+  return /* @__PURE__ */ g(B, { children: [
+    r,
+    /* @__PURE__ */ e(
+      D,
       {
         onClose: m,
         position: "center",
-        isOpen: i,
+        isOpen: l,
         ...n,
-        children: e
+        children: o
       }
     )
   ] });
 };
 export {
-  K as Modal,
-  J as ModalBody,
-  _ as ModalFooter,
-  M as ModalTitle,
-  V as ModalWrapper
+  tt as Modal,
+  R as ModalBody,
+  W as ModalFooter,
+  N as ModalTitle,
+  D as ModalWrapper
 };