@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,79 +1,111 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMergeRefs } from '@floating-ui/react';
-import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-import { useContext, useRef } from 'react';
-import { Paragraph } from '../../paragraph/paragraph.js';
-import { ComboboxContext } from '../ComboboxContext.js';
-import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
-import { omit } from '../omit/omit.js';
-import { prefix } from '../utilities.js';
-import ComboboxChips from './ComboboxChips.js';
-import ComboboxClearButton from './ComboboxClearButton.js';
-
+import { ComboboxContext } from "../ComboboxContext.js";
+import { useComboboxIdDispatch } from "../ComboboxIdContext.js";
+import { omit } from "../omit/omit.js";
+import { Paragraph } from "../../paragraph/paragraph.js";
+import { prefix } from "../utilities.js";
+import ComboboxChips from "./ComboboxChips.js";
+import ComboboxClearButton from "./ComboboxClearButton.js";
+import cl from "clsx/lite";
+import { useContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs } from "@floating-ui/react";
+import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
+//#region src/components/Combobox/internal/ComboboxInput.tsx
 const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDown, ...rest }) => {
-    const context = useContext(ComboboxContext);
-    const idDispatch = useComboboxIdDispatch();
-    const clearButtonRef = useRef(null);
-    if (!context) {
-        throw new Error('ComboboxContext is missing');
-    }
-    const setActiveIndex = (id) => {
-        idDispatch?.({ type: 'SET_ACTIVE_INDEX', payload: id });
-    };
-    const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size, } = context;
-    const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
-    // onChange function for the input
-    const onChange = (event) => {
-        const value = event.target.value;
-        setInputValue(value);
-        setActiveIndex(0);
-        // check if input value is the same as a label, if so, select it
-        for (const option of Object.values(options)) {
-            if (option.label.toLowerCase() === value.toLowerCase()) {
-                /* if option is already selected, discard selecting it, since it would de-select */
-                if (selectedOptions[prefix(option.value)])
-                    continue;
-                handleSelectOption({ option });
-            }
-        }
-    };
-    const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
-    /* Props from floating-ui */
-    const props = getReferenceProps({
-        ref: refs?.setReference,
-        role: null,
-        'aria-controls': null,
-        'aria-expanded': null,
-        'aria-haspopup': null,
-        /* If we click the wrapper, toggle open, set index to first option, and focus the input */
-        onClick(event) {
-            if (disabled)
-                return;
-            if (readOnly)
-                return;
-            if (clearButtonRef.current?.contains(event.target))
-                return;
-            setOpen(!open);
-            setActiveIndex(0);
-            inputRef.current?.focus();
-        },
-        /* Handles list navigation */
-        onKeyDown: handleKeyDown,
-        // preventDefault on keydown to avoid sending in form
-        onKeyPress(event) {
-            if (event.key === 'Enter') {
-                event.preventDefault();
-            }
-        },
-    });
-    return (jsx(Paragraph, { "data-size": size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: cl('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { "data-size": size, asChild: true, children: jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": open ? listId : undefined, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
-                                    onChange(e);
-                                    !open && setOpen(true);
-                                    rest.onChange?.(e);
-                                } }) })] }), showClearButton && jsx(ComboboxClearButton, { ref: clearButtonRef }), jsx("div", { className: 'ds-combobox__arrow', children: open ? (jsx(ChevronUpIcon, { title: 'arrow up', height: '1.5em', width: '1.5em' })) : (jsx(ChevronDownIcon, { title: 'arrow down', height: '1.5em', width: '1.5em' })) })] }) }));
+	const context = useContext(ComboboxContext);
+	const idDispatch = useComboboxIdDispatch();
+	const clearButtonRef = useRef(null);
+	if (!context) throw new Error("ComboboxContext is missing");
+	const setActiveIndex = (id) => {
+		idDispatch?.({
+			type: "SET_ACTIVE_INDEX",
+			payload: id
+		});
+	};
+	const { forwareddRef, readOnly, disabled, open, inputRef, refs, inputValue, multiple, selectedOptions, formFieldProps, htmlSize, options, setOpen, getReferenceProps, setInputValue, handleSelectOption, size } = context;
+	const mergedRefs = useMergeRefs([forwareddRef, inputRef]);
+	const onChange = (event) => {
+		const value = event.target.value;
+		setInputValue(value);
+		setActiveIndex(0);
+		for (const option of Object.values(options)) if (option.label.toLowerCase() === value.toLowerCase()) {
+			if (selectedOptions[prefix(option.value)]) continue;
+			handleSelectOption({ option });
+		}
+	};
+	const showClearButton = !hideClearButton && Object.keys(selectedOptions).length > 0;
+	const props = getReferenceProps({
+		ref: refs?.setReference,
+		role: null,
+		"aria-controls": null,
+		"aria-expanded": null,
+		"aria-haspopup": null,
+		onClick(event) {
+			if (disabled) return;
+			if (readOnly) return;
+			if (clearButtonRef.current?.contains(event.target)) return;
+			setOpen(!open);
+			setActiveIndex(0);
+			inputRef.current?.focus();
+		},
+		onKeyDown: handleKeyDown,
+		onKeyPress(event) {
+			if (event.key === "Enter") event.preventDefault();
+		}
+	});
+	return /* @__PURE__ */ jsx(Paragraph, {
+		"data-size": size,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			"aria-disabled": disabled ? "true" : void 0,
+			className: cl("ds-textfield__input", "ds-combobox__input__wrapper", readOnly && "ds-combobox--readonly", error && "ds-combobox--error"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "ds-combobox__chip-and-input",
+					children: [multiple && !hideChips && /* @__PURE__ */ jsx(ComboboxChips, {}), /* @__PURE__ */ jsx(Paragraph, {
+						"data-size": size,
+						asChild: true,
+						children: /* @__PURE__ */ jsx("input", {
+							ref: mergedRefs,
+							"aria-activedescendant": props["aria-activedescendant"],
+							readOnly,
+							"aria-autocomplete": "list",
+							role: "combobox",
+							"aria-expanded": open,
+							"aria-controls": open ? listId : void 0,
+							autoComplete: "off",
+							size: htmlSize,
+							value: inputValue,
+							...omit(["style", "className"], rest),
+							...formFieldProps.inputProps,
+							className: "ds-combobox__input",
+							onChange: (e) => {
+								onChange(e);
+								!open && setOpen(true);
+								rest.onChange?.(e);
+							}
+						})
+					})]
+				}),
+				showClearButton && /* @__PURE__ */ jsx(ComboboxClearButton, { ref: clearButtonRef }),
+				/* @__PURE__ */ jsx("div", {
+					className: "ds-combobox__arrow",
+					children: open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+						title: "arrow up",
+						height: "1.5em",
+						width: "1.5em"
+					}) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+						title: "arrow down",
+						height: "1.5em",
+						width: "1.5em"
+					})
+				})
+			]
+		})
+	});
 };
-ComboboxInput.displayName = 'ComboboxInput';
-
+ComboboxInput.displayName = "ComboboxInput";
+//#endregion
 export { ComboboxInput as default };

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

@@ -1,13 +1,29 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import cl from 'clsx/lite';
-import { Label } from '../../label/label.js';
-import { Paragraph } from '../../paragraph/paragraph.js';
-
-const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { "data-size": size, htmlFor: formFieldProps.inputProps.id, className: cl('ds-combobox__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-combobox__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, "data-size": size, children: jsx("div", { id: formFieldProps.descriptionId, className: cl('ds-combobox__description', hideLabel && `ds-sr-only`), children: description }) }))] }));
+import { Label } from "../../label/label.js";
+import { Paragraph } from "../../paragraph/paragraph.js";
+import cl from "clsx/lite";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+//#region src/components/Combobox/internal/ComboboxLabel.tsx
+const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [label && /* @__PURE__ */ jsxs(Label, {
+		"data-size": size,
+		htmlFor: formFieldProps.inputProps.id,
+		className: cl("ds-combobox__label", hideLabel && `ds-sr-only`),
+		children: [readOnly && /* @__PURE__ */ jsx(PadlockLockedFillIcon, {
+			"aria-hidden": true,
+			className: "ds-combobox__readonly__icon"
+		}), label]
+	}), description && /* @__PURE__ */ jsx(Paragraph, {
+		asChild: true,
+		"data-size": size,
+		children: /* @__PURE__ */ jsx("div", {
+			id: formFieldProps.descriptionId,
+			className: cl("ds-combobox__description", hideLabel && `ds-sr-only`),
+			children: description
+		})
+	})] });
 };
-ComboboxLabel.displayName = 'ComboboxLabel';
-
+ComboboxLabel.displayName = "ComboboxLabel";
+//#endregion
 export { ComboboxLabel as default };

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

@@ -1,11 +1,18 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { removePrefix } from '../utilities.js';
-
-const ComboboxNative = ({ selectedOptions, multiple, name, }) => {
-    const VALUE = Object.keys(selectedOptions).map((key) => removePrefix(key));
-    return (jsx("select", { name: name, multiple: multiple, style: { display: 'none' }, value: multiple ? VALUE : VALUE[0], onChange: () => { }, children: VALUE.map((value) => (jsx("option", { value: value }, value))) }));
+import { removePrefix } from "../utilities.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Combobox/internal/ComboboxNative.tsx
+const ComboboxNative = ({ selectedOptions, multiple, name }) => {
+	const VALUE = Object.keys(selectedOptions).map((key) => removePrefix(key));
+	return /* @__PURE__ */ jsx("select", {
+		name,
+		multiple,
+		style: { display: "none" },
+		value: multiple ? VALUE : VALUE[0],
+		onChange: () => {},
+		children: VALUE.map((value) => /* @__PURE__ */ jsx("option", { value }, value))
+	});
 };
-ComboboxNative.displayName = 'ComboboxNative';
-
+ComboboxNative.displayName = "ComboboxNative";
+//#endregion
 export { ComboboxNative as default };

package/dist/{types → esm}/components/Combobox/omit/omit.d.ts

@@ -1,3 +1,5 @@
+
+//#region src/components/Combobox/omit/omit.d.ts
 type UnknownRecord = Record<string | number | symbol, unknown>;
 /**
  * @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
@@ -8,5 +10,6 @@ type UnknownRecord = Record<string | number | symbol, unknown>;
  * @return {Object} A new object with properties from `names` not on it.
  * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
  */
-export declare const omit: (names: string[], obj: UnknownRecord) => object;
-export {};
+declare const omit: (names: string[], obj: UnknownRecord) => object;
+//#endregion
+export { omit };

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

@@ -1,28 +1,25 @@
 'use client';
+//#region src/components/Combobox/omit/omit.ts
 /**
- * @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
- *
- * Returns a partial copy of an object omitting the keys specified.
- * @param {Array} names an array of String property names to omit from the new object
- * @param {Object} obj The object to copy from
- * @return {Object} A new object with properties from `names` not on it.
- * @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
- */
+* @deprecated This function is deprecated. Use suggest using `omit` from dedicated utiility libraries or create your own utility function.
+*
+* Returns a partial copy of an object omitting the keys specified.
+* @param {Array} names an array of String property names to omit from the new object
+* @param {Object} obj The object to copy from
+* @return {Object} A new object with properties from `names` not on it.
+* @example omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}
+*/
 const omit = (names, obj) => {
-    const result = {};
-    const index = {};
-    let idx = 0;
-    const len = names.length;
-    while (idx < len) {
-        index[names[idx]] = 1;
-        idx += 1;
-    }
-    for (const prop in obj) {
-        if (!Object.hasOwn(index, prop)) {
-            result[prop] = obj[prop];
-        }
-    }
-    return result;
+	const result = {};
+	const index = {};
+	let idx = 0;
+	const len = names.length;
+	while (idx < len) {
+		index[names[idx]] = 1;
+		idx += 1;
+	}
+	for (const prop in obj) if (!Object.hasOwn(index, prop)) result[prop] = obj[prop];
+	return result;
 };
-
+//#endregion
 export { omit };

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

@@ -0,0 +1,14 @@
+
+import "./Custom.js";
+import "./Option/Option.js";
+import "./Combobox.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/Combobox/useCombobox.d.ts
+type Option = {
+  value: string;
+  label: string;
+  displayValue?: string;
+  description?: string;
+};
+//#endregion
+export { Option };

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

@@ -1,121 +1,104 @@
 'use client';
-import { useCallback, useMemo, Children, useState } from 'react';
-import { isComboboxOption } from './Option/Option.js';
-import { isInteractiveComboboxCustom, prefix } from './utilities.js';
-
+import { isInteractiveComboboxCustom, prefix } from "./utilities.js";
+import { isComboboxOption } from "./Option/Option.js";
+import { Children, useCallback, useMemo, useState } from "react";
+//#region src/components/Combobox/useCombobox.tsx
 const isOption = (option) => !!option;
 function useCombobox({ children, inputValue, multiple, filter = (inputValue, option) => {
-    return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
-}, initialValue, }) {
-    const filterCallback = useCallback(filter, [filter]);
-    const { optionsChildren, customIds, restChildren, interactiveChildren } = useMemo(() => {
-        const allChildren = Children.toArray(children);
-        const result = allChildren.reduce((acc, child) => {
-            if (isComboboxOption(child)) {
-                acc.optionsChildren.push(child);
-            }
-            else {
-                acc.restChildren.push(child);
-                if (isInteractiveComboboxCustom(child)) {
-                    const childElement = child;
-                    acc.interactiveChildren.push(childElement);
-                    if (!childElement.props.id) {
-                        throw new Error('If ComboboxCustom is interactive, it must have an id');
-                    }
-                    acc.customIds.push(childElement.props.id);
-                }
-            }
-            return acc;
-        }, {
-            optionsChildren: [],
-            customIds: [],
-            restChildren: [],
-            interactiveChildren: [],
-        });
-        return result;
-    }, [children]);
-    const options = useMemo(() => {
-        const values = [];
-        const allOptions = {};
-        optionsChildren.map((child) => {
-            const props = child.props;
-            let label = props.displayValue || '';
-            if (!props.displayValue) {
-                let childrenLabel = '';
-                // go over children and find all strings
-                Children.forEach(props.children, (child) => {
-                    if (typeof child === 'string') {
-                        childrenLabel += child;
-                    }
-                    else {
-                        throw new Error('If ComboboxOption is not a string, it must have a displayValue prop');
-                    }
-                });
-                label = childrenLabel;
-            }
-            if (values.includes(props.value)) {
-                console.warn(`Combobox has multiple options with the same value: ${props.value}`);
-            }
-            values.push(props.value);
-            allOptions[prefix(String(props.value))] = {
-                value: String(props.value),
-                label,
-                displayValue: props.displayValue,
-                description: props.description,
-            };
-            return null;
-        });
-        return allOptions;
-    }, [optionsChildren]);
-    const preSelectedOptions = useMemo(() => (initialValue?.map((key) => {
-        return prefix(key);
-    }) || []).reduce((acc, value) => {
-        const option = options[value];
-        if (isOption(option)) {
-            acc[value] = option;
-        }
-        return acc;
-    }, {}), [initialValue, options]);
-    const [selectedOptions, setSelectedOptions] = useState(preSelectedOptions);
-    const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
-        const filteredOptions = [];
-        const filteredOptionsChildren = Object.keys(options)
-            .map((option, index) => {
-            /* If we have a selected value in single mode and the input matches an option, return all children */
-            if (!multiple && Object.keys(selectedOptions).length === 1) {
-                filteredOptions.push(option);
-                return optionsChildren[index];
-            }
-            if (multiple && selectedOptions[option]) {
-                filteredOptions.push(option);
-                return optionsChildren[index];
-            }
-            if (filterCallback(inputValue, options[option])) {
-                filteredOptions.push(option);
-                return optionsChildren[index];
-            }
-            return null;
-        })
-            .filter((child) => child);
-        return { filteredOptions, filteredOptionsChildren };
-    }, [
-        filterCallback,
-        inputValue,
-        multiple,
-        options,
-        optionsChildren,
-        selectedOptions,
-    ]);
-    return {
-        filteredOptionsChildren,
-        filteredOptions,
-        restChildren,
-        options,
-        customIds,
-        selectedOptions,
-        interactiveChildren,
-        setSelectedOptions,
-    };
+	return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+}, initialValue }) {
+	const filterCallback = useCallback(filter, [filter]);
+	const { optionsChildren, customIds, restChildren, interactiveChildren } = useMemo(() => {
+		return Children.toArray(children).reduce((acc, child) => {
+			if (isComboboxOption(child)) acc.optionsChildren.push(child);
+			else {
+				acc.restChildren.push(child);
+				if (isInteractiveComboboxCustom(child)) {
+					const childElement = child;
+					acc.interactiveChildren.push(childElement);
+					if (!childElement.props.id) throw new Error("If ComboboxCustom is interactive, it must have an id");
+					acc.customIds.push(childElement.props.id);
+				}
+			}
+			return acc;
+		}, {
+			optionsChildren: [],
+			customIds: [],
+			restChildren: [],
+			interactiveChildren: []
+		});
+	}, [children]);
+	const options = useMemo(() => {
+		const values = [];
+		const allOptions = {};
+		optionsChildren.map((child) => {
+			const props = child.props;
+			let label = props.displayValue || "";
+			if (!props.displayValue) {
+				let childrenLabel = "";
+				Children.forEach(props.children, (child) => {
+					if (typeof child === "string") childrenLabel += child;
+					else throw new Error("If ComboboxOption is not a string, it must have a displayValue prop");
+				});
+				label = childrenLabel;
+			}
+			if (values.includes(props.value)) console.warn(`Combobox has multiple options with the same value: ${props.value}`);
+			values.push(props.value);
+			allOptions[prefix(String(props.value))] = {
+				value: String(props.value),
+				label,
+				displayValue: props.displayValue,
+				description: props.description
+			};
+			return null;
+		});
+		return allOptions;
+	}, [optionsChildren]);
+	const [selectedOptions, setSelectedOptions] = useState(useMemo(() => (initialValue?.map((key) => {
+		return prefix(key);
+	}) || []).reduce((acc, value) => {
+		const option = options[value];
+		if (isOption(option)) acc[value] = option;
+		return acc;
+	}, {}), [initialValue, options]));
+	const { filteredOptions, filteredOptionsChildren } = useMemo(() => {
+		const filteredOptions = [];
+		return {
+			filteredOptions,
+			filteredOptionsChildren: Object.keys(options).map((option, index) => {
+				if (!multiple && Object.keys(selectedOptions).length === 1) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				if (multiple && selectedOptions[option]) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				if (filterCallback(inputValue, options[option])) {
+					filteredOptions.push(option);
+					return optionsChildren[index];
+				}
+				return null;
+			}).filter((child) => child)
+		};
+	}, [
+		filterCallback,
+		inputValue,
+		multiple,
+		options,
+		optionsChildren,
+		selectedOptions
+	]);
+	return {
+		filteredOptionsChildren,
+		filteredOptions,
+		restChildren,
+		options,
+		customIds,
+		selectedOptions,
+		interactiveChildren,
+		setSelectedOptions
+	};
 }
-
+//#endregion
 export { useCombobox };