@digdir/designsystemet-react 0.52.0-alpha.0

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import classes from './Checkbox.module.css.js';
+import { useCheckbox } from './useCheckbox.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+import { omit } from '../../../utilities/objectUtils.js';
+import { Label } from '../../Typography/Label/Label.js';
+
+const Checkbox = forwardRef((props, ref) => {
+    const { children, description, className, ...rest } = props;
+    const { inputProps, descriptionId, hasError, size = 'medium', readOnly, } = useCheckbox(props);
+    const inputRef = useMergeRefs([
+        ref,
+        (el) => {
+            if (el) {
+                el.indeterminate = rest.indeterminate ?? false;
+            }
+        },
+    ]);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.container, classes[size], inputProps.disabled && classes.disabled, hasError && classes.error, readOnly && classes.readonly, className), children: [jsx("input", { className: classes.input, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), jsx(Label, { className: classes.label, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: classes.description, children: description }) }))] }) }));
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"container":"fds-checkbox-container-874e13bc","label":"fds-checkbox-label-874e13bc","description":"fds-checkbox-description-874e13bc","input":"fds-checkbox-input-874e13bc","disabled":"fds-checkbox-disabled-874e13bc","readonly":"fds-checkbox-readonly-874e13bc","error":"fds-checkbox-error-874e13bc","small":"fds-checkbox-small-874e13bc","medium":"fds-checkbox-medium-874e13bc","large":"fds-checkbox-large-874e13bc"};
+
+export { classes as default };

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState } from 'react';
+import { Fieldset } from '../../Fieldset/Fieldset.js';
+
+const CheckboxGroupContext = createContext(null);
+const CheckboxGroup = forwardRef(({ onChange, children, value, readOnly, defaultValue, size = 'medium', ...rest }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+    const toggleValue = (checkboxValue) => {
+        const currentValue = value ?? internalValue;
+        const updatedValue = currentValue.includes(checkboxValue)
+            ? currentValue.filter((x) => x !== checkboxValue)
+            : [...currentValue, checkboxValue];
+        if (typeof value !== 'undefined' || value !== null) {
+            setInternalValue(updatedValue);
+        }
+        onChange?.(updatedValue);
+    };
+    return (jsx(Fieldset, { readOnly: readOnly, size: size, ref: ref, ...rest, children: jsx(CheckboxGroupContext.Provider, { value: {
+                value,
+                defaultValue,
+                toggleValue,
+            }, children: jsx("div", { children: children }) }) }));
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+export { CheckboxGroup, CheckboxGroupContext };

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

@@ -0,0 +1,10 @@
+'use client';
+import { Checkbox as Checkbox$1 } from './Checkbox.js';
+import { CheckboxGroup } from './Group/Group.js';
+
+/** `<input> element with `type="checkbox"` used for selecting one option */
+const Checkbox = Checkbox$1;
+Checkbox.Group = CheckboxGroup;
+Checkbox.Group.displayName = 'Checkbox.Group';
+
+export { Checkbox, CheckboxGroup };

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

@@ -0,0 +1,42 @@
+'use client';
+import { useContext } from 'react';
+import { useFormField } from '../useFormField.js';
+import { CheckboxGroupContext } from './Group/Group.js';
+
+/** Handles props for `Checkbox` in context with `Checkbox.Group` (and `Fieldset`) */
+const useCheckbox = (props) => {
+    const checkboxGroup = useContext(CheckboxGroupContext);
+    const { inputProps, readOnly, ...rest } = useFormField(props, 'checkbox');
+    return {
+        ...rest,
+        readOnly,
+        inputProps: {
+            ...inputProps,
+            readOnly,
+            type: 'checkbox',
+            defaultChecked: checkboxGroup?.defaultValue
+                ? checkboxGroup?.defaultValue.includes(props.value)
+                : props.defaultChecked,
+            checked: checkboxGroup?.value
+                ? checkboxGroup?.value.includes(props.value)
+                : props.checked,
+            onClick: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onClick?.(e);
+            },
+            onChange: (e) => {
+                if (readOnly) {
+                    e.preventDefault();
+                    return;
+                }
+                props?.onChange?.(e);
+                checkboxGroup?.toggleValue(props.value);
+            },
+        },
+    };
+};
+
+export { useCheckbox };

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

@@ -0,0 +1,301 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useState, useEffect, createContext } from 'react';
+import { useFloating, useRole, useDismiss, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
+import { useVirtualizer } from '../../../node_modules/@tanstack/react-virtual/build/lib/index.js';
+import { useFormField } from '../useFormField.js';
+import useDebounce from '../../../utilities/useDebounce.js';
+import useCombobox, { isInteractiveComboboxCustom, isComboboxOption } from './useCombobox.js';
+import classes from './Combobox.module.css.js';
+import ComboboxInput from './internal/ComboboxInput.js';
+import ComboboxLabel from './internal/ComboboxLabel.js';
+import ComboboxError from './internal/ComboboxError.js';
+import ComboboxNative from './internal/ComboboxNative.js';
+import ComboboxCustom from './Custom/Custom.js';
+import { Box } from '../../Box/Box.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+import { autoUpdate } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { flip, size, offset } from '../../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { omit } from '../../../utilities/objectUtils.js';
+
+const Combobox = forwardRef(({ value, onValueChange, label, hideLabel = false, description, multiple = false, size: size$1 = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter = (inputValue, option) => {
+    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+    const inputRef = useRef(null);
+    const portalRef = useRef(null);
+    const listId = useId();
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(rest.inputValue || '');
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [activeDescendant, setActiveDescendant] = useState(undefined);
+    const [prevSelectedHash, setPrevSelectedHash] = useState(JSON.stringify(selectedOptions));
+    useEffect(() => {
+        if (rest.inputValue !== undefined) {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
+    const formFieldProps = useFormField({
+        disabled,
+        readOnly,
+        error,
+        errorId,
+        size: size$1,
+        description,
+        id,
+    }, 'combobox');
+    const listRef = useRef([]);
+    const { options, optionsChildren, restChildren, optionValues, customIds } = useCombobox({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        selectedOptions,
+    });
+    // if value is set, set input value to the label of the value
+    useEffect(() => {
+        if (value && value.length > 0 && !multiple) {
+            const option = options.find((option) => option.value === value[0]);
+            setInputValue(option?.label || '');
+        }
+    }, [multiple, value, options]);
+    // floating UI
+    const { refs, floatingStyles, context } = useFloating({
+        whileElementsMounted: autoUpdate,
+        open,
+        onOpenChange: setOpen,
+        middleware: [
+            flip({ padding: 10 }),
+            size({
+                apply({ rects, elements }) {
+                    requestAnimationFrame(() => {
+                        Object.assign(elements.floating.style, {
+                            width: `calc(${rects.reference.width}px - calc(var(--fds-spacing-2) * 2))`,
+                            maxHeight: `200px`,
+                        });
+                    });
+                },
+            }),
+            offset(10),
+        ],
+    });
+    const role = useRole(context, { role: 'listbox' });
+    const dismiss = useDismiss(context);
+    const listNav = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        virtual: true,
+        scrollItemIntoView: true,
+        enabled: open,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        role,
+        dismiss,
+        listNav,
+    ]);
+    // remove active index if combobox is closed
+    useEffect(() => {
+        if (!open) {
+            setActiveIndex(null);
+        }
+    }, [open]);
+    // Send new value if option was clicked
+    useEffect(() => {
+        const selectedHash = JSON.stringify(selectedOptions);
+        if (prevSelectedHash === selectedHash)
+            return;
+        const values = selectedOptions.map((option) => option.value);
+        onValueChange?.(values);
+        setPrevSelectedHash(selectedHash);
+    }, [onValueChange, selectedOptions, prevSelectedHash]);
+    useEffect(() => {
+        if (value && options.length > 0) {
+            const updatedSelectedOptions = value.map((option) => {
+                const value = options.find((value) => value.value === option);
+                return value;
+            });
+            setSelectedOptions(updatedSelectedOptions);
+        }
+    }, [multiple, prevSelectedHash, value, options]);
+    // 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) => prev.filter((i) => i.value !== option.value));
+            return;
+        }
+        if (multiple) {
+            setSelectedOptions([...selectedOptions, option]);
+            setInputValue('');
+            inputRef.current?.focus();
+        }
+        else {
+            setSelectedOptions([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);
+        }
+        !multiple && setOpen(false);
+        refs.domReference.current?.focus();
+    };
+    const debouncedHandleSelectOption = useDebounce(handleSelectOption, 50);
+    // handle keyboard navigation in the list
+    const handleKeyDownFunc = (event) => {
+        const navigateable = customIds.length + optionsChildren.length;
+        if (formFieldProps.readOnly || disabled)
+            return;
+        if (!event)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!open)
+                    setOpen(true);
+                setActiveIndex((prevActiveIndex) => {
+                    if (prevActiveIndex === null) {
+                        return 0;
+                    }
+                    return Math.min(prevActiveIndex + 1, navigateable - 1);
+                });
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                /* If we are on the first item, close */
+                setActiveIndex((prevActiveIndex) => {
+                    if (prevActiveIndex === 0) {
+                        setOpen(false);
+                        return null;
+                    }
+                    if (prevActiveIndex === null) {
+                        return null;
+                    }
+                    return Math.max(prevActiveIndex - 1, 0);
+                });
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (activeIndex !== null &&
+                    (optionsChildren[activeIndex] || customIds.length > 0)) {
+                    // check if we are in the custom components
+                    if (activeIndex <= customIds.length) {
+                        // send `onSelect` event to the custom component
+                        const selectedId = customIds[activeIndex];
+                        const selectedComponent = restChildren.find((component) => isInteractiveComboboxCustom(component) &&
+                            component.props?.id === selectedId);
+                        if (isInteractiveComboboxCustom(selectedComponent) &&
+                            selectedComponent.props.onSelect) {
+                            selectedComponent.props.onSelect();
+                        }
+                    }
+                    // if we are in the options, find the actual index
+                    const valueIndex = activeIndex - customIds.length;
+                    const child = optionsChildren[valueIndex];
+                    if (isComboboxOption(child)) {
+                        const props = child.props;
+                        const option = options.find((option) => option.value === props.value);
+                        if (!multiple) {
+                            // check if option is already selected, if so, deselect it
+                            if (selectedOptions.find((i) => i.value === option?.value)) {
+                                setSelectedOptions([]);
+                                setInputValue('');
+                                return;
+                            }
+                        }
+                        debouncedHandleSelectOption(option);
+                    }
+                }
+                break;
+            case 'Backspace':
+                if (inputValue === '' && multiple && selectedOptions.length > 0) {
+                    setSelectedOptions((prev) => prev.slice(0, prev.length - 1));
+                }
+                // if we are in single mode, we need to set activeValue to null
+                if (!multiple) {
+                    setSelectedOptions([]);
+                }
+                break;
+        }
+    };
+    const handleKeyDown = useDebounce(handleKeyDownFunc, 20);
+    const rowVirtualizer = useVirtualizer({
+        count: optionsChildren.length,
+        getScrollElement: () => refs.floating.current,
+        estimateSize: () => 40,
+        measureElement: (elem) => {
+            return elem.getBoundingClientRect().height;
+        },
+        overscan: 1,
+    });
+    return (jsxs(ComboboxContext.Provider, { value: {
+            size: size$1,
+            options,
+            selectedOptions,
+            multiple,
+            activeIndex,
+            disabled,
+            readOnly,
+            open,
+            inputRef,
+            refs,
+            inputValue,
+            activeDescendant,
+            error,
+            formFieldProps,
+            name,
+            htmlSize,
+            optionValues,
+            hideChips,
+            cleanButtonLabel,
+            listId,
+            setInputValue,
+            setActiveIndex,
+            handleKeyDown,
+            setOpen,
+            getReferenceProps,
+            setSelectedOptions,
+            /* Recieves index of option, and the ID of the button element */
+            setActiveOption: (index, id) => {
+                if (readOnly)
+                    return;
+                if (disabled)
+                    return;
+                setActiveIndex(index);
+                setActiveDescendant(id);
+            },
+            /* Recieves the value of the option, and searches for it in our values lookup */
+            onOptionClick: (value) => {
+                if (readOnly)
+                    return;
+                if (disabled)
+                    return;
+                const option = options.find((option) => option.value === value);
+                debouncedHandleSelectOption(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$1, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), "aria-busy": loading }), jsx(ComboboxError, { size: size$1, 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,
+                            },
+                        }), className: clsx(classes.optionsWrapper, classes[size$1]), children: [virtual && (jsx("div", { style: {
+                                    height: `${rowVirtualizer.getTotalSize()}px`,
+                                    width: '100%',
+                                    position: 'relative',
+                                }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => (jsx("div", { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, style: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, children: optionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: classes.loading, children: [jsx(Spinner, { title: 'Laster', size: 'small' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && optionsChildren] }))] }) }) }))] }));
+});
+const ComboboxContext = createContext(undefined);
+Combobox.displayName = 'Combobox';
+
+export { Combobox, ComboboxContext };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"combobox":"fds-combobox-combobox-fe4dfa7c","optionsWrapper":"fds-combobox-optionsWrapper-fe4dfa7c","readOnly":"fds-combobox-readOnly-fe4dfa7c","inputWrapper":"fds-combobox-inputWrapper-fe4dfa7c","small":"fds-combobox-small-fe4dfa7c","medium":"fds-combobox-medium-fe4dfa7c","large":"fds-combobox-large-fe4dfa7c","error":"fds-combobox-error-fe4dfa7c","chipAndInput":"fds-combobox-chipAndInput-fe4dfa7c","chips":"fds-combobox-chips-fe4dfa7c","arrow":"fds-combobox-arrow-fe4dfa7c","readonly":"fds-combobox-readonly-fe4dfa7c","label":"fds-combobox-label-fe4dfa7c","description":"fds-combobox-description-fe4dfa7c","clearButton":"fds-combobox-clearButton-fe4dfa7c","disabled":"fds-combobox-disabled-fe4dfa7c","padlock":"fds-combobox-padlock-fe4dfa7c","errorMessage":"fds-combobox-errorMessage-fe4dfa7c","loading":"fds-combobox-loading-fe4dfa7c","inFocus":"fds-combobox-inFocus-fe4dfa7c","showChecked":"fds-combobox-showChecked-fe4dfa7c"};
+
+export { classes as default };

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

@@ -0,0 +1,30 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useContext, useMemo } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { ComboboxContext } from '../Combobox.js';
+import classes from './Custom.module.css.js';
+import { omit } from '../../../../utilities/objectUtils.js';
+
+const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...rest }, ref) => {
+    if (interactive && !id) {
+        throw new Error('If ComboboxCustom is interactive, it must have an id');
+    }
+    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    const randomId = useId();
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxCustom must be used within a Combobox');
+    }
+    const { size, activeIndex, optionValues, setActiveIndex } = context;
+    const index = useMemo(() => id && optionValues.indexOf(id), [optionValues, id]);
+    return (jsx(Component, { ref: ref, tabIndex: -1, className: clsx(classes.custom, classes[size], className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, onMouseEnter: () => {
+            typeof index === 'number' && setActiveIndex(index);
+        }, onFocus: () => {
+            typeof index === 'number' && setActiveIndex(index);
+        }, ...omit(['interactive'], rest) }));
+});
+var ComboboxCustom$1 = ComboboxCustom;
+
+export { ComboboxCustom, ComboboxCustom$1 as default };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"custom":"fds-custom-custom-385f0b36","large":"fds-custom-large-385f0b36","medium":"fds-custom-medium-385f0b36","small":"fds-custom-small-385f0b36"};
+
+export { classes as default };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { ComboboxContext } from '../Combobox.js';
+import classes from './Empty.module.css.js';
+
+const ComboboxEmpty = forwardRef(({ children, className, ...rest }, ref) => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxEmpty must be used within a Combobox');
+    }
+    const { optionValues, size } = context;
+    return (optionValues.length === 0 && (jsx("div", { ref: ref, className: clsx(classes.empty, classes[size], className), ...rest, children: children })));
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+export { ComboboxEmpty, ComboboxEmpty as default };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"empty":"fds-empty-empty-a5131d3a","large":"fds-empty-large-a5131d3a","medium":"fds-empty-medium-a5131d3a","small":"fds-empty-small-a5131d3a"};
+
+export { classes as default };

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from '../../../../../node_modules/clsx/dist/clsx.js';
+import classes from './Description.module.css.js';
+
+const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
+    return (jsx("span", { className: clsx(classes.description, className), ref: ref, ...rest, children: children }));
+});
+ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
+var ComboboxOptionDescription$1 = ComboboxOptionDescription;
+
+export { ComboboxOptionDescription, ComboboxOptionDescription$1 as default };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"description":"fds-description-description-10814aaa"};
+
+export { classes as default };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { CheckmarkIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../../../node_modules/clsx/dist/clsx.js';
+import classes from '../Option.module.css.js';
+
+const SelectedIcon = ({ multiple, selected }) => {
+    return (jsx("div", { className: clsx(multiple && classes.selectIconWrapper, selected && classes.selected), children: selected && (jsx(CheckmarkIcon, { className: classes.selectIcon, "aria-hidden": true })) }));
+};
+SelectedIcon.displayName = 'SelectedIcon';
+
+export { SelectedIcon, SelectedIcon as default };

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useContext, useMemo, useEffect } from 'react';
+import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
+import { useMergeRefs } from '../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { ComboboxContext } from '../Combobox.js';
+import useDebounce from '../../../../utilities/useDebounce.js';
+import { SelectedIcon } from './Icon/SelectedIcon.js';
+import classes from './Option.module.css.js';
+import ComboboxOptionDescription from './Description/Description.js';
+import { omit } from '../../../../utilities/objectUtils.js';
+import { Label } from '../../../Typography/Label/Label.js';
+
+const ComboboxOption = forwardRef(({ value, description, children, className, ...rest }, ref) => {
+    const labelId = useId();
+    const generatedId = useId();
+    const context = useContext(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 = useMemo(() => optionValues.indexOf(value), [optionValues, value]);
+    const combinedRef = 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);
+    useEffect(() => {
+        if (activeIndex === index)
+            setActiveOption(index, rest.id || generatedId);
+    }, [activeIndex, generatedId, index, rest.id, setActiveOption]);
+    const onOptionClickDebounced = useDebounce(() => onOptionClick(value), 50);
+    return (jsxs("button", { id: rest.id || generatedId, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
+            onOptionClickDebounced();
+            rest.onClick?.(e);
+        }, onMouseEnter: (e) => {
+            setActiveOption(index, labelId);
+            rest.onMouseEnter?.(e);
+        }, onFocus: (e) => {
+            setActiveOption(index, labelId);
+            rest.onFocus?.(e);
+        }, className: clsx(classes.option, classes[size], activeIndex === index && classes.active, multiple && classes.multiple, className), ref: combinedRef, ...omit(['displayValue'], rest), children: [jsx(Label, { asChild: true, size: size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: classes.optionText, size: size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }));
+});
+ComboboxOption.displayName = 'ComboboxOption';
+
+export { ComboboxOption };

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

@@ -0,0 +1,4 @@
+'use client';
+var classes = {"option":"fds-option-option-6c39c7b6","active":"fds-option-active-6c39c7b6","multiple":"fds-option-multiple-6c39c7b6","optionText":"fds-option-optionText-6c39c7b6","checkbox":"fds-option-checkbox-6c39c7b6","selectIconWrapper":"fds-option-selectIconWrapper-6c39c7b6","small":"fds-option-small-6c39c7b6","medium":"fds-option-medium-6c39c7b6","large":"fds-option-large-6c39c7b6","selected":"fds-option-selected-6c39c7b6","selectIcon":"fds-option-selectIcon-6c39c7b6"};
+
+export { classes as default };

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

@@ -0,0 +1,12 @@
+'use client';
+import { Combobox as Combobox$1 } from './Combobox.js';
+import { ComboboxOption } from './Option/Option.js';
+import { ComboboxEmpty } from './Empty/Empty.js';
+
+const Combobox = Combobox$1;
+Combobox.Option = ComboboxOption;
+Combobox.Empty = ComboboxEmpty;
+Combobox.Option.displayName = 'Combobox.Option';
+Combobox.Empty.displayName = 'Combobox.Empty';
+
+export { Combobox, ComboboxEmpty, ComboboxOption };

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import '../../../Chip/index.js';
+import { ComboboxContext } from '../Combobox.js';
+import { RemovableChip } from '../../../Chip/Removable/Removable.js';
+
+const ComboboxChips = () => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxContext is missing');
+    }
+    const { size, readOnly, disabled, selectedOptions, setSelectedOptions, chipSrLabel, inputRef, } = context;
+    return (jsx(Fragment, { children: selectedOptions.map((option) => {
+            return (jsx(RemovableChip, { size: size, disabled: disabled, onKeyDown: (e) => {
+                    if (readOnly)
+                        return;
+                    if (disabled)
+                        return;
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                        setSelectedOptions(selectedOptions.filter((i) => i.value !== option.value));
+                        inputRef.current?.focus();
+                    }
+                }, onClick: () => {
+                    if (readOnly)
+                        return;
+                    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));
+        }) }));
+};
+ComboboxChips.displayName = 'ComboboxChips';
+var ComboboxChips$1 = ComboboxChips;
+
+export { ComboboxChips, ComboboxChips$1 as default };