@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.0

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

@@ -1,2 +1,2 @@
-export { Editor } from './Containers/Editor';
+export { Editor } from './containers/Editor/Editor';
 export * from './types';

package/build/cjs/editor/index.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const tslib_1 = require("tslib");
-var Editor_1 = require("./Containers/Editor");
+var Editor_1 = require("./containers/Editor/Editor");
 Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.Editor; } });
 tslib_1.__exportStar(require("./types"), exports);

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

@@ -1,15 +1,16 @@
-import { Block } from '../../models';
-import { EditorProps } from '../types';
+import { Block, BlockDecorationProps, PageContent, Theme } from '../../models';
+import { EditBlockProps, EditorProps, ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
-    content: import("../../models").PageContent;
-    editControlsProps: {
-        activeBlockId: import("./reducer").EditorBlockId;
-        orderedBlocksCount: number;
-        onDelete: (id: EditorBlockId) => void;
-        onSelect: (id: EditorBlockId) => void;
-        onCopy: (index: number) => void;
-        onOrderChange: (oldIndex: number, newIndex: number) => void;
-    };
+    activeBlockIndex: number;
+    content: PageContent;
+    errorBoundaryState: number;
+    viewMode: ViewModeItem;
+    theme: Theme;
+    injectEditBlockProps: ({ type, index: relativeIndex, children, ...rest }: BlockDecorationProps) => EditBlockProps;
     onAdd: (block: Block) => void;
+    onSelect: (index: number) => void;
+    onContentUpdate: (newContent: PageContent) => void;
+    onViewModeUpdate: (newViewMode: ViewModeItem) => void;
+    onThemeUpdate: (newTheme: Theme) => void;
 };

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

@@ -1,32 +1,87 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEditorState = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
+const constants_1 = require("../../components/constants");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
+const EditBlock_1 = require("../components/EditBlock/EditBlock");
+const types_1 = require("../types");
 const reducer_1 = require("./reducer");
 const utils_2 = require("./utils");
 function useEditorState({ content: intialContent, custom }) {
-    const headerBlockTypes = (0, react_1.useMemo)(() => [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)], [custom]);
-    const reducer = (0, react_1.useMemo)(() => (0, reducer_1.getReducer)(headerBlockTypes), [headerBlockTypes]);
-    const [{ activeBlockId, content, orderedBlocksCount }, dispatch] = (0, react_1.useReducer)(reducer, {
-        activeBlockId: 0,
-        orderedBlocksCount: (0, utils_1.getOrderedBlocks)(intialContent.blocks, headerBlockTypes).length,
+    const [{ activeBlockIndex, content, errorBoundaryState, viewMode, theme }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
+        activeBlockIndex: 0,
+        errorBoundaryState: 0,
         content: (0, utils_2.addEditorProps)(intialContent),
+        viewMode: types_1.ViewModeItem.Edititng,
+        theme: constants_1.DEFAULT_THEME,
     });
     return (0, react_1.useMemo)(() => {
+        const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
+        const contentHasHeader = Boolean((0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes));
+        const checkIsHeader = (type) => headerBlockTypes.includes(type);
+        const onAdd = (block) => {
+            const isHeader = checkIsHeader(block.type);
+            if (contentHasHeader && isHeader) {
+                //TODO: add warning that it should be only one header block
+                return;
+            }
+            // eslint-disable-next-line no-nested-ternary
+            const index = isHeader
+                ? 0
+                : activeBlockIndex === -1
+                    ? content.blocks.length
+                    : activeBlockIndex + 1;
+            dispatch({ type: reducer_1.ADD_BLOCK, payload: { block, index } });
+        };
+        const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
+        const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
+        const onViewModeUpdate = (newViewMode) => dispatch({ type: reducer_1.UPDATE_VIEW_MODE, payload: newViewMode });
+        const onThemeUpdate = (newTheme) => dispatch({ type: reducer_1.UPDATE_THEME, payload: newTheme });
+        const injectEditBlockProps = (_a) => {
+            var { type, index: relativeIndex = 0, children } = _a, rest = tslib_1.__rest(_a, ["type", "index", "children"]);
+            const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
+            const isHeader = checkIsHeader(type);
+            const index = isHeader ? 0 : relativeIndex + orderedBlocksStartIndex;
+            const isActive = activeBlockIndex === index;
+            const actions = {
+                [EditBlock_1.EditBlockControls.Delete]: () => dispatch({ type: reducer_1.DELETE_BLOCK, payload: index }),
+            };
+            if (!isHeader) {
+                actions[EditBlock_1.EditBlockControls.Copy] = () => dispatch({ type: reducer_1.COPY_BLOCK, payload: index });
+                if (index > orderedBlocksStartIndex) {
+                    actions[EditBlock_1.EditBlockControls.Up] = () => dispatch({
+                        type: reducer_1.ORDER_BLOCK,
+                        payload: { oldIndex: index, newIndex: index - 1 },
+                    });
+                }
+                if (index < content.blocks.length - 1) {
+                    actions[EditBlock_1.EditBlockControls.Down] = () => dispatch({
+                        type: reducer_1.ORDER_BLOCK,
+                        payload: { oldIndex: index, newIndex: index + 1 },
+                    });
+                }
+            }
+            return Object.assign({ children,
+                isHeader,
+                isActive,
+                actions, onSelect: () => onSelect(index) }, rest);
+        };
         return {
+            activeBlockIndex,
             content,
-            editControlsProps: {
-                activeBlockId,
-                orderedBlocksCount,
-                onDelete: (id) => dispatch({ type: reducer_1.DELETE_BLOCK, payload: id }),
-                onSelect: (id) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: id }),
-                onCopy: (index) => dispatch({ type: reducer_1.COPY_BLOCK, payload: index }),
-                onOrderChange: (oldIndex, newIndex) => dispatch({ type: reducer_1.ORDER_BLOCK, payload: { oldIndex, newIndex } }),
-            },
-            onAdd: (block) => dispatch({ type: reducer_1.ADD_BLOCK, payload: block }),
+            errorBoundaryState,
+            viewMode,
+            theme,
+            injectEditBlockProps,
+            onAdd,
+            onSelect,
+            onContentUpdate,
+            onViewModeUpdate,
+            onThemeUpdate,
         };
-    }, [content, activeBlockId, orderedBlocksCount]);
+    }, [content, activeBlockIndex, errorBoundaryState, custom, viewMode, theme]);
 }
 exports.useEditorState = useEditorState;

package/build/cjs/editor/store/reducer.d.ts

@@ -1,28 +1,37 @@
-import { Block, CustomConfig, PageContent } from '../../models';
+import { Block, PageContent, Theme } from '../../models';
+import { ViewModeItem } from '../types';
 export type EditorBlockId = number | string;
 interface EditorState {
     content: PageContent;
-    activeBlockId: EditorBlockId;
-    orderedBlocksCount: number;
-    custom?: CustomConfig;
+    activeBlockIndex: number;
+    errorBoundaryState: number;
+    viewMode: ViewModeItem;
+    theme: Theme;
 }
 interface OrderBlockParams {
     oldIndex: number;
     newIndex: number;
 }
+interface AddBlockParams {
+    block: Block;
+    index: number;
+}
 export declare const SELECT_BLOCK = "SELECT_BLOCK";
 export declare const DELETE_BLOCK = "DELETE_BLOCK";
 export declare const COPY_BLOCK = "COPY_BLOCK";
 export declare const ADD_BLOCK = "ADD_BLOCK";
 export declare const SET_REGION = "SET_REGION";
 export declare const ORDER_BLOCK = "ORDER_BLOCK";
+export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
+export declare const UPDATE_VIEW_MODE = "UPDATE_VIEW_MODE";
+export declare const UPDATE_THEME = "UPDATE_THEME";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
-    payload: EditorBlockId;
+    payload: number;
 }
 interface DeleteBlock {
     type: typeof DELETE_BLOCK;
-    payload: EditorBlockId;
+    payload: number;
 }
 interface CopyBlock {
     type: typeof COPY_BLOCK;
@@ -30,12 +39,24 @@ interface CopyBlock {
 }
 interface AddBlock {
     type: typeof ADD_BLOCK;
-    payload: Block;
+    payload: AddBlockParams;
 }
 interface OrderBlock {
     type: typeof ORDER_BLOCK;
     payload: OrderBlockParams;
 }
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock;
-export declare const getReducer: (headerBlockTypes: string[]) => (state: EditorState, action: EditorAction) => EditorState;
+interface UpdateContent {
+    type: typeof UPDATE_CONTENT;
+    payload: PageContent;
+}
+interface UpdateViewMode {
+    type: typeof UPDATE_VIEW_MODE;
+    payload: ViewModeItem;
+}
+interface UpdateTheme {
+    type: typeof UPDATE_THEME;
+    payload: Theme;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent | UpdateViewMode | UpdateTheme;
+export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
 export {};

package/build/cjs/editor/store/reducer.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getReducer = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
-const utils_1 = require("../../utils");
-const utils_2 = require("./utils");
+exports.reducer = exports.UPDATE_THEME = exports.UPDATE_VIEW_MODE = exports.UPDATE_CONTENT = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
+const utils_1 = require("./utils");
 // actions
 exports.SELECT_BLOCK = 'SELECT_BLOCK';
 exports.DELETE_BLOCK = 'DELETE_BLOCK';
@@ -10,50 +9,40 @@ exports.COPY_BLOCK = 'COPY_BLOCK';
 exports.ADD_BLOCK = 'ADD_BLOCK';
 exports.SET_REGION = 'SET_REGION';
 exports.ORDER_BLOCK = 'ORDER_BLOCK';
+exports.UPDATE_CONTENT = 'UPDATE_CONTENT';
+exports.UPDATE_VIEW_MODE = 'UPDATE_VIEW_MODE';
+exports.UPDATE_THEME = 'UPDATE_THEME';
 // reducer
-const getReducer = (headerBlockTypes) => (state, action) => {
+const reducer = (state, action) => {
     const { content } = state;
-    const header = (0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes);
-    const orderedBlocks = (0, utils_1.getOrderedBlocks)(content.blocks, headerBlockTypes);
-    const withHeader = (blocks) => [header, ...blocks].filter(Boolean);
-    const getNewState = (blocks, activeBlockId) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockId, orderedBlocksCount: orderedBlocks.length }));
+    const getNewState = (blocks, activeBlockIndex) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockIndex }));
     switch (action.type) {
+        case exports.UPDATE_CONTENT:
+            return Object.assign(Object.assign({}, state), { content: action.payload, errorBoundaryState: (0, utils_1.getErrorBoundaryState)(state.errorBoundaryState) });
         case exports.SELECT_BLOCK:
-            return getNewState(content.blocks, action.payload);
+            return Object.assign(Object.assign({}, state), { activeBlockIndex: action.payload });
         case exports.DELETE_BLOCK: {
             const blockId = action.payload;
-            return getNewState(typeof blockId === 'string'
-                ? content.blocks.filter(({ type }) => type !== blockId)
-                : withHeader(orderedBlocks.filter((_block, index) => index !== blockId)), -1);
+            return getNewState(content.blocks.filter((_block, index) => index !== blockId), -1);
         }
         case exports.COPY_BLOCK: {
             const index = action.payload;
-            return getNewState(withHeader((0, utils_2.duplicateBlock)(orderedBlocks, index)), index + 1);
+            return getNewState((0, utils_1.duplicateBlock)(content.blocks, index), index + 1);
         }
         case exports.ADD_BLOCK: {
-            let blocks;
-            let activeBlockId;
-            const block = action.payload;
-            if (headerBlockTypes.includes(block.type)) {
-                blocks = header ? blocks : [block, ...orderedBlocks];
-                activeBlockId = block.type;
-            }
-            else {
-                const newBlockIndex = (0, utils_2.getNewBlockIndex)(state.activeBlockId, orderedBlocks.length);
-                blocks = withHeader((0, utils_2.addBlock)(orderedBlocks, block, newBlockIndex));
-                activeBlockId = newBlockIndex;
-            }
-            if (blocks) {
-                return getNewState(blocks, activeBlockId);
-            }
-            return state;
+            const { block, index } = action.payload;
+            return getNewState((0, utils_1.addBlock)(content.blocks, block, index), index);
         }
         case exports.ORDER_BLOCK: {
             const { oldIndex, newIndex } = action.payload;
-            return getNewState(withHeader((0, utils_2.changeBlocksOrder)(orderedBlocks, oldIndex, newIndex)), newIndex);
+            return getNewState((0, utils_1.changeBlocksOrder)(content.blocks, oldIndex, newIndex), newIndex);
         }
+        case exports.UPDATE_VIEW_MODE:
+            return Object.assign(Object.assign({}, state), { viewMode: action.payload });
+        case exports.UPDATE_THEME:
+            return Object.assign(Object.assign({}, state), { theme: action.payload });
         default:
             return state;
     }
 };
-exports.getReducer = getReducer;
+exports.reducer = reducer;

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

@@ -10,3 +10,4 @@ export declare const addEditorProps: (content: PageContent) => {
     menu?: import("../../models").Menu | undefined;
     background?: import("../../models").ThemedMediaProps | undefined;
 };
+export declare const getErrorBoundaryState: (prevState: number) => number;

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEditorProps = exports.addBlock = exports.getNewBlockIndex = exports.duplicateBlock = exports.changeBlocksOrder = void 0;
+exports.getErrorBoundaryState = exports.addEditorProps = exports.addBlock = exports.getNewBlockIndex = exports.duplicateBlock = exports.changeBlocksOrder = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const changeBlocksOrder = (array, oldIndex, newIndex) => {
     const result = [...array];
     const element = result.splice(oldIndex, 1)[0];
@@ -10,7 +12,7 @@ const changeBlocksOrder = (array, oldIndex, newIndex) => {
 exports.changeBlocksOrder = changeBlocksOrder;
 const duplicateBlock = (array, index) => {
     const result = [...array];
-    result.splice(index + 1, 0, result[index]);
+    result.splice(index + 1, 0, lodash_1.default.cloneDeep(result[index]));
     return result;
 };
 exports.duplicateBlock = duplicateBlock;
@@ -32,3 +34,5 @@ const addEditorProps = (content) => {
     return Object.assign(Object.assign({}, content), { animated: false });
 };
 exports.addEditorProps = addEditorProps;
+const getErrorBoundaryState = (prevState) => prevState === Number.MAX_SAFE_INTEGER ? 0 : prevState + 1;
+exports.getErrorBoundaryState = getErrorBoundaryState;

package/build/cjs/editor/styles/root.css

@@ -0,0 +1,7 @@
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-private-yellow-400-solid);
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+}

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

@@ -1,17 +1,35 @@
-/// <reference types="react" />
-import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecoratorProps, PageData } from '../../models';
+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;
+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: Partial<PageConstructorProps>) => React.ReactNode;
-    onChange?: (data: PageData) => void;
+    providerProps?: PageConstructorProviderProps;
+    onChange?: (data: PageContent) => void;
+    transformContent?: ContentTransformer;
+    customSchema?: SchemaCustomConfig;
+    deviceEmulationSettings?: DeviceEmulationSettings;
 }
 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",
+    Desktop = "desktop",
+    Tablet = "tablet",
+    Mobile = "mobile"
 }
-export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;
+export {};

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

@@ -1,2 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewModeItem = void 0;
+var ViewModeItem;
+(function (ViewModeItem) {
+    ViewModeItem["Edititng"] = "editing";
+    ViewModeItem["Desktop"] = "desktop";
+    ViewModeItem["Tablet"] = "tablet";
+    ViewModeItem["Mobile"] = "mobile";
+})(ViewModeItem = exports.ViewModeItem || (exports.ViewModeItem = {}));

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

@@ -1,11 +1,14 @@
-import { BlockDecorator, CustomConfig } from '../../models';
+import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
+import { ViewModeItem } from '../types';
 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;
+export declare const checkIsMobile: (viewMode: ViewModeItem) => boolean;

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

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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 = (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;
+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/grid/Col/Col.d.ts

@@ -1,10 +1,9 @@
 import React, { CSSProperties } from 'react';
-import { Refable } from '../../models/common';
+import { QAProps, Refable } from '../../models/common';
 import { WithChildren } from '../../models/react';
 import { GridColumnClassParams } from '../types';
-export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement> {
+export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
     style?: CSSProperties;
-    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" | "sizes" | "className" | "hidden" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/grid/Col/Col.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../utils");
 exports.Col = (0, react_1.forwardRef)((props, ref) => {
-    const { children, style, dataQa } = props, rest = tslib_1.__rest(props, ["children", "style", "dataQa"]);
-    return (react_1.default.createElement("div", { ref: ref, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": dataQa }, children));
+    const { children, style, qa } = props, rest = tslib_1.__rest(props, ["children", "style", "qa"]);
+    return (react_1.default.createElement("div", { ref: ref, className: (0, utils_1.getColClass)(rest), style: style, "data-qa": qa }, children));
 });
 exports.Col.displayName = 'Col';

package/build/cjs/grid/Grid/Grid.css

@@ -17,7 +17,7 @@
 .pc-Grid_debug .container-fluid,
 .pc-Grid_debug [class*=col-] {
   box-sizing: border-box;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 @media only screen and (max-width: 577px) {
   .pc-Grid .container,

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);