braid-design-system 33.12.2 → 33.12.4

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