@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -0,0 +1,223 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var nestedFiltering = require('../../../utils/arrays/nested-filtering');
+
+const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
+const hasHref = (item) => typeof item.href === "string" && item.href.length > 0;
+const normalizeHref = (href) => {
+  if (!href) return href;
+  return href.length > 1 ? href.replace(/\/+$/, "") : href;
+};
+const findExpandableParentChain = (targetHref, items) => {
+  var _a;
+  const target = normalizeHref(targetHref);
+  const dfs = (nodes, parentExpandables) => {
+    for (const node of nodes) {
+      const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
+      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
+      if (nodeHref === target) {
+        return isExpandableParent ? nextParents : parentExpandables;
+      }
+      if (hasChildren(node)) {
+        const found = dfs(node.children, nextParents);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return (_a = dfs(items, [])) != null ? _a : [];
+};
+const SidebarContext = react.createContext({
+  defaultExpanded: null,
+  expandedItems: /* @__PURE__ */ new Set(),
+  activeQuery: "",
+  wrapItemText: false,
+  areItemsCollapsed: false,
+  setActiveQuery: () => {
+  },
+  setWrapItemText: () => {
+  },
+  triggerExpandAll: () => {
+  },
+  setItemsCollapsed: () => {
+  },
+  resetExpandAll: () => {
+  },
+  activeLink: "",
+  setActiveLink: () => {
+  },
+  expandItem: () => {
+  },
+  collapseItem: () => {
+  },
+  isExpanded: () => false,
+  isSidebarCollapsed: false,
+  handleSidebarCollapseChange: () => {
+  }
+});
+const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebar-is-collapsed";
+const SIDEBAR_BREAKPOINT = 1024;
+const getBreakpoint = (width) => width < SIDEBAR_BREAKPOINT ? "small" : "large";
+function SidebarProvider({
+  children,
+  items,
+  initialQuery,
+  initialCollapsed = false,
+  initialSidebarCollapsed
+}) {
+  const [defaultExpanded, setDefaultExpanded] = react.useState(null);
+  const [activeQuery, setActiveQuery] = react.useState(initialQuery != null ? initialQuery : "");
+  const [wrapItemText, setWrapItemText] = react.useState(false);
+  const [areItemsCollapsed, setItemsCollapsed] = react.useState(initialCollapsed);
+  const [activeHref, setActiveHref] = react.useState("");
+  const [expandedItems, setExpandedItems] = react.useState(/* @__PURE__ */ new Set());
+  const itemsRef = react.useRef(items);
+  react.useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  const [isSidebarCollapsed, setSidebarCollapsed] = react.useState(
+    initialSidebarCollapsed != null ? initialSidebarCollapsed : false
+  );
+  react.useEffect(() => {
+    if (initialSidebarCollapsed !== void 0) return;
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+      if (stored !== null) {
+        setSidebarCollapsed(Boolean(JSON.parse(stored)));
+        return;
+      }
+    } catch {
+    }
+    setSidebarCollapsed(getBreakpoint(window.innerWidth) === "small");
+  }, []);
+  const triggerExpandAll = react.useCallback(() => setDefaultExpanded(true), []);
+  const resetExpandAll = react.useCallback(() => setDefaultExpanded(null), []);
+  const setActiveLink = react.useCallback((href) => setActiveHref(href), []);
+  const expandItem = react.useCallback((href) => {
+    const h = normalizeHref(href);
+    setExpandedItems((prev) => {
+      if (prev.has(h)) return prev;
+      const next = new Set(prev);
+      next.add(h);
+      return next;
+    });
+  }, []);
+  const collapseItem = react.useCallback((href) => {
+    const h = normalizeHref(href);
+    setExpandedItems((prev) => {
+      if (!prev.has(h)) return prev;
+      const next = new Set(prev);
+      next.delete(h);
+      return next;
+    });
+  }, []);
+  const isExpanded = react.useCallback(
+    (href) => expandedItems.has(normalizeHref(href)),
+    [expandedItems]
+  );
+  react.useEffect(() => {
+    if (!activeHref) return;
+    const currentItems = itemsRef.current;
+    const parents = findExpandableParentChain(activeHref, currentItems);
+    if (parents.length === 0) return;
+    setExpandedItems((prev) => {
+      let changed = false;
+      const next = new Set(prev);
+      for (const p of parents) {
+        const norm = normalizeHref(p);
+        if (!next.has(norm)) {
+          next.add(norm);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [activeHref]);
+  const filteredItems = react.useMemo(() => {
+    return activeQuery ? nestedFiltering.nestedFiltering(items, {
+      keys: ["label", "tags"],
+      includeParents: true,
+      mode: "OR",
+      query: activeQuery
+    }) : items;
+  }, [items, activeQuery]);
+  const persistCollapsed = react.useCallback((collapsed) => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
+    } catch {
+    }
+  }, []);
+  const handleSidebarCollapseChange = react.useCallback(
+    (collapsed) => {
+      setSidebarCollapsed(collapsed);
+      persistCollapsed(collapsed);
+    },
+    [persistCollapsed]
+  );
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    let lastBreakpoint = getBreakpoint(window.innerWidth);
+    const onResize = () => {
+      const nextBreakpoint = getBreakpoint(window.innerWidth);
+      if (nextBreakpoint === lastBreakpoint) return;
+      lastBreakpoint = nextBreakpoint;
+      setSidebarCollapsed(nextBreakpoint === "small");
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const value = react.useMemo(
+    () => ({
+      defaultExpanded: activeQuery ? true : defaultExpanded,
+      expandedItems,
+      filteredItems,
+      activeQuery,
+      wrapItemText,
+      areItemsCollapsed,
+      setActiveQuery,
+      setWrapItemText,
+      triggerExpandAll,
+      resetExpandAll,
+      setItemsCollapsed,
+      activeLink: activeHref,
+      setActiveLink,
+      expandItem,
+      collapseItem,
+      isExpanded,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
+    }),
+    [
+      defaultExpanded,
+      expandedItems,
+      filteredItems,
+      activeQuery,
+      wrapItemText,
+      areItemsCollapsed,
+      setActiveQuery,
+      setWrapItemText,
+      triggerExpandAll,
+      resetExpandAll,
+      setItemsCollapsed,
+      activeHref,
+      setActiveLink,
+      expandItem,
+      collapseItem,
+      isExpanded,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  return react.useContext(SidebarContext);
+}
+
+exports.SidebarProvider = SidebarProvider;
+exports.useSidebar = useSidebar;

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
+
+const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
+const hasHref = (item) => typeof item.href === "string" && item.href.length > 0;
+const normalizeHref = (href) => {
+  if (!href) return href;
+  return href.length > 1 ? href.replace(/\/+$/, "") : href;
+};
+const findExpandableParentChain = (targetHref, items) => {
+  var _a;
+  const target = normalizeHref(targetHref);
+  const dfs = (nodes, parentExpandables) => {
+    for (const node of nodes) {
+      const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
+      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
+      if (nodeHref === target) {
+        return isExpandableParent ? nextParents : parentExpandables;
+      }
+      if (hasChildren(node)) {
+        const found = dfs(node.children, nextParents);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return (_a = dfs(items, [])) != null ? _a : [];
+};
+const SidebarContext = createContext({
+  defaultExpanded: null,
+  expandedItems: /* @__PURE__ */ new Set(),
+  activeQuery: "",
+  wrapItemText: false,
+  areItemsCollapsed: false,
+  setActiveQuery: () => {
+  },
+  setWrapItemText: () => {
+  },
+  triggerExpandAll: () => {
+  },
+  setItemsCollapsed: () => {
+  },
+  resetExpandAll: () => {
+  },
+  activeLink: "",
+  setActiveLink: () => {
+  },
+  expandItem: () => {
+  },
+  collapseItem: () => {
+  },
+  isExpanded: () => false,
+  isSidebarCollapsed: false,
+  handleSidebarCollapseChange: () => {
+  }
+});
+const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebar-is-collapsed";
+const SIDEBAR_BREAKPOINT = 1024;
+const getBreakpoint = (width) => width < SIDEBAR_BREAKPOINT ? "small" : "large";
+function SidebarProvider({
+  children,
+  items,
+  initialQuery,
+  initialCollapsed = false,
+  initialSidebarCollapsed
+}) {
+  const [defaultExpanded, setDefaultExpanded] = useState(null);
+  const [activeQuery, setActiveQuery] = useState(initialQuery != null ? initialQuery : "");
+  const [wrapItemText, setWrapItemText] = useState(false);
+  const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
+  const [activeHref, setActiveHref] = useState("");
+  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  const [isSidebarCollapsed, setSidebarCollapsed] = useState(
+    initialSidebarCollapsed != null ? initialSidebarCollapsed : false
+  );
+  useEffect(() => {
+    if (initialSidebarCollapsed !== void 0) return;
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+      if (stored !== null) {
+        setSidebarCollapsed(Boolean(JSON.parse(stored)));
+        return;
+      }
+    } catch {
+    }
+    setSidebarCollapsed(getBreakpoint(window.innerWidth) === "small");
+  }, []);
+  const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
+  const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
+  const setActiveLink = useCallback((href) => setActiveHref(href), []);
+  const expandItem = useCallback((href) => {
+    const h = normalizeHref(href);
+    setExpandedItems((prev) => {
+      if (prev.has(h)) return prev;
+      const next = new Set(prev);
+      next.add(h);
+      return next;
+    });
+  }, []);
+  const collapseItem = useCallback((href) => {
+    const h = normalizeHref(href);
+    setExpandedItems((prev) => {
+      if (!prev.has(h)) return prev;
+      const next = new Set(prev);
+      next.delete(h);
+      return next;
+    });
+  }, []);
+  const isExpanded = useCallback(
+    (href) => expandedItems.has(normalizeHref(href)),
+    [expandedItems]
+  );
+  useEffect(() => {
+    if (!activeHref) return;
+    const currentItems = itemsRef.current;
+    const parents = findExpandableParentChain(activeHref, currentItems);
+    if (parents.length === 0) return;
+    setExpandedItems((prev) => {
+      let changed = false;
+      const next = new Set(prev);
+      for (const p of parents) {
+        const norm = normalizeHref(p);
+        if (!next.has(norm)) {
+          next.add(norm);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [activeHref]);
+  const filteredItems = useMemo(() => {
+    return activeQuery ? nestedFiltering(items, {
+      keys: ["label", "tags"],
+      includeParents: true,
+      mode: "OR",
+      query: activeQuery
+    }) : items;
+  }, [items, activeQuery]);
+  const persistCollapsed = useCallback((collapsed) => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
+    } catch {
+    }
+  }, []);
+  const handleSidebarCollapseChange = useCallback(
+    (collapsed) => {
+      setSidebarCollapsed(collapsed);
+      persistCollapsed(collapsed);
+    },
+    [persistCollapsed]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let lastBreakpoint = getBreakpoint(window.innerWidth);
+    const onResize = () => {
+      const nextBreakpoint = getBreakpoint(window.innerWidth);
+      if (nextBreakpoint === lastBreakpoint) return;
+      lastBreakpoint = nextBreakpoint;
+      setSidebarCollapsed(nextBreakpoint === "small");
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const value = useMemo(
+    () => ({
+      defaultExpanded: activeQuery ? true : defaultExpanded,
+      expandedItems,
+      filteredItems,
+      activeQuery,
+      wrapItemText,
+      areItemsCollapsed,
+      setActiveQuery,
+      setWrapItemText,
+      triggerExpandAll,
+      resetExpandAll,
+      setItemsCollapsed,
+      activeLink: activeHref,
+      setActiveLink,
+      expandItem,
+      collapseItem,
+      isExpanded,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
+    }),
+    [
+      defaultExpanded,
+      expandedItems,
+      filteredItems,
+      activeQuery,
+      wrapItemText,
+      areItemsCollapsed,
+      setActiveQuery,
+      setWrapItemText,
+      triggerExpandAll,
+      resetExpandAll,
+      setItemsCollapsed,
+      activeHref,
+      setActiveLink,
+      expandItem,
+      collapseItem,
+      isExpanded,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
+    ]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebar() {
+  return useContext(SidebarContext);
+}
+
+export { SidebarProvider, useSidebar };