@reach/popover - npm Package Compare versions

Comparing version 0.1.0 to 0.3.0-alpha.0

es/index.js

@@ -1,4 +0,4 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,19 +10,15 @@ import React, { useRef, forwardRef, useEffect } from "react";
 import tabbable from "tabbable";
-
 export default forwardRef(function Popover(props, ref) {
-  return React.createElement(
-    Portal,
-    null,
-    React.createElement(PopoverImpl, _extends({ ref: ref }, props))
-  );
-});
+  return React.createElement(Portal, null, React.createElement(PopoverImpl, _extends({
+    ref: ref
+  }, props)));
+}); // Popover is conditionally rendered so we can't start measuring until it shows
+// up, so useRect needs to live down here not up in Popover
 
-// Popover is conditionally rendered so we can't start measuring until it shows
-// up, so useRect needs to live down here not up in Popover
 var PopoverImpl = forwardRef(function PopoverImpl(_ref, forwardedRef) {
   var targetRef = _ref.targetRef,
       _ref$position = _ref.position,
-      position = _ref$position === undefined ? positionDefault : _ref$position,
+      position = _ref$position === void 0 ? positionDefault : _ref$position,
       style = _ref.style,
-      rest = _objectWithoutProperties(_ref, ["targetRef", "position", "style"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "style"]);
 
@@ -32,5 +28,3 @@ var popoverRef = useRef();
   var targetRect = useRect(targetRef);
-
   useSimulateTabNavigationForReactTree(targetRef, popoverRef);
-
   return React.createElement("div", _extends({
@@ -50,5 +44,9 @@ "data-reach-popover": "",
   var needToMeasurePopup = !popoverRect;
+
   if (needToMeasurePopup) {
-    return { visibility: "hidden" };
+    return {
+      visibility: "hidden"
+    };
   }
+
   return position(targetRect, popoverRect);
@@ -67,3 +65,2 @@ };
 }
-
 export function positionMatchWidth(targetRect, popoverRect) {
@@ -78,9 +75,6 @@ var _getCollisions2 = getCollisions(targetRect, popoverRect),
   };
-}
-
-// Finish this another time
+} // Finish this another time
 // export function positionHorizontalCenter(targetRect, popoverRect) {
 //   const targetCenter = targetRect.width / 2 + targetRect.left;
 //   const popoverHalf = popoverRect.width / 2;
-
 //   const collisions = {
@@ -92,3 +86,2 @@ //     right: window.innerWidth < targetCenter - popoverHalf,
 //   };
-
 //   return {
@@ -101,6 +94,11 @@ //     left: collisions.right
 
-function getCollisions(targetRect, popoverRect) {
-  var offsetLeft = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var offsetBottom = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
+  if (offsetLeft === void 0) {
+    offsetLeft = 0;
+  }
 
+  if (offsetBottom === void 0) {
+    offsetBottom = 0;
+  }
+
   var collisions = {
@@ -112,10 +110,9 @@ top: targetRect.top - popoverRect.height < 0,
   };
-
   var directionRight = collisions.right && !collisions.left;
   var directionUp = collisions.bottom && !collisions.top;
-
-  return { directionRight: directionRight, directionUp: directionUp };
-}
-
-// Heads up, my jQuery past haunts this function. This hook scopes the tab
+  return {
+    directionRight: directionRight,
+    directionUp: directionUp
+  };
+} // Heads up, my jQuery past haunts this function. This hook scopes the tab
 // order to the React element tree, instead of the DOM tree. This way, when the
@@ -126,2 +123,4 @@ // user navigates with tab from the targetRef, the tab order moves into the
 // event.target)
+
+
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -158,3 +157,3 @@ var doc = triggerRef.current.ownerDocument; // maybe in devtools
       return doc.removeEventListener("keydown", handleKeyDown);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -171,4 +170,6 @@
   }
+
   function focusFirstPopoverTabbable(event) {
     var elements = tabbable(popoverRef.current);
+
     if (elements[0]) {
@@ -182,2 +183,3 @@ event.preventDefault();
     var inPopover = popoverRef.current.contains(document.activeElement);
+
     if (inPopover) {
@@ -188,4 +190,6 @@ var elements = tabbable(popoverRef.current);
   }
+
   function focusTabbableAfterTrigger(event) {
     var elementAfterTrigger = getElementAfterTrigger();
+
     if (elementAfterTrigger) {
@@ -202,5 +206,7 @@ event.preventDefault();
   }
+
   function focusLastTabbableInPopover(event) {
     var elements = tabbable(popoverRef.current);
     var last = elements[elements.length - 1];
+
     if (last) {
@@ -216,2 +222,3 @@ event.preventDefault();
   }
+
   function focusTriggerRef(event) {
@@ -236,2 +243,3 @@ event.preventDefault();
   var restoreTabIndexTuplés = [];
+
   function disableTabbablesInPopover() {
@@ -245,2 +253,3 @@ var elements = tabbable(popoverRef.current);
   }
+
   function enableTabbablesInPopover(event) {
@@ -251,3 +260,2 @@ doc.removeEventListener("focusin", enableTabbablesInPopover);
           tabIndex = _ref2[1];
-
       element.tabIndex = tabIndex;
@@ -254,0 +262,0 @@ });

index.js

 "use strict";
 
 exports.__esModule = true;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 exports.positionDefault = positionDefault;
 exports.positionMatchWidth = positionMatchWidth;
+exports["default"] = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _portal = _interopRequireDefault(require("@reach/portal"));
 
-var _portal = require("@reach/portal");
-
-var _portal2 = _interopRequireDefault(_portal);
-
 var _rect = require("@reach/rect");
@@ -22,27 +16,29 @@
 
-var _tabbable = require("tabbable");
+var _tabbable = _interopRequireDefault(require("tabbable"));
 
-var _tabbable2 = _interopRequireDefault(_tabbable);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-exports.default = (0, _react.forwardRef)(function Popover(props, ref) {
-  return _react2.default.createElement(
-    _portal2.default,
-    null,
-    _react2.default.createElement(PopoverImpl, _extends({ ref: ref }, props))
-  );
-});
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// Popover is conditionally rendered so we can't start measuring until it shows
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = (0, _react.forwardRef)(function Popover(props, ref) {
+  return _react["default"].createElement(_portal["default"], null, _react["default"].createElement(PopoverImpl, _extends({
+    ref: ref
+  }, props)));
+}); // Popover is conditionally rendered so we can't start measuring until it shows
 // up, so useRect needs to live down here not up in Popover
 
+
+exports["default"] = _default;
 var PopoverImpl = (0, _react.forwardRef)(function PopoverImpl(_ref, forwardedRef) {
   var targetRef = _ref.targetRef,
       _ref$position = _ref.position,
-      position = _ref$position === undefined ? positionDefault : _ref$position,
+      position = _ref$position === void 0 ? positionDefault : _ref$position,
       style = _ref.style,
-      rest = _objectWithoutProperties(_ref, ["targetRef", "position", "style"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "style"]);
 
@@ -52,6 +48,4 @@ var popoverRef = (0, _react.useRef)();
   var targetRect = (0, _rect.useRect)(targetRef);
-
   useSimulateTabNavigationForReactTree(targetRef, popoverRef);
-
-  return _react2.default.createElement("div", _extends({
+  return _react["default"].createElement("div", _extends({
     "data-reach-popover": "",
@@ -70,5 +64,9 @@ ref: function ref(node) {
   var needToMeasurePopup = !popoverRect;
+
   if (needToMeasurePopup) {
-    return { visibility: "hidden" };
+    return {
+      visibility: "hidden"
+    };
   }
+
   return position(targetRect, popoverRect);
@@ -97,9 +95,6 @@ };
   };
-}
-
-// Finish this another time
+} // Finish this another time
 // export function positionHorizontalCenter(targetRect, popoverRect) {
 //   const targetCenter = targetRect.width / 2 + targetRect.left;
 //   const popoverHalf = popoverRect.width / 2;
-
 //   const collisions = {
@@ -111,3 +106,2 @@ //     right: window.innerWidth < targetCenter - popoverHalf,
 //   };
-
 //   return {
@@ -120,6 +114,12 @@ //     left: collisions.right
 
-function getCollisions(targetRect, popoverRect) {
-  var offsetLeft = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var offsetBottom = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
+function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
+  if (offsetLeft === void 0) {
+    offsetLeft = 0;
+  }
+
+  if (offsetBottom === void 0) {
+    offsetBottom = 0;
+  }
+
   var collisions = {
@@ -131,10 +131,9 @@ top: targetRect.top - popoverRect.height < 0,
   };
-
   var directionRight = collisions.right && !collisions.left;
   var directionUp = collisions.bottom && !collisions.top;
-
-  return { directionRight: directionRight, directionUp: directionUp };
-}
-
-// Heads up, my jQuery past haunts this function. This hook scopes the tab
+  return {
+    directionRight: directionRight,
+    directionUp: directionUp
+  };
+} // Heads up, my jQuery past haunts this function. This hook scopes the tab
 // order to the React element tree, instead of the DOM tree. This way, when the
@@ -145,2 +144,4 @@ // user navigates with tab from the targetRef, the tab order moves into the
 // event.target)
+
+
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -150,3 +151,3 @@ var doc = triggerRef.current.ownerDocument; // maybe in devtools
   function handleKeyDown(event) {
-    if (event.key === "Tab" && (0, _tabbable2.default)(popoverRef.current).length === 0) {
+    if (event.key === "Tab" && (0, _tabbable["default"])(popoverRef.current).length === 0) {
       return;
@@ -178,7 +179,7 @@ }
       return doc.removeEventListener("keydown", handleKeyDown);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function getElementAfterTrigger() {
-    var elements = (0, _tabbable2.default)(doc);
+    var elements = (0, _tabbable["default"])(doc);
     var targetIndex = elements.indexOf(triggerRef.current);
@@ -191,4 +192,6 @@ return elements[targetIndex + 1];
   }
+
   function focusFirstPopoverTabbable(event) {
-    var elements = (0, _tabbable2.default)(popoverRef.current);
+    var elements = (0, _tabbable["default"])(popoverRef.current);
+
     if (elements[0]) {
@@ -202,9 +205,12 @@ event.preventDefault();
     var inPopover = popoverRef.current.contains(document.activeElement);
+
     if (inPopover) {
-      var elements = (0, _tabbable2.default)(popoverRef.current);
+      var elements = (0, _tabbable["default"])(popoverRef.current);
       return elements[elements.length - 1] === document.activeElement;
     }
   }
+
   function focusTabbableAfterTrigger(event) {
     var elementAfterTrigger = getElementAfterTrigger();
+
     if (elementAfterTrigger) {
@@ -221,5 +227,7 @@ event.preventDefault();
   }
+
   function focusLastTabbableInPopover(event) {
-    var elements = (0, _tabbable2.default)(popoverRef.current);
+    var elements = (0, _tabbable["default"])(popoverRef.current);
     var last = elements[elements.length - 1];
+
     if (last) {
@@ -232,5 +240,6 @@ event.preventDefault();
   function shiftTabbedOutOfPopover(event) {
-    var elements = (0, _tabbable2.default)(popoverRef.current);
+    var elements = (0, _tabbable["default"])(popoverRef.current);
     return elements.length === 0 ? false : event.target === elements[0];
   }
+
   function focusTriggerRef(event) {
@@ -242,3 +251,3 @@ event.preventDefault();
   function tabbedToBrowserChrome(event) {
-    var elements = (0, _tabbable2.default)(doc).filter(function (element) {
+    var elements = (0, _tabbable["default"])(doc).filter(function (element) {
       return !popoverRef.current.contains(element);
@@ -252,8 +261,9 @@ });
     // element, and it better not, because the trigger needs to be tabbable!
-    return event.target === (0, _tabbable2.default)(doc)[0];
+    return event.target === (0, _tabbable["default"])(doc)[0];
   }
 
   var restoreTabIndexTuplés = [];
+
   function disableTabbablesInPopover() {
-    var elements = (0, _tabbable2.default)(popoverRef.current);
+    var elements = (0, _tabbable["default"])(popoverRef.current);
     elements.forEach(function (element) {
@@ -265,2 +275,3 @@ restoreTabIndexTuplés.push([element, element.tabIndex]);
   }
+
   function enableTabbablesInPopover(event) {
@@ -271,3 +282,2 @@ doc.removeEventListener("focusin", enableTabbablesInPopover);
           tabIndex = _ref2[1];
-
       element.tabIndex = tabIndex;
@@ -274,0 +284,0 @@ });

package.json

 {
   "name": "@reach/popover",
-  "version": "0.1.0",
+  "version": "0.3.0-alpha.0",
   "description": "Render a portal positioned relative to another element.",
@@ -8,3 +8,2 @@ "main": "index.js",
   "scripts": {
-    "test": "echo \"Write some tests you bum!\"",
     "build": "node ../../shared/build-package",
@@ -14,5 +13,5 @@ "lint": "eslint . --max-warnings=0"
   "dependencies": {
-    "@reach/portal": "^0.2.1",
-    "@reach/rect": "^0.2.1",
-    "@reach/utils": "^0.2.3",
+    "@reach/portal": "^0.3.0-alpha.0",
+    "@reach/rect": "^0.3.0-alpha.0",
+    "@reach/utils": "^0.3.0-alpha.0",
     "tabbable": "^4.0.0"
@@ -24,3 +23,3 @@ },
   },
-  "author": "",
+  "author": "Ryan Florence <@ryanflorence>",
   "license": "MIT",
@@ -33,3 +32,4 @@ "files": [
     "styles.css"
-  ]
+  ],
+  "gitHead": "3234e9cf2a55f51c31ac5a7d883d34d6be6f033d"
 }

src/index.js

@@ -154,2 +154,3 @@ import React, { useRef, forwardRef, useEffect } from "react";
     return () => doc.removeEventListener("keydown", handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -156,0 +157,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28249

increased by9.54%

Number of package files

5

increased by25%

Lines of code

648

increased by2.53%

Number of low maintenance alerts

1

decreased by-50%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@reach/component-component@0.3.0(transitive)

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

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

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

• - Removed@reach/component-component@0.1.3(transitive)

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

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

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

• Updated@reach/portal@^0.3.0-alpha.0

• Updated@reach/rect@^0.3.0-alpha.0

• Updated@reach/utils@^0.3.0-alpha.0