@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.0

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, Fragment } from '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 = forwardRef(function Avatar({ 'aria-label': ariaLabel, variant = 'circle', className, children, initials, ...rest }, ref) {
+    const useSlot = children && typeof children !== 'string';
+    const Component = useSlot ? Slot : Fragment;
+    return (jsx("span", { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: 'img', "aria-label": ariaLabel, ...rest, children: jsx(Component, { ...(useSlot ? { 'aria-hidden': true } : {}), children: children }) }));
+});
+
+export { Avatar };

package/dist/esm/components/Badge/Badge.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function Badge({ className, count, maxCount, variant = 'base', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
+});
+
+export { Badge };

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
+    return (jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+});
+
+export { BadgePosition };

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

@@ -0,0 +1,14 @@
+'use client';
+import { Badge as Badge$1 } from './Badge.js';
+import { BadgePosition } from './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, { Position: BadgePosition });
+Badge.Position.displayName = 'Badge.Position';
+
+export { Badge, BadgePosition };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from '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 = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, className: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
+
+export { Breadcrumbs };

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const BreadcrumbsItem = forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
+    return jsx("li", { ref: ref, ...rest });
+});
+
+export { BreadcrumbsItem };

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

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Link } from '../Link/Link.js';
+
+const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
+    return jsx(Link, { ref: ref, ...rest });
+});
+
+export { BreadcrumbsLink };

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { forwardRef, useRef, useEffect } from 'react';
+
+const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
+    const innerRef = useRef(null);
+    const mergedRefs = useMergeRefs([innerRef, ref]);
+    // Set aria-current on last link
+    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 jsx("ol", { ref: mergedRefs, ...rest });
+});
+
+export { BreadcrumbsList };

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

@@ -0,0 +1,34 @@
+'use client';
+import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
+import { BreadcrumbsItem } from './BreadcrumbsItem.js';
+import { BreadcrumbsLink } from './BreadcrumbsLink.js';
+import { BreadcrumbsList } from './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, {
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+});
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList };

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

@@ -1,16 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-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';
+import { Spinner } from '../Spinner/Spinner.js';
 
 /**
  * Button used for interaction
+ *
+ * @example
+ * <Button>Click me</Button>
  */
-const Button = forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
-    return (jsx(Component, { ref: ref, type: type, className: clsx('ds-btn', `ds-focus`, `ds-btn--${size}`, `ds-paragraph-short--${size}`, `ds-btn--${variant}`, `ds-btn--${color}`, fullWidth && 'ds-btn--full-width', icon && 'ds-btn--icon-only', className), ...rest, children: children }));
+const Button = forwardRef(function Button({ asChild, className, children, icon = false, loading = false, variant = 'primary', ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    // Fallbacks to undefined to prevent rendering attribute="false"
+    return (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 ? (jsx(Spinner, { "aria-hidden": 'true' })) : (loading // Allow custom loading spinner
+            ), jsx(Slottable, { children: children })] }));
 });
-Button.displayName = 'Button';
 
 export { Button };

package/dist/esm/components/Card/Card.js

@@ -1,13 +1,41 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-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';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useEffect } from 'react';
 
-const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    return (jsx(Component, { ref: ref, className: clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));
+/**
+ * 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 = forwardRef(function Card({ asChild = false, variant = 'default', className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    const cardRef = useRef(null);
+    const mergedRefs = 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
+    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 (jsx(Component, { className: cl(`ds-card`, className), "data-variant": variant, ref: mergedRefs, ...rest }));
 });
-Card.displayName = 'Card';
 
 export { Card };

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+const CardBlock = forwardRef(function CardBlock({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'div';
+    return (jsx(Component, { className: cl(`ds-card__block`, className), ref: ref, ...rest }));
+});
+
+export { CardBlock };

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

@@ -1,18 +1,20 @@
 'use client';
-import { CardHeader } from './CardHeader.js';
-import { CardContent } from './CardContent.js';
-import { CardFooter } from './CardFooter.js';
 import { Card as Card$1 } from './Card.js';
-import { CardMedia } from './CardMedia.js';
+import { CardBlock } from './CardBlock.js';
 
-const Card = Card$1;
-Card.Header = CardHeader;
-Card.Content = CardContent;
-Card.Footer = CardFooter;
-Card.Media = CardMedia;
-Card.Header.displayName = 'Card.Header';
-Card.Content.displayName = 'Card.Content';
-Card.Footer.displayName = 'Card.Footer';
-Card.Media.displayName = 'Card.Media';
+/**
+ * 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, {
+    Block: CardBlock,
+});
+Card.Block.displayName = 'Card.Block';
 
-export { Card, CardContent, CardFooter, CardHeader, CardMedia };
+export { Card, CardBlock };

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

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

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

@@ -0,0 +1,47 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input.js';
+
+/**
+ * Chip.Button used for interaction
+ *
+ * @example
+ * <Chip.Button>Click me</Chip.Button>
+ */
+const ChipButton = forwardRef(function ChipButton({ asChild, className, ...rest }, ref) {
+    const Component = asChild ? Slot : 'button';
+    return (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 = forwardRef(function ChipRemovable(props, ref) {
+    return 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 = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-color': color, ...rest }, ref) {
+    const inputType = rest.type ?? 'checkbox';
+    const Component = asChild ? Slot : 'label';
+    return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-color": color, ref: ref, children: [jsx(Input, { ...rest, type: inputType }), jsx(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 = forwardRef(function ChipRadio(props, ref) {
+    return jsx(ChipCheckbox, { ref, type: 'radio', ...props });
+});
+
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -1,15 +1,15 @@
 'use client';
-import { Group } from './Group/Group.js';
-import { RemovableChip } from './Removable/Removable.js';
-import { ToggleChip } from './Toggle/Toggle.js';
+import { ChipRemovable, ChipRadio, ChipCheckbox, ChipButton } from './Chips.js';
 
 const Chip = {
-    Group: Group,
-    Removable: RemovableChip,
-    Toggle: ToggleChip,
+    Button: ChipButton,
+    Checkbox: ChipCheckbox,
+    Radio: ChipRadio,
+    Removable: ChipRemovable,
 };
-Chip.Group.displayName = 'Chip.Group';
+Chip.Button.displayName = 'Chip.Button';
+Chip.Checkbox.displayName = 'Chip.Checkbox';
+Chip.Radio.displayName = 'Chip.Radio';
 Chip.Removable.displayName = 'Chip.Removable';
-Chip.Toggle.displayName = 'Chip.Toggle';
 
-export { Chip, Group as ChipGroup, RemovableChip as ChipRemovable, ToggleChip as ChipToggle };
+export { Chip, ChipButton, ChipCheckbox, ChipRadio, ChipRemovable };

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

@@ -0,0 +1,200 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import cl from 'clsx/lite';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useFormField } from './useFormField/useFormField.js';
+import { ComboboxContext } from './ComboboxContext.js';
+import { ComboboxIdProvider } from './ComboboxIdContext.js';
+import { ComboboxCustom } from './Custom.js';
+import ComboboxError from './internal/ComboboxError.js';
+import ComboboxInput from './internal/ComboboxInput.js';
+import ComboboxLabel from './internal/ComboboxLabel.js';
+import ComboboxNative from './internal/ComboboxNative.js';
+import { useCombobox } from './useCombobox.js';
+import { useComboboxKeyboard } from './useComboboxKeyboard.js';
+import { useFloatingCombobox } from './useFloatingCombobox.js';
+import { prefix, setReactInputValue, removePrefix } from './utilities.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { useDebounceCallback } from '../../utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+import { omit } from '../../utilities/omit/omit.js';
+
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+const ComboboxComponent = 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 = useRef(null);
+    const portalRef = useRef(null);
+    const listRef = useRef([]);
+    const [inputValue, setInputValue] = useState(rest.inputValue || '');
+    useEffect(() => {
+        if (typeof rest.inputValue === 'string') {
+            setInputValue(rest.inputValue);
+        }
+    }, [rest.inputValue]);
+    const { selectedOptions, options, restChildren, interactiveChildren, customIds, filteredOptionsChildren, filteredOptions, setSelectedOptions, } = useCombobox({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        initialValue,
+    });
+    const { open, setOpen, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, } = useFloatingCombobox({
+        listRef,
+    });
+    const formFieldProps = useFormField({
+        disabled,
+        error,
+        errorId,
+        size,
+        description,
+        id,
+    }, 'combobox');
+    // if value is set, set input value to the label of the value
+    useEffect(() => {
+        if (value && value.length > 0 && !multiple) {
+            const option = options[prefix(value[0])];
+            inputRef.current &&
+                setReactInputValue(inputRef.current, option?.label || '');
+        }
+    }, [multiple, value, options]);
+    useEffect(() => {
+        if (value && Object.keys(options).length >= 0) {
+            const updatedSelectedOptions = value.map((option) => {
+                const value = options[prefix(option)];
+                return value;
+            });
+            setSelectedOptions(updatedSelectedOptions.reduce((acc, value) => {
+                acc[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 && setReactInputValue(inputRef.current, '');
+            onValueChange?.([]);
+            return;
+        }
+        if (!option)
+            return;
+        if (remove) {
+            const newSelectedOptions = { ...selectedOptions };
+            delete newSelectedOptions[prefix(option.value)];
+            setSelectedOptions(newSelectedOptions);
+            onValueChange?.(Object.keys(newSelectedOptions).map((key) => removePrefix(key)));
+            return;
+        }
+        const newSelectedOptions = { ...selectedOptions };
+        if (multiple) {
+            if (newSelectedOptions[prefix(option.value)]) {
+                delete newSelectedOptions[prefix(option.value)];
+            }
+            else {
+                newSelectedOptions[prefix(option.value)] = option;
+            }
+            inputRef.current && setReactInputValue(inputRef.current, '');
+            inputRef.current?.focus();
+        }
+        else {
+            /* clear newSelectedOptions */
+            for (const key of Object.keys(newSelectedOptions)) {
+                delete newSelectedOptions[key];
+            }
+            newSelectedOptions[prefix(option.value)] = option;
+            inputRef.current &&
+                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) => removePrefix(key)));
+        !multiple && setOpen(false);
+        refs.domReference.current?.focus();
+    };
+    const debouncedHandleSelectOption = useDebounceCallback(handleSelectOption, 50);
+    const handleKeyDown = useComboboxKeyboard({
+        filteredOptions,
+        selectedOptions,
+        readOnly: formFieldProps.readOnly || false,
+        disabled: disabled,
+        multiple,
+        inputValue,
+        options,
+        open,
+        interactiveChildren,
+        setOpen,
+        handleSelectOption: debouncedHandleSelectOption,
+    });
+    const rowVirtualizer = useVirtualizer({
+        count: Object.keys(filteredOptionsChildren).length,
+        getScrollElement: () => (virtual ? refs.floating.current : null),
+        estimateSize: () => 70,
+        measureElement: (elem) => {
+            return elem.getBoundingClientRect().height;
+        },
+        overscan: 7,
+    });
+    return (jsxs(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[prefix(value)];
+                debouncedHandleSelectOption({ option: option });
+            },
+            handleSelectOption: debouncedHandleSelectOption,
+            chipSrLabel,
+            listRef,
+            forwareddRef,
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
+        }, children: [jsxs("div", { className: cl('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__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: context.floatingId || '', 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("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 && (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: filteredOptionsChildren[virtualRow.index] }, virtualRow.index))) })), loading ? (jsxs(ComboboxCustom, { className: 'ds-combobox__loading', children: [jsx(Spinner, { "aria-label": 'Laster', "data-size": 'sm' }), loadingLabel] })) : (jsxs(Fragment, { children: [restChildren, !virtual && filteredOptionsChildren] }))] }) }) }))] }));
+});
+const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
+Combobox.displayName = 'Combobox';
+
+export { Combobox, ComboboxComponent };

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

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