@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/cjs/utilities/hooks/use-radio-group/use-radio-group.js

@@ -0,0 +1,109 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+function useRadioGroup(props) {
+    const { error, readOnly, required, disabled, name, onChange, value: initialValue = '', } = props || {};
+    const [groupValue, setGroupValue] = react.useState(initialValue);
+    const errorId = react.useId();
+    const namedId = react.useId();
+    const radioGroupName = name || namedId;
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Radio` component.
+         * @example
+         * <Radio label="Option 1" {...getRadioProps('option-1')} />
+         */
+        getRadioProps: (propsOrValue) => {
+            let groupProps;
+            if (props) {
+                const { onChange, error, ...rest } = props;
+                groupProps = rest;
+            }
+            const radioProps = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue;
+            const { ref: forwardedRef = undefined, value = '', ...rest } = radioProps;
+            const handleRef = (element) => {
+                if (element) {
+                    // Set initial checked state
+                    element.checked = value === groupValue;
+                }
+                // Handle forwarded ref
+                if (forwardedRef) {
+                    if (typeof forwardedRef === 'function') {
+                        forwardedRef(element);
+                    }
+                    else {
+                        forwardedRef.current = element;
+                    }
+                }
+            };
+            const handleChange = (e) => {
+                if (e.target.name === radioGroupName) {
+                    setGroupValue((prevValue) => {
+                        onChange?.(e.target.value, prevValue);
+                        return e.target.value;
+                    });
+                }
+            };
+            return {
+                ...groupProps,
+                ...rest,
+                name: radioGroupName,
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                value,
+                ref: handleRef,
+                required: required || rest.required,
+                readOnly: readOnly || rest.readOnly,
+                disabled: disabled || rest.disabled,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    handleChange(e);
+                },
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+exports.useRadioGroup = useRadioGroup;

package/dist/cjs/utilities/hooks/use-synchronized-animation/use-synchronized-animation.js

@@ -0,0 +1,50 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = react.useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation &&
+            firstOfType?.currentTime &&
+            myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType?.currentTime) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/index.js

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+require('react');
+require('@digdir/designsystemet-web');
+var rovingFocusItem = require('./roving-focus/roving-focus-item.js');
+var rovingFocusRoot = require('./roving-focus/roving-focus-root.js');
+
+const warn = (message, ...args) => typeof window === 'undefined' ||
+    window.dsWarnings === false ||
+    console.warn(`Designsystemet: ${message}`, ...args);
+
+exports.RovingFocusItem = rovingFocusItem.RovingFocusItem;
+exports.getNextFocusableValue = rovingFocusItem.getNextFocusableValue;
+exports.getPrevFocusableValue = rovingFocusItem.getPrevFocusableValue;
+exports.RovingFocusRoot = rovingFocusRoot.RovingFocusRoot;
+exports.warn = warn;

package/dist/cjs/utilities/roving-focus/roving-focus-item.js

@@ -0,0 +1,74 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
+var useRovingFocus = require('./use-roving-focus.js');
+
+/** Get the next focusable RovingFocusItem */
+function getNextFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+}
+/** Get the previous focusable RovingFocusItem */
+function getPrevFocusableValue(items, value) {
+    const currIndex = items.findIndex((item) => item.value === value);
+    return items.at(currIndex === 0 ? -1 : currIndex - 1);
+}
+/** @deprecated RovingFocusItem is deprecated.*/
+const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
+    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
+    const rovingProps = getRovingProps({
+        onKeyDown: (e) => {
+            rest?.onKeyDown?.(e);
+            const items = getOrderedItems();
+            let nextItem;
+            switch (orientation) {
+                case 'horizontal':
+                    if (e.key === 'ArrowRight') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowLeft') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'vertical':
+                    if (e.key === 'ArrowDown') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowUp') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'ambiguous':
+                    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+            }
+            if (e.key === 'Home') {
+                nextItem = items[0];
+            }
+            if (e.key === 'End') {
+                nextItem = items[items.length - 1];
+            }
+            if (nextItem) {
+                e.preventDefault();
+                nextItem.element.focus();
+            }
+        },
+    });
+    const mergedRefs = useMergeRefs.useMergeRefs([ref, rovingProps.ref]);
+    return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
+});
+
+exports.RovingFocusItem = RovingFocusItem;
+exports.getNextFocusableValue = getNextFocusableValue;
+exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/roving-focus/roving-focus-root.js

@@ -0,0 +1,77 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+var index = require('../index.js');
+var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
+require('@digdir/designsystemet-web');
+
+const RovingFocusContext = react.createContext({
+    elements: { current: new Map() },
+    getOrderedItems: () => [],
+    setFocusableValue: () => {
+        /* intentionally empty */
+    },
+    onShiftTab: () => {
+        /* intentionally empty */
+    },
+    focusableValue: null,
+    orientation: 'horizontal',
+});
+/** @deprecated RovingFocusRoot is deprecated. */
+const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const activeValueOrNull = activeValue ?? null;
+    const [focusableValue, setFocusableValue] = react.useState(activeValueOrNull);
+    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
+    const elements = react.useRef(new Map());
+    const myRef = react.useRef(null);
+    const refs = useMergeRefs.useMergeRefs([ref, myRef]);
+    const getOrderedItems = () => {
+        if (!myRef.current)
+            return [];
+        const elementsFromDOM = Array.from(myRef.current.querySelectorAll('[data-roving-tabindex-item]'));
+        return Array.from(elements.current)
+            .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
+            .map(([value, element]) => ({ value, element }));
+    };
+    react.useEffect(() => {
+        setFocusableValue(activeValueOrNull);
+    }, [activeValueOrNull]);
+    index.warn('RovingFocusRoot is deprecated.');
+    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
+            elements,
+            getOrderedItems,
+            focusableValue,
+            setFocusableValue,
+            onShiftTab: () => {
+                setIsShiftTabbing(true);
+            },
+            orientation,
+        }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
+                onBlur?.(e);
+                setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
+            }, onFocus: (e) => {
+                onFocus?.(e);
+                if (e.target !== e.currentTarget)
+                    return;
+                const orderedItems = getOrderedItems();
+                if (orderedItems.length === 0)
+                    return;
+                if (focusableValue != null) {
+                    elements.current.get(focusableValue)?.focus();
+                }
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
+                }
+                else {
+                    orderedItems.at(0)?.element.focus();
+                }
+            }, ref: refs }) }));
+});
+
+exports.RovingFocusContext = RovingFocusContext;
+exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/roving-focus/use-roving-focus.js

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var rovingFocusRoot = require('./roving-focus-root.js');
+
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+/**
+@deprecated useRovingFocus is deprecated.
+Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(rovingFocusRoot.RovingFocusContext);
+    return {
+        getOrderedItems,
+        isFocusable: focusableValue === value,
+        orientation,
+        getRovingProps: (props) => ({
+            ...props,
+            ref: (element) => {
+                if (element) {
+                    elements.current.set(value, element);
+                }
+                else {
+                    elements.current.delete(value);
+                }
+            },
+            onKeyDown: (e) => {
+                props?.onKeyDown?.(e);
+                if (e.shiftKey && e.key === 'Tab') {
+                    onShiftTab();
+                    return;
+                }
+            },
+            onFocus: (e) => {
+                props?.onFocus?.(e);
+                setFocusableValue(value);
+            },
+            'data-roving-tabindex-item': true,
+            tabIndex: focusableValue === value ? 0 : -1,
+        }),
+    };
+};
+
+exports.useRovingFocus = useRovingFocus;

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

@@ -0,0 +1,203 @@
+'use client';
+import { jsxs, jsx, 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 { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
+import '@digdir/designsystemet-web';
+import '../../utilities/roving-focus/roving-focus-item.js';
+import '../../utilities/roving-focus/roving-focus-root.js';
+import { Spinner } from '../spinner/spinner.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 { omit } from './omit/omit.js';
+import { useCombobox } from './useCombobox.js';
+import { useComboboxKeyboard } from './useComboboxKeyboard.js';
+import { useFloatingCombobox } from './useFloatingCombobox.js';
+import { useFormField } from './useFormField/useFormField.js';
+import { prefix, setReactInputValue, removePrefix } from './utilities.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/ComboboxContext.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext } from 'react';
+
+const ComboboxContext = createContext(undefined);
+
+export { ComboboxContext };

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useReducer } 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 };

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

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useContext, useMemo } from 'react';
+import { Label } from '../label/label.js';
+import { ComboboxContext } from './ComboboxContext.js';
+import { useComboboxId } from './ComboboxIdContext.js';
+import { omit } from './omit/omit.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 ? Slot : 'div';
+    const randomId = useId();
+    const { activeIndex } = useComboboxId();
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('ComboboxCustom must be used within a Combobox');
+    }
+    const { customIds, setListRef, getItemProps, size } = context;
+    const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
+    const combinedRef = useMergeRefs([
+        (node) => {
+            setListRef(index, node);
+        },
+        ref,
+    ]);
+    return (jsx(Label, { "data-size": size, asChild: true, children: jsx(Component, { ref: combinedRef, tabIndex: -1, className: cl('ds-combobox__custom', className), id: id || randomId, role: 'option', "aria-selected": activeIndex === index, "data-active": activeIndex === index, ...omit(['interactive'], rest), ...omit(['onClick', 'onPointerLeave'], getItemProps()) }) }));
+});
+
+export { ComboboxCustom };

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef, useContext } from 'react';
+import { Label } from '../label/label.js';
+import { ComboboxContext } from './ComboboxContext.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 { filteredOptions, size } = context;
+    return (filteredOptions.length === 0 && (jsx(Label, { "data-size": size, asChild: true, children: jsx("div", { ref: ref, className: cl('ds-combobox__empty', className), ...rest, children: children }) })));
+});
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+
+export { ComboboxEmpty };