@dbcdk/react-components 0.0.73 → 0.0.75

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -31,7 +31,7 @@
   justify-content: center;
 
   background: var(--color-bg-surface);
-  border: 2px solid rgba(0, 0, 0, 0.25);
+  border: 2px solid var(--color-border-default);
 
   transition:
     border-color 120ms ease,
@@ -86,7 +86,7 @@
 }
 
 .default {
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: var(--color-border-strong);
 }
 
 /* Sizes */

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

@@ -14,6 +14,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
+  margin-block: var(--spacing-xs);
 
   /* Typography */
   font-weight: var(--font-weight-medium, 500);
@@ -41,19 +42,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/menu/Menu.d.ts

@@ -25,7 +25,7 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
      */
     itemRole?: 'menuitem' | 'option';
     /** Adds a rounded border around the item */
-    variant?: 'default' | 'bordered';
+    variant?: 'default' | 'bordered' | 'danger';
 }
 export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
     label: React.ReactNode;

package/dist/components/menu/Menu.js

@@ -90,17 +90,25 @@ const MenuItem = React.forwardRef(({ children, active, selected, disabled, class
     // (We can’t reliably read parent props here without context; simplest is: caller passes itemRole on Menu.Item when needed.)
     const resolvedRole = itemRole !== null && itemRole !== void 0 ? itemRole : 'menuitem';
     const isBordered = variant === 'bordered';
+    const itemClassName = variant === 'danger' ? styles.itemDanger : undefined;
     const rowClass = [styles.row, isBordered ? styles.rowBordered : '', className]
         .filter(Boolean)
         .join(' ');
     if (isInteractiveEl(children)) {
         const child = children;
-        return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, { active, selected, disabled, role: resolvedRole }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: applyMenuItemPropsToElement(child, {
+                active,
+                selected,
+                disabled,
+                role: resolvedRole,
+                className: itemClassName,
+            }) }));
     }
     // Fallback: wrap non-interactive children in a <button>
     return (_jsx("li", { ref: ref, role: "none", className: rowClass, ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: 0, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: [
                 styles.interactive,
                 styles.item,
+                itemClassName,
                 active ? styles.active : '',
                 selected ? styles.selected : '',
             ]

package/dist/components/menu/Menu.module.css

@@ -149,6 +149,14 @@
   color: var(--color-fg-default);
 }
 
+.itemDanger {
+  color: var(--color-status-error);
+}
+
+.itemDanger svg {
+  color: inherit;
+}
+
 /* Disabled: support both cases */
 .interactive[aria-disabled='true'],
 .interactive:disabled,
@@ -161,8 +169,8 @@
 /* Icons inside either interactive element or wrapper */
 .interactive svg,
 .interactiveChild svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
 }
 
 /* Visual separator row (used by <Menu.Separator />) */

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/dist/components/popover/Popover.d.ts

@@ -9,6 +9,7 @@ export interface PopoverProps {
     minWidth?: string;
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
+    contentMaxHeightPx?: number;
     edgeBuffer?: number;
     dataCy?: string;
     fullWidth?: boolean;

package/dist/components/popover/Popover.js

@@ -5,6 +5,16 @@ import * as React from 'react';
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Popover.module.css';
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    ;
+    ref.current = value;
+}
 function getFocusable(container) {
     const els = container.querySelectorAll([
         'a[href]',
@@ -38,7 +48,7 @@ function parseMinWidthPx(minWidth, elForEm) {
     }
     return 0;
 }
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, fullWidth = false, fillTrigger = false, autoFocusContent = false, returnFocus = true, anchorRef, overlayRef, }, ref) {
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, contentMaxHeightPx = 400, edgeBuffer = 100, dataCy, fullWidth = false, fillTrigger = false, autoFocusContent = false, returnFocus = true, anchorRef, overlayRef, }, ref) {
     const internalId = useId();
     const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
     const isControlled = open !== undefined;
@@ -211,14 +221,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
     }, [isOpen, returnFocus]);
     const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
     const setOverlayRef = React.useCallback((node) => {
-        if (!overlayRef)
-            return;
-        if (typeof overlayRef === 'function') {
-            overlayRef(node);
-            return;
-        }
-        const mutableRef = overlayRef;
-        mutableRef.current = node;
+        assignRef(overlayRef, node);
     }, [overlayRef]);
     return (_jsxs("div", { className: [
             styles.container,
@@ -244,7 +247,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
                         minWidth,
                         width: triggerWidth != null ? `${triggerWidth}px` : undefined,
                         maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-                        maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
+                        maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
                         visibility: positioned ? undefined : 'hidden',
                     }, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
                         ? children(() => closePopover('api'))

package/package.json

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