@ogcio/design-system-react 1.17.0 → 1.17.2

package/dist/modal/modal.js

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

package/dist/progress-bar/progress-bar.d.ts

@@ -3,5 +3,6 @@ export type ProgressBarProps = {
     value?: number;
     isIndeterminate?: boolean;
     label?: string;
-};
-export declare function ProgressBar({ value, max, isIndeterminate, label, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    dataTestid?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function ProgressBar({ value, max, isIndeterminate, label, className, dataTestid, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress-bar/progress-bar.js

@@ -1,14 +1,17 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as t } from "../cn.js";
-import { translate as g } from "../i18n/utility.js";
-function d({
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../cn.js";
+import { translate as p } from "../i18n/utility.js";
+function u({
   value: s = 0,
   max: e = 100,
   isIndeterminate: r,
-  label: o
+  label: i,
+  className: l,
+  dataTestid: t,
+  ...n
 }) {
-  const i = s * 100 / e;
-  return /* @__PURE__ */ l("div", { className: "gi-progress-bar-container", children: [
+  const g = s * 100 / e;
+  return /* @__PURE__ */ c("div", { className: "gi-progress-bar-container", children: [
     /* @__PURE__ */ a(
       "div",
       {
@@ -16,25 +19,26 @@ function d({
         "aria-valuenow": r ? void 0 : s,
         "aria-valuemin": 0,
         "aria-valuemax": e,
-        "aria-label": g("progressBar.progressBar", {
+        "aria-label": p("progressBar.progressBar", {
           defaultValue: "Progress bar"
         }),
-        "data-testid": "progress-bar",
-        className: "gi-progress-bar",
+        className: o("gi-progress-bar", l),
+        "data-testid": t,
+        ...n,
         children: /* @__PURE__ */ a(
           "div",
           {
-            className: t({
+            className: o({
               "gi-progress-bar-indeterminate": r
             }),
-            style: r ? {} : { width: `${i}%` }
+            style: r ? {} : { width: `${g}%` }
           }
         )
       }
     ),
-    o && /* @__PURE__ */ a("span", { children: o })
+    i && /* @__PURE__ */ a("span", { children: i })
   ] });
 }
 export {
-  d as ProgressBar
+  u as ProgressBar
 };

package/dist/progress-stepper/progress-stepper.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
-import { InnerStepProps, ProgressStepperProps, StepItemProps } from './types.js';
-export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, isDisabled, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, }: InnerStepProps & {
+import { InnerStepProps, ProgressStepperProps, StepItemProps, StepFillLevelType } from './types.js';
+export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, isDisabled, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, fill, useFill, }: InnerStepProps & {
     isDisabled?: boolean;
+    fill?: StepFillLevelType;
+    useFill?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StepItem: FC<StepItemProps>;
-export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, stepStates, dataTestId, className, verticalGap, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, stepStates, className, verticalGap, ...props }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;