@ogcio/design-system-react 1.13.0 → 1.15.0

package/dist/modal/modal.js

@@ -1,193 +1,202 @@
 "use client";
-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 { jsx as n, jsxs as f, Fragment as F } from "react/jsx-runtime";
+import { isValidElement as j, cloneElement as y, useState as A, useRef as P, Children as w, useEffect as x } from "react";
 import { createPortal as H } from "react-dom";
-import { Button as A } from "../button/button.js";
-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) => {
+import { Button as B } from "../button/button.js";
+import { cn as m } from "../cn.js";
+import { Heading as S } from "../heading/heading.js";
+import { useAriaHider as V } from "../hooks/use-aria-hider.js";
+import { useFocusTrap as _ } from "../hooks/use-focus-trap.js";
+import { Icon as $ } from "../icon/icon.js";
+import { IconButton as D } from "../icon-button/icon-button.js";
+const g = (o, e, t) => {
   var l;
-  return b(a) ? a.type === o || ((l = a == null ? void 0 : a._owner) == null ? void 0 : l.name) === t : !1;
-}, T = {
+  if (!j(t))
+    return !1;
+  const r = t.type;
+  return r === o || // @ts-expect-error The TS error says there is no _owner but there is
+  ((l = t == null ? void 0 : t._owner) == null ? void 0 : l.name) === e || r.componentType === e;
+}, N = {
   flat: 0,
   secondary: 1,
   primary: 2
-}, w = ({
+}, W = ({
   label: o,
-  size: t = "small",
-  ...a
+  size: e = "small",
+  ...t
 }) => {
-  let n = "sm";
-  return (t === "large" || t === "medium") && (n = "md"), o ? /* @__PURE__ */ e(
-    A,
+  let r = "sm";
+  return (e === "large" || e === "medium") && (r = "md"), o ? /* @__PURE__ */ n(
+    B,
     {
-      onClick: a.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: e,
       appearance: "dark",
       className: "gi-modal-icon",
       "aria-label": o,
-      ...a,
-      children: /* @__PURE__ */ g(B, { children: [
+      ...t,
+      children: /* @__PURE__ */ f(F, { children: [
         o,
-        /* @__PURE__ */ e(V, { icon: "close", size: n })
+        /* @__PURE__ */ n($, { icon: "close", size: r })
       ] })
     }
-  ) : /* @__PURE__ */ e(
-    _,
+  ) : /* @__PURE__ */ n(
+    D,
     {
       className: "gi-modal-icon",
       icon: {
         icon: "close"
       },
       "aria-label": "Close modal",
-      onClick: a.onClick,
+      onClick: t.onClick,
       variant: "flat",
-      size: t,
+      size: e,
       appearance: "dark",
-      ...a
+      ...t
     }
   );
-}, D = ({
+}, q = ({
   position: o = "center",
-  size: t = "lg",
-  closeOnClick: a = !0,
-  closeOnOverlayClick: n = !0,
+  size: e = "lg",
+  closeOnClick: t = !0,
+  closeOnOverlayClick: r = !0,
   isOpen: l,
-  onClose: d,
-  closeButtonLabel: s,
-  className: m,
-  children: r,
-  closeButtonSize: u,
-  dataTestId: p,
-  ...y
+  onClose: u,
+  closeButtonLabel: d,
+  className: p,
+  children: a,
+  closeButtonSize: i,
+  dataTestId: s,
+  ...M
 }) => {
-  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(
+  const T = P(null);
+  V(T.current, l);
+  const b = w.toArray(a), k = b.find(
+    (c) => g(v, "ModalTitle", c)
+  ), h = b.find(
+    (c) => g(C, "ModalFooter", c)
+  ), I = k ? y(k, {
+    as: e === "sm" ? "h5" : "h4"
+  }) : null, E = h ? y(h, {
+    dataModalSize: e
+  }) : null, O = b.filter(
+    (c) => !g(v, "ModalTitle", c) && !g(C, "ModalFooter", c)
+  );
+  return /* @__PURE__ */ n(z, { modalRef: T, isOpen: l, children: /* @__PURE__ */ n(
     "div",
     {
-      ...y,
-      ref: C,
-      className: c("gi-modal", {
+      ...M,
+      ref: T,
+      className: m("gi-modal", {
         "gi-modal-open": l,
         "gi-modal-close": !l
       }),
-      "data-testid": p || "modal",
-      onClick: (i) => {
-        i.currentTarget === i.target && a && n && d();
+      "data-testid": s || "modal",
+      onClick: (c) => {
+        c.currentTarget === c.target && t && r && u();
       },
-      children: /* @__PURE__ */ g(
+      children: /* @__PURE__ */ f(
         "div",
         {
           "data-testid": "modal-container",
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "dialog",
-          "data-size": t,
+          "data-size": e,
           "data-position": o,
-          className: c(
+          className: m(
             "gi-modal-container-control",
             {
-              "gi-modal-container": !m,
+              "gi-modal-container": !p,
               "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
+            p
           ),
           children: [
-            /* @__PURE__ */ g("div", { children: [
-              F,
-              a && /* @__PURE__ */ e(
-                w,
+            /* @__PURE__ */ f("div", { children: [
+              I,
+              t && /* @__PURE__ */ n(
+                W,
                 {
-                  onClick: d,
-                  label: s,
-                  size: u
+                  onClick: u,
+                  label: d,
+                  size: i
                 }
               )
             ] }),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: c({
-                  "gi-pb-6": !M
-                }),
-                children: j
-              }
-            )
+            /* @__PURE__ */ f("div", { className: m({ "gi-pb-6": !h }), children: [
+              O,
+              E
+            ] })
           ]
         }
       )
     }
   ) });
-}, 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 = ({
+}, v = ({ children: o, as: e = "h4", ...t }) => /* @__PURE__ */ n("div", { className: "gi-flex-1", id: t.id, "aria-label": o == null ? void 0 : o.toString(), children: /* @__PURE__ */ n(S, { as: e, ...t, children: o }) });
+Object.defineProperty(v, "componentType", {
+  value: "ModalTitle",
+  writable: !1,
+  enumerable: !1
+});
+v.displayName = "ModalTitle";
+const te = ({
   children: o,
-  className: t
-}) => /* @__PURE__ */ e(
+  className: e
+}) => /* @__PURE__ */ n(
   "div",
   {
     id: "gi-modal-body",
     "aria-label": "Modal content",
     role: "document",
-    className: c(
+    className: m(
       {
-        "gi-modal-body": !t
+        "gi-modal-body": !e
       },
-      t
+      e
     ),
     children: o
   }
-), W = ({
+), C = ({
   className: o,
-  children: t,
-  orientation: a,
-  dataModalSize: n
+  children: e,
+  orientation: t,
+  dataModalSize: r
 }) => {
-  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"
+  const d = (Array.isArray(e) ? e : [e]).filter((a) => {
+    var i, s;
+    return j(a) && (a.type === B || ((i = a.type) == null ? void 0 : i.displayName) === "Button" || ((s = a.props) == null ? void 0 : s["data-button"]));
+  }).sort((a, i) => {
+    const s = a.props.variant ?? "primary", M = i.props.variant ?? "primary";
+    return (N[s] || 0) - (N[M] || 0);
+  }), p = m({
+    "gi-justify-center sm:gi-justify-start": !t && r !== "sm",
+    "gi-justify-center": t === "vertical" || r === "sm",
+    "gi-justify-start": t === "horizontal"
   });
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: c(o, {
-        "gi-pt-6": s.length === 0,
-        "gi-modal-footer": s.length
+      className: m(o, {
+        "gi-pt-6": d.length === 0,
+        "gi-modal-footer": d.length
       }),
-      children: s.length > 0 && /* @__PURE__ */ e(
+      children: d.length > 0 && /* @__PURE__ */ n(
         "div",
         {
-          "data-orientation": a || "unset",
-          "data-modal-size": n,
-          children: s.map(
-            (r) => {
-              var u;
-              return f(r, {
-                className: c((u = r == null ? void 0 : r.props) == null ? void 0 : u.className, m)
+          "data-orientation": t || "unset",
+          "data-modal-size": r,
+          children: d.map(
+            (a, i) => {
+              var s;
+              return y(a, {
+                key: a.key || a.props.id || a.props.dataTestid || `modal-footer-button-${i}`,
+                id: a.props.id || `modal-footer-button-${i}`,
+                className: m((s = a == null ? void 0 : a.props) == null ? void 0 : s.className, p)
               });
             }
           ) || null
@@ -195,42 +204,54 @@ const h = (o, t, a) => {
       )
     }
   );
-}, q = ({
+};
+Object.defineProperty(C, "componentType", {
+  value: "ModalFooter",
+  writable: !1,
+  enumerable: !1
+});
+C.displayName = "ModalFooter";
+const z = ({
   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 = ({
+  modalRef: e,
+  isOpen: t
+}) => {
+  const [r, l] = A(!1);
+  return x(() => {
+    l(!0);
+  }, []), _(e == null ? void 0 : e.current, t && r, {
+    initialFocus: !1,
+    fallbackFocus: () => e == null ? void 0 : e.current
+  }), r ? H(o, document.body) : null;
+}, oe = ({
   children: o,
-  triggerButton: t,
-  startsOpen: a,
-  ...n
+  triggerButton: e,
+  startsOpen: t,
+  ...r
 }) => {
-  const [l, d] = x(!!a), s = () => d(!0), m = () => d(!1), r = f(t, {
+  const [l, u] = A(!!t), d = () => u(!0), p = () => u(!1), a = y(e, {
     "data-testid": "modal-trigger-button-container",
     "aria-haspopup": "dialog",
-    onClick: s
+    onClick: d
   });
-  return /* @__PURE__ */ g(B, { children: [
-    r,
-    /* @__PURE__ */ e(
-      D,
+  return /* @__PURE__ */ f(F, { children: [
+    a,
+    /* @__PURE__ */ n(
+      q,
       {
-        onClose: m,
+        onClose: p,
         position: "center",
         isOpen: l,
-        ...n,
+        ...r,
         children: o
       }
     )
   ] });
 };
 export {
-  tt as Modal,
-  R as ModalBody,
-  W as ModalFooter,
-  N as ModalTitle,
-  D as ModalWrapper
+  oe as Modal,
+  te as ModalBody,
+  C as ModalFooter,
+  v as ModalTitle,
+  q as ModalWrapper
 };

package/dist/popover/popover.d.ts

@@ -1,2 +1,2 @@
 import { PopoverProps } from './types.js';
-export declare const Popover: ({ triggerRef, children, className, open, onOpenChange, options, extraRefs, }: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Popover: ({ triggerRef, children, className, open, onOpenChange, maxHeight, options, extraRefs, }: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;