@gravity-ui/page-constructor 3.10.3 → 3.12.0

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

@@ -1,26 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const models_1 = require("../../../models");
-const utils_1 = require("../../../utils");
-const utils_2 = require("../../utils");
-const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationDropdownItem/NavigationDropdownItem"));
+const utils_1 = require("../../utils");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
-const b = (0, utils_1.block)('navigation-list-item');
-const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
+const NavigationListItem = (_a) => {
+    var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
-    const onClick = (0, utils_2.getItemClickHandler)({
+    const onClick = (0, utils_1.getItemClickHandler)({
         column,
         index,
         activeItemId,
         onActiveItemChange,
     });
-    return (react_1.default.createElement("li", { className: b(null, className) },
-        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { className: b('content'), data: item, onClick: onClick })),
-        highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
-            react_1.default.createElement("div", { className: b('slider') })))));
+    return (react_1.default.createElement(NavigationItem_1.default, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
 };
-exports.NavigationListItem = NavigationListItem;
+exports.default = NavigationListItem;

package/build/cjs/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/cjs/navigation/components/NavigationPopup/NavigationPopup.d.ts

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

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

@@ -5,15 +5,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
+const models_1 = require("../../models");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = [0, 0];
-const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
-    return (react_1.default.createElement(uikit_1.Popup
+const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.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_1.default.createElement(NavigationItem_1.default, { 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_1.default.createElement("ul", { className: b('list') }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item, menuLayout: models_1.NavigationLayout.Dropdown }))))));
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
-const Header_1 = tslib_1.__importDefault(require("../../components/Header/Header"));
+const Navigation_1 = tslib_1.__importDefault(require("../../components/Navigation/Navigation"));
 const b = (0, utils_1.block)('layout');
 const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
-    navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
+    navigation && react_1.default.createElement(Navigation_1.default, { data: navigation.header, logo: navigation.logo }),
     react_1.default.createElement("main", { className: b('content') }, children)));
 exports.default = Layout;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemColumnName = void 0;
+exports.NavigationLayout = exports.ItemColumnName = void 0;
 var ItemColumnName;
 (function (ItemColumnName) {
     ItemColumnName["Left"] = "left";
@@ -8,3 +8,9 @@ var ItemColumnName;
     ItemColumnName["Top"] = "top";
     ItemColumnName["Bottom"] = "bottom";
 })(ItemColumnName = exports.ItemColumnName || (exports.ItemColumnName = {}));
+var NavigationLayout;
+(function (NavigationLayout) {
+    NavigationLayout["Desktop"] = "desktop";
+    NavigationLayout["Mobile"] = "mobile";
+    NavigationLayout["Dropdown"] = "dropdown";
+})(NavigationLayout = exports.NavigationLayout || (exports.NavigationLayout = {}));

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemClickHandler = void 0;
+exports.getNavigationItemWithIconSize = exports.getItemClickHandler = void 0;
+const models_1 = require("../models");
 const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
     const id = `${column}-${index}`;
     if (e) {
@@ -9,3 +10,20 @@ const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }
     onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
 };
 exports.getItemClickHandler = getItemClickHandler;
+const isButtonItem = (item) => item.type === models_1.NavigationItemType.Button;
+const isDropdownItem = (item) => item.type === models_1.NavigationItemType.Dropdown;
+const iconSizeKey = 'iconSize';
+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;
+}
+exports.getNavigationItemWithIconSize = getNavigationItemWithIconSize;

package/build/esm/components/Media/Image/Image.js

@@ -21,8 +21,9 @@ const Image = (props) => {
     useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', _.debounce(handleScroll, 5), { passive: true });
-            return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
+            const debouncedHandler = _.debounce(handleScroll, 5);
+            window.addEventListener('scroll', debouncedHandler, { passive: true });
+            return () => window.removeEventListener('scroll', debouncedHandler);
         }
         return () => { };
     });

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -1,15 +1,18 @@
 import React from 'react';
-import { Display, Pencil } from '@gravity-ui/icons';
+import { Display, Pencil, Smartphone } from '@gravity-ui/icons';
 import { RadioButton } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { Tablet } from '../../icons/Tablet';
 import { ViewModeItem } from '../../types';
 import i18n from './i18n';
-const ICON_SIZE = 14;
 import './ControlPanel.css';
+const ICON_SIZE = 14;
 const b = block('control-panel');
 const ControlPanelViewModeIcons = {
     [ViewModeItem.Edititng]: Pencil,
-    [ViewModeItem.View]: Display,
+    [ViewModeItem.Desktop]: Display,
+    [ViewModeItem.Tablet]: Tablet,
+    [ViewModeItem.Mobile]: Smartphone,
 };
 const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, className, }) => (React.createElement("div", { className: b(null, className) },
     React.createElement("div", { className: b('mode-switch') },

package/build/esm/editor/components/DeviceEmulation/DeviceEmulation.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ViewModeItem } from '../../types';
+export interface DeviceEmulationProps extends PropsWithChildren {
+    mode: ViewModeItem;
+}
+declare const DeviceEmulation: ({ children, mode }: DeviceEmulationProps) => JSX.Element;
+export default DeviceEmulation;

package/build/esm/editor/components/DeviceEmulation/DeviceEmulation.js

@@ -0,0 +1,7 @@
+import React, { Fragment } from 'react';
+import DeviceEmulationMobile from './DeviceEmulationMobile/DeviceEmulationMobile';
+import { isMobileDevice, mobileDevices } from './utils';
+const DeviceEmulation = ({ children, mode }) => (React.createElement(Fragment, null,
+    !isMobileDevice(mode) && children,
+    mobileDevices.map((device) => (React.createElement(DeviceEmulationMobile, { key: device, device: device, active: mode === device }, children)))));
+export default DeviceEmulation;

package/build/esm/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.css

@@ -0,0 +1,33 @@
+.pc-device-emulation-mobile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+}
+.pc-device-emulation-mobile_active {
+  opacity: 1;
+  pointer-events: all;
+}
+.pc-device-emulation-mobile__frame {
+  border: none;
+}
+.pc-device-emulation-mobile__frame_device_mobile {
+  width: 390px;
+  height: 844px;
+}
+.pc-device-emulation-mobile__frame_device_tablet {
+  width: 768px;
+  height: 1024px;
+}
+
+.pc-device-emulation-mobile__frame {
+  margin: 0;
+}
+
+.pc-device-emulation-mobile__container {
+  overflow: auto;
+}

package/build/esm/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { MobileDevice } from '../utils';
+import './DeviceEmulationMobile.css';
+interface DeviceEmulationMobileProps extends PropsWithChildren {
+    device: MobileDevice;
+    active: boolean;
+}
+declare const DeviceEmulationMobile: ({ device, active }: DeviceEmulationMobileProps) => JSX.Element;
+export default DeviceEmulationMobile;

package/build/esm/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import React, { useContext, useEffect, useRef } from 'react';
+import { block } from '../../../../utils';
+import { EditorContext } from '../../../context';
+import { DeviceIframe } from '../../../widget';
+import './DeviceEmulationMobile.css';
+const b = block('device-emulation-mobile');
+const DeviceEmulationMobile = ({ device, active }) => {
+    const _a = useContext(EditorContext), { deviceEmulationSettings } = _a, initialData = __rest(_a, ["deviceEmulationSettings"]);
+    const containerRef = useRef(null);
+    const deviceIframeRef = useRef(null);
+    useEffect(() => {
+        let iframe;
+        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
+            iframe = new DeviceIframe(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current, {
+                initialData,
+                className: b('frame', { device }),
+                settings: deviceEmulationSettings,
+            });
+            deviceIframeRef.current = iframe;
+        }
+        return () => {
+            iframe === null || iframe === void 0 ? void 0 : iframe.destroy();
+        };
+        // render iframe only once, then update it's data with postMessage
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [device]);
+    useEffect(() => {
+        if (deviceIframeRef.current) {
+            deviceIframeRef.current.onActivenessUpdate(active);
+        }
+    }, [active]);
+    useEffect(() => {
+        if (deviceIframeRef.current && initialData) {
+            deviceIframeRef.current.onDataUpdate(initialData);
+        }
+    }, [initialData]);
+    return React.createElement("div", { className: b({ active, device }), ref: containerRef });
+};
+export default DeviceEmulationMobile;

package/build/esm/editor/components/DeviceEmulation/utils.d.ts

@@ -0,0 +1,4 @@
+import { ViewModeItem } from '../../types';
+export type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;
+export declare const mobileDevices: readonly [ViewModeItem.Tablet, ViewModeItem.Mobile];
+export declare const isMobileDevice: (mode: ViewModeItem) => mode is MobileDevice;

package/build/esm/editor/components/DeviceEmulation/utils.js

@@ -0,0 +1,3 @@
+import { ViewModeItem } from '../../types';
+export const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile];
+export const isMobileDevice = (mode) => [ViewModeItem.Tablet, ViewModeItem.Mobile].includes(mode);

package/build/esm/editor/components/Layout/Layout.js

@@ -2,6 +2,7 @@ import React, { Children, Fragment } from 'react';
 import { block } from '../../../utils';
 import { ViewModeItem } from '../../types';
 import ControlPanel from '../ControlPanel/ControlPanel';
+import DeviceEmulation from '../DeviceEmulation/DeviceEmulation';
 import './Layout.css';
 const b = block('editor-layout');
 const Left = () => null;
@@ -27,7 +28,8 @@ const Layout = ({ children, mode, onModeChange }) => {
         React.createElement("div", { className: b('container') },
             React.createElement(Fragment, null,
                 left && React.createElement("div", { className: b('left') }, left),
-                right && React.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
+                right && (React.createElement("div", { className: b('right', { editing: isEditingMode }) },
+                    React.createElement(DeviceEmulation, { mode: mode }, right)))))));
 };
 Layout.Left = Left;
 Layout.Right = Right;

package/build/esm/editor/containers/Editor/Editor.d.ts

@@ -1,2 +1,2 @@
 import { EditorProps } from '../../types';
-export declare const Editor: ({ children, customSchema, onChange, ...rest }: EditorProps) => JSX.Element;
+export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, ...rest }: EditorProps) => JSX.Element;

package/build/esm/editor/containers/Editor/Editor.js

@@ -1,20 +1,23 @@
 import { __rest } from "tslib";
 import React, { useEffect, useMemo } from 'react';
+import { PageConstructor, PageConstructorProvider } from '../../../containers/PageConstructor';
 import AddBlock from '../../components/AddBlock/AddBlock';
 import EditBlock from '../../components/EditBlock/EditBlock';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import Layout from '../../components/Layout/Layout';
 import { NotFoundBlock } from '../../components/NotFoundBlock/NotFoundBlock';
+import { EditorContext } from '../../context';
 import useFormSpec from '../../hooks/useFormSpec';
 import { useEditorState } from '../../store';
 import { ViewModeItem } from '../../types';
-import { addCustomDecorator, getBlockId } from '../../utils';
+import { addCustomDecorator, checkIsMobile, getBlockId } from '../../utils';
 import { Form } from '../Form/Form';
 export const Editor = (_a) => {
-    var { children, customSchema, onChange } = _a, rest = __rest(_a, ["children", "customSchema", "onChange"]);
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
     const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = useEditorState(rest);
     const formSpecs = useFormSpec(customSchema);
     const isEditingMode = viewMode === ViewModeItem.Edititng;
+    const transformedContent = useMemo(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
     const outgoingProps = useMemo(() => {
         const custom = isEditingMode
             ? addCustomDecorator([
@@ -24,15 +27,37 @@ export const Editor = (_a) => {
                 (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
             ], rest.custom)
             : rest.custom;
-        return { content, custom, viewMode };
-    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, viewMode, rest.custom]);
+        return {
+            content: transformedContent,
+            custom,
+            viewMode,
+        };
+    }, [
+        injectEditBlockProps,
+        errorBoundaryState,
+        isEditingMode,
+        viewMode,
+        transformedContent,
+        rest.custom,
+    ]);
+    const context = useMemo(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode) }),
+        deviceEmulationSettings,
+    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    return (React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate },
-        isEditingMode && (React.createElement(Layout.Left, null,
-            React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
-        React.createElement(Layout.Right, null,
-            React.createElement(ErrorBoundary, { key: errorBoundaryState }, children(outgoingProps)),
-            isEditingMode && React.createElement(AddBlock, { onAdd: onAdd }))));
+    return (React.createElement(EditorContext.Provider, { value: context },
+        React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate },
+            isEditingMode && (React.createElement(Layout.Left, null,
+                React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+            React.createElement(Layout.Right, null,
+                React.createElement(ErrorBoundary, { key: errorBoundaryState },
+                    React.createElement(PageConstructorProvider, Object.assign({}, providerProps),
+                        React.createElement(PageConstructor, Object.assign({}, outgoingProps)))),
+                isEditingMode && React.createElement(AddBlock, { onAdd: onAdd })))));
 };

package/build/esm/editor/containers/Form/Form.js

@@ -28,8 +28,8 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
             break;
         }
         case FormTab.Blocks: {
-            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form') },
-                React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form'), key: getBlockKey(blockData, index) },
+                React.createElement(BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
                         onChange(Object.assign(Object.assign({}, content), { blocks: [
                                 ...blocks.slice(0, index),
                                 data,

package/build/esm/editor/context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PageConstructorProps, PageConstructorProviderProps } from '../containers/PageConstructor';
+import { EditorProps } from './types';
+export interface EditorContextType {
+    constructorProps?: PageConstructorProps;
+    providerProps?: PageConstructorProviderProps;
+    deviceEmulationSettings?: EditorProps['deviceEmulationSettings'];
+}
+export declare const EditorContext: React.Context<Partial<EditorContextType>>;

package/build/esm/editor/context.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const EditorContext = React.createContext({});

package/build/esm/editor/icons/Tablet.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Tablet: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/editor/icons/Tablet.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../../utils/svg';
+export const Tablet = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "12", height: "14", viewBox: "0 0 12 14", fill: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 3L10.5 11C10.5 11.8284 9.82843 12.5 9 12.5L3 12.5C2.17157 12.5 1.5 11.8284 1.5 11L1.5 3C1.5 2.17157 2.17157 1.5 3 1.5L9 1.5C9.82843 1.5 10.5 2.17157 10.5 3ZM9 -1.31134e-07C10.6569 -5.87108e-08 12 1.34315 12 3L12 11C12 12.6569 10.6569 14 9 14L3 14C1.34315 14 4.00426e-07 12.6569 4.72849e-07 11L8.2254e-07 3C8.94964e-07 1.34315 1.34315 -4.65826e-07 3 -3.93403e-07L9 -1.31134e-07ZM3.75 9.5C3.33579 9.5 3 9.83579 3 10.25C3 10.6642 3.33579 11 3.75 11L8.25 11C8.66421 11 9 10.6642 9 10.25C9 9.83579 8.66421 9.5 8.25 9.5L3.75 9.5Z", fill: "currentColor", fillOpacity: "0.85" })));

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

@@ -1,16 +1,22 @@
-/// <reference types="react" />
-import { PageConstructorProps } from '../../containers/PageConstructor';
+import { PageConstructorProps, PageConstructorProviderProps } from '../../containers/PageConstructor';
 import { BlockDecorationProps, PageContent } from '../../models';
 import { SchemaCustomConfig } from '../../schema';
 import { EditBlockActions } from '../components/EditBlock/EditBlock';
 export type EditorBlockId = number | string;
-export interface EditorOutgoingProps extends Partial<PageConstructorProps> {
+interface ContentTransformersOptions {
     viewMode: ViewModeItem;
 }
+export type ContentTransformer = (content: PageContent, options: ContentTransformersOptions) => PageContent;
+export interface DeviceEmulationSettings {
+    customStyles?: string;
+    applyHostStyles?: boolean;
+}
 export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
-    children: (props: EditorOutgoingProps) => React.ReactNode;
+    providerProps?: PageConstructorProviderProps;
     onChange?: (data: PageContent) => void;
+    transformContent?: ContentTransformer;
     customSchema?: SchemaCustomConfig;
+    deviceEmulationSettings?: DeviceEmulationSettings;
 }
 export interface EditBlockEditorProps {
     isActive?: boolean;
@@ -22,5 +28,8 @@ export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationPro
 }
 export declare enum ViewModeItem {
     Edititng = "editing",
-    View = "view"
+    Desktop = "desktop",
+    Tablet = "tablet",
+    Mobile = "mobile"
 }
+export {};

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

@@ -1,5 +1,7 @@
 export var ViewModeItem;
 (function (ViewModeItem) {
     ViewModeItem["Edititng"] = "editing";
-    ViewModeItem["View"] = "view";
+    ViewModeItem["Desktop"] = "desktop";
+    ViewModeItem["Tablet"] = "tablet";
+    ViewModeItem["Mobile"] = "mobile";
 })(ViewModeItem || (ViewModeItem = {}));

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

@@ -1,4 +1,5 @@
 import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
+import { ViewModeItem } from '../types';
 export declare const formatBlockName: (name: string) => string;
 export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?: CustomConfig) => {
     decorators: {
@@ -10,3 +11,4 @@ export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?:
     loadable?: import("../../models").LoadableConfig | undefined;
 };
 export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;
+export declare const checkIsMobile: (viewMode: ViewModeItem) => boolean;

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

@@ -1,7 +1,9 @@
 import _ from 'lodash';
+import { ViewModeItem } from '../types';
 export const formatBlockName = (name) => _.capitalize(name).replace(/(block|-)/g, ' ');
 export const addCustomDecorator = (decorators, custom = {}) => {
     const customDecorators = custom.decorators || {};
     return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, customDecorators), { block: [...(customDecorators.block || []), ...decorators] }) });
 };
 export const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;
+export const checkIsMobile = (viewMode) => [ViewModeItem.Mobile, ViewModeItem.Tablet].includes(viewMode);

package/build/esm/editor/widget/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DeviceFrameMessageType: {
+    Ready: string;
+    Update: string;
+};

package/build/esm/editor/widget/constants.js

@@ -0,0 +1,5 @@
+const prefix = 'PC_EDITOR_DEVICE';
+export const DeviceFrameMessageType = {
+    Ready: `${prefix}_MESSAGE_READY`,
+    Update: `${prefix}_MESSAGE_UPDATE`,
+};

package/build/esm/editor/widget/index.d.ts

@@ -0,0 +1,21 @@
+import { EditorContextType } from '../context';
+import { DeviceEmulationSettings } from '../types';
+interface DeviceIframeParams {
+    initialData?: EditorContextType;
+    className?: string;
+    settings?: DeviceEmulationSettings;
+}
+type InitialData = EditorContextType;
+export declare class DeviceIframe {
+    iframeElement?: HTMLIFrameElement;
+    private initialData?;
+    private settings?;
+    constructor(parentElement: HTMLDivElement, { className, initialData, settings }: DeviceIframeParams);
+    onDataUpdate(data: InitialData): void;
+    onActivenessUpdate(active: boolean): void;
+    destroy(): void;
+    private addWidgetScript;
+    private addCustomStyles;
+    private onInit;
+}
+export {};