@dbcdk/react-components 0.0.197 → 0.0.199

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var react = require('react');
 var Menu = require('../../components/menu/Menu');
 var Popover = require('../../components/popover/Popover');
+var ScrollFade = require('../../components/scroll-fade/ScrollFade');
 var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
@@ -38,7 +39,6 @@ function XmlViewer({
   borderless = false
 }) {
   const tokens = react.useMemo(() => tokenizeXml.tokenizeXml(xml), [xml]);
-  const codeRef = react.useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -57,25 +57,16 @@ function XmlViewer({
   const handleCopy = () => {
     void clipboard_utils.copyToClipboard(xml);
   };
-  const handleDoubleClick = () => {
-    const el = codeRef.current;
-    const selection = typeof window !== "undefined" ? window.getSelection() : null;
-    if (!el || !selection) return;
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : ""].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbar, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            className: styles__default.default.toolbar,
+            className: styles__default.default.toolbarButton,
             "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Popover.Popover,
@@ -156,10 +147,11 @@ function XmlViewer({
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollFade.ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxRuntime.jsxs(
           "pre",
           {
+            ref: scrollRef,
             className: [
               styles__default.default.codePane,
               styles__default.default[size],
@@ -167,13 +159,15 @@ function XmlViewer({
               deleted ? styles__default.default.deleted : ""
             ].filter(Boolean).join(" "),
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
-              const tokenClassName = TOKEN_CLASS[token.type];
-              return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
-            }) })
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+                const tokenClassName = TOKEN_CLASS[token.type];
+                return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+              }) })
+            ]
           }
-        )
+        ) })
       ]
     }
   );

package/dist/components/xml-viewer/XmlViewer.d.ts

@@ -16,7 +16,7 @@ export interface XmlViewerProps {
      */
     storageKey?: string;
     /**
-     * Removes the outer border, shadow and corner radius, so the viewer sits
+     * Removes the outer border, shadow, corner radius and padding, so the viewer sits
      * flush in a container that already provides its own framing (e.g. a
      * modal).
      */

package/dist/components/xml-viewer/XmlViewer.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
-import { useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
+import { ScrollFade } from '../../components/scroll-fade/ScrollFade';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
@@ -32,7 +33,6 @@ function XmlViewer({
   borderless = false
 }) {
   const tokens = useMemo(() => tokenizeXml(xml), [xml]);
-  const codeRef = useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -51,25 +51,16 @@ function XmlViewer({
   const handleCopy = () => {
     void copyToClipboard(xml);
   };
-  const handleDoubleClick = () => {
-    const el = codeRef.current;
-    const selection = typeof window !== "undefined" ? window.getSelection() : null;
-    if (!el || !selection) return;
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  };
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: [styles.viewer, borderless ? styles.borderless : ""].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: /* @__PURE__ */ jsx(
+          "span",
           {
-            className: styles.toolbar,
+            className: styles.toolbarButton,
             "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
             children: /* @__PURE__ */ jsx(
               Popover,
@@ -150,10 +141,11 @@ function XmlViewer({
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx(ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxs(
           "pre",
           {
+            ref: scrollRef,
             className: [
               styles.codePane,
               styles[size],
@@ -161,13 +153,15 @@ function XmlViewer({
               deleted ? styles.deleted : ""
             ].filter(Boolean).join(" "),
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
-              const tokenClassName = TOKEN_CLASS[token.type];
-              return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
-            }) })
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
+              /* @__PURE__ */ jsx("code", { children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+                const tokenClassName = TOKEN_CLASS[token.type];
+                return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+              }) })
+            ]
           }
-        )
+        ) })
       ]
     }
   );

package/dist/components/xml-viewer/XmlViewer.module.css

@@ -2,6 +2,7 @@
   --xml-pane-bg: var(--color-bg-inverse);
   --xml-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
   --xml-pane-text: var(--color-fg-inverse);
+  --scroll-fade-color: var(--xml-pane-bg);
 
   --xml-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --xml-attr-name: color-mix(in oklab, var(--color-fg-inverse) 50%, var(--color-syntax-accent) 50%);
@@ -14,6 +15,10 @@
   --xml-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
 
   position: relative;
+  display: flex;
+  flex-direction: column;
+  /* In a parent with a definite height, scroll inside instead of overflowing it. */
+  max-height: 100%;
   background: var(--xml-pane-bg);
   border: var(--border-width-thin) solid var(--xml-pane-border);
   border-radius: var(--border-radius-default);
@@ -41,11 +46,61 @@
   box-shadow: none;
 }
 
+.borderless .codePane {
+  padding: 0;
+}
+
+/* Zero-height sticky row: sticks within the nearest scrolling ancestor, which may be outside the viewer. */
 .toolbar {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--spacing-xs);
+  position: sticky;
+  top: 0;
   z-index: 1;
+  display: flex;
+  justify-content: flex-end;
+  flex: none;
+  height: 0;
+}
+
+.toolbar,
+.toolbarSpacer {
+  font-size: var(--font-size-md);
+  line-height: normal;
+  white-space: normal;
+}
+
+.toolbarButton {
+  display: block;
+  margin: var(--spacing-xs) var(--spacing-xs) 0 0;
+  border-radius: var(--border-radius-default);
+  /* Opaque so scrolled text doesn't show through once it's stuck. */
+  background: var(--xml-pane-bg);
+}
+
+.toolbarSpacer {
+  float: right;
+  visibility: hidden;
+  margin-block-start: calc(var(--spacing-xs) - var(--spacing-sm));
+  margin-inline: var(--spacing-xs) calc(var(--spacing-xs) - var(--spacing-sm));
+}
+
+.borderless .toolbarSpacer {
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-xs) 0;
+}
+
+/* While the pane scrolls vertically, keep the button clear of its scrollbar
+   (overlay scrollbars take no space, so nothing else moves it). */
+.viewer:has([data-scrollable-y='true']) .toolbarButton {
+  margin-inline-end: var(--spacing-md);
+}
+
+.viewer:has([data-scrollable-y='true']) .toolbarSpacer {
+  margin-inline-end: calc(var(--spacing-md) - var(--spacing-sm));
+}
+
+.viewer.borderless:has([data-scrollable-y='true']) .toolbarSpacer {
+  margin-inline-end: 0;
+  padding-inline-end: var(--spacing-md);
 }
 
 .codePane {

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