@navikt/ds-react 7.33.0 → 7.33.2

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/timeline/Timeline.tsx

@@ -2,7 +2,6 @@ import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { useRenameCSS } from "../theme/Theme";
 import { AxisLabels } from "./AxisLabels";
-import Pin, { PinType } from "./Pin";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
@@ -12,6 +11,7 @@ import {
   useTimelineRows,
 } from "./hooks/useTimelineRows";
 import Period, { PeriodType } from "./period";
+import Pin, { PinType } from "./pin/Pin";
 import { parseRows } from "./utils/timeline";
 import { AxisLabelTemplates } from "./utils/types.external";
 import Zoom, { ZoomType } from "./zoom";

package/src/timeline/index.ts

@@ -1,7 +1,7 @@
 "use client";
 export { default as Timeline, type TimelineProps } from "./Timeline";
 export { default as TimelineRow, type TimelineRowProps } from "./TimelineRow";
-export { default as TimelinePin, type TimelinePinProps } from "./Pin";
+export { default as TimelinePin, type TimelinePinProps } from "./pin/Pin";
 export { default as TimelinePeriod, type TimelinePeriodProps } from "./period";
 export {
   default as TimelineZoomButton,

package/src/timeline/pin/Pin.tsx

@@ -0,0 +1,33 @@
+import { isBefore } from "date-fns";
+import React, { forwardRef } from "react";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+import { TimelineComponentTypes } from "../utils/types.internal";
+import PinInternal, { type TimelinePinProps } from "./PinInternal";
+
+export interface PinType
+  extends React.ForwardRefExoticComponent<
+    TimelinePinProps & React.RefAttributes<HTMLButtonElement>
+  > {
+  componentType: TimelineComponentTypes;
+}
+
+export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
+  ({ date, ...restProps }, forwardedRef) => {
+    const { startDate, endDate } = useTimelineContext();
+
+    /**
+     * Out-of-bounds pins should not be rendered
+     */
+    if (isBefore(date, startDate) || isBefore(endDate, date)) {
+      return null;
+    }
+
+    return <PinInternal ref={forwardedRef} {...restProps} date={date} />;
+  },
+) as PinType;
+
+Pin.componentType = "pin";
+
+export default Pin;
+
+export type { TimelinePinProps };

package/src/timeline/{Pin.tsx → pin/PinInternal.tsx}

@@ -14,12 +14,11 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useI18n } from "../util/i18n/i18n.hooks";
-import { useTimelineContext } from "./hooks/useTimelineContext";
-import { position } from "./utils/calc";
-import { TimelineComponentTypes } from "./utils/types.internal";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+import { position } from "../utils/calc";
 
 export interface TimelinePinProps
   extends React.HTMLAttributes<HTMLButtonElement> {
@@ -33,14 +32,7 @@ export interface TimelinePinProps
   children?: React.ReactNode;
 }
 
-export interface PinType
-  extends React.ForwardRefExoticComponent<
-    TimelinePinProps & React.RefAttributes<HTMLButtonElement>
-  > {
-  componentType: TimelineComponentTypes;
-}
-
-export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
+export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
   ({ date, children, ...rest }, ref) => {
     const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
@@ -157,8 +149,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       </>
     );
   },
-) as PinType;
-
-Pin.componentType = "pin";
+);
 
-export default Pin;
+export default PinInternal;

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>
+        )}
       </>
     );
   },