@digdir/designsystemet-react 0.0.0-test-20250717083941 → 0.0.0-use-tsdown-react-package-20260818104628

package/dist/esm/utilities/hooks/use-radio-group/use-radio-group.d.ts

@@ -0,0 +1,63 @@
+'use client';
+import { RadioProps } from "../../../components/radio/radio.js";
+import "../../../components/index.js";
+import { Dispatch, ForwardedRef, ReactNode, SetStateAction } from "react";
+//#region src/utilities/hooks/use-radio-group/use-radio-group.d.ts
+type UseRadioGroupProps = {
+  /** Set disabled state of all radios */
+  disabled?: boolean;
+  /** Shared error message for all radios */
+  error?: ReactNode;
+  /** Name of all radios.
+   * @default string of auto-generated name
+   */
+  name?: string;
+  /** Set read only state of all radios */
+  readOnly?: boolean;
+  /** Set required state of all radios */
+  required?: boolean;
+  /**
+   * Initial value of the group
+   */
+  value?: string;
+  /** Callback when selected radios changes */
+  onChange?: (nextValue: string, prevValue: string) => void;
+  /**
+   * If outline, all radios in the group will have a border
+   */
+  variant?: RadioProps['variant'];
+};
+/**
+ * Get anything that is set on a radio, but
+ * remove anything that comes from the group itself.
+ */
+type GetRadioProps = Omit<RadioProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'name' | 'checked' | 'value'> & {
+  ref?: ForwardedRef<HTMLInputElement>;
+  value?: string;
+};
+type useRadioGroupReturn = {
+  value: string;
+  setValue: Dispatch<SetStateAction<string>>;
+  getRadioProps: (propsOrValue: string | GetRadioProps) => GetRadioProps;
+  validationMessageProps: {
+    children: ReactNode;
+    hidden: boolean;
+    id: string;
+  };
+};
+/**
+ * useRadioGroup is used to group multiple <Radio> components
+ * @example
+ * const { getRadioProps, validationMessageProps, value, setValue } = useRadioGroup({
+ *   disabled: false,
+ *   error: 'Validation message text',
+ *   name: 'group-name',
+ *   onChange: (nextValue, prevValue) => {},
+ *   readOnly: false,
+ *   required: true,
+ *   value: '',
+ * });
+ */
+declare function useRadioGroup(props?: UseRadioGroupProps): useRadioGroupReturn;
+//#endregion
+export { GetRadioProps, UseRadioGroupProps, useRadioGroup };

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

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

package/dist/esm/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts

@@ -0,0 +1,18 @@
+'use client';
+import { useLayoutEffect } from "react";
+//#region src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+declare function useSynchronizedAnimation<T>(animationName: string): import("react").RefObject<T | null>;
+//#endregion
+export { useSynchronizedAnimation };

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

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

package/dist/esm/utilities/index.d.ts

@@ -0,0 +1,21 @@
+'use client';
+import { useDebounceCallback } from "./hooks/deprecated/use-debounce-callback/use-debounce-callback.js";
+import { useIsomorphicLayoutEffect } from "./hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { useMediaQuery } from "./hooks/deprecated/use-media-query/use-media-query.js";
+import { UseCheckboxGroupProps, useCheckboxGroup } from "./hooks/use-checkbox-group/use-checkbox-group.js";
+import { UsePaginationProps, usePagination } from "./hooks/use-pagination/use-pagination.js";
+import { UseRadioGroupProps, useRadioGroup } from "./hooks/use-radio-group/use-radio-group.js";
+import { useSynchronizedAnimation } from "./hooks/use-synchronized-animation/use-synchronized-animation.js";
+import "./hooks/index.js";
+import { RovingFocusRoot } from "./roving-focus/roving-focus-root.js";
+import { RovingFocusItem } from "./roving-focus/roving-focus-item.js";
+import "./roving-focus/use-roving-focus.js";
+import { MergeRight } from "./types.js";
+//#region src/utilities/index.d.ts
+declare global {
+  interface Window {
+    dsWarnings?: boolean;
+  }
+}
+//#endregion
+export { type MergeRight, RovingFocusItem, RovingFocusRoot, type UseCheckboxGroupProps, type UsePaginationProps, type UseRadioGroupProps, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation };

package/dist/esm/utilities/index.js

@@ -0,0 +1,16 @@
+'use client';
+import { useDebounceCallback } from "./hooks/deprecated/use-debounce-callback/use-debounce-callback.js";
+import { useIsomorphicLayoutEffect } from "./hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { useMediaQuery } from "./hooks/deprecated/use-media-query/use-media-query.js";
+import { useCheckboxGroup } from "./hooks/use-checkbox-group/use-checkbox-group.js";
+import { usePagination } from "./hooks/use-pagination/use-pagination.js";
+import { useRadioGroup } from "./hooks/use-radio-group/use-radio-group.js";
+import { useSynchronizedAnimation } from "./hooks/use-synchronized-animation/use-synchronized-animation.js";
+import "./hooks/index.js";
+import { RovingFocusRoot } from "./roving-focus/roving-focus-root.js";
+import "./roving-focus/use-roving-focus.js";
+import { RovingFocusItem } from "./roving-focus/roving-focus-item.js";
+//#region src/utilities/index.ts
+const warn = (message, ...args) => typeof window === "undefined" || window.dsWarnings === false || console.warn(`Designsystemet: ${message}`, ...args);
+//#endregion
+export { RovingFocusItem, RovingFocusRoot, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation, warn };

package/dist/esm/utilities/roving-focus/roving-focus-item.d.ts

@@ -0,0 +1,16 @@
+'use client';
+import "./roving-focus-root.js";
+import { HTMLAttributes } from "react";
+//#region src/utilities/roving-focus/roving-focus-item.d.ts
+/** @deprecated RovingFocusItem is deprecated.*/
+declare const RovingFocusItem: import("react").ForwardRefExoticComponent<{
+  /** The value of the `RovingFocusItem` used to determine which item should have focus. */
+  value?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { RovingFocusItem };

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

@@ -1,68 +1,57 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { useRovingFocus } from './use-roving-focus.js';
-import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
-
+import { useMergeRefs } from "../hooks/use-merge-refs/use-merge-refs.js";
+import "../hooks/index.js";
+import { useRovingFocus } from "./use-roving-focus.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/utilities/roving-focus/roving-focus-item.tsx
 /** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {
-    const currIndex = items.findIndex((item) => item.value === value);
-    return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
+	const currIndex = items.findIndex((item) => item.value === value);
+	return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
 }
 /** Get the previous focusable RovingFocusItem */
 function getPrevFocusableValue(items, value) {
-    const currIndex = items.findIndex((item) => item.value === value);
-    return items.at(currIndex === 0 ? -1 : currIndex - 1);
+	const currIndex = items.findIndex((item) => item.value === value);
+	return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
+/** @deprecated RovingFocusItem is deprecated.*/
 const RovingFocusItem = forwardRef(({ value, asChild, ...rest }, ref) => {
-    const Component = asChild ? Slot : 'div';
-    const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus(focusValue);
-    const rovingProps = getRovingProps({
-        onKeyDown: (e) => {
-            rest?.onKeyDown?.(e);
-            const items = getOrderedItems();
-            let nextItem;
-            switch (orientation) {
-                case 'horizontal':
-                    if (e.key === 'ArrowRight') {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (e.key === 'ArrowLeft') {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-                    break;
-                case 'vertical':
-                    if (e.key === 'ArrowDown') {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (e.key === 'ArrowUp') {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-                    break;
-                case 'ambiguous':
-                    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
-                        nextItem = getNextFocusableValue(items, focusValue);
-                    }
-                    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
-                        nextItem = getPrevFocusableValue(items, focusValue);
-                    }
-            }
-            if (e.key === 'Home') {
-                nextItem = items[0];
-            }
-            if (e.key === 'End') {
-                nextItem = items[items.length - 1];
-            }
-            if (nextItem) {
-                e.preventDefault();
-                nextItem.element.focus();
-            }
-        },
-    });
-    const mergedRefs = useMergeRefs([ref, rovingProps.ref]);
-    return (jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
+	const Component = asChild ? Slot : "div";
+	const focusValue = value ?? (typeof rest.children === "string" ? rest.children : "");
+	const { getOrderedItems, getRovingProps, orientation } = useRovingFocus(focusValue);
+	const rovingProps = getRovingProps({ onKeyDown: (e) => {
+		rest?.onKeyDown?.(e);
+		const items = getOrderedItems();
+		let nextItem;
+		switch (orientation) {
+			case "horizontal":
+				if (e.key === "ArrowRight") nextItem = getNextFocusableValue(items, focusValue);
+				if (e.key === "ArrowLeft") nextItem = getPrevFocusableValue(items, focusValue);
+				break;
+			case "vertical":
+				if (e.key === "ArrowDown") nextItem = getNextFocusableValue(items, focusValue);
+				if (e.key === "ArrowUp") nextItem = getPrevFocusableValue(items, focusValue);
+				break;
+			case "ambiguous":
+				if (["ArrowRight", "ArrowDown"].includes(e.key)) nextItem = getNextFocusableValue(items, focusValue);
+				if (["ArrowLeft", "ArrowUp"].includes(e.key)) nextItem = getPrevFocusableValue(items, focusValue);
+		}
+		if (e.key === "Home") nextItem = items[0];
+		if (e.key === "End") nextItem = items[items.length - 1];
+		if (nextItem) {
+			e.preventDefault();
+			nextItem.element.focus();
+		}
+	} });
+	const mergedRefs = useMergeRefs([ref, rovingProps.ref]);
+	return /* @__PURE__ */ jsx(Component, {
+		...rest,
+		...rovingProps,
+		ref: mergedRefs,
+		children: rest.children
+	});
 });
-
+//#endregion
 export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue };

package/dist/esm/utilities/roving-focus/roving-focus-root.d.ts

@@ -0,0 +1,24 @@
+'use client';
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/utilities/roving-focus/roving-focus-root.d.ts
+/** @deprecated RovingFocusRoot is deprecated. */
+declare const RovingFocusRoot: import("react").ForwardRefExoticComponent<{
+  /** The children of the `RovingFocusRoot`. The children should get their roving-relevant props from the `useRovingFocus` hook. */
+  children: ReactNode;
+  /** The value of the element that should be focused when the `RovingFocusRoot` receives focus. */
+  activeValue?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Changes what arrow keys are used to navigate the roving focus.
+   * Sets correct `aria-orientation` attribute, if `vertical` or `horizontal`.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: "vertical" | "horizontal" | "ambiguous";
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { RovingFocusRoot };