@gravity-ui/page-constructor 4.4.1 → 4.5.1

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

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

package/build/cjs/components/CardBase/CardBase.css

@@ -22,9 +22,6 @@ unpredictable css rules order in build */
 .pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-card-base-block_border_line, .pc-card-base-block_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
-  cursor: default;
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
+  transform: translateY(-8px);
 }
 a.pc-card-base-block_border_shadow {
   transition: transform 0.3s ease-out;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -37,6 +37,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const [started, setStarted] = (0, react_1.useState)(autoPlay);
     const [paused, setPaused] = (0, react_1.useState)(false);
     const [ended, setEnded] = (0, react_1.useState)(false);
+    const [isMounted, setIsMounted] = react_1.default.useState(false);
+    (0, hooks_1.useMount)(() => setIsMounted(true));
     const videoSrc = (0, react_1.useMemo)(() => (0, utils_2.checkYoutubeVideos)(src), [src]);
     const eventsArray = (0, react_1.useMemo)(() => {
         if (analyticsEvents) {
@@ -195,9 +197,9 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+    return (react_1.default.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
-        renderCustomBarControls(muted, playedPercent)));
+        renderCustomBarControls(muted, playedPercent))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

@@ -29,3 +29,10 @@ export declare const subBlockMap: {
     content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
+export declare const navItemMap: {
+    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    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;
+};

package/build/cjs/constructor-items.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.subBlockMap = exports.blockMap = void 0;
+exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
+const tslib_1 = require("tslib");
 const blocks_1 = require("./blocks");
 const models_1 = require("./models");
+const NavigationItem_1 = require("./navigation/components/NavigationItem");
+const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
 const sub_blocks_1 = require("./sub-blocks");
 exports.blockMap = {
     [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
@@ -35,3 +38,10 @@ exports.subBlockMap = {
     [models_1.SubBlockType.Content]: sub_blocks_1.Content,
     [models_1.SubBlockType.Quote]: sub_blocks_1.Quote,
 };
+exports.navItemMap = {
+    [models_1.NavigationItemType.Button]: NavigationItem_1.NavigationButton,
+    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
+    [models_1.NavigationItemType.Dropdown]: NavigationItem_1.NavigationDropdown,
+    [models_1.NavigationItemType.Link]: NavigationItem_1.NavigationLink,
+    [models_1.NavigationItemType.GithubButton]: NavigationItem_1.GithubButton,
+};

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import { blockMap, subBlockMap } from '../../constructor-items';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from '../../models';
 export type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
+export type NavItemMap = typeof navItemMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;
     shouldRenderBlock?: ShouldRenderBlock;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -24,10 +24,15 @@ const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
-            blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomBlockTypes)(custom)],
-            subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomSubBlockTypes)(custom)],
-            headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)],
-            itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(custom)),
+            blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
+            subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomTypes)(['subBlocks'], custom)],
+            headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomTypes)(['headers'], custom)],
+            navigationBlockTypes: [
+                ...models_1.NavigationItemTypes,
+                ...(0, utils_1.getCustomTypes)(['navigation'], custom),
+            ],
+            itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(['blocks', 'headers', 'subBlocks'], custom)),
+            navItemMap: Object.assign(Object.assign({}, constructor_items_1.navItemMap), (0, utils_1.getCustomItems)(['navigation'], custom)),
             loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
             shouldRenderBlock,
             customization: {

package/build/cjs/context/innerContext/InnerContext.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
+import { ItemMap, NavItemMap } from '../../containers/PageConstructor/PageConstructor';
 import { CustomConfig, LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
     subBlockTypes: string[];
     headerBlockTypes: string[];
+    navigationBlockTypes: string[];
     itemMap: ItemMap;
+    navItemMap: NavItemMap;
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;

package/build/cjs/context/innerContext/InnerContext.js

@@ -7,5 +7,7 @@ exports.InnerContext = react_1.default.createContext({
     blockTypes: [],
     subBlockTypes: [],
     headerBlockTypes: [],
+    navigationBlockTypes: [],
     itemMap: {},
+    navItemMap: {},
 });

package/build/cjs/editor/store/index.js

@@ -19,7 +19,7 @@ function useEditorState({ content: intialContent, custom }) {
         theme: constants_1.DEFAULT_THEME,
     });
     return (0, react_1.useMemo)(() => {
-        const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
+        const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomTypes)(['headers'], custom)];
         const contentHasHeader = Boolean((0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes));
         const checkIsHeader = (type) => headerBlockTypes.includes(type);
         const onAdd = (block) => {

package/build/cjs/editor/utils/index.d.ts

@@ -8,6 +8,7 @@ export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?:
     blocks?: import("../../models").CustomItems | undefined;
     subBlocks?: import("../../models").CustomItems | undefined;
     headers?: import("../../models").CustomItems | undefined;
+    navigation?: import("../../models").CustomItems | undefined;
     loadable?: import("../../models").LoadableConfig | undefined;
 };
 export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;

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

@@ -132,7 +132,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
     text: string;
     url: string;
     primary?: boolean;

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

@@ -39,6 +39,7 @@ export interface CustomConfig {
     blocks?: CustomItems;
     subBlocks?: CustomItems;
     headers?: CustomItems;
+    navigation?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
         block?: ((props: BlockDecorationProps) => React.ReactElement)[];

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

@@ -7,6 +7,7 @@ export declare enum NavigationItemType {
     Social = "social",
     GithubButton = "github-button"
 }
+export declare const NavigationItemTypes: NavigationItemType[];
 export interface NavigationItemBase {
     text: string;
     icon?: ImageProps;

package/build/cjs/models/navigation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
+exports.NavigationGithubButtonIcon = exports.NavigationItemTypes = exports.NavigationItemType = void 0;
 var NavigationItemType;
 (function (NavigationItemType) {
     NavigationItemType["Link"] = "link";
@@ -9,6 +9,7 @@ var NavigationItemType;
     NavigationItemType["Social"] = "social";
     NavigationItemType["GithubButton"] = "github-button";
 })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
+exports.NavigationItemTypes = Object.values(NavigationItemType);
 var NavigationGithubButtonIcon;
 (function (NavigationGithubButtonIcon) {
     NavigationGithubButtonIcon["heart"] = "octicon-heart";

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

@@ -10,6 +10,7 @@ const b = (0, utils_1.block)('mobile-menu-button');
 const ICON_SIZE = 36;
 const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (react_1.default.createElement(components_1.Control, { className: b(), onClick: (e) => {
         e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
         onSidebarOpenedChange(!isSidebarOpened);
     }, size: "l", icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: ICON_SIZE }));
 exports.MobileMenuButton = MobileMenuButton;

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

@@ -4,28 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = require("lodash");
 const blockIdContext_1 = require("../../../context/blockIdContext");
+const innerContext_1 = require("../../../context/innerContext");
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
-const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
-const GithubButton_1 = require("./components/GithubButton/GithubButton");
-const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
-const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
-const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
 const b = (0, utils_1.block)('navigation-item');
 const ANALYTICS_ID = 'navigation';
-//todo: add types support form component in map
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NavigationItemsMap = {
-    [models_1.NavigationItemType.Button]: NavigationButton_1.NavigationButton,
-    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
-    [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
-    [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
-};
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = tslib_1.__rest(_a, ["data", "className", "menuLayout"]);
     const { type = models_1.NavigationItemType.Link } = data;
-    const Component = NavigationItemsMap[type];
+    const { navItemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const Component = navItemMap[type];
     const componentProps = (0, react_1.useMemo)(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);
         if (type !== models_1.NavigationItemType.Dropdown) {

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

@@ -0,0 +1,6 @@
+export { GithubButton } from './components/GithubButton/GithubButton';
+export { NavigationButton } from './components/NavigationButton/NavigationButton';
+export { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
+export { NavigationLink } from './components/NavigationLink/NavigationLink';
+import NavigationItem from './NavigationItem';
+export default NavigationItem;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationLink = exports.NavigationDropdown = exports.NavigationButton = exports.GithubButton = void 0;
+const tslib_1 = require("tslib");
+var GithubButton_1 = require("./components/GithubButton/GithubButton");
+Object.defineProperty(exports, "GithubButton", { enumerable: true, get: function () { return GithubButton_1.GithubButton; } });
+var NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
+Object.defineProperty(exports, "NavigationButton", { enumerable: true, get: function () { return NavigationButton_1.NavigationButton; } });
+var NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
+Object.defineProperty(exports, "NavigationDropdown", { enumerable: true, get: function () { return NavigationDropdown_1.NavigationDropdown; } });
+var NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
+Object.defineProperty(exports, "NavigationLink", { enumerable: true, get: function () { return NavigationLink_1.NavigationLink; } });
+const NavigationItem_1 = tslib_1.__importDefault(require("./NavigationItem"));
+exports.default = NavigationItem_1.default;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
 const NavigationListItem = (_a) => {
     var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;

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

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const models_1 = require("../../models");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
 const b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = [0, 0];
 const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.Popup

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

@@ -11,9 +11,8 @@ const BackgroundCard = (props) => {
     const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
-    const link = hasBackgroundColor || border === 'line' ? undefined : url;
     const borderType = hasBackgroundColor ? 'none' : border;
-    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: link, border: borderType },
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType },
         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/Quote/Quote.css

@@ -31,9 +31,6 @@ unpredictable css rules order in build */
 .pc-quote_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-quote_border_line, .pc-quote_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-quote {
     box-shadow: none;

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

@@ -2,12 +2,8 @@ import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
-export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
-export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
-    [x: string]: any;
-};
-export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
-export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
+export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
+export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -62,23 +62,18 @@ function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }
 exports.getBlockKey = getBlockKey;
-const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
-    ...Object.keys(blocks),
-    ...Object.keys(headers),
-];
-exports.getCustomBlockTypes = getCustomBlockTypes;
-const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
-exports.getCustomItems = getCustomItems;
-const getCustomSubBlockTypes = (customBlocks = {}) => {
-    const { subBlocks = {} } = customBlocks;
-    return Object.keys(subBlocks);
+const getCustomItems = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return Object.assign(result, customBlocks[type] || {});
+    }, {});
 };
-exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
-const getCustomHeaderTypes = (customBlocks = {}) => {
-    const { headers = {} } = customBlocks;
-    return Object.keys(headers);
+exports.getCustomItems = getCustomItems;
+const getCustomTypes = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return result.concat(Object.keys(customBlocks[type] || {}));
+    }, []);
 };
-exports.getCustomHeaderTypes = getCustomHeaderTypes;
+exports.getCustomTypes = getCustomTypes;
 const getShareUrlWithParams = (url, params = {}) => {
     const result = new URL(url);
     Object.entries(params).forEach(([name, value]) => {

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

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

package/build/esm/components/CardBase/CardBase.css

@@ -22,9 +22,6 @@ unpredictable css rules order in build */
 .pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
-.pc-card-base-block_border_line, .pc-card-base-block_border_none {
-  cursor: default;
-}
 @media (min-width: 577px) {
   .slick-slide:not(.slick-active) .pc-card-base-block {
     box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
 a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
-  cursor: default;
+  transition: transform 0.3s ease-out;
+}
+a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
+  transform: translateY(-8px);
 }
 a.pc-card-base-block_border_shadow {
   transition: transform 0.3s ease-out;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -1,11 +1,11 @@
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import ReactPlayer from 'react-player';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useMount } from '../../hooks';
 import { PlayVideo } from '../../icons';
 import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
@@ -34,6 +34,8 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [started, setStarted] = useState(autoPlay);
     const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    useMount(() => setIsMounted(true));
     const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
     const eventsArray = useMemo(() => {
         if (analyticsEvents) {
@@ -192,9 +194,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
                 },
             }, elapsedTimePercent: elapsedTimePercent }));
     }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick }, isMounted ? (React.createElement(Fragment, null,
         React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
-        renderCustomBarControls(muted, playedPercent)));
+        renderCustomBarControls(muted, playedPercent))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

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

@@ -29,3 +29,10 @@ export declare const subBlockMap: {
     content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
+export declare const navItemMap: {
+    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    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;
+};

package/build/esm/constructor-items.js

@@ -1,5 +1,7 @@
 import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
-import { BlockType, SubBlockType } from './models';
+import { BlockType, NavigationItemType, SubBlockType } from './models';
+import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
+import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
 import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceDetailed, Quote, } from './sub-blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
@@ -32,3 +34,10 @@ export const subBlockMap = {
     [SubBlockType.Content]: Content,
     [SubBlockType.Quote]: Quote,
 };
+export const navItemMap = {
+    [NavigationItemType.Button]: NavigationButton,
+    [NavigationItemType.Social]: SocialIcon,
+    [NavigationItemType.Dropdown]: NavigationDropdown,
+    [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
+};

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import { blockMap, subBlockMap } from '../../constructor-items';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from '../../models';
 import './PageConstructor.css';
 export type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
+export type NavItemMap = typeof navItemMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;
     shouldRenderBlock?: ShouldRenderBlock;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -4,14 +4,14 @@ import '@doc-tools/transform/dist/js/yfm';
 import blockOrigin from 'bem-cn-lite';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import { UIKIT_ROOT_CLASS } from '../../components/constants';
-import { blockMap, subBlockMap } from '../../constructor-items';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
-import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
+import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getCustomItems, getCustomSubBlockTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
+import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
@@ -22,10 +22,15 @@ export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
         context: {
-            blockTypes: [...BlockTypes, ...getCustomBlockTypes(custom)],
-            subBlockTypes: [...SubBlockTypes, ...getCustomSubBlockTypes(custom)],
-            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)],
-            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(custom)),
+            blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
+            subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],
+            navigationBlockTypes: [
+                ...NavigationItemTypes,
+                ...getCustomTypes(['navigation'], custom),
+            ],
+            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(['blocks', 'headers', 'subBlocks'], custom)),
+            navItemMap: Object.assign(Object.assign({}, navItemMap), getCustomItems(['navigation'], custom)),
             loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
             shouldRenderBlock,
             customization: {

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
+import { ItemMap, NavItemMap } from '../../containers/PageConstructor/PageConstructor';
 import { CustomConfig, LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
     subBlockTypes: string[];
     headerBlockTypes: string[];
+    navigationBlockTypes: string[];
     itemMap: ItemMap;
+    navItemMap: NavItemMap;
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;

package/build/esm/context/innerContext/InnerContext.js

@@ -3,5 +3,7 @@ export const InnerContext = React.createContext({
     blockTypes: [],
     subBlockTypes: [],
     headerBlockTypes: [],
+    navigationBlockTypes: [],
     itemMap: {},
+    navItemMap: {},
 });

package/build/esm/editor/store/index.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { useMemo, useReducer } from 'react';
 import { DEFAULT_THEME } from '../../components/constants';
 import { HeaderBlockTypes } from '../../models';
-import { getCustomHeaderTypes, getHeaderBlock } from '../../utils';
+import { getCustomTypes, getHeaderBlock } from '../../utils';
 import { EditBlockControls } from '../components/EditBlock/EditBlock';
 import { ViewModeItem } from '../types';
 import { ADD_BLOCK, COPY_BLOCK, DELETE_BLOCK, ORDER_BLOCK, SELECT_BLOCK, UPDATE_CONTENT, UPDATE_THEME, UPDATE_VIEW_MODE, reducer, } from './reducer';
@@ -16,7 +16,7 @@ export function useEditorState({ content: intialContent, custom }) {
         theme: DEFAULT_THEME,
     });
     return useMemo(() => {
-        const headerBlockTypes = [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)];
+        const headerBlockTypes = [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)];
         const contentHasHeader = Boolean(getHeaderBlock(content.blocks, headerBlockTypes));
         const checkIsHeader = (type) => headerBlockTypes.includes(type);
         const onAdd = (block) => {

package/build/esm/editor/utils/index.d.ts

@@ -8,6 +8,7 @@ export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?:
     blocks?: import("../../models").CustomItems | undefined;
     subBlocks?: import("../../models").CustomItems | undefined;
     headers?: import("../../models").CustomItems | undefined;
+    navigation?: import("../../models").CustomItems | undefined;
     loadable?: import("../../models").LoadableConfig | undefined;
 };
 export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;

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

@@ -132,7 +132,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
     text: string;
     url: string;
     primary?: boolean;