@ogcio/design-system-react 1.30.0 → 1.31.0

package/dist/modal/modal.js

@@ -1,130 +1,130 @@
 "use client";
-import { jsx as i, jsxs as y, Fragment as j } from "react/jsx-runtime";
-import { isValidElement as U, cloneElement as T, useState as A, useRef as W, useMemo as _, Children as z, useId as G, useEffect as C } from "react";
-import { createPortal as J } from "react-dom";
+import { jsx as l, jsxs as y, Fragment as j } from "react/jsx-runtime";
+import { isValidElement as K, cloneElement as T, useState as A, useRef as U, useMemo as W, Children as _, useId as z, useEffect as C } from "react";
+import { createPortal as G } from "react-dom";
 import { Button as E } from "../button/button.js";
 import { cn as u } from "../cn.js";
-import { Heading as Q } from "../heading/heading.js";
-import { useAriaHider as X } from "../hooks/use-aria-hider.js";
-import { useFocusTrap as Y } from "../hooks/use-focus-trap.js";
-import { Icon as Z } from "../icon/icon.js";
-import { IconButton as O } from "../icon-button/icon-button.js";
-import { splitAriaProps as R, isSpecialComponent as tt, getSpecialComponentType as et } from "../utils/utilities.js";
+import { Heading as J } from "../heading/heading.js";
+import { useAriaHider as Q } from "../hooks/use-aria-hider.js";
+import { useFocusTrap as X } from "../hooks/use-focus-trap.js";
+import { Icon as Y } from "../icon/icon.js";
+import { IconButton as Z } from "../icon-button/icon-button.js";
+import { splitAriaProps as O, isSpecialComponent as ee, getSpecialComponentType as te } from "../utils/utilities.js";
 const I = {
   flat: 0,
   secondary: 1,
   primary: 2
-}, ot = ({
+}, oe = ({
   label: e,
-  size: t = "small",
-  ...o
+  size: o = "small",
+  ...t
 }) => {
   let n = "sm";
-  return (t === "large" || t === "medium") && (n = "md"), e ? /* @__PURE__ */ i(
+  return (o === "large" || o === "medium") && (n = "md"), e ? /* @__PURE__ */ l(
     E,
     {
-      onClick: o.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: o,
       appearance: "dark",
       className: "gi-modal-icon",
       "aria-label": e,
-      ...o,
+      ...t,
       children: /* @__PURE__ */ y(j, { children: [
         e,
-        /* @__PURE__ */ i(Z, { icon: "close", size: n })
+        /* @__PURE__ */ l(Y, { icon: "close", size: n })
       ] })
     }
-  ) : /* @__PURE__ */ i(
-    O,
+  ) : /* @__PURE__ */ l(
+    Z,
     {
       className: "gi-modal-icon",
       icon: { icon: "close" },
       "aria-label": "Close modal",
-      onClick: o.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: o,
       appearance: "dark",
       dataTestid: "modal-close-button",
-      ...o
+      ...t
     }
   );
-}, rt = ({
+}, ae = ({
   closeButtonLabel: e,
-  modalTitle: t,
-  closeOnClick: o,
+  modalTitle: o,
+  closeOnClick: t,
   onClose: n,
-  closeButtonSize: r
+  closeButtonSize: a
 }) => /* @__PURE__ */ y("div", { className: "gi-py-2  xs:gi-py-4", children: [
-  t,
-  o && /* @__PURE__ */ i(
-    ot,
+  o,
+  t && /* @__PURE__ */ l(
+    oe,
     {
       onClick: n,
       label: e,
-      size: r
+      size: a
     }
   )
-] }), at = ({
+] }), re = ({
   position: e = "center",
-  size: t = "lg",
-  closeOnClick: o = !0,
+  size: o = "lg",
+  closeOnClick: t = !0,
   closeOnOverlayClick: n = !0,
-  isOpen: r,
-  onClose: s,
+  isOpen: a,
+  onClose: d,
   closeButtonLabel: h,
-  className: d,
-  children: g,
-  closeButtonSize: a,
-  closeOnEscape: l,
+  className: s,
+  children: f,
+  closeButtonSize: r,
+  closeOnEscape: i,
   dataTestId: c,
   ...v
 }) => {
-  var k;
-  const M = W(null);
-  X(M.current, r);
-  const [D, S] = _(
-    () => R(v),
+  var w;
+  const M = U(null);
+  Q(M, a);
+  const [D, R] = W(
+    () => O(v),
     [v]
-  ), F = z.toArray(g), b = (m) => F.find(
-    (p) => et(p) === m
-  ), f = b("ModalTitle"), N = b("ModalFooter") || b("DrawerFooter"), L = G(), H = ((k = f == null ? void 0 : f.props) == null ? void 0 : k.id) || `gi-modal-title-${L}`, $ = f ? T(f, {
-    as: t === "sm" ? "h5" : "h4",
-    id: H
-  }) : null, V = N ? T(N, {
-    dataModalSize: t
-  }) : null, q = F.filter(
-    (m) => !tt(m, ["ModalTitle", "ModalFooter", "DrawerFooter"])
+  ), F = _.toArray(f), N = (m) => F.find(
+    (p) => te(p) === m
+  ), g = N("ModalTitle"), b = N("ModalFooter") || N("DrawerFooter"), S = z(), L = ((w = g == null ? void 0 : g.props) == null ? void 0 : w.id) || `gi-modal-title-${S}`, H = g ? T(g, {
+    as: o === "sm" ? "h5" : "h4",
+    id: L
+  }) : null, $ = b ? T(b, {
+    dataModalSize: o
+  }) : null, V = F.filter(
+    (m) => !ee(m, ["ModalTitle", "ModalFooter", "DrawerFooter"])
   );
   C(() => {
-    if (!r || !l)
+    if (!a || !i)
       return;
     const m = (p) => {
-      p.key === "Escape" && (p.stopPropagation(), s());
+      p.key === "Escape" && (p.stopPropagation(), d());
     };
     return document.addEventListener("keydown", m), () => {
       document.removeEventListener("keydown", m);
     };
-  }, [r, l, s]), C(() => {
-    if (!r || !o || !n)
+  }, [a, i, d]), C(() => {
+    if (!a || !t || !n)
       return;
     const m = (p) => {
       var B;
-      const w = (B = M.current) == null ? void 0 : B.querySelector(
+      const k = (B = M.current) == null ? void 0 : B.querySelector(
         ".gi-modal-container-control"
       );
-      w && (w.contains(p.target) || s());
+      k && (k.contains(p.target) || d());
     };
     return document.addEventListener("pointerdown", m, !0), () => document.removeEventListener("pointerdown", m, !0);
-  }, [r, o, n, s]);
-  const K = /* @__PURE__ */ i(
+  }, [a, t, n, d]);
+  const q = /* @__PURE__ */ l(
     "div",
     {
-      ...S,
+      ...R,
       ref: M,
       className: u("gi-modal", {
-        "gi-modal-open": r,
-        "gi-modal-close": !r
+        "gi-modal-open": a,
+        "gi-modal-close": !a
       }),
       "data-testid": c || "modal",
       tabIndex: -1,
@@ -136,98 +136,98 @@ const I = {
           "aria-modal": "true",
           "aria-label": "dialog",
           ...D,
-          "data-size": t,
+          "data-size": o,
           "data-position": e,
           className: u(
             "gi-modal-container-control",
             {
-              "gi-modal-container": !d,
+              "gi-modal-container": !s,
               "gi-modal-container-center": e === "center",
               "gi-modal-container-left": e === "left",
               "gi-modal-container-right": e === "right",
               "gi-modal-container-bottom": e === "bottom"
             },
-            d
+            s
           ),
           children: [
-            /* @__PURE__ */ i(
-              rt,
+            /* @__PURE__ */ l(
+              ae,
               {
                 closeButtonLabel: h,
-                modalTitle: $,
-                closeOnClick: o,
-                onClose: s,
-                closeButtonSize: a
+                modalTitle: H,
+                closeOnClick: t,
+                onClose: d,
+                closeButtonSize: r
               }
             ),
-            /* @__PURE__ */ y("div", { className: u({ "gi-pb-6": !N }), children: [
-              q,
-              V
+            /* @__PURE__ */ y("div", { className: u({ "gi-pb-6": !b }), children: [
+              V,
+              $
             ] })
           ]
         }
       )
     }
   );
-  return /* @__PURE__ */ i(nt, { modalRef: M, isOpen: r, children: K });
-}, P = ({ children: e, as: t = "h4", ...o }) => /* @__PURE__ */ i("div", { className: "gi-flex-1", id: o.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ i(Q, { as: t, ...o, children: e }) });
+  return /* @__PURE__ */ l(ne, { modalRef: M, isOpen: a, children: q });
+}, P = ({ children: e, as: o = "h4", ...t }) => /* @__PURE__ */ l("div", { className: "gi-flex-1", id: t.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ l(J, { as: o, ...t, children: e }) });
 Object.defineProperty(P, "componentType", {
   value: "ModalTitle",
   writable: !1,
   enumerable: !1
 });
 P.displayName = "ModalTitle";
-const ht = ({
+const he = ({
   children: e,
-  className: t,
-  includeModalClass: o = !0
-}) => /* @__PURE__ */ i(
+  className: o,
+  includeModalClass: t = !0
+}) => /* @__PURE__ */ l(
   "div",
   {
     "aria-label": "Modal content",
     role: "document",
     tabIndex: 0,
-    className: u(o && "gi-modal-body", t),
+    className: u(t && "gi-modal-body", o),
     children: e
   }
 ), x = ({
   className: e,
-  children: t,
-  orientation: o,
+  children: o,
+  orientation: t,
   dataModalSize: n,
-  stacked: r
+  stacked: a
 }) => {
-  const d = (Array.isArray(t) ? t : [t]).filter((a) => {
-    var l, c;
-    return U(a) && (a.type === E || ((l = a.type) == null ? void 0 : l.displayName) === "Button" || ((c = a.props) == null ? void 0 : c["data-button"]));
-  }).sort((a, l) => {
-    const c = a.props.variant ?? "primary", v = l.props.variant ?? "primary";
+  const s = (Array.isArray(o) ? o : [o]).filter((r) => {
+    var i, c;
+    return K(r) && (r.type === E || ((i = r.type) == null ? void 0 : i.displayName) === "Button" || ((c = r.props) == null ? void 0 : c["data-button"]));
+  }).sort((r, i) => {
+    const c = r.props.variant ?? "primary", v = i.props.variant ?? "primary";
     return (I[c] || 0) - (I[v] || 0);
-  }), g = u({
-    "gi-justify-center sm:gi-justify-start": !o && n !== "sm" && !r,
-    "gi-justify-center": o === "vertical" || n === "sm" || r,
-    "gi-justify-start": o === "horizontal"
+  }), f = u({
+    "gi-justify-center sm:gi-justify-start": !t && n !== "sm" && !a,
+    "gi-justify-center": t === "vertical" || n === "sm" || a,
+    "gi-justify-start": t === "horizontal"
   });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: u(e, {
-        "gi-pt-6": d.length === 0,
-        "gi-modal-footer": d.length,
-        "gi-modal-footer-stacked": r
+        "gi-pt-6": s.length === 0,
+        "gi-modal-footer": s.length,
+        "gi-modal-footer-stacked": a
       }),
-      children: d.length > 0 && /* @__PURE__ */ i(
+      children: s.length > 0 && /* @__PURE__ */ l(
         "div",
         {
-          "data-orientation": o || "unset",
+          "data-orientation": t || "unset",
           "data-modal-size": n,
-          children: d.map(
-            (a, l) => {
+          children: s.map(
+            (r, i) => {
               var c;
-              return T(a, {
-                key: a.key || a.props.id || a.props.dataTestid || `modal-footer-button-${l}`,
-                id: a.props.id || `modal-footer-button-${l}`,
-                className: u((c = a == null ? void 0 : a.props) == null ? void 0 : c.className, g)
+              return T(r, {
+                key: r.key || r.props.id || r.props.dataTestid || `modal-footer-button-${i}`,
+                id: r.props.id || `modal-footer-button-${i}`,
+                className: u((c = r == null ? void 0 : r.props) == null ? void 0 : c.className, f)
               });
             }
           ) || null
@@ -242,37 +242,34 @@ Object.defineProperty(x, "componentType", {
   enumerable: !1
 });
 x.displayName = "ModalFooter";
-const nt = ({
+const ne = ({
   children: e,
-  modalRef: t,
-  isOpen: o
+  modalRef: o,
+  isOpen: t
 }) => {
-  const [n, r] = A(!1);
+  const [n, a] = A(!1);
   return C(() => {
-    r(!0);
-  }, []), Y(t == null ? void 0 : t.current, o && n, {
-    initialFocus: (t == null ? void 0 : t.current) ?? !0,
-    fallbackFocus: () => t == null ? void 0 : t.current
-  }), n ? J(e, document.body) : null;
-}, vt = ({
+    a(!0);
+  }, []), X(o, t && n), n ? G(e, document.body) : null;
+}, ve = ({
   children: e,
-  triggerButton: t,
-  startsOpen: o,
+  triggerButton: o,
+  startsOpen: t,
   ...n
 }) => {
-  const [r, s] = A(!!o), h = () => s(!0), d = () => s(!1), g = T(t, {
+  const [a, d] = A(!!t), h = () => d(!0), s = () => d(!1), f = T(o, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
     onClick: h
   });
   return /* @__PURE__ */ y(j, { children: [
-    g,
-    /* @__PURE__ */ i(
-      at,
+    f,
+    /* @__PURE__ */ l(
+      re,
       {
-        onClose: d,
+        onClose: s,
         position: "center",
-        isOpen: r,
+        isOpen: a,
         ...n,
         children: e
       }
@@ -280,9 +277,9 @@ const nt = ({
   ] });
 };
 export {
-  vt as Modal,
-  ht as ModalBody,
+  ve as Modal,
+  he as ModalBody,
   x as ModalFooter,
   P as ModalTitle,
-  at as ModalWrapper
+  re as ModalWrapper
 };