@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -5,9 +5,9 @@
   justify-content: space-between;
   gap: var(--spacing-sm);
   padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
   text-decoration: none;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   cursor: pointer;
   position: relative;
   border-radius: var(--border-radius-default);
@@ -16,6 +16,12 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
+.container.collapsed {
+  justify-content: center;
+  padding: var(--spacing-xs);
+  border-radius: 0;
+}
+
 .active {
   background: var(--color-bg-selected);
 }
@@ -26,7 +32,7 @@
   inset-inline-start: 0;
   inset-block: 0;
   inline-size: 3px;
-  background-color: var(--color-primary);
+  background-color: var(--color-brand);
   border-radius: 0;
 }
 
@@ -37,25 +43,32 @@
 }
 
 .container:not(.active):hover {
-  background-color: var(--color-surface-hover);
-  border-radius: var(--border-radius-default);
-  color: var(--color-text);
+  background-color: var(--color-bg-contextual);
+
+  color: var(--color-fg-default);
 }
 
-.icon {
-  min-inline-size: var(--icon-size);
+.icon,
+.suffixIcon {
+  min-inline-size: var(--icon-size-sm);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-secondary);
+  color: var(--color-fg-subtle);
 }
 
-.icon svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+.icon svg,
+.suffixIcon svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
   color: inherit;
 }
 
+.collapsed svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+
 .container:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -18,7 +18,8 @@ function SidebarItems({ activeLink }) {
         items: children,
         label,
         icon,
-        href
+        href,
+        component: Component
       },
       label
     ) : /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label, icon, href }, id)

package/dist/components/sidebar/components/sidebar-items/SidebarItems.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare function SidebarItems({ activeLink }: {
     activeLink?: string;
-}): React.ReactElement;
+}): React.ReactNode;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -16,7 +16,8 @@ function SidebarItems({ activeLink }) {
         items: children,
         label,
         icon,
-        href
+        href,
+        component: Component
       },
       label
     ) : /* @__PURE__ */ jsx(SidebarItem, { component: Component, label, icon, href }, id)

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

@@ -1,18 +1,45 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var SearchBox = require('../../../search-box/SearchBox');
 var SidebarProvider = require('../../providers/SidebarProvider');
+var Button = require('../../../button/Button');
+var lucideReact = require('lucide-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 const SidenavFiltering = () => {
-  const { activeQuery, setActiveQuery } = SidebarProvider.useSidebar();
+  const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange } = 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.jsx(
     SearchBox.SearchBox,
     {
-      width: "100%",
+      ref: searchBoxRef,
+      inputWidth: "100%",
       inputSize: "sm",
       value: activeQuery != null ? activeQuery : "",
       onSearch: handleSearch,

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

@@ -1,16 +1,39 @@
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { SearchBox } from '../../../search-box/SearchBox';
 import { useSidebar } from '../../providers/SidebarProvider';
+import { Button } from '../../../button/Button';
+import { Search } from 'lucide-react';
 
 const SidenavFiltering = () => {
-  const { activeQuery, setActiveQuery } = useSidebar();
+  const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange } = 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__ */ jsx(
     SearchBox,
     {
-      width: "100%",
+      ref: searchBoxRef,
+      inputWidth: "100%",
       inputSize: "sm",
       value: activeQuery != null ? activeQuery : "",
       onSearch: handleSearch,

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

@@ -4,34 +4,67 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var nestedFiltering = require('../../../utils/arrays/nested-filtering');
 
+const findParentItem = (navItem, items, prevPath) => {
+  var _a;
+  for (const currentItem of items) {
+    let path = prevPath || `.${currentItem.href}`;
+    if ((_a = currentItem.children) == null ? void 0 : _a.some((child) => (child == null ? void 0 : child.href) === navItem)) {
+      return path;
+    } else if (currentItem.children) {
+      path = findParentItem(navItem, currentItem.children, path);
+      if (path) {
+        return path;
+      }
+    }
+  }
+  return "";
+};
 const SidebarContext = react.createContext({
   defaultExpanded: null,
+  expandedItems: /* @__PURE__ */ new Set(),
   activeQuery: "",
-  isSidebarCollapsed: false,
+  areItemsCollapsed: false,
   setActiveQuery: () => {
   },
   triggerExpandAll: () => {
   },
-  setIsSidebarCollapsed: () => {
+  setItemsCollapsed: () => {
   },
   resetExpandAll: () => {
   },
   activeLink: "",
   setActiveLink: () => {
+  },
+  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,
-  initialCollapsed = false
+  initialCollapsed = false,
+  initialSidebarCollapsed
 }) {
   const [defaultExpanded, setDefaultExpanded] = react.useState(null);
   const [activeQuery, setActiveQuery] = react.useState("");
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = react.useState(initialCollapsed);
+  const [areItemsCollapsed, setItemsCollapsed] = react.useState(initialCollapsed);
   const [activeHref, setActiveHref] = react.useState("");
+  const [expandedItems, setExpandedItems] = react.useState(/* @__PURE__ */ new Set());
+  const [isSidebarCollapsed, setSidebarCollapsed] = react.useState(
+    initialSidebarCollapsed != null ? initialSidebarCollapsed : false
+  );
+  const [breakpoint, setBreakpoint] = react.useState(null);
+  const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== void 0;
   const triggerExpandAll = react.useCallback(() => setDefaultExpanded(true), []);
   const resetExpandAll = react.useCallback(() => setDefaultExpanded(null), []);
   const setActiveLink = react.useCallback((href) => setActiveHref(href), []);
+  react.useEffect(() => {
+    const path = findParentItem(activeHref, items);
+    setExpandedItems(new Set(path.split(".").filter(Boolean)));
+  }, [activeHref]);
   const filteredItems = react.useMemo(() => {
     return activeQuery ? nestedFiltering.nestedFiltering(items, {
       keys: ["label", "tags"],
@@ -45,30 +78,95 @@ function SidebarProvider({
       triggerExpandAll();
     }
   }, [activeQuery, triggerExpandAll]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const currentBreakpoint = getBreakpoint(window.innerWidth);
+    setBreakpoint(currentBreakpoint);
+    if (hasExplicitInitialSidebarCollapsed) {
+      const value2 = initialSidebarCollapsed != null ? initialSidebarCollapsed : false;
+      setSidebarCollapsed(value2);
+      try {
+        window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value2));
+      } catch {
+      }
+      return;
+    }
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+      if (stored !== null) {
+        const parsed = JSON.parse(stored);
+        setSidebarCollapsed(Boolean(parsed));
+        return;
+      }
+    } catch {
+    }
+    const defaultCollapsed = currentBreakpoint === "small";
+    setSidebarCollapsed(defaultCollapsed);
+  }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
+  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;
+    const onResize = () => {
+      const nextBreakpoint = getBreakpoint(window.innerWidth);
+      setBreakpoint((prev) => {
+        if (prev === null) {
+          return nextBreakpoint;
+        }
+        if (prev === nextBreakpoint) {
+          return prev;
+        }
+        const autoCollapsed = nextBreakpoint === "small";
+        setSidebarCollapsed(autoCollapsed);
+        persistCollapsed(autoCollapsed);
+        return nextBreakpoint;
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [persistCollapsed]);
   const value = react.useMemo(
     () => ({
       defaultExpanded,
+      expandedItems,
       filteredItems,
       activeQuery,
-      isSidebarCollapsed,
+      areItemsCollapsed,
       setActiveQuery,
       triggerExpandAll,
       resetExpandAll,
-      setIsSidebarCollapsed,
+      setItemsCollapsed,
       activeLink: activeHref,
-      setActiveLink
+      setActiveLink,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
     }),
     [
       defaultExpanded,
+      expandedItems,
       filteredItems,
       activeQuery,
-      isSidebarCollapsed,
+      areItemsCollapsed,
       setActiveQuery,
       triggerExpandAll,
       resetExpandAll,
-      setIsSidebarCollapsed,
+      setItemsCollapsed,
       activeHref,
-      setActiveLink
+      setActiveLink,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });

package/dist/components/sidebar/providers/SidebarProvider.d.ts

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

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

@@ -1,35 +1,68 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, useMemo, useContext } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
 
+const findParentItem = (navItem, items, prevPath) => {
+  var _a;
+  for (const currentItem of items) {
+    let path = prevPath || `.${currentItem.href}`;
+    if ((_a = currentItem.children) == null ? void 0 : _a.some((child) => (child == null ? void 0 : child.href) === navItem)) {
+      return path;
+    } else if (currentItem.children) {
+      path = findParentItem(navItem, currentItem.children, path);
+      if (path) {
+        return path;
+      }
+    }
+  }
+  return "";
+};
 const SidebarContext = createContext({
   defaultExpanded: null,
+  expandedItems: /* @__PURE__ */ new Set(),
   activeQuery: "",
-  isSidebarCollapsed: false,
+  areItemsCollapsed: false,
   setActiveQuery: () => {
   },
   triggerExpandAll: () => {
   },
-  setIsSidebarCollapsed: () => {
+  setItemsCollapsed: () => {
   },
   resetExpandAll: () => {
   },
   activeLink: "",
   setActiveLink: () => {
+  },
+  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,
-  initialCollapsed = false
+  initialCollapsed = false,
+  initialSidebarCollapsed
 }) {
   const [defaultExpanded, setDefaultExpanded] = useState(null);
   const [activeQuery, setActiveQuery] = useState("");
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(initialCollapsed);
+  const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
   const [activeHref, setActiveHref] = useState("");
+  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const [isSidebarCollapsed, setSidebarCollapsed] = useState(
+    initialSidebarCollapsed != null ? initialSidebarCollapsed : false
+  );
+  const [breakpoint, setBreakpoint] = useState(null);
+  const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== void 0;
   const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
   const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
   const setActiveLink = useCallback((href) => setActiveHref(href), []);
+  useEffect(() => {
+    const path = findParentItem(activeHref, items);
+    setExpandedItems(new Set(path.split(".").filter(Boolean)));
+  }, [activeHref]);
   const filteredItems = useMemo(() => {
     return activeQuery ? nestedFiltering(items, {
       keys: ["label", "tags"],
@@ -43,30 +76,95 @@ function SidebarProvider({
       triggerExpandAll();
     }
   }, [activeQuery, triggerExpandAll]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const currentBreakpoint = getBreakpoint(window.innerWidth);
+    setBreakpoint(currentBreakpoint);
+    if (hasExplicitInitialSidebarCollapsed) {
+      const value2 = initialSidebarCollapsed != null ? initialSidebarCollapsed : false;
+      setSidebarCollapsed(value2);
+      try {
+        window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value2));
+      } catch {
+      }
+      return;
+    }
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
+      if (stored !== null) {
+        const parsed = JSON.parse(stored);
+        setSidebarCollapsed(Boolean(parsed));
+        return;
+      }
+    } catch {
+    }
+    const defaultCollapsed = currentBreakpoint === "small";
+    setSidebarCollapsed(defaultCollapsed);
+  }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
+  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;
+    const onResize = () => {
+      const nextBreakpoint = getBreakpoint(window.innerWidth);
+      setBreakpoint((prev) => {
+        if (prev === null) {
+          return nextBreakpoint;
+        }
+        if (prev === nextBreakpoint) {
+          return prev;
+        }
+        const autoCollapsed = nextBreakpoint === "small";
+        setSidebarCollapsed(autoCollapsed);
+        persistCollapsed(autoCollapsed);
+        return nextBreakpoint;
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [persistCollapsed]);
   const value = useMemo(
     () => ({
       defaultExpanded,
+      expandedItems,
       filteredItems,
       activeQuery,
-      isSidebarCollapsed,
+      areItemsCollapsed,
       setActiveQuery,
       triggerExpandAll,
       resetExpandAll,
-      setIsSidebarCollapsed,
+      setItemsCollapsed,
       activeLink: activeHref,
-      setActiveLink
+      setActiveLink,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
     }),
     [
       defaultExpanded,
+      expandedItems,
       filteredItems,
       activeQuery,
-      isSidebarCollapsed,
+      areItemsCollapsed,
       setActiveQuery,
       triggerExpandAll,
       resetExpandAll,
-      setIsSidebarCollapsed,
+      setItemsCollapsed,
       activeHref,
-      setActiveLink
+      setActiveLink,
+      isSidebarCollapsed,
+      handleSidebarCollapseChange
     ]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -33,7 +33,7 @@ function SkeletonLoaderItem({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bar, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.srOnly, children: "Loading\u2026" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "srOnly", children: "Loading\u2026" })
       ]
     }
   );

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -27,7 +27,7 @@ function SkeletonLoaderItem({
       },
       children: [
         /* @__PURE__ */ jsx("span", { className: styles.bar, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: styles.srOnly, children: "Loading\u2026" })
+        /* @__PURE__ */ jsx("span", { className: "srOnly", children: "Loading\u2026" })
       ]
     }
   );

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -35,18 +35,6 @@
   border-radius: inherit;
 }
 
-.srOnly {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 @keyframes shimmer {
   0% {
     background-position: 200% 0;