@dbcdk/react-components 0.0.54 → 0.0.56

package/dist/components/card/Card.d.ts

@@ -1,7 +1,7 @@
 import type { JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
 import { CardMeta, CardMetaRow } from './components/CardMeta';
-type CardVariant = 'default' | 'subtle' | 'strong';
+type CardVariant = 'default' | 'subtle';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
 export interface CardProps {

package/dist/components/card/Card.js

@@ -19,8 +19,6 @@ function getVariantClass(variant, s) {
     switch (variant) {
         case 'subtle':
             return s.variantSubtle;
-        case 'strong':
-            return s.variantStrong;
         case 'default':
         default:
             return s.variantDefault;

package/dist/components/card/Card.module.css

@@ -31,11 +31,6 @@
   background-color: var(--card-bg-subtle, var(--color-bg-contextual-subtle));
 }
 
-.variantStrong {
-  background-color: var(--card-bg-strong, var(--color-bg-surface-strong));
-  color: var(--card-fg-on-strong, var(--color-fg-on-strong));
-}
-
 /* SIZE VARIANTS (define vars once; inner uses them) */
 .sm {
   --card-pad: var(--spacing-md);

package/dist/components/filter-field/FilterField.js

@@ -71,6 +71,7 @@ function isFilterActive(value) {
 }
 export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
     var _a, _b, _c, _d, _e, _f;
+    const filterFieldRef = useRef(null);
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
     const [selectedOperator, setSelectedOperator] = useState(operator);
     const active = isFilterActive(value);
@@ -156,7 +157,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
             clearDebounce();
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
+    return (_jsxs("div", { ref: filterFieldRef, ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
             .filter(Boolean)
             .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }), _jsx("div", { className: [styles.valueWrapper, control === 'input' ? 'dbc-flex dbc-flex-grow' : '']
                     .filter(Boolean)
@@ -171,7 +172,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
                         pendingValueRef.current = '';
                         setLocalValue('');
                         emit({ value: '' });
-                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), minWidth: minWidth, placeholder: placeholder, variant: "embedded", inputProps: {
+                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), minWidth: minWidth, popoverAnchorRef: filterFieldRef, placeholder: placeholder, variant: "embedded", inputProps: {
                         inputSize: size,
                         fieldClassName: styles.embeddedInputField,
                         inputClassName: styles.embeddedInputElement,

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -30,6 +30,7 @@ interface TypeaheadProps<T> {
     autoCorrect?: InputProps['autoCorrect'];
     autoCapitalize?: InputProps['autoCapitalize'];
     spellCheck?: InputProps['spellCheck'];
+    popoverAnchorRef?: React.RefObject<HTMLElement | null>;
 }
-export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, }: TypeaheadProps<T>): React.ReactElement;
+export declare function Typeahead<T extends string | number>({ options, mode, multiValueDisplayMode, multiSelectedValuesDisplayMode, multiSelectedValueChipContent, selectedValue, onChange, placeholder, variant, disabled, fullWidth, onClear, emptyMessage, filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, }: TypeaheadProps<T>): React.ReactElement;
 export {};

package/dist/components/forms/typeahead/Typeahead.js

@@ -7,7 +7,7 @@ import { Input } from '../../../components/forms/input/Input';
 import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
 import styles from './Typeahead.module.css';
-export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, }) {
+export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, }) {
     var _a;
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
@@ -270,7 +270,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 ? 8
                 : 0,
             width: fullWidth ? '100%' : undefined,
-        }, children: [_jsx(Popover, { open: open, minWidth: minWidth, onOpenChange: nextOpen => {
+        }, children: [_jsx(Popover, { open: open, minWidth: minWidth, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
                     setOpen(nextOpen);
                     if (nextOpen) {
                         if (mode === 'single' && selectedOption) {

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

@@ -95,15 +95,10 @@
   cursor: pointer;
 }
 
-.row + .row .interactive,
-.row + .row > .interactiveChild {
-  box-shadow: inset 0 1px 0 var(--color-border-subtle);
-}
-
 /* Hover: support both cases (interactive element, or wrapper child) */
 .interactive:hover:not(.selected),
 .row:hover > .interactiveChild:not(.selected) {
-  background-color: var(--color-bg-hover-subtle);
+  background-color: var(--color-bg-toolbar-hover);
 }
 
 /* Focus ring: support both cases */
@@ -134,6 +129,19 @@
   color: var(--color-fg-default);
 }
 
+.selected:hover,
+.interactive.selected:hover,
+.interactive[aria-selected='true']:hover,
+.row:hover > .interactiveChild.selected,
+.row:hover > .interactiveChild[aria-selected='true'],
+.active.selected,
+.interactive.active.selected,
+.interactive.active[aria-selected='true'],
+.row > .interactiveChild.active.selected,
+.row > .interactiveChild.active[aria-selected='true'] {
+  background-color: var(--color-bg-selected-hover);
+}
+
 /* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
 .interactive[aria-checked='true'],
 .row > .interactiveChild[aria-checked='true'] {

package/dist/components/popover/Popover.d.ts

@@ -22,6 +22,7 @@ export interface PopoverProps {
     fullWidth?: boolean;
     autoFocusContent?: boolean;
     returnFocus?: boolean;
+    anchorRef?: React.RefObject<HTMLElement | null>;
 }
 export interface PopoverHandle {
     close: () => void;

package/dist/components/popover/Popover.js

@@ -37,7 +37,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, autoFocusContent = false, returnFocus = true, }, ref) {
+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, autoFocusContent = false, returnFocus = true, anchorRef, }, ref) {
     const internalId = useId();
     const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
     const isControlled = open !== undefined;
@@ -66,7 +66,9 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         setOpen(false);
     }, [setOpen]);
     const togglePopover = useCallback((e) => {
-        triggerElRef.current = e.currentTarget;
+        var _a, _b;
+        triggerElRef.current =
+            (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : containerRef.current) !== null && _b !== void 0 ? _b : e.currentTarget;
         if (isOpen)
             closePopover('trigger');
         else
@@ -78,19 +80,22 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         isOpen: () => isOpen,
     }), [closePopover, openPopover, isOpen]);
     const computeAndSetPosition = useCallback(() => {
-        var _a;
+        var _a, _b;
         const content = contentRef.current;
         if (!content)
             return;
-        const triggerEl = (_a = triggerElRef.current) !== null && _a !== void 0 ? _a : containerRef.current;
+        const triggerEl = (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : triggerElRef.current) !== null && _b !== void 0 ? _b : containerRef.current;
         if (!triggerEl)
             return;
         const triggerRect = triggerEl.getBoundingClientRect();
+        const overlayWidthBuffer = 8;
         // Only compute a forced width when requested.
         let forcedWidthPx = null;
         if (matchTriggerWidth) {
             const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
-            forcedWidthPx = Math.max(triggerRect.width, minWidthPx || 0);
+            // Make the overlay slightly wider than the trigger so it reads as a
+            // floating layer instead of blending into adjacent form fields.
+            forcedWidthPx = Math.max(triggerRect.width + overlayWidthBuffer, minWidthPx || 0);
             setTriggerWidth(forcedWidthPx);
         }
         else {
@@ -154,15 +159,16 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
     useEffect(() => {
-        var _a;
+        var _a, _b, _c;
         if (!isOpen)
             return;
         const content = contentRef.current;
         if (!content)
             return;
+        const triggerEl = (_b = (_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) !== null && _a !== void 0 ? _a : triggerElRef.current) !== null && _b !== void 0 ? _b : containerRef.current;
         if (autoFocusContent) {
             const focusables = getFocusable(content);
-            (_a = focusables[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_c = focusables[0]) === null || _c === void 0 ? void 0 : _c.focus();
         }
         const handlePointerDownCapture = (e) => {
             const container = containerRef.current;
@@ -179,17 +185,26 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
                 closePopover('escape');
         };
         const handleReposition = () => computeAndSetPosition();
+        const resizeObserver = typeof ResizeObserver !== 'undefined'
+            ? new ResizeObserver(() => {
+                handleReposition();
+            })
+            : null;
         document.addEventListener('pointerdown', handlePointerDownCapture, true);
         document.addEventListener('keydown', handleEscape, true);
         window.addEventListener('resize', handleReposition);
         window.addEventListener('scroll', handleReposition, true);
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(content);
+        if (triggerEl)
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(triggerEl);
         return () => {
             document.removeEventListener('pointerdown', handlePointerDownCapture, true);
             document.removeEventListener('keydown', handleEscape, true);
             window.removeEventListener('resize', handleReposition);
             window.removeEventListener('scroll', handleReposition, true);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
-    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent]);
+    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
     useEffect(() => {
         var _a, _b;
         if (isOpen)

package/dist/components/popover/Popover.module.css

@@ -19,7 +19,9 @@
   padding: 0;
   z-index: var(--z-popover);
   overflow: auto;
-  box-shadow: var(--shadow-md);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 55%, transparent),
+    var(--shadow-lg);
 }
 
 .content[hidden] {

package/dist/components/toast/Toast.module.css

@@ -37,6 +37,10 @@
   border-left-color: var(--color-status-info-border);
 }
 
+.brand {
+  border-left-color: var(--color-brand);
+}
+
 .success {
   border-left-color: var(--color-status-success-border);
 }

package/package.json

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