@digdir/designsystemet-react 1.0.0 → 1.0.1

package/dist/cjs/components/MultiSuggestion/MultiSuggestion.js

@@ -0,0 +1,160 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-tags');
+var react$1 = require('@floating-ui/react');
+var uDatalist = require('@u-elements/u-datalist');
+var cl = require('clsx/lite');
+
+const MultiSuggestionContext = react.createContext({});
+const MultiSuggestion = react.forwardRef(function MultiSuggestion({ value, defaultValue, onValueChange, name, filter = true, allowCreate = false, className, ...rest }, ref) {
+    const [listId, setListId] = react.useState(react.useId());
+    const [selectedItems, setSelectedItems] = react.useState({});
+    const inputRef = react.useRef(null);
+    const uTagsRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([ref, uTagsRef]);
+    const isControlled = Boolean(value);
+    const [controlledDirty, setControlledDirty] = react.useState(false);
+    /**
+     * If we have set a default value, set it on initial render
+     */
+    react.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
+     */
+    react.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
+     */
+    react.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 || [], uDatalist.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
+     */
+    react.useEffect(() => {
+        if (!controlledDirty)
+            return;
+        onValueChange?.(Object.keys(selectedItems));
+        setControlledDirty(false);
+    }, [controlledDirty]);
+    const handleFilter = react.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: uDatalist.getDatalistValue(option),
+                    });
+            }
+        }
+        uDatalist.syncDatalistState(input); // Sync the datalist state if filter is custom or false
+    }, [filter]);
+    return (jsxRuntime.jsxs(MultiSuggestionContext.Provider, { value: {
+            inputRef,
+            listId,
+            selectedItems,
+            setListId,
+            handleFilter,
+        }, children: [jsxRuntime.jsx("u-tags", { class: cl('ds-multi-suggestion', className), ref: mergedRefs, ...rest }), name && (jsxRuntime.jsx("select", { multiple: true, hidden: true, name: name, children: Object.values(selectedItems).map((item) => (jsxRuntime.jsx("option", { value: item.value }, item.value))) }))] }));
+});
+
+exports.MultiSuggestion = MultiSuggestion;
+exports.MultiSuggestionContext = MultiSuggestionContext;

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

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

package/dist/cjs/components/MultiSuggestion/MultiSuggestionClear.js

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var MultiSuggestion = require('./MultiSuggestion.js');
+var Button = require('../Button/Button.js');
+
+/**
+ * Component that provides a clear button for the MultiSuggestion input.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.Clear />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionClear = react.forwardRef(function MultiSuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const { inputRef } = react.useContext(MultiSuggestion.MultiSuggestionContext); //, handleValueChange
+    const handleClear = (event) => {
+        if (!inputRef?.current)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(inputRef?.current instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        event.preventDefault();
+        setReactInputValue(inputRef.current, '');
+        inputRef.current.focus();
+        onClick?.(event);
+    };
+    return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
+const setReactInputValue = (input, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
+    }
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+};
+
+exports.MultiSuggestionClear = MultiSuggestionClear;
+exports.setReactInputValue = setReactInputValue;

package/dist/cjs/components/MultiSuggestion/MultiSuggestionEmpty.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+/**
+ * Component that provides an empty MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion.List`
+ *
+ * @example
+ * <MultiSuggestion.List>
+ *   <MultiSuggestion.Empty>Tomt</MultiSuggestion.Empty>
+ * </MultiSuggestion.List>
+ */
+const MultiSuggestionEmpty = react.forwardRef(function MultiSuggestionEmpty(rest, ref) {
+    return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    jsxRuntime.jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionEmpty = MultiSuggestionEmpty;

package/dist/cjs/components/MultiSuggestion/MultiSuggestionInput.js

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var uDatalist = require('@u-elements/u-datalist');
+var react = require('react');
+var MultiSuggestion = require('./MultiSuggestion.js');
+var Input = require('../Input/Input.js');
+
+/**
+ * Component that provides an input field for the MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionInput = react.forwardRef(function MultiSuggestionList({ value, onInput, ...rest }, ref) {
+    const { listId, inputRef, handleFilter } = react.useContext(MultiSuggestion.MultiSuggestionContext);
+    const mergedRefs = react$1.useMergeRefs([inputRef, ref]);
+    // Update also if controlled value
+    react.useEffect(() => {
+        handleFilter?.(inputRef?.current);
+    }, [value]);
+    return (jsxRuntime.jsx(Input.Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+            onInput?.(event); // Should run first
+            if (!uDatalist.isDatalistClick(event.nativeEvent))
+                handleFilter?.(inputRef?.current);
+        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ...rest }));
+});
+
+exports.MultiSuggestionInput = MultiSuggestionInput;

package/dist/cjs/components/MultiSuggestion/MultiSuggestionList.js

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+var MultiSuggestion = require('./MultiSuggestion.js');
+
+/**
+ * Component that provides a MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionList = react.forwardRef(function MultiSuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = react.useContext(MultiSuggestion.MultiSuggestionContext);
+    react.useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    react.useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsxRuntime.jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionList = MultiSuggestionList;

package/dist/cjs/components/MultiSuggestion/MultiSuggestionOption.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('@u-elements/u-datalist');
+
+const MultiSuggestionOption = react.forwardRef(function MultiSuggestionOption({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+exports.MultiSuggestionOption = MultiSuggestionOption;

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

@@ -0,0 +1,34 @@
+'use client';
+'use strict';
+
+var MultiSuggestion$1 = require('./MultiSuggestion.js');
+var MultiSuggestionChips = require('./MultiSuggestionChips.js');
+var MultiSuggestionClear = require('./MultiSuggestionClear.js');
+var MultiSuggestionEmpty = require('./MultiSuggestionEmpty.js');
+var MultiSuggestionInput = require('./MultiSuggestionInput.js');
+var MultiSuggestionList = require('./MultiSuggestionList.js');
+var MultiSuggestionOption = require('./MultiSuggestionOption.js');
+
+const MultiSuggestion = Object.assign(MultiSuggestion$1.MultiSuggestion, {
+    Input: MultiSuggestionInput.MultiSuggestionInput,
+    List: MultiSuggestionList.MultiSuggestionList,
+    Option: MultiSuggestionOption.MultiSuggestionOption,
+    Chips: MultiSuggestionChips.MultiSuggestionChips,
+    Empty: MultiSuggestionEmpty.MultiSuggestionEmpty,
+    Clear: MultiSuggestionClear.MultiSuggestionClear,
+});
+MultiSuggestion.displayName = 'EXPERIMENTRAL_MultiSuggestion';
+MultiSuggestion.Input.displayName = 'EXPERIMENTRAL_MultiSuggestion.Input';
+MultiSuggestion.List.displayName = 'EXPERIMENTRAL_MultiSuggestion.List';
+MultiSuggestion.Option.displayName = 'EXPERIMENTRAL_MultiSuggestion.Option';
+MultiSuggestion.Chips.displayName = 'EXPERIMENTRAL_MultiSuggestion.Chips';
+MultiSuggestion.Empty.displayName = 'EXPERIMENTRAL_MultiSuggestion.Empty';
+MultiSuggestion.Clear.displayName = 'EXPERIMENTRAL_MultiSuggestion.Clear';
+
+exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
+exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
+exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
+exports.EXPERIMENTAL_MultiSuggestionInput = MultiSuggestionInput.MultiSuggestionInput;
+exports.EXPERIMENTAL_MultiSuggestionList = MultiSuggestionList.MultiSuggestionList;
+exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggestionOption;
+exports.EXPERIMENTAL_MultiSuggestion = MultiSuggestion;

package/dist/cjs/index.js

@@ -96,6 +96,13 @@ var SuggestionInput = require('./components/Suggestion/SuggestionInput.js');
 var SuggestionEmpty = require('./components/Suggestion/SuggestionEmpty.js');
 var SuggestionOption = require('./components/Suggestion/SuggestionOption.js');
 var SuggestionClear = require('./components/Suggestion/SuggestionClear.js');
+var index$k = require('./components/MultiSuggestion/index.js');
+var MultiSuggestionInput = require('./components/MultiSuggestion/MultiSuggestionInput.js');
+var MultiSuggestionList = require('./components/MultiSuggestion/MultiSuggestionList.js');
+var MultiSuggestionOption = require('./components/MultiSuggestion/MultiSuggestionOption.js');
+var MultiSuggestionChips = require('./components/MultiSuggestion/MultiSuggestionChips.js');
+var MultiSuggestionEmpty = require('./components/MultiSuggestion/MultiSuggestionEmpty.js');
+var MultiSuggestionClear = require('./components/MultiSuggestion/MultiSuggestionClear.js');
 var omit = require('./utilities/omit/omit.js');
 var useCheckboxGroup = require('./utilities/hooks/useCheckboxGroup/useCheckboxGroup.js');
 var useDebounceCallback = require('./utilities/hooks/useDebounceCallback/useDebounceCallback.js');
@@ -210,6 +217,13 @@ exports.EXPERIMENTAL_SuggestionInput = SuggestionInput.SuggestionInput;
 exports.EXPERIMENTAL_SuggestionEmpty = SuggestionEmpty.SuggestionEmpty;
 exports.EXPERIMENTAL_SuggestionOption = SuggestionOption.SuggestionOption;
 exports.EXPERIMENTAL_SuggestionClear = SuggestionClear.SuggestionClear;
+exports.EXPERIMENTAL_MultiSuggestion = index$k.EXPERIMENTAL_MultiSuggestion;
+exports.EXPERIMENTAL_MultiSuggestionInput = MultiSuggestionInput.MultiSuggestionInput;
+exports.EXPERIMENTAL_MultiSuggestionList = MultiSuggestionList.MultiSuggestionList;
+exports.EXPERIMENTAL_MultiSuggestionOption = MultiSuggestionOption.MultiSuggestionOption;
+exports.EXPERIMENTAL_MultiSuggestionChips = MultiSuggestionChips.MultiSuggestionChips;
+exports.EXPERIMENTAL_MultiSuggestionEmpty = MultiSuggestionEmpty.MultiSuggestionEmpty;
+exports.EXPERIMENTAL_MultiSuggestionClear = MultiSuggestionClear.MultiSuggestionClear;
 exports.omit = omit.omit;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useDebounceCallback = useDebounceCallback.useDebounceCallback;

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 };

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

@@ -0,0 +1,49 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { MultiSuggestionContext } from './MultiSuggestion.js';
+import { Button } from '../Button/Button.js';
+
+/**
+ * Component that provides a clear button for the MultiSuggestion input.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.Clear />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionClear = forwardRef(function MultiSuggestionClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
+    const { inputRef } = useContext(MultiSuggestionContext); //, handleValueChange
+    const handleClear = (event) => {
+        if (!inputRef?.current)
+            throw new Error('Input is missing');
+        /* narrow type to make TS happy */
+        if (!(inputRef?.current instanceof HTMLInputElement))
+            throw new Error('Input is not an input element');
+        event.preventDefault();
+        setReactInputValue(inputRef.current, '');
+        inputRef.current.focus();
+        onClick?.(event);
+    };
+    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+});
+// Copied from https://github.com/facebook/react/issues/11488#issuecomment-1300987446
+const setReactInputValue = (input, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(input, value);
+    }
+    else {
+        throw new Error('Unable to find the native input value setter');
+    }
+    const inputEvent = new Event('input', { bubbles: true });
+    const changeEvent = new Event('change', { bubbles: true });
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+};
+
+export { MultiSuggestionClear, setReactInputValue };

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+/**
+ * Component that provides an empty MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion.List`
+ *
+ * @example
+ * <MultiSuggestion.List>
+ *   <MultiSuggestion.Empty>Tomt</MultiSuggestion.Empty>
+ * </MultiSuggestion.List>
+ */
+const MultiSuggestionEmpty = forwardRef(function MultiSuggestionEmpty(rest, ref) {
+    return (
+    // biome-ignore lint/a11y/noInteractiveElementToNoninteractiveRole: Empty option shoult not be interactive
+    jsx("u-option", { "data-empty": true, role: 'none', ref: ref, ...rest }));
+});
+
+export { MultiSuggestionEmpty };

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { isDatalistClick } from '@u-elements/u-datalist';
+import { forwardRef, useContext, useEffect } from 'react';
+import { MultiSuggestionContext } from './MultiSuggestion.js';
+import { Input } from '../Input/Input.js';
+
+/**
+ * Component that provides an input field for the MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionInput = forwardRef(function MultiSuggestionList({ value, onInput, ...rest }, ref) {
+    const { listId, inputRef, handleFilter } = useContext(MultiSuggestionContext);
+    const mergedRefs = useMergeRefs([inputRef, ref]);
+    // Update also if controlled value
+    useEffect(() => {
+        handleFilter?.(inputRef?.current);
+    }, [value]);
+    return (jsx(Input, { ref: mergedRefs, list: listId, value: value, onInput: (event) => {
+            onInput?.(event); // Should run first
+            if (!isDatalistClick(event.nativeEvent))
+                handleFilter?.(inputRef?.current);
+        }, placeholder: '' // We need an empty placeholder for the clear button to be able to show/hide
+        , ...rest }));
+});
+
+export { MultiSuggestionInput };

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useEffect } from 'react';
+import '@u-elements/u-datalist';
+import { MultiSuggestionContext } from './MultiSuggestion.js';
+
+/**
+ * Component that provides a MultiSuggestion list.
+ *
+ * Place as a descendant of `MultiSuggestion`
+ *
+ * @example
+ * <MultiSuggestion>
+ *   <MultiSuggestion.Input />
+ *   <MultiSuggestion.List />
+ * </MultiSuggestion>
+ */
+const MultiSuggestionList = forwardRef(function MultiSuggestionList({ singular = '%d forslag', plural = '%d forslag', className, id, ...rest }, ref) {
+    const { inputRef, listId, setListId, handleFilter } = useContext(MultiSuggestionContext);
+    useEffect(() => handleFilter?.(inputRef?.current)); // Must run on every render
+    useEffect(() => {
+        if (id && listId !== id)
+            setListId?.(id);
+    }, [listId, id, setListId]);
+    return (jsx("u-datalist", { "data-sr-singular": singular, "data-sr-plural": plural, class: className, id: listId, ref: ref, ...rest }));
+});
+
+export { MultiSuggestionList };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '@u-elements/u-datalist';
+
+const MultiSuggestionOption = forwardRef(function MultiSuggestionOption({ className, ...rest }, ref) {
+    return (jsx("u-option", { class: className, ref: ref, ...rest }));
+});
+
+export { MultiSuggestionOption };

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

@@ -0,0 +1,26 @@
+'use client';
+import { MultiSuggestion as MultiSuggestion$1 } from './MultiSuggestion.js';
+import { MultiSuggestionChips } from './MultiSuggestionChips.js';
+import { MultiSuggestionClear } from './MultiSuggestionClear.js';
+import { MultiSuggestionEmpty } from './MultiSuggestionEmpty.js';
+import { MultiSuggestionInput } from './MultiSuggestionInput.js';
+import { MultiSuggestionList } from './MultiSuggestionList.js';
+import { MultiSuggestionOption } from './MultiSuggestionOption.js';
+
+const MultiSuggestion = Object.assign(MultiSuggestion$1, {
+    Input: MultiSuggestionInput,
+    List: MultiSuggestionList,
+    Option: MultiSuggestionOption,
+    Chips: MultiSuggestionChips,
+    Empty: MultiSuggestionEmpty,
+    Clear: MultiSuggestionClear,
+});
+MultiSuggestion.displayName = 'EXPERIMENTRAL_MultiSuggestion';
+MultiSuggestion.Input.displayName = 'EXPERIMENTRAL_MultiSuggestion.Input';
+MultiSuggestion.List.displayName = 'EXPERIMENTRAL_MultiSuggestion.List';
+MultiSuggestion.Option.displayName = 'EXPERIMENTRAL_MultiSuggestion.Option';
+MultiSuggestion.Chips.displayName = 'EXPERIMENTRAL_MultiSuggestion.Chips';
+MultiSuggestion.Empty.displayName = 'EXPERIMENTRAL_MultiSuggestion.Empty';
+MultiSuggestion.Clear.displayName = 'EXPERIMENTRAL_MultiSuggestion.Clear';
+
+export { MultiSuggestion as EXPERIMENTAL_MultiSuggestion, MultiSuggestionChips as EXPERIMENTAL_MultiSuggestionChips, MultiSuggestionClear as EXPERIMENTAL_MultiSuggestionClear, MultiSuggestionEmpty as EXPERIMENTAL_MultiSuggestionEmpty, MultiSuggestionInput as EXPERIMENTAL_MultiSuggestionInput, MultiSuggestionList as EXPERIMENTAL_MultiSuggestionList, MultiSuggestionOption as EXPERIMENTAL_MultiSuggestionOption };

package/dist/esm/index.js

@@ -94,6 +94,13 @@ export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/Su
 export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/Suggestion/SuggestionEmpty.js';
 export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/Suggestion/SuggestionOption.js';
 export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/Suggestion/SuggestionClear.js';
+export { EXPERIMENTAL_MultiSuggestion } from './components/MultiSuggestion/index.js';
+export { MultiSuggestionInput as EXPERIMENTAL_MultiSuggestionInput } from './components/MultiSuggestion/MultiSuggestionInput.js';
+export { MultiSuggestionList as EXPERIMENTAL_MultiSuggestionList } from './components/MultiSuggestion/MultiSuggestionList.js';
+export { MultiSuggestionOption as EXPERIMENTAL_MultiSuggestionOption } from './components/MultiSuggestion/MultiSuggestionOption.js';
+export { MultiSuggestionChips as EXPERIMENTAL_MultiSuggestionChips } from './components/MultiSuggestion/MultiSuggestionChips.js';
+export { MultiSuggestionEmpty as EXPERIMENTAL_MultiSuggestionEmpty } from './components/MultiSuggestion/MultiSuggestionEmpty.js';
+export { MultiSuggestionClear as EXPERIMENTAL_MultiSuggestionClear } from './components/MultiSuggestion/MultiSuggestionClear.js';
 export { omit } from './utilities/omit/omit.js';
 export { useCheckboxGroup } from './utilities/hooks/useCheckboxGroup/useCheckboxGroup.js';
 export { useDebounceCallback } from './utilities/hooks/useDebounceCallback/useDebounceCallback.js';

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

@@ -38,4 +38,5 @@ export * from './Combobox';
 export * from './Table';
 export * from './ErrorSummary';
 export * from './Suggestion';
+export * from './MultiSuggestion';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {