@digdir/designsystemet-react 1.1.4 → 1.1.5

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

@@ -73,8 +73,9 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
     /* handle closing */
     react.useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.removeEventListener('close', handleClose);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.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]; // Keep original aria-describedby
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -62,10 +62,12 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (descriptionType === 'validation')
-                describedbyIds.unshift(el.id); // Validations to the front
-            else if (descriptionType)
-                describedbyIds.push(el.id); // Other descriptions to the back
+            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
+            }
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

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-option.js

@@ -4,6 +4,18 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 const SuggestionOption = react.forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
 });

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,21 +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 isContolled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = react.useState(false);
-    const [selectedItems, setSelectedItems] = react.useState(sanitizeItems(defaultValue || value));
-    const [listId, setListId] = react.useState(rest.id ? `${rest.id}-list` : `${genId}-list`);
-    // Update if controlled values
-    const prevControlled = react.useRef(value);
-    if (value !== prevControlled.current) {
-        prevControlled.current = value;
-        setSelectedItems(sanitizeItems(prevControlled.current));
-    }
+    const [defaultItems, setDefaultItems] = react.useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -53,14 +58,21 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            if (isContolled)
-                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            if (isControlled)
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+                setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+    }, [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;
@@ -82,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,8 +71,9 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
     /* handle closing */
     useEffect(() => {
         const handleClose = (event) => onClose?.(event);
-        dialogRef.current?.addEventListener('close', handleClose);
-        return () => dialogRef.current?.removeEventListener('close', handleClose);
+        const currentRef = dialogRef.current;
+        currentRef?.addEventListener('close', handleClose);
+        return () => currentRef?.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]; // Keep original aria-describedby
+        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
         const inputId = input?.id || uuid;
         // Reset type counters since we reprocess all elements
         typeCounter.clear();
@@ -60,10 +60,12 @@ function fieldObserver(fieldElement) {
             }
             if (!value)
                 setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (descriptionType === 'validation')
-                describedbyIds.unshift(el.id); // Validations to the front
-            else if (descriptionType)
-                describedbyIds.push(el.id); // Other descriptions to the back
+            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
+            }
         }
         setAttr(input, 'id', inputId);
         setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());

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-option.js

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 const SuggestionOption = forwardRef(function SuggestionOption({ className, ...rest }, ref) {
     return (jsx("u-option", { class: className, ref: ref, ...rest }));
 });

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,21 +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 isContolled = value !== undefined;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(sanitizeItems(defaultValue || value));
-    const [listId, setListId] = useState(rest.id ? `${rest.id}-list` : `${genId}-list`);
-    // Update if controlled values
-    const prevControlled = useRef(value);
-    if (value !== prevControlled.current) {
-        prevControlled.current = value;
-        setSelectedItems(sanitizeItems(prevControlled.current));
-    }
+    const [defaultItems, setDefaultItems] = useState(sanitizeItems(defaultSelected));
+    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;
     /**
      * Listerners and handling of adding/removing
      */
@@ -51,14 +56,21 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             event.preventDefault();
             const multiple = combobox?.multiple;
             const data = event.detail;
-            if (isContolled)
-                onValueChange?.(nextItems(data, prevControlled.current, multiple));
+            if (isControlled)
+                onSelectedChange?.(nextItems(data, selectedItems, multiple));
             else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+                setDefaultItems(nextItems(data, selectedItems, multiple));
         };
         combobox?.addEventListener('beforechange', beforeChange);
         return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+    }, [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;
@@ -80,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;2CAoHpB,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;2CAqHpB,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,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"}
+{"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"}

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

@@ -1,9 +1,77 @@
+import { Suggestion as SuggestionRoot } from './suggestion';
 import { SuggestionChips } from './suggestion-chips';
 import { SuggestionClear } from './suggestion-clear';
 import { SuggestionEmpty } from './suggestion-empty';
 import { SuggestionInput } from './suggestion-input';
 import { SuggestionList } from './suggestion-list';
 import { SuggestionOption } from './suggestion-option';
+type Suggestion = typeof SuggestionRoot & {
+    /**
+     * @deprecated Suggestion.Chips is deprecated, use `renderSelected` on `Suggestion` instead
+     */
+    Chips: typeof SuggestionChips;
+    /**
+     * Component that provides a Suggestion list.
+     *
+     * Place as a descendant of `Suggestion`
+     *
+     * @example
+     * <Suggestion>
+     *   <Suggestion.Input />
+     *   <Suggestion.List />
+     * </Suggestion>
+     */
+    List: typeof SuggestionList;
+    /**
+     * Component that provides an input field for the Suggestion list.
+     *
+     * Place as a descendant of `Suggestion`
+     *
+     * @example
+     * <Suggestion>
+     *   <Suggestion.Input />
+     *   <Suggestion.List />
+     * </Suggestion>
+     */
+    Input: typeof SuggestionInput;
+    /**
+     * Component that provides an empty Suggestion list.
+     *
+     * Place as a descendant of `Suggestion.List`
+     *
+     * @example
+     * <Suggestion.List>
+     *   <Suggestion.Empty>Tomt</Suggestion.Empty>
+     * </Suggestion.List>
+     */
+    Empty: typeof SuggestionEmpty;
+    /**
+     * A component for rendering individual options in the Suggestion list.
+     *
+     * @example
+     * <Suggestion>
+     *   <Suggestion.Input />
+     *   <Suggestion.List>
+     *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+     *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+     *   </Suggestion.List>
+     * </Suggestion>
+     */
+    Option: typeof SuggestionOption;
+    /**
+     * Component that provides a clear button for the Suggestion input.
+     *
+     * Place as a descendant of `Suggestion`
+     *
+     * @example
+     * <Suggestion>
+     *   <Suggestion.Input />
+     *   <Suggestion.Clear />
+     *   <Suggestion.List />
+     * </Suggestion>
+     */
+    Clear: typeof SuggestionClear;
+};
 /**
  * A component that provides a suggestion list for an input field.
  *
@@ -18,48 +86,10 @@ import { SuggestionOption } from './suggestion-option';
  *   </Suggestion.List>
  * </Suggestion>
  */
-declare const EXPERIMENTAL_Suggestion: React.ForwardRefExoticComponent<{
-    filter?: boolean | ((args: {
-        index: number;
-        label: string;
-        text: string;
-        value: string;
-        optionElement: HTMLOptionElement;
-        input: HTMLInputElement;
-    }) => boolean);
-    creatable?: boolean;
-    multiple?: boolean;
-    value?: import("./suggestion").SuggestionValues;
-    defaultValue?: import("./suggestion").SuggestionValues;
-    onValueChange?: (value: {
-        label: string;
-        value: string;
-    }[]) => void;
-    name?: string;
-} & React.HTMLAttributes<import("@u-elements/u-combobox").UHTMLComboboxElement> & React.RefAttributes<import("@u-elements/u-combobox").UHTMLComboboxElement>> & {
-    Chips: {
-        ({ render, }: import("./suggestion-chips").SuggestionChipsProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    List: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & React.HTMLAttributes<HTMLDataListElement>, "singular" | "plural"> & {
-        singular?: string;
-        plural?: string;
-    } & React.RefAttributes<HTMLDataListElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<import("../../types").DefaultProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "type">, "type" | "disabled" | "readOnly" | "size" | "role"> & {
-        type?: "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "number" | "password" | "radio" | "search" | "tel" | "text" | "time" | "url" | "week";
-        size?: number;
-        disabled?: boolean;
-        readOnly?: boolean;
-        role?: React.AriaRole | undefined;
-    } & React.RefAttributes<HTMLInputElement>>;
-    Empty: React.ForwardRefExoticComponent<import("../../types").DefaultProps & React.OptionHTMLAttributes<HTMLOptionElement> & React.RefAttributes<HTMLOptionElement>>;
-    Option: React.ForwardRefExoticComponent<React.OptionHTMLAttributes<HTMLOptionElement> & import("../../types").DefaultProps & React.RefAttributes<HTMLOptionElement>>;
-    Clear: React.ForwardRefExoticComponent<Omit<import("..").ButtonProps, "children" | "variant"> & {
-        'aria-label'?: string;
-    } & React.RefAttributes<HTMLButtonElement>>;
-};
+declare const EXPERIMENTAL_Suggestion: Suggestion;
 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 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":"AAAA,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AAC5D,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,KAAK,UAAU,GAAG,OAAO,cAAc,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,EAAE,OAAO,cAAc,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B;;;;;;;;;OASG;IACH,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,OAAO,gBAAgB,CAAC;IAChC;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,OAAO,eAAe,CAAC;CAC/B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,uBAAuB,EAAE,UAO7B,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,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-option.d.ts

@@ -1,5 +1,17 @@
 import type { OptionHTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
 export type SuggestionOptionProps = OptionHTMLAttributes<HTMLOptionElement> & DefaultProps;
+/**
+ * A component for rendering individual options in the Suggestion list.
+ *
+ * @example
+ * <Suggestion>
+ *   <Suggestion.Input />
+ *   <Suggestion.List>
+ *     <Suggestion.Option value='Option 1'>Option 1</Suggestion.Option>
+ *     <Suggestion.Option value='Option 2'>Option 2</Suggestion.Option>
+ *   </Suggestion.List>
+ * </Suggestion>
+ */
 export declare const SuggestionOption: React.ForwardRefExoticComponent<OptionHTMLAttributes<HTMLOptionElement> & DefaultProps & React.RefAttributes<HTMLOptionElement>>;
 //# sourceMappingURL=suggestion-option.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"suggestion-option.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACzE,YAAY,CAAC;AAEf,eAAO,MAAM,gBAAgB,kIAW3B,CAAC"}
+{"version":3,"file":"suggestion-option.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion-option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACzE,YAAY,CAAC;AAEf;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,kIAW3B,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,20 +36,16 @@ 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 = {
     /**
-     * Filter options, either true, false or a custom callback () => boolean
+     * Filter options; boolean or a custom callback.
      *
-     * If true, the <datalist> will handle filtering.
-     * If false, the <datalist> will not handle filtering.
-     * If a custom callback, the callback will be used to filter the <option> elements.
+     * See {@link Filter} for the callback signature.
      *
      * @default true
      */
@@ -64,32 +63,60 @@ 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.
+     *
+     * If `label` and `value` is the same, you can use `string[]`.
+     *
+     * If `label` and `value` is different, you must use `{ value: string; label: string}[]`.
+     *
+     * Using this makes the component controlled and it must be used in combination with {@linkcode SuggestionProps.onSelectedChange|onSelectedChange}.
+     */
+    selected?: SuggestionSelected;
+    /**
+     * @deprecated Use {@linkcode SuggestionProps.selected|selected} instead
      */
-    value?: SuggestionValues;
+    value?: SuggestionSelected;
     /**
      * Default selected items when uncontrolled
      */
-    defaultValue?: SuggestionValues;
+    defaultSelected?: SuggestionSelected;
+    /**
+     * @deprecated Use `{@linkcode SuggestionProps.defaultSelected|defaultSelected} instead
+     */
+    defaultValue?: SuggestionSelected;
     /**
      * Callback when selected items changes
      */
+    onSelectedChange?: (value: Item[]) => void;
+    /**
+     * @deprecated Use {@linkcode SuggestionProps.onSelectedChange|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;
+    /**
+     * Change how the selected options are rendered inside the `Chip`.
+     *
+     * @default ({ label }) => label
+     */
+    renderSelected?: (args: {
+        label: string;
+        value: string;
+    }) => ReactNode;
 } & HTMLAttributes<UHTMLComboboxElement>;
 export declare const Suggestion: React.ForwardRefExoticComponent<{
     /**
-     * Filter options, either true, false or a custom callback () => boolean
+     * Filter options; boolean or a custom callback.
      *
-     * If true, the <datalist> will handle filtering.
-     * If false, the <datalist> will not handle filtering.
-     * If a custom callback, the callback will be used to filter the <option> elements.
+     * See {@link Filter} for the callback signature.
      *
      * @default true
      */
@@ -107,24 +134,54 @@ 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.
+     *
+     * If `label` and `value` is the same, you can use `string[]`.
+     *
+     * If `label` and `value` is different, you must use `{ value: string; label: string}[]`.
+     *
+     * Using this makes the component controlled and it must be used in combination with {@linkcode SuggestionProps.onSelectedChange|onSelectedChange}.
+     */
+    selected?: SuggestionSelected;
+    /**
+     * @deprecated Use {@linkcode SuggestionProps.selected|selected} instead
      */
-    value?: SuggestionValues;
+    value?: SuggestionSelected;
     /**
      * Default selected items when uncontrolled
      */
-    defaultValue?: SuggestionValues;
+    defaultSelected?: SuggestionSelected;
+    /**
+     * @deprecated Use `{@linkcode SuggestionProps.defaultSelected|defaultSelected} instead
+     */
+    defaultValue?: SuggestionSelected;
     /**
      * Callback when selected items changes
      */
+    onSelectedChange?: (value: Item[]) => void;
+    /**
+     * @deprecated Use {@linkcode SuggestionProps.onSelectedChange|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;
+    /**
+     * Change how the selected options are rendered inside the `Chip`.
+     *
+     * @default ({ label }) => label
+     */
+    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;qFAqId,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": "1.1.4",
+  "version": "1.1.5",
   "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": "^1.1.4"
+    "@digdir/designsystemet-css": "^1.1.5"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",