@fluentui/react-utilities - npm Package Compare versions

Comparing version 9.0.0-alpha.24 to 9.0.0-alpha.25

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Fri, 21 May 2021 07:31:18 GMT",
+      "date": "Wed, 26 May 2021 07:32:22 GMT",
+      "tag": "@fluentui/react-utilities_v9.0.0-alpha.25",
+      "version": "9.0.0-alpha.25",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "useOnClickOutside, workaround for facebook/react#20074",
+            "author": "[e-mail]",
+            "commit": "6ffca36c9537a1852d8ec26478b8b7aeb059e17c",
+            "package": "@fluentui/react-utilities"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 21 May 2021 07:34:54 GMT",
       "tag": "@fluentui/react-utilities_v9.0.0-alpha.24",
@@ -8,0 +23,0 @@ "version": "9.0.0-alpha.24",

CHANGELOG.md

 # Change Log - @fluentui/react-utilities
 
-This log was last generated on Fri, 21 May 2021 07:31:18 GMT and should not be manually modified.
+This log was last generated on Wed, 26 May 2021 07:32:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.25)
+
+Wed, 26 May 2021 07:32:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.24..@fluentui/react-utilities_v9.0.0-alpha.25)
+
+### Changes
+
+- useOnClickOutside, workaround for facebook/react#20074 ([PR #18323](https://github.com/microsoft/fluentui/pull/18323) by [e-mail])
+
 ## [9.0.0-alpha.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-utilities_v9.0.0-alpha.24)
 
-Fri, 21 May 2021 07:31:18 GMT 
+Fri, 21 May 2021 07:34:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-utilities_v9.0.0-alpha.23..@fluentui/react-utilities_v9.0.0-alpha.24)
@@ -11,0 +20,0 @@

lib-amd/hooks/useOnClickOutside.js

@@ -10,2 +10,3 @@ define(["require", "exports", "react", "./useEventCallback"], function (require, exports, React, useEventCallback_1) {
         var refs = options.refs, callback = options.callback, element = options.element, disabled = options.disabled, containsProp = options.contains;
+        var timeoutId = React.useRef(undefined);
         var listener = useEventCallback_1.useEventCallback(function (ev) {
@@ -19,9 +20,27 @@ var contains = containsProp || (function (parent, child) { return !!(parent === null || parent === void 0 ? void 0 : parent.contains(child)); });
         React.useEffect(function () {
+            // Store the current event to avoid triggering handlers immediately
+            // Note this depends on a deprecated but extremely well supported quirk of the web platform
+            // https://github.com/facebook/react/issues/20074
+            var currentEvent = getWindowEvent(window);
+            var conditionalHandler = function (event) {
+                // Skip if this event is the same as the one running when we added the handlers
+                if (event === currentEvent) {
+                    currentEvent = undefined;
+                    return;
+                }
+                listener(event);
+            };
             if (!disabled) {
-                element === null || element === void 0 ? void 0 : element.addEventListener('click', listener);
-                element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', listener);
+                element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler);
+                element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler);
             }
+            // Garbage collect this event after it's no longer useful to avoid memory leaks
+            timeoutId.current = setTimeout(function () {
+                currentEvent = undefined;
+            }, 1);
             return function () {
-                element === null || element === void 0 ? void 0 : element.removeEventListener('click', listener);
-                element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', listener);
+                element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler);
+                element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler);
+                clearTimeout(timeoutId.current);
+                currentEvent = undefined;
             };
@@ -31,3 +50,15 @@ }, [listener, element, disabled]);
     exports.useOnClickOutside = useOnClickOutside;
+    var getWindowEvent = function (target) {
+        var _a, _b, _c;
+        if (target) {
+            if (typeof target.window === 'object' && target.window === target) {
+                // eslint-disable-next-line deprecation/deprecation
+                return target.event;
+            }
+            // eslint-disable-next-line deprecation/deprecation
+            return (_c = (_b = (_a = target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.event) !== null && _c !== void 0 ? _c : undefined;
+        }
+        return undefined;
+    };
 });
 //# sourceMappingURL=useOnClickOutside.js.map

lib-commonjs/hooks/useOnClickOutside.js

@@ -22,2 +22,3 @@ "use strict";
       containsProp = options.contains;
+  var timeoutId = React.useRef(undefined);
   var listener = useEventCallback_1.useEventCallback(function (ev) {
@@ -37,10 +38,31 @@ var contains = containsProp || function (parent, child) {
   React.useEffect(function () {
+    // Store the current event to avoid triggering handlers immediately
+    // Note this depends on a deprecated but extremely well supported quirk of the web platform
+    // https://github.com/facebook/react/issues/20074
+    var currentEvent = getWindowEvent(window);
+
+    var conditionalHandler = function (event) {
+      // Skip if this event is the same as the one running when we added the handlers
+      if (event === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+
+      listener(event);
+    };
+
     if (!disabled) {
-      element === null || element === void 0 ? void 0 : element.addEventListener('click', listener);
-      element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', listener);
-    }
+      element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler);
+      element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler);
+    } // Garbage collect this event after it's no longer useful to avoid memory leaks
 
+
+    timeoutId.current = setTimeout(function () {
+      currentEvent = undefined;
+    }, 1);
     return function () {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('click', listener);
-      element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', listener);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler);
+      clearTimeout(timeoutId.current);
+      currentEvent = undefined;
     };
@@ -51,2 +73,18 @@ }, [listener, element, disabled]);
 exports.useOnClickOutside = useOnClickOutside;
+
+var getWindowEvent = function (target) {
+  var _a, _b, _c;
+
+  if (target) {
+    if (typeof target.window === 'object' && target.window === target) {
+      // eslint-disable-next-line deprecation/deprecation
+      return target.event;
+    } // eslint-disable-next-line deprecation/deprecation
+
+
+    return (_c = (_b = (_a = target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.event) !== null && _c !== void 0 ? _c : undefined;
+  }
+
+  return undefined;
+};
 //# sourceMappingURL=useOnClickOutside.js.map

lib/hooks/useOnClickOutside.js

@@ -13,2 +13,3 @@ import * as React from 'react';
       containsProp = options.contains;
+  var timeoutId = React.useRef(undefined);
   var listener = useEventCallback(function (ev) {
@@ -28,13 +29,50 @@ var contains = containsProp || function (parent, child) {
   React.useEffect(function () {
+    // Store the current event to avoid triggering handlers immediately
+    // Note this depends on a deprecated but extremely well supported quirk of the web platform
+    // https://github.com/facebook/react/issues/20074
+    var currentEvent = getWindowEvent(window);
+
+    var conditionalHandler = function (event) {
+      // Skip if this event is the same as the one running when we added the handlers
+      if (event === currentEvent) {
+        currentEvent = undefined;
+        return;
+      }
+
+      listener(event);
+    };
+
     if (!disabled) {
-      element === null || element === void 0 ? void 0 : element.addEventListener('click', listener);
-      element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', listener);
-    }
+      element === null || element === void 0 ? void 0 : element.addEventListener('click', conditionalHandler);
+      element === null || element === void 0 ? void 0 : element.addEventListener('touchstart', conditionalHandler);
+    } // Garbage collect this event after it's no longer useful to avoid memory leaks
 
+
+    timeoutId.current = setTimeout(function () {
+      currentEvent = undefined;
+    }, 1);
     return function () {
-      element === null || element === void 0 ? void 0 : element.removeEventListener('click', listener);
-      element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', listener);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('click', conditionalHandler);
+      element === null || element === void 0 ? void 0 : element.removeEventListener('touchstart', conditionalHandler);
+      clearTimeout(timeoutId.current);
+      currentEvent = undefined;
     };
   }, [listener, element, disabled]);
 };
+
+var getWindowEvent = function (target) {
+  var _a, _b, _c;
+
+  if (target) {
+    if (typeof target.window === 'object' && target.window === target) {
+      // eslint-disable-next-line deprecation/deprecation
+      return target.event;
+    } // eslint-disable-next-line deprecation/deprecation
+
+
+    return (_c = (_b = (_a = target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.event) !== null && _c !== void 0 ? _c : undefined;
+  }
+
+  return undefined;
+};
 //# sourceMappingURL=useOnClickOutside.js.map

package.json

 {
   "name": "@fluentui/react-utilities",
-  "version": "9.0.0-alpha.24",
+  "version": "9.0.0-alpha.25",
   "description": "A set of general React-specific utilities.",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

629035

increased by1.97%

Lines of code

7252

increased by1.45%

Published versions last months

23

increased by4.55%

Published versions last year

288

increased by0.7%

Worsened metrics

Number of downloads

113835

decreased by-3.62%

Published versions last two months

37

decreased by-7.5%

No dependency changes