@gravity-ui/page-constructor 4.1.2 → 4.4.1

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -10,6 +10,7 @@ import { PlayVideo } from '../../icons';
 import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
+import i18n from './i18n';
 import { checkYoutubeVideos } from './utils';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
@@ -18,7 +19,7 @@ const FPS = 60;
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
@@ -102,7 +103,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 playButtonContent = React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 });
                 break;
         }
-        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName) }, playButtonContent));
+        return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play') }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
         if (isMuted && playerRef) {
@@ -192,7 +193,7 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
     return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded }),
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
         renderCustomBarControls(muted, playedPercent)));
 });
 function getHeight(width) {

package/build/esm/components/ReactPlayer/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "play": "Play"
+}

package/build/esm/components/ReactPlayer/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/esm/components/ReactPlayer/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ReactPlayer';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/ReactPlayer/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "play": "Воспроизвести"
+}

package/build/esm/components/Table/Table.js

@@ -2,28 +2,34 @@ import React from 'react';
 import { HTML, YFMWrapper } from '../';
 import { block } from '../../utils';
 import './Table.css';
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = block('table');
 export default class Table extends React.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (React.createElement("div", { className: b(null, className) },
+        return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (React.createElement("div", { className: b('table') }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
+        return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return React.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

package/build/esm/components/YFMWrapper/YFMWrapper.d.ts

@@ -1,9 +1,9 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+export interface YFMWrapperProps extends ClassNameProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -5,5 +5,5 @@ import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
 const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
 export default YFMWrapper;

package/build/esm/components/constants.d.ts

@@ -1,8 +1,4 @@
 import { Theme } from '../models';
 export declare const DEFAULT_THEME = Theme.Light;
 export declare const UIKIT_ROOT_CLASS = "g-root";
-export declare const KEY: {
-    ENTER: string;
-    TAB: string;
-};
 export declare const HEADER_HEIGHT = 64;

package/build/esm/components/constants.js

@@ -1,8 +1,4 @@
 import { Theme } from '../models';
 export const DEFAULT_THEME = Theme.Light;
 export const UIKIT_ROOT_CLASS = 'g-root';
-export const KEY = {
-    ENTER: 'Enter',
-    TAB: 'Tab',
-};
 export const HEADER_HEIGHT = 64;

package/build/esm/grid/Col/Col.d.ts

@@ -1,9 +1,8 @@
 import React, { CSSProperties } from 'react';
-import { QAProps, Refable } from '../../models/common';
-import { WithChildren } from '../../models/react';
+import { QAProps, Refable, Roleable, WithChildren } from '../../models';
 import { GridColumnClassParams } from '../types';
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/grid/Col/Col.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { getColClass } from '../utils';
 export const Col = forwardRef((props, ref) => {
-    const { children, style, qa } = props, rest = __rest(props, ["children", "style", "qa"]);
-    return (React.createElement("div", { ref: ref, className: getColClass(rest), style: style, "data-qa": qa }, children));
+    const { children, style, qa, role } = props, rest = __rest(props, ["children", "style", "qa", "role"]);
+    return (React.createElement("div", { ref: ref, className: getColClass(rest), style: style, "data-qa": qa, role: role }, children));
 });
 Col.displayName = 'Col';

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

@@ -141,6 +141,10 @@ export interface QuestionItem {
 export interface QuestionsProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     items: QuestionItem[];
 }
+export interface QuestionBlockItemProps extends QuestionItem {
+    isOpened: boolean;
+    onClick: () => void;
+}
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
@@ -185,6 +189,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;

package/build/esm/models/constructor-items/common.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
-import { ThemeSupporting } from '../../utils/theme';
+import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
@@ -61,6 +61,12 @@ export interface Stylable {
 export interface Animatable {
     animated?: boolean;
 }
+export interface Tabbable {
+    tabIndex?: number;
+}
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;
@@ -106,7 +112,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
-export interface LinkProps extends AnalyticsEventsBase, Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -117,7 +123,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
 }
-export interface FileLinkProps extends ClassNameProps {
+export interface FileLinkProps extends ClassNameProps, Tabbable {
     href: string;
     text: ReactNode;
     type?: FileLinkType;
@@ -157,6 +163,7 @@ export interface MediaVideoProps {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {

package/build/esm/sub-blocks/Content/ContentList/ContentList.js

@@ -7,6 +7,15 @@ import { useTheme } from '../../../context/theme';
 import { block, getThemedValue } from '../../../utils';
 import './ContentList.css';
 const b = block('content-list');
+function getHeadingLevel(size) {
+    switch (size) {
+        case 's':
+            return 'h4';
+        case 'l':
+        default:
+            return 'h3';
+    }
+}
 const ContentList = ({ list, size }) => {
     const theme = useTheme();
     return (React.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
@@ -16,7 +25,8 @@ const ContentList = ({ list, size }) => {
         return (React.createElement("div", { className: b('item'), key: uuidv4() },
             React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
             React.createElement("div", null,
-                title && React.createElement("h4", { className: b('title') }, title),
+                title &&
+                    React.createElement(getHeadingLevel(size), { className: b('title') }, title),
                 text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
     })));
 };

package/build/esm/sub-blocks/LayoutItem/utils.d.ts

@@ -23,6 +23,7 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
         target?: string | undefined;
     }[] | undefined;
     className?: string | undefined;
+    tabIndex?: number | undefined;
 }[] | undefined;
 export declare const hasFullscreen: ({ dataLens, image }: MediaProps) => boolean;
 export declare const showFullscreenIcon: ({ youtube }: MediaProps) => boolean;

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

@@ -1,5 +1,5 @@
 import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];

package/build/esm/utils/blocks.js

@@ -41,9 +41,9 @@ export function getHeaderTag(size) {
         case 'l':
             return 'h1';
         case 's':
-            return 'h4';
+            return 'h3';
         case 'xs':
-            return 'h5';
+            return 'h4';
         case 'm':
         default:
             return 'h2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.1.2",
+  "version": "4.4.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -103,7 +103,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/uikit": "^5.1.0",
+    "@gravity-ui/uikit": "^5.4.1",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -119,7 +119,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.1.0",
+    "@gravity-ui/uikit": "^5.4.1",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",

package/server/components/constants.d.ts

@@ -1,8 +1,4 @@
 import { Theme } from '../models';
 export declare const DEFAULT_THEME = Theme.Light;
 export declare const UIKIT_ROOT_CLASS = "g-root";
-export declare const KEY: {
-    ENTER: string;
-    TAB: string;
-};
 export declare const HEADER_HEIGHT = 64;

package/server/components/constants.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HEADER_HEIGHT = exports.KEY = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
+exports.HEADER_HEIGHT = exports.UIKIT_ROOT_CLASS = exports.DEFAULT_THEME = void 0;
 const models_1 = require("../models");
 exports.DEFAULT_THEME = models_1.Theme.Light;
 exports.UIKIT_ROOT_CLASS = 'g-root';
-exports.KEY = {
-    ENTER: 'Enter',
-    TAB: 'Tab',
-};
 exports.HEADER_HEIGHT = 64;

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

@@ -141,6 +141,10 @@ export interface QuestionItem {
 export interface QuestionsProps extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     items: QuestionItem[];
 }
+export interface QuestionBlockItemProps extends QuestionItem {
+    isOpened: boolean;
+    onClick: () => void;
+}
 export interface BannerBlockProps extends BannerCardProps, Animatable {
 }
 export interface CompaniesBlockProps extends Animatable {
@@ -185,6 +189,10 @@ export interface TableProps {
     legend?: string[];
     justify?: Justify[];
     marker?: LegendTableMarkerType;
+    /**
+     * Only as accessible name, not displayed explicitly
+     */
+    caption?: string;
 }
 export interface TableBlockProps {
     title: string;

package/server/models/constructor-items/common.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
-import { ThemeSupporting } from '../../utils/theme';
+import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
@@ -61,6 +61,12 @@ export interface Stylable {
 export interface Animatable {
     animated?: boolean;
 }
+export interface Tabbable {
+    tabIndex?: number;
+}
+export interface Roleable {
+    role?: React.AriaRole;
+}
 export interface Background {
     image?: string;
     color?: string;
@@ -106,7 +112,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
-export interface LinkProps extends AnalyticsEventsBase, Stylable {
+export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
     text?: string;
     textSize?: TextSize;
@@ -117,7 +123,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
 }
-export interface FileLinkProps extends ClassNameProps {
+export interface FileLinkProps extends ClassNameProps, Tabbable {
     href: string;
     text: ReactNode;
     type?: FileLinkType;
@@ -157,6 +163,7 @@ export interface MediaVideoProps {
     playButton?: PlayButtonProps;
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
+    ariaLabel?: string;
 }
 export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {

package/server/utils/blocks.d.ts

@@ -1,5 +1,5 @@
 import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];

package/server/utils/blocks.js

@@ -44,9 +44,9 @@ function getHeaderTag(size) {
         case 'l':
             return 'h1';
         case 's':
-            return 'h4';
+            return 'h3';
         case 'xs':
-            return 'h5';
+            return 'h4';
         case 'm':
         default:
             return 'h2';