@navikt/ds-react 7.33.0 → 7.33.2

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -1,24 +1,21 @@
-import React, {
-  CSSProperties,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useContext, useEffect, useState } from "react";
 import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
-import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
 import { ownerDocument } from "../../util/owner";
 import { AsChild } from "../../util/types/AsChild";
 import {
   CustomFocusEvent,
   CustomPointerDownEvent,
 } from "./util/dispatchCustomEvent";
+import { getSortedLayers } from "./util/sort-layers";
 import { useEscapeKeydown } from "./util/useEscapeKeydown";
 import { useFocusOutside } from "./util/useFocusOutside";
 import { usePointerDownOutside } from "./util/usePointerDownOutside";
 
-interface DismissableLayerBaseProps {
+interface DismissableLayerBaseProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * When `true`, hover/focus/click interactions will be disabled on elements outside
    * the `DismissableLayer`. Users will need to click twice on outside elements to
@@ -54,185 +51,131 @@ interface DismissableLayerBaseProps {
   onDismiss?: () => void;
   /**
    * Stops `onDismiss` from beeing called when interacting with the `safeZone` elements.
-   * `safeZone.dismissable` is only needed when its element does not have a `tabIndex` since it will not receive focus-events.
    */
   safeZone?: {
     anchor?: Element | null;
-    dismissable?: Element | null;
   };
-
-  style?: CSSProperties;
   /**
-   * Disables layer from beeing counted in context for nested `DismissableLayer`.
+   * @default true
    */
   enabled?: boolean;
 }
 
 type DismissableLayerProps = DismissableLayerBaseProps & AsChild;
 
-export const [
-  DismissableDescendantsProvider,
-  useDismissableDescendantsContext,
-  useDismissableDescendants,
-  useDismissableDescendant,
-] = createDescendantContext<
-  HTMLDivElement,
-  { disableOutsidePointerEvents: boolean; forceUpdate: () => void }
->();
-
-/**
- * Number of layers with `disableOutsidePointerEvents` set to `true` currently enabled.
- */
-let bodyLockCount = 0;
-let originalBodyPointerEvents: string;
-
 const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
-  (props: DismissableLayerProps, ref) => {
-    const context = useDismissableDescendantsContext(false);
+  ({ enabled = true, ...restProps }: DismissableLayerProps, forwardedRef) => {
+    if (!enabled) {
+      const Component = restProps.asChild ? Slot : "div";
+      return (
+        <Component
+          {...omit(restProps, [
+            "asChild",
+            "disableOutsidePointerEvents",
+            "onDismiss",
+            "onEscapeKeyDown",
+            "onFocusOutside",
+            "onInteractOutside",
+            "onPointerDownOutside",
+            "safeZone",
+          ])}
+          ref={forwardedRef}
+        />
+      );
+    }
 
-    /**
-     * To correctly handle nested DismissableLayer,
-     * we only initialize the `Descendants`-API for the root layer to aboid resetting context
-     */
-    return context ? (
-      <DismissableLayerNode ref={ref} {...props} />
-    ) : (
-      <DismissableRoot>
-        <DismissableLayerNode ref={ref} {...props} />
-      </DismissableRoot>
-    );
+    return <DismissableLayerInternal {...restProps} ref={forwardedRef} />;
   },
 );
 
-/**
- * DismissableRoot
- *
- * Used to initialize the `Descendants`-API at the root layer.
- * All subsequent layers will use the same context.
- */
-const DismissableRoot = ({ children }: { children: React.ReactNode }) => {
-  const descendants = useDismissableDescendants();
+type DismissableLayerElement = React.ComponentRef<
+  typeof DismissableLayerInternal
+>;
+
+const BranchedLayerContext =
+  React.createContext<DismissableLayerElement | null>(null);
+
+/* ------------------------ DismissableLayerInternal ------------------------ */
+const CONTEXT_UPDATE_EVENT = "dismissableLayer.update";
+let originalBodyPointerEvents: string;
 
-  return (
-    <DismissableDescendantsProvider value={descendants}>
-      {children}
-    </DismissableDescendantsProvider>
-  );
-};
+const DismissableLayerContext = React.createContext({
+  layers: new Set<DismissableLayerElement>(),
+  branchedLayers: new Map<
+    DismissableLayerElement,
+    Set<DismissableLayerElement>
+  >(),
+  layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),
+});
 
-const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
+const DismissableLayerInternal = forwardRef<
+  HTMLDivElement,
+  DismissableLayerProps
+>(
   (
     {
       children,
-      asChild,
+      disableOutsidePointerEvents,
+      onDismiss,
+      onInteractOutside,
       onEscapeKeyDown,
-      onPointerDownOutside,
       onFocusOutside,
-      onInteractOutside,
-      onDismiss,
+      onPointerDownOutside,
       safeZone,
-      disableOutsidePointerEvents = false,
-      enabled = true,
-      ...rest
+      asChild,
+      ...restProps
     }: DismissableLayerProps,
-    ref,
+    forwardedRef,
   ) => {
-    const [, setForce] = useState({});
-    const { register, index, descendants } = useDismissableDescendant({
-      disableOutsidePointerEvents,
-      disabled: !enabled,
-      forceUpdate: () => setForce({}),
-    });
-
-    /**
-     * `node` will be set to the ref of the component or nested component
-     * Ex: If
-     * ```
-     * <DismissableLayer asChild>
-     *   <Popover />
-     * </DismissableLayer>
-     * ```
-     * `node` will in this case be the Popover-element.
-     * We use State her and not ref since we want to trigger a rerender when the node changes.
-     */
-    const [node, setNode] = useState<HTMLDivElement | null>(null);
-
-    const mergedRefs = useMergeRefs(setNode, register, ref);
+    const context = useContext(DismissableLayerContext);
 
+    const [, forceRerender] = useState({});
+    const [node, setNode] = React.useState<DismissableLayerElement | null>(
+      null,
+    );
+    const mergedRefs = useMergeRefs(forwardedRef, setNode);
     const ownerDoc = ownerDocument(node);
 
-    const hasInteractedOutsideRef = useRef(false);
-    const hasPointerDownOutsideRef = useRef(false);
-
-    const pointerState = (() => {
-      let lastIndex = -1;
-
-      const descendantNodes = descendants.enabledValues();
-
-      descendantNodes.forEach((obj, _index) => {
-        if (obj.disableOutsidePointerEvents) {
-          lastIndex = _index;
-        }
-      });
-
-      return {
-        /**
-         * Makes sure we stop events at the highest layer with pointer events disabled.
-         * If not checked, we risk closing every layer when clicking outside the layer.
-         */
-        isPointerEventsEnabled: index >= lastIndex,
-        /**
-         * If we find a node with `disableOutsidePointerEvents` we want to disable pointer events on the body.
-         */
-        isBodyPointerEventsDisabled: bodyLockCount > 0,
-        pointerStyle: (index >= lastIndex && bodyLockCount > 0
-          ? "auto"
-          : undefined) as CSSProperties["pointerEvents"] | undefined,
-      };
-    })();
+    /* Layer handling */
+    const layers = getSortedLayers(context.layers, context.branchedLayers);
+    const highestLayerWithOutsidePointerEventsDisabledIndex =
+      findHighestLayerIndex(
+        layers,
+        context.layersWithOutsidePointerEventsDisabled,
+      );
+    const index = node ? layers.indexOf(node) : -1;
+    const isBodyPointerEventsDisabled =
+      context.layersWithOutsidePointerEventsDisabled.size > 0;
+    const shouldEnablePointerEvents =
+      highestLayerWithOutsidePointerEventsDisabledIndex === -1 ||
+      index >= highestLayerWithOutsidePointerEventsDisabledIndex;
 
     /**
-     * We want to prevent the Layer from closing when the trigger, anchor element, or its child elements are interacted with.
-     *
-     * To achieve this, we check if the event target is the trigger, anchor or a child. If it is, we prevent default event behavior.
-     *
-     * The `pointerDownOutside` and `focusOutside` handlers already check if the event target is within the DismissableLayer (`node`).
-     * However, since we don't add a `tabIndex` to the Popover/Tooltip, the `focusOutside` handler doesn't correctly handle focus events.
-     * Therefore, we also need to check that neither the trigger (`anchor`) nor the DismissableLayer (`dismissable`) are the event targets.
+     * We want to prevent the Layer from closing when the trigger/anchor element or its child elements are interacted with.
+     * To achieve this, we check if the event target is the trigger/anchor or a child. If it is, we prevent default event behavior.
      */
     function handleOutsideEvent(
       event: CustomFocusEvent | CustomPointerDownEvent,
     ) {
-      if ((!safeZone?.anchor && !safeZone?.dismissable) || !enabled) {
+      if (!safeZone?.anchor) {
         return;
       }
 
+      let hasPointerDownOutside = false;
+
       if (!event.defaultPrevented) {
-        hasInteractedOutsideRef.current = true;
         if (event.detail.originalEvent.type === "pointerdown") {
-          hasPointerDownOutsideRef.current = true;
+          hasPointerDownOutside = true;
         }
       }
 
       const target = event.target as HTMLElement;
 
-      /**
-       * pointerdown-events works as expected, but focus-events does not.
-       * For focus-event we need to also check `safeZone.dismissable` (the Popover/Tooltip itself) since it does not have a tabIndex.
-       */
-      if (event.detail.originalEvent.type === "pointerdown") {
-        const targetIsTrigger =
-          safeZone?.anchor?.contains(target) || target === safeZone?.anchor;
-        targetIsTrigger && event.preventDefault();
-      } else {
-        const targetIsNotTrigger =
-          target instanceof HTMLElement &&
-          ![safeZone?.anchor, safeZone?.dismissable].some(
-            (element) => element?.contains(target as Node),
-          ) &&
-          !target.contains(safeZone?.dismissable ?? null);
-
-        !targetIsNotTrigger && event.preventDefault();
+      const targetIsAnchor =
+        safeZone.anchor.contains(target) || target === safeZone.anchor;
+
+      if (targetIsAnchor) {
+        event.preventDefault();
       }
 
       /**
@@ -245,21 +188,19 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
        */
       if (
         event.detail.originalEvent.type === "focusin" &&
-        hasPointerDownOutsideRef.current
+        hasPointerDownOutside
       ) {
         event.preventDefault();
       }
-      hasPointerDownOutsideRef.current = false;
-      hasInteractedOutsideRef.current = false;
     }
 
     const pointerDownOutside = usePointerDownOutside((event) => {
-      if (!pointerState.isPointerEventsEnabled || !enabled) {
+      if (!shouldEnablePointerEvents) {
         return;
       }
 
       /**
-       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
        */
       onPointerDownOutside?.(event);
       onInteractOutside?.(event);
@@ -269,21 +210,14 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
        */
       safeZone && handleOutsideEvent(event);
 
-      /**
-       * Both `onPointerDownOutside` and `onInteractOutside` are able to preventDefault the event, thus stopping call for `onDismiss`.
-       */
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
     }, ownerDoc);
 
     const focusOutside = useFocusOutside((event) => {
-      if (!enabled) {
-        return;
-      }
-
       /**
-       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+       * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
        */
       onFocusOutside?.(event);
       onInteractOutside?.(event);
@@ -293,25 +227,17 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
        */
       safeZone && handleOutsideEvent(event);
 
-      /**
-       * Both `onFocusOutside` and `onInteractOutside` are able to preventDefault the event, thus stopping call for `onDismiss`.
-       */
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
     }, ownerDoc);
 
     useEscapeKeydown((event) => {
-      if (!enabled) {
-        return;
-      }
       /**
        * The deepest nested element will always be last in the descendants list.
        * This allows us to only close the highest layer when pressing escape.
-       *
-       * In some cases a layer might still exist, but be disabled. We want to ignore these layers.
        */
-      const isHighestLayer = index === descendants.enabledCount() - 1;
+      const isHighestLayer = index === context.layers.size - 1;
       if (!isHighestLayer) {
         return;
       }
@@ -331,53 +257,152 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     }, ownerDoc);
 
     /**
-     * If `disableOutsidePointerEvents` is true,
-     * we want to disable pointer events on the body when the first layer is opened.
+     * Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
      */
-
-    // biome-ignore lint/correctness/useExhaustiveDependencies: Every time the descendants change, we want to update the body pointer events since we might have added or removed a layer.
     useEffect(() => {
-      if (!node || !enabled || !disableOutsidePointerEvents) return;
+      if (!node) {
+        return;
+      }
 
-      if (bodyLockCount === 0) {
-        originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
-        ownerDoc.body.style.pointerEvents = "none";
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+          originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
+          ownerDoc.body.style.pointerEvents = "none";
+        }
+        context.layersWithOutsidePointerEventsDisabled.add(node);
       }
-      bodyLockCount++;
+      context.layers.add(node);
+      dispatchUpdate();
+
       return () => {
-        if (bodyLockCount === 1) {
+        if (
+          disableOutsidePointerEvents &&
+          context.layersWithOutsidePointerEventsDisabled.size === 1
+        ) {
           ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
         }
-        bodyLockCount--;
       };
-    }, [node, ownerDoc, disableOutsidePointerEvents, descendants, enabled]);
+    }, [node, disableOutsidePointerEvents, context, ownerDoc]);
 
     /**
-     * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM
+     * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
+     * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
+     * and add it to the end again so the layering order wouldn't be creation order.
+     * We only want them to be removed from context stacks when unmounted.
      */
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this on unmount, including every time the node updates to make sure we don't lock the application behind pointer-events: none.
     useEffect(() => {
-      return () => descendants.values().forEach((x) => x.forceUpdate());
-    }, [descendants, node]);
+      return () => {
+        if (!node) {
+          return;
+        }
+
+        context.layers.delete(node);
+        context.layersWithOutsidePointerEventsDisabled.delete(node);
+        dispatchUpdate();
+      };
+    }, [node, context]);
+
+    const parentBranchedLayer = useContext(BranchedLayerContext);
+
+    /**
+     * Handles registering and unregistering branched (nested) layers.
+     * When this layer has a parent, we register it as a child of the parent.
+     */
+    useEffect(() => {
+      if (!node || !parentBranchedLayer || node === parentBranchedLayer) {
+        return;
+      }
+
+      if (!context.branchedLayers.has(parentBranchedLayer)) {
+        context.branchedLayers.set(parentBranchedLayer, new Set());
+      }
+
+      const branchedChildren = context.branchedLayers.get(parentBranchedLayer)!;
+      branchedChildren.add(node);
+      dispatchUpdate();
+
+      return () => {
+        // Remove this node from the parent's children
+        branchedChildren.delete(node);
+
+        // If the parent has no more children, remove the parent from branchedLayers
+        if (branchedChildren.size === 0) {
+          context.branchedLayers.delete(parentBranchedLayer);
+        }
+
+        dispatchUpdate();
+      };
+    }, [node, parentBranchedLayer, context]);
+
+    /**
+     * Synchronizes layer state across all mounted `DismissableLayer` instances.
+     * All layers re-render on every context change to recalculate their position and pointer-events.
+     */
+    useEffect(() => {
+      const handleUpdate = () => forceRerender({});
+      document.addEventListener(CONTEXT_UPDATE_EVENT, handleUpdate);
+      return () =>
+        document.removeEventListener(CONTEXT_UPDATE_EVENT, handleUpdate);
+    }, []);
 
     const Comp = asChild ? Slot : "div";
 
     return (
-      <Comp
-        ref={mergedRefs}
-        {...rest}
-        onFocusCapture={focusOutside.onFocusCapture}
-        onBlurCapture={focusOutside.onBlurCapture}
-        onPointerDownCapture={pointerDownOutside.onPointerDownCapture}
-        style={{
-          pointerEvents: pointerState.pointerStyle,
-          ...rest.style,
-        }}
-      >
-        {children}
-      </Comp>
+      <BranchedLayerContext.Provider value={node}>
+        <Comp
+          {...restProps}
+          ref={mergedRefs}
+          style={{
+            pointerEvents: isBodyPointerEventsDisabled
+              ? shouldEnablePointerEvents
+                ? "auto"
+                : "none"
+              : undefined,
+            ...restProps.style,
+          }}
+          onFocusCapture={composeEventHandlers(
+            restProps.onFocusCapture,
+            focusOutside.onFocusCapture,
+          )}
+          onBlurCapture={composeEventHandlers(
+            restProps.onBlurCapture,
+            focusOutside.onBlurCapture,
+          )}
+          onPointerDownCapture={composeEventHandlers(
+            restProps.onPointerDownCapture,
+            pointerDownOutside.onPointerDownCapture,
+          )}
+        >
+          {children}
+        </Comp>
+      </BranchedLayerContext.Provider>
     );
   },
 );
 
+/**
+ * Dispatches a custom event to inform all `DismissableLayer` components to update.
+ */
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE_EVENT);
+  document.dispatchEvent(event);
+}
+
+/**
+ * Returns the index of the last layer that is found in the given subset.
+ * Returns -1 if no layers are found.
+ */
+function findHighestLayerIndex(
+  orderedLayers: DismissableLayerElement[],
+  layersWithOutsidePointerEventsDisabled: Set<DismissableLayerElement>,
+): number {
+  for (let i = orderedLayers.length - 1; i >= 0; i -= 1) {
+    if (layersWithOutsidePointerEventsDisabled.has(orderedLayers[i])) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
 export { DismissableLayer, type DismissableLayerProps };

package/src/overlays/dismissablelayer/util/sort-layers.test.ts

@@ -0,0 +1,128 @@
+import { describe, expect, test } from "vitest";
+import { getSortedLayers } from "./sort-layers";
+
+type DismissableLayerElement = HTMLDivElement;
+
+describe("DismissableLayer: getSortedLayers", () => {
+  beforeAll(() => {
+    /* Reset id counter before tests to ensure consistent element ids */
+    idCounter = 0;
+  });
+
+  test("should return empty array when no layers", () => {
+    const layers = new Set<DismissableLayerElement>();
+    const branchedLayers = new Map();
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([]);
+  });
+
+  test("should return single layer", () => {
+    const layer = createTestElement();
+    const layers = new Set([layer]);
+    const branchedLayers = new Map();
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([layer]);
+  });
+
+  test("should return multiple independent layers in order", () => {
+    const layer1 = createTestElement();
+    const layer2 = createTestElement();
+    const layer3 = createTestElement();
+    const layers = new Set([layer1, layer2, layer3]);
+    const branchedLayers = new Map();
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([layer1, layer2, layer3]);
+  });
+
+  test("should sort parent before child", () => {
+    const parent = createTestElement();
+    const child = createTestElement();
+    const layers = new Set([child, parent]);
+    const branchedLayers = new Map([[parent, new Set([child])]]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([parent, child]);
+  });
+
+  test("should handle nested parent-child relationships", () => {
+    const grandparent = createTestElement();
+    const parent = createTestElement();
+    const child = createTestElement();
+    const layers = new Set([child, parent, grandparent]);
+    const branchedLayers = new Map([
+      [grandparent, new Set([parent])],
+      [parent, new Set([child])],
+    ]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([grandparent, parent, child]);
+  });
+
+  test("should handle multiple children of same parent", () => {
+    const parent = createTestElement();
+    const child1 = createTestElement();
+    const child2 = createTestElement();
+    const layers = new Set([child1, child2, parent]);
+    const branchedLayers = new Map([[parent, new Set([child1, child2])]]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result[0]).toBe(parent);
+    expect(result.slice(1)).toContain(child1);
+    expect(result.slice(1)).toContain(child2);
+    expect(result).toHaveLength(3);
+  });
+
+  test("should handle complex branched structure", () => {
+    const root = createTestElement();
+    const branch1 = createTestElement();
+    const branch2 = createTestElement();
+    const leaf1 = createTestElement();
+    const leaf2 = createTestElement();
+
+    const layers = new Set([root, branch1, branch2, leaf1, leaf2]);
+    const branchedLayers = new Map([
+      [root, new Set([branch1, branch2])],
+      [branch1, new Set([leaf1])],
+      [branch2, new Set([leaf2])],
+    ]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result[0]).toBe(root);
+    expect(result.indexOf(branch1)).toBeLessThan(result.indexOf(leaf1));
+    expect(result.indexOf(branch2)).toBeLessThan(result.indexOf(leaf2));
+    expect(result).toHaveLength(5);
+  });
+
+  test("should ignore self-referential children", () => {
+    const layer = createTestElement();
+    const layers = new Set([layer]);
+    const branchedLayers = new Map([[layer, new Set([layer])]]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toEqual([layer]);
+  });
+
+  test("should handle mixed independent and branched layers", () => {
+    const independent = createTestElement();
+    const parent = createTestElement();
+    const child = createTestElement();
+    const layers = new Set([independent, parent, child]);
+    const branchedLayers = new Map([[parent, new Set([child])]]);
+
+    const result = getSortedLayers(layers, branchedLayers);
+    expect(result).toContain(independent);
+    expect(result.indexOf(parent)).toBeLessThan(result.indexOf(child));
+    expect(result).toHaveLength(3);
+  });
+});
+
+let idCounter = 0;
+
+function createTestElement() {
+  const element = document.createElement("div");
+  element.id = `layer-${idCounter++}`;
+  return element;
+}