@dbcdk/react-components 0.0.195 → 0.0.197

package/dist/hooks/useTableSettings.d.ts

@@ -1,26 +1,29 @@
-import { ColumnDef } from '@tanstack/react-table';
-export type ViewMode = 'compact' | 'wrapped';
+import type { ColumnItem, TableSettingsColumn, ViewMode } from '../components/table/Table.types';
+export type { ViewMode } from '../components/table/Table.types';
 export type TableSettingsState = {
     viewMode: ViewMode;
     visibleColumnIds: string[];
+    striped: boolean;
 };
 export type TableSettingsStorage = {
     get: (key: string) => TableSettingsState | undefined;
     set: (key: string, next: TableSettingsState) => void;
 };
 export declare const localStorageTableSettingsStorage: TableSettingsStorage;
-interface UseTableSettingsOptions {
+export interface UseTableSettingsOptions<T = unknown> {
     storageKey: string;
-    tableColumns?: ColumnDef<any>[];
+    tableColumns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
     defaultViewMode?: ViewMode;
     defaultVisibleColumnIds?: string[];
+    defaultStriped?: boolean;
     storage?: TableSettingsStorage;
 }
-export declare function useTableSettings({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, storage, }: UseTableSettingsOptions): {
+export declare function useTableSettings<T = unknown>({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, defaultStriped, storage, }: UseTableSettingsOptions<T>): {
     viewMode: ViewMode;
     toggleViewMode: () => void;
     setViewMode: (mode: ViewMode) => void;
     visibleColumnIds: string[];
     setVisibleColumnIds: (ids: string[]) => void;
+    striped: boolean;
+    setStriped: (nextStriped: boolean) => void;
 };
-export {};

package/dist/hooks/useTableSettings.js

@@ -1,18 +1,17 @@
 'use client';
 import { useMemo, useState, useEffect, useCallback } from 'react';
+import { isSettingsColumnHidden, getSettingsColumnId } from '../components/table/tableSettings.utils';
 import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
 
 function getDefaultVisibleIds(tableColumns) {
   var _a;
-  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
-    var _a2;
-    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
-  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => !isSettingsColumnHidden(c)).map(getSettingsColumnId).filter((id) => typeof id === "string" && id.length > 0)) != null ? _a : [];
 }
 function mergeDefaults(stored, defaults) {
   const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
   const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
-  return { viewMode, visibleColumnIds };
+  const striped = typeof (stored == null ? void 0 : stored.striped) === "boolean" ? stored.striped : defaults.striped;
+  return { viewMode, visibleColumnIds, striped };
 }
 const localStorageTableSettingsStorage = {
   get: (key) => {
@@ -28,19 +27,23 @@ function useTableSettings({
   tableColumns,
   defaultViewMode = "compact",
   defaultVisibleColumnIds,
+  defaultStriped = false,
   storage = localStorageTableSettingsStorage
 }) {
   const defaults = useMemo(() => {
     return {
       viewMode: defaultViewMode,
-      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns),
+      striped: defaultStriped
     };
-  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  }, [defaultViewMode, defaultVisibleColumnIds, defaultStriped, tableColumns]);
   const [state, setState] = useState(defaults);
   useEffect(() => {
     const stored = storage.get(storageKey);
     const next = mergeDefaults(stored, defaults);
-    setState(next);
+    setState(
+      (prev) => prev.viewMode === next.viewMode && prev.striped === next.striped && prev.visibleColumnIds.length === next.visibleColumnIds.length && prev.visibleColumnIds.every((id, index) => id === next.visibleColumnIds[index]) ? prev : next
+    );
   }, [storageKey, storage, defaults]);
   const persist = useCallback(
     (next) => storage.set(storageKey, next),
@@ -75,12 +78,25 @@ function useTableSettings({
     },
     [persist]
   );
+  const setStriped = useCallback(
+    (nextStriped) => {
+      setState((prev) => {
+        if (prev.striped === nextStriped) return prev;
+        const next = { ...prev, striped: nextStriped };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
   return {
     viewMode: state.viewMode,
     toggleViewMode,
     setViewMode,
     visibleColumnIds: state.visibleColumnIds,
-    setVisibleColumnIds
+    setVisibleColumnIds,
+    striped: state.striped,
+    setStriped
   };
 }
 

package/dist/hooks/useTheme.cjs

@@ -7,9 +7,9 @@ var cookie_utils = require('../utils/cookie.utils');
 var localStorage_utils = require('../utils/localStorage.utils');
 var theme_constants = require('../utils/theme.constants');
 
-function persistTheme(storageKey, id) {
-  localStorage_utils.writeLocalStorage(storageKey, id);
-  cookie_utils.writeCookie(storageKey, id);
+function persistTheme(storageKey, id, persistence) {
+  if (persistence !== "cookie") localStorage_utils.writeLocalStorage(storageKey, id);
+  if (persistence !== "localStorage") cookie_utils.writeCookie(storageKey, id);
 }
 function getDomTheme() {
   return document.documentElement.dataset.productTheme;
@@ -40,23 +40,23 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(storageKey, defaultTheme) {
+function resolveInitialTheme(storageKey, defaultTheme, persistence) {
   const fromDom = getDomTheme();
   if (fromDom) return fromDom;
-  const fromCookie = cookie_utils.readCookie(storageKey);
+  const fromCookie = persistence !== "localStorage" ? cookie_utils.readCookie(storageKey) : void 0;
   if (fromCookie) return fromCookie;
-  const fromStorage = localStorage_utils.readLocalStorage(storageKey);
+  const fromStorage = persistence !== "cookie" ? localStorage_utils.readLocalStorage(storageKey) : void 0;
   if (fromStorage) return fromStorage;
   return defaultTheme != null ? defaultTheme : null;
 }
-function ensureResolved(defaultTheme, storageKey) {
+function ensureResolved(defaultTheme, storageKey, persistence) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(storageKey, defaultTheme);
+  const value = resolveInitialTheme(storageKey, defaultTheme, persistence);
   currentTheme = value;
   if (value) {
     applyTheme(value);
-    persistTheme(storageKey, value);
+    persistTheme(storageKey, value, persistence);
   }
   notify();
 }
@@ -72,22 +72,22 @@ function ensureColorSchemeObserver() {
     attributeFilter: ["data-theme"]
   });
 }
-function switchThemeInternal(storageKey, id) {
+function switchThemeInternal(storageKey, id, persistence) {
   applyTheme(id);
-  persistTheme(storageKey, id);
+  persistTheme(storageKey, id, persistence);
   currentTheme = id;
   resolved = true;
   notify();
 }
 function useTheme(options = {}) {
-  const { defaultTheme, storageKey = theme_constants.THEME_STORAGE_KEY } = options;
+  const { defaultTheme, storageKey = theme_constants.THEME_STORAGE_KEY, persistence = "both" } = options;
   react.useEffect(() => {
     ensureColorSchemeObserver();
-    ensureResolved(defaultTheme, storageKey);
-  }, [defaultTheme, storageKey]);
+    ensureResolved(defaultTheme, storageKey, persistence);
+  }, [defaultTheme, storageKey, persistence]);
   const theme = react.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   function switchTheme(id) {
-    switchThemeInternal(storageKey, id);
+    switchThemeInternal(storageKey, id, persistence);
   }
   return { theme, switchTheme };
 }

package/dist/hooks/useTheme.d.ts

@@ -3,7 +3,15 @@ export type { ThemeId };
 export interface UseThemeOptions {
     /** The theme the app should fall back to when nothing is stored yet. */
     defaultTheme?: ThemeId;
+    /**
+     * Storage key used for the selected persistence store(s). Defaults to a
+     * shared key, so apps that run on the same origin (e.g. multiple products
+     * under one domain) should each pass their own value here — otherwise
+     * they'll unintentionally read and overwrite each other's persisted theme.
+     */
     storageKey?: string;
+    /** Where to read and persist the theme. Defaults to both stores. */
+    persistence?: 'both' | 'cookie' | 'localStorage';
 }
 export declare function useTheme(options?: UseThemeOptions): {
     theme: ThemeId | null;

package/dist/hooks/useTheme.js

@@ -5,9 +5,9 @@ import { readCookie, writeCookie } from '../utils/cookie.utils';
 import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
 import { THEME_STORAGE_KEY } from '../utils/theme.constants';
 
-function persistTheme(storageKey, id) {
-  writeLocalStorage(storageKey, id);
-  writeCookie(storageKey, id);
+function persistTheme(storageKey, id, persistence) {
+  if (persistence !== "cookie") writeLocalStorage(storageKey, id);
+  if (persistence !== "localStorage") writeCookie(storageKey, id);
 }
 function getDomTheme() {
   return document.documentElement.dataset.productTheme;
@@ -38,23 +38,23 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(storageKey, defaultTheme) {
+function resolveInitialTheme(storageKey, defaultTheme, persistence) {
   const fromDom = getDomTheme();
   if (fromDom) return fromDom;
-  const fromCookie = readCookie(storageKey);
+  const fromCookie = persistence !== "localStorage" ? readCookie(storageKey) : void 0;
   if (fromCookie) return fromCookie;
-  const fromStorage = readLocalStorage(storageKey);
+  const fromStorage = persistence !== "cookie" ? readLocalStorage(storageKey) : void 0;
   if (fromStorage) return fromStorage;
   return defaultTheme != null ? defaultTheme : null;
 }
-function ensureResolved(defaultTheme, storageKey) {
+function ensureResolved(defaultTheme, storageKey, persistence) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(storageKey, defaultTheme);
+  const value = resolveInitialTheme(storageKey, defaultTheme, persistence);
   currentTheme = value;
   if (value) {
     applyTheme(value);
-    persistTheme(storageKey, value);
+    persistTheme(storageKey, value, persistence);
   }
   notify();
 }
@@ -70,22 +70,22 @@ function ensureColorSchemeObserver() {
     attributeFilter: ["data-theme"]
   });
 }
-function switchThemeInternal(storageKey, id) {
+function switchThemeInternal(storageKey, id, persistence) {
   applyTheme(id);
-  persistTheme(storageKey, id);
+  persistTheme(storageKey, id, persistence);
   currentTheme = id;
   resolved = true;
   notify();
 }
 function useTheme(options = {}) {
-  const { defaultTheme, storageKey = THEME_STORAGE_KEY } = options;
+  const { defaultTheme, storageKey = THEME_STORAGE_KEY, persistence = "both" } = options;
   useEffect(() => {
     ensureColorSchemeObserver();
-    ensureResolved(defaultTheme, storageKey);
-  }, [defaultTheme, storageKey]);
+    ensureResolved(defaultTheme, storageKey, persistence);
+  }, [defaultTheme, storageKey, persistence]);
   const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   function switchTheme(id) {
-    switchThemeInternal(storageKey, id);
+    switchThemeInternal(storageKey, id, persistence);
   }
   return { theme, switchTheme };
 }

package/dist/styles/styles.css

@@ -172,12 +172,16 @@ tr.dbc-table--hover:hover td:last-child {
   cursor: pointer;
 }
 
-.dbc-table--striped tbody tr:nth-child(even) {
+.dbc-table--striped tbody tr:nth-child(even) > th,
+.dbc-table--striped tbody tr:nth-child(even) > td {
   background-color: var(--table-row-bg-alt);
+  border-block-end-color: transparent;
 }
 
-.dbc-table--striped.dbc-table--hover tbody tr:hover,
-.dbc-table--striped tr.dbc-table--hover:hover {
+.dbc-table--striped.dbc-table--hover tbody tr:hover > th,
+.dbc-table--striped.dbc-table--hover tbody tr:hover > td,
+.dbc-table--striped tr.dbc-table--hover:hover > th,
+.dbc-table--striped tr.dbc-table--hover:hover > td {
   background-color: var(--table-row-bg-hover);
 }
 

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

@@ -268,7 +268,7 @@ html {
   --table-border-subtle: light-dark(#eef1f4, rgba(255, 255, 255, 0.08));
   --table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));
 
-  --table-header-fg: var(--color-fg-subtle);
+  --table-header-fg: var(--color-fg-muted);
   --table-cell-fg: var(--color-fg-default);
 
   /* ==========================================================================