@digdir/designsystemet-react 1.11.1 → 1.12.0

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

@@ -1,5 +1,7 @@
 import type { HTMLAttributes } from 'react';
-/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+/**
+@deprecated useRovingFocus is deprecated.
+Handles props for `RovingFocus` in context with `RovingFocusRoot` */
 export declare const useRovingFocus: (value: string) => {
     getOrderedItems: () => import("./roving-focus-root").RovingFocusElement[];
     isFocusable: boolean;

package/dist/types/utilities/roving-focus/use-roving-focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-roving-focus.d.ts","sourceRoot":"","sources":["../../../src/utilities/roving-focus/use-roving-focus.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,wEAAwE;AACxE,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM;;;;qBAcvB,CAAC,SAAS,WAAW,SAAS,cAAc,CAAC,CAAC,CAAC;uBAE/C,WAAW,GAAG,IAAI;uBAOlB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;qBAOxB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQrC,CAAC"}
+{"version":3,"file":"use-roving-focus.d.ts","sourceRoot":"","sources":["../../../src/utilities/roving-focus/use-roving-focus.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C;;oEAEoE;AACpE,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM;;;;qBAcvB,CAAC,SAAS,WAAW,SAAS,cAAc,CAAC,CAAC,CAAC;uBAE/C,WAAW,GAAG,IAAI;uBAOlB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;qBAOxB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQrC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -37,36 +37,33 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^8.2.0",
+    "@navikt/aksel-icons": "^8.4.1",
     "@radix-ui/react-slot": "^1.2.4",
     "@tanstack/react-virtual": "^3.13.18",
-    "@u-elements/u-combobox": "^1.0.7",
-    "@u-elements/u-datalist": "^1.1.0",
-    "@u-elements/u-details": "^0.1.5",
     "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "^1.11.1"
+    "@digdir/designsystemet-types": "^1.12.0",
+    "@digdir/designsystemet-web": "^1.12.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^10.2.3",
-    "@storybook/addon-vitest": "^10.2.3",
-    "@storybook/react-vite": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "rimraf": "^6.1.2",
+    "rimraf": "^6.1.3",
     "rollup": "^4.57.1",
     "rollup-plugin-copy": "^3.5.0",
-    "storybook": "^10.2.3",
+    "storybook": "^10.2.8",
     "tsx": "4.21.0",
     "typescript": "^5.9.3",
-    "@digdir/designsystemet-css": "^1.11.1",
-    "@digdir/designsystemet": "^1.11.1"
+    "@digdir/designsystemet-css": "^1.12.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",

package/dist/cjs/components/field/field-observer.js

@@ -1,112 +0,0 @@
-'use client';
-'use strict';
-
-function fieldObserver(fieldElement) {
-    if (!fieldElement)
-        return;
-    const elements = new Map();
-    const typeCounter = new Map(); // Track count for each data-field type
-    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-    let input = null;
-    let describedby = '';
-    const process = (mutations) => {
-        const changed = [];
-        const removed = [];
-        // Merge MutationRecords
-        for (const mutation of mutations) {
-            if (mutation.attributeName)
-                changed.push(mutation.target ?? fieldElement);
-            changed.push(...(mutation.addedNodes || []));
-            removed.push(...(mutation.removedNodes || []));
-        }
-        // Register elements
-        for (const el of changed) {
-            if (!isElement(el))
-                continue;
-            if (isLabel(el))
-                elements.set(el, el.htmlFor);
-            else if (el.hasAttribute('data-field'))
-                elements.set(el, el.id);
-            else if (isInputLike(el) && !el.hidden) {
-                input = el;
-                describedby = el.getAttribute('aria-describedby') || '';
-            }
-        }
-        // Reset removed elements
-        for (const el of removed) {
-            if (!isElement(el))
-                continue;
-            if (input === el)
-                input = null;
-            if (elements.has(el)) {
-                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
-                elements.delete(el);
-            }
-        }
-        // Connect elements
-        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
-        const inputId = input?.id || uuid;
-        // Reset type counters since we reprocess all elements
-        typeCounter.clear();
-        for (const [el, value] of elements) {
-            const descriptionType = el.getAttribute('data-field');
-            let id;
-            if (descriptionType) {
-                // Increment type counter for this type
-                const count = (typeCounter.get(descriptionType) || 0) + 1;
-                typeCounter.set(descriptionType, count);
-                id = `${inputId}:${descriptionType}:${count}`;
-            }
-            else {
-                id = inputId;
-            }
-            if (!value)
-                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (!describedbyIds.includes(el.id)) {
-                if (descriptionType === 'validation')
-                    describedbyIds.unshift(el.id); // Validations to the front
-                else if (descriptionType)
-                    describedbyIds.push(el.id); // Other descriptions to the back
-            }
-        }
-        setAttr(input, 'id', inputId);
-        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
-    };
-    const observer = createOptimizedMutationObserver(process);
-    observer.observe(fieldElement, {
-        attributeFilter: ['id', 'for', 'aria-describedby'],
-        attributes: true,
-        childList: true,
-        subtree: true,
-    });
-    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
-    observer.takeRecords(); // Clear initial setup queue
-    return () => observer.disconnect();
-}
-// Utilities
-const isElement = (node) => node instanceof Element;
-const isLabel = (node) => node instanceof HTMLLabelElement;
-const isInputLike = (node) => node instanceof HTMLElement &&
-    'validity' in node &&
-    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
-const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
-// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-function createOptimizedMutationObserver(callback) {
-    const queue = [];
-    const observer = new MutationObserver((mutations) => {
-        if (!queue.length)
-            requestAnimationFrame(process);
-        queue.push(...mutations);
-    });
-    const process = () => {
-        callback(queue, observer);
-        queue.length = 0; // Reset queue
-        observer.takeRecords(); // Clear queue due to DOM changes in callback
-    };
-    return observer;
-}
-
-exports.fieldObserver = fieldObserver;
-exports.isElement = isElement;
-exports.isInputLike = isInputLike;
-exports.isLabel = isLabel;

package/dist/cjs/components/toggle-group/use-toggle-groupitem.js

@@ -1,34 +0,0 @@
-'use client';
-'use strict';
-
-var react = require('react');
-var toggleGroup = require('./toggle-group.js');
-
-/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
-const useToggleGroupItem = (props) => {
-    const { ...rest } = props;
-    const genValue = react.useId();
-    const toggleGroup$1 = react.useContext(toggleGroup.ToggleGroupContext);
-    const value = props.value ?? genValue;
-    const active = toggleGroup$1.value === value;
-    const variant = toggleGroup$1.variant;
-    const buttonId = `togglegroup-item-${react.useId()}`;
-    return {
-        ...rest,
-        active: active,
-        value,
-        variant,
-        buttonProps: {
-            id: buttonId,
-            'aria-checked': active,
-            'aria-current': active,
-            role: 'radio',
-            name: toggleGroup$1.name,
-            onClick: () => {
-                toggleGroup$1.onChange?.(value);
-            },
-        },
-    };
-};
-
-exports.useToggleGroupItem = useToggleGroupItem;

package/dist/esm/components/field/field-observer.js

@@ -1,107 +0,0 @@
-'use client';
-function fieldObserver(fieldElement) {
-    if (!fieldElement)
-        return;
-    const elements = new Map();
-    const typeCounter = new Map(); // Track count for each data-field type
-    const uuid = `:${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-    let input = null;
-    let describedby = '';
-    const process = (mutations) => {
-        const changed = [];
-        const removed = [];
-        // Merge MutationRecords
-        for (const mutation of mutations) {
-            if (mutation.attributeName)
-                changed.push(mutation.target ?? fieldElement);
-            changed.push(...(mutation.addedNodes || []));
-            removed.push(...(mutation.removedNodes || []));
-        }
-        // Register elements
-        for (const el of changed) {
-            if (!isElement(el))
-                continue;
-            if (isLabel(el))
-                elements.set(el, el.htmlFor);
-            else if (el.hasAttribute('data-field'))
-                elements.set(el, el.id);
-            else if (isInputLike(el) && !el.hidden) {
-                input = el;
-                describedby = el.getAttribute('aria-describedby') || '';
-            }
-        }
-        // Reset removed elements
-        for (const el of removed) {
-            if (!isElement(el))
-                continue;
-            if (input === el)
-                input = null;
-            if (elements.has(el)) {
-                setAttr(el, isLabel(el) ? 'for' : 'id', elements.get(el));
-                elements.delete(el);
-            }
-        }
-        // Connect elements
-        const describedbyIds = describedby ? describedby.split(' ') : []; // Keep original aria-describedby
-        const inputId = input?.id || uuid;
-        // Reset type counters since we reprocess all elements
-        typeCounter.clear();
-        for (const [el, value] of elements) {
-            const descriptionType = el.getAttribute('data-field');
-            let id;
-            if (descriptionType) {
-                // Increment type counter for this type
-                const count = (typeCounter.get(descriptionType) || 0) + 1;
-                typeCounter.set(descriptionType, count);
-                id = `${inputId}:${descriptionType}:${count}`;
-            }
-            else {
-                id = inputId;
-            }
-            if (!value)
-                setAttr(el, isLabel(el) ? 'for' : 'id', id); // Ensure we have a value
-            if (!describedbyIds.includes(el.id)) {
-                if (descriptionType === 'validation')
-                    describedbyIds.unshift(el.id); // Validations to the front
-                else if (descriptionType)
-                    describedbyIds.push(el.id); // Other descriptions to the back
-            }
-        }
-        setAttr(input, 'id', inputId);
-        setAttr(input, 'aria-describedby', describedbyIds.join(' ').trim());
-    };
-    const observer = createOptimizedMutationObserver(process);
-    observer.observe(fieldElement, {
-        attributeFilter: ['id', 'for', 'aria-describedby'],
-        attributes: true,
-        childList: true,
-        subtree: true,
-    });
-    process([{ addedNodes: fieldElement.querySelectorAll('*') }]); // Initial setup
-    observer.takeRecords(); // Clear initial setup queue
-    return () => observer.disconnect();
-}
-// Utilities
-const isElement = (node) => node instanceof Element;
-const isLabel = (node) => node instanceof HTMLLabelElement;
-const isInputLike = (node) => node instanceof HTMLElement &&
-    'validity' in node &&
-    !(node instanceof HTMLButtonElement); // Matches input, textarea, select and form accosiated custom elements
-const setAttr = (el, name, value) => value ? el?.setAttribute(name, value) : el?.removeAttribute(name);
-// Speed up MutationObserver by debouncing, clearing internal queue after changes and only running when page is visible
-function createOptimizedMutationObserver(callback) {
-    const queue = [];
-    const observer = new MutationObserver((mutations) => {
-        if (!queue.length)
-            requestAnimationFrame(process);
-        queue.push(...mutations);
-    });
-    const process = () => {
-        callback(queue, observer);
-        queue.length = 0; // Reset queue
-        observer.takeRecords(); // Clear queue due to DOM changes in callback
-    };
-    return observer;
-}
-
-export { fieldObserver, isElement, isInputLike, isLabel };

package/dist/esm/components/toggle-group/use-toggle-groupitem.js

@@ -1,32 +0,0 @@
-'use client';
-import { useId, useContext } from 'react';
-import { ToggleGroupContext } from './toggle-group.js';
-
-/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
-const useToggleGroupItem = (props) => {
-    const { ...rest } = props;
-    const genValue = useId();
-    const toggleGroup = useContext(ToggleGroupContext);
-    const value = props.value ?? genValue;
-    const active = toggleGroup.value === value;
-    const variant = toggleGroup.variant;
-    const buttonId = `togglegroup-item-${useId()}`;
-    return {
-        ...rest,
-        active: active,
-        value,
-        variant,
-        buttonProps: {
-            id: buttonId,
-            'aria-checked': active,
-            'aria-current': active,
-            role: 'radio',
-            name: toggleGroup.name,
-            onClick: () => {
-                toggleGroup.onChange?.(value);
-            },
-        },
-    };
-};
-
-export { useToggleGroupItem };

package/dist/types/components/field/field-observer.d.ts

@@ -1,5 +0,0 @@
-export declare function fieldObserver(fieldElement: HTMLElement | null): (() => void) | undefined;
-export declare const isElement: (node: Node) => node is Element;
-export declare const isLabel: (node: Node) => node is HTMLLabelElement;
-export declare const isInputLike: (node: unknown) => node is HTMLInputElement;
-//# sourceMappingURL=field-observer.d.ts.map

package/dist/types/components/field/field-observer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"field-observer.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-observer.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,4BAsF7D;AAGD,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,oBAA4B,CAAC;AACjE,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,6BAAqC,CAAC;AACxE,eAAO,MAAM,WAAW,GAAI,MAAM,OAAO,KAAG,IAAI,IAAI,gBAGd,CAAC"}

package/dist/types/components/toggle-group/use-toggle-groupitem.d.ts

@@ -1,12 +0,0 @@
-import type { ButtonProps } from '../button/button';
-import type { ToggleGroupItemProps } from './toggle-group-item';
-type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
-    active: boolean;
-    variant?: 'primary' | 'secondary';
-    value: string;
-    buttonProps?: Pick<ButtonProps, 'id' | 'onClick' | 'role' | 'aria-checked' | 'aria-current' | 'name'>;
-};
-/** Handles props for `ToggleGroup.Item` in context with `ToggleGroup` and `RovingFocus` */
-export declare const useToggleGroupItem: UseToggleGroupItem;
-export {};
-//# sourceMappingURL=use-toggle-groupitem.d.ts.map

package/dist/types/components/toggle-group/use-toggle-groupitem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-toggle-groupitem.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/use-toggle-groupitem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,KAAK,kBAAkB,GAAG,CAAC,KAAK,EAAE,oBAAoB,KAAK;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,cAAc,GAAG,MAAM,CACrE,CAAC;CACH,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,EAAE,kBA2BhC,CAAC"}