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

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

@@ -4,7 +4,7 @@
 var useDebounce = require('../../../utilities/useDebounce.js');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
 
-const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, setInputValue, setSelectedOptions, handleSelectOption, }) => {
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
     const { activeIndex } = ComboboxIdContext.useComboboxId();
     // handle keyboard navigation in the list
     const handleKeyDownFunc = (event) => {
@@ -15,16 +15,16 @@ const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filtered
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                }
+                if (open)
+                    break;
+                setOpen(true);
                 break;
             case 'ArrowUp':
                 event.preventDefault();
                 /* If we are on the first item, close */
-                if (activeIndex === 0) {
-                    setOpen(false);
-                }
+                if (activeIndex !== 0)
+                    break;
+                setOpen(false);
                 break;
             case 'Enter':
                 event.preventDefault();
@@ -44,30 +44,27 @@ const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filtered
                 const valueIndex = activeIndex - interactiveChildren.length;
                 // eslint-disable-next-line no-case-declarations
                 const option = filteredOptions[valueIndex];
-                if (!multiple) {
-                    // check if option is already selected, if so, deselect it
-                    if (selectedOptions[option]) {
-                        setSelectedOptions({});
-                        setInputValue('');
-                        return;
-                    }
-                }
-                handleSelectOption(options[option]);
+                handleSelectOption({ option: options[option] });
                 break;
             case 'Backspace':
-                if (inputValue === '' &&
-                    multiple &&
-                    Object.keys(selectedOptions).length >= 0) {
-                    setSelectedOptions((prev) => {
-                        const updated = { ...prev };
-                        const keys = Object.keys(updated);
-                        delete updated[keys[keys.length - 1]];
-                        return updated;
-                    });
-                }
-                // if we are in single mode, we need to set activeValue to null
+                // if we are in single mode, we need to set selectedOptions to empty
                 if (!multiple) {
-                    setSelectedOptions({});
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
+                    break;
+                }
+                if (inputValue === '' && multiple) {
+                    const lastOption = Object.keys(selectedOptions).pop();
+                    /* Remove last option, and use handleSelectOption */
+                    lastOption &&
+                        handleSelectOption({
+                            option: selectedOptions[lastOption],
+                            remove: true,
+                        });
                 }
                 break;
         }

package/dist/cjs/node_modules/clsx/dist/clsx.js

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 exports.clsx = clsx;
 exports.default = clsx;

package/dist/cjs/node_modules/clsx/dist/lite.js

@@ -0,0 +1,9 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function clsx(){for(var t,r=0,e="",n=arguments.length;r<n;r++)(t=arguments[r])&&"string"==typeof t&&(e+=(e&&" ")+t);return e}
+
+exports.clsx = clsx;
+exports.default = clsx;

package/dist/cjs/react-css-modules.css

@@ -517,140 +517,6 @@
   }
 }
 
-@layer fds.accordion {
-  .fds-accordion-accordion-a8137c3d {
-    --fds-accordion-border-radius: var(--fds-border_radius-interactive);
-    --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
-
-    border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-    box-sizing: border-box;
-  }
-
-  .fds-accordion-border-a8137c3d {
-    border: 1px solid var(--fds-accordion-border-color);
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-expandIcon-a8137c3d {
-    border-radius: var(--fds-border_radius-interactive);
-  }
-
-  .fds-accordion-content-a8137c3d {
-    padding: var(--fds-spacing-5, 1rem);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .fds-accordion-header-a8137c3d {
-    margin: 0;
-  }
-
-  .fds-accordion-accordionButton-a8137c3d {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--fds-spacing-2);
-    margin: 0;
-    text-align: left;
-    cursor: pointer;
-    border: none;
-    border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
-    padding: var(--fds-spacing-4);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    border-radius: var(--fds-accordion-border-radius);
-  }
-
-  .fds-accordion-item-a8137c3d:focus-within {
-    position: relative;
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d:hover + * .fds-accordion-content-a8137c3d {
-    border-color: var(--fds-semantic-border-neutral-strong);
-  }
-
-  .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-expandIcon-a8137c3d {
-    transform: rotateZ(180deg);
-  }
-
-  .fds-accordion-neutral-a8137c3d,
-  .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-default);
-  }
-
-  .fds-accordion-subtle-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-neutral-subtle);
-  }
-
-  .fds-accordion-first-a8137c3d,
-  .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-first-default);
-
-    background: var(--fds-semantic-surface-first-light);
-  }
-
-  .fds-accordion-second-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-second-default);
-
-    background: var(--fds-semantic-surface-second-light);
-  }
-
-  .fds-accordion-third-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d {
-    --fds-accordion-border-color: var(--fds-semantic-border-third-default);
-
-    background: var(--fds-semantic-surface-third-light);
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: rgba(0 0 0 / 0.03);
-  }
-
-  .fds-accordion-neutral-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-subtle-a8137c3d .fds-accordion-item-a8137c3d:where(.fds-accordion-open-a8137c3d) .fds-accordion-accordionButton-a8137c3d {
-    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-  }
-
-  .fds-accordion-border-a8137c3d .fds-accordion-item-a8137c3d:first-child .fds-accordion-accordionButton-a8137c3d {
-    border-top: 0;
-  }
-
-  .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
-  .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .fds-accordion-accordionButton-a8137c3d:hover .fds-accordion-expandIcon-a8137c3d {
-      background-color: rgba(0 0 0 / 0.1);
-    }
-
-    .fds-accordion-neutral-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover,
-    .fds-accordion-subtle-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
-    }
-
-    .fds-accordion-first-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-first-light-hover);
-    }
-
-    .fds-accordion-second-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-second-light-hover);
-    }
-
-    .fds-accordion-third-a8137c3d .fds-accordion-accordionButton-a8137c3d:hover {
-      background-color: var(--fds-semantic-surface-third-light-hover);
-    }
-  }
-}
-
 .fds-animateheight-root-a203211d.fds-animateheight-openingOrClosing-a203211d,
 .fds-animateheight-root-a203211d.fds-animateheight-closed-a203211d {
   overflow: hidden;
@@ -2170,7 +2036,7 @@
     color: var(--fds-semantic-text-neutral-default);
   }
 
-  .fds-modalheader-modalHeader-47e4ee5b button {
+  .fds-modalheader-modalHeaderButton-47e4ee5b {
     position: absolute;
     top: var(--fds-spacing-3);
     right: var(--fds-spacing-3);
@@ -3039,7 +2905,7 @@
   /**
    * Apply a focus outline on an element when it is focused with keyboard
    */
-  .fds-combobox-inFocus-249a725c {
+  .fds-combobox-inputWrapper-249a725c:has(input:focus) {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);

package/dist/esm/components/Accordion/Accordion.js

@@ -2,11 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import classes from './Accordion.module.css.js';
 
-const Accordion = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsx("div", { className: clsx(classes.accordion, classes[color], {
-        [classes.border]: border,
-    }, className), ref: ref, ...rest })));
+const Accordion = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => (jsx("div", { className: clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest })));
 Accordion.displayName = 'Accordion';
 
 export { Accordion };

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

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

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

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

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

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

package/dist/esm/components/Button/Button.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 
 /**
@@ -9,7 +9,7 @@ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_mo
  */
 const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, type: type, className: 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 (jsx(Component, { ref: ref, type: type, className: 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/esm/components/Modal/ModalHeader/ModalHeader.js

@@ -13,7 +13,7 @@ import { Heading } from '../../Typography/Heading/Heading.js';
 const ModalHeader = forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
     const context = useContext(ModalContext);
-    return (jsxs(Component, { ref: ref, className: clsx(classes.modalHeader, !closeButton && classes.noCloseButton, className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'small', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xsmall', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'second', size: 'medium', onClick: context?.closeModal, autoFocus: true, icon: true, children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+    return (jsxs(Component, { ref: ref, className: clsx(classes.modalHeader, !closeButton && classes.noCloseButton, className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'small', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xsmall', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'second', size: 'medium', onClick: context?.closeModal, autoFocus: true, icon: true, className: classes.modalHeaderButton, children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

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

@@ -1,4 +1,4 @@
 'use client';
-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"};
 
 export { classes as default };

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

@@ -21,14 +21,13 @@ import { Box } from '../../Box/Box.js';
 import { Spinner } from '../../Spinner/Spinner.js';
 import { omit } from '../../../utilities/objectUtils.js';
 
-const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = useRef(null);
     const portalRef = useRef(null);
     const listRef = useRef([]);
     const listId = useId();
     const [inputValue, setInputValue] = useState(rest.inputValue || '');
-    /* const idDispatch = useComboboxIdDispatch(); */
-    const { selectedOptions, options, restChildren, interactiveChildren, optionValues, customIds, filteredOptionsChildren, filteredOptions, prevSelectedHash, setSelectedOptions, setPrevSelectedHash, } = useCombobox({
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox({
         children,
         inputValue,
         filter,
@@ -49,20 +48,11 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
     }, 'combobox');
     // if value is set, set input value to the label of the value
     useEffect(() => {
-        if (value && value.length >= 0 && !multiple) {
+        if (value && value.length > 0 && !multiple) {
             const option = options[value[0]];
             setInputValue(option?.label || '');
         }
     }, [multiple, value, options]);
-    // Send new value if option was clicked
-    useEffect(() => {
-        const selectedHash = JSON.stringify(selectedOptions);
-        if (prevSelectedHash === selectedHash)
-            return;
-        const values = Object.keys(selectedOptions);
-        onValueChange?.(values);
-        setPrevSelectedHash(selectedHash);
-    }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
     useEffect(() => {
         if (value && Object.keys(options).length >= 0) {
             const updatedSelectedOptions = value.map((option) => {
@@ -74,38 +64,47 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                 return acc;
             }, {}));
         }
-    }, [multiple, prevSelectedHash, value, options, setSelectedOptions]);
+    }, [multiple, value, options, setSelectedOptions]);
     // handle click on option, either select or deselect - Handles single or multiple
-    const handleSelectOption = (option) => {
-        // if option is already selected, remove it
-        if (value && value.includes(option.value)) {
-            setSelectedOptions((prev) => {
-                const updated = { ...prev };
-                delete updated[option.value];
-                return updated;
-            });
+    const handleSelectOption = (args) => {
+        const { option, clear, remove } = args;
+        if (clear) {
+            setSelectedOptions({});
+            setInputValue('');
+            onValueChange?.([]);
             return;
         }
+        if (!option)
+            return;
+        if (remove) {
+            const newSelectedOptions = { ...selectedOptions };
+            delete newSelectedOptions[option.value];
+            setSelectedOptions(newSelectedOptions);
+            onValueChange?.(Object.keys(newSelectedOptions));
+            return;
+        }
+        const newSelectedOptions = { ...selectedOptions };
         if (multiple) {
-            /* setSelectedOptions([...selectedOptions, option]); */
-            setSelectedOptions((prev) => {
-                const updated = { ...prev };
-                updated[option.value] = option;
-                return updated;
-            });
+            if (newSelectedOptions[option.value]) {
+                delete newSelectedOptions[option.value];
+            }
+            else {
+                newSelectedOptions[option.value] = option;
+            }
             setInputValue('');
             inputRef.current?.focus();
         }
         else {
-            setSelectedOptions({
-                [option.value]: option,
-            });
+            newSelectedOptions[option.value] = option;
             setInputValue(option?.label || '');
             // move cursor to the end of the input
             setTimeout(() => {
                 inputRef.current?.setSelectionRange(option?.label?.length || 0, option?.label?.length || 0);
             }, 0);
         }
+        setSelectedOptions(newSelectedOptions);
+        console.log('calling new value with: ', Object.keys(newSelectedOptions));
+        onValueChange?.(Object.keys(newSelectedOptions));
         !multiple && setOpen(false);
         refs.domReference.current?.focus();
     };
@@ -122,7 +121,6 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
         interactiveChildren,
         setOpen,
         setInputValue,
-        setSelectedOptions,
         handleSelectOption: debouncedHandleSelectOption,
     });
     const rowVirtualizer = useVirtualizer({
@@ -145,23 +143,15 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             inputRef,
             refs,
             inputValue,
-            error,
             formFieldProps,
-            name,
             htmlSize,
-            optionValues,
-            hideChips,
-            clearButtonLabel: cleanButtonLabel || clearButtonLabel,
-            hideClearButton,
-            listId,
+            clearButtonLabel,
             customIds,
             filteredOptions,
             setInputValue,
-            handleKeyDown,
             setOpen,
             getReferenceProps,
             getItemProps,
-            setSelectedOptions,
             /* Recieves the value of the option, and searches for it in our values lookup */
             onOptionClick: (value) => {
                 if (readOnly)
@@ -169,13 +159,13 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
                 if (disabled)
                     return;
                 const option = options[value];
-                debouncedHandleSelectOption(option);
+                debouncedHandleSelectOption({ option: option });
             },
             handleSelectOption: debouncedHandleSelectOption,
             chipSrLabel,
             listRef,
             forwareddRef,
-        }, children: [jsxs(Box, { className: clsx(classes.combobox, disabled && classes.disabled, className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxs(Box, { className: clsx(classes.combobox, disabled && classes.disabled, className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'medium', borderRadius: 'medium', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

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

@@ -1,4 +1,4 @@
 'use client';
-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"};
 
 export { classes as default };

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

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

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

@@ -11,14 +11,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 (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)
                 return;
-            setSelectedOptions({});
-            setInputValue('');
+            handleSelectOption({ option: null, clear: true });
         }, onKeyDown: (e) => {
             if (readOnly)
                 return;
@@ -26,9 +25,7 @@ const ComboboxClearButton = () => {
                 return;
             if (e.key === 'Enter') {
                 e.stopPropagation();
-                setSelectedOptions({});
-                setInputValue('');
-                inputRef.current?.focus();
+                handleSelectOption({ option: null, clear: true });
             }
         }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 };