@reach/tooltip - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/declarations/src/index.d.ts

@@ -43,2 +43,3 @@ /**
 import * as React from "react";
+import type * as Polymorphic from "@reach/utils/polymorphic";
 declare const MOUSE_REST_TIMEOUT = 100;
@@ -65,7 +66,7 @@ declare const LEAVE_TIMEOUT = 500;
  */
-declare const Tooltip: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", TooltipProps>;
-declare type TooltipProps = {
+declare const Tooltip: Polymorphic.ForwardRefComponent<"div", TooltipProps>;
+interface TooltipProps extends Omit<TooltipContentProps, "triggerRect" | "isVisible"> {
     children: React.ReactNode;
     DEBUG_STYLE?: boolean;
-} & Omit<TooltipContentProps, "triggerRect" | "isVisible">;
+}
 /**
@@ -76,7 +77,7 @@ * TooltipPopup
  */
-declare const TooltipPopup: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", TooltipPopupProps>;
-declare type TooltipPopupProps = {
+declare const TooltipPopup: Polymorphic.ForwardRefComponent<"div", TooltipPopupProps>;
+interface TooltipPopupProps extends TooltipContentProps {
     children?: React.ReactNode;
-} & TooltipContentProps;
-declare type TooltipContentProps = {
+}
+interface TooltipContentProps {
     ariaLabel?: string;
@@ -87,3 +88,3 @@ position?: Position;
     triggerRect: DOMRect | null;
-};
+}
 export declare const positionTooltip: Position;
@@ -90,0 +91,0 @@ interface TriggerParams<ElementType extends HTMLElement> {

dist/reach-tooltip.cjs.dev.js

@@ -7,6 +7,12 @@ 'use strict';
 var autoId = require('@reach/auto-id');
-var utils = require('@reach/utils');
+var getDocumentDimensions = require('@reach/utils/get-document-dimensions');
+var ownerDocument = require('@reach/utils/owner-document');
+var makeId = require('@reach/utils/make-id');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var portal = require('@reach/portal');
 var visuallyHidden = require('@reach/visually-hidden');
 var rect = require('@reach/rect');
+var warning = require('tiny-warning');
 var PropTypes = require('prop-types');
@@ -16,2 +22,3 @@
 
+var warning__default = /*#__PURE__*/_interopDefault(warning);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
@@ -217,3 +224,3 @@
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var triggerRect = rect.useRect(ownRef, {
@@ -227,5 +234,5 @@ observe: isVisible
   }, [id]);
-  utils.useCheckStyles("tooltip");
+  devUtils.useCheckStyles("tooltip");
   React.useEffect(function () {
-    var ownerDocument = utils.getOwnerDocument(ownRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(ownRef.current);
 
@@ -240,5 +247,5 @@ function listener(event) {
 
-    ownerDocument.addEventListener("keydown", listener);
+    ownerDocument$1.addEventListener("keydown", listener);
     return function () {
-      return ownerDocument.removeEventListener("keydown", listener);
+      return ownerDocument$1.removeEventListener("keydown", listener);
     };
@@ -258,3 +265,3 @@ }, []);
 
-    return utils.wrapEvent(theirHandler, ourHandler);
+    return composeEventHandlers.composeEventHandlers(theirHandler, ourHandler);
   }
@@ -335,10 +342,10 @@
     // https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip
-    "aria-describedby": isVisible ? utils.makeId("tooltip", id) : undefined,
+    "aria-describedby": isVisible ? makeId.makeId("tooltip", id) : undefined,
     "data-state": isVisible ? "tooltip-visible" : "tooltip-hidden",
     "data-reach-tooltip-trigger": "",
     ref: ref,
-    onPointerEnter: utils.wrapEvent(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
-    onPointerMove: utils.wrapEvent(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
-    onPointerLeave: utils.wrapEvent(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
-    onPointerDown: utils.wrapEvent(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
+    onPointerEnter: composeEventHandlers.composeEventHandlers(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
+    onPointerMove: composeEventHandlers.composeEventHandlers(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
+    onPointerLeave: composeEventHandlers.composeEventHandlers(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
+    onPointerDown: composeEventHandlers.composeEventHandlers(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
     onMouseEnter: wrapMouseEvent(onMouseEnter, handleMouseEnter),
@@ -348,5 +355,5 @@ onMouseMove: wrapMouseEvent(onMouseMove, handleMouseMove),
     onMouseDown: wrapMouseEvent(onMouseDown, handleMouseDown),
-    onFocus: utils.wrapEvent(onFocus, handleFocus),
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
+    onFocus: composeEventHandlers.composeEventHandlers(onFocus, handleFocus),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
   };
@@ -368,3 +375,3 @@ var tooltip = {
 
-var Tooltip = /*#__PURE__*/utils.forwardRefWithAs(function (_ref2, forwardedRef) {
+var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -378,3 +385,3 @@ label = _ref2.label,
   var child = React.Children.only(children);
-  process.env.NODE_ENV !== "production" ? utils.warning(!DEPRECATED_ariaLabel, "The `ariaLabel prop is deprecated and will be removed from @reach/tooltip in a future version of Reach UI. Please use `aria-label` instead.") : void 0; // We need to pass some properties from the child into useTooltip
+  process.env.NODE_ENV !== "production" ? warning__default['default'](!DEPRECATED_ariaLabel, "The `ariaLabel prop is deprecated and will be removed from @reach/tooltip in a future version of Reach UI. Please use `aria-label` instead.") : void 0; // We need to pass some properties from the child into useTooltip
   // to make sure users can maintain control over the trigger's ref and events
@@ -425,3 +432,3 @@
 
-var TooltipPopup = /*#__PURE__*/utils.forwardRefWithAs(function TooltipPopup(_ref3, forwardRef) {
+var TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(_ref3, forwardRef) {
   var label = _ref3.label,
@@ -439,3 +446,3 @@ DEPRECATED_ariaLabel = _ref3.ariaLabel,
   }, props, {
-    id: utils.makeId("tooltip", String(id))
+    id: makeId.makeId("tooltip", String(id))
   }))) : null;
@@ -461,3 +468,3 @@ });
 
-var TooltipContent = /*#__PURE__*/utils.forwardRefWithAs(function TooltipContent(_ref4, forwardedRef) {
+var TooltipContent = /*#__PURE__*/React.forwardRef(function TooltipContent(_ref4, forwardedRef) {
   var ariaLabel = _ref4.ariaLabel,
@@ -485,3 +492,3 @@ realAriaLabel = _ref4["aria-label"],
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var tooltipRect = rect.useRect(ownRef, {
@@ -530,3 +537,3 @@ observe: isVisible
 
-  var _getDocumentDimension = utils.getDocumentDimensions(),
+  var _getDocumentDimension = getDocumentDimensions.getDocumentDimensions(),
       windowWidth = _getDocumentDimension.width,
@@ -575,3 +582,3 @@ windowHeight = _getDocumentDimension.height;
 
-    var ownerDocument = utils.getOwnerDocument(ref.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(ref.current);
 
@@ -592,7 +599,7 @@ function handleMouseMove(event) {
 
-    ownerDocument.addEventListener("mousemove", handleMouseMove);
+    ownerDocument$1.addEventListener("mousemove", handleMouseMove);
     return function () {
-      ownerDocument.removeEventListener("mousemove", handleMouseMove);
+      ownerDocument$1.removeEventListener("mousemove", handleMouseMove);
     };
-  }, [disabled, isVisible]);
+  }, [disabled, isVisible, ref]);
 } ////////////////////////////////////////////////////////////////////////////////
@@ -599,0 +606,0 @@

dist/reach-tooltip.cjs.prod.js

@@ -7,6 +7,12 @@ 'use strict';
 var autoId = require('@reach/auto-id');
-var utils = require('@reach/utils');
+var getDocumentDimensions = require('@reach/utils/get-document-dimensions');
+var ownerDocument = require('@reach/utils/owner-document');
+var makeId = require('@reach/utils/make-id');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var portal = require('@reach/portal');
 var visuallyHidden = require('@reach/visually-hidden');
 var rect = require('@reach/rect');
+require('tiny-warning');
 require('prop-types');
@@ -212,3 +218,3 @@
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var triggerRect = rect.useRect(ownRef, {
@@ -222,5 +228,5 @@ observe: isVisible
   }, [id]);
-  utils.useCheckStyles("tooltip");
+  devUtils.useCheckStyles("tooltip");
   React.useEffect(function () {
-    var ownerDocument = utils.getOwnerDocument(ownRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(ownRef.current);
 
@@ -235,5 +241,5 @@ function listener(event) {
 
-    ownerDocument.addEventListener("keydown", listener);
+    ownerDocument$1.addEventListener("keydown", listener);
     return function () {
-      return ownerDocument.removeEventListener("keydown", listener);
+      return ownerDocument$1.removeEventListener("keydown", listener);
     };
@@ -253,3 +259,3 @@ }, []);
 
-    return utils.wrapEvent(theirHandler, ourHandler);
+    return composeEventHandlers.composeEventHandlers(theirHandler, ourHandler);
   }
@@ -330,10 +336,10 @@
     // https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip
-    "aria-describedby": isVisible ? utils.makeId("tooltip", id) : undefined,
+    "aria-describedby": isVisible ? makeId.makeId("tooltip", id) : undefined,
     "data-state": isVisible ? "tooltip-visible" : "tooltip-hidden",
     "data-reach-tooltip-trigger": "",
     ref: ref,
-    onPointerEnter: utils.wrapEvent(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
-    onPointerMove: utils.wrapEvent(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
-    onPointerLeave: utils.wrapEvent(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
-    onPointerDown: utils.wrapEvent(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
+    onPointerEnter: composeEventHandlers.composeEventHandlers(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
+    onPointerMove: composeEventHandlers.composeEventHandlers(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
+    onPointerLeave: composeEventHandlers.composeEventHandlers(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
+    onPointerDown: composeEventHandlers.composeEventHandlers(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
     onMouseEnter: wrapMouseEvent(onMouseEnter, handleMouseEnter),
@@ -343,5 +349,5 @@ onMouseMove: wrapMouseEvent(onMouseMove, handleMouseMove),
     onMouseDown: wrapMouseEvent(onMouseDown, handleMouseDown),
-    onFocus: utils.wrapEvent(onFocus, handleFocus),
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
+    onFocus: composeEventHandlers.composeEventHandlers(onFocus, handleFocus),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
   };
@@ -363,3 +369,3 @@ var tooltip = {
 
-var Tooltip = /*#__PURE__*/utils.forwardRefWithAs(function (_ref2, forwardedRef) {
+var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -409,3 +415,3 @@ label = _ref2.label,
 
-var TooltipPopup = /*#__PURE__*/utils.forwardRefWithAs(function TooltipPopup(_ref3, forwardRef) {
+var TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(_ref3, forwardRef) {
   var label = _ref3.label,
@@ -423,3 +429,3 @@ DEPRECATED_ariaLabel = _ref3.ariaLabel,
   }, props, {
-    id: utils.makeId("tooltip", String(id))
+    id: makeId.makeId("tooltip", String(id))
   }))) : null;
@@ -436,3 +442,3 @@ });
 
-var TooltipContent = /*#__PURE__*/utils.forwardRefWithAs(function TooltipContent(_ref4, forwardedRef) {
+var TooltipContent = /*#__PURE__*/React.forwardRef(function TooltipContent(_ref4, forwardedRef) {
   var ariaLabel = _ref4.ariaLabel,
@@ -460,3 +466,3 @@ realAriaLabel = _ref4["aria-label"],
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var tooltipRect = rect.useRect(ownRef, {
@@ -500,3 +506,3 @@ observe: isVisible
 
-  var _getDocumentDimension = utils.getDocumentDimensions(),
+  var _getDocumentDimension = getDocumentDimensions.getDocumentDimensions(),
       windowWidth = _getDocumentDimension.width,
@@ -545,3 +551,3 @@ windowHeight = _getDocumentDimension.height;
 
-    var ownerDocument = utils.getOwnerDocument(ref.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(ref.current);
 
@@ -562,7 +568,7 @@ function handleMouseMove(event) {
 
-    ownerDocument.addEventListener("mousemove", handleMouseMove);
+    ownerDocument$1.addEventListener("mousemove", handleMouseMove);
     return function () {
-      ownerDocument.removeEventListener("mousemove", handleMouseMove);
+      ownerDocument$1.removeEventListener("mousemove", handleMouseMove);
     };
-  }, [disabled, isVisible]);
+  }, [disabled, isVisible, ref]);
 } ////////////////////////////////////////////////////////////////////////////////
@@ -569,0 +575,0 @@

dist/reach-tooltip.esm.js

@@ -1,7 +0,13 @@
-import { useState, useRef, useEffect, Children, createElement, Fragment, cloneElement } from 'react';
+import { useState, useRef, useEffect, forwardRef, Children, createElement, Fragment, cloneElement } from 'react';
 import { useId } from '@reach/auto-id';
-import { useForkedRef, useCheckStyles, getOwnerDocument, makeId, wrapEvent, forwardRefWithAs, warning, getDocumentDimensions } from '@reach/utils';
+import { getDocumentDimensions } from '@reach/utils/get-document-dimensions';
+import { getOwnerDocument } from '@reach/utils/owner-document';
+import { makeId } from '@reach/utils/make-id';
+import { useCheckStyles } from '@reach/utils/dev-utils';
+import { useComposedRefs } from '@reach/utils/compose-refs';
+import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 import { Portal } from '@reach/portal';
 import { VisuallyHidden } from '@reach/visually-hidden';
 import { useRect } from '@reach/rect';
+import warning from 'tiny-warning';
 import PropTypes from 'prop-types';
@@ -207,3 +213,3 @@
   var ownRef = useRef(null);
-  var ref = useForkedRef(forwardedRef, ownRef);
+  var ref = useComposedRefs(forwardedRef, ownRef);
   var triggerRect = useRect(ownRef, {
@@ -246,3 +252,3 @@ observe: isVisible
 
-    return wrapEvent(theirHandler, ourHandler);
+    return composeEventHandlers(theirHandler, ourHandler);
   }
@@ -327,6 +333,6 @@
     ref: ref,
-    onPointerEnter: wrapEvent(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
-    onPointerMove: wrapEvent(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
-    onPointerLeave: wrapEvent(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
-    onPointerDown: wrapEvent(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
+    onPointerEnter: composeEventHandlers(onPointerEnter, wrapPointerEventHandler(handleMouseEnter)),
+    onPointerMove: composeEventHandlers(onPointerMove, wrapPointerEventHandler(handleMouseMove)),
+    onPointerLeave: composeEventHandlers(onPointerLeave, wrapPointerEventHandler(handleMouseLeave)),
+    onPointerDown: composeEventHandlers(onPointerDown, wrapPointerEventHandler(handleMouseDown)),
     onMouseEnter: wrapMouseEvent(onMouseEnter, handleMouseEnter),
@@ -336,5 +342,5 @@ onMouseMove: wrapMouseEvent(onMouseMove, handleMouseMove),
     onMouseDown: wrapMouseEvent(onMouseDown, handleMouseDown),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
+    onFocus: composeEventHandlers(onFocus, handleFocus),
+    onBlur: composeEventHandlers(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
   };
@@ -356,3 +362,3 @@ var tooltip = {
 
-var Tooltip = /*#__PURE__*/forwardRefWithAs(function (_ref2, forwardedRef) {
+var Tooltip = /*#__PURE__*/forwardRef(function (_ref2, forwardedRef) {
   var children = _ref2.children,
@@ -412,3 +418,3 @@ label = _ref2.label,
 
-var TooltipPopup = /*#__PURE__*/forwardRefWithAs(function TooltipPopup(_ref3, forwardRef) {
+var TooltipPopup = /*#__PURE__*/forwardRef(function TooltipPopup(_ref3, forwardRef) {
   var label = _ref3.label,
@@ -447,3 +453,3 @@ DEPRECATED_ariaLabel = _ref3.ariaLabel,
 
-var TooltipContent = /*#__PURE__*/forwardRefWithAs(function TooltipContent(_ref4, forwardedRef) {
+var TooltipContent = /*#__PURE__*/forwardRef(function TooltipContent(_ref4, forwardedRef) {
   var ariaLabel = _ref4.ariaLabel,
@@ -471,3 +477,3 @@ realAriaLabel = _ref4["aria-label"],
   var ownRef = useRef(null);
-  var ref = useForkedRef(forwardedRef, ownRef);
+  var ref = useComposedRefs(forwardedRef, ownRef);
   var tooltipRect = useRect(ownRef, {
@@ -580,3 +586,3 @@ observe: isVisible
     };
-  }, [disabled, isVisible]);
+  }, [disabled, isVisible, ref]);
 } ////////////////////////////////////////////////////////////////////////////////
@@ -583,0 +589,0 @@

package.json

 {
   "name": "@reach/tooltip",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Accessible tooltips",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -14,13 +16,14 @@ "type": "git",
   "dependencies": {
-    "@reach/auto-id": "0.14.0",
-    "@reach/portal": "0.14.0",
-    "@reach/rect": "0.14.0",
-    "@reach/utils": "0.14.0",
-    "@reach/visually-hidden": "0.14.0",
+    "@reach/auto-id": "0.15.0",
+    "@reach/portal": "0.15.0",
+    "@reach/rect": "0.15.0",
+    "@reach/utils": "0.15.0",
+    "@reach/visually-hidden": "0.15.0",
     "prop-types": "^15.7.2",
+    "tiny-warning": "^1.0.3",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -43,3 +46,3 @@ "peerDependencies": {
   ],
-  "gitHead": "80f6ca5f8d25a10887e2bd34d60094402b9bc0a7"
+  "gitHead": "1449650359c119c1afe25973aa7584e09e2c88bc"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73907

increased by2.4%

Lines of code

1808

increased by1.18%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Addedtiny-warning@^1.0.3

• + Added@reach/auto-id@0.15.0(transitive)

• + Added@reach/portal@0.15.0(transitive)

• + Added@reach/rect@0.15.0(transitive)

• + Added@reach/utils@0.15.0(transitive)

• + Added@reach/visually-hidden@0.15.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• - Removed@reach/auto-id@0.14.0(transitive)

• - Removed@reach/portal@0.14.0(transitive)

• - Removed@reach/rect@0.14.0(transitive)

• - Removed@reach/utils@0.14.0(transitive)

• - Removed@reach/visually-hidden@0.14.0(transitive)

• - Removed@types/warning@3.0.3(transitive)

• - Removedwarning@4.0.3(transitive)

• Updated@reach/auto-id@0.15.0

• Updated@reach/portal@0.15.0

• Updated@reach/rect@0.15.0

• Updated@reach/utils@0.15.0

• Updated@reach/visually-hidden@0.15.0