@gravity-ui/page-constructor 2.8.4 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.10.0](https://github.com/gravity-ui/page-constructor/compare/v2.9.0...v2.10.0) (2023-04-24)
+
+
+### Features
+
+* add scroll to the active tab ([#311](https://github.com/gravity-ui/page-constructor/issues/311)) ([a5f8576](https://github.com/gravity-ui/page-constructor/commit/a5f857640c9aa5d81859321a933fcef4913b5b76))
+
+## [2.9.0](https://github.com/gravity-ui/page-constructor/compare/v2.8.4...v2.9.0) (2023-04-19)
+
+
+### Features
+
+* **QuestionBlock:** add schema.org FAQ microdata ([#308](https://github.com/gravity-ui/page-constructor/issues/308)) ([cfca14a](https://github.com/gravity-ui/page-constructor/commit/cfca14a76b458bfa21daa452cb46cb966fae9e88))
+
 ## [2.8.4](https://github.com/gravity-ui/page-constructor/compare/v2.8.3...v2.8.4) (2023-04-17)
 
 

package/build/cjs/blocks/Questions/Questions.js

@@ -8,6 +8,15 @@ const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('QuestionsBlock');
+const FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionTextProp: 'name',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+};
 const QuestionsBlock = (props) => {
     const { title, text, additionalInfo, links, buttons, items } = props;
     const [opened, setOpened] = (0, react_1.useState)([0]);
@@ -21,24 +30,24 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },
                     react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
-                return (react_1.default.createElement("div", { key: itemTitle, className: b('item') },
+                return (react_1.default.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
                     react_1.default.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        react_1.default.createElement(components_1.HTML, null, itemTitle),
+                        react_1.default.createElement(components_1.HTML, { itemProp: FaqMicrodataValues.QuestionTextProp }, itemTitle),
                         react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
                     react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },
-                        react_1.default.createElement("div", { className: b('text') },
+                        react_1.default.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
                             react_1.default.createElement(components_1.YFMWrapper, { content: itemText, modifiers: {
                                     constructor: true,
                                     constructorListStyle: true,
                                     constructorListStyleDash: listStyle === 'dash',
-                                } }),
+                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
                             link && react_1.default.createElement(Link_1.default, Object.assign({}, link, { className: b('link') }))))));
             })))));
 };

package/build/cjs/blocks/Tabs/Tabs.js

@@ -49,11 +49,15 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)));
+    const onSelectTab = (id, e) => {
+        setActiveTab(id);
+        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
+    };
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
         react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
-                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
         activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
             mediaContent,
             textContent))));

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

@@ -7,6 +7,7 @@ export interface AnimateBlockProps extends AnimateContextProps {
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
+    qa?: string;
 }
 declare const AnimateBlock: (props: WithChildren<AnimateBlockProps>) => JSX.Element;
 export default AnimateBlock;

package/build/cjs/components/AnimateBlock/AnimateBlock.js

@@ -8,12 +8,12 @@ const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('AnimateBlock');
 const AnimateBlock = (props) => {
     const { animated } = (0, react_1.useContext)(AnimateContext_1.AnimateContext);
-    const { children, className, offset = 100, onScroll, style, animate = animated } = props;
+    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
     const [playAnimation, setPlayAnimation] = (0, react_1.useState)(false);
     const divClassName = animate
         ? b(null, `${playAnimation && 'animate'} ${className}`)
         : className;
-    return (react_1.default.createElement("div", { className: divClassName, style: style },
+    return (react_1.default.createElement("div", { className: divClassName, style: style, "data-qa": qa },
         react_1.default.createElement(react_waypoint_1.Waypoint
         // trigger animation if element is above screen
         , { 

package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/AnimateBlock/__tests__/AnimateBlock.test.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock"));
+const qaId = 'animate-block';
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { qa: qaId, className: className }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('use passed style', () => {
+        const style = { color: 'red' };
+        (0, react_2.render)(react_1.default.createElement(AnimateBlock_1.default, { style: style, qa: qaId }));
+        const component = react_2.screen.getByTestId(qaId);
+        expect(component).toHaveStyle(style);
+    });
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement("div", { style: { paddingTop: 100000 } },
+            react_1.default.createElement(AnimateBlock_1.default, { onScroll: onScroll, qa: qaId })));
+        const component = react_2.screen.getByTestId(qaId);
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { ButtonProps as ButtonParams } from '../../models';
 export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;

package/build/cjs/components/Button/Button.js

@@ -17,11 +17,11 @@ const Button = (props) => {
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Button, url);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onClick = (0, react_1.useCallback)((e) => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
         if (onClickOrigin) {
-            onClickOrigin();
+            onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
     const buttonImg = img instanceof Object

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

@@ -9,7 +9,7 @@ export interface ButtonTabsProps {
     className?: string;
     items: ButtonTabsItemProps[];
     activeTab?: string | null;
-    onSelectTab?: (tabId: string | null) => void;
+    onSelectTab?: (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     tabSize?: ButtonSize;
     qa?: string;
 }

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -12,11 +12,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
         }
         return items[0].id;
     }, [activeTab, items]);
-    const handleClick = (0, react_1.useCallback)((tabId) => {
+    const handleClick = (0, react_1.useCallback)((tabId) => (e) => {
         if (onSelectTab) {
-            onSelectTab(tabId);
+            onSelectTab(tabId, e);
         }
     }, [onSelectTab]);
-    return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
+    return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: handleClick(id) })))));
 };
 exports.default = ButtonTabs;

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

@@ -4,11 +4,13 @@ export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
+    itemProp?: string;
 }
-declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
+    itemProp: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/cjs/components/HTML/HTML.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const HTML = ({ children, block = false, className }) => {
+const HTML = ({ children, block = false, className, itemProp }) => {
     if (!children) {
         return null;
     }
     return react_1.default.createElement(block ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
+        itemProp,
     });
 };
 exports.default = HTML;

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

@@ -3,6 +3,7 @@ export interface YFMWrapperProps {
     className?: string;
     content: string;
     modifiers?: Modifiers;
+    itemProp?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
 export default YFMWrapper;

package/build/cjs/components/YFMWrapper/YFMWrapper.js

@@ -8,5 +8,5 @@ const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
 const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
 const components_1 = require("../../components");
 const yfm = (0, bem_cn_lite_1.default)('yfm');
-const YFMWrapper = ({ content, modifiers, className }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className) }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
 exports.default = YFMWrapper;

package/build/esm/blocks/Questions/Questions.js

@@ -6,6 +6,15 @@ import { Content } from '../../sub-blocks';
 import { block } from '../../utils';
 import './Questions.css';
 const b = block('QuestionsBlock');
+const FaqMicrodataValues = {
+    PageType: 'https://schema.org/FAQPage',
+    QuestionType: 'https://schema.org/Question',
+    QuestionProp: 'mainEntity',
+    QuestionTextProp: 'name',
+    AnswerType: 'https://schema.org/Answer',
+    AnswerProp: 'acceptedAnswer',
+    AnswerTextProp: 'text',
+};
 const QuestionsBlock = (props) => {
     const { title, text, additionalInfo, links, buttons, items } = props;
     const [opened, setOpened] = useState([0]);
@@ -19,24 +28,24 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (React.createElement("div", { className: b() },
+    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
                     React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
             React.createElement(Col, { sizes: { all: 12, md: 8 } }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
-                return (React.createElement("div", { key: itemTitle, className: b('item') },
+                return (React.createElement("div", { key: itemTitle, className: b('item'), itemScope: true, itemProp: FaqMicrodataValues.QuestionProp, itemType: FaqMicrodataValues.QuestionType },
                     React.createElement("h4", { className: b('item-title'), onClick: () => toggleItem(index) },
-                        React.createElement(HTML, null, itemTitle),
+                        React.createElement(HTML, { itemProp: FaqMicrodataValues.QuestionTextProp }, itemTitle),
                         React.createElement(ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
                     React.createElement(Foldable, { isOpened: isOpened },
-                        React.createElement("div", { className: b('text') },
+                        React.createElement("div", { className: b('text'), itemScope: true, itemProp: FaqMicrodataValues.AnswerProp, itemType: FaqMicrodataValues.AnswerType },
                             React.createElement(YFMWrapper, { content: itemText, modifiers: {
                                     constructor: true,
                                     constructorListStyle: true,
                                     constructorListStyleDash: listStyle === 'dash',
-                                } }),
+                                }, itemProp: FaqMicrodataValues.QuestionTextProp }),
                             link && React.createElement(Link, Object.assign({}, link, { className: b('link') }))))));
             })))));
 };

package/build/esm/blocks/Tabs/Tabs.js

@@ -46,11 +46,15 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
+    const onSelectTab = (id, e) => {
+        setActiveTab(id);
+        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
+    };
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
         React.createElement(BlockHeader, { title: title, description: description, className: b('block-title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
-                React.createElement(ButtonTabs, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+                React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
         activeTabData && (React.createElement(Row, { className: b('row', { reverse: isReverse }) },
             mediaContent,
             textContent))));

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

@@ -7,6 +7,7 @@ export interface AnimateBlockProps extends AnimateContextProps {
     className?: string;
     style?: CSSProperties;
     onScroll?: () => void;
+    qa?: string;
 }
 declare const AnimateBlock: (props: WithChildren<AnimateBlockProps>) => JSX.Element;
 export default AnimateBlock;

package/build/esm/components/AnimateBlock/AnimateBlock.js

@@ -5,12 +5,12 @@ import { block } from '../../utils';
 const b = block('AnimateBlock');
 const AnimateBlock = (props) => {
     const { animated } = useContext(AnimateContext);
-    const { children, className, offset = 100, onScroll, style, animate = animated } = props;
+    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
     const [playAnimation, setPlayAnimation] = useState(false);
     const divClassName = animate
         ? b(null, `${playAnimation && 'animate'} ${className}`)
         : className;
-    return (React.createElement("div", { className: divClassName, style: style },
+    return (React.createElement("div", { className: divClassName, style: style, "data-qa": qa },
         React.createElement(Waypoint
         // trigger animation if element is above screen
         , { 

package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/AnimateBlock/__tests__/AnimateBlock.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AnimateBlock from '../AnimateBlock';
+const qaId = 'animate-block';
+describe('AnimateBlock', () => {
+    test('render AnimateBlock by default', async () => {
+        render(React.createElement(AnimateBlock, { qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(AnimateBlock, { qa: qaId, className: className }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('use passed style', () => {
+        const style = { color: 'red' };
+        render(React.createElement(AnimateBlock, { style: style, qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveStyle(style);
+    });
+    test('call onScroll', async () => {
+        const onScroll = jest.fn();
+        const user = userEvent.setup();
+        render(React.createElement("div", { style: { paddingTop: 100000 } },
+            React.createElement(AnimateBlock, { onScroll: onScroll, qa: qaId })));
+        const component = screen.getByTestId(qaId);
+        await user.hover(component);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -1,9 +1,10 @@
+import React from 'react';
 import { ButtonProps as ButtonParams } from '../../models';
 import './Button.css';
 export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;

package/build/esm/components/Button/Button.js

@@ -16,11 +16,11 @@ const Button = (props) => {
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
-    const onClick = useCallback(() => {
+    const onClick = useCallback((e) => {
         handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
         if (onClickOrigin) {
-            onClickOrigin();
+            onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
     const buttonImg = img instanceof Object

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

@@ -10,7 +10,7 @@ export interface ButtonTabsProps {
     className?: string;
     items: ButtonTabsItemProps[];
     activeTab?: string | null;
-    onSelectTab?: (tabId: string | null) => void;
+    onSelectTab?: (tabId: string | null, e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     tabSize?: ButtonSize;
     qa?: string;
 }

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -10,11 +10,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
         }
         return items[0].id;
     }, [activeTab, items]);
-    const handleClick = useCallback((tabId) => {
+    const handleClick = useCallback((tabId) => (e) => {
         if (onSelectTab) {
-            onSelectTab(tabId);
+            onSelectTab(tabId, e);
         }
     }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
+    return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: handleClick(id) })))));
 };
 export default ButtonTabs;

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

@@ -4,11 +4,13 @@ export interface HTMLProps {
     children?: string;
     block?: boolean;
     className?: string;
+    itemProp?: string;
 }
-declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
+declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
         __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
+    itemProp: string | undefined;
 }, HTMLElement> | null;
 export default HTML;

package/build/esm/components/HTML/HTML.js

@@ -1,11 +1,12 @@
 import React from 'react';
-const HTML = ({ children, block = false, className }) => {
+const HTML = ({ children, block = false, className, itemProp }) => {
     if (!children) {
         return null;
     }
     return React.createElement(block ? 'div' : 'span', {
         dangerouslySetInnerHTML: { __html: children },
         className,
+        itemProp,
     });
 };
 export default HTML;

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

@@ -3,6 +3,7 @@ export interface YFMWrapperProps {
     className?: string;
     content: string;
     modifiers?: Modifiers;
+    itemProp?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => 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 }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className) }, content));
+const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
 export default YFMWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.8.4",
+  "version": "2.10.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {