@dbcdk/react-components 0.0.74 → 0.0.76

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 : '',
             ]
@@ -132,7 +140,16 @@ const MenuCheckItem = React.forwardRef(({ label, checked, active, disabled, inte
 });
 MenuCheckItem.displayName = 'Menu.CheckItem';
 const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, onClick: event => {
+                var _a;
+                if (disabled)
+                    return;
+                const target = event.target;
+                // Let native label/input clicks handle themselves to avoid double-firing
+                if ((_a = target.closest('label')) !== null && _a !== void 0 ? _a : target.closest('input'))
+                    return;
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
+            }, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
 });
 MenuRadioItem.displayName = 'Menu.RadioItem';
 const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));

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

@@ -70,11 +70,6 @@
   cursor: pointer;
 }
 
-/* NEW: let Checkbox/Radio consume full width so the hover area feels right */
-.row > .interactiveChild > * {
-  inline-size: 100%;
-}
-
 /* NEW: add consistent gap between control and label inside Checkbox/Radio
    Both components use a root element with className={styles.container}.
    Because they're CSS modules, we must target it with :global(.container). */
@@ -149,6 +144,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 +164,11 @@
 /* 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);
+  /* Vertically center the icon against the first text line when parent is flex-start */
+  margin-block: calc((var(--line-height-normal) * var(--font-size-sm) - var(--icon-size-sm)) / 2);
+  flex-shrink: 0;
 }
 
 /* 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/dist/components/popover/Popover.module.css

@@ -38,15 +38,15 @@
 
 .content {
   position: fixed;
-  border: 1px solid var(--color-border-default);
+  border: 1px solid var(--color-border-subtle);
   background-color: var(--color-bg-surface);
-  border-radius: var(--border-radius-default);
+  border-radius: var(--border-radius-lg);
   padding: 0;
   z-index: var(--z-popover);
   overflow: auto;
   box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 55%, transparent),
-    var(--shadow-lg);
+    0 0 0 1px rgba(0, 0, 0, 0.01),
+    var(--shadow-sm);
 }
 
 .content[hidden] {

package/package.json

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