@gravity-ui/page-constructor 1.16.2 → 1.16.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [1.16.4](https://github.com/gravity-ui/page-constructor/compare/v1.16.3...v1.16.4) (2023-02-22)
+
+
+### Bug Fixes
+
+* **BasicCard:** add target ([#162](https://github.com/gravity-ui/page-constructor/issues/162)) ([569038c](https://github.com/gravity-ui/page-constructor/commit/569038c8ef1c43b7c8b9d6462126997155605b4c))
+* do not set "rel: 'noopener noreferrer'" for local links ([#160](https://github.com/gravity-ui/page-constructor/issues/160)) ([81173a7](https://github.com/gravity-ui/page-constructor/commit/81173a7e237104463971a80e386f5bad37caa551))
+
+## [1.16.3](https://github.com/gravity-ui/page-constructor/compare/v1.16.2...v1.16.3) (2023-02-17)
+
+
+### Bug Fixes
+
+* add router link for banner button ([#158](https://github.com/gravity-ui/page-constructor/issues/158)) ([a194a40](https://github.com/gravity-ui/page-constructor/commit/a194a40bae0486277d0a862e3a9b415404d75d0b))
+* **Foldable:** fix issues with content height calculation on resize ([#156](https://github.com/gravity-ui/page-constructor/issues/156)) ([e20709e](https://github.com/gravity-ui/page-constructor/commit/e20709e4eb84e7eb620ff2e42dd3e5010d1066a2))
+
 ## [1.16.2](https://github.com/gravity-ui/page-constructor/compare/v1.16.1...v1.16.2) (2023-02-16)
 
 

package/build/cjs/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/cjs/components/Foldable/Foldable.js

@@ -3,21 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const HeightCalculator_1 = tslib_1.__importDefault(require("../../components/HeightCalculator/HeightCalculator"));
+const useHeightCalculator_1 = tslib_1.__importDefault(require("../../hooks/useHeightCalculator"));
 const b = (0, utils_1.block)('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
-    const [contentHeight, setContentHeight] = (0, react_1.useState)();
-    const onHeightCalculation = (0, react_1.useCallback)((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = (0, useHeightCalculator_1.default)(contentRef);
     (0, react_1.useEffect)(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        react_1.default.createElement(HeightCalculator_1.default, { onCalculate: onHeightCalculation }, children)));
+    return (react_1.default.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        react_1.default.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 exports.default = Foldable;

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

@@ -2,5 +2,9 @@ import { WithChildren } from '../../models';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/cjs/components/HeightCalculator/HeightCalculator.js

@@ -5,6 +5,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = (0, react_1.useState)(true);
     const container = (0, react_1.useRef)(null);

package/build/cjs/hooks/useHeightCalculator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+declare const useHeightCalculator: (containerRef: React.RefObject<HTMLElement>, options?: HeightCalculatorOptions) => number | undefined;
+export default useHeightCalculator;

package/build/cjs/hooks/useHeightCalculator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(undefined);
+    const calculateContainerHeight = (0, react_1.useCallback)(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+    (0, react_1.useEffect)(() => {
+        const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+    return containerHeight;
+};
+exports.default = useHeightCalculator;

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

@@ -106,6 +106,7 @@ export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockPro
 export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
+    target?: string;
 }
 export interface BannerCardProps {
     title: string;

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

@@ -21,7 +21,8 @@ const BannerCard = (props) => {
                     react_1.default.createElement("h2", { className: b('title') },
                         react_1.default.createElement(components_1.HTML, null, title)),
                     subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                react_1.default.createElement(components_1.Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+                react_1.default.createElement(components_1.RouterLink, { href: url },
+                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
             react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
 };
 exports.BannerCard = BannerCard;

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

@@ -9,9 +9,9 @@ const __1 = require("../");
 const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('basic-card');
 const BasicCard = (props) => {
-    const { url, title, text, border, icon, additionalInfo, links, buttons } = props;
+    const { title, text, icon, additionalInfo, links, buttons } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons"]);
     const iconProps = icon && (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement(CardBase_1.default, { className: b(), url: url, border: border },
+    return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams),
         react_1.default.createElement(CardBase_1.default.Content, null,
             iconProps && react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon') })),
             react_1.default.createElement(__1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));

package/build/cjs/sub-blocks/BasicCard/schema.d.ts

@@ -19,6 +19,10 @@ export declare const BasicCard: {
                     pattern: string;
                 })[];
             };
+            target: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/cjs/sub-blocks/BasicCard/schema.js

@@ -13,6 +13,9 @@ exports.BasicCard = {
         required: ['url'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.CardBase), BasicCardContentProps), { url: {
                 type: 'string',
-            }, icon: schema_2.ImageProps }),
+            }, icon: schema_2.ImageProps, target: {
+                type: 'string',
+                enum: ['_blank', '_parent', '_top', '_self'],
+            } }),
     },
 };

package/build/cjs/utils/url.d.ts

@@ -6,6 +6,7 @@ export declare const EXTERNAL_LINK_PROPS: {
 export declare function getLinkProps(url: string, hostname?: string, target?: string): {
     target: string | undefined;
 };
+export declare function isAbsoluteUrl(url: string | URL): boolean;
 export declare function isLinkExternal(url: string, routerHostname?: string): boolean;
 export declare function getNonLocaleHostName(hostname: string): string;
 export declare function setUrlTld(url: string, tld?: string): string;

package/build/cjs/utils/url.js

@@ -1,25 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
+exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.isAbsoluteUrl = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
 const url_1 = require("url");
+const EXAMPLE_URL = 'https://example.org';
 exports.EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noopener noreferrer' };
 function getLinkProps(url, hostname, target) {
     let linkProps = { target };
-    if (target === '_blank' || isLinkExternal(url, hostname)) {
+    if (isLinkExternal(url, hostname)) {
         linkProps = Object.assign(Object.assign({}, linkProps), exports.EXTERNAL_LINK_PROPS);
     }
     return linkProps;
 }
 exports.getLinkProps = getLinkProps;
+function isAbsoluteUrl(url) {
+    // Using example URL as base for relative links
+    const urlObj = new URL(url, EXAMPLE_URL);
+    return (
+    // Compare url origin with example and check that original url was not example one
+    urlObj.origin !== EXAMPLE_URL || (typeof url === 'string' && url.startsWith(EXAMPLE_URL)));
+}
+exports.isAbsoluteUrl = isAbsoluteUrl;
 function isLinkExternal(url, routerHostname) {
-    if (!routerHostname) {
-        return true;
-    }
-    const { hostname } = (0, url_1.parse)(url);
-    if (!hostname) {
-        return false;
-    }
-    return getNonLocaleHostName(hostname) !== getNonLocaleHostName(routerHostname);
+    return (isAbsoluteUrl(url) &&
+        getNonLocaleHostName(new URL(url).hostname) !== getNonLocaleHostName(routerHostname !== null && routerHostname !== void 0 ? routerHostname : ''));
 }
 exports.isLinkExternal = isLinkExternal;
 function getNonLocaleHostName(hostname) {

package/build/cjs/utils/url.test.d.ts

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

package/build/cjs/utils/url.test.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const url_1 = require("./url");
+describe('URL utils check', () => {
+    test.each([
+        ['https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash', true],
+        ['http://example.net/path', true],
+        ['/p/a/t/h?query=string&query2=1#hash', false],
+        ['/path', false],
+        ['path', false],
+    ])("isAbsoluteUrl('%s') should return '%s'", (url, result) => {
+        expect((0, url_1.isAbsoluteUrl)(url)).toEqual(result);
+    });
+    test.each([
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'example.net',
+            true,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'sub.example.com',
+            false,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            undefined,
+            true,
+        ],
+        ['http://example.net/path', 'example.net', false],
+        ['http://example.net/path', 'sub.example.com', true],
+        ['http://example.net/path', undefined, true],
+        ['/p/a/t/h?query=string&query2=1#hash', 'example.net', false],
+        ['/p/a/t/h?query=string&query2=1#hash', undefined, false],
+        ['/path', 'example.net', false],
+        ['/path', undefined, false],
+        ['path', 'example.net', false],
+        ['path', undefined, false],
+    ])("isLinkExternal('%s', '%s') should return '%s'", (url, hostname, result) => {
+        expect((0, url_1.isLinkExternal)(url, hostname)).toEqual(result);
+    });
+    test.each([
+        ['http://example.net/path', 'example.net', '_blank', { target: '_blank' }],
+        ['http://example.net/path', 'example.net', undefined, {}],
+        [
+            'http://example.net/path',
+            'example.com',
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            'example.com',
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        ['/path', 'example.net', '_blank', { target: '_blank' }],
+        ['/path', 'example.net', undefined, {}],
+        ['/path', undefined, '_blank', { target: '_blank' }],
+        ['/path', undefined, undefined, {}],
+    ])("getLinkProps('%s', '%s', '%s') should return '%s'", (url, hostname, target, result) => {
+        expect((0, url_1.getLinkProps)(url, hostname, target)).toEqual(result);
+    });
+});

package/build/esm/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/esm/components/Foldable/Foldable.js

@@ -1,21 +1,18 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { block } from '../../utils';
-import HeightCalculator from '../../components/HeightCalculator/HeightCalculator';
+import useHeightCalculator from '../../hooks/useHeightCalculator';
 import './Foldable.css';
 const b = block('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = useRef(null);
     const contentRef = useRef(null);
-    const [contentHeight, setContentHeight] = useState();
-    const onHeightCalculation = useCallback((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = useHeightCalculator(contentRef);
     useEffect(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (React.createElement("div", { className: b(null, className) },
-        React.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        React.createElement(HeightCalculator, { onCalculate: onHeightCalculation }, children)));
+    return (React.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        React.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 export default Foldable;

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

@@ -3,5 +3,9 @@ import './HeightCalculator.css';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/esm/components/HeightCalculator/HeightCalculator.js

@@ -3,6 +3,10 @@ import _ from 'lodash';
 import { block } from '../../utils';
 import './HeightCalculator.css';
 const b = block('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = useState(true);
     const container = useRef(null);

package/build/esm/hooks/useHeightCalculator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+declare const useHeightCalculator: (containerRef: React.RefObject<HTMLElement>, options?: HeightCalculatorOptions) => number | undefined;
+export default useHeightCalculator;

package/build/esm/hooks/useHeightCalculator.js

@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import _ from 'lodash';
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = useState(undefined);
+    const calculateContainerHeight = useCallback(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+    useEffect(() => {
+        const handleResize = _.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+    return containerHeight;
+};
+export default useHeightCalculator;

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

@@ -106,6 +106,7 @@ export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockPro
 export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
+    target?: string;
 }
 export interface BannerCardProps {
     title: string;

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { block, getThemedValue } from '../../utils';
-import { Button, YFMWrapper, BackgroundImage, HTML } from '../../components';
+import { Button, YFMWrapper, BackgroundImage, HTML, RouterLink } from '../../components';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import './BannerCard.css';
 const b = block('banner-card');
@@ -18,7 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target })),
+                React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: "raised", size: "xl", text: text, url: url, target: target }))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

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

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import React from 'react';
 import { block } from '../../utils';
 import CardBase from '../../components/CardBase/CardBase';
@@ -7,9 +8,9 @@ import { getMediaImage } from '../../components/Media/Image/utils';
 import './BasicCard.css';
 const b = block('basic-card');
 const BasicCard = (props) => {
-    const { url, title, text, border, icon, additionalInfo, links, buttons } = props;
+    const { title, text, icon, additionalInfo, links, buttons } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons"]);
     const iconProps = icon && getMediaImage(icon);
-    return (React.createElement(CardBase, { className: b(), url: url, border: border },
+    return (React.createElement(CardBase, Object.assign({ className: b() }, cardParams),
         React.createElement(CardBase.Content, null,
             iconProps && React.createElement(Image, Object.assign({}, iconProps, { className: b('icon') })),
             React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));

package/build/esm/sub-blocks/BasicCard/schema.d.ts

@@ -19,6 +19,10 @@ export declare const BasicCard: {
                     pattern: string;
                 })[];
             };
+            target: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

package/build/esm/sub-blocks/BasicCard/schema.js

@@ -9,6 +9,9 @@ export const BasicCard = {
         required: ['url'],
         properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), BasicCardContentProps), { url: {
                 type: 'string',
-            }, icon: ImageProps }),
+            }, icon: ImageProps, target: {
+                type: 'string',
+                enum: ['_blank', '_parent', '_top', '_self'],
+            } }),
     },
 };

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

@@ -6,6 +6,7 @@ export declare const EXTERNAL_LINK_PROPS: {
 export declare function getLinkProps(url: string, hostname?: string, target?: string): {
     target: string | undefined;
 };
+export declare function isAbsoluteUrl(url: string | URL): boolean;
 export declare function isLinkExternal(url: string, routerHostname?: string): boolean;
 export declare function getNonLocaleHostName(hostname: string): string;
 export declare function setUrlTld(url: string, tld?: string): string;

package/build/esm/utils/url.js

@@ -1,21 +1,23 @@
 import { parse, format } from 'url';
+const EXAMPLE_URL = 'https://example.org';
 export const EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noopener noreferrer' };
 export function getLinkProps(url, hostname, target) {
     let linkProps = { target };
-    if (target === '_blank' || isLinkExternal(url, hostname)) {
+    if (isLinkExternal(url, hostname)) {
         linkProps = Object.assign(Object.assign({}, linkProps), EXTERNAL_LINK_PROPS);
     }
     return linkProps;
 }
+export function isAbsoluteUrl(url) {
+    // Using example URL as base for relative links
+    const urlObj = new URL(url, EXAMPLE_URL);
+    return (
+    // Compare url origin with example and check that original url was not example one
+    urlObj.origin !== EXAMPLE_URL || (typeof url === 'string' && url.startsWith(EXAMPLE_URL)));
+}
 export function isLinkExternal(url, routerHostname) {
-    if (!routerHostname) {
-        return true;
-    }
-    const { hostname } = parse(url);
-    if (!hostname) {
-        return false;
-    }
-    return getNonLocaleHostName(hostname) !== getNonLocaleHostName(routerHostname);
+    return (isAbsoluteUrl(url) &&
+        getNonLocaleHostName(new URL(url).hostname) !== getNonLocaleHostName(routerHostname !== null && routerHostname !== void 0 ? routerHostname : ''));
 }
 export function getNonLocaleHostName(hostname) {
     return hostname.replace(/\.(ru|com)$/, '');

package/build/esm/utils/url.test.d.ts

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

package/build/esm/utils/url.test.js

@@ -0,0 +1,74 @@
+import { getLinkProps, isAbsoluteUrl, isLinkExternal } from './url';
+describe('URL utils check', () => {
+    test.each([
+        ['https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash', true],
+        ['http://example.net/path', true],
+        ['/p/a/t/h?query=string&query2=1#hash', false],
+        ['/path', false],
+        ['path', false],
+    ])("isAbsoluteUrl('%s') should return '%s'", (url, result) => {
+        expect(isAbsoluteUrl(url)).toEqual(result);
+    });
+    test.each([
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'example.net',
+            true,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            'sub.example.com',
+            false,
+        ],
+        [
+            'https://user:pass@sub.example.com:8080/p/a/t/h?query=string&query2=1#hash',
+            undefined,
+            true,
+        ],
+        ['http://example.net/path', 'example.net', false],
+        ['http://example.net/path', 'sub.example.com', true],
+        ['http://example.net/path', undefined, true],
+        ['/p/a/t/h?query=string&query2=1#hash', 'example.net', false],
+        ['/p/a/t/h?query=string&query2=1#hash', undefined, false],
+        ['/path', 'example.net', false],
+        ['/path', undefined, false],
+        ['path', 'example.net', false],
+        ['path', undefined, false],
+    ])("isLinkExternal('%s', '%s') should return '%s'", (url, hostname, result) => {
+        expect(isLinkExternal(url, hostname)).toEqual(result);
+    });
+    test.each([
+        ['http://example.net/path', 'example.net', '_blank', { target: '_blank' }],
+        ['http://example.net/path', 'example.net', undefined, {}],
+        [
+            'http://example.net/path',
+            'example.com',
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            'example.com',
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            '_blank',
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        [
+            'http://example.net/path',
+            undefined,
+            undefined,
+            { target: '_blank', rel: 'noopener noreferrer' },
+        ],
+        ['/path', 'example.net', '_blank', { target: '_blank' }],
+        ['/path', 'example.net', undefined, {}],
+        ['/path', undefined, '_blank', { target: '_blank' }],
+        ['/path', undefined, undefined, {}],
+    ])("getLinkProps('%s', '%s', '%s') should return '%s'", (url, hostname, target, result) => {
+        expect(getLinkProps(url, hostname, target)).toEqual(result);
+    });
+});

package/package.json

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

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

@@ -106,6 +106,7 @@ export interface BackgroundCardProps extends CardBaseProps, Omit<ContentBlockPro
 export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
+    target?: string;
 }
 export interface BannerCardProps {
     title: string;

package/server/utils/url.d.ts

@@ -6,6 +6,7 @@ export declare const EXTERNAL_LINK_PROPS: {
 export declare function getLinkProps(url: string, hostname?: string, target?: string): {
     target: string | undefined;
 };
+export declare function isAbsoluteUrl(url: string | URL): boolean;
 export declare function isLinkExternal(url: string, routerHostname?: string): boolean;
 export declare function getNonLocaleHostName(hostname: string): string;
 export declare function setUrlTld(url: string, tld?: string): string;

package/server/utils/url.js

@@ -1,25 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
+exports.getAbsolutePath = exports.getPageSearchParams = exports.setUrlTld = exports.getNonLocaleHostName = exports.isLinkExternal = exports.isAbsoluteUrl = exports.getLinkProps = exports.EXTERNAL_LINK_PROPS = void 0;
 const url_1 = require("url");
+const EXAMPLE_URL = 'https://example.org';
 exports.EXTERNAL_LINK_PROPS = { target: '_blank', rel: 'noopener noreferrer' };
 function getLinkProps(url, hostname, target) {
     let linkProps = { target };
-    if (target === '_blank' || isLinkExternal(url, hostname)) {
+    if (isLinkExternal(url, hostname)) {
         linkProps = Object.assign(Object.assign({}, linkProps), exports.EXTERNAL_LINK_PROPS);
     }
     return linkProps;
 }
 exports.getLinkProps = getLinkProps;
+function isAbsoluteUrl(url) {
+    // Using example URL as base for relative links
+    const urlObj = new URL(url, EXAMPLE_URL);
+    return (
+    // Compare url origin with example and check that original url was not example one
+    urlObj.origin !== EXAMPLE_URL || (typeof url === 'string' && url.startsWith(EXAMPLE_URL)));
+}
+exports.isAbsoluteUrl = isAbsoluteUrl;
 function isLinkExternal(url, routerHostname) {
-    if (!routerHostname) {
-        return true;
-    }
-    const { hostname } = (0, url_1.parse)(url);
-    if (!hostname) {
-        return false;
-    }
-    return getNonLocaleHostName(hostname) !== getNonLocaleHostName(routerHostname);
+    return (isAbsoluteUrl(url) &&
+        getNonLocaleHostName(new URL(url).hostname) !== getNonLocaleHostName(routerHostname !== null && routerHostname !== void 0 ? routerHostname : ''));
 }
 exports.isLinkExternal = isLinkExternal;
 function getNonLocaleHostName(hostname) {