@digdir/designsystemet-react 1.0.0-rc.9 → 1.0.1

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

@@ -1,68 +1,120 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { forwardRef, useState, cloneElement } from 'react';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
-import { autoUpdate, flip, shift } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
-import { arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, flip, shift } from '@floating-ui/dom';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef, useId, useState, useRef, useEffect, Fragment, version } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const Container = portal ? FloatingPortal : React.Fragment;
-    const arrowRef = React.useRef(null);
-    const internalOpen = userOpen ?? isOpen;
-    const { refs, floatingStyles, context } = useFloating({
-        open: internalOpen,
-        onOpenChange: setIsOpen,
-        placement,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(ARROW_HEIGHT + ARROW_GAP),
-            flip({
-                fallbackAxisSideDirection: 'start',
-            }),
-            shift(),
-            arrow({
-                element: arrowRef,
-            }),
-        ],
-    });
-    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,
-    ]);
-    if (!children ||
-        children?.type === React.Fragment ||
-        children === React.Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+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 */
+    if (typeof children !== 'string' && children.type === Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement that can receive a ref and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
-                ref: childMergedRef,
-            })), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
-                        className: clsx('ds-tooltip', 'ds-paragraph--xs', className),
-                        ref: mergedRef,
-                        ...rest,
-                    }), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'ds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
+    const popoverProps = {
+        [version.startsWith('19') ? 'popoverTarget' : 'popovertarget']: id ?? randomTooltipId,
+        [version.startsWith('19')
+            ? 'popoverTargetAction'
+            : 'popovertargetaction']: 'show',
+    };
+    return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, 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 })] }));
 });
-Tooltip.displayName = 'Tooltip';
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        let arrowX = `${Math.round(rects.reference.width / 2 + rects.reference.x - data.x)}px`;
+        let arrowY = `${Math.round(rects.reference.height / 2 + rects.reference.y - data.y)}px`;
+        switch (placement) {
+            case 'top':
+                arrowY = '100%';
+                break;
+            case 'right':
+                arrowX = '0';
+                break;
+            case 'bottom':
+                arrowY = '0';
+                break;
+            case 'left':
+                arrowX = '100%';
+                break;
+        }
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-x', arrowX);
+        elements.floating.style.setProperty('--dsc-tooltip-arrow-y', arrowY);
+        return data;
+    },
+};
 
 export { Tooltip };

package/dist/esm/components/ValidationMessage/ValidationMessage.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+const ValidationMessage = forwardRef(function ValidationMessage({ className, asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'p';
+    return (jsx(Component, { className: cl('ds-validation-message', className), "data-field": 'validation', ref: ref, ...rest }));
+});
+
+export { ValidationMessage };

package/dist/esm/index.js

@@ -1,90 +1,114 @@
 'use client';
-export { default as ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { Avatar } from './components/Avatar/Avatar.js';
 export { Button } from './components/Button/Button.js';
-export { HelpText } from './components/HelpText/HelpText.js';
+export { Badge } from './components/Badge/index.js';
+export { BadgePosition } from './components/Badge/BadgePosition.js';
+export { Breadcrumbs } from './components/Breadcrumbs/index.js';
+export { BreadcrumbsList } from './components/Breadcrumbs/BreadcrumbsList.js';
+export { BreadcrumbsItem } from './components/Breadcrumbs/BreadcrumbsItem.js';
+export { BreadcrumbsLink } from './components/Breadcrumbs/BreadcrumbsLink.js';
 export { Spinner } from './components/Spinner/Spinner.js';
+export { Skeleton } from './components/Skeleton/Skeleton.js';
 export { Link } from './components/Link/Link.js';
 export { List } from './components/List/index.js';
-export { ListRoot } from './components/List/ListRoot.js';
+export { ListOrdered, ListUnordered } from './components/List/Lists.js';
 export { ListItem } from './components/List/ListItem.js';
-export { ListHeading } from './components/List/ListHeading.js';
-export { Ordered as ListOrdered, Unordered as ListUnordered } from './components/List/Lists.js';
-export { Paragraph } from './components/Typography/Paragraph/Paragraph.js';
-export { Heading } from './components/Typography/Heading/Heading.js';
-export { Ingress } from './components/Typography/Ingress/Ingress.js';
-export { Label } from './components/Typography/Label/Label.js';
-export { ErrorMessage } from './components/Typography/ErrorMessage/ErrorMessage.js';
-export { Accordion } from './components/Accordion/index.js';
-export { AccordionItem } from './components/Accordion/AccordionItem.js';
-export { AccordionContent } from './components/Accordion/AccordionContent.js';
-export { AccordionHeader } from './components/Accordion/AccordionHeader.js';
-export { NativeSelect } from './components/form/NativeSelect/NativeSelect.js';
+export { Label } from './components/Label/Label.js';
+export { Heading } from './components/Heading/Heading.js';
+export { Paragraph } from './components/Paragraph/Paragraph.js';
+export { ValidationMessage } from './components/ValidationMessage/ValidationMessage.js';
+export { Details } from './components/Details/index.js';
+export { DetailsContent } from './components/Details/DetailsContent.js';
+export { DetailsSummary } from './components/Details/DetailsSummary.js';
+export { Select } from './components/Select/index.js';
+export { SelectOption } from './components/Select/SelectOption.js';
+export { SelectOptgroup } from './components/Select/SelectOptgroup.js';
 export { Alert } from './components/Alert/Alert.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/index.js';
-export { Group as ChipGroup } from './components/Chip/Group/Group.js';
-export { RemovableChip as ChipRemovable } from './components/Chip/Removable/Removable.js';
-export { ToggleChip as ChipToggle } from './components/Chip/Toggle/Toggle.js';
-export { usePagination } from './components/Pagination/usePagination.js';
+export { ChipButton, ChipCheckbox, ChipRadio, ChipRemovable } from './components/Chip/Chips.js';
 export { Pagination } from './components/Pagination/index.js';
-export { default as PaginationRoot } from './components/Pagination/PaginationRoot.js';
-export { PaginationContent } from './components/Pagination/PaginationContent.js';
-export { default as PaginationItem } from './components/Pagination/PaginationItem.js';
+export { PaginationList } from './components/Pagination/PaginationList.js';
+export { PaginationItem } from './components/Pagination/PaginationItem.js';
 export { PaginationButton } from './components/Pagination/PaginationButton.js';
-export { default as PaginationEllipsis } from './components/Pagination/PaginationEllipsis.js';
-export { PaginationNext, PaginationPrevious } from './components/Pagination/PaginationNextPrev.js';
 export { SkipLink } from './components/SkipLink/SkipLink.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
-export { Checkbox } from './components/form/Checkbox/index.js';
-export { CheckboxGroup } from './components/form/Checkbox/Group/Group.js';
-export { Radio } from './components/form/Radio/index.js';
-export { RadioGroup } from './components/form/Radio/Group/Group.js';
-export { Fieldset } from './components/form/Fieldset/Fieldset.js';
-export { Switch } from './components/form/Switch/Switch.js';
-export { Textfield } from './components/form/Textfield/Textfield.js';
-export { Textarea } from './components/form/Textarea/Textarea.js';
+export { Field } from './components/Field/index.js';
+export { FieldDescription } from './components/Field/FieldDescription.js';
+export { FieldAffix, FieldAffixes } from './components/Field/FieldAffix.js';
+export { FieldCounter } from './components/Field/FieldCounter.js';
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { Radio } from './components/Radio/Radio.js';
+export { Fieldset } from './components/Fieldset/index.js';
+export { FieldsetLegend } from './components/Fieldset/FieldsetLegend.js';
+export { FieldsetDescription } from './components/Fieldset/FieldsetDescription.js';
+export { Switch } from './components/Switch/Switch.js';
+export { Textfield } from './components/Textfield/Textfield.js';
+export { Textarea } from './components/Textarea/Textarea.js';
+export { Input } from './components/Input/Input.js';
 export { Tabs } from './components/Tabs/index.js';
-export { Tab } from './components/Tabs/Tab.js';
-export { TabList } from './components/Tabs/TabList.js';
-export { TabContent } from './components/Tabs/TabContent.js';
+export { TabsTab } from './components/Tabs/TabsTab.js';
+export { TabsList } from './components/Tabs/TabsList.js';
+export { TabsPanel } from './components/Tabs/TabsPanel.js';
 export { ToggleGroup } from './components/ToggleGroup/index.js';
-export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js';
+export { ToggleGroupItem } from './components/ToggleGroup/ToggleGroupItem.js';
 export { Popover } from './components/Popover/index.js';
-export { PopoverContent } from './components/Popover/PopoverContent.js';
+export { PopoverTriggerContext } from './components/Popover/PopoverTriggerContext.js';
 export { PopoverTrigger } from './components/Popover/PopoverTrigger.js';
 export { Divider } from './components/Divider/Divider.js';
-export { Modal } from './components/Modal/index.js';
-export { ModalContent } from './components/Modal/ModaContent.js';
-export { ModalFooter } from './components/Modal/ModalFooter.js';
-export { ModalHeader } from './components/Modal/ModalHeader.js';
-export { ModalTrigger } from './components/Modal/ModalTrigger.js';
-export { ModalDialog } from './components/Modal/ModalDialog.js';
-export { DropdownMenu } from './components/DropdownMenu/index.js';
-export { DropdownMenuContent } from './components/DropdownMenu/DropdownMenuContent.js';
-export { DropdownMenuGroup } from './components/DropdownMenu/DropdownMenuGroup.js';
-export { DropdownMenuItem } from './components/DropdownMenu/DropdownMenuItem.js';
-export { DropdownMenuTrigger } from './components/DropdownMenu/DropdownMenuTrigger.js';
-export { Search } from './components/form/Search/Search.js';
-export { Skeleton } from './components/Skeleton/index.js';
-export { Circle as SkeletonCircle } from './components/Skeleton/Circle/Circle.js';
-export { Rectangle as SkeletonRectangle } from './components/Skeleton/Rectangle/Rectangle.js';
-export { Text as SkeletonText } from './components/Skeleton/Text/Text.js';
-export { Box } from './components/Box/Box.js';
+export { Dialog } from './components/Dialog/index.js';
+export { DialogBlock } from './components/Dialog/DialogBlock.js';
+export { DialogTriggerContext } from './components/Dialog/DialogTriggerContext.js';
+export { DialogTrigger } from './components/Dialog/DialogTrigger.js';
+export { Dropdown } from './components/Dropdown/index.js';
+export { DropdownTriggerContext } from './components/Dropdown/DropdownTriggerContext.js';
+export { DropdownList } from './components/Dropdown/DropdownList.js';
+export { DropdownHeading } from './components/Dropdown/DropdownHeading.js';
+export { DropdownItem } from './components/Dropdown/DropdownItem.js';
+export { DropdownButton } from './components/Dropdown/DropdownButton.js';
+export { DropdownTrigger } from './components/Dropdown/DropdownTrigger.js';
+export { SearchClear } from './components/Search/SearchClear.js';
+export { SearchButton } from './components/Search/SearchButton.js';
+export { SearchInput } from './components/Search/SearchInput.js';
+export { Search } from './components/Search/index.js';
 export { Card } from './components/Card/index.js';
-export { CardHeader } from './components/Card/CardHeader.js';
-export { CardContent } from './components/Card/CardContent.js';
-export { CardFooter } from './components/Card/CardFooter.js';
-export { CardMedia } from './components/Card/CardMedia.js';
-export { Combobox } from './components/form/Combobox/index.js';
-export { ComboboxOption } from './components/form/Combobox/Option/Option.js';
-export { ComboboxEmpty } from './components/form/Combobox/Empty.js';
+export { CardBlock } from './components/Card/CardBlock.js';
+export { Combobox } from './components/Combobox/index.js';
+export { ComboboxOption } from './components/Combobox/Option/Option.js';
+export { ComboboxEmpty } from './components/Combobox/Empty.js';
 export { Table } from './components/Table/index.js';
 export { TableHead } from './components/Table/TableHead.js';
 export { TableBody } from './components/Table/TableBody.js';
 export { TableRow } from './components/Table/TableRow.js';
 export { TableCell } from './components/Table/TableCell.js';
 export { TableHeaderCell } from './components/Table/TableHeaderCell.js';
+export { TableFoot } from './components/Table/TableFoot.js';
 export { ErrorSummary } from './components/ErrorSummary/index.js';
-export { ErrorSummaryRoot } from './components/ErrorSummary/ErrorSummaryRoot.js';
 export { ErrorSummaryItem } from './components/ErrorSummary/ErrorSummaryItem.js';
 export { ErrorSummaryHeading } from './components/ErrorSummary/ErrorSummaryHeading.js';
+export { ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { ErrorSummaryLink } from './components/ErrorSummary/ErrorSummaryLink.js';
+export { EXPERIMENTAL_Suggestion } from './components/Suggestion/index.js';
+export { SuggestionList as EXPERIMENTAL_SuggestionList } from './components/Suggestion/SuggestionList.js';
+export { SuggestionInput as EXPERIMENTAL_SuggestionInput } from './components/Suggestion/SuggestionInput.js';
+export { SuggestionEmpty as EXPERIMENTAL_SuggestionEmpty } from './components/Suggestion/SuggestionEmpty.js';
+export { SuggestionOption as EXPERIMENTAL_SuggestionOption } from './components/Suggestion/SuggestionOption.js';
+export { SuggestionClear as EXPERIMENTAL_SuggestionClear } from './components/Suggestion/SuggestionClear.js';
+export { EXPERIMENTAL_MultiSuggestion } from './components/MultiSuggestion/index.js';
+export { MultiSuggestionInput as EXPERIMENTAL_MultiSuggestionInput } from './components/MultiSuggestion/MultiSuggestionInput.js';
+export { MultiSuggestionList as EXPERIMENTAL_MultiSuggestionList } from './components/MultiSuggestion/MultiSuggestionList.js';
+export { MultiSuggestionOption as EXPERIMENTAL_MultiSuggestionOption } from './components/MultiSuggestion/MultiSuggestionOption.js';
+export { MultiSuggestionChips as EXPERIMENTAL_MultiSuggestionChips } from './components/MultiSuggestion/MultiSuggestionChips.js';
+export { MultiSuggestionEmpty as EXPERIMENTAL_MultiSuggestionEmpty } from './components/MultiSuggestion/MultiSuggestionEmpty.js';
+export { MultiSuggestionClear as EXPERIMENTAL_MultiSuggestionClear } from './components/MultiSuggestion/MultiSuggestionClear.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 { useRadioGroup } from './utilities/hooks/useRadioGroup/useRadioGroup.js';
+export { useSynchronizedAnimation } from './utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { usePagination } from './utilities/hooks/usePagination/usePagination.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/RovingFocus/RovingFocusItem.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { useRovingFocus } from './useRovingFocus.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);
+}
+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/RovingFocus/RovingFocusRoot.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '@floating-ui/react';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useState, useRef, useEffect, createContext } from 'react';
+
+const RovingFocusContext = createContext({
+    elements: { current: new Map() },
+    getOrderedItems: () => [],
+    setFocusableValue: () => {
+        /* intentionally empty */
+    },
+    onShiftTab: () => {
+        /* intentionally empty */
+    },
+    focusableValue: null,
+    orientation: 'horizontal',
+});
+const RovingFocusRoot = forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'div';
+    const [focusableValue, setFocusableValue] = useState(null);
+    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(activeValue ?? null);
+    }, [activeValue]);
+    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/RovingFocus/useRovingFocus.js

@@ -0,0 +1,41 @@
+'use client';
+import { useContext } from 'react';
+import { RovingFocusContext } from './RovingFocusRoot.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
+/** 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 };