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

package/build/cjs/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/cjs/blocks/SliderNew/Slider.d.ts

@@ -8,6 +8,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/cjs/blocks/SliderNew/Slider.js

@@ -8,19 +8,32 @@ const react_2 = require("swiper/react");
 const Anchor_1 = tslib_1.__importDefault(require("../../components/Anchor/Anchor"));
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
+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 useSlider_1 = require("./useSlider");
+const useSliderPagination_1 = require("./useSliderPagination");
 require("swiper/swiper-bundle.css");
 const b = (0, utils_1.block)('SliderNewBlock');
 swiper_1.default.use([swiper_1.Autoplay, swiper_1.A11y, swiper_1.Pagination]);
-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 } = (0, useSlider_1.useSlider)({
+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 } = (0, useSlider_1.useSlider)({
         slidesToShow,
         children,
         type,
         autoplayMs,
     });
+    const isA11yControlHidden = Boolean(autoplay);
+    const controlTabIndex = isA11yControlHidden ? -1 : 0;
+    const paginationProps = (0, useSliderPagination_1.useSliderPagination)({
+        enabled: dots,
+        isA11yControlHidden,
+        controlTabIndex,
+        bulletClass: b('dot', dotsClassName),
+        bulletActiveClass: b('dot_active'),
+        paginationLabel: (0, i18n_1.i18n)('pagination-label'),
+    });
     return (react_1.default.createElement("div", { className: b({
             'one-slide': childrenCount === 1,
             'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
@@ -30,14 +43,14 @@ const SliderNewBlock = ({ animated, title, description, type, anchorId, arrows =
         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 },
-            react_1.default.createElement(react_2.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_1.default.Children.map(children, (elem, index) => (react_1.default.createElement(react_2.SwiperSlide, { className: b('slide'), key: index }, elem)))),
+            react_1.default.createElement(react_2.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: (0, i18n_1.i18n)('dot-label', { index: '{{index}}' }),
+                } }, paginationProps), react_1.default.Children.map(children, (elem, index) => (react_1.default.createElement(react_2.SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (react_1.default.createElement("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
             arrows && !isLocked && (react_1.default.createElement(react_1.Fragment, null,
-                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize }),
-                react_1.default.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize }))),
+                react_1.default.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    react_1.default.createElement(Arrow_1.default, { className: b('arrow', { prev: true }), type: "left", transparent: type === models_1.SliderType.HeaderCard, onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    react_1.default.createElement(Arrow_1.default, { className: b('arrow', { next: true }), type: "right", transparent: type === models_1.SliderType.HeaderCard, onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })))),
             react_1.default.createElement("div", { className: b('footer') }, disclaimer ? (react_1.default.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))));
 };
 exports.SliderNewBlock = SliderNewBlock;

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

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

package/build/cjs/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/cjs/blocks/SliderNew/useSlider.js

@@ -5,11 +5,13 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../models");
 const utils_1 = require("./utils");
-const useSlider = ({ children, autoplayMs, type, slidesToShow, }) => {
+const useSlider = (_a) => {
+    var { children, autoplayMs, type } = _a, props = tslib_1.__rest(_a, ["children", "autoplayMs", "type"]);
     const [slider, setSlider] = (0, react_1.useState)();
     const [isLocked, setIsLocked] = (0, react_1.useState)(false);
+    const slidesToShow = (0, utils_1.useMemoized)(props.slidesToShow);
     const childrenCount = react_1.default.Children.count(children);
-    const autoplayEnabled = (0, react_1.useMemo)(() => Boolean(autoplayMs), [autoplayMs]);
+    const autoplayEnabled = autoplayMs !== undefined && autoplayMs > 0;
     const breakpoints = (0, react_1.useMemo)(() => {
         return (0, utils_1.getSliderResponsiveParams)({
             contentLength: childrenCount,

package/build/cjs/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/cjs/blocks/SliderNew/useSliderPagination.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSliderPagination = void 0;
+const utils_1 = require("./utils");
+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;
+            (0, utils_1.setElementAtrributes)(pagination, {
+                role: 'menu',
+                'aria-hidden': isA11yControlHidden,
+                'aria-label': paginationLabel,
+            });
+            const bullets = pagination.querySelectorAll(`.${bulletClass}`);
+            bullets.forEach((bullet) => {
+                const isActive = bullet.classList.contains(bulletActiveClass);
+                (0, utils_1.setElementAtrributes)(bullet, {
+                    role: 'menuitemradio',
+                    'aria-hidden': isA11yControlHidden,
+                    'aria-checked': isActive,
+                    tabindex: controlTabIndex,
+                });
+            });
+        },
+    };
+};
+exports.useSliderPagination = useSliderPagination;

package/build/cjs/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/cjs/blocks/SliderNew/utils.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
+exports.setElementAtrributes = exports.useMemoized = exports.getSliderResponsiveParams = exports.DEFAULT_SLIDE_BREAKPOINTS = void 0;
 const tslib_1 = require("tslib");
+const react_1 = require("react");
+const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const pickBy_1 = tslib_1.__importDefault(require("lodash/pickBy"));
 const constants_1 = require("../../constants");
 const models_1 = require("./models");
@@ -29,3 +31,13 @@ function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscre
     }, {});
 }
 exports.getSliderResponsiveParams = getSliderResponsiveParams;
+const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && (0, isEqual_1.default)(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+exports.useMemoized = useMemoized;
+const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));
+exports.setElementAtrributes = setElementAtrributes;

package/build/cjs/components/FullscreenImage/FullscreenImage.css

@@ -12,6 +12,25 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__modal-content {
   position: relative;
   border-radius: var(--pc-border-radius);
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content-wrapper {
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content_loaded {
+  max-width: fit-content;
+}
+.pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  justify-content: center;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
+  background-color: transparent;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__icon-wrapper {
+  opacity: 1;
 }
 .pc-fullscreen-image__modal-image {
   display: block;
@@ -19,6 +38,27 @@ unpredictable css rules order in build */
   max-height: 70vh;
   overflow: hidden;
 }
+.pc-fullscreen-image__modal-slider {
+  max-width: 100vw;
+  width: 100%;
+  height: 100vh;
+}
+.pc-fullscreen-image__modal-slider_item {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-fullscreen-image__modal-slider_item-image {
+  display: block;
+  margin: auto;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  max-height: calc(100vh - 80px);
+  max-width: 100%;
+  object-fit: contain;
+  object-position: center;
+}
 .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
   border-radius: var(--pc-border-radius);
 }
@@ -36,6 +76,7 @@ unpredictable css rules order in build */
   align-items: center;
   justify-content: center;
   position: absolute;
+  z-index: 1001;
   right: 16px;
   top: 16px;
   width: 36px;
@@ -56,6 +97,10 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__icon-wrapper:focus {
   opacity: 1;
 }
+.pc-fullscreen-image__icon-wrapper_visible {
+  right: 24px;
+  top: 24px;
+}
 .pc-fullscreen-image__icon {
   color: var(--g-color-text-hint);
 }
@@ -67,14 +112,9 @@ unpredictable css rules order in build */
     width: 100%;
   }
 }
-@media (max-width: 1081px) {
-  .pc-fullscreen-image__image {
-    pointer-events: none;
-  }
+@media (max-width: 769px) {
   .pc-fullscreen-image__icon-wrapper {
-    display: none;
-  }
-  .pc-fullscreen-image__modal {
-    display: none !important; /* stylelint-disable-line declaration-no-important */
+    right: 20px;
+    top: 50px;
   }
 }

package/build/cjs/components/FullscreenImage/FullscreenImage.d.ts

@@ -1,10 +1,15 @@
 import { CSSProperties, HTMLProps } from 'react';
+import { ImageProps as ModelImageProps } from '../../models';
 import { ImageProps } from '../Image/Image';
 export interface FullscreenImageProps extends ImageProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;
     extraProps?: HTMLProps<HTMLDivElement>;
+    sliderData?: {
+        items: ModelImageProps[];
+        initialIndex: number;
+    };
 }
 declare const FullscreenImage: (props: FullscreenImageProps) => JSX.Element;
 export default FullscreenImage;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -4,25 +4,39 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const unstable_1 = require("../../blocks/unstable");
+const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const utils_2 = require("../Media/Image/utils");
 const i18n_1 = require("./i18n");
 const b = (0, utils_1.block)('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 const FullscreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps } = props;
+    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = (0, i18n_1.i18n)('img-alt'), extraProps, } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [sliderLoaded, setSliderLoaded] = (0, react_1.useState)(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
+    (0, react_1.useEffect)(() => {
+        if (sliderData && !isOpened) {
+            setSliderLoaded(false);
+        }
+    }, [isOpened, sliderData]);
+    const handleSliderImageLoad = () => {
+        setSliderLoaded(true);
+    };
     return (react_1.default.createElement("div", Object.assign({ className: b() }, extraProps),
         react_1.default.createElement("div", { className: b('image-wrapper') },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
-        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }) },
             react_1.default.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": (0, i18n_1.i18n)('close') },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
-            react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))))));
+            sliderData ? (react_1.default.createElement("div", { className: b('modal-slider') },
+                react_1.default.createElement(unstable_1.SliderNewBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: models_1.SliderType.FullscreenCard }, sliderData.items.map((item, index) => (react_1.default.createElement("div", { key: index, className: b('modal-slider_item') },
+                    react_1.default.createElement(Image_1.default, Object.assign({ onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper') }, (0, utils_2.getMediaImage)(item))))))))) : (react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 exports.default = FullscreenImage;

package/build/cjs/components/Media/Image/Image.d.ts

@@ -3,6 +3,7 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
+    fullscreenClassName?: string;
     onLoad?: () => void;
 }
 interface InnerImageProps {

package/build/cjs/components/Media/Image/Image.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const web_1 = require("@react-spring/web");
 const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
-const Slider_1 = tslib_1.__importDefault(require("../../../blocks/Slider/Slider"));
+const unstable_1 = require("../../../blocks/unstable");
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../../BackgroundImage/BackgroundImage"));
@@ -15,7 +15,7 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
 exports.defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
     const image = Array.isArray(props.image) && disableImageSliderForArrayInput
         ? props.image[0]
         : props.image;
@@ -41,9 +41,9 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const renderFullscreenImage = (item) => {
+    const renderFullscreenImage = (item, sliderData) => {
         const itemData = (0, utils_2.getMediaImage)(item);
-        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
+        return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData })));
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
@@ -56,7 +56,9 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+        return (react_1.default.createElement(unstable_1.SliderNewBlock, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem
+            ? renderFullscreenImage(item, { items: imageArray, initialIndex: index })
+            : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

package/build/cjs/components/Media/Media.css

@@ -8,4 +8,8 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
   align-items: center;
+}
+.pc-Media__fullscreen-image-cover {
+  object-fit: cover;
+  object-position: top;
 }

package/build/cjs/components/Media/Media.d.ts

@@ -3,6 +3,7 @@ import { ImageAdditionProps } from './Image/Image';
 import { VideoAdditionProps } from './Video/Video';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
+    isFullscreenImageCover?: boolean;
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;

package/build/cjs/components/Media/Media.js

@@ -12,13 +12,13 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, isFullscreenImageCover, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, fullscreenClassName: isFullscreenImageCover ? b('fullscreen-image-cover') : undefined, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
         }
         if (video) {
             const videoProps = {
@@ -66,6 +66,7 @@ const Media = (props) => {
         isBackground,
         hasVideoFallback,
         fullscreen,
+        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,