@digdir/designsystemet-react 1.6.1 → 1.7.0

package/dist/cjs/components/dialog/dialog.js

@@ -85,7 +85,7 @@ const Dialog = react.forwardRef(function Dialog({ asChild, children, className,
         currentRef?.addEventListener('close', handleClose);
         return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
+    return (jsxRuntime.jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsxRuntime.jsx(button.Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 exports.Dialog = Dialog;

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

@@ -6,6 +6,7 @@ var react = require('react');
 var paragraph = require('../paragraph/paragraph.js');
 var validationMessage = require('../validation-message/validation-message.js');
 var fieldObserver = require('./field-observer.js');
+var useDebounceCallback = require('../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js');
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 /**
@@ -17,12 +18,14 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
  * </Field>
  */
-const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
     const [count, setCount] = react.useState(0);
+    const [liveRegionText, setLiveRegionText] = react.useState('');
     const fieldInputRef = react.useRef(null);
     const counterRef = react.useRef(null);
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
+    const debouncedSetLiveRegionText = useDebounceCallback.useDebounceCallback((text) => setLiveRegionText(text), 1200);
     // Listen to native input events (user typing) to update the counter in real time
     react.useEffect(() => {
         const field = counterRef.current?.closest('.ds-field');
@@ -45,7 +48,11 @@ const FieldCounter = react.forwardRef(function FieldCounter({ limit, under = '%d
             setCount((prev) => (prev === valueLength ? prev : valueLength));
         }
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+    // Update live region text when count or limit changes
+    react.useEffect(() => {
+        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
+    }, [count, limit, over, under, hasExceededLimit, remainder]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsxRuntime.jsx(validationMessage.ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsxRuntime.jsx(paragraph.Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsxRuntime.jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
 });
 
 exports.FieldCounter = FieldCounter;

package/dist/cjs/components/popover/popover.js

@@ -86,7 +86,7 @@ const Popover = react.forwardRef(function Popover({ id, className, onClose, onOp
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
+                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
     }, [controlledOpen, placement, id, autoPlacement]);

package/dist/cjs/components/suggestion/suggestion-list.js

@@ -32,7 +32,7 @@ const SuggestionList = react.forwardRef(function SuggestionList({ singular = '%d
                     strategy: 'fixed',
                     middleware: [triggerWidth],
                 }).then(({ x, y }) => {
-                    list.style.translate = `${x}px calc(${y}px + var(--dsc-suggestion-list-gap))`;
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px + var(--dsc-suggestion-list-gap))`;
                 });
             });
         }

package/dist/cjs/components/tooltip/tooltip.js

@@ -60,7 +60,7 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
                         safeAreaElement,
                     ],
                 }).then(({ x, y }) => {
-                    tooltip.style.translate = `${x}px ${y}px`;
+                    tooltip.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
         }

package/dist/esm/components/dialog/dialog.js

@@ -83,7 +83,7 @@ const Dialog = forwardRef(function Dialog({ asChild, children, className, closeB
         currentRef?.addEventListener('close', handleClose);
         return () => currentRef?.removeEventListener('close', handleClose);
     }, [onClose]);
-    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, autoFocus: true, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
+    return (jsxs(Component, { className: cl('ds-dialog', className), ref: mergedRefs, "data-modal": modal, ...rest, children: [closeButton !== false && (jsx(Button, { "aria-label": closeButton, "data-color": 'neutral', icon: true, variant: 'tertiary', "data-command": 'close' })), children] }));
 });
 
 export { Dialog };

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

@@ -4,6 +4,7 @@ import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Paragraph } from '../paragraph/paragraph.js';
 import { ValidationMessage } from '../validation-message/validation-message.js';
 import { isInputLike } from './field-observer.js';
+import { useDebounceCallback } from '../../utilities/hooks/deprecated/use-debounce-callback/use-debounce-callback.js';
 
 const label = (text, count) => text.replace('%d', Math.abs(count).toString());
 /**
@@ -15,12 +16,14 @@ const label = (text, count) => text.replace('%d', Math.abs(count).toString());
  *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
  * </Field>
  */
-const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', ...rest }, ref) {
+const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn igjen', over = '%d tegn for mye', hint = 'Maks %d tegn tillatt.', ...rest }, ref) {
     const [count, setCount] = useState(0);
+    const [liveRegionText, setLiveRegionText] = useState('');
     const fieldInputRef = useRef(null);
     const counterRef = useRef(null);
     const hasExceededLimit = count > limit;
     const remainder = limit - count;
+    const debouncedSetLiveRegionText = useDebounceCallback((text) => setLiveRegionText(text), 1200);
     // Listen to native input events (user typing) to update the counter in real time
     useEffect(() => {
         const field = counterRef.current?.closest('.ds-field');
@@ -43,7 +46,11 @@ const FieldCounter = forwardRef(function FieldCounter({ limit, under = '%d tegn
             setCount((prev) => (prev === valueLength ? prev : valueLength));
         }
     });
-    return (jsxs(Fragment, { children: [jsx("div", { "data-field": 'description', className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: hasExceededLimit && label(over, remainder) }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "data-field": 'validation', children: label(under, remainder) }))] }));
+    // Update live region text when count or limit changes
+    useEffect(() => {
+        debouncedSetLiveRegionText(label(hasExceededLimit ? over : under, remainder));
+    }, [count, limit, over, under, hasExceededLimit, remainder]);
+    return (jsxs(Fragment, { children: [jsx("div", { className: 'ds-sr-only', "aria-live": 'polite', ref: counterRef, children: liveRegionText }), hasExceededLimit ? (jsx(ValidationMessage, { ref: ref, ...rest, "aria-hidden": 'true', "data-field": null, children: label(over, remainder) })) : (jsx(Paragraph, { ref: ref, ...rest, "aria-hidden": 'true', children: label(under, remainder) })), jsx("div", { className: 'ds-sr-only', "aria-hidden": 'true', "data-field": 'description', children: label(hint, limit) })] }));
 });
 
 export { FieldCounter };

package/dist/esm/components/popover/popover.js

@@ -84,7 +84,7 @@ const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, op
                         arrowPseudoElement,
                     ],
                 }).then(({ x, y }) => {
-                    popover.style.translate = `${x}px ${y}px`;
+                    popover.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
     }, [controlledOpen, placement, id, autoPlacement]);

package/dist/esm/components/suggestion/suggestion-list.js

@@ -30,7 +30,7 @@ const SuggestionList = forwardRef(function SuggestionList({ singular = '%d forsl
                     strategy: 'fixed',
                     middleware: [triggerWidth],
                 }).then(({ x, y }) => {
-                    list.style.translate = `${x}px calc(${y}px + var(--dsc-suggestion-list-gap))`;
+                    list.style.translate = `${Math.round(x)}px calc(${Math.round(y)}px + var(--dsc-suggestion-list-gap))`;
                 });
             });
         }

package/dist/esm/components/tooltip/tooltip.js

@@ -58,7 +58,7 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
                         safeAreaElement,
                     ],
                 }).then(({ x, y }) => {
-                    tooltip.style.translate = `${x}px ${y}px`;
+                    tooltip.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;
                 });
             });
         }

package/dist/types/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA5Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDA2HpB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG,UAAU,CAClC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC;IAC3C;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;IA5Df;;;OAGG;kBACW,MAAM,GAAG,KAAK;IAC5B;;;;OAIG;eACQ,MAAM,GAAG,cAAc,GAAG,KAAK;IAC1C;;;;;;OAMG;YACK,OAAO;IACf;;OAEG;WACI,OAAO;IACd;;OAEG;cACO,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAChC;;;;;OAKG;cACO,OAAO;qDA0HpB,CAAC"}

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

@@ -14,6 +14,13 @@ export type FieldCounterProps = {
      * @default '%d tegn igjen'
      */
     under?: string;
+    /**
+     * Text for screen readers of how many characters are allowed.
+     * Only read when entering the field.
+     *
+     * @default 'Maks %d tegn tillatt.'
+     */
+    hint?: string;
     /**
      * The maximum allowed characters.
      *
@@ -45,6 +52,13 @@ export declare const FieldCounter: import("react").ForwardRefExoticComponent<{
      * @default '%d tegn igjen'
      */
     under?: string;
+    /**
+     * Text for screen readers of how many characters are allowed.
+     * Only read when entering the field.
+     *
+     * @default 'Maks %d tegn tillatt.'
+     */
+    hint?: string;
     /**
      * The maximum allowed characters.
      *

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

@@ -1 +1 @@
-{"version":3,"file":"field-counter.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-counter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAGlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;QAII;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;IAlCvB;;;;;OAKG;WACI,MAAM;IACb;;;;;OAKG;YACK,MAAM;IACd;;;;QAII;WACG,MAAM;;;;wDA0Ed,CAAC"}
+{"version":3,"file":"field-counter.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-counter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,0CAA0C,CAAC;AAGlD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;QAII;IACJ,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,sBAAsB,CAAC;AAK3B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;IAzCvB;;;;;OAKG;WACI,MAAM;IACb;;;;;OAKG;YACK,MAAM;IACd;;;;;OAKG;WACI,MAAM;IACb;;;;QAII;WACG,MAAM;;;;wDAgGd,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^7.31.0",
+    "@navikt/aksel-icons": "^7.32.2",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@u-elements/u-combobox": "^1.0.2",
@@ -47,27 +47,27 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.2",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-vitest": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@rollup/plugin-commonjs": "^28.0.8",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-vitest": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.52.4",
+    "rollup": "^4.52.5",
     "rollup-plugin-copy": "^3.5.0",
-    "storybook": "^9.1.10",
+    "storybook": "^9.1.13",
     "tsx": "4.20.6",
     "typescript": "^5.9.3",
-    "@digdir/designsystemet": "^1.6.1",
-    "@digdir/designsystemet-css": "^1.6.1"
+    "@digdir/designsystemet": "^1.7.0",
+    "@digdir/designsystemet-css": "^1.7.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",