@react-spectrum/tooltip 3.3.5 → 3.5.0

package/dist/import.mjs

@@ -0,0 +1,264 @@
+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, 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";
+import {Overlay as $lbkGW$Overlay} from "@react-spectrum/overlays";
+import {useOverlayPosition as $lbkGW$useOverlayPosition} from "@react-aria/overlays";
+import {useTooltipTriggerState as $lbkGW$useTooltipTriggerState} from "@react-stately/tooltip";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+var $1e9110aec8886b85$exports = {};
+
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip", () => $1e9110aec8886b85$export$f7bf7078d3d03f05, (v) => $1e9110aec8886b85$export$f7bf7078d3d03f05 = v);
+$parcel$export($1e9110aec8886b85$exports, "is-open", () => $1e9110aec8886b85$export$a9781837241c946d, (v) => $1e9110aec8886b85$export$a9781837241c946d = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--bottom", () => $1e9110aec8886b85$export$4f420a9bbb442953, (v) => $1e9110aec8886b85$export$4f420a9bbb442953 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--top", () => $1e9110aec8886b85$export$d7516df59e198fc7, (v) => $1e9110aec8886b85$export$d7516df59e198fc7 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--right", () => $1e9110aec8886b85$export$c094187772823b2e, (v) => $1e9110aec8886b85$export$c094187772823b2e = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--left", () => $1e9110aec8886b85$export$47f060b68b4cab2c, (v) => $1e9110aec8886b85$export$47f060b68b4cab2c = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip-tip", () => $1e9110aec8886b85$export$9deb89a7a91de30, (v) => $1e9110aec8886b85$export$9deb89a7a91de30 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip-typeIcon", () => $1e9110aec8886b85$export$ff23d46fee8272e4, (v) => $1e9110aec8886b85$export$ff23d46fee8272e4 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip-label", () => $1e9110aec8886b85$export$f4096e0dc445b255, (v) => $1e9110aec8886b85$export$f4096e0dc445b255 = v);
+$parcel$export($1e9110aec8886b85$exports, "u-tooltip-showOnHover", () => $1e9110aec8886b85$export$6ea3237f62800d00, (v) => $1e9110aec8886b85$export$6ea3237f62800d00 = v);
+$parcel$export($1e9110aec8886b85$exports, "is-hovered", () => $1e9110aec8886b85$export$b8813cd5d7824ce7, (v) => $1e9110aec8886b85$export$b8813cd5d7824ce7 = v);
+$parcel$export($1e9110aec8886b85$exports, "is-focused", () => $1e9110aec8886b85$export$e7dc768d35940237, (v) => $1e9110aec8886b85$export$e7dc768d35940237 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--negative", () => $1e9110aec8886b85$export$92fe45b4260594f6, (v) => $1e9110aec8886b85$export$92fe45b4260594f6 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--error", () => $1e9110aec8886b85$export$2b291890a5577893, (v) => $1e9110aec8886b85$export$2b291890a5577893 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--info", () => $1e9110aec8886b85$export$e995d5780591d0a8, (v) => $1e9110aec8886b85$export$e995d5780591d0a8 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--help", () => $1e9110aec8886b85$export$d33ca445ae528241, (v) => $1e9110aec8886b85$export$d33ca445ae528241 = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--positive", () => $1e9110aec8886b85$export$11cbf31e1b6e51ac, (v) => $1e9110aec8886b85$export$11cbf31e1b6e51ac = v);
+$parcel$export($1e9110aec8886b85$exports, "spectrum-Tooltip--success", () => $1e9110aec8886b85$export$4eae622bc9b08cac, (v) => $1e9110aec8886b85$export$4eae622bc9b08cac = v);
+var $1e9110aec8886b85$export$f7bf7078d3d03f05;
+var $1e9110aec8886b85$export$a9781837241c946d;
+var $1e9110aec8886b85$export$4f420a9bbb442953;
+var $1e9110aec8886b85$export$d7516df59e198fc7;
+var $1e9110aec8886b85$export$c094187772823b2e;
+var $1e9110aec8886b85$export$47f060b68b4cab2c;
+var $1e9110aec8886b85$export$9deb89a7a91de30;
+var $1e9110aec8886b85$export$ff23d46fee8272e4;
+var $1e9110aec8886b85$export$f4096e0dc445b255;
+var $1e9110aec8886b85$export$6ea3237f62800d00;
+var $1e9110aec8886b85$export$b8813cd5d7824ce7;
+var $1e9110aec8886b85$export$e7dc768d35940237;
+var $1e9110aec8886b85$export$92fe45b4260594f6;
+var $1e9110aec8886b85$export$2b291890a5577893;
+var $1e9110aec8886b85$export$e995d5780591d0a8;
+var $1e9110aec8886b85$export$d33ca445ae528241;
+var $1e9110aec8886b85$export$11cbf31e1b6e51ac;
+var $1e9110aec8886b85$export$4eae622bc9b08cac;
+$1e9110aec8886b85$export$f7bf7078d3d03f05 = "spectrum-Tooltip_22ae94";
+$1e9110aec8886b85$export$a9781837241c946d = "is-open_22ae94";
+$1e9110aec8886b85$export$4f420a9bbb442953 = "spectrum-Tooltip--bottom_22ae94";
+$1e9110aec8886b85$export$d7516df59e198fc7 = "spectrum-Tooltip--top_22ae94";
+$1e9110aec8886b85$export$c094187772823b2e = "spectrum-Tooltip--right_22ae94";
+$1e9110aec8886b85$export$47f060b68b4cab2c = "spectrum-Tooltip--left_22ae94";
+$1e9110aec8886b85$export$9deb89a7a91de30 = "spectrum-Tooltip-tip_22ae94";
+$1e9110aec8886b85$export$ff23d46fee8272e4 = "spectrum-Tooltip-typeIcon_22ae94";
+$1e9110aec8886b85$export$f4096e0dc445b255 = "spectrum-Tooltip-label_22ae94";
+$1e9110aec8886b85$export$6ea3237f62800d00 = "u-tooltip-showOnHover_22ae94";
+$1e9110aec8886b85$export$b8813cd5d7824ce7 = "is-hovered_22ae94";
+$1e9110aec8886b85$export$e7dc768d35940237 = "is-focused_22ae94";
+$1e9110aec8886b85$export$92fe45b4260594f6 = "spectrum-Tooltip--negative_22ae94";
+$1e9110aec8886b85$export$2b291890a5577893 = "spectrum-Tooltip--error_22ae94";
+$1e9110aec8886b85$export$e995d5780591d0a8 = "spectrum-Tooltip--info_22ae94";
+$1e9110aec8886b85$export$d33ca445ae528241 = "spectrum-Tooltip--help_22ae94";
+$1e9110aec8886b85$export$11cbf31e1b6e51ac = "spectrum-Tooltip--positive_22ae94";
+$1e9110aec8886b85$export$4eae622bc9b08cac = "spectrum-Tooltip--success_22ae94";
+
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+const $b8c00169fae46ac7$export$39ae08fa83328b12 = (0, $lbkGW$react).createContext({});
+
+
+
+let $dc9e2a6f9971fb04$var$iconMap = {
+    info: (0, $lbkGW$spectrumiconsuiInfoSmall),
+    positive: (0, $lbkGW$spectrumiconsuiSuccessSmall),
+    negative: (0, $lbkGW$spectrumiconsuiAlertSmall)
+};
+function $dc9e2a6f9971fb04$var$Tooltip(props, ref) {
+    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);
+    let { variant: variant = "neutral" , placement: placement = "top" , isOpen: isOpen , showIcon: showIcon , ...otherProps } = props;
+    let { styleProps: styleProps  } = (0, $lbkGW$useStyleProps)(otherProps);
+    let { tooltipProps: tooltipProps  } = (0, $lbkGW$useTooltip)(props, state);
+    // Sync ref with overlayRef from context.
+    (0, $lbkGW$useImperativeHandle)(ref, ()=>(0, $lbkGW$createDOMRef)(overlayRef));
+    let Icon = $dc9e2a6f9971fb04$var$iconMap[variant];
+    return /*#__PURE__*/ (0, $lbkGW$react).createElement("div", {
+        ...styleProps,
+        ...tooltipProps,
+        className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip", `spectrum-Tooltip--${variant}`, `spectrum-Tooltip--${placement}`, {
+            "is-open": isOpen
+        }, styleProps.className),
+        ref: overlayRef
+    }, showIcon && variant !== "neutral" && /*#__PURE__*/ (0, $lbkGW$react).createElement(Icon, {
+        UNSAFE_className: (0, $lbkGW$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e9110aec8886b85$exports))), "spectrum-Tooltip-typeIcon"),
+        "aria-hidden": true
+    }), props.children && /*#__PURE__*/ (0, $lbkGW$react).createElement("span", {
+        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")
+    }));
+}
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */ let $dc9e2a6f9971fb04$export$28c660c63b792dea = /*#__PURE__*/ (0, $lbkGW$react).forwardRef($dc9e2a6f9971fb04$var$Tooltip);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+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) {
+    let { children: children , crossOffset: crossOffset = $019364e6919ef1db$var$DEFAULT_CROSS_OFFSET , isDisabled: isDisabled , offset: offset = $019364e6919ef1db$var$DEFAULT_OFFSET , trigger: triggerAction  } = props;
+    let [trigger, tooltip] = (0, $lbkGW$react).Children.toArray(children);
+    let state = (0, $lbkGW$useTooltipTriggerState)(props);
+    let tooltipTriggerRef = (0, $lbkGW$useRef)();
+    let overlayRef = (0, $lbkGW$useRef)();
+    let { triggerProps: triggerProps , tooltipProps: tooltipProps  } = (0, $lbkGW$useTooltipTrigger)({
+        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,
+        overlayRef: overlayRef,
+        offset: offset,
+        crossOffset: crossOffset,
+        isOpen: state.isOpen,
+        shouldFlip: props.shouldFlip,
+        containerPadding: props.containerPadding,
+        arrowSize: arrowWidth,
+        arrowBoundaryOffset: borderRadius
+    });
+    return /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$FocusableProvider), {
+        ...triggerProps,
+        ref: tooltipTriggerRef
+    }, trigger, /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $b8c00169fae46ac7$export$39ae08fa83328b12).Provider, {
+        value: {
+            state: state,
+            placement: placement,
+            ref: overlayRef,
+            UNSAFE_style: overlayProps.style,
+            arrowProps: arrowProps,
+            arrowRef: arrowRef,
+            ...tooltipProps
+        }
+    }, /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$Overlay), {
+        isOpen: state.isOpen,
+        nodeRef: overlayRef
+    }, tooltip)));
+}
+// Support TooltipTrigger inside components using CollectionBuilder.
+$019364e6919ef1db$var$TooltipTrigger.getCollectionNode = function*(props) {
+    // Replaced the use of React.Childern.toArray because it mutates the key prop.
+    let childArray = [];
+    (0, $lbkGW$react).Children.forEach(props.children, (child)=>{
+        if (/*#__PURE__*/ (0, $lbkGW$react).isValidElement(child)) childArray.push(child);
+    });
+    let [trigger, tooltip] = childArray;
+    yield {
+        element: trigger,
+        wrapper: (element)=>/*#__PURE__*/ (0, $lbkGW$react).createElement($019364e6919ef1db$var$TooltipTrigger, {
+                key: element.key,
+                ...props
+            }, element, tooltip)
+    };
+};
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */ // We don't want getCollectionNode to show up in the type definition
+let $019364e6919ef1db$export$8c610744efcf8a1d = $019364e6919ef1db$var$TooltipTrigger;
+
+
+
+
+export {$dc9e2a6f9971fb04$export$28c660c63b792dea as Tooltip, $019364e6919ef1db$export$8c610744efcf8a1d as TooltipTrigger};
+//# sourceMappingURL=module.js.map

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-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,10 +229,12 @@ 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), {
-        isOpen: state.isOpen
+        isOpen: state.isOpen,
+        nodeRef: overlayRef
     }, tooltip)));
 }
 // Support TooltipTrigger inside components using CollectionBuilder.

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC,GAED;;;;;;;;;;;;;;;;;;;;;;;;;ACZA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAjBA,4CAAqC;AACrC,4CAA4B;AAC5B,4CAA6C;AAC7C,4CAA0C;AAC1C,4CAA4C;AAC5C,4CAA2C;AAC3C,2CAAyC;AACzC,4CAA8C;AAC9C,4CAA2C;AAC3C,4CAA0C;AAC1C,4CAA+B;AAC/B,4CAA+B;AAC/B,4CAA+C;AAC/C,4CAA4C;AAC5C,4CAA2C;AAC3C,4CAA2C;AAC3C,4CAA+C;AAC/C,4CAA8C;;;;ACjB9C;;;;;;;;;;CAUC,GAED;AAYO,MAAM,4CAAiB,CAAA,GAAA,sCAAK,AAAD,EAAE,aAAa,CAAsB,CAAC;;;;AFAxE,IAAI,gCAAU;IACZ,MAAM,CAAA,GAAA,yDAAS,AAAD;IACd,UAAU,CAAA,GAAA,yDAAY,GAAD;IACrB,UAAU,CAAA,GAAA,yDAAU,CAAD;AACrB;AAEA,SAAS,8BAAQ,KAA2B,EAAE,GAAW,EAAE;IACzD,IAAI,EAAC,KAAK,WAAU,cAAE,WAAU,SAAE,MAAK,EAAE,GAAG,sBAAqB,GAAG,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc,AAAD;IAC5F,IAAI,aAAa,CAAA,GAAA,mBAAM,AAAD;IACtB,aAAa,cAAc;IAC3B,QAAQ,CAAA,GAAA,gCAAU,AAAD,EAAE,OAAO;IAC1B,IAAI,WACF,UAAU,uBACV,YAAY,gBACZ,OAAM,YACN,SAAQ,EACR,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,WAAU,EAAC,GAAG,CAAA,GAAA,uCAAa,AAAD,EAAE;IACjC,IAAI,gBAAC,aAAY,EAAC,GAAG,CAAA,GAAA,kCAAS,EAAE,OAAO;IAEvC,yCAAyC;IACzC,CAAA,GAAA,gCAAmB,AAAD,EAAE,KAAK,IAAM,CAAA,GAAA,sCAAY,AAAD,EAAE;IAE5C,IAAI,OAAO,6BAAO,CAAC,QAAQ;IAE3B,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,YAAY;QAChB,WAAW,CAAA,GAAA,oCAAS,EAClB,CAAA,GAAA,yDAAM,OAAD,GACL,oBACA,CAAC,kBAAkB,EAAE,QAAQ,CAAC,EAC9B,CAAC,kBAAkB,EAAE,UAAU,CAAC,EAChC;YACE,WAAW;QACb,GACA,WAAW,SAAS;QAEtB,KAAK;OACJ,YAAY,YAAY,2BAAa,0DAAC;QAAK,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAM,AAAD,GAAG;QAA8B,eAAA,IAAW;QACzH,MAAM,QAAQ,kBACb,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAM,AAAD,GAAG;OACjC,MAAM,QAAQ,iBAGnB,0DAAC;QAAM,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAM,AAAD,GAAG;;AAG1D;AAEA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC;;ADjEhC;AIdA;;;;;;;;;;CAUC,GAED;;;;;;;AASA,MAAM,uCAAiB,IAAI,yFAAyF;AACpH,MAAM,6CAAuB;AAE7B,SAAS,qCAAe,KAAkC,EAAE;IAC1D,IAAI,YACF,SAAQ,eACR,cAAc,yDACd,WAAU,UACV,SAAS,uCACT,SAAS,cAAa,EACvB,GAAG;IAEJ,IAAI,CAAC,SAAS,QAAQ,GAAG,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IAEhD,IAAI,QAAQ,CAAA,GAAA,iDAAqB,EAAE;IAEnC,IAAI,oBAAoB,CAAA,GAAA,mBAAM,AAAD;IAC7B,IAAI,aAAa,CAAA,GAAA,mBAAM,AAAD;IAEtB,IAAI,gBAAC,aAAY,gBAAE,aAAY,EAAC,GAAG,CAAA,GAAA,yCAAiB,AAAD,EAAE;oBACnD;QACA,SAAS;IACX,GAAG,OAAO;IAEV,IAAI,gBAAC,aAAY,cAAE,WAAU,aAAE,UAAS,EAAC,GAAG,CAAA,GAAA,2CAAiB,EAAE;QAC7D,WAAW,MAAM,SAAS,IAAI;QAC9B,WAAW;oBACX;gBACA;qBACA;QACA,QAAQ,MAAM,MAAM;QACpB,YAAY,MAAM,UAAU;QAC5B,kBAAkB,MAAM,gBAAgB;IAC1C;IAEA,qBACE,0DAAC,CAAA,GAAA,uCAAiB,AAAD;QACd,GAAG,YAAY;QAChB,KAAK;OACJ,uBACD,0DAAC,CAAA,GAAA,yCAAa,EAAE,QAAQ;QACtB,OAAO;mBACL;uBACA;YACA,KAAK;YACL,cAAc,aAAa,KAAK;wBAChC;YACA,GAAG,YAAY;QACjB;qBACA,0DAAC,CAAA,GAAA,oCAAM;QAAE,QAAQ,MAAM,MAAM;OAC1B;AAKX;AAEA,oEAAoE;AACpE,qCAAe,iBAAiB,GAAG,UAAW,KAAkC,EAAE;IAChF,8EAA8E;IAC9E,IAAI,aAA6B,EAAE;IACnC,CAAA,GAAA,sCAAK,AAAD,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,CAAA,QAAS;QAC9C,kBAAI,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC,QACvB,WAAW,IAAI,CAAC;IAEpB;IACA,IAAI,CAAC,SAAS,QAAQ,GAAG;IACzB,MAAM;QACJ,SAAS;QACT,SAAS,CAAC,wBACR,0DAAC;gBAAe,KAAK,QAAQ,GAAG;gBAAG,GAAG,KAAK;eACxC,SACA;IAGP;AACF;AAEA;;;;CAIC,GACD,oEAAoE;AACpE,IAAI,4CAAkB;","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);\n\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}>\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,10 +226,12 @@ function $019364e6919ef1db$var$TooltipTrigger(props) {
             ref: overlayRef,
             UNSAFE_style: overlayProps.style,
             arrowProps: arrowProps,
+            arrowRef: arrowRef,
             ...tooltipProps
         }
     }, /*#__PURE__*/ (0, $lbkGW$react).createElement((0, $lbkGW$Overlay), {
-        isOpen: state.isOpen
+        isOpen: state.isOpen,
+        nodeRef: overlayRef
     }, tooltip)));
 }
 // Support TooltipTrigger inside components using CollectionBuilder.

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);\n\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}>\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;ACoBzC;;;;GAIG;AAEH,OAAA,IAAI,wBAA4C,2BAA2B,KAAK,WAAW,CAAC;ACzF5F,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,10 +1,15 @@
 {
   "name": "@react-spectrum/tooltip",
-  "version": "3.3.5",
+  "version": "3.5.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,19 +36,19 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.10.1",
-    "@react-aria/interactions": "^3.13.1",
-    "@react-aria/overlays": "^3.12.1",
-    "@react-aria/tooltip": "^3.3.4",
-    "@react-aria/utils": "^3.14.2",
-    "@react-spectrum/overlays": "^4.1.0",
-    "@react-spectrum/utils": "^3.8.1",
-    "@react-stately/tooltip": "^3.2.4",
-    "@react-stately/utils": "^3.5.2",
-    "@react-types/overlays": "^3.6.5",
-    "@react-types/shared": "^3.16.0",
-    "@react-types/tooltip": "^3.2.5",
-    "@spectrum-icons/ui": "^3.4.2",
+    "@react-aria/focus": "^3.12.0",
+    "@react-aria/interactions": "^3.15.0",
+    "@react-aria/overlays": "^3.14.0",
+    "@react-aria/tooltip": "^3.5.0",
+    "@react-aria/utils": "^3.16.0",
+    "@react-spectrum/overlays": "^5.1.0",
+    "@react-spectrum/utils": "^3.9.1",
+    "@react-stately/tooltip": "^3.4.0",
+    "@react-stately/utils": "^3.6.0",
+    "@react-types/overlays": "^3.7.1",
+    "@react-types/shared": "^3.18.0",
+    "@react-types/tooltip": "^3.4.0",
+    "@spectrum-icons/ui": "^3.5.1",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
@@ -57,5 +62,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79f62e8fbf64e8359fb603f3a1cc41a2808389e2"
+  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
 }

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';
@@ -31,8 +32,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
     trigger: triggerAction
   } = props;
 
-  let [trigger, tooltip] = React.Children.toArray(children);
-
+  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
   let state = useTooltipTriggerState(props);
 
   let tooltipTriggerRef = useRef<HTMLElement>();
@@ -43,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,
@@ -51,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 (
@@ -66,9 +85,10 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
           ref: overlayRef,
           UNSAFE_style: overlayProps.style,
           arrowProps,
+          arrowRef: arrowRef,
           ...tooltipProps
         }}>
-        <Overlay isOpen={state.isOpen}>
+        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>
           {tooltip}
         </Overlay>
       </TooltipContext.Provider>

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>({});