@gravity-ui/page-constructor 2.13.1 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.14.0](https://github.com/gravity-ui/page-constructor/compare/v2.13.1...v2.14.0) (2023-05-02)
+
+
+### Features
+
+* add passive flage to every addEventListener ([#318](https://github.com/gravity-ui/page-constructor/issues/318)) ([b1b7447](https://github.com/gravity-ui/page-constructor/commit/b1b7447b16b64afaf5ecea1db3ddf7ee9eeec534))
+
 ## [2.13.1](https://github.com/gravity-ui/page-constructor/compare/v2.13.0...v2.13.1) (2023-05-02)
 
 

package/build/cjs/blocks/Slider/Slider.js

@@ -83,7 +83,7 @@ const SliderBlock = (props) => {
     }, [currentIndex, hasFocus, scrollLastSlide]);
     (0, react_1.useEffect)(() => {
         onResize();
-        window.addEventListener('resize', onResize);
+        window.addEventListener('resize', onResize, { passive: true });
         return () => window.removeEventListener('resize', onResize);
     }, [onResize]);
     const handleArrowClick = (0, react_1.useCallback)((direction) => {

package/build/cjs/components/BalancedMasonry/BalancedMasonry.js

@@ -57,7 +57,7 @@ const BalancedMasonry = (props) => {
     }, [balanceColumns, children, columnCount]);
     (0, react_1.useEffect)(() => {
         const updateColumnCounter = () => setColumnCount(getCurrentColumnsCount());
-        window.addEventListener('resize', updateColumnCounter);
+        window.addEventListener('resize', updateColumnCounter, { passive: true });
         return () => window.removeEventListener('resize', updateColumnCounter);
     }, [setColumnCount, columns, getCurrentColumnsCount]);
     (0, react_1.useEffect)(() => {

package/build/cjs/components/FullWidthBackground/FullWidthBackground.js

@@ -30,7 +30,7 @@ class FullWidthBackground extends react_1.Component {
         if ((_b = (_a = this === null || this === void 0 ? void 0 : this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.parentElement) {
             this.ref.current.parentElement.style.position = 'relative';
             this.setBg();
-            window.addEventListener('resize', this.setBg);
+            window.addEventListener('resize', this.setBg, { passive: true });
         }
     }
     componentWillUnmount() {

package/build/cjs/components/HeightCalculator/HeightCalculator.js

@@ -34,7 +34,7 @@ const HeightCalculator = ({ onCalculate, children }) => {
             calculateContainerHeight();
         }, 1000);
         calculateContainerHeight();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => window.removeEventListener('resize', handleResize);
     }, [calculateContainerHeight]);
     return isCalculating ? (react_1.default.createElement("div", { className: b(), ref: container }, react_1.Children.map(children, (child, index) => {

package/build/cjs/components/Map/GoogleMap.js

@@ -29,7 +29,7 @@ const GoogleMap = (props) => {
             }
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/cjs/components/Map/YMap/YandexMap.js

@@ -56,7 +56,7 @@ const YandexMap = (props) => {
             }
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/cjs/components/Media/Image/Image.js

@@ -23,7 +23,7 @@ const Image = (props) => {
     (0, react_1.useEffect)(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
+            window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5), { passive: true });
             return () => window.removeEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
         }
         return () => { };

package/build/cjs/components/Media/Video/Video.js

@@ -22,7 +22,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));

package/build/cjs/components/OutsideClick/OutsideClick.js

@@ -17,7 +17,7 @@ class OutsideClick extends react_1.default.Component {
         };
     }
     componentDidMount() {
-        document.addEventListener('click', this.handleOutsideClick);
+        document.addEventListener('click', this.handleOutsideClick, { passive: true });
     }
     componentWillUnmount() {
         document.removeEventListener('click', this.handleOutsideClick);

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -60,7 +60,7 @@ class OverflowScroller extends react_1.default.Component {
     }
     componentDidMount() {
         this.checkOverflow();
-        window.addEventListener('resize', this.checkOverflow);
+        window.addEventListener('resize', this.checkOverflow, { passive: true });
     }
     componentDidUpdate(_prepvProps, { scrollValue: prevScrollValue }) {
         const { onScrollEnd } = this.props;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -87,7 +87,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             }
         }, 200);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -58,7 +58,7 @@ const VideoBlock = (props) => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/cjs/components/YandexForm/YandexForm.js

@@ -101,7 +101,7 @@ const YandexForm = (props) => {
         const container = formContainerRef.current;
         if (container) {
             updateFormIframe(container);
-            window.addEventListener('message', handleMessage);
+            window.addEventListener('message', handleMessage, { passive: true });
         }
     }, [updateFormIframe, handleMessage]);
     (0, react_1.useEffect)(() => {

package/build/cjs/hooks/hubspot.js

@@ -12,7 +12,7 @@ const hubspot_1 = require("../utils/hubspot");
 function useLoopBackHubspotEvents(formId) {
     (0, react_1.useEffect)(() => {
         const topHandler = (0, hubspot_1.loopBackHabspotEvents)(formId);
-        window.addEventListener('message', topHandler);
+        window.addEventListener('message', topHandler, { passive: true });
         return () => {
             window.removeEventListener('message', topHandler);
         };
@@ -29,7 +29,7 @@ exports.useLoopBackHubspotEvents = useLoopBackHubspotEvents;
 function useHandleHubspotEvents(handlers, formId) {
     (0, react_1.useEffect)(() => {
         const topHandler = (0, hubspot_1.handleHubspotEvents)(handlers, formId);
-        window.addEventListener('message', topHandler);
+        window.addEventListener('message', topHandler, { passive: true });
         return () => {
             window.removeEventListener('message', topHandler);
         };

package/build/cjs/hooks/useFocus.js

@@ -12,11 +12,11 @@ function useFocus(element) {
     (0, react_1.useEffect)(() => {
         if (element) {
             if (isMobile) {
-                element.addEventListener('pointerdown', setFocus);
+                element.addEventListener('pointerdown', setFocus, { passive: true });
             }
             else {
-                element.addEventListener('mouseenter', setFocus);
-                element.addEventListener('mouseleave', unsetFocus);
+                element.addEventListener('mouseenter', setFocus, { passive: true });
+                element.addEventListener('mouseleave', unsetFocus, { passive: true });
             }
             return () => {
                 if (isMobile) {

package/build/cjs/hooks/useHeightCalculator.js

@@ -17,7 +17,7 @@ const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
     (0, react_1.useEffect)(() => {
         const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
         calculateContainerHeight();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => {
             window.removeEventListener('resize', handleResize);
         };

package/build/cjs/hooks/useWindowBreakpoint.js

@@ -25,7 +25,7 @@ function useWindowBreakpoint() {
             setBreakpoint(calculate(window.innerWidth));
         }, 100);
         detect();
-        window.addEventListener('resize', detect);
+        window.addEventListener('resize', detect, { passive: true });
         return () => window.removeEventListener('resize', detect);
     }, []);
     return breakpoint;

package/build/cjs/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.js

@@ -35,7 +35,7 @@ const CombinedPriceDetailed = (props) => {
             updateGroupItemsSize(window.innerWidth);
         }
         handleResize();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => window.removeEventListener('resize', handleResize);
     }, [updateGroupItemsSize]);
     const getPrice = (groupPrices) => {

package/build/cjs/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -30,7 +30,7 @@ const PriceDescription = (props) => {
     }, [pricesDetailedDescriptionHeight, setStyles]);
     (0, react_1.useEffect)(() => {
         setDescriptionHeight();
-        window.addEventListener('resize', setDescriptionHeight);
+        window.addEventListener('resize', setDescriptionHeight, { passive: true });
         return () => window.removeEventListener('resize', setDescriptionHeight);
     }, [setDescriptionHeight]);
     const labelElement = (0, react_1.useMemo)(() => {

package/build/esm/blocks/Slider/Slider.js

@@ -81,7 +81,7 @@ export const SliderBlock = (props) => {
     }, [currentIndex, hasFocus, scrollLastSlide]);
     useEffect(() => {
         onResize();
-        window.addEventListener('resize', onResize);
+        window.addEventListener('resize', onResize, { passive: true });
         return () => window.removeEventListener('resize', onResize);
     }, [onResize]);
     const handleArrowClick = useCallback((direction) => {

package/build/esm/components/BalancedMasonry/BalancedMasonry.js

@@ -55,7 +55,7 @@ const BalancedMasonry = (props) => {
     }, [balanceColumns, children, columnCount]);
     useEffect(() => {
         const updateColumnCounter = () => setColumnCount(getCurrentColumnsCount());
-        window.addEventListener('resize', updateColumnCounter);
+        window.addEventListener('resize', updateColumnCounter, { passive: true });
         return () => window.removeEventListener('resize', updateColumnCounter);
     }, [setColumnCount, columns, getCurrentColumnsCount]);
     useEffect(() => {

package/build/esm/components/FullWidthBackground/FullWidthBackground.js

@@ -28,7 +28,7 @@ export default class FullWidthBackground extends Component {
         if ((_b = (_a = this === null || this === void 0 ? void 0 : this.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.parentElement) {
             this.ref.current.parentElement.style.position = 'relative';
             this.setBg();
-            window.addEventListener('resize', this.setBg);
+            window.addEventListener('resize', this.setBg, { passive: true });
         }
     }
     componentWillUnmount() {

package/build/esm/components/HeightCalculator/HeightCalculator.js

@@ -32,7 +32,7 @@ const HeightCalculator = ({ onCalculate, children }) => {
             calculateContainerHeight();
         }, 1000);
         calculateContainerHeight();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => window.removeEventListener('resize', handleResize);
     }, [calculateContainerHeight]);
     return isCalculating ? (React.createElement("div", { className: b(), ref: container }, Children.map(children, (child, index) => {

package/build/esm/components/Map/GoogleMap.js

@@ -26,7 +26,7 @@ const GoogleMap = (props) => {
             }
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/esm/components/Map/YMap/YandexMap.js

@@ -53,7 +53,7 @@ const YandexMap = (props) => {
             }
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/esm/components/Media/Image/Image.js

@@ -21,7 +21,7 @@ const Image = (props) => {
     useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', _.debounce(handleScroll, 5));
+            window.addEventListener('scroll', _.debounce(handleScroll, 5), { passive: true });
             return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
         }
         return () => { };

package/build/esm/components/Media/Video/Video.js

@@ -20,7 +20,7 @@ const Video = (props) => {
                         videoRef.currentTime = start;
                         videoRef.play().catch(() => setHasVideoFallback(true));
                     }
-                });
+                }, { passive: true });
             }
             if (playVideo) {
                 ref.current.play().catch(() => setHasVideoFallback(true));

package/build/esm/components/OutsideClick/OutsideClick.js

@@ -14,7 +14,7 @@ export default class OutsideClick extends React.Component {
         };
     }
     componentDidMount() {
-        document.addEventListener('click', this.handleOutsideClick);
+        document.addEventListener('click', this.handleOutsideClick, { passive: true });
     }
     componentWillUnmount() {
         document.removeEventListener('click', this.handleOutsideClick);

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -58,7 +58,7 @@ export default class OverflowScroller extends React.Component {
     }
     componentDidMount() {
         this.checkOverflow();
-        window.addEventListener('resize', this.checkOverflow);
+        window.addEventListener('resize', this.checkOverflow, { passive: true });
     }
     componentDidUpdate(_prepvProps, { scrollValue: prevScrollValue }) {
         const { onScrollEnd } = this.props;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -84,7 +84,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }
         }, 200);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -54,7 +54,7 @@ const VideoBlock = (props) => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, { passive: true });
         return () => {
             window.removeEventListener('resize', updateSize);
         };

package/build/esm/components/YandexForm/YandexForm.js

@@ -97,7 +97,7 @@ const YandexForm = (props) => {
         const container = formContainerRef.current;
         if (container) {
             updateFormIframe(container);
-            window.addEventListener('message', handleMessage);
+            window.addEventListener('message', handleMessage, { passive: true });
         }
     }, [updateFormIframe, handleMessage]);
     useEffect(() => {

package/build/esm/hooks/hubspot.js

@@ -9,7 +9,7 @@ import { handleHubspotEvents, loopBackHabspotEvents } from '../utils/hubspot';
 export function useLoopBackHubspotEvents(formId) {
     useEffect(() => {
         const topHandler = loopBackHabspotEvents(formId);
-        window.addEventListener('message', topHandler);
+        window.addEventListener('message', topHandler, { passive: true });
         return () => {
             window.removeEventListener('message', topHandler);
         };
@@ -25,7 +25,7 @@ export function useLoopBackHubspotEvents(formId) {
 export function useHandleHubspotEvents(handlers, formId) {
     useEffect(() => {
         const topHandler = handleHubspotEvents(handlers, formId);
-        window.addEventListener('message', topHandler);
+        window.addEventListener('message', topHandler, { passive: true });
         return () => {
             window.removeEventListener('message', topHandler);
         };

package/build/esm/hooks/useFocus.js

@@ -9,11 +9,11 @@ export default function useFocus(element) {
     useEffect(() => {
         if (element) {
             if (isMobile) {
-                element.addEventListener('pointerdown', setFocus);
+                element.addEventListener('pointerdown', setFocus, { passive: true });
             }
             else {
-                element.addEventListener('mouseenter', setFocus);
-                element.addEventListener('mouseleave', unsetFocus);
+                element.addEventListener('mouseenter', setFocus, { passive: true });
+                element.addEventListener('mouseleave', unsetFocus, { passive: true });
             }
             return () => {
                 if (isMobile) {

package/build/esm/hooks/useHeightCalculator.js

@@ -14,7 +14,7 @@ const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
     useEffect(() => {
         const handleResize = _.debounce(calculateContainerHeight, recalculateOnResizeDelay);
         calculateContainerHeight();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => {
             window.removeEventListener('resize', handleResize);
         };

package/build/esm/hooks/useWindowBreakpoint.js

@@ -22,7 +22,7 @@ export default function useWindowBreakpoint() {
             setBreakpoint(calculate(window.innerWidth));
         }, 100);
         detect();
-        window.addEventListener('resize', detect);
+        window.addEventListener('resize', detect, { passive: true });
         return () => window.removeEventListener('resize', detect);
     }, []);
     return breakpoint;

package/build/esm/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.js

@@ -33,7 +33,7 @@ const CombinedPriceDetailed = (props) => {
             updateGroupItemsSize(window.innerWidth);
         }
         handleResize();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, { passive: true });
         return () => window.removeEventListener('resize', handleResize);
     }, [updateGroupItemsSize]);
     const getPrice = (groupPrices) => {

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -28,7 +28,7 @@ const PriceDescription = (props) => {
     }, [pricesDetailedDescriptionHeight, setStyles]);
     useEffect(() => {
         setDescriptionHeight();
-        window.addEventListener('resize', setDescriptionHeight);
+        window.addEventListener('resize', setDescriptionHeight, { passive: true });
         return () => window.removeEventListener('resize', setDescriptionHeight);
     }, [setDescriptionHeight]);
     const labelElement = useMemo(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {