@ogcio/design-system-react 1.18.1 → 1.20.0

package/dist/accordion/accordion-item.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
+import "@ogcio/design-system-react/browser-check";
+import { jsxs as r, Fragment as u, jsx as n } from "react/jsx-runtime";
 import { useState as y, useRef as b } from "react";
 import { c as h } from "../index-CB-zPpNk.js";
-import { cn as r } from "../cn.js";
+import { cn as d } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({
   variants: {
@@ -11,18 +12,18 @@ const I = h({
       small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
     }
   }
-}), N = ({
+}), j = ({
   defaultExpanded: c,
   children: s,
   label: t,
   disabled: e,
   dataTestid: l,
   iconStart: m,
-  variant: n = "default"
+  variant: i = "default"
 }) => {
   const [o, a] = y(c), g = b(null), p = `${t}-button`, f = `${t}-panel`;
-  return /* @__PURE__ */ d(u, { children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ r(u, { children: [
+    /* @__PURE__ */ n(
       "div",
       {
         ref: g,
@@ -35,14 +36,14 @@ const I = h({
         },
         tabIndex: 0,
         className: "gi-accordion",
-        children: /* @__PURE__ */ d(
+        children: /* @__PURE__ */ r(
           "div",
           {
-            className: r("gi-accordion-header", I({ variant: n })),
+            className: d("gi-accordion-header", I({ variant: i })),
             children: [
               t,
               " ",
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ n(
                 w,
                 {
                   icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down"
@@ -53,17 +54,17 @@ const I = h({
         )
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ n(
       "div",
       {
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: r("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+        className: d("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
           "gi-block": o,
           "gi-hidden": !o,
-          "gi-text-md": n === "default",
-          "gi-text-sm": n === "small"
+          "gi-text-md": i === "default",
+          "gi-text-sm": i === "small"
         }),
         children: s
       }
@@ -71,5 +72,5 @@ const I = h({
   ] });
 };
 export {
-  N as AccordionItem
+  j as AccordionItem
 };

package/dist/alert/alert.d.ts

@@ -78,7 +78,7 @@ declare const alertVariants: import('tailwind-variants').TVReturnType<{
 }, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
 type AlertProps = {
     variant?: VariantProps<typeof alertVariants>['variant'];
-    title: string;
+    title?: string;
     children?: ReactNode;
     dismissible?: boolean;
     dataTestid?: string;

package/dist/alert/alert.js

@@ -1,12 +1,13 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { c as v } from "../index-CB-zPpNk.js";
-import { cn as k } from "../cn.js";
+import { useState as v } from "react";
+import { c as k } from "../index-CB-zPpNk.js";
+import { cn as l } from "../cn.js";
 import { translate as w } from "../i18n/utility.js";
 import { Icon as N } from "../icon/icon.js";
 import { IconButton as V } from "../icon-button/icon-button.js";
-const x = v({
+const x = k({
   slots: {
     base: "gi-alert-base",
     baseDismissible: "gi-alert-base-dismissible",
@@ -37,9 +38,9 @@ const x = v({
   defaultVariants: {
     variant: "info"
   }
-}), I = ({ variant: i }) => {
+}), I = ({ variant: a }) => {
   let s;
-  switch (i) {
+  switch (a) {
     case "warning": {
       s = "warning";
       break;
@@ -57,46 +58,54 @@ const x = v({
   }
   return s;
 };
-function q({
-  title: i,
+function y({
+  title: a,
   children: s,
-  variant: a = "info",
+  variant: i = "info",
   dismissible: t,
   onClose: e,
-  dataTestid: l,
-  className: c
+  dataTestid: c,
+  className: o
 }) {
-  const [o, m] = h(!1), { base: d, heading: g, container: b, dismiss: f, baseDismissible: u } = x({
-    variant: a
-  }), p = t ? u : d;
-  return o ? null : /* @__PURE__ */ n(
+  const [m, g] = v(!1), { base: d, heading: b, container: f, dismiss: u, baseDismissible: p } = x({
+    variant: i
+  }), D = t ? p : d;
+  return m ? null : /* @__PURE__ */ n(
     "div",
     {
-      className: k(p(), c, "gi-not-prose"),
-      "data-testid": l,
+      className: l(D(), o, "gi-not-prose"),
+      "data-testid": c,
       role: "alert",
       "aria-live": "assertive",
       children: [
         /* @__PURE__ */ r(
           N,
           {
-            icon: I({ variant: a }),
+            icon: I({ variant: i }),
             ariaHidden: !0,
             className: "gi-alert-icon",
-            "data-variant": a
+            "data-variant": i
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: l(f(), {
+              "gi-gap-1": a
+            }),
+            children: [
+              a && /* @__PURE__ */ r("p", { className: b(), children: a }),
+              s
+            ]
           }
         ),
-        /* @__PURE__ */ n("div", { className: b(), children: [
-          /* @__PURE__ */ r("p", { className: g(), children: i }),
-          s
-        ] }),
         t && /* @__PURE__ */ r(
           V,
           {
-            onClick: (D) => {
-              m(!0), e == null || e(D);
+            onClick: (h) => {
+              g(!0), e == null || e(h);
             },
-            className: f(),
+            className: u(),
             size: "small",
             appearance: "dark",
             variant: "flat",
@@ -111,6 +120,6 @@ function q({
   );
 }
 export {
-  q as Alert,
+  y as Alert,
   x as alertVariants
 };

package/dist/autocomplete/autocomplete.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsxs as J, jsx as O } from "react/jsx-runtime";
 import { forwardRef as Q, useRef as G, useImperativeHandle as W, useEffect as Y, createElement as Z, Children as ee, isValidElement as te } from "react";
 import { cn as P } from "../cn.js";
@@ -38,7 +39,7 @@ const {
     bubbles: !0,
     isTrusted: !0
   });
-}, ve = Q(
+}, Ae = Q(
   (n, l) => {
     var N;
     const p = G(null), {
@@ -259,7 +260,7 @@ Object.defineProperty(me, "componentType", {
   enumerable: !1
 });
 export {
-  ve as Autocomplete,
+  Ae as Autocomplete,
   me as AutocompleteGroupItem,
   fe as AutocompleteItem,
   de as renderSelectMenuOptions

package/dist/browser-support/runtime.d.ts

@@ -0,0 +1,43 @@
+type RenderingEngine = 'chromium' | 'gecko' | 'webkit' | 'unknown';
+type BrowserInfo = {
+    brand: string;
+    version: number;
+    engine: RenderingEngine;
+    isMobile: boolean;
+    isIOS: boolean;
+    isAndroid: boolean;
+    isAndroidWebView: boolean;
+    isSamsungInternet: boolean;
+};
+type SupportPolicy = {
+    desktop: {
+        chromium: number;
+        gecko: number;
+        webkit: number;
+    };
+    mobile: {
+        chromium: number;
+        gecko: number;
+        webkit: number;
+    };
+};
+declare function normalizeBrand(rawBrand: string): string;
+declare function extractFirefoxMajorVersion(userAgentString: string): number;
+declare function extractSafariMajorVersion(userAgentString: string, isIOS: boolean): number;
+declare function getEngineInfoSync(): {
+    engine: RenderingEngine;
+    version: number;
+    brand: string;
+    isSamsung: boolean;
+};
+declare function getBrowserInfo(): Promise<BrowserInfo>;
+export declare const __test: {
+    extractFirefoxMajorVersion: typeof extractFirefoxMajorVersion;
+    extractSafariMajorVersion: typeof extractSafariMajorVersion;
+    normalizeBrand: typeof normalizeBrand;
+    getEngineInfoSync: typeof getEngineInfoSync;
+    getBrowserInfo: typeof getBrowserInfo;
+    isBrowserSupported: (browserInfo: BrowserInfo) => boolean;
+    SUPPORT_POLICY: SupportPolicy;
+};
+export {};

package/dist/browser-support/runtime.js

@@ -0,0 +1,283 @@
+"use client";
+import "@ogcio/design-system-react/browser-check";
+const w = {
+  desktop: { chromium: 109, gecko: 128, webkit: 16 },
+  mobile: { chromium: 114, gecko: 128, webkit: 16 }
+}, C = {
+  title: "Limited browser support detected",
+  message: (e, t) => `${e}${t} is not officially supported. Please update or switch to a supported browser for the best experience.`,
+  linkText: "View supported browsers",
+  linkHref: "https://ds.services.gov.ie/get-started/developers/supported-browsers/"
+};
+function M(e) {
+  return e.length === 0 ? "" : e.charAt(0).toUpperCase() + e.slice(1);
+}
+function u(e) {
+  return e !== null ? Number.parseInt(e[1], 10) : 0;
+}
+function V(e) {
+  if (e.length === 0)
+    return "chrome";
+  const t = e.toLowerCase();
+  return t.includes("google chrome") ? "chrome" : t.includes("edge") ? "edge" : t.includes("opera") ? "opera" : t.includes("vivaldi") ? "vivaldi" : t.includes("brave") ? "brave" : t.includes("arc") ? "arc" : t.includes("samsung") ? "samsung" : t.includes("yabrowser") ? "yandex" : t.includes("whale") ? "whale" : t.includes("firefox") ? "firefox" : t.includes("safari") ? "safari" : t;
+}
+function B(e) {
+  const t = /FxiOS\/(\d+)/.exec(e), n = /Firefox\/(\d+)/.exec(e), r = u(t);
+  return r || u(n);
+}
+function L(e, t) {
+  const n = /Version\/(\d+)/.exec(e);
+  if (n)
+    return u(n);
+  if (t) {
+    const r = /OS (\d+)_\d+(_\d+)? like Mac OS X/.exec(e), i = u(r);
+    if (i > 0)
+      return i;
+  }
+  return 0;
+}
+function T(e) {
+  return e.edgeMatch ? "edge" : e.operaMatch ? "opera" : e.hasVivaldi ? "vivaldi" : e.yandexMatch ? "yandex" : e.whaleMatch ? "whale" : e.braveMatch ? "brave" : e.arcMatch ? "arc" : e.samsungMatch ? "samsung" : "chrome";
+}
+async function D(e) {
+  var t;
+  try {
+    const n = navigator;
+    if (typeof ((t = n.userAgentData) == null ? void 0 : t.getHighEntropyValues) == "function") {
+      const r = await n.userAgentData.getHighEntropyValues([
+        "platform",
+        "platformVersion",
+        "fullVersionList",
+        "model",
+        "architecture",
+        "bitness",
+        "uaFullVersion"
+      ]), i = r.fullVersionList ?? e ?? [];
+      return { ok: !0, ...r, fullVersionList: i };
+    }
+  } catch (n) {
+    console.error("[browser-check] failed to get user-agent info", n);
+  }
+  return { ok: !1 };
+}
+function N() {
+  const e = globalThis.navigator, t = (e == null ? void 0 : e.userAgent) ?? "", n = t.match(/Edg\/(\d+)/), r = t.match(/OPR\/(\d+)/), i = /Vivaldi/i.test(t), o = /YaBrowser\/(\d+)/i.exec(t), s = /Whale\/(\d+)/i.exec(t), a = /Brave\/(\d+)/i.exec(t), f = /Arc\/(\d+)/i.exec(t), l = /SamsungBrowser\/(\d+)/i.exec(t), d = t.match(/Chrome\/(\d+)/);
+  if (n || r || i || o || s || a || f || l || d) {
+    const g = u(d) || u(n) || u(r) || u(o) || u(s) || u(a) || u(f) || 0, S = T({
+      edgeMatch: n,
+      operaMatch: r,
+      hasVivaldi: i,
+      yandexMatch: o,
+      whaleMatch: s,
+      braveMatch: a,
+      arcMatch: f,
+      samsungMatch: l
+    });
+    return {
+      engine: "chromium",
+      version: g,
+      brand: S,
+      isSamsung: !!l
+    };
+  }
+  const c = B(t);
+  return c > 0 ? {
+    engine: "gecko",
+    version: c,
+    brand: "firefox",
+    isSamsung: !1
+  } : /Safari\//.test(t) && !/Chrome|Chromium|CriOS|Edg|OPR|SamsungBrowser/i.test(t) ? { engine: "webkit", version: 0, brand: "safari", isSamsung: !1 } : { engine: "unknown", version: 0, brand: "unknown", isSamsung: !1 };
+}
+async function E() {
+  var c, m, g;
+  const e = ((c = globalThis.navigator) == null ? void 0 : c.userAgent) ?? "", t = /Android/i.test(e), n = /iP(hone|ad|od)/i.test(e), r = t || n || /Mobile/i.test(e), i = N(), o = i.engine;
+  let s = i.version, a = i.brand;
+  if (o === "webkit" && (s = L(e, n)), o === "chromium") {
+    const F = (m = navigator.userAgentData) == null ? void 0 : m.brands, b = await D(F);
+    if (b.ok) {
+      const h = b.fullVersionList.find(
+        (p) => /Chromium|Chrome/i.test(p.brand)
+      );
+      if (h != null && h.version) {
+        const p = Number.parseInt(
+          String(h.version).split(".")[0] ?? `${s}`,
+          10
+        );
+        Number.isFinite(p) && (s = p);
+      }
+      const x = (g = b.fullVersionList.find(
+        (p) => /(edge|opera|vivaldi|brave|arc|samsung|yabrowser|whale|google chrome)/i.test(
+          p.brand
+        )
+      )) == null ? void 0 : g.brand;
+      x && (a = V(x));
+    }
+  }
+  const f = t && (/; wv\)/i.test(e) || /Version\/\d+\.\d+ Chrome\/\d+\.\d+\.\d+\.\d+ Mobile Safari\/\d+\.\d+/i.test(
+    e
+  )) && !/SamsungBrowser/i.test(e), l = /SamsungBrowser\/\d+/i.test(e) || i.isSamsung;
+  return {
+    brand: a,
+    version: s,
+    engine: n ? "webkit" : o,
+    isMobile: r,
+    isIOS: n,
+    isAndroid: t,
+    isAndroidWebView: f,
+    isSamsungInternet: l
+  };
+}
+function R(e) {
+  return e.brand.length > 0 && e.brand !== "unknown" ? M(e.brand) : e.engine === "unknown" ? "Browser" : M(e.engine);
+}
+function P(e, t) {
+  const n = e.isMobile ? t.mobile : t.desktop;
+  return e.engine === "chromium" ? e.version >= n.chromium : e.engine === "gecko" ? e.version >= n.gecko : e.engine === "webkit" ? e.version >= n.webkit : !1;
+}
+const y = "lib-browser-support-banner-root";
+function O(e, t) {
+  return P(e, t);
+}
+function j(e, t, n = C) {
+  const r = document.createElement("div");
+  r.className = "gi-alert-base-dismissible gi-alert-warning !gi-max-w-full gi-not-prose", r.setAttribute("role", "alert"), r.setAttribute("aria-live", "assertive");
+  const i = document.createElement("span");
+  i.dataset.testid = "govie-icon", i.dataset.variant = "warning", i.setAttribute("aria-hidden", "true"), i.setAttribute("role", "presentation"), i.className = "gi-block material-symbols-outlined gi-alert-icon", i.style.fontSize = "24px", i.textContent = "warning";
+  const o = document.createElement("div");
+  o.className = "gi-alert-container";
+  const s = document.createElement("p");
+  s.className = "gi-alert-title", s.textContent = n.title;
+  const a = document.createElement("div"), f = "browser-support-message", l = document.createElement("div");
+  l.id = f, l.textContent = n.message(e, t);
+  const d = document.createElement("a");
+  d.href = n.linkHref, d.target = "_blank", d.rel = "noreferrer", d.className = "gi-link", d.textContent = n.linkText;
+  const c = document.createElement("button");
+  c.type = "button", c.setAttribute("aria-label", "Dismiss alert"), c.className = "gi-btn gi-btn-flat-dark gi-icon-btn-small gi-alert-dismiss";
+  const m = document.createElement("span");
+  return m.setAttribute("role", "presentation"), m.className = "gi-block material-symbols-outlined", m.style.fontSize = "16px", m.textContent = "close", c.append(m), a.append(l), a.append(d), o.append(s), o.append(a), r.append(i), r.append(o), r.append(c), c.addEventListener(
+    "click",
+    () => {
+      const g = document.querySelector(
+        `#${y}`
+      );
+      g == null || g.remove(), r.remove(), k = !1;
+    },
+    { once: !0 }
+  ), r.setAttribute("aria-describedby", f), r;
+}
+let k = !1;
+function A() {
+  if (typeof document > "u")
+    return null;
+  const e = document.querySelector(
+    `#${y}`
+  );
+  if (e !== null)
+    return e;
+  if (!document.body)
+    return null;
+  const t = document.createElement("div");
+  return t.id = y, t.className = "gi-w-full gi-p-1 gi-block", document.body.firstChild ? document.body.insertBefore(t, document.body.firstChild) : document.body.append(t), t;
+}
+function $(e) {
+  if (document.body) {
+    e();
+    return;
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        e();
+      },
+      { once: !0 }
+    );
+    return;
+  }
+  const t = new MutationObserver(() => {
+    document.body && (t.disconnect(), e());
+  });
+  t.observe(document.documentElement, {
+    childList: !0,
+    subtree: !0
+  });
+}
+function q(e) {
+  const t = A(), n = () => {
+    const r = A();
+    if (!r)
+      return;
+    const i = r.querySelector('[role="alert"]');
+    i && i.remove();
+    const o = R(e), s = e.version > 0 ? ` ${e.version}` : "", a = j(
+      o,
+      s,
+      C
+    );
+    r.prepend(a), k = !0;
+  };
+  if (!t) {
+    $(() => {
+      n();
+    });
+    return;
+  }
+  n();
+}
+async function z(e) {
+  if (k)
+    return;
+  const t = e ?? await E();
+  q(t);
+}
+function v(e) {
+  requestAnimationFrame(() => {
+    e();
+  });
+}
+async function H() {
+  if (typeof document > "u")
+    return;
+  const e = await E();
+  if (!O(e, w)) {
+    const n = () => {
+      z(e);
+    };
+    document.readyState === "complete" ? v(n) : document.readyState === "interactive" ? window.addEventListener(
+      "load",
+      () => {
+        v(n);
+      },
+      { once: !0 }
+    ) : document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        window.addEventListener(
+          "load",
+          () => {
+            v(n);
+          },
+          { once: !0 }
+        );
+      },
+      { once: !0 }
+    );
+  }
+}
+typeof document < "u" && queueMicrotask(() => {
+  H().catch((e) => {
+    console.error("[browser-check] failed to run", e);
+  });
+});
+const U = {
+  extractFirefoxMajorVersion: B,
+  extractSafariMajorVersion: L,
+  normalizeBrand: V,
+  getEngineInfoSync: N,
+  getBrowserInfo: E,
+  isBrowserSupported: (e) => O(e, w),
+  SUPPORT_POLICY: w
+};
+export {
+  U as __test
+};

package/dist/button/button.js

@@ -1,24 +1,25 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
+import "@ogcio/design-system-react/browser-check";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
 import { cn as u } from "../cn.js";
 import { getSizeClass as c, isButtonDisabled as b, getVariantAppearanceClass as B } from "./helpers.js";
-const r = p(
+const r = l(
   ({
     variant: e,
     appearance: o,
     size: a,
     disabled: t,
     className: n,
-    children: s,
-    dataTestid: i,
-    ...m
-  }, f) => /* @__PURE__ */ l(
+    children: i,
+    dataTestid: m,
+    ...s
+  }, p) => /* @__PURE__ */ f(
     "button",
     {
-      "data-testid": i,
-      ...m,
-      ref: f,
+      "data-testid": m,
+      ...s,
+      ref: p,
       "aria-disabled": t,
       disabled: t,
       className: u(
@@ -28,7 +29,7 @@ const r = p(
         c(a),
         n
       ),
-      children: s
+      children: i
     }
   )
 );

package/dist/button-group/button-group.js

@@ -1,4 +1,5 @@
 "use client";
+import "@ogcio/design-system-react/browser-check";
 import { jsx as y } from "react/jsx-runtime";
 import { createContext as G, useState as V, useEffect as k, useContext as S } from "react";
 import { Button as w } from "../button/button.js";
@@ -6,7 +7,7 @@ import { cn as E } from "../cn.js";
 import { useDomId as $ } from "../hooks/use-dom-id.js";
 const x = G(
   void 0
-), P = ({
+), q = ({
   value: r,
   children: d,
   role: s,
@@ -43,7 +44,7 @@ const x = G(
       children: d
     }
   );
-}, q = ({
+}, A = ({
   name: r,
   size: d = "medium",
   appearance: s = "dark",
@@ -93,6 +94,6 @@ const x = G(
   );
 };
 export {
-  q as ButtonGroup,
-  P as ButtonGroupItem
+  A as ButtonGroup,
+  q as ButtonGroupItem
 };