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

package/dist/useTooltipTrigger.main.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,GAAuC;IAC/H,IAAI,cACF,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,YAAY,CAAA,GAAA,2BAAI;IAEpB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IAEvB,IAAI,aAAa;QACf,IAAI,UAAU,OAAO,IAAI,UAAU,OAAO,EACxC,MAAM,IAAI,CAAC,UAAU,OAAO;IAEhC;IAEA,IAAI,aAAa,CAAC;QAChB,IAAI,CAAC,UAAU,OAAO,IAAI,CAAC,UAAU,OAAO,EAC1C,MAAM,KAAK,CAAC;IAEhB;IAEA,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,YAAY,CAAC;YACf,IAAI,OAAO,IAAI,OAAO,EACpB,6DAA6D;YAC7D,mCAAmC;YACnC;gBAAA,IAAI,EAAE,GAAG,KAAK,UAAU;oBACtB,EAAE,eAAe;oBACjB,MAAM,KAAK,CAAC;gBACd;YAAA;QAEJ;QACA,IAAI,MAAM,MAAM,EAAE;YAChB,SAAS,gBAAgB,CAAC,WAAW,WAAW;YAChD,OAAO;gBACL,SAAS,mBAAmB,CAAC,WAAW,WAAW;YACrD;QACF;IACF,GAAG;QAAC;QAAK;KAAM;IAEf,IAAI,eAAe;QACjB,IAAI,YAAY,SACd;QAEF,uFAAuF;QACvF,kGAAkG;QAClG,uGAAuG;QACvG,qCAAqC;QACrC,IAAI,CAAA,GAAA,mDAAqB,QAAQ,WAC/B,UAAU,OAAO,GAAG;aAEpB,UAAU,OAAO,GAAG;QAEtB;IACF;IAEA,IAAI,aAAa;QACf,IAAI,YAAY,SACd;QAEF,iEAAiE;QACjE,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB;IACF;IAEA,IAAI,eAAe;QACjB,oEAAoE;QACpE,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB,WAAW;IACb;IAEA,IAAI,UAAU;QACZ,IAAI,YAAY,CAAA,GAAA,2CAAa;QAC7B,IAAI,WAAW;YACb,UAAU,OAAO,GAAG;YACpB;QACF;IACF;IAEA,IAAI,SAAS;QACX,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB,WAAW;IACb;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAC1B;sBACA;oBACA;IACF;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW,EAAE;oBAClC;iBACA;gBACA;IACF,GAAG;IAEH,OAAO;QACL,cAAc;YACZ,oBAAoB,MAAM,MAAM,GAAG,YAAY;YAC/C,GAAG,CAAA,GAAA,gCAAS,EAAE,gBAAgB,YAAY;gBACxC,eAAe;gBACf,WAAW;YACb,EAAE;QACJ;QACA,cAAc;YACZ,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/tooltip/src/useTooltipTrigger.ts"],"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\nimport {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\nimport {getInteractionModality, isFocusVisible, useHover} from '@react-aria/interactions';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {TooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\nimport {useEffect, useRef} from 'react';\nimport {useFocusable} from '@react-aria/focus';\n\nexport interface TooltipTriggerAria {\n  /**\n   * Props for the trigger element.\n   */\n  triggerProps: DOMAttributes,\n\n  /**\n   * Props for the overlay container element.\n   */\n  tooltipProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tooltip trigger, e.g. a button\n * that shows a description when focused or hovered.\n */\nexport function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTriggerState, ref: RefObject<FocusableElement | null>) : TooltipTriggerAria {\n  let {\n    isDisabled,\n    trigger\n  } = props;\n\n  let tooltipId = useId();\n\n  let isHovered = useRef(false);\n  let isFocused = useRef(false);\n\n  let handleShow = () => {\n    if (isHovered.current || isFocused.current) {\n      state.open(isFocused.current);\n    }\n  };\n\n  let handleHide = (immediate?: boolean) => {\n    if (!isHovered.current && !isFocused.current) {\n      state.close(immediate);\n    }\n  };\n\n  useEffect(() => {\n    let onKeyDown = (e) => {\n      if (ref && ref.current) {\n        // Escape after clicking something can give it keyboard focus\n        // dismiss tooltip on esc key press\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          state.close(true);\n        }\n      }\n    };\n    if (state.isOpen) {\n      document.addEventListener('keydown', onKeyDown, true);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown, true);\n      };\n    }\n  }, [ref, state]);\n\n  let onHoverStart = () => {\n    if (trigger === 'focus') {\n      return;\n    }\n    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard\n    // interactions for example, hover will end. When hover is restored after that element disappears,\n    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover\n    // is the result of moving the mouse.\n    if (getInteractionModality() === 'pointer') {\n      isHovered.current = true;\n    } else {\n      isHovered.current = false;\n    }\n    handleShow();\n  };\n\n  let onHoverEnd = () => {\n    if (trigger === 'focus') {\n      return;\n    }\n    // no matter how the trigger is left, we should close the tooltip\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide();\n  };\n\n  let onPressStart = () => {\n    // no matter how the trigger is pressed, we should close the tooltip\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide(true);\n  };\n\n  let onFocus = () => {\n    let isVisible = isFocusVisible();\n    if (isVisible) {\n      isFocused.current = true;\n      handleShow();\n    }\n  };\n\n  let onBlur = () => {\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide(true);\n  };\n\n  let {hoverProps} = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverEnd\n  });\n\n  let {focusableProps} = useFocusable({\n    isDisabled,\n    onFocus,\n    onBlur\n  }, ref);\n\n  return {\n    triggerProps: {\n      'aria-describedby': state.isOpen ? tooltipId : undefined,\n      ...mergeProps(focusableProps, hoverProps, {\n        onPointerDown: onPressStart,\n        onKeyDown: onPressStart\n      })\n    },\n    tooltipProps: {\n      id: tooltipId\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useTooltipTrigger.main.js.map"}

package/dist/useTooltipTrigger.mjs

@@ -0,0 +1,113 @@
+import {getInteractionModality as $6VwSn$getInteractionModality, isFocusVisible as $6VwSn$isFocusVisible, useHover as $6VwSn$useHover} from "@react-aria/interactions";
+import {useId as $6VwSn$useId, mergeProps as $6VwSn$mergeProps} from "@react-aria/utils";
+import {useRef as $6VwSn$useRef, useEffect as $6VwSn$useEffect} from "react";
+import {useFocusable as $6VwSn$useFocusable} from "@react-aria/focus";
+
+/*
+ * 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.
+ */ 
+
+
+
+function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
+    let { isDisabled: isDisabled, trigger: trigger } = props;
+    let tooltipId = (0, $6VwSn$useId)();
+    let isHovered = (0, $6VwSn$useRef)(false);
+    let isFocused = (0, $6VwSn$useRef)(false);
+    let handleShow = ()=>{
+        if (isHovered.current || isFocused.current) state.open(isFocused.current);
+    };
+    let handleHide = (immediate)=>{
+        if (!isHovered.current && !isFocused.current) state.close(immediate);
+    };
+    (0, $6VwSn$useEffect)(()=>{
+        let onKeyDown = (e)=>{
+            if (ref && ref.current) // Escape after clicking something can give it keyboard focus
+            // dismiss tooltip on esc key press
+            {
+                if (e.key === 'Escape') {
+                    e.stopPropagation();
+                    state.close(true);
+                }
+            }
+        };
+        if (state.isOpen) {
+            document.addEventListener('keydown', onKeyDown, true);
+            return ()=>{
+                document.removeEventListener('keydown', onKeyDown, true);
+            };
+        }
+    }, [
+        ref,
+        state
+    ]);
+    let onHoverStart = ()=>{
+        if (trigger === 'focus') return;
+        // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+        // interactions for example, hover will end. When hover is restored after that element disappears,
+        // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+        // is the result of moving the mouse.
+        if ((0, $6VwSn$getInteractionModality)() === 'pointer') isHovered.current = true;
+        else isHovered.current = false;
+        handleShow();
+    };
+    let onHoverEnd = ()=>{
+        if (trigger === 'focus') return;
+        // no matter how the trigger is left, we should close the tooltip
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide();
+    };
+    let onPressStart = ()=>{
+        // no matter how the trigger is pressed, we should close the tooltip
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide(true);
+    };
+    let onFocus = ()=>{
+        let isVisible = (0, $6VwSn$isFocusVisible)();
+        if (isVisible) {
+            isFocused.current = true;
+            handleShow();
+        }
+    };
+    let onBlur = ()=>{
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide(true);
+    };
+    let { hoverProps: hoverProps } = (0, $6VwSn$useHover)({
+        isDisabled: isDisabled,
+        onHoverStart: onHoverStart,
+        onHoverEnd: onHoverEnd
+    });
+    let { focusableProps: focusableProps } = (0, $6VwSn$useFocusable)({
+        isDisabled: isDisabled,
+        onFocus: onFocus,
+        onBlur: onBlur
+    }, ref);
+    return {
+        triggerProps: {
+            'aria-describedby': state.isOpen ? tooltipId : undefined,
+            ...(0, $6VwSn$mergeProps)(focusableProps, hoverProps, {
+                onPointerDown: onPressStart,
+                onKeyDown: onPressStart
+            })
+        },
+        tooltipProps: {
+            id: tooltipId
+        }
+    };
+}
+
+
+export {$4e1b34546679e357$export$a6da6c504e4bba8b as useTooltipTrigger};
+//# sourceMappingURL=useTooltipTrigger.module.js.map

package/dist/useTooltipTrigger.module.js

@@ -0,0 +1,113 @@
+import {getInteractionModality as $6VwSn$getInteractionModality, isFocusVisible as $6VwSn$isFocusVisible, useHover as $6VwSn$useHover} from "@react-aria/interactions";
+import {useId as $6VwSn$useId, mergeProps as $6VwSn$mergeProps} from "@react-aria/utils";
+import {useRef as $6VwSn$useRef, useEffect as $6VwSn$useEffect} from "react";
+import {useFocusable as $6VwSn$useFocusable} from "@react-aria/focus";
+
+/*
+ * 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.
+ */ 
+
+
+
+function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
+    let { isDisabled: isDisabled, trigger: trigger } = props;
+    let tooltipId = (0, $6VwSn$useId)();
+    let isHovered = (0, $6VwSn$useRef)(false);
+    let isFocused = (0, $6VwSn$useRef)(false);
+    let handleShow = ()=>{
+        if (isHovered.current || isFocused.current) state.open(isFocused.current);
+    };
+    let handleHide = (immediate)=>{
+        if (!isHovered.current && !isFocused.current) state.close(immediate);
+    };
+    (0, $6VwSn$useEffect)(()=>{
+        let onKeyDown = (e)=>{
+            if (ref && ref.current) // Escape after clicking something can give it keyboard focus
+            // dismiss tooltip on esc key press
+            {
+                if (e.key === 'Escape') {
+                    e.stopPropagation();
+                    state.close(true);
+                }
+            }
+        };
+        if (state.isOpen) {
+            document.addEventListener('keydown', onKeyDown, true);
+            return ()=>{
+                document.removeEventListener('keydown', onKeyDown, true);
+            };
+        }
+    }, [
+        ref,
+        state
+    ]);
+    let onHoverStart = ()=>{
+        if (trigger === 'focus') return;
+        // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+        // interactions for example, hover will end. When hover is restored after that element disappears,
+        // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+        // is the result of moving the mouse.
+        if ((0, $6VwSn$getInteractionModality)() === 'pointer') isHovered.current = true;
+        else isHovered.current = false;
+        handleShow();
+    };
+    let onHoverEnd = ()=>{
+        if (trigger === 'focus') return;
+        // no matter how the trigger is left, we should close the tooltip
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide();
+    };
+    let onPressStart = ()=>{
+        // no matter how the trigger is pressed, we should close the tooltip
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide(true);
+    };
+    let onFocus = ()=>{
+        let isVisible = (0, $6VwSn$isFocusVisible)();
+        if (isVisible) {
+            isFocused.current = true;
+            handleShow();
+        }
+    };
+    let onBlur = ()=>{
+        isFocused.current = false;
+        isHovered.current = false;
+        handleHide(true);
+    };
+    let { hoverProps: hoverProps } = (0, $6VwSn$useHover)({
+        isDisabled: isDisabled,
+        onHoverStart: onHoverStart,
+        onHoverEnd: onHoverEnd
+    });
+    let { focusableProps: focusableProps } = (0, $6VwSn$useFocusable)({
+        isDisabled: isDisabled,
+        onFocus: onFocus,
+        onBlur: onBlur
+    }, ref);
+    return {
+        triggerProps: {
+            'aria-describedby': state.isOpen ? tooltipId : undefined,
+            ...(0, $6VwSn$mergeProps)(focusableProps, hoverProps, {
+                onPointerDown: onPressStart,
+                onKeyDown: onPressStart
+            })
+        },
+        tooltipProps: {
+            id: tooltipId
+        }
+    };
+}
+
+
+export {$4e1b34546679e357$export$a6da6c504e4bba8b as useTooltipTrigger};
+//# sourceMappingURL=useTooltipTrigger.module.js.map

package/dist/useTooltipTrigger.module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AA0BM,SAAS,0CAAkB,KAA0B,EAAE,KAA0B,EAAE,GAAuC;IAC/H,IAAI,cACF,UAAU,WACV,OAAO,EACR,GAAG;IAEJ,IAAI,YAAY,CAAA,GAAA,YAAI;IAEpB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IAEvB,IAAI,aAAa;QACf,IAAI,UAAU,OAAO,IAAI,UAAU,OAAO,EACxC,MAAM,IAAI,CAAC,UAAU,OAAO;IAEhC;IAEA,IAAI,aAAa,CAAC;QAChB,IAAI,CAAC,UAAU,OAAO,IAAI,CAAC,UAAU,OAAO,EAC1C,MAAM,KAAK,CAAC;IAEhB;IAEA,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,YAAY,CAAC;YACf,IAAI,OAAO,IAAI,OAAO,EACpB,6DAA6D;YAC7D,mCAAmC;YACnC;gBAAA,IAAI,EAAE,GAAG,KAAK,UAAU;oBACtB,EAAE,eAAe;oBACjB,MAAM,KAAK,CAAC;gBACd;YAAA;QAEJ;QACA,IAAI,MAAM,MAAM,EAAE;YAChB,SAAS,gBAAgB,CAAC,WAAW,WAAW;YAChD,OAAO;gBACL,SAAS,mBAAmB,CAAC,WAAW,WAAW;YACrD;QACF;IACF,GAAG;QAAC;QAAK;KAAM;IAEf,IAAI,eAAe;QACjB,IAAI,YAAY,SACd;QAEF,uFAAuF;QACvF,kGAAkG;QAClG,uGAAuG;QACvG,qCAAqC;QACrC,IAAI,CAAA,GAAA,6BAAqB,QAAQ,WAC/B,UAAU,OAAO,GAAG;aAEpB,UAAU,OAAO,GAAG;QAEtB;IACF;IAEA,IAAI,aAAa;QACf,IAAI,YAAY,SACd;QAEF,iEAAiE;QACjE,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB;IACF;IAEA,IAAI,eAAe;QACjB,oEAAoE;QACpE,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB,WAAW;IACb;IAEA,IAAI,UAAU;QACZ,IAAI,YAAY,CAAA,GAAA,qBAAa;QAC7B,IAAI,WAAW;YACb,UAAU,OAAO,GAAG;YACpB;QACF;IACF;IAEA,IAAI,SAAS;QACX,UAAU,OAAO,GAAG;QACpB,UAAU,OAAO,GAAG;QACpB,WAAW;IACb;IAEA,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAC1B;sBACA;oBACA;IACF;IAEA,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW,EAAE;oBAClC;iBACA;gBACA;IACF,GAAG;IAEH,OAAO;QACL,cAAc;YACZ,oBAAoB,MAAM,MAAM,GAAG,YAAY;YAC/C,GAAG,CAAA,GAAA,iBAAS,EAAE,gBAAgB,YAAY;gBACxC,eAAe;gBACf,WAAW;YACb,EAAE;QACJ;QACA,cAAc;YACZ,IAAI;QACN;IACF;AACF","sources":["packages/@react-aria/tooltip/src/useTooltipTrigger.ts"],"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\nimport {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\nimport {getInteractionModality, isFocusVisible, useHover} from '@react-aria/interactions';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {TooltipTriggerProps} from '@react-types/tooltip';\nimport {TooltipTriggerState} from '@react-stately/tooltip';\nimport {useEffect, useRef} from 'react';\nimport {useFocusable} from '@react-aria/focus';\n\nexport interface TooltipTriggerAria {\n  /**\n   * Props for the trigger element.\n   */\n  triggerProps: DOMAttributes,\n\n  /**\n   * Props for the overlay container element.\n   */\n  tooltipProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tooltip trigger, e.g. a button\n * that shows a description when focused or hovered.\n */\nexport function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTriggerState, ref: RefObject<FocusableElement | null>) : TooltipTriggerAria {\n  let {\n    isDisabled,\n    trigger\n  } = props;\n\n  let tooltipId = useId();\n\n  let isHovered = useRef(false);\n  let isFocused = useRef(false);\n\n  let handleShow = () => {\n    if (isHovered.current || isFocused.current) {\n      state.open(isFocused.current);\n    }\n  };\n\n  let handleHide = (immediate?: boolean) => {\n    if (!isHovered.current && !isFocused.current) {\n      state.close(immediate);\n    }\n  };\n\n  useEffect(() => {\n    let onKeyDown = (e) => {\n      if (ref && ref.current) {\n        // Escape after clicking something can give it keyboard focus\n        // dismiss tooltip on esc key press\n        if (e.key === 'Escape') {\n          e.stopPropagation();\n          state.close(true);\n        }\n      }\n    };\n    if (state.isOpen) {\n      document.addEventListener('keydown', onKeyDown, true);\n      return () => {\n        document.removeEventListener('keydown', onKeyDown, true);\n      };\n    }\n  }, [ref, state]);\n\n  let onHoverStart = () => {\n    if (trigger === 'focus') {\n      return;\n    }\n    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard\n    // interactions for example, hover will end. When hover is restored after that element disappears,\n    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover\n    // is the result of moving the mouse.\n    if (getInteractionModality() === 'pointer') {\n      isHovered.current = true;\n    } else {\n      isHovered.current = false;\n    }\n    handleShow();\n  };\n\n  let onHoverEnd = () => {\n    if (trigger === 'focus') {\n      return;\n    }\n    // no matter how the trigger is left, we should close the tooltip\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide();\n  };\n\n  let onPressStart = () => {\n    // no matter how the trigger is pressed, we should close the tooltip\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide(true);\n  };\n\n  let onFocus = () => {\n    let isVisible = isFocusVisible();\n    if (isVisible) {\n      isFocused.current = true;\n      handleShow();\n    }\n  };\n\n  let onBlur = () => {\n    isFocused.current = false;\n    isHovered.current = false;\n    handleHide(true);\n  };\n\n  let {hoverProps} = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverEnd\n  });\n\n  let {focusableProps} = useFocusable({\n    isDisabled,\n    onFocus,\n    onBlur\n  }, ref);\n\n  return {\n    triggerProps: {\n      'aria-describedby': state.isOpen ? tooltipId : undefined,\n      ...mergeProps(focusableProps, hoverProps, {\n        onPointerDown: onPressStart,\n        onKeyDown: onPressStart\n      })\n    },\n    tooltipProps: {\n      id: tooltipId\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useTooltipTrigger.module.js.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/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": [
@@ -17,20 +22,19 @@
     "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/utils": "^3.2.0",
-    "@react-stately/tooltip": "3.0.0-alpha.0",
-    "@react-types/shared": "^3.2.0",
-    "@react-types/tooltip": "3.0.0-alpha.0"
+    "@react-aria/focus": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/interactions": "^3.0.0-nightly-4980928d3-240906",
+    "@react-aria/utils": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/tooltip": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/tooltip": "^3.0.0-nightly-4980928d3-240906",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
-}
+  "stableVersion": "3.7.7"
+}

package/src/index.ts

@@ -9,6 +9,8 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
-export * from './useTooltip';
-export * from './useTooltipTrigger';
+export {useTooltip} from './useTooltip';
+export {useTooltipTrigger} from './useTooltipTrigger';
+export type {AriaTooltipProps, TooltipTriggerProps} from '@react-types/tooltip';
+export type {TooltipAria} from './useTooltip';
+export type {TooltipTriggerAria} from './useTooltipTrigger';

package/src/useTooltip.ts

@@ -11,25 +11,32 @@
  */
 
 import {AriaTooltipProps} from '@react-types/tooltip';
-import {filterDOMProps, mergeProps, useId} from '@react-aria/utils';
-import {HTMLAttributes} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {TooltipTriggerState} from '@react-stately/tooltip';
+import {useHover} from '@react-aria/interactions';
 
-interface TooltipAria {
-  tooltipProps: HTMLAttributes<HTMLElement>
+export interface TooltipAria {
+  /**
+   * Props for the tooltip element.
+   */
+  tooltipProps: DOMAttributes
 }
 
-export function useTooltip(props: AriaTooltipProps): TooltipAria {
-  let {
-    id,
-    role = 'tooltip'
-  } = props;
+/**
+ * Provides the accessibility implementation for a Tooltip component.
+ */
+export function useTooltip(props: AriaTooltipProps, state?: TooltipTriggerState): TooltipAria {
+  let domProps = filterDOMProps(props, {labelable: true});
 
-  let domProps = filterDOMProps(props);
+  let {hoverProps} = useHover({
+    onHoverStart: () => state?.open(true),
+    onHoverEnd: () => state?.close()
+  });
 
   return {
-    tooltipProps: mergeProps(domProps, {
-      role,
-      id: useId(id)
+    tooltipProps: mergeProps(domProps, hoverProps, {
+      role: 'tooltip'
     })
   };
 }

package/src/useTooltipTrigger.ts

@@ -10,23 +10,34 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusEvents} from '@react-types/shared';
-import {HoverProps, isFocusVisible, PressProps, usePress} from '@react-aria/interactions';
-import {HTMLAttributes, RefObject, useEffect, useRef} from 'react';
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {getInteractionModality, isFocusVisible, useHover} from '@react-aria/interactions';
 import {mergeProps, useId} from '@react-aria/utils';
-import {TooltipTriggerAriaProps} from '@react-types/tooltip';
+import {TooltipTriggerProps} from '@react-types/tooltip';
 import {TooltipTriggerState} from '@react-stately/tooltip';
+import {useEffect, useRef} from 'react';
 import {useFocusable} from '@react-aria/focus';
-import {useHover} from '@react-aria/interactions';
 
-interface TooltipTriggerAria {
-  triggerProps: HTMLAttributes<HTMLElement> & PressProps & HoverProps & FocusEvents,
-  tooltipProps: HTMLAttributes<HTMLElement>
+export interface TooltipTriggerAria {
+  /**
+   * Props for the trigger element.
+   */
+  triggerProps: DOMAttributes,
+
+  /**
+   * Props for the overlay container element.
+   */
+  tooltipProps: DOMAttributes
 }
 
-export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: TooltipTriggerState, ref: RefObject<HTMLElement>) : TooltipTriggerAria {
+/**
+ * Provides the behavior and accessibility implementation for a tooltip trigger, e.g. a button
+ * that shows a description when focused or hovered.
+ */
+export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTriggerState, ref: RefObject<FocusableElement | null>) : TooltipTriggerAria {
   let {
-    isDisabled
+    isDisabled,
+    trigger
   } = props;
 
   let tooltipId = useId();
@@ -35,12 +46,14 @@ export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: Tooltip
   let isFocused = useRef(false);
 
   let handleShow = () => {
-    state.open(isFocused.current);
+    if (isHovered.current || isFocused.current) {
+      state.open(isFocused.current);
+    }
   };
 
-  let handleHide = () => {
+  let handleHide = (immediate?: boolean) => {
     if (!isHovered.current && !isFocused.current) {
-      state.close();
+      state.close(immediate);
     }
   };
 
@@ -50,32 +63,52 @@ export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: Tooltip
         // Escape after clicking something can give it keyboard focus
         // dismiss tooltip on esc key press
         if (e.key === 'Escape') {
-          state.close();
+          e.stopPropagation();
+          state.close(true);
         }
       }
     };
     if (state.isOpen) {
-      document.addEventListener('keydown', onKeyDown);
+      document.addEventListener('keydown', onKeyDown, true);
       return () => {
-        document.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('keydown', onKeyDown, true);
       };
     }
   }, [ref, state]);
 
   let onHoverStart = () => {
-    isHovered.current = true;
+    if (trigger === 'focus') {
+      return;
+    }
+    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+    // interactions for example, hover will end. When hover is restored after that element disappears,
+    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the hover
+    // is the result of moving the mouse.
+    if (getInteractionModality() === 'pointer') {
+      isHovered.current = true;
+    } else {
+      isHovered.current = false;
+    }
     handleShow();
   };
+
   let onHoverEnd = () => {
+    if (trigger === 'focus') {
+      return;
+    }
+    // no matter how the trigger is left, we should close the tooltip
+    isFocused.current = false;
     isHovered.current = false;
     handleHide();
   };
+
   let onPressStart = () => {
-    if (isFocused.current) {
-      isFocused.current = false;
-    }
-    handleHide();
+    // no matter how the trigger is pressed, we should close the tooltip
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide(true);
   };
+
   let onFocus = () => {
     let isVisible = isFocusVisible();
     if (isVisible) {
@@ -83,9 +116,11 @@ export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: Tooltip
       handleShow();
     }
   };
+
   let onBlur = () => {
     isFocused.current = false;
-    handleHide();
+    isHovered.current = false;
+    handleHide(true);
   };
 
   let {hoverProps} = useHover({
@@ -94,8 +129,6 @@ export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: Tooltip
     onHoverEnd
   });
 
-  let {pressProps} = usePress({onPressStart});
-
   let {focusableProps} = useFocusable({
     isDisabled,
     onFocus,
@@ -104,8 +137,11 @@ export function useTooltipTrigger(props: TooltipTriggerAriaProps, state: Tooltip
 
   return {
     triggerProps: {
-      'aria-describedby': state.open ? tooltipId : undefined,
-      ...mergeProps(focusableProps, hoverProps, pressProps)
+      'aria-describedby': state.isOpen ? tooltipId : undefined,
+      ...mergeProps(focusableProps, hoverProps, {
+        onPointerDown: onPressStart,
+        onKeyDown: onPressStart
+      })
     },
     tooltipProps: {
       id: tooltipId