@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -0,0 +1,96 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var Button = require('../../../button/Button');
+var Menu = require('../../../menu/Menu');
+var Popover = require('../../../popover/Popover');
+var SearchBox = require('../../../search-box/SearchBox');
+var SidebarProvider = require('../../providers/SidebarProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const SidenavFiltering = ({
+  placeholder = "Filtrer menu",
+  showSettings = false
+}) => {
+  const {
+    activeQuery,
+    setActiveQuery,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    wrapItemText,
+    setWrapItemText
+  } = SidebarProvider.useSidebar();
+  const searchBoxRef = React__default.default.useRef(null);
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  if (isSidebarCollapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        fullWidth: true,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
+        size: "sm",
+        variant: "inline",
+        onClick: () => {
+          handleSidebarCollapseChange(false);
+          setTimeout(() => {
+            var _a;
+            (_a = searchBoxRef.current) == null ? void 0 : _a.focus();
+          }, 50);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "stretch", gap: "var(--spacing-xs)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SearchBox.SearchBox,
+      {
+        ref: searchBoxRef,
+        inputWidth: "100%",
+        inputSize: "sm",
+        value: activeQuery != null ? activeQuery : "",
+        onSearch: handleSearch,
+        placeholder,
+        fullWidth: true
+      }
+    ),
+    showSettings ? /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        minWidth: "220px",
+        trigger: (toggle) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outlined",
+            "aria-label": "\xC5bn indstillinger for sidemenu",
+            onClick: toggle,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {})
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setWrapItemText(!wrapItemText);
+              close();
+            },
+            children: "Ombryd tekst"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+module.exports = SidenavFiltering_default;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SidenavFilteringProps {
+    placeholder?: string;
+    showSettings?: boolean;
+}
+declare const SidenavFiltering: React.FC<SidenavFilteringProps>;
+export default SidenavFiltering;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Search, Settings2 } from 'lucide-react';
+import React from 'react';
+import { Button } from '../../../button/Button';
+import { Menu } from '../../../menu/Menu';
+import { Popover } from '../../../popover/Popover';
+import { SearchBox } from '../../../search-box/SearchBox';
+import { useSidebar } from '../../providers/SidebarProvider';
+
+const SidenavFiltering = ({
+  placeholder = "Filtrer menu",
+  showSettings = false
+}) => {
+  const {
+    activeQuery,
+    setActiveQuery,
+    isSidebarCollapsed,
+    handleSidebarCollapseChange,
+    wrapItemText,
+    setWrapItemText
+  } = useSidebar();
+  const searchBoxRef = React.useRef(null);
+  const handleSearch = (value) => {
+    setActiveQuery == null ? void 0 : setActiveQuery(value);
+  };
+  if (isSidebarCollapsed) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        icon: /* @__PURE__ */ jsx(Search, {}),
+        size: "sm",
+        variant: "inline",
+        onClick: () => {
+          handleSidebarCollapseChange(false);
+          setTimeout(() => {
+            var _a;
+            (_a = searchBoxRef.current) == null ? void 0 : _a.focus();
+          }, 50);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "stretch", gap: "var(--spacing-xs)" }, children: [
+    /* @__PURE__ */ jsx(
+      SearchBox,
+      {
+        ref: searchBoxRef,
+        inputWidth: "100%",
+        inputSize: "sm",
+        value: activeQuery != null ? activeQuery : "",
+        onSearch: handleSearch,
+        placeholder,
+        fullWidth: true
+      }
+    ),
+    showSettings ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        minWidth: "220px",
+        trigger: (toggle) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outlined",
+            "aria-label": "\xC5bn indstillinger for sidemenu",
+            onClick: toggle,
+            icon: /* @__PURE__ */ jsx(Settings2, {})
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setWrapItemText(!wrapItemText);
+              close();
+            },
+            children: "Ombryd tekst"
+          }
+        ) }) })
+      }
+    ) : null
+  ] });
+};
+var SidenavFiltering_default = SidenavFiltering;
+
+export { SidenavFiltering_default as default };

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.d.ts

@@ -0,0 +1,34 @@
+import type { JSX } from 'react';
+import * as React from 'react';
+import type { NavBarItem } from '../../../components/nav-bar/NavBar';
+export type SidebarContextValue = {
+    defaultExpanded: boolean | null;
+    expandedItems: Set<string>;
+    resetExpandAll: () => void;
+    activeQuery: string;
+    wrapItemText: boolean;
+    areItemsCollapsed: boolean;
+    setActiveQuery: (query: string) => void;
+    setWrapItemText: (value: boolean) => void;
+    triggerExpandAll: () => void;
+    setItemsCollapsed: (v: boolean) => void;
+    filteredItems?: NavBarItem[];
+    activeLink?: string;
+    setActiveLink: (href: string) => void;
+    expandItem: (href: string) => void;
+    collapseItem: (href: string) => void;
+    isExpanded: (href: string) => boolean;
+    isSidebarCollapsed: boolean;
+    handleSidebarCollapseChange: (collapsed: boolean) => void;
+};
+type SidebarProviderProps = {
+    children: React.ReactNode;
+    items: NavBarItem[];
+    initialQuery?: string | null;
+    initialCollapsed?: boolean;
+    initialCollapseChildren?: boolean;
+    initialSidebarCollapsed?: boolean;
+};
+export declare function SidebarProvider({ children, items, initialQuery, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function useSidebar(): SidebarContextValue;
+export {};

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 };