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

package/build/cjs/components/MediaBase/MediaBase.js

@@ -32,7 +32,7 @@ const MediaBase = (props) => {
                 }) },
                 react_1.default.createElement(grid_1.Col, { className: b('content'), sizes: contentSizes }, mediaContent),
                 card ? (react_1.default.createElement(grid_1.Col, { sizes: mediaSizes },
-                    react_1.default.createElement("div", null, card))) : null))));
+                    react_1.default.createElement("div", { className: b('card') }, card))) : null))));
 };
 exports.MediaBase = MediaBase;
 exports.MediaBase.Card = Card;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -24,7 +24,7 @@ const FPS = 60;
 // eslint-disable-next-line react/display-name
 exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain, } = props;
+    const { src, previewImgUrl, loop = false, controls = models_1.MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
     const { type = models_1.PlayButtonType.Default, theme = models_1.PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = models_1.CustomControlsType.WithMuteButton, muteButtonShown, positioning = models_1.CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);

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

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

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

@@ -62,7 +62,8 @@ export declare enum SliderBreakpointNames {
 }
 export declare enum SliderType {
     MediaCard = "media-card",
-    HeaderCard = "header-card"
+    HeaderCard = "header-card",
+    FullscreenCard = "fullscreen-card"
 }
 export type SliderBreakpointParams = Record<SliderBreakpointNames, number>;
 export type SlidesToShow = Partial<SliderBreakpointParams> | number;

package/build/cjs/models/constructor-items/blocks.js

@@ -38,6 +38,7 @@ var SliderType;
 (function (SliderType) {
     SliderType["MediaCard"] = "media-card";
     SliderType["HeaderCard"] = "header-card";
+    SliderType["FullscreenCard"] = "fullscreen-card";
 })(SliderType = exports.SliderType || (exports.SliderType = {}));
 var PCShareSocialNetwork;
 (function (PCShareSocialNetwork) {

package/build/cjs/navigation/hooks/useShowBorder.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const react_1 = require("react");
-const lodash_1 = require("lodash");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const useShowBorder = (withBorder, withBorderOnScroll) => {
     const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
     (0, react_1.useEffect)(() => {
@@ -12,7 +13,7 @@ const useShowBorder = (withBorder, withBorderOnScroll) => {
                 setShowBorder(window.scrollY > 0);
             }
         };
-        const scrollHandler = (0, lodash_1.debounce)(showBorderOnScroll, 20);
+        const scrollHandler = (0, debounce_1.default)(showBorderOnScroll, 20);
         window.addEventListener('scroll', scrollHandler, { passive: true });
         return () => window.removeEventListener('scroll', scrollHandler);
     });

package/build/cjs/sub-blocks/Content/Content.css

@@ -87,6 +87,9 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,
+.pc-content_theme_dark .pc-content__list *,
+.pc-content_theme_dark .pc-content__list .yfm,
+.pc-content_theme_dark .pc-content__list .yfm *,
 .pc-content_theme_dark .pc-content__links a {
   color: var(--g-color-text-light-primary);
 }
@@ -101,11 +104,13 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-light-primary);
 }
-.pc-content_theme_dark .pc-content__text .yfm a {
+.pc-content_theme_dark .pc-content__text .yfm a,
+.pc-content_theme_dark .pc-content__list .yfm a {
   color: var(--g-color-text-light-primary);
   text-decoration: underline;
 }
-.pc-content_theme_dark .pc-content__text .yfm a:hover {
+.pc-content_theme_dark .pc-content__text .yfm a:hover,
+.pc-content_theme_dark .pc-content__list .yfm a:hover {
   color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
@@ -119,6 +124,9 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__title *,
 .pc-content_theme_light .pc-content__text .yfm,
 .pc-content_theme_light .pc-content__text .yfm *,
+.pc-content_theme_light .pc-content__list *,
+.pc-content_theme_light .pc-content__list .yfm,
+.pc-content_theme_light .pc-content__list .yfm *,
 .pc-content_theme_light .pc-content__links a {
   color: var(--g-color-text-dark-primary);
 }
@@ -133,11 +141,13 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-dark-primary);
 }
-.pc-content_theme_light .pc-content__text .yfm a {
+.pc-content_theme_light .pc-content__text .yfm a,
+.pc-content_theme_light .pc-content__list .yfm a {
   color: var(--g-color-text-dark-primary);
   text-decoration: underline;
 }
-.pc-content_theme_light .pc-content__text .yfm a:hover {
+.pc-content_theme_light .pc-content__text .yfm a:hover,
+.pc-content_theme_light .pc-content__list .yfm a:hover {
   color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {

package/build/cjs/sub-blocks/ImageCard/ImageCard.css

@@ -16,6 +16,14 @@ unpredictable css rules order in build */
 .pc-image-card_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
+@media (min-width: 577px) {
+  .slick-slide:not(.slick-active) .pc-image-card {
+    box-shadow: none;
+  }
+  .swiper-slide:not(.swiper-slide-visible) .pc-image-card {
+    box-shadow: none;
+  }
+}
 .pc-image-card .pc-image-card__content {
   display: flex;
   padding: 32px;

package/build/esm/blocks/HeaderSlider/HeaderSlider.css

@@ -34,13 +34,6 @@ unpredictable css rules order in build */
     padding-right: 32px;
   }
 }
-@media (max-width: 769px) {
-  .pc-header-slider-block.pc-SliderBlock {
-    margin-left: -8px;
-    padding-left: 0;
-    width: calc(100% + 8px);
-  }
-}
 @media (max-width: 577px) {
   .pc-header-slider-block__item-content .pc-header-block__content {
     padding-left: 0;
@@ -49,7 +42,4 @@ unpredictable css rules order in build */
   .pc-header-slider-block__item-content .pc-header-block__container-fluid {
     padding-left: 24px;
   }
-  .pc-header-slider-block .slick-track .slick-slide {
-    max-width: 100%;
-  }
 }

package/build/esm/blocks/HeaderSlider/HeaderSlider.js

@@ -4,7 +4,7 @@ import { MobileContext } from '../../context/mobileContext';
 import { SliderType } from '../../models';
 import { block } from '../../utils';
 import Header from '../Header/Header';
-import { SliderBlock } from '../index';
+import { SliderNewBlock as SliderBlock } from '../unstable';
 import './HeaderSlider.css';
 const b = block('header-slider-block');
 export const HeaderSliderBlock = (_a) => {

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

@@ -105,6 +105,8 @@ unpredictable css rules order in build */
   height: auto;
 }
 .pc-SliderBlock .slick-track .slick-slide > div {
+  display: flex;
+  width: 100%;
   height: 100%;
 }
 .pc-SliderBlock .slick-arrow {

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

@@ -10,6 +10,7 @@ export interface SliderProps extends Omit<SliderParams, 'children'>, Refable<HTM
     dotsClassName?: string;
     blockClassName?: string;
     arrowSize?: number;
+    initialIndex?: number;
 }
 export declare const SliderBlock: (props: React.PropsWithChildren<SliderProps>) => JSX.Element;
 export default SliderBlock;

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

@@ -1,4 +1,5 @@
 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';
@@ -15,7 +16,8 @@ import useFocus from '../../hooks/useFocus';
 import { SliderType, } from '../../models';
 import { block } from '../../utils';
 import Arrow from './Arrow/Arrow';
-import { getSliderResponsiveParams, getSlidesCountByBreakpoint, getSlidesToShowCount, getSlidesToShowWithDefaults, } from './utils';
+import { i18n } from './i18n';
+import { getSliderResponsiveParams, getSlidesCountByBreakpoint, getSlidesToShowCount, getSlidesToShowWithDefaults, isFocusable, useRovingTabIndex, } from './utils';
 import './Slider.css';
 const b = block('SliderBlock');
 const slick = block('slick-origin');
@@ -23,12 +25,15 @@ 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 { 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 disclosedChildren = useMemo(() => discloseAllNestedChildren(children), [children]);
+    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,
@@ -36,11 +41,16 @@ export const SliderBlock = (props) => {
     }));
     const slidesToShowCount = getSlidesToShowCount(slidesToShow);
     const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
-    const [currentIndex, setCurrentIndex] = useState(0);
+    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) {
@@ -55,7 +65,7 @@ export const SliderBlock = (props) => {
     }, 100), [slider, breakpoint]);
     const scrollLastSlide = useCallback((current) => {
         const lastSlide = childrenCount - slidesToShowCount;
-        if (autoplay && lastSlide === current) {
+        if (isAutoplayEnabled && lastSlide === current) {
             // Slick doesn't support autoplay with no infinity scroll
             autoplayTimeId.current = setTimeout(() => {
                 if (slider) {
@@ -67,9 +77,9 @@ export const SliderBlock = (props) => {
                         slider.slickPlay();
                     }
                 }, 500);
-            }, autoplay);
+            }, autoplaySpeed);
         }
-    }, [autoplay, childrenCount, slider, slidesToShowCount]);
+    }, [autoplaySpeed, childrenCount, isAutoplayEnabled, slider, slidesToShowCount]);
     useEffect(() => {
         if (hasFocus && autoplayTimeId.current) {
             clearTimeout(autoplayTimeId.current);
@@ -83,7 +93,7 @@ export const SliderBlock = (props) => {
         window.addEventListener('resize', onResize, { passive: true });
         return () => window.removeEventListener('resize', onResize);
     }, [onResize]);
-    const handleArrowClick = useCallback((direction) => {
+    const handleArrowClick = (direction) => {
         let nextIndex;
         if (direction === 'right') {
             nextIndex =
@@ -96,11 +106,12 @@ export const SliderBlock = (props) => {
         if (slider) {
             slider.slickGoTo(nextIndex);
         }
-    }, [childrenCount, currentIndex, slider, slidesCountByBreakpoint]);
+    };
     const onBeforeChange = useCallback((current, next) => {
         if (handleBeforeChange) {
             handleBeforeChange(current, next);
         }
+        prevIndexRef.current = current;
         setCurrentIndex(Math.ceil(next));
     }, [handleBeforeChange]);
     const onAfterChange = useCallback((current) => {
@@ -113,16 +124,33 @@ export const SliderBlock = (props) => {
         if (!hasFocus) {
             scrollLastSlide(current);
         }
-    }, [handleAfterChange, hasFocus, scrollLastSlide]);
-    const handleDotClick = useCallback((index) => {
+        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);
         }
-    }, [slider, currentIndex, slidesCountByBreakpoint]);
-    const barSlidesCount = childrenCount - slidesToShowCount + 1;
+    };
+    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,
+    });
     const renderBar = () => {
         return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
@@ -133,19 +161,22 @@ export const SliderBlock = (props) => {
     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", { className: b('accessible-bar'), "aria-current": true, "aria-label": `Slide ${currentIndex + 1} of ${barSlidesCount}`, style: {
+        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 < slidesToShowCount) {
+        if (0 <= currentIndexDiff && currentIndexDiff < slidesCountByBreakpoint) {
             currentSlideNumber = currentIndex + 1;
         }
-        else if (currentIndexDiff >= slidesToShowCount) {
-            currentSlideNumber = index - slidesToShowCount + 2;
+        else if (currentIndexDiff >= slidesCountByBreakpoint) {
+            currentSlideNumber = index - slidesCountByBreakpoint + 2;
         }
         else {
             currentSlideNumber = index + 1;
@@ -154,12 +185,24 @@ export const SliderBlock = (props) => {
     };
     const isVisibleSlide = (index) => {
         const currentIndexDiff = index - currentIndex;
-        return (slidesCountByBreakpoint > 0 &&
+        const result = slidesCountByBreakpoint > 0 &&
             0 <= currentIndexDiff &&
-            currentIndexDiff < slidesToShowCount);
+            currentIndexDiff < slidesCountByBreakpoint;
+        return result;
     };
     const renderDot = (index) => {
-        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index), "aria-hidden": isVisibleSlide(index) ? true : undefined, "aria-label": `Slide ${getCurrentSlideNumber(index)} of ${barSlidesCount}` }));
+        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) {
@@ -170,7 +213,7 @@ export const SliderBlock = (props) => {
             .map((_item, index) => renderDot(index));
         dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
         return (React.createElement("div", { className: b('dots', dotsClassName) },
-            React.createElement("ul", { className: b('dots-list') },
+            React.createElement("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": i18n('pagination-label') }, rovingListProps),
                 renderBar(),
                 dotsList)));
     };
@@ -189,17 +232,18 @@ export const SliderBlock = (props) => {
             infinite: false,
             speed: 1000,
             adaptiveHeight: adaptive,
-            autoplay: Boolean(autoplay),
-            autoplaySpeed: autoplay,
+            autoplay: isAutoplayEnabled,
+            autoplaySpeed,
             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 }),
+            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),
@@ -219,23 +263,33 @@ export const SliderBlock = (props) => {
             React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
             React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
 };
+function getSlideId(sliderId, index) {
+    return `slider-${sliderId}-child-${index}`;
+}
 // TODO remove this and rework PriceDetailed CLOUDFRONT-12230
-function discloseAllNestedChildren(children) {
+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) => React.cloneElement(child, {
-                    data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
-                }));
+                return nestedChildren.map((nestedChild) => {
+                    return wrapped(React.cloneElement(child, {
+                        data: Object.assign(Object.assign({}, child.props.data), { items: [nestedChild] }),
+                    }));
+                });
             }
         }
-        return child;
+        return child && wrapped(child);
     }).filter(Boolean);
 }
 export default SliderBlock;

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

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

package/build/esm/blocks/Slider/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/Slider/i18n/ru.json

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

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

@@ -10,6 +10,7 @@ export interface GetSlidesToShowParams {
     breakpoints?: SlidesToShow;
     mobileFullscreen?: boolean;
 }
+export declare const isFocusable: (element: Element) => boolean;
 export declare function getSlidesToShowWithDefaults({ contentLength, breakpoints, mobileFullscreen, }: GetSlidesToShowParams): {
     sm: number;
     xl: number;
@@ -24,3 +25,12 @@ export declare function getSliderResponsiveParams(breakpoints: SliderBreakpointP
 }[];
 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/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 };
+}