@digdir/designsystemet-react 0.59.1-alpha.0 → 0.60.0

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

@@ -2,17 +2,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId, useState, useEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
 import { useFormField } from '../useFormField.js';
 import useDebounce from '../../../utilities/useDebounce.js';
 import useCombobox from './useCombobox.js';
-import classes from './Combobox.module.css.js';
 import ComboboxInput from './internal/ComboboxInput.js';
 import ComboboxLabel from './internal/ComboboxLabel.js';
 import ComboboxError from './internal/ComboboxError.js';
 import ComboboxNative from './internal/ComboboxNative.js';
-import ComboboxCustom from './Custom/Custom.js';
+import ComboboxCustom from './Custom.js';
 import { useFloatingCombobox } from './useFloatingCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
 import { ComboboxIdProvider } from './ComboboxIdContext.js';
@@ -21,14 +20,13 @@ import { Box } from '../../Box/Box.js';
 import { Spinner } from '../../Spinner/Spinner.js';
 import { omit } from '../../../utilities/objectUtils.js';
 
-const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
     const portalRef = useRef(null);
     const listRef = useRef([]);
     const listId = useId();
     const [inputValue, setInputValue] = useState(rest.inputValue || '');
-    /* const idDispatch = useComboboxIdDispatch(); */
-    const { selectedOptions, options, restChildren, interactiveChildren, optionValues, customIds, filteredOptionsChildren, filteredOptions, prevSelectedHash, setSelectedOptions, setPrevSelectedHash, } = useCombobox({
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox({
         children,
         inputValue,
         filter,
@@ -49,20 +47,11 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     }, 'combobox');
     // if value is set, set input value to the label of the value
     useEffect(() => {
-        if (value && value.length >= 0 && !multiple) {
+        if (value && value.length > 0 && !multiple) {
             const option = options[value[0]];
             setInputValue(option?.label || '');
         }
     }, [multiple, value, options]);
-    // Send new value if option was clicked
-    useEffect(() => {
-        const selectedHash = JSON.stringify(selectedOptions);
-        if (prevSelectedHash === selectedHash)
-            return;
-        const values = Object.keys(selectedOptions);
-        onValueChange?.(values);
-        setPrevSelectedHash(selectedHash);
-    }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
     useEffect(() => {
         if (value && Object.keys(options).length >= 0) {
             const updatedSelectedOptions = value.map((option) => {
@@ -74,38 +63,47 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                 return acc;
             }, {}));
         }
-    }, [multiple, prevSelectedHash, value, options, setSelectedOptions]);
+    }, [multiple, value, options, setSelectedOptions]);
     // 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) => {
-                const updated = { ...prev };
-                delete updated[option.value];
-                return updated;
-            });
+    const handleSelectOption = (args) => {
+        const { option, clear, remove } = args;
+        if (clear) {
+            setSelectedOptions({});
+            setInputValue('');
+            onValueChange?.([]);
             return;
         }
+        if (!option)
+            return;
+        if (remove) {
+            const newSelectedOptions = { ...selectedOptions };
+            delete newSelectedOptions[option.value];
+            setSelectedOptions(newSelectedOptions);
+            onValueChange?.(Object.keys(newSelectedOptions));
+            return;
+        }
+        const newSelectedOptions = { ...selectedOptions };
         if (multiple) {
-            /* setSelectedOptions([...selectedOptions, option]); */
-            setSelectedOptions((prev) => {
-                const updated = { ...prev };
-                updated[option.value] = option;
-                return updated;
-            });
+            if (newSelectedOptions[option.value]) {
+                delete newSelectedOptions[option.value];
+            }
+            else {
+                newSelectedOptions[option.value] = option;
+            }
             setInputValue('');
             inputRef.current?.focus();
         }
         else {
-            setSelectedOptions({
-                [option.value]: option,
-            });
+            newSelectedOptions[option.value] = 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);
         }
+        setSelectedOptions(newSelectedOptions);
+        console.log('calling new value with: ', Object.keys(newSelectedOptions));
+        onValueChange?.(Object.keys(newSelectedOptions));
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
     };
@@ -122,7 +120,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         interactiveChildren,
         setOpen,
         setInputValue,
-        setSelectedOptions,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = useVirtualizer({
@@ -145,23 +142,15 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             inputRef,
             refs,
             inputValue,
-            error,
             formFieldProps,
-            name,
             htmlSize,
-            optionValues,
-            hideChips,
-            clearButtonLabel: cleanButtonLabel || clearButtonLabel,
-            hideClearButton,
-            listId,
+            clearButtonLabel,
             customIds,
             filteredOptions,
             setInputValue,
-            handleKeyDown,
             setOpen,
             getReferenceProps,
             getItemProps,
-            setSelectedOptions,
             /* Recieves the value of the option, and searches for it in our values lookup */
             onOptionClick: (value) => {
                 if (readOnly)
@@ -169,18 +158,18 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                 if (disabled)
                     return;
                 const option = options[value];
-                debouncedHandleSelectOption(option);
+                debouncedHandleSelectOption({ option: option });
             },
             handleSelectOption: debouncedHandleSelectOption,
             chipSrLabel,
             listRef,
             forwareddRef,
-        }, children: [jsxs(Box, { className: clsx(classes.combobox, disabled && classes.disabled, className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs(Box, { className: clsx('fds-combobox', `fds-combobox--${size}`, disabled && 'fds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(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(classes.optionsWrapper, classes[size]), children: [virtual && (jsx("div", { style: {
+                        }), className: clsx('fds-combobox__options-wrapper', `fds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
                                     height: `${rowVirtualizer.getTotalSize()}px`,
                                     width: '100%',
                                     position: 'relative',
@@ -190,7 +179,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: classes.loading, children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'fds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
 });
 const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
 Combobox.displayName = 'Combobox';

package/dist/esm/components/form/Combobox/{Custom/Custom.js → Custom.js}

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useContext, useMemo } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import { useComboboxId } from '../ComboboxIdContext.js';
-import classes from './Custom.module.css.js';
-import { omit } from '../../../../utilities/objectUtils.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { useMergeRefs } from '../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from './ComboboxContext.js';
+import { useComboboxId } from './ComboboxIdContext.js';
+import { omit } from '../../../utilities/objectUtils.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -20,7 +19,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { size, customIds, listRef, getItemProps } = context;
+    const { customIds, listRef, getItemProps } = context;
     const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = useMergeRefs([
         (node) => {
@@ -28,7 +27,7 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
         },
         ref,
     ]);
-    return (jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx(classes.custom, classes[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }));
+    return (jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx('fds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }));
 });
 var ComboboxCustom$1 = ComboboxCustom;
 

package/dist/esm/components/form/Combobox/{Empty/Empty.js → Empty.js}

@@ -1,17 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import classes from './Empty.module.css.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { ComboboxContext } from './ComboboxContext.js';
 
 const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
-    const { filteredOptions, size } = context;
-    return (filteredOptions.length === 0 && (jsx("div", { ref: ref, className: clsx(classes.empty, classes[size], className), ...rest, children: children })));
+    const { filteredOptions } = context;
+    return (filteredOptions.length === 0 && (jsx("div", { ref: ref, className: clsx('fds-combobox__empty', className), ...rest, children: children })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

package/dist/esm/components/form/Combobox/Option/{Description/Description.js → Description.js}

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../../../../node_modules/clsx/dist/clsx.js';
-import classes from './Description.module.css.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 
 const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx("span", { className: clsx(classes.description, className), ref: ref, ...rest, children: children }));
+    return (jsx("span", { className: clsx('fds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;

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

@@ -1,11 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, forwardRef, useId, useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { SelectedIcon } from './Icon/SelectedIcon.js';
-import classes from './Option.module.css.js';
-import ComboboxOptionDescription from './Description/Description.js';
+import { SelectedIcon } from './SelectedIcon.js';
+import ComboboxOptionDescription from './Description.js';
 import useComboboxOption from './useComboboxOption.js';
 import { omit } from '../../../../utilities/objectUtils.js';
 import { Label } from '../../../Typography/Label/Label.js';
@@ -26,7 +25,7 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     return (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: clsx(classes.option, classes[size], active && classes.active, multiple && classes.multiple, className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: classes.optionText, size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
+        }, className: clsx('fds-combobox__option', active && 'fds-combobox__option--active', multiple && 'fds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'fds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 

package/dist/esm/components/form/Combobox/Option/SelectedIcon.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { CheckmarkIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsx("div", { className: clsx(multiple && 'fds-combobox__option__icon-wrapper', selected && 'fds-combobox__option__icon-wrapper--selected'), children: selected && (jsx(CheckmarkIcon, { className: 'fds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+export { SelectedIcon, SelectedIcon as default };

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

@@ -1,7 +1,7 @@
 'use client';
 import { Combobox as Combobox$1 } from './Combobox.js';
 import { ComboboxOption } from './Option/Option.js';
-import { ComboboxEmpty } from './Empty/Empty.js';
+import { ComboboxEmpty } from './Empty.js';
 
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;

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

@@ -10,7 +10,7 @@ const ComboboxChips = () => {
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, selectedOptions, setSelectedOptions, chipSrLabel, inputRef, } = context;
+    const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
     return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
             return (jsx(RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
@@ -19,10 +19,9 @@ const ComboboxChips = () => {
                         return;
                     if (e.key === 'Enter') {
                         e.stopPropagation();
-                        setSelectedOptions((prev) => {
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            const { [value]: _, ...rest } = prev;
-                            return rest;
+                        handleSelectOption({
+                            option: selectedOptions[value],
+                            remove: true,
                         });
                         inputRef.current?.focus();
                     }
@@ -32,14 +31,10 @@ const ComboboxChips = () => {
                     if (disabled)
                         return;
                     /* If we click a chip, filter the active values and remove the one we clicked */
-                    setSelectedOptions((prev) => {
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { [value]: _, ...rest } = prev;
-                        return rest;
+                    handleSelectOption({
+                        option: selectedOptions[value],
+                        remove: true,
                     });
-                }, style: {
-                    /* We already set the opacity on Combobox */
-                    opacity: 1,
                 }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
         }) }));
 };

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

@@ -2,23 +2,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import classes from '../Combobox.module.css.js';
 
 const ComboboxClearButton = () => {
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
-    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], `fds-focus`), onClick: () => {
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsx("button", { disabled: disabled, className: clsx('fds-combobox__clear-button', `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)
                 return;
-            setSelectedOptions({});
-            setInputValue('');
+            handleSelectOption({ option: null, clear: true });
         }, onKeyDown: (e) => {
             if (readOnly)
                 return;
@@ -26,9 +24,7 @@ const ComboboxClearButton = () => {
                 return;
             if (e.key === 'Enter') {
                 e.stopPropagation();
-                setSelectedOptions({});
-                setInputValue('');
-                inputRef.current?.focus();
+                handleSelectOption({ option: null, clear: true });
             }
         }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 };

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

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import classes from '../Combobox.module.css.js';
 import { ErrorMessage } from '../../../Typography/ErrorMessage/ErrorMessage.js';
 
 const ComboboxError = ({ size, error, formFieldProps, }) => {
-    return (jsx("div", { className: classes.errorMessage, id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
+    return (jsx("div", { className: 'fds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ErrorMessage, { size: size, children: error }) }));
 };
 ComboboxError.displayName = 'ComboboxError';
 var ComboboxError$1 = ComboboxError;

package/dist/esm/components/form/Combobox/internal/ComboboxInput.js

@@ -1,19 +1,17 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext, useState, useEffect } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { useContext } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { ComboboxContext } from '../ComboboxContext.js';
-import classes from '../Combobox.module.css.js';
-import textFieldClasses from '../../Textfield/Textfield.module.css.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
 import { Box } from '../../../Box/Box.js';
 import { omit } from '../../../../utilities/objectUtils.js';
 
-const ComboboxInput = ({ ...rest }) => {
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = useContext(ComboboxContext);
     const idDispatch = useComboboxIdDispatch();
     if (!context) {
@@ -22,52 +20,20 @@ const ComboboxInput = ({ ...rest }) => {
     const setActiveIndex = (id) => {
         idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
     };
-    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, } = context;
     const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
-    // we need to check if input is in focus, to add focus styles to the wrapper
-    const [inputInFocus, setInputInFocus] = useState(false);
-    useEffect(() => {
-        const input = inputRef.current;
-        const onFocus = () => {
-            setInputInFocus(true);
-        };
-        const onBlur = () => {
-            setInputInFocus(false);
-        };
-        input?.addEventListener('focus', onFocus);
-        input?.addEventListener('blur', onBlur);
-        return () => {
-            input?.removeEventListener('focus', onFocus);
-            input?.removeEventListener('blur', onBlur);
-        };
-    }, [inputRef]);
     // onChange function for the input
     const onChange = (event) => {
         const value = event.target.value;
         setInputValue(value);
         setActiveIndex(0);
-        if (typeof value === 'string') {
-            setOpen(true);
-        }
-        else {
-            setOpen(false);
-        }
         // check if input value is the same as a label, if so, select it
-        const option = options[value];
+        const option = options[value.toLowerCase()];
         if (!option)
             return;
         if (selectedOptions[option.value])
             return;
-        handleSelectOption(option);
-        if (multiple) {
-            inputRef.current?.focus();
-        }
-        else {
-            // move cursor to the end of the input
-            setTimeout(() => {
-                inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
-            }, 0);
-        }
+        handleSelectOption({ option: option });
     };
     const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
@@ -88,9 +54,7 @@ const ComboboxInput = ({ ...rest }) => {
             inputRef.current?.focus();
         },
         /* Handles list navigation */
-        onKeyDown(event) {
-            handleKeyDown(event);
-        },
+        onKeyDown: handleKeyDown,
         // preventDefault on keydown to avoid sending in form
         onKeyPress(event) {
             if (event.key === 'Enter') {
@@ -98,10 +62,11 @@ const ComboboxInput = ({ ...rest }) => {
             }
         },
     });
-    return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx(textFieldClasses.input, classes.inputWrapper, classes[size], inputInFocus && classes.inFocus, readOnly && classes.readonly, error && classes.error), children: [jsxs("div", { className: classes.chipAndInput, children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+    return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
                             onChange(e);
+                            !open && setOpen(true);
                             rest.onChange && rest.onChange(e);
-                        } })] }), showClearButton && jsx(ComboboxClearButton, {}), jsx("div", { className: classes.arrow, children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsx(ComboboxClearButton, {}), jsx("div", { className: 'fds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

package/dist/esm/components/form/Combobox/internal/ComboboxLabel.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import classes from '../Combobox.module.css.js';
 import { Label } from '../../../Typography/Label/Label.js';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx(classes.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx(classes.description, hideLabel && `fds-sr-only`), children: description }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('fds-combobox__label', hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'fds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('fds-combobox__description', hideLabel && `fds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 var ComboboxLabel$1 = ComboboxLabel;