@dbcdk/react-components 0.0.197 → 0.0.198

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