@digdir/designsystemet-react 0.52.0-alpha.0

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

@@ -0,0 +1,304 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../node_modules/@tanstack/react-virtual/build/lib/index.js');
+var useFormField = require('../useFormField.js');
+var useDebounce = require('../../../utilities/useDebounce.js');
+var useCombobox = require('./useCombobox.js');
+var Combobox_module = require('./Combobox.module.css.js');
+var ComboboxInput = require('./internal/ComboboxInput.js');
+var ComboboxLabel = require('./internal/ComboboxLabel.js');
+var ComboboxError = require('./internal/ComboboxError.js');
+var ComboboxNative = require('./internal/ComboboxNative.js');
+var Custom = require('./Custom/Custom.js');
+var Box = require('../../Box/Box.js');
+var Spinner = require('../../Spinner/Spinner.js');
+var floatingUi_dom = require('../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_core = require('../../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
+
+const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+    const inputRef = React.useRef(null);
+    const portalRef = React.useRef(null);
+    const listId = React.useId();
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(rest.inputValue || '');
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const [selectedOptions, setSelectedOptions] = React.useState([]);
+    const [activeDescendant, setActiveDescendant] = React.useState(undefined);
+    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
+    React.useEffect(() => {
+        if (rest.inputValue !== undefined) {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
+    const formFieldProps = useFormField.useFormField({
+        disabled,
+        readOnly,
+        error,
+        errorId,
+        size,
+        description,
+        id,
+    }, 'combobox');
+    const listRef = React.useRef([]);
+    const { options, optionsChildren, restChildren, optionValues, customIds } = useCombobox.default({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        selectedOptions,
+    });
+    // if value is set, set input value to the label of the value
+    React.useEffect(() => {
+        if (value && value.length > 0 && !multiple) {
+            const option = options.find((option) => option.value === value[0]);
+            setInputValue(option?.label || '');
+        }
+    }, [multiple, value, options]);
+    // floating UI
+    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
+        whileElementsMounted: floatingUi_dom.autoUpdate,
+        open,
+        onOpenChange: setOpen,
+        middleware: [
+            floatingUi_core.flip({ padding: 10 }),
+            floatingUi_core.size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            floatingUi_core.offset(10),
+        ],
+    });
+    const role = floatingUi_react.useRole(context, { role: 'listbox' });
+    const dismiss = floatingUi_react.useDismiss(context);
+    const listNav = floatingUi_react.useListNavigation(context, {
+        listRef,
+        activeIndex,
+        virtual: true,
+        scrollItemIntoView: true,
+        enabled: open,
+    });
+    const { getReferenceProps, getFloatingProps } = floatingUi_react.useInteractions([
+        role,
+        dismiss,
+        listNav,
+    ]);
+    // remove active index if combobox is closed
+    React.useEffect(() => {
+        if (!open) {
+            setActiveIndex(null);
+        }
+    }, [open]);
+    // Send new value if option was clicked
+    React.useEffect(() => {
+        const selectedHash = JSON.stringify(selectedOptions);
+        if (prevSelectedHash === selectedHash)
+            return;
+        const values = selectedOptions.map((option) => option.value);
+        onValueChange?.(values);
+        setPrevSelectedHash(selectedHash);
+    }, [onValueChange, selectedOptions, prevSelectedHash]);
+    React.useEffect(() => {
+        if (value && options.length > 0) {
+            const updatedSelectedOptions = value.map((option) => {
+                const value = options.find((value) => value.value === option);
+                return value;
+            });
+            setSelectedOptions(updatedSelectedOptions);
+        }
+    }, [multiple, prevSelectedHash, value, options]);
+    // handle click on option, either select or deselect - Handles single or multiple
+    const handleSelectOption = (option) => {
+        // if option is already selected, remove it
+        if (value && value.includes(option.value)) {
+            setSelectedOptions((prev) => prev.filter((i) => i.value !== option.value));
+            return;
+        }
+        if (multiple) {
+            setSelectedOptions([...selectedOptions, option]);
+            setInputValue('');
+            inputRef.current?.focus();
+        }
+        else {
+            setSelectedOptions([option]);
+            setInputValue(option?.label || '');
+            // move cursor to the end of the input
+            setTimeout(() => {
+                inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
+            }, 0);
+        }
+        !multiple && setOpen(false);
+        refs.domReference.current?.focus();
+    };
+    const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
+    // handle keyboard navigation in the list
+    const handleKeyDownFunc = (event) => {
+        const navigateable = customIds.length + optionsChildren.length;
+        if (formFieldProps.readOnly || disabled)
+            return;
+        if (!event)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!open)
+                    setOpen(true);
+                setActiveIndex((prevActiveIndex) => {
+                    if (prevActiveIndex === null) {
+                        return 0;
+                    }
+                    return Math.min(prevActiveIndex + 1, navigateable - 1);
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                setActiveIndex((prevActiveIndex) => {
+                    if (prevActiveIndex === 0) {
+                        setOpen(false);
+                        return null;
+                    }
+                    if (prevActiveIndex === null) {
+                        return null;
+                    }
+                    return Math.max(prevActiveIndex - 1, 0);
+                });
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (activeIndex !== null &&
+                    (optionsChildren[activeIndex] || customIds.length > 0)) {
+                    // check if we are in the custom components
+                    if (activeIndex <= customIds.length) {
+                        // send `onSelect` event to the custom component
+                        const selectedId = customIds[activeIndex];
+                        const selectedComponent = restChildren.find((component) => useCombobox.isInteractiveComboboxCustom(component) &&
+                            component.props?.id === selectedId);
+                        if (useCombobox.isInteractiveComboboxCustom(selectedComponent) &&
+                            selectedComponent.props.onSelect) {
+                            selectedComponent.props.onSelect();
+                        }
+                    }
+                    // if we are in the options, find the actual index
+                    const valueIndex = activeIndex - customIds.length;
+                    const child = optionsChildren[valueIndex];
+                    if (useCombobox.isComboboxOption(child)) {
+                        const props = child.props;
+                        const option = options.find((option) => option.value === props.value);
+                        if (!multiple) {
+                            // check if option is already selected, if so, deselect it
+                            if (selectedOptions.find((i) => i.value === option?.value)) {
+                                setSelectedOptions([]);
+                                setInputValue('');
+                                return;
+                            }
+                        }
+                        debouncedHandleSelectOption(option);
+                    }
+                }
+                break;
+            case 'Backspace':
+                if (inputValue === '' && multiple && selectedOptions.length > 0) {
+                    setSelectedOptions((prev) => prev.slice(0, prev.length - 1));
+                }
+                // if we are in single mode, we need to set activeValue to null
+                if (!multiple) {
+                    setSelectedOptions([]);
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+    const rowVirtualizer = index.useVirtualizer({
+        count: optionsChildren.length,
+        getScrollElement: () => refs.floating.current,
+        estimateSize: () => 40,
+        measureElement: (elem) => {
+            return elem.getBoundingClientRect().height;
+        },
+        overscan: 1,
+    });
+    return (jsxRuntime.jsxs(ComboboxContext.Provider, { value: {
+            size,
+            options,
+            selectedOptions,
+            multiple,
+            activeIndex,
+            disabled,
+            readOnly,
+            open,
+            inputRef,
+            refs,
+            inputValue,
+            activeDescendant,
+            error,
+            formFieldProps,
+            name,
+            htmlSize,
+            optionValues,
+            hideChips,
+            cleanButtonLabel,
+            listId,
+            setInputValue,
+            setActiveIndex,
+            handleKeyDown,
+            setOpen,
+            getReferenceProps,
+            setSelectedOptions,
+            /* Recieves index of option, and the ID of the button element */
+            setActiveOption: (index, id) => {
+                if (readOnly)
+                    return;
+                if (disabled)
+                    return;
+                setActiveIndex(index);
+                setActiveDescendant(id);
+            },
+            /* 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.find((option) => option.value === value);
+                debouncedHandleSelectOption(option);
+            },
+            handleSelectOption: debouncedHandleSelectOption,
+            chipSrLabel,
+            listRef,
+            forwareddRef,
+        }, children: [jsxRuntime.jsxs(Box.Box, { className: clsx.clsx(Combobox_module.combobox, disabled && Combobox_module.disabled, className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative.default, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel.default, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput.default, { ...objectUtils.omit(['inputValue'], rest), "aria-busy": loading }), jsxRuntime.jsx(ComboboxError.default, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs(Box.Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+                            ref: refs.setFloating,
+                            style: {
+                                ...floatingStyles,
+                            },
+                        }), className: clsx.clsx(Combobox_module.optionsWrapper, Combobox_module[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: optionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.default, { className: Combobox_module.loading, children: [jsxRuntime.jsx(Spinner.Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && optionsChildren] }))] }) }) }))] }));
+});
+const ComboboxContext = React.createContext(undefined);
+Combobox.displayName = 'Combobox';
+
+exports.Combobox = Combobox;
+exports.ComboboxContext = ComboboxContext;

package/dist/cjs/components/form/Combobox/Combobox.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"combobox":"fds-combobox-combobox-fe4dfa7c","optionsWrapper":"fds-combobox-optionsWrapper-fe4dfa7c","readOnly":"fds-combobox-readOnly-fe4dfa7c","inputWrapper":"fds-combobox-inputWrapper-fe4dfa7c","small":"fds-combobox-small-fe4dfa7c","medium":"fds-combobox-medium-fe4dfa7c","large":"fds-combobox-large-fe4dfa7c","error":"fds-combobox-error-fe4dfa7c","chipAndInput":"fds-combobox-chipAndInput-fe4dfa7c","chips":"fds-combobox-chips-fe4dfa7c","arrow":"fds-combobox-arrow-fe4dfa7c","readonly":"fds-combobox-readonly-fe4dfa7c","label":"fds-combobox-label-fe4dfa7c","description":"fds-combobox-description-fe4dfa7c","clearButton":"fds-combobox-clearButton-fe4dfa7c","disabled":"fds-combobox-disabled-fe4dfa7c","padlock":"fds-combobox-padlock-fe4dfa7c","errorMessage":"fds-combobox-errorMessage-fe4dfa7c","loading":"fds-combobox-loading-fe4dfa7c","inFocus":"fds-combobox-inFocus-fe4dfa7c","showChecked":"fds-combobox-showChecked-fe4dfa7c"};
+
+module.exports = classes;

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

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var index = require('../../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var Combobox = require('../Combobox.js');
+var Custom_module = require('./Custom.module.css.js');
+var objectUtils = require('../../../../utilities/objectUtils.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 ? index.Slot : 'div';
+    const randomId = React.useId();
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxCustom must be used within a Combobox');
+    }
+    const { size, activeIndex, optionValues, setActiveIndex } = context;
+    const index$1 = React.useMemo(() => id && optionValues.indexOf(id), [optionValues, id]);
+    return (jsxRuntime.jsx(Component, { ref: ref, tabIndex: -1, className: clsx.clsx(Custom_module.custom, Custom_module[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, onMouseEnter: () => {
+            typeof index$1 === 'number' && setActiveIndex(index$1);
+        }, onFocus: () => {
+            typeof index$1 === 'number' && setActiveIndex(index$1);
+        }, ...objectUtils.omit(['interactive'], rest) }));
+});
+var ComboboxCustom$1 = ComboboxCustom;
+
+exports.ComboboxCustom = ComboboxCustom;
+exports.default = ComboboxCustom$1;

package/dist/cjs/components/form/Combobox/Custom/Custom.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"custom":"fds-custom-custom-385f0b36","large":"fds-custom-large-385f0b36","medium":"fds-custom-medium-385f0b36","small":"fds-custom-small-385f0b36"};
+
+module.exports = classes;

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

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var Combobox = require('../Combobox.js');
+var Empty_module = require('./Empty.module.css.js');
+
+const ComboboxEmpty = React.forwardRef(({ children, className, ...rest }, ref) => {
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxEmpty must be used within a Combobox');
+    }
+    const { optionValues, size } = context;
+    return (optionValues.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Empty_module.empty, Empty_module[size], className), ...rest, children: children })));
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.default = ComboboxEmpty;

package/dist/cjs/components/form/Combobox/Empty/Empty.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"empty":"fds-empty-empty-a5131d3a","large":"fds-empty-large-a5131d3a","medium":"fds-empty-medium-a5131d3a","small":"fds-empty-small-a5131d3a"};
+
+module.exports = classes;

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

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../../node_modules/clsx/dist/clsx.js');
+var Description_module = require('./Description.module.css.js');
+
+const ComboboxOptionDescription = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsxRuntime.jsx("span", { className: clsx.clsx(Description_module.description, className), ref: ref, ...rest, children: children }));
+});
+ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
+var ComboboxOptionDescription$1 = ComboboxOptionDescription;
+
+exports.ComboboxOptionDescription = ComboboxOptionDescription;
+exports.default = ComboboxOptionDescription$1;

package/dist/cjs/components/form/Combobox/Option/Description/Description.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"description":"fds-description-description-10814aaa"};
+
+module.exports = classes;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var akselIcons = require('@navikt/aksel-icons');
+var clsx = require('../../../../../node_modules/clsx/dist/clsx.js');
+var Option_module = require('../Option.module.css.js');
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsxRuntime.jsx("div", { className: clsx.clsx(multiple && Option_module.selectIconWrapper, selected && Option_module.selected), children: selected && (jsxRuntime.jsx(akselIcons.CheckmarkIcon, { className: Option_module.selectIcon, "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+exports.SelectedIcon = SelectedIcon;
+exports.default = SelectedIcon;

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

@@ -0,0 +1,53 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var Combobox = require('../Combobox.js');
+var useDebounce = require('../../../../utilities/useDebounce.js');
+var SelectedIcon = require('./Icon/SelectedIcon.js');
+var Option_module = require('./Option.module.css.js');
+var Description = require('./Description/Description.js');
+var objectUtils = require('../../../../utilities/objectUtils.js');
+var Label = require('../../../Typography/Label/Label.js');
+
+const ComboboxOption = React.forwardRef(({ value, description, children, className, ...rest }, ref) => {
+    const labelId = React.useId();
+    const generatedId = React.useId();
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+    }
+    const { selectedOptions, activeIndex, setActiveOption, onOptionClick, size, listRef, optionValues, multiple, } = context;
+    const index = React.useMemo(() => optionValues.indexOf(value), [optionValues, value]);
+    const combinedRef = floatingUi_react.useMergeRefs([
+        (node) => {
+            listRef.current[index] = node;
+        },
+        ref,
+    ]);
+    if (index === -1) {
+        throw new Error('Internal error: ComboboxOption did not find index');
+    }
+    const selected = selectedOptions.find((option) => option.value === value);
+    React.useEffect(() => {
+        if (activeIndex === index)
+            setActiveOption(index, rest.id || generatedId);
+    }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
+    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    return (jsxRuntime.jsxs("button", { id: rest.id || generatedId, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+            onOptionClickDebounced();
+            rest.onClick?.(e);
+        }, onMouseEnter: (e) => {
+            setActiveOption(index, labelId);
+            rest.onMouseEnter?.(e);
+        }, onFocus: (e) => {
+            setActiveOption(index, labelId);
+            rest.onFocus?.(e);
+        }, className: clsx.clsx(Option_module.option, Option_module[size], activeIndex === index && Option_module.active, multiple && Option_module.multiple, className), ref: combinedRef, ...objectUtils.omit(['displayValue'], rest), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: Option_module.optionText, size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
+});
+ComboboxOption.displayName = 'ComboboxOption';
+
+exports.ComboboxOption = ComboboxOption;

package/dist/cjs/components/form/Combobox/Option/Option.module.css.js

@@ -0,0 +1,6 @@
+'use client';
+'use strict';
+
+var classes = {"option":"fds-option-option-6c39c7b6","active":"fds-option-active-6c39c7b6","multiple":"fds-option-multiple-6c39c7b6","optionText":"fds-option-optionText-6c39c7b6","checkbox":"fds-option-checkbox-6c39c7b6","selectIconWrapper":"fds-option-selectIconWrapper-6c39c7b6","small":"fds-option-small-6c39c7b6","medium":"fds-option-medium-6c39c7b6","large":"fds-option-large-6c39c7b6","selected":"fds-option-selected-6c39c7b6","selectIcon":"fds-option-selectIcon-6c39c7b6"};
+
+module.exports = classes;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var Combobox$1 = require('./Combobox.js');
+var Option = require('./Option/Option.js');
+var Empty = require('./Empty/Empty.js');
+
+const Combobox = Combobox$1.Combobox;
+Combobox.Option = Option.ComboboxOption;
+Combobox.Empty = Empty.ComboboxEmpty;
+Combobox.Option.displayName = 'Combobox.Option';
+Combobox.Empty.displayName = 'Combobox.Empty';
+
+exports.ComboboxOption = Option.ComboboxOption;
+exports.ComboboxEmpty = Empty.ComboboxEmpty;
+exports.Combobox = Combobox;

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

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('../../../Chip/index.js');
+var Combobox = require('../Combobox.js');
+var Removable = require('../../../Chip/Removable/Removable.js');
+
+const ComboboxChips = () => {
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, selectedOptions, setSelectedOptions, chipSrLabel, inputRef, } = context;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptions.map((option) => {
+            return (jsxRuntime.jsx(Removable.RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                        setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                        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 */
+                    setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                }, style: {
+                    /* We already set the opacity on Combobox */
+                    opacity: 1,
+                }, "aria-label": chipSrLabel(option), children: option.label }, option.value));
+        }) }));
+};
+ComboboxChips.displayName = 'ComboboxChips';
+var ComboboxChips$1 = ComboboxChips;
+
+exports.ComboboxChips = ComboboxChips;
+exports.default = ComboboxChips$1;

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

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var akselIcons = require('@navikt/aksel-icons');
+var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var Combobox = require('../Combobox.js');
+var Combobox_module = require('../Combobox.module.css.js');
+var utility_module = require('../../../../utilities/utility.module.css.js');
+
+const ComboboxClearButton = () => {
+    const context = React.useContext(Combobox.ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, cleanButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
+    return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], utility_module.focusable), onClick: () => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            setSelectedOptions([]);
+            setInputValue('');
+        }, onKeyDown: (e) => {
+            if (readOnly)
+                return;
+            if (disabled)
+                return;
+            if (e.key === 'Enter') {
+                e.stopPropagation();
+                setSelectedOptions([]);
+                setInputValue('');
+                inputRef.current?.focus();
+            }
+        }, type: 'button', "aria-label": cleanButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
+};
+ComboboxClearButton.displayName = 'ComboboxClearButton';
+var ComboboxClearButton$1 = ComboboxClearButton;
+
+exports.ComboboxClearButton = ComboboxClearButton;
+exports.default = ComboboxClearButton$1;

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

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Combobox_module = require('../Combobox.module.css.js');
+var ErrorMessage = require('../../../Typography/ErrorMessage/ErrorMessage.js');
+
+const ComboboxError = ({ size, error, formFieldProps, }) => {
+    return (jsxRuntime.jsx("div", { className: Combobox_module.errorMessage, id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }));
+};
+ComboboxError.displayName = 'ComboboxError';
+var ComboboxError$1 = ComboboxError;
+
+exports.ComboboxError = ComboboxError;
+exports.default = ComboboxError$1;