@reach/popover - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

dist/index.d.ts

@@ -13,2 +13,10 @@ /**
     position?: Position | 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>>;
@@ -19,6 +27,22 @@ export declare type PopoverProps = {
     position?: Position;
+    /**
+     * 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>[];
 } & React.HTMLAttributes<HTMLDivElement>;
 export default Popover;
 export declare const positionDefault: Position;
+export declare const positionRight: Position;
 export declare const positionMatchWidth: Position;
-export declare type Position = (targetRect?: PRect | null, popoverRect?: PRect | null) => React.CSSProperties;
+export declare function getCollisions(targetRect: PRect, popoverRect: PRect, offsetLeft?: number, offsetBottom?: number): {
+    directionRight: boolean;
+    directionLeft: boolean;
+    directionUp: boolean;
+    directionDown: boolean;
+};
+export declare type Position = (targetRect?: PRect | null, popoverRect?: PRect | null, ...unstable_observableNodes: PossibleNode[]) => React.CSSProperties;
+declare type PossibleNode = null | undefined | HTMLElement | SVGElement;

dist/popover.cjs.development.js

@@ -72,4 +72,5 @@ 'use strict';
       position = _ref$position === void 0 ? positionDefault : _ref$position,
-      style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "style"]);
+      _ref$unstable_observa = _ref.unstable_observableRefs,
+      unstable_observableRefs = _ref$unstable_observa === void 0 ? [] : _ref$unstable_observa,
+      props = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "unstable_observableRefs"]);
 
@@ -83,7 +84,8 @@ var popoverRef = React.useRef(null);
     "data-reach-popover": "",
-    ref: ref,
-    style: _extends({}, style, {
+    ref: ref
+  }, props, {
+    style: _extends({
       position: "absolute"
-    }, getStyles(position, targetRect, popoverRect))
-  }, rest));
+    }, getStyles.apply(void 0, [position, targetRect, popoverRect].concat(unstable_observableRefs)), {}, props.style)
+  }));
 });
@@ -105,5 +107,20 @@
 
-  return position(targetRect, popoverRect);
+  for (var _len = arguments.length, unstable_observableRefs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    unstable_observableRefs[_key - 3] = arguments[_key];
+  }
+
+  return position.apply(void 0, [targetRect, popoverRect].concat(unstable_observableRefs.map(function (ref) {
+    return ref.current;
+  })));
 }
 
+function getTopPosition(targetRect, popoverRect) {
+  var _getCollisions = getCollisions(targetRect, popoverRect),
+      directionUp = _getCollisions.directionUp;
+
+  return {
+    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
+  };
+}
+
 var positionDefault = function positionDefault(targetRect, popoverRect) {
@@ -114,11 +131,21 @@ if (!targetRect || !popoverRect) {
 
-  var _getCollisions = getCollisions(targetRect, popoverRect),
-      directionUp = _getCollisions.directionUp,
-      directionRight = _getCollisions.directionRight;
+  var _getCollisions2 = getCollisions(targetRect, popoverRect),
+      directionRight = _getCollisions2.directionRight;
 
-  return {
-    left: directionRight ? targetRect.right - popoverRect.width + window.pageXOffset + "px" : targetRect.left + window.pageXOffset + "px",
-    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
-  };
+  return _extends({
+    left: directionRight ? targetRect.right - popoverRect.width + window.pageXOffset + "px" : targetRect.left + window.pageXOffset + "px"
+  }, getTopPosition(targetRect, popoverRect));
 };
+var positionRight = function positionRight(targetRect, popoverRect) {
+  if (!targetRect || !popoverRect) {
+    return {};
+  }
+
+  var _getCollisions3 = getCollisions(targetRect, popoverRect),
+      directionLeft = _getCollisions3.directionLeft;
+
+  return _extends({
+    left: directionLeft ? targetRect.left + window.pageXOffset + "px" : targetRect.right - popoverRect.width + window.pageXOffset + "px"
+  }, getTopPosition(targetRect, popoverRect));
+};
 var positionMatchWidth = function positionMatchWidth(targetRect, popoverRect) {
@@ -129,12 +156,7 @@ if (!targetRect || !popoverRect) {
 
-  var _getCollisions2 = getCollisions(targetRect, popoverRect),
-      directionUp = _getCollisions2.directionUp;
-
-  return {
+  return _extends({
     width: targetRect.width,
-    left: targetRect.left,
-    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
-  };
+    left: targetRect.left
+  }, getTopPosition(targetRect, popoverRect));
 };
-
 function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
@@ -156,6 +178,10 @@ if (offsetLeft === void 0) {
   var directionRight = collisions.right && !collisions.left;
+  var directionLeft = collisions.left && !collisions.right;
   var directionUp = collisions.bottom && !collisions.top;
+  var directionDown = collisions.top && !collisions.bottom;
   return {
     directionRight: directionRight,
-    directionUp: directionUp
+    directionLeft: directionLeft,
+    directionUp: directionUp,
+    directionDown: directionDown
   };
@@ -169,3 +195,2 @@ } // Heads up, my jQuery past haunts this function. This hook scopes the tab
 
-
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -319,4 +344,6 @@ var ownerDocument = utils.getOwnerDocument(triggerRef.current);
 exports.default = Popover;
+exports.getCollisions = getCollisions;
 exports.positionDefault = positionDefault;
 exports.positionMatchWidth = positionMatchWidth;
+exports.positionRight = positionRight;
 //# sourceMappingURL=popover.cjs.development.js.map

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

dist/popover.esm.js

@@ -65,4 +65,5 @@ import React, { forwardRef, useRef, useEffect } from 'react';
       position = _ref$position === void 0 ? positionDefault : _ref$position,
-      style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "style"]);
+      _ref$unstable_observa = _ref.unstable_observableRefs,
+      unstable_observableRefs = _ref$unstable_observa === void 0 ? [] : _ref$unstable_observa,
+      props = _objectWithoutPropertiesLoose(_ref, ["targetRef", "position", "unstable_observableRefs"]);
 
@@ -76,7 +77,8 @@ var popoverRef = useRef(null);
     "data-reach-popover": "",
-    ref: ref,
-    style: _extends({}, style, {
+    ref: ref
+  }, props, {
+    style: _extends({
       position: "absolute"
-    }, getStyles(position, targetRect, popoverRect))
-  }, rest));
+    }, getStyles.apply(void 0, [position, targetRect, popoverRect].concat(unstable_observableRefs)), {}, props.style)
+  }));
 });
@@ -98,5 +100,20 @@
 
-  return position(targetRect, popoverRect);
+  for (var _len = arguments.length, unstable_observableRefs = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+    unstable_observableRefs[_key - 3] = arguments[_key];
+  }
+
+  return position.apply(void 0, [targetRect, popoverRect].concat(unstable_observableRefs.map(function (ref) {
+    return ref.current;
+  })));
 }
 
+function getTopPosition(targetRect, popoverRect) {
+  var _getCollisions = getCollisions(targetRect, popoverRect),
+      directionUp = _getCollisions.directionUp;
+
+  return {
+    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
+  };
+}
+
 var positionDefault = function positionDefault(targetRect, popoverRect) {
@@ -107,11 +124,21 @@ if (!targetRect || !popoverRect) {
 
-  var _getCollisions = getCollisions(targetRect, popoverRect),
-      directionUp = _getCollisions.directionUp,
-      directionRight = _getCollisions.directionRight;
+  var _getCollisions2 = getCollisions(targetRect, popoverRect),
+      directionRight = _getCollisions2.directionRight;
 
-  return {
-    left: directionRight ? targetRect.right - popoverRect.width + window.pageXOffset + "px" : targetRect.left + window.pageXOffset + "px",
-    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
-  };
+  return _extends({
+    left: directionRight ? targetRect.right - popoverRect.width + window.pageXOffset + "px" : targetRect.left + window.pageXOffset + "px"
+  }, getTopPosition(targetRect, popoverRect));
 };
+var positionRight = function positionRight(targetRect, popoverRect) {
+  if (!targetRect || !popoverRect) {
+    return {};
+  }
+
+  var _getCollisions3 = getCollisions(targetRect, popoverRect),
+      directionLeft = _getCollisions3.directionLeft;
+
+  return _extends({
+    left: directionLeft ? targetRect.left + window.pageXOffset + "px" : targetRect.right - popoverRect.width + window.pageXOffset + "px"
+  }, getTopPosition(targetRect, popoverRect));
+};
 var positionMatchWidth = function positionMatchWidth(targetRect, popoverRect) {
@@ -122,12 +149,7 @@ if (!targetRect || !popoverRect) {
 
-  var _getCollisions2 = getCollisions(targetRect, popoverRect),
-      directionUp = _getCollisions2.directionUp;
-
-  return {
+  return _extends({
     width: targetRect.width,
-    left: targetRect.left,
-    top: directionUp ? targetRect.top - popoverRect.height + window.pageYOffset + "px" : targetRect.top + targetRect.height + window.pageYOffset + "px"
-  };
+    left: targetRect.left
+  }, getTopPosition(targetRect, popoverRect));
 };
-
 function getCollisions(targetRect, popoverRect, offsetLeft, offsetBottom) {
@@ -149,6 +171,10 @@ if (offsetLeft === void 0) {
   var directionRight = collisions.right && !collisions.left;
+  var directionLeft = collisions.left && !collisions.right;
   var directionUp = collisions.bottom && !collisions.top;
+  var directionDown = collisions.top && !collisions.bottom;
   return {
     directionRight: directionRight,
-    directionUp: directionUp
+    directionLeft: directionLeft,
+    directionUp: directionUp,
+    directionDown: directionDown
   };
@@ -162,3 +188,2 @@ } // Heads up, my jQuery past haunts this function. This hook scopes the tab
 
-
 function useSimulateTabNavigationForReactTree(triggerRef, popoverRef) {
@@ -312,3 +337,3 @@ var ownerDocument = getOwnerDocument(triggerRef.current);
 export default Popover;
-export { positionDefault, positionMatchWidth };
+export { getCollisions, positionDefault, positionMatchWidth, positionRight };
 //# sourceMappingURL=popover.esm.js.map

package.json

 {
   "name": "@reach/popover",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Render a portal positioned relative to another element.",
@@ -16,7 +16,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/portal": "^0.10.0",
-    "@reach/rect": "^0.10.0",
-    "@reach/utils": "^0.10.0",
+    "@reach/portal": "^0.10.1",
+    "@reach/rect": "^0.10.1",
+    "@reach/utils": "^0.10.1",
     "tabbable": "^4.0.0",
-    "tslib": "^1.10.0"
+    "tslib": "^1.11.1"
   },
@@ -34,3 +34,3 @@ "peerDependencies": {
   ],
-  "gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
+  "gitHead": "c279bc0fb9ae84aa77306c5f1a9909d088bc665c"
 }

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

86964

increased by13.16%

Lines of code

620

increased by13.55%

Dependency changes

• Updated@reach/portal@^0.10.1

• Updated@reach/rect@^0.10.1

• Updated@reach/utils@^0.10.1

• Updatedtslib@^1.11.1