@gravity-ui/page-constructor 1.0.0

package/build/esm/blocks/Slider/Slider.css

@@ -0,0 +1,325 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-SliderBlock .slick-list {
+  padding: 24px 0 20px;
+  margin: 0 -8px;
+}
+.pc-SliderBlock .slick-slide {
+  padding: 0 8px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.pc-SliderBlock .slick-track {
+  display: flex;
+  min-width: 100%;
+}
+.pc-SliderBlock .slick-track .slick-slide {
+  height: auto;
+}
+.pc-SliderBlock .slick-track .slick-slide > div {
+  height: 100%;
+}
+.pc-SliderBlock .slick-arrow {
+  position: absolute;
+  top: -42px;
+  right: 0;
+  z-index: 2;
+}
+.pc-SliderBlock .slick-arrow.slick-prev {
+  right: 42px;
+}
+.pc-SliderBlock__header_no-description {
+  position: relative;
+  top: -3px;
+}
+.pc-SliderBlock__dots {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.pc-SliderBlock__dots-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+}
+.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+  margin: calc(12px / 2) 8px;
+  top: 0;
+}
+.pc-SliderBlock__dot {
+  margin-top: 12px;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: var(--yc-color-line-generic-accent);
+  cursor: pointer;
+}
+.pc-SliderBlock__dot:hover {
+  background-color: var(--yc-color-line-generic-accent-hover);
+}
+.pc-SliderBlock__dot + .pc-SliderBlock__dot {
+  margin-left: 16px;
+}
+.pc-SliderBlock__dot_active {
+  background-color: var(--yc-color-line-generic-active);
+}
+.pc-SliderBlock__bar {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  width: 24px;
+  height: 8px;
+  border-radius: var(--pc-border-radius);
+  transition: left 0.3s;
+  background-color: var(--pc-color-line-generic-active-solid);
+}
+.pc-SliderBlock_align-left .slick-track {
+  /* stylelint-disable-next-line declaration-no-important */
+  width: inherit !important;
+}
+.pc-SliderBlock_only-arrows {
+  padding-top: 42px;
+}
+.pc-SliderBlock__footer {
+  display: flex;
+  position: relative;
+}
+.pc-SliderBlock__footer .pc-SliderBlock__disclaimer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--yc-color-text-secondary);
+}
+.pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_l {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+}
+.pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_m {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_s {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+@media (min-width: 769px) {
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock .slick-slide, .pc-AnimateBlock .pc-SliderBlock__animate-slides .slick-slide {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide, .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(0), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(0) {
+    transition-delay: 0s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(1), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(1) {
+    transition-delay: 0.1s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(2), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(2) {
+    transition-delay: 0.2s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(3), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(3) {
+    transition-delay: 0.3s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(4), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(4) {
+    transition-delay: 0.4s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(5), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(5) {
+    transition-delay: 0.5s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(6), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(6) {
+    transition-delay: 0.6s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(7), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(7) {
+    transition-delay: 0.7s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(8), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(8) {
+    transition-delay: 0.8s;
+  }
+  .pc-SliderBlock__animate-slides.pc-AnimateBlock.animate .slick-slide:nth-child(9), .pc-AnimateBlock .pc-SliderBlock__animate-slides.animate .slick-slide:nth-child(9) {
+    transition-delay: 0.9s;
+  }
+}
+.pc-SliderBlock_type_media-card {
+  padding: 0;
+}
+.pc-SliderBlock_type_media-card .slick-slide {
+  width: 100%;
+}
+@media (max-width: 577px) {
+  .pc-SliderBlock_type_media-card:not(.pc-SliderBlock_type_media-card_one-slide) {
+    margin-left: 0;
+    padding-left: 0;
+    width: 100%;
+    overflow: inherit;
+  }
+  .pc-SliderBlock_type_media-card:not(.pc-SliderBlock_type_media-card_one-slide) .slick-list {
+    margin: 0;
+  }
+  .pc-SliderBlock_type_media-card:not(.pc-SliderBlock_type_media-card_one-slide) .slick-slide:last-child {
+    padding-right: 10px;
+  }
+}
+.pc-SliderBlock_type_media-card .pc-SliderBlock__dots {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  width: 100%;
+}
+.pc-SliderBlock_type_media-card:hover .slick-arrow {
+  display: flex;
+}
+.pc-SliderBlock_type_media-card .slick-arrow {
+  display: none;
+  height: 100%;
+  width: 64px;
+  top: 0;
+}
+.pc-SliderBlock_type_media-card .slick-arrow button {
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.pc-SliderBlock_type_media-card .slick-prev {
+  left: 0;
+}
+.pc-SliderBlock_type_media-card .slick-next {
+  right: 0;
+}
+.pc-SliderBlock_type_media-card .slick-list {
+  padding: 0;
+}
+@media (max-width: 769px) {
+  .pc-SliderBlock_type_media-card:hover .slick-arrow {
+    display: none;
+  }
+}
+.pc-SliderBlock_type_header-card {
+  padding-top: 0;
+}
+.pc-SliderBlock_type_header-card .slick-slide {
+  width: 100%;
+}
+@media (max-width: 577px) {
+  .pc-SliderBlock_type_header-card:not(.pc-SliderBlock_type_header-card_one-slide) {
+    margin-left: 0;
+    padding-left: 0;
+    width: 100%;
+    overflow: inherit;
+  }
+  .pc-SliderBlock_type_header-card:not(.pc-SliderBlock_type_header-card_one-slide) .slick-list {
+    margin: 0;
+  }
+  .pc-SliderBlock_type_header-card:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
+    padding-right: 10px;
+  }
+}
+.pc-SliderBlock_type_header-card .pc-SliderBlock__wrapper {
+  position: relative;
+}
+.pc-SliderBlock_type_header-card .pc-SliderBlock__dots {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+}
+.pc-SliderBlock_type_header-card .slick-arrow {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 16px;
+}
+.pc-SliderBlock_type_header-card .slick-arrow.slick-prev {
+  left: 16px;
+}
+.pc-SliderBlock_type_header-card .slick-arrow button {
+  background-color: transparent;
+  box-shadow: none;
+}
+.pc-SliderBlock_type_header-card .slick-arrow button:hover {
+  box-shadow: none;
+}
+.pc-SliderBlock_type_header-card .slick-arrow:hover button {
+  box-shadow: none;
+}
+.pc-SliderBlock_type_header-card .slick-slide {
+  padding: 0;
+}
+@keyframes safari-fix {
+  from {
+    transform: translateX(0.001px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+.pc-SliderBlock_type_header-card .slick-slide[aria-hidden=true] {
+  animation: safari-fix 1000ms;
+}
+.pc-SliderBlock_type_header-card .slick-list {
+  padding: 0;
+  margin: 0;
+}
+.pc-SliderBlock_type_header-card .slick-arrow {
+  width: 68px;
+  height: 68px;
+  right: 0;
+}
+.pc-SliderBlock_type_header-card .slick-arrow.slick-prev {
+  left: 0;
+}
+@media (max-width: 577px) {
+  .pc-SliderBlock_type_header-card .slick-arrow {
+    display: none;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-list {
+    margin-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-track {
+    padding-left: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide {
+    padding-right: 0;
+  }
+  .pc-SliderBlock_type_header-card.pc-SliderBlock:not(.pc-SliderBlock_type_header-card_one-slide) .slick-slide:last-child {
+    padding-right: 0;
+  }
+}
+@media (max-width: 769px) {
+  .pc-SliderBlock__footer {
+    display: block;
+  }
+  .pc-SliderBlock__footer .pc-SliderBlock__disclaimer {
+    position: relative;
+    width: 100%;
+    padding-bottom: 20px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) {
+    margin-left: -24px;
+    padding-left: 24px;
+    width: calc(100% + 48px);
+    overflow-x: auto;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-list {
+    margin-left: -24px;
+    margin-right: 0;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-track {
+    padding-left: 16px;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-slide {
+    padding: 0 8px;
+  }
+  .pc-SliderBlock:not(.pc-SliderBlock_one-slide) .slick-slide:last-child {
+    padding: 0 24px 0 8px;
+  }
+}

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

@@ -0,0 +1,20 @@
+import SlickSlider, { Settings } from 'react-slick';
+import { Refable, SliderProps as SliderParams, ClassNameProps, WithChildren } from '../../models';
+import './slick.css';
+import './Slider.css';
+export interface SlickSliderFull extends SlickSlider {
+    innerSlider?: {
+        list: HTMLElement;
+    };
+}
+export interface SliderProps extends Omit<SliderParams, 'children'>, Refable<HTMLDivElement>, ClassNameProps, Pick<Settings, 'lazyLoad'> {
+    type?: string;
+    anchorId?: string;
+    onAfterChange?: (index: number) => void;
+    onBeforeChange?: (current: number, next: number) => void;
+    dotsClassName?: string;
+    blockClassName?: string;
+    arrowSize?: number;
+}
+export declare const SliderBlock: (props: WithChildren<SliderProps>) => JSX.Element;
+export default SliderBlock;

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

@@ -0,0 +1,208 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import SlickSlider from 'react-slick';
+import _ from 'lodash';
+import { block } from '../../utils';
+import { SliderType, } from '../../models';
+import Arrow from './Arrow/Arrow';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import Anchor from '../../components/Anchor/Anchor';
+import { getSliderResponsiveParams, getSlidesCountByBreakpoint, getSlidesToShowCount, getSlidesToShowWithDefaults, } from './utils';
+import { BREAKPOINTS } from '../../constants';
+import BlockHeader from '../../components/BlockHeader/BlockHeader';
+import { StylesContext } from '../../context/stylesContext/StylesContext';
+import { MobileContext } from '../../context/mobileContext';
+import OutsideClick from '../../components/OutsideClick/OutsideClick';
+import useFocus from '../../hooks/useFocus';
+import './slick.css';
+import './Slider.css';
+import { SSRContext } from '../../context/ssrContext';
+const b = block('SliderBlock');
+const slick = block('slick-origin');
+const DOT_WIDTH = 8;
+const DOT_GAP = 16;
+export const SliderBlock = (props) => {
+    var _a;
+    const { animated, title, description, type, anchorId, arrows = true, adaptive, autoplay = undefined, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, } = props;
+    const { isServer } = useContext(SSRContext);
+    const isMobile = useContext(MobileContext);
+    const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
+    const [disclosedChildren] = useState(() => discloseAllNestedChildren(children));
+    const childrenCount = disclosedChildren.length;
+    const [slidesToShow] = useState(getSlidesToShowWithDefaults({
+        contentLength: childrenCount,
+        breakpoints: props.slidesToShow,
+        mobileFullscreen: Boolean(props.type && Object.values(SliderType).includes(props.type)),
+    }));
+    const slidesToShowCount = getSlidesToShowCount(slidesToShow);
+    const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [childStyles, setChildStyles] = useState({});
+    const [slider, setSlider] = useState();
+    const autoplayTimeId = useRef();
+    const { hasFocus, unsetFocus } = useFocus((_a = slider === null || slider === void 0 ? void 0 : slider.innerSlider) === null || _a === void 0 ? void 0 : _a.list);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onResize = useCallback(_.debounce(() => {
+        if (!slider) {
+            return;
+        }
+        const newBreakpoint = _.get(slider, 'state.breakpoint') || BREAKPOINTS.xl;
+        if (newBreakpoint !== breakpoint) {
+            setBreakpoint(newBreakpoint);
+            setCurrentIndex(0);
+            slider.slickGoTo(0);
+        }
+    }, 100), [slider, breakpoint]);
+    const scrollLastSlide = useCallback((current) => {
+        const lastSlide = childrenCount - slidesToShowCount;
+        if (autoplay && lastSlide === current) {
+            // Slick doesn't support autoplay with no infinity scroll
+            autoplayTimeId.current = setTimeout(() => {
+                if (slider) {
+                    slider.slickGoTo(0, false);
+                    slider.slickPause();
+                }
+                setTimeout(() => {
+                    if (slider) {
+                        slider.slickPlay();
+                    }
+                }, 500);
+            }, autoplay);
+        }
+    }, [autoplay, childrenCount, slider, slidesToShowCount]);
+    useEffect(() => {
+        if (hasFocus && autoplayTimeId.current) {
+            clearTimeout(autoplayTimeId.current);
+        }
+        else {
+            scrollLastSlide(currentIndex);
+        }
+    }, [currentIndex, hasFocus, scrollLastSlide]);
+    useEffect(() => {
+        onResize();
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, [onResize]);
+    const handleArrowClick = useCallback((direction) => {
+        let nextIndex;
+        if (direction === 'right') {
+            nextIndex =
+                currentIndex === childrenCount - slidesCountByBreakpoint ? 0 : currentIndex + 1;
+        }
+        else {
+            nextIndex =
+                currentIndex === 0 ? childrenCount - slidesCountByBreakpoint : currentIndex - 1;
+        }
+        if (slider) {
+            slider.slickGoTo(nextIndex);
+        }
+    }, [childrenCount, currentIndex, slider, slidesCountByBreakpoint]);
+    const onBeforeChange = useCallback((current, next) => {
+        if (handleBeforeChange) {
+            handleBeforeChange(current, next);
+        }
+        setCurrentIndex(Math.ceil(next));
+    }, [handleBeforeChange]);
+    const onAfterChange = useCallback((current) => {
+        if (handleAfterChange) {
+            handleAfterChange(current);
+        }
+        if (autoplayTimeId.current) {
+            clearTimeout(autoplayTimeId.current);
+        }
+        if (!hasFocus) {
+            scrollLastSlide(current);
+        }
+    }, [handleAfterChange, hasFocus, scrollLastSlide]);
+    const handleDotClick = useCallback((index) => {
+        const nextIndex = index > currentIndex ? index + 1 - slidesCountByBreakpoint : index;
+        if (slider) {
+            slider.slickGoTo(nextIndex);
+        }
+    }, [slider, currentIndex, slidesCountByBreakpoint]);
+    const renderBar = () => {
+        const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
+        const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
+        return (slidesCountByBreakpoint > 1 && (React.createElement("div", { className: b('bar'), style: {
+                left: barPosition,
+                width: barWidth,
+            } })));
+    };
+    const renderDot = (index) => {
+        return (React.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+    };
+    const renderNavigation = () => {
+        if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
+            return null;
+        }
+        return (React.createElement("div", { className: b('dots', dotsClassName) },
+            React.createElement("ul", { className: b('dots-list') },
+                renderBar(),
+                Array(childrenCount)
+                    .fill(null)
+                    .map((_item, index) => renderDot(index)))));
+    };
+    const renderDisclaimer = () => {
+        return disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;
+    };
+    const renderSlider = () => {
+        /* Disable adding of width in inline styles when SSR to prevent overriding of default styles */
+        /* Calculate appropriate breakpoint for mobile devices with user agent */
+        const variableWidth = isServer && isMobile;
+        const settings = {
+            ref: (slickSlider) => setSlider(slickSlider),
+            className: slick(null, className),
+            arrows,
+            variableWidth,
+            infinite: false,
+            speed: 1000,
+            adaptiveHeight: adaptive,
+            autoplay: Boolean(autoplay),
+            autoplaySpeed: autoplay,
+            slidesToShow: slidesToShowCount,
+            slidesToScroll: 1,
+            responsive: getSliderResponsiveParams(slidesToShow),
+            beforeChange: onBeforeChange,
+            afterChange: onAfterChange,
+            initialSlide: 0,
+            nextArrow: React.createElement(Arrow, { type: "right", handleClick: handleArrowClick, size: arrowSize }),
+            prevArrow: React.createElement(Arrow, { type: "left", handleClick: handleArrowClick, size: arrowSize }),
+            lazyLoad,
+        };
+        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : _.noop },
+            React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
+            React.createElement("div", { className: b('footer') },
+                renderDisclaimer(),
+                renderNavigation())));
+    };
+    return (React.createElement(StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
+        React.createElement("div", { className: b({
+                'align-left': childrenCount < slidesCountByBreakpoint,
+                'one-slide': childrenCount === 1,
+                'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
+                mobile: isMobile,
+                type,
+            }, blockClassName) },
+            anchorId && React.createElement(Anchor, { id: anchorId }),
+            React.createElement(BlockHeader, { title: title, description: description, className: b('header', { 'no-description': !description }) }),
+            React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
+};
+// TODO remove this and rework PriceDetailed CLOUDFRONT-12230
+function discloseAllNestedChildren(children) {
+    if (!children) {
+        return [];
+    }
+    return React.Children.map(children, (child) => {
+        var _a;
+        if (child) {
+            // TODO: if child has 'items' then 'items' determinate like nested children for Slider.
+            const nestedChildren = (_a = child.props.data) === null || _a === void 0 ? void 0 : _a.items;
+            if (nestedChildren) {
+                return nestedChildren.map((nestedChild) => React.cloneElement(child, {
+                    data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
+                }));
+            }
+        }
+        return child;
+    }).filter(Boolean);
+}
+export default SliderBlock;

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

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

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

@@ -0,0 +1,7 @@
+export var SliderBreakpointNames;
+(function (SliderBreakpointNames) {
+    SliderBreakpointNames["Sm"] = "sm";
+    SliderBreakpointNames["Md"] = "md";
+    SliderBreakpointNames["Lg"] = "lg";
+    SliderBreakpointNames["Xl"] = "xl";
+})(SliderBreakpointNames || (SliderBreakpointNames = {}));