react-tiny-popover - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1

dist/index.d.ts

@@ -0,1 +1,3 @@
+import { Ref, MutableRefObject, CSSProperties, FC } from 'react';
+
 export interface ContentLocation {
@@ -63,3 +65,3 @@ top: number;
   reposition?: boolean;
-  ref?: React.Ref<HTMLElement>;
+  ref?: Ref<HTMLElement>;
   containerClassName?: string;
@@ -80,2 +82,3 @@ parentElement?: HTMLElement;
   parentRect?: ClientRect;
+  scoutRect?: ClientRect;
   parentRectAdjusted?: ClientRect;
@@ -87,7 +90,16 @@ boundaryRect?: ClientRect;
 
-export type UsePopoverResult = readonly [PositionPopover, React.MutableRefObject<HTMLDivElement>];
+export type PopoverRefs = {
+  popoverRef: MutableRefObject<HTMLDivElement>;
+  scoutRef: MutableRefObject<HTMLDivElement>;
+};
 
+export type UsePopoverResult = {
+  positionPopover: PositionPopover;
+  popoverRef: MutableRefObject<HTMLDivElement>;
+  scoutRef: MutableRefObject<HTMLDivElement>;
+};
+
 export interface UseArrowContainerResult {
-  arrowStyle: React.CSSProperties;
-  arrowContainerStyle: React.CSSProperties;
+  arrowStyle: CSSProperties;
+  arrowContainerStyle: CSSProperties;
 }
@@ -98,3 +110,3 @@
 
-export const Popover: React.FC<PopoverProps>;
-export const ArrowContainer: React.FC<ArrowContainerProps>;
+export const Popover: FC<PopoverProps>;
+export const ArrowContainer: FC<ArrowContainerProps>;

dist/Popover.js

@@ -60,3 +60,3 @@ "use strict";
         onPositionPopover: onPositionPopover,
-    }), positionPopover = _l[0], popoverRef = _l[1];
+    }), positionPopover = _l.positionPopover, popoverRef = _l.popoverRef, scoutRef = _l.scoutRef;
     react_1.useLayoutEffect(function () {
@@ -175,3 +175,3 @@ var shouldUpdate = true;
             return null;
-        return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, container: parentElement }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0));
+        return (jsx_runtime_1.jsx(PopoverPortal_1.PopoverPortal, __assign({ element: popoverRef.current, scoutElement: scoutRef.current, container: parentElement }, { children: typeof content === 'function' ? content(popoverState) : content }), void 0));
     };
@@ -178,0 +178,0 @@ return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderChild(), renderPopover()] }, void 0));

dist/PopoverPortal.js

@@ -7,7 +7,9 @@ "use strict";
 var PopoverPortal = function (_a) {
-    var container = _a.container, element = _a.element, children = _a.children;
+    var container = _a.container, element = _a.element, scoutElement = _a.scoutElement, children = _a.children;
     react_1.useLayoutEffect(function () {
         container.appendChild(element);
+        container.appendChild(scoutElement);
         return function () {
             container.removeChild(element);
+            container.removeChild(scoutElement);
         };
@@ -14,0 +16,0 @@ }, [container, element]);

dist/usePopover.js

@@ -15,7 +15,15 @@ "use strict";
     });
+    var scoutRef = useElementRef_1.useElementRef('react-tiny-popover-scout', {
+        position: 'fixed',
+        top: '0px',
+        left: '0px',
+        width: '0px',
+        height: '0px',
+        visibility: 'hidden',
+    });
     var positionPopover = react_1.useCallback(function (_a) {
-        var _b;
-        var _c = _a === void 0 ? {} : _a, _d = _c.positionIndex, positionIndex = _d === void 0 ? 0 : _d, _e = _c.parentRect, parentRect = _e === void 0 ? parentElement.getBoundingClientRect() : _e, _f = _c.parentRectAdjusted, parentRectAdjusted = _f === void 0 ? util_1.getBoundingRectNeglectingPositionalTransform(parentElement) : _f, _g = _c.childRect, childRect = _g === void 0 ? (_b = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : _g, _h = _c.popoverRect, popoverRect = _h === void 0 ? popoverRef.current.getBoundingClientRect() : _h, _j = _c.boundaryRect, boundaryRect = _j === void 0 ? boundaryElement === parentElement
+        var _b, _c;
+        var _d = _a === void 0 ? {} : _a, _e = _d.positionIndex, positionIndex = _e === void 0 ? 0 : _e, _f = _d.parentRect, parentRect = _f === void 0 ? parentElement.getBoundingClientRect() : _f, _g = _d.childRect, childRect = _g === void 0 ? (_b = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : _g, _h = _d.scoutRect, scoutRect = _h === void 0 ? (_c = scoutRef === null || scoutRef === void 0 ? void 0 : scoutRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect() : _h, _j = _d.popoverRect, popoverRect = _j === void 0 ? popoverRef.current.getBoundingClientRect() : _j, _k = _d.boundaryRect, boundaryRect = _k === void 0 ? boundaryElement === parentElement
             ? parentRect
-            : boundaryElement.getBoundingClientRect() : _j;
+            : boundaryElement.getBoundingClientRect() : _k;
         if (!childRect || !parentRect) {
@@ -25,3 +33,3 @@ return;
         if (contentLocation) {
-            var _k = typeof contentLocation === 'function'
+            var _l = typeof contentLocation === 'function'
                 ? contentLocation({
@@ -37,6 +45,6 @@ childRect: childRect,
                 })
-                : contentLocation, inputTop = _k.top, inputLeft = _k.left;
+                : contentLocation, inputTop = _l.top, inputLeft = _l.left;
             var left_1 = parentRect.left + inputLeft;
             var top_1 = parentRect.top + inputTop;
-            popoverRef.current.style.transform = "translate(" + left_1 + "px, " + top_1 + "px)";
+            popoverRef.current.style.transform = "translate(" + (left_1 - scoutRect.left) + "px, " + (top_1 - scoutRect.top) + "px)";
             onPositionPopover({
@@ -56,7 +64,5 @@ childRect: childRect,
         var position = isExhausted ? positions[0] : positions[positionIndex];
-        var _l = util_1.getNewPopoverRect({
+        var _m = util_1.getNewPopoverRect({
             childRect: childRect,
             popoverRect: popoverRect,
-            parentRect: parentRect,
-            parentRectAdjusted: parentRectAdjusted,
             boundaryRect: boundaryRect,
@@ -67,3 +73,3 @@ position: position,
             reposition: reposition,
-        }, boundaryInset), rect = _l.rect, boundaryViolation = _l.boundaryViolation;
+        }, boundaryInset), rect = _m.rect, boundaryViolation = _m.boundaryViolation;
         if (boundaryViolation && reposition && !isExhausted) {
@@ -75,3 +81,2 @@ positionPopover({
                 parentRect: parentRect,
-                parentRectAdjusted: parentRectAdjusted,
                 boundaryRect: boundaryRect,
@@ -83,3 +88,3 @@ });
         var shouldNudge = reposition && !isExhausted;
-        var _m = util_1.getNudgedPopoverRect(rect, boundaryRect, boundaryInset), nudgedLeft = _m.left, nudgedTop = _m.top;
+        var _o = util_1.getNudgedPopoverRect(rect, boundaryRect, boundaryInset), nudgedLeft = _o.left, nudgedTop = _o.top;
         var finalTop = top;
@@ -91,3 +96,3 @@ var finalLeft = left;
         }
-        popoverRef.current.style.transform = "translate(" + finalLeft + "px, " + finalTop + "px)";
+        popoverRef.current.style.transform = "translate(" + (finalLeft - scoutRect.left) + "px, " + (finalTop - scoutRect.top) + "px)";
         onPositionPopover({
@@ -125,5 +130,9 @@ childRect: childRect,
     ]);
-    return [positionPopover, popoverRef];
+    return {
+        positionPopover: positionPopover,
+        popoverRef: popoverRef,
+        scoutRef: scoutRef,
+    };
 };
 exports.usePopover = usePopover;
 //# sourceMappingURL=usePopover.js.map

dist/util.js

@@ -138,22 +138,5 @@ "use strict";
 exports.popoverRectForPosition = popoverRectForPosition;
-var subtractRect = function (a, b) { return ({
-    width: a.width,
-    height: a.height,
-    bottom: Math.floor(a.bottom - b.bottom),
-    left: Math.floor(a.left - b.left),
-    right: Math.floor(a.right - b.right),
-    top: Math.floor(a.top - b.top),
-}); };
-var addRect = function (a, b) { return ({
-    width: a.width,
-    height: a.height,
-    bottom: Math.floor(a.bottom + b.bottom),
-    left: Math.floor(a.left + b.left),
-    right: Math.floor(a.right + b.right),
-    top: Math.floor(a.top + b.top),
-}); };
 var getNewPopoverRect = function (_a, boundaryInset) {
-    var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, parentRect = _a.parentRect, parentRectAdjusted = _a.parentRectAdjusted, boundaryRect = _a.boundaryRect, padding = _a.padding, reposition = _a.reposition;
-    var offset = subtractRect(parentRectAdjusted, parentRect);
-    var rect = exports.popoverRectForPosition(position, addRect(childRect, offset), popoverRect, padding, align);
+    var position = _a.position, align = _a.align, childRect = _a.childRect, popoverRect = _a.popoverRect, boundaryRect = _a.boundaryRect, padding = _a.padding, reposition = _a.reposition;
+    var rect = exports.popoverRectForPosition(position, childRect, popoverRect, padding, align);
     var boundaryViolation = reposition &&
@@ -160,0 +143,0 @@ ((position === 'top' && rect.top < boundaryRect.top + boundaryInset) ||

package.json

 {
   "name": "react-tiny-popover",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "A simple and highly customizable popover react higher order component with no other dependencies! Typescript friendly.",
@@ -11,3 +11,4 @@ "keywords": [
     "pop",
-    "out"
+    "out",
+    "modal"
   ],
@@ -49,4 +50,2 @@ "repository": {
     "prettier": "^2.0.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "tsc-watch": "^4.0.0",
@@ -53,0 +52,0 @@ "typescript": "4.3.5"

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

Dev dependency count

18

decreased by-10%

Lines of code

757

increased by0.53%

Worsened metrics

Total package byte prevSize

115708

decreased by-1.31%

Number of package files

20

decreased by-4.76%

No dependency changes