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

package/dist/cjs/components/Accordion/Accordion.js

@@ -4,11 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var Accordion_module = require('./Accordion.module.css.js');
 
-const Accordion = React.forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsxRuntime.jsx("div", { className: clsx.clsx(Accordion_module.accordion, Accordion_module[color], {
-        [Accordion_module.border]: border,
-    }, className), ref: ref, ...rest })));
+const Accordion = React.forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsxRuntime.jsx("div", { className: clsx.clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest })));
 Accordion.displayName = 'Accordion';
 
 exports.Accordion = Accordion;

package/dist/cjs/components/Accordion/AccordionContent/AccordionContent.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var AnimateHeight = require('../../../utilities/AnimateHeight/AnimateHeight.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
@@ -15,7 +14,7 @@ const AccordionContent = React.forwardRef(({ children, className, ...rest }, ref
         console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
         return null;
     }
-    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Accordion_module.content, className), ...rest, children: children }) }) }));
+    return (jsxRuntime.jsx(AnimateHeight.AnimateHeight, { id: context.contentId, open: context.open, children: jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx('fds-accordion__content', className), ...rest, children: children }) }) }));
 });
 AccordionContent.displayName = 'AccordionContent';
 

package/dist/cjs/components/Accordion/AccordionHeader/AccordionHeader.js

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 var AccordionItem = require('../AccordionItem/AccordionItem.js');
 var Heading = require('../../Typography/Heading/Heading.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
@@ -20,7 +19,7 @@ const AccordionHeader = React.forwardRef(({ level = 1, children, className, onHe
         context.toggleOpen();
         onHeaderClick && onHeaderClick(e);
     };
-    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xsmall', level: level, className: clsx.clsx(Accordion_module.header, className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: clsx.clsx(Accordion_module.accordionButton, `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: Accordion_module.expandIcon, fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
+    return (jsxRuntime.jsx(Heading.Heading, { ref: ref, size: 'xsmall', level: level, className: clsx.clsx('fds-accordion__header', className), ...rest, children: jsxRuntime.jsxs("button", { type: 'button', className: clsx.clsx('fds-accordion__button', `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsxRuntime.jsx(akselIcons.ChevronDownIcon, { "aria-hidden": true, className: 'fds-accordion__expand-icon', fontSize: '1.5rem' }), jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: 'small', children: jsxRuntime.jsx("span", { children: children }) })] }) }));
 });
 AccordionHeader.displayName = 'AccordionHeader';
 

package/dist/cjs/components/Accordion/AccordionItem/AccordionItem.js

@@ -4,15 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../../node_modules/clsx/dist/clsx.js');
 var React = require('react');
-var Accordion_module = require('../Accordion.module.css.js');
 
 const AccordionItemContext = React.createContext(null);
 const AccordionItem = React.forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const contentId = React.useId();
-    return (jsxRuntime.jsx("div", { className: clsx.clsx(Accordion_module.item, {
-            [Accordion_module.open]: open ?? internalOpen,
-        }, className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
+    return (jsxRuntime.jsx("div", { className: clsx.clsx('fds-accordion__item', (open ?? internalOpen) && 'fds-accordion__item--open', className), ref: ref, ...rest, children: jsxRuntime.jsx(AccordionItemContext.Provider, { value: {
                 open: open ?? internalOpen,
                 toggleOpen: () => {
                     if (open === undefined) {

package/dist/cjs/components/Button/Button.js

@@ -3,7 +3,7 @@
 
 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 index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
 /**
@@ -11,7 +11,7 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
  */
 const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, { 'fds-btn--full-width': fullWidth }, { 'fds-btn--icon-only': icon }, className), ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: lite.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/cjs/components/Modal/ModalHeader/ModalHeader.js

@@ -15,7 +15,7 @@ var Heading = require('../../Typography/Heading/Heading.js');
 const ModalHeader = React.forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const context = React.useContext(ModalRoot.ModalContext);
-    return (jsxRuntime.jsxs(Component, { ref: ref, className: clsx.clsx(ModalHeader_module.modalHeader, !closeButton && ModalHeader_module.noCloseButton, className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'small', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xsmall', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'second', size: 'medium', onClick: context?.closeModal, autoFocus: true, icon: true, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+    return (jsxRuntime.jsxs(Component, { ref: ref, className: clsx.clsx(ModalHeader_module.modalHeader, !closeButton && ModalHeader_module.noCloseButton, className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'small', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xsmall', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'second', size: 'medium', onClick: context?.closeModal, autoFocus: true, icon: true, className: ModalHeader_module.modalHeaderButton, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

package/dist/cjs/components/Modal/ModalHeader/ModalHeader.module.css.js

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-var classes = {"modalHeader":"fds-modalheader-modalHeader-47e4ee5b","noCloseButton":"fds-modalheader-noCloseButton-47e4ee5b"};
+var classes = {"modalHeader":"fds-modalheader-modalHeader-47e4ee5b","modalHeaderButton":"fds-modalheader-modalHeaderButton-47e4ee5b","noCloseButton":"fds-modalheader-noCloseButton-47e4ee5b"};
 
 module.exports = classes;

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

@@ -23,14 +23,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 +50,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 +66,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 +123,6 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
         interactiveChildren,
         setOpen,
         setInputValue,
-        setSelectedOptions,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = index.useVirtualizer({
@@ -147,23 +145,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,13 +161,13 @@ 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: 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), 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,

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

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

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

@@ -15,14 +15,13 @@ const ComboboxClearButton = () => {
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
+    const { size, readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
     return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)
                 return;
-            setSelectedOptions({});
-            setInputValue('');
+            handleSelectOption({ option: null, clear: true });
         }, onKeyDown: (e) => {
             if (readOnly)
                 return;
@@ -30,9 +29,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/ComboboxInput.js

@@ -17,7 +17,7 @@ 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 +26,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, size, 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 +60,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,7 +68,7 @@ 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: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], 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) => {
                             onChange(e);
                             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' })) })] }));

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

@@ -20,35 +20,59 @@ function isInteractiveComboboxCustom(child) {
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, initialValue, }) {
-    const options = React.useMemo(() => {
-        const allOptions = {};
-        React.Children.forEach(children, (child) => {
+    const { optionsChildren, customIds, restChildren, interactiveChildren } = React.useMemo(() => {
+        const allChildren = React.Children.toArray(children);
+        const result = allChildren.reduce((acc, child) => {
             if (isComboboxOption(child)) {
-                const props = child.props;
-                let label = props.displayValue || '';
-                if (!props.displayValue) {
-                    let childrenLabel = '';
-                    // go over children and find all strings
-                    React.Children.forEach(props.children, (child) => {
-                        if (typeof child === 'string') {
-                            childrenLabel += child;
-                        }
-                        else {
-                            throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
-                        }
-                    });
-                    label = childrenLabel;
+                acc.optionsChildren.push(child);
+            }
+            else {
+                acc.restChildren.push(child);
+                if (isInteractiveComboboxCustom(child)) {
+                    const childElement = child;
+                    acc.interactiveChildren.push(childElement);
+                    if (!childElement.props.id) {
+                        throw new Error('If ComboboxCustom is interactive, it must have an id');
+                    }
+                    acc.customIds.push(childElement.props.id);
                 }
-                allOptions[props.value] = {
-                    value: props.value,
-                    label,
-                    displayValue: props.displayValue,
-                    description: props.description,
-                };
             }
+            return acc;
+        }, {
+            optionsChildren: [],
+            customIds: [],
+            restChildren: [],
+            interactiveChildren: [],
         });
-        return allOptions;
+        return result;
     }, [children]);
+    const options = React.useMemo(() => {
+        const allOptions = {};
+        optionsChildren.map((child) => {
+            const props = child.props;
+            let label = props.displayValue || '';
+            if (!props.displayValue) {
+                let childrenLabel = '';
+                // go over children and find all strings
+                React.Children.forEach(props.children, (child) => {
+                    if (typeof child === 'string') {
+                        childrenLabel += child;
+                    }
+                    else {
+                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
+                    }
+                });
+                label = childrenLabel;
+            }
+            allOptions[props.value] = {
+                value: props.value,
+                label,
+                displayValue: props.displayValue,
+                description: props.description,
+            };
+        });
+        return allOptions;
+    }, [optionsChildren]);
     const preSelectedOptions = React.useMemo(() => (initialValue || []).reduce((acc, value) => {
         const option = options[value];
         if (isOption(option)) {
@@ -57,22 +81,6 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return acc;
     }, {}), [initialValue, options]);
     const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
-    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
-    const { optionsChildren, customIds } = React.useMemo(() => {
-        const allChildren = React.Children.toArray(children);
-        const optionsChildren = allChildren.filter((child) => isComboboxOption(child));
-        // find all custom components with `interactive=true` and generate random values for them
-        const customChildren = allChildren.filter((child) => {
-            return isInteractiveComboboxCustom(child);
-        });
-        // return all ids
-        const customIds = customChildren.map((child) => {
-            if (!child.props.id)
-                throw new Error('If ComboboxCustom is interactive, it must have an id');
-            return child.props.id;
-        });
-        return { optionsChildren, customIds };
-    }, [children]);
     const { filteredOptions, filteredOptionsChildren } = React.useMemo(() => {
         const filteredOptions = [];
         const filteredOptionsChildren = Object.keys(options)
@@ -90,35 +98,15 @@ function useCombobox({ children, inputValue, multiple, filter = (inputValue, opt
         return { filteredOptions, filteredOptionsChildren };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inputValue, multiple, options, optionsChildren, selectedOptions]);
-    const optionValues = React.useMemo(() => {
-        // create an index map of values from optionsChildren
-        const options = optionsChildren.map((child) => {
-            const { value } = child.props;
-            return value;
-        });
-        return [...customIds, ...options];
-    }, [customIds, optionsChildren]);
-    const { restChildren, interactiveChildren } = React.useMemo(() => {
-        const restChildren = React.Children.toArray(children).filter((child) => {
-            return !isComboboxOption(child);
-        });
-        const interactiveChildren = restChildren.filter((child) => {
-            return isInteractiveComboboxCustom(child);
-        });
-        return { restChildren, interactiveChildren };
-    }, [children]);
     return {
         filteredOptionsChildren,
         filteredOptions,
-        optionValues,
         restChildren,
         options,
         customIds,
         selectedOptions,
-        prevSelectedHash,
         interactiveChildren,
         setSelectedOptions,
-        setPrevSelectedHash,
     };
 }