@digdir/designsystemet-react 0.0.0-test-20250715062533 → 0.0.0-test-20250715110951

package/dist/cjs/components/dialog/dialog.js

@@ -73,9 +73,8 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     /* handle closing */
     react.useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        const currentRef = dialogRef.current;
-        currentRef?.addEventListener('close', handleClose);
-        return () => currentRef?.removeEventListener('close', handleClose);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
     }, [onClose]);
     return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx("form", { method: 'dialog', children: jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
 });

package/dist/cjs/components/field/field-observer.js

@@ -44,7 +44,7 @@ function fieldObserver(fieldElement) {
             }
         }
         // Connect elements
-        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
+        const describedbyIds = [describedby]; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -62,12 +62,10 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (!describedbyIds.includes(el.id)) {
-                if (descriptionType === 'validation')
-                    describedbyIds.unshift(el.id); // Validations to the front
-                else if (descriptionType)
-                    describedbyIds.push(el.id); // Other descriptions to the back
-            }
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

package/dist/cjs/components/suggestion/index.js

@@ -24,6 +24,9 @@ var suggestionOption = require('./suggestion-option.js');
  * </Suggestion>
  */
 const EXPERIMENTAL_Suggestion = Object.assign(suggestion.Suggestion, {
+    /**
+     * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+     */
     Chips: suggestionChips.SuggestionChips,
     List: suggestionList.SuggestionList,
     Input: suggestionInput.SuggestionInput,

package/dist/cjs/components/suggestion/suggestion-chips.js

@@ -1,14 +1,12 @@
 'use client';
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var index = require('../chip/index.js');
-var suggestion = require('./suggestion.js');
-
-const SuggestionChips = ({ render = ({ label }) => label, }) => {
-    const { selectedItems = [] } = react.useContext(suggestion.SuggestionContext);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: render(item) }) }, item.value))) }));
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
+const SuggestionChips = () => {
+    console.warn('Suggestion: Using <Suggestion.Chips> is deprecated - please remove from your code.');
+    return null;
 };
 SuggestionChips.displayName = 'SuggestionChips';
 

package/dist/cjs/components/suggestion/suggestion-input.js

@@ -18,20 +18,17 @@ var suggestion = require('./suggestion.js');
  * </Suggestion>
  */
 const SuggestionInput = react.forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
-    const { listId, handleFilter } = react.useContext(suggestion.SuggestionContext);
+    const { handleFilter } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
         console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
     if (value)
         console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
-    const popoverProps = Object.assign({
-        [react.version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: listId,
-    }, rest);
     return (jsxRuntime.jsx(input.Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...popoverProps }));
+        }, ...rest }));
 });
 
 exports.SuggestionInput = SuggestionInput;

package/dist/cjs/components/suggestion/suggestion-list.js

@@ -6,7 +6,6 @@ var react = require('react');
 require('@u-elements/u-datalist');
 var dom = require('@floating-ui/dom');
 var suggestion = require('./suggestion.js');
-var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 /**
  * Component that provides a Suggestion list.
@@ -20,17 +19,12 @@ var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.
  * </Suggestion>
  */
 const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { listId, setListId, handleFilter } = react.useContext(suggestion.SuggestionContext);
-    const listRef = react.useRef(null);
-    const mergedRefs = useMergeRefs.useMergeRefs([ref, listRef]);
+    const { handleFilter, uComboboxRef } = react.useContext(suggestion.SuggestionContext);
     react.useEffect(handleFilter); // Must run on every render
-    react.useEffect(() => {
-        id && setListId(id);
-    }, [id]);
     // Position with floating-ui
     react.useEffect(() => {
-        const list = listRef.current;
-        const trigger = document.querySelector(`[popovertarget="${list?.id}"]`);
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
         if (list && trigger) {
             return dom.autoUpdate(trigger, list, () => {
                 dom.computePosition(trigger, list, {
@@ -42,8 +36,8 @@ const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d
                 });
             });
         }
-    }, [listId]);
-    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: mergedRefs, id: listId, popover: 'manual', ...rest }));
+    }, []);
+    return (jsxRuntime.jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
 });
 const triggerWidth = {
     name: 'TriggerWidth',

package/dist/cjs/components/suggestion/suggestion.js

@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('@u-elements/u-combobox');
 var cl = require('clsx/lite');
+var index = require('../chip/index.js');
 var useMergeRefs = require('../../utilities/hooks/use-merge-refs/use-merge-refs.js');
 
 const SuggestionContext = react.createContext({
-    setListId: () => undefined,
     handleFilter: () => undefined,
 });
 const text = (el) => el.textContent?.trim() || '';
@@ -29,16 +29,26 @@ const nextItems = (data, prev, multiple) => {
         : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+const deprecate = (from, to) => console.warn(`Suggestion: Using "${from}" is deprecated, please use "${to}" instead.`);
+const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected: _defaultSelected, defaultValue, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange: _onSelectedChange, onValueChange, renderSelected = ({ label }) => label, selected: _selected, value, ...rest }, ref) {
+    // For backwards compatibility:
+    const selected = _selected ?? value;
+    const defaultSelected = _defaultSelected ?? defaultValue;
+    const onSelectedChange = _onSelectedChange ?? onValueChange;
+    if (value)
+        deprecate('value', 'selected');
+    if (defaultValue)
+        deprecate('defaultValue', 'defaultSelected');
+    if (onValueChange)
+        deprecate('onValueChange', 'onSelectedChange');
     const uComboboxRef = react.useRef(null);
     const genId = react.useId();
     const selectId = rest.id ? `${rest.id}-select` : genId;
-    const isControlled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
-    const [listId, setListId] = react.useState(`${rest.id || genId}-list`);
     const [isEmpty, setIsEmpty] = react.useState(false);
-    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultValue));
-    const selectedItems = value ? sanitizeItems(value) : defaultItems;
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -49,13 +59,20 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             const multiple = combobox?.multiple;
             const data = event.detail;
             if (isControlled)
-                onValueChange?.(nextItems(data, selectedItems, multiple));
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
                 setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
     }, [selectedItems, isControlled]);
+    // Before match event listener
+    react.useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('beforematch', beforeMatch);
+        return () => combobox?.removeEventListener('beforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = react.useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -77,7 +94,7 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, listId, setListId, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsxRuntime.jsx(index.Chip.Removable, { value: item.value, asChild: true, children: jsxRuntime.jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 
 exports.Suggestion = Suggestion;

package/dist/esm/components/dialog/dialog.js

@@ -71,9 +71,8 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
     /* handle closing */
     useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        const currentRef = dialogRef.current;
-        currentRef?.addEventListener('close', handleClose);
-        return () => currentRef?.removeEventListener('close', handleClose);
+        dialogRef.current?.addEventListener('close', handleClose);
+        return () => dialogRef.current?.removeEventListener('close', handleClose);
     }, [onClose]);
     return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx("form", { method: 'dialog', children: jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, name: 'close', type: 'submit', variant: 'tertiary' }) })), children] }));
 });

package/dist/esm/components/field/field-observer.js

@@ -42,7 +42,7 @@ function fieldObserver(fieldElement) {
             }
         }
         // Connect elements
-        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
+        const describedbyIds = [describedby]; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -60,12 +60,10 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (!describedbyIds.includes(el.id)) {
-                if (descriptionType === 'validation')
-                    describedbyIds.unshift(el.id); // Validations to the front
-                else if (descriptionType)
-                    describedbyIds.push(el.id); // Other descriptions to the back
-            }
+            if (descriptionType === 'validation')
+                describedbyIds.unshift(el.id); // Validations to the front
+            else if (descriptionType)
+                describedbyIds.push(el.id); // Other descriptions to the back
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

package/dist/esm/components/suggestion/index.js

@@ -22,6 +22,9 @@ import { SuggestionOption } from './suggestion-option.js';
  * </Suggestion>
  */
 const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
+    /**
+     * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+     */
     Chips: SuggestionChips,
     List: SuggestionList,
     Input: SuggestionInput,

package/dist/esm/components/suggestion/suggestion-chips.js

@@ -1,12 +1,10 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { Chip } from '../chip/index.js';
-import { SuggestionContext } from './suggestion.js';
-
-const SuggestionChips = ({ render = ({ label }) => label, }) => {
-    const { selectedItems = [] } = useContext(SuggestionContext);
-    return (jsx(Fragment, { children: selectedItems.map((item) => (jsx(Chip.Removable, { value: item.value, asChild: true, children: jsx("data", { children: render(item) }) }, item.value))) }));
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
+const SuggestionChips = () => {
+    console.warn('Suggestion: Using <Suggestion.Chips> is deprecated - please remove from your code.');
+    return null;
 };
 SuggestionChips.displayName = 'SuggestionChips';
 

package/dist/esm/components/suggestion/suggestion-input.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useEffect, version } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { Input } from '../input/input.js';
 import { SuggestionContext } from './suggestion.js';
 
@@ -16,20 +16,17 @@ import { SuggestionContext } from './suggestion.js';
  * </Suggestion>
  */
 const SuggestionInput = forwardRef(function SuggestionList({ value, onInput, onChange, ...rest }, ref) {
-    const { listId, handleFilter } = useContext(SuggestionContext);
+    const { handleFilter } = useContext(SuggestionContext);
     useEffect(handleFilter, [value]); // Filter if controlled value
     if (onChange)
         console.warn('SuggestionInput: Avoid using onChange, as Suggestion controls the Input. Use onValueChange on Suggest instead, or onInput if fetching API results');
     if (value)
         console.warn('SuggestionInput: Avoid using value, as Suggestion controls the Input. Use value on Suggest instead.');
-    const popoverProps = Object.assign({
-        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: listId,
-    }, rest);
     return (jsx(Input, { placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
         , ref: ref, onInput: (event) => {
             onInput?.(event); // Should run first
             handleFilter?.(); // Filter if uncontrolled value
-        }, ...popoverProps }));
+        }, ...rest }));
 });
 
 export { SuggestionInput };

package/dist/esm/components/suggestion/suggestion-list.js

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
 import { autoUpdate, computePosition } from '@floating-ui/dom';
 import { SuggestionContext } from './suggestion.js';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 /**
  * Component that provides a Suggestion list.
@@ -18,17 +17,12 @@ import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-ref
  * </Suggestion>
  */
 const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { listId, setListId, handleFilter } = useContext(SuggestionContext);
-    const listRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, listRef]);
+    const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
-    useEffect(() => {
-        id && setListId(id);
-    }, [id]);
     // Position with floating-ui
     useEffect(() => {
-        const list = listRef.current;
-        const trigger = document.querySelector(`[popovertarget="${list?.id}"]`);
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
         if (list && trigger) {
             return autoUpdate(trigger, list, () => {
                 computePosition(trigger, list, {
@@ -40,8 +34,8 @@ const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forsl
                 });
             });
         }
-    }, [listId]);
-    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: mergedRefs, id: listId, popover: 'manual', ...rest }));
+    }, []);
+    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, popover: 'manual', ...rest }));
 });
 const triggerWidth = {
     name: 'TriggerWidth',

package/dist/esm/components/suggestion/suggestion.js

@@ -3,10 +3,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
+import { Chip } from '../chip/index.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
 
 const SuggestionContext = createContext({
-    setListId: () => undefined,
     handleFilter: () => undefined,
 });
 const text = (el) => el.textContent?.trim() || '';
@@ -27,16 +27,26 @@ const nextItems = (data, prev, multiple) => {
         : [...sanitizeItems(prev), item];
 };
 const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
-const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
+const deprecate = (from, to) => console.warn(`Suggestion: Using "${from}" is deprecated, please use "${to}" instead.`);
+const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected: _defaultSelected, defaultValue, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange: _onSelectedChange, onValueChange, renderSelected = ({ label }) => label, selected: _selected, value, ...rest }, ref) {
+    // For backwards compatibility:
+    const selected = _selected ?? value;
+    const defaultSelected = _defaultSelected ?? defaultValue;
+    const onSelectedChange = _onSelectedChange ?? onValueChange;
+    if (value)
+        deprecate('value', 'selected');
+    if (defaultValue)
+        deprecate('defaultValue', 'defaultSelected');
+    if (onValueChange)
+        deprecate('onValueChange', 'onSelectedChange');
     const uComboboxRef = useRef(null);
     const genId = useId();
     const selectId = rest.id ? `${rest.id}-select` : genId;
-    const isControlled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs([ref, uComboboxRef]);
-    const [listId, setListId] = useState(`${rest.id || genId}-list`);
     const [isEmpty, setIsEmpty] = useState(false);
-    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultValue));
-    const selectedItems = value ? sanitizeItems(value) : defaultItems;
+    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -47,13 +57,20 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             const multiple = combobox?.multiple;
             const data = event.detail;
             if (isControlled)
-                onValueChange?.(nextItems(data, selectedItems, multiple));
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
                 setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
     }, [selectedItems, isControlled]);
+    // Before match event listener
+    useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('beforematch', beforeMatch);
+        return () => combobox?.removeEventListener('beforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -75,7 +92,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, listId, setListId, handleFilter }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
+    return (jsx(SuggestionContext.Provider, { value: { isEmpty, handleFilter, uComboboxRef }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [selectedItems.map((item) => (jsx(Chip.Removable, { value: item.value, asChild: true, children: jsx("data", { children: renderSelected(item) }) }, item.value))), children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
 });
 
 export { Suggestion, SuggestionContext };

package/dist/types/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA1Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAqHpB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA1Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;OAGG;cACO,OAAO;2CAoHpB,CAAC"}

package/dist/types/components/field/field-observer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-observer.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-observer.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,4BAsF7D;AAGD,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,oBAA4B,CAAC;AACjE,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,6BAAqC,CAAC;AACxE,eAAO,MAAM,WAAW,GAAI,MAAM,OAAO,KAAG,IAAI,IAAI,gBAGd,CAAC"}
+{"version":3,"file":"field-observer.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-observer.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,4BAoF7D;AAGD,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,oBAA4B,CAAC;AACjE,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,6BAAqC,CAAC;AACxE,eAAO,MAAM,WAAW,GAAI,MAAM,OAAO,KAAG,IAAI,IAAI,gBAGd,CAAC"}

package/dist/types/components/suggestion/index.d.ts

@@ -29,16 +29,32 @@ declare const EXPERIMENTAL_Suggestion: React.ForwardRefExoticComponent<{
     }) => boolean);
     creatable?: boolean;
     multiple?: boolean;
-    value?: import("./suggestion").SuggestionValues;
-    defaultValue?: import("./suggestion").SuggestionValues;
+    selected?: import("./suggestion").SuggestionSelected;
+    value?: import("./suggestion").SuggestionSelected;
+    defaultSelected?: import("./suggestion").SuggestionSelected;
+    defaultValue?: import("./suggestion").SuggestionSelected;
+    onSelectedChange?: (value: {
+        label: string;
+        value: string;
+    }[]) => void;
     onValueChange?: (value: {
         label: string;
         value: string;
     }[]) => void;
+    onBeforeMatch?: (event: Omit<CustomEvent<HTMLOptionElement | undefined>, "currentTarget"> & {
+        currentTarget: import("@u-elements/u-combobox").UHTMLComboboxElement;
+    }) => void;
     name?: string;
+    renderSelected?: (args: {
+        label: string;
+        value: string;
+    }) => React.ReactNode;
 } & React.HTMLAttributes<import("@u-elements/u-combobox").UHTMLComboboxElement> & React.RefAttributes<import("@u-elements/u-combobox").UHTMLComboboxElement>> & {
+    /**
+     * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+     */
     Chips: {
-        ({ render, }: import("./suggestion-chips").SuggestionChipsProps): import("react/jsx-runtime").JSX.Element;
+        (): null;
         displayName: string;
     };
     List: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDataListElement>, "singular" | "plural"> & {
@@ -58,8 +74,13 @@ declare const EXPERIMENTAL_Suggestion: React.ForwardRefExoticComponent<{
         'aria-label'?: string;
     } & React.RefAttributes<HTMLButtonElement>>;
 };
-export { EXPERIMENTAL_Suggestion, SuggestionChips as EXPERIMENTAL_SuggestionChips, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionClear as EXPERIMENTAL_SuggestionClear, };
-export type { SuggestionProps, SuggestionValues } from './suggestion';
+export { EXPERIMENTAL_Suggestion, 
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
+SuggestionChips as EXPERIMENTAL_SuggestionChips, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionOption as EXPERIMENTAL_SuggestionOption, SuggestionClear as EXPERIMENTAL_SuggestionClear, };
+export type { SuggestionProps, SuggestionSelected, // Export SuggestionValues for easier useState
+SuggestionSelected as SuggestionValues, } from './suggestion';
 export type { SuggestionChipsProps } from './suggestion-chips';
 export type { SuggestionClearProps } from './suggestion-clear';
 export type { SuggestionEmptyProps } from './suggestion-empty';

package/dist/types/components/suggestion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAO3B,CAAC;AAUH,OAAO,EACL,uBAAuB,EACvB,eAAe,IAAI,4BAA4B,EAC/C,cAAc,IAAI,2BAA2B,EAC7C,eAAe,IAAI,4BAA4B,EAC/C,eAAe,IAAI,4BAA4B,EAC/C,gBAAgB,IAAI,6BAA6B,EACjD,eAAe,IAAI,4BAA4B,GAChD,CAAC;AACF,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAC3B;;OAEG;;;;;;;;;;;;;;;;;;;;;CAOH,CAAC;AAUH,OAAO,EACL,uBAAuB;AACvB;;GAEG;AACH,eAAe,IAAI,4BAA4B,EAC/C,cAAc,IAAI,2BAA2B,EAC7C,eAAe,IAAI,4BAA4B,EAC/C,eAAe,IAAI,4BAA4B,EAC/C,gBAAgB,IAAI,6BAA6B,EACjD,eAAe,IAAI,4BAA4B,GAChD,CAAC;AACF,YAAY,EACV,eAAe,EACf,kBAAkB,EAAE,8CAA8C;AAClE,kBAAkB,IAAI,gBAAgB,GACvC,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/types/components/suggestion/suggestion-chips.d.ts

@@ -1,19 +1,11 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
-import type { MergeRight } from '../../utilities';
-export type SuggestionChipsProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
-    /**
-     * Change the rendered content of the chip.
-     *
-     * @default ({ label }) => label
-     */
-    render?: (args: {
-        label: string;
-        value: string;
-    }) => ReactNode;
-}>;
+export type SuggestionChipsProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
+/**
+ * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+ */
 export declare const SuggestionChips: {
-    ({ render, }: SuggestionChipsProps): import("react/jsx-runtime").JSX.Element;
+    (): null;
     displayName: string;
 };
 //# sourceMappingURL=suggestion-chips.d.ts.map

package/dist/types/components/suggestion/suggestion-chips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-chips.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAC3C,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,EAC7C;IACE;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;CAChE,CACF,CAAC;AAEF,eAAO,MAAM,eAAe;kBAEzB,oBAAoB;;CAYtB,CAAC"}
+{"version":3,"file":"suggestion-chips.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAC7C,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,eAAe;;;CAK3B,CAAC"}

package/dist/types/components/suggestion/suggestion-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-input.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AAI9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,KAAK,CAAC,GAAG,CAAC;QAClB,UAAU,mBAAmB;YAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB;KACF;IACD,UAAU,KAAK,CAAC;QAEd,UAAU,cAAc,CAAC,CAAC;YACxB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB;KACF;CACF;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe;;;;;;0CAkC1B,CAAC"}
+{"version":3,"file":"suggestion-input.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AAI9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,KAAK,CAAC,GAAG,CAAC;QAClB,UAAU,mBAAmB;YAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB;KACF;IACD,UAAU,KAAK,CAAC;QAEd,UAAU,cAAc,CAAC,CAAC;YACxB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB;KACF;CACF;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe;;;;;;0CA2B1B,CAAC"}

package/dist/types/components/suggestion/suggestion-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion-list.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,wBAAwB,CAAC;AAMhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAC1C,YAAY,GAAG,cAAc,CAAC,mBAAmB,CAAC,EAClD;IACE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;IAxBvB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;aACM,MAAM;6CAgEjB,CAAC"}
+{"version":3,"file":"suggestion-list.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,wBAAwB,CAAC;AAMhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAC1C,YAAY,GAAG,cAAc,CAAC,mBAAmB,CAAC,EAClD;IACE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc;IAxBvB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;aACM,MAAM;6CAuDjB,CAAC"}

package/dist/types/components/suggestion/suggestion.d.ts

@@ -1,11 +1,14 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import '@u-elements/u-combobox';
 import type { UHTMLComboboxElement } from '@u-elements/u-combobox';
-export type SuggestionValues = Array<string | Partial<Item>> | string;
+export type SuggestionSelected = Array<string | Partial<Item>> | string;
 type Item = {
     label: string;
     value: string;
 };
+type EventBeforeMatch = Omit<CustomEvent<HTMLOptionElement | undefined>, 'currentTarget'> & {
+    currentTarget: UHTMLComboboxElement;
+};
 type Filter = (args: {
     /**
      * Index of the `option`
@@ -33,11 +36,9 @@ type Filter = (args: {
     input: HTMLInputElement;
 }) => boolean;
 type SuggestionContextType = {
-    isEmpty?: boolean;
-    selectedItems?: Item[];
-    listId?: string;
-    setListId: (id: string) => void;
     handleFilter: (input?: HTMLInputElement | null) => void;
+    isEmpty?: boolean;
+    uComboboxRef?: React.RefObject<UHTMLComboboxElement | null>;
 };
 export declare const SuggestionContext: React.Context<SuggestionContextType>;
 export type SuggestionProps = {
@@ -64,24 +65,49 @@ export type SuggestionProps = {
      */
     multiple?: boolean;
     /**
-     * The selected items of the multi-select.
-     * Using this makes the component controlled and it must be used in combination with onValueChange
+     * The selected items of the Suggestion.
+     * Using this makes the component controlled and it must be used in combination with onSelectedChange.
+     */
+    selected?: SuggestionSelected;
+    /**
+     * @deprecated Use `selected` instead
      */
-    value?: SuggestionValues;
+    value?: SuggestionSelected;
     /**
      * Default selected items when uncontrolled
      */
-    defaultValue?: SuggestionValues;
+    defaultSelected?: SuggestionSelected;
+    /**
+     * @deprecated Use `defaultSelected` instead
+     */
+    defaultValue?: SuggestionSelected;
     /**
      * Callback when selected items changes
      */
+    onSelectedChange?: (value: Item[]) => void;
+    /**
+     * @deprecated Use `onSelectedChange` instead
+     */
     onValueChange?: (value: Item[]) => void;
+    /**
+     * Callback when matching input value against options
+     */
+    onBeforeMatch?: (event: EventBeforeMatch) => void;
     /**
      * The name of the associated form control
      *
      * @default undefined
      */
     name?: string;
+    /**
+     * Allows the user to select multiple items
+     *
+     * @default false
+     */
+    renderSelected?: (args: {
+        label: string;
+        value: string;
+    }) => ReactNode;
 } & HTMLAttributes<UHTMLComboboxElement>;
 export declare const Suggestion: React.ForwardRefExoticComponent<{
     /**
@@ -107,24 +133,49 @@ export declare const Suggestion: React.ForwardRefExoticComponent<{
      */
     multiple?: boolean;
     /**
-     * The selected items of the multi-select.
-     * Using this makes the component controlled and it must be used in combination with onValueChange
+     * The selected items of the Suggestion.
+     * Using this makes the component controlled and it must be used in combination with onSelectedChange.
+     */
+    selected?: SuggestionSelected;
+    /**
+     * @deprecated Use `selected` instead
      */
-    value?: SuggestionValues;
+    value?: SuggestionSelected;
     /**
      * Default selected items when uncontrolled
      */
-    defaultValue?: SuggestionValues;
+    defaultSelected?: SuggestionSelected;
+    /**
+     * @deprecated Use `defaultSelected` instead
+     */
+    defaultValue?: SuggestionSelected;
     /**
      * Callback when selected items changes
      */
+    onSelectedChange?: (value: Item[]) => void;
+    /**
+     * @deprecated Use `onSelectedChange` instead
+     */
     onValueChange?: (value: Item[]) => void;
+    /**
+     * Callback when matching input value against options
+     */
+    onBeforeMatch?: (event: EventBeforeMatch) => void;
     /**
      * The name of the associated form control
      *
      * @default undefined
      */
     name?: string;
+    /**
+     * Allows the user to select multiple items
+     *
+     * @default false
+     */
+    renderSelected?: (args: {
+        label: string;
+        value: string;
+    }) => ReactNode;
 } & HTMLAttributes<UHTMLComboboxElement> & React.RefAttributes<UHTMLComboboxElement>>;
 export {};
 //# sourceMappingURL=suggestion.d.ts.map

package/dist/types/components/suggestion/suggestion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AACf,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtE,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7C,KAAK,MAAM,GAAG,CAAC,IAAI,EAAE;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;CACzB,KAAK,OAAO,CAAC;AAEd,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,sCAG5B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAgCzC,eAAO,MAAM,UAAU;IAzErB;;;;;;;;OAQG;aACM,OAAO,GAAG,MAAM;IACzB;;;;OAIG;gBACS,OAAO;IACnB;;;;OAIG;eACQ,OAAO;IAClB;;;OAGG;YACK,gBAAgB;IACxB;;OAEG;mBACY,gBAAgB;IAC/B;;OAEG;oBACa,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI;IACvC;;;;OAIG;WACI,MAAM;qFA4Hd,CAAC"}
+{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "0.0.0-test-20250715062533",
+  "version": "0.0.0-test-20250715110951",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -41,7 +41,7 @@
     "@navikt/aksel-icons": "^7.25.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-virtual": "^3.13.12",
-    "@u-elements/u-combobox": "^0.0.17",
+    "@u-elements/u-combobox": "^0.0.18",
     "@u-elements/u-datalist": "^1.0.10",
     "@u-elements/u-details": "^0.1.1",
     "clsx": "^2.1.1"
@@ -67,7 +67,7 @@
     "storybook": "^9.0.15",
     "tsx": "4.20.3",
     "typescript": "^5.8.3",
-    "@digdir/designsystemet-css": "^0.0.0-test-20250715062533"
+    "@digdir/designsystemet-css": "^0.0.0-test-20250715110951"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",