@chakra-ui/popper - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0-rc.2

CHANGELOG.md

 # Change Log
 
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.0.0-rc.2 (2020-08-09)
+
+**Note:** Version bump only for package @chakra-ui/popper
+
+
+
+
+
+# Change Log
+
 All notable changes to this project will be documented in this file. See
@@ -4,0 +17,0 @@ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

dist/cjs/use-popper.js

@@ -6,76 +6,69 @@ "use strict";
 
+var React = _interopRequireWildcard(require("react"));
+
 var _core = require("@popperjs/core");
 
-var _react = require("react");
+var _popper = require("./popper.utils");
 
-var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _popper = require("./popper.utils");
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var isBrowser = typeof window !== "undefined";
-var useSafeLayoutEffect = isBrowser ? _react.useLayoutEffect : _react.useEffect;
+var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
-function applyStyles(styles) {
-  return function (prevStyles) {
-    if (styles && !(0, _reactFastCompare["default"])(prevStyles, styles)) {
-      return styles;
-    }
-
-    return prevStyles;
-  };
-}
-
 function usePopper(props) {
-  if (props === void 0) {
-    props = {};
-  }
-
-  var _props = props,
-      _props$forceUpdate = _props.forceUpdate,
-      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
-      _props$placement = _props.placement,
+  var _props$placement = props.placement,
       initialPlacement = _props$placement === void 0 ? "bottom" : _props$placement,
-      offsetProp = _props.offset,
-      _props$preventOverflo = _props.preventOverflow,
+      offsetProp = props.offset,
+      _props$preventOverflo = props.preventOverflow,
       preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
-      _props$fixed = _props.fixed,
+      _props$fixed = props.fixed,
       fixed = _props$fixed === void 0 ? false : _props$fixed,
-      _props$flip = _props.flip,
+      _props$forceUpdate = props.forceUpdate,
+      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
+      _props$flip = props.flip,
       flip = _props$flip === void 0 ? true : _props$flip,
-      _props$arrowSize = _props.arrowSize,
+      _props$arrowSize = props.arrowSize,
       arrowSize = _props$arrowSize === void 0 ? 10 : _props$arrowSize,
-      arrowShadowColor = _props.arrowShadowColor,
-      _props$gutter = _props.gutter,
+      arrowShadowColor = props.arrowShadowColor,
+      _props$gutter = props.gutter,
       gutter = _props$gutter === void 0 ? arrowSize : _props$gutter,
-      modifiers = _props.modifiers; // This holds the popper.js instance
+      _props$eventsEnabled = props.eventsEnabled,
+      eventsEnabled = _props$eventsEnabled === void 0 ? true : _props$eventsEnabled,
+      modifiers = props.modifiers;
+  var popper = React.useRef(null);
+  var referenceRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
+  var arrowRef = React.useRef(null);
 
-  var popper = (0, _react.useRef)(null); // Set up the refs
+  var _React$useState = React.useState(initialPlacement),
+      originalPlacement = _React$useState[0],
+      place = _React$useState[1];
 
-  var referenceRef = (0, _react.useRef)(null);
-  var popoverRef = (0, _react.useRef)(null);
-  var arrowRef = (0, _react.useRef)(null); // Keep track of placements calculated by popper.js
+  var _React$useState2 = React.useState(initialPlacement),
+      placement = _React$useState2[0],
+      setPlacement = _React$useState2[1];
 
-  var _useState = (0, _react.useState)(initialPlacement),
-      originalPlacement = _useState[0],
-      setCustomPlacement = _useState[1];
+  var _React$useState3 = React.useState(offsetProp || [0, gutter]),
+      offset = _React$useState3[0];
 
-  var _useState2 = (0, _react.useState)(initialPlacement),
-      placement = _useState2[0],
-      setPlacement = _useState2[1]; // Keep track of the offsets between the reference and popper
+  var _React$useState4 = React.useState({}),
+      popoverStyles = _React$useState4[0],
+      setPopoverStyles = _React$useState4[1];
 
+  var _React$useState5 = React.useState({}),
+      arrowStyles = _React$useState5[0],
+      setArrowStyles = _React$useState5[1];
 
-  var offset = offsetProp || [0, gutter]; // Keeps track of the computed styles of the popper and arrow
+  var update = React.useCallback(function () {
+    if (popper.current) {
+      popper.current.forceUpdate();
+      return true;
+    }
 
-  var _useState3 = (0, _react.useState)({}),
-      popoverStyles = _useState3[0],
-      setPopoverStyles = _useState3[1];
-
-  var _useState4 = (0, _react.useState)({}),
-      arrowStyles = _useState4[0],
-      setArrowStyles = _useState4[1];
-
+    return false;
+  }, []);
   var modifiersOverride = modifiers != null ? modifiers : [];
@@ -88,11 +81,8 @@ useSafeLayoutEffect(function () {
         modifiers: [{
-          // https://popper.js.org/docs/v2/modifiers/event-listeners/
           name: "eventListeners",
-          enabled: forceUpdate
+          enabled: eventsEnabled
         }, {
-          // https://popper.js.org/docs/v2/modifiers/apply-styles/
           name: "applyStyles",
           enabled: false
         }, {
-          // https://popper.js.org/docs/v2/modifiers/flip/
           name: "flip",
@@ -104,9 +94,8 @@ enabled: flip,
         }, {
-          // https://popper.js.org/docs/v2/modifiers/compute-styles/
           name: "computeStyles",
           options: {
-            gpuAcceleration: false
+            gpuAcceleration: false,
+            adaptive: false
           }
         }, {
-          // https://popper.js.org/docs/v2/modifiers/offset/
           name: "offset",
@@ -117,3 +106,2 @@ options: {
         }, {
-          // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
           name: "preventOverflow",
@@ -129,5 +117,4 @@ enabled: preventOverflow,
         }, {
-          // https://popper.js.org/docs/v2/modifiers/arrow/
           name: "arrow",
-          enabled: !!arrowRef.current,
+          enabled: Boolean(arrowRef.current),
           options: {
@@ -137,3 +124,2 @@ element: arrowRef.current
         }, {
-          // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
           name: "updateState",
@@ -145,4 +131,4 @@ phase: "write",
             setPlacement(state.placement);
-            setPopoverStyles(applyStyles(state.styles.popper));
-            setArrowStyles(applyStyles(state.styles.arrow));
+            setPopoverStyles(state.styles.popper);
+            setArrowStyles(state.styles.arrow);
           }
@@ -158,4 +144,4 @@ }].concat(modifiersOverride)
       }
-    };
-  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
   useSafeLayoutEffect(function () {
@@ -173,13 +159,5 @@ var id = requestAnimationFrame(function () {
   }, [forceUpdate]);
-  var forcePopperUpdate = (0, _react.useCallback)(function () {
-    if (popper.current) {
-      popper.current.forceUpdate();
-      return true;
-    }
 
-    return false;
-  }, []);
+  var computedArrowStyles = _extends({}, arrowStyles, (0, _popper.getArrowStyles)(placement, arrowSize, arrowShadowColor));
 
-  var _arrowStyles = _extends({}, arrowStyles, (0, _popper.getArrowStyles)(placement, arrowSize, arrowShadowColor));
-
   return {
@@ -198,9 +176,9 @@ popperInstance: popper.current,
       ref: arrowRef,
-      style: _arrowStyles
+      style: computedArrowStyles
     },
-    update: forcePopperUpdate,
+    update: update,
     placement: placement,
-    setPlacement: setCustomPlacement
+    place: place
   };
 }
 //# sourceMappingURL=use-popper.js.map

dist/esm/use-popper.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import * as React from "react";
 import { createPopper } from "@popperjs/core";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import isEqual from "react-fast-compare";
 import { getArrowStyles, toTransformOrigin } from "./popper.utils";
 var isBrowser = typeof window !== "undefined";
-var useSafeLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-
-function applyStyles(styles) {
-  return prevStyles => {
-    if (styles && !isEqual(prevStyles, styles)) {
-      return styles;
-    }
-
-    return prevStyles;
-  };
-}
-
+var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 export function usePopper(props) {
-  if (props === void 0) {
-    props = {};
-  }
-
   var {
-    forceUpdate = true,
     placement: initialPlacement = "bottom",
@@ -31,2 +14,3 @@ offset: offsetProp,
     fixed = false,
+    forceUpdate = true,
     flip = true,
@@ -36,18 +20,22 @@ arrowSize = 10,
     gutter = arrowSize,
+    eventsEnabled = true,
     modifiers
-  } = props; // This holds the popper.js instance
+  } = props;
+  var popper = React.useRef(null);
+  var referenceRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
+  var arrowRef = React.useRef(null);
+  var [originalPlacement, place] = React.useState(initialPlacement);
+  var [placement, setPlacement] = React.useState(initialPlacement);
+  var [offset] = React.useState(offsetProp || [0, gutter]);
+  var [popoverStyles, setPopoverStyles] = React.useState({});
+  var [arrowStyles, setArrowStyles] = React.useState({});
+  var update = React.useCallback(() => {
+    if (popper.current) {
+      popper.current.forceUpdate();
+      return true;
+    }
 
-  var popper = useRef(null); // Set up the refs
-
-  var referenceRef = useRef(null);
-  var popoverRef = useRef(null);
-  var arrowRef = useRef(null); // Keep track of placements calculated by popper.js
-
-  var [originalPlacement, setCustomPlacement] = useState(initialPlacement);
-  var [placement, setPlacement] = useState(initialPlacement); // Keep track of the offsets between the reference and popper
-
-  var offset = offsetProp || [0, gutter]; // Keeps track of the computed styles of the popper and arrow
-
-  var [popoverStyles, setPopoverStyles] = useState({});
-  var [arrowStyles, setArrowStyles] = useState({});
+    return false;
+  }, []);
   var modifiersOverride = modifiers != null ? modifiers : [];
@@ -60,11 +48,8 @@ useSafeLayoutEffect(() => {
         modifiers: [{
-          // https://popper.js.org/docs/v2/modifiers/event-listeners/
           name: "eventListeners",
-          enabled: forceUpdate
+          enabled: eventsEnabled
         }, {
-          // https://popper.js.org/docs/v2/modifiers/apply-styles/
           name: "applyStyles",
           enabled: false
         }, {
-          // https://popper.js.org/docs/v2/modifiers/flip/
           name: "flip",
@@ -76,9 +61,8 @@ enabled: flip,
         }, {
-          // https://popper.js.org/docs/v2/modifiers/compute-styles/
           name: "computeStyles",
           options: {
-            gpuAcceleration: false
+            gpuAcceleration: false,
+            adaptive: false
           }
         }, {
-          // https://popper.js.org/docs/v2/modifiers/offset/
           name: "offset",
@@ -89,3 +73,2 @@ options: {
         }, {
-          // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
           name: "preventOverflow",
@@ -101,5 +84,4 @@ enabled: preventOverflow,
         }, {
-          // https://popper.js.org/docs/v2/modifiers/arrow/
           name: "arrow",
-          enabled: !!arrowRef.current,
+          enabled: Boolean(arrowRef.current),
           options: {
@@ -109,3 +91,2 @@ element: arrowRef.current
         }, {
-          // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
           name: "updateState",
@@ -120,4 +101,4 @@ phase: "write",
             setPlacement(state.placement);
-            setPopoverStyles(applyStyles(state.styles.popper));
-            setArrowStyles(applyStyles(state.styles.arrow));
+            setPopoverStyles(state.styles.popper);
+            setArrowStyles(state.styles.arrow);
           }
@@ -134,4 +115,4 @@
       }
-    };
-  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
   useSafeLayoutEffect(() => {
@@ -149,13 +130,5 @@ var id = requestAnimationFrame(() => {
   }, [forceUpdate]);
-  var forcePopperUpdate = useCallback(() => {
-    if (popper.current) {
-      popper.current.forceUpdate();
-      return true;
-    }
 
-    return false;
-  }, []);
+  var computedArrowStyles = _extends({}, arrowStyles, getArrowStyles(placement, arrowSize, arrowShadowColor));
 
-  var _arrowStyles = _extends({}, arrowStyles, getArrowStyles(placement, arrowSize, arrowShadowColor));
-
   return {
@@ -174,9 +147,9 @@ popperInstance: popper.current,
       ref: arrowRef,
-      style: _arrowStyles
+      style: computedArrowStyles
     },
-    update: forcePopperUpdate,
+    update,
     placement,
-    setPlacement: setCustomPlacement
+    place
   };
 }
 //# sourceMappingURL=use-popper.js.map

package.json

 {
   "name": "@chakra-ui/popper",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "A React component and hooks wrapper for popper.js",
@@ -53,4 +53,3 @@ "keywords": [
   "dependencies": {
-    "@popperjs/core": "2.4.4",
-    "react-fast-compare": "3.2.0"
+    "@popperjs/core": "2.4.4"
   },
@@ -60,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "e0470c73a9f6be24525dc5458d6fb157096b5ae3"
+  "gitHead": "c0a55ae7279887996fd2cbfb410476c86793e1bc"
 }

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

291476

increased by128.33%

Dependency count

2

decreased by-33.33%

Lines of code

1724

increased by26.95%

Dependency changes

• - Removedreact-fast-compare@3.2.0

• - Removedreact-fast-compare@3.2.0(transitive)