@ogcio/design-system-react 1.23.0 → 1.25.0

package/dist/select/select-next.js

@@ -12,46 +12,46 @@ import { SelectMenu as le, SelectMenuOption as J, SelectMenuGroupItem as ce } fr
 import { SelectSearch as ie } from "./select-search.js";
 const pe = B(
   ({
-    children: x,
+    children: I,
     value: u,
     defaultValue: E = "",
-    onChange: I,
+    onChange: v,
     onMenuClose: f,
-    enableSearch: y,
+    enableSearch: h,
     disabled: s,
     name: i,
     onBlur: m,
     placeholder: P,
-    ...v
+    ...N
   }, Q) => {
     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(
+    ), [S, p] = k(!1), [W, K] = k(""), [g, V] = k(-1);
+    ee(Q, () => c.current), ne(A, g);
+    const d = R.toArray(I).filter(
       (e) => G(e)
     );
     O(() => {
       var r, t;
       let e;
-      for (const n of h) {
+      for (const n of d) {
         const o = (r = n.type) == null ? void 0 : r.componentType;
         if (o === "SelectItemNext") {
-          const g = n;
-          if (g.props.value === a) {
-            e = g;
+          const y = n;
+          if (y.props.value === a) {
+            e = y;
             break;
           }
         }
         if (o === "SelectGroupItemNext") {
-          const g = n, d = R.toArray(g.props.children).find(
-            (S) => {
+          const y = n, b = R.toArray(y.props.children).find(
+            (x) => {
               var z;
-              return ((z = S == null ? void 0 : S.type) == null ? void 0 : z.componentType) === "SelectItemNext" && S.props.value === a;
+              return ((z = x == null ? void 0 : x.type) == null ? void 0 : z.componentType) === "SelectItemNext" && x.props.value === a;
             }
           );
-          if (d && G(d)) {
-            e = d;
+          if (b && G(b)) {
+            e = b;
             break;
           }
         }
@@ -61,9 +61,9 @@ const pe = B(
         K(n);
       } else
         K(""), c.current && (c.current.value = "");
-    }, [a, h]), O(() => {
-      N || V(-1);
-    }, [N]), O(() => {
+    }, [a, d]), O(() => {
+      S || V(-1);
+    }, [S]), O(() => {
       u !== void 0 && j(u);
     }, [u]);
     const L = () => {
@@ -72,7 +72,7 @@ const pe = B(
     }, X = (e) => {
       p(e), e || f == null || f();
     }, U = (e) => {
-      if (p(!1), j(e), I && (I({
+      if (p(!1), j(e), v && (v({
         target: { name: i, value: e },
         currentTarget: { name: i, value: e },
         type: "change",
@@ -86,36 +86,39 @@ const pe = B(
         };
         m == null || m(t);
       }
-    }, 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;
+    }, 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(d, n === -1 ? t === -1 ? 0 : -1 : n, t)), p(!0);
+              break;
+            }
+            case "Enter":
+            case "NumpadEnter": {
+              if (e.preventDefault(), S && g != -1 && d[g]) {
+                const t = d[g];
+                (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) => {
+      },
+      [d, S, g]
+    ), 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) {
@@ -131,33 +134,33 @@ const pe = B(
           bubbles: !0
         });
       }
-    }, C = re(), q = v["aria-label"] ?? F("select.next.placeholder", { defaultValue: "Select" });
+    }, C = re(), q = N["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(
+    }, [C, h]), h ? /* @__PURE__ */ l("div", { className: H("gi-select-next", N.className), children: /* @__PURE__ */ l(
       ie,
       {
-        ...v,
+        ...N,
         value: a,
-        onChange: I,
+        onChange: v,
         disabled: s,
         ref: c,
         onBlur: m,
         name: i,
         placeholder: P,
-        children: x
+        children: I
       }
     ) }) : /* @__PURE__ */ _(
       "div",
       {
         "aria-disabled": s,
-        className: H("gi-select-next", v.className),
+        className: H("gi-select-next", N.className),
         children: [
           /* @__PURE__ */ l("span", { id: C, className: "gi-sr-only", children: q }),
           /* @__PURE__ */ l(
             oe,
             {
-              ...v,
+              ...N,
               autoComplete: "off",
               "aria-label": q,
               "aria-disabled": s,
@@ -169,7 +172,7 @@ const pe = B(
                 "gi-cursor-pointer": !s,
                 "gi-cursor-not-allowed gi-pointer-events-none": s
               }),
-              iconEnd: N ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              iconEnd: S ? "keyboard_arrow_up" : "keyboard_arrow_down",
               onIconEndClick: L,
               ref: c,
               iconEndRef: D,
@@ -186,7 +189,7 @@ const pe = B(
               triggerRef: c,
               extraRefs: [D],
               onOpenChange: X,
-              open: N,
+              open: S,
               maxHeight: 304,
               options: {
                 placement: "bottom-start",
@@ -203,8 +206,8 @@ const pe = B(
                   onChange: (e) => {
                     p(!1), U(e);
                   },
-                  enableSearch: y,
-                  children: h.map((e, r) => {
+                  enableSearch: h,
+                  children: d.map((e, r) => {
                     var n;
                     const t = (n = e == null ? void 0 : e.type) == null ? void 0 : n.componentType;
                     if (t === "SelectItemNext") {
@@ -213,22 +216,22 @@ const pe = B(
                         J,
                         {
                           ...o.props,
-                          isHighlighted: b === r,
+                          isHighlighted: g === r,
                           selected: (a == null ? void 0 : a.toString()) === o.props.value.toString(),
                           index: r
                         },
                         `SelectItemNext-${o.props.value.toString()}`
                       );
                     } else if (t === "SelectGroupItemNext") {
-                      const o = e, g = R.toArray(o.props.children).filter((d) => G(d)).map((d, S) => {
-                        const T = d.props;
+                      const o = e, y = R.toArray(o.props.children).filter((b) => G(b)).map((b, x) => {
+                        const T = b.props;
                         return /* @__PURE__ */ l(
                           J,
                           {
                             ...T,
-                            isHighlighted: b === r,
+                            isHighlighted: g === r,
                             selected: (a == null ? void 0 : a.toString()) === T.value.toString(),
-                            index: S
+                            index: x
                           },
                           `SelectGroupItemNext-SelectItemNext-${T.value.toString()}`
                         );
@@ -237,7 +240,7 @@ const pe = B(
                         ce,
                         {
                           label: o.props.label,
-                          children: g
+                          children: y
                         },
                         `option-group-${r}`
                       );
@@ -264,17 +267,17 @@ Object.defineProperty(ue, "componentType", {
   writable: !1,
   enumerable: !1
 });
-const Ne = (x) => {
-  const { options: u, defaultValue: E, onChange: I, error: f } = x;
+const Ne = (I) => {
+  const { options: u, defaultValue: E, onChange: v, error: f } = I;
   return /* @__PURE__ */ l(
     pe,
     {
-      ...x,
+      ...I,
       defaultValue: E,
-      onChange: I,
+      onChange: v,
       "data-table-cell": "true",
       "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}`))
+      children: u.map(({ value: h, label: s }) => /* @__PURE__ */ l(M, { value: h, children: s }, `${h}-${s}`))
     }
   );
 };

package/dist/side-nav/index.d.ts

@@ -0,0 +1,2 @@
+export { SideNav, SideNavItem, SideNavHeading } from './side-nav.js';
+export type { SideNavItemProps, SideNavProps, SideNavHeadingProps, } from './types.js';

package/dist/side-nav/index.js

@@ -0,0 +1,6 @@
+import { SideNav as d, SideNavHeading as i, SideNavItem as v } from "./side-nav.js";
+export {
+  d as SideNav,
+  i as SideNavHeading,
+  v as SideNavItem
+};

package/dist/side-nav/side-nav.d.ts

@@ -1,6 +1,7 @@
 import { default as React, PropsWithChildren } from 'react';
-import { SideNavItemProps, SideNavProps } from './types.js';
+import { SideNavHeadingProps, SideNavItemProps, SideNavProps } from './types.js';
 export declare const SideNavItem: React.FC<PropsWithChildren<SideNavItemProps> & {
     open?: boolean;
 }>;
 export declare const SideNav: React.FC<PropsWithChildren<SideNavProps>>;
+export declare const SideNavHeading: React.FC<SideNavHeadingProps>;

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

@@ -1,132 +1,133 @@
 "use client";
-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";
-import { cn as N } from "../cn.js";
-import { Icon as $ } from "../icon/icon.js";
+import { jsxs as x, Fragment as R, jsx as s } from "react/jsx-runtime";
+import r, { memo as k, useEffect as V, useCallback as g, useState as $ } from "react";
+import { Button as q } from "../button/button.js";
+import { cn as m } from "../cn.js";
+import { Heading as A } from "../heading/heading.js";
+import { Icon as z } from "../icon/icon.js";
 import { Link as G } from "../link/link.js";
-import { Paragraph as H } from "../paragraph/paragraph.js";
-const j = f.createContext(
+import { Paragraph as J } from "../paragraph/paragraph.js";
+const C = r.createContext(
   void 0
-), z = B(
+), B = k(
   ({
     icon: n,
-    label: i,
-    showExpandableIcon: c,
+    label: t,
+    showExpandableIcon: d,
     isOpen: e
-  }) => /* @__PURE__ */ w(V, { children: [
-    /* @__PURE__ */ w("div", { className: "gi-side-nav-item-left", children: [
-      n && /* @__PURE__ */ s("div", { className: "gi-side-nav-item-icon", children: /* @__PURE__ */ s($, { icon: n }) }),
-      /* @__PURE__ */ s("div", { className: "gi-side-nav-item-label", children: /* @__PURE__ */ s(H, { size: "md", children: i }) })
+  }) => /* @__PURE__ */ x(R, { children: [
+    /* @__PURE__ */ x("div", { className: "gi-side-nav-item-left", children: [
+      n && /* @__PURE__ */ s("div", { className: "gi-side-nav-item-icon", children: /* @__PURE__ */ s(z, { icon: n }) }),
+      /* @__PURE__ */ s("div", { className: "gi-side-nav-item-label", children: /* @__PURE__ */ s(J, { size: "md", children: t }) })
     ] }),
-    c && /* @__PURE__ */ s("div", { className: "gi-side-nav-expandable-icon", children: /* @__PURE__ */ s(
-      $,
+    d && /* @__PURE__ */ s("div", { className: "gi-side-nav-expandable-icon", children: /* @__PURE__ */ s(
+      z,
       {
-        className: N(e && "gi-rotate-180"),
+        className: m(e && "gi-rotate-180"),
         icon: "keyboard_arrow_down"
       }
     ) })
   ] })
-), J = f.memo(
+), K = r.memo(
   ({
     children: n,
-    primary: i,
-    secondary: c,
+    primary: t,
+    secondary: d,
     expandable: e,
-    label: a,
-    value: t,
-    icon: u,
-    href: m,
-    asChild: g,
-    open: r
+    label: c,
+    value: i,
+    icon: f,
+    href: l,
+    asChild: u,
+    open: v
   }) => {
-    const l = f.useContext(j);
-    if (!l)
+    const I = r.useContext(C);
+    if (!I)
       throw new Error("SideNavItem must be used within a SideNav");
     const {
       openItemIds: o,
       selectedItemId: S,
       setOpenItemIds: p,
-      setSelectedItemId: C,
-      navId: P
-    } = l, I = o.includes(t), x = S === t;
-    q(() => {
-      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];
-      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();
-    }, [i, e, h, k]), F = v(
-      (d) => {
-        d.preventDefault(), i && e ? h() : k();
+      setSelectedItemId: E,
+      navId: b
+    } = I, N = o.includes(i), H = S === i;
+    V(() => {
+      v && p((a) => a.includes(i) ? a : [...a, i]);
+    }, [v, p, i]);
+    const h = g(() => {
+      const a = N ? o.filter((M) => M !== i) : [...o, i];
+      p(a);
+    }, [N, o, p, i]), w = g(() => {
+      E(i);
+    }, [E, i]), O = `${b}-${i}`, _ = t && e, j = l !== void 0, P = g(() => {
+      t && e && h(), w();
+    }, [t, e, h, w]), D = g(
+      (a) => {
+        a.preventDefault(), t && e ? h() : w();
       },
-      [i, e, h, k]
-    ), L = N("gi-side-nav-item", {
-      "gi-side-nav-item-selected": x,
-      "gi-side-nav-item-primary": i,
-      "gi-side-nav-item-secondary": c
-    }), M = N("gi-side-nav-item", {
-      "gi-side-nav-item-selected": x,
-      "gi-side-nav-item-primary": i,
-      "gi-side-nav-item-secondary": c
+      [t, e, h, w]
+    ), F = m("gi-side-nav-item", {
+      "gi-side-nav-item-selected": H,
+      "gi-side-nav-item-primary": t,
+      "gi-side-nav-item-secondary": d
+    }), L = m("gi-side-nav-item", {
+      "gi-side-nav-item-selected": H,
+      "gi-side-nav-item-primary": t,
+      "gi-side-nav-item-secondary": d
     });
-    return /* @__PURE__ */ w(
+    return /* @__PURE__ */ x(
       "div",
       {
         role: "group",
-        "aria-label": `${a} ${i && e ? "dropdown" : "item"}`,
+        "aria-label": `${c} ${t && e ? "dropdown" : "item"}`,
         children: [
-          b ? /* @__PURE__ */ s(
+          j ? /* @__PURE__ */ s(
             G,
             {
-              id: E,
-              href: m,
-              asChild: g,
+              id: O,
+              href: l,
+              asChild: u,
               asButton: {
                 variant: "flat",
                 appearance: "dark",
                 size: "medium"
               },
-              className: L,
-              onClick: D,
-              children: g ? n : /* @__PURE__ */ s(
-                z,
+              className: F,
+              onClick: P,
+              children: u ? n : /* @__PURE__ */ s(
+                B,
                 {
-                  icon: u,
-                  label: a,
-                  showExpandableIcon: O,
-                  isOpen: I
+                  icon: f,
+                  label: c,
+                  showExpandableIcon: _,
+                  isOpen: N
                 }
               )
             }
           ) : /* @__PURE__ */ s(
-            A,
+            q,
             {
               variant: "flat",
               appearance: "dark",
               size: "medium",
-              onClick: F,
-              className: M,
-              id: E,
+              onClick: D,
+              className: L,
+              id: O,
               children: /* @__PURE__ */ s(
-                z,
+                B,
                 {
-                  icon: u,
-                  label: a,
-                  showExpandableIcon: O,
-                  isOpen: I
+                  icon: f,
+                  label: c,
+                  showExpandableIcon: _,
+                  isOpen: N
                 }
               )
             }
           ),
-          e && i && /* @__PURE__ */ s(
+          e && t && /* @__PURE__ */ s(
             "div",
             {
-              className: N(I ? "gi-side-nav-item-content" : "gi-hidden"),
+              className: m(N ? "gi-side-nav-item-content" : "gi-hidden"),
               children: n
             }
           )
@@ -134,38 +135,58 @@ const j = f.createContext(
       }
     );
   }
-), K = B(
-  ({ children: n, className: i, dataTestid: c, onChange: e, value: a }) => {
-    const [t, u] = _([]), [m, g] = _(
-      a
-    ), r = f.useId(), l = v(
+), Q = k(
+  ({ children: n, className: t, dataTestid: d, onChange: e, value: c }) => {
+    const [i, f] = $([]), [l, u] = $(
+      c
+    ), v = r.useId(), I = g(
       (S) => {
-        g(S), e == null || e(S);
+        u(S), e == null || e(S);
       },
       [e]
-    ), o = f.useMemo(
+    ), o = r.useMemo(
       () => ({
-        openItemIds: t,
-        selectedItemId: m,
-        setOpenItemIds: u,
-        setSelectedItemId: l,
-        navId: r
+        openItemIds: i,
+        selectedItemId: l,
+        setOpenItemIds: f,
+        setSelectedItemId: I,
+        navId: v
       }),
-      [t, m, l, r]
+      [i, l, I, v]
     );
-    return /* @__PURE__ */ s(j.Provider, { value: o, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s(C.Provider, { value: o, children: /* @__PURE__ */ s(
       "div",
       {
-        className: N("gi-side-nav-container", i),
-        "data-testid": c,
+        className: m("gi-side-nav-container", t),
+        "data-testid": d,
         children: n
       }
     ) });
   }
+), T = k(
+  ({ children: n, secondary: t, className: d, ...e }) => {
+    if (!r.useContext(C))
+      throw new Error("SideNavHeading must be used within a SideNav");
+    return /* @__PURE__ */ s(
+      A,
+      {
+        ...e,
+        as: "h5",
+        className: m(
+          "gi-side-nav-heading",
+          t ? "gi-px-6" : "gi-px-3",
+          d
+        ),
+        children: n
+      }
+    );
+  }
 );
-K.displayName = "SideNav";
-J.displayName = "SideNavItem";
+Q.displayName = "SideNav";
+K.displayName = "SideNavItem";
+T.displayName = "SideNavHeading";
 export {
-  K as SideNav,
-  J as SideNavItem
+  Q as SideNav,
+  T as SideNavHeading,
+  K as SideNavItem
 };

package/dist/side-nav/types.d.ts

@@ -1,3 +1,4 @@
+import { HeadingProps } from '../heading/heading.js';
 import { IconId } from '../icon/icon.js';
 export type SideNavItemProps = {
     value: string;
@@ -16,3 +17,6 @@ export type SideNavProps = {
     value?: string;
     onChange?: (value: string) => void;
 };
+export type SideNavHeadingProps = {
+    secondary?: boolean;
+} & HeadingProps;