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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
+require("@doc-tools/transform/dist/js/yfm");
 const models_1 = require("../../models");
 const constructor_items_1 = require("../../constructor-items");
 const grid_1 = require("../../grid");
@@ -15,8 +16,7 @@ const ConstructorRow_1 = require("./components/ConstructorRow");
 const ConstructorFootnotes_1 = require("./components/ConstructorFootnotes");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
-const Header_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/components/Header/Header"));
-require("@doc-tools/transform/dist/js/yfm");
+const Layout_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/containers/Layout/Layout"));
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
     const { context, headerBlockTypes } = (0, react_1.useMemo)(() => {
@@ -31,7 +31,7 @@ const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigationData, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -41,14 +41,14 @@ const Constructor = (props) => {
         react_1.default.createElement("div", { className: b() },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
-                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (react_1.default.createElement(Header_1.default, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
-                renderMenu && renderMenu(),
-                header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
-                react_1.default.createElement(grid_1.Grid, null,
-                    restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
-                    hasFootnotes && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorFootnotes_1.ConstructorFootnotes, { items: footnotes }))))))));
+                react_1.default.createElement(Layout_1.default, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
+                    react_1.default.createElement(grid_1.Grid, null,
+                        restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
+                            react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                        hasFootnotes && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
+                            react_1.default.createElement(ConstructorFootnotes_1.ConstructorFootnotes, { items: footnotes })))))))));
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {

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

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/build/cjs/models/index.js

@@ -7,3 +7,4 @@ const tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./components"), exports);
 (0, tslib_1.__exportStar)(require("./guards"), exports);
 (0, tslib_1.__exportStar)(require("./react"), exports);
+(0, tslib_1.__exportStar)(require("./navigation"), exports);

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../components/Button/Button';
+import { ImageProps, ButtonProps } from './constructor-items';
 export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
@@ -7,7 +7,7 @@ export declare enum NavigationItemType {
 }
 export interface NavigationItemBase {
     text: string;
-    icon?: string;
+    icon?: ImageProps;
     url?: string;
 }
 export interface NavigationLinkItem extends NavigationItemBase {
@@ -27,13 +27,16 @@ export interface NavigationDropdownItem extends NavigationItemBase {
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
-    icon: string;
+    icon: ImageProps;
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: string;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export interface NavigationLogo {
+    icon: ImageProps;
     text?: string;
+    url?: string;
 }
 export interface HeaderData {
     leftItems: NavigationItem[];

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -9,10 +9,12 @@
 .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/esm/components/RouterLink/RouterLink.d.ts

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

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

@@ -33,4 +33,6 @@ 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/esm/components/index.js

@@ -33,3 +33,5 @@ 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';

package/build/esm/components/navigation/components/Header/Header.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.header {
+.pc-header {
   position: sticky;
   z-index: 98;
   top: 0;
@@ -9,39 +9,39 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-  box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
-.header__wrapper {
+.pc-header__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .header__mobile-menu-button {
+  .pc-header__mobile-menu-button {
     display: none;
   }
 }
-.header__navigation, .header__left, .header__right {
+.pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;
 }
-.header__navigation {
+.pc-header__navigation {
   position: relative;
+  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
-  margin-right: 20px;
 }
 @media (max-width: 768px) {
-  .header__navigation {
+  .pc-header__navigation {
     display: none;
   }
 }
-.header__right {
+.pc-header__right {
   flex: 0;
   justify-content: flex-end;
 }
-.header__navigation-container {
+.pc-header__navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
@@ -49,37 +49,37 @@ unpredictable css rules order in build */
   align-items: center;
   margin-right: 20px;
 }
-.header__buttons {
+.pc-header__buttons {
   display: flex;
 }
 @media (max-width: 768px) {
-  .header__buttons {
+  .pc-header__buttons {
     display: none;
   }
 }
-.header__buttons > *:not(:last-child) {
+.pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
-.header__button {
+.pc-header__button {
   margin-top: 0;
 }
-.header__logo {
+.pc-header__logo {
   margin: 0 32px 0 0;
   cursor: pointer;
 }
 @media (max-width: 768px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     justify-content: flex-end;
   }
-  .header__left {
+  .pc-header__left {
     flex: 1 0 0;
   }
 }
 @media (max-width: 576px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     margin-right: 12px;
   }
-  .header__logo {
+  .pc-header__logo {
     margin-right: 0;
   }
 }

package/build/esm/components/navigation/components/Header/Header.d.ts

@@ -1,29 +1,9 @@
 import React from 'react';
-import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+import { HeaderData, NavigationLogo } from '../../../../models';
 import './Header.css';
 export interface HeaderProps {
     logo: NavigationLogo;
     data: HeaderData;
 }
-interface HeaderState {
-    isSidebarOpened: boolean;
-    activeItemIndex: number;
-}
-declare class Header extends React.Component<HeaderProps, HeaderState> {
-    ref: React.RefObject<unknown>;
-    state: {
-        isSidebarOpened: boolean;
-        activeItemIndex: number;
-    };
-    render(): JSX.Element;
-    private renderLeft;
-    private renderLogo;
-    private renderRight;
-    private renderRightItems;
-    private renderMobileMenuButton;
-    private renderMobileNavigation;
-    private onActiveItemChange;
-    private onSidebarOpenedChange;
-    private hideSidebar;
-}
+export declare const Header: React.FC<HeaderProps>;
 export default Header;

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

@@ -1,79 +1,47 @@
-import React, { createRef } from 'react';
-import block from 'bem-cn-lite';
+import React, { useCallback, useState } from 'react';
+import { block } from '../../../../utils';
 import { Col, Grid, Row } from '../../../../grid';
 import OutsideClick from '../../../OutsideClick/OutsideClick';
 import Control from '../../../Control/Control';
-import Logo from '../Logo/Logo';
 import Navigation from '../Navigation/Navigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import NavigationItem from '../NavigationItem/NavigationItem';
+import Logo from '../Logo/Logo';
 import { NavigationClose, NavigationOpen } from '../../../../icons';
 import './Header.css';
 const b = block('header');
-class Header extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = createRef();
-        this.state = {
-            isSidebarOpened: false,
-            activeItemIndex: -1,
-        };
-        this.onActiveItemChange = (index) => {
-            this.setState({ activeItemIndex: index });
-        };
-        this.onSidebarOpenedChange = (isSidebarOpened) => {
-            this.setState({ isSidebarOpened });
-        };
-        this.hideSidebar = () => {
-            this.setState({ isSidebarOpened: false });
-        };
-    }
-    render() {
-        return (React.createElement(Grid, { className: b() },
-            React.createElement(Row, null,
-                React.createElement(Col, null,
-                    React.createElement("header", { className: b('wrapper') },
-                        this.renderLogo(),
-                        this.renderLeft(),
-                        this.renderRight(),
-                        this.renderMobileNavigation())))));
-    }
-    renderLeft() {
-        const { activeItemIndex } = this.state;
-        const { leftItems } = this.props.data;
-        return (leftItems && (React.createElement("div", { className: b('navigation-container') },
-            React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
-    }
-    renderLogo() {
-        const { logo } = this.props;
-        if (!logo) {
-            return null;
-        }
-        return (React.createElement("div", { className: b('left') },
-            React.createElement(Logo, Object.assign({}, logo, { className: b('logo') }))));
-    }
-    renderRight() {
-        return (React.createElement("div", { className: b('right') },
-            this.renderMobileMenuButton(),
-            this.renderRightItems()));
-    }
-    renderRightItems() {
-        const { rightItems } = this.props.data;
-        return (rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') }))))));
-    }
-    renderMobileMenuButton() {
-        const { isSidebarOpened } = this.state;
-        const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
-        return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-                e.stopPropagation();
-                this.onSidebarOpenedChange(!isSidebarOpened);
-            }, size: "l" }, iconProps)));
-    }
-    renderMobileNavigation() {
-        const { leftItems, rightItems } = this.props.data;
-        const { isSidebarOpened, activeItemIndex } = this.state;
-        return (React.createElement(OutsideClick, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
-            React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
-    }
-}
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
+    const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
+    return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
+            e.stopPropagation();
+            onSidebarOpenedChange(!isSidebarOpened);
+        }, size: "l" }, iconProps)));
+};
+export const Header = ({ data, logo }) => {
+    const { leftItems, rightItems } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
+    const [activeItemIndex, setActiveItemIndex] = useState(-1);
+    const onActiveItemChange = useCallback((index) => {
+        setActiveItemIndex(index);
+    }, []);
+    const onSidebarOpenedChange = useCallback((isOpen) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+    const hideSidebar = useCallback(() => {
+        setIsSidebarOpened(false);
+    }, []);
+    return (React.createElement(Grid, { className: b() },
+        React.createElement(Row, null,
+            React.createElement(Col, null,
+                React.createElement("header", { className: b('wrapper') },
+                    logo && (React.createElement("div", { className: b('left') },
+                        React.createElement(Logo, Object.assign({}, logo, { className: b('logo') })))),
+                    React.createElement("div", { className: b('navigation-container') },
+                        React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
+                    React.createElement("div", { className: b('right') },
+                        React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                        rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') })))))),
+                    React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
+};
 export default Header;

package/build/esm/components/navigation/components/Logo/Logo.css

@@ -1,18 +1,23 @@
+.pc-logo {
+  margin: 0;
+}
+
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.logo {
+.pc-logo {
   display: flex;
   align-items: center;
-  font-weight: 500;
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-weight: var(--yc-text-accent-font-weight);
+  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);
 }
-.logo__icon {
-  width: 178px;
-  height: 36px;
+.pc-logo__icon {
+  display: flex;
   margin-right: 8px;
   object-fit: contain;
 }
-.logo__text {
+.pc-logo__text {
   white-space: nowrap;
 }

package/build/esm/components/navigation/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationLogo } from '../../../../models/navigation';
+import { NavigationLogo } from '../../../../models';
 import './Logo.css';
 export interface LogoProps extends NavigationLogo {
     className?: string;

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

@@ -1,11 +1,15 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-import { Image } from '../../../index';
+import { block } from '../../../../utils';
 import RouterLink from '../../../RouterLink/RouterLink';
+import { getMediaImage } from '../../../Media/Image/utils';
+import { Image } from '../../../index';
 import './Logo.css';
 const b = block('logo');
-const Logo = ({ icon, text, className }) => (React.createElement(RouterLink, { href: "/", passHref: true },
-    React.createElement("div", { className: b(null, className) },
-        icon && React.createElement(Image, { className: b('icon'), src: icon }),
-        React.createElement("span", { className: b('text') }, text))));
+const Logo = ({ icon, text, className }) => {
+    const imageData = getMediaImage(icon);
+    return (React.createElement(RouterLink, { href: "/", passHref: true },
+        React.createElement("div", { className: b(null, className) },
+            imageData && React.createElement(Image, Object.assign({ className: b('icon') }, imageData)),
+            React.createElement("span", { className: b('text') }, text))));
+};
 export default Logo;

package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.mobile-navigation {
+.pc-mobile-navigation {
   position: fixed;
   z-index: 100;
   top: var(--header-height);
@@ -9,22 +9,22 @@ unpredictable css rules order in build */
   border-bottom-right-radius: var(--pc-border-radius);
   border-bottom-left-radius: var(--pc-border-radius);
   background-color: var(--yc-color-base-background);
-  box-shadow: 0px 3px 10px var(--yc-color-sfx-shadow);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
 @media (min-width: 769px) {
-  .mobile-navigation {
+  .pc-mobile-navigation {
     display: none;
   }
 }
-.mobile-navigation__wrapper {
-  padding: 32px 20px;
+.pc-mobile-navigation__wrapper {
+  padding: 32px 48px;
 }
-.mobile-navigation__button {
+.pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.mobile-navigation__links {
+.pc-mobile-navigation__links {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,13 +33,13 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__links-item:not(:last-child) {
   margin-bottom: 24px;
 }
-.mobile-navigation__dropdown-item:not(:last-child) {
+.pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mobile-navigation__popup {
+.pc-mobile-navigation__popup {
   z-index: 101;
   display: flex;
   flex-direction: column;
@@ -52,7 +52,13 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (min-width: 769px) {
-  .mobile-navigation__popup {
+  .pc-mobile-navigation__popup {
     display: none;
   }
+}
+@media (max-width: 576px) {
+  .pc-mobile-navigation__wrapper {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }

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

@@ -1,7 +1,7 @@
-import block from 'bem-cn-lite';
 import React, { useRef, useCallback } from 'react';
-import Foldable from '../../../Foldable/Foldable';
 import { Popup, Portal } from '@gravity-ui/uikit';
+import { block } from '../../../../utils';
+import Foldable from '../../../Foldable/Foldable';
 import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './MobileNavigation.css';

package/build/esm/components/navigation/components/Navigation/Navigation.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation {
+.pc-navigation {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
-.navigation__links {
+.pc-navigation__links {
   position: relative;
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.navigation__links-item {
+.pc-navigation__links-item {
   position: relative;
   height: var(--header-height);
   line-height: var(--header-height);
@@ -21,22 +21,22 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
 }
-.utilityfocus .navigation__links-item:focus {
+.utilityfocus .pc-navigation__links-item:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation__links-item:hover, .navigation__links-item:active {
+.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
   color: var(--yc-color-text-link);
 }
-.navigation__links-item:not(:last-child) {
+.pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
 }
-.navigation__slider-container {
+.pc-navigation__slider-container {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.navigation__slider {
+.pc-navigation__slider {
   width: 100%;
   height: 2px;
   background-color: var(--yc-color-text-link);

package/build/esm/components/navigation/components/Navigation/Navigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem, NavigationItem as NavigationItemModel } from '../../../../models/navigation';
 import './Navigation.css';
 export interface NavigationProps {
     links: NavigationItemModel[];
@@ -8,5 +8,12 @@ export interface NavigationProps {
     className?: string;
     highlightActiveItem?: boolean;
 }
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;