@ogcio/design-system-react 1.26.0 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +27 -11
  2. package/dist/autocomplete/use-autocomplete-controller.js +1 -1
  3. package/dist/browser-support/browser-support.js +1 -1
  4. package/dist/character-count/character-count.d.ts +6 -0
  5. package/dist/character-count/character-count.js +23 -0
  6. package/dist/character-count/types.d.ts +10 -0
  7. package/dist/character-count/types.js +1 -0
  8. package/dist/data-table/editable-table-cell.js +1 -1
  9. package/dist/forms/form-field/form-field.js +1 -1
  10. package/dist/forms/form-field-with-tag/form-field-with-tag.js +1 -1
  11. package/dist/header/header-next/components/menu/components/header-menu-item-button.js +1 -1
  12. package/dist/header/header-next/components/menu/components/header-menu-item-link.js +1 -1
  13. package/dist/hooks/use-focus-trap.js +574 -416
  14. package/dist/i18n/config.js +2 -2
  15. package/dist/i18n/utility.js +1 -1
  16. package/dist/{i18nInstance-D_96ADqd.js → i18nInstance-AYICsHJu.js} +8 -6
  17. package/dist/{i18next-B_GQfCrJ.js → i18next-Bfi2-LyH.js} +125 -117
  18. package/dist/index-D_wwt4P0.js +87 -0
  19. package/dist/index.d.ts +7 -1
  20. package/dist/index.js +232 -229
  21. package/dist/link/link.js +33 -33
  22. package/dist/load-symbols/load-symbols.d.ts +7 -0
  23. package/dist/{load-fonts/load-fonts.js → load-symbols/load-symbols.js} +7 -13
  24. package/dist/{lodash-LsP9-6SV.js → lodash-82PmXrjJ.js} +16 -16
  25. package/dist/pagination/pagination.js +249 -221
  26. package/dist/primitives/anchor.js +1 -1
  27. package/dist/styles.css +1 -1
  28. package/dist/textarea/textarea.d.ts +6 -0
  29. package/dist/textarea/textarea.js +33 -33
  30. package/dist/useTranslation-DiBQuy8S.js +268 -0
  31. package/package.json +2 -2
  32. package/dist/index-2sRBqKFV.js +0 -78
  33. package/dist/load-fonts/load-fonts.d.ts +0 -40
  34. package/dist/useTranslation-BmIU4GBA.js +0 -272
package/README.md CHANGED
@@ -73,17 +73,33 @@ function MyComponent() {
73
73
  }
74
74
  ```
75
75
 
76
- The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) Google font. The font should be added to your application, e.g. via [next/font](https://nextjs.org/docs/app/building-your-application/optimizing/fonts), [Fontsource](https://fontsource.org/docs/getting-started/install) or embed code.
77
-
78
- > **Next.js 16+ users:** Use the `LoadFonts` component in your root layout to load fonts from Google CDN:
79
- >
80
- > ```tsx
81
- > import { LoadFonts } from '@ogcio/design-system-react';
82
- >
83
- > <head>
84
- > <LoadFonts />
85
- > </head>;
86
- > ```
76
+ #### Font Loading
77
+
78
+ The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) Google font. While the design system includes font loading through `styles.css`, **in Next.js 16 applications, CSS `@import` statements do not load fonts properly**. Therefore, you must explicitly load fonts using `next/font/google` for optimal font loading.
79
+
80
+ **Recommended approach for Next.js (Primary):**
81
+
82
+ For Next.js applications, we strongly recommend using [`next/font/google`](https://nextjs.org/docs/app/getting-started/fonts) as it provides optimal font loading with automatic optimisation.
83
+
84
+ ```tsx
85
+ // app/layout.tsx (App Router)
86
+ import { Lato } from 'next/font/google';
87
+
88
+ const lato = Lato({
89
+ subsets: ['latin'],
90
+ weight: ['100', '300', '400', '700', '900'],
91
+ style: ['normal', 'italic'],
92
+ display: 'swap',
93
+ });
94
+
95
+ export default function RootLayout({ children }) {
96
+ return (
97
+ <html lang="en" className={lato.className}>
98
+ <body>{children}</body>
99
+ </html>
100
+ );
101
+ }
102
+ ```
87
103
 
88
104
  ### Internationalization (i18n) Guidelines
89
105
 
package/dist/autocomplete/use-autocomplete-controller.js CHANGED
@@ -1,4 +1,4 @@
1
- import { l as F } from "../lodash-LsP9-6SV.js";
1
+ import { l as F } from "../lodash-82PmXrjJ.js";
2
2
  import { useRef as g, useMemo as G, Children as C, useReducer as X, useEffect as A, isValidElement as h } from "react";
3
3
  import { useScrollHighlightedItem as Y } from "../hooks/use-scroll-highlighted-item.js";
4
4
  import { safeCloneElement as j } from "../utils/utilities.js";
package/dist/browser-support/browser-support.js CHANGED
@@ -5,7 +5,7 @@ import { useMemo as S } from "react";
5
5
  import { Alert as B } from "../alert/alert.js";
6
6
  import { BROWSER_POLICY as x, DS_HOST as k } from "../constants.js";
7
7
  import { Link as A } from "../link/link.js";
8
- import { u as P } from "../useTranslation-BmIU4GBA.js";
8
+ import { u as P } from "../useTranslation-DiBQuy8S.js";
9
9
  const O = {
10
10
  AmazonBot: "amazonbot",
11
11
  "Amazon Silk": "amazon_silk",
package/dist/character-count/character-count.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { CharacterCountProps } from './types.js';
2
+ /**
3
+ * CharacterCount displays the remaining character count for textarea-based
4
+ * inputs, such as the TextArea component.
5
+ */
6
+ export declare const CharacterCount: React.FC<CharacterCountProps>;
package/dist/character-count/character-count.js ADDED
@@ -0,0 +1,23 @@
1
+ "use client";
2
+ import { jsx as a } from "react/jsx-runtime";
3
+ import { HintText as n } from "../hint-text/hint-text.js";
4
+ import { translate as i } from "../i18n/utility.js";
5
+ const m = ({
6
+ maxChars: e,
7
+ value: r
8
+ }) => {
9
+ const t = Math.max(0, e - ((r == null ? void 0 : r.length) ?? 0));
10
+ return /* @__PURE__ */ a("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ a(
11
+ n,
12
+ {
13
+ text: i("textarea.remainingChars", {
14
+ remainingChars: t,
15
+ defaultValue: `You have ${t} characters remaining`
16
+ })
17
+ }
18
+ ) });
19
+ };
20
+ m.displayName = "CharacterCount";
21
+ export {
22
+ m as CharacterCount
23
+ };
package/dist/character-count/types.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export type CharacterCountProps = {
2
+ /**
3
+ * The maximum number of characters allowed.
4
+ */
5
+ maxChars: number;
6
+ /**
7
+ * The current text value.
8
+ */
9
+ value: string;
10
+ };
package/dist/character-count/types.js ADDED
@@ -0,0 +1 @@
1
+
package/dist/data-table/editable-table-cell.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as o } from "react/jsx-runtime";
3
- import { l as O } from "../lodash-LsP9-6SV.js";
3
+ import { l as O } from "../lodash-82PmXrjJ.js";
4
4
  import { useState as g, useMemo as S, useEffect as k } from "react";
5
5
  import { InputCheckboxTableCell as V } from "../input-checkbox/input-checkbox.js";
6
6
  import { InputTextTableCell as j } from "../input-text/input-text.js";
package/dist/forms/form-field/form-field.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as l, jsxs as a, Fragment as p } from "react/jsx-runtime";
3
- import { S as x } from "../../index-2sRBqKFV.js";
3
+ import { S as x } from "../../index-D_wwt4P0.js";
4
4
  import { createContext as v, useContext as N, Children as C } from "react";
5
5
  import { cn as c } from "../../cn.js";
6
6
  import { ErrorText as L } from "../../error-text/error-text.js";
package/dist/forms/form-field-with-tag/form-field-with-tag.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs as o, jsx as m } from "react/jsx-runtime";
2
- import { S as d } from "../../index-2sRBqKFV.js";
2
+ import { S as d } from "../../index-D_wwt4P0.js";
3
3
  import { cn as c } from "../../cn.js";
4
4
  import { ErrorText as l } from "../../error-text/error-text.js";
5
5
  import { HintText as f } from "../../hint-text/hint-text.js";
package/dist/header/header-next/components/menu/components/header-menu-item-button.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as n, Fragment as s, jsxs as u } from "react/jsx-runtime";
3
- import { a as c } from "../../../../../index-2sRBqKFV.js";
3
+ import { a as c } from "../../../../../index-D_wwt4P0.js";
4
4
  import { cn as d } from "../../../../../cn.js";
5
5
  import { Icon as p } from "../../../../../icon/icon.js";
6
6
  import { Button as f } from "../../../../../primitives/button.js";
package/dist/header/header-next/components/menu/components/header-menu-item-link.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { jsx as n, jsxs as H } from "react/jsx-runtime";
3
- import { a as M } from "../../../../../index-2sRBqKFV.js";
3
+ import { a as M } from "../../../../../index-D_wwt4P0.js";
4
4
  import { forwardRef as I } from "react";
5
5
  import { cn as k } from "../../../../../cn.js";
6
6
  import { Icon as w } from "../../../../../icon/icon.js";