@dbcdk/react-components 0.0.211 → 0.0.212

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

@@ -9,6 +9,10 @@
   background-clip: padding-box;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-xs);
+  /* Indent content, keeping every row's background and hit area at full width. */
+  padding-inline-start: calc(
+    var(--spacing-xs) + var(--sidebar-item-depth, 0) * (var(--icon-size-sm) + var(--spacing-sm))
+  );
   text-decoration: none;
   color: var(--color-fg-muted);
   cursor: pointer;
@@ -82,6 +86,11 @@
   min-inline-size: var(--sidebar-item-icon-width, var(--icon-size-sm));
 }
 
+/* Nested rows do not reserve a second icon gutter when they have no icon. */
+.icon:empty {
+  display: var(--sidebar-empty-icon-display, flex);
+}
+
 .icon svg,
 .suffixIcon svg {
   inline-size: var(--icon-size-sm);

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

@@ -17,12 +17,12 @@ 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") {
@@ -36,7 +36,8 @@ function SidebarItems({ activeLink }) {
           iconWidth: item.iconWidth,
           truncateLabel: item.truncateLabel,
           enabled: item.enabled,
-          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+          depth,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth + 1))
         },
         key
       );
@@ -53,6 +54,7 @@ function SidebarItems({ activeLink }) {
         iconWidth,
         truncateLabel,
         enabled: item.enabled,
+        depth,
         external: item.external
       },
       key

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

@@ -11,12 +11,12 @@ 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") {
@@ -30,7 +30,8 @@ function SidebarItems({ activeLink }) {
           iconWidth: item.iconWidth,
           truncateLabel: item.truncateLabel,
           enabled: item.enabled,
-          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
+          depth,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`, depth + 1))
         },
         key
       );
@@ -47,6 +48,7 @@ function SidebarItems({ activeLink }) {
         iconWidth,
         truncateLabel,
         enabled: item.enabled,
+        depth,
         external: item.external
       },
       key

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.211",
+  "version": "0.0.212",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",