react-outer-click - npm Package Compare versions

Comparing version 3.7.0 to 3.8.0

lib/index.cjs.js

@@ -8,4 +8,3 @@ 'use strict';
 var PropTypes = require('prop-types');
-var React = require('react');
-var useComposedRef = require('use-composed-ref');
+var react = require('react');
 var invariant = require('tiny-invariant');
@@ -15,29 +14,21 @@
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return Object.freeze(n);
-}
-
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var useComposedRef__default = /*#__PURE__*/_interopDefaultLegacy(useComposedRef);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 
+var isObject = function isObject(value) {
+  return typeof value === 'object' && value !== null;
+};
+
+var updateRef = function updateRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  }
+
+  if (isObject(ref)) {
+    ref.current = value;
+  }
+};
+
 var castArray = function castArray(value) {
@@ -48,14 +39,14 @@ return Array.isArray(value) ? value : [value];
 var useOuterClick = function useOuterClick(refs, handler) {
-  !(Array.isArray(refs) || typeof refs === 'object' && refs !== null) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, 'Expected `refs` to be an array or object') : invariant__default['default'](false) : void 0;
+  !(Array.isArray(refs) || isObject(refs)) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, 'Expected `refs` to be an array or object') : invariant__default["default"](false) : void 0;
 
   if (Array.isArray(refs)) {
-    !(refs.length > 0) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, 'Expected `refs` to to not be empty') : invariant__default['default'](false) : void 0;
+    !(refs.length > 0) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, 'Expected `refs` to to not be empty') : invariant__default["default"](false) : void 0;
     refs.forEach(function (ref, i) {
-      !(typeof ref === 'object' && ref !== null) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, "Expected `refs[" + i + "]` to be an object") : invariant__default['default'](false) : void 0;
+      !isObject(ref) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, "Expected `refs[" + i + "]` to be an object") : invariant__default["default"](false) : void 0;
     });
   }
 
-  !(typeof handler === 'function' || handler == null) ? process.env.NODE_ENV !== "production" ? invariant__default['default'](false, 'Expected `handler` to be a function') : invariant__default['default'](false) : void 0;
-  var eventListenerRef = React.useRef();
-  React.useEffect(function () {
+  !(typeof handler === 'function' || handler == null) ? process.env.NODE_ENV !== "production" ? invariant__default["default"](false, 'Expected `handler` to be a function') : invariant__default["default"](false) : void 0;
+  var eventListenerRef = react.useRef();
+  react.useEffect(function () {
     eventListenerRef.current = function (event) {
@@ -69,3 +60,3 @@ if (castArray(refs).every(function (ref) {
   }, [handler, refs]);
-  React.useEffect(function () {
+  react.useEffect(function () {
     var eventListener = function eventListener(event) {
@@ -75,9 +66,7 @@ eventListenerRef.current(event);
 
-    ['mousedown', 'touchstart'].forEach(function (type) {
-      document.addEventListener(type, eventListener, true);
-    });
+    document.addEventListener('mousedown', eventListener, true);
+    document.addEventListener('touchstart', eventListener, true);
     return function () {
-      ['mousedown', 'touchstart'].forEach(function (type) {
-        document.removeEventListener(type, eventListener, true);
-      });
+      document.removeEventListener('mousedown', eventListener, true);
+      document.removeEventListener('touchstart', eventListener, true);
     };
@@ -87,23 +76,26 @@ }, []);
 
-var OuterClick = /*#__PURE__*/React__namespace.forwardRef(function OuterClick(_ref, userRef) {
+var _excluded = ["as", "children", "onOuterClick"];
+var OuterClick = /*#__PURE__*/react.forwardRef(function (_ref, userRef) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'div' : _ref$as,
+      as = _ref$as === void 0 ? 'div' : _ref$as,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? null : _ref$children,
-      _ref$onOuterClick = _ref.onOuterClick,
-      onOuterClick = _ref$onOuterClick === void 0 ? null : _ref$onOuterClick,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "children", "onOuterClick"]);
+      onOuterClick = _ref.onOuterClick,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
 
-  var libRef = React.useRef();
-  var ref = useComposedRef__default['default'](libRef, userRef);
+  var libRef = react.useRef(null);
   useOuterClick(libRef, onOuterClick);
-  return /*#__PURE__*/React__namespace.createElement(Element, _extends__default['default']({}, rest, {
+  var ref = react.useCallback(function (value) {
+    libRef.current = value;
+    updateRef(userRef, value);
+  }, [userRef]);
+  return /*#__PURE__*/react.createElement(as, _extends__default["default"]({}, props, {
     ref: ref
   }), children);
 });
-OuterClick.propTypes = process.env.NODE_ENV !== "production" ? {
-  as: PropTypes__default['default'].elementType,
-  children: PropTypes__default['default'].node,
-  onOuterClick: PropTypes__default['default'].func
-} : {};
+OuterClick.propTypes = {
+  as: PropTypes__default["default"].elementType,
+  children: PropTypes__default["default"].node,
+  onOuterClick: PropTypes__default["default"].func
+};
 
@@ -110,0 +102,0 @@ exports.OuterClick = OuterClick;

lib/index.esm.js

 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import PropTypes from 'prop-types';
-import * as React from 'react';
-import { useRef, useEffect } from 'react';
-import useComposedRef from 'use-composed-ref';
+import { useRef, useEffect, forwardRef, useCallback, createElement } from 'react';
 import invariant from 'tiny-invariant';
 
+var isObject = function isObject(value) {
+  return typeof value === 'object' && value !== null;
+};
+
+var updateRef = function updateRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  }
+
+  if (isObject(ref)) {
+    ref.current = value;
+  }
+};
+
 var castArray = function castArray(value) {
@@ -14,3 +26,3 @@ return Array.isArray(value) ? value : [value];
 var useOuterClick = function useOuterClick(refs, handler) {
-  !(Array.isArray(refs) || typeof refs === 'object' && refs !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected `refs` to be an array or object') : invariant(false) : void 0;
+  !(Array.isArray(refs) || isObject(refs)) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected `refs` to be an array or object') : invariant(false) : void 0;
 
@@ -20,3 +32,3 @@ if (Array.isArray(refs)) {
     refs.forEach(function (ref, i) {
-      !(typeof ref === 'object' && ref !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, "Expected `refs[" + i + "]` to be an object") : invariant(false) : void 0;
+      !isObject(ref) ? process.env.NODE_ENV !== "production" ? invariant(false, "Expected `refs[" + i + "]` to be an object") : invariant(false) : void 0;
     });
@@ -41,9 +53,7 @@ }
 
-    ['mousedown', 'touchstart'].forEach(function (type) {
-      document.addEventListener(type, eventListener, true);
-    });
+    document.addEventListener('mousedown', eventListener, true);
+    document.addEventListener('touchstart', eventListener, true);
     return function () {
-      ['mousedown', 'touchstart'].forEach(function (type) {
-        document.removeEventListener(type, eventListener, true);
-      });
+      document.removeEventListener('mousedown', eventListener, true);
+      document.removeEventListener('touchstart', eventListener, true);
     };
@@ -53,25 +63,28 @@ }, []);
 
-var OuterClick = /*#__PURE__*/React.forwardRef(function OuterClick(_ref, userRef) {
+var _excluded = ["as", "children", "onOuterClick"];
+var OuterClick = /*#__PURE__*/forwardRef(function (_ref, userRef) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'div' : _ref$as,
+      as = _ref$as === void 0 ? 'div' : _ref$as,
       _ref$children = _ref.children,
       children = _ref$children === void 0 ? null : _ref$children,
-      _ref$onOuterClick = _ref.onOuterClick,
-      onOuterClick = _ref$onOuterClick === void 0 ? null : _ref$onOuterClick,
-      rest = _objectWithoutPropertiesLoose(_ref, ["as", "children", "onOuterClick"]);
+      onOuterClick = _ref.onOuterClick,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var libRef = useRef();
-  var ref = useComposedRef(libRef, userRef);
+  var libRef = useRef(null);
   useOuterClick(libRef, onOuterClick);
-  return /*#__PURE__*/React.createElement(Element, _extends({}, rest, {
+  var ref = useCallback(function (value) {
+    libRef.current = value;
+    updateRef(userRef, value);
+  }, [userRef]);
+  return /*#__PURE__*/createElement(as, _extends({}, props, {
     ref: ref
   }), children);
 });
-OuterClick.propTypes = process.env.NODE_ENV !== "production" ? {
+OuterClick.propTypes = {
   as: PropTypes.elementType,
   children: PropTypes.node,
   onOuterClick: PropTypes.func
-} : {};
+};
 
 export { OuterClick, useOuterClick };
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "react-outer-click",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "React component and hook which detect mouse clicks outside of itself.",
@@ -15,3 +15,3 @@ "main": "lib/index.cjs.js",
     "format": "prettier --write .",
-    "prepare": "npm run build",
+    "prepare": "npm run build && husky install",
     "preversion": "npm run lint && npm run test",
@@ -39,35 +39,33 @@ "test": "jest"
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "prop-types": "^15.7.2",
-    "tiny-invariant": "^1.1.0",
-    "use-composed-ref": "^1.1.0"
+    "@babel/runtime": "^7.17.9",
+    "prop-types": "^15.8.1",
+    "tiny-invariant": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.14.0",
-    "@babel/preset-react": "^7.13.13",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-dev-expression": "^0.2.2",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.1",
+    "babel-plugin-dev-expression": "^0.2.3",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "^7.25.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^6.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.46.0"
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "^2.70.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || 17 || 18"
   }
 }

No alert changes

Improved metrics

Dependency count

4

decreased by-20%

Dev dependency count

22

decreased by-4.35%

Number of low supply chain risk alerts

8

decreased by-20%

Worsened metrics

Total package byte prevSize

25772

decreased by-5.08%

Number of package files

7

decreased by-12.5%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removeduse-composed-ref@^1.1.0

• - Removedreact@17.0.2(transitive)

• - Removeduse-composed-ref@1.3.0(transitive)

• Updated@babel/runtime@^7.17.9

• Updatedprop-types@^15.8.1

• Updatedtiny-invariant@^1.2.0