@doyourjob/gravity-ui-page-constructor 5.31.248 → 5.31.250

package/build/cjs/blocks/Map/schema.d.ts

@@ -130,7 +130,7 @@ export declare const MapBlock: {
             mediaOnly: {
                 type: string;
             };
-            imageWidthAuto: {
+            imageMaxWidth: {
                 type: string;
             };
             disableShadow: {

package/build/cjs/blocks/Media/schema.d.ts

@@ -330,7 +330,7 @@ export declare const MediaBlockBaseProps: {
     mediaOnly: {
         type: string;
     };
-    imageWidthAuto: {
+    imageMaxWidth: {
         type: string;
     };
     /**
@@ -1214,7 +1214,7 @@ export declare const MediaBlock: {
             mediaOnly: {
                 type: string;
             };
-            imageWidthAuto: {
+            imageMaxWidth: {
                 type: string;
             };
             /**

package/build/cjs/blocks/Media/schema.js

@@ -27,8 +27,8 @@ exports.MediaBlockBaseProps = Object.assign(Object.assign(Object.assign(Object.a
         type: 'boolean',
     }, mediaOnly: {
         type: 'boolean',
-    }, imageWidthAuto: {
-        type: 'boolean',
+    }, imageMaxWidth: {
+        type: 'number',
     }, 
     /**
      * @deprecated use border='none' or border='line' instead

package/build/cjs/blocks/Scroller/Scroller.js

@@ -24,6 +24,65 @@ const scrollToChild = (content, child, behavior = 'smooth') => {
     const left = child.offsetLeft - (content.offsetWidth - child.offsetWidth) / 2;
     content.scrollTo({ left, behavior });
 };
+const MIDDLE_COPY = 1;
+const normalizeToMiddleCopy = (content, childCount) => {
+    const centeredIndex = getCenteredChildIndex(content);
+    const logicalIndex = centeredIndex % childCount;
+    const currentCopy = Math.floor(centeredIndex / childCount);
+    if (currentCopy === MIDDLE_COPY) {
+        return false;
+    }
+    const middleChild = getChild(content, childCount + logicalIndex);
+    if (middleChild) {
+        scrollToChild(content, middleChild, 'auto');
+    }
+    return true;
+};
+const getTargetPhysicalIndex = (centeredPhysicalIndex, targetLogicalIndex, childCount, preferForward) => {
+    const currentLogical = centeredPhysicalIndex % childCount;
+    const forwardSteps = (targetLogicalIndex - currentLogical + childCount) % childCount;
+    const backwardSteps = (currentLogical - targetLogicalIndex + childCount) % childCount;
+    if (preferForward || forwardSteps <= backwardSteps) {
+        if (forwardSteps === 0) {
+            return MIDDLE_COPY * childCount + targetLogicalIndex;
+        }
+        return centeredPhysicalIndex + forwardSteps;
+    }
+    if (backwardSteps === 0) {
+        return MIDDLE_COPY * childCount + targetLogicalIndex;
+    }
+    return centeredPhysicalIndex - backwardSteps;
+};
+const SCROLL_IDLE_MS = 200;
+const NORMALIZE_BEFORE_SNAP_MS = 100;
+const scrollToMiddleCopyIndex = (content, targetLogicalIndex, childCount) => {
+    const runScroll = () => {
+        const targetChild = getChild(content, childCount + targetLogicalIndex);
+        if (targetChild) {
+            scrollToChild(content, targetChild);
+        }
+    };
+    if (normalizeToMiddleCopy(content, childCount)) {
+        requestAnimationFrame(runScroll);
+        return;
+    }
+    runScroll();
+};
+const scrollToLogicalIndex = (content, targetLogicalIndex, childCount, preferForward) => {
+    const runScroll = () => {
+        const centeredIndex = getCenteredChildIndex(content);
+        const targetPhysical = getTargetPhysicalIndex(centeredIndex, targetLogicalIndex, childCount, preferForward);
+        const targetChild = getChild(content, targetPhysical);
+        if (targetChild) {
+            scrollToChild(content, targetChild);
+        }
+    };
+    if (normalizeToMiddleCopy(content, childCount)) {
+        requestAnimationFrame(runScroll);
+        return;
+    }
+    runScroll();
+};
 const PlayIcon = () => {
     return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", fill: "none" },
         react_1.default.createElement("path", { d: "M13.765 9.83831L20.3154 13.7086C21.2977 14.289 21.298 15.7102 20.3159 16.2911L13.7714 20.1618C12.7719 20.7529 11.5086 20.033 11.5078 18.8718L11.502 11.1309C11.5011 9.96894 12.7646 9.24725 13.765 9.83831Z", fill: "currentColor" })));
@@ -33,14 +92,17 @@ const PauseIcon = () => {
         react_1.default.createElement("path", { d: "M12.5 10C13.3284 10 14 10.6716 14 11.5V18.5C14 19.3284 13.3284 20 12.5 20C11.6716 20 11 19.3284 11 18.5V11.5C11 10.6716 11.6716 10 12.5 10ZM17.5 10C18.3284 10 19 10.6716 19 11.5V18.5C19 19.3284 18.3284 20 17.5 20C16.6716 20 16 19.3284 16 18.5V11.5C16 10.6716 16.6716 10 17.5 10Z", fill: "currentColor" })));
 };
 const ScrollerBlock = (props) => {
-    const { animated, widths, gapLong, fullWidth, scrollSnapCenter, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
+    const { animated, widths, gapLong, fullWidth, children, autoScroll = true, autoScrollInterval = 3000, infinite = false, } = props;
     const childCount = react_1.default.Children.count(children);
     const rootRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
     const [currentElement, setCurrentElement] = (0, react_1.useState)(0);
     const [isPaused, setIsPaused] = (0, react_1.useState)(true);
     const [scrollInProgress, setScrollInProgress] = (0, react_1.useState)(false);
-    const scrollIntervalRef = (0, react_1.useRef)(null);
+    const scrollIdleTimeoutRef = (0, react_1.useRef)(null);
+    const normalizeSettleTimeoutRef = (0, react_1.useRef)(null);
+    const scrollInProgressRef = (0, react_1.useRef)(false);
+    const isNormalizingRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         const content = contentRef.current;
         const root = rootRef.current;
@@ -86,6 +148,15 @@ const ScrollerBlock = (props) => {
             }
         };
         const handleInfiniteScroll = () => {
+            if (isNormalizingRef.current) {
+                return;
+            }
+            const wasNotInProgress = !scrollInProgressRef.current;
+            if (wasNotInProgress) {
+                isNormalizingRef.current = true;
+                normalizeToMiddleCopy(content, childCount);
+                isNormalizingRef.current = false;
+            }
             const scrollLeft = content.scrollLeft;
             const endCopyChild = getChild(content, endCopyStartIndex);
             const copyStartChild = getChild(content, copyStartIndex);
@@ -102,18 +173,34 @@ const ScrollerBlock = (props) => {
                     content.scrollTo(endChild.offsetLeft - content.clientWidth, 0);
                 }
             }
+            scrollInProgressRef.current = true;
             setScrollInProgress(true);
-            if (scrollIntervalRef.current) {
-                clearTimeout(scrollIntervalRef.current);
+            if (scrollIdleTimeoutRef.current) {
+                clearTimeout(scrollIdleTimeoutRef.current);
             }
-            scrollIntervalRef.current = setTimeout(() => {
-                setScrollInProgress(false);
-            }, 200);
+            if (normalizeSettleTimeoutRef.current) {
+                clearTimeout(normalizeSettleTimeoutRef.current);
+            }
+            scrollIdleTimeoutRef.current = setTimeout(() => {
+                isNormalizingRef.current = true;
+                normalizeToMiddleCopy(content, childCount);
+                isNormalizingRef.current = false;
+                normalizeSettleTimeoutRef.current = setTimeout(() => {
+                    scrollInProgressRef.current = false;
+                    setScrollInProgress(false);
+                }, NORMALIZE_BEFORE_SNAP_MS);
+            }, SCROLL_IDLE_MS);
         };
         content.addEventListener('scroll', handleInfiniteScroll, { passive: true });
         scrollToMiddle();
         return () => {
             content.removeEventListener('scroll', handleInfiniteScroll);
+            if (scrollIdleTimeoutRef.current) {
+                clearTimeout(scrollIdleTimeoutRef.current);
+            }
+            if (normalizeSettleTimeoutRef.current) {
+                clearTimeout(normalizeSettleTimeoutRef.current);
+            }
         };
     }, [infinite, childCount]);
     (0, react_1.useEffect)(() => {
@@ -127,11 +214,8 @@ const ScrollerBlock = (props) => {
             return;
         }
         if (infinite) {
-            const centeredIndex = getCenteredChildIndex(content);
-            const nextElement = getChild(content, centeredIndex + 1);
-            if (nextElement) {
-                scrollToChild(content, nextElement);
-            }
+            const nextLogical = ((getCenteredChildIndex(content) % childCount) + 1) % childCount;
+            scrollToLogicalIndex(content, nextLogical, childCount, true);
             return;
         }
         const nextIndex = (currentElement + 1) % childCount;
@@ -140,7 +224,7 @@ const ScrollerBlock = (props) => {
             scrollToChild(content, nextElement);
         }
     }, [childCount, currentElement, infinite]);
-    const scrollToIndex = (0, react_1.useCallback)((targetIndex) => {
+    const scrollToPaginationIndex = (0, react_1.useCallback)((targetIndex) => {
         if (autoScroll) {
             setIsPaused(true);
         }
@@ -155,27 +239,26 @@ const ScrollerBlock = (props) => {
             }
             return;
         }
-        const centeredIndex = getCenteredChildIndex(content);
-        const currentCopy = Math.floor(centeredIndex / childCount);
-        const logicalIndex = centeredIndex % childCount;
-        const middleCopy = 1;
-        const scrollToTargetInMiddleCopy = () => {
-            const targetChild = getChild(content, childCount + targetIndex);
-            if (targetChild) {
-                scrollToChild(content, targetChild);
-            }
-        };
-        if (currentCopy !== middleCopy) {
-            const middleChild = getChild(content, childCount + logicalIndex);
-            if (middleChild) {
-                const left = middleChild.offsetLeft -
-                    (content.offsetWidth - middleChild.offsetWidth) / 2;
-                content.scrollTo({ left, behavior: 'auto' });
+        scrollToMiddleCopyIndex(content, targetIndex, childCount);
+    }, [autoScroll, childCount, infinite]);
+    const scrollToItemIndex = (0, react_1.useCallback)((targetIndex) => {
+        if (autoScroll) {
+            setIsPaused(true);
+        }
+        const content = contentRef.current;
+        if (!content || childCount <= 1 || targetIndex < 0 || targetIndex >= childCount) {
+            return;
+        }
+        if (!infinite) {
+            const child = getChild(content, targetIndex);
+            if (child) {
+                scrollToChild(content, child);
             }
-            requestAnimationFrame(scrollToTargetInMiddleCopy);
             return;
         }
-        scrollToTargetInMiddleCopy();
+        const logicalIndex = getCenteredChildIndex(content) % childCount;
+        const isNext = targetIndex === (logicalIndex + 1) % childCount;
+        scrollToLogicalIndex(content, targetIndex, childCount, isNext);
     }, [autoScroll, childCount, infinite]);
     (0, react_1.useEffect)(() => {
         let timeout = null;
@@ -195,23 +278,23 @@ const ScrollerBlock = (props) => {
             react_1.default.createElement("div", { className: b('content', {
                     gapLong,
                     fullWidth,
-                    'scroll-snap-center': infinite ? !scrollInProgress : scrollSnapCenter,
+                    'scroll-snap-center': infinite ? !scrollInProgress : true,
                 }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
                 .map((mi) => react_1.default.Children.map(children, (child, index) => {
                 const physicalIndex = mi * childCount + index;
-                return (react_1.default.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToIndex(index), onKeyDown: (event) => {
+                return (react_1.default.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToItemIndex(index), onKeyDown: (event) => {
                         if (event.key === 'Enter' || event.key === ' ') {
                             event.preventDefault();
-                            scrollToIndex(index);
+                            scrollToItemIndex(index);
                         }
                     } }, child));
             }))
                 .flat())),
         childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
-            react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToIndex(index), onKeyDown: (event) => {
+            react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToPaginationIndex(index), onKeyDown: (event) => {
                     if (event.key === 'Enter' || event.key === ' ') {
                         event.preventDefault();
-                        scrollToIndex(index);
+                        scrollToPaginationIndex(index);
                     }
                 } }, autoScroll && (react_1.default.createElement("div", { style: {
                     transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,

package/build/cjs/blocks/Scroller/schema.d.ts

@@ -2,9 +2,6 @@ export declare const ScrollerControlsProps: {
     infinite: {
         type: string;
     };
-    scrollSnapCenter: {
-        type: string;
-    };
     autoScroll: {
         type: string;
     };
@@ -26,9 +23,6 @@ export declare const ScrollerBlock: {
             infinite: {
                 type: string;
             };
-            scrollSnapCenter: {
-                type: string;
-            };
             autoScroll: {
                 type: string;
             };

package/build/cjs/blocks/Scroller/schema.js

@@ -6,9 +6,6 @@ exports.ScrollerControlsProps = {
     infinite: {
         type: 'boolean',
     },
-    scrollSnapCenter: {
-        type: 'boolean',
-    },
     autoScroll: {
         type: 'boolean',
     },

package/build/cjs/blocks/WhatsNew/WhatsNew.js

@@ -7,12 +7,12 @@ const NewsCard_1 = tslib_1.__importDefault(require("../../sub-blocks/NewsCard/Ne
 const utils_1 = require("../../utils");
 const Scroller_1 = tslib_1.__importDefault(require("../Scroller/Scroller"));
 const b = (0, utils_1.block)('whats-new-block');
-const WhatsNew = ({ title, items, footnote, links, animated, infinite, scrollSnapCenter, autoScroll, autoScrollInterval, }) => {
+const WhatsNew = ({ title, items, footnote, links, animated, infinite, autoScroll, autoScrollInterval, }) => {
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement("div", { className: b('root') },
             title && (react_1.default.createElement("div", { className: b('head') },
                 react_1.default.createElement("h2", { className: b('title') }, title))),
-            react_1.default.createElement(Scroller_1.default, { fullWidth: true, infinite: infinite, scrollSnapCenter: scrollSnapCenter, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
+            react_1.default.createElement(Scroller_1.default, { fullWidth: true, infinite: infinite, autoScroll: autoScroll !== null && autoScroll !== void 0 ? autoScroll : true, autoScrollInterval: autoScrollInterval }, items.map((item, index) => (react_1.default.createElement(NewsCard_1.default, Object.assign({ key: index }, item))))),
             (footnote || (links === null || links === void 0 ? void 0 : links.length)) && (react_1.default.createElement("div", { className: b('footer') },
                 footnote && react_1.default.createElement("div", { className: b('footnote') }, footnote),
                 (links === null || links === void 0 ? void 0 : links.length) ? (react_1.default.createElement("div", { className: b('links') }, links.map((link, index) => (react_1.default.createElement("a", { key: index, href: link.url, className: b('link'), target: "_blank", rel: "noopener noreferrer" },

package/build/cjs/blocks/WhatsNew/schema.d.ts

@@ -59,9 +59,6 @@ export declare const WhatsNewBlock: {
             infinite: {
                 type: string;
             };
-            scrollSnapCenter: {
-                type: string;
-            };
             autoScroll: {
                 type: string;
             };

package/build/cjs/components/MediaBase/MediaBase.css

@@ -16,11 +16,6 @@ unpredictable css rules order in build */
 .pc-media-base__card img {
   width: 100%;
 }
-@media (min-width: 769px) {
-  .pc-media-base__card_imageWidthAuto img {
-    width: auto;
-  }
-}
 .pc-media-base__card img,
 .pc-media-base__card video,
 .pc-media-base__card iframe,

package/build/cjs/components/MediaBase/MediaBase.js

@@ -11,7 +11,7 @@ const MediaBaseContent_1 = tslib_1.__importDefault(require("./MediaBaseContent")
 const b = (0, utils_1.block)('media-base');
 const Card = () => null;
 const MediaBase = (props) => {
-    const { children, largeMedia, smallMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, imageWidthAuto, onScroll, mediaOnlyColSizes = { all: 12, md: 8 } } = props, mediaContentProps = tslib_1.__rest(props, ["children", "largeMedia", "smallMedia", "direction", "mobileDirection", "animated", "mediaOnly", "imageWidthAuto", "onScroll", "mediaOnlyColSizes"]);
+    const { children, largeMedia, smallMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, imageMaxWidth, onScroll, mediaOnlyColSizes = { all: 12, md: 8 } } = props, mediaContentProps = tslib_1.__rest(props, ["children", "largeMedia", "smallMedia", "direction", "mobileDirection", "animated", "mediaOnly", "imageMaxWidth", "onScroll", "mediaOnlyColSizes"]);
     const { title, description } = mediaContentProps;
     const mediaSizes = (0, react_1.useMemo)(() => {
         let md = 6;
@@ -47,7 +47,7 @@ const MediaBase = (props) => {
                     }) },
                     react_1.default.createElement(grid_1.Col, { className: b('content'), sizes: contentSizes }, mediaContent),
                     card ? (react_1.default.createElement(grid_1.Col, { sizes: mediaSizes },
-                        react_1.default.createElement("div", { className: b('card', { imageWidthAuto }) }, card))) : null)))));
+                        react_1.default.createElement("div", { className: b('card'), style: imageMaxWidth ? { maxWidth: `${imageMaxWidth}px` } : {} }, card))) : null)))));
 };
 exports.MediaBase = MediaBase;
 exports.MediaBase.Card = Card;

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -363,7 +363,6 @@ export interface ScrollerBlockProps extends Animatable {
     gapLong?: boolean;
     fullWidth?: boolean;
     infinite?: boolean;
-    scrollSnapCenter?: boolean;
     autoScroll?: boolean;
     autoScrollInterval?: number;
 }
@@ -378,7 +377,7 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     largeMedia?: boolean;
     smallMedia?: boolean;
     mediaOnly?: boolean;
-    imageWidthAuto?: boolean;
+    imageMaxWidth?: number;
     mediaOnlyColSizes?: GridColumnSizesType;
 }
 export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
@@ -647,7 +646,7 @@ export interface BenchmarkBlockProps extends Animatable {
         postfix?: string;
     }[];
 }
-export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'scrollSnapCenter' | 'autoScroll' | 'autoScrollInterval'> {
+export interface WhatsNewBlockProps extends Animatable, Pick<ScrollerBlockProps, 'infinite' | 'autoScroll' | 'autoScrollInterval'> {
     title?: string;
     items: NewsCardProps[];
     footnote?: string;

package/build/esm/blocks/Map/schema.d.ts

@@ -130,7 +130,7 @@ export declare const MapBlock: {
             mediaOnly: {
                 type: string;
             };
-            imageWidthAuto: {
+            imageMaxWidth: {
                 type: string;
             };
             disableShadow: {

package/build/esm/blocks/Media/schema.d.ts

@@ -330,7 +330,7 @@ export declare const MediaBlockBaseProps: {
     mediaOnly: {
         type: string;
     };
-    imageWidthAuto: {
+    imageMaxWidth: {
         type: string;
     };
     /**
@@ -1214,7 +1214,7 @@ export declare const MediaBlock: {
             mediaOnly: {
                 type: string;
             };
-            imageWidthAuto: {
+            imageMaxWidth: {
                 type: string;
             };
             /**

package/build/esm/blocks/Media/schema.js

@@ -23,8 +23,8 @@ export const MediaBlockBaseProps = Object.assign(Object.assign(Object.assign(Obj
         type: 'boolean',
     }, mediaOnly: {
         type: 'boolean',
-    }, imageWidthAuto: {
-        type: 'boolean',
+    }, imageMaxWidth: {
+        type: 'number',
     }, 
     /**
      * @deprecated use border='none' or border='line' instead