@gravity-ui/page-constructor 1.7.0-alpha.5 → 1.7.0-alpha.7

package/styles/mixins.scss

@@ -442,41 +442,3 @@ unpredictable css rules order in build */
 @mixin font-feature-settings {
     font-feature-settings: 'liga', 'kern', 'pnum' on, 'lnum' on, 'ss03' on;
 }
-
-@mixin navigation-popup {
-    z-index: 101;
-
-    display: flex;
-    flex-direction: column;
-
-    min-width: 220px;
-    padding: $indentXS;
-
-    border: 1px solid var(--yc-color-line-generic);
-    border-top-width: 0;
-    border-radius: calc(#{$borderRadius} / 2);
-    background: var(--yc-color-base-float);
-    box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
-}
-
-@mixin navigation-item {
-    color: var(--yc-color-text-primary);
-    @include reset-link-style();
-    @include islands-focus();
-
-    &:hover,
-    &_active {
-        color: var(--yc-color-text-link);
-    }
-}
-
-@mixin navigation-link() {
-    cursor: pointer;
-    @include islands-focus();
-    @include reset-link-style();
-
-    &:hover,
-    &:active {
-        color: var(--yc-color-text-link);
-    }
-}

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

@@ -1,85 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.header {
-  position: sticky;
-  z-index: 98;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  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);
-}
-.header__wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--header-height);
-}
-@media (min-width: 769px) {
-  .header__mobile-menu-button {
-    display: none;
-  }
-}
-.header__navigation, .header__left, .header__right {
-  display: flex;
-  align-items: center;
-}
-.header__navigation {
-  position: relative;
-  flex: 1 0 0;
-  justify-content: flex-start;
-  margin-right: 20px;
-}
-@media (max-width: 768px) {
-  .header__navigation {
-    display: none;
-  }
-}
-.header__right {
-  flex: 0;
-  justify-content: flex-end;
-}
-.header__navigation-container {
-  display: flex;
-  overflow-x: hidden;
-  flex: 1 0 0;
-  justify-content: space-between;
-  align-items: center;
-  margin-right: 20px;
-}
-.header__buttons {
-  display: flex;
-}
-@media (max-width: 768px) {
-  .header__buttons {
-    display: none;
-  }
-}
-.header__buttons > *:not(:last-child) {
-  margin-right: 16px;
-}
-.header__button {
-  margin-top: 0;
-}
-.header__logo {
-  margin: 0 32px 0 0;
-  cursor: pointer;
-}
-@media (max-width: 768px) {
-  .header__navigation-container {
-    justify-content: flex-end;
-  }
-  .header__left {
-    flex: 1 0 0;
-  }
-}
-@media (max-width: 576px) {
-  .header__navigation-container {
-    margin-right: 12px;
-  }
-  .header__logo {
-    margin-right: 0;
-  }
-}

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { HeaderData, NavigationLogo } from '../../../../models';
-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 default Header;

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

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const grid_1 = require("../../../../grid");
-const OutsideClick_1 = (0, tslib_1.__importDefault)(require("../../../OutsideClick/OutsideClick"));
-const Control_1 = (0, tslib_1.__importDefault)(require("../../../Control/Control"));
-const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
-const Navigation_1 = (0, tslib_1.__importDefault)(require("../Navigation/Navigation"));
-const MobileNavigation_1 = (0, tslib_1.__importDefault)(require("../MobileNavigation/MobileNavigation"));
-const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const icons_1 = require("../../../../icons");
-const b = (0, bem_cn_lite_1.default)('header');
-class Header extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = (0, react_1.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_1.default.createElement(grid_1.Grid, { className: b() },
-            react_1.default.createElement(grid_1.Row, null,
-                react_1.default.createElement(grid_1.Col, null,
-                    react_1.default.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_1.default.createElement("div", { className: b('navigation-container') },
-            react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
-    }
-    renderLogo() {
-        const { logo } = this.props;
-        if (!logo) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { className: b('left') },
-            react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
-    }
-    renderRight() {
-        return (react_1.default.createElement("div", { className: b('right') },
-            this.renderMobileMenuButton(),
-            this.renderRightItems()));
-    }
-    renderRightItems() {
-        const { rightItems } = this.props.data;
-        return (rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') }))))));
-    }
-    renderMobileMenuButton() {
-        const { isSidebarOpened } = this.state;
-        const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
-        return (react_1.default.createElement(Control_1.default, 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_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
-            react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
-    }
-}
-exports.default = Header;

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

@@ -1,23 +0,0 @@
-.logo {
-  margin: 0;
-}
-
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.logo {
-  display: flex;
-  align-items: center;
-  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 {
-  display: flex;
-  margin-right: 8px;
-  object-fit: contain;
-}
-.logo__text {
-  white-space: nowrap;
-}

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import { NavigationLogo } from '../../../../models';
-export interface LogoProps extends NavigationLogo {
-    className?: string;
-}
-declare const Logo: React.FC<LogoProps>;
-export default Logo;

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
-const utils_1 = require("../../../Media/Image/utils");
-const index_1 = require("../../../index");
-const b = (0, bem_cn_lite_1.default)('logo');
-const Logo = ({ icon, text, className }) => {
-    const imageData = (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
-        react_1.default.createElement("div", { className: b(null, className) },
-            imageData && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, imageData)),
-            react_1.default.createElement("span", { className: b('text') }, text))));
-};
-exports.default = Logo;

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

@@ -1,58 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.mobile-navigation {
-  position: fixed;
-  z-index: 100;
-  top: var(--header-height);
-  left: 0;
-  width: 100%;
-  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);
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-}
-@media (min-width: 769px) {
-  .mobile-navigation {
-    display: none;
-  }
-}
-.mobile-navigation__wrapper {
-  padding: 32px 20px;
-}
-.mobile-navigation__button {
-  margin-top: 24px;
-}
-.mobile-navigation__links {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 24px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.mobile-navigation__links-item:not(:last-child) {
-  margin-bottom: 24px;
-}
-.mobile-navigation__dropdown-item:not(:last-child) {
-  margin-bottom: 16px;
-}
-.mobile-navigation__popup {
-  z-index: 101;
-  display: flex;
-  flex-direction: column;
-  min-width: 220px;
-  padding: 16px;
-  border: 1px solid var(--yc-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);
-}
-@media (min-width: 769px) {
-  .mobile-navigation__popup {
-    display: none;
-  }
-}

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
-export interface MobileNavigationProps {
-    className?: string;
-    isOpened?: boolean;
-    topItems?: NavigationItemModel[];
-    bottomItems?: NavigationItemModel[];
-    activeItemIndex: number;
-    onClose: () => void;
-    onActiveItemChange: (index: number) => void;
-}
-declare const MobileNavigation: React.FC<MobileNavigationProps>;
-export default MobileNavigation;

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

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
-const uikit_1 = require("@gravity-ui/uikit");
-const navigation_1 = require("../../../../models/navigation");
-const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('mobile-navigation');
-const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
-    const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement("div", { ref: ref, className: b('dropdown') },
-        react_1.default.createElement(NavigationItem_1.default, { data: data, onClick: onToggle, isOpened: isOpened }),
-        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
-};
-const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
-    const toggleActive = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        if (onActiveItemChange) {
-            onActiveItemChange(isActive ? -1 : index);
-        }
-    }, [isActive, index, onActiveItemChange]);
-    const onItemClick = (0, react_1.useCallback)((e) => {
-        toggleActive(e);
-        onClose();
-    }, [toggleActive, onClose]);
-    return (react_1.default.createElement("li", { key: index, className: b('links-item') }, link.type === navigation_1.NavigationItemType.Dropdown ? (react_1.default.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onItemClick }))));
-};
-const MobileNavigation = (props) => {
-    if (typeof window === 'undefined') {
-        return null;
-    }
-    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
-    return (react_1.default.createElement(uikit_1.Portal, null,
-        react_1.default.createElement(Foldable_1.default, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
-            react_1.default.createElement("div", { className: b('wrapper') },
-                react_1.default.createElement("nav", null,
-                    react_1.default.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
-                        const isActive = index === activeItemIndex;
-                        return (react_1.default.createElement(MobileNavigationItem, { key: index, link: link, index: index, isActive: isOpened && isActive, onClose: onClose, onActiveItemChange: onActiveItemChange }));
-                    }))), bottomItems === null || bottomItems === void 0 ? void 0 :
-                bottomItems.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('button') })))))));
-};
-exports.default = MobileNavigation;

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

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

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
-export interface NavigationProps {
-    links: NavigationItemModel[];
-    activeItemIndex: number;
-    onActiveItemChange: (index: number) => void;
-    className?: string;
-    highlightActiveItem?: boolean;
-}
-declare const Navigation: React.FC<NavigationProps>;
-export default Navigation;

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

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const OverflowScroller_1 = (0, tslib_1.__importDefault)(require("../../../OverflowScroller/OverflowScroller"));
-const navigation_1 = require("../../../../models/navigation");
-const NavigationPopup_1 = (0, tslib_1.__importDefault)(require("../NavigationPopup/NavigationPopup"));
-const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const locationContext_1 = require("../../../../context/locationContext");
-const b = (0, bem_cn_lite_1.default)('navigation');
-const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
-    const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const itemRefs = (0, react_1.useRef)([]);
-    const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
-    const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
-    const hidePopup = (0, react_1.useCallback)(() => {
-        onActiveItemChange(-1);
-    }, [onActiveItemChange]);
-    const getItemClickHandler = (0, react_1.useCallback)((index) => (e) => {
-        e.stopPropagation();
-        onActiveItemChange(index === activeItemIndex ? -1 : index);
-    }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
-        return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
-            isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (react_1.default.createElement("div", { className: b('slider-container') },
-        react_1.default.createElement("div", { className: b('slider') })));
-    const content = (react_1.default.createElement("nav", null,
-        react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === navigation_1.NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
-    const calculateItemPositions = (0, react_1.useCallback)(() => {
-        if (itemRefs.current.length) {
-            const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
-            setItemPosition(currentItemPositions);
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions, 100);
-        const calculateOnScroll = lodash_1.default.debounce(() => {
-            const curLeftScroll = window.pageXOffset;
-            if (curLeftScroll !== lastLeftScroll) {
-                setLastLeftScroll(window.pageXOffset);
-                calculateItemPositions();
-            }
-        }, 100);
-        calculateItemPositions();
-        setLastLeftScroll(window.pageXOffset);
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', calculateOnScroll);
-        return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-            window.removeEventListener('scroll', calculateOnScroll);
-        };
-    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
-    (0, react_1.useEffect)(() => {
-        hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
-};
-exports.default = Navigation;

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

@@ -1,41 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.navigation-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.navigation-item_type_link {
-  color: var(--yc-color-text-primary);
-  color: inherit;
-  text-decoration: none;
-  outline: none;
-}
-.utilityfocus .navigation-item_type_link:focus {
-  outline: 2px solid #ffdb4d;
-}
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
-  color: var(--yc-color-text-link);
-}
-.navigation-item_type_button {
-  display: inline-block;
-}
-.navigation-item__arrow {
-  position: relative;
-  top: -2px;
-  width: 9px;
-  height: 9px;
-  margin-left: 5px;
-}
-.navigation-item__icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-.navigation-item__dropdown {
-  margin-left: 7px;
-  color: var(--yc-color-text-secondary);
-}

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

@@ -1,12 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export interface NavigationItemProps {
-    data: NavigationItemData;
-    className?: string;
-    onClick?: MouseEventHandler;
-    isOpened?: boolean;
-}
-declare const NavigationItem: React.FC<NavigationItemProps>;
-export default NavigationItem;

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

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const index_1 = require("../../../index");
-const utils_1 = require("../../../../utils");
-const locationContext_1 = require("../../../../context/locationContext");
-const models_1 = require("../../../../models");
-const icons_1 = require("../../../../icons");
-const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
-const utils_2 = require("../../../Media/Image/utils");
-const b = (0, bem_cn_lite_1.default)('navigation-item');
-const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, icon)),
-    react_1.default.createElement("span", { className: b('text') }, text)));
-const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = (0, tslib_1.__rest)(_a, ["text", "icon", "isOpened"]);
-    const iconData = icon && (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({}, props),
-        react_1.default.createElement(Content, { text: text, icon: iconData }),
-        react_1.default.createElement(index_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
-const NavigationLink = (props) => {
-    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target"]);
-    const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
-    const iconData = icon && (0, utils_2.getMediaImage)(icon);
-    const content = (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(Content, { text: text, icon: iconData }),
-        arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
-    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
-        react_1.default.createElement("a", Object.assign({}, rest), content)));
-};
-const NavigationButton = (props) => {
-    const { url, target } = props;
-    return target ? (react_1.default.createElement(index_1.Button, Object.assign({}, props, { url: url }))) : (react_1.default.createElement(index_1.RouterLink, { href: url },
-        react_1.default.createElement(index_1.Button, Object.assign({}, props, { url: url }))));
-};
-//todo: add types support form component in map
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const NavigationItemsMap = {
-    [models_1.NavigationItemType.Button]: NavigationButton,
-    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [models_1.NavigationItemType.Dropdown]: NavigationDropdown,
-    [models_1.NavigationItemType.Link]: NavigationLink,
-};
-const NavigationItem = (_a) => {
-    var { data, className } = _a, props = (0, tslib_1.__rest)(_a, ["data", "className"]);
-    const { type = models_1.NavigationItemType.Link } = data;
-    const Component = NavigationItemsMap[type];
-    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
-    return react_1.default.createElement(Component, Object.assign({}, componentProps));
-};
-exports.default = NavigationItem;