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

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var Field$1 = require('./Field.js');
+var FieldAffix = require('./FieldAffix.js');
+var FieldCounter = require('./FieldCounter.js');
+var FieldDescription = require('./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.Field, {
+    Description: FieldDescription.FieldDescription,
+    Affixes: FieldAffix.FieldAffixes,
+    Affix: FieldAffix.FieldAffix,
+    Counter: FieldCounter.FieldCounter,
+});
+Field.Description.displayName = 'Field.Description';
+Field.Affixes.displayName = 'Field.Affixes';
+Field.Affix.displayName = 'Field.Affix';
+Field.Counter.displayName = 'Field.Counter';
+
+exports.FieldAffix = FieldAffix.FieldAffix;
+exports.FieldAffixes = FieldAffix.FieldAffixes;
+exports.FieldCounter = FieldCounter.FieldCounter;
+exports.FieldDescription = FieldDescription.FieldDescription;
+exports.Field = Field;

package/dist/cjs/components/Fieldset/Fieldset.js

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('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 = react.forwardRef(function Fieldset({ className, ...rest }, ref) {
+    return (jsxRuntime.jsx("fieldset", { className: cl('ds-fieldset', className), ref: ref, ...rest }));
+});
+
+exports.Fieldset = Fieldset;

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Paragraph = require('../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 = react.forwardRef(function FieldsetDescription(rest, ref) {
+    return jsxRuntime.jsx(Paragraph.Paragraph, { ref: ref, ...rest });
+});
+
+exports.FieldsetDescription = FieldsetDescription;

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

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

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

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+var Fieldset$1 = require('./Fieldset.js');
+var FieldsetDescription = require('./FieldsetDescription.js');
+var FieldsetLegend = require('./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.Fieldset, {
+    Legend: FieldsetLegend.FieldsetLegend,
+    Description: FieldsetDescription.FieldsetDescription,
+});
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.Description.displayName = 'Fieldset.Description';
+
+exports.FieldsetDescription = FieldsetDescription.FieldsetDescription;
+exports.FieldsetLegend = FieldsetLegend.FieldsetLegend;
+exports.Fieldset = Fieldset;

package/dist/cjs/components/Heading/Heading.js

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

package/dist/cjs/components/Input/Input.js

@@ -0,0 +1,22 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Input renders a native `input` element.
+ *
+ * @example
+ * <Input />
+ */
+const Input = react.forwardRef(function Input({ type = 'text', className, onChange, onClick, ...rest }, ref) {
+    return (jsxRuntime.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 }));
+});
+
+exports.Input = Input;

package/dist/cjs/components/Label/Label.js

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

package/dist/cjs/components/Link/Link.js

@@ -2,13 +2,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Link = React.forwardRef(({ color = 'accent', asChild, children, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'a';
-    return (jsxRuntime.jsx(Component, { className: lite.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 = react.forwardRef(({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-link', className), ref: ref, ...rest }));
 });
 Link.displayName = 'Link';
 

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

@@ -2,14 +2,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const ListItem = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'li';
-    return (jsxRuntime.jsx(Component, { className: lite.clsx('ds-list__item', className), ...rest, ref: ref }));
+const ListItem = react.forwardRef(function ListItem({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'li';
+    return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
-ListItem.displayName = 'ListItem';
 
 exports.ListItem = ListItem;

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

@@ -2,24 +2,40 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var ListRoot = require('./ListRoot.js');
-var Paragraph = require('../Typography/Paragraph/Paragraph.js');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
 
-const Unordered = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ul';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.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 ? reactSlot.Slot : tagName;
+    return jsxRuntime.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 = react.forwardRef(function ListUnordered(props, ref) {
+    return render('ul', props, ref);
 });
-Unordered.displayName = 'ListUnordered';
-const Ordered = React.forwardRef(({ asChild, ...rest }, ref) => {
-    const { size, headingId } = React.useContext(ListRoot.ListContext);
-    const Component = asChild ? index.Slot : 'ol';
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx(Component, { className: lite.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 = react.forwardRef(function ListOrdered(props, ref) {
+    return render('ol', props, ref);
 });
-Ordered.displayName = 'ListOrdered';
 
-exports.Ordered = Ordered;
-exports.Unordered = Unordered;
+exports.ListOrdered = ListOrdered;
+exports.ListUnordered = ListUnordered;

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

@@ -1,26 +1,19 @@
 'use client';
 'use strict';
 
-var ListRoot = require('./ListRoot.js');
 var ListItem = require('./ListItem.js');
-var ListHeading = require('./ListHeading.js');
 var Lists = require('./Lists.js');
 
-const List = {};
-List.Root = ListRoot.ListRoot;
-List.Item = ListItem.ListItem;
-List.Heading = ListHeading.ListHeading;
-List.Ordered = Lists.Ordered;
-List.Unordered = Lists.Unordered;
-List.Root.displayName = 'List.Root';
+const List = {
+    Item: ListItem.ListItem,
+    Ordered: Lists.ListOrdered,
+    Unordered: Lists.ListUnordered,
+};
 List.Item.displayName = 'List.Item';
-List.Heading.displayName = 'List.Heading';
 List.Ordered.displayName = 'List.Ordered';
 List.Unordered.displayName = 'List.Unordered';
 
-exports.ListRoot = ListRoot.ListRoot;
 exports.ListItem = ListItem.ListItem;
-exports.ListHeading = ListHeading.ListHeading;
-exports.ListOrdered = Lists.Ordered;
-exports.ListUnordered = Lists.Unordered;
+exports.ListOrdered = Lists.ListOrdered;
+exports.ListUnordered = Lists.ListUnordered;
 exports.List = List;

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;