@gravity-ui/page-constructor 1.7.0-alpha.9 → 1.7.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.7.1](https://github.com/gravity-ui/page-constructor/compare/v1.7.0...v1.7.1) (2022-11-29)
+
+
+### Bug Fixes
+
+* **ExtendedFeatures:** add props ([6254d62](https://github.com/gravity-ui/page-constructor/commit/6254d62b9ceded154d0fdcded9a554fd33772d13))
+* storybook content ([b98eccc](https://github.com/gravity-ui/page-constructor/commit/b98ecccc96cfba2376552e4c9314a559913455d9))
+
 ## [1.7.0](https://github.com/gravity-ui/page-constructor/compare/v1.6.1...v1.7.0) (2022-11-10)
 
 

package/README.md

@@ -32,81 +32,59 @@ const Page: WithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-  content: PageContent; //Blocks data in JSON format.
-  shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
-  custom?: Custom; //Custom blocks (see `Customization`).
-  renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
-  navigation?: NavigationData; // Navigation data for using navigation component in JSON format
+    content: PageContent; //Blocks data in JSON format.
+    shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
+    custom?: Custom; //Custom blocks (see `Customization`).
+    renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
 }
 
 interface PageConstructorProviderProps {
-  isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
-  locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
-  location?: Location; //API of the browser or router history, the page URL.
-  metrika?: Metrika; //Functions for sending analytics
-  ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
-  theme?: 'light' | 'dark'; //Theme to render the page with.
+    isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
+    locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
+    location?: Location; //API of the browser or router history, the page URL.
+    metrika?: Metrika; //Functions for sending analytics
+    ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
+    theme?: 'light' | 'dark'; //Theme to render the page with.
 }
 
 export interface PageContent extends Animatable {
-  blocks: Block[];
-  menu?: Menu;
-  background?: MediaProps;
-  footnotes?: string[];
+    blocks: Block[];
+    menu?: Menu;
+    background?: MediaProps;
+    footnotes?: string[];
 }
 
 interface Custom {
-  blocks?: CustomItems;
-  subBlocks?: CustomItems;
-  headers?: CustomItems;
-  loadable?: LoadableConfig;
+    blocks?: CustomItems;
+    subBlocks?:CustomItems;
+    headers?: CustomItems;
+    loadable?: LoadableConfig;
 }
 
 type ShouldRenderBlock = (block: Block, blockKey: string) => Boolean;
 
-interface Location {
-  history?: History;
-  search?: string;
-  hash?: string;
-  pathname?: string;
-  hostname?: string;
+interface Location = {
+    history?: History;
+    search?: string;
+    hash?: string;
+    pathname?: string;
+    hostname?: string;
+};
+
+interface Locale = {
+    lang?: Lang;
+    tld?: string;
+};
+
+interface SSR = {
+    isServer?: boolean;
 }
 
-interface Locale {
-  lang?: Lang;
-  tld?: string;
+interface Metrika = {
+    metrika?: any;
+    pixel?: any;
 }
 
-interface SSR {
-  isServer?: boolean;
-}
-
-interface Metrika {
-  metrika?: any;
-  pixel?: any;
-}
-
-interface NavigationData {
-  logo: NavigationLogo;
-  header: HeaderData;
-}
-
-interface NavigationLogo {
-  icon: ImageProps;
-  text?: string;
-  url?: string;
-}
-
-interface HeaderData {
-  leftItems: NavigationItem[];
-  rightItems?: NavigationItem[];
-}
-
-interface NavigationLogo {
-  icon: ImageProps;
-  text?: string;
-  url?: string;
-}
 ```
 
 ### Custom blocks

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -21,7 +21,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
         react_1.default.createElement("div", { className: b('items') },
-            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon }) => {
+            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon, buttons, additionalInfo, }) => {
                 const itemLinks = links || [];
                 const iconThemed = icon && (0, utils_1.getThemedValue)(icon, theme);
                 const iconData = iconThemed && (0, utils_2.getMediaImage)(iconThemed);
@@ -34,7 +34,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
                         itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
                             react_1.default.createElement(components_1.HTML, null, itemTitle),
                             label && (react_1.default.createElement("div", { className: b('item-label') }, label)))),
-                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 } }))));
+                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };
 exports.ExtendedFeaturesBlock = ExtendedFeaturesBlock;

package/build/cjs/blocks/Tabs/Tabs.css

@@ -1,68 +1,101 @@
-.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-TabsBlock__block-title {
-  margin-bottom: 12px;
+.pc-tabs-block__block-title {
+  margin-bottom: 24px;
 }
-.pc-TabsBlock__tabs.pc-TabsBlock__tabs {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  margin-bottom: 32px;
+.pc-tabs-block__block-title_centered {
+  margin: 0 auto 12px;
+  text-align: center;
 }
-
-.pc-TabsBlock__image {
+.pc-tabs-block__tabs_centered {
+  display: flex;
+  justify-content: center;
+}
+.pc-tabs-block__row_reverse {
+  flex-direction: row-reverse;
+}
+.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
+  margin: 24px 32px 0 0;
+}
+.pc-tabs-block__image {
   width: 100%;
   height: auto;
   object-fit: cover;
   display: block;
 }
-.pc-TabsBlock__image, .pc-TabsBlock__media {
+.pc-tabs-block__image, .pc-tabs-block__media {
   box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
 }
-.pc-TabsBlock__caption {
+.pc-tabs-block__caption {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
   margin: 12px 0 0;
   color: var(--yc-color-text-secondary);
 }
-.pc-TabsBlock__content {
+.pc-tabs-block__content {
   display: flex;
   flex-direction: column;
 }
-.pc-TabsBlock__content-wrapper_margin {
+.pc-tabs-block__content_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block__col_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block__content-wrapper_margin {
   margin: 24px 0 0 32px;
 }
-.pc-TabsBlock__content-title {
+.pc-tabs-block__content-title {
   margin: 0 auto 12px;
 }
-.pc-TabsBlock__content-title.pc-TabsBlock__content-title > * {
+.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
 
-.pc-TabsBlock__tabs, .pc-TabsBlock__link {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-}
 @media (max-width: 769px) {
-  .pc-TabsBlock__content-wrapper_margin {
+  .pc-tabs-block__tabs {
+    display: flex;
+    overflow: auto;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 40px;
+  }
+  .pc-tabs-block__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
+  .pc-tabs-block__row_reverse {
+    flex-direction: column-reverse;
+  }
+  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
+}
+@media (max-width: 577px) {
+  .pc-tabs-block__tabs {
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 16px;
+  }
 }
 @media (min-width: 769px) {
-  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__media {
+  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__media, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__media {
+  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__media {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -70,12 +103,12 @@ unpredictable css rules order in build */
   }
 }
 @media (min-width: 769px) {
-  .pc-TabsBlock.pc-AnimateBlock .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock .pc-TabsBlock__image {
+  .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__image {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-TabsBlock.pc-AnimateBlock.animate .pc-TabsBlock__image, .pc-AnimateBlock .pc-TabsBlock.animate .pc-TabsBlock__image {
+  .pc-tabs-block.pc-AnimateBlock.animate .pc-tabs-block__image, .pc-AnimateBlock .pc-tabs-block.animate .pc-tabs-block__image {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

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

@@ -1,3 +1,3 @@
 import { TabsBlockProps } from '../../models';
-export declare const TabsBlock: ({ items, title, description, animated }: TabsBlockProps) => JSX.Element;
+export declare const TabsBlock: ({ items, title, description, animated, tabsColSizes, centered, direction, }: TabsBlockProps) => JSX.Element;
 export default TabsBlock;

package/build/cjs/blocks/Tabs/Tabs.js

@@ -3,53 +3,55 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
-const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
 const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
 const BlockHeader_1 = (0, tslib_1.__importDefault)(require("../../components/BlockHeader/BlockHeader"));
 const FullscreenImage_1 = (0, tslib_1.__importDefault)(require("../../components/FullscreenImage/FullscreenImage"));
 const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
-const Links_1 = (0, tslib_1.__importDefault)(require("../../components/Link/Links"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_2 = require("../../components/Media/Image/utils");
-const b = (0, utils_1.block)('TabsBlock');
-const TabsBlock = ({ items, title, description, animated }) => {
+const ButtonTabs_1 = (0, tslib_1.__importDefault)(require("../../components/ButtonTabs/ButtonTabs"));
+const sub_blocks_1 = require("../../sub-blocks");
+const b = (0, utils_1.block)('tabs-block');
+const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const tabs = items.map(({ tabName }) => ({ title: tabName, id: tabName }));
     const activeTabData = items.find(({ tabName }) => tabName === activeTab);
+    const isReverse = direction === 'content-media';
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_1.getThemedValue)(activeTabData.image, theme);
         imageProps = themedImage && (0, utils_2.getMediaImage)(themedImage);
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
+    const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
+    const textContent = activeTabData && showText && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
+        react_1.default.createElement("div", { className: b('content-wrapper', {
+                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
+            }) },
+            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: "s", links: [
+                    ...(activeTabData.link ? [activeTabData.link] : []),
+                    ...(activeTabData.links || []),
+                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
+    const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
+            all: grid_1.GridColumnOrderClasses.Last,
+            md: grid_1.GridColumnOrderClasses.First,
+        }, className: b('col', { centered: centered }) },
+        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
+        imageProps && (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
+            (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption))))));
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title') }),
-        react_1.default.createElement(uikit_1.Tabs, { className: b('tabs'), items: tabs, activeTab: activeTab, onSelectTab: setActiveTab, size: "l" }),
-        activeTabData && (react_1.default.createElement(grid_1.Row, null,
-            showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
-                    all: grid_1.GridColumnOrderClasses.Last,
-                    md: grid_1.GridColumnOrderClasses.First,
-                } },
-                (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_1.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play }))),
-                imageProps && (react_1.default.createElement(react_1.Fragment, null,
-                    react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })),
-                    activeTabData && (react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)))))),
-            react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content') },
-                react_1.default.createElement("div", { className: b('content-wrapper', {
-                        margin: Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps),
-                    }) },
-                    react_1.default.createElement("h4", { className: b('content-title') },
-                        react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.title, modifiers: { constructor: true } })),
-                    react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.text, modifiers: { constructor: true } }),
-                    react_1.default.createElement(Links_1.default, { links: [
-                            ...(activeTabData.link ? [activeTabData.link] : []),
-                            ...(activeTabData.links || []),
-                        ], className: b('link') })))))));
+        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('block-title', { centered: centered }), colSizes: centered ? { all: 12 } : { all: 12, sm: 8 } }),
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
+                react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: setActiveTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),
+        activeTabData && (react_1.default.createElement(grid_1.Row, { className: b('row', { reverse: isReverse }) },
+            mediaContent,
+            textContent))));
 };
 exports.TabsBlock = TabsBlock;
 exports.default = exports.TabsBlock;

package/build/cjs/components/ButtonTabs/ButtonTabs.css

@@ -0,0 +1,12 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-button-tabs {
+  margin-bottom: 20px;
+}
+.pc-button-tabs__item {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+.pc-button-tabs__item_active {
+  pointer-events: none;
+}

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

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../../models';
+export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
+    id: string;
+    title: string;
+}
+export interface ButtonTabsProps {
+    className?: string;
+    items: ButtonTabsItemProps[];
+    activeTab?: string;
+    onSelectTab?: (tabId: string) => void;
+}
+declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
+export default ButtonTabs;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../utils");
+const index_1 = require("../index");
+const b = (0, utils_1.block)('button-tabs');
+const ButtonTabs = (props) => {
+    const { className, items, activeTab, onSelectTab } = props;
+    const activeTabId = (0, react_1.useMemo)(() => {
+        if (activeTab) {
+            return activeTab;
+        }
+        return items[0].id;
+    }, [activeTab, items]);
+    const handleClick = (0, react_1.useCallback)((tabId) => {
+        if (onSelectTab) {
+            onSelectTab(tabId);
+        }
+    }, [onSelectTab]);
+    return (react_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
+        const isActive = item.id === activeTabId;
+        return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
+    })));
+};
+exports.default = ButtonTabs;

package/build/cjs/components/Image/Image.css

@@ -0,0 +1,4 @@
+.pc-Image {
+  height: 100%;
+  width: 100%;
+}

package/build/cjs/components/Image/Image.js

@@ -4,6 +4,8 @@ const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('Image');
 const checkWebP = (src) => {
     return src.endsWith('.webp') ? src : src + '.webp';
 };
@@ -20,7 +22,7 @@ const Image = (props) => {
         disableCompress ||
         imageSrc.endsWith('.svg') ||
         imgLoadingError;
-    return (react_1.default.createElement("picture", null,
+    return (react_1.default.createElement("picture", { className: b() },
         mobile && (react_1.default.createElement(react_1.Fragment, null,
             !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` })),
             react_1.default.createElement("source", { srcSet: mobile, media: `(max-width: ${constants_1.BREAKPOINTS.sm}px)` }))),

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -9,12 +9,10 @@
 .pc-overflow-scroller__scroller {
   position: absolute;
   z-index: 10;
-  top: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 32px;
-  height: calc(100% - 1px);
   cursor: pointer;
   color: var(--yc-color-text-secondary);
   background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;

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

@@ -1,7 +1,6 @@
 import { WithChildren } from '../../models';
 export interface RouterLinkProps {
     href: string;
-    [key: string]: unknown;
 }
 declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
 export default RouterLink;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -53,7 +53,7 @@ const VideoBlock = (props) => {
     }, [src, attributes]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
-            setHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
+            setHeight(ref.current ? Math.floor(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
         window.addEventListener('resize', updateSize);

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

@@ -33,6 +33,4 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
-export { default as Header } from './navigation/components/Header/Header';
-export * as Navigation from './navigation/components/index';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -1,77 +1,76 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigation = exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
-const tslib_1 = require("tslib");
+exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
-Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Anchor_1).default; } });
+Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
-Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(AnimateBlock_1).default; } });
+Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return __importDefault(AnimateBlock_1).default; } });
 var BackgroundImage_1 = require("./BackgroundImage/BackgroundImage");
-Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundImage_1).default; } });
+Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return __importDefault(BackgroundImage_1).default; } });
 var BackgroundMedia_1 = require("./BackgroundMedia/BackgroundMedia");
-Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundMedia_1).default; } });
+Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return __importDefault(BackgroundMedia_1).default; } });
 var BackLink_1 = require("./BackLink/BackLink");
-Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackLink_1).default; } });
+Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return __importDefault(BackLink_1).default; } });
 var BalancedMasonry_1 = require("./BalancedMasonry/BalancedMasonry");
-Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BalancedMasonry_1).default; } });
+Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return __importDefault(BalancedMasonry_1).default; } });
 var BlockBase_1 = require("./BlockBase/BlockBase");
-Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockBase_1).default; } });
+Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return __importDefault(BlockBase_1).default; } });
 var BlockHeader_1 = require("./BlockHeader/BlockHeader");
-Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockHeader_1).default; } });
+Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return __importDefault(BlockHeader_1).default; } });
 var Button_1 = require("./Button/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Button_1).default; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
-Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(CardBase_1).default; } });
+Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
-Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ErrorWrapper_1).default; } });
+Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return __importDefault(ErrorWrapper_1).default; } });
 var FileLink_1 = require("./FileLink/FileLink");
-Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FileLink_1).default; } });
+Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return __importDefault(FileLink_1).default; } });
 var Foldable_1 = require("./Foldable/Foldable");
-Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Foldable_1).default; } });
+Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return __importDefault(Foldable_1).default; } });
 var FullscreenImage_1 = require("./FullscreenImage/FullscreenImage");
-Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullscreenImage_1).default; } });
+Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return __importDefault(FullscreenImage_1).default; } });
 var FullWidthBackground_1 = require("./FullWidthBackground/FullWidthBackground");
-Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullWidthBackground_1).default; } });
+Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return __importDefault(FullWidthBackground_1).default; } });
 var HeaderBreadcrumbs_1 = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
-Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeaderBreadcrumbs_1).default; } });
+Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return __importDefault(HeaderBreadcrumbs_1).default; } });
 var HeightCalculator_1 = require("./HeightCalculator/HeightCalculator");
-Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeightCalculator_1).default; } });
+Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return __importDefault(HeightCalculator_1).default; } });
 var Image_1 = require("./Image/Image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Image_1).default; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
 var Link_1 = require("./Link/Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Link_1).default; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
 var Links_1 = require("./Link/Links");
-Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Links_1).default; } });
+Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
 var Media_1 = require("./Media/Media");
-Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Media_1).default; } });
+Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
 var OutsideClick_1 = require("./OutsideClick/OutsideClick");
-Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OutsideClick_1).default; } });
+Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return __importDefault(OutsideClick_1).default; } });
 var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
-Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ReactPlayer_1).default; } });
+Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
 var Table_1 = require("./Table/Table");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Table_1).default; } });
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 var Title_1 = require("./Title/Title");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Title_1).default; } });
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
 var ToggleArrow_1 = require("./ToggleArrow/ToggleArrow");
-Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ToggleArrow_1).default; } });
+Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return __importDefault(ToggleArrow_1).default; } });
 var UnpublishedLabel_1 = require("./UnpublishedLabel/UnpublishedLabel");
-Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(UnpublishedLabel_1).default; } });
+Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return __importDefault(UnpublishedLabel_1).default; } });
 var VideoBlock_1 = require("./VideoBlock/VideoBlock");
-Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(VideoBlock_1).default; } });
+Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return __importDefault(VideoBlock_1).default; } });
 var YFMWrapper_1 = require("./YFMWrapper/YFMWrapper");
-Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YFMWrapper_1).default; } });
+Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return __importDefault(YFMWrapper_1).default; } });
 var YandexForm_1 = require("./YandexForm/YandexForm");
-Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YandexForm_1).default; } });
+Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return __importDefault(YandexForm_1).default; } });
 var Control_1 = require("./Control/Control");
-Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Control_1).default; } });
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
 var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
-Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OverflowScroller_1).default; } });
+Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
 var Author_1 = require("./Author/Author");
-Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Author_1).default; } });
+Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
 var RouterLink_1 = require("./RouterLink/RouterLink");
-Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(RouterLink_1).default; } });
+Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
-Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HTML_1).default; } });
-var Header_1 = require("./navigation/components/Header/Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Header_1).default; } });
-exports.Navigation = (0, tslib_1.__importStar)(require("./navigation/components/index"));
+Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });