@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/esm/utilities/hooks/deprecated/use-media-query/use-media-query.js

@@ -1,47 +1,31 @@
 'use client';
-import { useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect/use-isomorphic-layout-effect.js';
-
-// from https://usehooks-ts.com/react-hook/use-media-query
-const IS_SERVER = typeof window === 'undefined';
-function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
-    const getMatches = (query) => {
-        if (IS_SERVER) {
-            return defaultValue;
-        }
-        return window.matchMedia(query).matches;
-    };
-    const [matches, setMatches] = useState(() => {
-        if (initializeWithValue) {
-            return getMatches(query);
-        }
-        return defaultValue;
-    });
-    // Handles the change event of the media query.
-    function handleChange() {
-        setMatches(getMatches(query));
-    }
-    useIsomorphicLayoutEffect(() => {
-        const matchMedia = window.matchMedia(query);
-        // Triggered at the first client-side load and if query changes
-        handleChange();
-        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-        if (matchMedia.addListener) {
-            matchMedia.addListener(handleChange);
-        }
-        else {
-            matchMedia.addEventListener('change', handleChange);
-        }
-        return () => {
-            if (matchMedia.removeListener) {
-                matchMedia.removeListener(handleChange);
-            }
-            else {
-                matchMedia.removeEventListener('change', handleChange);
-            }
-        };
-    }, [query]);
-    return matches;
+import { useIsomorphicLayoutEffect } from "../use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { useState } from "react";
+//#region src/utilities/hooks/deprecated/use-media-query/use-media-query.ts
+const IS_SERVER = typeof window === "undefined";
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true } = {}) {
+	const getMatches = (query) => {
+		if (IS_SERVER) return defaultValue;
+		return window.matchMedia(query).matches;
+	};
+	const [matches, setMatches] = useState(() => {
+		if (initializeWithValue) return getMatches(query);
+		return defaultValue;
+	});
+	function handleChange() {
+		setMatches(getMatches(query));
+	}
+	useIsomorphicLayoutEffect(() => {
+		const matchMedia = window.matchMedia(query);
+		handleChange();
+		if (matchMedia.addListener) matchMedia.addListener(handleChange);
+		else matchMedia.addEventListener("change", handleChange);
+		return () => {
+			if (matchMedia.removeListener) matchMedia.removeListener(handleChange);
+			else matchMedia.removeEventListener("change", handleChange);
+		};
+	}, [query]);
+	return matches;
 }
-
+//#endregion
 export { useMediaQuery };

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

@@ -0,0 +1,10 @@
+
+import { useDebounceCallback } from "./deprecated/use-debounce-callback/use-debounce-callback.js";
+import { useIsomorphicLayoutEffect } from "./deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { useMediaQuery } from "./deprecated/use-media-query/use-media-query.js";
+import { UseCheckboxGroupProps, useCheckboxGroup } from "./use-checkbox-group/use-checkbox-group.js";
+import "./use-merge-refs/use-merge-refs.js";
+import { UsePaginationProps, usePagination } from "./use-pagination/use-pagination.js";
+import { UseRadioGroupProps, useRadioGroup } from "./use-radio-group/use-radio-group.js";
+import { useSynchronizedAnimation } from "./use-synchronized-animation/use-synchronized-animation.js";
+export { type UseCheckboxGroupProps, type UsePaginationProps, type UseRadioGroupProps, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation };

package/dist/esm/utilities/hooks/index.js

@@ -0,0 +1,10 @@
+'use client';
+import { useDebounceCallback } from "./deprecated/use-debounce-callback/use-debounce-callback.js";
+import { useIsomorphicLayoutEffect } from "./deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
+import { useMediaQuery } from "./deprecated/use-media-query/use-media-query.js";
+import { useCheckboxGroup } from "./use-checkbox-group/use-checkbox-group.js";
+import { useMergeRefs } from "./use-merge-refs/use-merge-refs.js";
+import { usePagination } from "./use-pagination/use-pagination.js";
+import { useRadioGroup } from "./use-radio-group/use-radio-group.js";
+import { useSynchronizedAnimation } from "./use-synchronized-animation/use-synchronized-animation.js";
+export { useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, useMergeRefs, usePagination, useRadioGroup, useSynchronizedAnimation };

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

@@ -0,0 +1,71 @@
+
+import { CheckboxProps } from "../../../components/checkbox/checkbox.js";
+import "../../../components/index.js";
+import { Dispatch, ForwardedRef, ReactNode, SetStateAction } from "react";
+//#region src/utilities/hooks/use-checkbox-group/use-checkbox-group.d.ts
+type UseCheckboxGroupProps = {
+  /**
+   * Disables all checkboxes in the group.
+   */
+  disabled?: boolean;
+  /**
+   * Error message for the group.
+   * If set, all checkboxes will have `aria-invalid` set to `true`.
+   */
+  error?: ReactNode;
+  /**
+   * Name of the group.
+   * If not set, a random id will be generated.
+   */
+  name?: string;
+  /**
+   * Makes all checkboxes in the group read-only.
+   * If set, all checkboxes will have `aria-readonly` set to `true`.
+   */
+  readOnly?: boolean;
+  /**
+   * Initial value of the group
+   * @default []
+   */
+  value?: string[];
+  /**
+   * Makes all checkboxes in the group required.
+   * If set, all checkboxes will have `required` set to `true`.
+   */
+  required?: boolean;
+  /**
+   * Callback that is called when the value of the group changes.
+   * @param nextValue string[]
+   * @param currentValue string[]
+   * @returns void
+   */
+  onChange?: (nextValue: string[], currentValue: string[]) => void;
+  /**
+   * If outline, all checkboxes in the group will have a border
+   */
+  variant?: CheckboxProps['variant'];
+};
+/**
+ * Get anything that is set on a checkbox, but
+ * remove anything that comes from the group itself.
+ */
+type GetCheckboxProps = Omit<CheckboxProps, 'prefix' | 'role' | 'type' | 'size' | 'aria-label' | 'aria-labelledby' | 'label' | 'checked' | 'value'> & {
+  /** Enables indeterminate handling for this `Checkbox` and `CheckboxGroup` */
+  allowIndeterminate?: boolean;
+  ref?: ForwardedRef<HTMLInputElement>;
+  checked?: boolean;
+  value?: string;
+};
+type useCheckboxGroupReturn = {
+  value: string[];
+  setValue: Dispatch<SetStateAction<string[]>>;
+  getCheckboxProps: (propsOrValue?: string | GetCheckboxProps) => GetCheckboxProps;
+  validationMessageProps: {
+    children: ReactNode;
+    hidden: boolean;
+    id: string;
+  };
+};
+declare function useCheckboxGroup(props?: UseCheckboxGroupProps): useCheckboxGroupReturn;
+//#endregion
+export { GetCheckboxProps, UseCheckboxGroupProps, useCheckboxGroup };

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

@@ -1,133 +1,115 @@
 'use client';
-import { useState, useId, useRef, useEffect } from 'react';
-
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/utilities/hooks/use-checkbox-group/use-checkbox-group.ts
 const toggleIndeterminate = (getIndeterminateInputs, getInputs) => {
-    const inputs = getIndeterminateInputs();
-    const checked = !!getInputs(true).length;
-    const unchecked = !!getInputs(false).length;
-    for (const input of inputs) {
-        input.indeterminate = unchecked && checked;
-        input.checked = !unchecked && checked;
-    }
+	const inputs = getIndeterminateInputs();
+	const checked = !!getInputs(true).length;
+	const unchecked = !!getInputs(false).length;
+	for (const input of inputs) {
+		input.indeterminate = unchecked && checked;
+		input.checked = !unchecked && checked;
+	}
 };
 function useCheckboxGroup(props) {
-    const { error, name: groupName, onChange, value = [], disabled, readOnly, required, } = props || {};
-    const [groupValue, setGroupValue] = useState(value);
-    const namedId = useId();
-    const errorId = useId();
-    const checkboxRefs = useRef(new Set());
-    const indeterminateRefs = useRef(new Set());
-    const inputRefs = useRef(new Map());
-    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
-    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
-    useEffect(() => {
-        toggleIndeterminate(getIndeterminateInputs, getInputs);
-    }, [groupValue]);
-    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 `Checkbox` component.
-         * Accepts value or object
-         * @example
-         * <Checkbox {...getCheckboxProps('value')} />
-         *
-         * @example allow indeterminate
-         * <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
-         */
-        getCheckboxProps: (propsOrValue) => {
-            let groupProps;
-            if (props) {
-                const { onChange, error, ...rest } = props;
-                groupProps = rest;
-            }
-            const checkboxProps = typeof propsOrValue === 'string'
-                ? { value: propsOrValue }
-                : propsOrValue || {};
-            const { allowIndeterminate = false, ref: forwardedRef = undefined, value = '', ...rest } = checkboxProps;
-            const handleRef = (element) => {
-                if (element) {
-                    const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
-                    refs.current.add(element);
-                    inputRefs.current.set(value, element);
-                    if (getIndeterminateInputs().length) {
-                        toggleIndeterminate(getIndeterminateInputs, getInputs);
-                    }
-                }
-                else {
-                    const oldElement = inputRefs.current.get(value);
-                    if (oldElement) {
-                        checkboxRefs.current.delete(oldElement);
-                        indeterminateRefs.current.delete(oldElement);
-                        inputRefs.current.delete(value);
-                    }
-                }
-                if (forwardedRef) {
-                    if (typeof forwardedRef === 'function') {
-                        forwardedRef(element);
-                    }
-                    else {
-                        forwardedRef.current = element;
-                    }
-                }
-            };
-            const handleChange = () => {
-                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
-                setGroupValue(nextGroupValue);
-                onChange?.(nextGroupValue, groupValue);
-            };
-            const indeterminateChange = () => {
-                const element = inputRefs.current.get(value);
-                if (!element)
-                    return;
-                const checked = !!element.checked;
-                for (const input of getInputs(!checked)) {
-                    input.click();
-                }
-            };
-            return {
-                ...groupProps,
-                ...rest,
-                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
-                    undefined,
-                'aria-invalid': !!error || rest['aria-invalid'],
-                checked: allowIndeterminate ? undefined : groupValue.includes(value),
-                name: rest.name || groupName || namedId,
-                onChange: (e) => {
-                    rest.onChange?.(e);
-                    if (e.defaultPrevented)
-                        return;
-                    allowIndeterminate && indeterminateChange();
-                    handleChange();
-                },
-                ref: handleRef,
-                value,
-                disabled: disabled || rest.disabled,
-                readOnly: readOnly || rest.readOnly,
-                required: required || rest.required,
-            };
-        },
-        /**
-         * Props to send to the `ValidationMessage` component.
-         *
-         * @example
-         * <ValidationMessage {...validationMessageProps} />
-         */
-        validationMessageProps: {
-            children: error,
-            hidden: !error,
-            id: errorId,
-        },
-    };
+	const { error, name: groupName, onChange, value = [], disabled, readOnly, required } = props || {};
+	const [groupValue, setGroupValue] = useState(value);
+	const namedId = useId();
+	const errorId = useId();
+	const checkboxRefs = useRef(/* @__PURE__ */ new Set());
+	const indeterminateRefs = useRef(/* @__PURE__ */ new Set());
+	const inputRefs = useRef(/* @__PURE__ */ new Map());
+	const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+	const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+	useEffect(() => {
+		toggleIndeterminate(getIndeterminateInputs, getInputs);
+	}, [groupValue]);
+	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 `Checkbox` component.
+		* Accepts value or object
+		* @example
+		* <Checkbox {...getCheckboxProps('value')} />
+		*
+		* @example allow indeterminate
+		* <Checkbox {...getCheckboxProps({ value: 'all', allowIndeterminate: true })} />
+		*/
+		getCheckboxProps: (propsOrValue) => {
+			let groupProps;
+			if (props) {
+				const { onChange, error, ...rest } = props;
+				groupProps = rest;
+			}
+			const { allowIndeterminate = false, ref: forwardedRef = void 0, value = "", ...rest } = typeof propsOrValue === "string" ? { value: propsOrValue } : propsOrValue || {};
+			const handleRef = (element) => {
+				if (element) {
+					(allowIndeterminate ? indeterminateRefs : checkboxRefs).current.add(element);
+					inputRefs.current.set(value, element);
+					if (getIndeterminateInputs().length) toggleIndeterminate(getIndeterminateInputs, getInputs);
+				} else {
+					const oldElement = inputRefs.current.get(value);
+					if (oldElement) {
+						checkboxRefs.current.delete(oldElement);
+						indeterminateRefs.current.delete(oldElement);
+						inputRefs.current.delete(value);
+					}
+				}
+				if (forwardedRef) if (typeof forwardedRef === "function") forwardedRef(element);
+				else forwardedRef.current = element;
+			};
+			const handleChange = () => {
+				const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+				setGroupValue(nextGroupValue);
+				onChange?.(nextGroupValue, groupValue);
+			};
+			const indeterminateChange = () => {
+				const element = inputRefs.current.get(value);
+				if (!element) return;
+				const checked = !!element.checked;
+				for (const input of getInputs(!checked)) input.click();
+			};
+			return {
+				...groupProps,
+				...rest,
+				"aria-describedby": `${error ? errorId : ""} ${rest["aria-describedby"] || ""}`.trim() || void 0,
+				"aria-invalid": !!error || rest["aria-invalid"],
+				checked: allowIndeterminate ? void 0 : groupValue.includes(value),
+				name: rest.name || groupName || namedId,
+				onChange: (e) => {
+					rest.onChange?.(e);
+					if (e.defaultPrevented) return;
+					allowIndeterminate && indeterminateChange();
+					handleChange();
+				},
+				ref: handleRef,
+				value,
+				disabled: disabled || rest.disabled,
+				readOnly: readOnly || rest.readOnly,
+				required: required || rest.required
+			};
+		},
+		/**
+		* Props to send to the `ValidationMessage` component.
+		*
+		* @example
+		* <ValidationMessage {...validationMessageProps} />
+		*/
+		validationMessageProps: {
+			children: error,
+			hidden: !error,
+			id: errorId
+		}
+	};
 }
-
+//#endregion
 export { useCheckboxGroup };

package/dist/esm/utilities/hooks/use-merge-refs/use-merge-refs.d.ts

@@ -0,0 +1,2 @@
+
+import "react";

package/dist/esm/utilities/hooks/use-merge-refs/use-merge-refs.js

@@ -1,55 +1,40 @@
 'use client';
-import { useRef, useCallback, useMemo } from 'react';
-
-// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
+import { useCallback, useMemo, useRef } from "react";
+//#region src/utilities/hooks/use-merge-refs/use-merge-refs.ts
 /**
- * Merges an array of refs into a single memoized callback ref or `null`.
- */
+* Merges an array of refs into a single memoized callback ref or `null`.
+*/
 function useMergeRefs(refs) {
-    const cleanupRef = useRef(undefined);
-    const refEffect = useCallback((instance) => {
-        const cleanups = refs.map((ref) => {
-            if (ref == null) {
-                return null;
-            }
-            if (typeof ref === 'function') {
-                const refCallback = ref;
-                // biome-ignore lint/suspicious/noConfusingVoidType: @types-react wants `void` here
-                const refCleanup = refCallback(instance);
-                return typeof refCleanup === 'function'
-                    ? refCleanup
-                    : () => {
-                        refCallback(null);
-                    };
-            }
-            ref.current = instance;
-            return () => {
-                ref.current = null;
-            };
-        });
-        return () => {
-            for (const refCleanup of cleanups) {
-                refCleanup?.();
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, refs);
-    return useMemo(() => {
-        if (refs.every((ref) => ref == null)) {
-            return null;
-        }
-        return (value) => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = undefined;
-            }
-            if (value != null) {
-                cleanupRef.current =
-                    refEffect(value);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, refs);
+	const cleanupRef = useRef(void 0);
+	const refEffect = useCallback((instance) => {
+		const cleanups = refs.map((ref) => {
+			if (ref == null) return null;
+			if (typeof ref === "function") {
+				const refCallback = ref;
+				const refCleanup = refCallback(instance);
+				return typeof refCleanup === "function" ? refCleanup : () => {
+					refCallback(null);
+				};
+			}
+			ref.current = instance;
+			return () => {
+				ref.current = null;
+			};
+		});
+		return () => {
+			for (const refCleanup of cleanups) refCleanup?.();
+		};
+	}, refs);
+	return useMemo(() => {
+		if (refs.every((ref) => ref == null)) return null;
+		return (value) => {
+			if (cleanupRef.current) {
+				cleanupRef.current();
+				cleanupRef.current = void 0;
+			}
+			if (value != null) cleanupRef.current = refEffect(value);
+		};
+	}, refs);
 }
-
+//#endregion
 export { useMergeRefs };

package/dist/esm/utilities/hooks/use-pagination/use-pagination.d.ts

@@ -0,0 +1,86 @@
+
+import { PaginationButtonProps } from "../../../components/pagination/pagination-button.js";
+import "../../../components/index.js";
+import { MouseEvent } from "react";
+//#region src/utilities/hooks/use-pagination/use-pagination.d.ts
+type UsePaginationProps = {
+  /**
+   * The current page number
+   * @default 1
+   */
+  currentPage: number;
+  /**
+   * The total number of pages
+   * @default 1
+   */
+  totalPages: number;
+  /**
+   * The maximum number of pages to show
+   * @default 7
+   */
+  showPages?: number;
+  /**
+   * Callback to set the current page
+   */
+  setCurrentPage?: (page: number) => void;
+  /**
+   * Callback when the page changes
+   */
+  onChange?: (event: MouseEvent<HTMLElement>, page: number) => void;
+};
+/**
+ * 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>
+ **/
+declare const usePagination: ({ currentPage: current, setCurrentPage, onChange, totalPages: total, showPages: show }: UsePaginationProps) => {
+  /** Number of steps */
+  pages: {
+    /**
+     * Page number or "ellipsis" for the ellipsis item
+     */
+    page: string | number;
+    /**
+     * Unique key for the item
+     */
+    itemKey: string;
+    /**
+     * Properties to spread on Pagination.Button
+     */
+    buttonProps: PaginationButtonProps | null;
+  }[];
+  /** Properties to spread on Pagination.Button used for previous navigation */
+  prevButtonProps: PaginationButtonProps;
+  /** Properties to spread on Pagination.Button used for next navigation */
+  nextButtonProps: PaginationButtonProps;
+  /** Indication if previous page action should be shown or not */
+  hasPrev: boolean;
+  /** Indication if next page action should be shown or not */
+  hasNext: boolean;
+};
+//#endregion
+export { UsePaginationProps, usePagination };