@gravity-ui/page-constructor 3.10.3 → 3.12.0

package/README.md

@@ -1,11 +1,5 @@
 # @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
 
-## Install
-
-```shell
-npm install @gravity-ui/page-constructor
-```
-
 ## Page constructor
 
 `Page-constructor` is a library for rendering web pages or their parts based on `JSON` data (support for `YAML` format is to be added later).
@@ -14,6 +8,12 @@ When creating pages, component-based approach is used: a page is built using a s
 
 For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/story/information--blocks).
 
+## Install
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
 ### Getting started
 
 The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
@@ -374,17 +374,15 @@ Editor provides user interface for page content management with realtime preview
 How to use:
 
 ```tsx
-import {PageConstructor} from '@gravity-ui/page-constructor';
 import {Editor} from '@gravity-ui/page-constructor/editor';
 
 interface MyAppEditorProps {
   initialContent: PageContent;
+  transformContent: ContentTransformer;
   onChange: (content: PageContent) => void;
 }
 
-export const MyAppEditor = ({initialContent, onChange}: MyAppEditorProps) => (
-  <Editor onChange={onChange} content={initialContent}>
-    {(props) => <PageConstructor {...props} />}
-  </Editor>
+export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppEditorProps) => (
+  <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
 );
 ```

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

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

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

@@ -5,13 +5,16 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
+const Tablet_1 = require("../../icons/Tablet");
 const types_1 = require("../../types");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const ICON_SIZE = 14;
 const b = (0, utils_1.block)('control-panel');
 const ControlPanelViewModeIcons = {
     [types_1.ViewModeItem.Edititng]: icons_1.Pencil,
-    [types_1.ViewModeItem.View]: icons_1.Display,
+    [types_1.ViewModeItem.Desktop]: icons_1.Display,
+    [types_1.ViewModeItem.Tablet]: Tablet_1.Tablet,
+    [types_1.ViewModeItem.Mobile]: icons_1.Smartphone,
 };
 const ControlPanel = ({ viewMode = types_1.ViewModeItem.Edititng, onViewModeChange, className, }) => (react_1.default.createElement("div", { className: b(null, className) },
     react_1.default.createElement("div", { className: b('mode-switch') },

package/build/cjs/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/cjs/editor/components/DeviceEmulation/DeviceEmulation.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const DeviceEmulationMobile_1 = tslib_1.__importDefault(require("./DeviceEmulationMobile/DeviceEmulationMobile"));
+const utils_1 = require("./utils");
+const DeviceEmulation = ({ children, mode }) => (react_1.default.createElement(react_1.Fragment, null,
+    !(0, utils_1.isMobileDevice)(mode) && children,
+    utils_1.mobileDevices.map((device) => (react_1.default.createElement(DeviceEmulationMobile_1.default, { key: device, device: device, active: mode === device }, children)))));
+exports.default = DeviceEmulation;

package/build/cjs/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/cjs/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.d.ts

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

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../utils");
+const context_1 = require("../../../context");
+const widget_1 = require("../../../widget");
+const b = (0, utils_1.block)('device-emulation-mobile');
+const DeviceEmulationMobile = ({ device, active }) => {
+    const _a = (0, react_1.useContext)(context_1.EditorContext), { deviceEmulationSettings } = _a, initialData = tslib_1.__rest(_a, ["deviceEmulationSettings"]);
+    const containerRef = (0, react_1.useRef)(null);
+    const deviceIframeRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        let iframe;
+        if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
+            iframe = new widget_1.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]);
+    (0, react_1.useEffect)(() => {
+        if (deviceIframeRef.current) {
+            deviceIframeRef.current.onActivenessUpdate(active);
+        }
+    }, [active]);
+    (0, react_1.useEffect)(() => {
+        if (deviceIframeRef.current && initialData) {
+            deviceIframeRef.current.onDataUpdate(initialData);
+        }
+    }, [initialData]);
+    return react_1.default.createElement("div", { className: b({ active, device }), ref: containerRef });
+};
+exports.default = DeviceEmulationMobile;

package/build/cjs/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/cjs/editor/components/DeviceEmulation/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMobileDevice = exports.mobileDevices = void 0;
+const types_1 = require("../../types");
+exports.mobileDevices = [types_1.ViewModeItem.Tablet, types_1.ViewModeItem.Mobile];
+const isMobileDevice = (mode) => [types_1.ViewModeItem.Tablet, types_1.ViewModeItem.Mobile].includes(mode);
+exports.isMobileDevice = isMobileDevice;

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

@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const types_1 = require("../../types");
 const ControlPanel_1 = tslib_1.__importDefault(require("../ControlPanel/ControlPanel"));
+const DeviceEmulation_1 = tslib_1.__importDefault(require("../DeviceEmulation/DeviceEmulation"));
 const b = (0, utils_1.block)('editor-layout');
 const Left = () => null;
 const Right = () => null;
@@ -29,7 +30,8 @@ const Layout = ({ children, mode, onModeChange }) => {
         react_1.default.createElement("div", { className: b('container') },
             react_1.default.createElement(react_1.Fragment, null,
                 left && react_1.default.createElement("div", { className: b('left') }, left),
-                right && react_1.default.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
+                right && (react_1.default.createElement("div", { className: b('right', { editing: isEditingMode }) },
+                    react_1.default.createElement(DeviceEmulation_1.default, { mode: mode }, right)))))));
 };
 Layout.Left = Left;
 Layout.Right = Right;

package/build/cjs/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/cjs/editor/containers/Editor/Editor.js

@@ -3,21 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const PageConstructor_1 = require("../../../containers/PageConstructor");
 const AddBlock_1 = tslib_1.__importDefault(require("../../components/AddBlock/AddBlock"));
 const EditBlock_1 = tslib_1.__importDefault(require("../../components/EditBlock/EditBlock"));
 const ErrorBoundary_1 = require("../../components/ErrorBoundary/ErrorBoundary");
 const Layout_1 = tslib_1.__importDefault(require("../../components/Layout/Layout"));
 const NotFoundBlock_1 = require("../../components/NotFoundBlock/NotFoundBlock");
+const context_1 = require("../../context");
 const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
 const store_1 = require("../../store");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
 const Editor = (_a) => {
-    var { children, customSchema, onChange } = _a, rest = tslib_1.__rest(_a, ["children", "customSchema", "onChange"]);
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
     const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, store_1.useEditorState)(rest);
     const formSpecs = (0, useFormSpec_1.default)(customSchema);
     const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
+    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
     const outgoingProps = (0, react_1.useMemo)(() => {
         const custom = isEditingMode
             ? (0, utils_1.addCustomDecorator)([
@@ -27,16 +30,38 @@ const Editor = (_a) => {
                 (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.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 = (0, react_1.useMemo)(() => ({
+        constructorProps: {
+            content: transformedContent,
+            custom: rest.custom,
+        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode) }),
+        deviceEmulationSettings,
+    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings]);
     (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    return (react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate },
-        isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
-            react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
-        react_1.default.createElement(Layout_1.default.Right, null,
-            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState }, children(outgoingProps)),
-            isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))));
+    return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
+        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate },
+            isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
+                react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
+            react_1.default.createElement(Layout_1.default.Right, null,
+                react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
+                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps),
+                        react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
+                isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })))));
 };
 exports.Editor = Editor;

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

@@ -30,8 +30,8 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
             break;
         }
         case FormTab.Blocks: {
-            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form') },
-                react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.getBlockKey)(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form'), key: (0, utils_1.getBlockKey)(blockData, index) },
+                react_1.default.createElement(BlockForm_1.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/cjs/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/cjs/editor/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.EditorContext = react_1.default.createContext({});

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

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tablet = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../../utils/svg");
+const Tablet = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "12", height: "14", viewBox: "0 0 12 14", fill: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.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" })));
+exports.Tablet = Tablet;

package/build/cjs/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/cjs/editor/types/index.js

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

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockId = exports.addCustomDecorator = exports.formatBlockName = void 0;
+exports.checkIsMobile = exports.getBlockId = exports.addCustomDecorator = exports.formatBlockName = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const types_1 = require("../types");
 const formatBlockName = (name) => lodash_1.default.capitalize(name).replace(/(block|-)/g, ' ');
 exports.formatBlockName = formatBlockName;
 const addCustomDecorator = (decorators, custom = {}) => {
@@ -12,3 +13,5 @@ const addCustomDecorator = (decorators, custom = {}) => {
 exports.addCustomDecorator = addCustomDecorator;
 const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;
 exports.getBlockId = getBlockId;
+const checkIsMobile = (viewMode) => [types_1.ViewModeItem.Mobile, types_1.ViewModeItem.Tablet].includes(viewMode);
+exports.checkIsMobile = checkIsMobile;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceFrameMessageType = void 0;
+const prefix = 'PC_EDITOR_DEVICE';
+exports.DeviceFrameMessageType = {
+    Ready: `${prefix}_MESSAGE_READY`,
+    Update: `${prefix}_MESSAGE_UPDATE`,
+};

package/build/cjs/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 {};

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceIframe = void 0;
+const tslib_1 = require("tslib");
+//widget bundle available after build only
+//@ts-ignore
+const widget_1 = tslib_1.__importDefault(require("../../../../widget"));
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+class DeviceIframe {
+    constructor(parentElement, { className = '', initialData, settings }) {
+        const iframe = document.createElement('iframe');
+        parentElement.appendChild(iframe);
+        if (iframe.contentWindow) {
+            const frameDoc = iframe.contentWindow.document;
+            iframe.className = className;
+            frameDoc.body.classList.add(...document.body.classList, ...className.split(' '));
+            iframe.style.visibility = 'hidden';
+            this.iframeElement = iframe;
+            this.initialData = initialData;
+            this.settings = settings;
+            window.addEventListener('message', this.onInit.bind(this));
+            this.addWidgetScript();
+            this.addCustomStyles();
+        }
+    }
+    onDataUpdate(data) {
+        var _a, _b;
+        (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
+            type: constants_1.DeviceFrameMessageType.Update,
+            data,
+        }, window.origin);
+    }
+    onActivenessUpdate(active) {
+        if (this.iframeElement) {
+            this.iframeElement.style.visibility = active ? 'visible' : 'hidden';
+        }
+    }
+    destroy() {
+        window.removeEventListener('message', this.onInit.bind(this));
+    }
+    addWidgetScript() {
+        var _a, _b;
+        const frameDoc = (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (frameDoc) {
+            const head = frameDoc === null || frameDoc === void 0 ? void 0 : frameDoc.getElementsByTagName('head')[0];
+            const script = frameDoc.createElement('script');
+            script.appendChild(document.createTextNode(widget_1.default));
+            head.appendChild(script);
+        }
+    }
+    addCustomStyles() {
+        var _a, _b;
+        const { applyHostStyles, customStyles } = this.settings || {};
+        const frameDoc = (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (frameDoc) {
+            const head = frameDoc === null || frameDoc === void 0 ? void 0 : frameDoc.getElementsByTagName('head')[0];
+            let styles = applyHostStyles ? (0, utils_1.getHostStyles)() : '';
+            if (customStyles) {
+                styles += `\n${customStyles}`;
+            }
+            if (styles) {
+                const style = frameDoc.createElement('style');
+                style.appendChild(document.createTextNode(styles));
+                head.appendChild(style);
+            }
+        }
+    }
+    onInit(event) {
+        const { type } = event.data;
+        if (type === constants_1.DeviceFrameMessageType.Ready && this.initialData) {
+            this.onDataUpdate(this.initialData);
+        }
+    }
+}
+exports.DeviceIframe = DeviceIframe;

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

@@ -0,0 +1 @@
+export declare const getHostStyles: () => string;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHostStyles = void 0;
+const getHostStyles = () => {
+    return [...document.styleSheets]
+        .map((styleSheet) => {
+        try {
+            return [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
+        }
+        catch (e) {
+            //eslint-disable-next-line no-console
+            console.log(`Access to stylesheet  ${styleSheet.href} is denied. Ignoring...`);
+            return '';
+        }
+    })
+        .filter(Boolean)
+        .join('\n');
+};
+exports.getHostStyles = getHostStyles;

package/build/cjs/hooks/useHeightCalculator.js

@@ -16,7 +16,7 @@ const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
     }, [containerRef, containerHeight, setContainerHeight]);
     (0, react_1.useEffect)(() => {
         const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
-        calculateContainerHeight();
+        handleResize();
         window.addEventListener('resize', handleResize, { passive: true });
         return () => {
             window.removeEventListener('resize', handleResize);

package/build/cjs/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;