@gravity-ui/page-constructor 4.16.0 → 4.18.0

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

@@ -7,6 +7,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     contentClassName?: string;
     children: ReactElement | ReactElement[];
     url?: string;
+    urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;

package/build/cjs/components/CardBase/CardBase.js

@@ -14,7 +14,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -53,7 +53,7 @@ const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (react_1.default.createElement(RouterLink_1.default, { href: url },
-        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, "data-qa": qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        react_1.default.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (react_1.default.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 exports.Layout = Layout;
 exports.Layout.Header = Header;

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

@@ -41,13 +41,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, (0, utils_1.getLinkProps)(href, hostname)), text))));
+            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname)), text))));
 };
 exports.default = FileLink;

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

@@ -28,7 +28,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, } = props;
     const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
@@ -50,7 +50,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, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }), 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/Title/TitleItem.js

@@ -26,7 +26,7 @@ function getArrowSize(size, isMobile) {
 exports.getArrowSize = getArrowSize;
 const TitleItem = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const textMarkup = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(__1.HTML, { className: b('text') }, text),
@@ -42,10 +42,10 @@ const TitleItem = (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("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
+        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (react_1.default.createElement(react_1.Fragment, null,
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),

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

@@ -34,5 +34,5 @@ export declare const navItemMap: {
     social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
     dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
     link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };

package/build/cjs/editor/components/AddBlock/AddBlock.js

@@ -17,7 +17,7 @@ const AddBlock = ({ onAdd, className }) => {
         .toLocaleLowerCase()
         .startsWith(search.toLocaleLowerCase())), [search]);
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref },
-        react_1.default.createElement("button", { className: b('button'), onClick: () => {
+        react_1.default.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
                 setSearch('');
             } },

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

@@ -120,6 +120,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
+    urlTitle?: string;
     text?: string;
     textSize?: TextSize;
     theme?: LinkTheme;
@@ -135,6 +136,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     type?: FileLinkType;
     textSize?: TextSize;
     theme?: ContentTheme;
+    urlTitle?: string;
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
@@ -260,6 +262,7 @@ export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
+    urlTitle?: string;
     custom?: string | ReactNode;
     onClick?: () => void;
 }

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

@@ -73,6 +73,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
+    urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;

package/build/cjs/models/navigation.d.ts

@@ -29,6 +29,7 @@ export declare enum NavigationGithubButtonIcon {
 export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
     type: NavigationItemType.GithubButton;
     url: string;
+    urlTitle?: string;
     label?: string;
     icon?: keyof typeof NavigationGithubButtonIcon;
     size?: string;
@@ -36,6 +37,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string;
     arrow?: boolean;
     target?: string;
 }
@@ -52,6 +54,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
     icon: ImageProps;
     url: string;
+    urlTitle?: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -1,5 +1,5 @@
 import { NavigationGithubButton } from '../../../../../models';
 import { NavigationItemProps } from '../../../../models';
 type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
-export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export declare const GithubButton: ({ text, url, className, label, size, icon, urlTitle, }: NavigationGithubButtonProps) => JSX.Element;
 export {};

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../../../../utils");
 const b = (0, utils_1.block)('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
 /* More information about github-buttons in https://buttons.github.io/ */
-const GithubButton = ({ text, url, className, label, size, icon, }) => {
+const GithubButton = ({ text, url, className, label, size, icon, urlTitle, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const linkRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -42,6 +42,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("a", Object.assign({ href: url, ref: linkRef, title: urlTitle, "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/NavigationItem/components/NavigationLink/NavigationLink.js

@@ -12,7 +12,7 @@ const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-link');
 const NavigationLink = (props) => {
     const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target, className, iconSize } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
+    const { url, text, icon, arrow, target, className, iconSize, urlTitle } = props, rest = tslib_1.__rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize", "urlTitle"]);
     const linkExtraProps = (0, utils_2.getLinkProps)(url, hostname, target);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
     const classes = b(null, className);
@@ -20,11 +20,11 @@ const NavigationLink = (props) => {
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
     if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
-        return (react_1.default.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));
+        return (react_1.default.createElement("a", Object.assign({ href: url, title: urlTitle || text, className: classes }, rest, linkExtraProps), content));
     }
     else {
         return (react_1.default.createElement(components_1.RouterLink, { href: url, passHref: true },
-            react_1.default.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
+            react_1.default.createElement("a", Object.assign({ title: urlTitle || text }, rest, { className: classes }), content)));
     }
 };
 exports.NavigationLink = NavigationLink;

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

@@ -6,10 +6,10 @@ const components_1 = require("../../../components");
 const utils_1 = require("../../../components/Media/Image/utils");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('social-icon');
-const SocialIcon = ({ icon, url, className }) => {
+const SocialIcon = ({ icon, url, className, urlTitle }) => {
     const iconData = (0, utils_1.getMediaImage)(icon);
     const { alt } = iconData;
-    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (react_1.default.createElement("a", { href: url, "aria-label": alt, title: urlTitle || alt, 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/navigation/utils.d.ts

@@ -11,6 +11,7 @@ export declare const getItemClickHandler: ({ column, index, onActiveItemChange,
 export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string | undefined;
     arrow?: boolean | undefined;
     target?: string | undefined;
     text: string;

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

@@ -8,11 +8,11 @@ const utils_1 = require("../../utils");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const b = (0, utils_1.block)('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         react_1.default.createElement(components_1.CardBase.Content, null,
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
             react_1.default.createElement(Content_1.default, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

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

@@ -1,6 +1,7 @@
 import { LayoutItemProps, LinkTheme, MediaProps } from '../../models';
 export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['links']) => {
     url: string;
+    urlTitle?: string | undefined;
     text?: string | undefined;
     textSize?: import("../../models").TextSize | undefined;
     theme: LinkTheme;

package/build/cjs/text-transform/config.d.ts

@@ -10,6 +10,7 @@ export declare const blockHeaderTransformer: ({
         justify?: import("../models").Justify | undefined;
         textSize?: import("../models").TextSize | undefined;
         url?: string | undefined;
+        urlTitle?: string | undefined;
         custom?: import("react").ReactNode;
         onClick?: (() => void) | undefined;
     };

package/build/cjs/text-transform/utils.d.ts

@@ -1,6 +1,7 @@
 import { Options, Output } from '@doc-tools/transform';
 import sanitize from 'sanitize-html';
 import { Lang } from '../utils/configure';
+import AddRuleOptions = typograf.AddRuleOptions;
 export declare enum TransformType {
     Text = "text",
     Html = "html"
@@ -14,6 +15,7 @@ export declare const typografConfig: {
     disabled: string[];
 };
 export declare const sanitizeStripOptions: sanitize.IOptions;
+export declare function addTypografRules(options: AddRuleOptions[]): void;
 export declare function typograf(text: string, lang?: Lang): string;
 export declare function sanitizeHtml(html: string, options?: sanitize.IOptions): string;
 export declare function typografToHTML(text: string, lang: Lang, allowedTags?: string[]): string;

package/build/cjs/text-transform/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typografEntity = exports.fullTransform = exports.transformMarkdown = exports.typografToText = exports.typografToHTML = exports.sanitizeHtml = exports.typograf = exports.sanitizeStripOptions = exports.typografConfig = exports.DEFAULT_ALLOWED_TAGS = exports.TransformType = void 0;
+exports.typografEntity = exports.fullTransform = exports.transformMarkdown = exports.typografToText = exports.typografToHTML = exports.sanitizeHtml = exports.typograf = exports.addTypografRules = exports.sanitizeStripOptions = exports.typografConfig = exports.DEFAULT_ALLOWED_TAGS = exports.TransformType = void 0;
 const tslib_1 = require("tslib");
 const transform_1 = tslib_1.__importDefault(require("@doc-tools/transform"));
 const sanitize_html_1 = tslib_1.__importDefault(require("sanitize-html"));
@@ -37,31 +37,12 @@ exports.sanitizeStripOptions = {
     allowedTags: [],
     allowedAttributes: {},
 };
-typograf_1.default.addRule({
-    name: 'common/html/sup',
-    queue: 'end',
-    /* TODO mange with it: in typograf types AddRuleOptions.handler takes only one param: text.
-    But in cloud-www was used this notation with 3 params */
-    //@ts-ignore
-    handler: function (text, settings, context) {
-        const { prefs: { htmlEntity: { type = '' } = {} } = {} } = context;
-        let symbols;
-        switch (type) {
-            case 'digit':
-                symbols = '®|©|™';
-                break;
-            case 'name':
-                symbols = '®|©|™';
-                break;
-            default:
-                symbols = '®|©|™';
-                break;
-        }
-        const symbolsRegex = new RegExp(`(?<!<sup>\\s*)(${symbols})|(${symbols})(?!\\s*<\\/sup>)`, 'gi');
-        return text.replace(symbolsRegex, '<sup>$1</sup>');
-    },
-    htmlAttrs: false,
-});
+function addTypografRules(options) {
+    options.forEach((option) => {
+        typograf_1.default.addRule(option);
+    });
+}
+exports.addTypografRules = addTypografRules;
 function enableRules(tp) {
     const { disabled, enabled } = exports.typografConfig;
     enabled.forEach((rule) => tp.enableRule(rule));

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

@@ -8,6 +8,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     contentClassName?: string;
     children: ReactElement | ReactElement[];
     url?: string;
+    urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;

package/build/esm/components/CardBase/CardBase.js

@@ -11,7 +11,7 @@ const Header = () => null;
 const Content = () => null;
 const Footer = () => null;
 export const Layout = (props) => {
-    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', qa, } = props;
+    const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', urlTitle, qa, } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
@@ -50,7 +50,7 @@ export const Layout = (props) => {
         handleAnalytics(analyticsEvents);
     };
     return url ? (React.createElement(RouterLink, { href: url },
-        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
+        React.createElement("a", { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: fullClassName, draggable: false, onDragStart: (e) => e.preventDefault(), onClick: onClick, title: urlTitle, "data-qa": qa }, cardContent))) : (React.createElement("div", { className: fullClassName, "data-qa": qa }, cardContent));
 };
 Layout.Header = Header;
 Layout.Content = Content;

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

@@ -37,13 +37,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = useContext(LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (React.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
-            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex }, getLinkProps(href, hostname)), text))));
+            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, getLinkProps(href, hostname)), text))));
 };
 export default FileLink;

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

@@ -26,7 +26,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, } = props;
     const qaAttributes = getQaAttrubutes(qa, ['normal']);
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
@@ -48,7 +48,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, tabIndex: tabIndex }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (React.createElement(Fragment, null,
+                return (React.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }), 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/Title/TitleItem.js

@@ -22,7 +22,7 @@ export function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
     const { hostname } = useContext(LocationContext);
     const textMarkup = (React.createElement(React.Fragment, null,
         React.createElement(HTML, { className: b('text') }, text),
@@ -38,10 +38,10 @@ const TitleItem = (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("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (React.createElement("span", { className: b('link'), onClick: onClick }, insideClickableContent));
+        content = (React.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (React.createElement(Fragment, null,
         anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),

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

@@ -34,5 +34,5 @@ export declare const navItemMap: {
     social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
     dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
     link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };

package/build/esm/editor/components/AddBlock/AddBlock.js

@@ -15,7 +15,7 @@ const AddBlock = ({ onAdd, className }) => {
         .toLocaleLowerCase()
         .startsWith(search.toLocaleLowerCase())), [search]);
     return (React.createElement("div", { className: b(null, className), ref: ref },
-        React.createElement("button", { className: b('button'), onClick: () => {
+        React.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
                 setSearch('');
             } },

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

@@ -120,6 +120,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
+    urlTitle?: string;
     text?: string;
     textSize?: TextSize;
     theme?: LinkTheme;
@@ -135,6 +136,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     type?: FileLinkType;
     textSize?: TextSize;
     theme?: ContentTheme;
+    urlTitle?: string;
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
@@ -260,6 +262,7 @@ export interface TitleItemBaseProps {
     text: string;
     textSize?: TextSize;
     url?: string;
+    urlTitle?: string;
     custom?: string | ReactNode;
     onClick?: () => void;
 }

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

@@ -73,6 +73,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 }
 export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
+    urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;

package/build/esm/models/navigation.d.ts

@@ -29,6 +29,7 @@ export declare enum NavigationGithubButtonIcon {
 export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
     type: NavigationItemType.GithubButton;
     url: string;
+    urlTitle?: string;
     label?: string;
     icon?: keyof typeof NavigationGithubButtonIcon;
     size?: string;
@@ -36,6 +37,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string;
     arrow?: boolean;
     target?: string;
 }
@@ -52,6 +54,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
     icon: ImageProps;
     url: string;
+    urlTitle?: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
 export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;

package/build/esm/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -2,5 +2,5 @@ import { NavigationGithubButton } from '../../../../../models';
 import { NavigationItemProps } from '../../../../models';
 import './GithubButton.css';
 type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
-export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
+export declare const GithubButton: ({ text, url, className, label, size, icon, urlTitle, }: NavigationGithubButtonProps) => JSX.Element;
 export {};

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

@@ -5,7 +5,7 @@ import './GithubButton.css';
 const b = block('github-button');
 const DEFAULT_LABEL = 'Stars on GitHub';
 /* More information about github-buttons in https://buttons.github.io/ */
-export const GithubButton = ({ text, url, className, label, size, icon, }) => {
+export const GithubButton = ({ text, url, className, label, size, icon, urlTitle, }) => {
     const containerRef = useRef(null);
     const linkRef = useRef(null);
     useEffect(() => {
@@ -39,5 +39,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("a", Object.assign({ href: url, ref: linkRef, title: urlTitle, "data-show-count": "true", "aria-label": label || DEFAULT_LABEL }, (icon && { 'data-icon': NavigationGithubButtonIcon[icon] }), (size && { 'data-size': size })), text))));
 };

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

@@ -10,7 +10,7 @@ import './NavigationLink.css';
 const b = block('navigation-link');
 export const NavigationLink = (props) => {
     const { hostname, Link } = useContext(LocationContext);
-    const { url, text, icon, arrow, target, className, iconSize } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize"]);
+    const { url, text, icon, arrow, target, className, iconSize, urlTitle } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "className", "iconSize", "urlTitle"]);
     const linkExtraProps = getLinkProps(url, hostname, target);
     const iconData = icon && getMediaImage(icon);
     const classes = b(null, className);
@@ -18,10 +18,10 @@ export const NavigationLink = (props) => {
         React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
         arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
     if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
-        return (React.createElement("a", Object.assign({ href: url, title: text, className: classes }, rest, linkExtraProps), content));
+        return (React.createElement("a", Object.assign({ href: url, title: urlTitle || text, className: classes }, rest, linkExtraProps), content));
     }
     else {
         return (React.createElement(RouterLink, { href: url, passHref: true },
-            React.createElement("a", Object.assign({ title: text }, rest, { className: classes }), content)));
+            React.createElement("a", Object.assign({ title: urlTitle || text }, rest, { className: classes }), content)));
     }
 };

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

@@ -4,10 +4,10 @@ import { getMediaImage } from '../../../components/Media/Image/utils';
 import { block } from '../../../utils';
 import './SocialIcon.css';
 const b = block('social-icon');
-const SocialIcon = ({ icon, url, className }) => {
+const SocialIcon = ({ icon, url, className, urlTitle }) => {
     const iconData = getMediaImage(icon);
     const { alt } = iconData;
-    return (React.createElement("a", { href: url, "aria-label": alt, title: alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+    return (React.createElement("a", { href: url, "aria-label": alt, title: urlTitle || alt, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
 };
 export default SocialIcon;

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

@@ -11,6 +11,7 @@ export declare const getItemClickHandler: ({ column, index, onActiveItemChange,
 export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string | undefined;
     arrow?: boolean | undefined;
     target?: string | undefined;
     text: string;

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

@@ -6,11 +6,11 @@ import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents },
+    return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
             React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));

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

@@ -1,6 +1,7 @@
 import { LayoutItemProps, LinkTheme, MediaProps } from '../../models';
 export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['links']) => {
     url: string;
+    urlTitle?: string | undefined;
     text?: string | undefined;
     textSize?: import("../../models").TextSize | undefined;
     theme: LinkTheme;

package/build/esm/text-transform/config.d.ts

@@ -10,6 +10,7 @@ export declare const blockHeaderTransformer: ({
         justify?: import("../models").Justify | undefined;
         textSize?: import("../models").TextSize | undefined;
         url?: string | undefined;
+        urlTitle?: string | undefined;
         custom?: import("react").ReactNode;
         onClick?: (() => void) | undefined;
     };