@navikt/ds-react 7.2.0 → 7.3.0

package/src/overlays/action-menu/index.ts

@@ -0,0 +1,29 @@
+"use client";
+export {
+  ActionMenu,
+  ActionMenuCheckboxItem,
+  ActionMenuContent,
+  ActionMenuGroup,
+  ActionMenuItem,
+  ActionMenuLabel,
+  ActionMenuRadioGroup,
+  ActionMenuRadioItem,
+  ActionMenuDivider,
+  ActionMenuSub,
+  ActionMenuSubContent,
+  ActionMenuSubTrigger,
+  ActionMenuTrigger,
+  type ActionMenuItemProps,
+  type ActionMenuCheckboxItemProps,
+  type ActionMenuContentProps,
+  type ActionMenuGroupProps,
+  type ActionMenuLabelProps,
+  type ActionMenuProps,
+  type ActionMenuRadioGroupProps,
+  type ActionMenuRadioItemProps,
+  type ActionMenuDividerProps,
+  type ActionMenuSubContentProps,
+  type ActionMenuSubProps,
+  type ActionMenuSubTriggerProps,
+  type ActionMenuTriggerProps,
+} from "./ActionMenu";

package/src/overlays/floating/Floating.tsx

@@ -1,4 +1,5 @@
 import {
+  FlipOptions,
   Placement,
   autoUpdate,
   flip,
@@ -217,9 +218,6 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
   ) => {
     const context = useFloatingContext();
 
-    const [content, setContent] = useState<HTMLDivElement | null>(null);
-    const mergeRefs = useMergeRefs(forwardedRef, setContent);
-
     const arrowDefaults = {
       padding: 5,
       width: 0,
@@ -251,11 +249,13 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       return value !== null;
     }
 
-    const detectOverflowOptions = {
+    const detectOverflowOptions: FlipOptions = {
       padding: collisionPadding,
       boundary: boundary.filter(isNotNull),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: hasExplicitBoundaries,
+      /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
+      fallbackAxisSideDirection: "end",
     };
 
     const { refs, floatingStyles, placement, isPositioned, middlewareData } =
@@ -282,7 +282,6 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
               mainAxis: true,
               crossAxis: false,
               limiter: limitShift(),
-              ...detectOverflowOptions,
             }),
           avoidCollisions && flip({ ...detectOverflowOptions }),
           size({
@@ -332,11 +331,6 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
     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}
@@ -347,7 +341,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             ? floatingStyles.transform
             : "translate(0, -200%)", // keep off the page when measuring
           minWidth: "max-content",
-          zIndex: contentZIndex,
+          zIndex: "9999999",
           ["--ac-floating-transform-origin" as any]: [
             middlewareData.transformOrigin?.x,
             middlewareData.transformOrigin?.y,
@@ -365,7 +359,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
           hideArrow={cannotCenterArrow}
         >
           <div
-            ref={mergeRefs}
+            ref={forwardedRef}
             data-side={placedSide}
             data-align={placedAlign}
             {...contentProps}

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

@@ -1,10 +1,7 @@
 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 Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
 type Measurable = { getBoundingClientRect(): DOMRect };
 
 /**