@gravity-ui/page-constructor 5.27.1-alpha.1 → 5.27.1-alpha.2

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

@@ -1,16 +1,15 @@
-import React from 'react';
-import { Settings } from 'react-slick';
+import { PropsWithChildren } from 'react';
+import { Swiper } from 'swiper/react';
 import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
 import './Slider.css';
-export interface SliderProps extends Omit<SliderParams, 'children'>, Refable<HTMLDivElement>, ClassNameProps, Pick<Settings, 'lazyLoad'> {
+import 'swiper/swiper-bundle.css';
+export interface SliderProps extends Omit<SliderParams, 'children'>, Partial<Pick<Swiper, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
     type?: string;
     anchorId?: string;
-    onAfterChange?: (index: number) => void;
-    onBeforeChange?: (current: number, next: number) => void;
     dotsClassName?: string;
     blockClassName?: string;
     arrowSize?: number;
-    initialIndex?: number;
+    initialSlide?: number;
 }
-export declare const SliderBlock: (props: React.PropsWithChildren<SliderProps>) => JSX.Element;
+export declare const SliderBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: PropsWithChildren<SliderProps>) => JSX.Element;
 export default SliderBlock;

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

@@ -1,295 +1,53 @@
-import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
-import { useUniqId } from '@gravity-ui/uikit';
-import debounce from 'lodash/debounce';
-import get from 'lodash/get';
-import noop from 'lodash/noop';
-import SlickSlider from 'react-slick';
+import React, { Fragment } from 'react';
+import SwiperCore, { A11y, Autoplay, Pagination } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
-import OutsideClick from '../../components/OutsideClick/OutsideClick';
 import Title from '../../components/Title/Title';
-import { BREAKPOINTS } from '../../constants';
-import { MobileContext } from '../../context/mobileContext';
-import { SSRContext } from '../../context/ssrContext';
-import { StylesContext } from '../../context/stylesContext/StylesContext';
-import useFocus from '../../hooks/useFocus';
-import { SliderType, } from '../../models';
+import { SliderType } from '../../models';
 import { block } from '../../utils';
 import Arrow from './Arrow/Arrow';
 import { i18n } from './i18n';
-import { getSliderResponsiveParams, getSlidesCountByBreakpoint, getSlidesToShowCount, getSlidesToShowWithDefaults, isFocusable, useRovingTabIndex, } from './utils';
+import { useSlider } from './useSlider';
+import { useSliderPagination } from './useSliderPagination';
 import './Slider.css';
+import 'swiper/swiper-bundle.css';
 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: autoplaySpeed, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, initialIndex = 0, } = props;
-    const { isServer } = useContext(SSRContext);
-    const isMobile = useContext(MobileContext);
-    const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
-    const sliderId = useUniqId();
-    const disclosedChildren = useMemo(() => discloseAllNestedChildren(children, sliderId), [children, sliderId]);
-    const childrenCount = disclosedChildren.length;
-    const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
-    const isUserInteractionRef = useRef(false);
-    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(initialIndex);
-    const [childStyles, setChildStyles] = useState({});
-    const [slider, setSlider] = useState();
-    const prevIndexRef = useRef(0);
-    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);
-    const asUserInteraction = (fn) => (...args) => {
-        isUserInteractionRef.current = true;
-        return fn(...args);
-    };
-    // 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 (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]);
-    useEffect(() => {
-        if (hasFocus && autoplayTimeId.current) {
-            clearTimeout(autoplayTimeId.current);
-        }
-        else {
-            scrollLastSlide(currentIndex);
-        }
-    }, [currentIndex, hasFocus, scrollLastSlide]);
-    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 = useCallback((current, next) => {
-        if (handleBeforeChange) {
-            handleBeforeChange(current, next);
-        }
-        prevIndexRef.current = current;
-        setCurrentIndex(Math.ceil(next));
-    }, [handleBeforeChange]);
-    const onAfterChange = 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(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 } = useRovingTabIndex({
-        itemCount: barSlidesCount,
-        activeIndex: currentIndex + 1,
-        firstIndex: 1,
-        uniqId: sliderId,
+SwiperCore.use([Autoplay, A11y, Pagination]);
+export const SliderBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, initialSlide = 0, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
+    const { autoplay, isLocked, childrenCount, breakpoints, onSwiper, onPrev, onNext, setIsLocked } = useSlider({
+        slidesToShow,
+        children,
+        type,
+        autoplayMs,
     });
-    const renderBar = () => {
-        return (slidesCountByBreakpoint > 1 && (React.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.createElement(Fragment, { key: `${index}-accessible-bar` }, slidesCountByBreakpoint > 0 && (React.createElement("li", Object.assign({ className: b('accessible-bar'), role: "menuitemradio", "aria-checked": true, "aria-label": 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.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": 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.createElement("div", { className: b('dots', dotsClassName) },
-            React.createElement("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": i18n('pagination-label') }, rovingListProps),
-                renderBar(),
-                dotsList)));
-    };
-    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: isAutoplayEnabled,
-            autoplaySpeed,
-            slidesToShow: slidesToShowCount,
-            slidesToScroll: 1,
-            responsive: getSliderResponsiveParams(slidesToShow),
-            beforeChange: onBeforeChange,
-            afterChange: onAfterChange,
-            initialSlide: initialIndex,
-            nextArrow: (React.createElement(Arrow, { type: "right", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
-            prevArrow: (React.createElement(Arrow, { type: "left", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
-            lazyLoad,
-            accessibility: false,
-        };
-        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(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
-            React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
+    const isA11yControlHidden = Boolean(autoplay);
+    const controlTabIndex = isA11yControlHidden ? -1 : 0;
+    const paginationProps = useSliderPagination({
+        enabled: dots,
+        isA11yControlHidden,
+        controlTabIndex,
+        bulletClass: b('dot', dotsClassName),
+        bulletActiveClass: b('dot_active'),
+        paginationLabel: i18n('pagination-label'),
+    });
+    return (React.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.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(Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: initialSlide, noSwiping: false, breakpoints: breakpoints, onSlideChange: onSlideChange, onSlideChangeTransitionStart: onSlideChangeTransitionStart, onSlideChangeTransitionEnd: onSlideChangeTransitionEnd, onActiveIndexChange: onActiveIndexChange, onBreakpoint: onBreakpoint, onLock: () => setIsLocked(true), onUnlock: () => setIsLocked(false), 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(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))));
 };
-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.createElement("div", { key: id, id: id }, child));
-    };
-    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) => {
-                    return wrapped(React.cloneElement(child, {
-                        data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
-                    }));
-                });
-            }
-        }
-        return child && wrapped(child);
-    }).filter(Boolean);
-}
 export default SliderBlock;

package/build/esm/blocks/Slider/i18n/en.json

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

package/build/esm/blocks/Slider/i18n/ru.json

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

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

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

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

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

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

@@ -11,6 +11,15 @@ export declare const SliderProps: {
     autoplay: {
         type: string;
     };
+    type: {
+        type: string;
+    };
+    adaptive: {
+        type: string;
+    };
+    arrowSize: {
+        type: string;
+    };
     animated: {
         animated: {
             type: string;
@@ -126,6 +135,15 @@ export declare const SliderBlock: {
             autoplay: {
                 type: string;
             };
+            type: {
+                type: string;
+            };
+            adaptive: {
+                type: string;
+            };
+            arrowSize: {
+                type: string;
+            };
             animated: {
                 animated: {
                     type: string;
@@ -227,7 +245,6 @@ export declare const SliderBlock: {
                     };
                 };
             };
-            type: {};
             when: {
                 type: string;
             };

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

@@ -53,6 +53,15 @@ export const SliderProps = {
     autoplay: {
         type: 'number',
     },
+    type: {
+        type: 'string',
+    },
+    adaptive: {
+        type: 'boolean',
+    },
+    arrowSize: {
+        type: 'number',
+    },
     animated: AnimatableProps,
     slidesToShow: sliderSizesObject,
     disclaimer: DisclaimerProps,

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

@@ -1,36 +1,16 @@
-import { SliderBreakpointParams, SlidesToShow } from './models';
+import type { SwiperOptions } from 'swiper/types/swiper-options';
+import { SlidesToShow } from './models';
 export declare const DEFAULT_SLIDE_BREAKPOINTS: {
-    xl: number;
     lg: number;
     md: number;
     sm: number;
+    xs: number;
 };
 export interface GetSlidesToShowParams {
     contentLength: number;
-    breakpoints?: SlidesToShow;
+    slidesToShow?: 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>;
-};
+export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;
+export declare const useMemoized: <T>(value: T) => T;
+export declare const setElementAtrributes: (element: Element, attributes: Record<string, unknown>) => void;

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

@@ -1,115 +1,36 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
-    [SliderBreakpointNames.Xl]: 3,
-    [SliderBreakpointNames.Lg]: 2,
+    [SliderBreakpointNames.Lg]: 3,
     [SliderBreakpointNames.Md]: 2,
-    [SliderBreakpointNames.Sm]: 1.15,
+    [SliderBreakpointNames.Sm]: 2,
+    [SliderBreakpointNames.Xs]: 1.15,
 };
-const BREAKPOINT_NAMES_BY_VALUES = Object.entries(BREAKPOINTS).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [value]: key })), {});
-export 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;
-    }
-};
-export function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }) {
+export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }) {
     let result;
-    if (typeof breakpoints === 'number') {
-        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: breakpoints })), {});
+    if (typeof slidesToShow === 'number') {
+        result = Object.keys(DEFAULT_SLIDE_BREAKPOINTS).reduce((acc, breakpointName) => (Object.assign(Object.assign({}, acc), { [breakpointName]: slidesToShow })), {});
     }
     else {
-        result = breakpoints || DEFAULT_SLIDE_BREAKPOINTS;
+        result = slidesToShow || DEFAULT_SLIDE_BREAKPOINTS;
     }
-    return Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { sm: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.sm : 1 });
-}
-export function getSliderResponsiveParams(breakpoints) {
-    return Object.entries(breakpoints).map(([breakpointName, slidesToShow]) => ({
-        breakpoint: BREAKPOINTS[breakpointName],
-        settings: { slidesToShow },
-    }));
-}
-export function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
-    const breakpointName = BREAKPOINT_NAMES_BY_VALUES[breakpoint];
-    return Math.floor(breakpoints[breakpointName]);
-}
-export function getSlidesToShowCount(breakpoints) {
-    return Math.floor(Math.max(...Object.values(breakpoints)));
-}
-const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
-export function useRovingTabIndex(props) {
-    const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
-    const [currentIndex, setCurrentIndex] = useState(firstIndex);
-    const hasFocusRef = 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;
-            },
+    const showCount = Object.assign(Object.assign(Object.assign({}, DEFAULT_SLIDE_BREAKPOINTS), pickBy(result, (value) => !isNaN(value))), { xs: !mobileFullscreen && contentLength > 1 ? DEFAULT_SLIDE_BREAKPOINTS.xs : 1 });
+    return Object.entries(showCount).reduce((res, [breakpointName, value]) => {
+        // eslint-disable-next-line no-param-reassign
+        res[BREAKPOINTS[breakpointName] + 1] = {
+            slidesPerView: value,
         };
-    };
-    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 };
+        return res;
+    }, {});
 }
+export const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = useState(value);
+    useEffect(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && isEqual(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+export const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));