@navikt/ds-react 7.32.5 → 7.33.1

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/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}
             >

package/src/timeline/period/ClickablePeriod.tsx

@@ -106,6 +106,8 @@ const ClickablePeriod = React.memo(
       left: "right",
     }[placement.split("-")[0]];
 
+    const label = ariaLabel(start, end, status, statusLabel, translate);
+
     return (
       <>
         <button
@@ -116,7 +118,7 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          aria-label={ariaLabel(start, end, status, statusLabel, translate)}
+          aria-label={label}
           className={cn(
             "navds-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),
@@ -168,6 +170,7 @@ const ClickablePeriod = React.memo(
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"
+              aria-label={label}
               {...getFloatingProps()}
               style={floatingStyles}
             >

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