@digdir/designsystemet-react 1.20.0 → 1.20.1

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

@@ -1,203 +1,256 @@
 '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';
-
+import { useDebounceCallback } from "../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js";
+import "../../utilities/index.js";
+import { Spinner } from "../spinner/spinner.js";
+import { ComboboxContext } from "./ComboboxContext.js";
+import { ComboboxIdProvider } from "./ComboboxIdContext.js";
+import { omit } from "./omit/omit.js";
+import { ComboboxCustom } from "./Custom.js";
+import ComboboxError from "./internal/ComboboxError.js";
+import { prefix, removePrefix, setReactInputValue } from "./utilities.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 { useFormField } from "./useFormField/useFormField.js";
+import cl from "clsx/lite";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal } from "@floating-ui/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/Combobox/Combobox.tsx
 /**
- * @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] }))] }) }) }))] }));
+* @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,
+		readOnly,
+		error,
+		errorId,
+		size,
+		description,
+		id
+	}, "combobox");
+	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) => {
+				return options[prefix(option)];
+			});
+			setSelectedOptions(updatedSelectedOptions.reduce((acc, value) => {
+				acc[prefix(value.value)] = value;
+				return acc;
+			}, {}));
+		}
+	}, [
+		multiple,
+		value,
+		options,
+		setSelectedOptions
+	]);
+	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 {
+			for (const key of Object.keys(newSelectedOptions)) delete newSelectedOptions[key];
+			newSelectedOptions[prefix(option.value)] = option;
+			inputRef.current && setReactInputValue(inputRef.current, option?.label || "");
+			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,
+		multiple,
+		inputValue,
+		options,
+		open,
+		interactiveChildren,
+		setOpen,
+		setInputValue,
+		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 /* @__PURE__ */ jsxs(ComboboxContext.Provider, {
+		value: {
+			size,
+			options,
+			selectedOptions,
+			multiple,
+			disabled,
+			readOnly,
+			open,
+			inputRef,
+			refs,
+			inputValue,
+			formFieldProps,
+			htmlSize,
+			clearButtonLabel,
+			customIds,
+			filteredOptions,
+			setInputValue,
+			setOpen,
+			getReferenceProps,
+			getItemProps,
+			onOptionClick: (value) => {
+				if (readOnly) return;
+				if (disabled) return;
+				const option = options[prefix(value)];
+				debouncedHandleSelectOption({ option });
+			},
+			handleSelectOption: debouncedHandleSelectOption,
+			chipSrLabel,
+			listRef,
+			forwareddRef,
+			setListRef: (index, node) => {
+				listRef.current[index] = node;
+			}
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cl("ds-combobox", `ds-combobox--${size}`, disabled && "ds-combobox__disabled", className),
+			style,
+			ref: portalRef,
+			children: [
+				name && /* @__PURE__ */ jsx(ComboboxNative, {
+					name,
+					selectedOptions,
+					multiple
+				}),
+				/* @__PURE__ */ jsx(ComboboxLabel, {
+					label,
+					description,
+					size,
+					readOnly,
+					hideLabel,
+					formFieldProps
+				}),
+				/* @__PURE__ */ jsx(ComboboxInput, {
+					...omit(["inputValue"], rest),
+					hideClearButton,
+					listId: context.floatingId || "",
+					error,
+					hideChips,
+					handleKeyDown,
+					"aria-busy": loading
+				}),
+				/* @__PURE__ */ jsx(ComboboxError, {
+					size,
+					error,
+					formFieldProps
+				})
+			]
+		}), open && /* @__PURE__ */ jsx(FloatingPortal, {
+			root: portal ? null : portalRef,
+			children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+				context,
+				initialFocus: -1,
+				visuallyHiddenDismiss: true,
+				children: /* @__PURE__ */ 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 && /* @__PURE__ */ jsx("div", {
+						style: {
+							height: `${rowVirtualizer.getTotalSize()}px`,
+							width: "100%",
+							position: "relative"
+						},
+						children: rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ 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 ? /* @__PURE__ */ jsxs(ComboboxCustom, {
+						className: "ds-combobox__loading",
+						children: [/* @__PURE__ */ jsx(Spinner, {
+							"aria-label": "Laster",
+							"data-size": "sm"
+						}), loadingLabel]
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [restChildren, !virtual && filteredOptionsChildren] })]
+				})
+			})
+		})]
+	});
 });
-const Combobox = forwardRef((props, ref) => (jsx(ComboboxIdProvider, { children: jsx(ComboboxComponent, { ...props, ref: ref }) })));
-Combobox.displayName = 'Combobox';
-
+const Combobox = forwardRef((props, ref) => /* @__PURE__ */ jsx(ComboboxIdProvider, { children: /* @__PURE__ */ jsx(ComboboxComponent, {
+	...props,
+	ref
+}) }));
+Combobox.displayName = "Combobox";
+//#endregion
 export { Combobox, ComboboxComponent };

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

@@ -1,6 +1,6 @@
 'use client';
-import { createContext } from 'react';
-
-const ComboboxContext = createContext(undefined);
-
+import { createContext } from "react";
+//#region src/components/Combobox/ComboboxContext.tsx
+const ComboboxContext = createContext(void 0);
+//#endregion
 export { ComboboxContext };

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

@@ -1,35 +1,35 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useReducer } from 'react';
-
-const ComboboxIdContext = createContext({
-    activeIndex: 0,
-});
+import { createContext, useContext, useReducer } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/ComboboxIdContext.tsx
+const ComboboxIdContext = createContext({ activeIndex: 0 });
 const ComboboxIdReducer = (state, action) => {
-    switch (action.type) {
-        case 'SET_ACTIVE_INDEX':
-            return {
-                ...state,
-                activeIndex: action.payload,
-            };
-        default:
-            return state;
-    }
+	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');
+	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 }) }));
+	const [state, dispatch] = useReducer(ComboboxIdReducer, { activeIndex: 0 });
+	return /* @__PURE__ */ jsx(ComboboxIdContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx(ComboboxIdDispatch.Provider, {
+			value: dispatch,
+			children
+		})
+	});
 };
 function useComboboxIdDispatch() {
-    return useContext(ComboboxIdDispatch);
+	return useContext(ComboboxIdDispatch);
 }
 function useComboboxId() {
-    return useContext(ComboboxIdContext);
+	return useContext(ComboboxIdContext);
 }
-
+//#endregion
 export { ComboboxIdContext, ComboboxIdDispatch, ComboboxIdProvider, ComboboxIdReducer, useComboboxId, useComboboxIdDispatch };

package/dist/esm/components/Combobox/Custom.d.ts

@@ -0,0 +1,2 @@
+
+import { HTMLAttributes } from "react";

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

@@ -1,34 +1,40 @@
 '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';
-
+import { ComboboxContext } from "./ComboboxContext.js";
+import { useComboboxId } from "./ComboboxIdContext.js";
+import { Label } from "../label/label.js";
+import { omit } from "./omit/omit.js";
+import cl from "clsx/lite";
+import { forwardRef, useContext, useId, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { useMergeRefs } from "@floating-ui/react";
+//#region src/components/Combobox/Custom.tsx
 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()) }) }));
+	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]);
+	return /* @__PURE__ */ jsx(Label, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Component, {
+			ref: useMergeRefs([(node) => {
+				setListRef(index, node);
+			}, ref]),
+			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())
+		})
+	});
 });
-
+//#endregion
 export { ComboboxCustom };

package/dist/esm/components/Combobox/Empty.d.ts

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/Combobox/Empty.d.ts
+type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement>;
+declare const ComboboxEmpty: import("react").ForwardRefExoticComponent<ComboboxEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ComboboxEmpty, ComboboxEmptyProps };