@dbcdk/react-components 0.0.55 → 0.0.57

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/input/Input.js

@@ -28,6 +28,8 @@ 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 rootStyle = {
         ...(style !== null && style !== void 0 ? style : {}),
         ...(minWidth ? { ['--input-min-width']: minWidth } : null),
@@ -43,7 +45,8 @@ 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 : '',
-                onClear ? styles.withClear : '',
+                hasVisibleClear ? styles.withClear : '',
+                hasInlineClear ? styles.withInlineClear : '',
                 hasButton ? styles.withButton : '',
                 className !== null && className !== void 0 ? className : '',
             ]
@@ -59,6 +62,6 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
                         .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 : '']
                                 .filter(Boolean)
-                                .join(' ') }), endAdornment && _jsx("span", { className: styles.endAdornment, children: endAdornment }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), 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(' ') }), (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] }))] }) }));
 });
 Input.displayName = 'Input';

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

@@ -77,6 +77,10 @@
   padding-inline-end: calc(var(--spacing-xxs) + 16px + var(--spacing-xxs));
 }
 
+.withInlineClear .input {
+  padding-inline-end: var(--spacing-xs);
+}
+
 /* Global focus reset - variants own visible focus treatment */
 .input:focus-visible {
   outline: none;
@@ -395,6 +399,6 @@
 .endAdornment {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin-right: 4px;
+  margin-right: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
 }

package/dist/components/forms/multi-select/MultiSelect.js

@@ -101,7 +101,7 @@ export function MultiSelect({ options, selectedValues = [], onChange, placeholde
             else {
                 setSearchQuery('');
             }
-        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleCombinedKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? _jsx(Chip, { size: "sm", children: selectedValues.length }) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 ? _jsx(ClearButton, { onClick: onClear }) : null, icon] })] }) })), children: _jsxs(Menu, { onKeyDown: handleCombinedKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleCombinedKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => {
+        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleCombinedKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? _jsx(Chip, { size: "sm", children: selectedValues.length }) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 ? _jsx(ClearButton, { onClick: onClear }) : null, _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsxs(Menu, { onKeyDown: handleCombinedKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleCombinedKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => {
                     const isSelected = selectedSet.has(option.value);
                     const isActive = index === activeIndex;
                     return (_jsx(Menu.Item, { active: isActive, children: _jsxs("button", { ref: el => {

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

@@ -168,7 +168,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

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,14 +7,14 @@ 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);
     const optionRefs = useRef([]);
     const interactingWithOptionsRef = useRef(false);
     const listboxId = useId();
-    const { onFocus: inputPropsOnFocus, onBlur: inputPropsOnBlur, onKeyDown: inputPropsOnKeyDown, onMouseDown: inputPropsOnMouseDown, onClear: inputPropsOnClear, startAdornment: inputPropsStartAdornment, ...passthroughInputProps } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    const { onFocus: inputPropsOnFocus, onBlur: inputPropsOnBlur, onKeyDown: inputPropsOnKeyDown, onMouseDown: inputPropsOnMouseDown, onClear: inputPropsOnClear, startAdornment: inputPropsStartAdornment, endAdornment: inputPropsEndAdornment, ...passthroughInputProps } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
     const selectedOption = useMemo(() => {
         var _a;
         if (mode === 'multi')
@@ -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) {
@@ -284,9 +284,9 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                     else {
                         setActiveIndex(-1);
                     }
-                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, trigger: openPopover => {
+                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, 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, onFocus: 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 => {
                             inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
                             if (e.defaultPrevented)
                                 return;

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,8 +66,9 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         setOpen(false);
     }, [setOpen]);
     const togglePopover = useCallback((e) => {
-        var _a;
-        triggerElRef.current = (_a = containerRef.current) !== null && _a !== void 0 ? _a : 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
@@ -79,11 +80,11 @@ 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();
@@ -158,16 +159,16 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!isOpen)
             return;
         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 (autoFocusContent) {
             const focusables = getFocusable(content);
-            (_b = focusables[0]) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = focusables[0]) === null || _c === void 0 ? void 0 : _c.focus();
         }
         const handlePointerDownCapture = (e) => {
             const container = containerRef.current;
@@ -203,7 +204,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             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/package.json

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