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

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

@@ -4,17 +4,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var clsx = require('../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@tanstack/react-virtual/dist/esm/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 Custom = require('./Custom.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
@@ -23,14 +22,13 @@ var Box = require('../../Box/Box.js');
 var Spinner = require('../../Spinner/Spinner.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
 
-const ComboboxComponent = React.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 = React.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 = React.useRef(null);
     const portalRef = React.useRef(null);
     const listRef = React.useRef([]);
     const listId = React.useId();
     const [inputValue, setInputValue] = React.useState(rest.inputValue || '');
-    /* const idDispatch = useComboboxIdDispatch(); */
-    const { selectedOptions, options, restChildren, interactiveChildren, optionValues, customIds, filteredOptionsChildren, filteredOptions, prevSelectedHash, setSelectedOptions, setPrevSelectedHash, } = useCombobox.default({
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox.default({
         children,
         inputValue,
         filter,
@@ -51,20 +49,11 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
     }, 'combobox');
     // if value is set, set input value to the label of the value
     React.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
-    React.useEffect(() => {
-        const selectedHash = JSON.stringify(selectedOptions);
-        if (prevSelectedHash === selectedHash)
-            return;
-        const values = Object.keys(selectedOptions);
-        onValueChange?.(values);
-        setPrevSelectedHash(selectedHash);
-    }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
     React.useEffect(() => {
         if (value && Object.keys(options).length >= 0) {
             const updatedSelectedOptions = value.map((option) => {
@@ -76,38 +65,47 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
                 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();
     };
@@ -124,7 +122,6 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
         interactiveChildren,
         setOpen,
         setInputValue,
-        setSelectedOptions,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = index.useVirtualizer({
@@ -147,23 +144,15 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
             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)
@@ -171,18 +160,18 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
                 if (disabled)
                     return;
                 const option = options[value];
-                debouncedHandleSelectOption(option);
+                debouncedHandleSelectOption({ option: 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({
+        }, children: [jsxRuntime.jsxs(Box.Box, { className: lite.clsx('fds-combobox', `fds-combobox--${size}`, disabled && 'fds-combobox__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), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "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: {
+                        }), className: lite.clsx('fds-combobox__options-wrapper', `fds-combobox--${size}`), children: [virtual && (jsxRuntime.jsx("div", { style: {
                                     height: `${rowVirtualizer.getTotalSize()}px`,
                                     width: '100%',
                                     position: 'relative',
@@ -192,7 +181,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
                                         left: 0,
                                         width: '100%',
                                         transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: filteredOptionsChildren[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 && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.default, { className: 'fds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { title: 'Laster', size: 'small' }), 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';

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

@@ -5,13 +5,12 @@ 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 floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var ComboboxContext = require('../ComboboxContext.js');
-var ComboboxIdContext = require('../ComboboxIdContext.js');
-var Custom_module = require('./Custom.module.css.js');
-var objectUtils = require('../../../../utilities/objectUtils.js');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
+var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
+var floatingUi_react = require('../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var ComboboxContext = require('./ComboboxContext.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var objectUtils = require('../../../utilities/objectUtils.js');
 
 const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -24,7 +23,7 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
     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$1 = React.useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = floatingUi_react.useMergeRefs([
         (node) => {
@@ -32,7 +31,7 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
         },
         ref,
     ]);
-    return (jsxRuntime.jsx(Component, { ref: combinedRef, 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, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }));
+    return (jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: lite.clsx('fds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }));
 });
 var ComboboxCustom$1 = ComboboxCustom;
 

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

@@ -5,17 +5,16 @@ 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 ComboboxContext = require('../ComboboxContext.js');
-var Empty_module = require('./Empty.module.css.js');
+var lite = require('../../../node_modules/clsx/dist/lite.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("div", { ref: ref, className: clsx.clsx(Empty_module.empty, Empty_module[size], className), ...rest, children: children })));
+    const { filteredOptions } = context;
+    return (filteredOptions.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: lite.clsx('fds-combobox__empty', className), ...rest, children: children })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -5,11 +5,10 @@ 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');
+var lite = require('../../../../node_modules/clsx/dist/lite.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 }));
+    return (jsxRuntime.jsx("span", { className: lite.clsx('fds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;

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

@@ -3,11 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var SelectedIcon = require('./Icon/SelectedIcon.js');
-var Option_module = require('./Option.module.css.js');
-var Description = require('./Description/Description.js');
+var SelectedIcon = require('./SelectedIcon.js');
+var Description = require('./Description.js');
 var useComboboxOption = require('./useComboboxOption.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 var Label = require('../../../Typography/Label/Label.js');
@@ -28,7 +27,7 @@ const ComboboxOption = React.memo(React.forwardRef(({ value, description, childr
     return (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: clsx.clsx(Option_module.option, Option_module[size], active && Option_module.active, multiple && Option_module.multiple, className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), 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 }))] })] }));
+        }, className: lite.clsx('fds-combobox__option', active && 'fds-combobox__option--active', multiple && 'fds-combobox__option--multiple', className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), 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: 'fds-combobox__option__label', size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
 }));
 ComboboxOption.displayName = 'ComboboxOption';
 

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

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

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

@@ -3,7 +3,7 @@
 
 var Combobox$1 = require('./Combobox.js');
 var Option = require('./Option/Option.js');
-var Empty = require('./Empty/Empty.js');
+var Empty = require('./Empty.js');
 
 const Combobox = Combobox$1.Combobox;
 Combobox.Option = Option.ComboboxOption;

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

@@ -14,7 +14,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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(selectedOptions).map((value) => {
             return (jsxRuntime.jsx(Removable.RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
                     if (readOnly)
@@ -23,10 +23,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();
                     }
@@ -36,14 +35,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/cjs/components/form/Combobox/internal/ComboboxClearButton.js

@@ -6,23 +6,21 @@ 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 lite = require('../../../../node_modules/clsx/dist/lite.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Combobox_module = require('../Combobox.module.css.js');
 
 const ComboboxClearButton = () => {
     const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
-    return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], `fds-focus`), onClick: () => {
+    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+    return (jsxRuntime.jsx("button", { disabled: disabled, className: lite.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;
@@ -30,9 +28,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: jsxRuntime.jsx(akselIcons.XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 };

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

@@ -4,11 +4,10 @@
 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 }) }));
+    return (jsxRuntime.jsx("div", { className: 'fds-combobox__error-message', 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;

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

@@ -5,19 +5,17 @@ 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 lite = require('../../../../node_modules/clsx/dist/lite.js');
 var akselIcons = require('@navikt/aksel-icons');
 var floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var ComboboxContext = require('../ComboboxContext.js');
-var Combobox_module = require('../Combobox.module.css.js');
-var Textfield_module = require('../../Textfield/Textfield.module.css.js');
 var ComboboxIdContext = require('../ComboboxIdContext.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
 var Box = require('../../../Box/Box.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 
-const ComboboxInput = ({ ...rest }) => {
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = React.useContext(ComboboxContext.ComboboxContext);
     const idDispatch = ComboboxIdContext.useComboboxIdDispatch();
     if (!context) {
@@ -26,52 +24,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 = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
-    // we need to check if input is in focus, to add focus styles to the wrapper
-    const [inputInFocus, setInputInFocus] = React.useState(false);
-    React.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 */
@@ -92,9 +58,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') {
@@ -102,10 +66,11 @@ const ComboboxInput = ({ ...rest }) => {
             }
         },
     });
-    return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled, className: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], inputInFocus && Combobox_module.inFocus, readOnly && Combobox_module.readonly, error && Combobox_module.error), children: [jsxRuntime.jsxs("div", { className: Combobox_module.chipAndInput, children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.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, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
+    return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled, className: lite.clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.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, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
                             onChange(e);
+                            !open && setOpen(true);
                             rest.onChange && rest.onChange(e);
-                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: 'fds-combobox__arrow', children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

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

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