@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,96 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,90 +0,0 @@
-'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

@@ -1,223 +0,0 @@
-'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

@@ -1,34 +0,0 @@
-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

@@ -1,220 +0,0 @@
-'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 };