@fluentui/react-component-ref - npm Package Compare versions

Comparing version 0.51.0 to 0.51.1

dist/commonjs/RefFindNode.js

@@ -18,2 +18,21 @@ "use strict";
 
+/**
+ * Detects if a passed element is a Fiber object instead of an element. Is needed as `ReactDOM.findDOMNode()` returns
+ * a Fiber in `react-test-renderer` that can cause issues with tests. Is used only in non-production env.
+ *
+ * @see https://github.com/facebook/react/issues/7371#issuecomment-317396864
+ * @see https://github.com/Semantic-Org/Semantic-UI-React/issues/4061#issuecomment-694895617
+ */
+function isFiberRef(node) {
+  if (node === null) {
+    return false;
+  }
+
+  if (node instanceof Element || node instanceof Text) {
+    return false;
+  }
+
+  return !!(node.type && node.tag);
+}
+
 var RefFindNode = /*#__PURE__*/function (_React$Component) {
@@ -37,4 +56,12 @@ (0, _inheritsLoose2.default)(RefFindNode, _React$Component);
   _proto.componentDidMount = function componentDidMount() {
-    this.prevNode = ReactDOM.findDOMNode(this);
-    (0, _utils.handleRef)(this.props.innerRef, this.prevNode);
+    var currentNode = ReactDOM.findDOMNode(this);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFiberRef(currentNode)) {
+        currentNode = null;
+      }
+    }
+
+    this.prevNode = currentNode;
+    (0, _utils.handleRef)(this.props.innerRef, currentNode);
   };
@@ -45,2 +72,8 @@
 
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFiberRef(currentNode)) {
+        currentNode = null;
+      }
+    }
+
     if (this.prevNode !== currentNode) {
@@ -47,0 +80,0 @@ this.prevNode = currentNode;

dist/dts/src/index.d.ts

@@ -0,0 +0,0 @@ export { Ref } from './Ref';

dist/dts/src/index.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/src/Ref.d.ts

 import * as React from 'react';
 import { RefProps } from './utils';
 export declare const Ref: React.FunctionComponent<RefProps>;

dist/dts/src/Ref.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/src/RefFindNode.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/dts/src/RefFindNode.js

@@ -7,2 +7,18 @@ "use strict";
 var utils_1 = require("./utils");
+/**
+ * Detects if a passed element is a Fiber object instead of an element. Is needed as `ReactDOM.findDOMNode()` returns
+ * a Fiber in `react-test-renderer` that can cause issues with tests. Is used only in non-production env.
+ *
+ * @see https://github.com/facebook/react/issues/7371#issuecomment-317396864
+ * @see https://github.com/Semantic-Org/Semantic-UI-React/issues/4061#issuecomment-694895617
+ */
+function isFiberRef(node) {
+    if (node === null) {
+        return false;
+    }
+    if (node instanceof Element || node instanceof Text) {
+        return false;
+    }
+    return !!(node.type && node.tag);
+}
 var RefFindNode = /** @class */ (function (_super) {
@@ -16,7 +32,18 @@ tslib_1.__extends(RefFindNode, _super);
     RefFindNode.prototype.componentDidMount = function () {
-        this.prevNode = ReactDOM.findDOMNode(this);
-        utils_1.handleRef(this.props.innerRef, this.prevNode);
+        var currentNode = ReactDOM.findDOMNode(this);
+        if (process.env.NODE_ENV !== 'production') {
+            if (isFiberRef(currentNode)) {
+                currentNode = null;
+            }
+        }
+        this.prevNode = currentNode;
+        utils_1.handleRef(this.props.innerRef, currentNode);
     };
     RefFindNode.prototype.componentDidUpdate = function (prevProps) {
         var currentNode = ReactDOM.findDOMNode(this);
+        if (process.env.NODE_ENV !== 'production') {
+            if (isFiberRef(currentNode)) {
+                currentNode = null;
+            }
+        }
         if (this.prevNode !== currentNode) {
@@ -23,0 +50,0 @@ this.prevNode = currentNode;

dist/dts/src/RefForward.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/dts/src/RefForward.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/src/utils.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/dts/src/utils.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/test/fixtures.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/dts/test/fixtures.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/test/handleRef-test.d.ts

 export {};

dist/dts/test/handleRef-test.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/test/isRefObject-test.d.ts

 export {};

dist/dts/test/isRefObject-test.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/test/Ref-test.d.ts

 export {};

dist/dts/test/Ref-test.js

@@ -0,0 +0,0 @@ "use strict";

dist/dts/test/RefFindNode-test.d.ts

 export {};

dist/dts/test/RefFindNode-test.js

@@ -6,2 +6,3 @@ "use strict";
 var React = require("react");
+var react_test_renderer_1 = require("react-test-renderer");
 var fixtures_1 = require("./fixtures");
@@ -68,3 +69,11 @@ var testInnerRef = function (Component) {
         });
+        it('always returns "null" for react-test-renderer', function () {
+            var innerRef = jest.fn();
+            var ref = jest.fn();
+            react_test_renderer_1.create(React.createElement(react_component_ref_1.RefFindNode, { innerRef: innerRef },
+                React.createElement("div", { ref: ref })));
+            expect(innerRef).toHaveBeenCalledWith(null);
+            expect(ref).toHaveBeenCalledWith(null);
+        });
     });
 });

dist/dts/test/RefForward-test.d.ts

 export {};

dist/dts/test/RefForward-test.js

@@ -0,0 +0,0 @@ "use strict";

dist/es/index.d.ts

@@ -0,0 +0,0 @@ export { Ref } from './Ref';

dist/es/Ref.d.ts

 import * as React from 'react';
 import { RefProps } from './utils';
 export declare const Ref: React.FunctionComponent<RefProps>;

dist/es/RefFindNode.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/es/RefFindNode.js

 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { handleRef } from './utils';
+import { handleRef } from './utils'; // ========================================================
+// react/packages/react-reconciler/src/ReactFiber.js
+// ========================================================
+
+/**
+ * Detects if a passed element is a Fiber object instead of an element. Is needed as `ReactDOM.findDOMNode()` returns
+ * a Fiber in `react-test-renderer` that can cause issues with tests. Is used only in non-production env.
+ *
+ * @see https://github.com/facebook/react/issues/7371#issuecomment-317396864
+ * @see https://github.com/Semantic-Org/Semantic-UI-React/issues/4061#issuecomment-694895617
+ */
+function isFiberRef(node) {
+  if (node === null) {
+    return false;
+  }
+
+  if (node instanceof Element || node instanceof Text) {
+    return false;
+  }
+
+  return !!(node.type && node.tag);
+}
+
 export var RefFindNode = /*#__PURE__*/function (_React$Component) {
@@ -23,4 +45,12 @@ _inheritsLoose(RefFindNode, _React$Component);
   _proto.componentDidMount = function componentDidMount() {
-    this.prevNode = ReactDOM.findDOMNode(this);
-    handleRef(this.props.innerRef, this.prevNode);
+    var currentNode = ReactDOM.findDOMNode(this);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFiberRef(currentNode)) {
+        currentNode = null;
+      }
+    }
+
+    this.prevNode = currentNode;
+    handleRef(this.props.innerRef, currentNode);
   };
@@ -31,2 +61,8 @@
 
+    if (process.env.NODE_ENV !== 'production') {
+      if (isFiberRef(currentNode)) {
+        currentNode = null;
+      }
+    }
+
     if (this.prevNode !== currentNode) {
@@ -33,0 +69,0 @@ this.prevNode = currentNode;

dist/es/RefForward.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

dist/es/utils.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

package.json

 {
   "name": "@fluentui/react-component-ref",
   "description": "A set of components and utils to deal with React refs.",
-  "version": "0.51.0",
+  "version": "0.51.1",
   "author": "Oleksandr Fediashov <[e-mail]>",
@@ -19,3 +19,5 @@ "bugs": "https://github.com/microsoft/fluentui/issues",
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "react-test-renderer": "^16.3.0",
+    "typescript": "3.7.2"
   },
@@ -48,3 +50,3 @@ "files": [
   "types": "dist/es/index.d.ts",
-  "gitHead": "215aed1574db0b0db7d5fe130d19072178855423"
+  "gitHead": "f4f39c71f4d7af52ac8857970f6374e0bdaea1bf"
 }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148619

increased by6.28%

Lines of code

845

increased by12.22%

Worsened metrics

Dev dependency count

10

increased by25%

Number of low supply chain risk alerts

7

increased by600%

No dependency changes