braid-design-system 33.12.3 → 33.12.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # braid-design-system
 
+## 33.12.4
+
+### Patch Changes
+
+- **Autosuggest, MenuRenderer, OverflowMenu, TooltipRenderer**: Ensure `TooltipRenderer` is correctly positioned on Android devices ([#1926](https://github.com/seek-oss/braid-design-system/pull/1926))
+
+  Additionally, adjust `TooltipRenderer` positioning at screen edges, removing extra edge spacing.
+  This ensures the tooltip arrow is more closely aligned with the trigger when the trigger is near the edge of the screen.
+
 ## 33.12.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -3421,6 +3421,13 @@ interface LoaderProps {
 declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => react.JSX.Element;
 
 type Placement = 'top' | 'bottom';
+interface PopoverPlacementData {
+    placement: Placement;
+    arrow?: {
+        x?: number;
+        y?: number;
+    };
+}
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
@@ -3433,8 +3440,10 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
+    onPlacementChange?: (data: PopoverPlacementData) => void;
     triggerRef: RefObject<HTMLElement | null>;
     enterFocusRef?: RefObject<HTMLElement | null>;
+    arrowRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 

package/dist/index.d.ts

@@ -3421,6 +3421,13 @@ interface LoaderProps {
 declare const Loader: ({ size, "aria-label": ariaLabel, delayVisibility, data, ...restProps }: LoaderProps) => react.JSX.Element;
 
 type Placement = 'top' | 'bottom';
+interface PopoverPlacementData {
+    placement: Placement;
+    arrow?: {
+        x?: number;
+        y?: number;
+    };
+}
 interface PopoverProps {
     id?: string;
     role: NonNullable<AllHTMLAttributes<HTMLElement>['role'] | false>;
@@ -3433,8 +3440,10 @@ interface PopoverProps {
     modal?: boolean;
     open: boolean;
     onClose?: () => void;
+    onPlacementChange?: (data: PopoverPlacementData) => void;
     triggerRef: RefObject<HTMLElement | null>;
     enterFocusRef?: RefObject<HTMLElement | null>;
+    arrowRef?: RefObject<HTMLElement | null>;
     children: ReactNode;
 }
 

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -7,16 +7,15 @@ const lib_hooks_useFallbackId_cjs = require("../../hooks/useFallbackId.cjs");
 const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../hooks/useIsomorphicLayoutEffect.cjs");
 const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_private_Popover_Popover_cjs = require("../private/Popover/Popover.cjs");
-const lib_components_private_animationTimeout_cjs = require("../private/animationTimeout.cjs");
 const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
 const lib_components_useSpace_useSpace_cjs = require("../useSpace/useSpace.cjs");
 const lib_components_useThemeName_useThemeName_cjs = require("../useThemeName/useThemeName.cjs");
 const lib_components_TooltipRenderer_TooltipRenderer_css_cjs = require("./TooltipRenderer.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const isMobile__default = /* @__PURE__ */ _interopDefaultCompat(isMobile);
-const edgeOffset = "xxsmall";
 const offsetSpace = "small";
 const StaticTooltipContext = react.createContext(false);
+const clamp = (min, value, max) => Math.max(min, Math.min(value, max));
 const TooltipTextDefaultsProvider = ({
   children
 }) => {
@@ -31,35 +30,59 @@ const TooltipTextDefaultsProvider = ({
   );
 };
 const TooltipContent = ({
-  inferredPlacement,
-  arrowLeftOffset,
+  placement,
+  arrowPosition,
+  arrowRef,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  lib_components_Box_Box_cjs.Box,
-  {
-    textAlign: "left",
-    boxShadow: "large",
-    background: "neutral",
-    borderRadius: "large",
-    padding: "small",
-    marginX: edgeOffset,
-    className: [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
-    children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.overflowWrap, zIndex: 1, position: "relative", children }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        lib_components_Box_Box_cjs.Box,
-        {
-          position: "fixed",
-          background: "neutral",
-          className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow[inferredPlacement],
-          style: dynamic.assignInlineVars({
-            [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.horizontalOffset]: `${arrowLeftOffset}px`
-          })
-        }
-      )
-    ] })
-  }
-);
+}) => {
+  const arrowX = arrowPosition?.x;
+  const arrowY = arrowPosition?.y;
+  const { space, grid } = lib_components_useSpace_useSpace_cjs.useSpace();
+  const edgeOffsetInPx = grid * space.xsmall;
+  const arrowWidthOffset = parseFloat(lib_components_TooltipRenderer_TooltipRenderer_css_cjs.constants.arrowSize) * 2;
+  const [tooltipWidth, setTooltipWidth] = react.useState(0);
+  const tooltipContainerRef = react.useRef(null);
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (!tooltipContainerRef.current) {
+      return;
+    }
+    const { width } = tooltipContainerRef.current.getBoundingClientRect();
+    setTooltipWidth(width);
+  }, [children]);
+  const clampedArrowX = arrowX !== void 0 && tooltipWidth > 0 ? clamp(
+    edgeOffsetInPx,
+    arrowX,
+    tooltipWidth - edgeOffsetInPx - arrowWidthOffset
+  ) : arrowX;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      ref: tooltipContainerRef,
+      textAlign: "left",
+      boxShadow: "large",
+      background: "neutral",
+      borderRadius: "large",
+      padding: "small",
+      className: [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.overflowWrap, zIndex: 1, position: "relative", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            ref: arrowRef,
+            position: "fixed",
+            background: "neutral",
+            className: lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow[placement ?? "top"],
+            style: dynamic.assignInlineVars({
+              [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrowX]: clampedArrowX !== void 0 ? `${clampedArrowX}px` : void 0,
+              [lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrowY]: arrowY !== void 0 ? `${arrowY}px` : void 0
+            })
+          }
+        )
+      ] })
+    }
+  );
+};
 const TooltipRenderer = ({
   id,
   tooltip,
@@ -67,16 +90,11 @@ const TooltipRenderer = ({
   children
 }) => {
   const resolvedId = lib_hooks_useFallbackId_cjs.useFallbackId(id);
-  const tooltipRef = react.useRef(null);
   const triggerRef = react.useRef(null);
+  const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const [triggerPosition, setTriggerPosition] = react.useState(
-    void 0
-  );
-  const [tooltipPosition, setTooltipPosition] = react.useState(
-    void 0
-  );
-  const { grid, space } = lib_components_useSpace_useSpace_cjs.useSpace();
+  const [resolvedPlacement, setResolvedPlacement] = react.useState(placement);
+  const [arrowPosition, setArrowPosition] = react.useState();
   const isStatic = react.useContext(StaticTooltipContext);
   const isMobileDevice = react.useRef(isMobile__default.default()).current;
   const onScreen = react.useRef(null);
@@ -136,38 +154,6 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  const handleTooltipPosition = () => {
-    const setPositions = () => {
-      if (tooltipRef.current) {
-        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
-      }
-      if (triggerRef.current) {
-        setTriggerPosition(triggerRef.current.getBoundingClientRect());
-      }
-    };
-    setTimeout(() => {
-      const frameId = requestAnimationFrame(setPositions);
-      return () => cancelAnimationFrame(frameId);
-    }, lib_components_private_animationTimeout_cjs.animationTimeout / 2);
-  };
-  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
-    if (!showTooltip) {
-      return;
-    }
-    handleTooltipPosition();
-    window.addEventListener("resize", handleTooltipPosition);
-    return () => {
-      window.removeEventListener("resize", handleTooltipPosition);
-    };
-  }, [showTooltip]);
-  let inferredPlacement = placement;
-  let arrowLeftOffset = 0;
-  if (tooltipPosition && triggerPosition) {
-    inferredPlacement = tooltipPosition.top > triggerPosition.top ? "bottom" : "top";
-    const edgeOffsetInPx = space[edgeOffset] * grid;
-    const tooltipLeftToTriggerLeft = triggerPosition.left - tooltipPosition.left - edgeOffsetInPx;
-    arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children({
       triggerProps: {
@@ -183,7 +169,6 @@ const TooltipRenderer = ({
       {
         id: resolvedId,
         role: "tooltip",
-        ref: tooltipRef,
         offsetSpace,
         align: "center",
         placement,
@@ -192,12 +177,18 @@ const TooltipRenderer = ({
         modal: false,
         open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
+        onPlacementChange: ({ placement: newPlacement, arrow }) => {
+          setResolvedPlacement(newPlacement);
+          setArrowPosition(arrow);
+        },
         triggerRef,
+        arrowRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TooltipContent,
           {
-            inferredPlacement,
-            arrowLeftOffset,
+            placement: resolvedPlacement,
+            arrowPosition,
+            arrowRef,
             children: tooltip
           }
         )

package/dist/lib/components/TooltipRenderer/TooltipRenderer.css.cjs

@@ -2,7 +2,6 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
-const lib_css_atoms_atomicProperties_cjs = require("../../css/atoms/atomicProperties.cjs");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
 const constants = {
@@ -21,11 +20,11 @@ const translateZ0 = css.style({
 }, "translateZ0");
 const borderRadius = lib_themes_vars_css_cjs.vars.borderRadius.small;
 const offset = cssUtils.calc(constants.arrowSize).divide(2).negate().toString();
-const horizontalOffset = css.createVar("horizontalOffset");
-const arrowEdgePadding = "medium";
+const arrowX = css.createVar("arrowX");
+const arrowY = css.createVar("arrowY");
 const baseArrow = css.style({
-  left: `clamp(${[lib_css_atoms_atomicProperties_cjs.space[arrowEdgePadding], horizontalOffset, cssUtils.calc("100%").subtract(lib_css_atoms_atomicProperties_cjs.space[arrowEdgePadding])].join(", ")})`,
-  transform: "translateX(-50%)",
+  left: arrowX,
+  top: arrowY,
   visibility: "hidden",
   ":before": {
     visibility: "visible",
@@ -52,7 +51,9 @@ const arrow = css.styleVariants({
 }, "arrow");
 fileScope.endFileScope();
 exports.arrow = arrow;
-exports.horizontalOffset = horizontalOffset;
+exports.arrowX = arrowX;
+exports.arrowY = arrowY;
+exports.constants = constants;
 exports.maxWidth = maxWidth;
 exports.overflowWrap = overflowWrap;
 exports.translateZ0 = translateZ0;

package/dist/lib/components/TooltipRenderer/TooltipRenderer.css.mjs

@@ -1,7 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style, styleVariants, createVar } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
-import { space } from "../../css/atoms/atomicProperties.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
 const constants = {
@@ -20,11 +19,11 @@ const translateZ0 = style({
 }, "translateZ0");
 const borderRadius = vars.borderRadius.small;
 const offset = calc(constants.arrowSize).divide(2).negate().toString();
-const horizontalOffset = createVar("horizontalOffset");
-const arrowEdgePadding = "medium";
+const arrowX = createVar("arrowX");
+const arrowY = createVar("arrowY");
 const baseArrow = style({
-  left: `clamp(${[space[arrowEdgePadding], horizontalOffset, calc("100%").subtract(space[arrowEdgePadding])].join(", ")})`,
-  transform: "translateX(-50%)",
+  left: arrowX,
+  top: arrowY,
   visibility: "hidden",
   ":before": {
     visibility: "visible",
@@ -52,7 +51,9 @@ const arrow = styleVariants({
 endFileScope();
 export {
   arrow,
-  horizontalOffset,
+  arrowX,
+  arrowY,
+  constants,
   maxWidth,
   overflowWrap,
   translateZ0

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -6,14 +6,13 @@ import { useFallbackId } from "../../hooks/useFallbackId.mjs";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.mjs";
 import { Box } from "../Box/Box.mjs";
 import { Popover } from "../private/Popover/Popover.mjs";
-import { animationTimeout } from "../private/animationTimeout.mjs";
 import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
 import { useSpace } from "../useSpace/useSpace.mjs";
 import { useThemeName } from "../useThemeName/useThemeName.mjs";
-import { maxWidth, translateZ0, overflowWrap, arrow, horizontalOffset } from "./TooltipRenderer.css.mjs";
-const edgeOffset = "xxsmall";
+import { maxWidth, translateZ0, overflowWrap, arrow, arrowY, arrowX, constants } from "./TooltipRenderer.css.mjs";
 const offsetSpace = "small";
 const StaticTooltipContext = createContext(false);
+const clamp = (min, value, max) => Math.max(min, Math.min(value, max));
 const TooltipTextDefaultsProvider = ({
   children
 }) => {
@@ -28,35 +27,59 @@ const TooltipTextDefaultsProvider = ({
   );
 };
 const TooltipContent = ({
-  inferredPlacement,
-  arrowLeftOffset,
+  placement,
+  arrowPosition,
+  arrowRef,
   children
-}) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    textAlign: "left",
-    boxShadow: "large",
-    background: "neutral",
-    borderRadius: "large",
-    padding: "small",
-    marginX: edgeOffset,
-    className: [maxWidth, translateZ0],
-    children: /* @__PURE__ */ jsxs(TooltipTextDefaultsProvider, { children: [
-      /* @__PURE__ */ jsx(Box, { className: overflowWrap, zIndex: 1, position: "relative", children }),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          position: "fixed",
-          background: "neutral",
-          className: arrow[inferredPlacement],
-          style: assignInlineVars({
-            [horizontalOffset]: `${arrowLeftOffset}px`
-          })
-        }
-      )
-    ] })
-  }
-);
+}) => {
+  const arrowX$1 = arrowPosition?.x;
+  const arrowY$1 = arrowPosition?.y;
+  const { space, grid } = useSpace();
+  const edgeOffsetInPx = grid * space.xsmall;
+  const arrowWidthOffset = parseFloat(constants.arrowSize) * 2;
+  const [tooltipWidth, setTooltipWidth] = useState(0);
+  const tooltipContainerRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    if (!tooltipContainerRef.current) {
+      return;
+    }
+    const { width } = tooltipContainerRef.current.getBoundingClientRect();
+    setTooltipWidth(width);
+  }, [children]);
+  const clampedArrowX = arrowX$1 !== void 0 && tooltipWidth > 0 ? clamp(
+    edgeOffsetInPx,
+    arrowX$1,
+    tooltipWidth - edgeOffsetInPx - arrowWidthOffset
+  ) : arrowX$1;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: tooltipContainerRef,
+      textAlign: "left",
+      boxShadow: "large",
+      background: "neutral",
+      borderRadius: "large",
+      padding: "small",
+      className: [maxWidth, translateZ0],
+      children: /* @__PURE__ */ jsxs(TooltipTextDefaultsProvider, { children: [
+        /* @__PURE__ */ jsx(Box, { className: overflowWrap, zIndex: 1, position: "relative", children }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: arrowRef,
+            position: "fixed",
+            background: "neutral",
+            className: arrow[placement ?? "top"],
+            style: assignInlineVars({
+              [arrowX]: clampedArrowX !== void 0 ? `${clampedArrowX}px` : void 0,
+              [arrowY]: arrowY$1 !== void 0 ? `${arrowY$1}px` : void 0
+            })
+          }
+        )
+      ] })
+    }
+  );
+};
 const TooltipRenderer = ({
   id,
   tooltip,
@@ -64,16 +87,11 @@ const TooltipRenderer = ({
   children
 }) => {
   const resolvedId = useFallbackId(id);
-  const tooltipRef = useRef(null);
   const triggerRef = useRef(null);
+  const arrowRef = useRef(null);
   const [open, setOpen] = useState(false);
-  const [triggerPosition, setTriggerPosition] = useState(
-    void 0
-  );
-  const [tooltipPosition, setTooltipPosition] = useState(
-    void 0
-  );
-  const { grid, space } = useSpace();
+  const [resolvedPlacement, setResolvedPlacement] = useState(placement);
+  const [arrowPosition, setArrowPosition] = useState();
   const isStatic = useContext(StaticTooltipContext);
   const isMobileDevice = useRef(isMobile()).current;
   const onScreen = useRef(null);
@@ -133,38 +151,6 @@ const TooltipRenderer = ({
       }
     };
   }, [open, isMobileDevice]);
-  const handleTooltipPosition = () => {
-    const setPositions = () => {
-      if (tooltipRef.current) {
-        setTooltipPosition(tooltipRef.current.getBoundingClientRect());
-      }
-      if (triggerRef.current) {
-        setTriggerPosition(triggerRef.current.getBoundingClientRect());
-      }
-    };
-    setTimeout(() => {
-      const frameId = requestAnimationFrame(setPositions);
-      return () => cancelAnimationFrame(frameId);
-    }, animationTimeout / 2);
-  };
-  useIsomorphicLayoutEffect(() => {
-    if (!showTooltip) {
-      return;
-    }
-    handleTooltipPosition();
-    window.addEventListener("resize", handleTooltipPosition);
-    return () => {
-      window.removeEventListener("resize", handleTooltipPosition);
-    };
-  }, [showTooltip]);
-  let inferredPlacement = placement;
-  let arrowLeftOffset = 0;
-  if (tooltipPosition && triggerPosition) {
-    inferredPlacement = tooltipPosition.top > triggerPosition.top ? "bottom" : "top";
-    const edgeOffsetInPx = space[edgeOffset] * grid;
-    const tooltipLeftToTriggerLeft = triggerPosition.left - tooltipPosition.left - edgeOffsetInPx;
-    arrowLeftOffset = tooltipLeftToTriggerLeft + triggerPosition.width / 2;
-  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children({
       triggerProps: {
@@ -180,7 +166,6 @@ const TooltipRenderer = ({
       {
         id: resolvedId,
         role: "tooltip",
-        ref: tooltipRef,
         offsetSpace,
         align: "center",
         placement,
@@ -189,12 +174,18 @@ const TooltipRenderer = ({
         modal: false,
         open: showTooltip,
         onClose: !isStatic ? () => setOpen(false) : void 0,
+        onPlacementChange: ({ placement: newPlacement, arrow: arrow2 }) => {
+          setResolvedPlacement(newPlacement);
+          setArrowPosition(arrow2);
+        },
         triggerRef,
+        arrowRef,
         children: /* @__PURE__ */ jsx(
           TooltipContent,
           {
-            inferredPlacement,
-            arrowLeftOffset,
+            placement: resolvedPlacement,
+            arrowPosition,
+            arrowRef,
             children: tooltip
           }
         )

package/dist/lib/components/private/Popover/Popover.cjs

@@ -1,37 +1,34 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
+const reactDom = require("@floating-ui/react-dom");
 const dedent = require("dedent");
 const react = require("react");
-const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect.cjs");
 const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
 const lib_components_BraidPortal_BraidPortal_cjs = require("../../BraidPortal/BraidPortal.cjs");
+const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../../useResponsiveValue/useResponsiveValue.cjs");
 const lib_components_useSpace_useSpace_cjs = require("../../useSpace/useSpace.cjs");
 const lib_components_private_animationTimeout_cjs = require("../animationTimeout.cjs");
 const lib_components_private_Popover_Popover_css_cjs = require("./Popover.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../css/atoms/sprinkles.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
-const zIndex = "notification";
-const getPosition = (element) => {
-  if (!element) {
-    return void 0;
+const positionMap = {
+  top: {
+    left: "top-start",
+    center: "top",
+    right: "top-end"
+  },
+  bottom: {
+    left: "bottom-start",
+    center: "bottom",
+    right: "bottom-end"
   }
-  const rect = element.getBoundingClientRect();
-  const { top, bottom, left, right, width } = rect;
-  const { scrollX: scrollX2, scrollY, innerWidth } = window;
-  return {
-    // For `top`, we subtract this from the dynamic viewport height in `Popover.css.ts`
-    // which can't be accessed from Javascript.
-    top: top + scrollY,
-    bottom: bottom + scrollY,
-    left: left + scrollX2,
-    right: innerWidth - right - scrollX2,
-    width
-  };
 };
-function clamp(min, preferred, max) {
-  return Math.min(Math.max(preferred, min), max);
+function getFloatingUiPosition(placement, align) {
+  return positionMap[placement][align];
 }
+const zIndex = "notification";
+const PopoverContext = react.createContext(null);
 const PopoverContent = react.forwardRef(
   ({
     id,
@@ -45,18 +42,59 @@ const PopoverContent = react.forwardRef(
     modal = true,
     open,
     onClose,
+    onPlacementChange,
     triggerRef,
     enterFocusRef,
+    arrowRef,
     children
   }, forwardedRef) => {
-    const [triggerPosition, setTriggerPosition] = react.useState(void 0);
     const ref = react.useRef(null);
     react.useImperativeHandle(forwardedRef, () => ref.current);
-    const [horizontalOffset, setHorizontalOffset] = react.useState(0);
-    const [actualPlacement, setActualPlacement] = react.useState(placement);
-    const showPopover = open && triggerPosition;
-    const transitionThresholdInPx = lib_components_useSpace_useSpace_cjs.useSpace().space[lib_components_private_Popover_Popover_css_cjs.transitionThreshold];
-    const alignmentAnchor = align === "center" ? "left" : align;
+    const normalized = lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(offsetSpace);
+    const mobile = normalized.mobile ?? "none";
+    const tablet = normalized.tablet ?? mobile;
+    const desktop = normalized.desktop ?? tablet;
+    const wide = normalized.wide ?? desktop;
+    const resolvedOffsetSpace = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue()({ mobile, tablet, desktop, wide }) ?? mobile;
+    const spaceScale = lib_components_useSpace_useSpace_cjs.useSpace();
+    let offsetSpacePx = 0;
+    if (resolvedOffsetSpace !== "none") {
+      offsetSpacePx = spaceScale.space[resolvedOffsetSpace] * spaceScale.grid;
+    }
+    const floatingUiRequestedPosition = getFloatingUiPosition(placement, align);
+    const middleware = [
+      reactDom.offset(offsetSpacePx),
+      !lockPlacement && reactDom.flip(),
+      width === "full" ? reactDom.size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }) : reactDom.shift({
+        crossAxis: align === "center"
+      }),
+      arrowRef && reactDom.arrow({ element: arrowRef })
+    ].filter(Boolean);
+    const {
+      refs,
+      floatingStyles,
+      middlewareData,
+      placement: floatingUiEvaluatedPosition,
+      isPositioned
+    } = reactDom.useFloating({
+      placement: floatingUiRequestedPosition,
+      middleware,
+      whileElementsMounted: reactDom.autoUpdate
+    });
+    react.useEffect(() => {
+      refs.setReference(triggerRef.current);
+    }, [triggerRef, refs]);
+    react.useEffect(() => {
+      if (ref.current) {
+        refs.setFloating(ref.current);
+      }
+    }, [refs]);
     react.useEffect(() => {
       const handleKeydown = (event) => {
         if (event.key === "Escape" || event.key === "Tab") {
@@ -81,9 +119,6 @@ const PopoverContent = react.forwardRef(
         window.removeEventListener("keydown", handleKeydown);
       };
     }, [onClose, triggerRef]);
-    react.useEffect(() => {
-      setTriggerPosition(getPosition(triggerRef.current));
-    }, [triggerRef]);
     react.useEffect(() => {
       setTimeout(() => {
         if (!enterFocusRef) {
@@ -101,95 +136,24 @@ const PopoverContent = react.forwardRef(
           }
         }
       }, lib_components_private_animationTimeout_cjs.animationTimeout);
-    }, [open, enterFocusRef, triggerRef]);
+    }, [open, enterFocusRef]);
+    const resolvedPlacement = floatingUiEvaluatedPosition?.startsWith("top") ? "top" : "bottom";
     react.useEffect(() => {
-      const handleResize = () => {
-        setTriggerPosition(getPosition(triggerRef.current));
-      };
-      window.addEventListener("resize", handleResize);
-      const resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(document.body);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        resizeObserver.disconnect();
-      };
-    }, [triggerRef]);
-    const handlePlacement = () => {
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const triggerBoundingRect = triggerRef.current?.getBoundingClientRect();
-      if (!triggerBoundingRect) {
-        return;
-      }
-      const { height: popoverHeight } = popoverBoundingRect;
-      const heightRequired = popoverHeight + transitionThresholdInPx;
-      const fitsAbove = triggerBoundingRect.top >= heightRequired;
-      const fitsBelow = window.innerHeight - triggerBoundingRect.bottom >= heightRequired;
-      if (!fitsAbove && fitsBelow) {
-        setActualPlacement("bottom");
-      } else if (!fitsBelow && fitsAbove) {
-        setActualPlacement("top");
-      } else {
-        setActualPlacement(placement);
+      if (onPlacementChange) {
+        onPlacementChange({
+          placement: resolvedPlacement,
+          arrow: middlewareData.arrow
+        });
       }
+    }, [resolvedPlacement, middlewareData.arrow, onPlacementChange]);
+    const combinedStyles = {
+      ...floatingStyles,
+      ...!isPositioned ? { opacity: 0, pointerEvents: "none" } : {}
     };
-    const handleHorizontalShift = () => {
-      if (!triggerPosition) {
-        return;
-      }
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const { width: popoverWidth } = popoverBoundingRect;
-      const triggerCenter = triggerPosition.width && triggerPosition.left + triggerPosition.width / 2;
-      const popoverLeft = align === "center" && triggerCenter ? triggerCenter - popoverWidth / 2 : triggerPosition.left;
-      const clampedPopoverLeft = clamp(
-        scrollX,
-        popoverLeft,
-        window.innerWidth + scrollX - popoverWidth
-      );
-      const triggerRightFromLeft = window.innerWidth - triggerPosition.right;
-      const clampedTriggerRightFromLeft = clamp(
-        scrollX + popoverWidth,
-        triggerRightFromLeft,
-        scrollX + window.innerWidth
-      );
-      if (alignmentAnchor === "right" && clampedTriggerRightFromLeft !== triggerPosition.right + horizontalOffset) {
-        setHorizontalOffset(
-          window.innerWidth - clampedTriggerRightFromLeft - triggerPosition.right
-        );
-      }
-      if (alignmentAnchor === "left" && clampedPopoverLeft !== triggerPosition.left + horizontalOffset) {
-        setHorizontalOffset(clampedPopoverLeft - triggerPosition.left);
-      }
-      return;
-    };
-    lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
-      if (!showPopover) {
-        return;
-      }
-      if (width !== "full") {
-        handleHorizontalShift();
-      }
-      if (!lockPlacement) {
-        handlePlacement();
-      }
-    }, [showPopover]);
-    const triggerPositionVars = triggerPosition && {
-      // Vertical positioning
-      [lib_components_private_Popover_Popover_css_cjs.triggerVars[actualPlacement]]: `${triggerPosition[actualPlacement]}`,
-      // Horizontal positioning
-      [lib_components_private_Popover_Popover_css_cjs.triggerVars.left]: width === "full" || alignmentAnchor === "left" ? `${triggerPosition?.left}` : void 0,
-      [lib_components_private_Popover_Popover_css_cjs.triggerVars.right]: width === "full" || alignmentAnchor === "right" ? `${triggerPosition?.right}` : void 0,
-      // Horizontal scroll offset
-      [lib_components_private_Popover_Popover_css_cjs.horizontalOffset]: width !== "full" ? `${horizontalOffset}` : "0"
+    const popoverContextValue = {
+      arrow: middlewareData.arrow,
+      resolvedPlacement
     };
-    if (!showPopover) {
-      return null;
-    }
     return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { children: [
       modal && /* @__PURE__ */ jsxRuntime.jsx(
         lib_components_Box_Box_cjs.Box,
@@ -217,17 +181,18 @@ const PopoverContent = react.forwardRef(
           role: role || void 0,
           tabIndex: -1,
           zIndex,
-          position: "absolute",
-          marginTop: actualPlacement === "bottom" ? offsetSpace : void 0,
-          marginBottom: actualPlacement === "top" ? offsetSpace : void 0,
-          style: triggerPositionVars && dynamic.assignInlineVars(triggerPositionVars),
-          className: {
-            [lib_components_private_Popover_Popover_css_cjs.popoverPosition]: true,
-            [lib_components_private_Popover_Popover_css_cjs.animation]: true,
-            [lib_components_private_Popover_Popover_css_cjs.invertPlacement]: actualPlacement === "bottom",
-            [lib_components_private_Popover_Popover_css_cjs.delayVisibility]: delayVisibility
-          },
-          children
+          style: combinedStyles,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              className: {
+                [lib_components_private_Popover_Popover_css_cjs.animation]: true,
+                [lib_components_private_Popover_Popover_css_cjs.invertPlacement]: resolvedPlacement === "bottom",
+                [lib_components_private_Popover_Popover_css_cjs.delayVisibility]: delayVisibility
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: popoverContextValue, children })
+            }
+          )
         }
       )
     ] });

package/dist/lib/components/private/Popover/Popover.css.cjs

@@ -9,23 +9,6 @@ const backdrop = css.style({
   width: "100vw",
   height: "100vh"
 }, "backdrop");
-const triggerVars = {
-  top: css.createVar("triggerVars_top"),
-  left: css.createVar("triggerVars_left"),
-  bottom: css.createVar("triggerVars_bottom"),
-  right: css.createVar("triggerVars_right")
-};
-const horizontalOffset = css.createVar("horizontalOffset");
-const dynamicHeight = css.createVar("dynamicHeight");
-const popoverPosition = css.style({
-  vars: {
-    [dynamicHeight]: "100svh"
-  },
-  top: cssUtils.calc(triggerVars.bottom).multiply("1px").toString(),
-  bottom: cssUtils.calc(css.fallbackVar(dynamicHeight, "100vh")).subtract(cssUtils.calc(triggerVars.top).multiply("1px")).toString(),
-  left: cssUtils.calc(triggerVars.left).add(horizontalOffset).multiply("1px").toString(),
-  right: cssUtils.calc(triggerVars.right).add(horizontalOffset).multiply("1px").toString()
-}, "popoverPosition");
 const placementModifier = css.createVar("placementModifier");
 const invertPlacement = css.style({
   vars: {
@@ -53,8 +36,4 @@ fileScope.endFileScope();
 exports.animation = animation;
 exports.backdrop = backdrop;
 exports.delayVisibility = delayVisibility;
-exports.horizontalOffset = horizontalOffset;
 exports.invertPlacement = invertPlacement;
-exports.popoverPosition = popoverPosition;
-exports.transitionThreshold = transitionThreshold;
-exports.triggerVars = triggerVars;

package/dist/lib/components/private/Popover/Popover.css.mjs

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, style, keyframes, fallbackVar } from "@vanilla-extract/css";
+import { style, keyframes, createVar, fallbackVar } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { animationTimeout } from "../animationTimeout.mjs";
 import { vars } from "../../../themes/vars.css.mjs";
@@ -8,23 +8,6 @@ const backdrop = style({
   width: "100vw",
   height: "100vh"
 }, "backdrop");
-const triggerVars = {
-  top: createVar("triggerVars_top"),
-  left: createVar("triggerVars_left"),
-  bottom: createVar("triggerVars_bottom"),
-  right: createVar("triggerVars_right")
-};
-const horizontalOffset = createVar("horizontalOffset");
-const dynamicHeight = createVar("dynamicHeight");
-const popoverPosition = style({
-  vars: {
-    [dynamicHeight]: "100svh"
-  },
-  top: calc(triggerVars.bottom).multiply("1px").toString(),
-  bottom: calc(fallbackVar(dynamicHeight, "100vh")).subtract(calc(triggerVars.top).multiply("1px")).toString(),
-  left: calc(triggerVars.left).add(horizontalOffset).multiply("1px").toString(),
-  right: calc(triggerVars.right).add(horizontalOffset).multiply("1px").toString()
-}, "popoverPosition");
 const placementModifier = createVar("placementModifier");
 const invertPlacement = style({
   vars: {
@@ -53,9 +36,5 @@ export {
   animation,
   backdrop,
   delayVisibility,
-  horizontalOffset,
-  invertPlacement,
-  popoverPosition,
-  transitionThreshold,
-  triggerVars
+  invertPlacement
 };

package/dist/lib/components/private/Popover/Popover.mjs

@@ -1,34 +1,31 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { offset, flip, size, shift, arrow, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import dedent from "dedent";
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect } from "react";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
+import { forwardRef, useRef, useImperativeHandle, useEffect, createContext } from "react";
 import { Box } from "../../Box/Box.mjs";
 import { BraidPortal } from "../../BraidPortal/BraidPortal.mjs";
+import { useResponsiveValue } from "../../useResponsiveValue/useResponsiveValue.mjs";
 import { useSpace } from "../../useSpace/useSpace.mjs";
 import { animationTimeout } from "../animationTimeout.mjs";
-import { transitionThreshold, triggerVars, backdrop, delayVisibility, invertPlacement, animation, popoverPosition, horizontalOffset } from "./Popover.css.mjs";
-const zIndex = "notification";
-const getPosition = (element) => {
-  if (!element) {
-    return void 0;
+import { backdrop, delayVisibility, invertPlacement, animation } from "./Popover.css.mjs";
+import { normalizeResponsiveValue } from "../../../css/atoms/sprinkles.css.mjs";
+const positionMap = {
+  top: {
+    left: "top-start",
+    center: "top",
+    right: "top-end"
+  },
+  bottom: {
+    left: "bottom-start",
+    center: "bottom",
+    right: "bottom-end"
   }
-  const rect = element.getBoundingClientRect();
-  const { top, bottom, left, right, width } = rect;
-  const { scrollX: scrollX2, scrollY, innerWidth } = window;
-  return {
-    // For `top`, we subtract this from the dynamic viewport height in `Popover.css.ts`
-    // which can't be accessed from Javascript.
-    top: top + scrollY,
-    bottom: bottom + scrollY,
-    left: left + scrollX2,
-    right: innerWidth - right - scrollX2,
-    width
-  };
 };
-function clamp(min, preferred, max) {
-  return Math.min(Math.max(preferred, min), max);
+function getFloatingUiPosition(placement, align) {
+  return positionMap[placement][align];
 }
+const zIndex = "notification";
+const PopoverContext = createContext(null);
 const PopoverContent = forwardRef(
   ({
     id,
@@ -42,18 +39,59 @@ const PopoverContent = forwardRef(
     modal = true,
     open,
     onClose,
+    onPlacementChange,
     triggerRef,
     enterFocusRef,
+    arrowRef,
     children
   }, forwardedRef) => {
-    const [triggerPosition, setTriggerPosition] = useState(void 0);
     const ref = useRef(null);
     useImperativeHandle(forwardedRef, () => ref.current);
-    const [horizontalOffset$1, setHorizontalOffset] = useState(0);
-    const [actualPlacement, setActualPlacement] = useState(placement);
-    const showPopover = open && triggerPosition;
-    const transitionThresholdInPx = useSpace().space[transitionThreshold];
-    const alignmentAnchor = align === "center" ? "left" : align;
+    const normalized = normalizeResponsiveValue(offsetSpace);
+    const mobile = normalized.mobile ?? "none";
+    const tablet = normalized.tablet ?? mobile;
+    const desktop = normalized.desktop ?? tablet;
+    const wide = normalized.wide ?? desktop;
+    const resolvedOffsetSpace = useResponsiveValue()({ mobile, tablet, desktop, wide }) ?? mobile;
+    const spaceScale = useSpace();
+    let offsetSpacePx = 0;
+    if (resolvedOffsetSpace !== "none") {
+      offsetSpacePx = spaceScale.space[resolvedOffsetSpace] * spaceScale.grid;
+    }
+    const floatingUiRequestedPosition = getFloatingUiPosition(placement, align);
+    const middleware = [
+      offset(offsetSpacePx),
+      !lockPlacement && flip(),
+      width === "full" ? size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`
+          });
+        }
+      }) : shift({
+        crossAxis: align === "center"
+      }),
+      arrowRef && arrow({ element: arrowRef })
+    ].filter(Boolean);
+    const {
+      refs,
+      floatingStyles,
+      middlewareData,
+      placement: floatingUiEvaluatedPosition,
+      isPositioned
+    } = useFloating({
+      placement: floatingUiRequestedPosition,
+      middleware,
+      whileElementsMounted: autoUpdate
+    });
+    useEffect(() => {
+      refs.setReference(triggerRef.current);
+    }, [triggerRef, refs]);
+    useEffect(() => {
+      if (ref.current) {
+        refs.setFloating(ref.current);
+      }
+    }, [refs]);
     useEffect(() => {
       const handleKeydown = (event) => {
         if (event.key === "Escape" || event.key === "Tab") {
@@ -78,9 +116,6 @@ const PopoverContent = forwardRef(
         window.removeEventListener("keydown", handleKeydown);
       };
     }, [onClose, triggerRef]);
-    useEffect(() => {
-      setTriggerPosition(getPosition(triggerRef.current));
-    }, [triggerRef]);
     useEffect(() => {
       setTimeout(() => {
         if (!enterFocusRef) {
@@ -98,95 +133,24 @@ const PopoverContent = forwardRef(
           }
         }
       }, animationTimeout);
-    }, [open, enterFocusRef, triggerRef]);
+    }, [open, enterFocusRef]);
+    const resolvedPlacement = floatingUiEvaluatedPosition?.startsWith("top") ? "top" : "bottom";
     useEffect(() => {
-      const handleResize = () => {
-        setTriggerPosition(getPosition(triggerRef.current));
-      };
-      window.addEventListener("resize", handleResize);
-      const resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(document.body);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        resizeObserver.disconnect();
-      };
-    }, [triggerRef]);
-    const handlePlacement = () => {
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const triggerBoundingRect = triggerRef.current?.getBoundingClientRect();
-      if (!triggerBoundingRect) {
-        return;
-      }
-      const { height: popoverHeight } = popoverBoundingRect;
-      const heightRequired = popoverHeight + transitionThresholdInPx;
-      const fitsAbove = triggerBoundingRect.top >= heightRequired;
-      const fitsBelow = window.innerHeight - triggerBoundingRect.bottom >= heightRequired;
-      if (!fitsAbove && fitsBelow) {
-        setActualPlacement("bottom");
-      } else if (!fitsBelow && fitsAbove) {
-        setActualPlacement("top");
-      } else {
-        setActualPlacement(placement);
+      if (onPlacementChange) {
+        onPlacementChange({
+          placement: resolvedPlacement,
+          arrow: middlewareData.arrow
+        });
       }
+    }, [resolvedPlacement, middlewareData.arrow, onPlacementChange]);
+    const combinedStyles = {
+      ...floatingStyles,
+      ...!isPositioned ? { opacity: 0, pointerEvents: "none" } : {}
     };
-    const handleHorizontalShift = () => {
-      if (!triggerPosition) {
-        return;
-      }
-      const popoverBoundingRect = ref?.current?.getBoundingClientRect();
-      if (!popoverBoundingRect) {
-        return;
-      }
-      const { width: popoverWidth } = popoverBoundingRect;
-      const triggerCenter = triggerPosition.width && triggerPosition.left + triggerPosition.width / 2;
-      const popoverLeft = align === "center" && triggerCenter ? triggerCenter - popoverWidth / 2 : triggerPosition.left;
-      const clampedPopoverLeft = clamp(
-        scrollX,
-        popoverLeft,
-        window.innerWidth + scrollX - popoverWidth
-      );
-      const triggerRightFromLeft = window.innerWidth - triggerPosition.right;
-      const clampedTriggerRightFromLeft = clamp(
-        scrollX + popoverWidth,
-        triggerRightFromLeft,
-        scrollX + window.innerWidth
-      );
-      if (alignmentAnchor === "right" && clampedTriggerRightFromLeft !== triggerPosition.right + horizontalOffset$1) {
-        setHorizontalOffset(
-          window.innerWidth - clampedTriggerRightFromLeft - triggerPosition.right
-        );
-      }
-      if (alignmentAnchor === "left" && clampedPopoverLeft !== triggerPosition.left + horizontalOffset$1) {
-        setHorizontalOffset(clampedPopoverLeft - triggerPosition.left);
-      }
-      return;
-    };
-    useIsomorphicLayoutEffect(() => {
-      if (!showPopover) {
-        return;
-      }
-      if (width !== "full") {
-        handleHorizontalShift();
-      }
-      if (!lockPlacement) {
-        handlePlacement();
-      }
-    }, [showPopover]);
-    const triggerPositionVars = triggerPosition && {
-      // Vertical positioning
-      [triggerVars[actualPlacement]]: `${triggerPosition[actualPlacement]}`,
-      // Horizontal positioning
-      [triggerVars.left]: width === "full" || alignmentAnchor === "left" ? `${triggerPosition?.left}` : void 0,
-      [triggerVars.right]: width === "full" || alignmentAnchor === "right" ? `${triggerPosition?.right}` : void 0,
-      // Horizontal scroll offset
-      [horizontalOffset]: width !== "full" ? `${horizontalOffset$1}` : "0"
+    const popoverContextValue = {
+      arrow: middlewareData.arrow,
+      resolvedPlacement
     };
-    if (!showPopover) {
-      return null;
-    }
     return /* @__PURE__ */ jsxs(BraidPortal, { children: [
       modal && /* @__PURE__ */ jsx(
         Box,
@@ -214,17 +178,18 @@ const PopoverContent = forwardRef(
           role: role || void 0,
           tabIndex: -1,
           zIndex,
-          position: "absolute",
-          marginTop: actualPlacement === "bottom" ? offsetSpace : void 0,
-          marginBottom: actualPlacement === "top" ? offsetSpace : void 0,
-          style: triggerPositionVars && assignInlineVars(triggerPositionVars),
-          className: {
-            [popoverPosition]: true,
-            [animation]: true,
-            [invertPlacement]: actualPlacement === "bottom",
-            [delayVisibility]: delayVisibility$1
-          },
-          children
+          style: combinedStyles,
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: {
+                [animation]: true,
+                [invertPlacement]: resolvedPlacement === "bottom",
+                [delayVisibility]: delayVisibility$1
+              },
+              children: /* @__PURE__ */ jsx(PopoverContext.Provider, { value: popoverContextValue, children })
+            }
+          )
         }
       )
     ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.12.3",
+  "version": "33.12.4",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -164,6 +164,7 @@
     "@capsizecss/core": "^4.1.2",
     "@capsizecss/metrics": "^3.0.0",
     "@capsizecss/vanilla-extract": "^2.0.4",
+    "@floating-ui/react-dom": "^2.1.6",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",