@gravity-ui/page-constructor 5.26.1 → 5.27.1

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

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

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

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

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

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

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

@@ -12,3 +12,5 @@ export interface GetSlidesToShowParams {
     mobileFullscreen?: boolean;
 }
 export declare function getSliderResponsiveParams({ contentLength, slidesToShow, mobileFullscreen, }: GetSlidesToShowParams): Record<number, SwiperOptions>;
+export declare const useMemoized: <T>(value: T) => T;
+export declare const setElementAtrributes: (element: Element, attributes: Record<string, unknown>) => void;

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

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import pickBy from 'lodash/pickBy';
 import { BREAKPOINTS } from '../../constants';
 import { SliderBreakpointNames } from './models';
@@ -24,3 +26,11 @@ export function getSliderResponsiveParams({ contentLength, slidesToShow, mobileF
         return res;
     }, {});
 }
+export const useMemoized = (value) => {
+    const [memoizedValue, setMemoizedValue] = useState(value);
+    useEffect(() => {
+        setMemoizedValue((memoized) => value && typeof value === 'object' && isEqual(memoized, value) ? memoized : value);
+    }, [value]);
+    return memoizedValue;
+};
+export const setElementAtrributes = (element, attributes) => Object.entries(attributes).forEach(([attribute, value]) => element.setAttribute(attribute, String(value)));

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
@@ -51,7 +52,8 @@ export const Constructor = (props) => {
                         React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
 };
 export const PageConstructor = (props) => {
-    const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
+    const { isAnimationEnabled = true } = useContext(ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = __rest(props, ["content"]);
     return (React.createElement(AnimateContext.Provider, { value: { animated } },
         React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
 };

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
+    isAnimationEnabled?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/build/esm/sub-blocks/BannerCard/BannerCard.js

@@ -5,7 +5,7 @@ import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' } = {}, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = useTheme();
     const contentStyle = {};
     if (color) {
@@ -18,8 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(RouterLink, { href: url },
-                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? text : '', url: url, target: target })))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.26.1",
+  "version": "5.27.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,6 +80,7 @@
     "test:watch": "jest --watchAll",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
@@ -202,6 +203,8 @@
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.9.4",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-svgr": "^4.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-shell-plugin-next": "^2.3.1"

package/server/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {