@ogcio/design-system-react 1.24.0 → 1.25.1

package/README.md

@@ -2,7 +2,7 @@
 
 **This library should only be imported for departments actively working with the core design system team during its development. Do not use this library if you are not part of this development process, and contact the design system team instead if you interested in its use.**
 
-Welcome to the GOV IE React component library, a collection of reusable React components designed to help you build modern React web applications utilising the GOV IE design system.
+Welcome to the Government of Ireland Design System React component library, a collection of reusable React components designed to help you build modern React web applications utilising the Government of Ireland Design System.
 
 ## Getting Started
 
@@ -14,7 +14,7 @@ npm install @ogcio/design-system-react @ogcio/theme-govie
 
 ### Pinning packages
 
-We **strongly recommend** that you pin the GOV IE design system packages, so that any regressions are not automatically introduced during development. Regressions that will only be discoverable at runtime.
+We **strongly recommend** that you pin the Government of Ireland Design System packages, so that any regressions are not automatically introduced during development. Regressions that will only be discoverable at runtime.
 
 **Upgrades should be explicit version updates** in the `package.json` and then your application should be regression tested:
 
@@ -28,7 +28,7 @@ We **strongly recommend** that you pin the GOV IE design system packages, so tha
 
 ### Usage
 
-Import the GOV IE `theme.css` from the `@ogcio/theme-govie` theme package at the entry point of your application, for example:
+Import the Government of Ireland `theme.css` from the `@ogcio/theme-govie` theme package at the entry point of your application, for example:
 
 ```diff
 +import '@ogcio/theme-govie/theme.css'
@@ -58,7 +58,7 @@ export function MyComponent() {
 
 ### Typography
 
-The `@ogcio/design-system-react` package contains `Heading` and `Paragraph` components that implement the GOV IE design system responsive text guidelines:
+The `@ogcio/design-system-react` package contains `Heading` and `Paragraph` components that implement the Government of Ireland Design System responsive text guidelines:
 
 ```jsx
 import { Heading, Paragraph } from '@ogcio/design-system-react';
@@ -73,7 +73,7 @@ function MyComponent() {
 }
 ```
 
-The GOV IE 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.
+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.
 
 ### Internationalization (i18n) Guidelines
 

package/dist/autocomplete/autocomplete.js

@@ -1,24 +1,24 @@
 "use client";
-import { jsxs as q, jsx as f } from "react/jsx-runtime";
-import { forwardRef as z, useRef as N, useImperativeHandle as J, useEffect as Q, useCallback as W, createElement as Y, Children as Z, isValidElement as ee } from "react";
-import { cn as D } from "../cn.js";
+import { jsxs as z, jsx as h } from "react/jsx-runtime";
+import { forwardRef as J, useRef as N, useImperativeHandle as Q, useEffect as W, useCallback as D, createElement as Y, Children as Z, isValidElement as ee } from "react";
+import { cn as P } from "../cn.js";
 import { useDomId as te } from "../hooks/use-dom-id.js";
-import { translate as P } from "../i18n/utility.js";
+import { translate as G } from "../i18n/utility.js";
 import { InputText as oe } from "../input-text/input-text.js";
 import { Popover as ne } from "../popover/popover.js";
-import { SelectMenu as ae, SelectMenuOption as G, SelectMenuGroupItem as re } from "../select/select-menu.js";
+import { SelectMenu as ae, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
 import { cycleEnabledIndex as le } from "../utilities.js";
 import { AUTOCOMPLETE_ACTIONS as pe } from "./types.js";
 import { useAutocompleteController as ie } from "./use-autocomplete-controller.js";
 const {
   ON_RESET: se,
   ON_SELECT_ITEM: ce,
-  SET_INPUT_VALUE: L,
-  SET_IS_OPEN: s,
+  SET_INPUT_VALUE: R,
+  SET_IS_OPEN: i,
   TOGGLE_CLEAR_BUTTON: C,
   SET_HIGHLIGHTED_INDEX: ue,
   SET_VALUE: de
-} = pe, me = (a) => a ? "keyboard_arrow_up" : "keyboard_arrow_down", O = (a, r) => (p) => {
+} = pe, me = (a) => a ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (a, r) => (p) => {
   a && a({
     target: { name: r, value: p },
     currentTarget: { name: r, value: p },
@@ -34,155 +34,159 @@ const {
     bubbles: !0,
     isTrusted: !0
   });
-}, xe = z(
+}, ke = J(
   (a, r) => {
     var x;
     const p = N(null), {
       disabled: l,
-      children: u,
-      placeholder: h,
-      onSelectItem: y,
+      children: c,
+      placeholder: y,
+      onSelectItem: m,
       isLoading: g,
-      freeSolo: i = !1,
+      freeSolo: s = !1,
       onChange: b,
-      onBlur: R,
-      name: d,
+      onBlur: B,
+      name: u,
       value: E,
-      id: B
+      id: M
     } = a, v = N(!1), {
       state: t,
       dispatch: o,
-      inputRef: m,
+      inputRef: f,
       getOptionLabelByValue: S,
       listRef: A,
-      debouncedFilter: M
+      debouncedFilter: U,
+      validChildren: be
     } = ie({
       ...a,
-      onChange: O(b, d)
+      onChange: T(b, u)
     }), _ = te();
-    J(r, () => m.current), Q(() => {
+    Q(r, () => f.current), W(() => {
       E !== void 0 && (o({ type: de, payload: E }), o({
-        type: L,
-        payload: S(u, E)
+        type: R,
+        payload: S(c, E)
       }), o({ type: C }));
     }, [E]);
-    const w = a["aria-label"] ?? P("autocomplete.placeholder", { defaultValue: "Type to Search" }), U = (e) => {
-      o({ type: s, payload: e }), e || o({ type: C, payload: !1 });
-    }, V = () => {
-      o({ type: se }), o({ type: s, payload: !1 }), O(b, d)("");
-    }, H = (e) => {
-      o({ type: L, payload: e }), i && O(b, d)(e), e && o({ type: s, payload: !0 }), M(e);
+    const w = a["aria-label"] ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }), V = (e) => {
+      o({ type: i, payload: e }), e || o({ type: C, payload: !1 });
+    }, H = () => {
+      o({ type: se }), o({ type: i, payload: !1 }), T(b, u)("");
     }, j = (e) => {
+      o({ type: R, payload: e }), s && T(b, u)(e), e && o({ type: i, payload: !0 }), U(e);
+    }, $ = (e) => {
       const {
         target: { value: n }
       } = e;
-      e.__origin === "clear_button" ? V() : H(n), o({ type: C }), setTimeout(() => {
-        var c;
-        return (c = m.current) == null ? void 0 : c.focus();
-      });
-    }, $ = () => {
-      var e;
-      o({ type: s, payload: !t.isOpen }), (e = m.current) == null || e.focus();
+      e.__origin === "clear_button" && H(), !/^\s/.test(n) && (j(n), o({ type: C }), setTimeout(() => {
+        var d;
+        return (d = f.current) == null ? void 0 : d.focus();
+      }));
     }, K = () => {
+      var e;
+      o({ type: i, payload: !t.isOpen }), (e = f.current) == null || e.focus();
+    }, F = () => {
       t.isOpen || o({
-        type: s,
+        type: i,
         payload: !0
       });
-    }, T = (e) => {
-      o({
-        type: ce,
-        payload: {
-          inputValue: S(u, e),
-          value: e
-        }
-      }), O(b, d)(e), setTimeout(() => {
-        var n;
-        (n = m.current) == null || n.focus();
-      }, 0), y == null || y(e);
-    }, F = (e) => {
-      var I, k;
+    }, I = D(
+      (e) => {
+        o({
+          type: ce,
+          payload: {
+            inputValue: S(c, e),
+            value: e
+          }
+        }), T(b, u)(e), setTimeout(() => {
+          var n;
+          (n = f.current) == null || n.focus();
+        }, 0), m == null || m(e);
+      },
+      [c, o, u, b, m]
+    ), X = (e) => {
+      var O, k;
       const { relatedTarget: n } = e;
-      if (n && ((I = A.current) != null && I.contains(n) || (k = p.current) != null && k.contains(n)) || v.current) {
+      if (n && ((O = A.current) != null && O.contains(n) || (k = p.current) != null && k.contains(n)) || v.current) {
         setTimeout(() => v.current = !1, 0);
         return;
       }
-      const c = t.value ?? t.inputValue ?? "";
-      fe(R, d)(c);
-    }, X = W(
+      const d = t.value ?? t.inputValue ?? "";
+      fe(B, u)(d);
+    }, q = D(
       (e) => {
         switch (e.key) {
           case "ArrowDown":
           case "ArrowUp": {
             e.preventDefault();
-            const n = () => t.highlightedIndex === -1 ? c === -1 ? 0 : -1 : t.highlightedIndex, c = e.key === "ArrowDown" ? 1 : -1, I = le(
+            const n = () => t.highlightedIndex === -1 ? d === -1 ? 0 : -1 : t.highlightedIndex, d = e.key === "ArrowDown" ? 1 : -1, O = le(
               t.autocompleteOptions,
               n(),
-              c
+              d
             );
-            o({ type: ue, payload: I }), o({ type: s, payload: !0 });
+            o({ type: ue, payload: O }), o({ type: i, payload: !0 });
             break;
           }
           case "Enter":
           case "NumpadEnter": {
-            if (e.preventDefault(), t.highlightedIndex >= 0) {
+            if (e.preventDefault(), o({ type: i, payload: !0 }), t.highlightedIndex >= 0) {
               const n = t.autocompleteOptions[t.highlightedIndex];
-              n && n.props.value && !n.props.disabled && T(n.props.value);
+              n && n.props.value && !n.props.disabled && I(n.props.value);
             }
             break;
           }
           case "Tab": {
-            o({ type: s, payload: !1 });
+            o({ type: i, payload: !1 });
             break;
           }
           case "Escape": {
-            o({ type: s, payload: !1 });
+            o({ type: i, payload: !1 });
             break;
           }
         }
       },
-      [t.highlightedIndex]
+      [t.highlightedIndex, t.autocompleteOptions, I]
     );
-    return /* @__PURE__ */ q(
+    return /* @__PURE__ */ z(
       "div",
       {
         "aria-disabled": l,
-        className: D("gi-autocomplete gi-not-prose", a.className),
+        className: P("gi-autocomplete gi-not-prose", a.className),
         children: [
-          /* @__PURE__ */ f("span", { id: _, className: "gi-sr-only", children: w }),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ h("span", { id: _, className: "gi-sr-only", children: w }),
+          /* @__PURE__ */ h(
             oe,
             {
               autoComplete: "off",
-              id: B,
-              name: d,
-              onKeyDown: X,
-              onIconEndClick: $,
-              onChange: j,
-              onClick: K,
-              onBlur: F,
+              id: M,
+              name: u,
+              onKeyDown: q,
+              onIconEndClick: K,
+              onChange: $,
+              onClick: F,
+              onBlur: X,
               clearButtonEnabled: t.isClearButtonEnabled,
               inputActionPosition: "beforeSuffix",
               "aria-label": w,
               "aria-labelledby": _,
               "aria-disabled": l,
               disabled: l,
-              placeholder: h ?? P("autocomplete.placeholder", { defaultValue: "Type to Search" }),
-              iconEndClassName: D({
-                "gi-cursor-pointer": !l && !i,
-                "gi-cursor-not-allowed gi-pointer-events-none": l && !i
+              placeholder: y ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }),
+              iconEndClassName: P({
+                "gi-cursor-pointer": !l && !s,
+                "gi-cursor-not-allowed gi-pointer-events-none": l && !s
               }),
-              iconEnd: i ? void 0 : me(t.isOpen),
-              ref: m,
+              iconEnd: s ? void 0 : me(t.isOpen),
+              ref: f,
               iconEndRef: p,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ h(
             ne,
             {
-              onOpenChange: U,
-              triggerRef: m,
+              onOpenChange: V,
+              triggerRef: f,
               extraRefs: [p],
               open: t.isOpen,
               maxHeight: 304,
@@ -197,17 +201,17 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ f(
+              children: /* @__PURE__ */ h(
                 ae,
                 {
-                  onChange: T,
+                  onChange: I,
                   isLoading: g,
                   showNoData: !((x = t.autocompleteOptions) != null && x.length),
                   ref: A,
                   children: he(
                     t.autocompleteOptions,
                     t,
-                    T
+                    I
                   )
                 }
               )
@@ -217,39 +221,39 @@ const {
       }
     );
   }
-), he = (a, r, p) => a.map((l, u) => {
+), he = (a, r, p) => a.map((l, c) => {
   if (r.optionType === "AutocompleteItem")
     return /* @__PURE__ */ Y(
-      G,
+      L,
       {
         ...l.props,
         key: `AutocompleteItem-${l.props.value}`,
         selected: r.value === l.props.value,
-        isHighlighted: u === r.highlightedIndex,
-        index: u
+        isHighlighted: c === r.highlightedIndex,
+        index: c
       }
     );
   if (r.optionType === "AutocompleteGroupItem") {
-    const h = l, y = Z.toArray(h.props.children).filter((g) => ee(g)).map((g) => {
-      const i = g.props;
-      return /* @__PURE__ */ f(
-        G,
+    const y = l, m = Z.toArray(y.props.children).filter((g) => ee(g)).map((g) => {
+      const s = g.props;
+      return /* @__PURE__ */ h(
+        L,
         {
-          ...i,
-          selected: r.value.toString() === i.value.toString(),
+          ...s,
+          selected: r.value.toString() === s.value.toString(),
           onChange: p,
-          index: u
+          index: c
         },
-        `SelectGroupItemNext-SelectItemNext-${i.value.toString()}`
+        `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
       );
     });
-    return /* @__PURE__ */ f(
+    return /* @__PURE__ */ h(
       re,
       {
-        label: h.props.label,
-        children: y
+        label: y.props.label,
+        children: m
       },
-      `Group-${h.props.label}`
+      `Group-${y.props.label}`
     );
   }
   return null;
@@ -266,7 +270,7 @@ Object.defineProperty(ge, "componentType", {
   enumerable: !1
 });
 export {
-  xe as Autocomplete,
+  ke as Autocomplete,
   ge as AutocompleteGroupItem,
   ye as AutocompleteItem,
   he as renderSelectMenuOptions

package/dist/autocomplete/use-autocomplete-controller.js

@@ -4,7 +4,7 @@ import { useScrollHighlightedItem as Y } from "../hooks/use-scroll-highlighted-i
 import { safeCloneElement as j } from "../utils/utilities.js";
 import { AUTOCOMPLETE_ACTIONS as k } from "./types.js";
 const {
-  ON_RESET: x,
+  ON_RESET: R,
   ON_SELECT_ITEM: q,
   SET_INPUT_VALUE: P,
   SET_IS_OPEN: v,
@@ -31,7 +31,7 @@ const {
         ...e,
         isClearButtonEnabled: t.payload || !!e.inputValue
       };
-    case x:
+    case R:
       return {
         ...e,
         value: "",
@@ -45,7 +45,8 @@ const {
         inputValue: t.payload.inputValue,
         value: t.payload.value,
         isOpen: !1,
-        isClearButtonEnabled: !0
+        isClearButtonEnabled: !0,
+        highlightedIndex: -1
       };
     case S:
       return { ...e, highlightedIndex: t.payload };
@@ -55,25 +56,25 @@ const {
       return e;
   }
 }, J = (e) => {
-  var n, p;
-  const t = ((n = e == null ? void 0 : e.type) == null ? void 0 : n.componentType) || ((p = e == null ? void 0 : e.props) == null ? void 0 : p.__type);
-  return h(e) && (t === "AutocompleteItem" || t === "AutocompleteGroupItem");
+  var s, l, o;
+  const t = ((s = e == null ? void 0 : e.type) == null ? void 0 : s.componentType) || ((l = e == null ? void 0 : e.props) == null ? void 0 : l.__type);
+  return h(e) && !((o = e == null ? void 0 : e.props) != null && o.hidden) && (t === "AutocompleteItem" || t === "AutocompleteGroupItem");
 }, B = (e, t) => {
-  var s, a;
-  const n = ((s = e.props.children) == null ? void 0 : s.toString().toLowerCase()) || "", p = (a = e.props.value) == null ? void 0 : a.toLowerCase(), l = t.toLowerCase();
-  return n.includes(l) || p.includes(l);
-}, V = (e) => C.toArray(e).filter((t) => J(t)) || [], R = (e, t) => {
-  var p, l, s, a, I, f;
-  const n = V(e);
-  for (const y of n) {
-    const T = ((p = y.type) == null ? void 0 : p.componentType) || ((l = y.props) == null ? void 0 : l.__type);
-    if (((s = y.props) == null ? void 0 : s.value) === t)
-      return ((a = y.props.children) == null ? void 0 : a.toString()) || "";
+  var a, i;
+  const s = ((a = e.props.children) == null ? void 0 : a.toString().toLowerCase()) || "", l = (i = e.props.value) == null ? void 0 : i.toLowerCase(), o = t.toLowerCase();
+  return s.includes(o) || l.includes(o);
+}, V = (e) => C.toArray(e).filter((t) => J(t)) || [], x = (e, t) => {
+  var l, o, a, i, I, f;
+  const s = V(e);
+  for (const y of s) {
+    const T = ((l = y.type) == null ? void 0 : l.componentType) || ((o = y.props) == null ? void 0 : o.__type);
+    if (((a = y.props) == null ? void 0 : a.value) === t)
+      return ((i = y.props.children) == null ? void 0 : i.toString()) || "";
     if (T === "AutocompleteGroupItem") {
-      const u = C.toArray(y.props.children).filter(
+      const n = C.toArray(y.props.children).filter(
         (c) => h(c)
       );
-      for (const c of u)
+      for (const c of n)
         if (((I = c.props) == null ? void 0 : I.value) === t)
           return ((f = c.props.children) == null ? void 0 : f.toString()) || "";
     }
@@ -82,88 +83,89 @@ const {
 }, K = (e) => {
   const t = V(e);
   return t != null && t.length && t.every(
-    (p) => {
-      var l;
-      return p.props.__type === "AutocompleteGroupItem" || ((l = p.type) == null ? void 0 : l.componentType) === "AutocompleteGroupItem";
+    (l) => {
+      var o;
+      return l.props.__type === "AutocompleteGroupItem" || ((o = l.type) == null ? void 0 : o.componentType) === "AutocompleteGroupItem";
     }
   ) ? "AutocompleteGroupItem" : "AutocompleteItem";
 }, pe = ({
   children: e,
   defaultValue: t = "",
-  isOpen: n = !1,
-  freeSolo: p = !1,
-  onOpen: l,
-  onClose: s,
-  onChange: a,
+  isOpen: s = !1,
+  freeSolo: l = !1,
+  onOpen: o,
+  onClose: a,
+  onChange: i,
   value: I
 }) => {
-  const f = g(null), y = g(null), T = g(!1), u = G(
+  const f = g(null), y = g(null), T = g(!1), n = G(
     () => V(e || []),
     [e]
   ), c = () => {
-    var i;
-    return (i = f.current) == null ? void 0 : i.focus();
-  }, d = G(() => K(e), [e]), [r, o] = X(z, null, () => ({
-    isOpen: !!n,
+    var u;
+    return (u = f.current) == null ? void 0 : u.focus();
+  }, d = G(() => K(e), [e]), [p, r] = X(z, null, () => ({
+    isOpen: !!s,
     value: I,
     inputValue: t,
-    autocompleteOptions: u,
+    autocompleteOptions: n,
     isClearButtonEnabled: !1,
     highlightedIndex: -1,
     optionType: d
   }));
-  Y(y, r.highlightedIndex), A(() => {
-    o({ type: E, payload: u });
-  }, [u]), A(() => {
-    o({ type: H, payload: d });
+  Y(y, p.highlightedIndex), A(() => {
+    r({ type: E, payload: n });
+  }, [n]), A(() => {
+    r({ type: H, payload: d });
   }, [d]), A(() => {
+    var u;
     if (!T.current) {
       T.current = !0;
       return;
     }
-    r.inputValue === "" && r.value === "" && c();
-  }, [r.isClearButtonEnabled]), A(() => {
-    if (r.isOpen)
-      l == null || l(), c(), o({ type: E, payload: u });
+    p.inputValue === "" && p.value === "" && ((u = p.autocompleteOptions) != null && u.length) && c();
+  }, [p.isClearButtonEnabled]), A(() => {
+    if (p.isOpen)
+      o == null || o(), c(), r({ type: E, payload: n });
     else {
-      s == null || s();
-      const i = R(e, r.value);
-      i && r.value ? (o({
+      a == null || a();
+      const u = x(e, p.value);
+      u && p.value ? (r({
         type: P,
-        payload: i
-      }), o({ type: v, payload: !1 })) : p || (o({ type: x }), a == null || a("")), o({ type: U });
+        payload: u
+      }), r({ type: v, payload: !1 })) : l || (r({ type: R }), i == null || i("")), r({ type: U });
     }
-  }, [r.isOpen]);
+  }, [p.isOpen]);
   const M = G(
-    () => F.debounce((i) => {
-      if (i) {
-        const _ = u.map((m) => {
+    () => F.debounce((u) => {
+      if (u) {
+        const _ = n.map((m) => {
           var L, b;
           const D = ((L = m.type) == null ? void 0 : L.componentType) || ((b = m.props) == null ? void 0 : b.__type);
           if (d === "AutocompleteGroupItem" && D === "AutocompleteGroupItem") {
             const N = C.toArray(
               m.props.children
             ).filter((O) => h(O)).filter(
-              (O) => B(O, i)
+              (O) => B(O, u)
             );
             return N.length > 0 ? j(m, { children: N }) : null;
           } else if (d === "AutocompleteItem")
-            return B(m, i) ? m : null;
+            return B(m, u) ? m : null;
           return null;
         }).filter(Boolean);
-        o({ type: E, payload: _ }), o({ type: S, payload: -1 }), (!r.isOpen && !r.value || (_ == null ? void 0 : _.length) === 0) && o({ type: v, payload: !0 });
+        r({ type: E, payload: _ }), r({ type: S, payload: -1 }), (!p.isOpen && !p.value || (_ == null ? void 0 : _.length) === 0) && r({ type: v, payload: !0 });
       } else
-        o({ type: w, payload: "" }), o({ type: E, payload: u }), o({ type: S, payload: -1 });
+        r({ type: w, payload: "" }), r({ type: E, payload: n }), r({ type: S, payload: -1 });
     }, 500),
-    [u, r.isOpen, r.value, p]
+    [n, p.isOpen, p.value, l]
   );
   return {
-    state: r,
-    dispatch: o,
+    state: p,
+    dispatch: r,
     inputRef: f,
     listRef: y,
-    validChildren: u,
-    getOptionLabelByValue: R,
+    validChildren: n,
+    getOptionLabelByValue: x,
     debouncedFilter: M
   };
 };

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type BrowserSupportProps = {
+    onClose?: () => void;
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const BrowserSupport: ({ className, ...props }: BrowserSupportProps) => import("react/jsx-runtime").JSX.Element | null;