@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/utilities/hooks/use-pagination/use-pagination.js

@@ -1,81 +1,85 @@
 'use client';
-import { pagination } from '@digdir/designsystemet-web';
-import { useMemo } from 'react';
-
+import { pagination } from "@digdir/designsystemet-web";
+import { useMemo } from "react";
+//#region src/utilities/hooks/use-pagination/use-pagination.ts
 /**
- * Hook to help manage pagination state
- *
- * @example
- * const { pages, nextButtonProps, prevButtonProps } = usePagination({
- *   currentPage: page,
- *   totalPages: 10,
- *   showPages: 7,
- *   setCurrentPage,
- * })
- *
- * <Pagination>
- *   <Pagination.Item>
- *     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
- *   </Pagination.Item>
- *   {pages.map(({ page, itemKey, buttonProps }) => (
- *     <Pagination.Item key={itemKey}>
- *       {typeof page === 'number' && (
- *         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
- *           {page}
- *         </Pagination.Button>
- *       )}
- *     </Pagination.Item>
- *   ))}
- *   <Pagination.Item>
- *     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
- *   </Pagination.Item>
- * </Pagination>
- **/
-const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7, }) => useMemo(() => {
-    const { next, prev, pages } = pagination({ current, total, show });
-    const handleClick = (page) => (event) => {
-        if (page < 1 || page > total)
-            return event.preventDefault(); // Prevent out of bounds navigation
-        onChange?.(event, page);
-        if (!event.defaultPrevented)
-            setCurrentPage?.(page); // Allow stopping change by calling event.preventDefault() in onChange
-    };
-    return {
-        /** Number of steps */
-        pages: pages.map(({ page, current }, index) => ({
-            /**
-             * Page number or "ellipsis" for the ellipsis item
-             */
-            page: page || 'ellipsis',
-            /**
-             * Unique key for the item
-             */
-            itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
-            /**
-             * Properties to spread on Pagination.Button
-             */
-            buttonProps: (page
-                ? {
-                    'aria-current': current ? 'true' : undefined,
-                    onClick: handleClick(page),
-                }
-                : null),
-        })),
-        /** Properties to spread on Pagination.Button used for previous navigation */
-        prevButtonProps: {
-            'aria-hidden': !prev, // Using aria-hidden to support all HTML elements because of potential asChild
-            onClick: handleClick(prev),
-        },
-        /** Properties to spread on Pagination.Button used for next navigation */
-        nextButtonProps: {
-            'aria-hidden': !next, // Using aria-hidden to support all HTML elements because of potential asChild
-            onClick: handleClick(next),
-        },
-        /** Indication if previous page action should be shown or not */
-        hasPrev: !!prev,
-        /** Indication if next page action should be shown or not */
-        hasNext: !!next,
-    };
-}, [current, total, show]);
-
+* Hook to help manage pagination state
+*
+* @example
+* const { pages, nextButtonProps, prevButtonProps } = usePagination({
+*   currentPage: page,
+*   totalPages: 10,
+*   showPages: 7,
+*   setCurrentPage,
+* })
+*
+* <Pagination>
+*   <Pagination.Item>
+*     <Pagination.Button {...prevButtonProps}>Forrige</Pagination.Button>
+*   </Pagination.Item>
+*   {pages.map(({ page, itemKey, buttonProps }) => (
+*     <Pagination.Item key={itemKey}>
+*       {typeof page === 'number' && (
+*         <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+*           {page}
+*         </Pagination.Button>
+*       )}
+*     </Pagination.Item>
+*   ))}
+*   <Pagination.Item>
+*     <Pagination.Button {...nextButtonProps}>Neste</Pagination.Button>
+*   </Pagination.Item>
+* </Pagination>
+**/
+const usePagination = ({ currentPage: current = 1, setCurrentPage, onChange, totalPages: total = 1, showPages: show = 7 }) => useMemo(() => {
+	const { next, prev, pages } = pagination({
+		current,
+		total,
+		show
+	});
+	const handleClick = (page) => (event) => {
+		if (page < 1 || page > total) return event.preventDefault();
+		onChange?.(event, page);
+		if (!event.defaultPrevented) setCurrentPage?.(page);
+	};
+	return {
+		/** Number of steps */
+		pages: pages.map(({ page, current }, index) => ({
+			/**
+			* Page number or "ellipsis" for the ellipsis item
+			*/
+			page: page || "ellipsis",
+			/**
+			* Unique key for the item
+			*/
+			itemKey: page ? `page-${page}` : `ellipsis-${index}`,
+			/**
+			* Properties to spread on Pagination.Button
+			*/
+			buttonProps: page ? {
+				"aria-current": current ? "true" : void 0,
+				onClick: handleClick(page)
+			} : null
+		})),
+		/** Properties to spread on Pagination.Button used for previous navigation */
+		prevButtonProps: {
+			"aria-hidden": !prev,
+			onClick: handleClick(prev)
+		},
+		/** Properties to spread on Pagination.Button used for next navigation */
+		nextButtonProps: {
+			"aria-hidden": !next,
+			onClick: handleClick(next)
+		},
+		/** Indication if previous page action should be shown or not */
+		hasPrev: !!prev,
+		/** Indication if next page action should be shown or not */
+		hasNext: !!next
+	};
+}, [
+	current,
+	total,
+	show
+]);
+//#endregion
 export { usePagination };

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

@@ -0,0 +1,63 @@
+
+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,107 +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: '',
- * });
- */
+* 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 radioProps = typeof propsOrValue === 'string'
-                ? { value: propsOrValue }
-                : propsOrValue;
-            const { ref: forwardedRef = undefined, value = '', ...rest } = radioProps;
-            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 {
-                ...groupProps,
-                ...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,
-        },
-    };
+	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 @@
+
+import { useEffect } 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,47 +1,32 @@
 'use client';
-import { useRef, useLayoutEffect, useEffect } from 'react';
-
-// Inspired by Sam Selikoff
-// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
-// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+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;
 }
-
+//#endregion
 export { useIsomorphicLayoutEffect, useSynchronizedAnimation };

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

@@ -0,0 +1,21 @@
+
+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

@@ -1,11 +1,16 @@
 'use client';
-import 'react';
-import '@digdir/designsystemet-web';
-export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './roving-focus/roving-focus-item.js';
-export { RovingFocusRoot } from './roving-focus/roving-focus-root.js';
-
-const warn = (message, ...args) => typeof window === 'undefined' ||
-    window.dsWarnings === false ||
-    console.warn(`Designsystemet: ${message}`, ...args);
-
-export { warn };
+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 @@
+
+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 };