@ogcio/design-system-react 1.26.0 → 1.28.0

package/dist/textarea/textarea.d.ts

@@ -4,6 +4,12 @@ export type TextAreaProps = React.DetailedHTMLProps<TextareaHTMLAttributes<HTMLT
     rows?: number;
     cols?: number;
     autoComplete?: string;
+    /**
+     * @deprecated Use the `maxLength` + `CharacterCount` component instead for displaying remaining characters.
+     * `maxChars` works correctly in controlled mode (when passing `value`), but in uncontrolled mode
+     * (e.g., with React Hook Form), the character count may not update correctly after `reset()`.
+     * For uncontrolled usage, use `CharacterCount` with `watch()` or state to track the current value length.
+     */
     maxChars?: number;
     halfFluid?: boolean;
     iconStart?: IconId;

package/dist/textarea/textarea.js

@@ -1,41 +1,41 @@
 "use client";
 import { jsxs as g, Fragment as j, jsx as e } from "react/jsx-runtime";
-import { forwardRef as z, useRef as A, useState as v, useImperativeHandle as H, useEffect as O } from "react";
-import { cn as h } from "../cn.js";
+import { forwardRef as z, useRef as A, useState as h, useImperativeHandle as H, useEffect as O } from "react";
+import { cn as v } from "../cn.js";
 import { HintText as F } from "../hint-text/hint-text.js";
 import { translate as L } from "../i18n/utility.js";
-import { Icon as Y } from "../icon/icon.js";
-import { IconButton as $ } from "../icon-button/icon-button.js";
-const q = z(
+import { Icon as S } from "../icon/icon.js";
+import { IconButton as Y } from "../icon-button/icon-button.js";
+const $ = z(
   ({
-    value: d,
+    value: r,
     rows: p = 4,
     cols: x = 100,
     autoComplete: b = "on",
     maxChars: t,
     halfFluid: N = !1,
-    iconStart: i,
+    iconStart: l,
     className: R,
-    clearButtonEnabled: u,
+    clearButtonEnabled: d,
     onChange: a,
-    name: r,
-    ...l
+    name: s,
+    ...c
   }, V) => {
-    const n = A(null), [f, I] = v(
+    const n = A(null), [u, I] = h(
       t
     );
     H(V, () => n.current);
-    const [T, m] = v(""), s = d !== void 0, c = s ? String(d) : T;
+    const [T, f] = h(""), i = r !== void 0, m = i ? String(r) : T;
     O(() => {
-      t !== void 0 && I(t - c.length);
-    }, [c, t]);
+      t !== void 0 && I(t - m.length);
+    }, [m, t]);
     const k = (o) => {
       const y = o.target.value;
-      s || m(y), a && a(o);
+      i || f(y), a && a(o);
     }, w = () => {
-      n.current && (s || m(""), a && a({
-        target: { name: r, value: "" },
-        currentTarget: { name: r, value: "" },
+      n.current && (i || f(""), a && a({
+        target: { name: s, value: "" },
+        currentTarget: { name: s, value: "" },
         type: "change",
         bubbles: !0
       }), n.current.focus());
@@ -44,33 +44,33 @@ const q = z(
       /* @__PURE__ */ e("div", { className: "gi-textarea-container", children: /* @__PURE__ */ g(
         "div",
         {
-          className: h("gi-textarea-inner", {
+          className: v("gi-textarea-inner", {
             "gi-input-half-width": N
           }),
           children: [
-            i && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(Y, { icon: i, size: "md", disabled: l.disabled }) }),
+            l && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(S, { icon: l, size: "md", disabled: c.disabled }) }),
             /* @__PURE__ */ e(
               "textarea",
               {
-                name: r,
+                name: s,
                 rows: p,
                 cols: x,
                 autoComplete: b,
-                className: h(R, "gi-textarea"),
+                className: v(R, "gi-textarea"),
                 ref: n,
-                "data-icon-start": !!i,
-                "data-clear-enabled": u,
+                "data-icon-start": !!l,
+                "data-clear-enabled": d,
                 maxLength: t,
-                value: c,
+                ...i ? { value: String(r) } : {},
                 onChange: k,
-                ...l
+                ...c
               }
             ),
-            u ? /* @__PURE__ */ e("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ e(
-              $,
+            d ? /* @__PURE__ */ e("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ e(
+              Y,
               {
                 type: "button",
-                disabled: l.disabled,
+                disabled: c.disabled,
                 icon: {
                   icon: "close"
                 },
@@ -87,15 +87,15 @@ const q = z(
         F,
         {
           text: L("textarea.remainingChars", {
-            remainingChars: f,
-            defaultValue: `You have ${f} characters remaining`
+            remainingChars: u,
+            defaultValue: `You have ${u} characters remaining`
           })
         }
       ) })
     ] });
   }
 );
-q.displayName = "TextArea";
+$.displayName = "TextArea";
 export {
-  q as TextArea
+  $ as TextArea
 };

package/dist/useTranslation-DiBQuy8S.js

@@ -0,0 +1,268 @@
+import W, { createContext as J, useContext as Q, useMemo as A, useRef as C, useCallback as q, useState as Z, useEffect as ee } from "react";
+import { g as te, b as ne } from "./i18nInstance-AYICsHJu.js";
+const re = (e, n, r, g) => {
+  var t, S, h, _;
+  const c = [r, {
+    code: n,
+    ...g || {}
+  }];
+  if ((S = (t = e == null ? void 0 : e.services) == null ? void 0 : t.logger) != null && S.forward)
+    return e.services.logger.forward(c, "warn", "react-i18next::", !0);
+  w(c[0]) && (c[0] = `react-i18next:: ${c[0]}`), (_ = (h = e == null ? void 0 : e.services) == null ? void 0 : h.logger) != null && _.warn ? e.services.logger.warn(...c) : console != null && console.warn && console.warn(...c);
+}, z = {}, $ = (e, n, r, g) => {
+  w(r) && z[r] || (w(r) && (z[r] = /* @__PURE__ */ new Date()), re(e, n, r, g));
+}, F = (e, n) => () => {
+  if (e.isInitialized)
+    n();
+  else {
+    const r = () => {
+      setTimeout(() => {
+        e.off("initialized", r);
+      }, 0), n();
+    };
+    e.on("initialized", r);
+  }
+}, D = (e, n, r) => {
+  e.loadNamespaces(n, F(e, r));
+}, B = (e, n, r, g) => {
+  if (w(r) && (r = [r]), e.options.preload && e.options.preload.indexOf(n) > -1) return D(e, r, g);
+  r.forEach((c) => {
+    e.options.ns.indexOf(c) < 0 && e.options.ns.push(c);
+  }), e.loadLanguages(n, F(e, g));
+}, ae = (e, n, r = {}) => !n.languages || !n.languages.length ? ($(n, "NO_LANGUAGES", "i18n.languages were undefined or empty", {
+  languages: n.languages
+}), !0) : n.hasLoadedNamespace(e, {
+  lng: r.lng,
+  precheck: (g, c) => {
+    if (r.bindI18n && r.bindI18n.indexOf("languageChanging") > -1 && g.services.backendConnector.backend && g.isLanguageChangingTo && !c(g.isLanguageChangingTo, e)) return !1;
+  }
+}), w = (e) => typeof e == "string", oe = (e) => typeof e == "object" && e !== null, se = J();
+class ce {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(n) {
+    n.forEach((r) => {
+      this.usedNamespaces[r] || (this.usedNamespaces[r] = !0);
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+}
+var R = { exports: {} }, j = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var H;
+function ue() {
+  if (H) return j;
+  H = 1;
+  var e = W;
+  function n(a, d) {
+    return a === d && (a !== 0 || 1 / a === 1 / d) || a !== a && d !== d;
+  }
+  var r = typeof Object.is == "function" ? Object.is : n, g = e.useState, c = e.useEffect, t = e.useLayoutEffect, S = e.useDebugValue;
+  function h(a, d) {
+    var o = d(), u = g({ inst: { value: o, getSnapshot: d } }), l = u[0].inst, y = u[1];
+    return t(
+      function() {
+        l.value = o, l.getSnapshot = d, _(l) && y({ inst: l });
+      },
+      [a, o, d]
+    ), c(
+      function() {
+        return _(l) && y({ inst: l }), a(function() {
+          _(l) && y({ inst: l });
+        });
+      },
+      [a]
+    ), S(o), o;
+  }
+  function _(a) {
+    var d = a.getSnapshot;
+    a = a.value;
+    try {
+      var o = d();
+      return !r(a, o);
+    } catch {
+      return !0;
+    }
+  }
+  function O(a, d) {
+    return d();
+  }
+  var m = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? O : h;
+  return j.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : m, j;
+}
+var U = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var K;
+function ie() {
+  return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(o, u) {
+      return o === u && (o !== 0 || 1 / o === 1 / u) || o !== o && u !== u;
+    }
+    function n(o, u) {
+      m || c.startTransition === void 0 || (m = !0, console.error(
+        "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+      ));
+      var l = u();
+      if (!a) {
+        var y = u();
+        t(l, y) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), a = !0);
+      }
+      y = S({
+        inst: { value: l, getSnapshot: u }
+      });
+      var E = y[0].inst, v = y[1];
+      return _(
+        function() {
+          E.value = l, E.getSnapshot = u, r(E) && v({ inst: E });
+        },
+        [o, l, u]
+      ), h(
+        function() {
+          return r(E) && v({ inst: E }), o(function() {
+            r(E) && v({ inst: E });
+          });
+        },
+        [o]
+      ), O(l), l;
+    }
+    function r(o) {
+      var u = o.getSnapshot;
+      o = o.value;
+      try {
+        var l = u();
+        return !t(o, l);
+      } catch {
+        return !0;
+      }
+    }
+    function g(o, u) {
+      return u();
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var c = W, t = typeof Object.is == "function" ? Object.is : e, S = c.useState, h = c.useEffect, _ = c.useLayoutEffect, O = c.useDebugValue, m = !1, a = !1, d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? g : n;
+    U.useSyncExternalStore = c.useSyncExternalStore !== void 0 ? c.useSyncExternalStore : d, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  })()), U;
+}
+var M;
+function le() {
+  return M || (M = 1, process.env.NODE_ENV === "production" ? R.exports = ue() : R.exports = ie()), R.exports;
+}
+var fe = le();
+const de = (e, n) => w(n) ? n : oe(n) && w(n.defaultValue) ? n.defaultValue : Array.isArray(e) ? e[e.length - 1] : e, pe = {
+  t: de,
+  ready: !1
+}, ge = () => () => {
+}, ye = (e, n = {}) => {
+  var k, N, P;
+  const {
+    i18n: r
+  } = n, {
+    i18n: g,
+    defaultNS: c
+  } = Q(se) || {}, t = r || g || te();
+  t && !t.reportNamespaces && (t.reportNamespaces = new ce()), t || $(t, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
+  const S = A(() => {
+    var s;
+    return {
+      ...ne(),
+      ...(s = t == null ? void 0 : t.options) == null ? void 0 : s.react,
+      ...n
+    };
+  }, [t, n]), {
+    useSuspense: h,
+    keyPrefix: _
+  } = S, O = c || ((k = t == null ? void 0 : t.options) == null ? void 0 : k.defaultNS), m = w(O) ? [O] : O || ["translation"], a = A(() => m, m);
+  (P = (N = t == null ? void 0 : t.reportNamespaces) == null ? void 0 : N.addUsedNamespaces) == null || P.call(N, a);
+  const d = C(0), o = q((s) => {
+    if (!t) return ge;
+    const {
+      bindI18n: i,
+      bindI18nStore: f
+    } = S, p = () => {
+      d.current += 1, s();
+    };
+    return i && t.on(i, p), f && t.store.on(f, p), () => {
+      i && i.split(" ").forEach((T) => t.off(T, p)), f && f.split(" ").forEach((T) => t.store.off(T, p));
+    };
+  }, [t, S]), u = C(), l = q(() => {
+    if (!t)
+      return pe;
+    const s = !!(t.isInitialized || t.initializedStoreOnce) && a.every((X) => ae(X, t, S)), i = n.lng || t.language, f = d.current, p = u.current;
+    if (p && p.ready === s && p.lng === i && p.keyPrefix === _ && p.revision === f)
+      return p;
+    const V = {
+      t: t.getFixedT(i, S.nsMode === "fallback" ? a : a[0], _),
+      ready: s,
+      lng: i,
+      keyPrefix: _,
+      revision: f
+    };
+    return u.current = V, V;
+  }, [t, a, _, S, n.lng]), [y, E] = Z(0), {
+    t: v,
+    ready: L
+  } = fe.useSyncExternalStore(o, l, l);
+  ee(() => {
+    if (t && !L && !h) {
+      const s = () => E((i) => i + 1);
+      n.lng ? B(t, n.lng, a, s) : D(t, a, s);
+    }
+  }, [t, n.lng, a, L, h, y]);
+  const x = t || {}, b = C(null), I = C(), G = (s) => {
+    const i = Object.getOwnPropertyDescriptors(s);
+    i.__original && delete i.__original;
+    const f = Object.create(Object.getPrototypeOf(s), i);
+    if (!Object.prototype.hasOwnProperty.call(f, "__original"))
+      try {
+        Object.defineProperty(f, "__original", {
+          value: s,
+          writable: !1,
+          enumerable: !1,
+          configurable: !1
+        });
+      } catch {
+      }
+    return f;
+  }, Y = A(() => {
+    const s = x, i = s == null ? void 0 : s.language;
+    let f = s;
+    s && (b.current && b.current.__original === s ? I.current !== i ? (f = G(s), b.current = f, I.current = i) : f = b.current : (f = G(s), b.current = f, I.current = i));
+    const p = [v, f, L];
+    return p.t = v, p.i18n = f, p.ready = L, p;
+  }, [v, x, L, x.resolvedLanguage, x.language, x.languages]);
+  if (t && h && !L)
+    throw new Promise((s) => {
+      const i = () => s();
+      n.lng ? B(t, n.lng, a, i) : D(t, a, i);
+    });
+  return Y;
+};
+export {
+  se as I,
+  re as a,
+  oe as b,
+  w as i,
+  ye as u,
+  $ as w
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "The Government of Ireland Design System React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -55,7 +55,7 @@
     "@ogcio/design-system-prettier-config": "1.1.0",
     "@ogcio/design-system-tailwind": "1.21.2",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.21.1"
+    "@ogcio/theme-govie": "1.21.2"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",

package/dist/index-2sRBqKFV.js

@@ -1,78 +0,0 @@
-import * as i from "react";
-import { jsx as f, Fragment as S } from "react/jsx-runtime";
-function d(t, e) {
-  if (typeof t == "function")
-    return t(e);
-  t != null && (t.current = e);
-}
-function g(...t) {
-  return (e) => {
-    let r = !1;
-    const o = t.map((n) => {
-      const l = d(n, e);
-      return !r && typeof l == "function" && (r = !0), l;
-    });
-    if (r)
-      return () => {
-        for (let n = 0; n < o.length; n++) {
-          const l = o[n];
-          typeof l == "function" ? l() : d(t[n], null);
-        }
-      };
-  };
-}
-// @__NO_SIDE_EFFECTS__
-function b(t) {
-  const e = /* @__PURE__ */ C(t), r = i.forwardRef((o, n) => {
-    const { children: l, ...a } = o, s = i.Children.toArray(l), c = s.find(h);
-    if (c) {
-      const u = c.props.children, m = s.map((p) => p === c ? i.Children.count(u) > 1 ? i.Children.only(null) : i.isValidElement(u) ? u.props.children : null : p);
-      return /* @__PURE__ */ f(e, { ...a, ref: n, children: i.isValidElement(u) ? i.cloneElement(u, void 0, m) : null });
-    }
-    return /* @__PURE__ */ f(e, { ...a, ref: n, children: l });
-  });
-  return r.displayName = `${t}.Slot`, r;
-}
-var I = /* @__PURE__ */ b("Slot");
-// @__NO_SIDE_EFFECTS__
-function C(t) {
-  const e = i.forwardRef((r, o) => {
-    const { children: n, ...l } = r;
-    if (i.isValidElement(n)) {
-      const a = _(n), s = R(l, n.props);
-      return n.type !== i.Fragment && (s.ref = o ? g(o, a) : a), i.cloneElement(n, s);
-    }
-    return i.Children.count(n) > 1 ? i.Children.only(null) : null;
-  });
-  return e.displayName = `${t}.SlotClone`, e;
-}
-var y = Symbol("radix.slottable");
-// @__NO_SIDE_EFFECTS__
-function E(t) {
-  const e = ({ children: r }) => /* @__PURE__ */ f(S, { children: r });
-  return e.displayName = `${t}.Slottable`, e.__radixId = y, e;
-}
-var V = /* @__PURE__ */ E("Slottable");
-function h(t) {
-  return i.isValidElement(t) && typeof t.type == "function" && "__radixId" in t.type && t.type.__radixId === y;
-}
-function R(t, e) {
-  const r = { ...e };
-  for (const o in e) {
-    const n = t[o], l = e[o];
-    /^on[A-Z]/.test(o) ? n && l ? r[o] = (...s) => {
-      const c = l(...s);
-      return n(...s), c;
-    } : n && (r[o] = n) : o === "style" ? r[o] = { ...n, ...l } : o === "className" && (r[o] = [n, l].filter(Boolean).join(" "));
-  }
-  return { ...t, ...r };
-}
-function _(t) {
-  var o, n;
-  let e = (o = Object.getOwnPropertyDescriptor(t.props, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning;
-  return r ? t.ref : (e = (n = Object.getOwnPropertyDescriptor(t, "ref")) == null ? void 0 : n.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? t.props.ref : t.props.ref || t.ref);
-}
-export {
-  V as S,
-  I as a
-};

package/dist/load-fonts/load-fonts.d.ts

@@ -1,40 +0,0 @@
-/**
- * LoadFonts Component
- *
- * This component injects Google Fonts link tags for Lato font family and Material Symbols Outlined icons.
- * Use this component in your app's root layout or _app file to load fonts from Google CDN.
- *
- * **Next.js App Router (app/layout.tsx):**
- * ```tsx
- * import { LoadFonts } from '@ogcio/design-system-react';
- *
- * export default function RootLayout({ children }) {
- *   return (
- *     <html lang="en">
- *       <head>
- *         <LoadFonts />
- *       </head>
- *       <body>{children}</body>
- *     </html>
- *   );
- * }
- * ```
- *
- * **Next.js Pages Router (pages/_app.tsx):**
- * ```tsx
- * import Head from 'next/head';
- * import { LoadFonts } from '@ogcio/design-system-react';
- *
- * export default function App({ Component, pageProps }) {
- *   return (
- *     <>
- *       <Head>
- *         <LoadFonts />
- *       </Head>
- *       <Component {...pageProps} />
- *     </>
- *   );
- * }
- * ```
- */
-export declare const LoadFonts: () => import("react/jsx-runtime").JSX.Element;