@kopexa/sidebar 17.1.74 → 17.2.0

package/dist/v2/context.d.ts

@@ -0,0 +1,81 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SidebarV2LinkProps } from './types.js';
+
+/**
+ * Visual tone of the panel + content surround. The rail stays dark in both.
+ * - "dark": panel + surround share the dark sidebar surface (default).
+ * - "light": panel + surround go light (Gmail-style) against the dark rail.
+ */
+type SidebarV2Tone = "dark" | "light";
+/** How the flyout opens when unpinned. */
+type SidebarV2FlyoutTrigger = "click" | "hover";
+type SidebarV2ContextValue = {
+    /** Visual tone of the panel + surround. */
+    tone: SidebarV2Tone;
+    /** Pinned = persistent two-column. Unpinned = rail only + flyout panel. */
+    pinned: boolean;
+    togglePin: () => void;
+    setPinned: (v: boolean) => void;
+    /** Pinned-mode preview: rail value the user selected to show without navigating. */
+    selectedRail: string | null;
+    setSelectedRail: (value: string | null) => void;
+    /** How the flyout opens when unpinned: "click" (default) or "hover". */
+    flyoutTrigger: SidebarV2FlyoutTrigger;
+    /** Rail value whose panel is shown as a flyout (unpinned only). null = closed. */
+    flyoutValue: string | null;
+    /** Toggle the flyout for a value (click semantics). */
+    openFlyout: (value: string) => void;
+    /** Set the flyout to a specific value or null (hover semantics, no toggle). */
+    setFlyout: (value: string | null) => void;
+    closeFlyout: () => void;
+    /** Clear any open/previewed panel (selection + flyout). */
+    resetPanelSelection: () => void;
+    /** Accordion: the single open L2 group key (auto-collapse). */
+    openGroup: string | null;
+    toggleGroup: (key: string) => void;
+    setOpenGroup: (key: string | null) => void;
+    /** Current route, supplied by host. Drives active state. */
+    activeHref: string;
+    /** True when href is the active route (exact or nested). */
+    isActive: (href: string) => boolean;
+    /** Host link renderer (e.g. next/link). */
+    renderLink: (props: SidebarV2LinkProps) => ReactNode;
+    isMobile: boolean;
+    drawerOpen: boolean;
+    setDrawerOpen: (v: boolean) => void;
+    /** DOM host of the panel zone — target for page-supplied panel content. */
+    panelHost: HTMLElement | null;
+    setPanelHost: (el: HTMLElement | null) => void;
+    /** True while a page/sub-layout is overriding the nav panel. */
+    panelOverrideActive: boolean;
+    /** Register a panel override; returns the unregister fn (call on unmount). */
+    registerPanelOverride: () => () => void;
+    /**
+     * True when the user is explicitly previewing nav (selected a rail domain in
+     * pinned mode, or opened a flyout). This takes precedence over a page override
+     * so nav stays reachable even on a route that supplies its own panel.
+     */
+    navPreviewActive: boolean;
+};
+declare const useSidebarV2: () => SidebarV2ContextValue;
+
+type SidebarV2ProviderProps = {
+    children: ReactNode;
+    /** Visual tone of the panel + surround (rail stays dark). Defaults to "dark". */
+    tone?: SidebarV2Tone;
+    /** How the flyout opens when unpinned: "click" (default) or "hover". */
+    flyoutTrigger?: SidebarV2FlyoutTrigger;
+    /** Current route path. Required for active-state derivation. */
+    activeHref: string;
+    /** Render function for navigational links. Defaults to a plain <a>. */
+    renderLink?: (props: SidebarV2LinkProps) => ReactNode;
+    /** Controlled pin state. */
+    pinned?: boolean;
+    onPinnedChange?: (v: boolean) => void;
+    /** Initial pin state when uncontrolled. */
+    defaultPinned?: boolean;
+};
+declare function SidebarV2Provider({ children, tone, flyoutTrigger, activeHref, renderLink, pinned: pinnedProp, onPinnedChange, defaultPinned, }: SidebarV2ProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type SidebarV2ContextValue, type SidebarV2FlyoutTrigger, SidebarV2Provider, type SidebarV2ProviderProps, type SidebarV2Tone, useSidebarV2 };

package/dist/v2/context.js

@@ -0,0 +1,167 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/context.tsx
+var context_exports = {};
+__export(context_exports, {
+  SidebarV2Provider: () => SidebarV2Provider,
+  useSidebarV2: () => useSidebarV2
+});
+module.exports = __toCommonJS(context_exports);
+var import_react_utils = require("@kopexa/react-utils");
+var import_tooltip = require("@kopexa/tooltip");
+var import_use_is_mobile = require("@kopexa/use-is-mobile");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PIN_COOKIE = "kpx_sidebar_v2_pinned";
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = (0, import_react_utils.createContext)({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+var defaultRenderLink = (props) => {
+  const { href, className, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className, ...rest, children });
+};
+function SidebarV2Provider({
+  children,
+  tone = "dark",
+  flyoutTrigger = "click",
+  activeHref,
+  renderLink = defaultRenderLink,
+  pinned: pinnedProp,
+  onPinnedChange,
+  defaultPinned = true
+}) {
+  const isMobile = (0, import_use_is_mobile.useIsMobile)();
+  const [drawerOpen, setDrawerOpen] = (0, import_react.useState)(false);
+  const [flyoutValue, setFlyoutValue] = (0, import_react.useState)(null);
+  const [selectedRail, setSelectedRail] = (0, import_react.useState)(null);
+  const [openGroup, setOpenGroup] = (0, import_react.useState)(null);
+  const [pinnedUncontrolled, setPinnedUncontrolled] = (0, import_react.useState)(defaultPinned);
+  const pinned = pinnedProp != null ? pinnedProp : pinnedUncontrolled;
+  const [panelHost, setPanelHost] = (0, import_react.useState)(null);
+  const [overrideCount, setOverrideCount] = (0, import_react.useState)(0);
+  const registerPanelOverride = (0, import_react.useCallback)(() => {
+    setOverrideCount((c) => c + 1);
+    return () => setOverrideCount((c) => c - 1);
+  }, []);
+  const panelOverrideActive = overrideCount > 0;
+  const navPreviewActive = pinned ? selectedRail !== null : flyoutValue !== null;
+  const setPinned = (0, import_react.useCallback)(
+    (value2) => {
+      onPinnedChange == null ? void 0 : onPinnedChange(value2);
+      if (pinnedProp === void 0) {
+        setPinnedUncontrolled(value2);
+      }
+      document.cookie = `${PIN_COOKIE}=${value2}; path=/; max-age=${PIN_COOKIE_MAX_AGE}`;
+    },
+    [onPinnedChange, pinnedProp]
+  );
+  const togglePin = (0, import_react.useCallback)(() => {
+    setPinned(!pinned);
+    setFlyoutValue(null);
+  }, [pinned, setPinned]);
+  const openFlyout = (0, import_react.useCallback)((value2) => {
+    setFlyoutValue((curr) => curr === value2 ? null : value2);
+  }, []);
+  const setFlyout = (0, import_react.useCallback)((value2) => {
+    setFlyoutValue(value2);
+  }, []);
+  const closeFlyout = (0, import_react.useCallback)(() => setFlyoutValue(null), []);
+  const resetPanelSelection = (0, import_react.useCallback)(() => {
+    setSelectedRail(null);
+    setFlyoutValue(null);
+  }, []);
+  const toggleGroup = (0, import_react.useCallback)((key) => {
+    setOpenGroup((curr) => curr === key ? null : key);
+  }, []);
+  const isActive = (0, import_react.useCallback)(
+    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    [activeHref]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({
+      tone,
+      pinned,
+      togglePin,
+      setPinned,
+      selectedRail,
+      setSelectedRail,
+      flyoutTrigger,
+      flyoutValue,
+      openFlyout,
+      setFlyout,
+      closeFlyout,
+      resetPanelSelection,
+      openGroup,
+      toggleGroup,
+      setOpenGroup,
+      activeHref,
+      isActive,
+      renderLink,
+      isMobile,
+      drawerOpen,
+      setDrawerOpen,
+      panelHost,
+      setPanelHost,
+      panelOverrideActive,
+      registerPanelOverride,
+      navPreviewActive
+    }),
+    [
+      tone,
+      pinned,
+      togglePin,
+      setPinned,
+      selectedRail,
+      flyoutTrigger,
+      flyoutValue,
+      openFlyout,
+      setFlyout,
+      closeFlyout,
+      resetPanelSelection,
+      openGroup,
+      toggleGroup,
+      activeHref,
+      isActive,
+      renderLink,
+      isMobile,
+      drawerOpen,
+      panelHost,
+      panelOverrideActive,
+      registerPanelOverride,
+      navPreviewActive
+    ]
+  );
+  (0, import_react.useEffect)(() => {
+    setDrawerOpen(false);
+    setFlyoutValue(null);
+    setSelectedRail(null);
+    setOpenGroup(null);
+  }, [activeHref]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.TooltipProvider, { delayDuration: 0, children }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarV2Provider,
+  useSidebarV2
+});

package/dist/v2/context.mjs

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  SidebarV2Provider,
+  useSidebarV2
+} from "../chunk-3L2F566G.mjs";
+export {
+  SidebarV2Provider,
+  useSidebarV2
+};

package/dist/v2/from-config.d.mts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SidebarV2Nav } from './types.mjs';
+
+type SidebarV2FromConfigProps = {
+    items: SidebarV2Nav;
+    /** Rendered at the very top of the rail (e.g. <SidebarV2.Workspace />). */
+    header?: ReactNode;
+};
+declare function SidebarV2FromConfig({ items, header, }: SidebarV2FromConfigProps): react_jsx_runtime.JSX.Element;
+
+export { SidebarV2FromConfig, type SidebarV2FromConfigProps };

package/dist/v2/from-config.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SidebarV2Nav } from './types.js';
+
+type SidebarV2FromConfigProps = {
+    items: SidebarV2Nav;
+    /** Rendered at the very top of the rail (e.g. <SidebarV2.Workspace />). */
+    header?: ReactNode;
+};
+declare function SidebarV2FromConfig({ items, header, }: SidebarV2FromConfigProps): react_jsx_runtime.JSX.Element;
+
+export { SidebarV2FromConfig, type SidebarV2FromConfigProps };