@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,77 +1,59 @@
 'use client';
-import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
-import 'react';
-import '@digdir/designsystemet-web';
-import '../../utilities/roving-focus/roving-focus-item.js';
-import '../../utilities/roving-focus/roving-focus-root.js';
-import { useComboboxId } from './ComboboxIdContext.js';
-
-const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption, }) => {
-    const { activeIndex } = useComboboxId();
-    // handle keyboard navigation in the list
-    const handleKeyDownFunc = (event) => {
-        if (readOnly || disabled)
-            return;
-        if (!event)
-            return;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                if (open)
-                    break;
-                setOpen(true);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                /* If we are on the first item, close */
-                if (activeIndex !== 0)
-                    break;
-                setOpen(false);
-                break;
-            case 'Enter': {
-                event.preventDefault();
-                // ignore if it is closed
-                if (!open)
-                    break;
-                // check if we are in the custom components
-                if (activeIndex <= interactiveChildren.length - 1) {
-                    const selectedComponent = interactiveChildren[activeIndex];
-                    if (selectedComponent.props.onSelect) {
-                        selectedComponent?.props.onSelect();
-                        return;
-                    }
-                }
-                // if we are in the options, find the actual index
-                const valueIndex = activeIndex - interactiveChildren.length;
-                const option = filteredOptions[valueIndex];
-                handleSelectOption({ option: options[option] });
-                break;
-            }
-            case 'Backspace':
-                // if we are in single mode, we need to set selectedOptions to empty
-                if (!multiple) {
-                    const lastOption = Object.keys(selectedOptions).pop();
-                    lastOption &&
-                        handleSelectOption({
-                            option: selectedOptions[lastOption],
-                            remove: true,
-                        });
-                    break;
-                }
-                if (inputValue === '' && multiple) {
-                    const lastOption = Object.keys(selectedOptions).pop();
-                    /* Remove last option, and use handleSelectOption */
-                    lastOption &&
-                        handleSelectOption({
-                            option: selectedOptions[lastOption],
-                            remove: true,
-                        });
-                }
-                break;
-        }
-    };
-    const handleKeyDown = useDebounceCallback(handleKeyDownFunc, 20);
-    return handleKeyDown;
+import { useDebounceCallback } from "../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js";
+import "../../utilities/index.js";
+import { useComboboxId } from "./ComboboxIdContext.js";
+//#region src/components/Combobox/useComboboxKeyboard.tsx
+const useComboboxKeyboard = ({ readOnly, disabled, interactiveChildren, filteredOptions, inputValue, selectedOptions, multiple, open, options, setOpen, handleSelectOption }) => {
+	const { activeIndex } = useComboboxId();
+	const handleKeyDownFunc = (event) => {
+		if (readOnly || disabled) return;
+		if (!event) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (open) break;
+				setOpen(true);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				if (activeIndex !== 0) break;
+				setOpen(false);
+				break;
+			case "Enter": {
+				event.preventDefault();
+				if (!open) break;
+				if (activeIndex <= interactiveChildren.length - 1) {
+					const selectedComponent = interactiveChildren[activeIndex];
+					if (selectedComponent.props.onSelect) {
+						selectedComponent?.props.onSelect();
+						return;
+					}
+				}
+				const option = filteredOptions[activeIndex - interactiveChildren.length];
+				handleSelectOption({ option: options[option] });
+				break;
+			}
+			case "Backspace":
+				if (!multiple) {
+					const lastOption = Object.keys(selectedOptions).pop();
+					lastOption && handleSelectOption({
+						option: selectedOptions[lastOption],
+						remove: true
+					});
+					break;
+				}
+				if (inputValue === "" && multiple) {
+					const lastOption = Object.keys(selectedOptions).pop();
+					lastOption && handleSelectOption({
+						option: selectedOptions[lastOption],
+						remove: true
+					});
+				}
+				break;
+			default: break;
+		}
+	};
+	return useDebounceCallback(handleKeyDownFunc, 20);
 };
-
+//#endregion
 export { useComboboxKeyboard };

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

@@ -1,74 +1,75 @@
 'use client';
-import { useFloating, flip, size, offset, autoUpdate, useRole, useDismiss, useListNavigation, useInteractions } from '@floating-ui/react';
-import { useState } from 'react';
-import { flushSync } from 'react-dom';
-import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
-
-const useFloatingCombobox = ({ listRef, }) => {
-    const [open, setOpen] = useState(false);
-    const { activeIndex } = useComboboxId();
-    const dispatch = useComboboxIdDispatch();
-    // floating UI
-    const { refs, floatingStyles, context } = useFloating({
-        open,
-        onOpenChange: (newOpen) => {
-            if (!newOpen)
-                dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: 0 });
-            flushSync(() => {
-                if (refs.floating.current && !newOpen) {
-                    refs.floating.current.scrollTop = 0;
-                }
-                setTimeout(() => {
-                    setOpen(newOpen);
-                }, 1);
-            });
-        },
-        whileElementsMounted: (reference, floating, update) => {
-            autoUpdate(reference, floating, update);
-            return () => {
-                floating.scrollTop = 0;
-            };
-        },
-        middleware: [
-            flip({ padding: 10 }),
-            size({
-                apply({ rects, elements }) {
-                    requestAnimationFrame(() => {
-                        Object.assign(elements.floating.style, {
-                            width: `${rects.reference.width}px`,
-                            maxHeight: `200px`,
-                        });
-                    });
-                },
-            }),
-            offset(10),
-        ],
-    });
-    const role = useRole(context, { role: 'listbox' });
-    const dismiss = useDismiss(context);
-    const listNav = useListNavigation(context, {
-        listRef,
-        activeIndex,
-        virtual: true,
-        scrollItemIntoView: true,
-        enabled: open,
-        focusItemOnHover: true,
-        onNavigate: (index) => {
-            dispatch?.({ type: 'SET_ACTIVE_INDEX', payload: index || 0 });
-        },
-    });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([role, dismiss, listNav]);
-    return {
-        open,
-        setOpen,
-        activeIndex,
-        refs,
-        floatingStyles,
-        context,
-        getReferenceProps,
-        getFloatingProps,
-        getItemProps,
-    };
+import { useComboboxId, useComboboxIdDispatch } from "./ComboboxIdContext.js";
+import { useState } from "react";
+import { autoUpdate, flip, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole } from "@floating-ui/react";
+import { flushSync } from "react-dom";
+//#region src/components/Combobox/useFloatingCombobox.tsx
+const useFloatingCombobox = ({ listRef }) => {
+	const [open, setOpen] = useState(false);
+	const { activeIndex } = useComboboxId();
+	const dispatch = useComboboxIdDispatch();
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange: (newOpen) => {
+			if (!newOpen) dispatch?.({
+				type: "SET_ACTIVE_INDEX",
+				payload: 0
+			});
+			flushSync(() => {
+				if (refs.floating.current && !newOpen) refs.floating.current.scrollTop = 0;
+				setTimeout(() => {
+					setOpen(newOpen);
+				}, 1);
+			});
+		},
+		whileElementsMounted: (reference, floating, update) => {
+			autoUpdate(reference, floating, update);
+			return () => {
+				floating.scrollTop = 0;
+			};
+		},
+		middleware: [
+			flip({ padding: 10 }),
+			size({ apply({ rects, elements }) {
+				requestAnimationFrame(() => {
+					Object.assign(elements.floating.style, {
+						width: `${rects.reference.width}px`,
+						maxHeight: `200px`
+					});
+				});
+			} }),
+			offset(10)
+		]
+	});
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		useRole(context, { role: "listbox" }),
+		useDismiss(context),
+		useListNavigation(context, {
+			listRef,
+			activeIndex,
+			virtual: true,
+			scrollItemIntoView: true,
+			enabled: open,
+			focusItemOnHover: true,
+			onNavigate: (index) => {
+				dispatch?.({
+					type: "SET_ACTIVE_INDEX",
+					payload: index || 0
+				});
+			}
+		})
+	]);
+	return {
+		open,
+		setOpen,
+		activeIndex,
+		refs,
+		floatingStyles,
+		context,
+		getReferenceProps,
+		getFloatingProps,
+		getItemProps
+	};
 };
-
+//#endregion
 export { useFloatingCombobox };

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

@@ -1,6 +1,6 @@
 'use client';
-import { createContext } from 'react';
-
+import { createContext } from "react";
+//#region src/components/Combobox/useFormField/FieldsetContext.ts
 const FieldsetContext = createContext(null);
-
+//#endregion
 export { FieldsetContext };

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

@@ -0,0 +1,27 @@
+
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import { Size } from "@digdir/designsystemet-types";
+//#region src/components/Combobox/useFormField/useFormField.d.ts
+type FormFieldProps = {
+  /** Error message for form field */
+  error?: ReactNode;
+  /** Override generated errorId */
+  errorId?: string;
+  /** Disables element
+   * @note Avoid using if possible for accessibility purposes
+   */
+  disabled?: boolean;
+  /** Description for field */
+  description?: ReactNode;
+  /** Override internal id */
+  id?: string;
+  /** Toggle `readOnly` */
+  readOnly?: boolean;
+  /**
+   * Changes field size and paddings
+   * @default md
+   */
+  size?: Size;
+} & Pick<HTMLAttributes<HTMLElement>, 'aria-describedby'>;
+//#endregion
+export { FormFieldProps };

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

@@ -1,34 +1,32 @@
 'use client';
-import cl from 'clsx/lite';
-import { useContext, useId } from 'react';
-import { FieldsetContext } from './FieldsetContext.js';
-
+import { FieldsetContext } from "./FieldsetContext.js";
+import cl from "clsx/lite";
+import { useContext, useId } from "react";
+//#region src/components/Combobox/useFormField/useFormField.ts
 /**
- * Handles props and their state for various form-fields in context with Fieldset
- */
+* Handles props and their state for various form-fields in context with Fieldset
+*/
 const useFormField = (props, prefix) => {
-    const fieldset = useContext(FieldsetContext);
-    const randomId = useId();
-    const id = props.id ?? `${prefix}-${randomId}`;
-    const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
-    const descriptionId = `${prefix}-description-${randomId}`;
-    const size = props.size ?? fieldset?.size ?? 'md';
-    const disabled = fieldset?.disabled || props?.disabled;
-    const hasError = !disabled && !!(props.error || fieldset?.error);
-    return {
-        hasError,
-        errorId,
-        descriptionId,
-        size,
-        inputProps: {
-            id,
-            disabled,
-            'aria-invalid': hasError ? true : undefined,
-            'aria-describedby': cl(props['aria-describedby'], !!props?.description &&
-                typeof props?.description === 'string' &&
-                descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || undefined,
-        },
-    };
+	const fieldset = useContext(FieldsetContext);
+	const randomId = useId();
+	const id = props.id ?? `${prefix}-${randomId}`;
+	const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
+	const descriptionId = `${prefix}-description-${randomId}`;
+	const size = props.size ?? fieldset?.size ?? "md";
+	const disabled = fieldset?.disabled || props?.disabled;
+	const hasError = !disabled && !!(props.error || fieldset?.error);
+	return {
+		hasError,
+		errorId,
+		descriptionId,
+		size,
+		inputProps: {
+			id,
+			disabled,
+			"aria-invalid": hasError ? true : void 0,
+			"aria-describedby": cl(props["aria-describedby"], !!props?.description && typeof props?.description === "string" && descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || void 0
+		}
+	};
 };
-
+//#endregion
 export { useFormField };

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

@@ -1,34 +1,31 @@
 'use client';
-import { isValidElement } from 'react';
-import { ComboboxCustom } from './Custom.js';
-
+import { ComboboxCustom } from "./Custom.js";
+import { isValidElement } from "react";
+//#region src/components/Combobox/utilities.ts
 function isComboboxCustom(child) {
-    return isValidElement(child) && child.type === ComboboxCustom;
+	return isValidElement(child) && child.type === ComboboxCustom;
 }
 function isInteractiveComboboxCustom(child) {
-    return isComboboxCustom(child) && child.props.interactive === true;
+	return isComboboxCustom(child) && child.props.interactive === true;
 }
-const INTERNAL_OPTION_PREFIX = 'internal-option-';
+const INTERNAL_OPTION_PREFIX = "internal-option-";
 /**
- * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
- * @param value
- * @returns
- */
+* We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+* @param value
+* @returns
+*/
 const prefix = (value) => {
-    return INTERNAL_OPTION_PREFIX + value;
+	return INTERNAL_OPTION_PREFIX + value;
 };
 const removePrefix = (value) => {
-    return value.slice(INTERNAL_OPTION_PREFIX.length);
+	return value.slice(16);
 };
 const setReactInputValue = (input, value) => {
-    const previousValue = input.value;
-    input.value = value;
-    const tracker = input._valueTracker;
-    if (typeof tracker !== 'undefined') {
-        tracker.setValue(previousValue);
-    }
-    //'change' instead of 'input', see https://github.com/facebook/react/issues/11488#issuecomment-381590324
-    input.dispatchEvent(new Event('change', { bubbles: true }));
+	const previousValue = input.value;
+	input.value = value;
+	const tracker = input._valueTracker;
+	if (typeof tracker !== "undefined") tracker.setValue(previousValue);
+	input.dispatchEvent(new Event("change", { bubbles: true }));
 };
-
+//#endregion
 export { isComboboxCustom, isInteractiveComboboxCustom, prefix, removePrefix, setReactInputValue };

package/dist/esm/components/alert/alert.d.ts

@@ -0,0 +1,14 @@
+
+import { DefaultProps } from "../../types.js";
+import { HTMLAttributes } from "react";
+//#region src/components/alert/alert.d.ts
+type AlertProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
+ * @example
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+ */
+declare const Alert: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Alert, AlertProps };

package/dist/esm/components/alert/alert.js

@@ -1,16 +1,21 @@
 '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/alert/alert.tsx
 /**
- * Alerts are used to inform users about important information, warnings, errors, or success.
- *
- * @example
- * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
- */
-const Alert = forwardRef(function Alert({ 'data-color': color = 'info', className, ...rest }, ref) {
-    return (jsx("div", { className: cl('ds-alert', className), "data-color": color, ref: ref, ...rest }));
+* Alerts are used to inform users about important information, warnings, errors, or success.
+*
+* @example
+* <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
+*/
+const Alert = forwardRef(function Alert({ "data-color": color = "info", className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cl("ds-alert", className),
+		"data-color": color,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Alert };

package/dist/esm/components/avatar/avatar.d.ts

@@ -0,0 +1,68 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { HTMLAttributes, ReactNode } from "react";
+import { Size } from "@digdir/designsystemet-types";
+//#region src/components/avatar/avatar.d.ts
+type AriaHidden = HTMLAttributes<HTMLSpanElement>['aria-hidden'];
+type AriaAttributes$1 = {
+  'aria-label': string;
+  'data-tooltip'?: never;
+  'aria-hidden'?: AriaHidden;
+} | {
+  'aria-label'?: never;
+  'data-tooltip': string;
+  'aria-hidden'?: AriaHidden;
+} | {
+  'aria-label'?: string;
+  'data-tooltip'?: string;
+  'aria-hidden': true | 'true';
+};
+type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, AriaAttributes$1 & {
+  /**
+   * The size of the avatar.
+   */
+  'data-size'?: 'xs' | Size;
+  /**
+   * The shape of the avatar.
+   *
+   * @default 'circle'
+   * @deprecated Please use `style={{ '--dsc-avatar-radius': VALUE }}` instead
+   */
+  variant?: 'circle' | 'square';
+  /**
+   * Initials to display inside the avatar.
+   */
+  initials?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Image, icon or initials to display inside the avatar.
+   *
+   * Gets `aria-hidden="true"`
+   */
+  children?: ReactNode;
+}>;
+/**
+ * Avatars are used to represent people or entities.
+ *
+ * @example
+ * <Avatar aria-label="John Doe" initials="JD" />
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <img src='…' alt='John Doe' />
+ * </Avatar>
+ *
+ * @example
+ * <Avatar aria-label="John Doe">
+ *  <Icon />
+ * </Avatar>
+ */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Avatar, AvatarProps };

package/dist/esm/components/avatar/avatar.js

@@ -1,31 +1,45 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, Fragment } from 'react';
-
+import cl from "clsx/lite";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/avatar/avatar.tsx
 /**
- * Avatars are used to represent people or entities.
- *
- * @example
- * <Avatar aria-label="John Doe" initials="JD" />
- *
- * @example
- * <Avatar aria-label="John Doe">
- *  <img src='…' alt='John Doe' />
- * </Avatar>
- *
- * @example
- * <Avatar aria-label="John Doe">
- *  <Icon />
- * </Avatar>
- */
-const Avatar = forwardRef(function Avatar({ 'aria-label': ariaLabel, 'data-tooltip': dataTooltip, variant, className, children, initials, asChild, ...rest }, ref) {
-    const OuterComponent = asChild ? Slot : 'span';
-    const useSlot = children && typeof children !== 'string';
-    const textChild = children && typeof children === 'string';
-    const Component = useSlot ? Slot : Fragment;
-    return (jsx(OuterComponent, { ref: ref, className: cl('ds-avatar', className), "data-variant": variant, "data-initials": initials, role: asChild ? undefined : 'img', "aria-label": ariaLabel || dataTooltip, "data-tooltip": dataTooltip, tabIndex: dataTooltip ? 0 : undefined, ...rest, children: jsx(Component, { ...(useSlot && !asChild ? { 'aria-hidden': true } : {}), children: textChild ? jsx("span", { children: children }) : children }) }));
+* Avatars are used to represent people or entities.
+*
+* @example
+* <Avatar aria-label="John Doe" initials="JD" />
+*
+* @example
+* <Avatar aria-label="John Doe">
+*  <img src='…' alt='John Doe' />
+* </Avatar>
+*
+* @example
+* <Avatar aria-label="John Doe">
+*  <Icon />
+* </Avatar>
+*/
+const Avatar = forwardRef(function Avatar({ "aria-label": ariaLabel, "data-tooltip": dataTooltip, variant, className, children, initials, asChild, ...rest }, ref) {
+	const OuterComponent = asChild ? Slot : "span";
+	const useSlot = children && typeof children !== "string";
+	const textChild = children && typeof children === "string";
+	const Component = useSlot ? Slot : Fragment;
+	return /* @__PURE__ */ jsx(OuterComponent, {
+		ref,
+		className: cl("ds-avatar", className),
+		"data-variant": variant,
+		"data-initials": initials,
+		role: asChild ? void 0 : "img",
+		"aria-label": ariaLabel || dataTooltip,
+		"data-tooltip": dataTooltip,
+		tabIndex: dataTooltip ? 0 : void 0,
+		...rest,
+		children: /* @__PURE__ */ jsx(Component, {
+			...useSlot && !asChild ? { "aria-hidden": true } : {},
+			children: textChild ? /* @__PURE__ */ jsx("span", { children }) : children
+		})
+	});
 });
-
+//#endregion
 export { Avatar };