@reach/popover - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

dist/index.d.ts

 /**
  * Welcome to @reach/popover!
  */
-import React from "react";
+import * as React from "react";
 import { PRect } from "@reach/rect";
@@ -9,25 +9,6 @@ /**
  */
-declare const Popover: React.ForwardRefExoticComponent<{
+declare const Popover: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", PopoverProps>;
+declare type PopoverProps = {
     children: React.ReactNode;
     targetRef: React.RefObject<HTMLElement>;
-    position?: Position | undefined;
-    /**
-     * 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
-     * determine the position of the popover. One example where it may be useful
-     * is for positioning the popover of a listbox where the cursor rests on top
-     * of the selected option. Pretty sure this will change so don't use it
-     * anywehre in public yet!
-     */
-    unstable_observableRefs?: React.RefObject<PossibleNode>[] | undefined;
-} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare type PopoverProps = {
-    children: React.ReactNode;
-    targetRef: React.RefObject<HTMLElement>;
     position?: Position;
@@ -46,11 +27,10 @@ /**
      * of the selected option. Pretty sure this will change so don't use it
-     * anywehre in public yet!
+     * anywhere in public yet!
      */
     unstable_observableRefs?: React.RefObject<PossibleNode>[];
-} & React.HTMLAttributes<HTMLDivElement>;
-export default Popover;
-export declare const positionDefault: Position;
-export declare const positionRight: Position;
-export declare const positionMatchWidth: Position;
-export declare function getCollisions(targetRect: PRect, popoverRect: PRect, offsetLeft?: number, offsetBottom?: number): {
+};
+declare const positionDefault: Position;
+declare const positionRight: Position;
+declare const positionMatchWidth: Position;
+declare function getCollisions(targetRect: PRect, popoverRect: PRect, offsetLeft?: number, offsetBottom?: number): {
     directionRight: boolean;
@@ -61,3 +41,6 @@ directionLeft: boolean;
 };
-export declare type Position = (targetRect?: PRect | null, popoverRect?: PRect | null, ...unstable_observableNodes: PossibleNode[]) => React.CSSProperties;
+declare type Position = (targetRect?: PRect | null, popoverRect?: PRect | null, ...unstable_observableNodes: PossibleNode[]) => React.CSSProperties;
 declare type PossibleNode = null | undefined | HTMLElement | SVGElement;
+export default Popover;
+export type { PopoverProps, Position };
+export { getCollisions, Popover, positionDefault, positionMatchWidth, positionRight, };

dist/popover.cjs.development.js

@@ -6,3 +6,3 @@ 'use strict';
 var React = require('react');
-var Portal = require('@reach/portal');
+var portal = require('@reach/portal');
 var rect = require('@reach/rect');
@@ -14,4 +14,2 @@ var utils = require('@reach/utils');
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var tabbable__default = /*#__PURE__*/_interopDefaultLegacy(tabbable);
@@ -56,4 +54,4 @@
 
-var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
-  return React__default['default'].createElement(Portal__default['default'], null, React__default['default'].createElement(PopoverImpl, Object.assign({
+var Popover = /*#__PURE__*/utils.forwardRefWithAs(function Popover(props, ref) {
+  return React.createElement(portal.Portal, null, React.createElement(PopoverImpl, Object.assign({
     ref: ref
@@ -65,3 +63,3 @@ }, props)));
   Popover.displayName = "Popover";
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
@@ -75,4 +73,7 @@ /**
 
-var PopoverImpl = /*#__PURE__*/React.forwardRef(function PopoverImpl(_ref, forwardedRef) {
-  var targetRef = _ref.targetRef,
+
+var PopoverImpl = /*#__PURE__*/utils.forwardRefWithAs(function PopoverImpl(_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "div" : _ref$as,
+      targetRef = _ref.targetRef,
       _ref$position = _ref.position,
@@ -82,10 +83,14 @@ position = _ref$position === void 0 ? positionDefault : _ref$position,
       unstable_observableRefs = _ref$unstable_observa === void 0 ? [] : _ref$unstable_observa,
-      props = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "unstable_observableRefs"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "targetRef", "position", "unstable_observableRefs"]);
 
   var popoverRef = React.useRef(null);
-  var popoverRect = rect.useRect(popoverRef, !props.hidden);
-  var targetRect = rect.useRect(targetRef, !props.hidden);
+  var popoverRect = rect.useRect(popoverRef, {
+    observe: !props.hidden
+  });
+  var targetRect = rect.useRect(targetRef, {
+    observe: !props.hidden
+  });
   var ref = utils.useForkedRef(popoverRef, forwardedRef);
   useSimulateTabNavigationForReactTree(targetRef, popoverRef);
-  return React__default['default'].createElement("div", Object.assign({
+  return React.createElement(Comp, Object.assign({
     "data-reach-popover": "",
@@ -138,2 +143,3 @@ ref: ref
 };
+
 var positionRight = function positionRight(targetRect, popoverRect) {
@@ -151,2 +157,3 @@ if (!targetRect || !popoverRect) {
 };
+
 var positionMatchWidth = function positionMatchWidth(targetRect, popoverRect) {
@@ -162,2 +169,3 @@ if (!targetRect || !popoverRect) {
 };
+
 function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
@@ -195,2 +203,3 @@ if (offsetLeft === void 0) {
 
+
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -224,14 +233,10 @@ var ownerDocument = utils.getOwnerDocument(triggerRef.current);
   React.useEffect(function () {
-    if (ownerDocument) {
-      ownerDocument.addEventListener("keydown", handleKeyDown);
-      return function () {
-        ownerDocument.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-
-    return; // eslint-disable-next-line react-hooks/exhaustive-deps
+    ownerDocument.addEventListener("keydown", handleKeyDown);
+    return function () {
+      ownerDocument.removeEventListener("keydown", handleKeyDown);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function getElementAfterTrigger() {
-    var elements = ownerDocument && tabbable__default['default'](ownerDocument);
+    var elements = tabbable__default['default'](ownerDocument);
     var targetIndex = elements && triggerRef.current ? elements.indexOf(triggerRef.current) : -1;
@@ -243,3 +248,3 @@ var elementAfterTrigger = elements && elements[targetIndex + 1];
   function tabbedFromTriggerToPopover() {
-    return triggerRef.current && ownerDocument ? triggerRef.current === ownerDocument.activeElement : false;
+    return triggerRef.current ? triggerRef.current === ownerDocument.activeElement : false;
   }
@@ -257,7 +262,7 @@
   function tabbedOutOfPopover() {
-    var inPopover = popoverRef.current && ownerDocument ? popoverRef.current.contains(ownerDocument.activeElement || null) : false;
+    var inPopover = popoverRef.current ? popoverRef.current.contains(ownerDocument.activeElement || null) : false;
 
     if (inPopover) {
       var elements = popoverRef.current && tabbable__default['default'](popoverRef.current);
-      return Boolean(elements && ownerDocument && elements[elements.length - 1] === ownerDocument.activeElement);
+      return Boolean(elements && elements[elements.length - 1] === ownerDocument.activeElement);
     }
@@ -311,3 +316,3 @@
   function tabbedToBrowserChrome(event) {
-    var elements = ownerDocument && popoverRef.current ? tabbable__default['default'](ownerDocument).filter(function (element) {
+    var elements = popoverRef.current ? tabbable__default['default'](ownerDocument).filter(function (element) {
       return !popoverRef.current.contains(element);
@@ -321,3 +326,3 @@ }) : null;
     // element, and it better not, because the trigger needs to be tabbable!
-    return ownerDocument ? event.target === tabbable__default['default'](ownerDocument)[0] : false;
+    return event.target === tabbable__default['default'](ownerDocument)[0];
   }
@@ -335,3 +340,3 @@
       });
-      ownerDocument && ownerDocument.addEventListener("focusin", enableTabbablesInPopover);
+      ownerDocument.addEventListener("focusin", enableTabbablesInPopover);
     }
@@ -341,3 +346,3 @@ }
   function enableTabbablesInPopover() {
-    ownerDocument && ownerDocument.removeEventListener("focusin", enableTabbablesInPopover);
+    ownerDocument.removeEventListener("focusin", enableTabbablesInPopover);
     restoreTabIndexTuplés.forEach(function (_ref2) {
@@ -349,4 +354,5 @@ var element = _ref2[0],
   }
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
+exports.Popover = Popover;
 exports.default = Popover;
@@ -353,0 +359,0 @@ exports.getCollisions = getCollisions;

dist/popover.cjs.production.min.js

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

dist/popover.esm.js

@@ -1,5 +0,5 @@
-import React, { forwardRef, useRef, useEffect } from 'react';
-import Portal from '@reach/portal';
+import { createElement, useRef, useEffect } from 'react';
+import { Portal } from '@reach/portal';
 import { useRect } from '@reach/rect';
-import { useForkedRef, getOwnerDocument } from '@reach/utils';
+import { forwardRefWithAs, useForkedRef, getOwnerDocument } from '@reach/utils';
 import tabbable from 'tabbable';
@@ -44,4 +44,4 @@
 
-var Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
-  return React.createElement(Portal, null, React.createElement(PopoverImpl, Object.assign({
+var Popover = /*#__PURE__*/forwardRefWithAs(function Popover(props, ref) {
+  return createElement(Portal, null, createElement(PopoverImpl, Object.assign({
     ref: ref
@@ -53,3 +53,3 @@ }, props)));
   Popover.displayName = "Popover";
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
@@ -63,4 +63,7 @@ /**
 
-var PopoverImpl = /*#__PURE__*/forwardRef(function PopoverImpl(_ref, forwardedRef) {
-  var targetRef = _ref.targetRef,
+
+var PopoverImpl = /*#__PURE__*/forwardRefWithAs(function PopoverImpl(_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? "div" : _ref$as,
+      targetRef = _ref.targetRef,
       _ref$position = _ref.position,
@@ -70,10 +73,14 @@ position = _ref$position === void 0 ? positionDefault : _ref$position,
       unstable_observableRefs = _ref$unstable_observa === void 0 ? [] : _ref$unstable_observa,
-      props = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "unstable_observableRefs"]);
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "targetRef", "position", "unstable_observableRefs"]);
 
   var popoverRef = useRef(null);
-  var popoverRect = useRect(popoverRef, !props.hidden);
-  var targetRect = useRect(targetRef, !props.hidden);
+  var popoverRect = useRect(popoverRef, {
+    observe: !props.hidden
+  });
+  var targetRect = useRect(targetRef, {
+    observe: !props.hidden
+  });
   var ref = useForkedRef(popoverRef, forwardedRef);
   useSimulateTabNavigationForReactTree(targetRef, popoverRef);
-  return React.createElement("div", Object.assign({
+  return createElement(Comp, Object.assign({
     "data-reach-popover": "",
@@ -126,2 +133,3 @@ ref: ref
 };
+
 var positionRight = function positionRight(targetRect, popoverRect) {
@@ -139,2 +147,3 @@ if (!targetRect || !popoverRect) {
 };
+
 var positionMatchWidth = function positionMatchWidth(targetRect, popoverRect) {
@@ -150,2 +159,3 @@ if (!targetRect || !popoverRect) {
 };
+
 function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
@@ -183,2 +193,3 @@ if (offsetLeft === void 0) {
 
+
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -212,14 +223,10 @@ var ownerDocument = getOwnerDocument(triggerRef.current);
   useEffect(function () {
-    if (ownerDocument) {
-      ownerDocument.addEventListener("keydown", handleKeyDown);
-      return function () {
-        ownerDocument.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-
-    return; // eslint-disable-next-line react-hooks/exhaustive-deps
+    ownerDocument.addEventListener("keydown", handleKeyDown);
+    return function () {
+      ownerDocument.removeEventListener("keydown", handleKeyDown);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function getElementAfterTrigger() {
-    var elements = ownerDocument && tabbable(ownerDocument);
+    var elements = tabbable(ownerDocument);
     var targetIndex = elements && triggerRef.current ? elements.indexOf(triggerRef.current) : -1;
@@ -231,3 +238,3 @@ var elementAfterTrigger = elements && elements[targetIndex + 1];
   function tabbedFromTriggerToPopover() {
-    return triggerRef.current && ownerDocument ? triggerRef.current === ownerDocument.activeElement : false;
+    return triggerRef.current ? triggerRef.current === ownerDocument.activeElement : false;
   }
@@ -245,7 +252,7 @@
   function tabbedOutOfPopover() {
-    var inPopover = popoverRef.current && ownerDocument ? popoverRef.current.contains(ownerDocument.activeElement || null) : false;
+    var inPopover = popoverRef.current ? popoverRef.current.contains(ownerDocument.activeElement || null) : false;
 
     if (inPopover) {
       var elements = popoverRef.current && tabbable(popoverRef.current);
-      return Boolean(elements && ownerDocument && elements[elements.length - 1] === ownerDocument.activeElement);
+      return Boolean(elements && elements[elements.length - 1] === ownerDocument.activeElement);
     }
@@ -299,3 +306,3 @@
   function tabbedToBrowserChrome(event) {
-    var elements = ownerDocument && popoverRef.current ? tabbable(ownerDocument).filter(function (element) {
+    var elements = popoverRef.current ? tabbable(ownerDocument).filter(function (element) {
       return !popoverRef.current.contains(element);
@@ -309,3 +316,3 @@ }) : null;
     // element, and it better not, because the trigger needs to be tabbable!
-    return ownerDocument ? event.target === tabbable(ownerDocument)[0] : false;
+    return event.target === tabbable(ownerDocument)[0];
   }
@@ -323,3 +330,3 @@
       });
-      ownerDocument && ownerDocument.addEventListener("focusin", enableTabbablesInPopover);
+      ownerDocument.addEventListener("focusin", enableTabbablesInPopover);
     }
@@ -329,3 +336,3 @@ }
   function enableTabbablesInPopover() {
-    ownerDocument && ownerDocument.removeEventListener("focusin", enableTabbablesInPopover);
+    ownerDocument.removeEventListener("focusin", enableTabbablesInPopover);
     restoreTabIndexTuplés.forEach(function (_ref2) {
@@ -337,6 +344,6 @@ var element = _ref2[0],
   }
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
 export default Popover;
-export { getCollisions, positionDefault, positionMatchWidth, positionRight };
+export { Popover, getCollisions, positionDefault, positionMatchWidth, positionRight };
 //# sourceMappingURL=popover.esm.js.map

package.json

 {
   "name": "@reach/popover",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Render a portal positioned relative to another element.",
@@ -16,5 +16,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/portal": "0.11.2",
-    "@reach/rect": "0.11.2",
-    "@reach/utils": "0.11.2",
+    "@reach/portal": "0.12.0",
+    "@reach/rect": "0.12.0",
+    "@reach/utils": "0.12.0",
     "tabbable": "^4.0.0",
@@ -34,3 +34,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "2aa6f03c5eed8c2b7525a29db1c69fe6bc540e5d"
+  "gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
 }

README.md

@@ -6,8 +6,8 @@ # @reach/popover
 ```jsx
-import React, { useRef, useState } from "react";
+import * as React from "react";
 import Popover, { positionDefault } from "@reach/popover";
 
 function Example() {
-  const ref = useRef(null);
-  const [value, setValue] = useState("");
+  const ref = React.useRef(null);
+  const [value, setValue] = React.useState("");
   return (
@@ -20,3 +20,3 @@ <div>
           ref={ref}
-          onChange={event => setValue(event.target.value)}
+          onChange={(event) => setValue(event.target.value)}
         />
@@ -23,0 +23,0 @@ </label>

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

Worsened metrics

Total package byte prevSize

88710

decreased by-1.41%

Lines of code

619

decreased by-1.9%

Dependency changes

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

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

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

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

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

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

• Updated@reach/portal@0.12.0

• Updated@reach/rect@0.12.0

• Updated@reach/utils@0.12.0