@digdir/designsystemet-react 0.0.0-ci-snapshot-release-pr-comment-20260612060845

package/dist/esm/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js

@@ -0,0 +1,7 @@
+'use client';
+import { useLayoutEffect, useEffect } from 'react';
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

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

@@ -0,0 +1,47 @@
+'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;
+}
+
+export { useMediaQuery };

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

@@ -0,0 +1,133 @@
+'use client';
+import { useState, useId, useRef, useEffect } from 'react';
+
+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;
+    }
+};
+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,
+        },
+    };
+}
+
+export { useCheckboxGroup };

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

@@ -0,0 +1,55 @@
+'use client';
+import { useRef, useCallback, useMemo } from 'react';
+
+// https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/hooks/useMergeRefs.ts
+/**
+ * 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);
+}
+
+export { useMergeRefs };

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

@@ -0,0 +1,81 @@
+'use client';
+import { pagination } from '@digdir/designsystemet-web';
+import { useMemo } from 'react';
+
+/**
+ * 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]);
+
+export { usePagination };

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

@@ -0,0 +1,107 @@
+'use client';
+import { useState, useId } from 'react';
+
+/**
+ * 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,
+        },
+    };
+}
+
+export { useRadioGroup };

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

@@ -0,0 +1,47 @@
+'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;
+/**
+ * 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;
+}
+
+export { useIsomorphicLayoutEffect, useSynchronizedAnimation };

package/dist/esm/utilities/index.js

@@ -0,0 +1,11 @@
+'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 };

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

@@ -0,0 +1,70 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+import { useRovingFocus } from './use-roving-focus.js';
+
+/** 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);
+}
+/** 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);
+}
+/** @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 }));
+});
+
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue };

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { createContext, forwardRef, useState, useRef, useEffect } from 'react';
+import { warn } from '../index.js';
+import { useMergeRefs } from '../hooks/use-merge-refs/use-merge-refs.js';
+import '@digdir/designsystemet-web';
+
+const RovingFocusContext = createContext({
+    elements: { current: new Map() },
+    getOrderedItems: () => [],
+    setFocusableValue: () => {
+        /* intentionally empty */
+    },
+    onShiftTab: () => {
+        /* intentionally empty */
+    },
+    focusableValue: null,
+    orientation: 'horizontal',
+});
+/** @deprecated RovingFocusRoot is deprecated. */
+const RovingFocusRoot = forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'div';
+    const activeValueOrNull = activeValue ?? null;
+    const [focusableValue, setFocusableValue] = useState(activeValueOrNull);
+    const [isShiftTabbing, setIsShiftTabbing] = useState(false);
+    const elements = useRef(new Map());
+    const myRef = useRef(null);
+    const refs = useMergeRefs([ref, myRef]);
+    const getOrderedItems = () => {
+        if (!myRef.current)
+            return [];
+        const elementsFromDOM = Array.from(myRef.current.querySelectorAll('[data-roving-tabindex-item]'));
+        return Array.from(elements.current)
+            .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
+            .map(([value, element]) => ({ value, element }));
+    };
+    useEffect(() => {
+        setFocusableValue(activeValueOrNull);
+    }, [activeValueOrNull]);
+    warn('RovingFocusRoot is deprecated.');
+    return (jsx(RovingFocusContext.Provider, { value: {
+            elements,
+            getOrderedItems,
+            focusableValue,
+            setFocusableValue,
+            onShiftTab: () => {
+                setIsShiftTabbing(true);
+            },
+            orientation,
+        }, children: jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
+                onBlur?.(e);
+                setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
+            }, onFocus: (e) => {
+                onFocus?.(e);
+                if (e.target !== e.currentTarget)
+                    return;
+                const orderedItems = getOrderedItems();
+                if (orderedItems.length === 0)
+                    return;
+                if (focusableValue != null) {
+                    elements.current.get(focusableValue)?.focus();
+                }
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
+                }
+                else {
+                    orderedItems.at(0)?.element.focus();
+                }
+            }, ref: refs }) }));
+});
+
+export { RovingFocusContext, RovingFocusRoot };

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

@@ -0,0 +1,43 @@
+'use client';
+import { useContext } from 'react';
+import { RovingFocusContext } from './roving-focus-root.js';
+
+// Logic from: https://www.joshuawootonn.com/react-roving-tabindex
+// Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
+/**
+@deprecated useRovingFocus is deprecated.
+Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = useContext(RovingFocusContext);
+    return {
+        getOrderedItems,
+        isFocusable: focusableValue === value,
+        orientation,
+        getRovingProps: (props) => ({
+            ...props,
+            ref: (element) => {
+                if (element) {
+                    elements.current.set(value, element);
+                }
+                else {
+                    elements.current.delete(value);
+                }
+            },
+            onKeyDown: (e) => {
+                props?.onKeyDown?.(e);
+                if (e.shiftKey && e.key === 'Tab') {
+                    onShiftTab();
+                    return;
+                }
+            },
+            onFocus: (e) => {
+                props?.onFocus?.(e);
+                setFocusableValue(value);
+            },
+            'data-roving-tabindex-item': true,
+            tabIndex: focusableValue === value ? 0 : -1,
+        }),
+    };
+};
+
+export { useRovingFocus };