@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/cjs/utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js

@@ -1,27 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-
-function useDebounceCallback(callback, delay = 50) {
-    const timeoutRef = react.useRef(null);
-    react.useEffect(() => {
-        // Cleanup the previous timeout on re-render
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const debouncedCallback = (...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = window.setTimeout(() => {
-            callback(...args);
-        }, delay);
-    };
-    return debouncedCallback;
-}
-
-exports.useDebounceCallback = useDebounceCallback;

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

@@ -1,9 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-
-// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

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

@@ -1,49 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var useIsomorphicLayoutEffect = require('../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] = react.useState(() => {
-        if (initializeWithValue) {
-            return getMatches(query);
-        }
-        return defaultValue;
-    });
-    // Handles the change event of the media query.
-    function handleChange() {
-        setMatches(getMatches(query));
-    }
-    useIsomorphicLayoutEffect.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;
-}
-
-exports.useMediaQuery = useMediaQuery;

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

@@ -1,135 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('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] = react.useState(value);
-    const namedId = react.useId();
-    const errorId = react.useId();
-    const checkboxRefs = react.useRef(new Set());
-    const indeterminateRefs = react.useRef(new Set());
-    const inputRefs = react.useRef(new Map());
-    const getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
-    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
-    react.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,
-        },
-    };
-}
-
-exports.useCheckboxGroup = useCheckboxGroup;

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

@@ -1,57 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('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 = react.useRef(undefined);
-    const refEffect = react.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 react.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);
-}
-
-exports.useMergeRefs = useMergeRefs;

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

@@ -1,83 +0,0 @@
-'use client';
-'use strict';
-
-var designsystemetWeb = require('@digdir/designsystemet-web');
-var react = require('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, }) => react.useMemo(() => {
-    const { next, prev, pages } = designsystemetWeb.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]);
-
-exports.usePagination = usePagination;

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

@@ -1,109 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('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] = react.useState(initialValue);
-    const errorId = react.useId();
-    const namedId = react.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,
-        },
-    };
-}
-
-exports.useRadioGroup = useRadioGroup;

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

@@ -1,50 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('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' ? react.useLayoutEffect : react.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 = react.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;
-}
-
-exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
-exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/utilities/index.js

@@ -1,17 +0,0 @@
-'use client';
-'use strict';
-
-require('react');
-require('@digdir/designsystemet-web');
-var rovingFocusItem = require('./roving-focus/roving-focus-item.js');
-var rovingFocusRoot = require('./roving-focus/roving-focus-root.js');
-
-const warn = (message, ...args) => typeof window === 'undefined' ||
-    window.dsWarnings === false ||
-    console.warn(`Designsystemet: ${message}`, ...args);
-
-exports.RovingFocusItem = rovingFocusItem.RovingFocusItem;
-exports.getNextFocusableValue = rovingFocusItem.getNextFocusableValue;
-exports.getPrevFocusableValue = rovingFocusItem.getPrevFocusableValue;
-exports.RovingFocusRoot = rovingFocusRoot.RovingFocusRoot;
-exports.warn = warn;

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

@@ -1,74 +0,0 @@
-'use client';
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-var react = require('react');
-var useMergeRefs = require('../hooks/use-merge-refs/use-merge-refs.js');
-require('@digdir/designsystemet-web');
-var useRovingFocus = require('./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 = react.forwardRef(({ value, asChild, ...rest }, ref) => {
-    const Component = asChild ? reactSlot.Slot : 'div';
-    const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.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.useMergeRefs([ref, rovingProps.ref]);
-    return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
-});
-
-exports.RovingFocusItem = RovingFocusItem;
-exports.getNextFocusableValue = getNextFocusableValue;
-exports.getPrevFocusableValue = getPrevFocusableValue;