@gravity-ui/page-constructor 3.5.0-alpha.0 → 3.6.0

package/build/cjs/editor/types/index.d.ts

@@ -1,17 +1,23 @@
 /// <reference types="react" />
 import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecoratorProps, PageData } from '../../models';
+import { BlockDecorationProps, PageContent } from '../../models';
+import { SchemaCustomConfig } from '../../schema';
+import { EditBlockActions } from '../components/EditBlock/EditBlock';
 export type EditorBlockId = number | string;
 export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
     children: (props: Partial<PageConstructorProps>) => React.ReactNode;
-    onChange?: (data: PageData) => void;
+    onChange?: (data: PageContent) => void;
+    customSchema?: SchemaCustomConfig;
 }
 export interface EditBlockEditorProps {
-    activeBlockId: EditorBlockId;
-    orderedBlocksCount: number;
-    onSelect: (index: EditorBlockId) => void;
-    onDelete: (index: EditorBlockId) => void;
-    onCopy: (index: number) => void;
-    onOrderChange: (index: number, newIndex: number) => void;
+    isActive?: boolean;
+    onSelect: () => void;
+    actions: EditBlockActions;
+}
+export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
+    isHeader?: boolean;
+}
+export declare enum ViewModeItem {
+    Edititng = "editing",
+    View = "view"
 }
-export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

package/build/cjs/editor/types/index.js

@@ -1,2 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewModeItem = void 0;
+var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Edititng"] = "editing";
+    ViewModeItem["View"] = "view";
+})(ViewModeItem = exports.ViewModeItem || (exports.ViewModeItem = {}));

package/build/cjs/editor/utils/index.d.ts

@@ -1,11 +1,12 @@
-import { BlockDecorator, CustomConfig } from '../../models';
+import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
 export declare const formatBlockName: (name: string) => string;
-export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
+export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?: CustomConfig) => {
     decorators: {
-        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+        block: ((props: BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
     };
     blocks?: import("../../models").CustomItems | undefined;
     subBlocks?: import("../../models").CustomItems | undefined;
     headers?: import("../../models").CustomItems | undefined;
     loadable?: import("../../models").LoadableConfig | undefined;
 };
+export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;

package/build/cjs/editor/utils/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addCustomDecorator = exports.formatBlockName = void 0;
+exports.getBlockId = exports.addCustomDecorator = exports.formatBlockName = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const formatBlockName = (name) => lodash_1.default.capitalize(name).replace(/(block|-)/g, ' ');
 exports.formatBlockName = formatBlockName;
-const addCustomDecorator = (decorator, custom = {}) => {
-    const decorators = custom.decorators || {};
-    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, decorators), { block: [...(decorators.block || []), decorator] }) });
+const addCustomDecorator = (decorators, custom = {}) => {
+    const customDecorators = custom.decorators || {};
+    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, customDecorators), { block: [...(customDecorators.block || []), ...decorators] }) });
 };
 exports.addCustomDecorator = addCustomDecorator;
+const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;
+exports.getBlockId = getBlockId;

package/build/cjs/grid/Col/Col.d.ts

@@ -7,4 +7,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "visible" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    type: BlockType;
     index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
@@ -244,14 +245,18 @@ export interface IconsBlockProps {
         src: string;
     }[];
 }
-export interface ContentLayoutBlockProps {
-    properties?: {
-        size?: ContentSize;
-        background?: BackgroundImageProps;
-        centered?: boolean;
-        theme?: ContentTheme;
-        textWidth?: ContentTextSize;
-    };
+interface ContentLayoutBlockParams {
+    size?: ContentSize;
+    background?: BackgroundImageProps;
+    centered?: boolean;
+    theme?: ContentTheme;
+    textWidth?: ContentTextSize;
+}
+export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
+    /**
+     * @deprecated Use params on top level instead
+     */
+    properties?: ContentLayoutBlockParams;
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }

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

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -41,7 +41,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
+        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
     };
 }
 export {};

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

@@ -1,9 +1,4 @@
 import { PropsWithChildren } from 'react';
-export interface BlockDecorationProps extends PropsWithChildren {
-    id: string | number;
-}
-export interface BlockDecoratorProps extends PropsWithChildren {
-    id: string | number;
-    isHeader?: boolean;
-}
-export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;
+import { BlockBaseProps } from './constructor-items';
+export type BlockDecorationProps = Pick<BlockBaseProps, 'index' | 'type'> & PropsWithChildren;
+export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;

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

@@ -63,6 +63,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

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

@@ -9,6 +9,8 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
+}
+.pc-header_with-border {
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .pc-header__wrapper {

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

@@ -3,6 +3,7 @@ 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");
@@ -30,9 +31,10 @@ 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 } = data;
+    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 [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)) {
@@ -46,7 +48,7 @@ const Header = ({ data, logo }) => {
     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);
+        setActiveItemId(id);
     }, []);
     const hidePopup = (0, react_1.useCallback)(() => {
         onActiveItemChange();
@@ -57,7 +59,16 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    return (react_1.default.createElement(grid_1.Grid, { className: b() },
+    (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') },

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

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