@react-spectrum/tooltip 3.4.0 → 3.5.1

package/dist/import.mjs

@@ -2,8 +2,8 @@ import "./main.css";
 import $lbkGW$spectrumiconsuiAlertSmall from "@spectrum-icons/ui/AlertSmall";
 import {useStyleProps as $lbkGW$useStyleProps, createDOMRef as $lbkGW$createDOMRef, classNames as $lbkGW$classNames} from "@react-spectrum/utils";
 import $lbkGW$spectrumiconsuiInfoSmall from "@spectrum-icons/ui/InfoSmall";
-import {mergeProps as $lbkGW$mergeProps} from "@react-aria/utils";
-import $lbkGW$react, {useContext as $lbkGW$useContext, useRef as $lbkGW$useRef, useImperativeHandle as $lbkGW$useImperativeHandle} from "react";
+import {mergeProps as $lbkGW$mergeProps, useLayoutEffect as $lbkGW$useLayoutEffect} from "@react-aria/utils";
+import $lbkGW$react, {useContext as $lbkGW$useContext, useRef as $lbkGW$useRef, useImperativeHandle as $lbkGW$useImperativeHandle, useState as $lbkGW$useState} from "react";
 import $lbkGW$spectrumiconsuiSuccessSmall from "@spectrum-icons/ui/SuccessSmall";
 import {useTooltip as $lbkGW$useTooltip, useTooltipTrigger as $lbkGW$useTooltipTrigger} from "@react-aria/tooltip";
 import {FocusableProvider as $lbkGW$FocusableProvider} from "@react-aria/focus";
@@ -123,7 +123,7 @@ let $dc9e2a6f9971fb04$var$iconMap = {
     negative: (0, $lbkGW$spectrumiconsuiAlertSmall)
 };
 function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
-    let { ref: overlayRef , arrowProps: arrowProps , state: state , ...tooltipProviderProps } = (0, $lbkGW$useContext)((0, $b8c00169fae46ac7$export$39ae08fa83328b12));
+    let { ref: overlayRef , arrowProps: arrowProps , state: state , arrowRef: arrowRef , ...tooltipProviderProps } = (0, $lbkGW$useContext)((0, $b8c00169fae46ac7$export$39ae08fa83328b12));
     let defaultRef = (0, $lbkGW$useRef)();
     overlayRef = overlayRef || defaultRef;
     props = (0, $lbkGW$mergeProps)(props, tooltipProviderProps);
@@ -147,6 +147,7 @@ function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
         className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip-label")
     }, props.children), /*#__PURE__*/ (0, $lbkGW$react).createElement("span", {
         ...arrowProps,
+        ref: arrowRef,
         className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip-tip")
     }));
 }
@@ -172,6 +173,7 @@ function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
 
 
 
+
 const $019364e6919ef1db$var$DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const $019364e6919ef1db$var$DEFAULT_CROSS_OFFSET = 0;
 function $019364e6919ef1db$var$TooltipTrigger(props) {
@@ -184,6 +186,24 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
         isDisabled: isDisabled,
         trigger: triggerAction
     }, state, tooltipTriggerRef);
+    let [borderRadius, setBorderRadius] = (0, $lbkGW$useState)(0);
+    (0, $lbkGW$useLayoutEffect)(()=>{
+        if (overlayRef.current && state.isOpen) {
+            let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;
+            if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        state.isOpen,
+        overlayRef
+    ]);
+    let arrowRef = (0, $lbkGW$useRef)(null);
+    let [arrowWidth, setArrowWidth] = (0, $lbkGW$useState)(0);
+    (0, $lbkGW$useLayoutEffect)(()=>{
+        if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+    }, [
+        state.isOpen,
+        arrowRef
+    ]);
     let { overlayProps: overlayProps , arrowProps: arrowProps , placement: placement  } = (0, $lbkGW$useOverlayPosition)({
         placement: props.placement || "top",
         targetRef: tooltipTriggerRef,
@@ -192,7 +212,9 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
         crossOffset: crossOffset,
         isOpen: state.isOpen,
         shouldFlip: props.shouldFlip,
-        containerPadding: props.containerPadding
+        containerPadding: props.containerPadding,
+        arrowSize: arrowWidth,
+        arrowBoundaryOffset: borderRadius
     });
     return /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$FocusableProvider), {
         ...triggerProps,
@@ -204,6 +226,7 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
             ref: overlayRef,
             UNSAFE_style: overlayProps.style,
             arrowProps: arrowProps,
+            arrowRef: arrowRef,
             ...tooltipProps
         }
     }, /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$Overlay), {

package/dist/main.css

@@ -1 +1 @@
-.spectrum-Tooltip_22ae94{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tooltip_22ae94.is-open_22ae94{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Tooltip--bottom_22ae94.is-open_22ae94{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Tooltip--top_22ae94.is-open_22ae94{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Tooltip--right_22ae94.is-open_22ae94{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Tooltip--left_22ae94.is-open_22ae94{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Tooltip_22ae94{box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50))var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;display:inline-flex;position:relative}.spectrum-Tooltip_22ae94 p{margin:0}.spectrum-Tooltip-tip_22ae94{height:0;width:0;border-width:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50));border-style:solid;border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;position:absolute}.spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{margin-top:calc(var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50))*-1);top:50%}.spectrum-Tooltip--right_22ae94{margin-left:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94{right:100%;transform:rotate(90deg)}.spectrum-Tooltip--left_22ae94{margin-right:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{left:100%;transform:rotate(-90deg)}.spectrum-Tooltip--top_22ae94{margin-bottom:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{top:100%}.spectrum-Tooltip--bottom_22ae94{margin-top:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94{bottom:100%;transform:rotate(-180deg)}.spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{margin-left:calc(var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50))*-1);left:50%}[dir=ltr] .spectrum-Tooltip-typeIcon_22ae94{margin-left:calc(var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125)))}[dir=rtl] .spectrum-Tooltip-typeIcon_22ae94{margin-right:calc(var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125)))}[dir=ltr] .spectrum-Tooltip-typeIcon_22ae94{margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}[dir=rtl] .spectrum-Tooltip-typeIcon_22ae94{margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}.spectrum-Tooltip-typeIcon_22ae94{width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}.spectrum-Tooltip-label_22ae94{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.u-tooltip-showOnHover_22ae94{display:inline-block;position:relative}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip_22ae94{white-space:nowrap;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out;position:absolute;top:-100%;visibility:visible!important}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip-label_22ae94{max-width:none}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{top:50%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94{left:100%;transform:translateY(-50%)}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94{transform:translate(-100%,-50%)}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{left:50%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94{transform:translate(-50%,calc(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))*-1));top:100%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94{transform:translate(-50%,var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50)))}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94{opacity:1}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94{transform:translate(-50%)}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94{transform:translate(-50%,calc(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))*-1))}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94{transform:translate(calc(-100% - var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))),-50%)}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94{transform:translate(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50)),-50%)}.spectrum-Tooltip_22ae94{--spectrum-tooltip-background-color:var(--spectrum-alias-neutral-background-color);--spectrum-tooltip-negative-background-color:var(--spectrum-negative-background-color-default);--spectrum-tooltip-positive-background-color:var(--spectrum-positive-background-color-default);--spectrum-tooltip-info-background-color:var(--spectrum-informative-background-color-default);background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white));filter:var(--spectrum-tooltip-dropshadow);-webkit-filter:var(--spectrum-tooltip-dropshadow);will-change:filter}.spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--negative_22ae94,.spectrum-Tooltip--error_22ae94{background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--negative_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--error_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--info_22ae94,.spectrum-Tooltip--help_22ae94{background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--info_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--help_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--positive_22ae94,.spectrum-Tooltip--success_22ae94{background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--positive_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--success_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}@media (forced-colors:active){.spectrum-Tooltip_22ae94{border:1px solid #0000}.spectrum-Tooltip-tip_22ae94{forced-color-adjust:none;--spectrum-tooltip-background-color:CanvasText;--spectrum-tooltip-negative-background-color:Highlight;--spectrum-tooltip-info-background-color:Highlight;--spectrum-tooltip-positive-background-color:Highlight}}
+:root{font-synthesis:weight}.spectrum-Tooltip_22ae94{visibility:hidden;opacity:0;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s)ease-in-out,visibility 0s linear var(--spectrum-global-animation-duration-100,.13s);pointer-events:none}.spectrum-Tooltip_22ae94.is-open_22ae94{visibility:visible;opacity:.9999;pointer-events:auto;transition-delay:0s}.spectrum-Tooltip--bottom_22ae94.is-open_22ae94{transform:translateY(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Tooltip--top_22ae94.is-open_22ae94{transform:translateY(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Tooltip--right_22ae94.is-open_22ae94{transform:translateX(var(--spectrum-overlay-positive-transform-distance))}.spectrum-Tooltip--left_22ae94.is-open_22ae94{transform:translateX(var(--spectrum-overlay-negative-transform-distance))}.spectrum-Tooltip_22ae94{box-sizing:border-box;vertical-align:top;width:auto;padding:var(--spectrum-tooltip-padding-top,var(--spectrum-global-dimension-size-50))var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125));border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50));min-height:var(--spectrum-tooltip-min-height,var(--spectrum-global-dimension-size-300));font-size:var(--spectrum-tooltip-text-size,var(--spectrum-global-dimension-font-size-75));font-weight:var(--spectrum-tooltip-text-font-weight,var(--spectrum-global-font-weight-regular));line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200));word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;display:inline-flex;position:relative}.spectrum-Tooltip_22ae94 p{margin:0}.spectrum-Tooltip-tip_22ae94{height:0;width:0;border-width:var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50));border-style:solid;border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;position:absolute}.spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{margin-top:calc(var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50))*-1);top:50%}.spectrum-Tooltip--right_22ae94{margin-left:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94{right:100%;transform:rotate(90deg)}.spectrum-Tooltip--left_22ae94{margin-right:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{left:100%;transform:rotate(-90deg)}.spectrum-Tooltip--top_22ae94{margin-bottom:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{top:100%}.spectrum-Tooltip--bottom_22ae94{margin-top:var(--spectrum-global-dimension-size-40)}.spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94{bottom:100%;transform:rotate(-180deg)}.spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{margin-left:calc(var(--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50))*-1);left:50%}[dir=ltr] .spectrum-Tooltip-typeIcon_22ae94{margin-left:calc(var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125)))}[dir=rtl] .spectrum-Tooltip-typeIcon_22ae94{margin-right:calc(var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100)) - var(--spectrum-tooltip-padding-x,var(--spectrum-global-dimension-size-125)))}[dir=ltr] .spectrum-Tooltip-typeIcon_22ae94{margin-right:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}[dir=rtl] .spectrum-Tooltip-typeIcon_22ae94{margin-left:var(--spectrum-tooltip-icon-margin-x,var(--spectrum-global-dimension-size-100))}.spectrum-Tooltip-typeIcon_22ae94{width:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));height:var(--spectrum-tooltip-icon-size,var(--spectrum-global-dimension-size-175));align-self:flex-start;margin-top:1px}.spectrum-Tooltip-label_22ae94{max-width:var(--spectrum-tooltip-content-max-width);line-height:var(--spectrum-tooltip-text-line-height,var(--spectrum-global-dimension-font-size-200))}.u-tooltip-showOnHover_22ae94{display:inline-block;position:relative}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip_22ae94{white-space:nowrap;transition:transform var(--spectrum-global-animation-duration-100,.13s)ease-in-out;position:absolute;top:-100%;visibility:visible!important}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip-label_22ae94{max-width:none}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94 .spectrum-Tooltip-tip_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94 .spectrum-Tooltip-tip_22ae94{top:50%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--right_22ae94{left:100%;transform:translateY(-50%)}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--left_22ae94{transform:translate(-100%,-50%)}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94 .spectrum-Tooltip-tip_22ae94,.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94 .spectrum-Tooltip-tip_22ae94{left:50%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--bottom_22ae94{transform:translate(-50%,calc(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))*-1));top:100%}.u-tooltip-showOnHover_22ae94 .spectrum-Tooltip--top_22ae94{transform:translate(-50%,var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50)))}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94{opacity:1}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--bottom_22ae94{transform:translate(-50%)}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--top_22ae94{transform:translate(-50%,calc(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))*-1))}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--left_22ae94{transform:translate(calc(-100% - var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50))),-50%)}.u-tooltip-showOnHover_22ae94.is-hovered_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94:focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94.is-focused_22ae94 .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94,.u-tooltip-showOnHover_22ae94 :focus .spectrum-Tooltip_22ae94.spectrum-Tooltip--right_22ae94{transform:translate(var(--spectrum-tooltip-tip-margin,var(--spectrum-global-dimension-size-50)),-50%)}.spectrum-Tooltip_22ae94{--spectrum-tooltip-background-color:var(--spectrum-alias-neutral-background-color);--spectrum-tooltip-negative-background-color:var(--spectrum-negative-background-color-default);--spectrum-tooltip-positive-background-color:var(--spectrum-positive-background-color-default);--spectrum-tooltip-info-background-color:var(--spectrum-informative-background-color-default);background-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700));color:var(--spectrum-tooltip-text-color,var(--spectrum-global-color-static-white));filter:var(--spectrum-tooltip-dropshadow);-webkit-filter:var(--spectrum-tooltip-dropshadow);will-change:filter}.spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700))}.spectrum-Tooltip--negative_22ae94,.spectrum-Tooltip--error_22ae94{background-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--negative_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--error_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700))}.spectrum-Tooltip--info_22ae94,.spectrum-Tooltip--help_22ae94{background-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--info_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--help_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700))}.spectrum-Tooltip--positive_22ae94,.spectrum-Tooltip--success_22ae94{background-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}.spectrum-Tooltip--positive_22ae94 .spectrum-Tooltip-tip_22ae94,.spectrum-Tooltip--success_22ae94 .spectrum-Tooltip-tip_22ae94{border-top-color:var(--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700))}@media (forced-colors:active){.spectrum-Tooltip_22ae94{border:1px solid #0000}.spectrum-Tooltip-tip_22ae94{forced-color-adjust:none;--spectrum-tooltip-background-color:CanvasText;--spectrum-tooltip-negative-background-color:Highlight;--spectrum-tooltip-info-background-color:Highlight;--spectrum-tooltip-positive-background-color:Highlight}}

package/dist/main.js

@@ -126,7 +126,7 @@ let $55bd11986fcffc6f$var$iconMap = {
     negative: (0, ($parcel$interopDefault($kAvU8$spectrumiconsuiAlertSmall)))
 };
 function $55bd11986fcffc6f$var$Tooltip(props, ref) {
-    let { ref: overlayRef , arrowProps: arrowProps , state: state , ...tooltipProviderProps } = (0, $kAvU8$react.useContext)((0, $ed2e56c8503433b4$export$39ae08fa83328b12));
+    let { ref: overlayRef , arrowProps: arrowProps , state: state , arrowRef: arrowRef , ...tooltipProviderProps } = (0, $kAvU8$react.useContext)((0, $ed2e56c8503433b4$export$39ae08fa83328b12));
     let defaultRef = (0, $kAvU8$react.useRef)();
     overlayRef = overlayRef || defaultRef;
     props = (0, $kAvU8$reactariautils.mergeProps)(props, tooltipProviderProps);
@@ -150,6 +150,7 @@ function $55bd11986fcffc6f$var$Tooltip(props, ref) {
         className: (0, $kAvU8$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba73465d6d9b6556$exports))), "spectrum-Tooltip-label")
     }, props.children), /*#__PURE__*/ (0, ($parcel$interopDefault($kAvU8$react))).createElement("span", {
         ...arrowProps,
+        ref: arrowRef,
         className: (0, $kAvU8$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($ba73465d6d9b6556$exports))), "spectrum-Tooltip-tip")
     }));
 }
@@ -175,6 +176,7 @@ function $55bd11986fcffc6f$var$Tooltip(props, ref) {
 
 
 
+
 const $19f06480c1c1a932$var$DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const $19f06480c1c1a932$var$DEFAULT_CROSS_OFFSET = 0;
 function $19f06480c1c1a932$var$TooltipTrigger(props) {
@@ -187,6 +189,24 @@ function $19f06480c1c1a932$var$TooltipTrigger(props) {
         isDisabled: isDisabled,
         trigger: triggerAction
     }, state, tooltipTriggerRef);
+    let [borderRadius, setBorderRadius] = (0, $kAvU8$react.useState)(0);
+    (0, $kAvU8$reactariautils.useLayoutEffect)(()=>{
+        if (overlayRef.current && state.isOpen) {
+            let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;
+            if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        state.isOpen,
+        overlayRef
+    ]);
+    let arrowRef = (0, $kAvU8$react.useRef)(null);
+    let [arrowWidth, setArrowWidth] = (0, $kAvU8$react.useState)(0);
+    (0, $kAvU8$reactariautils.useLayoutEffect)(()=>{
+        if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+    }, [
+        state.isOpen,
+        arrowRef
+    ]);
     let { overlayProps: overlayProps , arrowProps: arrowProps , placement: placement  } = (0, $kAvU8$reactariaoverlays.useOverlayPosition)({
         placement: props.placement || "top",
         targetRef: tooltipTriggerRef,
@@ -195,7 +215,9 @@ function $19f06480c1c1a932$var$TooltipTrigger(props) {
         crossOffset: crossOffset,
         isOpen: state.isOpen,
         shouldFlip: props.shouldFlip,
-        containerPadding: props.containerPadding
+        containerPadding: props.containerPadding,
+        arrowSize: arrowWidth,
+        arrowBoundaryOffset: borderRadius
     });
     return /*#__PURE__*/ (0, ($parcel$interopDefault($kAvU8$react))).createElement((0, $kAvU8$reactariafocus.FocusableProvider), {
         ...triggerProps,
@@ -207,6 +229,7 @@ function $19f06480c1c1a932$var$TooltipTrigger(props) {
             ref: overlayRef,
             UNSAFE_style: overlayProps.style,
             arrowProps: arrowProps,
+            arrowRef: arrowRef,
             ...tooltipProps
         }
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($kAvU8$react))).createElement((0, $kAvU8$reactspectrumoverlays.Overlay), {

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@adobe/spectrum-css-temp/components/tooltip/vars.css","packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertSmall from '@spectrum-icons/ui/AlertSmall';\nimport {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport InfoSmall from '@spectrum-icons/ui/InfoSmall';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTooltipProps} from '@react-types/tooltip';\nimport styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css';\nimport SuccessSmall from '@spectrum-icons/ui/SuccessSmall';\nimport {TooltipContext} from './context';\nimport {useTooltip} from '@react-aria/tooltip';\n\nlet iconMap = {\n  info: InfoSmall,\n  positive: SuccessSmall,\n  negative: AlertSmall\n};\n\nfunction Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {\n  let {ref: overlayRef, arrowProps, state, ...tooltipProviderProps} = useContext(TooltipContext);\n  let defaultRef = useRef();\n  overlayRef = overlayRef || defaultRef;\n  props = mergeProps(props, tooltipProviderProps);\n  let {\n    variant = 'neutral',\n    placement = 'top',\n    isOpen,\n    showIcon,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(overlayRef));\n\n  let Icon = iconMap[variant];\n\n  return (\n    <div\n      {...styleProps}\n      {...tooltipProps}\n      className={classNames(\n        styles,\n        'spectrum-Tooltip',\n        `spectrum-Tooltip--${variant}`,\n        `spectrum-Tooltip--${placement}`,\n        {\n          'is-open': isOpen\n        },\n        styleProps.className\n      )}\n      ref={overlayRef}>\n      {showIcon && variant !== 'neutral' && <Icon UNSAFE_className={classNames(styles, 'spectrum-Tooltip-typeIcon')} aria-hidden />}\n      {props.children && (\n        <span className={classNames(styles, 'spectrum-Tooltip-label')}>\n          {props.children}\n        </span>\n      )}\n      <span {...arrowProps} className={classNames(styles, 'spectrum-Tooltip-tip')} />\n    </div>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = React.forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {PlacementAxis} from '@react-types/overlays';\nimport React, {HTMLAttributes, RefObject} from 'react';\nimport {StyleProps} from '@react-types/shared';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\n\ninterface TooltipContextProps extends StyleProps {\n  state?: TooltipTriggerState,\n  ref?: RefObject<HTMLDivElement>,\n  placement?: PlacementAxis,\n  arrowProps?: HTMLAttributes<HTMLElement>\n}\n\nexport const TooltipContext = React.createContext<TooltipContextProps>({});\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableProvider} from '@react-aria/focus';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipContext} from './context';\nimport {useOverlayPosition} from '@react-aria/overlays';\nimport {useTooltipTrigger} from '@react-aria/tooltip';\nimport {useTooltipTriggerState} from '@react-stately/tooltip';\n\nconst DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button\nconst DEFAULT_CROSS_OFFSET = 0;\n\nfunction TooltipTrigger(props: SpectrumTooltipTriggerProps) {\n  let {\n    children,\n    crossOffset = DEFAULT_CROSS_OFFSET,\n    isDisabled,\n    offset = DEFAULT_OFFSET,\n    trigger: triggerAction\n  } = props;\n\n  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];\n  let state = useTooltipTriggerState(props);\n\n  let tooltipTriggerRef = useRef<HTMLElement>();\n  let overlayRef = useRef<HTMLDivElement>();\n\n  let {triggerProps, tooltipProps} = useTooltipTrigger({\n    isDisabled,\n    trigger: triggerAction\n  }, state, tooltipTriggerRef);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: tooltipTriggerRef,\n    overlayRef,\n    offset,\n    crossOffset,\n    isOpen: state.isOpen,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding\n  });\n\n  return (\n    <FocusableProvider\n      {...triggerProps}\n      ref={tooltipTriggerRef}>\n      {trigger}\n      <TooltipContext.Provider\n        value={{\n          state,\n          placement,\n          ref: overlayRef,\n          UNSAFE_style: overlayProps.style,\n          arrowProps,\n          ...tooltipProps\n        }}>\n        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>\n          {tooltip}\n        </Overlay>\n      </TooltipContext.Provider>\n    </FocusableProvider>\n  );\n}\n\n// Support TooltipTrigger inside components using CollectionBuilder.\nTooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps) {\n  // Replaced the use of React.Childern.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger, tooltip] = childArray;\n  yield {\n    element: trigger,\n    wrapper: (element) => (\n      <TooltipTrigger key={element.key} {...props}>\n        {element}\n        {tooltip}\n      </TooltipTrigger>\n    )\n  };\n};\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\n// We don't want getCollectionNode to show up in the type definition\nlet _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;\nexport {_TooltipTrigger as TooltipTrigger};\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@adobe/spectrum-css-temp/components/tooltip/vars.css","packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertSmall from '@spectrum-icons/ui/AlertSmall';\nimport {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport InfoSmall from '@spectrum-icons/ui/InfoSmall';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTooltipProps} from '@react-types/tooltip';\nimport styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css';\nimport SuccessSmall from '@spectrum-icons/ui/SuccessSmall';\nimport {TooltipContext} from './context';\nimport {useTooltip} from '@react-aria/tooltip';\n\nlet iconMap = {\n  info: InfoSmall,\n  positive: SuccessSmall,\n  negative: AlertSmall\n};\n\nfunction Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {\n  let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);\n  let defaultRef = useRef();\n  overlayRef = overlayRef || defaultRef;\n  props = mergeProps(props, tooltipProviderProps);\n  let {\n    variant = 'neutral',\n    placement = 'top',\n    isOpen,\n    showIcon,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(overlayRef));\n\n  let Icon = iconMap[variant];\n\n  return (\n    <div\n      {...styleProps}\n      {...tooltipProps}\n      className={classNames(\n        styles,\n        'spectrum-Tooltip',\n        `spectrum-Tooltip--${variant}`,\n        `spectrum-Tooltip--${placement}`,\n        {\n          'is-open': isOpen\n        },\n        styleProps.className\n      )}\n      ref={overlayRef}>\n      {showIcon && variant !== 'neutral' && <Icon UNSAFE_className={classNames(styles, 'spectrum-Tooltip-typeIcon')} aria-hidden />}\n      {props.children && (\n        <span className={classNames(styles, 'spectrum-Tooltip-label')}>\n          {props.children}\n        </span>\n      )}\n      <span {...arrowProps} ref={arrowRef} className={classNames(styles, 'spectrum-Tooltip-tip')} />\n    </div>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = React.forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {PlacementAxis} from '@react-types/overlays';\nimport React, {HTMLAttributes, RefObject} from 'react';\nimport {StyleProps} from '@react-types/shared';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\n\ninterface TooltipContextProps extends StyleProps {\n  state?: TooltipTriggerState,\n  ref?: RefObject<HTMLDivElement>,\n  placement?: PlacementAxis,\n  arrowProps?: HTMLAttributes<HTMLElement>,\n  arrowRef?: RefObject<HTMLElement>\n}\n\nexport const TooltipContext = React.createContext<TooltipContextProps>({});\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableProvider} from '@react-aria/focus';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef, useState} from 'react';\nimport {SpectrumTooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipContext} from './context';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useOverlayPosition} from '@react-aria/overlays';\nimport {useTooltipTrigger} from '@react-aria/tooltip';\nimport {useTooltipTriggerState} from '@react-stately/tooltip';\n\nconst DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button\nconst DEFAULT_CROSS_OFFSET = 0;\n\nfunction TooltipTrigger(props: SpectrumTooltipTriggerProps) {\n  let {\n    children,\n    crossOffset = DEFAULT_CROSS_OFFSET,\n    isDisabled,\n    offset = DEFAULT_OFFSET,\n    trigger: triggerAction\n  } = props;\n\n  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];\n  let state = useTooltipTriggerState(props);\n\n  let tooltipTriggerRef = useRef<HTMLElement>();\n  let overlayRef = useRef<HTMLDivElement>();\n\n  let {triggerProps, tooltipProps} = useTooltipTrigger({\n    isDisabled,\n    trigger: triggerAction\n  }, state, tooltipTriggerRef);\n\n  let [borderRadius, setBorderRadius] = useState(0);\n  useLayoutEffect(() => {\n    if (overlayRef.current && state.isOpen) {\n      let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;\n      if (spectrumBorderRadius !== '') {\n        setBorderRadius(parseInt(spectrumBorderRadius, 10));\n      }\n    }\n  }, [state.isOpen, overlayRef]);\n  let arrowRef = useRef(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: tooltipTriggerRef,\n    overlayRef,\n    offset,\n    crossOffset,\n    isOpen: state.isOpen,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding,\n    arrowSize: arrowWidth,\n    arrowBoundaryOffset: borderRadius\n  });\n\n  return (\n    <FocusableProvider\n      {...triggerProps}\n      ref={tooltipTriggerRef}>\n      {trigger}\n      <TooltipContext.Provider\n        value={{\n          state,\n          placement,\n          ref: overlayRef,\n          UNSAFE_style: overlayProps.style,\n          arrowProps,\n          arrowRef: arrowRef,\n          ...tooltipProps\n        }}>\n        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>\n          {tooltip}\n        </Overlay>\n      </TooltipContext.Provider>\n    </FocusableProvider>\n  );\n}\n\n// Support TooltipTrigger inside components using CollectionBuilder.\nTooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps) {\n  // Replaced the use of React.Childern.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger, tooltip] = childArray;\n  yield {\n    element: trigger,\n    wrapper: (element) => (\n      <TooltipTrigger key={element.key} {...props}>\n        {element}\n        {tooltip}\n      </TooltipTrigger>\n    )\n  };\n};\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\n// We don't want getCollectionNode to show up in the type definition\nlet _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;\nexport {_TooltipTrigger as TooltipTrigger};\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -2,8 +2,8 @@ import "./main.css";
 import $lbkGW$spectrumiconsuiAlertSmall from "@spectrum-icons/ui/AlertSmall";
 import {useStyleProps as $lbkGW$useStyleProps, createDOMRef as $lbkGW$createDOMRef, classNames as $lbkGW$classNames} from "@react-spectrum/utils";
 import $lbkGW$spectrumiconsuiInfoSmall from "@spectrum-icons/ui/InfoSmall";
-import {mergeProps as $lbkGW$mergeProps} from "@react-aria/utils";
-import $lbkGW$react, {useContext as $lbkGW$useContext, useRef as $lbkGW$useRef, useImperativeHandle as $lbkGW$useImperativeHandle} from "react";
+import {mergeProps as $lbkGW$mergeProps, useLayoutEffect as $lbkGW$useLayoutEffect} from "@react-aria/utils";
+import $lbkGW$react, {useContext as $lbkGW$useContext, useRef as $lbkGW$useRef, useImperativeHandle as $lbkGW$useImperativeHandle, useState as $lbkGW$useState} from "react";
 import $lbkGW$spectrumiconsuiSuccessSmall from "@spectrum-icons/ui/SuccessSmall";
 import {useTooltip as $lbkGW$useTooltip, useTooltipTrigger as $lbkGW$useTooltipTrigger} from "@react-aria/tooltip";
 import {FocusableProvider as $lbkGW$FocusableProvider} from "@react-aria/focus";
@@ -123,7 +123,7 @@ let $dc9e2a6f9971fb04$var$iconMap = {
     negative: (0, $lbkGW$spectrumiconsuiAlertSmall)
 };
 function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
-    let { ref: overlayRef , arrowProps: arrowProps , state: state , ...tooltipProviderProps } = (0, $lbkGW$useContext)((0, $b8c00169fae46ac7$export$39ae08fa83328b12));
+    let { ref: overlayRef , arrowProps: arrowProps , state: state , arrowRef: arrowRef , ...tooltipProviderProps } = (0, $lbkGW$useContext)((0, $b8c00169fae46ac7$export$39ae08fa83328b12));
     let defaultRef = (0, $lbkGW$useRef)();
     overlayRef = overlayRef || defaultRef;
     props = (0, $lbkGW$mergeProps)(props, tooltipProviderProps);
@@ -147,6 +147,7 @@ function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
         className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip-label")
     }, props.children), /*#__PURE__*/ (0, $lbkGW$react).createElement("span", {
         ...arrowProps,
+        ref: arrowRef,
         className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip-tip")
     }));
 }
@@ -172,6 +173,7 @@ function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
 
 
 
+
 const $019364e6919ef1db$var$DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const $019364e6919ef1db$var$DEFAULT_CROSS_OFFSET = 0;
 function $019364e6919ef1db$var$TooltipTrigger(props) {
@@ -184,6 +186,24 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
         isDisabled: isDisabled,
         trigger: triggerAction
     }, state, tooltipTriggerRef);
+    let [borderRadius, setBorderRadius] = (0, $lbkGW$useState)(0);
+    (0, $lbkGW$useLayoutEffect)(()=>{
+        if (overlayRef.current && state.isOpen) {
+            let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;
+            if (spectrumBorderRadius !== "") setBorderRadius(parseInt(spectrumBorderRadius, 10));
+        }
+    }, [
+        state.isOpen,
+        overlayRef
+    ]);
+    let arrowRef = (0, $lbkGW$useRef)(null);
+    let [arrowWidth, setArrowWidth] = (0, $lbkGW$useState)(0);
+    (0, $lbkGW$useLayoutEffect)(()=>{
+        if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+    }, [
+        state.isOpen,
+        arrowRef
+    ]);
     let { overlayProps: overlayProps , arrowProps: arrowProps , placement: placement  } = (0, $lbkGW$useOverlayPosition)({
         placement: props.placement || "top",
         targetRef: tooltipTriggerRef,
@@ -192,7 +212,9 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
         crossOffset: crossOffset,
         isOpen: state.isOpen,
         shouldFlip: props.shouldFlip,
-        containerPadding: props.containerPadding
+        containerPadding: props.containerPadding,
+        arrowSize: arrowWidth,
+        arrowBoundaryOffset: borderRadius
     });
     return /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$FocusableProvider), {
         ...triggerProps,
@@ -204,6 +226,7 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
             ref: overlayRef,
             UNSAFE_style: overlayProps.style,
             arrowProps: arrowProps,
+            arrowRef: arrowRef,
             ...tooltipProps
         }
     }, /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$Overlay), {

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@adobe/spectrum-css-temp/components/tooltip/vars.css","packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertSmall from '@spectrum-icons/ui/AlertSmall';\nimport {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport InfoSmall from '@spectrum-icons/ui/InfoSmall';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTooltipProps} from '@react-types/tooltip';\nimport styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css';\nimport SuccessSmall from '@spectrum-icons/ui/SuccessSmall';\nimport {TooltipContext} from './context';\nimport {useTooltip} from '@react-aria/tooltip';\n\nlet iconMap = {\n  info: InfoSmall,\n  positive: SuccessSmall,\n  negative: AlertSmall\n};\n\nfunction Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {\n  let {ref: overlayRef, arrowProps, state, ...tooltipProviderProps} = useContext(TooltipContext);\n  let defaultRef = useRef();\n  overlayRef = overlayRef || defaultRef;\n  props = mergeProps(props, tooltipProviderProps);\n  let {\n    variant = 'neutral',\n    placement = 'top',\n    isOpen,\n    showIcon,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(overlayRef));\n\n  let Icon = iconMap[variant];\n\n  return (\n    <div\n      {...styleProps}\n      {...tooltipProps}\n      className={classNames(\n        styles,\n        'spectrum-Tooltip',\n        `spectrum-Tooltip--${variant}`,\n        `spectrum-Tooltip--${placement}`,\n        {\n          'is-open': isOpen\n        },\n        styleProps.className\n      )}\n      ref={overlayRef}>\n      {showIcon && variant !== 'neutral' && <Icon UNSAFE_className={classNames(styles, 'spectrum-Tooltip-typeIcon')} aria-hidden />}\n      {props.children && (\n        <span className={classNames(styles, 'spectrum-Tooltip-label')}>\n          {props.children}\n        </span>\n      )}\n      <span {...arrowProps} className={classNames(styles, 'spectrum-Tooltip-tip')} />\n    </div>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = React.forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {PlacementAxis} from '@react-types/overlays';\nimport React, {HTMLAttributes, RefObject} from 'react';\nimport {StyleProps} from '@react-types/shared';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\n\ninterface TooltipContextProps extends StyleProps {\n  state?: TooltipTriggerState,\n  ref?: RefObject<HTMLDivElement>,\n  placement?: PlacementAxis,\n  arrowProps?: HTMLAttributes<HTMLElement>\n}\n\nexport const TooltipContext = React.createContext<TooltipContextProps>({});\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableProvider} from '@react-aria/focus';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef} from 'react';\nimport {SpectrumTooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipContext} from './context';\nimport {useOverlayPosition} from '@react-aria/overlays';\nimport {useTooltipTrigger} from '@react-aria/tooltip';\nimport {useTooltipTriggerState} from '@react-stately/tooltip';\n\nconst DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button\nconst DEFAULT_CROSS_OFFSET = 0;\n\nfunction TooltipTrigger(props: SpectrumTooltipTriggerProps) {\n  let {\n    children,\n    crossOffset = DEFAULT_CROSS_OFFSET,\n    isDisabled,\n    offset = DEFAULT_OFFSET,\n    trigger: triggerAction\n  } = props;\n\n  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];\n  let state = useTooltipTriggerState(props);\n\n  let tooltipTriggerRef = useRef<HTMLElement>();\n  let overlayRef = useRef<HTMLDivElement>();\n\n  let {triggerProps, tooltipProps} = useTooltipTrigger({\n    isDisabled,\n    trigger: triggerAction\n  }, state, tooltipTriggerRef);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: tooltipTriggerRef,\n    overlayRef,\n    offset,\n    crossOffset,\n    isOpen: state.isOpen,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding\n  });\n\n  return (\n    <FocusableProvider\n      {...triggerProps}\n      ref={tooltipTriggerRef}>\n      {trigger}\n      <TooltipContext.Provider\n        value={{\n          state,\n          placement,\n          ref: overlayRef,\n          UNSAFE_style: overlayProps.style,\n          arrowProps,\n          ...tooltipProps\n        }}>\n        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>\n          {tooltip}\n        </Overlay>\n      </TooltipContext.Provider>\n    </FocusableProvider>\n  );\n}\n\n// Support TooltipTrigger inside components using CollectionBuilder.\nTooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps) {\n  // Replaced the use of React.Childern.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger, tooltip] = childArray;\n  yield {\n    element: trigger,\n    wrapper: (element) => (\n      <TooltipTrigger key={element.key} {...props}>\n        {element}\n        {tooltip}\n      </TooltipTrigger>\n    )\n  };\n};\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\n// We don't want getCollectionNode to show up in the type definition\nlet _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;\nexport {_TooltipTrigger as TooltipTrigger};\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@adobe/spectrum-css-temp/components/tooltip/vars.css","packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertSmall from '@spectrum-icons/ui/AlertSmall';\nimport {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef} from '@react-types/shared';\nimport InfoSmall from '@spectrum-icons/ui/InfoSmall';\nimport {mergeProps} from '@react-aria/utils';\nimport React, {useContext, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTooltipProps} from '@react-types/tooltip';\nimport styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css';\nimport SuccessSmall from '@spectrum-icons/ui/SuccessSmall';\nimport {TooltipContext} from './context';\nimport {useTooltip} from '@react-aria/tooltip';\n\nlet iconMap = {\n  info: InfoSmall,\n  positive: SuccessSmall,\n  negative: AlertSmall\n};\n\nfunction Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {\n  let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);\n  let defaultRef = useRef();\n  overlayRef = overlayRef || defaultRef;\n  props = mergeProps(props, tooltipProviderProps);\n  let {\n    variant = 'neutral',\n    placement = 'top',\n    isOpen,\n    showIcon,\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(otherProps);\n  let {tooltipProps} = useTooltip(props, state);\n\n  // Sync ref with overlayRef from context.\n  useImperativeHandle(ref, () => createDOMRef(overlayRef));\n\n  let Icon = iconMap[variant];\n\n  return (\n    <div\n      {...styleProps}\n      {...tooltipProps}\n      className={classNames(\n        styles,\n        'spectrum-Tooltip',\n        `spectrum-Tooltip--${variant}`,\n        `spectrum-Tooltip--${placement}`,\n        {\n          'is-open': isOpen\n        },\n        styleProps.className\n      )}\n      ref={overlayRef}>\n      {showIcon && variant !== 'neutral' && <Icon UNSAFE_className={classNames(styles, 'spectrum-Tooltip-typeIcon')} aria-hidden />}\n      {props.children && (\n        <span className={classNames(styles, 'spectrum-Tooltip-label')}>\n          {props.children}\n        </span>\n      )}\n      <span {...arrowProps} ref={arrowRef} className={classNames(styles, 'spectrum-Tooltip-tip')} />\n    </div>\n  );\n}\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = React.forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {PlacementAxis} from '@react-types/overlays';\nimport React, {HTMLAttributes, RefObject} from 'react';\nimport {StyleProps} from '@react-types/shared';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\n\ninterface TooltipContextProps extends StyleProps {\n  state?: TooltipTriggerState,\n  ref?: RefObject<HTMLDivElement>,\n  placement?: PlacementAxis,\n  arrowProps?: HTMLAttributes<HTMLElement>,\n  arrowRef?: RefObject<HTMLElement>\n}\n\nexport const TooltipContext = React.createContext<TooltipContextProps>({});\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FocusableProvider} from '@react-aria/focus';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {ReactElement, useRef, useState} from 'react';\nimport {SpectrumTooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipContext} from './context';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useOverlayPosition} from '@react-aria/overlays';\nimport {useTooltipTrigger} from '@react-aria/tooltip';\nimport {useTooltipTriggerState} from '@react-stately/tooltip';\n\nconst DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button\nconst DEFAULT_CROSS_OFFSET = 0;\n\nfunction TooltipTrigger(props: SpectrumTooltipTriggerProps) {\n  let {\n    children,\n    crossOffset = DEFAULT_CROSS_OFFSET,\n    isDisabled,\n    offset = DEFAULT_OFFSET,\n    trigger: triggerAction\n  } = props;\n\n  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];\n  let state = useTooltipTriggerState(props);\n\n  let tooltipTriggerRef = useRef<HTMLElement>();\n  let overlayRef = useRef<HTMLDivElement>();\n\n  let {triggerProps, tooltipProps} = useTooltipTrigger({\n    isDisabled,\n    trigger: triggerAction\n  }, state, tooltipTriggerRef);\n\n  let [borderRadius, setBorderRadius] = useState(0);\n  useLayoutEffect(() => {\n    if (overlayRef.current && state.isOpen) {\n      let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;\n      if (spectrumBorderRadius !== '') {\n        setBorderRadius(parseInt(spectrumBorderRadius, 10));\n      }\n    }\n  }, [state.isOpen, overlayRef]);\n  let arrowRef = useRef(null);\n  let [arrowWidth, setArrowWidth] = useState(0);\n  useLayoutEffect(() => {\n    if (arrowRef.current && state.isOpen) {\n      setArrowWidth(arrowRef.current.getBoundingClientRect().width);\n    }\n  }, [state.isOpen, arrowRef]);\n\n  let {overlayProps, arrowProps, placement} = useOverlayPosition({\n    placement: props.placement || 'top',\n    targetRef: tooltipTriggerRef,\n    overlayRef,\n    offset,\n    crossOffset,\n    isOpen: state.isOpen,\n    shouldFlip: props.shouldFlip,\n    containerPadding: props.containerPadding,\n    arrowSize: arrowWidth,\n    arrowBoundaryOffset: borderRadius\n  });\n\n  return (\n    <FocusableProvider\n      {...triggerProps}\n      ref={tooltipTriggerRef}>\n      {trigger}\n      <TooltipContext.Provider\n        value={{\n          state,\n          placement,\n          ref: overlayRef,\n          UNSAFE_style: overlayProps.style,\n          arrowProps,\n          arrowRef: arrowRef,\n          ...tooltipProps\n        }}>\n        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>\n          {tooltip}\n        </Overlay>\n      </TooltipContext.Provider>\n    </FocusableProvider>\n  );\n}\n\n// Support TooltipTrigger inside components using CollectionBuilder.\nTooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps) {\n  // Replaced the use of React.Childern.toArray because it mutates the key prop.\n  let childArray: ReactElement[] = [];\n  React.Children.forEach(props.children, child => {\n    if (React.isValidElement(child)) {\n      childArray.push(child);\n    }\n  });\n  let [trigger, tooltip] = childArray;\n  yield {\n    element: trigger,\n    wrapper: (element) => (\n      <TooltipTrigger key={element.key} {...props}>\n        {element}\n        {tooltip}\n      </TooltipTrigger>\n    )\n  };\n};\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\n// We don't want getCollectionNode to show up in the type definition\nlet _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;\nexport {_TooltipTrigger as TooltipTrigger};\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;AC4EA;;GAEG;AACH,OAAA,IAAI,4IAAoC,CAAC;ACmBzC;;;;GAIG;AAEH,OAAA,IAAI,wBAA4C,2BAA2B,KAAK,WAAW,CAAC;ACxF5F,YAAY,EAAC,oBAAoB,EAAE,2BAA2B,EAAC,MAAM,sBAAsB,CAAC","sources":["packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;AC4EA;;GAEG;AACH,OAAA,IAAI,4IAAoC,CAAC;ACwCzC;;;;GAIG;AAEH,OAAA,IAAI,wBAA4C,2BAA2B,KAAK,WAAW,CAAC;AC7G5F,YAAY,EAAC,oBAAoB,EAAE,2BAA2B,EAAC,MAAM,sBAAsB,CAAC","sources":["packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/context.ts","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/Tooltip.tsx","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx","packages/@react-spectrum/tooltip/src/packages/@react-spectrum/tooltip/src/index.ts","packages/@react-spectrum/tooltip/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Tooltip} from './Tooltip';\nexport {TooltipTrigger} from './TooltipTrigger';\nexport type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/tooltip",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,19 +36,19 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.11.0",
-    "@react-aria/interactions": "^3.14.0",
-    "@react-aria/overlays": "^3.13.0",
-    "@react-aria/tooltip": "^3.4.0",
-    "@react-aria/utils": "^3.15.0",
-    "@react-spectrum/overlays": "^5.0.0",
-    "@react-spectrum/utils": "^3.9.0",
-    "@react-stately/tooltip": "^3.3.0",
+    "@react-aria/focus": "^3.12.1",
+    "@react-aria/interactions": "^3.15.1",
+    "@react-aria/overlays": "^3.14.1",
+    "@react-aria/tooltip": "^3.5.1",
+    "@react-aria/utils": "^3.17.0",
+    "@react-spectrum/overlays": "^5.1.1",
+    "@react-spectrum/utils": "^3.9.2",
+    "@react-stately/tooltip": "^3.4.1",
     "@react-stately/utils": "^3.6.0",
-    "@react-types/overlays": "^3.7.0",
-    "@react-types/shared": "^3.17.0",
-    "@react-types/tooltip": "^3.3.0",
-    "@spectrum-icons/ui": "^3.5.0",
+    "@react-types/overlays": "^3.7.2",
+    "@react-types/shared": "^3.18.1",
+    "@react-types/tooltip": "^3.4.1",
+    "@spectrum-icons/ui": "^3.5.2",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
@@ -62,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
+  "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
 }

package/src/Tooltip.tsx

@@ -29,7 +29,7 @@ let iconMap = {
 };
 
 function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
-  let {ref: overlayRef, arrowProps, state, ...tooltipProviderProps} = useContext(TooltipContext);
+  let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);
   let defaultRef = useRef();
   overlayRef = overlayRef || defaultRef;
   props = mergeProps(props, tooltipProviderProps);
@@ -69,7 +69,7 @@ function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
           {props.children}
         </span>
       )}
-      <span {...arrowProps} className={classNames(styles, 'spectrum-Tooltip-tip')} />
+      <span {...arrowProps} ref={arrowRef} className={classNames(styles, 'spectrum-Tooltip-tip')} />
     </div>
   );
 }

package/src/TooltipTrigger.tsx

@@ -12,9 +12,10 @@
 
 import {FocusableProvider} from '@react-aria/focus';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {ReactElement, useRef} from 'react';
+import React, {ReactElement, useRef, useState} from 'react';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {TooltipContext} from './context';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useOverlayPosition} from '@react-aria/overlays';
 import {useTooltipTrigger} from '@react-aria/tooltip';
 import {useTooltipTriggerState} from '@react-stately/tooltip';
@@ -42,6 +43,23 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
     trigger: triggerAction
   }, state, tooltipTriggerRef);
 
+  let [borderRadius, setBorderRadius] = useState(0);
+  useLayoutEffect(() => {
+    if (overlayRef.current && state.isOpen) {
+      let spectrumBorderRadius = window.getComputedStyle(overlayRef.current).borderRadius;
+      if (spectrumBorderRadius !== '') {
+        setBorderRadius(parseInt(spectrumBorderRadius, 10));
+      }
+    }
+  }, [state.isOpen, overlayRef]);
+  let arrowRef = useRef(null);
+  let [arrowWidth, setArrowWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (arrowRef.current && state.isOpen) {
+      setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+    }
+  }, [state.isOpen, arrowRef]);
+
   let {overlayProps, arrowProps, placement} = useOverlayPosition({
     placement: props.placement || 'top',
     targetRef: tooltipTriggerRef,
@@ -50,7 +68,9 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
     crossOffset,
     isOpen: state.isOpen,
     shouldFlip: props.shouldFlip,
-    containerPadding: props.containerPadding
+    containerPadding: props.containerPadding,
+    arrowSize: arrowWidth,
+    arrowBoundaryOffset: borderRadius
   });
 
   return (
@@ -65,6 +85,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
           ref: overlayRef,
           UNSAFE_style: overlayProps.style,
           arrowProps,
+          arrowRef: arrowRef,
           ...tooltipProps
         }}>
         <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>

package/src/context.ts

@@ -19,7 +19,8 @@ interface TooltipContextProps extends StyleProps {
   state?: TooltipTriggerState,
   ref?: RefObject<HTMLDivElement>,
   placement?: PlacementAxis,
-  arrowProps?: HTMLAttributes<HTMLElement>
+  arrowProps?: HTMLAttributes<HTMLElement>,
+  arrowRef?: RefObject<HTMLElement>
 }
 
 export const TooltipContext = React.createContext<TooltipContextProps>({});