@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,18 +1,25 @@
 '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';
-
+import { ComboboxContext } from "./ComboboxContext.js";
+import { Label } from "../label/label.js";
+import cl from "clsx/lite";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/Empty.tsx
 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 }) })));
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("ComboboxEmpty must be used within a Combobox");
+	const { filteredOptions, size } = context;
+	return filteredOptions.length === 0 && /* @__PURE__ */ jsx(Label, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cl("ds-combobox__empty", className),
+			...rest,
+			children
+		})
+	});
 });
-ComboboxEmpty.displayName = 'ComboboxEmpty';
-
+ComboboxEmpty.displayName = "ComboboxEmpty";
+//#endregion
 export { ComboboxEmpty };

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

@@ -1,11 +1,16 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/Option/Description.tsx
 const ComboboxOptionDescription = forwardRef(({ children, className, ...rest }, ref) => {
-    return (jsx("span", { className: cl('ds-combobox__option__description', className), ref: ref, ...rest, children: children }));
+	return /* @__PURE__ */ jsx("span", {
+		className: cl("ds-combobox__option__description", className),
+		ref,
+		...rest,
+		children
+	});
 });
-ComboboxOptionDescription.displayName = 'ComboboxOptionDescription';
-
+ComboboxOptionDescription.displayName = "ComboboxOptionDescription";
+//#endregion
 export { ComboboxOptionDescription as default };

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

@@ -0,0 +1,35 @@
+
+import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/Combobox/Option/Option.d.ts
+type ComboboxOptionProps = {
+  /**
+   * The value returned when the option is selected
+   */
+  value: string;
+  /**
+   * The index of the option in the list, will be overwritten by Combobox.
+   */
+  description?: string;
+  /**
+   * The text displayed in the input or in the chips when the option is selected.
+   * Required if children is not composed of strings only.
+   */
+  displayValue?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ComboboxOption: import("react").NamedExoticComponent<{
+  /**
+   * The value returned when the option is selected
+   */
+  value: string;
+  /**
+   * The index of the option in the list, will be overwritten by Combobox.
+   */
+  description?: string;
+  /**
+   * The text displayed in the input or in the chips when the option is selected.
+   * Required if children is not composed of strings only.
+   */
+  displayValue?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ComboboxOption, ComboboxOptionProps };

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

@@ -1,35 +1,62 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { memo, forwardRef, useId, useContext, isValidElement } from 'react';
-import { Label } from '../../label/label.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import { omit } from '../omit/omit.js';
-import ComboboxOptionDescription from './Description.js';
-import { SelectedIcon } from './SelectedIcon.js';
-import { useComboboxOption } from './useComboboxOption.js';
-
+import { ComboboxContext } from "../ComboboxContext.js";
+import { Label } from "../../label/label.js";
+import { omit } from "../omit/omit.js";
+import ComboboxOptionDescription from "./Description.js";
+import { SelectedIcon } from "./SelectedIcon.js";
+import { useComboboxOption } from "./useComboboxOption.js";
+import cl from "clsx/lite";
+import { forwardRef, isValidElement, memo, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Combobox/Option/Option.tsx
 const ComboboxOption = memo(forwardRef(({ value, description, children, className, ...rest }, forwardedRef) => {
-    const labelId = useId();
-    const { id, ref, selected, active, onOptionClick } = useComboboxOption({
-        id: rest.id,
-        ref: forwardedRef,
-        value,
-    });
-    const context = useContext(ComboboxContext);
-    if (!context) {
-        throw new Error('ComboboxOption must be used within a Combobox');
-    }
-    const { size, multiple, getItemProps } = context;
-    const props = getItemProps();
-    return (jsx(Label, { "data-size": 'md', asChild: true, children: jsxs("button", { ref: ref, id: id, role: 'option', type: 'button', "aria-selected": !!selected, "aria-labelledby": labelId, tabIndex: -1, onClick: (e) => {
-                onOptionClick();
-                rest.onClick?.(e);
-            }, className: cl('ds-combobox__option', active && 'ds-combobox__option--active', multiple && 'ds-combobox__option--multiple', className), ...omit(['displayValue'], rest), ...omit(['onClick', 'onPointerLeave'], props), children: [jsx(Label, { asChild: true, "data-size": size, children: jsx("span", { children: jsx(SelectedIcon, { multiple: multiple, selected: !!selected }) }) }), jsxs(Label, { className: 'ds-combobox__option__label', "data-size": size, id: labelId, children: [children, description && (jsx(ComboboxOptionDescription, { children: description }))] })] }) }));
+	const labelId = useId();
+	const { id, ref, selected, active, onOptionClick } = useComboboxOption({
+		id: rest.id,
+		ref: forwardedRef,
+		value
+	});
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("ComboboxOption must be used within a Combobox");
+	const { size, multiple, getItemProps } = context;
+	const props = getItemProps();
+	return /* @__PURE__ */ jsx(Label, {
+		"data-size": "md",
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			ref,
+			id,
+			role: "option",
+			type: "button",
+			"aria-selected": !!selected,
+			"aria-labelledby": labelId,
+			tabIndex: -1,
+			onClick: (e) => {
+				onOptionClick();
+				rest.onClick?.(e);
+			},
+			className: cl("ds-combobox__option", active && "ds-combobox__option--active", multiple && "ds-combobox__option--multiple", className),
+			...omit(["displayValue"], rest),
+			...omit(["onClick", "onPointerLeave"], props),
+			children: [/* @__PURE__ */ jsx(Label, {
+				asChild: true,
+				"data-size": size,
+				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SelectedIcon, {
+					multiple,
+					selected: !!selected
+				}) })
+			}), /* @__PURE__ */ jsxs(Label, {
+				className: "ds-combobox__option__label",
+				"data-size": size,
+				id: labelId,
+				children: [children, description && /* @__PURE__ */ jsx(ComboboxOptionDescription, { children: description })]
+			})]
+		})
+	});
 }));
-ComboboxOption.displayName = 'ComboboxOption';
+ComboboxOption.displayName = "ComboboxOption";
 function isComboboxOption(child) {
-    return isValidElement(child) && child.type === ComboboxOption;
+	return isValidElement(child) && child.type === ComboboxOption;
 }
-
+//#endregion
 export { ComboboxOption, isComboboxOption };

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

@@ -1,11 +1,17 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { CheckmarkIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-
+import cl from "clsx/lite";
+import { jsx } from "react/jsx-runtime";
+import { CheckmarkIcon } from "@navikt/aksel-icons";
+//#region src/components/Combobox/Option/SelectedIcon.tsx
 const SelectedIcon = ({ multiple, selected }) => {
-    return (jsx("div", { className: cl(multiple && 'ds-combobox__option__icon-wrapper', selected && 'ds-combobox__option__icon-wrapper--selected'), children: selected && (jsx(CheckmarkIcon, { className: 'ds-combobox__option__icon-wrapper__icon', "aria-hidden": true })) }));
+	return /* @__PURE__ */ jsx("div", {
+		className: cl(multiple && "ds-combobox__option__icon-wrapper", selected && "ds-combobox__option__icon-wrapper--selected"),
+		children: selected && /* @__PURE__ */ jsx(CheckmarkIcon, {
+			className: "ds-combobox__option__icon-wrapper__icon",
+			"aria-hidden": true
+		})
+	});
 };
-SelectedIcon.displayName = 'SelectedIcon';
-
+SelectedIcon.displayName = "SelectedIcon";
+//#endregion
 export { SelectedIcon };

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

@@ -1,49 +1,50 @@
 'use client';
-import { useMergeRefs } from '@floating-ui/react';
-import { useId, useContext, useMemo, 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 { ComboboxContext } from '../ComboboxContext.js';
-import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext.js';
-import { prefix } from '../utilities.js';
-
-const useComboboxOption = ({ id, ref, value, }) => {
-    const generatedId = useId();
-    const newId = id || generatedId;
-    const context = useContext(ComboboxContext);
-    const { activeIndex } = useComboboxId();
-    const dispatch = useComboboxIdDispatch();
-    if (!context) {
-        throw new Error('ComboboxOption must be used within a Combobox');
-    }
-    const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions, } = context;
-    const index = useMemo(() => filteredOptions.indexOf(prefix(String(value))) + customIds.length, [customIds.length, filteredOptions, value]);
-    const combinedRef = useMergeRefs([
-        (node) => {
-            setListRef(index, node);
-        },
-        ref,
-    ]);
-    if (index === -1) {
-        throw new Error('Internal error: ComboboxOption did not find index');
-    }
-    const selected = selectedOptions[prefix(value)];
-    const active = activeIndex === index;
-    useEffect(() => {
-        if (active) {
-            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index });
-        }
-    }, [generatedId, id, dispatch, active, index]);
-    const onOptionClickDebounced = useDebounceCallback(() => onOptionClick(value), 50);
-    return {
-        id: newId,
-        ref: combinedRef,
-        selected,
-        active,
-        onOptionClick: onOptionClickDebounced,
-    };
+import { useDebounceCallback } from "../../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js";
+import "../../../utilities/index.js";
+import { ComboboxContext } from "../ComboboxContext.js";
+import { useComboboxId, useComboboxIdDispatch } from "../ComboboxIdContext.js";
+import { prefix } from "../utilities.js";
+import { useContext, useEffect, useId, useMemo } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+//#region src/components/Combobox/Option/useComboboxOption.tsx
+const useComboboxOption = ({ id, ref, value }) => {
+	const generatedId = useId();
+	const newId = id || generatedId;
+	const context = useContext(ComboboxContext);
+	const { activeIndex } = useComboboxId();
+	const dispatch = useComboboxIdDispatch();
+	if (!context) throw new Error("ComboboxOption must be used within a Combobox");
+	const { selectedOptions, onOptionClick, setListRef, customIds, filteredOptions } = context;
+	const index = useMemo(() => filteredOptions.indexOf(prefix(String(value))) + customIds.length, [
+		customIds.length,
+		filteredOptions,
+		value
+	]);
+	const combinedRef = useMergeRefs([(node) => {
+		setListRef(index, node);
+	}, ref]);
+	if (index === -1) throw new Error("Internal error: ComboboxOption did not find index");
+	const selected = selectedOptions[prefix(value)];
+	const active = activeIndex === index;
+	useEffect(() => {
+		if (active) dispatch?.({
+			type: "SET_ACTIVE_INDEX",
+			payload: index
+		});
+	}, [
+		generatedId,
+		id,
+		dispatch,
+		active,
+		index
+	]);
+	return {
+		id: newId,
+		ref: combinedRef,
+		selected,
+		active,
+		onOptionClick: useDebounceCallback(() => onOptionClick(value), 50)
+	};
 };
-
+//#endregion
 export { useComboboxOption };

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

@@ -0,0 +1,15 @@
+
+import { ComboboxOption, ComboboxOptionProps } from "./Option/Option.js";
+import { Combobox as Combobox$1, ComboboxProps } from "./Combobox.js";
+import { ComboboxEmpty, ComboboxEmptyProps } from "./Empty.js";
+//#region src/components/Combobox/index.d.ts
+type ComboboxComponent = typeof Combobox$1 & {
+  Option: typeof ComboboxOption;
+  Empty: typeof ComboboxEmpty;
+};
+/**
+ * @deprecated Use `Suggestion` instead
+ */
+declare const Combobox: ComboboxComponent;
+//#endregion
+export { Combobox, ComboboxEmpty, type ComboboxEmptyProps, ComboboxOption, type ComboboxOptionProps, type ComboboxProps };

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

@@ -1,15 +1,15 @@
 'use client';
-import { Combobox as Combobox$1 } from './Combobox.js';
-import { ComboboxEmpty } from './Empty.js';
-import { ComboboxOption } from './Option/Option.js';
-
+import { ComboboxOption } from "./Option/Option.js";
+import { Combobox as Combobox$1 } from "./Combobox.js";
+import { ComboboxEmpty } from "./Empty.js";
+//#region src/components/Combobox/index.ts
 /**
- * @deprecated Use `Suggestion` instead
- */
+* @deprecated Use `Suggestion` instead
+*/
 const Combobox = Combobox$1;
 Combobox.Option = ComboboxOption;
 Combobox.Empty = ComboboxEmpty;
-Combobox.Option.displayName = 'Combobox.Option';
-Combobox.Empty.displayName = 'Combobox.Empty';
-
+Combobox.Option.displayName = "Combobox.Option";
+Combobox.Empty.displayName = "Combobox.Empty";
+//#endregion
 export { Combobox, ComboboxEmpty, ComboboxOption };

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

@@ -1,43 +1,43 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import '../../chip/index.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import { ChipRemovable } from '../../chip/chips.js';
-
+import { ComboboxContext } from "../ComboboxContext.js";
+import { ChipRemovable } from "../../chip/chips.js";
+import "../../chip/index.js";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/internal/ComboboxChips.tsx
 const ComboboxChips = () => {
-    const context = useContext(ComboboxContext);
-    if (!context) {
-        throw new Error('ComboboxContext is missing');
-    }
-    const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef, } = context;
-    return (jsx(Fragment, { children: Object.keys(selectedOptions).map((value) => {
-            return (jsx(ChipRemovable, { "data-size": size, disabled: disabled, onKeyDown: (e) => {
-                    if (readOnly)
-                        return;
-                    if (disabled)
-                        return;
-                    if (e.key === 'Enter') {
-                        e.stopPropagation();
-                        handleSelectOption({
-                            option: selectedOptions[value],
-                            remove: true,
-                        });
-                        inputRef?.current?.focus();
-                    }
-                }, onClick: () => {
-                    if (readOnly)
-                        return;
-                    if (disabled)
-                        return;
-                    /* If we click a chip, filter the active values and remove the one we clicked */
-                    handleSelectOption({
-                        option: selectedOptions[value],
-                        remove: true,
-                    });
-                }, "aria-label": chipSrLabel(selectedOptions[value]), children: selectedOptions[value].label }, value));
-        }) }));
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const { size, readOnly, disabled, selectedOptions, chipSrLabel, handleSelectOption, inputRef } = context;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Object.keys(selectedOptions).map((value) => {
+		return /* @__PURE__ */ jsx(ChipRemovable, {
+			"data-size": size,
+			disabled,
+			onKeyDown: (e) => {
+				if (readOnly) return;
+				if (disabled) return;
+				if (e.key === "Enter") {
+					e.stopPropagation();
+					handleSelectOption({
+						option: selectedOptions[value],
+						remove: true
+					});
+					inputRef?.current?.focus();
+				}
+			},
+			onClick: () => {
+				if (readOnly) return;
+				if (disabled) return;
+				handleSelectOption({
+					option: selectedOptions[value],
+					remove: true
+				});
+			},
+			"aria-label": chipSrLabel(selectedOptions[value]),
+			children: selectedOptions[value].label
+		}, value);
+	}) });
 };
-ComboboxChips.displayName = 'ComboboxChips';
-
+ComboboxChips.displayName = "ComboboxChips";
+//#endregion
 export { ComboboxChips as default };

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

@@ -1,33 +1,47 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { XMarkIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-import { forwardRef, useContext } from 'react';
-import { ComboboxContext } from '../ComboboxContext.js';
-
+import { ComboboxContext } from "../ComboboxContext.js";
+import cl from "clsx/lite";
+import { forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { XMarkIcon } from "@navikt/aksel-icons";
+//#region src/components/Combobox/internal/ComboboxClearButton.tsx
 const ComboboxClearButton = forwardRef((props, ref) => {
-    const context = useContext(ComboboxContext);
-    if (!context) {
-        throw new Error('ComboboxContext is missing');
-    }
-    const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
-    return (jsx("button", { ...props, ref: ref, disabled: disabled, className: cl('ds-combobox__clear-button', `ds-focus`), onClick: () => {
-            if (readOnly)
-                return;
-            if (disabled)
-                return;
-            handleSelectOption({ option: null, clear: true });
-        }, onKeyDown: (e) => {
-            if (readOnly)
-                return;
-            if (disabled)
-                return;
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-                handleSelectOption({ option: null, clear: true });
-            }
-        }, type: 'button', "aria-label": clearButtonLabel, children: jsx(XMarkIcon, { height: '1.5em', width: '1.5em', title: 'Clear selection' }) }));
+	const context = useContext(ComboboxContext);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const { readOnly, disabled, clearButtonLabel, handleSelectOption } = context;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		ref,
+		disabled,
+		className: cl("ds-combobox__clear-button", `ds-focus`),
+		onClick: () => {
+			if (readOnly) return;
+			if (disabled) return;
+			handleSelectOption({
+				option: null,
+				clear: true
+			});
+		},
+		onKeyDown: (e) => {
+			if (readOnly) return;
+			if (disabled) return;
+			if (e.key === "Enter") {
+				e.stopPropagation();
+				handleSelectOption({
+					option: null,
+					clear: true
+				});
+			}
+		},
+		type: "button",
+		"aria-label": clearButtonLabel,
+		children: /* @__PURE__ */ jsx(XMarkIcon, {
+			height: "1.5em",
+			width: "1.5em",
+			title: "Clear selection"
+		})
+	});
 });
-ComboboxClearButton.displayName = 'ComboboxClearButton';
-
+ComboboxClearButton.displayName = "ComboboxClearButton";
+//#endregion
 export { ComboboxClearButton as default };

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

@@ -1,10 +1,19 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { ValidationMessage } from '../../validation-message/validation-message.js';
-
+import { ValidationMessage } from "../../validation-message/validation-message.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/internal/ComboboxError.tsx
 const ComboboxError = ({ size, error, formFieldProps }) => {
-    return (jsx("div", { className: 'ds-combobox__error-message', id: formFieldProps.errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: error && jsx(ValidationMessage, { "data-size": size, children: error }) }));
+	return /* @__PURE__ */ jsx("div", {
+		className: "ds-combobox__error-message",
+		id: formFieldProps.errorId,
+		"aria-live": "polite",
+		"aria-relevant": "additions removals",
+		children: error && /* @__PURE__ */ jsx(ValidationMessage, {
+			"data-size": size,
+			children: error
+		})
+	});
 };
-ComboboxError.displayName = 'ComboboxError';
-
+ComboboxError.displayName = "ComboboxError";
+//#endregion
 export { ComboboxError as default };