@reach/popover - npm Package Compare versions

Comparing version 0.10.5 to 0.11.0

dist/index.d.ts

@@ -14,2 +14,9 @@ /**
     /**
+     * Render the popover markup, but hide it – used by MenuButton so that it
+     * can have an `aria-controls` attribute even when its menu isn't open, and
+     * used inside `Popover` as a hint that we can tell `useRect` to stop
+     * observing for better performance.
+     */
+    hidden?: boolean | undefined;
+    /**
      * Testing this API so we might accept additional nodes that apps can use to
@@ -28,2 +35,9 @@ * determine the position of the popover. One example where it may be useful
     /**
+     * Render the popover markup, but hide it – used by MenuButton so that it
+     * can have an `aria-controls` attribute even when its menu isn't open, and
+     * used inside `Popover` as a hint that we can tell `useRect` to stop
+     * observing for better performance.
+     */
+    hidden?: boolean;
+    /**
      * Testing this API so we might accept additional nodes that apps can use to
@@ -30,0 +44,0 @@ * determine the position of the popover. One example where it may be useful

dist/popover.cjs.development.js

@@ -5,11 +5,14 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var Portal = _interopDefault(require('@reach/portal'));
+var Portal = require('@reach/portal');
 var rect = require('@reach/rect');
 var utils = require('@reach/utils');
-var tabbable = _interopDefault(require('tabbable'));
+var tabbable = require('tabbable');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+var tabbable__default = /*#__PURE__*/_interopDefaultLegacy(tabbable);
+
 function _extends() {
@@ -53,3 +56,3 @@ _extends = Object.assign || function (target) {
 var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
-  return React__default.createElement(Portal, null, React__default.createElement(PopoverImpl, Object.assign({
+  return React__default['default'].createElement(Portal__default['default'], null, React__default['default'].createElement(PopoverImpl, Object.assign({
     ref: ref
@@ -79,7 +82,7 @@ }, props)));
   var popoverRef = React.useRef(null);
-  var popoverRect = rect.useRect(popoverRef);
-  var targetRect = rect.useRect(targetRef);
+  var popoverRect = rect.useRect(popoverRef, !props.hidden);
+  var targetRect = rect.useRect(targetRef, !props.hidden);
   var ref = utils.useForkedRef(popoverRef, forwardedRef);
   useSimulateTabNavigationForReactTree(targetRef, popoverRef);
-  return React__default.createElement("div", Object.assign({
+  return React__default['default'].createElement("div", Object.assign({
     "data-reach-popover": "",
@@ -190,3 +193,3 @@ ref: ref
   function handleKeyDown(event) {
-    if (event.key === "Tab" && popoverRef.current && tabbable(popoverRef.current).length === 0) {
+    if (event.key === "Tab" && popoverRef.current && tabbable__default['default'](popoverRef.current).length === 0) {
       return;
@@ -226,3 +229,3 @@ }
   function getElementAfterTrigger() {
-    var elements = ownerDocument && tabbable(ownerDocument);
+    var elements = ownerDocument && tabbable__default['default'](ownerDocument);
     var targetIndex = elements && triggerRef.current ? elements.indexOf(triggerRef.current) : -1;
@@ -238,3 +241,3 @@ var elementAfterTrigger = elements && elements[targetIndex + 1];
   function focusFirstPopoverTabbable(event) {
-    var elements = popoverRef.current && tabbable(popoverRef.current);
+    var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
 
@@ -251,3 +254,3 @@ if (elements && elements[0]) {
     if (inPopover) {
-      var elements = popoverRef.current && tabbable(popoverRef.current);
+      var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
       return Boolean(elements && ownerDocument && elements[elements.length - 1] === ownerDocument.activeElement);
@@ -275,3 +278,3 @@ }
   function focusLastTabbableInPopover(event) {
-    var elements = popoverRef.current && tabbable(popoverRef.current);
+    var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
     var last = elements && elements[elements.length - 1];
@@ -286,3 +289,3 @@
   function shiftTabbedOutOfPopover(event) {
-    var elements = popoverRef.current && tabbable(popoverRef.current);
+    var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
 
@@ -304,3 +307,3 @@ if (elements) {
   function tabbedToBrowserChrome(event) {
-    var elements = ownerDocument && popoverRef.current ? tabbable(ownerDocument).filter(function (element) {
+    var elements = ownerDocument && popoverRef.current ? tabbable__default['default'](ownerDocument).filter(function (element) {
       return !popoverRef.current.contains(element);
@@ -314,3 +317,3 @@ }) : null;
     // element, and it better not, because the trigger needs to be tabbable!
-    return ownerDocument ? event.target === tabbable(ownerDocument)[0] : false;
+    return ownerDocument ? event.target === tabbable__default['default'](ownerDocument)[0] : false;
   }
@@ -321,3 +324,3 @@
   function disableTabbablesInPopover() {
-    var elements = popoverRef.current && tabbable(popoverRef.current);
+    var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
 
@@ -324,0 +327,0 @@ if (elements) {

dist/popover.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=t(e),r=t(require("@reach/portal")),i=require("@reach/rect"),o=require("@reach/utils"),u=t(require("tabbable"));function c(){return(c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}var f=e.forwardRef((function(t,e){return n.createElement(r,null,n.createElement(a,Object.assign({ref:e},t)))})),a=e.forwardRef((function(t,r){var f=t.targetRef,a=t.position,s=void 0===a?d:a,p=t.unstable_observableRefs,v=void 0===p?[]:p,h=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)e.indexOf(n=o[r])>=0||(i[n]=t[n]);return i}(t,["targetRef","position","unstable_observableRefs"]),g=e.useRef(null),w=i.useRect(g),b=i.useRect(f),y=o.useForkedRef(g,r);return function(t,n){var r=o.getOwnerDocument(t.current);function i(e){"Tab"===e.key&&n.current&&0===u(n.current).length||("Tab"===e.key&&e.shiftKey?function(t){if(t.shiftKey){var e=c();return t.target===e}}(e)?function(t){var e=n.current&&u(n.current),r=e&&e[e.length-1];r&&(t.preventDefault(),r.focus())}(e):function(t){var e=n.current&&u(n.current);return!!e&&0!==e.length&&t.target===e[0]}(e)?function(e){var n;e.preventDefault(),null===(n=t.current)||void 0===n||n.focus()}(e):function(t){return!!r&&t.target===u(r)[0]}(e)&&a():"Tab"===e.key&&(t.current&&r&&t.current===r.activeElement?function(t){var e=n.current&&u(n.current);e&&e[0]&&(t.preventDefault(),e[0].focus())}(e):function(){if(n.current&&r&&n.current.contains(r.activeElement||null)){var t=n.current&&u(n.current);return Boolean(t&&r&&t[t.length-1]===r.activeElement)}return!1}()?function(t){var e=c();e&&(t.preventDefault(),e.focus())}(e):function(t){var e=r&&n.current?u(r).filter((function(t){return!n.current.contains(t)})):null;return!!e&&t.target===e[e.length-1]}(e)&&a()))}function c(){var e=r&&u(r),i=e&&t.current?e.indexOf(t.current):-1,o=e&&e[i+1];return(!n.current||!n.current.contains(o||null))&&o}e.useEffect((function(){if(r)return r.addEventListener("keydown",i),function(){r.removeEventListener("keydown",i)}}),[]);var f=[];function a(){var t=n.current&&u(n.current);t&&(t.forEach((function(t){f.push([t,t.tabIndex]),t.tabIndex=-1})),r&&r.addEventListener("focusin",l))}function l(){r&&r.removeEventListener("focusin",l),f.forEach((function(t){t[0].tabIndex=t[1]}))}}(f,g),n.createElement("div",Object.assign({"data-reach-popover":"",ref:y},h,{style:c({position:"absolute"},l.apply(void 0,[s,b,w].concat(v)),h.style)}))}));function l(t,e,n){for(var r=arguments.length,i=new Array(r>3?r-3:0),o=3;o<r;o++)i[o-3]=arguments[o];return n?t.apply(void 0,[e,n].concat(i.map((function(t){return t.current})))):{visibility:"hidden"}}function s(t,e){return{top:p(t,e).directionUp?t.top-e.height+window.pageYOffset+"px":t.top+t.height+window.pageYOffset+"px"}}var d=function(t,e){return t&&e?c({left:p(t,e).directionRight?t.right-e.width+window.pageXOffset+"px":t.left+window.pageXOffset+"px"},s(t,e)):{}};function p(t,e,n,r){void 0===n&&(n=0),void 0===r&&(r=0);var i={top:t.top-e.height<0,right:window.innerWidth<t.left+e.width-n,bottom:window.innerHeight<t.bottom+e.height-r,left:t.left+t.width-e.width<0};return{directionRight:i.right&&!i.left,directionLeft:i.left&&!i.right,directionUp:i.bottom&&!i.top,directionDown:i.top&&!i.bottom}}exports.default=f,exports.getCollisions=p,exports.positionDefault=d,exports.positionMatchWidth=function(t,e){return t&&e?c({width:t.width,left:t.left},s(t,e)):{}},exports.positionRight=function(t,e){return t&&e?c({left:p(t,e).directionLeft?t.left+window.pageXOffset+"px":t.right-e.width+window.pageXOffset+"px"},s(t,e)):{}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),e=require("@reach/portal"),n=require("@reach/rect"),r=require("@reach/utils"),i=require("tabbable");function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=u(t),f=u(e),a=u(i);function c(){return(c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}var l=t.forwardRef((function(t,e){return o.default.createElement(f.default,null,o.default.createElement(d,Object.assign({ref:e},t)))})),d=t.forwardRef((function(e,i){var u=e.targetRef,f=e.position,l=void 0===f?h:f,d=e.unstable_observableRefs,p=void 0===d?[]:d,v=function(t,e){if(null==t)return{};var n,r,i={},u=Object.keys(t);for(r=0;r<u.length;r++)e.indexOf(n=u[r])>=0||(i[n]=t[n]);return i}(e,["targetRef","position","unstable_observableRefs"]),g=t.useRef(null),w=n.useRect(g,!v.hidden),b=n.useRect(u,!v.hidden),y=r.useForkedRef(g,i);return function(e,n){var i=r.getOwnerDocument(e.current);function u(t){"Tab"===t.key&&n.current&&0===a.default(n.current).length||("Tab"===t.key&&t.shiftKey?function(t){if(t.shiftKey){var e=o();return t.target===e}}(t)?function(t){var e=n.current&&a.default(n.current),r=e&&e[e.length-1];r&&(t.preventDefault(),r.focus())}(t):function(t){var e=n.current&&a.default(n.current);return!!e&&0!==e.length&&t.target===e[0]}(t)?function(t){var n;t.preventDefault(),null===(n=e.current)||void 0===n||n.focus()}(t):function(t){return!!i&&t.target===a.default(i)[0]}(t)&&c():"Tab"===t.key&&(e.current&&i&&e.current===i.activeElement?function(t){var e=n.current&&a.default(n.current);e&&e[0]&&(t.preventDefault(),e[0].focus())}(t):function(){if(n.current&&i&&n.current.contains(i.activeElement||null)){var t=n.current&&a.default(n.current);return Boolean(t&&i&&t[t.length-1]===i.activeElement)}return!1}()?function(t){var e=o();e&&(t.preventDefault(),e.focus())}(t):function(t){var e=i&&n.current?a.default(i).filter((function(t){return!n.current.contains(t)})):null;return!!e&&t.target===e[e.length-1]}(t)&&c()))}function o(){var t=i&&a.default(i),r=t&&e.current?t.indexOf(e.current):-1,u=t&&t[r+1];return(!n.current||!n.current.contains(u||null))&&u}t.useEffect((function(){if(i)return i.addEventListener("keydown",u),function(){i.removeEventListener("keydown",u)}}),[]);var f=[];function c(){var t=n.current&&a.default(n.current);t&&(t.forEach((function(t){f.push([t,t.tabIndex]),t.tabIndex=-1})),i&&i.addEventListener("focusin",l))}function l(){i&&i.removeEventListener("focusin",l),f.forEach((function(t){t[0].tabIndex=t[1]}))}}(u,g),o.default.createElement("div",Object.assign({"data-reach-popover":"",ref:y},v,{style:c({position:"absolute"},s.apply(void 0,[l,b,w].concat(p)),v.style)}))}));function s(t,e,n){for(var r=arguments.length,i=new Array(r>3?r-3:0),u=3;u<r;u++)i[u-3]=arguments[u];return n?t.apply(void 0,[e,n].concat(i.map((function(t){return t.current})))):{visibility:"hidden"}}function p(t,e){return{top:v(t,e).directionUp?t.top-e.height+window.pageYOffset+"px":t.top+t.height+window.pageYOffset+"px"}}var h=function(t,e){return t&&e?c({left:v(t,e).directionRight?t.right-e.width+window.pageXOffset+"px":t.left+window.pageXOffset+"px"},p(t,e)):{}};function v(t,e,n,r){void 0===n&&(n=0),void 0===r&&(r=0);var i={top:t.top-e.height<0,right:window.innerWidth<t.left+e.width-n,bottom:window.innerHeight<t.bottom+e.height-r,left:t.left+t.width-e.width<0};return{directionRight:i.right&&!i.left,directionLeft:i.left&&!i.right,directionUp:i.bottom&&!i.top,directionDown:i.top&&!i.bottom}}exports.default=l,exports.getCollisions=v,exports.positionDefault=h,exports.positionMatchWidth=function(t,e){return t&&e?c({width:t.width,left:t.left},p(t,e)):{}},exports.positionRight=function(t,e){return t&&e?c({left:v(t,e).directionLeft?t.left+window.pageXOffset+"px":t.right-e.width+window.pageXOffset+"px"},p(t,e)):{}};
 //# sourceMappingURL=popover.cjs.production.min.js.map

dist/popover.esm.js

@@ -70,4 +70,4 @@ import React, { forwardRef, useRef, useEffect } from 'react';
   var popoverRef = useRef(null);
-  var popoverRect = useRect(popoverRef);
-  var targetRect = useRect(targetRef);
+  var popoverRect = useRect(popoverRef, !props.hidden);
+  var targetRect = useRect(targetRef, !props.hidden);
   var ref = useForkedRef(popoverRef, forwardedRef);
@@ -74,0 +74,0 @@ useSimulateTabNavigationForReactTree(targetRef, popoverRef);

package.json

 {
   "name": "@reach/popover",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "Render a portal positioned relative to another element.",
@@ -13,8 +13,8 @@ "author": "React Training <[e-mail]>",
   "scripts": {
-    "build": "ts-node ../../scripts/build"
+    "build": "ts-node --transpile-only ../../scripts/build-package $npm_package_name"
   },
   "dependencies": {
-    "@reach/portal": "0.10.5",
-    "@reach/rect": "0.10.5",
-    "@reach/utils": "0.10.5",
+    "@reach/portal": "0.11.0",
+    "@reach/rect": "0.11.0",
+    "@reach/utils": "0.11.0",
     "tabbable": "^4.0.0",
@@ -34,3 +34,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "86a046f54d53b6420e392b3fa56dd991d9d4e458"
+  "gitHead": "7eaa66982cd17fb012c13c97e6a1770f75b6ce00"
 }

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

89976

increased by2.78%

Lines of code

631

increased by2.77%

Dependency changes

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

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

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

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

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

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

• Updated@reach/portal@0.11.0

• Updated@reach/rect@0.11.0

• Updated@reach/utils@0.11.0