@digdir/designsystemet-react 1.0.0-next.43 → 1.0.0-next.45

package/dist/esm/components/Pagination/usePagination.js

@@ -26,15 +26,15 @@ const usePagination = ({ currentPage = 1, setCurrentPage, onChange, totalPages,
     return {
         /** Number of steps */
         pages: getSteps(currentPage, totalPages, showPages).map((page, index) => ({
-            page: page || '',
+            page: page || 'ellipsis',
             itemKey: page ? `page-${page}` : `ellipsis-${index}`, // React key utility
-            buttonProps: {
-                'aria-current': page === currentPage ? 'page' : undefined,
-                'aria-hidden': !page || undefined, // Hide ellipsis from screen reader
-                onClick: handleClick(page),
-                tabIndex: page ? undefined : -1, // Hide ellipsis keyboard
-                variant: page === currentPage ? 'primary' : 'tertiary',
-            },
+            buttonProps: (page
+                ? {
+                    'aria-current': page === currentPage ? 'page' : undefined,
+                    onClick: handleClick(page),
+                    variant: page === currentPage ? 'primary' : 'tertiary',
+                }
+                : null),
         })),
         /** Properties to spread on Pagination.Button used for previous naviagation */
         prevButtonProps: {

package/dist/esm/components/Popover/PopoverTrigger.js

@@ -5,10 +5,14 @@ import { forwardRef, useContext } from 'react';
 import { Button } from '../Button/Button.js';
 import { Context } from './PopoverTriggerContext.js';
 
-const PopoverTrigger = forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
+const PopoverTrigger = forwardRef(function PopoverTrigger({ id, inline, asChild, ...rest }, ref) {
     const { popoverId } = useContext(Context);
-    const Component = asChild ? Slot : Button;
-    return jsx(Component, { ref: ref, popovertarget: popoverId, ...rest });
+    const Component = asChild ? Slot : inline ? 'button' : Button;
+    return (jsx(Component, { ref: ref, popovertarget: popoverId, ...(inline
+            ? {
+                'data-popover': 'inline',
+            }
+            : {}), ...rest }));
 });
 
 export { PopoverTrigger };

package/dist/esm/components/Table/TableHeaderCell.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
 const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
-    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? (jsx("button", { type: 'button', className: 'ds-focus', children: children })) : (children) }));
+    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? jsx("button", { type: 'button', children: children }) : children }));
 });
 
 export { TableHeaderCell };

package/dist/esm/components/Tag/Tag.js

@@ -6,10 +6,10 @@ import { forwardRef } from 'react';
 /**
  * Use `Tag` to display a small piece of information.
  * @example
- * <Tag color='success'>Success</Tag>
+ * <Tag>Success</Tag>
  */
-const Tag = forwardRef(function Tag({ color = 'neutral', className, ...rest }, ref) {
-    return (jsx("span", { className: cl('ds-tag', className), "data-color": color, ref: ref, ...rest }));
+const Tag = forwardRef(function Tag({ className, ...rest }, ref) {
+    return jsx("span", { className: cl('ds-tag', className), ref: ref, ...rest });
 });
 
 export { Tag };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
-import { useFloating, autoUpdate, offset, flip, shift, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingPortal } from '@floating-ui/react';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { forwardRef, useState, Fragment } from 'react';
+import { forwardRef, useId, useState, useRef, useEffect, Fragment } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 
 /**
  * Tooltip component that displays a small piece of information when hovering or focusing on an element.
@@ -17,46 +18,61 @@ import { forwardRef, useState, Fragment } from 'react';
  *  Hover me
  * </Tooltip>
  */
-const Tooltip = forwardRef(function Tooltip({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const internalOpen = userOpen ?? isOpen;
-    const Container = portal ? FloatingPortal : Fragment;
-    const { refs, floatingStyles, context } = useFloating({
-        open: internalOpen,
-        onOpenChange: setIsOpen,
-        placement,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset((data) => {
-                // get pseudo element arrow size
-                const styles = getComputedStyle(data.elements.floating, '::before');
-                return parseFloat(styles.height);
-            }),
-            flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            shift(),
-            arrowPseudoElement,
-        ],
-    });
-    const { styles: animationStyles } = useTransitionStyles(context, {
-        initial: {
-            opacity: 0,
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([
-        // Event listeners to change the open state
-        useHover(context, { move: false, delay }),
-        useFocus(context),
-        useDismiss(context),
-        useRole(context, { role: 'tooltip' }),
-    ]);
-    const mergedRef = useMergeRefs([ref, refs.setFloating]);
-    const childMergedRef = useMergeRefs([
-        children
-            .ref,
-        refs.setReference,
-    ]);
+const Tooltip = forwardRef(function Tooltip({ id, children, content, placement = 'top', open, className, ...rest }, ref) {
+    const randomTooltipId = useId();
+    const [internalOpen, setInternalOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const mergedRefs = useMergeRefs([tooltipRef, ref]);
+    const controlledOpen = open ?? internalOpen;
+    const setOpen = () => {
+        setInternalOpen(true);
+    };
+    const setClose = () => {
+        setInternalOpen(false);
+    };
+    // Position with floating-ui
+    useEffect(() => {
+        const tooltip = tooltipRef.current;
+        const trigger = triggerRef.current;
+        tooltip?.togglePopover?.(controlledOpen);
+        if (tooltip)
+            tooltip.style.opacity = controlledOpen ? '1' : '0';
+        if (tooltip && trigger && controlledOpen) {
+            return autoUpdate(trigger, tooltip, () => {
+                computePosition(trigger, tooltip, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset((data) => {
+                            // get pseudo element arrow size
+                            const styles = getComputedStyle(data.elements.floating, '::before');
+                            return parseFloat(styles.height);
+                        }),
+                        flip({
+                            fallbackAxisSideDirection: 'start',
+                        }),
+                        shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    tooltip.style.translate = `${x}px ${y}px`;
+                });
+            });
+        }
+    }, [controlledOpen, placement]);
+    /* Add listener for ESC to dismiss */
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setInternalOpen(false);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
     /* If children is only a string, make a span */
     const ChildContainer = typeof children === 'string' ? 'span' : Slot;
     /* Make sure it is valid */
@@ -64,13 +80,12 @@ const Tooltip = forwardRef(function Tooltip({ children, content, placement = 'to
         console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ...getReferenceProps({
-                    ref: childMergedRef,
-                }), children: children }), internalOpen && (jsx(Container, { children: jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                        className: cl('ds-tooltip', className),
-                        ref: mergedRef,
-                        ...rest,
-                    }), children: content }) }))] }));
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, popovertarget: id ?? randomTooltipId, 
+                // We set this to not close on click, since it should always show on hover
+                // @ts-ignore @types/react-dom does not understand popovertargetaction yet
+                popovertargetaction: 'show', onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("div", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, 
+                // @ts-ignore @types/react-dom does not understand popover yet
+                popover: 'manual', ...rest, children: content })] }));
 });
 const arrowPseudoElement = {
     name: 'ArrowPseudoElement',
@@ -92,8 +107,8 @@ const arrowPseudoElement = {
                 arrowX = '100%';
                 break;
         }
-        elements.floating.style.setProperty('--ds-tooltip-arrow-x', arrowX);
-        elements.floating.style.setProperty('--ds-tooltip-arrow-y', arrowY);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
         return data;
     },
 };

package/dist/esm/index.js

@@ -1,10 +1,4 @@
 'use client';
-export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
-export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
-export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
-export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
-export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';
-export { omit } from './utilities/omit/omit.js';
 export { Avatar } from './components/Avatar/Avatar.js';
 export { Button } from './components/Button/Button.js';
 export { Badge } from './components/Badge/index.js';
@@ -95,3 +89,14 @@ export { ErrorSummary } from './components/ErrorSummary/index.js';
 export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
 export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';
 export { ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { omit } from './utilities/omit/omit.js';
+export { useCheckboxGroup } from './utilities/hooks/useCheckboxGroup/useCheckboxGroup.js';
+export { useDebounceCallback } from './utilities/hooks/useDebounceCallback/useDebounceCallback.js';
+export { useIsomorphicLayoutEffect } from './utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+export { useMediaQuery } from './utilities/hooks/useMediaQuery/useMediaQuery.js';
+export { usePrevious } from './utilities/hooks/usePrevious/usePrevious.js';
+export { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
+export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { RovingFocusRoot } from './utilities/RovingFocus/RovingFocusRoot.js';
+export { useRovingFocus } from './utilities/RovingFocus/useRovingFocus.js';
+export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue } from './utilities/RovingFocus/RovingFocusItem.js';

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

@@ -0,0 +1,119 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+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 getInputs = (checked) => Array.from(checkboxRefs.current.values()).filter((input) => input.checked === checked);
+    const getIndeterminateInputs = () => Array.from(indeterminateRefs.current.values());
+    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) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue || {};
+            const { allowIndeterminate = false, ref = undefined, value = '', ...rest } = props;
+            const inputRef = useRef(null);
+            const mergedRefs = useMergeRefs([ref, inputRef]);
+            const handleChange = () => {
+                const nextGroupValue = Array.from(getInputs(true), ({ value }) => value);
+                setGroupValue(nextGroupValue);
+                onChange?.(nextGroupValue, groupValue);
+            };
+            const indeterminateChange = () => {
+                if (!inputRef.current)
+                    return;
+                const checked = !!inputRef.current.checked;
+                for (const input of getInputs(!checked)) {
+                    /* We use click to send both event and change checked state */
+                    input.click();
+                }
+            };
+            useEffect(() => {
+                if (!allowIndeterminate)
+                    return;
+                toggleIndeterminate(getIndeterminateInputs, getInputs);
+            }, [groupValue]);
+            useEffect(() => {
+                if (!inputRef.current)
+                    return;
+                const input = inputRef.current;
+                const refs = allowIndeterminate ? indeterminateRefs : checkboxRefs;
+                refs.current.add(input);
+                if (getIndeterminateInputs().length)
+                    toggleIndeterminate(getIndeterminateInputs, getInputs);
+                return () => {
+                    refs.current.delete(input);
+                };
+            }, [value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                '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: mergedRefs,
+                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/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,47 @@
+'use client';
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.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/usePrevious/usePrevious.js

@@ -0,0 +1,12 @@
+'use client';
+import { useRef, useEffect } from 'react';
+
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
+export { usePrevious };

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

@@ -0,0 +1,97 @@
+'use client';
+import { useMergeRefs } from '@floating-ui/react';
+import { useState, useId, useRef, useEffect } 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({ error, readOnly, required, disabled, name, onChange, value: initalValue = '', } = {}) {
+    const [groupValue, setGroupValue] = useState(initalValue);
+    const errorId = useId();
+    const namedId = useId();
+    const radioGroupName = name || namedId;
+    return {
+        /**
+         * Current value of the group.
+         */
+        value: groupValue,
+        /**
+         * Set the value of the group.
+         *
+         * @param value string[]
+         * @returns void
+         */
+        setValue: setGroupValue,
+        /**
+         * Props to send to the `Radio` component.
+         * @example
+         * <Radio label="Option 1" {...getRadioProps('option-1')} />
+         */
+        getRadioProps: (propsOrValue) => {
+            const props = typeof propsOrValue === 'string'
+                ? { value: propsOrValue }
+                : propsOrValue;
+            const { ref = undefined, value = '', ...rest } = props;
+            const localRef = useRef(null);
+            const mergedRefs = useMergeRefs([ref, localRef]);
+            const handleChange = () => {
+                const input = localRef.current;
+                const isInput = input instanceof HTMLInputElement;
+                if (isInput && input.name === radioGroupName) {
+                    setGroupValue((prevValue) => {
+                        onChange?.(input.value, prevValue);
+                        return input.value;
+                    });
+                }
+            };
+            useEffect(() => {
+                if (!localRef.current)
+                    return;
+                localRef.current.checked = value === groupValue;
+            }, [groupValue, value]);
+            return {
+                /* Spread anything the user has set first */
+                ...rest,
+                /* Concat ours with the user prop */
+                name: radioGroupName,
+                'aria-describedby': `${error ? errorId : ''} ${rest['aria-describedby'] || ''}`.trim() ||
+                    undefined,
+                'aria-invalid': !!error || rest['aria-invalid'],
+                value,
+                ref: mergedRefs,
+                required: required || rest.required,
+                readOnly: readOnly || rest.readOnly,
+                disabled: disabled || rest.disabled,
+                onChange: (e) => {
+                    rest.onChange?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    handleChange();
+                },
+            };
+        },
+        /**
+         * Props to send to the `ValidationMessage` component.
+         *
+         * @example
+         * <ValidationMessage {...validationMessageProps} />
+         */
+        validationMessageProps: {
+            children: error,
+            hidden: !error,
+            id: errorId,
+        },
+    };
+}
+
+export { useRadioGroup };