@dbcdk/react-components 0.0.195 → 0.0.196

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.d.ts

@@ -3,6 +3,12 @@ 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 cookie + localStorage entry. 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;
 }
 export declare function useTheme(options?: UseThemeOptions): {

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);
 
   /* ==========================================================================

package/dist/styles.css

@@ -1,476 +1 @@
-@import './css-helper-classes/spacing.css';
-@import './css-helper-classes/flex.css';
-@import './css-helper-classes/typography.css';
-@import './css-helper-classes/scrollbar.css';
-
-* {
-  font-family: var(--font-family);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  color: var(--color-fg-default);
-  background-color: var(--color-bg-page);
-  font-size: var(--font-size-sm);
-  margin: 0;
-}
-
-@media (min-height: 500px) {
-  body {
-    overflow-y: scroll;
-  }
-}
-
-h1 {
-  font-size: var(--font-size-xl);
-}
-
-h2 {
-  font-size: var(--font-size-lg);
-}
-
-h3 {
-  font-size: var(--font-size-md);
-}
-
-h4 {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-body.dbc-app {
-  max-width: 1600px;
-}
-
-.dbc-overflow-auto {
-  overflow: auto;
-}
-
-.dbc-font-mono {
-  font-family: monospace;
-}
-
-.dbc-pulse {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-round);
-  color: var(--color-primary-500, var(--color-brand));
-  transform-origin: center;
-}
-
-.dbc-pulse::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  animation: dbc-pulse 1.8s ease-out infinite;
-  pointer-events: none;
-}
-
-@keyframes dbc-pulse {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 0.55;
-  }
-  60% {
-    opacity: 0.15;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dbc-pulse::after {
-    animation: none;
-  }
-}
-
-.dbc-table {
-  --card-label-width: 260px;
-
-  border-collapse: collapse;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-/* Default compact table cell padding.
-   This applies to the first row too, avoiding uneven first-row spacing. */
-.dbc-table th,
-.dbc-table td {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-xxs);
-  vertical-align: baseline;
-}
-
-.dbc-table th {
-  white-space: nowrap;
-  text-align: left;
-  max-width: var(--card-label-width);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--font-size-table-header);
-  line-height: var(--line-height-table-header);
-  color: var(--table-header-fg);
-  letter-spacing: var(--letter-spacing-wide);
-  font-weight: normal;
-  /* A bit more breathing room between the label and its value than the
-     shared th/td padding-inline gives on its own. */
-  padding-right: var(--spacing-xs);
-}
-
-.dbc-table td {
-  min-width: 0;
-  margin: 0;
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-default);
-  font-weight: var(--font-weight-default);
-  word-break: break-word;
-}
-
-/* Larger vertical padding (default is --spacing-xxs) */
-.dbc-table--md th,
-.dbc-table--md td {
-  padding-block: var(--spacing-xs);
-}
-
-/* --hover can go on the <table> (every row hovers) or directly on a <tr>
-   (opt in only specific rows, leaving the rest unaffected). */
-.dbc-table--hover tbody tr:hover,
-tr.dbc-table--hover:hover {
-  background-color: var(--color-bg-contextual);
-  cursor: pointer;
-}
-
-/* Round the hovered row's leading/trailing edge (tr itself can't take a
-   border-radius reliably in table layout) — same token as Menu.item's
-   hover background. */
-.dbc-table--hover tbody tr:hover th:first-child,
-.dbc-table--hover tbody tr:hover td:first-child,
-tr.dbc-table--hover:hover th:first-child,
-tr.dbc-table--hover:hover td:first-child {
-  border-top-left-radius: var(--border-radius-md);
-  border-bottom-left-radius: var(--border-radius-md);
-}
-
-.dbc-table--hover tbody tr:hover th:last-child,
-.dbc-table--hover tbody tr:hover td:last-child,
-tr.dbc-table--hover:hover th:last-child,
-tr.dbc-table--hover:hover td:last-child {
-  border-top-right-radius: var(--border-radius-md);
-  border-bottom-right-radius: var(--border-radius-md);
-}
-
-.dbc-table--clickableRow tbody tr:hover {
-  background-color: var(--color-bg-contextual);
-  cursor: pointer;
-}
-
-.dbc-table--striped tbody tr:nth-child(even) {
-  background-color: var(--table-row-bg-alt);
-}
-
-.dbc-table--striped.dbc-table--hover tbody tr:hover,
-.dbc-table--striped tr.dbc-table--hover:hover {
-  background-color: var(--table-row-bg-hover);
-}
-
-.dbc-full-width {
-  width: 100%;
-}
-
-/* Bordered table */
-
-.dbc-table--bordered {
-  width: auto;
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-collapse: collapse;
-}
-
-.dbc-table--bordered th,
-.dbc-table--bordered td {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  padding: var(--spacing-xs) var(--spacing-sm);
-}
-
-.dbc-table--bordered thead th {
-  background-color: var(--color-bg-surface);
-}
-
-/* Alignment modifier */
-
-.dbc-table--align-middle,
-.dbc-table--align-middle th,
-.dbc-table--align-middle td {
-  vertical-align: middle;
-}
-
-/* Per-cell text alignment. Apply directly to a th/td to right-align that
-   column's header/content. */
-.dbc-table th.dbc-table--align-right,
-.dbc-table td.dbc-table--align-right {
-  text-align: right;
-}
-
-/* ==========================================================================
-   Text / utility classes
-   ========================================================================== */
-
-.dbc-highlight {
-  color: var(--color-highlight-fg, inherit);
-  background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
-  font-family: inherit;
-  font-size: inherit;
-  border-radius: var(--border-radius-sm);
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.dbc-code {
-  color: var(--color-code-fg, inherit);
-  background-color: var(--color-code-bg, var(--color-bg-contextual));
-  border-radius: var(--border-radius-sm);
-  padding-inline: var(--spacing-xxs);
-  font-family: var(--font-family-mono);
-  font-size: 0.9em;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-}
-
-.dbc-muted-text {
-  color: var(--color-fg-subtle);
-}
-
-.dbc-tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
-
-.dbc-sm-text {
-  font-size: var(--font-size-sm);
-}
-
-.dbc-md-text {
-  font-size: var(--font-size-md);
-}
-
-.dbc-lg-text {
-  font-size: var(--font-size-lg);
-}
-
-.dbc-medium-text {
-  font-weight: var(--font-weight-medium);
-}
-
-.dbc-bold-text {
-  font-weight: var(--font-weight-bold);
-}
-
-.dbc-center-text {
-  text-align: center;
-}
-
-/* ==========================================================================
-   Layout utilities
-   ========================================================================== */
-
-@media screen and (min-height: 400px) {
-  body.dbc-app {
-    overflow: hidden;
-  }
-}
-
-.grow-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-}
-
-.hideScrollBar {
-  scrollbar-width: none;
-}
-
-.hideScrollBar::-webkit-scrollbar {
-  display: none;
-}
-
-.fitContent {
-  white-space: nowrap !important;
-  width: 1% !important;
-  min-width: 1% !important;
-  max-width: 1% !important;
-}
-
-.dbc-full-height {
-  height: 100%;
-}
-
-.dbc-offset-height {
-  transform: translateY(-8vh);
-}
-
-/* ==========================================================================
-   Scrollbars
-   ========================================================================== */
-
-/* Firefox equivalent of the thin, muted webkit scrollbar below. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-strong) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--color-border-strong);
-  border-radius: 4px;
-  border: 2px solid var(--color-bg-surface);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-fg-subtle);
-}
-
-/* ==========================================================================
-   Animations
-   ========================================================================== */
-
-.animate--expand {
-  animation: expand 0.15s ease-in-out forwards;
-}
-
-.animate--collapse {
-  animation: collapse 0.15s ease-in-out forwards;
-}
-
-.spin {
-  display: inline-block;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes expand {
-  0% {
-    max-height: 0;
-  }
-
-  100% {
-    max-height: 100vh;
-  }
-}
-
-@keyframes collapse {
-  0% {
-    max-height: 100vh;
-  }
-
-  100% {
-    max-height: 0;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* ==========================================================================
-   Accessibility
-   ========================================================================== */
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-/* ==========================================================================
-   Print
-   ========================================================================== */
-
-@media print {
-  /* --- What to print (only content explicitly opted in via
-     printSelection()'s NOT_PRINTABLE_ATTRIBUTE gate, or a Modal) --- */
-  body[data-not-printable='true'] > *:not([data-not-printable='false']):not([role='dialog']) {
-    display: none !important;
-  }
-  body [data-not-printable='true'] {
-    display: none !important;
-  }
-
-  /* --- Page setup --- */
-  @page {
-    size: A4;
-    margin: 12mm;
-  }
-
-  html,
-  body {
-    height: auto !important; /* avoid 100vh/100% truncation */
-    overflow: visible !important; /* allow pagination */
-  }
-  * {
-    overflow: visible !important;
-    transform: none !important;
-  }
-
-  /* Modal (components/overlay/modal/Modal) portals a position:fixed,
-     scroll-clipped overlay directly onto body, wrapping the actual
-     `role="dialog"` element. It has no class or attribute of its own to
-     target, but it's always body's direct child that contains the dialog,
-     so :has() reaches it. */
-  body > div:has([role='dialog']) {
-    position: static !important;
-    inset: auto !important;
-    overflow: visible !important;
-    padding: 0 !important;
-  }
-
-  [role='dialog'] {
-    position: static !important;
-    width: 100% !important;
-    max-width: none !important;
-    height: auto !important;
-    max-height: none !important;
-    overflow: visible !important;
-    transform: none !important;
-    contain: none !important;
-    box-shadow: none !important;
-  }
-
-  /* --- Page breaks --- */
-  /* Use this class on any element that should start on a new page. */
-  .dbc-page-break-before:not(:first-of-type) {
-    margin-top: 0 !important;
-    break-before: page !important;
-    page-break-before: always !important; /* legacy */
-  }
-  /* Utility to discourage breaking inside certain blocks. */
-  .dbc-avoid-break,
-  [role='dialog'] {
-    break-inside: auto !important;
-    page-break-inside: auto !important;
-  }
-}
+@import './styles/styles.css';

package/dist/tanstack-virtual.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var TanstackJsonViewer = require('./components/json-viewer/TanstackJsonViewer');
+
+
+
+Object.keys(TanstackJsonViewer).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return TanstackJsonViewer[k]; }
+	});
+});

package/dist/tanstack-virtual.d.ts

@@ -0,0 +1 @@
+export * from './components/json-viewer/TanstackJsonViewer';

package/dist/tanstack-virtual.js

@@ -0,0 +1 @@
+export * from './components/json-viewer/TanstackJsonViewer';