@doyourjob/gravity-ui-page-constructor 5.31.101 → 5.31.103

package/build/cjs/blocks/SliderNew/Slider.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import type { SwiperProps } from 'swiper/react';
+import { Swiper as SwiperReact } from 'swiper/react';
 import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
 import 'swiper/swiper-bundle.css';
-export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperProps, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
+export type { Swiper, SwiperOptions } from 'swiper';
+export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperReact, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
     type?: string;
     anchorId?: string;
     dotsClassName?: string;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SliderNewBlock = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const modules_1 = require("swiper/modules");
+const swiper_1 = tslib_1.__importStar(require("swiper"));
 const react_1 = require("swiper/react");
 const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
@@ -16,8 +16,10 @@ const useSlider_1 = require("./useSlider");
 const useSliderPagination_1 = require("./useSliderPagination");
 require("swiper/swiper-bundle.css");
 const b = (0, utils_1.block)('slider-new-block');
+// eslint-disable-next-line react-hooks/rules-of-hooks
+swiper_1.default.use([swiper_1.Autoplay, swiper_1.A11y, swiper_1.Pagination]);
 const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, infinite = false, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
-    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, handleSwiperInit, onPrev, onNext, setIsLocked, } = (0, useSlider_1.useSlider)({
+    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onImagesReady, onPrev, onNext, setIsLocked, } = (0, useSlider_1.useSlider)({
         slidesToShow,
         children,
         type,
@@ -44,13 +46,14 @@ const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows =
         anchorId && React.createElement(Anchor_1.default, { id: anchorId }),
         React.createElement(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
         React.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated },
-            React.createElement(react_1.Swiper, Object.assign({ modules: [modules_1.Autoplay, modules_1.A11y, modules_1.Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onInit: handleSwiperInit, watchSlidesProgress: true, watchOverflow: true, a11y: {
+            React.createElement(react_1.Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onImagesReady: onImagesReady, watchSlidesVisibility: true, watchOverflow: true, a11y: {
                     slideLabelMessage: '',
                     paginationBulletMessage: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
                 } }, paginationProps), React.Children.map(children, (elem, index) => (React.createElement(react_1.SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (React.createElement("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
-            arrows && !isLocked && (React.createElement("div", { "aria-hidden": isA11yControlHidden },
-                React.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
-                React.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }))),
+            arrows && !isLocked && (React.createElement(React.Fragment, null,
+                React.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    React.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    React.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
             React.createElement("div", { className: b('footer') }, disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
 };
 exports.SliderNewBlock = SliderNewBlock;

package/build/cjs/blocks/SliderNew/useSlider.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Swiper } from 'swiper';
 import { SlidesToShow } from '../../models';
 type UseSliderProps = React.PropsWithChildren<{
     autoplayMs?: number;
@@ -6,12 +7,12 @@ type UseSliderProps = React.PropsWithChildren<{
     slidesToShow?: SlidesToShow;
 }>;
 export declare const useSlider: ({ children, autoplayMs, type, ...props }: UseSliderProps) => {
-    slider: any;
-    onSwiper: React.Dispatch<any>;
+    slider: Swiper | undefined;
+    onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
     onNext: () => void;
     onPrev: () => void;
-    handleSwiperInit: (swiper: Swiper) => void;
-    breakpoints: Record<number, import("swiper/types/swiper-options").SwiperOptions>;
+    onImagesReady: (localSlider: Swiper) => void;
+    breakpoints: Record<number, import("swiper").SwiperOptions>;
     childrenCount: number;
     isLocked: boolean;
     setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;

package/build/cjs/blocks/SliderNew/useSlider.js

@@ -39,12 +39,11 @@ const useSlider = (_a) => {
         }
         slider.slidePrev();
     };
-    const handleSwiperInit = (swiper) => {
-        setSlider(swiper);
-        setTimeout(() => swiper.update(), 100);
-    };
+    const handleImagesReady = React.useCallback((localSlider) => {
+        setTimeout(() => localSlider.update(), 100);
+    }, []);
     React.useEffect(() => {
-        if (!slider || !slider.autoplay) {
+        if (!slider) {
             return;
         }
         if (autoplayEnabled) {
@@ -59,7 +58,7 @@ const useSlider = (_a) => {
         onSwiper: setSlider,
         onNext: handleNext,
         onPrev: handlePrev,
-        handleSwiperInit,
+        onImagesReady: handleImagesReady,
         breakpoints,
         childrenCount,
         isLocked,

package/build/cjs/blocks/SliderNew/useSliderPagination.d.ts

@@ -1,4 +1,4 @@
-import type { SwiperProps } from 'swiper/react';
+import { Swiper as SwiperProps } from 'swiper/swiper-react';
 export declare const useSliderPagination: (props: {
     enabled: boolean;
     isA11yControlHidden: boolean;

package/build/esm/blocks/SliderNew/Slider.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import type { SwiperProps } from 'swiper/react';
+import { Swiper as SwiperReact } from 'swiper/react';
 import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
 import './Slider.css';
 import 'swiper/swiper-bundle.css';
-export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperProps, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
+export type { Swiper, SwiperOptions } from 'swiper';
+export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<SwiperReact, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
     type?: string;
     anchorId?: string;
     dotsClassName?: string;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { A11y, Autoplay, Pagination } from 'swiper/modules';
+import Swiper, { A11y, Autoplay, Pagination } from 'swiper';
 import { Swiper as SwiperReact, SwiperSlide } from 'swiper/react';
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
@@ -13,8 +13,10 @@ import { useSliderPagination } from './useSliderPagination';
 import './Slider.css';
 import 'swiper/swiper-bundle.css';
 const b = block('slider-new-block');
+// eslint-disable-next-line react-hooks/rules-of-hooks
+Swiper.use([Autoplay, A11y, Pagination]);
 export const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, infinite = false, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
-    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, handleSwiperInit, onPrev, onNext, setIsLocked, } = useSlider({
+    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onImagesReady, onPrev, onNext, setIsLocked, } = useSlider({
         slidesToShow,
         children,
         type,
@@ -41,13 +43,14 @@ export const SliderNewBlock = ({ animated, title, description, type, anchorId, a
         anchorId && React.createElement(Anchor, { id: anchorId }),
         React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
         React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated },
-            React.createElement(SwiperReact, Object.assign({ modules: [Autoplay, A11y, Pagination], className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onInit: handleSwiperInit, watchSlidesProgress: true, watchOverflow: true, a11y: {
+            React.createElement(SwiperReact, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 700, autoplay: autoplay, loop: infinite, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, slidesOffsetBefore: 24, slidesOffsetAfter: 24, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), onImagesReady: onImagesReady, watchSlidesVisibility: true, watchOverflow: true, a11y: {
                     slideLabelMessage: '',
                     paginationBulletMessage: i18n('dot-label', { index: '{{index}}' }),
                 } }, paginationProps), React.Children.map(children, (elem, index) => (React.createElement(SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (React.createElement("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
-            arrows && !isLocked && (React.createElement("div", { "aria-hidden": isA11yControlHidden },
-                React.createElement(Arrow, { className: b('arrow', { prev: true }), type: "left", transparent: type === SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
-                React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", transparent: type === SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }))),
+            arrows && !isLocked && (React.createElement(React.Fragment, null,
+                React.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    React.createElement(Arrow, { className: b('arrow', { prev: true }), type: "left", transparent: type === SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", transparent: type === SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
             React.createElement("div", { className: b('footer') }, disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
 };
 export default SliderNewBlock;

package/build/esm/blocks/SliderNew/useSlider.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Swiper } from 'swiper';
 import { SlidesToShow } from '../../models';
 type UseSliderProps = React.PropsWithChildren<{
     autoplayMs?: number;
@@ -6,12 +7,12 @@ type UseSliderProps = React.PropsWithChildren<{
     slidesToShow?: SlidesToShow;
 }>;
 export declare const useSlider: ({ children, autoplayMs, type, ...props }: UseSliderProps) => {
-    slider: any;
-    onSwiper: React.Dispatch<any>;
+    slider: Swiper | undefined;
+    onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
     onNext: () => void;
     onPrev: () => void;
-    handleSwiperInit: (swiper: Swiper) => void;
-    breakpoints: Record<number, import("swiper/types/swiper-options").SwiperOptions>;
+    onImagesReady: (localSlider: Swiper) => void;
+    breakpoints: Record<number, import("swiper").SwiperOptions>;
     childrenCount: number;
     isLocked: boolean;
     setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;

package/build/esm/blocks/SliderNew/useSlider.js

@@ -36,12 +36,11 @@ export const useSlider = (_a) => {
         }
         slider.slidePrev();
     };
-    const handleSwiperInit = (swiper) => {
-        setSlider(swiper);
-        setTimeout(() => swiper.update(), 100);
-    };
+    const handleImagesReady = React.useCallback((localSlider) => {
+        setTimeout(() => localSlider.update(), 100);
+    }, []);
     React.useEffect(() => {
-        if (!slider || !slider.autoplay) {
+        if (!slider) {
             return;
         }
         if (autoplayEnabled) {
@@ -56,7 +55,7 @@ export const useSlider = (_a) => {
         onSwiper: setSlider,
         onNext: handleNext,
         onPrev: handlePrev,
-        handleSwiperInit,
+        onImagesReady: handleImagesReady,
         breakpoints,
         childrenCount,
         isLocked,

package/build/esm/blocks/SliderNew/useSliderPagination.d.ts

@@ -1,4 +1,4 @@
-import type { SwiperProps } from 'swiper/react';
+import { Swiper as SwiperProps } from 'swiper/swiper-react';
 export declare const useSliderPagination: (props: {
     enabled: boolean;
     isA11yControlHidden: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.101",
+  "version": "5.31.103",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -113,7 +113,7 @@
     "react-waypoint": "^10.1.0",
     "sanitize-html": "2.12.1",
     "snakecase-keys": "^5.1.0",
-    "swiper": "v11.2.10",
+    "swiper": "^6.8.4",
     "typograf": "^6.14.0",
     "utility-types": "^3.10.0",
     "uuid": "^9.0.0"
@@ -183,7 +183,6 @@
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jest-transform-css": "^6.0.0",
-    "jest-transform-stub": "^2.0.0",
     "js-yaml": "^4.1.0",
     "lint-staged": "^11.2.6",
     "markdown-loader": "^6.0.0",