@gravity-ui/page-constructor 5.33.4-beta.0 → 5.33.4

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

@@ -1,24 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import get from 'lodash/get';
 import noop from 'lodash/noop';
 import SlickSlider from 'react-slick';
-import Anchor from "../../components/Anchor/Anchor.js";
-import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
-import OutsideClick from "../../components/OutsideClick/OutsideClick.js";
-import Title from "../../components/Title/Title.js";
-import { BREAKPOINTS } from "../../constants.js";
-import { MobileContext } from "../../context/mobileContext/index.js";
-import { SSRContext } from "../../context/ssrContext/index.js";
-import { StylesContext } from "../../context/stylesContext/StylesContext.js";
-import useFocus from "../../hooks/useFocus.js";
-import { SliderType, } from "../../models/index.js";
-import { block } from "../../utils/index.js";
-import Arrow from "./Arrow/Arrow.js";
-import { i18n } from "./i18n/index.js";
-import { getSliderResponsiveParams, getSlidesCountByBreakpoint, getSlidesToShowCount, getSlidesToShowWithDefaults, isFocusable, useRovingTabIndex, } from "./utils.js";
+import Anchor from '../../components/Anchor/Anchor';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import OutsideClick from '../../components/OutsideClick/OutsideClick';
+import Title from '../../components/Title/Title';
+import { BREAKPOINTS } from '../../constants';
+import { MobileContext } from '../../context/mobileContext';
+import { SSRContext } from '../../context/ssrContext';
+import { StylesContext } from '../../context/stylesContext/StylesContext';
+import useFocus from '../../hooks/useFocus';
+import { SliderType, } from '../../models';
+import { block } from '../../utils';
+import Arrow from './Arrow/Arrow';
+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');
@@ -27,33 +26,33 @@ const DOT_GAP = 16;
 export const SliderBlock = (props) => {
     var _a;
     const { animated, title, description, type, anchorId, arrows = true, adaptive, autoplay: autoplaySpeed, dots = true, dotsClassName, disclaimer, children, className, blockClassName, lazyLoad, arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, } = props;
-    const { isServer } = React.useContext(SSRContext);
-    const isMobile = React.useContext(MobileContext);
-    const [breakpoint, setBreakpoint] = React.useState(BREAKPOINTS.xl);
+    const { isServer } = useContext(SSRContext);
+    const isMobile = useContext(MobileContext);
+    const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
     const sliderId = useUniqId();
-    const disclosedChildren = React.useMemo(() => discloseAllNestedChildren(children, sliderId), [children, sliderId]);
+    const disclosedChildren = useMemo(() => discloseAllNestedChildren(children, sliderId), [children, sliderId]);
     const childrenCount = disclosedChildren.length;
     const isAutoplayEnabled = autoplaySpeed !== undefined && autoplaySpeed > 0;
-    const isUserInteractionRef = React.useRef(false);
-    const [slidesToShow] = React.useState(getSlidesToShowWithDefaults({
+    const isUserInteractionRef = useRef(false);
+    const [slidesToShow] = useState(getSlidesToShowWithDefaults({
         contentLength: childrenCount,
         breakpoints: props.slidesToShow,
         mobileFullscreen: Boolean(props.type && Object.values(SliderType).includes(props.type)),
     }));
     const slidesToShowCount = getSlidesToShowCount(slidesToShow);
     const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
-    const [currentIndex, setCurrentIndex] = React.useState(0);
-    const [childStyles, setChildStyles] = React.useState({});
-    const [slider, setSlider] = React.useState();
-    const prevIndexRef = React.useRef(0);
-    const autoplayTimeId = React.useRef();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    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 = React.useCallback(debounce(() => {
+    const onResize = useCallback(debounce(() => {
         if (!slider) {
             return;
         }
@@ -64,7 +63,7 @@ export const SliderBlock = (props) => {
             slider.slickGoTo(0);
         }
     }, 100), [slider, breakpoint]);
-    const scrollLastSlide = React.useCallback((current) => {
+    const scrollLastSlide = useCallback((current) => {
         const lastSlide = childrenCount - slidesToShowCount;
         if (isAutoplayEnabled && lastSlide === current) {
             // Slick doesn't support autoplay with no infinity scroll
@@ -81,7 +80,7 @@ export const SliderBlock = (props) => {
             }, autoplaySpeed);
         }
     }, [autoplaySpeed, childrenCount, isAutoplayEnabled, slider, slidesToShowCount]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (hasFocus && autoplayTimeId.current) {
             clearTimeout(autoplayTimeId.current);
         }
@@ -89,7 +88,7 @@ export const SliderBlock = (props) => {
             scrollLastSlide(currentIndex);
         }
     }, [currentIndex, hasFocus, scrollLastSlide]);
-    React.useEffect(() => {
+    useEffect(() => {
         onResize();
         window.addEventListener('resize', onResize, { passive: true });
         return () => window.removeEventListener('resize', onResize);
@@ -108,14 +107,14 @@ export const SliderBlock = (props) => {
             slider.slickGoTo(nextIndex);
         }
     };
-    const onBeforeChange = React.useCallback((current, next) => {
+    const onBeforeChange = useCallback((current, next) => {
         if (handleBeforeChange) {
             handleBeforeChange(current, next);
         }
         prevIndexRef.current = current;
         setCurrentIndex(Math.ceil(next));
     }, [handleBeforeChange]);
-    const onAfterChange = React.useCallback((current) => {
+    const onAfterChange = useCallback((current) => {
         if (handleAfterChange) {
             handleAfterChange(current);
         }
@@ -153,7 +152,7 @@ export const SliderBlock = (props) => {
         uniqId: sliderId,
     });
     const renderBar = () => {
-        return (slidesCountByBreakpoint > 1 && (_jsx("li", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
@@ -162,13 +161,13 @@ export const SliderBlock = (props) => {
     const renderAccessibleBar = (index) => {
         return (
         // To have this key differ from keys used in renderDot function, added `-accessible-bar` part
-        _jsx(React.Fragment, { children: slidesCountByBreakpoint > 0 && (_jsx("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)))) }, `${index}-accessible-bar`));
+        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;
@@ -195,7 +194,7 @@ export const SliderBlock = (props) => {
         const isVisible = isVisibleSlide(index);
         const currentSlideNumber = getCurrentSlideNumber(index);
         const rovingItemProps = isVisible ? undefined : getRovingItemProps(currentSlideNumber);
-        return (_jsx("li", Object.assign({ className: b('dot', { active: index === currentIndex }), onClick: asUserInteraction(() => handleDotClick(index)), onKeyDown: (e) => {
+        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();
@@ -203,7 +202,7 @@ export const SliderBlock = (props) => {
             }, role: "menuitemradio", "aria-checked": false, tabIndex: -1, "aria-hidden": isVisible, "aria-label": i18n('dot-label', {
                 index: currentSlideNumber,
                 count: barSlidesCount,
-            }) }, rovingItemProps), index));
+            }) }, rovingItemProps)));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {
@@ -213,10 +212,13 @@ export const SliderBlock = (props) => {
             .fill(null)
             .map((_item, index) => renderDot(index));
         dotsList.splice(currentIndex, 0, renderAccessibleBar(currentIndex));
-        return (_jsx("div", { className: b('dots', dotsClassName), children: _jsxs("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": i18n('pagination-label') }, rovingListProps, { children: [renderBar(), dotsList] })) }));
+        return (React.createElement("div", { className: b('dots', dotsClassName) },
+            React.createElement("ul", Object.assign({ className: b('dots-list'), role: "menu", "aria-label": i18n('pagination-label') }, rovingListProps),
+                renderBar(),
+                dotsList)));
     };
     const renderDisclaimer = () => {
-        return disclaimer ? (_jsx("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }), children: disclaimer.text })) : null;
+        return disclaimer ? (React.createElement("div", { className: b('disclaimer', { size: disclaimer.size || 'm' }) }, disclaimer.text)) : null;
     };
     const renderSlider = () => {
         /* Disable adding of width in inline styles when SSR to prevent overriding of default styles */
@@ -238,20 +240,28 @@ export const SliderBlock = (props) => {
             beforeChange: onBeforeChange,
             afterChange: onAfterChange,
             initialSlide: 0,
-            nextArrow: (_jsx(Arrow, { type: "right", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
-            prevArrow: (_jsx(Arrow, { type: "left", handleClick: asUserInteraction(handleArrowClick), size: arrowSize })),
+            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 (_jsxs(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop, children: [_jsx(SlickSlider, Object.assign({}, settings, { children: disclosedChildren })), _jsxs("div", { className: b('footer'), children: [renderDisclaimer(), renderNavigation()] })] }));
+        return (React.createElement(OutsideClick, { onOutsideClick: isMobile ? unsetFocus : noop },
+            React.createElement(SlickSlider, Object.assign({}, settings), disclosedChildren),
+            React.createElement("div", { className: b('footer') },
+                renderDisclaimer(),
+                renderNavigation())));
     };
-    return (_jsx(StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }), children: _jsxs("div", { className: b({
+    return (React.createElement(StylesContext.Provider, { value: Object.assign(Object.assign({}, childStyles), { setStyles: setChildStyles }) },
+        React.createElement("div", { className: b({
                 'align-left': childrenCount < slidesCountByBreakpoint,
                 'one-slide': childrenCount === 1,
                 'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
                 mobile: isMobile,
                 type,
-            }, blockClassName), children: [anchorId && _jsx(Anchor, { id: anchorId }), _jsx(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), _jsx(AnimateBlock, { className: b('animate-slides'), animate: animated, children: renderSlider() })] }) }));
+            }, blockClassName) },
+            anchorId && React.createElement(Anchor, { id: anchorId }),
+            React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
+            React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated }, renderSlider()))));
 };
 function getSlideId(sliderId, index) {
     return `slider-${sliderId}-child-${index}`;
@@ -264,7 +274,7 @@ function discloseAllNestedChildren(children, sliderId) {
     let childIndex = 0;
     const wrapped = (child) => {
         const id = getSlideId(sliderId, childIndex++);
-        return (_jsx("div", { id: id, children: child }, id));
+        return (React.createElement("div", { key: id, id: id }, child));
     };
     return React.Children.map(children, (child) => {
         var _a;
@@ -283,4 +293,3 @@ function discloseAllNestedChildren(children, sliderId) {
     }).filter(Boolean);
 }
 export default SliderBlock;
-//# sourceMappingURL=Slider.js.map

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

@@ -1,5 +1 @@
-export declare const i18n: ((key: "arrow-right" | "arrow-left" | "dot-label" | "pagination-label", params?: import("@gravity-ui/i18n").Params) => string) & {
-    keysetData: {
-        "pc-SliderBlock": Record<"arrow-right" | "arrow-left" | "dot-label" | "pagination-label", import("@gravity-ui/i18n").KeyData>;
-    };
-};
+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/index.js

@@ -1,6 +1,5 @@
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from "../../../utils/cn.js";
-import en from "./en.json";
-import ru from "./ru.json";
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
 export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}SliderBlock`);
-//# sourceMappingURL=index.js.map

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

@@ -5,4 +5,3 @@ export var SliderBreakpointNames;
     SliderBreakpointNames["Lg"] = "lg";
     SliderBreakpointNames["Xl"] = "xl";
 })(SliderBreakpointNames || (SliderBreakpointNames = {}));
-//# sourceMappingURL=models.js.map

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

@@ -1,4 +1,4 @@
-import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, sliderSizesObject, textSize, } from "../../schema/validators/common.js";
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, sliderSizesObject, textSize, } from '../../schema/validators/common';
 const LoadableProps = {
     additionalProperties: false,
     required: ['source'],
@@ -77,4 +77,3 @@ export const SliderBlock = {
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), SliderProps), BlockHeaderProps),
     },
 };
-//# sourceMappingURL=schema.js.map

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

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { SliderBreakpointParams, SlidesToShow } from "./models.js";
+import { SliderBreakpointParams, SlidesToShow } from './models';
 export declare const DEFAULT_SLIDE_BREAKPOINTS: {
     xl: number;
     lg: number;
@@ -32,6 +31,6 @@ export declare function useRovingTabIndex(props: {
     firstIndex?: number;
     uniqId: string;
 }): {
-    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, "id" | "tabIndex" | "onFocus">;
-    rovingListProps: React.HTMLAttributes<HTMLElement>;
+    getRovingItemProps: (index: number) => Pick<React.HTMLAttributes<HTMLElement>, 'id' | 'tabIndex' | 'onFocus'>;
+    rovingListProps: import("react").HTMLAttributes<HTMLElement>;
 };

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

@@ -1,7 +1,7 @@
+import { useEffect, useRef, useState } from 'react';
 import pickBy from 'lodash/pickBy';
-import * as React from 'react';
-import { BREAKPOINTS } from "../../constants.js";
-import { SliderBreakpointNames } from "./models.js";
+import { BREAKPOINTS } from '../../constants';
+import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
     [SliderBreakpointNames.Xl]: 3,
     [SliderBreakpointNames.Lg]: 2,
@@ -66,8 +66,8 @@ export function getSlidesToShowCount(breakpoints) {
 const getRovingListItemId = (uniqId, index) => `${uniqId}-roving-tabindex-item-${index}`;
 export function useRovingTabIndex(props) {
     const { itemCount, activeIndex, firstIndex = 0, uniqId } = props;
-    const [currentIndex, setCurrentIndex] = React.useState(firstIndex);
-    const hasFocusRef = React.useRef(false);
+    const [currentIndex, setCurrentIndex] = useState(firstIndex);
+    const hasFocusRef = useRef(false);
     const lastIndex = itemCount + firstIndex - 1;
     const getRovingItemProps = (index) => {
         return {
@@ -79,7 +79,7 @@ export function useRovingTabIndex(props) {
             },
         };
     };
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         if (!hasFocusRef.current) {
             return;
@@ -113,4 +113,3 @@ export function useRovingTabIndex(props) {
     };
     return { getRovingItemProps, rovingListProps };
 }
-//# sourceMappingURL=utils.js.map

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ClassNameProps } from "../../../models/index.js";
+import React from 'react';
+import { ClassNameProps } from '../../../models';
 import './Arrow.css';
 export type ArrowType = 'left' | 'right';
 export interface ArrowProps {
@@ -8,5 +8,5 @@ export interface ArrowProps {
     size?: number;
     extraProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
-declare const Arrow: ({ type, onClick, className, size, extraProps }: ArrowProps & ClassNameProps) => import("react/jsx-runtime").JSX.Element;
+declare const Arrow: ({ type, onClick, className, size, extraProps }: ArrowProps & ClassNameProps) => JSX.Element;
 export default Arrow;

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

@@ -1,9 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ToggleArrow from "../../../components/ToggleArrow/ToggleArrow.js";
-import { block } from "../../../utils/index.js";
-import { i18n } from "../i18n/index.js";
+import React from 'react';
+import ToggleArrow from '../../../components/ToggleArrow/ToggleArrow';
+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, extraProps }) => (_jsx("div", { className: b({ type }, className), children: _jsx("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) }, extraProps, { children: _jsx("span", { className: b('icon-wrapper'), children: _jsx(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') }) }) })) }));
+const Arrow = ({ type, onClick, className, size = 16, extraProps }) => (React.createElement("div", { className: b({ type }, className) },
+    React.createElement("button", Object.assign({ className: b('button'), onClick: onClick, "aria-label": i18n(`arrow-${type}`) }, extraProps),
+        React.createElement("span", { className: b('icon-wrapper') },
+            React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;
-//# sourceMappingURL=Arrow.js.map

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import { Swiper } from 'swiper/react';
-import { ClassNameProps, Refable, SliderProps as SliderParams } from "../../models/index.js";
+import { ClassNameProps, Refable, SliderProps as SliderParams } from '../../models';
 import './Slider.css';
 import 'swiper/swiper-bundle.css';
 export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<Pick<Swiper, 'onSlideChange' | 'onSlideChangeTransitionStart' | 'onSlideChangeTransitionEnd' | 'onActiveIndexChange' | 'onBreakpoint'>>, Refable<HTMLDivElement>, ClassNameProps {
@@ -10,5 +10,5 @@ export interface SliderNewProps extends Omit<SliderParams, 'children'>, Partial<
     blockClassName?: string;
     arrowSize?: 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, }: React.PropsWithChildren<SliderNewProps>) => import("react/jsx-runtime").JSX.Element;
+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 default SliderNewBlock;

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

@@ -1,15 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import React, { Fragment } from 'react';
 import SwiperCore, { A11y, Autoplay, Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import Anchor from "../../components/Anchor/Anchor.js";
-import AnimateBlock from "../../components/AnimateBlock/AnimateBlock.js";
-import Title from "../../components/Title/Title.js";
-import { block } from "../../utils/index.js";
-import Arrow from "./Arrow/Arrow.js";
-import { i18n } from "./i18n/index.js";
-import { useSlider } from "./useSlider.js";
-import { useSliderPagination } from "./useSliderPagination.js";
+import Anchor from '../../components/Anchor/Anchor';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import Title from '../../components/Title/Title';
+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');
@@ -31,15 +30,23 @@ export const SliderNewBlock = ({ animated, title, description, type, anchorId, a
         bulletActiveClass: b('dot_active'),
         paginationLabel: i18n('pagination-label'),
     });
-    return (_jsxs("div", { className: b({
+    return (React.createElement("div", { className: b({
             'one-slide': childrenCount === 1,
             'only-arrows': !(title === null || title === void 0 ? void 0 : title.text) && !description && arrows,
             'without-dots': !dots || isLocked,
             type,
-        }, blockClassName), children: [anchorId && _jsx(Anchor, { id: anchorId }), _jsx(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }), _jsxs(AnimateBlock, { className: b('animate-slides'), animate: animated, children: [_jsx(Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, 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, a11y: {
-                            slideLabelMessage: '',
-                            paginationBulletMessage: i18n('dot-label', { index: '{{index}}' }),
-                        } }, paginationProps, { children: React.Children.map(children, (elem, index) => (_jsx(SwiperSlide, { className: b('slide'), children: ({ isVisible }) => (_jsx("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible, children: elem })) }, index))) })), arrows && !isLocked && (_jsx(React.Fragment, { children: _jsxs("div", { "aria-hidden": isA11yControlHidden, children: [_jsx(Arrow, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }), _jsx(Arrow, { className: b('arrow', { next: true }), type: "right", onClick: onNext, size: arrowSize, extraProps: { tabIndex: controlTabIndex } })] }) })), _jsx("div", { className: b('footer'), children: disclaimer ? (_jsx("div", { className: b('disclaimer', { size: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.size) || 'm' }), children: disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.text })) : null })] })] }));
+        }, blockClassName) },
+        anchorId && React.createElement(Anchor, { id: anchorId }),
+        React.createElement(Title, { title: title, subtitle: description, className: b('header', { 'no-description': !description }) }),
+        React.createElement(AnimateBlock, { className: b('animate-slides'), animate: animated },
+            React.createElement(Swiper, Object.assign({ className: b('slider', className), onSwiper: onSwiper, speed: 1000, autoplay: autoplay, autoHeight: adaptive, initialSlide: 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, a11y: {
+                    slideLabelMessage: '',
+                    paginationBulletMessage: i18n('dot-label', { index: '{{index}}' }),
+                } }, paginationProps), React.Children.map(children, (elem, index) => (React.createElement(SwiperSlide, { className: b('slide'), key: index }, ({ isVisible }) => (React.createElement("div", { className: b('slide-item'), "aria-hidden": !isA11yControlHidden && !isVisible }, elem)))))),
+            arrows && !isLocked && (React.createElement(Fragment, null,
+                React.createElement("div", { "aria-hidden": isA11yControlHidden },
+                    React.createElement(Arrow, { className: b('arrow', { prev: true }), type: "left", onClick: onPrev, size: arrowSize, extraProps: { tabIndex: controlTabIndex } }),
+                    React.createElement(Arrow, { className: b('arrow', { next: true }), type: "right", 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;
-//# sourceMappingURL=Slider.js.map

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

@@ -1,5 +1 @@
-export declare const i18n: ((key: "arrow-right" | "arrow-left" | "dot-label" | "pagination-label", params?: import("@gravity-ui/i18n").Params) => string) & {
-    keysetData: {
-        "pc-SliderNewBlock": Record<"arrow-right" | "arrow-left" | "dot-label" | "pagination-label", import("@gravity-ui/i18n").KeyData>;
-    };
-};
+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/index.js

@@ -1,6 +1,5 @@
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from "../../../utils/cn.js";
-import en from "./en.json";
-import ru from "./ru.json";
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
 export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}SliderNewBlock`);
-//# sourceMappingURL=index.js.map

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

@@ -5,4 +5,3 @@ export var SliderBreakpointNames;
     SliderBreakpointNames["Md"] = "md";
     SliderBreakpointNames["Lg"] = "lg";
 })(SliderBreakpointNames || (SliderBreakpointNames = {}));
-//# sourceMappingURL=models.js.map

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

@@ -1,4 +1,4 @@
-import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, sliderSizesObject, textSize, } from "../../schema/validators/common.js";
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, sliderSizesObject, textSize, } from '../../schema/validators/common';
 const LoadableProps = {
     additionalProperties: false,
     required: ['source'],
@@ -86,4 +86,3 @@ export const SliderNewBlock = {
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), SliderNewProps), BlockHeaderProps),
     },
 };
-//# sourceMappingURL=schema.js.map

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React, { PropsWithChildren } from 'react';
 import type { Swiper } from 'swiper';
-import { SlidesToShow } from "../../models/index.js";
-type UseSliderProps = React.PropsWithChildren<{
+import { SlidesToShow } from '../../models';
+type UseSliderProps = PropsWithChildren<{
     autoplayMs?: number;
     type?: string;
     slidesToShow?: SlidesToShow;

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

@@ -1,15 +1,15 @@
 import { __rest } from "tslib";
-import * as React from 'react';
-import { SliderType } from "../../models/index.js";
-import { getSliderResponsiveParams, useMemoized } from "./utils.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { SliderType } from '../../models';
+import { getSliderResponsiveParams, useMemoized } from './utils';
 export const useSlider = (_a) => {
     var { children, autoplayMs, type } = _a, props = __rest(_a, ["children", "autoplayMs", "type"]);
-    const [slider, setSlider] = React.useState();
-    const [isLocked, setIsLocked] = React.useState(false);
+    const [slider, setSlider] = useState();
+    const [isLocked, setIsLocked] = useState(false);
     const slidesToShow = useMemoized(props.slidesToShow);
     const childrenCount = React.Children.count(children);
     const autoplayEnabled = autoplayMs !== undefined && autoplayMs > 0;
-    const breakpoints = React.useMemo(() => {
+    const breakpoints = useMemo(() => {
         return getSliderResponsiveParams({
             contentLength: childrenCount,
             slidesToShow,
@@ -36,7 +36,7 @@ export const useSlider = (_a) => {
         }
         slider.slidePrev();
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (!slider) {
             return;
         }
@@ -62,4 +62,3 @@ export const useSlider = (_a) => {
         },
     };
 };
-//# sourceMappingURL=useSlider.js.map

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

@@ -6,4 +6,4 @@ export declare const useSliderPagination: (props: {
     bulletClass: string;
     bulletActiveClass: string;
     paginationLabel: string;
-}) => Pick<SwiperProps, "pagination" | "onPaginationUpdate"> | undefined;
+}) => Pick<SwiperProps, 'pagination' | 'onPaginationUpdate'> | undefined;

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

@@ -1,4 +1,4 @@
-import { setElementAtrributes } from "./utils.js";
+import { setElementAtrributes } from './utils';
 export const useSliderPagination = (props) => {
     if (!props.enabled) {
         return undefined;
@@ -30,4 +30,3 @@ export const useSliderPagination = (props) => {
         },
     };
 };
-//# sourceMappingURL=useSliderPagination.js.map

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

@@ -1,5 +1,5 @@
 import type { SwiperOptions } from 'swiper/types/swiper-options';
-import { SlidesToShow } from "./models.js";
+import { SlidesToShow } from './models';
 export declare const DEFAULT_SLIDE_BREAKPOINTS: {
     lg: number;
     md: number;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { useEffect, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
-import { BREAKPOINTS } from "../../constants.js";
-import { SliderBreakpointNames } from "./models.js";
+import { BREAKPOINTS } from '../../constants';
+import { SliderBreakpointNames } from './models';
 export const DEFAULT_SLIDE_BREAKPOINTS = {
     [SliderBreakpointNames.Lg]: 3,
     [SliderBreakpointNames.Md]: 2,
@@ -27,11 +27,10 @@ export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileF
     }, {});
 }
 export const useMemoized = (value) => {
-    const [memoizedValue, setMemoizedValue] = React.useState(value);
-    React.useEffect(() => {
+    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)));
-//# sourceMappingURL=utils.js.map

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

@@ -1,4 +1,4 @@
-import { TableBlockProps } from "../../models/index.js";
+import { TableBlockProps } from '../../models';
 import './Table.css';
-export declare const TableBlock: (props: TableBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBlock: (props: TableBlockProps) => JSX.Element;
 export default TableBlock;

package/build/esm/blocks/Table/Table.js

@@ -1,12 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table } from "../../components/index.js";
-import { Col, Grid, GridColumnSize, Row } from "../../grid/index.js";
-import { block } from "../../utils/index.js";
+import React from 'react';
+import { Table } from '../../components';
+import { Col, Grid, GridColumnSize, Row } from '../../grid';
+import { block } from '../../utils';
 import './Table.css';
 const b = block('table-block');
 export const TableBlock = (props) => {
     const { title, table } = props;
-    return (_jsx("div", { className: b(), children: _jsx(Grid, { className: b('content'), children: _jsxs(Row, { className: b('row'), children: [_jsx(Col, { sizes: { [GridColumnSize.Md]: 4, [GridColumnSize.All]: 12 }, children: _jsx("h2", { className: b('title'), children: title }) }), _jsx(Col, { sizes: { [GridColumnSize.Md]: 8, [GridColumnSize.All]: 12 }, children: _jsx(Table, Object.assign({ className: b('table') }, table)) })] }) }) }));
+    return (React.createElement("div", { className: b() },
+        React.createElement(Grid, { className: b('content') },
+            React.createElement(Row, { className: b('row') },
+                React.createElement(Col, { sizes: { [GridColumnSize.Md]: 4, [GridColumnSize.All]: 12 } },
+                    React.createElement("h2", { className: b('title') }, title)),
+                React.createElement(Col, { sizes: { [GridColumnSize.Md]: 8, [GridColumnSize.All]: 12 } },
+                    React.createElement(Table, Object.assign({ className: b('table') }, table)))))));
 };
 export default TableBlock;
-//# sourceMappingURL=Table.js.map