@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.1

package/dist/esm/components/Field/FieldCounter.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { isInputLike } from './fieldObserver.js';
+import { ValidationMessage } from '../ValidationMessage/ValidationMessage.js';
+import { Paragraph } from '../Paragraph/Paragraph.js';
+
+const label = (text, count) => text.replace('%d', Math.abs(count).toString());
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+    const [count, setCount] = useState(0);
+    const counterRef = useRef(null);
+    const hasExceededLimit = count > limit;
+    const remainder = limit - count;
+    useEffect(() => {
+        const field = counterRef.current?.closest('.ds-field');
+        const input = Array.from(field?.getElementsByTagName('*') || []).find(isInputLike);
+        const onInput = ({ target }) => {
+            if (isInputLike(target))
+                setCount(target.value.length);
+        };
+        if (input)
+            onInput({ target: input }); // Initial setup
+        field?.addEventListener('input', onInput);
+        return () => field?.removeEventListener('input', onInput);
+    }, [setCount]);
+    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+});
+
+export { FieldCounter };

package/dist/esm/components/Field/FieldDescription.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
+    return jsx("div", { "data-field": 'description', ref: ref, ...rest });
+});
+
+export { FieldDescription };

package/dist/esm/components/Field/fieldObserver.js

@@ -0,0 +1,97 @@
+'use client';
+function fieldObserver(fieldElement) {
+    if (!fieldElement)
+        return;
+    const elements = new Map();
+    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+    let input = null;
+    let describedby = '';
+    const process = (mutations) => {
+        const changed = [];
+        const removed = [];
+        // Merge MutationRecords
+        for (const mutation of mutations) {
+            if (mutation.attributeName)
+                changed.push(mutation.target ?? fieldElement);
+            changed.push(...(mutation.addedNodes || []));
+            removed.push(...(mutation.removedNodes || []));
+        }
+        // Register elements
+        for (const el of changed) {
+            if (!isElement(el))
+                continue;
+            if (isLabel(el))
+                elements.set(el, el.htmlFor);
+            else if (el.hasAttribute('data-field'))
+                elements.set(el, el.id);
+            else if (isInputLike(el)) {
+                input = el;
+                describedby = el.getAttribute('aria-describedby') || '';
+            }
+        }
+        // Reset removed elements
+        for (const el of removed) {
+            if (!isElement(el))
+                continue;
+            if (input === el)
+                input = null;
+            if (elements.has(el)) {
+                setAttr(el, 'aria-disabled', null); // Reset disabled state
+                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
+                elements.delete(el);
+            }
+        }
+        // Connect elements
+        const describedbyIds = [describedby]; // Keep original aria-describedby
+        const inputId = input?.id || uuid;
+        const isDisabled = input?.hasAttribute('disabled') ||
+            input?.getAttribute('aria-disabled') === 'true';
+        for (const [el, value] of elements) {
+            const descriptionType = el.getAttribute('data-field');
+            const id = descriptionType ? `${inputId}:${descriptionType}` : inputId;
+            setAttr(el, 'aria-disabled', isDisabled ? 'true' : null); // Forward inputs disabled state to related elements to make axe tests happy
+            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
+        }
+        setAttr(input, 'id', inputId);
+        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
+    };
+    const observer = createOptimizedMutationObserver(process);
+    observer.observe(fieldElement, {
+        attributeFilter: ['id', 'for', 'aria-describedby'],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
+    observer.takeRecords(); // Clear initial setup queue
+    return () => observer.disconnect();
+}
+// Utilities
+const isElement = (node) => node instanceof Element;
+const isLabel = (node) => node instanceof HTMLLabelElement;
+const isInputLike = (node) => node instanceof HTMLElement &&
+    'validity' in node &&
+    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
+const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
+// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
+function createOptimizedMutationObserver(callback) {
+    const queue = [];
+    const observer = new MutationObserver((mutations) => {
+        if (!queue.length)
+            requestAnimationFrame(process);
+        queue.push(...mutations);
+    });
+    const process = () => {
+        callback(queue, observer);
+        queue.length = 0; // Reset queue
+        observer.takeRecords(); // Clear queue due to DOM changes in callback
+    };
+    return observer;
+}
+
+export { fieldObserver, isElement, isInputLike, isLabel };

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

@@ -0,0 +1,29 @@
+'use client';
+import { Field as Field$1 } from './Field.js';
+import { FieldAffix, FieldAffixes } from './FieldAffix.js';
+import { FieldCounter } from './FieldCounter.js';
+import { FieldDescription } from './FieldDescription.js';
+
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field data-my-field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+const Field = Object.assign(Field$1, {
+    Description: FieldDescription,
+    Affixes: FieldAffixes,
+    Affix: FieldAffix,
+    Counter: FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+export { Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/Fieldset/Fieldset.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
+});
+
+export { Fieldset };

package/dist/esm/components/Fieldset/FieldsetDescription.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Paragraph } from '../Paragraph/Paragraph.js';
+
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <Fieldset.Description>
+ *   Gi en kort beskrivelse i begge feltene
+ * </Fieldset.Description>
+ */
+const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
+    return jsx(Paragraph, { ref: ref, ...rest });
+});
+
+export { FieldsetDescription };

package/dist/esm/components/Fieldset/FieldsetLegend.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Label } from '../Label/Label.js';
+
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ */
+const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
+    return (jsx(Label, { asChild: true, children: jsx("legend", { ref: ref, ...rest }) }));
+});
+
+export { FieldsetLegend };

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

@@ -0,0 +1,28 @@
+'use client';
+import { Fieldset as Fieldset$1 } from './Fieldset.js';
+import { FieldsetDescription } from './FieldsetDescription.js';
+import { FieldsetLegend } from './FieldsetLegend.js';
+
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+const Fieldset = Object.assign(Fieldset$1, {
+    Legend: FieldsetLegend,
+    Description: FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+export { Fieldset, FieldsetDescription, FieldsetLegend };

package/dist/esm/components/Heading/Heading.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Heading` to render h1-6 elements with heading text styles.
+ *
+ * @example
+ * <Heading data-size='lg' level={2}>Heading</Heading>
+ */
+const Heading = forwardRef(function Heading({ level = 2, className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : `h${level}`;
+    return (jsx(Component, { className: cl(`ds-heading`, className), ref: ref, ...rest }));
+});
+
+export { Heading };

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsx("input", { className: cl(`ds-input`, className), ref: ref, type: type, onChange: (event) => rest.readOnly || onChange?.(event), onClick: (event) => {
+            if (rest.readOnly)
+                event.preventDefault(); // Make readonly work for checkbox / radio / switch
+            onClick?.(event);
+        }, ...rest }));
+});
+
+export { Input };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `Label` for labels. Renders a native `label` element.
+ *
+ * @example
+ * <Label data-size='lg' weight='medium'>Label</Label>
+ */
+const Label = forwardRef(function Label({ className, weight = 'medium', asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'label';
+    return (jsx(Component, { ref: ref, className: cl('ds-label', className), "data-weight": weight, ...rest }));
+});
+
+export { Label };

package/dist/esm/components/Link/Link.js

@@ -1,12 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const Link = forwardRef(({ color = 'accent', asChild, children, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'a';
-    return (jsx(Component, { className: clsx('ds-link', `ds-link--${color}`, className), ref: ref, ...rest, children: children }));
+/**
+ * Link component, renders a native `a` element.
+ *
+ * @example
+ * <Link href='#'>Link</Link>
+ */
+const Link = forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'a';
+    return (jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

package/dist/esm/components/List/ListItem.js

@@ -1,13 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
-const ListItem = forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'li';
-    return (jsx(Component, { className: clsx('ds-list__item', className), ...rest, ref: ref }));
+const ListItem = forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'li';
+    return jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 export { ListItem };

package/dist/esm/components/List/Lists.js

@@ -1,22 +1,38 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { ListContext } from './ListRoot.js';
-import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
 
-const Unordered = forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = useContext(ListContext);
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ul';
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+const render = (tagName, { asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : tagName;
+    return jsx(Component, { className: cl(`ds-list`, className), ref: ref, ...rest });
+};
+/**
+ * ListUnordered component, used to display a list of items.
+ * Renders a native `ul` element.
+ *
+ * @example
+ * <List.Unordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Unordered>
+ */
+const ListUnordered = forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
 });
-Unordered.displayName = 'ListUnordered';
-const Ordered = forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = useContext(ListContext);
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'ol';
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsx(Component, { className: clsx(`ds-list`, `ds-list--${size}`, rest.className), ...(headingId ? { 'aria-labelledby': headingId } : {}), ref: ref, ...rest }) }));
+/**
+ * ListOrdered component, used to display a list of items.
+ * Renders a native `ol` element.
+ *
+ * @example
+ * <List.Ordered>
+ *   <List.Item>Item 1</List.Item>
+ *   <List.Item>Item 2</List.Item>
+ * </List.Ordered>
+ */
+const ListOrdered = forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
 });
-Ordered.displayName = 'ListOrdered';
 
-export { Ordered, Unordered };
+export { ListOrdered, ListUnordered };

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

@@ -1,19 +1,14 @@
 'use client';
-import { ListRoot } from './ListRoot.js';
 import { ListItem } from './ListItem.js';
-import { ListHeading } from './ListHeading.js';
-import { Ordered, Unordered } from './Lists.js';
+import { ListUnordered, ListOrdered } from './Lists.js';
 
-const List = {};
-List.Root = ListRoot;
-List.Item = ListItem;
-List.Heading = ListHeading;
-List.Ordered = Ordered;
-List.Unordered = Unordered;
-List.Root.displayName = 'List.Root';
+const List = {
+    Item: ListItem,
+    Ordered: ListOrdered,
+    Unordered: ListUnordered,
+};
 List.Item.displayName = 'List.Item';
-List.Heading.displayName = 'List.Heading';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-export { List, ListHeading, ListItem, Ordered as ListOrdered, ListRoot, Unordered as ListUnordered };
+export { List, ListItem, ListOrdered, ListUnordered };

package/dist/esm/components/MultiSuggestion/MultiSuggestion.js

@@ -0,0 +1,157 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useState, useId, useRef, useEffect, useCallback } from 'react';
+import '@u-elements/u-tags';
+import { useMergeRefs } from '@floating-ui/react';
+import { getDatalistValue, syncDatalistState } from '@u-elements/u-datalist';
+import cl from 'clsx/lite';
+
+const MultiSuggestionContext = createContext({});
+const MultiSuggestion = forwardRef(function MultiSuggestion({ value, defaultValue, onValueChange, name, filter = true, allowCreate = false, className, ...rest }, ref) {
+    const [listId, setListId] = useState(useId());
+    const [selectedItems, setSelectedItems] = useState({});
+    const inputRef = useRef(null);
+    const uTagsRef = useRef(null);
+    const mergedRefs = useMergeRefs([ref, uTagsRef]);
+    const isControlled = Boolean(value);
+    const [controlledDirty, setControlledDirty] = useState(false);
+    /**
+     * If we have set a default value, set it on initial render
+     */
+    useEffect(() => {
+        if (!defaultValue)
+            return;
+        if (value) {
+            console.warn('defaultValue can not be used in combination with value');
+            return;
+        }
+        const items = uTagsRef.current?.querySelectorAll('u-option');
+        if (!items)
+            return;
+        const defaultItems = Array.from(items).filter((item) => defaultValue.includes(item.value));
+        for (const item of defaultItems) {
+            uTagsRef.current?.dispatchEvent(new CustomEvent('add', {
+                detail: { item },
+            }));
+            setSelectedItems((prevItems) => ({
+                ...prevItems,
+                [item.value]: item,
+            }));
+        }
+        return () => {
+            console.error('Default value changed during render');
+        };
+    }, [defaultValue]);
+    /**
+     * Controlled state management
+     */
+    useEffect(() => {
+        if (!value)
+            return;
+        const items = inputRef.current?.list?.options;
+        if (!items)
+            return;
+        const itemsArray = Array.from(items);
+        const itemsArrayValues = itemsArray.map((item) => item.value);
+        const selectedArray = Object.keys(selectedItems);
+        const validValues = value.filter((val) => itemsArrayValues.includes(val));
+        const itemsToAdd = validValues.filter((val) => !selectedArray.includes(val));
+        const itemsToRemove = selectedArray.filter((val) => !validValues.includes(val));
+        for (const item of itemsArray) {
+            if (itemsToAdd.includes(item.value)) {
+                uTagsRef.current?.dispatchEvent(new CustomEvent('add', {
+                    detail: { item },
+                }));
+                setSelectedItems((prevItems) => ({
+                    ...prevItems,
+                    [item.value]: item,
+                }));
+            }
+            if (itemsToRemove.includes(item.value)) {
+                uTagsRef.current?.dispatchEvent(new CustomEvent('remove', {
+                    detail: { item },
+                }));
+                setSelectedItems((prevItems) => {
+                    const { [item.value]: _, ...rest } = prevItems;
+                    return rest;
+                });
+            }
+        }
+    }, [value]);
+    /**
+     * Listerners and handling of adding/removing
+     */
+    useEffect(() => {
+        if (!uTagsRef?.current)
+            return;
+        const handleItemsChange = (e) => {
+            e.preventDefault();
+            const item = e.detail.item;
+            if (e.detail.action === 'add') {
+                /**
+                 * If creating is off, check if the value is allowed to be added
+                 */
+                if (!allowCreate) {
+                    const optionExists = Array.from(inputRef.current?.list?.options || [], getDatalistValue).includes(item.value);
+                    if (!optionExists)
+                        return;
+                }
+                setSelectedItems((prevItems) => ({
+                    ...prevItems,
+                    [item.value]: item,
+                }));
+            }
+            if (e.detail.action === 'remove') {
+                setSelectedItems((prevItems) => {
+                    const { [item.value]: _, ...rest } = prevItems;
+                    return rest;
+                });
+            }
+            if (isControlled)
+                setControlledDirty(true);
+        };
+        uTagsRef.current.addEventListener('tags', handleItemsChange);
+        return () => {
+            uTagsRef.current?.removeEventListener('tags', handleItemsChange);
+        };
+    }, [uTagsRef, setSelectedItems]);
+    /**
+     * When controlled, trigger onValueChange callback for ordinary add/remove
+     */
+    useEffect(() => {
+        if (!controlledDirty)
+            return;
+        onValueChange?.(Object.keys(selectedItems));
+        setControlledDirty(false);
+    }, [controlledDirty]);
+    const handleFilter = useCallback((input) => {
+        const list = input?.list;
+        // Let <datalist> handle filtering if filter is true
+        if (filter === true || !list)
+            return;
+        // Handle custom filter
+        if (filter !== false) {
+            let index = 0;
+            for (const option of list.getElementsByTagName('u-option')) {
+                if (!option.hasAttribute('data-empty'))
+                    option.disabled = !filter({
+                        index: index++, // Increment index for each <option>
+                        input,
+                        optionElement: option,
+                        text: option.text,
+                        value: getDatalistValue(option),
+                    });
+            }
+        }
+        syncDatalistState(input); // Sync the datalist state if filter is custom or false
+    }, [filter]);
+    return (jsxs(MultiSuggestionContext.Provider, { value: {
+            inputRef,
+            listId,
+            selectedItems,
+            setListId,
+            handleFilter,
+        }, children: [jsx("u-tags", { class: cl('ds-multi-suggestion', className), ref: mergedRefs, ...rest }), name && (jsx("select", { multiple: true, hidden: true, name: name, children: Object.values(selectedItems).map((item) => (jsx("option", { value: item.value }, item.value))) }))] }));
+});
+
+export { MultiSuggestion, MultiSuggestionContext };

package/dist/esm/components/MultiSuggestion/MultiSuggestionChips.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Chip } from '../Chip/index.js';
+import { MultiSuggestionContext } from './MultiSuggestion.js';
+
+const MultiSuggestionChips = ({ render = ({ value }) => value, }) => {
+    const { selectedItems } = useContext(MultiSuggestionContext);
+    return (jsx(Fragment, { children: selectedItems &&
+            Object.values(selectedItems).map((item) => (jsx(Chip.Removable, { value: item.value, asChild: true, children: jsx("data", { children: render({
+                        text: item.textContent || item.value,
+                        value: item.value,
+                        element: item,
+                    }) }) }, item.value))) }));
+};
+MultiSuggestionChips.displayName = 'MultiSuggestionChips';
+
+export { MultiSuggestionChips };