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

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

@@ -0,0 +1,8 @@
+'use client';
+'use strict';
+
+var React = require('react');
+
+const ComboboxContext = React.createContext(undefined);
+
+exports.ComboboxContext = ComboboxContext;

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

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ComboboxIdContext = React.createContext({
+    activeIndex: 0,
+});
+const ComboboxIdReducer = (state, action) => {
+    switch (action.type) {
+        case 'SET_ACTIVE_INDEX':
+            return {
+                ...state,
+                activeIndex: action.payload,
+            };
+        default:
+            return state;
+    }
+};
+const ComboboxIdDispatch = React.createContext(() => {
+    throw new Error('ComboboxIdDispatch must be used within a provider');
+});
+const ComboboxIdProvider = ({ children, }) => {
+    const [state, dispatch] = React.useReducer(ComboboxIdReducer, {
+        activeIndex: 0,
+    });
+    return (jsxRuntime.jsx(ComboboxIdContext.Provider, { value: state, children: jsxRuntime.jsx(ComboboxIdDispatch.Provider, { value: dispatch, children: children }) }));
+};
+function useComboboxIdDispatch() {
+    return React.useContext(ComboboxIdDispatch);
+}
+function useComboboxId() {
+    return React.useContext(ComboboxIdContext);
+}
+
+exports.ComboboxIdContext = ComboboxIdContext;
+exports.ComboboxIdDispatch = ComboboxIdDispatch;
+exports.ComboboxIdProvider = ComboboxIdProvider;
+exports.ComboboxIdReducer = ComboboxIdReducer;
+exports.useComboboxId = useComboboxId;
+exports.useComboboxIdDispatch = useComboboxIdDispatch;

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

@@ -7,7 +7,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
 var index = require('../../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var Combobox = require('../Combobox.js');
+var floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var ComboboxIdContext = require('../ComboboxIdContext.js');
 var Custom_module = require('./Custom.module.css.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 
@@ -17,17 +19,20 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
     }
     const Component = asChild ? index.Slot : 'div';
     const randomId = React.useId();
-    const context = React.useContext(Combobox.ComboboxContext);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { size, activeIndex, optionValues, setActiveIndex } = context;
-    const index$1 = React.useMemo(() => id && optionValues.indexOf(id), [optionValues, id]);
-    return (jsxRuntime.jsx(Component, { ref: ref, tabIndex: -1, className: clsx.clsx(Custom_module.custom, Custom_module[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, onMouseEnter: () => {
-            typeof index$1 === 'number' && setActiveIndex(index$1);
-        }, onFocus: () => {
-            typeof index$1 === 'number' && setActiveIndex(index$1);
-        }, ...objectUtils.omit(['interactive'], rest) }));
+    const { size, customIds, listRef, getItemProps } = context;
+    const index$1 = React.useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
+    const combinedRef = floatingUi_react.useMergeRefs([
+        (node) => {
+            listRef.current[index$1] = node;
+        },
+        ref,
+    ]);
+    return (jsxRuntime.jsx(Component, { ref: combinedRef, tabIndex: -1, className: clsx.clsx(Custom_module.custom, Custom_module[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index$1, "data-active": activeIndex === index$1, ...objectUtils.omit(['interactive'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], getItemProps()) }));
 });
 var ComboboxCustom$1 = ComboboxCustom;
 

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

@@ -6,16 +6,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
-var Combobox = require('../Combobox.js');
+var ComboboxContext = require('../ComboboxContext.js');
 var Empty_module = require('./Empty.module.css.js');
 
 const ComboboxEmpty = React.forwardRef(({ children, className, ...rest }, ref) => {
-    const context = React.useContext(Combobox.ComboboxContext);
+    const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxEmpty must be used within a Combobox');
     }
-    const { optionValues, size } = context;
-    return (optionValues.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Empty_module.empty, Empty_module[size], className), ...rest, children: children })));
+    const { filteredOptions, size } = context;
+    return (filteredOptions.length === 0 && (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Empty_module.empty, Empty_module[size], className), ...rest, children: children })));
 });
 ComboboxEmpty.displayName = 'ComboboxEmpty';
 

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

@@ -4,50 +4,32 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
-var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var Combobox = require('../Combobox.js');
-var useDebounce = require('../../../../utilities/useDebounce.js');
+var ComboboxContext = require('../ComboboxContext.js');
 var SelectedIcon = require('./Icon/SelectedIcon.js');
 var Option_module = require('./Option.module.css.js');
 var Description = require('./Description/Description.js');
+var useComboboxOption = require('./useComboboxOption.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 var Label = require('../../../Typography/Label/Label.js');
 
-const ComboboxOption = React.forwardRef(({ value, description, children, className, ...rest }, ref) => {
+const ComboboxOption = React.memo(React.forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
     const labelId = React.useId();
-    const generatedId = React.useId();
-    const context = React.useContext(Combobox.ComboboxContext);
+    const { id, ref, selected, active, onOptionClick } = useComboboxOption({
+        id: rest.id,
+        ref: forwardedRef,
+        value,
+    });
+    const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxOption must be used within a Combobox');
     }
-    const { selectedOptions, activeIndex, setActiveOption, onOptionClick, size, listRef, optionValues, multiple, } = context;
-    const index = React.useMemo(() => optionValues.indexOf(value), [optionValues, value]);
-    const combinedRef = floatingUi_react.useMergeRefs([
-        (node) => {
-            listRef.current[index] = node;
-        },
-        ref,
-    ]);
-    if (index === -1) {
-        throw new Error('Internal error: ComboboxOption did not find index');
-    }
-    const selected = selectedOptions.find((option) => option.value === value);
-    React.useEffect(() => {
-        if (activeIndex === index)
-            setActiveOption(index, rest.id || generatedId);
-    }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
-    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
-    return (jsxRuntime.jsxs("button", { id: rest.id || generatedId, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
-            onOptionClickDebounced();
+    const { size, multiple, getItemProps } = context;
+    const props = getItemProps();
+    return (jsxRuntime.jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+            onOptionClick();
             rest.onClick?.(e);
-        }, onMouseEnter: (e) => {
-            setActiveOption(index, labelId);
-            rest.onMouseEnter?.(e);
-        }, onFocus: (e) => {
-            setActiveOption(index, labelId);
-            rest.onFocus?.(e);
-        }, className: clsx.clsx(Option_module.option, Option_module[size], activeIndex === index && Option_module.active, multiple && Option_module.multiple, className), ref: combinedRef, ...objectUtils.omit(['displayValue'], rest), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: Option_module.optionText, size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
-});
+        }, className: clsx.clsx(Option_module.option, Option_module[size], active && Option_module.active, multiple && Option_module.multiple, className), ...objectUtils.omit(['displayValue'], rest), ...objectUtils.omit(['onClick', 'onPointerLeave'], props), children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SelectedIcon.SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxRuntime.jsxs(Label.Label, { className: Option_module.optionText, size: size, id: labelId, children: [children, description && (jsxRuntime.jsx(Description.default, { children: description }))] })] }));
+}));
 ComboboxOption.displayName = 'ComboboxOption';
 
 exports.ComboboxOption = ComboboxOption;

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

@@ -0,0 +1,47 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var ComboboxContext = require('../ComboboxContext.js');
+var useDebounce = require('../../../../utilities/useDebounce.js');
+var ComboboxIdContext = require('../ComboboxIdContext.js');
+
+function useComboboxOption({ id, ref, value, }) {
+    const generatedId = React.useId();
+    const newId = id || generatedId;
+    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const { activeIndex } = ComboboxIdContext.useComboboxId();
+    const dispatch = ComboboxIdContext.useComboboxIdDispatch();
+    if (!context) {
+        throw new Error('ComboboxOption must be used within a Combobox');
+    }
+    const { selectedOptions, onOptionClick, listRef, customIds, filteredOptions, } = context;
+    const index = React.useMemo(() => filteredOptions.indexOf(value) + customIds.length, [customIds.length, filteredOptions, value]);
+    const combinedRef = floatingUi_react.useMergeRefs([
+        (node) => {
+            listRef.current[index] = node;
+        },
+        ref,
+    ]);
+    if (index === -1) {
+        throw new Error('Internal error: ComboboxOption did not find index');
+    }
+    const selected = selectedOptions[value];
+    const active = activeIndex === index;
+    React.useEffect(() => {
+        if (active) {
+            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
+        }
+    }, [generatedId, id, dispatch, active, index]);
+    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    return {
+        id: newId,
+        ref: combinedRef,
+        selected,
+        active,
+        onOptionClick: onOptionClickDebounced,
+    };
+}
+
+module.exports = useComboboxOption;

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

@@ -6,16 +6,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('../../../Chip/index.js');
-var Combobox = require('../Combobox.js');
+var ComboboxContext = require('../ComboboxContext.js');
 var Removable = require('../../../Chip/Removable/Removable.js');
 
 const ComboboxChips = () => {
-    const context = React.useContext(Combobox.ComboboxContext);
+    const context = React.useContext(ComboboxContext.ComboboxContext);
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, selectedOptions, setSelectedOptions, chipSrLabel, inputRef, } = context;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptions.map((option) => {
+    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)
                         return;
@@ -23,7 +23,10 @@ const ComboboxChips = () => {
                         return;
                     if (e.key === 'Enter') {
                         e.stopPropagation();
-                        setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                        handleSelectOption({
+                            option: selectedOptions[value],
+                            remove: true,
+                        });
                         inputRef.current?.focus();
                     }
                 }, onClick: () => {
@@ -32,11 +35,11 @@ const ComboboxChips = () => {
                     if (disabled)
                         return;
                     /* If we click a chip, filter the active values and remove the one we clicked */
-                    setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
-                }, style: {
-                    /* We already set the opacity on Combobox */
-                    opacity: 1,
-                }, "aria-label": chipSrLabel(option), children: option.label }, option.value));
+                    handleSelectOption({
+                        option: selectedOptions[value],
+                        remove: true,
+                    });
+                }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
         }) }));
 };
 ComboboxChips.displayName = 'ComboboxChips';

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

@@ -7,22 +7,21 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var akselIcons = require('@navikt/aksel-icons');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
-var Combobox = require('../Combobox.js');
+var ComboboxContext = require('../ComboboxContext.js');
 var Combobox_module = require('../Combobox.module.css.js');
 
 const ComboboxClearButton = () => {
-    const context = React.useContext(Combobox.ComboboxContext);
+    const context = React.useContext(ComboboxContext.ComboboxContext);
     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

@@ -7,97 +7,68 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
 var akselIcons = require('@navikt/aksel-icons');
-var floatingUi_react = require('../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
-var Combobox = require('../Combobox.js');
+var floatingUi_react = require('../../../../packages/react/node_modules/@floating-ui/react/dist/floating-ui.react.js');
+var ComboboxContext = require('../ComboboxContext.js');
 var Combobox_module = require('../Combobox.module.css.js');
 var Textfield_module = require('../../Textfield/Textfield.module.css.js');
+var ComboboxIdContext = require('../ComboboxIdContext.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
 var Box = require('../../../Box/Box.js');
 var objectUtils = require('../../../../utilities/objectUtils.js');
 
-const ComboboxInput = ({ ...rest }) => {
-    const context = React.useContext(Combobox.ComboboxContext);
+const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
+    const context = React.useContext(ComboboxContext.ComboboxContext);
+    const idDispatch = ComboboxIdContext.useComboboxIdDispatch();
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const setActiveIndex = (id) => {
+        idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
+    };
+    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.find((option) => option.label === value);
+        const option = options[value.toLowerCase()];
         if (!option)
             return;
-        if (selectedOptions.find((selectedOption) => selectedOption.value === option.value))
+        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 && selectedOptions.length > 0;
-    return (jsxRuntime.jsxs(Box.Box
+    const showClearButton = multiple && !hideClearButton && Object.keys(selectedOptions).length > 0;
     /* Props from floating-ui */
-    , { ...getReferenceProps({
-            ref: refs?.setReference,
-            role: null,
-            '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 (disabled)
-                    return;
-                if (readOnly)
-                    return;
-                setOpen(true);
-                setActiveIndex(0);
-                inputRef.current?.focus();
-            },
-            /* Handles list navigation */
-            onKeyDown(event) {
-                handleKeyDown(event);
-            },
-            // preventDefault on keydown to avoid sending in form
-            onKeyPress(event) {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                }
-            },
-        }), "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": 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) => {
+    const props = getReferenceProps({
+        ref: refs?.setReference,
+        role: null,
+        '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 (disabled)
+                return;
+            if (readOnly)
+                return;
+            setOpen(true);
+            setActiveIndex(0);
+            inputRef.current?.focus();
+        },
+        /* Handles list navigation */
+        onKeyDown: handleKeyDown,
+        // preventDefault on keydown to avoid sending in form
+        onKeyPress(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+            }
+        },
+    });
+    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/internal/ComboboxNative.js

@@ -7,8 +7,8 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
     return (jsxRuntime.jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple
-            ? selectedOptions.map((option) => option.value)
-            : selectedOptions[0]?.value, onChange: () => { }, children: selectedOptions.map((option) => (jsxRuntime.jsx("option", { value: option.value }, option.value))) }));
+            ? Object.keys(selectedOptions)
+            : Object.keys(selectedOptions)[0], onChange: () => { }, children: Object.keys(selectedOptions).map((value) => (jsxRuntime.jsx("option", { value: value }, value))) }));
 };
 ComboboxNative.displayName = 'ComboboxNative';
 var ComboboxNative$1 = ComboboxNative;