@chakra-ui/popper - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

CHANGELOG.md

 # Change Log
 
+## 2.2.0
+
+### Minor Changes
+
+- [`5e24481fc`](https://github.com/chakra-ui/chakra-ui/commit/5e24481fc73b0097d0bac900479d7cc145a92670)
+  [#4026](https://github.com/chakra-ui/chakra-ui/pull/4026) Thanks
+  [@dodas](https://github.com/dodas)! - Add `enabled` option to `usePopper`
+  hook.
+
+  The `popper.js` instance will not be created until this option is `true`.
+
+  `Menu`, `Popover` and `Tooltip` components now use this option, so the
+  `popper.js` instance is created only once the popper is open. This should
+  significantly improve render and scroll performance.
+
 ## 2.1.2
@@ -4,0 +19,0 @@

dist/cjs/use-popper.js

@@ -32,2 +32,4 @@ "use strict";
   var _props = props,
+      _props$enabled = _props.enabled,
+      enabled = _props$enabled === void 0 ? true : _props$enabled,
       _props$modifiers = _props.modifiers,
@@ -58,3 +60,3 @@ modifiers = _props$modifiers === void 0 ? [] : _props$modifiers,
   var setupPopper = (0, _react.useCallback)(function () {
-    if (!reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
+    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
 
@@ -96,3 +98,3 @@ cleanup.current == null ? void 0 : cleanup.current();
     cleanup.current = instance.current.destroy;
-  }, [placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
+  }, [enabled, placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
   (0, _react.useEffect)(function () {
@@ -99,0 +101,0 @@ return function () {

dist/esm/use-popper.js

@@ -18,2 +18,3 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
   var {
+    enabled = true,
     modifiers = [],
@@ -36,3 +37,3 @@ placement: placementProp = "bottom",
   var setupPopper = useCallback(() => {
-    if (!reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
+    if (!enabled || !reference.current || !popper.current) return; // If popper instance exists, destroy it so we can create a new one
 
@@ -75,3 +76,3 @@ cleanup.current == null ? void 0 : cleanup.current();
     cleanup.current = instance.current.destroy;
-  }, [placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
+  }, [enabled, placementProp, modifiers, matchWidth, eventListeners, arrowPadding, offset, gutter, flip, preventOverflow, boundary, strategy]);
   useEffect(() => {
@@ -78,0 +79,0 @@ return () => {

dist/types/use-popper.d.ts

@@ -5,2 +5,3 @@ import { PropGetterV2 } from "@chakra-ui/react-utils";
 export interface UsePopperProps {
+    enabled?: boolean;
     /**
@@ -7,0 +8,0 @@ * The main and cross-axis offset to displace popper element

package.json

 {
   "name": "@chakra-ui/popper",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A React component and hooks wrapper for popper.js",
@@ -5,0 +5,0 @@ "keywords": [

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

107922

increased by0.99%

Lines of code

950

increased by0.42%

No dependency changes