@dbcdk/react-components 0.0.196 → 0.0.198

package/dist/hooks/useColorScheme.js

@@ -4,9 +4,9 @@ import { COLOR_SCHEME_STORAGE_KEY, isColorScheme } from '../utils/color-scheme.c
 import { readCookie, writeCookie } from '../utils/cookie.utils';
 import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
 
-function persistColorScheme(storageKey, id) {
-  writeLocalStorage(storageKey, id);
-  writeCookie(storageKey, id);
+function persistColorScheme(storageKey, id, persistence) {
+  if (persistence !== "cookie") writeLocalStorage(storageKey, id);
+  if (persistence !== "localStorage") writeCookie(storageKey, id);
 }
 function getDomColorScheme() {
   return document.documentElement.dataset.theme;
@@ -32,43 +32,43 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialColorScheme(storageKey, initialColorScheme) {
+function resolveInitialColorScheme(storageKey, initialColorScheme, persistence) {
   const fromDomAttribute = getDomColorScheme();
   let resolvedColorScheme = isColorScheme(fromDomAttribute) ? fromDomAttribute : initialColorScheme;
-  const fromCookie = readCookie(storageKey);
+  const fromCookie = persistence !== "localStorage" ? readCookie(storageKey) : void 0;
   if (isColorScheme(fromCookie)) {
     resolvedColorScheme = fromCookie;
-  } else {
+  } else if (persistence !== "cookie") {
     const fromStorage = readLocalStorage(storageKey);
     if (isColorScheme(fromStorage)) resolvedColorScheme = fromStorage;
   }
   return resolvedColorScheme;
 }
-function ensureResolved(initialColorScheme, storageKey) {
+function ensureResolved(initialColorScheme, storageKey, persistence) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialColorScheme(storageKey, initialColorScheme);
+  const value = resolveInitialColorScheme(storageKey, initialColorScheme, persistence);
   applyColorScheme(value);
-  persistColorScheme(storageKey, value);
+  persistColorScheme(storageKey, value, persistence);
   currentColorScheme = value;
   notify();
 }
-function switchColorSchemeInternal(storageKey, id) {
+function switchColorSchemeInternal(storageKey, id, persistence) {
   applyColorScheme(id);
-  persistColorScheme(storageKey, id);
+  persistColorScheme(storageKey, id, persistence);
   currentColorScheme = id;
   resolved = true;
   notify();
   return id;
 }
 function useColorScheme(initialColorScheme = "system", options = {}) {
-  const { storageKey = COLOR_SCHEME_STORAGE_KEY } = options;
+  const { storageKey = COLOR_SCHEME_STORAGE_KEY, persistence = "both" } = options;
   useEffect(() => {
-    ensureResolved(initialColorScheme, storageKey);
-  }, [initialColorScheme, storageKey]);
+    ensureResolved(initialColorScheme, storageKey, persistence);
+  }, [initialColorScheme, storageKey, persistence]);
   const colorScheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   function switchColorScheme(id) {
-    return switchColorSchemeInternal(storageKey, id);
+    return switchColorSchemeInternal(storageKey, id, persistence);
   }
   return { colorScheme, switchColorScheme };
 }

package/dist/hooks/useScrollOverflow.cjs

@@ -0,0 +1,71 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const NONE = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+  scrollbarWidth: 0,
+  scrollbarHeight: 0
+};
+const THRESHOLD_PX = 1;
+function measureScrollbars(el) {
+  const style = getComputedStyle(el);
+  const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth) || 0;
+  const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) || 0;
+  return {
+    scrollbarWidth: Math.max(0, el.offsetWidth - el.clientWidth - borderX),
+    scrollbarHeight: Math.max(0, el.offsetHeight - el.clientHeight - borderY)
+  };
+}
+function measure(el, scrollbars) {
+  const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+  return {
+    top: scrollTop > THRESHOLD_PX,
+    bottom: scrollHeight - clientHeight - scrollTop > THRESHOLD_PX,
+    left: scrollLeft > THRESHOLD_PX,
+    right: scrollWidth - clientWidth - scrollLeft > THRESHOLD_PX,
+    ...scrollbars
+  };
+}
+function sameOverflow(a, b) {
+  return Object.keys(a).every((key) => a[key] === b[key]);
+}
+function useScrollOverflow(el) {
+  const [overflow, setOverflow] = react.useState(NONE);
+  react.useLayoutEffect(() => {
+    if (!el) return;
+    let scrollbars = measureScrollbars(el);
+    const update = () => {
+      const next = measure(el, scrollbars);
+      setOverflow((prev) => sameOverflow(prev, next) ? prev : next);
+    };
+    const updateLayout = () => {
+      scrollbars = measureScrollbars(el);
+      update();
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateLayout) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(el);
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(updateLayout) : null;
+    mutationObserver == null ? void 0 : mutationObserver.observe(el, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    };
+  }, [el]);
+  return el ? overflow : NONE;
+}
+
+exports.useScrollOverflow = useScrollOverflow;

package/dist/hooks/useScrollOverflow.d.ts

@@ -0,0 +1,23 @@
+/** Which edges of a scroll container have more content beyond them. */
+export type ScrollOverflow = {
+    top: boolean;
+    bottom: boolean;
+    left: boolean;
+    right: boolean;
+    /**
+     * Space taken by classic (non-overlay) scrollbars, in pixels: the vertical
+     * scrollbar's width and the horizontal one's height. Lets edge hints stay
+     * clear of the scrollbars. 0 for overlay scrollbars.
+     */
+    scrollbarWidth: number;
+    scrollbarHeight: number;
+};
+/**
+ * Tracks which edges of the scroll container `el` hide more content, so the
+ * caller can hint at it (e.g. with edge fades) without restyling the native
+ * scrollbars. Updates on scroll, on resize and when the content changes.
+ * Takes the element rather than a ref so it follows the element when it's
+ * replaced; keep it in state via a callback ref. All edges are `false` on the
+ * server and until the first client measurement.
+ */
+export declare function useScrollOverflow(el: HTMLElement | null): ScrollOverflow;

package/dist/hooks/useScrollOverflow.js

@@ -0,0 +1,69 @@
+'use client';
+import { useState, useLayoutEffect } from 'react';
+
+const NONE = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+  scrollbarWidth: 0,
+  scrollbarHeight: 0
+};
+const THRESHOLD_PX = 1;
+function measureScrollbars(el) {
+  const style = getComputedStyle(el);
+  const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth) || 0;
+  const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) || 0;
+  return {
+    scrollbarWidth: Math.max(0, el.offsetWidth - el.clientWidth - borderX),
+    scrollbarHeight: Math.max(0, el.offsetHeight - el.clientHeight - borderY)
+  };
+}
+function measure(el, scrollbars) {
+  const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+  return {
+    top: scrollTop > THRESHOLD_PX,
+    bottom: scrollHeight - clientHeight - scrollTop > THRESHOLD_PX,
+    left: scrollLeft > THRESHOLD_PX,
+    right: scrollWidth - clientWidth - scrollLeft > THRESHOLD_PX,
+    ...scrollbars
+  };
+}
+function sameOverflow(a, b) {
+  return Object.keys(a).every((key) => a[key] === b[key]);
+}
+function useScrollOverflow(el) {
+  const [overflow, setOverflow] = useState(NONE);
+  useLayoutEffect(() => {
+    if (!el) return;
+    let scrollbars = measureScrollbars(el);
+    const update = () => {
+      const next = measure(el, scrollbars);
+      setOverflow((prev) => sameOverflow(prev, next) ? prev : next);
+    };
+    const updateLayout = () => {
+      scrollbars = measureScrollbars(el);
+      update();
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateLayout) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(el);
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(updateLayout) : null;
+    mutationObserver == null ? void 0 : mutationObserver.observe(el, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    };
+  }, [el]);
+  return el ? overflow : NONE;
+}
+
+export { useScrollOverflow };

package/dist/hooks/useTableSettings.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var react = require('react');
+var table_utils = require('../components/table/table.utils');
 var tableSettings_utils = require('../components/table/tableSettings.utils');
 var localStorage_utils = require('../utils/localStorage.utils');
 
@@ -27,7 +28,7 @@ const localStorageTableSettingsStorage = {
 function useTableSettings({
   storageKey,
   tableColumns,
-  defaultViewMode = "compact",
+  defaultViewMode = table_utils.DEFAULT_VIEW_MODE,
   defaultVisibleColumnIds,
   defaultStriped = false,
   storage = localStorageTableSettingsStorage

package/dist/hooks/useTableSettings.d.ts

@@ -13,6 +13,7 @@ export declare const localStorageTableSettingsStorage: TableSettingsStorage;
 export interface UseTableSettingsOptions<T = unknown> {
     storageKey: string;
     tableColumns?: ReadonlyArray<ColumnItem<T> | TableSettingsColumn>;
+    /** View mode until the user picks one. Defaults to `'wrapped'`; pass `'compact'` for even row heights. */
     defaultViewMode?: ViewMode;
     defaultVisibleColumnIds?: string[];
     defaultStriped?: boolean;

package/dist/hooks/useTableSettings.js

@@ -1,5 +1,6 @@
 'use client';
 import { useMemo, useState, useEffect, useCallback } from 'react';
+import { DEFAULT_VIEW_MODE } from '../components/table/table.utils';
 import { isSettingsColumnHidden, getSettingsColumnId } from '../components/table/tableSettings.utils';
 import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
 
@@ -25,7 +26,7 @@ const localStorageTableSettingsStorage = {
 function useTableSettings({
   storageKey,
   tableColumns,
-  defaultViewMode = "compact",
+  defaultViewMode = DEFAULT_VIEW_MODE,
   defaultVisibleColumnIds,
   defaultStriped = false,
   storage = localStorageTableSettingsStorage

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

@@ -4,12 +4,14 @@ 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
+     * 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/index.css

@@ -56,6 +56,7 @@
 @import './components/pagination/Pagination.module.css';
 @import './components/panel/Panel.module.css';
 @import './components/popover/Popover.module.css';
+@import './components/scroll-fade/ScrollFade.module.css';
 @import './components/search-box/SearchBox.module.css';
 @import './components/section-label/SectionLabel.module.css';
 @import './components/segmented-progress-bar/SegmentedProgressBar.module.css';

package/dist/utils/refs.utils.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+
+exports.mergeRefs = mergeRefs;

package/dist/utils/refs.utils.d.ts

@@ -0,0 +1,7 @@
+import type { Ref } from 'react';
+/**
+ * Combines refs into one callback ref. Returns a new function on every call,
+ * so memoize it (e.g. with `useMemo`) when a stable ref matters, such as when
+ * one of the refs sets state.
+ */
+export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void;

package/dist/utils/refs.utils.js

@@ -0,0 +1,11 @@
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+
+export { mergeRefs };

package/package.json

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