@dbcdk/react-components 0.0.59 → 0.0.61

package/dist/components/filter-field/FilterField.d.ts

@@ -27,10 +27,11 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     minWidth?: string;
     width?: string;
     maxWidth?: string;
+    popoverWidth?: string;
     debounceTime?: number;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, debounceTime, ...inputProps }: FilterFieldProps & {
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, variant, label, placeholder, disabled, 'data-cy': dataCy, minWidth, width, maxWidth, popoverWidth, debounceTime, ...inputProps }: FilterFieldProps & {
     'data-cy'?: string;
 }): React.ReactElement;
 export {};

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

@@ -69,14 +69,18 @@ function isFilterActive(value) {
         return value.trim().length > 0;
     return value != null;
 }
-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 }) {
+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, popoverWidth, 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 shouldAutoFitTypeahead = control === 'select' && single && !width;
     const [selectedOperator, setSelectedOperator] = useState(operator);
     const active = isFilterActive(value);
     useEffect(() => {
         if (ops.includes(operator)) {
+            // Keep the dropdown responsive to local selection immediately, but let the
+            // controlled `operator` prop take back over once parent state catches up.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setSelectedOperator(operator);
         }
     }, [operator, ops]);
@@ -149,6 +153,9 @@ export function FilterField({ field, control, operator, value, onChange, operato
             return;
         }
         if (incoming !== localValue) {
+            // Keep the embedded input responsive while debounced updates are in flight,
+            // then resync to the controlled value once external state has settled.
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setLocalValue(incoming);
         }
     }, [value, control, localValue]);
@@ -159,9 +166,13 @@ export function FilterField({ field, control, operator, value, onChange, operato
     }, []);
     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' : '']
+            .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx("div", { className: styles.operatorWrapper, children: _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }) }), _jsx("div", { className: [
+                    styles.valueWrapper,
+                    control === 'input' ? 'dbc-flex dbc-flex-grow' : '',
+                    shouldAutoFitTypeahead ? styles.autoWidth : '',
+                ]
                     .filter(Boolean)
-                    .join(' '), style: { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, fieldClassName: styles.embeddedInputField, inputClassName: styles.embeddedInputElement, value: localValue, onChange: e => {
+                    .join(' '), style: shouldAutoFitTypeahead ? (maxWidth ? { maxWidth } : undefined) : { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, fieldClassName: styles.embeddedInputField, inputClassName: styles.embeddedInputElement, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         setLocalValue(next);
                         scheduleEmitValue(next);
@@ -172,9 +183,9 @@ 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, popoverAnchorRef: filterFieldRef, 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, popoverWidth: popoverWidth, popoverAnchorRef: filterFieldRef, placeholder: placeholder, variant: "embedded", inputProps: {
                         inputSize: size,
                         fieldClassName: styles.embeddedInputField,
                         inputClassName: styles.embeddedInputElement,
-                    }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: true })) })] }));
+                    }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: !shouldAutoFitTypeahead, fitContent: shouldAutoFitTypeahead })) })] }));
 }

package/dist/components/filter-field/FilterField.module.css

@@ -34,8 +34,14 @@
 }
 
 .filterField.surface.active {
-  border-color: var(--color-border-default);
+  background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
   box-shadow: var(--shadow-sm);
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-bg-selected) 45%,
+    var(--color-bg-surface)
+  );
 }
 
 .filterField.outlined {
@@ -50,7 +56,14 @@
 }
 
 .filterField.outlined.active {
-  border-color: var(--color-border-default);
+  background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
+  box-shadow: none;
+  --filter-operator-bg: color-mix(
+    in srgb,
+    var(--color-bg-selected) 38%,
+    var(--color-bg-surface)
+  );
 }
 
 .filterField.subtle {
@@ -70,34 +83,22 @@
 }
 
 .filterField.subtle.active {
-  background: var(--color-bg-surface-strong);
+  background: color-mix(
+    in srgb,
+    var(--color-bg-selected) 55%,
+    var(--color-bg-surface-strong)
+  );
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px transparent;
   --filter-operator-bg: color-mix(
     in srgb,
-    var(--color-fg-default) 5%,
+    var(--color-bg-selected) 55%,
     var(--color-bg-surface-strong)
   );
 }
 
-/* =========================
-   ACTIVE INDICATOR
-   ========================= */
-
-.filterField.active::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  background: var(--color-border-selected);
-  pointer-events: none;
-  z-index: 2;
-}
-
-.filterField.outlined.active::before {
-  width: 3px;
+.filterField.active .label {
+  color: var(--color-fg-default);
 }
 
 /* =========================
@@ -114,7 +115,6 @@
   border-color: var(--color-border-selected);
 }
 
-/* subtle focus without inner outline */
 .filterField.surface:focus-within {
   box-shadow: var(--shadow-sm);
 }
@@ -124,17 +124,13 @@
   box-shadow: none;
 }
 
-/* stronger focus when filter is active */
-
 .filterField.surface.active:focus-within {
-  box-shadow:
-    var(--shadow-sm),
-    inset 0 0 0 1px var(--color-border-selected);
+  box-shadow: var(--shadow-sm);
 }
 
 .filterField.outlined.active:focus-within,
 .filterField.subtle.active:focus-within {
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  box-shadow: none;
 }
 
 /* =========================
@@ -173,6 +169,13 @@
    OPERATOR
    ========================= */
 
+.filterField .operatorWrapper {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
 .filterField .operatorTrigger {
   display: inline-flex;
   align-items: center;
@@ -192,10 +195,10 @@
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
+  flex: 0 0 auto;
+  white-space: nowrap;
 }
 
-/* inset operator background */
-
 .filterField .operatorTrigger::after {
   content: '';
   position: absolute;
@@ -221,6 +224,7 @@
     var(--filter-operator-bg, transparent)
   );
 }
+
 /* =========================
    SEPARATORS
    ========================= */
@@ -262,7 +266,9 @@
 .operatorTrigger svg {
   height: var(--component-size-xxs);
   width: var(--component-size-xxs);
+  flex: 0 0 auto;
 }
+
 /* =========================
    VALUE WRAPPER
    ========================= */
@@ -272,14 +278,14 @@
   align-items: center;
   padding: 0;
   height: 100%;
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
   position: relative;
 }
 
+/* Base child sizing */
 .filterField .valueWrapper > * {
   height: 100%;
-  width: 100%;
   min-width: 0;
 }
 
@@ -287,10 +293,42 @@
   display: flex;
   align-items: center;
   height: 100%;
+  min-width: 0;
+}
+
+/* Fill mode: regular inputs should stretch */
+.filterField .valueWrapper:not(.autoWidth) > * {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.filterField .valueWrapper:not(.autoWidth) > div {
   width: 100%;
+  flex: 1 1 auto;
+}
+
+/* Auto-width mode: let Typeahead keep its measured width */
+.filterField .valueWrapper.autoWidth {
+  flex: 1 1 auto;
+  width: auto;
   min-width: 0;
 }
 
+.filterField .valueWrapper.autoWidth > * {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.filterField .valueWrapper.autoWidth > div {
+  width: auto;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Embedded Input internals */
 .filterField .valueWrapper .field {
   min-height: unset;
   height: 100%;
@@ -298,13 +336,23 @@
   box-shadow: none;
   border: none;
   background: transparent;
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
 }
 
+/* Keep a small breathing space inside the filter row */
 .embeddedInputField {
-  padding: 0;
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
 }
 
 .embeddedInputElement {
+  flex: 1 1 auto;
+  inline-size: 100%;
+  width: 100%;
+  min-width: 0;
   height: 100%;
   block-size: 100%;
   min-height: unset;
@@ -313,12 +361,14 @@
   box-shadow: none;
   padding-block: 0;
   padding-inline: 0;
-  padding-inline-start: 0;
   margin: 0;
+  box-sizing: border-box;
 }
+
 .filterField .valueWrapper .startAdornment {
   margin-left: 0;
   gap: 2px;
+  min-width: 0;
 }
 
 /* =========================
@@ -333,6 +383,7 @@
 
 .filterField input {
   height: 100%;
+  min-width: 0;
 }
 
 .filterField input::placeholder {

package/dist/components/forms/input/Input.js

@@ -28,8 +28,11 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [autoFocus]);
     const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
-    const hasVisibleClear = Boolean(onClear && inputProps.value);
-    const hasInlineClear = Boolean(hasVisibleClear && endAdornment);
+    const hasValue = Boolean(inputProps.value);
+    const hasVisibleClear = Boolean(onClear && hasValue);
+    const hasEndAdornment = Boolean(endAdornment);
+    const reservesInlineClearSlot = Boolean(onClear);
+    const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
     const rootStyle = {
         ...(style !== null && style !== void 0 ? style : {}),
         ...(minWidth ? { ['--input-min-width']: minWidth } : null),
@@ -45,7 +48,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
     return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
                 styles.container,
                 fullWidth ? styles.fullWidth : '',
-                hasVisibleClear ? styles.withClear : '',
+                onClear ? styles.withClear : '',
                 hasInlineClear ? styles.withInlineClear : '',
                 hasButton ? styles.withButton : '',
                 className !== null && className !== void 0 ? className : '',
@@ -60,8 +63,8 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                         fieldClassName !== null && fieldClassName !== void 0 ? fieldClassName : '',
                     ]
                         .filter(Boolean)
-                        .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), startAdornment && _jsx("span", { className: styles.startAdornment, children: startAdornment }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
+                        .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && (_jsx("span", { className: styles.icon, "data-input-role": "icon", children: icon })), startAdornment && (_jsx("span", { className: styles.startAdornment, "data-input-role": "start-adornment", children: startAdornment })), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
                                 .filter(Boolean)
-                                .join(' ') }), (hasInlineClear || endAdornment) && (_jsxs("span", { className: styles.endAdornment, children: [hasInlineClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null, endAdornment] })), hasVisibleClear && !hasInlineClear && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+                                .join(' ') }), (reservesInlineClearSlot || hasEndAdornment) && (_jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [reservesInlineClearSlot ? (_jsx("span", { className: styles.clearSlot, "aria-hidden": hasVisibleClear ? undefined : 'true', children: hasVisibleClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null })) : null, endAdornment] })), hasVisibleClear && !hasEndAdornment && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
 });
 Input.displayName = 'Input';

package/dist/components/forms/input/Input.module.css

@@ -73,12 +73,19 @@
   border-bottom-right-radius: 0;
 }
 
+/*
+  When onClear exists, do not keep extra inline-end padding on the input itself.
+  The clear affordance already reserves the needed space via:
+  - the inline clearSlot inside endAdornment, or
+  - the absolute clear button path.
+*/
 .withClear .input {
-  padding-inline-end: calc(var(--spacing-xxs) + 16px + var(--spacing-xxs));
+  padding-inline-end: 0;
 }
 
+/* When clear is inline with other end adornments, keep the input tight as well. */
 .withInlineClear .input {
-  padding-inline-end: var(--spacing-xs);
+  padding-inline-end: 0;
 }
 
 /* Global focus reset - variants own visible focus treatment */
@@ -308,7 +315,10 @@
 .xs {
   block-size: var(--component-size-xs);
   font-size: var(--font-size-xs);
-  padding: 0 var(--spacing-xxs);
+}
+
+.input.xs {
+  padding-inline: var(--spacing-xxs);
 }
 
 .sm {
@@ -399,6 +409,17 @@
 .endAdornment {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
+  gap: 2px;
+  margin-inline-start: auto;
   margin-right: var(--spacing-xxs);
   color: var(--color-fg-subtle);
 }
+
+.clearSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
+  min-block-size: calc(16px + (var(--spacing-xxs) * 2));
+}

package/dist/components/forms/select/Select.js

@@ -173,7 +173,9 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;
                         const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
+                        return (_jsx(Menu.Item, { active: isActive, itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => {
+                                    optionRefs.current[index] = el;
+                                }, type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
                                     var _a;
                                     onChange(opt.value);
                                     (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();

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

@@ -26,11 +26,13 @@ interface TypeaheadProps<T> {
     inputSize?: InputProps['inputSize'];
     width?: InputProps['width'];
     minWidth?: string;
+    popoverWidth?: string;
     autoComplete?: InputProps['autoComplete'];
     autoCorrect?: InputProps['autoCorrect'];
     autoCapitalize?: InputProps['autoCapitalize'];
     spellCheck?: InputProps['spellCheck'];
     popoverAnchorRef?: React.RefObject<HTMLElement | null>;
+    fitContent?: boolean;
 }
-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 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, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent, }: TypeaheadProps<T>): React.ReactElement;
 export {};

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

@@ -1,14 +1,93 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Chip } from '../../../components/chip/Chip';
 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, popoverAnchorRef, }) {
-    var _a;
+function parseLengthToPx(value, referenceFontSize = 16) {
+    if (!value)
+        return 0;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return 0;
+    if (trimmed.endsWith('px')) {
+        const n = Number.parseFloat(trimmed);
+        return Number.isFinite(n) ? n : 0;
+    }
+    if (trimmed.endsWith('rem')) {
+        const n = Number.parseFloat(trimmed);
+        if (!Number.isFinite(n))
+            return 0;
+        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
+        return n * (Number.isFinite(rootFont) ? rootFont : 16);
+    }
+    if (trimmed.endsWith('em')) {
+        const n = Number.parseFloat(trimmed);
+        return Number.isFinite(n) ? n * referenceFontSize : 0;
+    }
+    const n = Number.parseFloat(trimmed);
+    return Number.isFinite(n) ? n : 0;
+}
+function getOuterWidthWithMargins(element) {
+    if (!(element instanceof HTMLElement))
+        return 0;
+    const rect = element.getBoundingClientRect();
+    const styles = window.getComputedStyle(element);
+    const marginLeft = Number.parseFloat(styles.marginLeft || '0');
+    const marginRight = Number.parseFloat(styles.marginRight || '0');
+    return Math.ceil(rect.width + marginLeft + marginRight);
+}
+function getInputFontShorthand(inputStyles) {
+    return (inputStyles.font ||
+        [
+            inputStyles.fontStyle,
+            inputStyles.fontVariant,
+            inputStyles.fontWeight,
+            inputStyles.fontStretch,
+            inputStyles.fontSize,
+            inputStyles.lineHeight !== 'normal' ? `/${inputStyles.lineHeight}` : '',
+            inputStyles.fontFamily,
+        ]
+            .filter(Boolean)
+            .join(' '));
+}
+function measureFitContentWidth(input, text, minWidth) {
+    const field = input.closest('[data-forminput="field"]');
+    if (!field)
+        return null;
+    const inputStyles = window.getComputedStyle(input);
+    const fieldStyles = window.getComputedStyle(field);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    ctx.font = getInputFontShorthand(inputStyles);
+    const textWidth = Math.ceil(ctx.measureText(text).width);
+    const inputFontSize = Number.parseFloat(inputStyles.fontSize || '16');
+    const inputPaddingLeft = Number.parseFloat(inputStyles.paddingLeft || '0');
+    const inputPaddingRight = Number.parseFloat(inputStyles.paddingRight || '0');
+    const borderLeft = Number.parseFloat(fieldStyles.borderLeftWidth || '0');
+    const borderRight = Number.parseFloat(fieldStyles.borderRightWidth || '0');
+    const startAdornmentWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="start-adornment"]'));
+    const endAdornmentWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="end-adornment"]'));
+    const iconWidth = getOuterWidthWithMargins(field.querySelector('[data-input-role="icon"]'));
+    const breathingRoom = 6;
+    const nextWidth = Math.ceil(borderLeft +
+        borderRight +
+        iconWidth +
+        startAdornmentWidth +
+        inputPaddingLeft +
+        textWidth +
+        breathingRoom +
+        inputPaddingRight +
+        endAdornmentWidth);
+    return Math.max(parseLengthToPx(minWidth, inputFontSize) || 120, nextWidth);
+}
+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, popoverWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, fitContent = false, }) {
+    var _a, _b;
     const rootRef = useRef(null);
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
@@ -43,23 +122,67 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 return option.label;
         }
     }, [multiSelectedValueChipContent]);
-    const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: "dbc-muted-text dbc-sm-text", style: {
-            whiteSpace: 'nowrap',
-            flexShrink: 0,
-            marginRight: 'var(--spacing-xxs)',
-        }, children: ["(", selectedOptions.length, ")"] })) : ((() => {
+    const multiSelectionAdornment = mode === 'multi' && selectedOptions.length > 0 ? (multiValueDisplayMode === 'count' ? (_jsxs("span", { className: `dbc-muted-text dbc-sm-text ${styles.countAdornment}`, children: ["(", selectedOptions.length, ")"] })) : ((() => {
         const MAX_CHIPS = 2;
         const chipsToShow = selectedOptions.slice(0, MAX_CHIPS);
         const extraCount = selectedOptions.length - MAX_CHIPS;
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 4,
-                flexWrap: 'nowrap',
-                overflow: 'hidden',
-            }, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
+        return (_jsxs("div", { className: styles.chipRow, children: [chipsToShow.map(option => (_jsx(Chip, { size: "sm", type: "rounded", onClose: () => commitSelection(option), children: option.label }, option.value))), extraCount > 0 && (_jsxs("span", { className: "dbc-muted-text dbc-sm-text dbc-px-xxs", children: ["+", extraCount] }))] }));
     })())) : undefined;
     const usesCountAdornment = mode === 'multi' && multiValueDisplayMode === 'count' && selectedOptions.length > 0;
+    const resolvedInputSize = (_b = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _b !== void 0 ? _b : 'md';
+    const shouldFitContent = fitContent && mode === 'single' && !fullWidth;
+    const [fittedWidthPx, setFittedWidthPx] = useState(null);
+    const visibleSingleValueText = useMemo(() => {
+        if (!shouldFitContent)
+            return '';
+        return inputValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || '';
+    }, [shouldFitContent, inputValue, selectedOption, placeholder]);
+    useLayoutEffect(() => {
+        if (!shouldFitContent)
+            return;
+        const input = inputRef.current;
+        if (!input)
+            return;
+        let cancelled = false;
+        let frameId = requestAnimationFrame(() => {
+            const nextWidth = measureFitContentWidth(input, visibleSingleValueText, minWidth);
+            if (!cancelled && nextWidth != null) {
+                setFittedWidthPx(current => (current !== nextWidth ? nextWidth : current));
+            }
+        });
+        const fonts = document.fonts;
+        if (fonts === null || fonts === void 0 ? void 0 : fonts.ready) {
+            void fonts.ready.then(() => {
+                if (cancelled)
+                    return;
+                const liveInput = inputRef.current;
+                if (!liveInput)
+                    return;
+                const nextWidth = measureFitContentWidth(liveInput, visibleSingleValueText, minWidth);
+                if (nextWidth != null) {
+                    setFittedWidthPx(current => (current !== nextWidth ? nextWidth : current));
+                }
+            });
+        }
+        return () => {
+            cancelled = true;
+            cancelAnimationFrame(frameId);
+        };
+    }, [
+        shouldFitContent,
+        visibleSingleValueText,
+        minWidth,
+        inputPropsStartAdornment,
+        inputPropsEndAdornment,
+    ]);
+    const measuredRootWidth = useMemo(() => {
+        if (!shouldFitContent)
+            return undefined;
+        if (fittedWidthPx == null)
+            return minWidth !== null && minWidth !== void 0 ? minWidth : '120px';
+        return `${fittedWidthPx}px`;
+    }, [shouldFitContent, fittedWidthPx, minWidth]);
+    const shouldStretchInput = fullWidth || shouldFitContent;
     useEffect(() => {
         var _a;
         if (mode === 'multi') {
@@ -269,6 +392,65 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         }
         openWithCurrentFilter();
     }, [mode, selectedOption, prepareSingleSearchInput, openWithAllOptions, openWithCurrentFilter]);
+    const handleTriggerMouseDown = React.useCallback((e) => {
+        var _a;
+        inputPropsOnMouseDown === null || inputPropsOnMouseDown === void 0 ? void 0 : inputPropsOnMouseDown(e);
+        if (e.defaultPrevented)
+            return;
+        const isAlreadyFocused = document.activeElement === inputRef.current;
+        if (isAlreadyFocused && open) {
+            e.preventDefault();
+            setOpen(false);
+            setActiveIndex(-1);
+            if (mode === 'single') {
+                setQuery('');
+                setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
+            }
+            else {
+                setQuery('');
+                setInputValue('');
+            }
+            return;
+        }
+        if (isAlreadyFocused && mode === 'single' && selectedOption) {
+            prepareSingleSearchInput();
+            setOpen(true);
+            setActiveIndex(getSelectedIndex(options));
+        }
+        else if (isAlreadyFocused && !open) {
+            setOpen(true);
+            setActiveIndex(getSelectedIndex(filteredOptions));
+        }
+    }, [
+        inputPropsOnMouseDown,
+        open,
+        mode,
+        selectedOption,
+        prepareSingleSearchInput,
+        getSelectedIndex,
+        options,
+        filteredOptions,
+    ]);
+    const handleChevronMouseDown = React.useCallback((e) => {
+        var _a, _b;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (open) {
+            setOpen(false);
+            setActiveIndex(-1);
+            if (mode === 'single') {
+                setQuery('');
+                setInputValue((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _b !== void 0 ? _b : '');
+            }
+            else {
+                setQuery('');
+                setInputValue('');
+            }
+            return;
+        }
+        handleOpen();
+    }, [open, mode, selectedOption, handleOpen]);
     const handleKeyDown = (e) => {
         switch (e.key) {
             case 'ArrowDown':
@@ -342,8 +524,11 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 selectedOptions.length > 0
                 ? 8
                 : 0,
-            width: fullWidth ? '100%' : undefined,
-        }, children: [_jsx(Popover, { open: open, minWidth: minWidth, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
+            width: shouldFitContent ? measuredRootWidth : fullWidth ? '100%' : undefined,
+            flex: fullWidth || shouldFitContent ? '1 1 auto' : undefined,
+            minWidth: 0,
+            maxWidth: shouldFitContent ? '100%' : undefined,
+        }, children: [_jsx(Popover, { open: open, minWidth: popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : minWidth, matchTriggerWidth: true, fillTrigger: true, anchorRef: popoverAnchorRef, onOpenChange: nextOpen => {
                     setOpen(nextOpen);
                     if (nextOpen) {
                         if (mode === 'single' && selectedOption) {
@@ -358,43 +543,14 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                         setActiveIndex(-1);
                     }
                 }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, overlayRef: popoverContentRef, trigger: (openPopover, icon) => {
-                    var _a, _b, _c, _d, _e;
-                    return (_jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, endAdornment: inputPropsEndAdornment || icon ? (_jsxs(_Fragment, { children: [inputPropsEndAdornment, icon] })) : undefined, onFocus: e => {
+                    var _a, _b, _c, _d;
+                    return (_jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, endAdornment: inputPropsEndAdornment || icon ? (_jsxs(_Fragment, { children: [inputPropsEndAdornment, icon ? (_jsx("span", { className: styles.chevronButton, onMouseDown: handleChevronMouseDown, children: icon })) : null] })) : undefined, onFocus: e => {
                             inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
                             if (e.defaultPrevented)
                                 return;
                             handleOpen();
                             openPopover(e);
-                        }, onMouseDown: e => {
-                            var _a;
-                            inputPropsOnMouseDown === null || inputPropsOnMouseDown === void 0 ? void 0 : inputPropsOnMouseDown(e);
-                            if (e.defaultPrevented)
-                                return;
-                            const isAlreadyFocused = document.activeElement === inputRef.current;
-                            if (isAlreadyFocused && open) {
-                                e.preventDefault();
-                                setOpen(false);
-                                setActiveIndex(-1);
-                                if (mode === 'single') {
-                                    setQuery('');
-                                    setInputValue((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _a !== void 0 ? _a : '');
-                                }
-                                else {
-                                    setQuery('');
-                                    setInputValue('');
-                                }
-                                return;
-                            }
-                            if (isAlreadyFocused && mode === 'single' && selectedOption) {
-                                prepareSingleSearchInput();
-                                setOpen(true);
-                                setActiveIndex(getSelectedIndex(options));
-                            }
-                            else if (isAlreadyFocused && !open) {
-                                setOpen(true);
-                                setActiveIndex(getSelectedIndex(filteredOptions));
-                            }
-                        }, onChange: e => handleInputChange(e.currentTarget.value), onBlur: e => {
+                        }, onMouseDown: handleTriggerMouseDown, onChange: e => handleInputChange(e.currentTarget.value), onBlur: e => {
                             inputPropsOnBlur === null || inputPropsOnBlur === void 0 ? void 0 : inputPropsOnBlur(e);
                             if (e.defaultPrevented)
                                 return;
@@ -407,7 +563,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             if (e.defaultPrevented)
                                 return;
                             handleKeyDown(e);
-                        }, placeholder: placeholder, variant: variant, inputSize: (_a = inputSize !== null && inputSize !== void 0 ? inputSize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputSize) !== null && _a !== void 0 ? _a : 'md', width: width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width, autoComplete: (_b = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, disabled: disabled, fullWidth: fullWidth, inputClassName: [
+                        }, placeholder: placeholder, variant: variant, inputSize: resolvedInputSize, width: shouldFitContent ? undefined : (width !== null && width !== void 0 ? width : inputProps === null || inputProps === void 0 ? void 0 : inputProps.width), autoComplete: (_a = autoComplete !== null && autoComplete !== void 0 ? autoComplete : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoComplete) !== null && _a !== void 0 ? _a : 'off', autoCorrect: (_b = autoCorrect !== null && autoCorrect !== void 0 ? autoCorrect : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCorrect) !== null && _b !== void 0 ? _b : 'off', autoCapitalize: (_c = autoCapitalize !== null && autoCapitalize !== void 0 ? autoCapitalize : inputProps === null || inputProps === void 0 ? void 0 : inputProps.autoCapitalize) !== null && _c !== void 0 ? _c : 'none', spellCheck: (_d = spellCheck !== null && spellCheck !== void 0 ? spellCheck : inputProps === null || inputProps === void 0 ? void 0 : inputProps.spellCheck) !== null && _d !== void 0 ? _d : false, disabled: disabled, fullWidth: shouldStretchInput, inputClassName: [
                             inputProps === null || inputProps === void 0 ? void 0 : inputProps.inputClassName,
                             usesCountAdornment ? styles.inputWithoutStartPadding : '',
                         ]
@@ -447,10 +603,5 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                                 }, onKeyDown: e => handleTabKeyDown(e), onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
                     })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
                 multiSelectedValuesDisplayMode === 'below-input' &&
-                selectedOptions.length > 0 && (_jsx("div", { style: {
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: 8,
-                    alignItems: 'flex-start',
-                }, children: selectedOptions.map(option => (_jsx(Chip, { size: "sm", type: "default", severity: "neutral", onClose: () => commitSelection(option), children: getSelectedValueChipLabel(option) }, option.value))) }))] }));
+                selectedOptions.length > 0 && (_jsx("div", { className: styles.selectedValues, children: selectedOptions.map(option => (_jsx(Chip, { size: "sm", type: "default", severity: "neutral", onClose: () => commitSelection(option), children: getSelectedValueChipLabel(option) }, option.value))) }))] }));
 }

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -1,3 +1,34 @@
+.countAdornment {
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-right: var(--spacing-xxs);
+}
+
+.chipRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chevronButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.selectedValues {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
 .inputWithoutStartPadding {
   padding-inline-start: 0;
 }

package/dist/components/interval-select/IntervalSelect.js

@@ -92,6 +92,8 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                         const isActive = index === activeIndex;
                         return (_jsx(Menu.Item, { active: isActive, selected: isSelected, 
                             // IMPORTANT: listbox uses role="option"
-                            itemRole: "option", children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, "aria-selected": isSelected, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
+                            itemRole: "option", children: _jsxs("button", { ref: el => {
+                                    optionRefs.current[index] = el;
+                                }, type: "button", tabIndex: isActive ? 0 : -1, "aria-selected": isSelected, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
                     }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
 }

package/dist/components/pagination/Pagination.module.css

@@ -12,7 +12,7 @@
   display: none;
 }
 
-@media (min-width: var(--bp-xs)) {
+@media (min-width: 480px) {
   .ellipsisButton {
     display: contents;
   }

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

@@ -6,20 +6,13 @@ export interface PopoverProps {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     contentId?: string;
-    /**
-     * CSS length, recommended "NNpx" for predictability.
-     * Used as a minimum, not as a forced width unless matchTriggerWidth=true.
-     */
     minWidth?: string;
-    /**
-     * If true, force the overlay width to at least the trigger width.
-     * If false, overlay width is content-driven (calendar-friendly).
-     */
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
     dataCy?: string;
     fullWidth?: boolean;
+    fillTrigger?: boolean;
     autoFocusContent?: boolean;
     returnFocus?: boolean;
     anchorRef?: React.RefObject<HTMLElement | null>;

package/dist/components/popover/Popover.js

@@ -38,7 +38,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, anchorRef, overlayRef, }, 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, 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;
@@ -74,7 +74,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             closePopover('trigger');
         else
             openPopover();
-    }, [isOpen, closePopover, openPopover]);
+    }, [isOpen, closePopover, openPopover, anchorRef]);
     useImperativeHandle(ref, () => ({
         close: () => closePopover('api'),
         open: openPopover,
@@ -90,19 +90,15 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             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);
-            // 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 {
             setTriggerWidth(null);
         }
-        // Measure height/width for collision using a temporary sizing that reflects our final sizing:
         const prevHidden = content.hidden;
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
@@ -115,12 +111,10 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         content.style.display = 'block';
         content.style.top = '0px';
         content.style.left = '0px';
-        // Apply minWidth always; apply width only if matchTriggerWidth.
         content.style.minWidth = minWidth;
         content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : 'auto';
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
-        // Restore
         content.hidden = prevHidden;
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
@@ -152,13 +146,12 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
         setPos({ top: clampedTop, left: clampedLeft });
         setPositioned(true);
-    }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
+    }, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
     useLayoutEffect(() => {
         if (!isOpen)
             return;
         computeAndSetPosition();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen]);
+    }, [isOpen, computeAndSetPosition]);
     useEffect(() => {
         var _a, _b, _c;
         if (!isOpen)
@@ -227,7 +220,19 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         const mutableRef = overlayRef;
         mutableRef.current = node;
     }, [overlayRef]);
-    return (_jsxs("div", { className: [styles.container, fullWidth ? styles.fullWidth : ''].filter(Boolean).join(' '), ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
+    return (_jsxs("div", { className: [
+            styles.container,
+            fullWidth ? styles.fullWidth : '',
+            fillTrigger ? styles.fillTrigger : '',
+        ]
+            .filter(Boolean)
+            .join(' '), ref: containerRef, children: [_jsx("div", { className: [
+                    styles.triggerSlot,
+                    fullWidth ? styles.fullWidth : '',
+                    fillTrigger ? styles.fillTrigger : '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: Trigger(togglePopover, icon, isOpen) }), mounted &&
                 isOpen &&
                 createPortal(_jsx("div", { id: resolvedContentId, ref: node => {
                         const mutableContentRef = contentRef;
@@ -236,7 +241,6 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
                     }, className: styles.content, style: {
                         top: pos.top,
                         left: pos.left,
-                        // Content-driven sizing by default.
                         minWidth,
                         width: triggerWidth != null ? `${triggerWidth}px` : undefined,
                         maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,

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

@@ -1,14 +1,39 @@
 .container {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: stretch;
   height: 100%;
   min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.container > * {
+  min-width: 0;
 }
 
-.fullWidth {
+.triggerSlot {
   display: flex;
+  align-items: stretch;
+  min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.triggerSlot > * {
+  min-width: 0;
+}
+
+.fullWidth,
+.fillTrigger {
   width: 100%;
+  flex: 1 1 auto;
+}
+
+.fullWidth > *,
+.fillTrigger > * {
+  width: 100%;
+  min-width: 0;
 }
 
 .content {

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -6,7 +6,7 @@ export interface SplitPaneContextValue {
     setPrimarySize: (newSize: number) => void;
     minPrimarySize: number;
     minSecondarySize: number;
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     storageKey?: string;
     resetDefault: () => void;
 }

package/dist/components/table/tanstackTable.utils.js

@@ -20,12 +20,12 @@ export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
         const cell = def.cell;
-        const meta = (_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {};
+        const meta = ((_a = def.meta) !== null && _a !== void 0 ? _a : {});
         let render;
         if (typeof cell === 'function') {
             render = (row) => cell({
@@ -46,22 +46,22 @@ export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}
         else {
             render = () => null;
         }
-        const isVisible = (_c = columnVisibility[id]) !== null && _c !== void 0 ? _c : true;
+        const isVisible = (_b = columnVisibility[id]) !== null && _b !== void 0 ? _b : true;
         return {
             id,
             header: def.header,
             accessor: accessorKey,
-            sortable: (_d = def.enableSorting) !== null && _d !== void 0 ? _d : !!accessorKey,
+            sortable: (_c = def.enableSorting) !== null && _c !== void 0 ? _c : !!accessorKey,
             render,
             hidden: !isVisible,
-            width: (_e = resolvedLayout[id]) === null || _e === void 0 ? void 0 : _e.width,
+            width: (_d = resolvedLayout[id]) === null || _d === void 0 ? void 0 : _d.width,
             align: meta.align,
             verticalAlign: meta.verticalAlign,
-            emptyPlaceholder: (_f = meta.emptyPlaceholder) !== null && _f !== void 0 ? _f : '-',
-            allowWrap: (_g = meta.allowWrap) !== null && _g !== void 0 ? _g : false,
+            emptyPlaceholder: (_e = meta.emptyPlaceholder) !== null && _e !== void 0 ? _e : '-',
+            allowWrap: (_f = meta.allowWrap) !== null && _f !== void 0 ? _f : false,
             severity: meta.severity,
             divider: meta.divider,
-            allowOverflow: (_h = meta.allowOverflow) !== null && _h !== void 0 ? _h : false,
+            allowOverflow: (_g = meta.allowOverflow) !== null && _g !== void 0 ? _g : false,
         };
     });
 }
@@ -111,10 +111,10 @@ export function buildDistributedColumnWidths(args) {
     const leaf = table.getVisibleLeafColumns();
     const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
     const tracks = leaf.map((c) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const def = c.columnDef;
-        const meta = ((_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {});
-        const min = Math.max(1, Number((_c = def.minSize) !== null && _c !== void 0 ? _c : defaultMinPx));
+        const meta = ((_a = def.meta) !== null && _a !== void 0 ? _a : {});
+        const min = Math.max(1, Number((_b = def.minSize) !== null && _b !== void 0 ? _b : defaultMinPx));
         const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : undefined;
         const resizedPxRaw = columnSizing[c.id];
         const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : undefined;
@@ -127,7 +127,7 @@ export function buildDistributedColumnWidths(args) {
                 fixed: true,
             };
         }
-        const rawWeight = Number((_e = (_d = meta.weight) !== null && _d !== void 0 ? _d : def.size) !== null && _e !== void 0 ? _e : DEFAULT_COLUMN_PX);
+        const rawWeight = Number((_d = (_c = meta.weight) !== null && _c !== void 0 ? _c : def.size) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_PX);
         const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
         return {
             id: c.id,

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

@@ -10,7 +10,7 @@
   word-break: break-word;
 }
 
-@media (max-width: var(--bp-sm)) {
+@media (max-width: 640px) {
   .container {
     inset-inline: var(--spacing-md);
     inset-block-end: var(--spacing-md);

package/dist/hooks/useTimeDuration.js

@@ -14,7 +14,14 @@ function defaultDuration(ms) {
     }
     return `${sec}s`;
 }
-export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', liveUpdate = false, formatDuration = defaultDuration, }) {
+export function useTimeDuration({ start, end, dateFormat = {
+    year: '2-digit',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+}, fallback = '—', liveUpdate = false, formatDuration = defaultDuration, }) {
     const [hydrated, setHydrated] = useState(false);
     const [tick, setTick] = useState(0);
     useEffect(() => setHydrated(true), []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "lucide-react": ">=0.543.0 <1",
+    "lucide-react": ">=0.543.0 <2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -73,47 +73,45 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
     "@mdx-js/react": "^3.1.1",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.17",
-    "@storybook/addon-viewport": "^9.0.8",
-    "@storybook/react-vite": "^9.1.3",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@swc/core": "^1.15.11",
     "@swc/jest": "^0.2.39",
     "@tanstack/react-table": "^8.20.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
-    "@vitejs/plugin-react": "^5.1.3",
-    "cpy-cli": "^6.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "cpy-cli": "^7.0.0",
     "esbuild-css-modules-plugin": "^3.1.5",
-    "esbuild-plugin-css-modules": "^0.3.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^29.0.2",
     "prettier": "^3.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "rimraf": "^6.1.2",
-    "storybook": "^9.1.3",
+    "storybook": "^10.3.5",
     "tsc-alias": "^1.8.16",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.3",
-    "vite": "^6.3.5",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.7",
     "vite-tsconfig-paths": "^6.0.5",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.3"
   },
   "engines": {
     "node": ">=18.17"