@navikt/ds-react 7.32.3 → 7.32.5

package/src/util/hideNonTargetElements.ts

@@ -0,0 +1,179 @@
+/**
+ * Modified version of `aria-hidden`-package.
+ * - Removed "inert"-functionality.
+ * - Removed flexibility for different data-attributes.
+ * https://github.com/theKashey/aria-hidden/blob/720e8a8e1cfa047bd299a929d95d47ac860a5c1a/src/index.ts
+ */
+import { ownerDocument } from "./owner";
+
+type UndoFn = () => void;
+
+let ariaHiddenCounter = new WeakMap<Element, number>();
+let markerCounter = new WeakMap<Element, number>();
+
+let uncontrolledElementsSet = new WeakSet<Element>();
+let lockCount = 0;
+
+const controlAttribute = "aria-hidden";
+const markerName = "data-aksel-hidden";
+
+/**
+ * Unwraps a Shadow DOM host to find the actual Element in the light DOM.
+ */
+function unwrapHost(node: Element | ShadowRoot): Element | null {
+  return (
+    node &&
+    ((node as ShadowRoot).host || unwrapHost(node.parentNode as Element))
+  );
+}
+
+/**
+ * Corrects the target elements by unwrapping Shadow DOM hosts if necessary.
+ *
+ * @param parent - The parent HTMLElement to check containment against.
+ * @param targets - An array of target Elements to correct.
+ * @returns An array of corrected Elements that are contained within the parent.
+ */
+function correctElements(parent: HTMLElement, targets: Element[]): Element[] {
+  return targets
+    .map((target) => {
+      if (parent.contains(target)) {
+        return target;
+      }
+
+      const correctedTarget = unwrapHost(target);
+
+      if (parent.contains(correctedTarget)) {
+        return correctedTarget;
+      }
+
+      return null;
+    })
+    .filter((x): x is Element => x !== null);
+}
+
+/**
+ * Applies the aria-hidden attribute to all elements in the body except the specified avoid elements.
+ */
+function applyAttributeToOthers(
+  uncorrectedAvoidElements: Element[],
+  body: HTMLElement,
+): UndoFn {
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const elementsToAvoidWithParents = new Set<Node>();
+  const elementsToAvoidUpdating = new Set<Node>(avoidElements);
+  const hiddenElements: Element[] = [];
+
+  avoidElements.forEach(addToAvoidList);
+  applyAttributes(body);
+  elementsToAvoidWithParents.clear();
+
+  function addToAvoidList(el: Node | undefined) {
+    if (!el || elementsToAvoidWithParents.has(el)) {
+      return;
+    }
+
+    elementsToAvoidWithParents.add(el);
+    if (el.parentNode) {
+      addToAvoidList(el.parentNode);
+    }
+  }
+
+  function applyAttributes(parent: Element | null) {
+    if (!parent || elementsToAvoidUpdating.has(parent)) {
+      return;
+    }
+
+    const parentChildren = parent.children;
+
+    for (let index = 0; index < parentChildren.length; index += 1) {
+      const node = parentChildren[index] as Element;
+
+      if (elementsToAvoidWithParents.has(node)) {
+        applyAttributes(node);
+      } else {
+        const attr = node.getAttribute(controlAttribute);
+
+        /*
+         * We only check for falsy values here since since arbitrary values
+         * (e.g. "true", "foo", "") are all valid for indicating that the element is already hidden.
+         */
+        const alreadyHidden = attr !== null && attr !== "false";
+        const counterValue = (ariaHiddenCounter.get(node) || 0) + 1;
+        const markerValue = (markerCounter.get(node) || 0) + 1;
+
+        ariaHiddenCounter.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenElements.push(node);
+
+        if (counterValue === 1 && alreadyHidden) {
+          uncontrolledElementsSet.add(node);
+        }
+
+        if (markerValue === 1) {
+          node.setAttribute(markerName, "");
+        }
+
+        if (!alreadyHidden) {
+          node.setAttribute(controlAttribute, "true");
+        }
+      }
+    }
+  }
+
+  lockCount += 1;
+
+  /* Cleanup */
+  return () => {
+    for (const element of hiddenElements) {
+      const currentCounterValue = ariaHiddenCounter.get(element) || 0;
+      const counterValue = currentCounterValue - 1;
+      const markerValue = (markerCounter.get(element) || 0) - 1;
+
+      ariaHiddenCounter.set(element, counterValue);
+      markerCounter.set(element, markerValue);
+
+      if (!counterValue) {
+        if (!uncontrolledElementsSet.has(element)) {
+          element.removeAttribute(controlAttribute);
+        }
+
+        uncontrolledElementsSet.delete(element);
+      }
+
+      if (!markerValue) {
+        element.removeAttribute(markerName);
+      }
+    }
+
+    lockCount -= 1;
+
+    /* Reset */
+    if (!lockCount) {
+      ariaHiddenCounter = new WeakMap();
+      uncontrolledElementsSet = new WeakSet();
+      markerCounter = new WeakMap();
+    }
+  };
+}
+
+/**
+ * Hides all elements in the document body for assertive technologies except the specified elements with `aria-hidden`.
+ * @param avoidElements - An array of elements to avoid hiding.
+ * @returns A function that, when called, will undo the hiding of elements.
+ */
+function hideNonTargetElements(avoidElements: Element[]): UndoFn {
+  const body = ownerDocument(avoidElements[0]).body;
+
+  /**
+   * Assume that elements with `aria-live` or `script` tags should not be hidden.
+   * This ensures that live regions and scripts continue to function properly.
+   */
+  const ingoredElements = Array.from(
+    body.querySelectorAll("[aria-live], script"),
+  );
+
+  return applyAttributeToOthers(avoidElements.concat(ingoredElements), body);
+}
+
+export { hideNonTargetElements };

package/src/util/hooks/useScrollLock.ts

@@ -0,0 +1,317 @@
+import { isIOS, isWebKit } from "../detectBrowser";
+import { ownerDocument, ownerWindow } from "../owner";
+import { useClientLayoutEffect } from "./useClientLayoutEffect";
+import { Timeout } from "./useTimeout";
+
+let originalHtmlStyles: Partial<CSSStyleDeclaration> = {};
+let originalBodyStyles: Partial<CSSStyleDeclaration> = {};
+let originalHtmlScrollBehavior = "";
+
+function hasInsetScrollbars(referenceElement: Element | null) {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const doc = ownerDocument(referenceElement);
+  const win = ownerWindow(doc);
+  return win.innerWidth - doc.documentElement.clientWidth > 0;
+}
+
+function preventScrollBasic(referenceElement: Element | null) {
+  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: Element | null) {
+  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 && (win.visualViewport?.scale ?? 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: */
+
+    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" &&
+      CSS.supports?.("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 {
+  lockCount = 0;
+  restore: (() => void) | null = null;
+  timeoutLock = Timeout.create();
+  timeoutUnlock = Timeout.create();
+
+  /**
+   * Aquires a new lock
+   * - If first lock, lock document-scroll.
+   * - If not first lock, do nothing.
+   */
+  acquire(referenceElement: Element | null) {
+    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;
+  }
+
+  /**
+   * Releases a lock
+   * - If last lock, unlock document-scroll.
+   * - If not last lock, do nothing.
+   */
+  release = () => {
+    this.lockCount -= 1;
+    if (this.lockCount === 0 && this.restore) {
+      this.timeoutUnlock.start(0, this.unlock);
+    }
+  };
+
+  private unlock = () => {
+    if (this.lockCount === 0 && this.restore) {
+      this.restore?.();
+      this.restore = null;
+    }
+  };
+
+  private lock(referenceElement: Element | null) {
+    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: {
+  enabled: boolean;
+  mounted: boolean;
+  open: boolean;
+  referenceElement?: Element | null;
+}) {
+  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 };