@codastic/react-positioning-portal - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

CHANGELOG.md

 
+### v0.4.0 / 2021-09-01 09:33:49
+
+- Fix root scroll parent handling on window (i: Mario Volke, r: Korbinian Fritsch, c: [f994082](https://github.com/codastic/react-positioning-portal/commit/f994082))
+- Fix handleClickOutside for nested Positioning Portals (i: Korbinian Fritsch, r: Mario Volke, c: [1fc41af](https://github.com/codastic/react-positioning-portal/commit/1fc41af))
+
 ### v0.3.2 / 2020-05-11 12:13:44
@@ -3,0 +8,0 @@

lib/components/PositioningPortal.d.ts

@@ -44,3 +44,3 @@ import * as React from 'react';
     shouldRender: boolean;
-    scrollParents: HTMLElement[];
+    scrollParents: Array<HTMLElement | Window>;
     strategy?: Strategy;
@@ -70,2 +70,3 @@ }
     private onClose;
+    private markClickEvent;
     private preRenderPortal;
@@ -72,0 +73,0 @@ private finalRenderPortal;

lib/index.js

@@ -77,3 +77,3 @@ import { createElement, Fragment, cloneElement, createRef, Component, useState } from 'react';
     if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-        return __spreadArrays(scrollParents, [window.document.body]);
+        return __spreadArrays(scrollParents, [window]);
     }
@@ -138,2 +138,3 @@ return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArrays(scrollParents, [element]) : scrollParents);
 };
+var EVENT_CONTEXT_KEY = 'PositioningPortal-context';
 var PositioningPortal = /** @class */ (function (_super) {
@@ -178,2 +179,5 @@ __extends(PositioningPortal, _super);
             }
+            if ((event[EVENT_CONTEXT_KEY] || []).includes(_this)) {
+                return;
+            }
             var parentDom = findDOMNode(_this);
@@ -218,2 +222,7 @@ if (parentDom && parentDom.contains(event.target)) {
         };
+        _this.markClickEvent = function (event) {
+            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArrays((event.nativeEvent[EVENT_CONTEXT_KEY] || []), [
+                _this
+            ]);
+        };
         _this.preRenderPortal = function () {
@@ -315,3 +324,4 @@ return new Promise(function (resolve) {
                 ref: _this.portalRef,
-                style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {}))
+                style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {})),
+                onClick: _this.markClickEvent
             }, renderProps(portalContent, {
@@ -318,0 +328,0 @@ close: _this.close,

lib/legacy/index.js/components/PositioningPortal.d.ts

@@ -44,3 +44,3 @@ import * as React from 'react';
     shouldRender: boolean;
-    scrollParents: HTMLElement[];
+    scrollParents: Array<HTMLElement | Window>;
     strategy?: Strategy;
@@ -70,2 +70,3 @@ }
     private onClose;
+    private markClickEvent;
     private preRenderPortal;
@@ -72,0 +73,0 @@ private finalRenderPortal;

lib/legacy/index.js/index.js

@@ -81,3 +81,3 @@ 'use strict';
     if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-        return __spreadArrays(scrollParents, [window.document.body]);
+        return __spreadArrays(scrollParents, [window]);
     }
@@ -142,2 +142,3 @@ return getScrollParents(element.parentElement, isScrollParent(element) ? __spreadArrays(scrollParents, [element]) : scrollParents);
 };
+var EVENT_CONTEXT_KEY = 'PositioningPortal-context';
 var PositioningPortal = /** @class */ (function (_super) {
@@ -182,2 +183,5 @@ __extends(PositioningPortal, _super);
             }
+            if ((event[EVENT_CONTEXT_KEY] || []).includes(_this)) {
+                return;
+            }
             var parentDom = ReactDOM.findDOMNode(_this);
@@ -222,2 +226,7 @@ if (parentDom && parentDom.contains(event.target)) {
         };
+        _this.markClickEvent = function (event) {
+            event.nativeEvent[EVENT_CONTEXT_KEY] = __spreadArrays((event.nativeEvent[EVENT_CONTEXT_KEY] || []), [
+                _this
+            ]);
+        };
         _this.preRenderPortal = function () {
@@ -319,3 +328,4 @@ return new Promise(function (resolve) {
                 ref: _this.portalRef,
-                style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {}))
+                style: __assign(__assign({}, portalStyle), ((portalElement && portalElement.props.style) || {})),
+                onClick: _this.markClickEvent
             }, renderProps(portalContent, {
@@ -322,0 +332,0 @@ close: _this.close,

lib/legacy/index.js/services/scroll-parents.d.ts

@@ -1,2 +0,1 @@
-export declare function getScrollParent(element: HTMLElement): HTMLElement;
-export default function getScrollParents(element: HTMLElement, scrollParents?: HTMLElement[]): HTMLElement[];
+export default function getScrollParents(element: HTMLElement, scrollParents?: Array<HTMLElement | Window>): Array<HTMLElement | Window>;

lib/services/scroll-parents.d.ts

@@ -1,2 +0,1 @@
-export declare function getScrollParent(element: HTMLElement): HTMLElement;
-export default function getScrollParents(element: HTMLElement, scrollParents?: HTMLElement[]): HTMLElement[];
+export default function getScrollParents(element: HTMLElement, scrollParents?: Array<HTMLElement | Window>): Array<HTMLElement | Window>;

package.json

 {
   "name": "@codastic/react-positioning-portal",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "The positioning portal is a low level React component to build all kinds of absolutely positioned flyouts which are anchored to another element in the viewport. This can be used to create dropdowns, tooltips, context menus, etc.",
@@ -5,0 +5,0 @@ "scripts": {

src/services/scroll-parents.ts

@@ -12,18 +12,8 @@ const DEFAULT_SCROLL_PARENT = 'BODY';
 
-export function getScrollParent(element: HTMLElement): HTMLElement {
-  if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-    return window.document.body;
-  }
-  if (isScrollParent(element)) {
-    return element;
-  }
-  return getScrollParent(element.parentElement);
-}
-
 export default function getScrollParents(
   element: HTMLElement,
-  scrollParents: HTMLElement[] = []
-): HTMLElement[] {
+  scrollParents: Array<HTMLElement | Window> = []
+): Array<HTMLElement | Window> {
   if (!element || element.tagName === DEFAULT_SCROLL_PARENT) {
-    return [...scrollParents, window.document.body];
+    return [...scrollParents, window];
   }
@@ -30,0 +20,0 @@

No alert changes

Improved metrics

Total package byte prevSize

91176

increased by1.7%

Lines of code

2173

increased by1.54%

No dependency changes