@react-spectrum/tooltip 3.0.0-alpha.0 → 3.0.0-nightly-4980928d3-240906

package/dist/vars.80858477.css

@@ -0,0 +1,321 @@
+.KF3Kcq_i18nFontFamily {
+  font-synthesis: weight;
+  font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(ar) {
+  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(he) {
+  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(zh) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(zh-Hans) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(zh-Hant) {
+  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(zh-SG), .KF3Kcq_i18nFontFamily:lang(zh-CN) {
+  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(ko) {
+  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+}
+
+.KF3Kcq_i18nFontFamily:lang(ja) {
+  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+}
+
+.KF3Kcq_spectrum-FocusRing-ring {
+  --spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
+  --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
+  --spectrum-focus-ring-border-size: 0px;
+  --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
+}
+
+.KF3Kcq_spectrum-FocusRing-ring:after {
+  border-radius: calc(var(--spectrum-focus-ring-border-radius)  + var(--spectrum-focus-ring-gap));
+  content: "";
+  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+  pointer-events: none;
+  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+.KF3Kcq_spectrum-FocusRing.KF3Kcq_focus-ring:after {
+  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+}
+
+.KF3Kcq_spectrum-FocusRing--quiet:after {
+  border-radius: 0;
+}
+
+.KF3Kcq_spectrum-FocusRing--quiet.KF3Kcq_focus-ring:after {
+  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
+  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+}
+
+@media (forced-colors: active) {
+  .KF3Kcq_spectrum-FocusRing, .KF3Kcq_spectrum-FocusRing-ring, .KF3Kcq_spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: Highlight;
+  }
+
+  :is(.KF3Kcq_spectrum-FocusRing, .KF3Kcq_spectrum-FocusRing-ring, .KF3Kcq_spectrum-FocusRing--quiet):after {
+    forced-color-adjust: none;
+  }
+}
+
+.KF3Kcq_spectrum-overlay {
+  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;
+}
+
+.KF3Kcq_spectrum-overlay--open {
+  visibility: visible;
+  opacity: .9999;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+.KF3Kcq_spectrum-overlay--bottom--open {
+  transform: translateY(var(--spectrum-overlay-positive-transform-distance));
+}
+
+.KF3Kcq_spectrum-overlay--top--open {
+  transform: translateY(var(--spectrum-overlay-negative-transform-distance));
+}
+
+.KF3Kcq_spectrum-overlay--right--open {
+  transform: translateX(var(--spectrum-overlay-positive-transform-distance));
+}
+
+.KF3Kcq_spectrum-overlay--left--open {
+  transform: translateX(var(--spectrum-overlay-negative-transform-distance));
+}
+
+.KF3Kcq_spectrum-Tooltip {
+  box-sizing: border-box;
+  vertical-align: top;
+  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-block-size: 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;
+  inline-size: auto;
+  display: inline-flex;
+  position: relative;
+}
+
+.KF3Kcq_spectrum-Tooltip p {
+  margin: 0;
+}
+
+.KF3Kcq_spectrum-Tooltip-tip {
+  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;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+:is(.KF3Kcq_spectrum-Tooltip--right, .KF3Kcq_spectrum-Tooltip--left) .KF3Kcq_spectrum-Tooltip-tip {
+  margin-top: calc(var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)) * -1);
+  top: 50%;
+}
+
+.KF3Kcq_spectrum-Tooltip--right {
+  margin-left: var(--spectrum-global-dimension-size-40);
+}
+
+.KF3Kcq_spectrum-Tooltip--right .KF3Kcq_spectrum-Tooltip-tip {
+  right: 100%;
+  transform: rotate(90deg);
+}
+
+.KF3Kcq_spectrum-Tooltip--left {
+  margin-right: var(--spectrum-global-dimension-size-40);
+}
+
+.KF3Kcq_spectrum-Tooltip--left .KF3Kcq_spectrum-Tooltip-tip {
+  left: 100%;
+  transform: rotate(-90deg);
+}
+
+.KF3Kcq_spectrum-Tooltip--top {
+  margin-bottom: var(--spectrum-global-dimension-size-40);
+}
+
+.KF3Kcq_spectrum-Tooltip--top .KF3Kcq_spectrum-Tooltip-tip {
+  top: 100%;
+}
+
+.KF3Kcq_spectrum-Tooltip--bottom {
+  margin-top: var(--spectrum-global-dimension-size-40);
+}
+
+.KF3Kcq_spectrum-Tooltip--bottom .KF3Kcq_spectrum-Tooltip-tip {
+  bottom: 100%;
+  transform: rotate(-180deg);
+}
+
+:is(.KF3Kcq_spectrum-Tooltip--bottom, .KF3Kcq_spectrum-Tooltip--top) .KF3Kcq_spectrum-Tooltip-tip {
+  margin-left: calc(var(--spectrum-tooltip-tip-height, var(--spectrum-global-dimension-size-50)) * -1);
+  left: 50%;
+}
+
+.KF3Kcq_spectrum-Tooltip-typeIcon {
+  inline-size: var(--spectrum-tooltip-icon-size, var(--spectrum-global-dimension-size-175));
+  block-size: var(--spectrum-tooltip-icon-size, var(--spectrum-global-dimension-size-175));
+  margin-inline-start: calc(var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100))  - var(--spectrum-tooltip-padding-x, var(--spectrum-global-dimension-size-125)));
+  margin-inline-end: var(--spectrum-tooltip-icon-margin-x, var(--spectrum-global-dimension-size-100));
+  align-self: flex-start;
+  margin-top: 1px;
+}
+
+.KF3Kcq_spectrum-Tooltip-label {
+  max-inline-size: var(--spectrum-tooltip-content-max-width);
+  line-height: var(--spectrum-tooltip-text-line-height, var(--spectrum-global-dimension-font-size-200));
+}
+
+.KF3Kcq_u-tooltip-showOnHover {
+  display: inline-block;
+  position: relative;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip {
+  white-space: nowrap;
+  transition: transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out;
+  position: absolute;
+  top: -100%;
+  visibility: visible !important;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip-label {
+  max-inline-size: none;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--right, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--right .KF3Kcq_spectrum-Tooltip-tip, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--left, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--left .KF3Kcq_spectrum-Tooltip-tip {
+  top: 50%;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--right {
+  left: 100%;
+  transform: translate(0, -50%);
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--left {
+  transform: translate(-100%, -50%);
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--bottom, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--bottom .KF3Kcq_spectrum-Tooltip-tip, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--top, .KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--top .KF3Kcq_spectrum-Tooltip-tip {
+  left: 50%;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--bottom {
+  transform: translate(-50%, calc(var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)) * -1));
+  top: 100%;
+}
+
+.KF3Kcq_u-tooltip-showOnHover .KF3Kcq_spectrum-Tooltip--top {
+  transform: translate(-50%, var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)));
+}
+
+.KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-hovered .KF3Kcq_spectrum-Tooltip, .KF3Kcq_u-tooltip-showOnHover:focus .KF3Kcq_spectrum-Tooltip, .KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-focused .KF3Kcq_spectrum-Tooltip, .KF3Kcq_u-tooltip-showOnHover :focus .KF3Kcq_spectrum-Tooltip {
+  opacity: 1;
+}
+
+.KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-hovered .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--bottom, .KF3Kcq_u-tooltip-showOnHover:focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--bottom, .KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-focused .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--bottom, .KF3Kcq_u-tooltip-showOnHover :focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--bottom {
+  transform: translate(-50%);
+}
+
+.KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-hovered .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--top, .KF3Kcq_u-tooltip-showOnHover:focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--top, .KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-focused .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--top, .KF3Kcq_u-tooltip-showOnHover :focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--top {
+  transform: translate(-50%, calc(var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)) * -1));
+}
+
+.KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-hovered .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--left, .KF3Kcq_u-tooltip-showOnHover:focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--left, .KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-focused .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--left, .KF3Kcq_u-tooltip-showOnHover :focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--left {
+  transform: translate(calc(-100% - var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50))), -50%);
+}
+
+.KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-hovered .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--right, .KF3Kcq_u-tooltip-showOnHover:focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--right, .KF3Kcq_u-tooltip-showOnHover.KF3Kcq_is-focused .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--right, .KF3Kcq_u-tooltip-showOnHover :focus .KF3Kcq_spectrum-Tooltip.KF3Kcq_spectrum-Tooltip--right {
+  transform: translate(var(--spectrum-tooltip-tip-margin, var(--spectrum-global-dimension-size-50)), -50%);
+}
+
+.KF3Kcq_spectrum-Tooltip {
+  --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));
+  -webkit-filter: var(--spectrum-tooltip-dropshadow);
+  will-change: filter;
+}
+
+.KF3Kcq_spectrum-Tooltip-tip {
+  border-top-color: var(--spectrum-tooltip-background-color, var(--spectrum-global-color-static-gray-700));
+}
+
+.KF3Kcq_spectrum-Tooltip--negative, .KF3Kcq_spectrum-Tooltip--error {
+  background-color: var(--spectrum-tooltip-negative-background-color, var(--spectrum-global-color-static-red-700));
+}
+
+:is(.KF3Kcq_spectrum-Tooltip--negative, .KF3Kcq_spectrum-Tooltip--error) .KF3Kcq_spectrum-Tooltip-tip {
+  border-top-color: var(--spectrum-tooltip-negative-background-color, var(--spectrum-global-color-static-red-700));
+}
+
+.KF3Kcq_spectrum-Tooltip--info, .KF3Kcq_spectrum-Tooltip--help {
+  background-color: var(--spectrum-tooltip-info-background-color, var(--spectrum-global-color-static-blue-700));
+}
+
+:is(.KF3Kcq_spectrum-Tooltip--info, .KF3Kcq_spectrum-Tooltip--help) .KF3Kcq_spectrum-Tooltip-tip {
+  border-top-color: var(--spectrum-tooltip-info-background-color, var(--spectrum-global-color-static-blue-700));
+}
+
+.KF3Kcq_spectrum-Tooltip--positive, .KF3Kcq_spectrum-Tooltip--success {
+  background-color: var(--spectrum-tooltip-positive-background-color, var(--spectrum-global-color-static-green-700));
+}
+
+:is(.KF3Kcq_spectrum-Tooltip--positive, .KF3Kcq_spectrum-Tooltip--success) .KF3Kcq_spectrum-Tooltip-tip {
+  border-top-color: var(--spectrum-tooltip-positive-background-color, var(--spectrum-global-color-static-green-700));
+}
+
+@media (forced-colors: active) {
+  .KF3Kcq_spectrum-Tooltip {
+    border: 1px solid #0000;
+  }
+
+  .KF3Kcq_spectrum-Tooltip-tip {
+    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;
+  }
+}
+/*# sourceMappingURL=vars.80858477.css.map */

package/dist/vars.80858477.css.map

@@ -0,0 +1 @@
+{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAkBJ;;;;;;;AAYA;;;;;;;AAWA;;;;AAIA;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AA+BE;;;;AASF;;;;;;;;;;;AAeE;;;;;AAMF;;;;AAEE;;;;;AAUF;;;;AAEE;;;;;AAUF;;;;AAEE;;;;AASF;;;;AAEE;;;;;AAYA;;;;;AAMF;;;;;;;;;AAWA;;;;;AAOA;;;;;AAIE;;;;;;;;AASA;;;;AAKA;;;;AAQA;;;;;AAKA;;;;AAIA;;;;AAQA;;;;;AAKA;;;;AAIA;;;;AAOA;;;;AAOA;;;;AAOA;;;;AAOA;;;;AAoBF;;;;;;;;;;;AAgBA;;;;AAIA;;;;AAIE;;;;AAKF;;;;AAIE;;;;AAKF;;;;AAIE;;;;AAKF;EACE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/tooltip/vars.css"],"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@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.80858477.css.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/tooltip",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-nightly-4980928d3-240906",
   "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,30 +36,29 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.2.0",
-    "@react-aria/interactions": "^3.2.0",
-    "@react-aria/overlays": "^3.2.0",
-    "@react-aria/tooltip": "3.0.0-alpha.0",
-    "@react-aria/utils": "^3.2.0",
-    "@react-spectrum/overlays": "^3.2.0",
-    "@react-spectrum/utils": "^3.2.0",
-    "@react-stately/tooltip": "3.0.0-alpha.0",
-    "@react-stately/utils": "^3.1.0",
-    "@react-types/overlays": "^3.2.0",
-    "@react-types/shared": "^3.2.0",
-    "@react-types/tooltip": "3.0.0-alpha.0",
-    "@spectrum-icons/ui": "^3.1.0"
+    "@react-aria/focus": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/tooltip": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-spectrum/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/tooltip": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/overlays": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/tooltip": "^3.0.0-nightly-4980928d3-240906",
+    "@spectrum-icons/ui": "^3.0.0-nightly-4980928d3-240906",
+    "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@react-spectrum/provider": "^3.0.0-rc.1",
-    "react": "^16.8.0"
+    "@react-spectrum/provider": "^3.0.0-nightly-4980928d3-240906",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
-}
+  "stableVersion": "3.6.9"
+}

package/src/Tooltip.tsx

@@ -11,39 +11,40 @@
  */
 
 import AlertSmall from '@spectrum-icons/ui/AlertSmall';
-import {classNames, useStyleProps} from '@react-spectrum/utils';
+import {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {DOMRef} from '@react-types/shared';
 import InfoSmall from '@spectrum-icons/ui/InfoSmall';
 import {mergeProps} from '@react-aria/utils';
-import React, {RefObject, useRef} from 'react';
+import React, {useContext, useImperativeHandle, useRef} from 'react';
 import {SpectrumTooltipProps} from '@react-types/tooltip';
 import styles from '@adobe/spectrum-css-temp/components/tooltip/vars.css';
 import SuccessSmall from '@spectrum-icons/ui/SuccessSmall';
+import {TooltipContext} from './context';
 import {useTooltip} from '@react-aria/tooltip';
-import {useTooltipProvider} from './TooltipTrigger';
 
 let iconMap = {
-  neutral: '',
   info: InfoSmall,
   positive: SuccessSmall,
   negative: AlertSmall
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Tooltip(props: SpectrumTooltipProps, ref: RefObject<HTMLDivElement>) {
-  let defaultRef = useRef();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref = ref || defaultRef; // need to figure out how to merge?
-  let {ref: overlayRef, ...tooltipProviderProps} = useTooltipProvider();
+function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
+  let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);
+  let defaultRef = useRef(undefined);
+  overlayRef = overlayRef || defaultRef;
   props = mergeProps(props, tooltipProviderProps);
   let {
     variant = 'neutral',
-    placement = 'right',
+    placement = 'top',
     isOpen,
     showIcon,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
-  let {tooltipProps} = useTooltip(props);
+  let {tooltipProps} = useTooltip(props, state);
+
+  // Sync ref with overlayRef from context.
+  useImperativeHandle(ref, () => createDOMRef(overlayRef));
 
   let Icon = iconMap[variant];
 
@@ -57,7 +58,8 @@ function Tooltip(props: SpectrumTooltipProps, ref: RefObject<HTMLDivElement>) {
         `spectrum-Tooltip--${variant}`,
         `spectrum-Tooltip--${placement}`,
         {
-          'is-open': isOpen
+          'is-open': isOpen,
+          [`is-open--${placement}`]: isOpen
         },
         styleProps.className
       )}
@@ -68,12 +70,11 @@ function Tooltip(props: SpectrumTooltipProps, ref: RefObject<HTMLDivElement>) {
           {props.children}
         </span>
       )}
-      <span className={classNames(styles, 'spectrum-Tooltip-tip')} />
+      <span {...arrowProps} ref={arrowRef} className={classNames(styles, 'spectrum-Tooltip-tip')} />
     </div>
   );
 }
 
-
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */

package/src/TooltipTrigger.tsx

@@ -10,53 +10,68 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, StyleProps} from '@react-types/shared';
 import {FocusableProvider} from '@react-aria/focus';
 import {Overlay} from '@react-spectrum/overlays';
-import {PlacementAxis} from '@react-types/overlays';
-import React, {RefObject, useContext, useRef} from 'react';
-import {TooltipTriggerProps} from '@react-types/tooltip';
-import {useDOMRef} from '@react-spectrum/utils';
+import React, {JSX, 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';
 
-interface TooltipContextProps extends StyleProps {
-  ref?: RefObject<HTMLDivElement>,
-  placement?: PlacementAxis,
-  isOpen?: boolean
-}
-
-const TooltipContext = React.createContext<TooltipContextProps>({});
-
-export function useTooltipProvider(): TooltipContextProps {
-  return useContext(TooltipContext) || {};
-}
+const DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
+const DEFAULT_CROSS_OFFSET = 0;
 
-function TooltipTrigger(props: TooltipTriggerProps, ref: DOMRef<HTMLElement>) {
+function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
   let {
     children,
-    isDisabled
+    crossOffset = DEFAULT_CROSS_OFFSET,
+    isDisabled,
+    offset = DEFAULT_OFFSET,
+    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 domRef = useDOMRef(ref);
-  let triggerRef = useRef<HTMLElement>();
-  let tooltipTriggerRef = domRef || triggerRef;
-  let overlayRef = useRef<HTMLDivElement>();
+  let tooltipTriggerRef = useRef<HTMLElement>(undefined);
+  let overlayRef = useRef<HTMLDivElement>(undefined);
 
   let {triggerProps, tooltipProps} = useTooltipTrigger({
-    isDisabled
+    isDisabled,
+    trigger: triggerAction
   }, state, tooltipTriggerRef);
 
-  let {overlayProps, placement} = useOverlayPosition({
-    placement: props.placement || 'right',
+  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,
     overlayRef,
-    isOpen: state.isOpen
+    offset,
+    crossOffset,
+    isOpen: state.isOpen,
+    shouldFlip: props.shouldFlip,
+    containerPadding: props.containerPadding,
+    arrowSize: arrowWidth,
+    arrowBoundaryOffset: borderRadius,
+    onClose: () => state.close(true)
   });
 
   return (
@@ -66,12 +81,15 @@ function TooltipTrigger(props: TooltipTriggerProps, ref: DOMRef<HTMLElement>) {
       {trigger}
       <TooltipContext.Provider
         value={{
+          state,
           placement,
           ref: overlayRef,
           UNSAFE_style: overlayProps.style,
+          arrowProps,
+          arrowRef: arrowRef,
           ...tooltipProps
         }}>
-        <Overlay isOpen={state.isOpen}>
+        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>
           {tooltip}
         </Overlay>
       </TooltipContext.Provider>
@@ -79,8 +97,32 @@ function TooltipTrigger(props: TooltipTriggerProps, ref: DOMRef<HTMLElement>) {
   );
 }
 
+// Support TooltipTrigger inside components using CollectionBuilder.
+TooltipTrigger.getCollectionNode = function* (props: SpectrumTooltipTriggerProps) {
+  // Replaced the use of React.Children.toArray because it mutates the key prop.
+  let childArray: ReactElement[] = [];
+  React.Children.forEach(props.children, child => {
+    if (React.isValidElement(child)) {
+      childArray.push(child);
+    }
+  });
+  let [trigger, tooltip] = childArray;
+  yield {
+    element: trigger,
+    wrapper: (element) => (
+      <TooltipTrigger key={element.key} {...props}>
+        {element}
+        {tooltip}
+      </TooltipTrigger>
+    )
+  };
+};
+
 /**
- * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ * 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.
  */
-let _TooltipTrigger = React.forwardRef(TooltipTrigger);
+// We don't want getCollectionNode to show up in the type definition
+let _TooltipTrigger = TooltipTrigger as (props: SpectrumTooltipTriggerProps) => JSX.Element;
 export {_TooltipTrigger as TooltipTrigger};

package/src/context.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import {PlacementAxis} from '@react-types/overlays';
+import React, {HTMLAttributes} from 'react';
+import {RefObject, StyleProps} from '@react-types/shared';
+import {TooltipTriggerState} from '@react-stately/tooltip';
+
+interface TooltipContextProps extends StyleProps {
+  state?: TooltipTriggerState,
+  ref?: RefObject<HTMLDivElement | null>,
+  placement?: PlacementAxis,
+  arrowProps?: HTMLAttributes<HTMLElement>,
+  arrowRef?: RefObject<HTMLElement | null>
+}
+
+export const TooltipContext = React.createContext<TooltipContextProps>({});

package/src/index.ts

@@ -12,5 +12,6 @@
 
 /// <reference types="css-module-types" />
 
-export * from './Tooltip';
-export * from './TooltipTrigger';
+export {Tooltip} from './Tooltip';
+export {TooltipTrigger} from './TooltipTrigger';
+export type {SpectrumTooltipProps, SpectrumTooltipTriggerProps} from '@react-types/tooltip';