@gravity-ui/page-constructor 1.23.0 → 1.24.0-alpha.0

package/build/cjs/blocks/Icons/Icons.js

@@ -6,12 +6,15 @@ const utils_1 = require("../../utils");
 const components_1 = require("../../components");
 const locationContext_1 = require("../../context/locationContext");
 const b = (0, utils_1.block)('icons-block');
+const IconChildren = ({ src, text }) => (react_1.default.createElement(react_1.Fragment, null,
+    react_1.default.createElement(components_1.Image, { className: b('image'), src: src }),
+    react_1.default.createElement("p", { className: b('text') }, text)));
 const Icons = ({ title, size = 's', items }) => {
-    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     return (react_1.default.createElement("div", { className: b({ size }) },
         title && react_1.default.createElement(components_1.BlockHeader, { className: b('header'), title: title, colSizes: { all: 12 } }),
-        items.map((item) => (react_1.default.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, (0, utils_1.getLinkProps)(item.url, hostname)),
-            react_1.default.createElement(components_1.Image, { className: b('image'), src: item.src }),
-            react_1.default.createElement("p", { className: b('text') }, item.text))))));
+        items.map((item) => {
+            return react_1.default.createElement(Link || 'a', Object.assign({ className: b('item'), key: item.url, href: item.url }, (Link ? {} : (0, utils_1.getLinkProps)(item.url, hostname))), react_1.default.createElement(IconChildren, { text: item.text, src: item.src }));
+        })));
 };
 exports.default = Icons;

package/build/cjs/blocks/Share/Share.js

@@ -22,7 +22,7 @@ const icons = {
 };
 const b = (0, utils_1.block)('share-block');
 const Share = ({ items, title }) => {
-    const { pathname, hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { pathname, hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ShareButton);
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     return (react_1.default.createElement("div", { className: b() },
@@ -31,7 +31,7 @@ const Share = ({ items, title }) => {
             const url = (0, utils_1.getAbsolutePath)(hostname, pathname);
             const socialUrl = (0, utils_1.getShareLink)(url, type);
             const icon = icons[type];
-            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            return (react_1.default.createElement(uikit_1.Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, component: Link, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && react_1.default.createElement(uikit_1.Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 exports.default = Share;

package/build/cjs/components/BackLink/BackLink.js

@@ -8,7 +8,7 @@ const locationContext_1 = require("../../context/locationContext");
 const hooks_1 = require("../../hooks");
 const models_1 = require("../../models");
 function BackLink(props) {
-    const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { history, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ShareButton, url);
     const backActionHandler = (0, react_1.useCallback)(async () => {
@@ -26,7 +26,7 @@ function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+    return (react_1.default.createElement(uikit_1.Button, { component: Link, className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowSidebar, size: 24 }),
         react_1.default.createElement("span", null, title)));
 }

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

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const utils_2 = require("./utils");
 const localeContext_1 = require("../../context/localeContext/localeContext");
+const locationContext_1 = require("../../context/locationContext/locationContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
@@ -14,6 +15,7 @@ const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
+    const { Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     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);
@@ -42,7 +44,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined }, buttonProps),
+    return (react_1.default.createElement(uikit_1.Button, Object.assign({ className: buttonClass, view: (0, utils_2.toCommonView)(buttonTheme), size: (0, utils_2.toCommonSize)(size), href: url ? (0, utils_1.setUrlTld)(url, tld) : undefined, component: Link }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         react_1.default.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/cjs/components/FileLink/FileLink.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const utils_1 = require("../../utils");
 const react_1 = tslib_1.__importStar(require("react"));
 const locationContext_1 = require("../../context/locationContext");
+const LinkBase_1 = require("../Link/LinkBase/LinkBase");
 const b = (0, utils_1.block)('file-link');
 const FIGMA_URL = 'https://www.figma.com';
 var FileExtension;
@@ -31,6 +32,6 @@ const FileLink = (props) => {
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         Object.values(FileExtension).includes(fileExt) && (react_1.default.createElement("div", { className: b('file-label') }, fileExt)),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
+            react_1.default.createElement(LinkBase_1.LinkBase, Object.assign({ href: href }, (0, utils_1.getLinkProps)(href, hostname), { onClick: onClick }), text))));
 };
 exports.default = FileLink;

package/build/cjs/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const useMetrika_1 = require("../../hooks/useMetrika");
+const LinkBase_1 = require("../Link/LinkBase/LinkBase");
 const b = (0, utils_1.block)('header-breadcrumbs');
 function HeaderBreadcrumbs(props) {
     const { items, metrikaGoals, pixelEvents, theme = 'light', className } = props;
@@ -12,6 +13,6 @@ function HeaderBreadcrumbs(props) {
         handleMetrika({ metrikaGoals, pixelEvents });
     };
     return (react_1.default.createElement("div", { className: b({ theme }, className) }, items.map((item) => (react_1.default.createElement("div", { className: b('item'), key: item.url },
-        react_1.default.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
+        react_1.default.createElement(LinkBase_1.LinkBase, { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
 }
 exports.default = HeaderBreadcrumbs;

package/build/cjs/components/Link/Link.js

@@ -12,6 +12,7 @@ const localeContext_1 = require("../../context/localeContext/localeContext");
 const locationContext_1 = require("../../context/locationContext/locationContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
+const LinkBase_1 = require("./LinkBase/LinkBase");
 const b = (0, utils_1.block)('link-block');
 const WORD_JOINER_SYM = '\u200b';
 function getArrowSize(size) {
@@ -48,7 +49,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement(LinkBase_1.LinkBase, Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/cjs/components/Link/LinkBase/LinkBase.d.ts

@@ -0,0 +1,2 @@
+import { LinkBaseProps, WithChildren } from '../../../models';
+export declare const LinkBase: (props: WithChildren<LinkBaseProps>) => JSX.Element;

package/build/cjs/components/Link/LinkBase/LinkBase.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkBase = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("lodash");
+const locationContext_1 = require("../../../context/locationContext");
+const LinkBase = (props) => {
+    const { href, children } = props, linkProps = tslib_1.__rest(props, ["href", "children"]);
+    const { Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    if (Link && href) {
+        const extractedProps = (0, lodash_1.omit)(linkProps, ['rel', 'ref']);
+        return (react_1.default.createElement(Link, { href: href },
+            react_1.default.createElement("a", Object.assign({}, extractedProps), children)));
+    }
+    return (react_1.default.createElement("a", Object.assign({ href: href }, linkProps), children));
+};
+exports.LinkBase = LinkBase;

package/build/cjs/components/Title/Title.js

@@ -8,6 +8,7 @@ const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const __1 = require("../");
 const locationContext_1 = require("../../context/locationContext");
 const mobileContext_1 = require("../../context/mobileContext");
+const LinkBase_1 = require("../Link/LinkBase/LinkBase");
 const b = (0, utils_1.block)('title-block');
 function getArrowSize(size, isMobile) {
     switch (size) {
@@ -40,7 +41,7 @@ const Title = (props) => {
         content = textMarkup;
     }
     else if (url) {
-        content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick }), insideClickableContent));
+        content = (react_1.default.createElement(LinkBase_1.LinkBase, Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick }), insideClickableContent));
     }
     else if (onClick) {
         content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));

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

@@ -111,6 +111,8 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
+export interface LinkBaseProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+}
 export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../../utils");
 const models_1 = require("../../../../../models");
+const LinkBase_1 = require("../../../../../components/Link/LinkBase/LinkBase");
 const b = (0, utils_1.block)('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
 /* More information about github-buttons in https://buttons.github.io/ */
@@ -42,6 +43,6 @@ const GithubButton = ({ text, url, className, label, size, icon, }) => {
     }, []);
     return (react_1.default.createElement("div", { className: b(null, className) },
         react_1.default.createElement("span", { ref: containerRef },
-            react_1.default.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+            react_1.default.createElement(LinkBase_1.LinkBase, Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': models_1.NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
 };
 exports.GithubButton = GithubButton;

package/build/cjs/navigation/components/SocialIcon/SocialIcon.js

@@ -5,10 +5,11 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const components_1 = require("../../../components");
 const utils_2 = require("../../../components/Media/Image/utils");
+const LinkBase_1 = require("../../../components/Link/LinkBase/LinkBase");
 const b = (0, utils_1.block)('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (react_1.default.createElement(LinkBase_1.LinkBase, { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, iconData))));
 };
 exports.default = SocialIcon;

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -7,11 +7,13 @@ const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const components_1 = require("../../components");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const locationContext_1 = require("../../context/locationContext/locationContext");
 const utils_2 = require("../../components/Media/Image/utils");
 const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
+    const { Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const imageThemed = (0, utils_1.getThemedValue)(image, theme);
     const imageData = (0, utils_2.getMediaImage)(imageThemed);
@@ -19,7 +21,7 @@ const Quote = (props) => {
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (react_1.default.createElement("div", { className: b('author-wrapper') },
         author && (react_1.default.createElement(components_1.Author, { className: b('author', { theme: textTheme }), author: author, type: models_1.AuthorType.Line })),
-        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
+        url && buttonText && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", href: url, component: Link, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
     return (react_1.default.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         react_1.default.createElement("div", { key: text, className: b('content-wrapper') },
             react_1.default.createElement("div", null,

package/build/esm/blocks/Icons/Icons.js

@@ -1,15 +1,18 @@
-import React, { useContext } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { block, getLinkProps } from '../../utils';
 import { BlockHeader, Image } from '../../components';
 import { LocationContext } from '../../context/locationContext';
 import './Icons.css';
 const b = block('icons-block');
+const IconChildren = ({ src, text }) => (React.createElement(Fragment, null,
+    React.createElement(Image, { className: b('image'), src: src }),
+    React.createElement("p", { className: b('text') }, text)));
 const Icons = ({ title, size = 's', items }) => {
-    const { hostname } = useContext(LocationContext);
+    const { hostname, Link } = useContext(LocationContext);
     return (React.createElement("div", { className: b({ size }) },
         title && React.createElement(BlockHeader, { className: b('header'), title: title, colSizes: { all: 12 } }),
-        items.map((item) => (React.createElement("a", Object.assign({ className: b('item'), key: item.url, href: item.url }, getLinkProps(item.url, hostname)),
-            React.createElement(Image, { className: b('image'), src: item.src }),
-            React.createElement("p", { className: b('text') }, item.text))))));
+        items.map((item) => {
+            return React.createElement(Link || 'a', Object.assign({ className: b('item'), key: item.url, href: item.url }, (Link ? {} : getLinkProps(item.url, hostname))), React.createElement(IconChildren, { text: item.text, src: item.src }));
+        })));
 };
 export default Icons;

package/build/esm/blocks/Share/Share.js

@@ -20,7 +20,7 @@ const icons = {
 };
 const b = block('share-block');
 const Share = ({ items, title }) => {
-    const { pathname, hostname } = useContext(LocationContext);
+    const { pathname, hostname, Link } = useContext(LocationContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.ShareButton);
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
     return (React.createElement("div", { className: b() },
@@ -29,7 +29,7 @@ const Share = ({ items, title }) => {
             const url = getAbsolutePath(hostname, pathname);
             const socialUrl = getShareLink(url, type);
             const icon = icons[type];
-            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
+            return (React.createElement(Button, { key: type, view: "flat", size: "l", target: "_blank", href: socialUrl, component: Link, className: b('item', { type: type.toLowerCase() }), onClick: handleButtonClick }, icon && React.createElement(Icon, { data: icon, size: 24, className: b('icon', { type }) })));
         }))));
 };
 export default Share;

package/build/esm/components/BackLink/BackLink.js

@@ -5,7 +5,7 @@ import { LocationContext } from '../../context/locationContext';
 import { useAnalytics } from '../../hooks';
 import { DefaultEventNames } from '../../models';
 export default function BackLink(props) {
-    const { history } = useContext(LocationContext);
+    const { history, Link } = useContext(LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.ShareButton, url);
     const backActionHandler = useCallback(async () => {
@@ -23,7 +23,7 @@ export default function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
+    return (React.createElement(Button, { component: Link, className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined },
         React.createElement(Icon, { data: ArrowSidebar, size: 24 }),
         React.createElement("span", null, title)));
 }

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

@@ -5,6 +5,7 @@ import { block, setUrlTld } from '../../utils';
 import { DefaultEventNames } from '../../models';
 import { toCommonSize, toCommonView } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
+import { LocationContext } from '../../context/locationContext/locationContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
 import { Github } from '../../icons';
@@ -13,6 +14,7 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
+    const { Link } = useContext(LocationContext);
     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);
@@ -41,7 +43,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined }, buttonProps),
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, component: Link }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         React.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/esm/components/FileLink/FileLink.js

@@ -1,6 +1,7 @@
 import { block, getLinkProps } from '../../utils';
 import React, { useContext } from 'react';
 import { LocationContext } from '../../context/locationContext';
+import { LinkBase } from '../Link/LinkBase/LinkBase';
 import './FileLink.css';
 const b = block('file-link');
 const FIGMA_URL = 'https://www.figma.com';
@@ -27,6 +28,6 @@ const FileLink = (props) => {
     return (React.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         Object.values(FileExtension).includes(fileExt) && (React.createElement("div", { className: b('file-label') }, fileExt)),
         React.createElement("div", { className: b('link') },
-            React.createElement("a", Object.assign({ href: href }, getLinkProps(href, hostname), { onClick: onClick }), text))));
+            React.createElement(LinkBase, Object.assign({ href: href }, getLinkProps(href, hostname), { onClick: onClick }), text))));
 };
 export default FileLink;

package/build/esm/components/HeaderBreadcrumbs/HeaderBreadcrumbs.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import { useMetrika } from '../../hooks/useMetrika';
+import { LinkBase } from '../Link/LinkBase/LinkBase';
 import './HeaderBreadcrumbs.css';
 const b = block('header-breadcrumbs');
 export default function HeaderBreadcrumbs(props) {
@@ -10,5 +11,5 @@ export default function HeaderBreadcrumbs(props) {
         handleMetrika({ metrikaGoals, pixelEvents });
     };
     return (React.createElement("div", { className: b({ theme }, className) }, items.map((item) => (React.createElement("div", { className: b('item'), key: item.url },
-        React.createElement("a", { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
+        React.createElement(LinkBase, { href: item.url, className: b('text'), onClick: onClick }, item.text))))));
 }

package/build/esm/components/Link/Link.js

@@ -9,6 +9,7 @@ import { LocaleContext } from '../../context/localeContext/localeContext';
 import { LocationContext } from '../../context/locationContext/locationContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
+import { LinkBase } from './LinkBase/LinkBase';
 import './Link.css';
 const b = block('link-block');
 const WORD_JOINER_SYM = '\u200b';
@@ -46,7 +47,7 @@ const LinkBlock = (props) => {
             case 'normal': {
                 const linkProps = getLinkProps(url, hostname, target);
                 const content = children || text;
-                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (React.createElement(Fragment, null,
+                return (React.createElement(LinkBase, Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick }, linkProps), arrow ? (React.createElement(Fragment, null,
                     React.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/esm/components/Link/LinkBase/LinkBase.d.ts

@@ -0,0 +1,2 @@
+import { LinkBaseProps, WithChildren } from '../../../models';
+export declare const LinkBase: (props: WithChildren<LinkBaseProps>) => JSX.Element;

package/build/esm/components/Link/LinkBase/LinkBase.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import React, { useContext } from 'react';
+import { omit } from 'lodash';
+import { LocationContext } from '../../../context/locationContext';
+export const LinkBase = (props) => {
+    const { href, children } = props, linkProps = __rest(props, ["href", "children"]);
+    const { Link } = useContext(LocationContext);
+    if (Link && href) {
+        const extractedProps = omit(linkProps, ['rel', 'ref']);
+        return (React.createElement(Link, { href: href },
+            React.createElement("a", Object.assign({}, extractedProps), children)));
+    }
+    return (React.createElement("a", Object.assign({ href: href }, linkProps), children));
+};

package/build/esm/components/Title/Title.js

@@ -4,6 +4,7 @@ import Anchor from '../Anchor/Anchor';
 import { ToggleArrow, HTML } from '../';
 import { LocationContext } from '../../context/locationContext';
 import { MobileContext } from '../../context/mobileContext';
+import { LinkBase } from '../Link/LinkBase/LinkBase';
 import './Title.css';
 const b = block('title-block');
 export function getArrowSize(size, isMobile) {
@@ -36,7 +37,7 @@ const Title = (props) => {
         content = textMarkup;
     }
     else if (url) {
-        content = (React.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick }), insideClickableContent));
+        content = (React.createElement(LinkBase, Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick }), insideClickableContent));
     }
     else if (onClick) {
         content = (React.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));

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

@@ -111,6 +111,8 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
+export interface LinkBaseProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+}
 export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.js

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import { block } from '../../../../../utils';
 import { NavigationGithubButtonIcon } from '../../../../../models';
+import { LinkBase } from '../../../../../components/Link/LinkBase/LinkBase';
 import './GithubButton.css';
 const b = block('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
@@ -39,5 +40,5 @@ export const GithubButton = ({ text, url, className, label, size, icon, }) => {
     }, []);
     return (React.createElement("div", { className: b(null, className) },
         React.createElement("span", { ref: containerRef },
-            React.createElement("a", Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
+            React.createElement(LinkBase, Object.assign({ href: url, ref: linkRef, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
 };

package/build/esm/navigation/components/SocialIcon/SocialIcon.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { block } from '../../../utils';
 import { Image } from '../../../components';
 import { getMediaImage } from '../../../components/Media/Image/utils';
+import { LinkBase } from '../../../components/Link/LinkBase/LinkBase';
 import './SocialIcon.css';
 const b = block('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
     const iconData = getMediaImage(icon);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (React.createElement(LinkBase, { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
 };
 export default SocialIcon;

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

@@ -4,12 +4,14 @@ import { block, getThemedValue } from '../../utils';
 import { AuthorType, DefaultEventNames } from '../../models';
 import { Author, Image, HTML } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { LocationContext } from '../../context/locationContext/locationContext';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import { useAnalytics } from '../../hooks';
 import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
+    const { Link } = useContext(LocationContext);
     const { themeValue: theme } = useContext(ThemeValueContext);
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
@@ -17,7 +19,7 @@ const Quote = (props) => {
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
     const renderFooter = Boolean(author || url) && (React.createElement("div", { className: b('author-wrapper') },
         author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line })),
-        url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
+        url && buttonText && (React.createElement(Button, { view: "outlined", size: "xl", href: url, component: Link, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick }, buttonText))));
     return (React.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         React.createElement("div", { key: text, className: b('content-wrapper') },
             React.createElement("div", null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.23.0",
+  "version": "1.24.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -111,6 +111,8 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     metrika?: MetrikaVideo;
 }
+export interface LinkBaseProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+}
 export interface LinkProps extends AnalyticsEventsBase, Stylable {
     url: string;
     text?: string;