Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@reach/tooltip

Package Overview
Dependencies
Maintainers
4
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/tooltip - npm Package Compare versions

Comparing version 0.8.0 to 0.8.2

2

dist/index.d.ts

@@ -50,3 +50,3 @@ /**

*/
export declare function useTooltip<T extends HTMLElement>({ id: idProp, onMouseEnter, onMouseMove, onMouseLeave, onFocus, onBlur, onKeyDown, onMouseDown, ref: forwardedRef, DEBUG_STYLE }?: {
export declare function useTooltip<T extends HTMLElement>({ id: idProp, onMouseEnter, onMouseMove, onMouseLeave, onFocus, onBlur, onKeyDown, onMouseDown, ref: forwardedRef, DEBUG_STYLE, }?: {
ref?: React.Ref<any>;

@@ -53,0 +53,0 @@ DEBUG_STYLE?: boolean;

@@ -215,2 +215,4 @@ 'use strict';

React.useEffect(function () {
var ownerDocument = utils.getOwnerDocument(ownRef.current) || document;
function listener(event) {

@@ -222,5 +224,5 @@ if ((event.key === "Escape" || event.key === "Esc") && state === VISIBLE) {

document.addEventListener("keydown", listener);
ownerDocument.addEventListener("keydown", listener);
return function () {
return document.removeEventListener("keydown", listener);
return ownerDocument.removeEventListener("keydown", listener);
};

@@ -227,0 +229,0 @@ }, []);

@@ -1,2 +0,2 @@

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,o,i,r,u,a=require("react"),E=e(a),l=require("@reach/auto-id"),s=require("@reach/utils"),c=e(require("@reach/portal")),f=e(require("@reach/visually-hidden")),d=require("@reach/rect");function p(){return(p=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function S(e,n){if(null==e)return{};var t,o,i={},r=Object.keys(e);for(o=0;o<r.length;o++)n.indexOf(t=r[o])>=0||(i[t]=e[t]);return i}require("prop-types");var L,I,O={initial:"IDLE",states:(u={},u.IDLE={enter:D,on:(n={},n.MOUSE_ENTER="FOCUSED",n.FOCUS="VISIBLE",n)},u.FOCUSED={enter:function(){window.clearTimeout(L),L=window.setTimeout((function(){return V("REST")}),100)},leave:function(){window.clearTimeout(L)},on:(t={},t.MOUSE_MOVE="FOCUSED",t.MOUSE_LEAVE="IDLE",t.MOUSE_DOWN="DISMISSED",t.BLUR="IDLE",t.REST="VISIBLE",t)},u.VISIBLE={on:(o={},o.FOCUS="FOCUSED",o.MOUSE_ENTER="FOCUSED",o.MOUSE_LEAVE="LEAVING_VISIBLE",o.BLUR="LEAVING_VISIBLE",o.MOUSE_DOWN="DISMISSED",o.SELECT_WITH_KEYBOARD="DISMISSED",o.GLOBAL_MOUSE_MOVE="LEAVING_VISIBLE",o)},u.LEAVING_VISIBLE={enter:function(){window.clearTimeout(I),I=window.setTimeout((function(){return V("TIME_COMPLETE")}),500)},leave:function(){window.clearTimeout(I),D()},on:(i={},i.MOUSE_ENTER="VISIBLE",i.FOCUS="VISIBLE",i.TIME_COMPLETE="IDLE",i)},u.DISMISSED={leave:function(){w.id=null},on:(r={},r.MOUSE_LEAVE="IDLE",r.BLUR="IDLE",r)},u)},w={id:null},v=O.initial,M=[];function D(){w.id=null}function _(e){var n=void 0===e?{}:e,t=n.onMouseEnter,o=n.onMouseMove,i=n.onMouseLeave,r=n.onFocus,u=n.onBlur,E=n.onKeyDown,c=n.onMouseDown,f=n.ref,p=n.DEBUG_STYLE,S=String(l.useId(n.id)),L=a.useState(!!p||null!==S&&w.id===S&&"VISIBLE"===v),I=L[0],O=L[1],D=a.useRef(null),_=s.useForkedRef(f,D),b=d.useRect(D,I);return a.useEffect((function(){return M.push(e=function(){O(w.id===S&&("VISIBLE"===v||"LEAVING_VISIBLE"===v))}),function(){M.splice(M.indexOf(e),1)};var e}),[S]),a.useEffect((function(){return s.checkStyles("tooltip")}),[]),a.useEffect((function(){function e(e){"Escape"!==e.key&&"Esc"!==e.key||"VISIBLE"!==v||V("SELECT_WITH_KEYBOARD")}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[]),[{"aria-describedby":I?s.makeId("tooltip",S):void 0,"data-reach-tooltip-trigger":"",ref:_,onMouseEnter:s.wrapEvent(t,(function(){V("MOUSE_ENTER",{id:S})})),onMouseMove:s.wrapEvent(o,(function(){V("MOUSE_MOVE",{id:S})})),onFocus:s.wrapEvent(r,(function(){window.__REACH_DISABLE_TOOLTIPS||V("FOCUS",{id:S})})),onBlur:s.wrapEvent(u,(function(){w.id===S&&V("BLUR")})),onMouseLeave:s.wrapEvent(i,(function(){V("MOUSE_LEAVE")})),onKeyDown:s.wrapEvent(E,(function(e){"Enter"!==e.key&&" "!==e.key||V("SELECT_WITH_KEYBOARD")})),onMouseDown:s.wrapEvent(c,(function(){w.id===S&&V("MOUSE_DOWN")}))},{id:S,triggerRect:b,isVisible:I},I]}var b=function(e){var n=e.children,t=e.label,o=e.ariaLabel,i=e.id,r=e.DEBUG_STYLE,u=S(e,["children","label","ariaLabel","id","DEBUG_STYLE"]),l=a.Children.only(n),s=_({id:i,onMouseEnter:l.props.onMouseEnter,onMouseMove:l.props.onMouseMove,onMouseLeave:l.props.onMouseLeave,onFocus:l.props.onFocus,onBlur:l.props.onBlur,onKeyDown:l.props.onKeyDown,onMouseDown:l.props.onMouseDown,ref:l.ref,DEBUG_STYLE:r}),c=s[1];return E.createElement(a.Fragment,null,a.cloneElement(l,s[0]),E.createElement(g,Object.assign({label:t,ariaLabel:o},c,u)))},g=a.forwardRef((function(e,n){var t=e.label,o=e.ariaLabel,i=e.position,r=e.isVisible,u=e.id,a=e.triggerRect,l=S(e,["label","ariaLabel","position","isVisible","id","triggerRect"]);return r?E.createElement(c,null,E.createElement(h,Object.assign({label:t,ariaLabel:o,position:i,isVisible:r,id:s.makeId("tooltip",String(u)),triggerRect:a,ref:n},l))):null})),h=a.forwardRef((function(e,n){var t=e.label,o=e.ariaLabel,i=e.position,r=void 0===i?U:i,u=e.isVisible,l=e.id,c=e.triggerRect,L=e.style,I=S(e,["label","ariaLabel","position","isVisible","id","triggerRect","style"]),O=null!=o,w=a.useRef(null),v=s.useForkedRef(n,w),M=d.useRect(w,u);return E.createElement(a.Fragment,null,E.createElement("div",Object.assign({"data-reach-tooltip":!0,role:O?void 0:"tooltip",id:O?void 0:l,children:t,style:p({},L,{},T(r,c,M)),ref:v},I)),O&&E.createElement(f,{role:"tooltip",id:l},o))}));function T(e,n,t){return t?e(n,t):{visibility:"hidden"}}var U=function(e,n){if(!e||!n)return{};var t=window.innerWidth<e.left+n.width,o=window.innerHeight<e.bottom+n.height+8;return{left:!t||e.left-n.width<0?e.left+window.pageXOffset+"px":e.right-n.width+window.pageXOffset+"px",top:!o||e.top-n.height<0?e.top+8+e.height+window.pageYOffset+"px":e.top-8-n.height+window.pageYOffset+"px"}},V=function(e,n){var t=O.states[v],o=t&&t.on&&t.on[e];if(o){t&&t.leave&&t.leave(),n&&(w=n);var i=O.states[o];i&&i.enter&&i.enter(),v=o,M.forEach((function(e){return e(v,w)}))}};exports.Tooltip=b,exports.TooltipPopup=g,exports.default=b,exports.useTooltip=_;
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,o,i,r,u,a=require("react"),E=e(a),l=require("@reach/auto-id"),s=require("@reach/utils"),c=e(require("@reach/portal")),f=e(require("@reach/visually-hidden")),d=require("@reach/rect");function p(){return(p=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function S(e,n){if(null==e)return{};var t,o,i={},r=Object.keys(e);for(o=0;o<r.length;o++)n.indexOf(t=r[o])>=0||(i[t]=e[t]);return i}require("prop-types");var L,I,O={initial:"IDLE",states:(u={},u.IDLE={enter:D,on:(n={},n.MOUSE_ENTER="FOCUSED",n.FOCUS="VISIBLE",n)},u.FOCUSED={enter:function(){window.clearTimeout(L),L=window.setTimeout((function(){return V("REST")}),100)},leave:function(){window.clearTimeout(L)},on:(t={},t.MOUSE_MOVE="FOCUSED",t.MOUSE_LEAVE="IDLE",t.MOUSE_DOWN="DISMISSED",t.BLUR="IDLE",t.REST="VISIBLE",t)},u.VISIBLE={on:(o={},o.FOCUS="FOCUSED",o.MOUSE_ENTER="FOCUSED",o.MOUSE_LEAVE="LEAVING_VISIBLE",o.BLUR="LEAVING_VISIBLE",o.MOUSE_DOWN="DISMISSED",o.SELECT_WITH_KEYBOARD="DISMISSED",o.GLOBAL_MOUSE_MOVE="LEAVING_VISIBLE",o)},u.LEAVING_VISIBLE={enter:function(){window.clearTimeout(I),I=window.setTimeout((function(){return V("TIME_COMPLETE")}),500)},leave:function(){window.clearTimeout(I),D()},on:(i={},i.MOUSE_ENTER="VISIBLE",i.FOCUS="VISIBLE",i.TIME_COMPLETE="IDLE",i)},u.DISMISSED={leave:function(){w.id=null},on:(r={},r.MOUSE_LEAVE="IDLE",r.BLUR="IDLE",r)},u)},w={id:null},v=O.initial,M=[];function D(){w.id=null}function _(e){var n=void 0===e?{}:e,t=n.onMouseEnter,o=n.onMouseMove,i=n.onMouseLeave,r=n.onFocus,u=n.onBlur,E=n.onKeyDown,c=n.onMouseDown,f=n.ref,p=n.DEBUG_STYLE,S=String(l.useId(n.id)),L=a.useState(!!p||null!==S&&w.id===S&&"VISIBLE"===v),I=L[0],O=L[1],D=a.useRef(null),_=s.useForkedRef(f,D),g=d.useRect(D,I);return a.useEffect((function(){return M.push(e=function(){O(w.id===S&&("VISIBLE"===v||"LEAVING_VISIBLE"===v))}),function(){M.splice(M.indexOf(e),1)};var e}),[S]),a.useEffect((function(){return s.checkStyles("tooltip")}),[]),a.useEffect((function(){var e=s.getOwnerDocument(D.current)||document;function n(e){"Escape"!==e.key&&"Esc"!==e.key||"VISIBLE"!==v||V("SELECT_WITH_KEYBOARD")}return e.addEventListener("keydown",n),function(){return e.removeEventListener("keydown",n)}}),[]),[{"aria-describedby":I?s.makeId("tooltip",S):void 0,"data-reach-tooltip-trigger":"",ref:_,onMouseEnter:s.wrapEvent(t,(function(){V("MOUSE_ENTER",{id:S})})),onMouseMove:s.wrapEvent(o,(function(){V("MOUSE_MOVE",{id:S})})),onFocus:s.wrapEvent(r,(function(){window.__REACH_DISABLE_TOOLTIPS||V("FOCUS",{id:S})})),onBlur:s.wrapEvent(u,(function(){w.id===S&&V("BLUR")})),onMouseLeave:s.wrapEvent(i,(function(){V("MOUSE_LEAVE")})),onKeyDown:s.wrapEvent(E,(function(e){"Enter"!==e.key&&" "!==e.key||V("SELECT_WITH_KEYBOARD")})),onMouseDown:s.wrapEvent(c,(function(){w.id===S&&V("MOUSE_DOWN")}))},{id:S,triggerRect:g,isVisible:I},I]}var g=function(e){var n=e.children,t=e.label,o=e.ariaLabel,i=e.id,r=e.DEBUG_STYLE,u=S(e,["children","label","ariaLabel","id","DEBUG_STYLE"]),l=a.Children.only(n),s=_({id:i,onMouseEnter:l.props.onMouseEnter,onMouseMove:l.props.onMouseMove,onMouseLeave:l.props.onMouseLeave,onFocus:l.props.onFocus,onBlur:l.props.onBlur,onKeyDown:l.props.onKeyDown,onMouseDown:l.props.onMouseDown,ref:l.ref,DEBUG_STYLE:r}),c=s[1];return E.createElement(a.Fragment,null,a.cloneElement(l,s[0]),E.createElement(b,Object.assign({label:t,ariaLabel:o},c,u)))},b=a.forwardRef((function(e,n){var t=e.label,o=e.ariaLabel,i=e.position,r=e.isVisible,u=e.id,a=e.triggerRect,l=S(e,["label","ariaLabel","position","isVisible","id","triggerRect"]);return r?E.createElement(c,null,E.createElement(h,Object.assign({label:t,ariaLabel:o,position:i,isVisible:r,id:s.makeId("tooltip",String(u)),triggerRect:a,ref:n},l))):null})),h=a.forwardRef((function(e,n){var t=e.label,o=e.ariaLabel,i=e.position,r=void 0===i?U:i,u=e.isVisible,l=e.id,c=e.triggerRect,L=e.style,I=S(e,["label","ariaLabel","position","isVisible","id","triggerRect","style"]),O=null!=o,w=a.useRef(null),v=s.useForkedRef(n,w),M=d.useRect(w,u);return E.createElement(a.Fragment,null,E.createElement("div",Object.assign({"data-reach-tooltip":!0,role:O?void 0:"tooltip",id:O?void 0:l,children:t,style:p({},L,{},T(r,c,M)),ref:v},I)),O&&E.createElement(f,{role:"tooltip",id:l},o))}));function T(e,n,t){return t?e(n,t):{visibility:"hidden"}}var U=function(e,n){if(!e||!n)return{};var t=window.innerWidth<e.left+n.width,o=window.innerHeight<e.bottom+n.height+8;return{left:!t||e.left-n.width<0?e.left+window.pageXOffset+"px":e.right-n.width+window.pageXOffset+"px",top:!o||e.top-n.height<0?e.top+8+e.height+window.pageYOffset+"px":e.top-8-n.height+window.pageYOffset+"px"}},V=function(e,n){var t=O.states[v],o=t&&t.on&&t.on[e];if(o){t&&t.leave&&t.leave(),n&&(w=n);var i=O.states[o];i&&i.enter&&i.enter(),v=o,M.forEach((function(e){return e(v,w)}))}};exports.Tooltip=g,exports.TooltipPopup=b,exports.default=g,exports.useTooltip=_;
//# sourceMappingURL=tooltip.cjs.production.min.js.map
import React, { useState, useRef, useEffect, Children, Fragment, cloneElement, forwardRef } from 'react';
import { useId } from '@reach/auto-id';
import { useForkedRef, checkStyles, makeId, wrapEvent } from '@reach/utils';
import { useForkedRef, checkStyles, getOwnerDocument, makeId, wrapEvent } from '@reach/utils';
import Portal from '@reach/portal';

@@ -208,2 +208,4 @@ import VisuallyHidden from '@reach/visually-hidden';

useEffect(function () {
var ownerDocument = getOwnerDocument(ownRef.current) || document;
function listener(event) {

@@ -215,5 +217,5 @@ if ((event.key === "Escape" || event.key === "Esc") && state === VISIBLE) {

document.addEventListener("keydown", listener);
ownerDocument.addEventListener("keydown", listener);
return function () {
return document.removeEventListener("keydown", listener);
return ownerDocument.removeEventListener("keydown", listener);
};

@@ -220,0 +222,0 @@ }, []);

{
"name": "@reach/tooltip",
"version": "0.8.0",
"version": "0.8.2",
"description": "Accessible tooltips",

@@ -13,3 +13,3 @@ "author": "React Training <hello@reacttraining.com>",

"scripts": {
"build": "yarn clean && cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json",
"build": "yarn clean && yarn compile",
"clean": "rm -rf ./dist",

@@ -19,8 +19,9 @@ "compile": "cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json"

"dependencies": {
"@reach/auto-id": "^0.8.0",
"@reach/portal": "^0.8.0",
"@reach/rect": "^0.8.0",
"@reach/utils": "^0.8.0",
"@reach/visually-hidden": "^0.8.0",
"prop-types": "^15.7.2"
"@reach/auto-id": "^0.8.2",
"@reach/portal": "^0.8.2",
"@reach/rect": "^0.8.2",
"@reach/utils": "^0.8.2",
"@reach/visually-hidden": "^0.8.2",
"prop-types": "^15.7.2",
"tslib": "^1.10.0"
},

@@ -39,3 +40,3 @@ "peerDependencies": {

],
"gitHead": "7702c46373c7f11adc21184e7def9977203e9326"
"gitHead": "ed24a5bb43a87adc36179283ca1de2c5af4ea26e"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc