@chakra-ui/popper - npm Package Compare versions

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

CHANGELOG.md

@@ -6,2 +6,24 @@ # Change Log
 
+# [1.0.0-rc.1](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/popper@1.0.0-rc.0...@chakra-ui/popper@1.0.0-rc.1) (2020-08-06)
+
+### Bug Fixes
+
+- **variables:** drop unused imports
+  ([552b2e9](https://github.com/chakra-ui/chakra-ui/commit/552b2e9b7510963db509a5724af5361ef07c8ecb))
+
+### Features
+
+- update popper hook and use-clipboard
+  ([2659f60](https://github.com/chakra-ui/chakra-ui/commit/2659f60b7d44815c7638d2bc03eb6a97ad7bc581))
+
+### Performance Improvements
+
+- improve popper hook
+  ([d7ecb04](https://github.com/chakra-ui/chakra-ui/commit/d7ecb04baed8b6e6488321f7f2b28bed10a3a0d3))
+
+# 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.0](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/popper@1.0.0-next.7...@chakra-ui/popper@1.0.0-rc.0) (2020-07-26)
@@ -8,0 +30,0 @@

dist/cjs/use-popper.js

@@ -6,69 +6,76 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
-
 var _core = require("@popperjs/core");
 
+var _react = require("react");
+
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 var _popper = require("./popper.utils");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _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) {
-  var _props$placement = props.placement,
+  if (props === void 0) {
+    props = {};
+  }
+
+  var _props = props,
+      _props$forceUpdate = _props.forceUpdate,
+      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
+      _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$forceUpdate = props.forceUpdate,
-      forceUpdate = _props$forceUpdate === void 0 ? true : _props$forceUpdate,
-      _props$flip = props.flip,
+      _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,
-      _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);
+      modifiers = _props.modifiers; // This holds the popper.js instance
 
-  var _React$useState = React.useState(initialPlacement),
-      originalPlacement = _React$useState[0],
-      place = _React$useState[1];
+  var popper = (0, _react.useRef)(null); // Set up the refs
 
-  var _React$useState2 = React.useState(initialPlacement),
-      placement = _React$useState2[0],
-      setPlacement = _React$useState2[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$useState3 = React.useState(offsetProp || [0, gutter]),
-      offset = _React$useState3[0];
+  var _useState = (0, _react.useState)(initialPlacement),
+      originalPlacement = _useState[0],
+      setCustomPlacement = _useState[1];
 
-  var _React$useState4 = React.useState({}),
-      popoverStyles = _React$useState4[0],
-      setPopoverStyles = _React$useState4[1];
+  var _useState2 = (0, _react.useState)(initialPlacement),
+      placement = _useState2[0],
+      setPlacement = _useState2[1]; // Keep track of the offsets between the reference and popper
 
-  var _React$useState5 = React.useState({}),
-      arrowStyles = _React$useState5[0],
-      setArrowStyles = _React$useState5[1];
 
-  var update = React.useCallback(function () {
-    if (popper.current) {
-      popper.current.forceUpdate();
-      return true;
-    }
+  var offset = offsetProp || [0, gutter]; // Keeps track of the computed styles of the popper and arrow
 
-    return false;
-  }, []);
+  var _useState3 = (0, _react.useState)({}),
+      popoverStyles = _useState3[0],
+      setPopoverStyles = _useState3[1];
+
+  var _useState4 = (0, _react.useState)({}),
+      arrowStyles = _useState4[0],
+      setArrowStyles = _useState4[1];
+
   var modifiersOverride = modifiers != null ? modifiers : [];
@@ -81,8 +88,11 @@ useSafeLayoutEffect(function () {
         modifiers: [{
+          // https://popper.js.org/docs/v2/modifiers/event-listeners/
           name: "eventListeners",
-          enabled: eventsEnabled
+          enabled: forceUpdate
         }, {
+          // https://popper.js.org/docs/v2/modifiers/apply-styles/
           name: "applyStyles",
           enabled: false
         }, {
+          // https://popper.js.org/docs/v2/modifiers/flip/
           name: "flip",
@@ -94,8 +104,9 @@ enabled: flip,
         }, {
+          // https://popper.js.org/docs/v2/modifiers/compute-styles/
           name: "computeStyles",
           options: {
-            gpuAcceleration: false,
-            adaptive: false
+            gpuAcceleration: false
           }
         }, {
+          // https://popper.js.org/docs/v2/modifiers/offset/
           name: "offset",
@@ -106,2 +117,3 @@ options: {
         }, {
+          // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
           name: "preventOverflow",
@@ -117,4 +129,5 @@ enabled: preventOverflow,
         }, {
+          // https://popper.js.org/docs/v2/modifiers/arrow/
           name: "arrow",
-          enabled: Boolean(arrowRef.current),
+          enabled: !!arrowRef.current,
           options: {
@@ -124,2 +137,3 @@ element: arrowRef.current
         }, {
+          // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
           name: "updateState",
@@ -131,4 +145,4 @@ phase: "write",
             setPlacement(state.placement);
-            setPopoverStyles(state.styles.popper);
-            setArrowStyles(state.styles.arrow);
+            setPopoverStyles(applyStyles(state.styles.popper));
+            setArrowStyles(applyStyles(state.styles.arrow));
           }
@@ -144,4 +158,4 @@ }].concat(modifiersOverride)
       }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
+    };
+  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
   useSafeLayoutEffect(function () {
@@ -159,5 +173,13 @@ var id = requestAnimationFrame(function () {
   }, [forceUpdate]);
+  var forcePopperUpdate = (0, _react.useCallback)(function () {
+    if (popper.current) {
+      popper.current.forceUpdate();
+      return true;
+    }
 
-  var computedArrowStyles = _extends({}, arrowStyles, (0, _popper.getArrowStyles)(placement, arrowSize, arrowShadowColor));
+    return false;
+  }, []);
 
+  var _arrowStyles = _extends({}, arrowStyles, (0, _popper.getArrowStyles)(placement, arrowSize, arrowShadowColor));
+
   return {
@@ -176,9 +198,9 @@ popperInstance: popper.current,
       ref: arrowRef,
-      style: computedArrowStyles
+      style: _arrowStyles
     },
-    update: update,
+    update: forcePopperUpdate,
     placement: placement,
-    place: place
+    setPlacement: setCustomPlacement
   };
 }
 //# 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 ? React.useLayoutEffect : React.useEffect;
+var useSafeLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+function applyStyles(styles) {
+  return prevStyles => {
+    if (styles && !isEqual(prevStyles, styles)) {
+      return styles;
+    }
+
+    return prevStyles;
+  };
+}
+
 export function usePopper(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   var {
+    forceUpdate = true,
     placement: initialPlacement = "bottom",
@@ -14,3 +31,2 @@ offset: offsetProp,
     fixed = false,
-    forceUpdate = true,
     flip = true,
@@ -20,22 +36,18 @@ arrowSize = 10,
     gutter = arrowSize,
-    eventsEnabled = true,
     modifiers
-  } = 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;
-    }
+  } = props; // This holds the popper.js instance
 
-    return false;
-  }, []);
+  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({});
   var modifiersOverride = modifiers != null ? modifiers : [];
@@ -48,8 +60,11 @@ useSafeLayoutEffect(() => {
         modifiers: [{
+          // https://popper.js.org/docs/v2/modifiers/event-listeners/
           name: "eventListeners",
-          enabled: eventsEnabled
+          enabled: forceUpdate
         }, {
+          // https://popper.js.org/docs/v2/modifiers/apply-styles/
           name: "applyStyles",
           enabled: false
         }, {
+          // https://popper.js.org/docs/v2/modifiers/flip/
           name: "flip",
@@ -61,8 +76,9 @@ enabled: flip,
         }, {
+          // https://popper.js.org/docs/v2/modifiers/compute-styles/
           name: "computeStyles",
           options: {
-            gpuAcceleration: false,
-            adaptive: false
+            gpuAcceleration: false
           }
         }, {
+          // https://popper.js.org/docs/v2/modifiers/offset/
           name: "offset",
@@ -73,2 +89,3 @@ options: {
         }, {
+          // https://popper.js.org/docs/v2/modifiers/prevent-overflow/
           name: "preventOverflow",
@@ -84,4 +101,5 @@ enabled: preventOverflow,
         }, {
+          // https://popper.js.org/docs/v2/modifiers/arrow/
           name: "arrow",
-          enabled: Boolean(arrowRef.current),
+          enabled: !!arrowRef.current,
           options: {
@@ -91,2 +109,3 @@ element: arrowRef.current
         }, {
+          // https://popper.js.org/docs/v2/modifiers/#custom-modifiers
           name: "updateState",
@@ -101,4 +120,4 @@ phase: "write",
             setPlacement(state.placement);
-            setPopoverStyles(state.styles.popper);
-            setArrowStyles(state.styles.arrow);
+            setPopoverStyles(applyStyles(state.styles.popper));
+            setArrowStyles(applyStyles(state.styles.arrow));
           }
@@ -115,4 +134,4 @@
       }
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow, eventsEnabled]);
+    };
+  }, [originalPlacement, fixed, forceUpdate, flip, offset, preventOverflow]);
   useSafeLayoutEffect(() => {
@@ -130,5 +149,13 @@ var id = requestAnimationFrame(() => {
   }, [forceUpdate]);
+  var forcePopperUpdate = useCallback(() => {
+    if (popper.current) {
+      popper.current.forceUpdate();
+      return true;
+    }
 
-  var computedArrowStyles = _extends({}, arrowStyles, getArrowStyles(placement, arrowSize, arrowShadowColor));
+    return false;
+  }, []);
 
+  var _arrowStyles = _extends({}, arrowStyles, getArrowStyles(placement, arrowSize, arrowShadowColor));
+
   return {
@@ -147,9 +174,9 @@ popperInstance: popper.current,
       ref: arrowRef,
-      style: computedArrowStyles
+      style: _arrowStyles
     },
-    update,
+    update: forcePopperUpdate,
     placement,
-    place
+    setPlacement: setCustomPlacement
   };
 }
 //# sourceMappingURL=use-popper.js.map

package.json

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

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

127657

increased by5.01%

Lines of code

1358

increased by4.78%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedreact-fast-compare@3.2.0

• + Addedreact-fast-compare@3.2.0(transitive)