@gravity-ui/page-constructor 5.26.1 → 5.27.1-alpha.0

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

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
@@ -8,6 +9,37 @@ export const DEFAULT_SLIDE_BREAKPOINTS = {
     [SliderBreakpointNames.Sm]: 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, }) {
     let result;
     if (typeof breakpoints === 'number') {
@@ -31,3 +63,53 @@ export function getSlidesCountByBreakpoint(breakpoint, breakpoints) {
 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;
+            },
+        };
+    };
+    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 };
+}

package/build/esm/blocks/SliderNew/Arrow/Arrow.css

@@ -1,33 +1,25 @@
-.pc-slider-new-block-arrow__button {
+.pc-slider-new-block-arrow__inner {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
-.pc-slider-new-block-arrow__button:hover {
+.pc-slider-new-block-arrow__inner:hover {
   box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-slider-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__button, .pc-slider-new-block-arrow {
+.pc-slider-new-block-arrow__icon-wrapper, .pc-slider-new-block-arrow__inner, .pc-slider-new-block-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.pc-slider-new-block-arrow {
-  width: 42px;
-  height: 42px;
-  cursor: pointer;
-}
 @media (max-width: 576px) {
   .pc-slider-new-block-arrow {
     display: none;
   }
 }
-.pc-slider-new-block-arrow_type_left .pc-slider-new-block-arrow__icon-wrapper {
-  transform: rotate(180deg);
-}
 .pc-slider-new-block-arrow__button {
   display: inline-block;
   margin: 0;
@@ -38,13 +30,6 @@ unpredictable css rules order in build */
   color: inherit;
   background: none;
   cursor: pointer;
-  width: 42px;
-  height: 42px;
-  color: var(--g-color-text-secondary);
-  border-radius: 100%;
-  background-color: var(--g-color-base-background);
-  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
-  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 .pc-slider-new-block-arrow__button:focus {
   outline: 2px solid var(--g-color-line-focus);
@@ -53,10 +38,29 @@ unpredictable css rules order in build */
 .pc-slider-new-block-arrow__button:focus:not(:focus-visible) {
   outline: 0;
 }
-.pc-slider-new-block-arrow:hover .pc-slider-new-block-arrow__button {
+.pc-slider-new-block-arrow__inner {
+  width: 42px;
+  height: 42px;
+  color: var(--g-color-text-secondary);
+  border-radius: 100%;
+  background-color: var(--g-color-base-background);
+  box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 1s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.pc-slider-new-block-arrow__inner_type_left .pc-slider-new-block-arrow__icon-wrapper {
+  transform: rotate(180deg);
+}
+.pc-slider-new-block-arrow__inner:hover {
   color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
+.pc-slider-new-block-arrow__inner_transparent {
+  background-color: transparent;
+  box-shadow: none;
+}
+.pc-slider-new-block-arrow__inner_transparent:hover {
+  box-shadow: none;
+}
 .pc-slider-new-block-arrow__icon {
   position: relative;
 }

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

@@ -1,10 +1,13 @@
+import React from 'react';
 import { ClassNameProps } from '../../../models';
 import './Arrow.css';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
     type: ArrowType;
+    transparent?: boolean;
     onClick?: () => void;
     size?: number;
+    extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, onClick, className, size }: ArrowProps & ClassNameProps) => JSX.Element;
+declare const Arrow: ({ type, transparent, onClick, className, size, extraProps, }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;

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

@@ -4,8 +4,9 @@ import { block } from '../../../utils';
 import { i18n } from '../i18n';
 import './Arrow.css';
 const b = block('slider-new-block-arrow');
-const Arrow = ({ type, onClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
-    React.createElement("button", { className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) },
-        React.createElement("span", { className: b('icon-wrapper') },
-            React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
+const Arrow = ({ type, transparent, onClick, className, size = 16, extraProps, }) => (React.createElement("div", { className: b(null, className) },
+    React.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) }, extraProps),
+        React.createElement("div", { className: b('inner', { type, transparent }) },
+            React.createElement("span", { className: b('icon-wrapper') },
+                React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }))))));
 export default Arrow;

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

@@ -27,6 +27,14 @@ unpredictable css rules order in build */
 .pc-SliderNewBlock__slide.swiper-slide.swiper-slide-visible {
   animation: safari-fix 300ms;
 }
+.pc-SliderNewBlock__slide.swiper-slide .pc-SliderNewBlock__slide-item {
+  width: 100%;
+  height: 100%;
+}
+.pc-SliderNewBlock .pc-SliderNewBlock__slide-item {
+  width: 100%;
+  height: 100%;
+}
 .pc-SliderNewBlock__arrow {
   position: absolute;
   top: -2px;
@@ -48,6 +56,7 @@ unpredictable css rules order in build */
   background-color: var(--g-color-line-generic-accent);
   cursor: pointer;
   display: inline-block;
+  transition: background-color 1s;
 }
 .pc-SliderNewBlock__dot:hover {
   background-color: var(--g-color-line-generic-accent-hover);
@@ -712,7 +721,7 @@ unpredictable css rules order in build */
   padding: 0;
 }
 @media (max-width: 577px) {
-  .pc-SliderNewBlock_type_media-card:not(.pc-SliderNewBlock_type_media-card_one-slide) {
+  .pc-SliderNewBlock_type_media-card:not(.pc-SliderNewBlock_one-slide) {
     margin-left: 0;
     padding-left: 0;
     width: 100%;
@@ -746,14 +755,6 @@ unpredictable css rules order in build */
 .pc-SliderNewBlock_type_header-card {
   padding-top: 0;
 }
-@media (max-width: 577px) {
-  .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_type_header-card_one-slide) {
-    margin-left: 0;
-    padding-left: 0;
-    width: 100%;
-    overflow: inherit;
-  }
-}
 .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__wrapper {
   position: relative;
 }
@@ -775,32 +776,109 @@ unpredictable css rules order in build */
   left: 0;
   margin-right: 0;
 }
-.pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow button {
-  background-color: transparent;
-  box-shadow: none;
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-slider-new-block-arrow__inner {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-SliderNewBlock__dot {
+  background-color: var(--g-color-private-black-150);
+}
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_light) .pc-SliderNewBlock__dot_active {
+  background-color: var(--g-color-private-black-300);
+}
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-slider-new-block-arrow__inner {
+  color: var(--g-color-text-light-primary);
 }
-.pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow button:hover {
-  box-shadow: none;
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-SliderNewBlock__dot {
+  background-color: var(--g-color-private-white-150);
 }
-.pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow:hover button {
-  box-shadow: none;
+.pc-SliderNewBlock_type_header-card:has(.swiper-slide-active .pc-header-block_controls-view_dark) .pc-SliderNewBlock__dot_active {
+  background-color: var(--g-color-private-white-300);
 }
 .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__slide {
   padding: 0;
 }
+@media (max-width: 769px) {
+  .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) {
+    margin-left: -8px;
+    padding-left: 0;
+    width: calc(100% + 8px);
+  }
+}
 @media (max-width: 577px) {
   .pc-SliderNewBlock_type_header-card .pc-SliderNewBlock__arrow {
     display: none;
   }
-  .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_type_header-card_one-slide) .pc-SliderNewBlock__slider {
+  .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
     margin-left: 0;
   }
-  .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_type_header-card_one-slide) .pc-SliderNewBlock__slide {
-    padding-right: 0;
+  .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
     padding-left: 0;
   }
-  .pc-SliderNewBlock_type_header-card.pc-SliderNewBlock:not(.pc-SliderNewBlock_type_header-card_one-slide) .pc-SliderNewBlock__slide:last-child {
+  .pc-SliderNewBlock_type_header-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
     padding-right: 0;
+    padding-left: 0;
+  }
+}
+.pc-SliderNewBlock_type_fullscreen-card {
+  padding-top: 0;
+}
+@media (max-width: 577px) {
+  .pc-SliderNewBlock_type_fullscreen-card:not(.pc-SliderNewBlock_one-slide) {
+    margin-left: 0;
+    padding-left: 0;
+    width: 100%;
+    overflow: inherit;
+  }
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__slider {
+  padding: 24px 0 40px;
+  height: 100vh;
+  margin: 0;
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__slider .swiper-pagination {
+  bottom: 11px;
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__slider .pc-SliderNewBlock__dot {
+  background-color: var(--g-color-text-light-hint);
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__slider .pc-SliderNewBlock__dot_active {
+  background-color: var(--g-color-text-light-primary);
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__slider .pc-SliderNewBlock__slide {
+  height: 100%;
+  padding: 0 120px;
+}
+.pc-SliderNewBlock_type_fullscreen-card:hover .pc-SliderNewBlock__arrow {
+  display: flex;
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__arrow {
+  display: none;
+  width: 120px;
+  top: 40px;
+  bottom: 40px;
+}
+.pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock__arrow_prev {
+  left: 0;
+  margin-right: 0;
+}
+@media (max-width: 769px) {
+  .pc-SliderNewBlock_type_fullscreen-card {
+    margin-left: 0;
+  }
+  .pc-SliderNewBlock_type_fullscreen-card .pc-SliderNewBlock_slider {
+    margin-left: 0;
+    width: 100%;
+  }
+  .pc-SliderNewBlock_type_fullscreen-card:hover .pc-SliderNewBlock__arrow {
+    display: none;
+  }
+}
+@media (max-width: 577px) {
+  .pc-SliderNewBlock_type_fullscreen-card:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
+    margin-left: 0;
+  }
+  .pc-SliderNewBlock_type_fullscreen-card:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
+    padding-left: 0;
   }
 }
 @media (max-width: 769px) {
@@ -821,8 +899,11 @@ unpredictable css rules order in build */
     overflow-x: auto;
   }
   .pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slider {
-    padding: 24px 24px 48px;
-    margin: 0 0 0 -24px;
+    margin-left: -24px;
+    margin-right: 0;
+  }
+  .pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .swiper-wrapper {
+    padding-left: 16px;
   }
   .pc-SliderNewBlock:not(.pc-SliderNewBlock_one-slide) .pc-SliderNewBlock__slide {
     padding: 0 8px;

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

@@ -9,6 +9,7 @@ export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<
     dotsClassName?: string;
     blockClassName?: string;
     arrowSize?: number;
+    initialSlide?: number;
 }
-export declare const SliderNewBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: PropsWithChildren<SliderNewProps>) => JSX.Element;
+export declare const SliderNewBlock: ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: PropsWithChildren<SliderNewProps>) => JSX.Element;
 export default SliderNewBlock;

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

@@ -4,20 +4,33 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import Anchor from '../../components/Anchor/Anchor';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import Title from '../../components/Title/Title';
+import { SliderType } from '../../models';
 import { block } from '../../utils';
 import Arrow from './Arrow/Arrow';
+import { i18n } from './i18n';
 import { useSlider } from './useSlider';
+import { useSliderPagination } from './useSliderPagination';
 import './Slider.css';
 import 'swiper/swiper-bundle.css';
 const b = block('SliderNewBlock');
 SwiperCore.use([Autoplay, A11y, Pagination]);
-export const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplayMs, dots = true, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }) => {
-    const { childrenCount, breakpoints, autoplay, onSwiper, onPrev, onNext, isLocked, setIsLocked } = useSlider({
+export const SliderNewBlock = ({ 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 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,
@@ -27,14 +40,14 @@ export const SliderNewBlock = ({ animated, title, description, type, anchorId, a
         anchorId && React.createElement(Anchor, { id: anchorId }),
         React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
         React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated },
-            React.createElement(Swiper, { className: b('slider', className), 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.Children.map(children, (elem, index) => (React.createElement(SwiperSlide, { className: b('slide'), key: index }, elem)))),
+            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(Arrow, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize }),
-                React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize }))),
+                React.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    React.createElement(Arrow, { className: b('arrow', { prev: true }), type: "left", transparent: type === SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", transparent: type === SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
             React.createElement("div", { className: b('footer') }, disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }) }, disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text)) : null))));
 };
 export default SliderNewBlock;

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

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

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

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

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

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

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

@@ -1,11 +1,12 @@
 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;
-}>) => {
+type UseSliderProps = PropsWithChildren<{
+    autoplayMs?: number;
+    type?: string;
+    slidesToShow?: SlidesToShow;
+}>;
+export declare const useSlider: ({ children, autoplayMs, type, ...props }: UseSliderProps) => {
     slider: Swiper | undefined;
     onSwiper: React.Dispatch<React.SetStateAction<Swiper | undefined>>;
     onNext: () => void;
@@ -15,7 +16,8 @@ export declare const useSlider: ({ children, autoplayMs, type, slidesToShow, }:
     isLocked: boolean;
     setIsLocked: React.Dispatch<React.SetStateAction<boolean>>;
     autoplay: false | {
-        delay: number | undefined;
+        delay: number;
         disableOnInteraction: boolean;
     };
 };
+export {};

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

@@ -1,11 +1,14 @@
+import { __rest } from "tslib";
 import React, { useEffect, useMemo, useState } from 'react';
 import { SliderType } from '../../models';
-import { getSliderResponsiveParams } from './utils';
-export const useSlider = ({ children, autoplayMs, type, slidesToShow, }) => {
+import { getSliderResponsiveParams, useMemoized } from './utils';
+export const useSlider = (_a) => {
+    var { children, autoplayMs, type } = _a, props = __rest(_a, ["children", "autoplayMs", "type"]);
     const [slider, setSlider] = useState();
     const [isLocked, setIsLocked] = useState(false);
+    const slidesToShow = useMemoized(props.slidesToShow);
     const childrenCount = React.Children.count(children);
-    const autoplayEnabled = useMemo(() => Boolean(autoplayMs), [autoplayMs]);
+    const autoplayEnabled = autoplayMs !== undefined && autoplayMs > 0;
     const breakpoints = useMemo(() => {
         return getSliderResponsiveParams({
             contentLength: childrenCount,

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

@@ -0,0 +1,9 @@
+import { Swiper as SwiperProps } from 'swiper/swiper-react';
+export declare const useSliderPagination: (props: {
+    enabled: boolean;
+    isA11yControlHidden: boolean;
+    controlTabIndex: number;
+    bulletClass: string;
+    bulletActiveClass: string;
+    paginationLabel: string;
+}) => Pick<SwiperProps, 'pagination' | 'onPaginationUpdate'> | undefined;

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

@@ -0,0 +1,32 @@
+import { setElementAtrributes } from './utils';
+export const useSliderPagination = (props) => {
+    if (!props.enabled) {
+        return undefined;
+    }
+    const { isA11yControlHidden, controlTabIndex, bulletClass, bulletActiveClass, paginationLabel } = props;
+    return {
+        pagination: {
+            clickable: true,
+            bulletClass,
+            bulletActiveClass,
+        },
+        onPaginationUpdate: (slider) => {
+            const pagination = slider.pagination.el;
+            setElementAtrributes(pagination, {
+                role: 'menu',
+                'aria-hidden': isA11yControlHidden,
+                'aria-label': paginationLabel,
+            });
+            const bullets = pagination.querySelectorAll(`.${bulletClass}`);
+            bullets.forEach((bullet) => {
+                const isActive = bullet.classList.contains(bulletActiveClass);
+                setElementAtrributes(bullet, {
+                    role: 'menuitemradio',
+                    'aria-hidden': isA11yControlHidden,
+                    'aria-checked': isActive,
+                    tabindex: controlTabIndex,
+                });
+            });
+        },
+    };
+};

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

@@ -12,3 +12,5 @@ export interface GetSlidesToShowParams {
     mobileFullscreen?: boolean;
 }
 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/SliderNew/utils.js

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
@@ -24,3 +26,11 @@ export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileF
         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)));