@digdir/designsystemet-react 1.20.0 → 1.21.0

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

@@ -1,70 +1,57 @@
 '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';
-
+import { useMergeRefs } from "../hooks/use-merge-refs/use-merge-refs.js";
+import "../hooks/index.js";
+import { useRovingFocus } from "./use-roving-focus.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/utilities/roving-focus/roving-focus-item.tsx
 /** 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);
+	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 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 }));
+	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 /* @__PURE__ */ jsx(Component, {
+		...rest,
+		...rovingProps,
+		ref: mergedRefs,
+		children: rest.children
+	});
 });
-
+//#endregion
 export { RovingFocusItem, getNextFocusableValue, getPrevFocusableValue };

package/dist/esm/utilities/roving-focus/roving-focus-root.d.ts

@@ -0,0 +1,24 @@
+
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/utilities/roving-focus/roving-focus-root.d.ts
+/** @deprecated RovingFocusRoot is deprecated. */
+declare const RovingFocusRoot: import("react").ForwardRefExoticComponent<{
+  /** The children of the `RovingFocusRoot`. The children should get their roving-relevant props from the `useRovingFocus` hook. */
+  children: ReactNode;
+  /** The value of the element that should be focused when the `RovingFocusRoot` receives focus. */
+  activeValue?: string;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Changes what arrow keys are used to navigate the roving focus.
+   * Sets correct `aria-orientation` attribute, if `vertical` or `horizontal`.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: "vertical" | "horizontal" | "ambiguous";
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { RovingFocusRoot };

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

@@ -1,74 +1,71 @@
 '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';
-
+import { useMergeRefs } from "../hooks/use-merge-refs/use-merge-refs.js";
+import "../hooks/index.js";
+import { warn } from "../index.js";
+import { createContext, forwardRef, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/utilities/roving-focus/roving-focus-root.tsx
 const RovingFocusContext = createContext({
-    elements: { current: new Map() },
-    getOrderedItems: () => [],
-    setFocusableValue: () => {
-        /* intentionally empty */
-    },
-    onShiftTab: () => {
-        /* intentionally empty */
-    },
-    focusableValue: null,
-    orientation: 'horizontal',
+	elements: { current: /* @__PURE__ */ new Map() },
+	getOrderedItems: () => [],
+	setFocusableValue: () => {},
+	onShiftTab: () => {},
+	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 }) }));
+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(/* @__PURE__ */ 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 /* @__PURE__ */ jsx(RovingFocusContext.Provider, {
+		value: {
+			elements,
+			getOrderedItems,
+			focusableValue,
+			setFocusableValue,
+			onShiftTab: () => {
+				setIsShiftTabbing(true);
+			},
+			orientation
+		},
+		children: /* @__PURE__ */ 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
+		})
+	});
 });
-
+//#endregion
 export { RovingFocusContext, RovingFocusRoot };

package/dist/esm/utilities/roving-focus/use-roving-focus.d.ts

@@ -0,0 +1,4 @@
+
+import "./roving-focus-root.js";
+import "../../index.js";
+import { HTMLAttributes } from "react";

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

@@ -1,43 +1,37 @@
 '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
+import { RovingFocusContext } from "./roving-focus-root.js";
+import { useContext } from "react";
+//#region src/utilities/roving-focus/use-roving-focus.ts
 /**
 @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,
-        }),
-    };
+	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
+		})
+	};
 };
-
+//#endregion
 export { useRovingFocus };

package/dist/{types → esm}/utilities/types.d.ts

@@ -1,5 +1,9 @@
+
+//#region src/utilities/types.d.ts
 /**
  * Create a new type with the properties of the first type merged with the properties of the second type.
  * If a key exists in both types, the property from the *second* type will be used.
  */
-export type MergeRight<T1, T2> = Omit<T1, keyof T2> & T2;
+type MergeRight<T1, T2> = Omit<T1, keyof T2> & T2;
+//#endregion
+export { MergeRight };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -10,18 +10,23 @@
   },
   "homepage": "https://github.com/digdir/designsystemet/tree/main/packages/react",
   "license": "MIT",
-  "types": "dist/types/index.d.ts",
+  "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./colors": {
-      "types": "./dist/types/colors.d.ts"
+      "types": "./dist/esm/colors.d.ts"
     },
     "./react-types": {
-      "types": "./dist/react-types.d.ts"
+      "types": "./dist/esm/react-types.d.ts"
     }
   },
   "files": [
@@ -39,35 +44,30 @@
     "@floating-ui/react": "0.26.23",
     "@navikt/aksel-icons": "^8.16.1",
     "@radix-ui/react-slot": "^1.3.3",
-    "@tanstack/react-virtual": "^3.14.9",
+    "@tanstack/react-virtual": "^3.14.10",
     "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "1.20.0",
-    "@digdir/designsystemet-web": "1.20.0"
+    "@digdir/designsystemet-types": "1.21.0",
+    "@digdir/designsystemet-web": "1.21.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "29.0.3",
-    "@rollup/plugin-node-resolve": "16.0.3",
-    "@storybook/addon-docs": "10.5.7",
-    "@storybook/addon-vitest": "10.5.7",
-    "@storybook/react-vite": "10.5.7",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-vitest": "10.5.10",
+    "@storybook/react-vite": "10.5.10",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "14.6.3",
+    "@testing-library/user-event": "14.6.6",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "react-dropzone": "19.3.0",
+    "@types/react-dom": "19.2.5",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "rimraf": "6.1.3",
-    "rollup": "4.62.4",
-    "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.5.7",
+    "react-dropzone": "19.3.0",
+    "storybook": "10.5.10",
+    "tsdown": "0.22.14",
     "typescript": "6.0.3",
-    "@digdir/designsystemet-css": "^1.20.0"
+    "@digdir/designsystemet-css": "^1.21.0"
   },
   "scripts": {
-    "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
-    "clean": "rimraf dist && rimraf tsc-build && rimraf --glob \"*.tsbuildinfo\"",
+    "build": "tsdown",
     "types": "tsc --noEmit"
   }
 }