@navikt/ds-react 6.7.0 → 6.7.1

package/src/overlays/floating/Floating.tsx

@@ -0,0 +1,399 @@
+import {
+  Placement,
+  autoUpdate,
+  flip,
+  arrow as floatingArrow,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from "@floating-ui/react-dom";
+import React, {
+  HTMLAttributes,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Slot } from "../../util/Slot";
+import { createContext } from "../../util/create-context";
+import {
+  useCallbackRef,
+  useClientLayoutEffect,
+  useMergeRefs,
+} from "../../util/hooks";
+import { AsChildProps } from "../../util/types";
+import {
+  type Align,
+  type Measurable,
+  type Side,
+  getSideAndAlignFromPlacement,
+  transformOrigin,
+} from "./Floating.utils";
+
+/**
+ * Floating Root
+ */
+type FloatingContextValue = {
+  anchor: Measurable | null;
+  onAnchorChange: (anchor: Measurable | null) => void;
+};
+
+export const [FloatingProvider, useFloatingContext] =
+  createContext<FloatingContextValue>({
+    name: "FloatingContext",
+    hookName: "useFloating",
+    providerName: "FloatingProvider",
+  });
+
+interface FloatingProps {
+  children: React.ReactNode;
+}
+
+interface FloatingComponent extends React.FC<FloatingProps> {
+  Anchor: typeof FloatingAnchor;
+  Content: typeof FloatingContent;
+}
+
+const Floating: FloatingComponent = ({ children }: FloatingProps) => {
+  const [anchor, setAnchor] = useState<Measurable | null>(null);
+
+  return (
+    <FloatingProvider anchor={anchor} onAnchorChange={setAnchor}>
+      {children}
+    </FloatingProvider>
+  );
+};
+
+/**
+ * Floating Anchor
+ */
+type FloatingAnchorProps = HTMLAttributes<HTMLDivElement> &
+  AsChildProps & {
+    virtualRef?: React.RefObject<Measurable>;
+  };
+
+/**
+ * `FloatingAnchor` provides an anchor for a Floating instance.
+ * Allows anchoring to non-DOM nodes like a cursor position when used with `virtualRef`.
+ */
+const FloatingAnchor = forwardRef<HTMLDivElement, FloatingAnchorProps>(
+  ({ virtualRef, asChild, ...rest }: FloatingAnchorProps, forwardedRef) => {
+    const context = useFloatingContext();
+    const ref = useRef<HTMLDivElement>(null);
+
+    const mergedRef = useMergeRefs(forwardedRef, ref);
+
+    useEffect(() => {
+      // Allows anchoring the floating to non-DOM nodes like a cursor position.
+      // We replace `anchorRef` with a virtual ref in such cases.
+      context.onAnchorChange(virtualRef?.current || ref.current);
+    });
+
+    const Comp = asChild ? Slot : "div";
+
+    return virtualRef ? null : <Comp ref={mergedRef} {...rest} />;
+  },
+);
+
+/**
+ * Floating Arrow
+ */
+const OPPOSITE_SIDE: Record<Side, Side> = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right",
+};
+
+interface FloatingArrowProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+const FloatingArrow = ({ width, height, className }: FloatingArrowProps) => {
+  const context = useFloatingContentContext();
+
+  const side = OPPOSITE_SIDE[context.placedSide];
+
+  return (
+    <span
+      ref={context.onArrowChange}
+      style={{
+        position: "absolute",
+        left: context.arrowX,
+        top: context.arrowY,
+        [side]: 0,
+        transformOrigin: {
+          top: "",
+          right: "0 0",
+          bottom: "center 0",
+          left: "100% 0",
+        }[context.placedSide],
+        transform: {
+          top: "translateY(100%)",
+          right: "translateY(50%) rotate(90deg) translateX(-50%)",
+          bottom: `rotate(180deg)`,
+          left: "translateY(50%) rotate(-90deg) translateX(50%)",
+        }[context.placedSide],
+        visibility: context.hideArrow ? "hidden" : undefined,
+      }}
+      aria-hidden
+    >
+      <svg
+        className={className}
+        width={width}
+        height={height}
+        viewBox="0 0 30 10"
+        preserveAspectRatio="none"
+        style={{ display: "block" }}
+      >
+        <polygon points="0,0 30,0 15,10" />
+      </svg>
+    </span>
+  );
+};
+
+/**
+ * Floating Content
+ */
+type FloatingContentContextValue = {
+  placedSide: Side;
+  onArrowChange: (arrow: HTMLSpanElement | null) => void;
+  arrowX?: number;
+  arrowY?: number;
+  hideArrow: boolean;
+};
+
+const [FloatingContentProvider, useFloatingContentContext] =
+  createContext<FloatingContentContextValue>({
+    name: "FloatingContentContext",
+    hookName: "useFloatingContentContext",
+    providerName: "FloatingContentProvider",
+  });
+
+type Boundary = Element | null;
+
+interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
+  side?: Side;
+  sideOffset?: number;
+  align?: Align;
+  alignOffset?: number;
+  avoidCollisions?: boolean;
+  collisionBoundary?: Boundary | Boundary[];
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  hideWhenDetached?: boolean;
+  updatePositionStrategy?: "optimized" | "always";
+  onPlaced?: () => void;
+  arrow?: {
+    className?: string;
+    padding?: number;
+    width: number;
+    height: number;
+  };
+}
+
+const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
+  (
+    {
+      children,
+      side = "bottom",
+      sideOffset = 0,
+      align = "center",
+      alignOffset = 0,
+      avoidCollisions = true,
+      collisionBoundary = [],
+      collisionPadding: collisionPaddingProp = 0,
+      hideWhenDetached = false,
+      updatePositionStrategy = "optimized",
+      onPlaced,
+      arrow: _arrow,
+      ...contentProps
+    }: FloatingContentProps,
+    forwardedRef,
+  ) => {
+    const context = useFloatingContext();
+
+    const [content, setContent] = useState<HTMLDivElement | null>(null);
+    const mergeRefs = useMergeRefs(forwardedRef, setContent);
+
+    const arrowDefaults = {
+      padding: 5,
+      width: 0,
+      height: 0,
+      ..._arrow,
+    };
+    const [arrow, setArrow] = useState<HTMLSpanElement | null>(null);
+    const arrowWidth = arrowDefaults.width;
+    const arrowHeight = arrowDefaults.height;
+
+    const desiredPlacement = (side +
+      (align !== "center" ? "-" + align : "")) as Placement;
+
+    const collisionPadding =
+      typeof collisionPaddingProp === "number"
+        ? collisionPaddingProp
+        : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+
+    const boundary = Array.isArray(collisionBoundary)
+      ? collisionBoundary
+      : [collisionBoundary];
+
+    const hasExplicitBoundaries = boundary.length > 0;
+
+    /**
+     * .filter(x => x !== null) does not narrow the type of the array enough.
+     */
+    function isNotNull<T>(value: T | null): value is T {
+      return value !== null;
+    }
+
+    const detectOverflowOptions = {
+      padding: collisionPadding,
+      boundary: boundary.filter(isNotNull),
+      // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+      altBoundary: hasExplicitBoundaries,
+    };
+
+    const { refs, floatingStyles, placement, isPositioned, middlewareData } =
+      useFloating({
+        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+        strategy: "fixed",
+        placement: desiredPlacement,
+        whileElementsMounted: (...args) => {
+          const cleanup = autoUpdate(...args, {
+            animationFrame: updatePositionStrategy === "always",
+          });
+          return cleanup;
+        },
+        elements: {
+          reference: context.anchor,
+        },
+        middleware: [
+          offset({
+            mainAxis: sideOffset + arrowHeight,
+            alignmentAxis: alignOffset,
+          }),
+          avoidCollisions &&
+            shift({
+              mainAxis: true,
+              crossAxis: false,
+              limiter: limitShift(),
+              ...detectOverflowOptions,
+            }),
+          avoidCollisions && flip({ ...detectOverflowOptions }),
+          size({
+            ...detectOverflowOptions,
+            apply: ({ elements, rects, availableWidth, availableHeight }) => {
+              const { width: anchorWidth, height: anchorHeight } =
+                rects.reference;
+              const contentStyle = elements.floating.style;
+              /**
+               * Allows styling and animations based on the available space.
+               */
+              contentStyle.setProperty(
+                "--ac-floating-available-width",
+                `${availableWidth}px`,
+              );
+              contentStyle.setProperty(
+                "--ac-floating-available-height",
+                `${availableHeight}px`,
+              );
+              contentStyle.setProperty(
+                "--ac-floating-anchor-width",
+                `${anchorWidth}px`,
+              );
+              contentStyle.setProperty(
+                "--ac-floating-anchor-height",
+                `${anchorHeight}px`,
+              );
+            },
+          }),
+          arrow &&
+            floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
+          transformOrigin({ arrowWidth, arrowHeight }),
+          hideWhenDetached &&
+            hide({ strategy: "referenceHidden", ...detectOverflowOptions }),
+        ],
+      });
+
+    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+
+    const handlePlaced = useCallbackRef(onPlaced);
+
+    useClientLayoutEffect(() => {
+      isPositioned && handlePlaced?.();
+    }, [isPositioned, handlePlaced]);
+
+    const arrowX = middlewareData.arrow?.x;
+    const arrowY = middlewareData.arrow?.y;
+    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+
+    const [contentZIndex, setContentZIndex] = useState<string>();
+    useClientLayoutEffect(() => {
+      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    }, [content]);
+
+    return (
+      <div
+        ref={refs.setFloating}
+        data-aksel-floating-content-wrapper=""
+        style={{
+          ...floatingStyles,
+          transform: isPositioned
+            ? floatingStyles.transform
+            : "translate(0, -200%)", // keep off the page when measuring
+          minWidth: "max-content",
+          zIndex: contentZIndex,
+          ["--ac-floating-transform-origin" as any]: [
+            middlewareData.transformOrigin?.x,
+            middlewareData.transformOrigin?.y,
+          ].join(" "),
+        }}
+        // Floating UI uses the `dir` attribute on the reference/floating node for logical alignment.
+        // This attribute is necessary for both portalled and inline calculations.
+        dir="ltr"
+      >
+        <FloatingContentProvider
+          placedSide={placedSide}
+          onArrowChange={setArrow}
+          arrowX={arrowX}
+          arrowY={arrowY}
+          hideArrow={cannotCenterArrow}
+        >
+          <div
+            ref={mergeRefs}
+            data-side={placedSide}
+            data-align={placedAlign}
+            {...contentProps}
+            style={{
+              ...contentProps.style,
+              // if the FloatingContent hasn't been placed yet (not all measurements done)
+              // we prevent animations so that users's animation don't kick in too early referring wrong sides
+              animation: !isPositioned ? "none" : undefined,
+              // hide the content if using the hide middleware and should be hidden
+              opacity: middlewareData.hide?.referenceHidden ? 0 : undefined,
+            }}
+          >
+            {children}
+            {_arrow?.height && _arrow?.width && (
+              <FloatingArrow
+                width={_arrow.width}
+                height={_arrow.height}
+                className={_arrow.className}
+              />
+            )}
+          </div>
+        </FloatingContentProvider>
+      </div>
+    );
+  },
+);
+
+Floating.Anchor = FloatingAnchor;
+Floating.Content = FloatingContent;
+
+export { Floating };

package/src/overlays/floating/Floating.utils.ts

@@ -0,0 +1,63 @@
+import type { Middleware, Placement } from "@floating-ui/react-dom";
+
+const SIDE_OPTIONS = ["top", "right", "bottom", "left"] as const;
+const ALIGN_OPTIONS = ["start", "center", "end"] as const;
+
+type Side = (typeof SIDE_OPTIONS)[number];
+type Align = (typeof ALIGN_OPTIONS)[number];
+type Measurable = { getBoundingClientRect(): DOMRect };
+
+/**
+ * `transformOrigin` is a custom middleware for floating-ui that calculates the transform origin of the floating-element.
+ */
+function transformOrigin(options: {
+  arrowWidth: number;
+  arrowHeight: number;
+}): Middleware {
+  return {
+    name: "transformOrigin",
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[
+        placedAlign
+      ];
+
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+
+      let x = "";
+      let y = "";
+
+      if (placedSide === "bottom") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      } else if (placedSide === "top") {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      } else if (placedSide === "right") {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      } else if (placedSide === "left") {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      return { data: { x, y } };
+    },
+  };
+}
+
+function getSideAndAlignFromPlacement(placement: Placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side as Side, align as Align] as const;
+}
+
+export { getSideAndAlignFromPlacement, transformOrigin };
+export type { Side, Align, Measurable };

package/src/popover/Popover.tsx

@@ -4,22 +4,14 @@ import {
   offset as flOffset,
   flip,
   shift,
-  useClick,
-  useDismiss,
   useFloating,
-  useInteractions,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  HTMLAttributes,
-  forwardRef,
-  useCallback,
-  useContext,
-  useRef,
-} from "react";
+import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
-import { useClientLayoutEffect, useEventListener } from "../util/hooks";
+import { DismissableLayer } from "../overlay/dismiss/DismissableLayer";
+import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
@@ -133,19 +125,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenFlip = isInDatepicker ? false : _flip;
 
     const {
-      x,
-      y,
-      strategy,
-      context,
       update,
       refs,
       placement: flPlacement,
       middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      floatingStyles,
     } = useFloating({
       strategy: chosenStrategy,
       placement,
       open,
-      onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
         chosenFlip &&
@@ -155,11 +143,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       ],
     });
 
-    const { getFloatingProps } = useInteractions([
-      useClick(context),
-      useDismiss(context),
-    ]);
-
     useClientLayoutEffect(() => {
       refs.setReference(anchorEl);
     }, [anchorEl]);
@@ -176,24 +159,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            e.target instanceof HTMLElement &&
-            ![anchorEl, refs.floating.current].some(
-              (element) => element?.contains(e.target as Node),
-            ) &&
-            !e.target.contains(refs.floating.current)
-          ) {
-            open && onClose();
-          }
-        },
-        [anchorEl, refs, open, onClose],
-      ),
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -202,38 +167,41 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     }[flPlacement.split("-")[0]];
 
     return (
-      <div
-        className={cl("navds-popover", className, {
-          "navds-popover--hidden": !open || !anchorEl,
-        })}
-        data-placement={flPlacement}
-        aria-hidden={!open || !anchorEl}
-        {...getFloatingProps({
-          ref: floatingRef,
-          style: {
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-          },
-          tabIndex: undefined,
-        })}
-        {...rest}
+      <DismissableLayer
+        asChild
+        safeZone={{
+          anchor: anchorEl,
+          dismissable: refs.floating.current,
+        }}
+        onDismiss={() => open && onClose?.()}
+        enabled={open}
       >
-        {children}
-        {arrow && (
-          <div
-            ref={(node) => {
-              arrowRef.current = node;
-            }}
-            style={{
-              ...(arrowX != null ? { left: arrowX } : {}),
-              ...(arrowY != null ? { top: arrowY } : {}),
-              ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-            }}
-            className="navds-popover__arrow"
-          />
-        )}
-      </div>
+        <div
+          ref={floatingRef}
+          {...rest}
+          className={cl("navds-popover", className, {
+            "navds-popover--hidden": !open || !anchorEl,
+          })}
+          style={{ ...rest.style, ...floatingStyles }}
+          data-placement={flPlacement}
+          aria-hidden={!open || !anchorEl}
+        >
+          {children}
+          {arrow && (
+            <div
+              ref={(node) => {
+                arrowRef.current = node;
+              }}
+              style={{
+                ...(arrowX != null ? { left: arrowX } : {}),
+                ...(arrowY != null ? { top: arrowY } : {}),
+                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+              }}
+              className="navds-popover__arrow"
+            />
+          )}
+        </div>
+      </DismissableLayer>
     );
   },
 ) as PopoverComponent;