@digdir/designsystemet-react 0.0.0-next-20250710132619 → 0.0.0-react-side-effects-20260113071010

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

@@ -1,14 +1,14 @@
 'use client';
 import { ListItem } from './list-item.js';
-import { ListUnordered, ListOrdered } from './lists.js';
+import { ListOrdered, ListUnordered } from './lists.js';
 
-const List = {
+const ListComponent = {
     Item: ListItem,
     Ordered: ListOrdered,
     Unordered: ListUnordered,
 };
-List.Item.displayName = 'List.Item';
-List.Ordered.displayName = 'List.Ordered';
-List.Unordered.displayName = 'List.Unordered';
+ListComponent.Item.displayName = 'List.Item';
+ListComponent.Ordered.displayName = 'List.Ordered';
+ListComponent.Unordered.displayName = 'List.Unordered';
 
-export { List, ListItem, ListOrdered, ListUnordered };
+export { ListComponent as List, ListItem, ListOrdered, ListUnordered };

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

@@ -3,6 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 
+/**
+ * Component that provides a list item.
+ *
+ * @example
+ * <List.Item>Item</List.Item>
+ */
 const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';
     return jsx(Component, { ...rest, ref: ref });

package/dist/esm/components/list/lists.js

@@ -13,10 +13,10 @@ const render = (tagName, { asChild, className, ...rest }, ref) => {
  * Renders a native `ul` element.
  *
  * @example
- * <List.Unordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Unordered>
+ * <ListUnordered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListUnordered>
  */
 const ListUnordered = forwardRef(function ListUnordered(props, ref) {
     return render('ul', props, ref);
@@ -26,10 +26,10 @@ const ListUnordered = forwardRef(function ListUnordered(props, ref) {
  * Renders a native `ol` element.
  *
  * @example
- * <List.Ordered>
- *   <List.Item>Item 1</List.Item>
- *   <List.Item>Item 2</List.Item>
- * </List.Ordered>
+ * <ListOrdered>
+ *   <ListItem>Item 1</ListItem>
+ *   <ListItem>Item 2</ListItem>
+ * </ListOrdered>
  */
 const ListOrdered = forwardRef(function ListOrdered(props, ref) {
     return render('ol', props, ref);

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

@@ -1,5 +1,5 @@
 'use client';
-import { Pagination as Pagination$1 } from './pagination.js';
+import { Pagination } from './pagination.js';
 import { PaginationButton } from './pagination-button.js';
 import { PaginationItem } from './pagination-item.js';
 import { PaginationList } from './pagination-list.js';
@@ -22,13 +22,13 @@ import { PaginationList } from './pagination-list.js';
  *   </Pagination.List>
  * </Pagination>
  */
-const Pagination = Object.assign(Pagination$1, {
+const PaginationComponent = Object.assign(Pagination, {
     List: PaginationList,
     Item: PaginationItem,
     Button: PaginationButton,
 });
-Pagination.List.displayName = 'Pagination.List';
-Pagination.Item.displayName = 'Pagination.Item';
-Pagination.Button.displayName = 'Pagination.Button';
+PaginationComponent.List.displayName = 'Pagination.List';
+PaginationComponent.Item.displayName = 'Pagination.Item';
+PaginationComponent.Button.displayName = 'Pagination.Button';
 
-export { Pagination, PaginationButton, PaginationItem, PaginationList };
+export { PaginationComponent as Pagination, PaginationButton, PaginationItem, PaginationList };

package/dist/esm/components/pagination/pagination-button.js

@@ -7,9 +7,9 @@ import { Button } from '../button/button.js';
  * PaginationButton component, use within a Pagination.Item.
  *
  * @example
- * <Pagination.Item>
- *   <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- * </Pagination.Item>
+ * <PaginationItem>
+ *   <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ * </PaginationItem>
  */
 const PaginationButton = forwardRef(function PaginationButton(rest, ref) {
     return jsx(Button, { ref: ref, ...rest });

package/dist/esm/components/pagination/pagination-item.js

@@ -7,11 +7,11 @@ import { forwardRef } from 'react';
  * PaginationItem component, use within a Pagination.List.
  *
  * @example
- * <Pagination.List>
- *   <Pagination.Item>
- *     <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination.List>
+ * <PaginationList>
+ *   <PaginationItem>
+ *     <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *   </PaginationItem>
+ * </PaginationList>
  */
 const PaginationItem = forwardRef(function PaginationItem({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'li';

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

@@ -8,11 +8,11 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Pagination>
- *   <Pagination.List>
- *     <Pagination.Item>
- *       <Pagination.Button aria-label='Forrige side'>Forrige</Pagination.Button>
- *     </Pagination.Item>
- *   </Pagination.List>
+ *   <PaginationList>
+ *     <PaginationItem>
+ *       <PaginationButton aria-label='Forrige side'>Forrige</PaginationButton>
+ *     </PaginationItem>
+ *   </PaginationList>
  * </Pagination>
  */
 const PaginationList = forwardRef(function PaginationList({ asChild, ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Popover as Popover$1 } from './popover.js';
+import { Popover } from './popover.js';
 import { PopoverTrigger } from './popover-trigger.js';
 import { PopoverTriggerContext } from './popover-trigger-context.js';
 
@@ -14,11 +14,11 @@ import { PopoverTriggerContext } from './popover-trigger-context.js';
  *   </Popover>
  * </Popover.TriggerContext>
  */
-const Popover = Object.assign(Popover$1, {
+const PopoverComponent = Object.assign(Popover, {
     TriggerContext: PopoverTriggerContext,
     Trigger: PopoverTrigger,
 });
-Popover.TriggerContext.displayName = 'Popover.TriggerContext';
-Popover.Trigger.displayName = 'Popover.Trigger';
+PopoverComponent.TriggerContext.displayName = 'Popover.TriggerContext';
+PopoverComponent.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverTrigger, PopoverTriggerContext };
+export { PopoverComponent as Popover, PopoverTrigger, PopoverTriggerContext };

package/dist/esm/components/popover/popover-trigger-context.js

@@ -6,12 +6,12 @@ import { createContext, useId, useState } from 'react';
  * PopoverTriggerContext component, use to wrap a Popover.Trigger and Popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTriggerContext = ({ children, }) => {
     const randomPopoverId = useId();

package/dist/esm/components/popover/popover-trigger.js

@@ -9,22 +9,22 @@ import { Context } from './popover-trigger-context.js';
  * PopoverTrigger component, used to trigger a popover.
  *
  * @example
- * <Popover.TriggerContext>
- *   <Popover.Trigger>Open Popover</Popover.Trigger>
+ * <PopoverTriggerContext>
+ *   <PopoverTrigger>Open Popover</PopoverTrigger>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  *
  * @example inline
- * <Popover.TriggerContext>
+ * <PopoverTriggerContext>
  *   <Paragraph>
- *    We can use it <Popover.Trigger inline={true}>inline</Popover.Trigger>.
+ *    We can use it <PopoverTrigger inline={true}>inline</PopoverTrigger>.
  *   </Paragraph>
  *   <Popover>
  *     Content
  *   </Popover>
- * </Popover.TriggerContext>
+ * </PopoverTriggerContext>
  */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);

package/dist/esm/components/popover/popover.js

@@ -4,8 +4,8 @@ import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/d
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
-import { Context } from './popover-trigger-context.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Context } from './popover-trigger-context.js';
 
 /**
  * Popover component, used to display content in a popover over an element.
@@ -40,13 +40,15 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
             const isOutside = !isTrigger && !popover?.contains(el);
             if (isTrigger) {
                 event.preventDefault(); // Prevent native Popover API
-                setInternalOpen((open) => !open);
-                onOpen?.();
             }
-            if (isOutside) {
+            if (controlledOpen && (isTrigger || isOutside)) {
                 setInternalOpen(false);
                 onClose?.();
             }
+            else if (!controlledOpen && isTrigger) {
+                setInternalOpen(true);
+                onOpen?.();
+            }
         };
         const handleKeydown = (event) => {
             if (event.key !== 'Escape' || !controlledOpen)
@@ -84,7 +86,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
+                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
     }, [controlledOpen, placement, id, autoPlacement]);

package/dist/esm/components/radio/radio.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Field } from '../field/index.js';
+import { Field as FieldComponent } from '../field/index.js';
 import { Input } from '../input/input.js';
 import { Label } from '../label/label.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
@@ -13,7 +13,7 @@ import { ValidationMessage } from '../validation-message/validation-message.js';
  * <Radio label="I agree" value="agree" />
  */
 const Radio = forwardRef(function Radio({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
-    return (jsxs(Field, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
+    return (jsxs(FieldComponent, { "data-size": size, className: className, style: style, children: [jsx(Input, { type: 'radio', ref: ref, ...rest }), !!label && jsx(Label, { weight: 'regular', children: label }), !!description && jsx("div", { "data-field": 'description', children: description }), !!error && jsx(ValidationMessage, { children: error })] }));
 });
 
 export { Radio };

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

@@ -1,5 +1,5 @@
 'use client';
-import { Search as Search$1 } from './search.js';
+import { Search } from './search.js';
 import { SearchButton } from './search-button.js';
 import { SearchClear } from './search-clear.js';
 import { SearchInput } from './search-input.js';
@@ -20,13 +20,13 @@ import { SearchInput } from './search-input.js';
  *   <Search.Clear />
  * </Search>
  */
-const Search = Object.assign(Search$1, {
+const SearchComponent = Object.assign(Search, {
     Clear: SearchClear,
     Button: SearchButton,
     Input: SearchInput,
 });
-Search.Clear.displayName = 'Search.Clear';
-Search.Button.displayName = 'Search.Button';
-Search.Input.displayName = 'Search.Input';
+SearchComponent.Clear.displayName = 'Search.Clear';
+SearchComponent.Button.displayName = 'Search.Button';
+SearchComponent.Input.displayName = 'Search.Input';
 
-export { Search, SearchButton, SearchClear, SearchInput };
+export { SearchComponent as Search, SearchButton, SearchClear, SearchInput };

package/dist/esm/components/search/search-button.js

@@ -8,8 +8,8 @@ import { Button } from '../button/button.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Button>Søk</Search.Button>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
  * </Search>
  */
 const SearchButton = forwardRef(function SearchButton({ children = 'Søk', ...rest }, ref) {

package/dist/esm/components/search/search-clear.js

@@ -9,8 +9,8 @@ import { setReactInputValue } from '../Combobox/utilities.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
- *   <Search.Clear />
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
  * </Search>
  */
 const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {

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

@@ -8,7 +8,7 @@ import { Input } from '../input/input.js';
  *
  * @example
  * <Search>
- *   <Search.Input aria-label='Søk' />
+ *   <SearchInput aria-label='Søk' />
  * </Search>
  */
 const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {

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

@@ -1,5 +1,5 @@
 'use client';
-import { Select as Select$1 } from './select.js';
+import { Select } from './select.js';
 import { SelectOptgroup } from './select-optgroup.js';
 import { SelectOption } from './select-option.js';
 
@@ -12,11 +12,11 @@ import { SelectOption } from './select-option.js';
  *   <Select.Option value='2'>Option 2</Select.Option>
  * </Select>
  */
-const Select = Object.assign(Select$1, {
+const SelectComponent = Object.assign(Select, {
     Option: SelectOption,
     Optgroup: SelectOptgroup,
 });
-Select.Option.displayName = 'Select.Option';
-Select.Optgroup.displayName = 'Select.Optgroup';
+SelectComponent.Option.displayName = 'Select.Option';
+SelectComponent.Optgroup.displayName = 'Select.Optgroup';
 
-export { Select, SelectOptgroup, SelectOption };
+export { SelectComponent as Select, SelectOptgroup, SelectOption };

package/dist/esm/components/select/select-optgroup.js

@@ -8,10 +8,10 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Optgroup label='Group 1'>
- *     <Select.Option value='1'>Option 1</Select.Option>
- *     <Select.Option value='2'>Option 2</Select.Option>
- *   </Select.Optgroup>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
  * </Select>
  */
 const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {

package/dist/esm/components/select/select-option.js

@@ -8,8 +8,8 @@ import { forwardRef } from 'react';
  *
  * @example
  * <Select>
- *   <Select.Option value='1'>Option 1</Select.Option>
- *   <Select.Option value='2'>Option 2</Select.Option>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
  * </Select>
  */
 const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {

package/dist/esm/components/skeleton/skeleton.js

@@ -3,8 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Skeleton is used to represent a draft of page while the content loads.

package/dist/esm/components/spinner/spinner.js

@@ -2,8 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.js';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
 
 /**
  * Spinner component used for indicating busy or indeterminate loading.

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

@@ -1,6 +1,5 @@
 'use client';
 import { Suggestion } from './suggestion.js';
-import { SuggestionChips } from './suggestion-chips.js';
 import { SuggestionClear } from './suggestion-clear.js';
 import { SuggestionEmpty } from './suggestion-empty.js';
 import { SuggestionInput } from './suggestion-input.js';
@@ -22,7 +21,6 @@ import { SuggestionOption } from './suggestion-option.js';
  * </Suggestion>
  */
 const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
-    Chips: SuggestionChips,
     List: SuggestionList,
     Input: SuggestionInput,
     Empty: SuggestionEmpty,
@@ -30,11 +28,10 @@ const EXPERIMENTAL_Suggestion = Object.assign(Suggestion, {
     Clear: SuggestionClear,
 });
 EXPERIMENTAL_Suggestion.displayName = 'EXPERIMENTAL_Suggestion';
-EXPERIMENTAL_Suggestion.Chips.displayName = 'EXPERIMENTAL_Suggestion.Chips';
 EXPERIMENTAL_Suggestion.List.displayName = 'EXPERIMENTAL_Suggestion.List';
 EXPERIMENTAL_Suggestion.Input.displayName = 'EXPERIMENTAL_Suggestion.Input';
 EXPERIMENTAL_Suggestion.Empty.displayName = 'EXPERIMENTAL_Suggestion.Empty';
 EXPERIMENTAL_Suggestion.Option.displayName = 'EXPERIMENTAL_Suggestion.Option';
 EXPERIMENTAL_Suggestion.Clear.displayName = 'EXPERIMENTAL_Suggestion.Clear';
 
-export { EXPERIMENTAL_Suggestion, SuggestionChips as EXPERIMENTAL_SuggestionChips, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };
+export { EXPERIMENTAL_Suggestion, SuggestionClear as EXPERIMENTAL_SuggestionClear, SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty, SuggestionInput as EXPERIMENTAL_SuggestionInput, SuggestionList as EXPERIMENTAL_SuggestionList, SuggestionOption as EXPERIMENTAL_SuggestionOption };

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

@@ -15,7 +15,7 @@ import { Button } from '../button/button.js';
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+const SuggestionClear = forwardRef(function SuggestionClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
     return (jsx(Button, { "aria-label": label, asChild: true, icon: true, hidden: true, ref: ref, variant: 'tertiary', ...rest, children: jsx("del", {}) }));
 });
 

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

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useEffect } from 'react';
 import '@u-elements/u-datalist';
+import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
 import { SuggestionContext } from './suggestion.js';
 
 /**
@@ -15,10 +16,47 @@ import { SuggestionContext } from './suggestion.js';
  *   <Suggestion.List />
  * </Suggestion>
  */
-const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
-    const { handleFilter } = useContext(SuggestionContext);
+const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, autoPlacement = true, ...rest }, ref) {
+    const { handleFilter, uComboboxRef } = useContext(SuggestionContext);
     useEffect(handleFilter); // Must run on every render
-    return (jsx("u-datalist", { "data-nofilter": true, "data-sr-singular": singular, "data-sr-plural": plural, class: className, ref: ref, ...rest }));
+    // Position with floating-ui
+    useEffect(() => {
+        const trigger = uComboboxRef?.current?.control;
+        const list = uComboboxRef?.current?.list;
+        if (list && trigger) {
+            return autoUpdate(trigger, list, () => {
+                computePosition(trigger, list, {
+                    placement: 'bottom',
+                    strategy: 'fixed',
+                    middleware: [
+                        ...(autoPlacement
+                            ? [
+                                flip({
+                                    fallbackAxisSideDirection: 'start',
+                                    fallbackPlacements: ['top'],
+                                }),
+                                shift(),
+                            ]
+                            : []),
+                        undefined,
+                        triggerWidth,
+                    ],
+                }).then(({ x, y, placement }) => {
+                    const varOperator = placement.startsWith('top') ? '-' : '+';
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px ${varOperator} var(--dsc-suggestion-list-gap))`;
+                });
+            });
+        }
+    }, []);
+    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',
+    fn(data) {
+        const { elements, rects } = data;
+        elements.floating.style.width = `${rects.reference.width}px`;
+        return data;
+    },
+};
 
 export { SuggestionList };

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

@@ -1,45 +1,44 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, createContext } from 'react';
 import '@u-elements/u-combobox';
 import cl from 'clsx/lite';
 import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
+import { Chip as ChipComponent } from '../chip/index.js';
 
-const SuggestionContext = createContext({
-    handleFilter: () => undefined,
-});
 const text = (el) => el.textContent?.trim() || '';
-const sanitizeItems = (values = []) => (typeof values === 'string'
+const sanitizeItems = (values = []) => typeof values === 'string'
     ? [{ label: values, value: values }]
-    : values.map((value) => typeof value === 'string'
-        ? { label: value, value }
-        : {
-            label: value.label || value.value || '',
-            value: value.value || '',
-        })).filter((x) => !!x.label);
+    : !Array.isArray(values)
+        ? [values]
+        : values.map((value) => typeof value === 'string' ? { label: value, value } : value);
 const nextItems = (data, prev, multiple) => {
     const item = { label: text(data), value: data.value };
     if (!multiple)
-        return data.isConnected ? [] : [item];
+        return data.isConnected ? undefined : item;
     return data.isConnected
         ? sanitizeItems(prev).filter(({ value }) => value !== item.value)
         : [...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 Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultSelected, filter = true, multiple = false, name, onBeforeMatch, onSelectedChange, renderSelected = ({ label }) => label, selected, ...rest }, ref) {
     const uComboboxRef = useRef(null);
-    const generatedSelectId = useId();
-    const selectId = rest.id ? `${rest.id}-select` : generatedSelectId;
-    const isContolled = value !== undefined;
+    const genId = useId();
+    const selectId = rest.id ? `${rest.id}-select` : genId;
+    const isControlled = selected !== undefined;
     const mergedRefs = useMergeRefs([ref, uComboboxRef]);
     const [isEmpty, setIsEmpty] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(sanitizeItems(defaultValue || value));
-    // 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;
+    const onSelectedChangeRef = useRef(onSelectedChange);
+    const selectedItemsRef = useRef(selectedItems);
+    // Keep the ref updated with the latest callback
+    useEffect(() => {
+        onSelectedChangeRef.current = onSelectedChange;
+    }, [onSelectedChange]);
+    useEffect(() => {
+        selectedItemsRef.current = selectedItems;
+    }, [selectedItems]);
     /**
      * Listerners and handling of adding/removing
      */
@@ -49,14 +48,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));
-            else
-                setSelectedItems((prevItems) => nextItems(data, prevItems, multiple));
+            const nextItem = nextItems(data, selectedItemsRef.current, multiple);
+            onSelectedChangeRef.current?.(nextItem || null);
+            if (!isControlled)
+                setDefaultItems(sanitizeItems(nextItem));
         };
-        combobox?.addEventListener('beforechange', beforeChange);
-        return () => combobox?.removeEventListener('beforechange', beforeChange);
-    }, [isContolled, setSelectedItems]);
+        combobox?.addEventListener('comboboxbeforeselect', beforeChange);
+        return () => combobox?.removeEventListener('comboboxbeforeselect', beforeChange);
+    }, [isControlled]);
+    // Before match event listener
+    useEffect(() => {
+        const combobox = uComboboxRef.current;
+        const beforeMatch = (e) => onBeforeMatch?.(e);
+        combobox?.addEventListener('comboboxbeforematch', beforeMatch);
+        return () => combobox?.removeEventListener('comboboxbeforematch', beforeMatch);
+    }, [onBeforeMatch]);
     const handleFilter = useCallback(() => {
         const { control: input, options = [] } = uComboboxRef?.current || {};
         const filterFn = filter === true ? defaultFilter : filter;
@@ -78,7 +84,10 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
             }
         setIsEmpty(index === disabled);
     }, [filter]);
-    return (jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, 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(ChipComponent.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 }))] }) }));
+});
+const SuggestionContext = createContext({
+    handleFilter: () => undefined,
 });
 
 export { Suggestion, SuggestionContext };