@gravity-ui/page-constructor 3.11.0 → 3.12.0

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { HeaderData, ThemedNavigationLogoData } from '../../../models';
-export interface HeaderProps {
-    logo: ThemedNavigationLogoData;
-    data: HeaderData;
-}
-export declare const Header: React.FC<HeaderProps>;
-export default Header;

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

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
-const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
-const grid_1 = require("../../../grid");
-const icons_1 = require("../../../icons");
-const models_1 = require("../../../models");
-const utils_1 = require("../../../utils");
-const constants_1 = require("../../constants");
-const Logo_1 = tslib_1.__importDefault(require("../Logo/Logo"));
-const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
-const Navigation_1 = tslib_1.__importDefault(require("../Navigation/Navigation"));
-const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
-const b = (0, utils_1.block)('header');
-const ICON_SIZE = 36;
-const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
-    const iconProps = {
-        icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen,
-        iconSize: ICON_SIZE,
-    };
-    return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-            e.stopPropagation();
-            onSidebarOpenedChange(!isSidebarOpened);
-        }, size: "l" }, iconProps)));
-};
-const iconSizeKey = 'iconSize';
-const isButtonItem = (item) => item.type === models_1.NavigationItemType.Button;
-const isDropdownItem = (item) => item.type === models_1.NavigationItemType.Dropdown;
-const Header = ({ 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 getNavigationItemWithIconSize = (0, react_1.useCallback)((item) => {
-        const newItem = Object.assign({}, item);
-        if ('items' in newItem && isDropdownItem(newItem)) {
-            newItem.items = newItem.items.map(getNavigationItemWithIconSize);
-        }
-        if (!(iconSizeKey in newItem) && !isButtonItem(newItem)) {
-            newItem.iconSize = iconSize;
-        }
-        return newItem;
-    }, [iconSize]);
-    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, leftItems]);
-    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, rightItems]);
-    const onActiveItemChange = (0, react_1.useCallback)((id) => {
-        setActiveItemId(id);
-    }, []);
-    const hidePopup = (0, react_1.useCallback)(() => {
-        onActiveItemChange();
-    }, [onActiveItemChange]);
-    const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
-        setIsSidebarOpened(isOpen);
-    }, []);
-    const hideSidebar = (0, react_1.useCallback)(() => {
-        setIsSidebarOpened(false);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const showBorderOnScroll = () => {
-            if (!showBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        window.addEventListener('scroll', lodash_1.default.debounce(showBorderOnScroll, 20), { passive: true });
-        return () => window.removeEventListener('scroll', lodash_1.default.debounce(showBorderOnScroll, 20));
-    });
-    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("header", { className: b('wrapper') },
-                    logo && (react_1.default.createElement("div", { className: b('left') },
-                        react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') })))),
-                    react_1.default.createElement("div", { className: b('navigation-container') },
-                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItemsWithIconSize, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
-                    react_1.default.createElement("div", { className: b('right') },
-                        react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItemsWithIconSize && (react_1.default.createElement("ul", { className: b('buttons') }, rightItemsWithIconSize.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
-                    react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
-                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
-};
-exports.Header = Header;
-exports.default = exports.Header;

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

@@ -1,11 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationDropdownItem } from '../../../models';
-export interface NavigationDropdownProps {
-    className?: string;
-    data: NavigationDropdownItem;
-    onClick: MouseEventHandler;
-    isActive: boolean;
-    hidePopup: () => void;
-}
-declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
-export default NavigationDropdown;

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const models_1 = require("../../../models");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
-const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
-const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
-    const anchorRef = (0, react_1.useRef)(null);
-    const { text, icon, items, iconSize } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items", "iconSize"]);
-    return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(NavigationItem_1.default, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon, iconSize } }),
-        react_1.default.createElement(NavigationPopup_1.default, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
-};
-exports.default = NavigationDropdown;

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

@@ -1,27 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-navigation-list-item {
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-navigation-list-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation-list-item__content:hover, .pc-navigation-list-item__content:active {
-  color: var(--yc-color-text-link);
-}
-.pc-navigation-list-item__slider-container {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pc-navigation-list-item__slider {
-  width: 100%;
-  height: 2px;
-  background-color: var(--yc-color-text-link);
-}

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

@@ -1,6 +0,0 @@
-export declare enum ItemColumnName {
-    Left = "left",
-    Right = "right",
-    Top = "top",
-    Bottom = "bottom"
-}

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { HeaderData, ThemedNavigationLogoData } from '../../../models';
-import './Header.css';
-export interface HeaderProps {
-    logo: ThemedNavigationLogoData;
-    data: HeaderData;
-}
-export declare const Header: React.FC<HeaderProps>;
-export default Header;

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

@@ -1,82 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import _ from 'lodash';
-import Control from '../../../components/Control/Control';
-import OutsideClick from '../../../components/OutsideClick/OutsideClick';
-import { Col, Grid, Row } from '../../../grid';
-import { NavigationClose, NavigationOpen } from '../../../icons';
-import { NavigationItemType, } from '../../../models';
-import { block } from '../../../utils';
-import { ItemColumnName } from '../../constants';
-import Logo from '../Logo/Logo';
-import MobileNavigation from '../MobileNavigation/MobileNavigation';
-import Navigation from '../Navigation/Navigation';
-import { NavigationListItem } from '../NavigationListItem/NavigationListItem';
-import './Header.css';
-const b = block('header');
-const ICON_SIZE = 36;
-const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
-    const iconProps = {
-        icon: isSidebarOpened ? NavigationClose : NavigationOpen,
-        iconSize: ICON_SIZE,
-    };
-    return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-            e.stopPropagation();
-            onSidebarOpenedChange(!isSidebarOpened);
-        }, size: "l" }, iconProps)));
-};
-const iconSizeKey = 'iconSize';
-const isButtonItem = (item) => item.type === NavigationItemType.Button;
-const isDropdownItem = (item) => item.type === NavigationItemType.Dropdown;
-export const Header = ({ data, logo }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
-    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemId, setActiveItemId] = useState(undefined);
-    const [showBorder, setShowBorder] = useState(withBorder);
-    const getNavigationItemWithIconSize = useCallback((item) => {
-        const newItem = Object.assign({}, item);
-        if ('items' in newItem && isDropdownItem(newItem)) {
-            newItem.items = newItem.items.map(getNavigationItemWithIconSize);
-        }
-        if (!(iconSizeKey in newItem) && !isButtonItem(newItem)) {
-            newItem.iconSize = iconSize;
-        }
-        return newItem;
-    }, [iconSize]);
-    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, leftItems]);
-    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, rightItems]);
-    const onActiveItemChange = useCallback((id) => {
-        setActiveItemId(id);
-    }, []);
-    const hidePopup = useCallback(() => {
-        onActiveItemChange();
-    }, [onActiveItemChange]);
-    const onSidebarOpenedChange = useCallback((isOpen) => {
-        setIsSidebarOpened(isOpen);
-    }, []);
-    const hideSidebar = useCallback(() => {
-        setIsSidebarOpened(false);
-    }, []);
-    useEffect(() => {
-        const showBorderOnScroll = () => {
-            if (!showBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        window.addEventListener('scroll', _.debounce(showBorderOnScroll, 20), { passive: true });
-        return () => window.removeEventListener('scroll', _.debounce(showBorderOnScroll, 20));
-    });
-    return (React.createElement(Grid, { className: b({ 'with-border': showBorder }) },
-        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: leftItemsWithIconSize, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
-                    React.createElement("div", { className: b('right') },
-                        React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItemsWithIconSize && (React.createElement("ul", { className: b('buttons') }, rightItemsWithIconSize.map((button, index) => (React.createElement(NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
-                    React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
-                        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
-};
-export default Header;

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

@@ -1,11 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationDropdownItem } from '../../../models';
-export interface NavigationDropdownProps {
-    className?: string;
-    data: NavigationDropdownItem;
-    onClick: MouseEventHandler;
-    isActive: boolean;
-    hidePopup: () => void;
-}
-declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
-export default NavigationDropdown;

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

@@ -1,13 +0,0 @@
-import { __rest } from "tslib";
-import React, { Fragment, useRef } from 'react';
-import { NavigationItemType } from '../../../models';
-import NavigationItem from '../NavigationItem/NavigationItem';
-import NavigationPopup from '../NavigationPopup/NavigationPopup';
-const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
-    const anchorRef = useRef(null);
-    const { text, icon, items, iconSize } = data, popupProps = __rest(data, ["text", "icon", "items", "iconSize"]);
-    return (React.createElement(Fragment, null,
-        React.createElement(NavigationItem, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon, iconSize } }),
-        React.createElement(NavigationPopup, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
-};
-export default NavigationDropdown;

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

@@ -1,27 +0,0 @@
-/* use this for style redefinitions to awoid problems with
-unpredictable css rules order in build */
-.pc-navigation-list-item {
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-navigation-list-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation-list-item__content:hover, .pc-navigation-list-item__content:active {
-  color: var(--yc-color-text-link);
-}
-.pc-navigation-list-item__slider-container {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pc-navigation-list-item__slider {
-  width: 100%;
-  height: 2px;
-  background-color: var(--yc-color-text-link);
-}

package/build/esm/navigation/constants.d.ts

@@ -1,6 +0,0 @@
-export declare enum ItemColumnName {
-    Left = "left",
-    Right = "right",
-    Top = "top",
-    Bottom = "bottom"
-}