@navikt/ds-react 7.33.0 → 7.33.1

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;
+}

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

@@ -0,0 +1,61 @@
+type DismissableLayerElement = HTMLDivElement;
+
+/**
+ * Returns an array of layers sorted such that parents appear before their children.
+ *
+ * **Why**:
+ * - mount order for parent-child relationships is unstable due to portals
+ * - event handling relies on parents being before children in the array
+ *
+ * This function ensures that for any parent-child relationship, the parent layer
+ * will always appear before its child layer in the returned array,
+ * resulting in consistent behavior.
+ *
+ * @param layers - A set of DismissableLayerElements to be sorted.
+ * @param branchedLayers - A map where each key is a parent layer and its value is a set of child layers.
+ * @returns An array of DismissableLayerElements sorted by parent-child relationships.
+ */
+function getSortedLayers(
+  layers: Set<DismissableLayerElement>,
+  branchedLayers: Map<DismissableLayerElement, Set<DismissableLayerElement>>,
+): DismissableLayerElement[] {
+  const sorted: DismissableLayerElement[] = [];
+  const visited = new Set<DismissableLayerElement>();
+  const parentMap = new Map<DismissableLayerElement, DismissableLayerElement>();
+
+  branchedLayers.forEach((children, parent) => {
+    children.forEach((child) => {
+      if (child !== parent) {
+        parentMap.set(child, parent);
+      }
+    });
+  });
+
+  const walk = (layer: DismissableLayerElement) => {
+    if (visited.has(layer)) {
+      return;
+    }
+
+    const parent = parentMap.get(layer);
+    if (parent && !visited.has(parent)) {
+      walk(parent);
+      if (visited.has(layer)) {
+        return;
+      }
+    }
+
+    visited.add(layer);
+    sorted.push(layer);
+
+    const children = branchedLayers.get(layer);
+    if (children) {
+      children.forEach(walk);
+    }
+  };
+
+  layers.forEach(walk);
+
+  return sorted;
+}
+
+export { getSortedLayers };

package/src/overlays/floating-menu/Menu.tsx

@@ -243,7 +243,7 @@ type DismissableLayerProps = React.ComponentPropsWithoutRef<
 >;
 
 type MenuContentInternalPrivateProps = {
-  onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
+  initialFocus?: FocusScopeProps["initialFocus"];
   onDismiss?: DismissableLayerProps["onDismiss"];
   disableOutsidePointerEvents?: DismissableLayerProps["disableOutsidePointerEvents"];
 };
@@ -254,11 +254,7 @@ interface MenuContentInternalProps
       React.ComponentPropsWithoutRef<typeof Floating.Content>,
       "dir" | "onPlaced"
     > {
-  /**
-   * Event handler called when auto-focusing after close.
-   * Can be prevented.
-   */
-  onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
+  returnFocus?: FocusScopeProps["returnFocus"];
   onEntryFocus?: RovingFocusProps["onEntryFocus"];
   onEscapeKeyDown?: DismissableLayerProps["onEscapeKeyDown"];
   onPointerDownOutside?: DismissableLayerProps["onPointerDownOutside"];
@@ -273,8 +269,8 @@ const MenuContentInternal = forwardRef<
 >(
   (
     {
-      onOpenAutoFocus,
-      onCloseAutoFocus,
+      initialFocus,
+      returnFocus,
       disableOutsidePointerEvents,
       onEntryFocus,
       onEscapeKeyDown,
@@ -301,13 +297,8 @@ const MenuContentInternal = forwardRef<
 
     return (
       <FocusBoundary
-        onMountAutoFocus={composeEventHandlers(onOpenAutoFocus, (event) => {
-          // when opening, explicitly focus the content area only and leave
-          // `onEntryFocus` in  control of focusing first item
-          event.preventDefault();
-          contentRef.current?.focus({ preventScroll: true });
-        })}
-        onUnmountAutoFocus={onCloseAutoFocus}
+        initialFocus={initialFocus ?? contentRef}
+        returnFocus={returnFocus}
         /* Focus trapping is handled in `Floating.Content: onKeyDown */
         trapped={false}
         loop={false}
@@ -588,7 +579,7 @@ const MenuPortal = forwardRef<MenuPortalElement, MenuPortalProps>(
     }
 
     return (
-      <Portal asChild rootElement={rootElement} ref={ref}>
+      <Portal rootElement={rootElement} ref={ref}>
         {children}
       </Portal>
     );
@@ -917,15 +908,14 @@ const MenuSubContent = forwardRef<
         align="start"
         side="right"
         disableOutsidePointerEvents={false}
-        onOpenAutoFocus={(event) => {
-          // when opening a submenu, focus content for keyboard users only
+        initialFocus={() => {
           if (rootContext.isUsingKeyboardRef.current) {
-            ref.current?.focus();
+            return ref.current;
           }
-          event.preventDefault();
+          return false;
         }}
         /* Since we manually focus Subtrigger, we prevent use of auto-focus */
-        onCloseAutoFocus={(event) => event.preventDefault()}
+        returnFocus={false}
         onEscapeKeyDown={composeEventHandlers(
           props.onEscapeKeyDown,
           (event) => {

package/src/popover/Popover.tsx

@@ -174,7 +174,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         asChild
         safeZone={{
           anchor: anchorEl,
-          dismissable: refs.floating.current,
         }}
         onDismiss={() => open && onClose?.()}
         enabled={open}

package/src/portal/Portal.tsx

@@ -1,53 +1,111 @@
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, {
+  HTMLAttributes,
+  createContext,
+  forwardRef,
+  useContext,
+} from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
-import { Slot } from "../slot/Slot";
 import { Theme, useThemeInternal } from "../theme/Theme";
-import { AsChildProps } from "../util/types";
+import { useClientLayoutEffect, useMergeRefs } from "../util/hooks";
 
-interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
+export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * An optional container where the portaled content should be appended.
    */
   rootElement?: HTMLElement | null;
 }
 
-export type PortalProps = PortalBaseProps & AsChildProps;
+const PortalContext = createContext<HTMLElement | null>(null);
 
 export const Portal = forwardRef<HTMLDivElement, PortalProps>(
-  ({ rootElement, asChild, ...rest }, ref) => {
-    const themeContext = useThemeInternal(false);
-    const contextRoot = useProvider()?.rootElement;
-    const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
+  ({ rootElement, children, ...restProps }, forwardedRef) => {
+    const providerRootElement = useProvider()?.rootElement;
+
+    const parentPortalNode = useContext(PortalContext);
+
+    const [containerElement, setContainerElement] = React.useState<
+      HTMLElement | ShadowRoot | null
+    >(null);
+    const [portalNode, setPortalNode] = React.useState<HTMLElement | null>(
+      null,
+    );
+
+    const containerRef = React.useRef<HTMLElement | ShadowRoot | null>(null);
 
-    const Component = asChild ? Slot : "div";
+    const mergedRefs = useMergeRefs(forwardedRef, setPortalNode);
 
     /**
-     * Portal can be mounted outside of theme-classNames.
-     * If a theme is present, we want to make sure that theme cascades to portaled element.
+     * We update container in effect to avoid SSR mismatches.
      */
+    useClientLayoutEffect(() => {
+      /* Wait for the container to be resolved if explicitly `null`. */
+      if ((rootElement ?? providerRootElement) === null) {
+        if (containerRef.current) {
+          containerRef.current = null;
+          setPortalNode(null);
+          setContainerElement(null);
+        }
+        return;
+      }
+
+      const resolvedContainer =
+        rootElement ??
+        parentPortalNode ??
+        providerRootElement ??
+        globalThis?.document?.body;
+
+      if (resolvedContainer === null) {
+        if (containerRef.current) {
+          containerRef.current = null;
+          setPortalNode(null);
+          setContainerElement(null);
+        }
+        return;
+      }
+
+      if (containerRef.current !== resolvedContainer) {
+        containerRef.current = resolvedContainer;
+        setPortalNode(null);
+        setContainerElement(resolvedContainer);
+      }
+    }, [parentPortalNode, providerRootElement, rootElement]);
+
+    if (!containerElement) {
+      return null;
+    }
+
+    return ReactDOM.createPortal(
+      <PortalDiv ref={mergedRefs} {...restProps} data-aksel-portal="">
+        <PortalContext.Provider value={portalNode}>
+          {children}
+        </PortalContext.Provider>
+      </PortalDiv>,
+      containerElement,
+    );
+  },
+);
+
+type PortalDivProps = React.HTMLAttributes<HTMLDivElement>;
+
+const PortalDiv = forwardRef<HTMLDivElement, PortalDivProps>(
+  (props: PortalDivProps, forwardedRef) => {
+    const themeContext = useThemeInternal(false);
+
     if (themeContext?.isDarkside) {
-      return root
-        ? ReactDOM.createPortal(
-            <Theme
-              theme={themeContext.theme}
-              asChild
-              hasBackground={false}
-              data-color={themeContext.color}
-            >
-              <Component ref={ref} data-aksel-portal="" {...rest} />
-            </Theme>,
-            root,
-          )
-        : null;
+      return (
+        <Theme
+          theme={themeContext?.theme}
+          asChild
+          hasBackground={false}
+          data-color={themeContext?.color}
+        >
+          <div ref={forwardedRef} {...props} />
+        </Theme>
+      );
     }
 
-    return root
-      ? ReactDOM.createPortal(
-          <Component ref={ref} data-aksel-portal="" {...rest} />,
-          root,
-        )
-      : null;
+    return <div ref={forwardedRef} {...props} />;
   },
 );
 

package/src/tooltip/Tooltip.tsx

@@ -209,8 +209,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         >
           {children}
         </Slot>
-        <Portal rootElement={rootElement} asChild>
-          {_open && (
+        {_open && (
+          <Portal rootElement={rootElement}>
             <div
               {...getFloatingProps({
                 ...rest,
@@ -267,8 +267,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 />
               )}
             </div>
-          )}
-        </Portal>
+          </Portal>
+        )}
       </>
     );
   },