@gravity-ui/page-constructor 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

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/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/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/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/package.json

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