@digdir/designsystemet-react 0.0.0-deps-tsdown-20260421103939

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2024 Digitaliseringsdirektoratet (Digdir)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# @digdir/designsystemet-react
+
+React implementation of the Designsystemet components
+
+- Uses `@digdir/designsystemet-css` for styling.
+- Uses `@digdir/designsystemet-css/theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
+  - Build your own theme on https://theme.designsystemet.no/en
+- All components support `ref`.
+- All components support SSR.
+  - Use full component name, e.g. `CardBlock` instead of `Card.Block`
+- Most components extend and behave as native html-elements.
+- Most components support composition and `asChild` for overriding the underlying html-element.
+
+Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

package/dist/cjs/components/Combobox/Combobox.js

@@ -0,0 +1,206 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactVirtual = require('@tanstack/react-virtual');
+var cl = require('clsx/lite');
+var react = require('react');
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('@digdir/designsystemet-web');
+require('../../utilities/roving-focus/roving-focus-item.js');
+require('../../utilities/roving-focus/roving-focus-root.js');
+var spinner = require('../spinner/spinner.js');
+var ComboboxContext = require('./ComboboxContext.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var Custom = require('./Custom.js');
+var ComboboxError = require('./internal/ComboboxError.js');
+var ComboboxInput = require('./internal/ComboboxInput.js');
+var ComboboxLabel = require('./internal/ComboboxLabel.js');
+var ComboboxNative = require('./internal/ComboboxNative.js');
+var omit = require('./omit/omit.js');
+var useCombobox = require('./useCombobox.js');
+var useComboboxKeyboard = require('./useComboboxKeyboard.js');
+var useFloatingCombobox = require('./useFloatingCombobox.js');
+var useFormField = require('./useFormField/useFormField.js');
+var utilities = require('./utilities.js');
+
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+    const inputRef = react.useRef(null);
+    const portalRef = react.useRef(null);
+    const listRef = react.useRef([]);
+    const [inputValue, setInputValue] = react.useState(rest.inputValue || '');
+    react.useEffect(() => {
+        if (typeof rest.inputValue === 'string') {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox.useCombobox({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        initialValue,
+    });
+    const { open, setOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, } = useFloatingCombobox.useFloatingCombobox({
+        listRef,
+    });
+    const formFieldProps = useFormField.useFormField({
+        disabled,
+        error,
+        errorId,
+        size,
+        description,
+        id,
+    }, 'combobox');
+    // if value is set, set input value to the label of the value
+    react.useEffect(() => {
+        if (value && value.length > 0 && !multiple) {
+            const option = options[utilities.prefix(value[0])];
+            inputRef.current &&
+                utilities.setReactInputValue(inputRef.current, option?.label || '');
+        }
+    }, [multiple, value, options]);
+    react.useEffect(() => {
+        if (value && Object.keys(options).length >= 0) {
+            const updatedSelectedOptions = value.map((option) => {
+                const value = options[utilities.prefix(option)];
+                return value;
+            });
+            setSelectedOptions(updatedSelectedOptions.reduce((acc, value) => {
+                acc[utilities.prefix(value.value)] = value;
+                return acc;
+            }, {}));
+        }
+    }, [multiple, value, options, setSelectedOptions]);
+    // handle click on option, either select or deselect - Handles single or multiple
+    const handleSelectOption = (args) => {
+        const { option, clear, remove } = args;
+        if (clear) {
+            setSelectedOptions({});
+            inputRef.current && utilities.setReactInputValue(inputRef.current, '');
+            onValueChange?.([]);
+            return;
+        }
+        if (!option)
+            return;
+        if (remove) {
+            const newSelectedOptions = { ...selectedOptions };
+            delete newSelectedOptions[utilities.prefix(option.value)];
+            setSelectedOptions(newSelectedOptions);
+            onValueChange?.(Object.keys(newSelectedOptions).map((key) => utilities.removePrefix(key)));
+            return;
+        }
+        const newSelectedOptions = { ...selectedOptions };
+        if (multiple) {
+            if (newSelectedOptions[utilities.prefix(option.value)]) {
+                delete newSelectedOptions[utilities.prefix(option.value)];
+            }
+            else {
+                newSelectedOptions[utilities.prefix(option.value)] = option;
+            }
+            inputRef.current && utilities.setReactInputValue(inputRef.current, '');
+            inputRef.current?.focus();
+        }
+        else {
+            /* clear newSelectedOptions */
+            for (const key of Object.keys(newSelectedOptions)) {
+                delete newSelectedOptions[key];
+            }
+            newSelectedOptions[utilities.prefix(option.value)] = option;
+            inputRef.current &&
+                utilities.setReactInputValue(inputRef.current, option?.label || '');
+            // move cursor to the end of the input
+            setTimeout(() => {
+                inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
+            }, 0);
+        }
+        setSelectedOptions(newSelectedOptions);
+        onValueChange?.(Object.keys(newSelectedOptions).map((key) => utilities.removePrefix(key)));
+        !multiple && setOpen(false);
+        refs.domReference.current?.focus();
+    };
+    const debouncedHandleSelectOption = useDebounceCallback.useDebounceCallback(handleSelectOption, 50);
+    const handleKeyDown = useComboboxKeyboard.useComboboxKeyboard({
+        filteredOptions,
+        selectedOptions,
+        readOnly: formFieldProps.readOnly || false,
+        disabled: disabled,
+        multiple,
+        inputValue,
+        options,
+        open,
+        interactiveChildren,
+        setOpen,
+        handleSelectOption: debouncedHandleSelectOption,
+    });
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+        count: Object.keys(filteredOptionsChildren).length,
+        getScrollElement: () => (virtual ? refs.floating.current : null),
+        estimateSize: () => 70,
+        measureElement: (elem) => {
+            return elem.getBoundingClientRect().height;
+        },
+        overscan: 7,
+    });
+    return (jsxRuntime.jsxs(ComboboxContext.ComboboxContext.Provider, { value: {
+            size,
+            options,
+            selectedOptions,
+            multiple,
+            disabled,
+            readOnly,
+            open,
+            inputRef,
+            refs,
+            inputValue,
+            formFieldProps,
+            htmlSize,
+            clearButtonLabel,
+            customIds,
+            filteredOptions,
+            setInputValue,
+            setOpen,
+            getReferenceProps,
+            getItemProps,
+            /* Recieves the value of the option, and searches for it in our values lookup */
+            onOptionClick: (value) => {
+                if (readOnly)
+                    return;
+                if (disabled)
+                    return;
+                const option = options[utilities.prefix(value)];
+                debouncedHandleSelectOption({ option: option });
+            },
+            handleSelectOption: debouncedHandleSelectOption,
+            chipSrLabel,
+            listRef,
+            forwareddRef,
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
+        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+                            ref: refs.setFloating,
+                            style: {
+                                ...floatingStyles,
+                            },
+                        }), className: cl('ds-combobox__options-wrapper', `ds-combobox--${size}`), children: [virtual && (jsxRuntime.jsx("div", { style: {
+                                    height: `${rowVirtualizer.getTotalSize()}px`,
+                                    width: '100%',
+                                    position: 'relative',
+                                }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => (jsxRuntime.jsx("div", { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, style: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(spinner.Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+});
+const Combobox = react.forwardRef((props, ref) => (jsxRuntime.jsx(ComboboxIdContext.ComboboxIdProvider, { children: jsxRuntime.jsx(ComboboxComponent, { ...props, ref: ref }) })));
+Combobox.displayName = 'Combobox';
+
+exports.Combobox = Combobox;
+exports.ComboboxComponent = ComboboxComponent;

package/dist/cjs/components/Combobox/ComboboxContext.js

@@ -0,0 +1,8 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const ComboboxContext = react.createContext(undefined);
+
+exports.ComboboxContext = ComboboxContext;

package/dist/cjs/components/Combobox/ComboboxIdContext.js

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ComboboxIdContext = react.createContext({
+    activeIndex: 0,
+});
+const ComboboxIdReducer = (state, action) => {
+    switch (action.type) {
+        case 'SET_ACTIVE_INDEX':
+            return {
+                ...state,
+                activeIndex: action.payload,
+            };
+        default:
+            return state;
+    }
+};
+const ComboboxIdDispatch = react.createContext(() => {
+    throw new Error('ComboboxIdDispatch must be used within a provider');
+});
+const ComboboxIdProvider = ({ children }) => {
+    const [state, dispatch] = react.useReducer(ComboboxIdReducer, {
+        activeIndex: 0,
+    });
+    return (jsxRuntime.jsx(ComboboxIdContext.Provider, { value: state, children: jsxRuntime.jsx(ComboboxIdDispatch.Provider, { value: dispatch, children: children }) }));
+};
+function useComboboxIdDispatch() {
+    return react.useContext(ComboboxIdDispatch);
+}
+function useComboboxId() {
+    return react.useContext(ComboboxIdContext);
+}
+
+exports.ComboboxIdContext = ComboboxIdContext;
+exports.ComboboxIdDispatch = ComboboxIdDispatch;
+exports.ComboboxIdProvider = ComboboxIdProvider;
+exports.ComboboxIdReducer = ComboboxIdReducer;
+exports.useComboboxId = useComboboxId;
+exports.useComboboxIdDispatch = useComboboxIdDispatch;

package/dist/cjs/components/Combobox/Custom.js

@@ -0,0 +1,36 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var label = require('../label/label.js');
+var ComboboxContext = require('./ComboboxContext.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var omit = require('./omit/omit.js');
+
+const ComboboxCustom = react.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
+    if (interactive && !id) {
+        throw new Error('If ComboboxCustom is interactive, it must have an id');
+    }
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const randomId = react.useId();
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxCustom must be used within a Combobox');
+    }
+    const { customIds, setListRef, getItemProps, size } = context;
+    const index = react.useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
+    const combinedRef = react$1.useMergeRefs([
+        (node) => {
+            setListRef(index, node);
+        },
+        ref,
+    ]);
+    return (jsxRuntime.jsx(label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit.omit(['interactive'], rest), ...omit.omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+});
+
+exports.ComboboxCustom = ComboboxCustom;

package/dist/cjs/components/Combobox/Empty.js

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var label = require('../label/label.js');
+var ComboboxContext = require('./ComboboxContext.js');
+
+const ComboboxEmpty = react.forwardRef(({ children, className, ...rest }, ref) => {
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxEmpty must be used within a Combobox');
+    }
+    const { filteredOptions, size } = context;
+    return (filteredOptions.length === 0 && (jsxRuntime.jsx(label.Label, { "data-size": size, asChild: true, children: jsxRuntime.jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+exports.ComboboxEmpty = ComboboxEmpty;

package/dist/cjs/components/Combobox/Option/Description.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const ComboboxOptionDescription = react.forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("span", { className: cl('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
+});
+ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
+
+module.exports = ComboboxOptionDescription;

package/dist/cjs/components/Combobox/Option/Option.js

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+var label = require('../../label/label.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var omit = require('../omit/omit.js');
+var Description = require('./Description.js');
+var SelectedIcon = require('./SelectedIcon.js');
+var useComboboxOption = require('./useComboboxOption.js');
+
+const ComboboxOption = react.memo(react.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
+    const labelId = react.useId();
+    const { id, ref, selected, active, onOptionClick } = useComboboxOption.useComboboxOption({
+        id: rest.id,
+        ref: forwardedRef,
+        value,
+    });
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+    }
+    const { size, multiple, getItemProps } = context;
+    const props = getItemProps();
+    return (jsxRuntime.jsx(label.Label, { "data-size": 'md', asChild: true, children: jsxRuntime.jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+                onOptionClick();
+                rest.onClick?.(e);
+            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit.omit(['displayValue'], rest), ...omit.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(label.Label, { asChild: true, "data-size": size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(label.Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description, { children: description }))] })] }) }));
+}));
+ComboboxOption.displayName = 'ComboboxOption';
+function isComboboxOption(child) {
+    return react.isValidElement(child) && child.type === ComboboxOption;
+}
+
+exports.ComboboxOption = ComboboxOption;
+exports.isComboboxOption = isComboboxOption;

package/dist/cjs/components/Combobox/Option/SelectedIcon.js

@@ -0,0 +1,13 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var cl = require('clsx/lite');
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsxRuntime.jsx("div", { className: cl(multiple && 'ds-combobox__option__icon-wrapper', selected && 'ds-combobox__option__icon-wrapper--selected'), children: selected && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: 'ds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+exports.SelectedIcon = SelectedIcon;

package/dist/cjs/components/Combobox/Option/useComboboxOption.js

@@ -0,0 +1,51 @@
+'use client';
+'use strict';
+
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var useDebounceCallback = require('../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
+require('@digdir/designsystemet-web');
+require('../../../utilities/roving-focus/roving-focus-item.js');
+require('../../../utilities/roving-focus/roving-focus-root.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var ComboboxIdContext = require('../ComboboxIdContext.js');
+var utilities = require('../utilities.js');
+
+const useComboboxOption = ({ id, ref, value, }) => {
+    const generatedId = react.useId();
+    const newId = id || generatedId;
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const dispatch = ComboboxIdContext.useComboboxIdDispatch();
+    if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+    }
+    const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions, } = context;
+    const index = react.useMemo(() => filteredOptions.indexOf(utilities.prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
+    const combinedRef = react$1.useMergeRefs([
+        (node) => {
+            setListRef(index, node);
+        },
+        ref,
+    ]);
+    if (index === -1) {
+        throw new Error('Internal error: ComboboxOption did not find index');
+    }
+    const selected = selectedOptions[utilities.prefix(value)];
+    const active = activeIndex === index;
+    react.useEffect(() => {
+        if (active) {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+        }
+    }, [generatedId, id, dispatch, active, index]);
+    const onOptionClickDebounced = useDebounceCallback.useDebounceCallback(() => onOptionClick(value), 50);
+    return {
+        id: newId,
+        ref: combinedRef,
+        selected,
+        active,
+        onOptionClick: onOptionClickDebounced,
+    };
+};
+
+exports.useComboboxOption = useComboboxOption;

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+var Combobox$1 = require('./Combobox.js');
+var Empty = require('./Empty.js');
+var Option = require('./Option/Option.js');
+
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+const Combobox = Combobox$1.Combobox;
+Combobox.Option = Option.ComboboxOption;
+Combobox.Empty = Empty.ComboboxEmpty;
+Combobox.Option.displayName = 'Combobox.Option';
+Combobox.Empty.displayName = 'Combobox.Empty';
+
+exports.ComboboxEmpty = Empty.ComboboxEmpty;
+exports.ComboboxOption = Option.ComboboxOption;
+exports.Combobox = Combobox;

package/dist/cjs/components/Combobox/internal/ComboboxChips.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../chip/index.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var chips = require('../../chip/chips.js');
+
+const ComboboxChips = () => {
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(selectedOptions).map((value) => {
+            return (jsxRuntime.jsx(chips.ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                        handleSelectOption({
+                            option: selectedOptions[value],
+                            remove: true,
+                        });
+                        inputRef?.current?.focus();
+                    }
+                }, onClick: () => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    /* If we click a chip, filter the active values and remove the one we clicked */
+                    handleSelectOption({
+                        option: selectedOptions[value],
+                        remove: true,
+                    });
+                }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
+        }) }));
+};
+ComboboxChips.displayName = 'ComboboxChips';
+
+module.exports = ComboboxChips;

package/dist/cjs/components/Combobox/internal/ComboboxClearButton.js

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var cl = require('clsx/lite');
+var react = require('react');
+var ComboboxContext = require('../ComboboxContext.js');
+
+const ComboboxClearButton = react.forwardRef((props, ref) => {
+    const context = react.useContext(ComboboxContext.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsxRuntime.jsx("button", { ...props, ref: ref, disabled: disabled, className: cl('ds-combobox__clear-button', `ds-focus`), onClick: () => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            handleSelectOption({ option: null, clear: true });
+        }, onKeyDown: (e) => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            if (e.key === 'Enter') {
+                e.stopPropagation();
+                handleSelectOption({ option: null, clear: true });
+            }
+        }, type: 'button', "aria-label": clearButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { height: '1.5em', width: '1.5em', title: 'Clear selection' }) }));
+});
+ComboboxClearButton.displayName = 'ComboboxClearButton';
+
+module.exports = ComboboxClearButton;

package/dist/cjs/components/Combobox/internal/ComboboxError.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var validationMessage = require('../../validation-message/validation-message.js');
+
+const ComboboxError = ({ size, error, formFieldProps }) => {
+    return (jsxRuntime.jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(validationMessage.ValidationMessage, { "data-size": size, children: error }) }));
+};
+ComboboxError.displayName = 'ComboboxError';
+
+module.exports = ComboboxError;