@dbcdk/react-components 0.0.210 → 0.0.212

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

@@ -17,36 +17,27 @@ function SidebarItems({ activeLink }) {
   react.useEffect(() => {
     setActiveLink(activeLink != null ? activeLink : "");
   }, [activeLink, setActiveLink]);
-  const renderItem = (item, key) => {
+  const renderItem = (item, key, depth = 0) => {
     var _a, _b;
     if (item.type === "group") {
-      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
+      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth)) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
-        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth))
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsxRuntime.jsx(
         ExpandableSidebarItem.ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          depth,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth + 1))
         },
         key
       );
@@ -61,7 +52,10 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        depth,
+        external: item.external
       },
       key
     );

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

@@ -11,36 +11,27 @@ function SidebarItems({ activeLink }) {
   useEffect(() => {
     setActiveLink(activeLink != null ? activeLink : "");
   }, [activeLink, setActiveLink]);
-  const renderItem = (item, key) => {
+  const renderItem = (item, key, depth = 0) => {
     var _a, _b;
     if (item.type === "group") {
-      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`)) : /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
+      return isSidebarCollapsed ? (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth)) : /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
         /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
-        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+        (_b = item.children) == null ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth))
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsx(
         ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          depth,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth + 1))
         },
         key
       );
@@ -55,7 +46,10 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        depth,
+        external: item.external
       },
       key
     );

package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css

@@ -1,7 +1,6 @@
 .group {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xxs);
   margin-top: var(--spacing-xs);
 }
 

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

@@ -17,10 +17,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -66,6 +66,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -73,8 +74,10 @@ function SidebarProvider({
   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 [activeHref, setActiveHref] = react.useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = react.useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = react.useRef(items);
   react.useEffect(() => {
     itemsRef.current = items;
@@ -121,8 +124,7 @@ function SidebarProvider({
   );
   react.useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

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

@@ -24,11 +24,12 @@ export type SidebarContextValue = {
 type SidebarProviderProps = {
     children: React.ReactNode;
     items: NavBarItem[];
+    initialActiveLink?: string;
     initialQuery?: string | null;
     initialCollapsed?: boolean;
     initialCollapseChildren?: boolean;
     initialSidebarCollapsed?: boolean;
 };
-export declare function SidebarProvider({ children, items, initialQuery, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function SidebarProvider({ children, items, initialQuery, initialActiveLink, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
 export declare function useSidebar(): SidebarContextValue;
 export {};

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

@@ -15,10 +15,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -64,6 +64,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -71,8 +72,10 @@ function SidebarProvider({
   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 [activeHref, setActiveHref] = useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = useRef(items);
   useEffect(() => {
     itemsRef.current = items;
@@ -119,8 +122,7 @@ function SidebarProvider({
   );
   useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

package/dist/components/theme-script/ThemeScript.cjs

@@ -50,7 +50,7 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey, colorSche
 })();`;
 }
 function ThemeScript({
-  defaultColorScheme = "system",
+  defaultColorScheme = "light",
   defaultTheme,
   storageKey = theme_constants.THEME_STORAGE_KEY,
   colorSchemeStorageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY

package/dist/components/theme-script/ThemeScript.d.ts

@@ -1,7 +1,7 @@
 import type { ThemeId } from '../../styles/themes/types';
 import type { ColorScheme } from '../../utils/color-scheme.constants';
 export interface ThemeScriptProps {
-    /** Color scheme applied when nothing is stored yet. Defaults to 'system'. */
+    /** Color scheme applied when nothing is stored yet. Defaults to 'light'. */
     defaultColorScheme?: ColorScheme;
     /**
      * The product theme the app already loads via a normal static import. Omit

package/dist/components/theme-script/ThemeScript.js

@@ -48,7 +48,7 @@ function buildInitScript(defaultColorScheme, defaultTheme, storageKey, colorSche
 })();`;
 }
 function ThemeScript({
-  defaultColorScheme = "system",
+  defaultColorScheme = "light",
   defaultTheme,
   storageKey = THEME_STORAGE_KEY,
   colorSchemeStorageKey = COLOR_SCHEME_STORAGE_KEY

package/dist/hooks/useColorScheme.cjs

@@ -63,7 +63,7 @@ function switchColorSchemeInternal(storageKey, id, persistence) {
   notify();
   return id;
 }
-function useColorScheme(initialColorScheme = "system", options = {}) {
+function useColorScheme(initialColorScheme = "light", options = {}) {
   const { storageKey = colorScheme_constants.COLOR_SCHEME_STORAGE_KEY, persistence = "both" } = options;
   react.useEffect(() => {
     ensureResolved(initialColorScheme, storageKey, persistence);

package/dist/hooks/useColorScheme.js

@@ -61,7 +61,7 @@ function switchColorSchemeInternal(storageKey, id, persistence) {
   notify();
   return id;
 }
-function useColorScheme(initialColorScheme = "system", options = {}) {
+function useColorScheme(initialColorScheme = "light", options = {}) {
   const { storageKey = COLOR_SCHEME_STORAGE_KEY, persistence = "both" } = options;
   useEffect(() => {
     ensureResolved(initialColorScheme, storageKey, persistence);

package/dist/hooks/useGetActiveTheme.cjs

@@ -7,7 +7,7 @@ var useTheme = require('./useTheme');
 function useGetActiveTheme(options = {}) {
   const { storageKey, colorSchemeStorageKey } = options;
   const { theme } = useTheme.useTheme({ storageKey });
-  const { colorScheme } = useColorScheme.useColorScheme("system", { storageKey: colorSchemeStorageKey });
+  const { colorScheme } = useColorScheme.useColorScheme(void 0, { storageKey: colorSchemeStorageKey });
   const themeKey = theme && colorScheme ? `${theme}-${colorScheme}` : null;
   return { theme, colorScheme, themeKey };
 }

package/dist/hooks/useGetActiveTheme.js

@@ -5,7 +5,7 @@ import { useTheme } from './useTheme';
 function useGetActiveTheme(options = {}) {
   const { storageKey, colorSchemeStorageKey } = options;
   const { theme } = useTheme({ storageKey });
-  const { colorScheme } = useColorScheme("system", { storageKey: colorSchemeStorageKey });
+  const { colorScheme } = useColorScheme(void 0, { storageKey: colorSchemeStorageKey });
   const themeKey = theme && colorScheme ? `${theme}-${colorScheme}` : null;
   return { theme, colorScheme, themeKey };
 }

package/dist/styles/themes/dbc/colors.css

@@ -3,11 +3,11 @@ html {
    * PRIMITIVES (THEME-DEPENDENT)
    * ======================================================================= */
 
-  color-scheme: light dark;
+  color-scheme: light;
 
-  /*@media (prefers-color-scheme: dark) {*/
-  /*  color-scheme: dark;*/
-  /*}*/
+  &[data-theme='system'] {
+    color-scheme: light dark;
+  }
 
   &[data-theme='dark'] {
     color-scheme: dark;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.210",
+  "version": "0.0.212",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",