@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

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

@@ -1,23 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
-const locationContext_1 = require("../../../context/locationContext");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
+const grid_1 = require("../../../grid");
 const utils_1 = require("../../../utils");
-const constants_1 = require("../../constants");
-const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
+const utils_2 = require("../../utils");
+const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigation/DesktopNavigation"));
+const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
 const b = (0, utils_1.block)('navigation');
-const Navigation = ({ className, onActiveItemChange, links, activeItemId, }) => {
-    const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const hidePopup = (0, react_1.useCallback)(() => {
-        onActiveItemChange();
-    }, [onActiveItemChange]);
+const Navigation = ({ data, logo }) => {
+    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
+    const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
+    const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
+    const getNavigationItem = (0, utils_2.getNavigationItemWithIconSize)(iconSize);
+    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
     (0, react_1.useEffect)(() => {
-        hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup },
-        react_1.default.createElement("nav", null,
-            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('links-item'), item: link, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
+        const showBorderOnScroll = () => {
+            if (!showBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = lodash_1.default.debounce(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': showBorder }) },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, null,
+                react_1.default.createElement("nav", null,
+                    react_1.default.createElement(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                    react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })))))));
 };
-exports.default = Navigation;
+exports.Navigation = Navigation;
+exports.default = exports.Navigation;

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

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-item {
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.pc-navigation-item:last-child {
+  margin-bottom: 0;
+}
+.utilityfocus .pc-navigation-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-item__content:hover, .pc-navigation-item__content:active {
+  color: var(--g-color-text-link);
+}
+.pc-navigation-item_menu-layout_desktop {
+  height: var(--header-height);
+  line-height: var(--header-height);
+  margin-bottom: 0;
+}
+.pc-navigation-item_menu-layout_mobile {
+  margin-bottom: 24px;
+}
+.pc-navigation-item_menu-layout_dropdown {
+  margin-bottom: 0;
+}

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

@@ -1,10 +1,4 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationItemData } from '../../../models';
-export interface NavigationItemProps {
-    data: NavigationItemData;
-    className?: string;
-    onClick?: MouseEventHandler;
-    isOpened?: boolean;
-}
-declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLElement>>;
+import React from 'react';
+import { NavigationItemProps } from '../../models';
+declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

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

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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 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
@@ -19,13 +22,19 @@ const NavigationItemsMap = {
     [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
     [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
 };
-const NavigationItem = react_1.default.forwardRef((_a, ref) => {
-    var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
+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 componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign(Object.assign({ className }, data), props), { ref })), [className, data, props, ref]);
+    const componentProps = (0, react_1.useMemo)(() => {
+        const componentProperties = Object.assign(Object.assign({}, data), props);
+        if (type !== models_1.NavigationItemType.Dropdown) {
+            return (0, lodash_1.omit)(componentProperties, 'hidePopup', 'isActive');
+        }
+        return componentProperties;
+    }, [data, props, type]);
     return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
-        react_1.default.createElement(Component, Object.assign({}, componentProps))));
-});
-NavigationItem.displayName = 'NavigationItem';
+        react_1.default.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
+            react_1.default.createElement(Component, Object.assign({}, componentProps, { className: b('content') })))));
+};
 exports.default = NavigationItem;

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationItemProps } from '../../../../models';
 type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
 export declare const NavigationButton: React.FC<NavigationButtonProps>;
 export {};

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -6,5 +6,5 @@
 }
 .pc-navigation-dropdown__arrow {
   margin-left: 7px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }

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

@@ -1,4 +1,5 @@
-import React from 'react';
-import { DropdownItemData } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
-export declare const NavigationDropdown: React.ForwardRefExoticComponent<NavigationItemProps & DropdownItemData & React.RefAttributes<HTMLElement>>;
+import { NavigationDropdownItem } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+type NavigationDropdownProps = NavigationItemProps & NavigationDropdownItem;
+export declare const NavigationDropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: NavigationDropdownProps) => JSX.Element;
+export {};

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

@@ -2,18 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationDropdown = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../../../../components");
 const utils_1 = require("../../../../../components/Media/Image/utils");
 const utils_2 = require("../../../../../utils");
+const NavigationPopup_1 = tslib_1.__importDefault(require("../../../NavigationPopup/NavigationPopup"));
 const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-exports.NavigationDropdown = react_1.default.forwardRef((_a, ref) => {
-    var { text, icon, isOpened, className, iconSize } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className", "iconSize"]);
+const NavigationDropdown = (_a) => {
+    var { text, icon, className, iconSize, hidePopup, items, isActive } = _a, props = tslib_1.__rest(_a, ["text", "icon", "className", "iconSize", "hidePopup", "items", "isActive"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
-        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
-        react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
-});
-exports.NavigationDropdown.displayName = 'NavigationDropdown';
+    const anchorRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("span", Object.assign({ ref: anchorRef }, props, { className: b(null, className) }),
+            react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
+            react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isActive })),
+        react_1.default.createElement(NavigationPopup_1.default, { open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef })));
+};
+exports.NavigationDropdown = NavigationDropdown;

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -1,7 +1,7 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation-link {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
@@ -14,7 +14,7 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-navigation-link:hover, .pc-navigation-link_active {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-navigation-link__arrow {
   position: relative;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavigationLinkItem } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationItemProps } from '../../../../models';
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 export declare const NavigationLink: React.FC<NavigationLinkProps>;
 export {};

package/build/cjs/navigation/components/NavigationList/NavigationList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NavigationListProps } from '../../models';
+export declare const NavigationList: React.FC<NavigationListProps>;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationList = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const NavigationListItem_1 = tslib_1.__importDefault(require("../NavigationListItem/NavigationListItem"));
+const NavigationList = (_a) => {
+    var { className, itemClassName, items } = _a, props = tslib_1.__rest(_a, ["className", "itemClassName", "items"]);
+    return (react_1.default.createElement("ul", { className: className }, items.map((item, index) => (react_1.default.createElement(NavigationListItem_1.default, Object.assign({ key: index, index: index, data: item, className: itemClassName }, props))))));
+};
+exports.NavigationList = NavigationList;

package/build/cjs/navigation/components/NavigationListItem/NavigationListItem.d.ts

@@ -1,13 +1,4 @@
-import { ClassNameProps, NavigationItemModel } from '../../../models';
-import { ItemColumnName } from '../../constants';
-type NavigationListItemProps = {
-    item: NavigationItemModel;
-    index: number;
-    column: ItemColumnName;
-    activeItemId?: string;
-    highlightActiveItem?: boolean;
-    hidePopup: () => void;
-    onActiveItemChange: (id?: string) => void;
-} & ClassNameProps;
-export declare const NavigationListItem: ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
-export {};
+import React from 'react';
+import { NavigationListItemProps } from '../../models';
+declare const NavigationListItem: React.FC<NavigationListItemProps>;
+export default NavigationListItem;

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

@@ -1,26 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const models_1 = require("../../../models");
-const utils_1 = require("../../../utils");
-const utils_2 = require("../../utils");
-const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationDropdownItem/NavigationDropdownItem"));
+const utils_1 = require("../../utils");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
-const b = (0, utils_1.block)('navigation-list-item');
-const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
+const NavigationListItem = (_a) => {
+    var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
-    const onClick = (0, utils_2.getItemClickHandler)({
+    const onClick = (0, utils_1.getItemClickHandler)({
         column,
         index,
         activeItemId,
         onActiveItemChange,
     });
-    return (react_1.default.createElement("li", { className: b(null, className) },
-        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { className: b('content'), data: item, onClick: onClick })),
-        highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
-            react_1.default.createElement("div", { className: b('slider') })))));
+    return (react_1.default.createElement(NavigationItem_1.default, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
 };
-exports.NavigationListItem = NavigationListItem;
+exports.default = NavigationListItem;

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

@@ -8,23 +8,24 @@ unpredictable css rules order in build */
   flex-direction: column;
   min-width: 220px;
   padding: 16px;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
   border-top-width: 0;
   border-radius: calc(var(--pc-border-radius) / 2);
-  background: var(--yc-color-base-float);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+  background: var(--g-color-base-float);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
-@media (max-width: 768px) {
-  .pc-navigation-popup {
-    display: none;
-  }
+.pc-navigation-popup__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .pc-navigation-popup__link {
   height: 36px;
+  line-height: 20px;
   padding: 8px 12px;
   border-radius: 8px;
 }
 .pc-navigation-popup__link:hover {
-  color: var(--yc-color-text-primary);
-  background-color: var(--yc-color-base-simple-hover);
+  color: var(--g-color-text-primary);
+  background-color: var(--g-color-base-simple-hover);
 }

package/build/cjs/navigation/components/NavigationPopup/NavigationPopup.d.ts

@@ -1,11 +1,4 @@
 import React from 'react';
-import { NavigationLinkItem } from '../../../models';
-export interface NavigationPopupProps {
-    open: boolean;
-    items: NavigationLinkItem[];
-    onClose: () => void;
-    className?: string;
-    anchorRef: React.RefObject<Element>;
-}
+import { NavigationPopupProps } from '../../models';
 export declare const NavigationPopup: React.FC<NavigationPopupProps>;
 export default NavigationPopup;

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

@@ -5,15 +5,15 @@ const tslib_1 = require("tslib");
 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 b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = [0, 0];
-const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
-    return (react_1.default.createElement(uikit_1.Popup
+const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.Popup
+// Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+, { 
     // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-    , { 
-        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-        anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
-};
+    anchorRef: open ? anchorRef : undefined, contentClassName: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET },
+    react_1.default.createElement("ul", { className: b('list') }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item, menuLayout: models_1.NavigationLayout.Dropdown }))))));
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;

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

@@ -7,12 +7,12 @@ unpredictable css rules order in build */
   width: 40px;
   height: 40px;
   margin-right: 8px;
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
   border-radius: 50%;
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 .pc-social-icon:hover {
-  background-color: var(--yc-color-base-generic-hover);
+  background-color: var(--g-color-base-generic-hover);
 }
 .pc-social-icon__icon {
   width: 16px;

package/build/cjs/navigation/containers/Layout/Layout.js

@@ -3,9 +3,9 @@ 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 Header_1 = tslib_1.__importDefault(require("../../components/Header/Header"));
+const Navigation_1 = tslib_1.__importDefault(require("../../components/Navigation/Navigation"));
 const b = (0, utils_1.block)('layout');
 const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
-    navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
+    navigation && react_1.default.createElement(Navigation_1.default, { data: navigation.header, logo: navigation.logo }),
     react_1.default.createElement("main", { className: b('content') }, children)));
 exports.default = Layout;

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

@@ -0,0 +1,63 @@
+import { MouseEventHandler } from 'react';
+import { ClassNameProps, NavigationItemData, NavigationItemModel, NavigationLinkItem, ThemedNavigationLogoData } from '../models';
+export interface MobileMenuButtonProps {
+    isSidebarOpened: boolean;
+    onSidebarOpenedChange: (arg: boolean) => void;
+}
+export declare enum ItemColumnName {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum NavigationLayout {
+    Desktop = "desktop",
+    Mobile = "mobile",
+    Dropdown = "dropdown"
+}
+export interface ActiveItemProps {
+    activeItemId?: string;
+    onActiveItemChange: (id?: string) => void;
+}
+export interface MenuLayoutProps {
+    menuLayout?: NavigationLayout;
+}
+export interface NavigationItemProps extends ClassNameProps, MenuLayoutProps {
+    data: NavigationItemData;
+    onClick?: MouseEventHandler;
+    isActive?: boolean;
+    isTopLevel?: boolean;
+    hidePopup?: () => void;
+}
+export interface NavigationListItemProps extends MenuLayoutProps, ActiveItemProps, ClassNameProps {
+    data: NavigationItemModel;
+    column: ItemColumnName;
+    index: number;
+}
+export interface NavigationListProps extends Pick<NavigationListItemProps, 'column'>, MenuLayoutProps, ActiveItemProps, ClassNameProps {
+    items: NavigationItemModel[];
+    itemClassName?: string;
+}
+export interface ItemsWrapperProps extends Pick<NavigationListProps, 'items'>, ActiveItemProps, ClassNameProps {
+}
+export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveItemProps {
+    logo: ThemedNavigationLogoData;
+    leftItemsWithIconSize: NavigationItemModel[];
+    rightItemsWithIconSize?: NavigationItemModel[];
+}
+export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
+    isOpened?: boolean;
+    topItems?: NavigationItemModel[];
+    bottomItems?: NavigationItemModel[];
+}
+export interface NavigationProps extends MobileMenuButtonProps, ActiveItemProps {
+    logo: ThemedNavigationLogoData;
+    leftItemsWithIconSize: NavigationItemModel[];
+    rightItemsWithIconSize?: NavigationItemModel[];
+}
+export interface NavigationPopupProps extends ClassNameProps {
+    open: boolean;
+    items: NavigationLinkItem[];
+    onClose: () => void;
+    anchorRef: React.RefObject<Element>;
+}

package/build/cjs/navigation/{constants.js → models.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemColumnName = void 0;
+exports.NavigationLayout = exports.ItemColumnName = void 0;
 var ItemColumnName;
 (function (ItemColumnName) {
     ItemColumnName["Left"] = "left";
@@ -8,3 +8,9 @@ var ItemColumnName;
     ItemColumnName["Top"] = "top";
     ItemColumnName["Bottom"] = "bottom";
 })(ItemColumnName = exports.ItemColumnName || (exports.ItemColumnName = {}));
+var NavigationLayout;
+(function (NavigationLayout) {
+    NavigationLayout["Desktop"] = "desktop";
+    NavigationLayout["Mobile"] = "mobile";
+    NavigationLayout["Dropdown"] = "dropdown";
+})(NavigationLayout = exports.NavigationLayout || (exports.NavigationLayout = {}));

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

@@ -14,6 +14,7 @@ export declare const LogoProps: {
             } | {
                 type: string;
                 pattern: string;
+                optionName: string;
             })[];
         };
         text: {

package/build/cjs/navigation/schema.js

@@ -34,7 +34,7 @@ const NavigationItemBaseProps = {
     },
     icon: {
         type: 'string',
-        pattern: schema_1.urlPattern,
+        pattern: schema_1.imageUrlPattern,
     },
     iconSize: {
         type: 'number',

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

@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { ItemColumnName } from './constants';
+import { NavigationButtonItem, NavigationDropdownItem, NavigationItemModel, NavigationItemType } from '../models';
+import { ItemColumnName } from './models';
 type GetItemClickHandlerArgs = {
     column: ItemColumnName;
     index: number;
@@ -7,4 +8,13 @@ type GetItemClickHandlerArgs = {
     onActiveItemChange: (id?: string) => void;
 };
 export declare const getItemClickHandler: ({ column, index, onActiveItemChange, }: GetItemClickHandlerArgs) => MouseEventHandler;
+export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
+    type: NavigationItemType.Link;
+    url: string;
+    arrow?: boolean | undefined;
+    target?: string | undefined;
+    text: string;
+    icon?: import("../models").ImageProps | undefined;
+    iconSize?: number | undefined;
+};
 export {};

package/build/cjs/navigation/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemClickHandler = void 0;
+exports.getNavigationItemWithIconSize = exports.getItemClickHandler = void 0;
+const models_1 = require("../models");
 const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
     const id = `${column}-${index}`;
     if (e) {
@@ -9,3 +10,20 @@ const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }
     onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
 };
 exports.getItemClickHandler = getItemClickHandler;
+const isButtonItem = (item) => item.type === models_1.NavigationItemType.Button;
+const isDropdownItem = (item) => item.type === models_1.NavigationItemType.Dropdown;
+const iconSizeKey = 'iconSize';
+function getNavigationItemWithIconSize(iconSize = 20) {
+    const getItem = (item) => {
+        const newItem = Object.assign({}, item);
+        if ('items' in newItem && isDropdownItem(newItem)) {
+            newItem.items = newItem.items.map(getItem);
+        }
+        if (!(iconSizeKey in newItem) && !isButtonItem(newItem)) {
+            newItem.iconSize = iconSize;
+        }
+        return newItem;
+    };
+    return getItem;
+}
+exports.getNavigationItemWithIconSize = getNavigationItemWithIconSize;