@gravity-ui/page-constructor 5.16.1 → 5.17.0

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

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { Swiper } 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<Swiper, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
+    type?: string;
+    anchorId?: string;
+    dotsClassName?: string;
+    blockClassName?: string;
+    arrowSize?: number;
+}
+export declare const SliderNewBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: PropsWithChildren<SliderNewProps>) => JSX.Element;
+export default SliderNewBlock;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderNewBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const swiper_1 = tslib_1.__importStar(require("swiper"));
+const react_2 = require("swiper/react");
+const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
+const utils_1 = require("../../utils");
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow"));
+const useSlider_1 = require("./useSlider");
+require("swiper/swiper-bundle.css");
+const b = (0, utils_1.block)('SliderNewBlock');
+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, dots = true, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
+    const { childrenCount, breakpoints, autoplay, onSwiper, onPrev, onNext, isLocked, setIsLocked } = (0, useSlider_1.useSlider)({
+        slidesToShow,
+        children,
+        type,
+        autoplayMs,
+    });
+    return (react_1.default.createElement("div", { className: b({
+            'one-slide': childrenCount === 1,
+            'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
+            'without-dots': !dots || isLocked,
+            type,
+        }, blockClassName) },
+        anchorId && react_1.default.createElement(Anchor_1.default, { id: anchorId }),
+        react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
+        react_1.default.createElement(AnimateBlock_1.default, { className: b('animate-slides'), animate: animated },
+            react_1.default.createElement(react_2.Swiper, { className: b('slider'), onSwiper: onSwiper, pagination: dots && {
+                    clickable: true,
+                    bulletClass: b('dot', dotsClassName),
+                    bulletActiveClass: b('dot_active'),
+                }, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 0, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), watchSlidesVisibility: true, watchOverflow: true }, react_1.default.Children.map(children, (elem, index) => (react_1.default.createElement(react_2.SwiperSlide, { className: b('slide'), key: index }, elem)))),
+            arrows && !isLocked && (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize }),
+                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize }))),
+            react_1.default.createElement("div", { className: b('footer') }, disclaimer ? (react_1.default.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;
+exports.default = exports.SliderNewBlock;

package/build/cjs/blocks/SliderNew/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Next",
+  "arrow-left": "Previous"
+}

package/build/cjs/blocks/SliderNew/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "arrow-right" | "arrow-left", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/blocks/SliderNew/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}SliderNewBlock`);

package/build/cjs/blocks/SliderNew/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "arrow-right": "Дальше",
+  "arrow-left": "Назад"
+}

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

@@ -0,0 +1,8 @@
+export declare enum SliderBreakpointNames {
+    Xs = "xs",
+    Sm = "sm",
+    Md = "md",
+    Lg = "lg"
+}
+export type SliderBreakpointParams = Record<SliderBreakpointNames, number>;
+export type SlidesToShow = Partial<SliderBreakpointParams> | number;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderBreakpointNames = void 0;
+var SliderBreakpointNames;
+(function (SliderBreakpointNames) {
+    SliderBreakpointNames["Xs"] = "xs";
+    SliderBreakpointNames["Sm"] = "sm";
+    SliderBreakpointNames["Md"] = "md";
+    SliderBreakpointNames["Lg"] = "lg";
+})(SliderBreakpointNames = exports.SliderBreakpointNames || (exports.SliderBreakpointNames = {}));

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

@@ -0,0 +1,253 @@
+export declare const SliderNewProps: {
+    dots: {
+        type: string;
+    };
+    arrows: {
+        type: string;
+    };
+    randomOrder: {
+        type: string;
+    };
+    autoplay: {
+        type: string;
+    };
+    type: {
+        type: string;
+    };
+    adaptive: {
+        type: string;
+    };
+    arrowSize: {
+        type: string;
+    };
+    animated: {
+        animated: {
+            type: string;
+        };
+    };
+    slidesToShow: {
+        oneOf: ({
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+            optionName: string;
+        } | {
+            type: string;
+            optionName: string;
+            additionalProperties?: undefined;
+            properties?: undefined;
+        })[];
+    };
+    disclaimer: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            text: {
+                type: string;
+                contentType: string;
+            };
+            size: {
+                type: string;
+                enum: string[];
+            };
+        };
+    };
+    loadable: {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            source: {
+                type: string;
+            };
+            /**
+             * @deprecated
+             */
+            minCount: {
+                type: string;
+            };
+            params: {
+                type: string;
+                patternProperties: {
+                    '.*': {
+                        type: string[];
+                    };
+                };
+            };
+        };
+        disabled: boolean;
+    };
+    children: {
+        type: string;
+        items: {
+            $ref: string;
+        };
+    };
+};
+export declare const SliderNewBlock: {
+    'slider-new-block': {
+        additionalProperties: boolean;
+        required: never[];
+        properties: {
+            title: {
+                oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            dots: {
+                type: string;
+            };
+            arrows: {
+                type: string;
+            };
+            randomOrder: {
+                type: string;
+            };
+            autoplay: {
+                type: string;
+            };
+            type: {
+                type: string;
+            };
+            adaptive: {
+                type: string;
+            };
+            arrowSize: {
+                type: string;
+            };
+            animated: {
+                animated: {
+                    type: string;
+                };
+            };
+            slidesToShow: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    properties: {};
+                    optionName: string;
+                } | {
+                    type: string;
+                    optionName: string;
+                    additionalProperties?: undefined;
+                    properties?: undefined;
+                })[];
+            };
+            disclaimer: {
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    size: {
+                        type: string;
+                        enum: string[];
+                    };
+                };
+            };
+            loadable: {
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    source: {
+                        type: string;
+                    };
+                    /**
+                     * @deprecated
+                     */
+                    minCount: {
+                        type: string;
+                    };
+                    params: {
+                        type: string;
+                        patternProperties: {
+                            '.*': {
+                                type: string[];
+                            };
+                        };
+                    };
+                };
+                disabled: boolean;
+            };
+            children: {
+                type: string;
+                items: {
+                    $ref: string;
+                };
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    urlTitle: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
+            when: {
+                type: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderNewBlock = exports.SliderNewProps = void 0;
+const common_1 = require("../../schema/validators/common");
+const LoadableProps = {
+    additionalProperties: false,
+    required: ['source'],
+    properties: {
+        source: {
+            type: 'string',
+            // add loadable sources here if you use it in your project
+            // enum: ['my-loadable-source-1', 'my-loadable-source-1'],
+        },
+        /**
+         * @deprecated
+         */
+        minCount: {
+            type: 'number',
+        },
+        params: {
+            type: 'object',
+            patternProperties: {
+                '.*': {
+                    type: ['string', 'number', 'boolean'],
+                },
+            },
+        },
+    },
+    // remove it in your custom validator schema if you use loadable
+    disabled: true,
+};
+const DisclaimerProps = {
+    additionalProperties: false,
+    required: ['text'],
+    properties: {
+        text: {
+            type: 'string',
+            contentType: 'text',
+        },
+        size: {
+            type: 'string',
+            enum: common_1.textSize,
+        },
+    },
+};
+exports.SliderNewProps = {
+    dots: {
+        type: 'boolean',
+    },
+    arrows: {
+        type: 'boolean',
+    },
+    randomOrder: {
+        type: 'boolean',
+    },
+    autoplay: {
+        type: 'number',
+    },
+    type: {
+        type: 'string',
+    },
+    adaptive: {
+        type: 'boolean',
+    },
+    arrowSize: {
+        type: 'number',
+    },
+    animated: common_1.AnimatableProps,
+    slidesToShow: common_1.sliderSizesObject,
+    disclaimer: DisclaimerProps,
+    loadable: LoadableProps,
+    children: common_1.ChildrenCardsProps,
+};
+exports.SliderNewBlock = {
+    'slider-new-block': {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.SliderNewProps), common_1.BlockHeaderProps),
+    },
+};

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

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import type { Swiper } from 'swiper';
+import { SlidesToShow } from '../../models';
+export declare const useSlider: ({ children, autoplayMs, type, slidesToShow, }: React.PropsWithChildren<{
+    autoplayMs?: number | undefined;
+    type?: string | undefined;
+    slidesToShow?: SlidesToShow | undefined;
+}>) => {
+    slider: Swiper | undefined;
+    onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
+    onNext: () => void;
+    onPrev: () => void;
+    breakpoints: Record<number, import("swiper").SwiperOptions>;
+    childrenCount: number;
+    isLocked: boolean;
+    setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;
+    autoplay: false | {
+        delay: number | undefined;
+    };
+};

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlider = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const models_1 = require("../../models");
+const utils_1 = require("./utils");
+const useSlider = ({ children, autoplayMs, type, slidesToShow, }) => {
+    const [slider, setSlider] = (0, react_1.useState)();
+    const [isLocked, setIsLocked] = (0, react_1.useState)(false);
+    const childrenCount = react_1.default.Children.count(children);
+    const autoplayEnabled = (0, react_1.useMemo)(() => Boolean(autoplayMs), [autoplayMs]);
+    const breakpoints = (0, react_1.useMemo)(() => {
+        return (0, utils_1.getSliderResponsiveParams)({
+            contentLength: childrenCount,
+            slidesToShow,
+            mobileFullscreen: Boolean(type && Object.values(models_1.SliderType).includes(type)),
+        });
+    }, [slidesToShow, type, childrenCount]);
+    const handleNext = () => {
+        if (!slider) {
+            return;
+        }
+        if (slider.isEnd) {
+            slider.slideTo(0);
+            return;
+        }
+        slider.slideNext();
+    };
+    const handlePrev = () => {
+        if (!slider) {
+            return;
+        }
+        if (slider.isBeginning) {
+            slider.slideTo(childrenCount - 1);
+            return;
+        }
+        slider.slidePrev();
+    };
+    (0, react_1.useEffect)(() => {
+        if (!slider) {
+            return;
+        }
+        if (autoplayEnabled) {
+            slider.autoplay.start();
+        }
+        else {
+            slider.autoplay.stop();
+        }
+    }, [slider, autoplayEnabled]);
+    return {
+        slider,
+        onSwiper: setSlider,
+        onNext: handleNext,
+        onPrev: handlePrev,
+        breakpoints,
+        childrenCount,
+        isLocked,
+        setIsLocked,
+        autoplay: autoplayEnabled && {
+            delay: autoplayMs,
+        },
+    };
+};
+exports.useSlider = useSlider;

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

@@ -0,0 +1,14 @@
+import type { SwiperOptions } from 'swiper/types/swiper-options';
+import { SlidesToShow } from './models';
+export declare const DEFAULT_SLIDE_BREAKPOINTS: {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export interface GetSlidesToShowParams {
+    contentLength: number;
+    slidesToShow?: SlidesToShow;
+    mobileFullscreen?: boolean;
+}
+export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+const tslib_1 = require("tslib");
+const pickBy_1 = tslib_1.__importDefault(require("lodash/pickBy"));
+const constants_1 = require("../../constants");
+const models_1 = require("./models");
+exports.DEFAULT_SLIDE_BREAKPOINTS = {
+    [models_1.SliderBreakpointNames.Lg]: 3,
+    [models_1.SliderBreakpointNames.Md]: 2,
+    [models_1.SliderBreakpointNames.Sm]: 2,
+    [models_1.SliderBreakpointNames.Xs]: 1.15,
+};
+function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
+    let result;
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
+    }
+    else {
+        result = slidesToShow || exports.DEFAULT_SLIDE_BREAKPOINTS;
+    }
+    const showCount = Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), (0, pickBy_1.default)(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
+    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
+        // eslint-disable-next-line no-param-reassign
+        res[constants_1.BREAKPOINTS[breakpointName] + 1] = {
+            slidesPerView: value,
+        };
+        return res;
+    }, {});
+}
+exports.getSliderResponsiveParams = getSliderResponsiveParams;

package/build/cjs/blocks/unstable.d.ts

@@ -0,0 +1 @@
+export { default as SliderNewBlock } from './SliderNew/Slider';

package/build/cjs/blocks/unstable.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderNewBlock = void 0;
+var Slider_1 = require("./SliderNew/Slider");
+Object.defineProperty(exports, "SliderNewBlock", { enumerable: true, get: function () { return __importDefault(Slider_1).default; } });

package/build/cjs/components/CardBase/CardBase.css

@@ -26,6 +26,9 @@ unpredictable css rules order in build */
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
   }
+  .swiper-slide:not(.swiper-slide-visible) .pc-card-base-block {
+    box-shadow: none;
+  }
 }
 .pc-card-base-block__header {
   position: relative;

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

@@ -18,6 +18,7 @@ export declare const blockMap: {
     "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
     "filter-block": import("react").FC<import("./models").FilterBlockProps>;
     "form-block": import("react").FC<import("./models").FormBlockProps>;
+    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
 const tslib_1 = require("tslib");
 const blocks_1 = require("./blocks");
+const unstable_1 = require("./blocks/unstable");
 const models_1 = require("./models");
 const NavigationItem_1 = require("./navigation/components/NavigationItem");
 const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
@@ -27,6 +28,8 @@ exports.blockMap = {
     [models_1.BlockType.MapBlock]: blocks_1.MapBlock,
     [models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
     [models_1.BlockType.FormBlock]: blocks_1.FormBlock,
+    // unstable
+    [models_1.BlockType.SliderNewBlock]: unstable_1.SliderNewBlock,
 };
 exports.subBlockMap = {
     [models_1.SubBlockType.Divider]: sub_blocks_1.Divider,