@konstructio/ui 0.1.2-alpha.85 → 0.1.2-alpha.86

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,11 +1,16 @@
 import { t as a } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as e } from "../../contexts/SidebarContext.js";
 import { logoVariants as m } from "./Logo.variants.js";
-import { jsx as t } from "react/jsx-runtime";
-var s = ({ children: o, className: r }) => /* @__PURE__ */ t("header", {
-  className: a(m({ className: r })),
-  children: o
-});
-s.displayName = "KonstructSidebarLogo";
+import { jsx as s } from "react/jsx-runtime";
+var i = ({ children: o, className: r }) => {
+  const { closeDrawer: t } = e();
+  return /* @__PURE__ */ s("header", {
+    className: a(m({ className: r })),
+    onClick: () => t(),
+    children: o
+  });
+};
+i.displayName = "KonstructSidebarLogo";
 export {
-  s as Logo
+  i as Logo
 };

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -1,26 +1,31 @@
-import { t as p } from "../../../../utils-COaoD3PI.js";
-import { useSidebarContext as l } from "../../contexts/SidebarContext.js";
+import { t as u } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as v } from "../../contexts/SidebarContext.js";
 import { navigationOptionVariants as m } from "./NavigationOption.variants.js";
-import { jsx as v } from "react/jsx-runtime";
-var d = ({ children: o, className: r, isVisible: i = !0, isActive: t, ...a }) => {
-  const { isCollapsed: e, expandOnHover: n } = l(), s = e && n;
-  return i ? /* @__PURE__ */ v("li", {
-    ...a,
+import { jsx as d } from "react/jsx-runtime";
+var k = ({ children: i, className: r, closeDrawerOnClick: n = !0, isVisible: t = !0, isActive: a, ...o }) => {
+  const { isCollapsed: e, expandOnHover: s, closeDrawer: l } = v(), p = e && s;
+  if (!t) return null;
+  const c = "onClick" in o ? o.onClick : void 0;
+  return /* @__PURE__ */ d("li", {
+    ...o,
     role: "option",
-    className: p(m({
+    onClick: () => {
+      n && l(), c?.();
+    },
+    className: u(m({
       className: r,
-      isActive: t
-    }), s && [
+      isActive: a
+    }), p && [
       "group/sidebar-option",
       "relative",
       "hover:z-50",
       "hover:shadow-lg",
       "hover:bg-kubefirst-dark-blue-900"
     ]),
-    children: o
-  }) : null;
+    children: i
+  });
 };
-d.displayName = "KonstructSidebarNavigationOption";
+k.displayName = "KonstructSidebarNavigationOption";
 export {
-  d as NavigationOption
+  k as NavigationOption
 };

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -1,101 +1,105 @@
 import { t as X } from "../../../../HamburgerTrigger-BzCfBWzH.js";
-import { t as f } from "../../../../utils-COaoD3PI.js";
+import { t as h } from "../../../../utils-COaoD3PI.js";
 import { Drawer as W } from "../../../Drawer/Drawer.js";
-import { SidebarContext as R } from "../../contexts/SidebarContext.js";
+import { SidebarContext as O } from "../../contexts/SidebarContext.js";
 import { useSidebarMode as q } from "../../hooks/useSidebarMode.js";
-import { dragVariants as B, wrapperSiderbarVariants as O } from "../../Sidebar.variants.js";
-import { useCallback as c, useEffect as v, useRef as u, useState as S } from "react";
-import { Fragment as G, jsx as s, jsxs as N } from "react/jsx-runtime";
-var J = 280, K = ({ animateOnHover: z = !0, canResize: C = !0, children: w, dividerClassName: H, drawerBreakpoint: V, drawerMaxWidth: h = J, expandedBreakpoint: A, expandOnHover: F = !0, initialWidth: y = 256, maxWith: o = 300, minWith: a = 240, mode: I = "auto", separatorClassName: x, theme: b, triggerClassName: P, wrapperClassName: g }) => {
-  const t = q(I, A, V), [D, L] = S(!1), [M, T] = S(null), n = u(null), e = u(null), p = u(!1), E = u(!1);
-  v(() => {
-    if (t !== "drawer") return;
-    const r = () => {
-      T(window.innerWidth);
+import { dragVariants as B, wrapperSiderbarVariants as S } from "../../Sidebar.variants.js";
+import { useCallback as c, useEffect as u, useRef as p, useState as N } from "react";
+import { Fragment as G, jsx as s, jsxs as z } from "react/jsx-runtime";
+var J = 280, K = ({ animateOnHover: C = !0, canResize: H = !0, children: y, dividerClassName: V, drawerBreakpoint: A, drawerMaxWidth: x = J, expandedBreakpoint: F, expandOnHover: I = !0, initialWidth: D = 256, maxWith: o = 300, minWith: a = 240, mode: P = "auto", separatorClassName: b, theme: g, triggerClassName: T, wrapperClassName: L }) => {
+  const r = q(P, F, A), [M, m] = N(!1), [E, _] = N(null), n = p(null), e = p(null), f = p(!1), R = p(!1);
+  u(() => {
+    if (r !== "drawer") return;
+    const t = () => {
+      _(window.innerWidth);
     };
-    return r(), window.addEventListener("resize", r), () => {
-      window.removeEventListener("resize", r);
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
     };
-  }, [t]);
-  const l = c((r) => {
-    if (!p.current) {
+  }, [r]);
+  const l = c((t) => {
+    if (!f.current) {
       n.current && (n.current.style.opacity = "0");
       return;
     }
-    let i = r.clientX;
+    let i = t.clientX;
     i < a && (i = a), i > o && (i = o), e.current && n.current && (e.current.style.width = `${i}px`, n.current.classList.add("opacity-100"));
-  }, [o, a]), m = c(() => {
-    p.current = !1, n.current && n.current.classList.remove("opacity-100"), e.current && e.current.classList.remove("transition-none"), document.body.style.userSelect = "", document.body.style.cursor = "", document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", m);
-  }, [l]), _ = c((r) => {
-    r.preventDefault(), r.stopPropagation(), p.current = !0, e.current && e.current.classList.add("transition-none"), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", document.addEventListener("mousemove", l), document.addEventListener("mouseup", m);
-  }, [l, m]);
-  v(() => {
-    t !== "expanded" && e.current && (e.current.style.width = "");
-  }, [t]), v(() => {
-    if (E.current || t !== "expanded" || !e.current) return;
-    const r = Math.min(Math.max(y, a), o);
-    e.current.style.width = `${r}px`, E.current = !0;
+  }, [o, a]), v = c(() => {
+    f.current = !1, n.current && n.current.classList.remove("opacity-100"), e.current && e.current.classList.remove("transition-none"), document.body.style.userSelect = "", document.body.style.cursor = "", document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", v);
+  }, [l]), $ = c((t) => {
+    t.preventDefault(), t.stopPropagation(), f.current = !0, e.current && e.current.classList.add("transition-none"), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", document.addEventListener("mousemove", l), document.addEventListener("mouseup", v);
+  }, [l, v]);
+  u(() => {
+    r !== "expanded" && e.current && (e.current.style.width = "");
+  }, [r]), u(() => {
+    r !== "drawer" && m(!1);
+  }, [r]), u(() => {
+    if (R.current || r !== "expanded" || !e.current) return;
+    const t = Math.min(Math.max(D, a), o);
+    e.current.style.width = `${t}px`, R.current = !0;
   }, [
-    y,
+    D,
     o,
     a,
-    t
+    r
   ]);
-  const $ = c(() => {
-    L(!0);
-  }, []), j = c(() => {
-    L(!1);
+  const j = c(() => {
+    m(!0);
+  }, []), w = c(() => {
+    m(!1);
   }, []);
-  if (t === "drawer") return /* @__PURE__ */ N(G, { children: [/* @__PURE__ */ s(X, {
-    isOpen: D,
-    onClick: $,
-    className: P
+  if (r === "drawer") return /* @__PURE__ */ z(G, { children: [/* @__PURE__ */ s(X, {
+    isOpen: M,
+    onClick: j,
+    className: T
   }), /* @__PURE__ */ s(W, {
-    isOpen: D,
-    onClose: j,
+    isOpen: M,
+    onClose: w,
     position: "left",
-    defaultWidth: M !== null ? Math.min(M, h) : h,
-    theme: b,
+    defaultWidth: E !== null ? Math.min(E, x) : x,
+    theme: g,
     classNames: {
-      panel: f(O({ mode: "expanded" }), "h-full border-r-0", g),
+      panel: h(S({ mode: "expanded" }), "h-full border-r-0", L),
       content: "gap-0"
     },
-    children: /* @__PURE__ */ s(R.Provider, {
+    children: /* @__PURE__ */ s(O.Provider, {
       value: {
         mode: "expanded",
         isCollapsed: !1,
         expandOnHover: !1,
         animateOnHover: !1,
-        separatorClassName: x
+        separatorClassName: b,
+        closeDrawer: w
       },
       children: /* @__PURE__ */ s("div", {
         className: "group/sidebar flex flex-col flex-1 min-h-0",
         "data-mode": "expanded",
-        children: w
+        children: y
       })
     })
   })] });
-  const d = t, k = C && d === "expanded", U = {
+  const d = r, k = H && d === "expanded", U = {
     mode: d,
     isCollapsed: d === "collapsed",
-    expandOnHover: F,
-    animateOnHover: z,
-    separatorClassName: x
+    expandOnHover: I,
+    animateOnHover: C,
+    separatorClassName: b,
+    closeDrawer: w
   };
-  return /* @__PURE__ */ s(R.Provider, {
+  return /* @__PURE__ */ s(O.Provider, {
     value: U,
-    children: /* @__PURE__ */ N("aside", {
+    children: /* @__PURE__ */ z("aside", {
       ref: e,
-      className: f(O({
+      className: h(S({
         mode: d,
-        className: g
+        className: L
       })),
-      "data-theme": b,
+      "data-theme": g,
       "data-mode": d,
-      children: [w, k && /* @__PURE__ */ s("div", {
+      children: [y, k && /* @__PURE__ */ s("div", {
         ref: n,
-        className: f(B({ className: H })),
-        onMouseDown: _
+        className: h(B({ className: V })),
+        onMouseDown: $
       })]
     })
   });

package/dist/components/Sidebar/contexts/SidebarContext.js

@@ -1,11 +1,13 @@
-import { createContext as e, useContext as t } from "react";
-var r = e({
+import { createContext as e, useContext as r } from "react";
+var t = e({
   mode: "expanded",
   isCollapsed: !1,
   expandOnHover: !1,
-  animateOnHover: !0
-}), o = () => t(r);
+  animateOnHover: !0,
+  closeDrawer: () => {
+  }
+}), o = () => r(t);
 export {
-  r as SidebarContext,
+  t as SidebarContext,
   o as useSidebarContext
 };

package/dist/lib/components/Sidebar/components/NavigationOption/NavigationOption.types.d.ts

@@ -5,6 +5,12 @@ type NavigationOption = VariantProps<typeof navigationOptionVariants> & {
     className?: string;
     isVisible?: boolean;
     isActive?: boolean;
+    /**
+     * Whether clicking this option should close the drawer when the Sidebar
+     * is in `drawer` mode. Defaults to `true`. Has no effect in `expanded` or
+     * `collapsed` modes.
+     */
+    closeDrawerOnClick?: boolean;
 };
 export type Props = NavigationOption & ({
     role: 'button';

package/dist/lib/components/Sidebar/contexts/SidebarContext.d.ts

@@ -5,6 +5,12 @@ export interface SidebarContextValue {
     expandOnHover: boolean;
     animateOnHover: boolean;
     separatorClassName?: string;
+    /**
+     * Closes the drawer when the Sidebar is in `drawer` mode. No-op in
+     * `expanded` or `collapsed` modes. Useful for closing the drawer on
+     * navigation events (e.g. when the user clicks a link).
+     */
+    closeDrawer: () => void;
 }
 export declare const SidebarContext: import('react').Context<SidebarContextValue>;
 export declare const useSidebarContext: () => SidebarContextValue;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.84",
+  "version": "0.1.2-alpha.85",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.85",
+  "version": "0.1.2-alpha.86",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",