@navikt/ds-react 7.32.4 → 7.33.0

package/esm/util/detectBrowser.d.ts

@@ -1,2 +1,4 @@
 declare const isSafari: boolean;
-export { isSafari };
+declare const isWebKit: boolean;
+declare const isIOS: boolean;
+export { isSafari, isWebKit, isIOS };

package/esm/util/detectBrowser.js

@@ -1,4 +1,28 @@
 const hasNavigator = typeof navigator !== "undefined";
+function getNavigatorData() {
+    var _a, _b;
+    if (!hasNavigator) {
+        return { platform: "", maxTouchPoints: -1 };
+    }
+    const uaData = navigator.userAgentData;
+    if (uaData === null || uaData === void 0 ? void 0 : uaData.platform) {
+        return {
+            platform: uaData.platform,
+            maxTouchPoints: navigator.maxTouchPoints,
+        };
+    }
+    return {
+        platform: (_a = navigator.platform) !== null && _a !== void 0 ? _a : "",
+        maxTouchPoints: (_b = navigator.maxTouchPoints) !== null && _b !== void 0 ? _b : -1,
+    };
+}
+const nav = getNavigatorData();
 const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
-export { isSafari };
+const isWebKit = typeof CSS === "undefined" || !CSS.supports
+    ? false
+    : CSS.supports("-webkit-backdrop-filter:none");
+const isIOS = nav.platform === "MacIntel" && nav.maxTouchPoints > 1
+    ? true
+    : /iP(hone|ad|od)|iOS/.test(nav.platform);
+export { isSafari, isWebKit, isIOS };
 //# sourceMappingURL=detectBrowser.js.map

package/esm/util/detectBrowser.js.map

@@ -1 +1 @@
-{"version":3,"file":"detectBrowser.js","sourceRoot":"","sources":["../../src/util/detectBrowser.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,OAAO,SAAS,KAAK,WAAW,CAAC;AAEtD,MAAM,QAAQ,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"detectBrowser.js","sourceRoot":"","sources":["../../src/util/detectBrowser.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,OAAO,SAAS,KAAK,WAAW,CAAC;AAQtD,SAAS,gBAAgB;;IACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC;IAC9C,CAAC;IAED,MAAM,MAAM,GAAI,SAAiB,CAAC,aAErB,CAAC;IAEd,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,CAAC;QACrB,OAAO;YACL,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,cAAc,EAAE,SAAS,CAAC,cAAc;SACzC,CAAC;IACJ,CAAC;IAED,OAAO;QACL,QAAQ,EAAE,MAAA,SAAS,CAAC,QAAQ,mCAAI,EAAE;QAClC,cAAc,EAAE,MAAA,SAAS,CAAC,cAAc,mCAAI,CAAC,CAAC;KAC/C,CAAC;AACJ,CAAC;AAED,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;AAE/B,MAAM,QAAQ,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjE,MAAM,QAAQ,GACZ,OAAO,GAAG,KAAK,WAAW,IAAI,CAAC,GAAG,CAAC,QAAQ;IACzC,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;AAEnD,MAAM,KAAK,GACT,GAAG,CAAC,QAAQ,KAAK,UAAU,IAAI,GAAG,CAAC,cAAc,GAAG,CAAC;IACnD,CAAC,CAAC,IAAI;IACN,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC"}

package/esm/util/hooks/useScrollLock.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Locks the scroll of the document when enabled.
+ * @param enabled - Whether to enable the scroll lock.
+ */
+declare function useScrollLock(params: {
+    enabled: boolean;
+    mounted: boolean;
+    open: boolean;
+    referenceElement?: Element | null;
+}): void;
+export { useScrollLock };

package/esm/util/hooks/useScrollLock.js

@@ -0,0 +1,268 @@
+import { isIOS, isWebKit } from "../detectBrowser.js";
+import { ownerDocument, ownerWindow } from "../owner.js";
+import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
+import { Timeout } from "./useTimeout.js";
+let originalHtmlStyles = {};
+let originalBodyStyles = {};
+let originalHtmlScrollBehavior = "";
+function hasInsetScrollbars(referenceElement) {
+    if (typeof document === "undefined") {
+        return false;
+    }
+    const doc = ownerDocument(referenceElement);
+    const win = ownerWindow(doc);
+    return win.innerWidth - doc.documentElement.clientWidth > 0;
+}
+function preventScrollBasic(referenceElement) {
+    const doc = ownerDocument(referenceElement);
+    const html = doc.documentElement;
+    const originalOverflow = html.style.overflow;
+    html.style.overflow = "hidden";
+    return () => {
+        html.style.overflow = originalOverflow;
+    };
+}
+function preventScrollStandard(referenceElement) {
+    var _a, _b;
+    const doc = ownerDocument(referenceElement);
+    const html = doc.documentElement;
+    const body = doc.body;
+    const win = ownerWindow(html);
+    let scrollTop = 0;
+    let scrollLeft = 0;
+    let resizeRaf = 0;
+    /* Pinch-zoom in Safari causes a shift. Just don't lock scroll if there's any pinch-zoom. */
+    if (isWebKit && ((_b = (_a = win.visualViewport) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1) !== 1) {
+        return () => { };
+    }
+    /**
+     * Locks the scroll by applying styles to Html and Body element.
+     * Reads the DOM first, then writes to avoid layout thrashing.
+     */
+    function lockScroll() {
+        /* DOM reads: */
+        var _a;
+        const htmlStyles = win.getComputedStyle(html);
+        const bodyStyles = win.getComputedStyle(body);
+        scrollTop = html.scrollTop;
+        scrollLeft = html.scrollLeft;
+        originalHtmlStyles = {
+            scrollbarGutter: html.style.scrollbarGutter,
+            overflowY: html.style.overflowY,
+            overflowX: html.style.overflowX,
+        };
+        originalHtmlScrollBehavior = html.style.scrollBehavior;
+        originalBodyStyles = {
+            position: body.style.position,
+            height: body.style.height,
+            width: body.style.width,
+            boxSizing: body.style.boxSizing,
+            overflowY: body.style.overflowY,
+            overflowX: body.style.overflowX,
+            scrollBehavior: body.style.scrollBehavior,
+        };
+        const isScrollableY = html.scrollHeight > html.clientHeight;
+        const isScrollableX = html.scrollWidth > html.clientWidth;
+        const hasConstantOverflowY = htmlStyles.overflowY === "scroll" || bodyStyles.overflowY === "scroll";
+        const hasConstantOverflowX = htmlStyles.overflowX === "scroll" || bodyStyles.overflowX === "scroll";
+        /* Values can be negative in Firefox */
+        const scrollbarWidth = Math.max(0, win.innerWidth - html.clientWidth);
+        const scrollbarHeight = Math.max(0, win.innerHeight - html.clientHeight);
+        /*
+         * Avoid shift due to <body> margin. NB: This does cause elements to be clipped
+         * with whitespace.
+         */
+        const marginY = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
+        const marginX = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
+        /**
+         * Check support for stable scrollbar gutter to avoid layout shift when scrollbars appear/disappear.
+         */
+        const supportsStableScrollbarGutter = typeof CSS !== "undefined" &&
+            ((_a = CSS.supports) === null || _a === void 0 ? void 0 : _a.call(CSS, "scrollbar-gutter", "stable"));
+        /*
+         * DOM writes:
+         * Do not read the DOM past this point!
+         */
+        Object.assign(html.style, {
+            scrollbarGutter: "stable",
+            overflowY: !supportsStableScrollbarGutter &&
+                (isScrollableY || hasConstantOverflowY)
+                ? "scroll"
+                : "hidden",
+            overflowX: !supportsStableScrollbarGutter &&
+                (isScrollableX || hasConstantOverflowX)
+                ? "scroll"
+                : "hidden",
+        });
+        Object.assign(body.style, {
+            /*
+             * Keeps existing positioned children in place (e.g. fixed headers).
+             */
+            position: "relative",
+            /**
+             *  Limits height to the viewport minus margins/scrollbar compensation to stop vertical overflow from reappearing.
+             */
+            height: marginY || scrollbarHeight
+                ? `calc(100dvh - ${marginY + scrollbarHeight}px)`
+                : "100dvh",
+            /**
+             * Mirrors height-logic for width.
+             */
+            width: marginX || scrollbarWidth
+                ? `calc(100vw - ${marginX + scrollbarWidth}px)`
+                : "100vw",
+            /**
+             * Ensures the adjusted dimensions include padding/border, matching the measured values.
+             */
+            boxSizing: "border-box",
+            /**
+             * Blocks scrollable overflow.
+             */
+            overflow: "hidden",
+            /**
+             * Removes smooth-scrolling so immediate position restores occur without animation.
+             */
+            scrollBehavior: "unset",
+        });
+        body.scrollTop = scrollTop;
+        body.scrollLeft = scrollLeft;
+        html.setAttribute("data-aksel-scroll-locked", "");
+        html.style.scrollBehavior = "unset";
+    }
+    /**
+     * Restores the original scroll position and styles to Html and Body element.
+     */
+    function cleanup() {
+        Object.assign(html.style, originalHtmlStyles);
+        Object.assign(body.style, originalBodyStyles);
+        html.scrollTop = scrollTop;
+        html.scrollLeft = scrollLeft;
+        html.removeAttribute("data-aksel-scroll-locked");
+        html.style.scrollBehavior = originalHtmlScrollBehavior;
+    }
+    /**
+     * On resize, restore original styles, then re-apply scroll lock next frame.
+     */
+    function handleResize() {
+        cleanup();
+        if (resizeRaf) {
+            cancelAnimationFrame(resizeRaf);
+        }
+        /**
+         * Wait until next frame to re-apply scroll lock ensuring layout has settled after resize.
+         */
+        resizeRaf = requestAnimationFrame(lockScroll);
+    }
+    lockScroll();
+    win.addEventListener("resize", handleResize);
+    return () => {
+        if (resizeRaf) {
+            cancelAnimationFrame(resizeRaf);
+        }
+        cleanup();
+        win.removeEventListener("resize", handleResize);
+    };
+}
+class ScrollLocker {
+    constructor() {
+        this.lockCount = 0;
+        this.restore = null;
+        this.timeoutLock = Timeout.create();
+        this.timeoutUnlock = Timeout.create();
+        /**
+         * Releases a lock
+         * - If last lock, unlock document-scroll.
+         * - If not last lock, do nothing.
+         */
+        this.release = () => {
+            this.lockCount -= 1;
+            if (this.lockCount === 0 && this.restore) {
+                this.timeoutUnlock.start(0, this.unlock);
+            }
+        };
+        this.unlock = () => {
+            var _a;
+            if (this.lockCount === 0 && this.restore) {
+                (_a = this.restore) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.restore = null;
+            }
+        };
+    }
+    /**
+     * Aquires a new lock
+     * - If first lock, lock document-scroll.
+     * - If not first lock, do nothing.
+     */
+    acquire(referenceElement) {
+        this.lockCount += 1;
+        if (this.lockCount === 1 && this.restore === null) {
+            /*
+             * Delay locking to avoid layout thrashing when multiple locks/unlocks are requested in quick succession.
+             */
+            this.timeoutLock.start(0, () => this.lock(referenceElement));
+        }
+        return this.release;
+    }
+    lock(referenceElement) {
+        if (this.lockCount === 0 || this.restore !== null) {
+            return;
+        }
+        const doc = ownerDocument(referenceElement);
+        const html = doc.documentElement;
+        const htmlOverflowY = ownerWindow(html).getComputedStyle(html).overflowY;
+        /* If the site author already hid overflow on <html>, respect it and bail out. */
+        if (htmlOverflowY === "hidden" || htmlOverflowY === "clip") {
+            this.restore = () => { };
+            return;
+        }
+        const shouldUseBasicLock = isIOS || !hasInsetScrollbars(referenceElement);
+        /**
+         * On iOS, the standard scroll locking method does not work properly if the navbar is collapsed.
+         * The following must be researched extensively before activating standard scroll locking on iOS:
+         * - Textboxes must scroll into view when focused, and not cause a glitchy scroll animation.
+         * - The navbar must not force itself into view and cause layout shift.
+         * - Scroll containers must not flicker upon closing a popup when it has an exit animation.
+         */
+        this.restore = shouldUseBasicLock
+            ? preventScrollBasic(referenceElement)
+            : preventScrollStandard(referenceElement);
+    }
+}
+const SCROLL_LOCKER = new ScrollLocker();
+/**
+ * Locks the scroll of the document when enabled.
+ * @param enabled - Whether to enable the scroll lock.
+ */
+function useScrollLock(params) {
+    const { enabled = true, mounted, open, referenceElement = null } = params;
+    /**
+     * When closing elements with "sloppy clicks" (clicks that start inside the element and ends outside),
+     * animating out on WebKit browsers (mounted + not open) can cause the whole page to be selected.
+     * To prevent this, we temporarily disable user-select on body while the element is animating out.
+     * This bug might be fixed in newer WebKit versions.
+     *
+     * @see https://github.com/mui/base-ui/issues/1135
+     */
+    useClientLayoutEffect(() => {
+        if (enabled && isWebKit && mounted && !open) {
+            const doc = ownerDocument(referenceElement);
+            const originalUserSelect = doc.body.style.userSelect;
+            const originalWebkitUserSelect = doc.body.style.webkitUserSelect;
+            doc.body.style.userSelect = "none";
+            doc.body.style.webkitUserSelect = "none";
+            return () => {
+                doc.body.style.userSelect = originalUserSelect;
+                doc.body.style.webkitUserSelect = originalWebkitUserSelect;
+            };
+        }
+        return undefined;
+    }, [enabled, mounted, open, referenceElement]);
+    useClientLayoutEffect(() => {
+        if (!enabled) {
+            return undefined;
+        }
+        return SCROLL_LOCKER.acquire(referenceElement);
+    }, [enabled, referenceElement]);
+}
+export { useScrollLock };
+//# sourceMappingURL=useScrollLock.js.map

package/esm/util/hooks/useScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollLock.js","sourceRoot":"","sources":["../../../src/util/hooks/useScrollLock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,IAAI,kBAAkB,GAAiC,EAAE,CAAC;AAC1D,IAAI,kBAAkB,GAAiC,EAAE,CAAC;AAC1D,IAAI,0BAA0B,GAAG,EAAE,CAAC;AAEpC,SAAS,kBAAkB,CAAC,gBAAgC;IAC1D,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,GAAG,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAC7B,OAAO,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,eAAe,CAAC,WAAW,GAAG,CAAC,CAAC;AAC9D,CAAC;AAED,SAAS,kBAAkB,CAAC,gBAAgC;IAC1D,MAAM,GAAG,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC;IACjC,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7C,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAE/B,OAAO,GAAG,EAAE;QACV,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC;IACzC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,gBAAgC;;IAC7D,MAAM,GAAG,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IACtB,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAE9B,IAAI,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,4FAA4F;IAC5F,IAAI,QAAQ,IAAI,CAAC,MAAA,MAAA,GAAG,CAAC,cAAc,0CAAE,KAAK,mCAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC;QACvD,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED;;;OAGG;IACH,SAAS,UAAU;QACjB,gBAAgB;;QAEhB,MAAM,UAAU,GAAG,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,UAAU,GAAG,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAE9C,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAE7B,kBAAkB,GAAG;YACnB,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe;YAC3C,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;SAChC,CAAC;QACF,0BAA0B,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QAEvD,kBAAkB,GAAG;YACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;YAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAC/B,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc;SAC1C,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QAC5D,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QAC1D,MAAM,oBAAoB,GACxB,UAAU,CAAC,SAAS,KAAK,QAAQ,IAAI,UAAU,CAAC,SAAS,KAAK,QAAQ,CAAC;QACzE,MAAM,oBAAoB,GACxB,UAAU,CAAC,SAAS,KAAK,QAAQ,IAAI,UAAU,CAAC,SAAS,KAAK,QAAQ,CAAC;QAEzE,uCAAuC;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;QAEzE;;;WAGG;QACH,MAAM,OAAO,GACX,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QACzE,MAAM,OAAO,GACX,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAEzE;;WAEG;QACH,MAAM,6BAA6B,GACjC,OAAO,GAAG,KAAK,WAAW;aAC1B,MAAA,GAAG,CAAC,QAAQ,oDAAG,kBAAkB,EAAE,QAAQ,CAAC,CAAA,CAAC;QAE/C;;;WAGG;QAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YACxB,eAAe,EAAE,QAAQ;YACzB,SAAS,EACP,CAAC,6BAA6B;gBAC9B,CAAC,aAAa,IAAI,oBAAoB,CAAC;gBACrC,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;YACd,SAAS,EACP,CAAC,6BAA6B;gBAC9B,CAAC,aAAa,IAAI,oBAAoB,CAAC;gBACrC,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;SACf,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;YACxB;;eAEG;YACH,QAAQ,EAAE,UAAU;YACpB;;eAEG;YACH,MAAM,EACJ,OAAO,IAAI,eAAe;gBACxB,CAAC,CAAC,iBAAiB,OAAO,GAAG,eAAe,KAAK;gBACjD,CAAC,CAAC,QAAQ;YACd;;eAEG;YACH,KAAK,EACH,OAAO,IAAI,cAAc;gBACvB,CAAC,CAAC,gBAAgB,OAAO,GAAG,cAAc,KAAK;gBAC/C,CAAC,CAAC,OAAO;YACb;;eAEG;YACH,SAAS,EAAE,YAAY;YACvB;;eAEG;YACH,QAAQ,EAAE,QAAQ;YAClB;;eAEG;YACH,cAAc,EAAE,OAAO;SACxB,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,SAAS,OAAO;QACd,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,0BAA0B,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,CAAC;IACzD,CAAC;IAED;;OAEG;IACH,SAAS,YAAY;QACnB,OAAO,EAAE,CAAC;QACV,IAAI,SAAS,EAAE,CAAC;YACd,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;QAED;;WAEG;QACH,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC;IAED,UAAU,EAAE,CAAC;IACb,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAE7C,OAAO,GAAG,EAAE;QACV,IAAI,SAAS,EAAE,CAAC;YACd,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,EAAE,CAAC;QACV,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,YAAY;IAAlB;QACE,cAAS,GAAG,CAAC,CAAC;QACd,YAAO,GAAwB,IAAI,CAAC;QACpC,gBAAW,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAC/B,kBAAa,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAkBjC;;;;WAIG;QACH,YAAO,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;YACpB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACzC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC;QAEM,WAAM,GAAG,GAAG,EAAE;;YACpB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACzC,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;gBACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;IA8BJ,CAAC;IA/DC;;;;OAIG;IACH,OAAO,CAAC,gBAAgC;QACtC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;QACpB,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAClD;;eAEG;YACH,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC/D,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAqBO,IAAI,CAAC,gBAAgC;QAC3C,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC5C,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC;QACjC,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;QAEzE,iFAAiF;QACjF,IAAI,aAAa,KAAK,QAAQ,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,kBAAkB,GAAG,KAAK,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAE1E;;;;;;WAMG;QACH,IAAI,CAAC,OAAO,GAAG,kBAAkB;YAC/B,CAAC,CAAC,kBAAkB,CAAC,gBAAgB,CAAC;YACtC,CAAC,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,CAAC;CACF;AAED,MAAM,aAAa,GAAG,IAAI,YAAY,EAAE,CAAC;AAEzC;;;GAGG;AACH,SAAS,aAAa,CAAC,MAKtB;IACC,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC;IAE1E;;;;;;;OAOG;IACH,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,IAAI,QAAQ,IAAI,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5C,MAAM,GAAG,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;YAC5C,MAAM,kBAAkB,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;YACrD,MAAM,wBAAwB,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC;YACjE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YACnC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,MAAM,CAAC;YAEzC,OAAO,GAAG,EAAE;gBACV,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,kBAAkB,CAAC;gBAC/C,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,wBAAwB,CAAC;YAC7D,CAAC,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE/C,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAClC,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.32.4",
+  "version": "7.33.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -15,6 +15,10 @@
     "url": "git+https://github.com/navikt/aksel.git",
     "directory": "@navikt/core/react"
   },
+  "bugs": {
+    "url": "https://github.com/navikt/aksel/issues"
+  },
+  "homepage": "https://aksel.nav.no/designsystemet/",
   "sideEffects": false,
   "typings": "./esm/index.d.ts",
   "publishConfig": {
@@ -650,8 +654,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^7.32.4",
-    "@navikt/ds-tokens": "^7.32.4",
+    "@navikt/aksel-icons": "^7.33.0",
+    "@navikt/ds-tokens": "^7.33.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
@@ -667,7 +671,7 @@
     "copyfiles": "^2.4.1",
     "fast-glob": "3.2.11",
     "jscodeshift": "^0.15.1",
-    "jsdom": "26.1.0",
+    "jsdom": "27.0.1",
     "react-dom": "^18.0.0",
     "react-router": "^7.6.2",
     "rimraf": "6.0.1",
@@ -678,8 +682,9 @@
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@types/react": ">=17.0.30",
-    "react": ">=17.0.0 || >19.0.0-rc"
+    "@types/react": "^17.0.30 || ^18 || ^19",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/modal/Modal.test.tsx

@@ -2,7 +2,6 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React, { useState } from "react";
 import { describe, expect, test } from "vitest";
 import { Button, Modal } from "..";
-import { BODY_CLASS, BODY_CLASS_LEGACY } from "./ModalUtils";
 
 const Test = () => {
   const [open, setOpen] = useState(true);
@@ -29,35 +28,25 @@ describe("Modal", () => {
     expect(screen.getByText("Foobar")).not.toBeVisible();
   });
 
-  test("should toggle body class", async () => {
+  test("should toggle scroll lock", async () => {
     render(<Test />);
-    expect(document.body.classList).toContain(BODY_CLASS);
-    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
-    fireEvent.click(screen.getByText("Close"));
     await waitFor(() => {
-      expect(document.body.classList).not.toContain(BODY_CLASS);
+      expect(document.documentElement.style.overflowX).toBe("hidden");
     });
     await waitFor(() => {
-      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY);
+      expect(document.documentElement.style.overflowY).toBe("hidden");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.scrollBehavior).toBe("unset");
+    });
+    await waitFor(() => {
+      expect(document.documentElement.style.scrollbarGutter).toBe("stable");
     });
-  });
-
-  test("should toggle body class when using portal", async () => {
-    render(
-      <Modal portal open onClose={() => null} aria-label="Test">
-        <Modal.Header />
-      </Modal>,
-    );
-    expect(document.body.classList).toContain(BODY_CLASS);
-    expect(document.body.classList).toContain(BODY_CLASS_LEGACY);
 
-    fireEvent.click(screen.getByRole("button"));
-    await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS),
-    );
-    await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS_LEGACY),
-    );
+    fireEvent.click(screen.getByText("Close"));
+    await waitFor(() => {
+      expect(document.documentElement.style.cssText).toBe("");
+    });
   });
 });

package/src/modal/Modal.tsx

@@ -8,6 +8,7 @@ import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useScrollLock } from "../util/hooks/useScrollLock";
 import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
@@ -17,6 +18,7 @@ import {
   coordsAreInside,
   getCloseHandler,
   useBodyScrollLock,
+  useIsModalOpen,
 } from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
@@ -110,6 +112,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
 
     const dateContext = useDateInputContext(false);
     const isNested = useModalContext(false) !== undefined;
+
+    const isModalOpen = useIsModalOpen(modalRef.current);
+
     if (isNested && !dateContext) {
       console.error("Modals should not be nested");
     }
@@ -144,6 +149,17 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       }
     }, [portalNode, open]);
 
+    useScrollLock({
+      enabled: isModalOpen,
+      mounted: isModalOpen,
+      open: isModalOpen,
+      referenceElement: modalRef.current,
+    });
+
+    /**
+     * TODO: Kept for legacy support.
+     * - Remove utility in v8 and deprecate body-classes in ModalUtils.ts
+     */
     useBodyScrollLock(modalRef, portalNode, isNested);
 
     const isWidthPreset =

package/src/modal/ModalUtils.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { ownerDocument } from "../util/owner";
 import type { ModalProps } from "./types";
 
@@ -28,10 +28,36 @@ export function getCloseHandler(
   return () => modalRef.current?.close();
 }
 
+function useIsModalOpen(modalRef: HTMLDialogElement | null) {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useEffect(() => {
+    if (!modalRef) {
+      return;
+    }
+
+    setIsOpen(modalRef.open);
+
+    const observer = new MutationObserver(() => {
+      setIsOpen(modalRef.open);
+    });
+
+    observer.observe(modalRef, {
+      attributes: true,
+      attributeFilter: ["open"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [modalRef]);
+
+  return isOpen;
+}
+
 export const BODY_CLASS_LEGACY = "navds-modal__document-body";
-export const BODY_CLASS = "aksel-modal__document-body";
 
-export function useBodyScrollLock(
+function useBodyScrollLock(
   modalRef: React.RefObject<HTMLDialogElement | null>,
   portalNode: HTMLElement | null,
   isNested: boolean,
@@ -50,14 +76,14 @@ export function useBodyScrollLock(
 
     // In case `open` is true initially
     if (modalRef.current.open) {
-      ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
     }
 
     const observer = new MutationObserver(() => {
       if (modalRef.current?.open) {
-        ownerDoc.body.classList.add(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
       } else {
-        ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+        ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
       }
     });
 
@@ -69,7 +95,9 @@ export function useBodyScrollLock(
     return () => {
       observer.disconnect();
       // In case modal is unmounted before it's closed
-      ownerDoc.body.classList.remove(BODY_CLASS, BODY_CLASS_LEGACY);
+      ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
     };
   }, [modalRef, portalNode, isNested]);
 }
+
+export { useIsModalOpen, useBodyScrollLock };

package/src/process/Process.tsx

@@ -22,6 +22,11 @@ interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
    * @default false
    */
   hideStatusText?: boolean;
+  /**
+   * Indicates that the process is truncated and that there are more Events
+   * not shown either before, after or on both sides of the current list.
+   */
+  isTruncated?: "start" | "end" | "both";
 }
 
 type ProcessContextProps = Pick<ProcessProps, "hideStatusText"> & {
@@ -100,6 +105,7 @@ export const Process: ProcessComponent = forwardRef<
       className,
       hideStatusText = false,
       id,
+      isTruncated,
       ...restProps
     }: ProcessProps,
     forwardedRef,
@@ -157,6 +163,7 @@ export const Process: ProcessComponent = forwardRef<
         className={cn("navds-process", className)}
         id={rootId}
         aria-controls={activeChildId}
+        data-truncated={isTruncated}
       >
         <ProcessContextProvider
           hideStatusText={hideStatusText}
@@ -237,6 +244,7 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
         data-process-event=""
         data-status={status}
       >
+        <ProcessLine position="start" />
         <div className={cn("navds-process__item")}>
           <ProcessBullet>{bullet}</ProcessBullet>
 
@@ -256,7 +264,7 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
             )}
           </div>
         </div>
-        <ProcessLine />
+        <ProcessLine position="end" />
       </li>
     );
   },
@@ -346,10 +354,16 @@ const ProcessBullet = ({ children }: ProcessBulletProps) => {
 };
 
 /* ------------------------------ Process Line ------------------------------ */
-const ProcessLine = () => {
+
+type ProcessLineProps = {
+  position?: "start" | "end";
+};
+const ProcessLine = ({ position }: ProcessLineProps) => {
   const { cn } = useRenameCSS();
 
-  return <span className={cn("navds-process__line")} />;
+  return (
+    <span className={cn("navds-process__line")} data-position={position} />
+  );
 };
 
 /* -------------------------- Process exports ------------------------- */

package/src/timeline/Pin.tsx

@@ -94,6 +94,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       left: "right",
     }[placement.split("-")[0]];
 
+    const label = translate("Pin.pin", {
+      date: format(date, translate("dateFormat")),
+    });
+
     return (
       <>
         <div
@@ -104,9 +108,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             {...rest}
             ref={mergedRef}
             className={cn("navds-timeline__pin-button")}
-            aria-label={translate("Pin.pin", {
-              date: format(date, translate("dateFormat")),
-            })}
+            aria-label={label}
             type="button"
             aria-expanded={children ? open : undefined}
             {...getReferenceProps({
@@ -133,6 +135,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"
+              aria-label={label}
               {...getFloatingProps()}
               style={floatingStyles}
             >