@gravity-ui/page-constructor 1.22.1-alpha.1 → 1.22.1-alpha.2

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

@@ -41,6 +41,8 @@ unpredictable css rules order in build */
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
 .pc-header__navigation-container {
   display: flex;

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

@@ -3,7 +3,6 @@ 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 utils_1 = require("../../../utils");
 const grid_1 = require("../../../grid");
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
@@ -30,8 +29,6 @@ const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setactiveItemId] = (0, react_1.useState)('');
-    const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
-    const itemRefs = (0, react_1.useRef)([]);
     const onActiveItemChange = (0, react_1.useCallback)((index = '') => {
         setactiveItemId(index);
     }, []);
@@ -44,20 +41,6 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    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);
-        calculateItemPositions();
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-        };
-    }, [calculateItemPositions, itemRefs]);
     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,
@@ -68,7 +51,7 @@ const Header = ({ data, logo }) => {
                         react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
                     react_1.default.createElement("div", { className: b('right') },
                         react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (react_1.default.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, itemRefs: itemRefs, index: index, activeItemId: activeItemId, hidePopup: hidePopup, itemPositions: itemPositions, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
+                        rightItems && (react_1.default.createElement("ul", { className: b('buttons') }, rightItems.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 })))))));
 };

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

@@ -6,9 +6,9 @@ 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 = ({ data, isActive, position, hidePopup, onClick, }) => {
-    const { text, items } = data, popupProps = tslib_1.__rest(data, ["text", "items"]);
+    const { text, icon, items } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items"]);
     return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(NavigationItem_1.default, { onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown } }),
+        react_1.default.createElement(NavigationItem_1.default, { onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
         isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
 };
 exports.default = NavigationDropdown;

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

@@ -3,13 +3,13 @@ import { ClassNameProps, NavigationItemModel } from '../../../models';
 import { ItemColumnName } from '../../constants';
 type NavigationListItemProps = {
     item: NavigationItemModel;
-    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
     index: number;
     activeItemId: string;
     hidePopup: () => void;
-    itemPositions: number[];
     column: ItemColumnName;
     onActiveItemChange: (index: string) => void;
+    itemPositions?: number[];
+    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
     highlightActiveItem?: boolean;
 } & ClassNameProps;
 export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const models_1 = require("../../../models");
 const utils_2 = require("../../utils");
@@ -10,6 +10,8 @@ const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationD
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('navigation');
 const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
+    var _a;
+    const ref = (0, react_1.useRef)(null);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = (0, utils_2.getItemClickHandler)({
@@ -18,8 +20,8 @@ const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, hi
         activeItemId,
         onActiveItemChange,
     });
-    return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), className: className },
-        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { data: item, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onClick })),
+    return (react_1.default.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
+        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onClick })),
         highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
             react_1.default.createElement("div", { className: b('slider') })))));
 };

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

@@ -41,6 +41,8 @@ unpredictable css rules order in build */
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
 .pc-header__navigation-container {
   display: flex;

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

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import _ from 'lodash';
+import React, { useCallback, useState } from 'react';
 import { block } from '../../../utils';
 import { Col, Grid, Row } from '../../../grid';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
@@ -27,8 +26,6 @@ export const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setactiveItemId] = useState('');
-    const [itemPositions, setItemPosition] = useState([]);
-    const itemRefs = useRef([]);
     const onActiveItemChange = useCallback((index = '') => {
         setactiveItemId(index);
     }, []);
@@ -41,20 +38,6 @@ export const Header = ({ data, logo }) => {
     const hideSidebar = useCallback(() => {
         setIsSidebarOpened(false);
     }, []);
-    const calculateItemPositions = useCallback(() => {
-        if (itemRefs.current.length) {
-            const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
-            setItemPosition(currentItemPositions);
-        }
-    }, []);
-    useEffect(() => {
-        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, 100);
-        calculateItemPositions();
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-        };
-    }, [calculateItemPositions, itemRefs]);
     return (React.createElement(Grid, { className: b() },
         React.createElement(Row, null,
             React.createElement(Col, null,
@@ -65,7 +48,7 @@ export const Header = ({ data, logo }) => {
                         React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
                     React.createElement("div", { className: b('right') },
                         React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (React.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (React.createElement(NavigationListItem, { key: index, className: b('buttons-item'), item: button, itemRefs: itemRefs, index: index, activeItemId: activeItemId, hidePopup: hidePopup, itemPositions: itemPositions, column: ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
+                        rightItems && (React.createElement("ul", { className: b('buttons') }, rightItems.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 })))))));
 };

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

@@ -4,9 +4,9 @@ import { NavigationItemType } from '../../../models';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
 const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
-    const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
+    const { text, icon, items } = data, popupProps = __rest(data, ["text", "icon", "items"]);
     return (React.createElement(Fragment, null,
-        React.createElement(NavigationItem, { onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
+        React.createElement(NavigationItem, { onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon } }),
         isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
 };
 export default NavigationDropdown;

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

@@ -4,13 +4,13 @@ import { ItemColumnName } from '../../constants';
 import './NavigationListItem.css';
 type NavigationListItemProps = {
     item: NavigationItemModel;
-    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
     index: number;
     activeItemId: string;
     hidePopup: () => void;
-    itemPositions: number[];
     column: ItemColumnName;
     onActiveItemChange: (index: string) => void;
+    itemPositions?: number[];
+    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
     highlightActiveItem?: boolean;
 } & ClassNameProps;
 export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { block } from '../../../utils';
 import { NavigationItemType } from '../../../models';
 import { getItemClickHandler } from '../../utils';
@@ -7,6 +7,8 @@ import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationListItem.css';
 const b = block('navigation');
 export const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
+    var _a;
+    const ref = useRef(null);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = getItemClickHandler({
@@ -15,8 +17,8 @@ export const NavigationListItem = ({ item, itemRefs, className, index, activeIte
         activeItemId,
         onActiveItemChange,
     });
-    return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), className: className },
-        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { data: item, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: item, onClick: onClick })),
+    return (React.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
+        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: item, onClick: onClick })),
         highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
             React.createElement("div", { className: b('slider') })))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.22.1-alpha.1",
+  "version": "1.22.1-alpha.2",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {