@dbcdk/react-components 0.0.74 → 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);

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