@digdir/designsystemet-react 0.63.0 → 1.0.0-next.15

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 import { useCheckbox } from './useCheckbox.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { omit } from '../../../utilities/omit/omit.js';
 import { Label } from '../../Typography/Label/Label.js';
 
 const Checkbox = forwardRef((props, ref) => {
@@ -19,7 +19,7 @@ const Checkbox = forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('fds-checkbox', `fds-checkbox--${size}`, hasError && `fds-checkbox--error`, readOnly && `fds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `fds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: `fds-checkbox__label`, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `fds-checkbox__description`, children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: clsx(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/components/form/Checkbox/Group/Group.js

@@ -20,7 +20,7 @@ const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, default
                 value,
                 defaultValue,
                 toggleValue,
-            }, children: jsx("div", { children: children }) }) }));
+            }, children: jsx("div", { className: 'ds-checkbox__group', children: children }) }) }));
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
 

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

@@ -1,28 +1,27 @@
 'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useId, useState, useEffect } from 'react';
 import { FloatingPortal, FloatingFocusManager } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useRef, useId, useState, useEffect } from 'react';
 import { useFormField } from '../useFormField.js';
-import useDebounce from '../../../utilities/useDebounce.js';
-import { getSize } from '../../../utilities/getSize.js';
-import useCombobox, { prefix, removePrefix } from './useCombobox.js';
+import { ComboboxContext } from './ComboboxContext.js';
+import { ComboboxIdProvider } from './ComboboxIdContext.js';
+import { ComboboxCustom } from './Custom.js';
+import ComboboxError from './internal/ComboboxError.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.js';
-import { useFloatingCombobox } from './useFloatingCombobox.js';
+import { useCombobox } from './useCombobox.js';
 import { useComboboxKeyboard } from './useComboboxKeyboard.js';
-import { ComboboxIdProvider } from './ComboboxIdContext.js';
-import { ComboboxContext } from './ComboboxContext.js';
+import { useFloatingCombobox } from './useFloatingCombobox.js';
+import { prefix, removePrefix } from './utilities.js';
 import { Box } from '../../Box/Box.js';
 import { Spinner } from '../../Spinner/Spinner.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { omit } from '../../../utilities/omit/omit.js';
 
-const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
-    const size = getSize(rest.size || 'md');
+const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
     const portalRef = useRef(null);
     const listRef = useRef([]);
@@ -112,7 +111,7 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
     };
-    const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
+    const debouncedHandleSelectOption = useDebounceCallback(handleSelectOption, 50);
     const handleKeyDown = useComboboxKeyboard({
         filteredOptions,
         selectedOptions,
@@ -169,12 +168,15 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             chipSrLabel,
             listRef,
             forwareddRef,
-        }, 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: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
+        }, children: [jsxs(Box, { className: clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-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: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,
                             },
-                        }), className: clsx('fds-combobox__options-wrapper', `fds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
+                        }), className: clsx('ds-combobox__options-wrapper', `ds-combobox--${size}`), children: [virtual && (jsx("div", { style: {
                                     height: `${rowVirtualizer.getTotalSize()}px`,
                                     width: '100%',
                                     position: 'relative',
@@ -184,7 +186,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: 'fds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'sm' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'ds-combobox__loading', children: [jsx(Spinner, { title: 'Laster', size: 'sm' }), 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/ComboboxIdContext.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useReducer } from 'react';
+import { createContext, useReducer, useContext } from 'react';
 
 const ComboboxIdContext = createContext({
     activeIndex: 0,

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

@@ -1,12 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useContext, useMemo } from 'react';
-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 '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useId, useContext, useMemo } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
 import { useComboboxId } from './ComboboxIdContext.js';
-import { omit } from '../../../utilities/objectUtils.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { omit } from '../../../utilities/omit/omit.js';
 
 const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
     if (interactive && !id) {
@@ -19,16 +20,15 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { customIds, listRef, getItemProps } = context;
+    const { customIds, setListRef, getItemProps, size } = context;
     const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = useMergeRefs([
         (node) => {
-            listRef.current[index] = node;
+            setListRef(index, node);
         },
         ref,
     ]);
-    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()) }));
+    return (jsx(Label, { size: size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx('ds-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;
 
-export { ComboboxCustom, ComboboxCustom$1 as default };
+export { ComboboxCustom };

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

@@ -1,17 +1,18 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from './ComboboxContext.js';
+import { Label } from '../../Typography/Label/Label.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 } = context;
-    return (filteredOptions.length === 0 && (jsx("div", { ref: ref, className: clsx('fds-combobox__empty', className), ...rest, children: children })));
+    const { filteredOptions, size } = context;
+    return (filteredOptions.length === 0 && (jsx(Label, { size: size, asChild: true, children: jsx("div", { ref: ref, className: clsx('ds-combobox__empty', className), ...rest, children: children }) })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 
-export { ComboboxEmpty, ComboboxEmpty as default };
+export { ComboboxEmpty };

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

@@ -1,12 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
 
 const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx("span", { className: clsx('fds-combobox__option__description', className), ref: ref, ...rest, children: children }));
+    return (jsx("span", { className: clsx('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
 });
 ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
 var ComboboxOptionDescription$1 = ComboboxOptionDescription;
 
-export { ComboboxOptionDescription, ComboboxOptionDescription$1 as default };
+export { ComboboxOptionDescription$1 as default };

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

@@ -1,13 +1,13 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { memo, forwardRef, useId, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { memo, forwardRef, useId, useContext } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
-import { SelectedIcon } from './SelectedIcon.js';
 import ComboboxOptionDescription from './Description.js';
-import useComboboxOption from './useComboboxOption.js';
-import { omit } from '../../../../utilities/objectUtils.js';
+import { SelectedIcon } from './SelectedIcon.js';
+import { useComboboxOption } from './useComboboxOption.js';
 import { Label } from '../../../Typography/Label/Label.js';
+import { omit } from '../../../../utilities/omit/omit.js';
 
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = useId();
@@ -22,10 +22,10 @@ const ComboboxOption = memo(forwardRef(({ value, description, children, classNam
     }
     const { size, multiple, getItemProps } = context;
     const props = getItemProps();
-    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('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 }))] })] }));
+    return (jsx(Label, { size: 'md', asChild: true, children: 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('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-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: 'ds-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

@@ -4,8 +4,8 @@ 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 })) }));
+    return (jsx("div", { className: clsx(multiple && 'ds-combobox__option__icon-wrapper', selected && 'ds-combobox__option__icon-wrapper--selected'), children: selected && (jsx(CheckmarkIcon, { className: 'ds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
 };
 SelectedIcon.displayName = 'SelectedIcon';
 
-export { SelectedIcon, SelectedIcon as default };
+export { SelectedIcon };

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

@@ -1,12 +1,12 @@
 'use client';
-import { useId, useContext, useMemo, useEffect } from 'react';
 import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useId, useContext, useMemo, useEffect } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
-import useDebounce from '../../../../utilities/useDebounce.js';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
-import { prefix } from '../useCombobox.js';
+import { prefix } from '../utilities.js';
+import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
 
-function useComboboxOption({ id, ref, value, }) {
+const useComboboxOption = ({ id, ref, value, }) => {
     const generatedId = useId();
     const newId = id || generatedId;
     const context = useContext(ComboboxContext);
@@ -15,11 +15,11 @@ function useComboboxOption({ id, ref, value, }) {
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
-    const { selectedOptions, onOptionClick, listRef, customIds, filteredOptions, } = context;
+    const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions, } = context;
     const index = useMemo(() => filteredOptions.indexOf(prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
     const combinedRef = useMergeRefs([
         (node) => {
-            listRef.current[index] = node;
+            setListRef(index, node);
         },
         ref,
     ]);
@@ -33,7 +33,7 @@ function useComboboxOption({ id, ref, value, }) {
             dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
         }
     }, [generatedId, id, dispatch, active, index]);
-    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    const onOptionClickDebounced = useDebounceCallback(() => onOptionClick(value), 50);
     return {
         id: newId,
         ref: combinedRef,
@@ -41,6 +41,6 @@ function useComboboxOption({ id, ref, value, }) {
         active,
         onOptionClick: onOptionClickDebounced,
     };
-}
+};
 
-export { useComboboxOption as default };
+export { useComboboxOption };

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.js';
+import { ComboboxOption } from './Option/Option.js';
 
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;

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

@@ -41,4 +41,4 @@ const ComboboxChips = () => {
 ComboboxChips.displayName = 'ComboboxChips';
 var ComboboxChips$1 = ComboboxChips;
 
-export { ComboboxChips, ComboboxChips$1 as default };
+export { ComboboxChips$1 as default };

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

@@ -1,17 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useContext } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
 
-const ComboboxClearButton = () => {
+const ComboboxClearButton = forwardRef((props, ref) => {
     const context = useContext(ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
     const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsx("button", { disabled: disabled, className: clsx('fds-combobox__clear-button', `fds-focus`), onClick: () => {
+    return (jsx("button", { ...props, ref: ref, disabled: disabled, className: clsx('ds-combobox__clear-button', `ds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)
@@ -27,8 +27,8 @@ const ComboboxClearButton = () => {
                 handleSelectOption({ option: null, clear: true });
             }
         }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
-};
+});
 ComboboxClearButton.displayName = 'ComboboxClearButton';
 var ComboboxClearButton$1 = ComboboxClearButton;
 
-export { ComboboxClearButton, ComboboxClearButton$1 as default };
+export { ComboboxClearButton$1 as default };

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

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { ErrorMessage } from '../../../Typography/ErrorMessage/ErrorMessage.js';
 
-const ComboboxError = ({ size, error, formFieldProps, }) => {
-    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 }) }));
+const ComboboxError = ({ size, error, formFieldProps }) => {
+    return (jsx("div", { className: 'ds-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;
 
-export { ComboboxError, ComboboxError$1 as default };
+export { ComboboxError$1 as default };

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

@@ -1,27 +1,29 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
-import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
+import { useContext, useRef } from 'react';
 import { ComboboxContext } from '../ComboboxContext.js';
 import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
-import { prefix } from '../useCombobox.js';
+import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
 import { Box } from '../../../Box/Box.js';
-import { omit } from '../../../../utilities/objectUtils.js';
+import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
+import { omit } from '../../../../utilities/omit/omit.js';
 
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
     const context = useContext(ComboboxContext);
     const idDispatch = useComboboxIdDispatch();
+    const clearButtonRef = useRef(null);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
     const setActiveIndex = (id) => {
         idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
     };
-    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size, } = context;
     const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
     // onChange function for the input
     const onChange = (event) => {
@@ -29,14 +31,16 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         setInputValue(value);
         setActiveIndex(0);
         // check if input value is the same as a label, if so, select it
-        const option = options[prefix(value.toLowerCase())];
-        if (!option)
-            return;
-        if (selectedOptions[prefix(option.value)])
-            return;
-        handleSelectOption({ option: option });
+        Object.values(options).forEach((option) => {
+            if (option.label.toLowerCase() === value.toLowerCase()) {
+                /* if option is already selected, discard selecting it, since it would de-select */
+                if (selectedOptions[prefix(option.value)])
+                    return;
+                handleSelectOption({ option: option });
+            }
+        });
     };
-    const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
+    const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
     const props = getReferenceProps({
         ref: refs?.setReference,
@@ -44,13 +48,15 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
         'aria-controls': null,
         'aria-expanded': null,
         'aria-haspopup': null,
-        /* If we click the wrapper, open the list, set index to first option, and focus the input */
-        onClick() {
+        /* If we click the wrapper, toggle open, set index to first option, and focus the input */
+        onClick(event) {
             if (disabled)
                 return;
             if (readOnly)
                 return;
-            setOpen(true);
+            if (clearButtonRef.current?.contains(event.target))
+                return;
+            setOpen(!open);
             setActiveIndex(0);
             inputRef.current?.focus();
         },
@@ -63,13 +69,13 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    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: 'fds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs(Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: 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: 'ds-combobox__input', onChange: (e) => {
+                                    onChange(e);
+                                    !open && setOpen(true);
+                                    rest.onChange?.(e);
+                                } }) })] }), showClearButton && jsx(ComboboxClearButton, { ref: clearButtonRef }), jsx("div", { className: 'ds-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;
 
-export { ComboboxInput, ComboboxInput$1 as default };
+export { ComboboxInput$1 as default };

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { clsx } from '../../../../node_modules/clsx/dist/lite.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../node_modules/clsx/dist/lite.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('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 }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 var ComboboxLabel$1 = ComboboxLabel;
 
-export { ComboboxLabel, ComboboxLabel$1 as default };
+export { ComboboxLabel$1 as default };

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { removePrefix } from '../useCombobox.js';
+import { removePrefix } from '../utilities.js';
 
 const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
     const VALUE = Object.keys(selectedOptions).map((key) => removePrefix(key));
@@ -9,4 +9,4 @@ const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
 ComboboxNative.displayName = 'ComboboxNative';
 var ComboboxNative$1 = ComboboxNative;
 
-export { ComboboxNative, ComboboxNative$1 as default };
+export { ComboboxNative$1 as default };

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

@@ -1,33 +1,12 @@
 'use client';
-import { useMemo, Children, useState, isValidElement } from 'react';
-import { ComboboxOption } from './Option/Option.js';
-import ComboboxCustom from './Custom.js';
+import { useCallback, useMemo, Children, useState } from 'react';
+import { isComboboxOption, isInteractiveComboboxCustom, prefix } from './utilities.js';
 
 const isOption = (option) => !!option;
-function isComboboxOption(child) {
-    return isValidElement(child) && child.type === ComboboxOption;
-}
-function isComboboxCustom(child) {
-    return isValidElement(child) && child.type === ComboboxCustom;
-}
-function isInteractiveComboboxCustom(child) {
-    return isComboboxCustom(child) && child.props.interactive === true;
-}
-const INTERNAL_OPTION_PREFIX = 'internal-option-';
-/**
- * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
- * @param value
- * @returns
- */
-const prefix = (value) => {
-    return INTERNAL_OPTION_PREFIX + value;
-};
-const removePrefix = (value) => {
-    return value.slice(INTERNAL_OPTION_PREFIX.length);
-};
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, initialValue, }) {
+    const filterCallback = useCallback(filter, [filter]);
     const { optionsChildren, customIds, restChildren, interactiveChildren } = useMemo(() => {
         const allChildren = Children.toArray(children);
         const result = allChildren.reduce((acc, child) => {
@@ -93,7 +72,8 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
     const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
     const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
         const filteredOptions = [];
-        const filteredOptionsChildren = Object.keys(options).map((option, index) => {
+        const filteredOptionsChildren = Object.keys(options)
+            .map((option, index) => {
             /* If we have a selected value in single mode and the input matches an option, return all children */
             if (!multiple && Object.keys(selectedOptions).length === 1) {
                 filteredOptions.push(option);
@@ -103,14 +83,22 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
                 filteredOptions.push(option);
                 return optionsChildren[index];
             }
-            if (filter(inputValue, options[option])) {
+            if (filterCallback(inputValue, options[option])) {
                 filteredOptions.push(option);
                 return optionsChildren[index];
             }
-        });
+            return;
+        })
+            .filter((child) => child);
         return { filteredOptions, filteredOptionsChildren };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
+    }, [
+        filterCallback,
+        inputValue,
+        multiple,
+        options,
+        optionsChildren,
+        selectedOptions,
+    ]);
     return {
         filteredOptionsChildren,
         filteredOptions,
@@ -123,4 +111,4 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
     };
 }
 
-export { useCombobox as default, isComboboxCustom, isComboboxOption, isInteractiveComboboxCustom, prefix, removePrefix };
+export { useCombobox };