@dbcdk/react-components 0.0.198 → 0.0.200

package/dist/components/json-viewer/JsonViewer.module.css

@@ -23,6 +23,10 @@
 
   display: flex;
   flex-direction: column;
+  /* In a parent with a definite height, scroll inside instead of overflowing it. */
+  max-height: 100%;
+  /* As a flex item, shrink below the content height instead of overflowing the parent. */
+  min-height: 0;
   gap: var(--spacing-xs);
   background: var(--json-pane-bg);
   color: var(--json-pane-text);
@@ -260,6 +264,7 @@
   text-align: left;
   cursor: pointer;
   font: inherit;
+  user-select: text;
 }
 
 .toggle {

package/dist/components/json-viewer/JsonViewerShell.cjs

@@ -186,7 +186,7 @@ function JsonViewerShell({
             {
               ref: scrollRef,
               className: [styles__default.default.rawPane, deleted ? styles__default.default.deleted : ""].filter(Boolean).join(" "),
-              style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+              style: { maxHeight },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.floatingSpacer, "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, {}) }) }) }),
                 rawJson
@@ -200,7 +200,7 @@ function JsonViewerShell({
             role: "tree",
             "aria-label": "JSON-visning",
             ref: scrollRef,
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            style: { maxHeight },
             children: hasResults ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyState, children: emptySearchText })
           }
         ) })

package/dist/components/json-viewer/JsonViewerShell.js

@@ -180,7 +180,7 @@ function JsonViewerShell({
             {
               ref: scrollRef,
               className: [styles.rawPane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
-              style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+              style: { maxHeight },
               children: [
                 /* @__PURE__ */ jsx("span", { className: styles.floatingSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
                 rawJson
@@ -194,7 +194,7 @@ function JsonViewerShell({
             role: "tree",
             "aria-label": "JSON-visning",
             ref: scrollRef,
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            style: { maxHeight },
             children: hasResults ? children : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
           }
         ) })

package/dist/components/line-viewer/LineViewer.cjs

@@ -35,10 +35,10 @@ function LineViewer({
   defaultViewMode = "highlighted",
   deleted = false,
   storageKey,
-  borderless = false
+  borderless = false,
+  maxHeight
 }) {
   const tokens = react.useMemo(() => tokenizeLineFormat.tokenizeLineFormat(lines), [lines]);
-  const codeRef = react.useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -57,15 +57,6 @@ function LineViewer({
   const handleCopy = () => {
     void clipboard_utils.copyToClipboard(lines);
   };
-  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",
     {
@@ -167,11 +158,11 @@ function LineViewer({
               wrap ? styles__default.default.wrap : styles__default.default.noWrap,
               deleted ? styles__default.default.deleted : ""
             ].filter(Boolean).join(" "),
+            style: { maxHeight },
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
             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", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {
+              /* @__PURE__ */ jsxRuntime.jsx("code", { children: viewMode === "raw" ? lines : 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/line-viewer/LineViewer.d.ts

@@ -21,5 +21,10 @@ export interface LineViewerProps {
      * modal).
      */
     borderless?: boolean;
+    /**
+     * Caps the height of the scrolling pane (a number is pixels), e.g. when the
+     * parent has no definite height for the viewer to fill.
+     */
+    maxHeight?: number | string;
 }
-export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: LineViewerProps): JSX.Element;
+export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, maxHeight, }: LineViewerProps): JSX.Element;

package/dist/components/line-viewer/LineViewer.js

@@ -1,7 +1,7 @@
 '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';
@@ -29,10 +29,10 @@ function LineViewer({
   defaultViewMode = "highlighted",
   deleted = false,
   storageKey,
-  borderless = false
+  borderless = false,
+  maxHeight
 }) {
   const tokens = useMemo(() => tokenizeLineFormat(lines), [lines]);
-  const codeRef = useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -51,15 +51,6 @@ function LineViewer({
   const handleCopy = () => {
     void copyToClipboard(lines);
   };
-  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",
     {
@@ -161,11 +152,11 @@ function LineViewer({
               wrap ? styles.wrap : styles.noWrap,
               deleted ? styles.deleted : ""
             ].filter(Boolean).join(" "),
+            style: { maxHeight },
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
             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", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {
+              /* @__PURE__ */ jsx("code", { children: viewMode === "raw" ? lines : 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/line-viewer/LineViewer.module.css

@@ -25,6 +25,8 @@
   flex-direction: column;
   /* In a parent with a definite height, scroll inside instead of overflowing it. */
   max-height: 100%;
+  /* As a flex item, shrink below the content height instead of overflowing the parent. */
+  min-height: 0;
   background: var(--line-pane-bg);
   border: var(--border-width-thin) solid var(--line-pane-border);
   border-radius: var(--border-radius-default);

package/dist/components/table/TanstackTable.cjs

@@ -4,14 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactTable = require('@tanstack/react-table');
 var React = require('react');
-var ColumnResizer = require('./components/column-resizer/ColumnResizer');
+var useClientPagination = require('./hooks/useClientPagination');
+var useDistributedLayout = require('./hooks/useDistributedLayout');
 var useElementWidth = require('./hooks/useElementWidth');
+var useResizeHeaderExtras = require('./hooks/useResizeHeaderExtras');
+var useUiSorting = require('./hooks/useUiSorting');
 var Table = require('./Table');
 var table_utils = require('./table.utils');
 var tanstackTable_utils = require('./tanstackTable.utils');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -31,7 +32,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
 
 function TanstackTable(props) {
   var _a, _b;
@@ -44,6 +44,11 @@ function TanstackTable(props) {
     optimisticSortingUi = true,
     visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    clientPagination = false,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange,
     viewMode,
     striped,
     settings,
@@ -54,13 +59,16 @@ function TanstackTable(props) {
     ...tableProps
   } = props;
   const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
-  const isControlledSorting = controlledSorting != null;
-  const [uiSorting, setUiSorting] = React__namespace.useState(controlledSorting != null ? controlledSorting : []);
-  React__namespace.useEffect(() => {
-    if (!isControlledSorting) return;
-    if (tanstackTable_utils.sortingEqual(uiSorting, controlledSorting)) return;
-    setUiSorting(controlledSorting);
-  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const [uiSorting, setUiSorting] = useUiSorting.useUiSorting(controlledSorting);
+  const pagination = useClientPagination.useClientPagination({
+    enabled: clientPagination,
+    rowCount: data.length,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange
+  });
+  const { resetPage } = pagination;
   const columnVisibility = React__namespace.useMemo(
     () => tanstackTable_utils.buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
     [columns, visibleColumnIds]
@@ -75,11 +83,13 @@ function TanstackTable(props) {
     state: {
       sorting: uiSorting,
       columnSizing,
-      columnVisibility
+      columnVisibility,
+      ...pagination.paginationState ? { pagination: pagination.paginationState } : {}
     },
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(uiSorting) : updater;
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
     onColumnSizingChange: (updater) => {
@@ -92,6 +102,7 @@ function TanstackTable(props) {
     getCoreRowModel: reactTable.getCoreRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
+    ...pagination.tableOptions,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     defaultColumn: {
@@ -107,89 +118,34 @@ function TanstackTable(props) {
     hasOtherHeaderActions: headerActionsProp != null,
     showHeader: (_b = tableProps.showHeader) != null ? _b : true
   });
-  const distributedLayout = React__namespace.useMemo(() => {
-    if (availableWidth == null) return null;
-    return tanstackTable_utils.buildDistributedColumnWidths({
-      table,
-      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      hasContextMenu: actionReservePx > 0,
-      contextMenuReservePx: actionReservePx,
-      defaultMinPx: 80,
-      columnSizing,
-      availableWidth
-    });
-  }, [table, selectedRows, onRowSelect, dataKey, actionReservePx, columnSizing, availableWidth]);
+  const { distributedLayout, columnItems } = useDistributedLayout.useDistributedLayout({
+    table,
+    columns,
+    columnVisibility,
+    columnSizing,
+    availableWidth,
+    hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+    actionReservePx
+  });
   const initialLayoutReady = availableWidth != null;
-  const resolvedLayout = React__namespace.useMemo(() => {
-    const next = {};
-    table.getVisibleLeafColumns().forEach((column) => {
-      next[column.id] = {
-        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
-      };
-    });
-    return next;
-  }, [table, distributedLayout]);
-  const columnItems = React__namespace.useMemo(
-    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
-    [columns, columnVisibility, resolvedLayout]
-  );
   const visibleData = table.getRowModel().rows.map((r) => r.original);
   const { sortById, sortDirection } = tanstackTable_utils.getSortPropsFromSorting(uiSorting);
   const handleSortChange = React__namespace.useCallback(
     (column, direction) => {
       const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    [optimisticSortingUi, onSortingChange]
-  );
-  const headerExtras = React__namespace.useCallback(
-    ({ index }) => {
-      var _a2, _b2, _c, _d;
-      const headerGroups = table.getHeaderGroups();
-      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-      const header = leafHeaders[index];
-      const neighbor = leafHeaders[index + 1];
-      if (!header || !neighbor) return null;
-      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
-      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
-      if (!canResize || !handler) return null;
-      const handleResizeStart = (event) => {
-        var _a3, _b3, _c2, _d2, _e;
-        const startWidth = distributedLayout == null ? void 0 : distributedLayout.widths[header.column.id];
-        const neighborStartWidth = distributedLayout == null ? void 0 : distributedLayout.widths[neighbor.column.id];
-        if (startWidth == null || neighborStartWidth == null) return;
-        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
-        const { columnDef } = header.column;
-        const neighborDef = neighbor.column.columnDef;
-        neighborResizeRef.current = {
-          columnId: header.column.id,
-          neighborId: neighbor.column.id,
-          // TanStack drags from its own size (columnDef.size), not the width on
-          // screen; applyNeighborResize only uses its offset from this.
-          tanstackStartWidth: header.getSize(),
-          startWidth,
-          neighborStartWidth,
-          min: (_a3 = columnDef.minSize) != null ? _a3 : 0,
-          max: (_b3 = columnDef.maxSize) != null ? _b3 : Infinity,
-          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
-          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
-        };
-        const displayedWidths = (_e = distributedLayout == null ? void 0 : distributedLayout.widths) != null ? _e : {};
-        setColumnSizing(
-          (prev) => Object.fromEntries(
-            Object.entries(prev).map(([id, width]) => {
-              var _a4;
-              return [id, (_a4 = displayedWidths[id]) != null ? _a4 : width];
-            })
-          )
-        );
-        handler(event);
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler: handleResizeStart });
-    },
-    [table, distributedLayout, actionReservePx]
+    [optimisticSortingUi, setUiSorting, resetPage, onSortingChange]
   );
+  const headerExtras = useResizeHeaderExtras.useResizeHeaderExtras({
+    table,
+    widths: distributedLayout == null ? void 0 : distributedLayout.widths,
+    actionReservePx,
+    neighborResizeRef,
+    setColumnSizing
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Table.Table,
     {
@@ -202,6 +158,7 @@ function TanstackTable(props) {
       settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
+      ...pagination.tableProps,
       dataKey,
       data: visibleData,
       columns: columnItems,

package/dist/components/table/TanstackTable.d.ts

@@ -6,6 +6,11 @@ export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<
     columns: ReadonlyArray<ColumnDef<T, any>>;
     sorting?: SortingState;
     manualSorting?: boolean;
+    /**
+     * Sorts all rows and then shows one page of `take` rows, starting at `skip`.
+     * Leave off when `data` is already a single page fetched from a server.
+     */
+    clientPagination?: boolean;
     onSortingChange?: (next: SortingState) => void;
     optimisticSortingUi?: boolean;
     variant?: TableVariant;

package/dist/components/table/TanstackTable.js

@@ -2,11 +2,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 import * as React from 'react';
-import ColumnResizer from './components/column-resizer/ColumnResizer';
+import { useClientPagination } from './hooks/useClientPagination';
+import { useDistributedLayout } from './hooks/useDistributedLayout';
 import { useElementWidth } from './hooks/useElementWidth';
+import { useResizeHeaderExtras } from './hooks/useResizeHeaderExtras';
+import { useUiSorting } from './hooks/useUiSorting';
 import { Table } from './Table';
 import { DEFAULT_COLUMN_PX, DEFAULT_VIEW_MODE, getActionsReserve, showsExpandToggle } from './table.utils';
-import { sortingEqual, buildColumnVisibilityFromVisibleIds, applyNeighborResize, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
+import { buildColumnVisibilityFromVisibleIds, applyNeighborResize, getSortPropsFromSorting } from './tanstackTable.utils';
 
 function TanstackTable(props) {
   var _a, _b;
@@ -19,6 +22,11 @@ function TanstackTable(props) {
     optimisticSortingUi = true,
     visibleColumnIds: visibleColumnIdsProp,
     manualSorting,
+    clientPagination = false,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange,
     viewMode,
     striped,
     settings,
@@ -29,13 +37,16 @@ function TanstackTable(props) {
     ...tableProps
   } = props;
   const visibleColumnIds = visibleColumnIdsProp != null ? visibleColumnIdsProp : settings == null ? void 0 : settings.visibleColumnIds;
-  const isControlledSorting = controlledSorting != null;
-  const [uiSorting, setUiSorting] = React.useState(controlledSorting != null ? controlledSorting : []);
-  React.useEffect(() => {
-    if (!isControlledSorting) return;
-    if (sortingEqual(uiSorting, controlledSorting)) return;
-    setUiSorting(controlledSorting);
-  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const [uiSorting, setUiSorting] = useUiSorting(controlledSorting);
+  const pagination = useClientPagination({
+    enabled: clientPagination,
+    rowCount: data.length,
+    take: takeProp,
+    skip: skipProp,
+    totalItemsCount: totalItemsCountProp,
+    onPageChange
+  });
+  const { resetPage } = pagination;
   const columnVisibility = React.useMemo(
     () => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
     [columns, visibleColumnIds]
@@ -50,11 +61,13 @@ function TanstackTable(props) {
     state: {
       sorting: uiSorting,
       columnSizing,
-      columnVisibility
+      columnVisibility,
+      ...pagination.paginationState ? { pagination: pagination.paginationState } : {}
     },
     onSortingChange: (updater) => {
       const next = typeof updater === "function" ? updater(uiSorting) : updater;
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
     onColumnSizingChange: (updater) => {
@@ -67,6 +80,7 @@ function TanstackTable(props) {
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     manualSorting: manualSorting != null ? manualSorting : false,
+    ...pagination.tableOptions,
     enableColumnResizing: true,
     columnResizeMode: "onChange",
     defaultColumn: {
@@ -82,89 +96,34 @@ function TanstackTable(props) {
     hasOtherHeaderActions: headerActionsProp != null,
     showHeader: (_b = tableProps.showHeader) != null ? _b : true
   });
-  const distributedLayout = React.useMemo(() => {
-    if (availableWidth == null) return null;
-    return buildDistributedColumnWidths({
-      table,
-      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
-      hasContextMenu: actionReservePx > 0,
-      contextMenuReservePx: actionReservePx,
-      defaultMinPx: 80,
-      columnSizing,
-      availableWidth
-    });
-  }, [table, selectedRows, onRowSelect, dataKey, actionReservePx, columnSizing, availableWidth]);
+  const { distributedLayout, columnItems } = useDistributedLayout({
+    table,
+    columns,
+    columnVisibility,
+    columnSizing,
+    availableWidth,
+    hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+    actionReservePx
+  });
   const initialLayoutReady = availableWidth != null;
-  const resolvedLayout = React.useMemo(() => {
-    const next = {};
-    table.getVisibleLeafColumns().forEach((column) => {
-      next[column.id] = {
-        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
-      };
-    });
-    return next;
-  }, [table, distributedLayout]);
-  const columnItems = React.useMemo(
-    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
-    [columns, columnVisibility, resolvedLayout]
-  );
   const visibleData = table.getRowModel().rows.map((r) => r.original);
   const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
   const handleSortChange = React.useCallback(
     (column, direction) => {
       const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
       if (optimisticSortingUi) setUiSorting(next);
+      resetPage();
       onSortingChange == null ? void 0 : onSortingChange(next);
     },
-    [optimisticSortingUi, onSortingChange]
-  );
-  const headerExtras = React.useCallback(
-    ({ index }) => {
-      var _a2, _b2, _c, _d;
-      const headerGroups = table.getHeaderGroups();
-      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
-      const header = leafHeaders[index];
-      const neighbor = leafHeaders[index + 1];
-      if (!header || !neighbor) return null;
-      const canResize = (_c = (_b2 = (_a2 = header.column).getCanResize) == null ? void 0 : _b2.call(_a2)) != null ? _c : false;
-      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
-      if (!canResize || !handler) return null;
-      const handleResizeStart = (event) => {
-        var _a3, _b3, _c2, _d2, _e;
-        const startWidth = distributedLayout == null ? void 0 : distributedLayout.widths[header.column.id];
-        const neighborStartWidth = distributedLayout == null ? void 0 : distributedLayout.widths[neighbor.column.id];
-        if (startWidth == null || neighborStartWidth == null) return;
-        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
-        const { columnDef } = header.column;
-        const neighborDef = neighbor.column.columnDef;
-        neighborResizeRef.current = {
-          columnId: header.column.id,
-          neighborId: neighbor.column.id,
-          // TanStack drags from its own size (columnDef.size), not the width on
-          // screen; applyNeighborResize only uses its offset from this.
-          tanstackStartWidth: header.getSize(),
-          startWidth,
-          neighborStartWidth,
-          min: (_a3 = columnDef.minSize) != null ? _a3 : 0,
-          max: (_b3 = columnDef.maxSize) != null ? _b3 : Infinity,
-          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
-          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
-        };
-        const displayedWidths = (_e = distributedLayout == null ? void 0 : distributedLayout.widths) != null ? _e : {};
-        setColumnSizing(
-          (prev) => Object.fromEntries(
-            Object.entries(prev).map(([id, width]) => {
-              var _a4;
-              return [id, (_a4 = displayedWidths[id]) != null ? _a4 : width];
-            })
-          )
-        );
-        handler(event);
-      };
-      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler: handleResizeStart });
-    },
-    [table, distributedLayout, actionReservePx]
+    [optimisticSortingUi, setUiSorting, resetPage, onSortingChange]
   );
+  const headerExtras = useResizeHeaderExtras({
+    table,
+    widths: distributedLayout == null ? void 0 : distributedLayout.widths,
+    actionReservePx,
+    neighborResizeRef,
+    setColumnSizing
+  });
   return /* @__PURE__ */ jsx(
     Table,
     {
@@ -177,6 +136,7 @@ function TanstackTable(props) {
       settingsColumns: columns,
       tableRootRef: containerRef,
       onSortChange: handleSortChange,
+      ...pagination.tableProps,
       dataKey,
       data: visibleData,
       columns: columnItems,

package/dist/components/table/hooks/useClientPagination.cjs

@@ -0,0 +1,66 @@
+'use client';
+'use strict';
+
+var reactTable = require('@tanstack/react-table');
+var react = require('react');
+
+const DEFAULT_CLIENT_PAGE_SIZE = 20;
+function useClientPagination({
+  enabled,
+  rowCount,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange
+}) {
+  const [uiSkip, setUiSkip] = react.useState(skip != null ? skip : 0);
+  const [prevSkip, setPrevSkip] = react.useState(skip);
+  const [uiTake, setUiTake] = react.useState(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  const [prevTake, setPrevTake] = react.useState(take);
+  if (skip !== prevSkip) {
+    setPrevSkip(skip);
+    if (skip != null) setUiSkip(skip);
+  }
+  if (take !== prevTake) {
+    setPrevTake(take);
+    setUiTake(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  }
+  const pageSize = Math.max(1, uiTake);
+  const lastPageIndex = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
+  const pageIndex = Math.min(Math.floor(uiSkip / pageSize), lastPageIndex);
+  const handlePageChange = react.useCallback(
+    (e) => {
+      if (enabled) {
+        setUiSkip(e.skip);
+        setUiTake(e.take);
+      }
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [enabled, onPageChange]
+  );
+  const resetPage = react.useCallback(() => {
+    if (!enabled || uiSkip === 0) return;
+    setUiSkip(0);
+    onPageChange == null ? void 0 : onPageChange({
+      page: 1,
+      take: pageSize,
+      skip: 0,
+      totalPages: Math.max(1, Math.ceil(rowCount / pageSize))
+    });
+  }, [enabled, uiSkip, pageSize, rowCount, onPageChange]);
+  const paginationState = enabled ? { pageIndex, pageSize } : void 0;
+  const tableOptions = enabled ? {
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    // Page changes go through handlePageChange; a new `data` reference must not reset the page.
+    autoResetPageIndex: false
+  } : {};
+  const tableProps = {
+    take: enabled ? pageSize : take,
+    skip: enabled ? pageIndex * pageSize : skip,
+    totalItemsCount: enabled ? rowCount : totalItemsCount,
+    onPageChange: enabled || onPageChange ? handlePageChange : void 0
+  };
+  return { paginationState, tableOptions, tableProps, resetPage };
+}
+
+exports.useClientPagination = useClientPagination;

package/dist/components/table/hooks/useClientPagination.d.ts

@@ -0,0 +1,32 @@
+import { type PaginationState } from '@tanstack/react-table';
+import type { PageChangeEvent } from '../../pagination/Pagination';
+type Args = {
+    enabled: boolean;
+    rowCount: number;
+    take?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+};
+/**
+ * Page state for TanstackTable. When disabled, the pagination props pass
+ * through untouched, for data that is already one page from a server.
+ */
+export declare function useClientPagination({ enabled, rowCount, take, skip, totalItemsCount, onPageChange, }: Args): {
+    paginationState: PaginationState | undefined;
+    tableOptions: {
+        getPaginationRowModel: (table: import("@tanstack/table-core").Table<unknown>) => () => import("@tanstack/table-core").RowModel<unknown>;
+        autoResetPageIndex: boolean;
+    } | {
+        getPaginationRowModel?: undefined;
+        autoResetPageIndex?: undefined;
+    };
+    tableProps: {
+        take: number | undefined;
+        skip: number | undefined;
+        totalItemsCount: number | undefined;
+        onPageChange: ((e: PageChangeEvent) => void) | undefined;
+    };
+    resetPage: () => void;
+};
+export {};

package/dist/components/table/hooks/useClientPagination.js

@@ -0,0 +1,64 @@
+'use client';
+import { getPaginationRowModel } from '@tanstack/react-table';
+import { useState, useCallback } from 'react';
+
+const DEFAULT_CLIENT_PAGE_SIZE = 20;
+function useClientPagination({
+  enabled,
+  rowCount,
+  take,
+  skip,
+  totalItemsCount,
+  onPageChange
+}) {
+  const [uiSkip, setUiSkip] = useState(skip != null ? skip : 0);
+  const [prevSkip, setPrevSkip] = useState(skip);
+  const [uiTake, setUiTake] = useState(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  const [prevTake, setPrevTake] = useState(take);
+  if (skip !== prevSkip) {
+    setPrevSkip(skip);
+    if (skip != null) setUiSkip(skip);
+  }
+  if (take !== prevTake) {
+    setPrevTake(take);
+    setUiTake(take != null ? take : DEFAULT_CLIENT_PAGE_SIZE);
+  }
+  const pageSize = Math.max(1, uiTake);
+  const lastPageIndex = Math.max(0, Math.ceil(rowCount / pageSize) - 1);
+  const pageIndex = Math.min(Math.floor(uiSkip / pageSize), lastPageIndex);
+  const handlePageChange = useCallback(
+    (e) => {
+      if (enabled) {
+        setUiSkip(e.skip);
+        setUiTake(e.take);
+      }
+      onPageChange == null ? void 0 : onPageChange(e);
+    },
+    [enabled, onPageChange]
+  );
+  const resetPage = useCallback(() => {
+    if (!enabled || uiSkip === 0) return;
+    setUiSkip(0);
+    onPageChange == null ? void 0 : onPageChange({
+      page: 1,
+      take: pageSize,
+      skip: 0,
+      totalPages: Math.max(1, Math.ceil(rowCount / pageSize))
+    });
+  }, [enabled, uiSkip, pageSize, rowCount, onPageChange]);
+  const paginationState = enabled ? { pageIndex, pageSize } : void 0;
+  const tableOptions = enabled ? {
+    getPaginationRowModel: getPaginationRowModel(),
+    // Page changes go through handlePageChange; a new `data` reference must not reset the page.
+    autoResetPageIndex: false
+  } : {};
+  const tableProps = {
+    take: enabled ? pageSize : take,
+    skip: enabled ? pageIndex * pageSize : skip,
+    totalItemsCount: enabled ? rowCount : totalItemsCount,
+    onPageChange: enabled || onPageChange ? handlePageChange : void 0
+  };
+  return { paginationState, tableOptions, tableProps, resetPage };
+}
+
+export { useClientPagination };

package/dist/components/table/hooks/useDistributedLayout.cjs

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var tanstackTable_utils = require('../tanstackTable.utils');
+
+function useDistributedLayout({
+  table,
+  columns,
+  columnVisibility,
+  columnSizing,
+  availableWidth,
+  hasSelection,
+  actionReservePx
+}) {
+  const distributedLayout = react.useMemo(() => {
+    if (availableWidth == null) return null;
+    return tanstackTable_utils.buildDistributedColumnWidths({
+      table,
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, hasSelection, actionReservePx, columnSizing, availableWidth]);
+  const resolvedLayout = react.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = react.useMemo(
+    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  return { distributedLayout, columnItems };
+}
+
+exports.useDistributedLayout = useDistributedLayout;

package/dist/components/table/hooks/useDistributedLayout.d.ts

@@ -0,0 +1,16 @@
+import type { ColumnDef, ColumnSizingState, Table, VisibilityState } from '@tanstack/react-table';
+type Args<T> = {
+    table: Table<T>;
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    columnVisibility: VisibilityState;
+    columnSizing: ColumnSizingState;
+    availableWidth: number | undefined;
+    hasSelection: boolean;
+    actionReservePx: number;
+};
+/** Column widths that fill the measured container, mapped to Table column items. */
+export declare function useDistributedLayout<T extends Record<string, any>>({ table, columns, columnVisibility, columnSizing, availableWidth, hasSelection, actionReservePx, }: Args<T>): {
+    distributedLayout: import("../columnLayout.utils").DistributedColumnWidths | null;
+    columnItems: import("../Table.types").ColumnItem<T>[];
+};
+export {};

package/dist/components/table/hooks/useDistributedLayout.js

@@ -0,0 +1,42 @@
+'use client';
+import { useMemo } from 'react';
+import { buildDistributedColumnWidths, mapDefsToColumnItems } from '../tanstackTable.utils';
+
+function useDistributedLayout({
+  table,
+  columns,
+  columnVisibility,
+  columnSizing,
+  availableWidth,
+  hasSelection,
+  actionReservePx
+}) {
+  const distributedLayout = useMemo(() => {
+    if (availableWidth == null) return null;
+    return buildDistributedColumnWidths({
+      table,
+      hasSelection,
+      hasContextMenu: actionReservePx > 0,
+      contextMenuReservePx: actionReservePx,
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [table, hasSelection, actionReservePx, columnSizing, availableWidth]);
+  const resolvedLayout = useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = useMemo(
+    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  return { distributedLayout, columnItems };
+}
+
+export { useDistributedLayout };

package/dist/components/table/hooks/useResizeHeaderExtras.cjs

@@ -0,0 +1,87 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ColumnResizer = require('../components/column-resizer/ColumnResizer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
+
+function useResizeHeaderExtras({
+  table,
+  widths,
+  actionReservePx,
+  neighborResizeRef,
+  setColumnSizing
+}) {
+  return React__namespace.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      const neighbor = leafHeaders[index + 1];
+      if (!header || !neighbor) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      const handleResizeStart = (event) => {
+        var _a2, _b2, _c2, _d2;
+        const startWidth = widths == null ? void 0 : widths[header.column.id];
+        const neighborStartWidth = widths == null ? void 0 : widths[neighbor.column.id];
+        if (startWidth == null || neighborStartWidth == null) return;
+        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
+        const { columnDef } = header.column;
+        const neighborDef = neighbor.column.columnDef;
+        neighborResizeRef.current = {
+          columnId: header.column.id,
+          neighborId: neighbor.column.id,
+          // TanStack drags from its own size (columnDef.size), not the width on
+          // screen; applyNeighborResize only uses its offset from this.
+          tanstackStartWidth: header.getSize(),
+          startWidth,
+          neighborStartWidth,
+          min: (_a2 = columnDef.minSize) != null ? _a2 : 0,
+          max: (_b2 = columnDef.maxSize) != null ? _b2 : Infinity,
+          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
+          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
+        };
+        const displayedWidths = widths != null ? widths : {};
+        setColumnSizing(
+          (prev) => Object.fromEntries(
+            Object.entries(prev).map(([id, width]) => {
+              var _a3;
+              return [id, (_a3 = displayedWidths[id]) != null ? _a3 : width];
+            })
+          )
+        );
+        handler(event);
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler: handleResizeStart });
+    },
+    [table, widths, actionReservePx, neighborResizeRef, setColumnSizing]
+  );
+}
+
+exports.useResizeHeaderExtras = useResizeHeaderExtras;

package/dist/components/table/hooks/useResizeHeaderExtras.d.ts

@@ -0,0 +1,17 @@
+import type { ColumnSizingState, Table } from '@tanstack/react-table';
+import * as React from 'react';
+import type { DistributedColumnWidths } from '../columnLayout.utils';
+import type { NeighborResize } from '../tanstackTable.utils';
+type Args<T> = {
+    table: Table<T>;
+    widths: DistributedColumnWidths['widths'] | undefined;
+    actionReservePx: number;
+    neighborResizeRef: React.MutableRefObject<NeighborResize | null>;
+    setColumnSizing: React.Dispatch<React.SetStateAction<ColumnSizingState>>;
+};
+/** Renders a resize handle between each column and its right neighbour. */
+export declare function useResizeHeaderExtras<T>({ table, widths, actionReservePx, neighborResizeRef, setColumnSizing, }: Args<T>): ({ index }: {
+    column: any;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/table/hooks/useResizeHeaderExtras.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import ColumnResizer from '../components/column-resizer/ColumnResizer';
+
+function useResizeHeaderExtras({
+  table,
+  widths,
+  actionReservePx,
+  neighborResizeRef,
+  setColumnSizing
+}) {
+  return React.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      const neighbor = leafHeaders[index + 1];
+      if (!header || !neighbor) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      const handleResizeStart = (event) => {
+        var _a2, _b2, _c2, _d2;
+        const startWidth = widths == null ? void 0 : widths[header.column.id];
+        const neighborStartWidth = widths == null ? void 0 : widths[neighbor.column.id];
+        if (startWidth == null || neighborStartWidth == null) return;
+        const neighborReserve = index + 1 === leafHeaders.length - 1 ? actionReservePx : 0;
+        const { columnDef } = header.column;
+        const neighborDef = neighbor.column.columnDef;
+        neighborResizeRef.current = {
+          columnId: header.column.id,
+          neighborId: neighbor.column.id,
+          // TanStack drags from its own size (columnDef.size), not the width on
+          // screen; applyNeighborResize only uses its offset from this.
+          tanstackStartWidth: header.getSize(),
+          startWidth,
+          neighborStartWidth,
+          min: (_a2 = columnDef.minSize) != null ? _a2 : 0,
+          max: (_b2 = columnDef.maxSize) != null ? _b2 : Infinity,
+          neighborMin: ((_c2 = neighborDef.minSize) != null ? _c2 : 0) + neighborReserve,
+          neighborMax: ((_d2 = neighborDef.maxSize) != null ? _d2 : Infinity) + neighborReserve
+        };
+        const displayedWidths = widths != null ? widths : {};
+        setColumnSizing(
+          (prev) => Object.fromEntries(
+            Object.entries(prev).map(([id, width]) => {
+              var _a3;
+              return [id, (_a3 = displayedWidths[id]) != null ? _a3 : width];
+            })
+          )
+        );
+        handler(event);
+      };
+      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler: handleResizeStart });
+    },
+    [table, widths, actionReservePx, neighborResizeRef, setColumnSizing]
+  );
+}
+
+export { useResizeHeaderExtras };

package/dist/components/table/hooks/useUiSorting.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var tanstackTable_utils = require('../tanstackTable.utils');
+
+function useUiSorting(controlledSorting) {
+  const isControlled = controlledSorting != null;
+  const [uiSorting, setUiSorting] = react.useState(controlledSorting != null ? controlledSorting : []);
+  react.useEffect(() => {
+    if (!isControlled) return;
+    if (tanstackTable_utils.sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlled, controlledSorting, uiSorting]);
+  return [uiSorting, setUiSorting];
+}
+
+exports.useUiSorting = useUiSorting;

package/dist/components/table/hooks/useUiSorting.d.ts

@@ -0,0 +1,3 @@
+import type { SortingState } from '@tanstack/react-table';
+/** Sorting shown in the header; follows `controlledSorting` when given, but can be set ahead of it. */
+export declare function useUiSorting(controlledSorting: SortingState | undefined): readonly [SortingState, import("react").Dispatch<import("react").SetStateAction<SortingState>>];

package/dist/components/table/hooks/useUiSorting.js

@@ -0,0 +1,16 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { sortingEqual } from '../tanstackTable.utils';
+
+function useUiSorting(controlledSorting) {
+  const isControlled = controlledSorting != null;
+  const [uiSorting, setUiSorting] = useState(controlledSorting != null ? controlledSorting : []);
+  useEffect(() => {
+    if (!isControlled) return;
+    if (sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlled, controlledSorting, uiSorting]);
+  return [uiSorting, setUiSorting];
+}
+
+export { useUiSorting };

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

@@ -36,10 +36,10 @@ function XmlViewer({
   defaultViewMode = "highlighted",
   deleted = false,
   storageKey,
-  borderless = false
+  borderless = false,
+  maxHeight
 }) {
   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,
@@ -58,15 +58,6 @@ 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",
     {
@@ -168,11 +159,11 @@ function XmlViewer({
               wrap ? styles__default.default.wrap : styles__default.default.noWrap,
               deleted ? styles__default.default.deleted : ""
             ].filter(Boolean).join(" "),
+            style: { maxHeight },
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
             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", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+              /* @__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

@@ -21,6 +21,11 @@ export interface XmlViewerProps {
      * modal).
      */
     borderless?: boolean;
+    /**
+     * Caps the height of the scrolling pane (a number is pixels), e.g. when the
+     * parent has no definite height for the viewer to fill.
+     */
+    maxHeight?: number | string;
 }
-export declare function XmlViewer({ xml, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: XmlViewerProps): JSX.Element;
+export declare function XmlViewer({ xml, size, appearance, defaultViewMode, deleted, storageKey, borderless, maxHeight, }: XmlViewerProps): JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 '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';
@@ -30,10 +30,10 @@ function XmlViewer({
   defaultViewMode = "highlighted",
   deleted = false,
   storageKey,
-  borderless = false
+  borderless = false,
+  maxHeight
 }) {
   const tokens = useMemo(() => tokenizeXml(xml), [xml]);
-  const codeRef = useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -52,15 +52,6 @@ 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",
     {
@@ -162,11 +153,11 @@ function XmlViewer({
               wrap ? styles.wrap : styles.noWrap,
               deleted ? styles.deleted : ""
             ].filter(Boolean).join(" "),
+            style: { maxHeight },
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
             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", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+              /* @__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

@@ -19,6 +19,8 @@
   flex-direction: column;
   /* In a parent with a definite height, scroll inside instead of overflowing it. */
   max-height: 100%;
+  /* As a flex item, shrink below the content height instead of overflowing the parent. */
+  min-height: 0;
   background: var(--xml-pane-bg);
   border: var(--border-width-thin) solid var(--xml-pane-border);
   border-radius: var(--border-radius-default);

package/package.json

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