@gravity-ui/page-constructor 5.31.2 → 6.0.0-alpha.0

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Settings } from 'react-slick';
+import { ClassNameProps, Refable, SliderOldProps as SliderParams } from '../../models';
+/** @deprecated */
+export interface SliderOldProps 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;
+    initialIndex?: number;
+}
+/** @deprecated */
+export declare const SliderOldBlock: (props: React.PropsWithChildren<SliderOldProps>) => JSX.Element;
+export default SliderOldBlock;

package/build/cjs/blocks/SliderOld/SliderOld.js

@@ -0,0 +1,301 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderOldBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const get_1 = tslib_1.__importDefault(require("lodash/get"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const react_slick_1 = tslib_1.__importDefault(require("react-slick"));
+const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const OutsideClick_1 = tslib_1.__importDefault(require("../../components/OutsideClick/OutsideClick"));
+const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
+const constants_1 = require("../../constants");
+const mobileContext_1 = require("../../context/mobileContext");
+const ssrContext_1 = require("../../context/ssrContext");
+const StylesContext_1 = require("../../context/stylesContext/StylesContext");
+const useFocus_1 = tslib_1.__importDefault(require("../../hooks/useFocus"));
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow/Arrow"));
+const i18n_1 = require("./i18n");
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('SliderOldBlock');
+const slick = (0, utils_1.block)('slick-origin');
+const DOT_WIDTH = 8;
+const DOT_GAP = 16;
+// eslint-disable-next-line valid-jsdoc
+/** @deprecated */
+const SliderOldBlock = (props) => {
+    var _a;
+    const { animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplaySpeed, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, initialIndex = 0, } = props;
+    const { isServer } = (0, react_1.useContext)(ssrContext_1.SSRContext);
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const [breakpoint, setBreakpoint] = (0, react_1.useState)(constants_1.BREAKPOINTS.xl);
+    const sliderId = (0, uikit_1.useUniqId)();
+    const disclosedChildren = (0, react_1.useMemo)(() => discloseAllNestedChildren(children, sliderId), [children, sliderId]);
+    const childrenCount = disclosedChildren.length;
+    const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
+    const isUserInteractionRef = (0, react_1.useRef)(false);
+    const [slidesToShow] = (0, react_1.useState)((0, utils_2.getSlidesToShowWithDefaults)({
+        contentLength: childrenCount,
+        breakpoints: props.slidesToShow,
+        mobileFullscreen: Boolean(props.type && Object.values(models_1.SliderType).includes(props.type)),
+    }));
+    const slidesToShowCount = (0, utils_2.getSlidesToShowCount)(slidesToShow);
+    const slidesCountByBreakpoint = (0, utils_2.getSlidesCountByBreakpoint)(breakpoint, slidesToShow);
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(initialIndex);
+    const [childStyles, setChildStyles] = (0, react_1.useState)({});
+    const [slider, setSlider] = (0, react_1.useState)();
+    const prevIndexRef = (0, react_1.useRef)(0);
+    const autoplayTimeId = (0, react_1.useRef)();
+    const { hasFocus, unsetFocus } = (0, useFocus_1.default)((_a = slider === null || slider === void 0 ? void 0 : slider.innerSlider) === null || _a === void 0 ? void 0 : _a.list);
+    const asUserInteraction = (fn) => (...args) => {
+        isUserInteractionRef.current = true;
+        return fn(...args);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onResize = (0, react_1.useCallback)((0, debounce_1.default)(() => {
+        if (!slider) {
+            return;
+        }
+        const newBreakpoint = (0, get_1.default)(slider, 'state.breakpoint') || constants_1.BREAKPOINTS.xl;
+        if (newBreakpoint !== breakpoint) {
+            setBreakpoint(newBreakpoint);
+            setCurrentIndex(0);
+            slider.slickGoTo(0);
+        }
+    }, 100), [slider, breakpoint]);
+    const scrollLastSlide = (0, react_1.useCallback)((current) => {
+        const lastSlide = childrenCount - slidesToShowCount;
+        if (isAutoplayEnabled && 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);
+            }, autoplaySpeed);
+        }
+    }, [autoplaySpeed, childrenCount, isAutoplayEnabled, slider, slidesToShowCount]);
+    (0, react_1.useEffect)(() => {
+        if (hasFocus && autoplayTimeId.current) {
+            clearTimeout(autoplayTimeId.current);
+        }
+        else {
+            scrollLastSlide(currentIndex);
+        }
+    }, [currentIndex, hasFocus, scrollLastSlide]);
+    (0, react_1.useEffect)(() => {
+        onResize();
+        window.addEventListener('resize', onResize, { passive: true });
+        return () => window.removeEventListener('resize', onResize);
+    }, [onResize]);
+    const handleArrowClick = (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);
+        }
+    };
+    const onBeforeChange = (0, react_1.useCallback)((current, next) => {
+        if (handleBeforeChange) {
+            handleBeforeChange(current, next);
+        }
+        prevIndexRef.current = current;
+        setCurrentIndex(Math.ceil(next));
+    }, [handleBeforeChange]);
+    const onAfterChange = (0, react_1.useCallback)((current) => {
+        if (handleAfterChange) {
+            handleAfterChange(current);
+        }
+        if (autoplayTimeId.current) {
+            clearTimeout(autoplayTimeId.current);
+        }
+        if (!hasFocus) {
+            scrollLastSlide(current);
+        }
+        if (isUserInteractionRef.current) {
+            const focusIndex = prevIndexRef.current >= current
+                ? current
+                : Math.max(current, prevIndexRef.current + slidesCountByBreakpoint);
+            const firstNewSlide = document.getElementById(getSlideId(sliderId, focusIndex));
+            if (firstNewSlide) {
+                const focusableChild = Array.from(firstNewSlide.querySelectorAll('*')).find(utils_2.isFocusable);
+                focusableChild === null || focusableChild === void 0 ? void 0 : focusableChild.focus();
+            }
+        }
+        isUserInteractionRef.current = false;
+    }, [handleAfterChange, hasFocus, scrollLastSlide, sliderId, slidesCountByBreakpoint]);
+    const handleDotClick = (index) => {
+        const nextIndex = index > currentIndex ? index + 1 - slidesCountByBreakpoint : index;
+        if (slider) {
+            slider.slickGoTo(nextIndex);
+        }
+    };
+    const barSlidesCount = childrenCount - slidesCountByBreakpoint + 1;
+    const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
+    const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
+    const { getRovingItemProps, rovingListProps } = (0, utils_2.useRovingTabIndex)({
+        itemCount: barSlidesCount,
+        activeIndex: currentIndex + 1,
+        firstIndex: 1,
+        uniqId: sliderId,
+    });
+    const renderBar = () => {
+        return (slidesCountByBreakpoint > 1 && (react_1.default.createElement("li", { className: b('bar'), style: {
+                left: barPosition,
+                width: barWidth,
+            } })));
+    };
+    // renders additional bar, not visible in the layout but visible for screenreaders
+    const renderAccessibleBar = (index) => {
+        return (
+        // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
+        react_1.default.createElement(react_1.Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (react_1.default.createElement("li", Object.assign({ className: b('accessible-bar'), role: "menuitemradio", "aria-checked": true, "aria-label": (0, i18n_1.i18n)('dot-label', {
+                index: currentIndex + 1,
+                count: barSlidesCount,
+            }), style: {
+                left: barPosition,
+                width: barWidth,
+            } }, getRovingItemProps(currentIndex + 1))))));
+    };
+    const getCurrentSlideNumber = (index) => {
+        const currentIndexDiff = index - currentIndex;
+        let currentSlideNumber;
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesCountByBreakpoint) {
+            currentSlideNumber = currentIndex + 1;
+        }
+        else if (currentIndexDiff >= slidesCountByBreakpoint) {
+            currentSlideNumber = index - slidesCountByBreakpoint + 2;
+        }
+        else {
+            currentSlideNumber = index + 1;
+        }
+        return currentSlideNumber;
+    };
+    const isVisibleSlide = (index) => {
+        const currentIndexDiff = index - currentIndex;
+        const result = slidesCountByBreakpoint > 0 &&
+            0 <= currentIndexDiff &&
+            currentIndexDiff < slidesCountByBreakpoint;
+        return result;
+    };
+    const renderDot = (index) => {
+        const isVisible = isVisibleSlide(index);
+        const currentSlideNumber = getCurrentSlideNumber(index);
+        const rovingItemProps = isVisible ? undefined : getRovingItemProps(currentSlideNumber);
+        return (react_1.default.createElement("li", Object.assign({ key: index, className: b('dot', { active: index === currentIndex }), onClick: asUserInteraction(() => handleDotClick(index)), onKeyDown: (e) => {
+                const key = e.key.toLowerCase();
+                if (key === 'space' || key === 'enter') {
+                    e.currentTarget.click();
+                }
+            }, role: "menuitemradio", "aria-checked": false, tabIndex: -1, "aria-hidden": isVisible, "aria-label": (0, i18n_1.i18n)('dot-label', {
+                index: currentSlideNumber,
+                count: barSlidesCount,
+            }) }, rovingItemProps)));
+    };
+    const renderNavigation = () => {
+        if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
+            return null;
+        }
+        const dotsList = Array(childrenCount)
+            .fill(null)
+            .map((_item, index) => renderDot(index));
+        dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
+        return (react_1.default.createElement("div", { className: b('dots', dotsClassName) },
+            react_1.default.createElement("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": (0, i18n_1.i18n)('pagination-label') }, rovingListProps),
+                renderBar(),
+                dotsList)));
+    };
+    const renderDisclaimer = () => {
+        return disclaimer ? (react_1.default.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: isAutoplayEnabled,
+            autoplaySpeed,
+            slidesToShow: slidesToShowCount,
+            slidesToScroll: 1,
+            responsive: (0, utils_2.getSliderResponsiveParams)(slidesToShow),
+            beforeChange: onBeforeChange,
+            afterChange: onAfterChange,
+            initialSlide: initialIndex,
+            nextArrow: (react_1.default.createElement(Arrow_1.default, { type: "right", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
+            prevArrow: (react_1.default.createElement(Arrow_1.default, { type: "left", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
+            lazyLoad,
+            accessibility: false,
+        };
+        return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: isMobile ? unsetFocus : noop_1.default },
+            react_1.default.createElement(react_slick_1.default, Object.assign({}, settings), disclosedChildren),
+            react_1.default.createElement("div", { className: b('footer') },
+                renderDisclaimer(),
+                renderNavigation())));
+    };
+    return (react_1.default.createElement(StylesContext_1.StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
+        react_1.default.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_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 }, renderSlider()))));
+};
+exports.SliderOldBlock = SliderOldBlock;
+function getSlideId(sliderId, index) {
+    return `slider-${sliderId}-child-${index}`;
+}
+// TODO remove this and rework PriceDetailed CLOUDFRONT-12230
+function discloseAllNestedChildren(children, sliderId) {
+    if (!children) {
+        return [];
+    }
+    let childIndex = 0;
+    const wrapped = (child) => {
+        const id = getSlideId(sliderId, childIndex++);
+        return (react_1.default.createElement("div", { key: id, id: id }, child));
+    };
+    return react_1.default.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) => {
+                    return wrapped(react_1.default.cloneElement(child, {
+                        data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
+                    }));
+                });
+            }
+        }
+        return child && wrapped(child);
+    }).filter(Boolean);
+}
+exports.default = exports.SliderOldBlock;

package/build/cjs/blocks/{SliderNew → SliderOld}/i18n/en.json

@@ -1,6 +1,6 @@
 {
   "arrow-right": "Next",
   "arrow-left": "Previous",
-  "dot-label": "Page {{index}}",
+  "dot-label": "Page {{index}} of {{count}}",
   "pagination-label": "Pages"
 }

package/build/cjs/blocks/{SliderNew → SliderOld}/i18n/index.js

@@ -6,4 +6,4 @@ 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`);
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}SliderOldBlock`);

package/build/cjs/blocks/{SliderNew → SliderOld}/i18n/ru.json

@@ -1,6 +1,6 @@
 {
   "arrow-right": "Дальше",
   "arrow-left": "Назад",
-  "dot-label": "Страница {{index}}",
+  "dot-label": "Страница {{index}} из {{count}}",
   "pagination-label": "Страницы"
 }

package/build/cjs/blocks/{SliderNew → SliderOld}/models.d.ts

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

package/build/cjs/blocks/{SliderNew → SliderOld}/models.js

@@ -3,8 +3,8 @@ 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["Xl"] = "xl";
 })(SliderBreakpointNames = exports.SliderBreakpointNames || (exports.SliderBreakpointNames = {}));

package/build/cjs/blocks/{SliderNew → SliderOld}/schema.d.ts

@@ -1,4 +1,4 @@
-export declare const SliderNewProps: {
+export declare const SliderOldProps: {
     dots: {
         type: string;
     };
@@ -11,15 +11,6 @@ export declare const SliderNewProps: {
     autoplay: {
         type: string;
     };
-    type: {
-        type: string;
-    };
-    adaptive: {
-        type: string;
-    };
-    arrowSize: {
-        type: string;
-    };
     animated: {
         animated: {
             type: string;
@@ -83,8 +74,9 @@ export declare const SliderNewProps: {
         };
     };
 };
-export declare const SliderNewBlock: {
-    'slider-new-block': {
+/** @deprecated */
+export declare const SliderOldBlock: {
+    'slider-old-block': {
         additionalProperties: boolean;
         required: never[];
         properties: {
@@ -135,15 +127,6 @@ export declare const SliderNewBlock: {
             autoplay: {
                 type: string;
             };
-            type: {
-                type: string;
-            };
-            adaptive: {
-                type: string;
-            };
-            arrowSize: {
-                type: string;
-            };
             animated: {
                 animated: {
                     type: string;
@@ -245,6 +228,7 @@ export declare const SliderNewBlock: {
                     };
                 };
             };
+            type: {};
             when: {
                 type: string;
             };

package/build/cjs/blocks/{SliderNew → SliderOld}/schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SliderNewBlock = exports.SliderNewProps = void 0;
+exports.SliderOldBlock = exports.SliderOldProps = void 0;
 const common_1 = require("../../schema/validators/common");
 const LoadableProps = {
     additionalProperties: false,
@@ -43,7 +43,7 @@ const DisclaimerProps = {
         },
     },
 };
-exports.SliderNewProps = {
+exports.SliderOldProps = {
     dots: {
         type: 'boolean',
     },
@@ -56,25 +56,17 @@ exports.SliderNewProps = {
     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': {
+/** @deprecated */
+exports.SliderOldBlock = {
+    'slider-old-block': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.SliderNewProps), common_1.BlockHeaderProps),
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.SliderOldProps), common_1.BlockHeaderProps),
     },
 };

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

@@ -0,0 +1,36 @@
+import { SliderBreakpointParams, SlidesToShow } from './models';
+export declare const DEFAULT_SLIDE_BREAKPOINTS: {
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+};
+export interface GetSlidesToShowParams {
+    contentLength: number;
+    breakpoints?: SlidesToShow;
+    mobileFullscreen?: boolean;
+}
+export declare const isFocusable: (element: Element) => boolean;
+export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
+    sm: number;
+    xl: number;
+    lg: number;
+    md: number;
+};
+export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointParams): {
+    breakpoint: number;
+    settings: {
+        slidesToShow: number;
+    };
+}[];
+export declare function getSlidesCountByBreakpoint(breakpoint: number, breakpoints: SliderBreakpointParams): number;
+export declare function getSlidesToShowCount(breakpoints: SliderBreakpointParams): number;
+export declare function useRovingTabIndex(props: {
+    itemCount: number;
+    activeIndex: number;
+    firstIndex?: number;
+    uniqId: string;
+}): {
+    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'tabIndex' | 'onFocus'>;
+    rovingListProps: import("react").HTMLAttributes<HTMLElement>;
+};

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

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRovingTabIndex = exports.getSlidesToShowCount = exports.getSlidesCountByBreakpoint = exports.getSliderResponsiveParams = exports.getSlidesToShowWithDefaults = exports.isFocusable = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+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.Xl]: 3,
+    [models_1.SliderBreakpointNames.Lg]: 2,
+    [models_1.SliderBreakpointNames.Md]: 2,
+    [models_1.SliderBreakpointNames.Sm]: 1.15,
+};
+const BREAKPOINT_NAMES_BY_VALUES = Object.entries(constants_1.BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
+const isFocusable = (element) => {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const tabIndexAttr = element.getAttribute('tabindex');
+    const hasTabIndex = tabIndexAttr !== null;
+    const tabIndex = Number(tabIndexAttr);
+    if (element.ariaHidden === 'true' || (hasTabIndex && tabIndex < 0)) {
+        return false;
+    }
+    if (hasTabIndex && tabIndex >= 0) {
+        return true;
+    }
+    // without this jest fails here for some reason
+    let htmlElement;
+    switch (true) {
+        case element instanceof HTMLAnchorElement:
+            htmlElement = element;
+            return Boolean(htmlElement.href);
+        case element instanceof HTMLInputElement:
+            htmlElement = element;
+            return htmlElement.type !== 'hidden' && !htmlElement.disabled;
+        case element instanceof HTMLSelectElement:
+        case element instanceof HTMLTextAreaElement:
+        case element instanceof HTMLButtonElement:
+            htmlElement = element;
+            return !htmlElement.disabled;
+        default:
+            return false;
+    }
+};
+exports.isFocusable = isFocusable;
+function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
+    let result;
+    if (typeof breakpoints === 'number') {
+        result = Object.keys(exports.DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
+    }
+    else {
+        result = breakpoints || exports.DEFAULT_SLIDE_BREAKPOINTS;
+    }
+    return Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_SLIDE_BREAKPOINTS), (0, pickBy_1.default)(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? exports.DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
+}
+exports.getSlidesToShowWithDefaults = getSlidesToShowWithDefaults;
+function getSliderResponsiveParams(breakpoints) {
+    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
+        breakpoint: constants_1.BREAKPOINTS[breakpointName],
+        settings: { slidesToShow },
+    }));
+}
+exports.getSliderResponsiveParams = getSliderResponsiveParams;
+function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
+    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
+    return Math.floor(breakpoints[breakpointName]);
+}
+exports.getSlidesCountByBreakpoint = getSlidesCountByBreakpoint;
+function getSlidesToShowCount(breakpoints) {
+    return Math.floor(Math.max(...Object.values(breakpoints)));
+}
+exports.getSlidesToShowCount = getSlidesToShowCount;
+const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
+function useRovingTabIndex(props) {
+    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(firstIndex);
+    const hasFocusRef = (0, react_1.useRef)(false);
+    const lastIndex = itemCount + firstIndex - 1;
+    const getRovingItemProps = (index) => {
+        return {
+            id: getRovingListItemId(uniqId, index),
+            tabIndex: index === activeIndex ? 0 : -1,
+            onFocus: () => {
+                setCurrentIndex(index);
+                hasFocusRef.current = true;
+            },
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!hasFocusRef.current) {
+            return;
+        }
+        (_a = document.getElementById(getRovingListItemId(uniqId, currentIndex))) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex, currentIndex, uniqId]);
+    const setNextIndex = () => setCurrentIndex((prev) => (prev >= lastIndex ? firstIndex : prev + 1));
+    const setPrevIndex = () => setCurrentIndex((prev) => (prev <= firstIndex ? lastIndex : prev - 1));
+    const onRovingListKeyDown = (e) => {
+        const key = e.key.toLowerCase();
+        if (key !== 'tab' && key !== 'enter') {
+            e.preventDefault();
+        }
+        switch (key) {
+            case 'arrowleft':
+            case 'arrowup':
+                setPrevIndex();
+                return;
+            case 'arrowright':
+            case 'arrowdown':
+                setNextIndex();
+                return;
+        }
+    };
+    const onRovingListBlur = () => {
+        hasFocusRef.current = false;
+    };
+    const rovingListProps = {
+        onKeyDown: onRovingListKeyDown,
+        onBlur: onRovingListBlur,
+    };
+    return { getRovingItemProps, rovingListProps };
+}
+exports.useRovingTabIndex = useRovingTabIndex;

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

@@ -3,6 +3,7 @@ export { default as CompaniesBlock } from './Companies/Companies';
 export { default as InfoBlock } from './Info/Info';
 export { default as MediaBlock } from './Media/Media';
 export { default as MapBlock } from './Map/Map';
+export { default as SliderOldBlock } from './SliderOld/SliderOld';
 export { default as SliderBlock } from './Slider/Slider';
 export { default as ExtendedFeaturesBlock } from './ExtendedFeatures/ExtendedFeatures';
 export { default as PromoFeaturesBlock } from './PromoFeaturesBlock/PromoFeaturesBlock';

package/build/cjs/blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
+exports.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.SliderOldBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
 var Banner_1 = require("./Banner/Banner");
 Object.defineProperty(exports, "BannerBlock", { enumerable: true, get: function () { return __importDefault(Banner_1).default; } });
 var Companies_1 = require("./Companies/Companies");
@@ -14,6 +14,8 @@ var Media_1 = require("./Media/Media");
 Object.defineProperty(exports, "MediaBlock", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
 var Map_1 = require("./Map/Map");
 Object.defineProperty(exports, "MapBlock", { enumerable: true, get: function () { return __importDefault(Map_1).default; } });
+var SliderOld_1 = require("./SliderOld/SliderOld");
+Object.defineProperty(exports, "SliderOldBlock", { enumerable: true, get: function () { return __importDefault(SliderOld_1).default; } });
 var Slider_1 = require("./Slider/Slider");
 Object.defineProperty(exports, "SliderBlock", { enumerable: true, get: function () { return __importDefault(Slider_1).default; } });
 var ExtendedFeatures_1 = require("./ExtendedFeatures/ExtendedFeatures");