@ogcio/design-system-react 1.24.0 → 1.25.1

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;