@dbcdk/react-components 0.0.73 → 0.0.74

package/dist/components/headline/Headline.module.css

@@ -41,19 +41,19 @@
 
 /* Marker variant */
 .headline.marker {
-  padding-inline-start: calc(var(--border-width-thick) + var(--spacing-sm));
+  padding-inline-start: calc(var(--border-width-medium) + var(--spacing-sm));
 }
 
 .headline.marker::before {
   content: '';
   position: absolute;
-  inset-block: 0;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: 0.75em;
   inset-inline-start: 0;
-  inline-size: var(--border-width-thick);
+  inline-size: var(--border-width-medium);
   background-color: var(--marker-color, var(--color-brand));
-  border-start-start-radius: var(--border-radius-default);
-  border-end-start-radius: var(--border-radius-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+  border-radius: var(--border-radius-sm);
   pointer-events: none;
 }
 

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -8,5 +8,6 @@ export interface JsonViewerProps {
     searchPlaceholder?: string;
     emptySearchText?: string;
     className?: string;
+    maxHeight?: number | string;
 }
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, }: JsonViewerProps): JSX.Element;
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, }: JsonViewerProps): JSX.Element;

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

@@ -158,7 +158,7 @@ function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll,
     ]));
     return includeNode ? [nodeId, ...nested] : nested;
 }
-export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 180, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, }) {
+export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 180, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, maxHeight, }) {
     const [queryInput, setQueryInput] = useState('');
     const [query, setQuery] = useState('');
     const normalizedQuery = normalizeSearch(query);
@@ -214,7 +214,9 @@ export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false,
                                             setQuery('');
                                         }, children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleExpandAll, disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleCollapseAll, disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
                                     ? `${matches.size} matchende node${matches.size === 1 ? '' : 'r'}`
-                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: handleToggleNode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
+                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", style: maxHeight !== undefined
+                    ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
+                    : undefined, children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: handleToggleNode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
 }
 function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, copiedId, onCopy, }) {
     const nodeId = getNodeId(path);

package/dist/components/overlay/modal/Modal.js

@@ -17,17 +17,8 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
         onRequestCloseRef.current = onRequestClose;
     }, [onRequestClose]);
     useEffect(() => {
-        setMounted(true);
+        setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect -- intentional: SSR portal guard, runs once after hydration
     }, []);
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const previous = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        return () => {
-            document.body.style.overflow = previous;
-        };
-    }, [isOpen]);
     // Track open transition so we only autofocus once per open
     const wasOpenRef = useRef(false);
     useEffect(() => {
@@ -112,7 +103,7 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const stopPropagation = e => {
         e.stopPropagation();
     };
-    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
+    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestClose } : undefined);
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
     const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;

package/dist/components/overlay/modal/Modal.module.css

@@ -9,8 +9,17 @@
   padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
   z-index: var(--z-backdrop-modal);
 
-  /* Overlay can scroll if modal is taller than viewport */
-  overflow-y: auto;
+  /* Always a scroll container so overscroll-behavior can absorb wheel/touch
+     events and prevent the background page from scrolling. */
+  overflow-y: scroll;
+  overscroll-behavior: none;
+
+  /* Hide the overlay's own scrollbar — it's only there to absorb events */
+  scrollbar-width: none;
+}
+
+.overlay::-webkit-scrollbar {
+  display: none;
 }
 
 /* Default width can be overridden by --modal-width from props */

package/package.json

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