@digdir/designsystemet-react 0.0.0-test-20240725081820 → 0.0.0-test-20250311113709

package/README.md

@@ -2,11 +2,13 @@
 
 React implementation of the Designsystemet components
 
-- Headless components.
-  - Uses `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` for styling.
-- All components support `forwardRef`.
+- Uses `@digdir/designsystemet-css` for styling.
+- Uses `@digdir/designsystemet-theme` or CSS file generated from `@digdir/designsystemet tokens build` for theming.
+  - Build your own theme on https://theme.designsystemet.no/
+- All components support `ref`.
+- All components support SSR.
+  - Use full component name, e.g. `CardBlock` instead of `Card.Block`
 - Most components extend and behave as native html-elements.
 - Most components support composition and `asChild` for overriding the underlying html-element.
-- SSR support.
 
 Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = react.forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
+    return (jsxRuntime.jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
+});
+
+exports.Alert = Alert;

package/dist/cjs/components/Avatar/Avatar.js

@@ -0,0 +1,31 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe" initials="JD" />
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+const Avatar = react.forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+    const useSlot = children && typeof children !== 'string';
+    const Component = useSlot ? reactSlot.Slot : react.Fragment;
+    return (jsxRuntime.jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsxRuntime.jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: children }) }));
+});
+
+exports.Avatar = Avatar;

package/dist/cjs/components/Badge/Badge.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ *
+ * @example with children
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
+ * </Badge>
+ */
+const Badge = react.forwardRef(function Badge({ className, count, maxCount, variant = 'base', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
+});
+
+exports.Badge = Badge;

package/dist/cjs/components/Badge/BadgePosition.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
+const BadgePosition = react.forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+exports.BadgePosition = BadgePosition;

package/dist/cjs/components/Badge/index.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+var Badge$1 = require('./Badge.js');
+var BadgePosition = require('./BadgePosition.js');
+
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
+const Badge = Object.assign(Badge$1.Badge, { Position: BadgePosition.BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+exports.BadgePosition = BadgePosition.BadgePosition;
+exports.Badge = Badge;

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,28 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+const Breadcrumbs = react.forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+
+exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const BreadcrumbsItem = react.forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
+    return jsxRuntime.jsx("li", { ref: ref, ...rest });
+});
+
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/cjs/components/Breadcrumbs/BreadcrumbsLink.js

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Link = require('../Link/Link.js');
+
+const BreadcrumbsLink = react.forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsxRuntime.jsx(Link.Link, { ref: ref, ...rest });
+});
+
+exports.BreadcrumbsLink = BreadcrumbsLink;

package/dist/cjs/components/Breadcrumbs/BreadcrumbsList.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+
+const BreadcrumbsList = react.forwardRef(function BreadcrumbsList(rest, ref) {
+    const innerRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([innerRef, ref]);
+    // Set aria-current on last link
+    react.useEffect(() => {
+        const links = innerRef.current?.querySelectorAll(':scope > * > *') || [];
+        const lastLink = links[links?.length - 1];
+        lastLink?.setAttribute('aria-current', 'page');
+        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
+    });
+    return jsxRuntime.jsx("ol", { ref: mergedRefs, ...rest });
+});
+
+exports.BreadcrumbsList = BreadcrumbsList;

package/dist/cjs/components/Breadcrumbs/index.js

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var Breadcrumbs$1 = require('./Breadcrumbs.js');
+var BreadcrumbsItem = require('./BreadcrumbsItem.js');
+var BreadcrumbsLink = require('./BreadcrumbsLink.js');
+var BreadcrumbsList = require('./BreadcrumbsList.js');
+
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+const Breadcrumbs = Object.assign(Breadcrumbs$1.Breadcrumbs, {
+    List: BreadcrumbsList.BreadcrumbsList,
+    Item: BreadcrumbsItem.BreadcrumbsItem,
+    Link: BreadcrumbsLink.BreadcrumbsLink,
+});
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+exports.BreadcrumbsItem = BreadcrumbsItem.BreadcrumbsItem;
+exports.BreadcrumbsLink = BreadcrumbsLink.BreadcrumbsLink;
+exports.BreadcrumbsList = BreadcrumbsList.BreadcrumbsList;
+exports.Breadcrumbs = Breadcrumbs;

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

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var Spinner = require('../Spinner/Spinner.js');
+
+/**
+ * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
+ */
+const Button = react.forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (jsxRuntime.jsxs(Component, { "aria-busy": Boolean(loading) || undefined, "aria-disabled": Boolean(loading) || undefined, className: cl('ds-button', className), "data-icon": icon || undefined, "data-variant": variant, ref: ref, 
+        /* don't set type when we use `asChild` */
+        type: asChild ? undefined : 'button', ...rest, children: [loading === true ? (jsxRuntime.jsx(Spinner.Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+            ), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+});
+
+exports.Button = Button;

package/dist/cjs/components/Card/Card.js

@@ -0,0 +1,43 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+const Card = react.forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const cardRef = react.useRef(null);
+    const mergedRefs = react$1.useMergeRefs([cardRef, ref]);
+    // Forward click on card to heading links for better accessibility
+    // https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html
+    react.useEffect(() => {
+        const card = cardRef.current;
+        const handleClick = ({ ctrlKey, metaKey, target }) => {
+            const link = card?.querySelector(':is(h1,h2,h3,h4,h5,h6) a');
+            if (!link || link?.contains(target))
+                return; // Let links handle their own clicks
+            if (ctrlKey || metaKey)
+                window.open(link.href, '', 'noreferrer');
+            else
+                link.click(); // Using link.click instead of window.location.href as this will trigger the browser's handling of rel=, target=, etc.
+        };
+        card?.addEventListener('click', handleClick);
+        return () => card?.removeEventListener('click', handleClick);
+    }, []);
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
+});
+
+exports.Card = Card;

package/dist/cjs/components/Card/CardBlock.js

@@ -0,0 +1,14 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+
+const CardBlock = react.forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
+});
+
+exports.CardBlock = CardBlock;

package/dist/cjs/components/Card/index.js

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+var Card$1 = require('./Card.js');
+var CardBlock = require('./CardBlock.js');
+
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
+const Card = Object.assign(Card$1.Card, {
+    Block: CardBlock.CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
+
+exports.CardBlock = CardBlock.CardBlock;
+exports.Card = Card;

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var index = require('../Field/index.js');
+var Input = require('../Input/Input.js');
+var Label = require('../Label/Label.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
+
+/**
+ * Checkbox used to select multiple options.
+ *
+ * @example
+ * <Checkbox label="I agree" value="agree" />
+ */
+const Checkbox = react.forwardRef(function Checkbox({ 'data-size': size, className, style, children, label, description, error, ...rest }, ref) {
+    return (jsxRuntime.jsxs(index.Field, { "data-size": size, className: className, style: style, children: [jsxRuntime.jsx(Input.Input, { type: 'checkbox', ref: ref, ...rest }), !!label && jsxRuntime.jsx(Label.Label, { weight: 'regular', children: label }), !!description && jsxRuntime.jsx("div", { "data-field": 'description', children: description }), !!error && jsxRuntime.jsx(ValidationMessage.ValidationMessage, { children: error })] }));
+});
+
+exports.Checkbox = Checkbox;

package/dist/cjs/components/Chip/Chips.js

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var Input = require('../Input/Input.js');
+
+/**
+ * Chip.Button used for interaction
+ *
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = react.forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.jsx(Component, { className: cl('ds-chip', className), type: asChild ? undefined : 'button', ref: ref, ...rest }));
+});
+/**
+ * Chip.Removable used for interaction
+ * @example
+ * <Chip.Removable>Click to remove me</Chip.Removable>
+ */
+const ChipRemovable = react.forwardRef(function ChipRemovable(props, ref) {
+    return jsxRuntime.jsx(ChipButton, { "data-removable": true, ref: ref, ...props });
+});
+/**
+ * Chip.Checkbox used for multiselection
+ * @example
+ * <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
+ * <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
+ */
+const ChipCheckbox = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? reactSlot.Slot : 'label';
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsxRuntime.jsx(Input.Input, { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
+});
+/**
+ * Chip.Radio used for single selection
+ * @example
+ * <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
+ * <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
+ */
+const ChipRadio = react.forwardRef(function ChipRadio(props, ref) {
+    return jsxRuntime.jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+exports.ChipButton = ChipButton;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipRadio = ChipRadio;
+exports.ChipRemovable = ChipRemovable;

package/dist/cjs/components/Chip/index.js

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+var Chips = require('./Chips.js');
+
+const Chip = {
+    Button: Chips.ChipButton,
+    Checkbox: Chips.ChipCheckbox,
+    Radio: Chips.ChipRadio,
+    Removable: Chips.ChipRemovable,
+};
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
+Chip.Removable.displayName = 'Chip.Removable';
+
+exports.ChipButton = Chips.ChipButton;
+exports.ChipCheckbox = Chips.ChipCheckbox;
+exports.ChipRadio = Chips.ChipRadio;
+exports.ChipRemovable = Chips.ChipRemovable;
+exports.Chip = Chip;

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

@@ -0,0 +1,203 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactVirtual = require('@tanstack/react-virtual');
+var cl = require('clsx/lite');
+var react = require('react');
+var useFormField = require('./useFormField/useFormField.js');
+var ComboboxContext = require('./ComboboxContext.js');
+var ComboboxIdContext = require('./ComboboxIdContext.js');
+var Custom = require('./Custom.js');
+var ComboboxError = require('./internal/ComboboxError.js');
+var ComboboxInput = require('./internal/ComboboxInput.js');
+var ComboboxLabel = require('./internal/ComboboxLabel.js');
+var ComboboxNative = require('./internal/ComboboxNative.js');
+var useCombobox = require('./useCombobox.js');
+var useComboboxKeyboard = require('./useComboboxKeyboard.js');
+var useFloatingCombobox = require('./useFloatingCombobox.js');
+var utilities = require('./utilities.js');
+var Spinner = require('../Spinner/Spinner.js');
+var useDebounceCallback = require('../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
+var omit = require('../../utilities/omit/omit.js');
+
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+const ComboboxComponent = react.forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, disabled = false, readOnly = false, hideChips = false, clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, size = 'md', loading, loadingLabel = 'Laster...', filter, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
+    const inputRef = react.useRef(null);
+    const portalRef = react.useRef(null);
+    const listRef = react.useRef([]);
+    const [inputValue, setInputValue] = react.useState(rest.inputValue || '');
+    react.useEffect(() => {
+        if (typeof rest.inputValue === 'string') {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox.useCombobox({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        initialValue,
+    });
+    const { open, setOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, } = useFloatingCombobox.useFloatingCombobox({
+        listRef,
+    });
+    const formFieldProps = useFormField.useFormField({
+        disabled,
+        error,
+        errorId,
+        size,
+        description,
+        id,
+    }, 'combobox');
+    // if value is set, set input value to the label of the value
+    react.useEffect(() => {
+        if (value && value.length > 0 && !multiple) {
+            const option = options[utilities.prefix(value[0])];
+            inputRef.current &&
+                utilities.setReactInputValue(inputRef.current, option?.label || '');
+        }
+    }, [multiple, value, options]);
+    react.useEffect(() => {
+        if (value && Object.keys(options).length >= 0) {
+            const updatedSelectedOptions = value.map((option) => {
+                const value = options[utilities.prefix(option)];
+                return value;
+            });
+            setSelectedOptions(updatedSelectedOptions.reduce((acc, value) => {
+                acc[utilities.prefix(value.value)] = value;
+                return acc;
+            }, {}));
+        }
+    }, [multiple, value, options, setSelectedOptions]);
+    // handle click on option, either select or deselect - Handles single or multiple
+    const handleSelectOption = (args) => {
+        const { option, clear, remove } = args;
+        if (clear) {
+            setSelectedOptions({});
+            inputRef.current && utilities.setReactInputValue(inputRef.current, '');
+            onValueChange?.([]);
+            return;
+        }
+        if (!option)
+            return;
+        if (remove) {
+            const newSelectedOptions = { ...selectedOptions };
+            delete newSelectedOptions[utilities.prefix(option.value)];
+            setSelectedOptions(newSelectedOptions);
+            onValueChange?.(Object.keys(newSelectedOptions).map((key) => utilities.removePrefix(key)));
+            return;
+        }
+        const newSelectedOptions = { ...selectedOptions };
+        if (multiple) {
+            if (newSelectedOptions[utilities.prefix(option.value)]) {
+                delete newSelectedOptions[utilities.prefix(option.value)];
+            }
+            else {
+                newSelectedOptions[utilities.prefix(option.value)] = option;
+            }
+            inputRef.current && utilities.setReactInputValue(inputRef.current, '');
+            inputRef.current?.focus();
+        }
+        else {
+            /* clear newSelectedOptions */
+            for (const key of Object.keys(newSelectedOptions)) {
+                delete newSelectedOptions[key];
+            }
+            newSelectedOptions[utilities.prefix(option.value)] = option;
+            inputRef.current &&
+                utilities.setReactInputValue(inputRef.current, 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);
+        onValueChange?.(Object.keys(newSelectedOptions).map((key) => utilities.removePrefix(key)));
+        !multiple && setOpen(false);
+        refs.domReference.current?.focus();
+    };
+    const debouncedHandleSelectOption = useDebounceCallback.useDebounceCallback(handleSelectOption, 50);
+    const handleKeyDown = useComboboxKeyboard.useComboboxKeyboard({
+        filteredOptions,
+        selectedOptions,
+        readOnly: formFieldProps.readOnly || false,
+        disabled: disabled,
+        multiple,
+        inputValue,
+        options,
+        open,
+        interactiveChildren,
+        setOpen,
+        handleSelectOption: debouncedHandleSelectOption,
+    });
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+        count: Object.keys(filteredOptionsChildren).length,
+        getScrollElement: () => (virtual ? refs.floating.current : null),
+        estimateSize: () => 70,
+        measureElement: (elem) => {
+            return elem.getBoundingClientRect().height;
+        },
+        overscan: 7,
+    });
+    return (jsxRuntime.jsxs(ComboboxContext.ComboboxContext.Provider, { value: {
+            size,
+            options,
+            selectedOptions,
+            multiple,
+            disabled,
+            readOnly,
+            open,
+            inputRef,
+            refs,
+            inputValue,
+            formFieldProps,
+            htmlSize,
+            clearButtonLabel,
+            customIds,
+            filteredOptions,
+            setInputValue,
+            setOpen,
+            getReferenceProps,
+            getItemProps,
+            /* 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[utilities.prefix(value)];
+                debouncedHandleSelectOption({ option: option });
+            },
+            handleSelectOption: debouncedHandleSelectOption,
+            chipSrLabel,
+            listRef,
+            forwareddRef,
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
+        }, children: [jsxRuntime.jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: context.floatingId || '', error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(react$1.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+                            ref: refs.setFloating,
+                            style: {
+                                ...floatingStyles,
+                            },
+                        }), className: cl('ds-combobox__options-wrapper', `ds-combobox--${size}`), children: [virtual && (jsxRuntime.jsx("div", { style: {
+                                    height: `${rowVirtualizer.getTotalSize()}px`,
+                                    width: '100%',
+                                    position: 'relative',
+                                }, children: rowVirtualizer.getVirtualItems().map((virtualRow) => (jsxRuntime.jsx("div", { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, style: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, children: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxRuntime.jsxs(Custom.ComboboxCustom, { className: 'ds-combobox__loading', children: [jsxRuntime.jsx(Spinner.Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+});
+const Combobox = react.forwardRef((props, ref) => (jsxRuntime.jsx(ComboboxIdContext.ComboboxIdProvider, { children: jsxRuntime.jsx(ComboboxComponent, { ...props, ref: ref }) })));
+Combobox.displayName = 'Combobox';
+
+exports.Combobox = Combobox;
+exports.ComboboxComponent = ComboboxComponent;