@ogcio/design-system-react 1.22.1 → 1.23.0

package/dist/select/select-next.js

@@ -1,166 +1,192 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
-import { jsxs as q, jsx as s } from "react/jsx-runtime";
-import { forwardRef as Z, useRef as v, useState as E, useImperativeHandle as _, Children as R, isValidElement as G, useEffect as P } from "react";
-import { cn as D } from "../cn.js";
-import { useDomId as B } from "../hooks/use-dom-id.js";
-import { translate as z } from "../i18n/utility.js";
-import { InputText as ee } from "../input-text/input-text.js";
-import { Popover as te } from "../popover/popover.js";
-import { SelectMenu as re, SelectMenuOption as F, SelectMenuGroupItem as ne } from "./select-menu.js";
-import { SelectSearch as oe } from "./select-search.js";
-const se = Z(
+import { jsx as l, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as B, useRef as w, useState as k, useImperativeHandle as ee, Children as R, isValidElement as G, useEffect as O, useCallback as te } from "react";
+import { cn as H } from "../cn.js";
+import { useDomId as re } from "../hooks/use-dom-id.js";
+import { useScrollHighlightedItem as ne } from "../hooks/use-scroll-highlighted-item.js";
+import { translate as F } from "../i18n/utility.js";
+import { InputText as oe } from "../input-text/input-text.js";
+import { Popover as se } from "../popover/popover.js";
+import { cycleEnabledIndex as ae } from "../utilities.js";
+import { SelectMenu as le, SelectMenuOption as J, SelectMenuGroupItem as ce } from "./select-menu.js";
+import { SelectSearch as ie } from "./select-search.js";
+const pe = B(
   ({
-    children: S,
-    value: p,
-    defaultValue: T = "",
-    onChange: b,
-    onMenuClose: g,
-    enableSearch: d,
-    disabled: r,
+    children: x,
+    value: u,
+    defaultValue: E = "",
+    onChange: I,
+    onMenuClose: f,
+    enableSearch: y,
+    disabled: s,
     name: i,
-    onBlur: u,
-    placeholder: $,
-    ...x
+    onBlur: m,
+    placeholder: P,
+    ...v
   }, Q) => {
-    const c = v(null), O = v(null), j = v(null), A = v(!1), [n, M] = E(
-      T || p
-    ), [H, h] = E(!1), [U, K] = E("");
-    _(Q, () => c.current);
-    const k = R.toArray(S).filter(
+    const c = w(null), D = w(null), A = w(null), $ = w(!1), [a, j] = k(
+      E || u
+    ), [N, p] = k(!1), [W, K] = k(""), [b, V] = k(-1);
+    ee(Q, () => c.current), ne(A, b);
+    const h = R.toArray(x).filter(
       (e) => G(e)
     );
-    P(() => {
-      var l, a;
+    O(() => {
+      var r, t;
       let e;
-      for (const o of k) {
-        const t = (l = o.type) == null ? void 0 : l.componentType;
-        if (t === "SelectItemNext") {
-          const f = o;
-          if (f.props.value === n) {
-            e = f;
+      for (const n of h) {
+        const o = (r = n.type) == null ? void 0 : r.componentType;
+        if (o === "SelectItemNext") {
+          const g = n;
+          if (g.props.value === a) {
+            e = g;
             break;
           }
         }
-        if (t === "SelectGroupItemNext") {
-          const f = o, m = R.toArray(f.props.children).find(
-            (y) => {
-              var V;
-              return ((V = y == null ? void 0 : y.type) == null ? void 0 : V.componentType) === "SelectItemNext" && y.props.value === n;
+        if (o === "SelectGroupItemNext") {
+          const g = n, d = R.toArray(g.props.children).find(
+            (S) => {
+              var z;
+              return ((z = S == null ? void 0 : S.type) == null ? void 0 : z.componentType) === "SelectItemNext" && S.props.value === a;
             }
           );
-          if (m && G(m)) {
-            e = m;
+          if (d && G(d)) {
+            e = d;
             break;
           }
         }
       }
       if (e) {
-        const o = ((a = e.props.children) == null ? void 0 : a.toString()) || "";
-        K(o);
+        const n = ((t = e.props.children) == null ? void 0 : t.toString()) || "";
+        K(n);
       } else
         K(""), c.current && (c.current.value = "");
-    }, [n, k]), P(() => {
-      p !== void 0 && M(p);
-    }, [p]);
-    const w = () => {
+    }, [a, h]), O(() => {
+      N || V(-1);
+    }, [N]), O(() => {
+      u !== void 0 && j(u);
+    }, [u]);
+    const L = () => {
       var e;
-      h(!0), (e = c.current) == null || e.focus();
-    }, W = (e) => {
-      h(e), g && !e && g();
-    }, L = (e) => {
-      if (h(!1), M(e), b && (b({
+      s || (p(!0), (e = c.current) == null || e.focus());
+    }, X = (e) => {
+      p(e), e || f == null || f();
+    }, U = (e) => {
+      if (p(!1), j(e), I && (I({
         target: { name: i, value: e },
         currentTarget: { name: i, value: e },
         type: "change",
         bubbles: !0
-      }), u)) {
-        const a = {
+      }), m)) {
+        const t = {
           target: { name: i, value: e },
           currentTarget: { name: i, value: e },
           type: "blur",
           bubbles: !0
         };
-        u == null || u(a);
+        m == null || m(t);
       }
-    }, X = (e) => {
-      !r && (e.key === "Enter" || e.key === "NumpadEnter") ? (e.preventDefault(), w()) : e.key === "Escape" && h(!1);
-    }, Y = (e) => {
-      var a, o;
-      const l = e.relatedTarget;
-      if (l && ((a = j.current) != null && a.contains(l) || (o = O.current) != null && o.contains(l)) || A.current) {
-        setTimeout(() => A.current = !1, 0);
+    }, Y = te((e) => {
+      var r;
+      if (!s)
+        switch (e.key) {
+          case "ArrowDown":
+          case "ArrowUp": {
+            e.preventDefault();
+            const t = e.key === "ArrowDown" ? 1 : -1;
+            V((n) => ae(h, n === -1 ? t === -1 ? 0 : -1 : n, t)), p(!0);
+            break;
+          }
+          case "Enter":
+          case "NumpadEnter": {
+            if (e.preventDefault(), N && b != -1 && h[b]) {
+              const t = h[b];
+              (r = t.props) != null && r.disabled || U(t.props.value);
+            } else
+              p(!0);
+            break;
+          }
+          case "Tab": {
+            p(!1);
+            break;
+          }
+          case "Escape": {
+            e.preventDefault(), p(!1);
+            break;
+          }
+        }
+    }, []), Z = (e) => {
+      var t, n;
+      const r = e.relatedTarget;
+      if (r && ((t = A.current) != null && t.contains(r) || (n = D.current) != null && n.contains(r)) || $.current) {
+        setTimeout(() => $.current = !1, 0);
         return;
       }
-      if (u) {
-        const t = p ?? n ?? "";
-        u({
-          target: { name: i, value: t },
-          currentTarget: { name: i, value: t },
+      if (m) {
+        const o = u ?? a ?? "";
+        m({
+          target: { name: i, value: o },
+          currentTarget: { name: i, value: o },
           type: "blur",
           bubbles: !0
         });
       }
-    }, I = B(), C = x["aria-label"] ?? z("select.next.placeholder", { defaultValue: "Select" });
-    return P(() => {
-      c.current && c.current.setAttribute("aria-labelledby", I);
-    }, [I, d]), d ? /* @__PURE__ */ q("div", { className: D("gi-select-next", x.className), children: [
-      /* @__PURE__ */ s("span", { id: I, className: "gi-sr-only", children: C }),
-      /* @__PURE__ */ s(
-        oe,
-        {
-          ...x,
-          value: n,
-          onChange: b,
-          disabled: r,
-          ref: c,
-          onBlur: u,
-          name: i,
-          placeholder: $,
-          children: S
-        }
-      )
-    ] }) : /* @__PURE__ */ q(
+    }, C = re(), q = v["aria-label"] ?? F("select.next.placeholder", { defaultValue: "Select" });
+    return O(() => {
+      c.current && c.current.setAttribute("aria-labelledby", C);
+    }, [C, y]), y ? /* @__PURE__ */ l("div", { className: H("gi-select-next", v.className), children: /* @__PURE__ */ l(
+      ie,
+      {
+        ...v,
+        value: a,
+        onChange: I,
+        disabled: s,
+        ref: c,
+        onBlur: m,
+        name: i,
+        placeholder: P,
+        children: x
+      }
+    ) }) : /* @__PURE__ */ _(
       "div",
       {
-        "aria-disabled": r,
-        className: D("gi-select-next", x.className),
+        "aria-disabled": s,
+        className: H("gi-select-next", v.className),
         children: [
-          /* @__PURE__ */ s("span", { id: I, className: "gi-sr-only", children: C }),
-          /* @__PURE__ */ s(
-            ee,
+          /* @__PURE__ */ l("span", { id: C, className: "gi-sr-only", children: q }),
+          /* @__PURE__ */ l(
+            oe,
             {
-              ...x,
+              ...v,
               autoComplete: "off",
-              "aria-label": C,
-              "aria-disabled": r,
-              disabled: r,
-              placeholder: $ ?? z("select.next.placeholder", { defaultValue: "Search" }),
+              "aria-label": q,
+              "aria-disabled": s,
+              disabled: s,
+              placeholder: P ?? F("select.next.placeholder", { defaultValue: "Search" }),
               readOnly: !0,
               inputClassName: "gi-cursor-pointer",
-              iconEndClassName: D({
-                "gi-cursor-pointer": !r,
-                "gi-cursor-not-allowed": r,
-                "gi-pointer-events-none": r
+              iconEndClassName: H({
+                "gi-cursor-pointer": !s,
+                "gi-cursor-not-allowed gi-pointer-events-none": s
               }),
-              iconEnd: H ? "keyboard_arrow_up" : "keyboard_arrow_down",
-              onIconEndClick: w,
+              iconEnd: N ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              onIconEndClick: L,
               ref: c,
-              iconEndRef: O,
-              value: U,
-              onClick: w,
-              onKeyDown: X,
-              onBlur: Y,
+              iconEndRef: D,
+              value: W,
+              onClick: L,
+              onKeyDown: Y,
+              onBlur: Z,
               name: i
             }
           ),
-          /* @__PURE__ */ s(
-            te,
+          /* @__PURE__ */ l(
+            se,
             {
               triggerRef: c,
-              extraRefs: [O],
-              onOpenChange: W,
-              open: H,
+              extraRefs: [D],
+              onOpenChange: X,
+              open: N,
               maxHeight: 304,
               options: {
                 placement: "bottom-start",
@@ -170,47 +196,50 @@ const se = Z(
                   { name: "flip", options: { fallbackPlacements: ["top"] } }
                 ]
               },
-              children: /* @__PURE__ */ s(
-                re,
+              children: /* @__PURE__ */ l(
+                le,
                 {
-                  ref: j,
-                  onChange: L,
-                  enableSearch: d,
-                  children: k.map((e, l) => {
-                    var o;
-                    const a = (o = e == null ? void 0 : e.type) == null ? void 0 : o.componentType;
-                    if (a === "SelectItemNext") {
-                      const t = e;
-                      return /* @__PURE__ */ s(
-                        F,
+                  ref: A,
+                  onChange: (e) => {
+                    p(!1), U(e);
+                  },
+                  enableSearch: y,
+                  children: h.map((e, r) => {
+                    var n;
+                    const t = (n = e == null ? void 0 : e.type) == null ? void 0 : n.componentType;
+                    if (t === "SelectItemNext") {
+                      const o = e;
+                      return /* @__PURE__ */ l(
+                        J,
                         {
-                          ...t.props,
-                          selected: (n == null ? void 0 : n.toString()) === t.props.value.toString(),
-                          index: l
+                          ...o.props,
+                          isHighlighted: b === r,
+                          selected: (a == null ? void 0 : a.toString()) === o.props.value.toString(),
+                          index: r
                         },
-                        `SelectItemNext-${t.props.value.toString()}`
+                        `SelectItemNext-${o.props.value.toString()}`
                       );
-                    } else if (a === "SelectGroupItemNext") {
-                      const t = e, f = R.toArray(t.props.children).filter((m) => G(m)).map((m, y) => {
-                        const N = m.props;
-                        return /* @__PURE__ */ s(
-                          F,
+                    } else if (t === "SelectGroupItemNext") {
+                      const o = e, g = R.toArray(o.props.children).filter((d) => G(d)).map((d, S) => {
+                        const T = d.props;
+                        return /* @__PURE__ */ l(
+                          J,
                           {
-                            ...N,
-                            selected: (n == null ? void 0 : n.toString()) === N.value.toString(),
-                            onChange: L,
-                            index: y
+                            ...T,
+                            isHighlighted: b === r,
+                            selected: (a == null ? void 0 : a.toString()) === T.value.toString(),
+                            index: S
                           },
-                          `SelectGroupItemNext-SelectItemNext-${N.value.toString()}`
+                          `SelectGroupItemNext-SelectItemNext-${T.value.toString()}`
                         );
                       });
-                      return /* @__PURE__ */ s(
-                        ne,
+                      return /* @__PURE__ */ l(
+                        ce,
                         {
-                          label: t.props.label,
-                          children: f
+                          label: o.props.label,
+                          children: g
                         },
-                        `option-group-${l}`
+                        `option-group-${r}`
                       );
                     }
                     return null;
@@ -223,35 +252,35 @@ const se = Z(
       }
     );
   }
-), J = () => null;
-Object.defineProperty(J, "componentType", {
+), M = () => null;
+Object.defineProperty(M, "componentType", {
   value: "SelectItemNext",
   writable: !1,
   enumerable: !1
 });
-const le = () => null;
-Object.defineProperty(le, "componentType", {
+const ue = () => null;
+Object.defineProperty(ue, "componentType", {
   value: "SelectGroupItemNext",
   writable: !1,
   enumerable: !1
 });
-const Se = (S) => {
-  const { options: p, defaultValue: T, onChange: b, error: g } = S;
-  return /* @__PURE__ */ s(
-    se,
+const Ne = (x) => {
+  const { options: u, defaultValue: E, onChange: I, error: f } = x;
+  return /* @__PURE__ */ l(
+    pe,
     {
-      ...S,
-      defaultValue: T,
-      onChange: b,
+      ...x,
+      defaultValue: E,
+      onChange: I,
       "data-table-cell": "true",
-      "data-table-cell-error-state": g == null ? void 0 : g.toString(),
-      children: p.map(({ value: d, label: r }) => /* @__PURE__ */ s(J, { value: d, children: r }, `${d}-${r}`))
+      "data-table-cell-error-state": f == null ? void 0 : f.toString(),
+      children: u.map(({ value: y, label: s }) => /* @__PURE__ */ l(M, { value: y, children: s }, `${y}-${s}`))
     }
   );
 };
 export {
-  le as SelectGroupItemNext,
-  J as SelectItemNext,
-  se as SelectNext,
-  Se as SelectNextTableCell
+  ue as SelectGroupItemNext,
+  M as SelectItemNext,
+  pe as SelectNext,
+  Ne as SelectNextTableCell
 };

package/dist/select/select.js

@@ -1,12 +1,11 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { SelectNative as e } from "./select-native.js";
-import { SelectGroupItem as r, SelectItem as p, SelectTableCell as S } from "./select-native.js";
+import { SelectGroupItem as m, SelectItem as r, SelectTableCell as S } from "./select-native.js";
 const t = e;
 t.displayName = "Select";
 export {
   t as Select,
-  r as SelectGroupItem,
-  p as SelectItem,
+  m as SelectGroupItem,
+  r as SelectItem,
   S as SelectTableCell
 };

package/dist/side-nav/side-nav.js

@@ -1,5 +1,4 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsxs as w, Fragment as V, jsx as s } from "react/jsx-runtime";
 import f, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
 import { Button as A } from "../button/button.js";
@@ -46,18 +45,18 @@ const j = f.createContext(
       throw new Error("SideNavItem must be used within a SideNav");
     const {
       openItemIds: o,
-      selectedItemId: p,
-      setOpenItemIds: S,
+      selectedItemId: S,
+      setOpenItemIds: p,
       setSelectedItemId: C,
       navId: P
-    } = l, I = o.includes(t), x = p === t;
+    } = l, I = o.includes(t), x = S === t;
     q(() => {
-      r && S((d) => d.includes(t) ? d : [...d, t]);
-    }, [r, S, t]);
+      r && p((d) => d.includes(t) ? d : [...d, t]);
+    }, [r, p, t]);
     const h = v(() => {
       const d = I ? o.filter((R) => R !== t) : [...o, t];
-      S(d);
-    }, [I, o, S, t]), k = v(() => {
+      p(d);
+    }, [I, o, p, t]), k = v(() => {
       C(t);
     }, [C, t]), E = `${P}-${t}`, O = i && e, b = m !== void 0, D = v(() => {
       i && e && h(), k();
@@ -140,8 +139,8 @@ const j = f.createContext(
     const [t, u] = _([]), [m, g] = _(
       a
     ), r = f.useId(), l = v(
-      (p) => {
-        g(p), e == null || e(p);
+      (S) => {
+        g(S), e == null || e(S);
       },
       [e]
     ), o = f.useMemo(

package/dist/spinner/spinner.js

@@ -1,5 +1,4 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { c as o } from "../index-CB-zPpNk.js";
 import { cn as l } from "../cn.js";
@@ -13,7 +12,7 @@ const c = {
     size: c
   }
 });
-function f({
+function g({
   size: t = "md",
   inline: s = !1,
   dataTestid: r
@@ -80,6 +79,6 @@ function f({
   );
 }
 export {
-  f as Spinner,
+  g as Spinner,
   c as spinnerSizeVariants
 };

package/dist/stack/stack.js

@@ -1,9 +1,8 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as C, jsxs as h } from "react/jsx-runtime";
 import { Children as R, Fragment as y, cloneElement as d, isValidElement as X } from "react";
-import { cn as p } from "../cn.js";
-const c = (l) => typeof l == "string" ? {} : {
+import { cn as c } from "../cn.js";
+const p = (l) => typeof l == "string" ? {} : {
   isBaseColumn: l.base === "column",
   isBaseRow: l.base === "row",
   isXsColumn: l.xs === "column",
@@ -28,8 +27,8 @@ const c = (l) => typeof l == "string" ? {} : {
     isBaseColumn: s,
     isBaseRow: g,
     isXsColumn: e,
-    isXsRow: r,
-    isSmColumn: u,
+    isXsRow: u,
+    isSmColumn: r,
     isSmRow: m,
     isMdColumn: x,
     isMdRow: t,
@@ -39,14 +38,14 @@ const c = (l) => typeof l == "string" ? {} : {
     isXlRow: n,
     is2xlColumn: o,
     is2xlRow: i
-  } = c(l);
+  } = p(l);
   return {
     "gi-flex-row": g,
     "gi-flex-col": s,
-    "xs:gi-flex-row": r,
+    "xs:gi-flex-row": u,
     "xs:gi-flex-col": e,
     "sm:gi-flex-row": m,
-    "sm:gi-flex-col": u,
+    "sm:gi-flex-col": r,
     "md:gi-flex-row": t,
     "md:gi-flex-col": x,
     "lg:gi-flex-row": f,
@@ -68,8 +67,8 @@ const c = (l) => typeof l == "string" ? {} : {
     isBaseColumn: s,
     isBaseRow: g,
     isXsColumn: e,
-    isXsRow: r,
-    isSmColumn: u,
+    isXsRow: u,
+    isSmColumn: r,
     isSmRow: m,
     isMdColumn: x,
     isMdRow: t,
@@ -79,7 +78,7 @@ const c = (l) => typeof l == "string" ? {} : {
     isXlRow: n,
     is2xlColumn: o,
     is2xlRow: i
-  } = c(l);
+  } = p(l);
   return {
     "gi-w-full": s,
     "gi-h-[1px]": s,
@@ -87,10 +86,10 @@ const c = (l) => typeof l == "string" ? {} : {
     "gi-w-[1px]": g,
     "xs:gi-w-full": e,
     "xs:gi-h-[1px]": e,
-    "xs:gi-h-full": r,
-    "xs:gi-w-[1px]": r,
-    "sm:gi-w-full": u,
-    "sm:gi-h-[1px]": u,
+    "xs:gi-h-full": u,
+    "xs:gi-w-[1px]": u,
+    "sm:gi-w-full": r,
+    "sm:gi-h-[1px]": r,
     "sm:gi-h-full": m,
     "sm:gi-w-[1px]": m,
     "md:gi-w-full": x,
@@ -133,7 +132,7 @@ const c = (l) => typeof l == "string" ? {} : {
   return /* @__PURE__ */ C(
     "div",
     {
-      className: `${p(s)} gi-bg-gray-400`,
+      className: `${c(s)} gi-bg-gray-400`,
       "aria-hidden": "true"
     }
   );
@@ -142,19 +141,19 @@ const c = (l) => typeof l == "string" ? {} : {
   direction: s = "column",
   fixedHeight: g = "100%",
   gap: e = 0,
-  hasDivider: r,
-  itemsAlignment: u = "start",
+  hasDivider: u,
+  itemsAlignment: r = "start",
   itemsDistribution: m = "start",
   wrap: x = !1,
   className: t,
   ...w
 }) => {
-  const f = p(
+  const f = c(
     t,
     "gi-flex",
     "gi-w-full",
     B(m),
-    v(u),
+    v(r),
     j(s),
     L(e),
     $(x)
@@ -168,7 +167,7 @@ const c = (l) => typeof l == "string" ? {} : {
           "data-testid": `govie-stack-item-${i}`
         }
       ) : o,
-      r && i < n.length - 1 && /* @__PURE__ */ C(M, { direction: s })
+      u && i < n.length - 1 && /* @__PURE__ */ C(M, { direction: s })
     ] }, `item_${i}`));
   })() });
 };