@kopexa/sidebar 17.1.73 → 17.2.0

package/dist/chunk-3L2F566G.mjs

@@ -0,0 +1,147 @@
+"use client";
+
+// src/v2/context.tsx
+import { createContext } from "@kopexa/react-utils";
+import { TooltipProvider } from "@kopexa/tooltip";
+import { useIsMobile } from "@kopexa/use-is-mobile";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var PIN_COOKIE = "kpx_sidebar_v2_pinned";
+var PIN_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var [Provider, useSidebarV2] = createContext({
+  name: "SidebarV2Context",
+  errorMessage: "useSidebarV2 must be used within <SidebarV2> (the provider component)."
+});
+var defaultRenderLink = (props) => {
+  const { href, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
+};
+function SidebarV2Provider({
+  children,
+  tone = "dark",
+  flyoutTrigger = "click",
+  activeHref,
+  renderLink = defaultRenderLink,
+  pinned: pinnedProp,
+  onPinnedChange,
+  defaultPinned = true
+}) {
+  const isMobile = useIsMobile();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [flyoutValue, setFlyoutValue] = useState(null);
+  const [selectedRail, setSelectedRail] = useState(null);
+  const [openGroup, setOpenGroup] = useState(null);
+  const [pinnedUncontrolled, setPinnedUncontrolled] = useState(defaultPinned);
+  const pinned = pinnedProp != null ? pinnedProp : pinnedUncontrolled;
+  const [panelHost, setPanelHost] = useState(null);
+  const [overrideCount, setOverrideCount] = useState(0);
+  const registerPanelOverride = useCallback(() => {
+    setOverrideCount((c) => c + 1);
+    return () => setOverrideCount((c) => c - 1);
+  }, []);
+  const panelOverrideActive = overrideCount > 0;
+  const navPreviewActive = pinned ? selectedRail !== null : flyoutValue !== null;
+  const setPinned = 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 = useCallback(() => {
+    setPinned(!pinned);
+    setFlyoutValue(null);
+  }, [pinned, setPinned]);
+  const openFlyout = useCallback((value2) => {
+    setFlyoutValue((curr) => curr === value2 ? null : value2);
+  }, []);
+  const setFlyout = useCallback((value2) => {
+    setFlyoutValue(value2);
+  }, []);
+  const closeFlyout = useCallback(() => setFlyoutValue(null), []);
+  const resetPanelSelection = useCallback(() => {
+    setSelectedRail(null);
+    setFlyoutValue(null);
+  }, []);
+  const toggleGroup = useCallback((key) => {
+    setOpenGroup((curr) => curr === key ? null : key);
+  }, []);
+  const isActive = useCallback(
+    (href) => activeHref === href || href !== "/" && activeHref.startsWith(`${href}/`),
+    [activeHref]
+  );
+  const value = 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
+    ]
+  );
+  useEffect(() => {
+    setDrawerOpen(false);
+    setFlyoutValue(null);
+    setSelectedRail(null);
+    setOpenGroup(null);
+  }, [activeHref]);
+  return /* @__PURE__ */ jsx(Provider, { value, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children }) });
+}
+
+export {
+  useSidebarV2,
+  SidebarV2Provider
+};

package/dist/chunk-CMYTESJM.mjs

@@ -0,0 +1,274 @@
+"use client";
+import {
+  SidebarV2Panel,
+  SidebarV2PanelItems,
+  SidebarV2Rail,
+  SidebarV2RailItem,
+  SidebarV2RailLink
+} from "./chunk-EIXUCY5M.mjs";
+import {
+  panelItemHasChildren,
+  panelItemIsSection
+} from "./chunk-SDMGFB6V.mjs";
+import {
+  useSidebarV2
+} from "./chunk-3L2F566G.mjs";
+
+// src/v2/from-config.tsx
+import { Drawer } from "@kopexa/drawer";
+import { cn } from "@kopexa/shared-utils";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RAIL_WIDTH = "4rem";
+var PANEL_WIDTH = "15rem";
+var railVars = {
+  "--kpx-rail-width": RAIL_WIDTH,
+  "--kpx-panel-width": PANEL_WIDTH
+};
+function entryValue(entry) {
+  var _a;
+  if (entry.type === "divider") return "divider";
+  return entry.type === "panel" ? (_a = entry.value) != null ? _a : entry.label : entry.label;
+}
+function SidebarV2FromConfig({
+  items,
+  header
+}) {
+  var _a, _b, _c;
+  const {
+    pinned,
+    flyoutTrigger,
+    flyoutValue,
+    openFlyout,
+    setFlyout,
+    closeFlyout,
+    selectedRail,
+    setSelectedRail,
+    isActive,
+    isMobile,
+    drawerOpen,
+    setDrawerOpen,
+    setPanelHost,
+    panelOverrideActive,
+    navPreviewActive
+  } = useSidebarV2();
+  const hoverMode = flyoutTrigger === "hover" && !pinned && !isMobile;
+  const closeTimer = useRef(null);
+  const cancelClose = useCallback(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = null;
+  }, []);
+  const scheduleClose = useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => closeFlyout(), 160);
+  }, [cancelClose, closeFlyout]);
+  useEffect(() => cancelClose, [cancelClose]);
+  useEffect(() => {
+    if (pinned || isMobile || !flyoutValue) return;
+    const onPointerDown = (event) => {
+      const t = event.target;
+      if (!t) return;
+      if (t.closest('[data-slot="sidebar-v2-rail"]')) return;
+      if (t.closest('[data-floating="true"]')) return;
+      closeFlyout();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") closeFlyout();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [pinned, isMobile, flyoutValue, closeFlyout]);
+  const panels = useMemo(
+    () => items.filter(
+      (e) => e.type === "panel"
+    ),
+    [items]
+  );
+  const activeRailValue = useMemo(() => {
+    const match = panels.find(
+      (p) => p.items.some((item) => {
+        if (panelItemIsSection(item)) return false;
+        return panelItemHasChildren(item) ? item.children.some((c) => isActive(c.href)) : isActive(item.href);
+      })
+    );
+    return match ? entryValue(match) : null;
+  }, [panels, isActive]);
+  const shownValue = pinned ? selectedRail != null ? selectedRail : activeRailValue : flyoutValue;
+  const shownPanel = (_a = panels.find((p) => entryValue(p) === shownValue)) != null ? _a : null;
+  const topEntries = items.filter((e) => e.slot !== "bottom");
+  const bottomEntries = items.filter((e) => e.slot === "bottom");
+  function renderRailEntry(entry, index) {
+    if (entry.type === "divider") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "mx-3 my-1.5 h-px shrink-0 bg-sidebar-border/70"
+        },
+        `rail-divider-${index}`
+      );
+    }
+    const value = entryValue(entry);
+    if (entry.type === "link") {
+      return /* @__PURE__ */ jsx(
+        SidebarV2RailLink,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          href: entry.href,
+          badge: entry.badge
+        },
+        value
+      );
+    }
+    if (entry.type === "action") {
+      return /* @__PURE__ */ jsx(
+        SidebarV2RailItem,
+        {
+          icon: entry.icon,
+          label: entry.label,
+          active: false,
+          onClick: entry.onSelect
+        },
+        value
+      );
+    }
+    const active = flyoutValue ? value === flyoutValue : value === (selectedRail != null ? selectedRail : activeRailValue);
+    return /* @__PURE__ */ jsx(
+      SidebarV2RailItem,
+      {
+        icon: entry.icon,
+        label: entry.label,
+        active,
+        hasPanel: true,
+        onClick: () => {
+          if (pinned) setSelectedRail(value);
+          else openFlyout(value);
+        },
+        onMouseEnter: hoverMode ? () => {
+          cancelClose();
+          setFlyout(value);
+        } : void 0,
+        onMouseLeave: hoverMode ? scheduleClose : void 0
+      },
+      value
+    );
+  }
+  const railContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+      header && /* @__PURE__ */ jsxs(Fragment, { children: [
+        header,
+        /* @__PURE__ */ jsx("div", { className: "mx-3 my-1 h-px shrink-0 bg-sidebar-border/60" })
+      ] }),
+      topEntries.map(renderRailEntry)
+    ] }),
+    bottomEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-col gap-1 pt-1", children: bottomEntries.map(renderRailEntry) })
+  ] });
+  const navData = pinned && shownPanel && (navPreviewActive || !panelOverrideActive) ? shownPanel : null;
+  const [bufferedPanel, setBufferedPanel] = useState(navData);
+  useEffect(() => {
+    if (navData) {
+      setBufferedPanel(navData);
+      return;
+    }
+    const t = setTimeout(() => setBufferedPanel(null), 220);
+    return () => clearTimeout(t);
+  }, [navData]);
+  const navToRender = navData != null ? navData : bufferedPanel;
+  const renderNav = (!panelOverrideActive || navPreviewActive) && navToRender;
+  const panelContent = navToRender && renderNav ? /* @__PURE__ */ jsx(
+    SidebarV2Panel,
+    {
+      title: (_b = navToRender.title) != null ? _b : navToRender.label,
+      subtitle: navToRender.subtitle,
+      children: /* @__PURE__ */ jsx(SidebarV2PanelItems, { items: navToRender.items })
+    },
+    entryValue(navToRender)
+  ) : null;
+  const docked = Boolean(navData) || panelOverrideActive;
+  const showFlyout = !pinned && Boolean(shownPanel);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(
+      Drawer.Root,
+      {
+        open: drawerOpen,
+        onOpenChange: setDrawerOpen,
+        placement: "left",
+        children: /* @__PURE__ */ jsxs(Drawer.Content, { className: "w-auto max-w-[85vw] border-0 bg-sidebar p-0 [&>button]:hidden", children: [
+          /* @__PURE__ */ jsxs(Drawer.Header, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(Drawer.Title, { children: "Navigation" }),
+            /* @__PURE__ */ jsx(Drawer.Description, { children: "Hauptnavigation" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-full", style: railVars, children: [
+            /* @__PURE__ */ jsx(SidebarV2Rail, { children: railContent }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: setPanelHost,
+                "data-slot": "sidebar-v2-panel-zone",
+                className: "flex min-h-0",
+                children: panelContent
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SidebarV2Rail, { style: { gridArea: "rail" }, children: railContent }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setPanelHost,
+        "data-slot": "sidebar-v2-panel-zone",
+        className: cn(
+          "relative shrink-0 transition-[width] duration-200 ease-out motion-reduce:transition-none",
+          pinned && "overflow-hidden"
+        ),
+        style: { gridArea: "panel", width: docked ? PANEL_WIDTH : "0px" },
+        children: [
+          panelContent,
+          /* @__PURE__ */ jsx(AnimatePresence, { children: showFlyout && shownPanel && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              "data-floating": "true",
+              className: "absolute inset-y-2 left-1 z-30",
+              initial: { x: -14, opacity: 0 },
+              animate: { x: 0, opacity: 1 },
+              exit: { x: -14, opacity: 0 },
+              transition: { duration: 0.16, ease: "easeOut" },
+              onMouseEnter: hoverMode ? cancelClose : void 0,
+              onMouseLeave: hoverMode ? scheduleClose : void 0,
+              children: /* @__PURE__ */ jsx(
+                SidebarV2Panel,
+                {
+                  floating: true,
+                  title: (_c = shownPanel.title) != null ? _c : shownPanel.label,
+                  subtitle: shownPanel.subtitle,
+                  children: /* @__PURE__ */ jsx(SidebarV2PanelItems, { items: shownPanel.items })
+                }
+              )
+            },
+            "sidebar-v2-flyout"
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  SidebarV2FromConfig
+};