@gravity-ui/page-constructor 3.10.3 → 3.12.0

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

@@ -1,15 +1,20 @@
-import React from 'react';
+import { __rest } from "tslib";
+import React, { Fragment, useRef } from 'react';
 import { ToggleArrow } from '../../../../../components';
 import { getMediaImage } from '../../../../../components/Media/Image/utils';
 import { block } from '../../../../../utils';
+import NavigationPopup from '../../../NavigationPopup/NavigationPopup';
 import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
 import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-export const NavigationDropdown = React.forwardRef(({ text, icon, isOpened, className, iconSize, onClick }, ref) => {
+export const NavigationDropdown = (_a) => {
+    var { text, icon, className, iconSize, hidePopup, items, isActive } = _a, props = __rest(_a, ["text", "icon", "className", "iconSize", "hidePopup", "items", "isActive"]);
     const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", { ref: ref, onClick: onClick, className: b(null, className) },
-        React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
-        React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
-});
-NavigationDropdown.displayName = 'NavigationDropdown';
+    const anchorRef = useRef(null);
+    return (React.createElement(Fragment, null,
+        React.createElement("span", Object.assign({ ref: anchorRef }, props, { className: b(null, className) }),
+            React.createElement(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
+            React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isActive })),
+        React.createElement(NavigationPopup, { open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef })));
+};

package/build/esm/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';
 import './NavigationLink.css';
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 export declare const NavigationLink: React.FC<NavigationLinkProps>;

package/build/esm/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/esm/navigation/components/NavigationList/NavigationList.js

@@ -0,0 +1,7 @@
+import { __rest } from "tslib";
+import React from 'react';
+import NavigationListItem from '../NavigationListItem/NavigationListItem';
+export const NavigationList = (_a) => {
+    var { className, itemClassName, items } = _a, props = __rest(_a, ["className", "itemClassName", "items"]);
+    return (React.createElement("ul", { className: className }, items.map((item, index) => (React.createElement(NavigationListItem, Object.assign({ key: index, index: index, data: item, className: itemClassName }, props))))));
+};

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

@@ -1,14 +1,4 @@
-import { ClassNameProps, NavigationItemModel } from '../../../models';
-import { ItemColumnName } from '../../constants';
-import './NavigationListItem.css';
-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/esm/navigation/components/NavigationListItem/NavigationListItem.js

@@ -1,12 +1,9 @@
+import { __rest } from "tslib";
 import React from 'react';
-import { NavigationItemType } from '../../../models';
-import { block } from '../../../utils';
 import { getItemClickHandler } from '../../utils';
-import NavigationDropdownItem from '../NavigationDropdownItem/NavigationDropdownItem';
 import NavigationItem from '../NavigationItem/NavigationItem';
-import './NavigationListItem.css';
-const b = block('navigation-list-item');
-export const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
+const NavigationListItem = (_a) => {
+    var { column, index, activeItemId, onActiveItemChange } = _a, props = __rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = getItemClickHandler({
@@ -15,8 +12,6 @@ export const NavigationListItem = ({ item, className, index, activeItemId, highl
         activeItemId,
         onActiveItemChange,
     });
-    return (React.createElement("li", { className: b(null, className) },
-        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (React.createElement(NavigationItem, { className: b('content'), data: item, onClick: onClick })),
-        highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
-            React.createElement("div", { className: b('slider') })))));
+    return (React.createElement(NavigationItem, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
 };
+export default NavigationListItem;

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

@@ -14,13 +14,14 @@ unpredictable css rules order in build */
   background: var(--yc-color-base-float);
   box-shadow: 0 3px 10px var(--yc-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;
 }

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

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

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { NavigationLayout } from '../../models';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationPopup.css';
 const b = block('navigation-popup');
 const OFFSET_RESET = [0, 0];
-export const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
-    return (React.createElement(Popup
+export const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (React.createElement(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.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
-};
+    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 },
+    React.createElement("ul", { className: b('list') }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item, menuLayout: NavigationLayout.Dropdown }))))));
 export default NavigationPopup;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { block } from '../../../utils';
-import Header from '../../components/Header/Header';
+import Navigation from '../../components/Navigation/Navigation';
 import './Layout.css';
 const b = block('layout');
 const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
-    navigation && React.createElement(Header, { data: navigation.header, logo: navigation.logo }),
+    navigation && React.createElement(Navigation, { data: navigation.header, logo: navigation.logo }),
     React.createElement("main", { className: b('content') }, children)));
 export default Layout;

package/build/esm/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/esm/navigation/{constants.js → models.js}

@@ -5,3 +5,9 @@ export var ItemColumnName;
     ItemColumnName["Top"] = "top";
     ItemColumnName["Bottom"] = "bottom";
 })(ItemColumnName || (ItemColumnName = {}));
+export var NavigationLayout;
+(function (NavigationLayout) {
+    NavigationLayout["Desktop"] = "desktop";
+    NavigationLayout["Mobile"] = "mobile";
+    NavigationLayout["Dropdown"] = "dropdown";
+})(NavigationLayout || (NavigationLayout = {}));

package/build/esm/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/esm/navigation/utils.js

@@ -1,3 +1,4 @@
+import { NavigationItemType, } from '../models';
 export const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
     const id = `${column}-${index}`;
     if (e) {
@@ -5,3 +6,19 @@ export const getItemClickHandler = ({ column, index, onActiveItemChange, activeI
     }
     onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
 };
+const isButtonItem = (item) => item.type === NavigationItemType.Button;
+const isDropdownItem = (item) => item.type === NavigationItemType.Dropdown;
+const iconSizeKey = 'iconSize';
+export 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.10.3",
+  "version": "3.12.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,8 @@
       "require": "./server/index.js",
       "import": "./server/index.js"
     },
-    "./styles/*": "./styles/*"
+    "./styles/*": "./styles/*",
+    "./widget/*": "./widget/*"
   },
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",
@@ -44,7 +45,8 @@
   "files": [
     "build",
     "styles",
-    "server"
+    "server",
+    "widget"
   ],
   "sideEffects": [
     "*.css",
@@ -63,13 +65,14 @@
     "lint": "run-p lint:js lint:styles lint:prettier typecheck",
     "typecheck": "tsc --noEmit",
     "dev": "npm run storybook:start",
-    "storybook:start": "TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook -p 7009",
-    "storybook:build": "TS_NODE_PROJECT=.storybook/tsconfig.json build-storybook -c .storybook -o storybook-static",
+    "storybook:start": "sb dev -p 7009",
+    "storybook:build": "sb build -c .storybook -o storybook-static",
     "start": "node dist",
     "clean": "gulp clean",
     "build:client": "gulp",
     "build:server": "rimraf server && tsc -p tsconfig.server.json && move-file server/server.js server/index.js && move-file server/server.d.ts server/index.d.ts",
-    "build": "run-p build:client build:server",
+    "build:widget": "webpack --config widget.webpack.js",
+    "build": "run-p build:client build:server build:widget",
     "prepublishOnly": "npm run lint && npm run build",
     "prepare": "husky install",
     "test": "jest",
@@ -79,13 +82,14 @@
   "dependencies": {
     "@gravity-ui/dynamic-forms": "^1.9.2",
     "@gravity-ui/i18n": "^1.0.0",
+    "ajv": "^8.12.0",
     "bem-cn-lite": "^4.0.0",
     "final-form": "^4.20.9",
     "github-buttons": "2.23.0",
     "lodash": "^4.17.21",
     "react-final-form": "^6.5.9",
     "react-player": "^2.9.0",
-    "react-slick": "^0.28.1",
+    "react-slick": "^0.29.0",
     "react-spring": "^9.3.0",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
@@ -100,21 +104,27 @@
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@doc-tools/transform": "2.12.0",
+    "@gravity-ui/babel-preset": "^1.0.1",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/icons": "^2.1.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^4.1.0",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-viewport": "^6.3.12",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-viewport": "^7.1.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-webpack5": "^7.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
@@ -127,6 +137,10 @@
     "@types/react-transition-group": "^4.4.4",
     "@types/sanitize-html": "2.6.1",
     "@types/uuid": "^9.0.0",
+    "@types/webpack-env": "^1.18.1",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^8.3.0",
+    "css-loader": "^5.2.7",
     "es5-ext": "0.10.53",
     "eslint": "^8.34.0",
     "eslint-plugin-local": "./eslint-plugin-local",
@@ -134,7 +148,8 @@
     "eslint-plugin-testing-library": "^5.9.1",
     "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.0.2",
-    "gulp-replace": "^1.1.3",
+    "gulp-replace": "^1.1.4",
+    "gulp-ts-alias": "^2.0.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "html-loader": "^1.3.2",
     "htmlparser2": "^6.1.0",
@@ -148,20 +163,28 @@
     "move-file-cli": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
+    "postcss-loader": "^4.3.0",
+    "postcss-preset-env": "^9.0.0",
     "postcss-scss": "^4.0.4",
     "prettier": "2.4.1",
     "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
+    "resolve-url-loader": "^3.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.4",
-    "sass-loader": "^10.3.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^10.4.1",
+    "storybook": "^7.1.0",
+    "style-loader": "^2.0.0",
     "stylelint": "^14.11.0",
     "svg-sprite-loader": "^6.0.11",
+    "terser-webpack-plugin": "^5.3.9",
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.9.4",
-    "webpack": "^4.46.0"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-shell-plugin-next": "^2.3.1"
   },
   "lint-staged": {
     "*.{css,scss}": [

package/server/models/navigation.d.ts

@@ -44,6 +44,8 @@ export interface NavigationButtonItem extends ButtonProps {
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;
     items: NavigationLinkItem[];
+    hidePopup: () => void;
+    isActive: boolean;
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
@@ -51,8 +53,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;
 export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;