@gravity-ui/page-constructor 2.13.1 → 2.15.0-alpha

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.d.ts

@@ -4,6 +4,8 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
+    arrowSize?: number;
+    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

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

@@ -8,6 +8,7 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
+const DEFAULT_ARROW_SIZE = 18;
 class OverflowScroller extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -60,7 +61,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;
@@ -72,7 +73,7 @@ class OverflowScroller extends react_1.default.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, children } = this.props;
+        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -83,8 +84,8 @@ class OverflowScroller extends react_1.default.Component {
             }) },
             react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
                 react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
-                react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
+                react_1.default.createElement(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }
 exports.default = OverflowScroller;

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.d.ts

@@ -5,6 +5,8 @@ export interface OverflowScrollerProps {
     className?: string;
     onScrollStart?: () => void;
     onScrollEnd?: () => void;
+    arrowSize?: number;
+    arrowClassName?: string;
 }
 export interface OverflowScrollerState {
     arrows: Arrow[];

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

@@ -6,6 +6,7 @@ import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
+const DEFAULT_ARROW_SIZE = 18;
 export default class OverflowScroller extends React.Component {
     constructor() {
         super(...arguments);
@@ -58,7 +59,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;
@@ -70,7 +71,7 @@ export default class OverflowScroller extends React.Component {
         window.removeEventListener('resize', this.checkOverflow);
     }
     render() {
-        const { className, children } = this.props;
+        const { className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE } = this.props;
         const { arrows, scrollValue } = this.state;
         const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
         const paddingLeft = arrows.includes('left');
@@ -81,7 +82,7 @@ export default class OverflowScroller extends React.Component {
             }) },
             React.createElement("div", { className: b(null, className), ref: this.containerRef },
                 React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
-            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
-                React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
+            arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction) },
+                React.createElement(ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }))))));
     }
 }

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.15.0-alpha",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -138,5 +138,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }