@gravity-ui/page-constructor 5.33.3 → 5.33.4-beta.0

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

@@ -1,18 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Popup, TextInput } from '@gravity-ui/uikit';
-import { blockMap } from '../../../constructor-items';
-import { block } from '../../../utils';
-import { getEditorBlocksData } from '../../data';
+import { blockMap } from "../../../constructor-items.js";
+import { block } from "../../../utils/index.js";
+import { getEditorBlocksData } from "../../data/index.js";
 import './AddBlock.css';
 const b = block('add-block');
 const sortedBlockNames = Object.keys(blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
-    const [isOpened, setIsOpened] = useState(false);
-    const [search, setSearch] = useState('');
-    const [editorBlocksData, setEditorBlocksData] = useState(null);
-    const ref = useRef(null);
-    const blocks = useMemo(() => {
+    const [isOpened, setIsOpened] = React.useState(false);
+    const [search, setSearch] = React.useState('');
+    const [editorBlocksData, setEditorBlocksData] = React.useState(null);
+    const ref = React.useRef(null);
+    const blocks = React.useMemo(() => {
         if (!editorBlocksData) {
             return [];
         }
@@ -21,38 +22,28 @@ const AddBlock = ({ onAdd, className }) => {
             return (_a = editorBlocksData[blockName]) === null || _a === void 0 ? void 0 : _a.meta.title.toLocaleLowerCase().startsWith(search.toLocaleLowerCase());
         });
     }, [editorBlocksData, search]);
-    useEffect(() => {
+    React.useEffect(() => {
         const loadEditorBlocksData = async () => {
             const data = await getEditorBlocksData();
             setEditorBlocksData(data);
         };
         loadEditorBlocksData();
     }, []);
-    return (React.createElement("div", { className: b(null, className), ref: ref },
-        React.createElement("button", { className: b('button'), type: "button", onClick: () => {
-                setIsOpened(!isOpened);
-                setSearch('');
-            } },
-            React.createElement(Plus, { className: b('icon') })),
-        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, contentClassName: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
-            React.createElement("div", { className: b('search') },
-                React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
-            React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
-                var _a;
-                const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
-                if (!blockData) {
-                    return null;
-                }
-                const Preview = blockData.preview;
-                return (React.createElement("button", { key: blockName, className: b('block'), onClick: () => {
-                        onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
-                        setIsOpened(false);
-                    } },
-                    React.createElement("div", { className: b('preview') },
-                        React.createElement(Preview, null)),
-                    React.createElement("div", { className: b('info') },
-                        React.createElement("h4", { className: b('title') }, blockData.meta.title),
-                        ((_a = blockData === null || blockData === void 0 ? void 0 : blockData.meta) === null || _a === void 0 ? void 0 : _a.description) && (React.createElement("p", { className: b('description') }, blockData.meta.description)))));
-            }))))));
+    return (_jsxs("div", { className: b(null, className), ref: ref, children: [_jsx("button", { className: b('button'), type: "button", onClick: () => {
+                    setIsOpened(!isOpened);
+                    setSearch('');
+                }, children: _jsx(Plus, { className: b('icon') }) }), isOpened && (_jsxs(Popup, { anchorRef: ref, open: isOpened, placement: "top", offset: { mainAxis: 0, crossAxis: 24 }, onOutsideClick: () => setIsOpened(false), children: [_jsx("div", { className: b('search'), children: _jsx(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) }) }), _jsx("div", { className: b('blocks'), children: blocks.map((blockName) => {
+                            var _a;
+                            const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
+                            if (!blockData) {
+                                return null;
+                            }
+                            const Preview = blockData.preview;
+                            return (_jsxs("button", { className: b('block'), onClick: () => {
+                                    onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
+                                    setIsOpened(false);
+                                }, children: [_jsx("div", { className: b('preview'), children: _jsx(Preview, {}) }), _jsxs("div", { className: b('info'), children: [_jsx("h4", { className: b('title'), children: blockData.meta.title }), ((_a = blockData === null || blockData === void 0 ? void 0 : blockData.meta) === null || _a === void 0 ? void 0 : _a.description) && (_jsx("p", { className: b('description'), children: blockData.meta.description }))] })] }, blockName));
+                        }) })] }))] }));
 };
 export default AddBlock;
+//# sourceMappingURL=AddBlock.js.map

package/build/esm/editor/components/AddBlock/AddBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddBlock.js","sourceRoot":"../../../../../src","sources":["editor/components/AddBlock/AddBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Plus} from '@gravity-ui/icons';\nimport {Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {blockMap} from '../../../constructor-items';\nimport {Block, BlockType, ClassNameProps} from '../../../models';\nimport {block} from '../../../utils';\nimport {EditorBlocksData, getEditorBlocksData} from '../../data';\n\nimport './AddBlock.scss';\n\nconst b = block('add-block');\n\nexport interface AddBlockProps extends ClassNameProps {\n    onAdd: (data: Block) => void;\n}\n\nconst sortedBlockNames = Object.keys(blockMap).sort();\n\nconst AddBlock = ({onAdd, className}: React.PropsWithChildren<AddBlockProps>) => {\n    const [isOpened, setIsOpened] = React.useState(false);\n    const [search, setSearch] = React.useState('');\n    const [editorBlocksData, setEditorBlocksData] = React.useState<EditorBlocksData | null>(null);\n\n    const ref = React.useRef(null);\n    const blocks = React.useMemo(() => {\n        if (!editorBlocksData) {\n            return [];\n        }\n\n        return sortedBlockNames.filter((blockName) =>\n            editorBlocksData[blockName as BlockType]?.meta.title\n                .toLocaleLowerCase()\n                .startsWith(search.toLocaleLowerCase()),\n        );\n    }, [editorBlocksData, search]);\n\n    React.useEffect(() => {\n        const loadEditorBlocksData = async () => {\n            const data = await getEditorBlocksData();\n            setEditorBlocksData(data);\n        };\n\n        loadEditorBlocksData();\n    }, []);\n\n    return (\n        <div className={b(null, className)} ref={ref}>\n            <button\n                className={b('button')}\n                type=\"button\"\n                onClick={() => {\n                    setIsOpened(!isOpened);\n                    setSearch('');\n                }}\n            >\n                <Plus className={b('icon')} />\n            </button>\n            {isOpened && (\n                <Popup\n                    anchorRef={ref}\n                    open={isOpened}\n                    placement=\"top\"\n                    offset={{mainAxis: 0, crossAxis: 24}}\n                    onOutsideClick={() => setIsOpened(false)}\n                >\n                    <div className={b('search')}>\n                        <TextInput\n                            placeholder=\"search\"\n                            type=\"text\"\n                            value={search}\n                            size=\"l\"\n                            onUpdate={(value) => setSearch(value)}\n                        />\n                    </div>\n                    <div className={b('blocks')}>\n                        {blocks.map((blockName) => {\n                            const blockData = editorBlocksData?.[blockName as BlockType];\n\n                            if (!blockData) {\n                                return null;\n                            }\n\n                            const Preview: React.FC<React.SVGProps<SVGSVGElement>> =\n                                blockData.preview;\n\n                            return (\n                                <button\n                                    key={blockName}\n                                    className={b('block')}\n                                    onClick={() => {\n                                        onAdd(blockData?.template as Block);\n                                        setIsOpened(false);\n                                    }}\n                                >\n                                    <div className={b('preview')}>\n                                        <Preview />\n                                    </div>\n                                    <div className={b('info')}>\n                                        <h4 className={b('title')}>{blockData.meta.title}</h4>\n                                        {blockData?.meta?.description && (\n                                            <p className={b('description')}>\n                                                {blockData.meta.description}\n                                            </p>\n                                        )}\n                                    </div>\n                                </button>\n                            );\n                        })}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n};\n\nexport default AddBlock;\n"]}

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Block, ConstructorBlock } from '../../../models';
-import { CustomSpec } from '../../dynamic-forms-custom/parser/types';
+import * as React from 'react';
+import { Block, ConstructorBlock } from "../../../models/index.js";
+import { CustomSpec } from "../../dynamic-forms-custom/parser/types.js";
 interface BlockFormProps {
     data: ConstructorBlock;
     spec: CustomSpec;
@@ -8,5 +8,5 @@ interface BlockFormProps {
     onSelect: () => void;
     active?: boolean;
 }
-export declare const BlockForm: React.MemoExoticComponent<({ data: { type, ...content }, onChange, onSelect, active, spec: specRaw }: BlockFormProps) => JSX.Element>;
+export declare const BlockForm: React.MemoExoticComponent<({ data: { type, ...content }, onChange, onSelect, active, spec: specRaw }: BlockFormProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,26 +1,26 @@
 import { __rest } from "tslib";
-import React, { Fragment, memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
 import isEqual from 'lodash/isEqual';
 import noop from 'lodash/noop';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
-import { dynamicConfig } from '../../dynamic-forms-custom/config';
-import usePreviousValue from '../../hooks/usePreviousValue';
-export const BlockForm = memo((_a) => {
+import { dynamicConfig } from "../../dynamic-forms-custom/config.js";
+import usePreviousValue from "../../hooks/usePreviousValue.js";
+export const BlockForm = React.memo((_a) => {
     var _b = _a.data, { type } = _b, content = __rest(_b, ["type"]), { onChange, onSelect, active, spec: specRaw } = _a;
-    const initialValues = useMemo(() => ({ content }), [content]);
+    const initialValues = React.useMemo(() => ({ content }), [content]);
     const prevContent = usePreviousValue(content);
-    const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
+    const spec = React.useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
     if (!active) {
-        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
+        return (_jsx(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect, children: ' ' }));
     }
-    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: noop }, () => (React.createElement(Fragment, null,
-        React.createElement(FormSpy, { onChange: ({ values }) => {
-                // fix for FormSpy onChange called twice without content changes
-                if (!isEqual(values.content, prevContent)) {
-                    onChange(Object.assign({ type }, values.content));
-                }
-            }, subscription: { values: true } }),
-        React.createElement(DynamicField, { name: "content", spec: spec, config: dynamicConfig, withoutInsertFFDebounce: true })))));
+    return (_jsx(FinalForm, { initialValues: initialValues, onSubmit: noop, children: () => (_jsxs(React.Fragment, { children: [_jsx(FormSpy, { onChange: ({ values }) => {
+                        // fix for FormSpy onChange called twice without content changes
+                        if (!isEqual(values.content, prevContent)) {
+                            onChange(Object.assign({ type }, values.content));
+                        }
+                    }, subscription: { values: true } }), _jsx(DynamicField, { name: "content", spec: spec, config: dynamicConfig, withoutInsertFFDebounce: true })] })) }));
 });
 BlockForm.displayName = 'BlockForm';
+//# sourceMappingURL=BlockForm.js.map

package/build/esm/editor/components/BlockForm/BlockForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockForm.js","sourceRoot":"../../../../../src","sources":["editor/components/BlockForm/BlockForm.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAE,uBAAuB,EAAO,MAAM,2BAA2B,CAAC;AACtF,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,EAAC,IAAI,IAAI,SAAS,EAAE,OAAO,EAAC,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAC,aAAa,EAAC,6CAA0C;AAEhE,OAAO,gBAAgB,wCAAqC;AAU5D,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC/B,CAAC,EAAqF,EAAE,EAAE;QAAxF,YAAwB,EAAxB,EAAO,IAAI,OAAa,EAAR,OAAO,cAAjB,QAAkB,CAAD,EAAxB,EAA2B,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,OAAiB;IAClF,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CAAC,iCACC,OAAO,KACV,QAAQ,kCACD,OAAO,CAAC,QAAQ,KACnB,UAAU,EAAE,MAAM,OAExB,EACF,CAAC,OAAO,EAAE,MAAM,CAAC,CACpB,CAAC;IAEF,IAAI,CAAC,MAAM,EAAE,CAAC;QACV,OAAO,CACH,KAAC,uBAAuB,IACpB,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,IAAI,EACxC,YAAY,EAAE,QAAQ,YAE4C,GAAG,GAC/C,CAC7B,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,SAAS,IAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,YAClD,GAAG,EAAE,CAAC,CACH,MAAC,KAAK,CAAC,QAAQ,eACX,KAAC,OAAO,IACJ,QAAQ,EAAE,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;wBACnB,gEAAgE;wBAChE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC;4BACxC,QAAQ,iBAAE,IAAI,IAAK,MAAM,CAAC,OAAO,EAAE,CAAC;wBACxC,CAAC;oBACL,CAAC,EACD,YAAY,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,GAC9B,EACF,KAAC,YAAY,IACT,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAY,EAClB,MAAM,EAAE,aAAa,EACrB,uBAAuB,SACzB,IACW,CACpB,GACO,CACf,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {DynamicField, SimpleVerticalAccordeon, Spec} from '@gravity-ui/dynamic-forms';\nimport isEqual from 'lodash/isEqual';\nimport noop from 'lodash/noop';\nimport {Form as FinalForm, FormSpy} from 'react-final-form';\n\nimport {Block, ConstructorBlock} from '../../../models';\nimport {dynamicConfig} from '../../dynamic-forms-custom/config';\nimport {CustomSpec} from '../../dynamic-forms-custom/parser/types';\nimport usePreviousValue from '../../hooks/usePreviousValue';\n\ninterface BlockFormProps {\n    data: ConstructorBlock;\n    spec: CustomSpec;\n    onChange: (data: Block) => void;\n    onSelect: () => void;\n    active?: boolean;\n}\n\nexport const BlockForm = React.memo(\n    ({data: {type, ...content}, onChange, onSelect, active, spec: specRaw}: BlockFormProps) => {\n        const initialValues = React.useMemo(() => ({content}), [content]);\n        const prevContent = usePreviousValue(content);\n        const spec = React.useMemo(\n            () => ({\n                ...specRaw,\n                viewSpec: {\n                    ...specRaw.viewSpec,\n                    layoutOpen: active,\n                },\n            }),\n            [specRaw, active],\n        );\n\n        if (!active) {\n            return (\n                <SimpleVerticalAccordeon\n                    open={false}\n                    name={type}\n                    title={spec.viewSpec.layoutTitle || type}\n                    onOpenChange={onSelect}\n                >\n                    {/* SimpleVerticalAccordeon requires children, put dummy value*/}{' '}\n                </SimpleVerticalAccordeon>\n            );\n        }\n\n        return (\n            <FinalForm initialValues={initialValues} onSubmit={noop}>\n                {() => (\n                    <React.Fragment>\n                        <FormSpy\n                            onChange={({values}) => {\n                                // fix for FormSpy onChange called twice without content changes\n                                if (!isEqual(values.content, prevContent)) {\n                                    onChange({type, ...values.content});\n                                }\n                            }}\n                            subscription={{values: true}}\n                        />\n                        <DynamicField\n                            name=\"content\"\n                            spec={spec as Spec}\n                            config={dynamicConfig}\n                            withoutInsertFFDebounce\n                        />\n                    </React.Fragment>\n                )}\n            </FinalForm>\n        );\n    },\n);\n\nBlockForm.displayName = 'BlockForm';\n"]}

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { PageContent } from '../../../models';
-import { CodeEditorMessageProps } from '../../utils/validation';
+import * as React from 'react';
+import { PageContent } from "../../../models/index.js";
+import { CodeEditorMessageProps } from "../../utils/validation.js";
 import './CodeEditor.css';
 interface CodeEditorProps {
     code: string;
@@ -10,5 +10,5 @@ interface CodeEditorProps {
     onChange: (content: PageContent) => void;
     message?: CodeEditorMessageProps;
 }
-export declare const CodeEditor: React.MemoExoticComponent<({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }: CodeEditorProps) => JSX.Element>;
+export declare const CodeEditor: React.MemoExoticComponent<({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,32 +1,27 @@
-import React, { useCallback, useContext, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { ChevronsCollapseUpRight, ChevronsExpandUpRight } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import MonacoEditor from 'react-monaco-editor';
-import { Theme } from '../../../models';
-import { block } from '../../../utils';
-import { EditorContext } from '../../context';
-import { parseCode } from '../../utils/code';
-import { options } from './constants';
+import { Theme } from "../../../models/index.js";
+import { block } from "../../../utils/index.js";
+import { EditorContext } from "../../context.js";
+import { parseCode } from "../../utils/code.js";
+import { options } from "./constants.js";
 import './CodeEditor.css';
 const b = block('code-editor');
 const ON_CHANGE_DEBOUNCE_TIMEOUT = 300;
 export const CodeEditor = React.memo(({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }) => {
-    const [message, setMessage] = useState(() => validator(code));
-    const { theme = Theme.Light } = useContext(EditorContext);
+    const [message, setMessage] = React.useState(() => validator(code));
+    const { theme = Theme.Light } = React.useContext(EditorContext);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onChangeWithValidation = useCallback(debounce((newCode) => {
+    const onChangeWithValidation = React.useCallback(debounce((newCode) => {
         const validationResult = validator(newCode);
         setMessage(validationResult);
         onChange(parseCode(newCode));
     }, ON_CHANGE_DEBOUNCE_TIMEOUT), [onChange, validator]);
-    return (React.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
-        React.createElement("div", { className: b('header') },
-            React.createElement(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
-                React.createElement(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }))),
-        React.createElement("div", { className: b('code') },
-            React.createElement(MonacoEditor, { key: String(fullscreenModeOn), defaultValue: code, value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' })),
-        React.createElement("div", { className: b('footer') }, message && (React.createElement("div", { className: b('message-container') },
-            React.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
+    return (_jsxs("div", { className: b({ fullscreen: fullscreenModeOn }), children: [_jsx("div", { className: b('header'), children: _jsx(Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: _jsx(Icon, { data: fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight, size: 16 }) }) }), _jsx("div", { className: b('code'), children: _jsx(MonacoEditor, { defaultValue: code, value: code, language: "yaml", options: options, onChange: onChangeWithValidation, theme: theme === Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), _jsx("div", { className: b('footer'), children: message && (_jsx("div", { className: b('message-container'), children: _jsx("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
 });
 CodeEditor.displayName = 'CodeEditor';
+//# sourceMappingURL=CodeEditor.js.map

package/build/esm/editor/components/CodeEditor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,uBAAuB,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAc,KAAK,EAAC,iCAAwB;AACnD,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAC5C,OAAO,EAAC,SAAS,EAAC,4BAAyB;AAG3C,OAAO,EAAC,OAAO,EAAC,uBAAoB;AAEpC,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAWvC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAChC,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,IAAI,EAAkB,EAAE,EAAE;IACzF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,EAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAE9D,uDAAuD;IACvD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC5C,QAAQ,CAAC,CAAC,OAAe,EAAE,EAAE;QACzB,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAE5C,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAC7B,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,0BAA0B,CAAC,EAC9B,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,gBAAgB,EAAC,CAAC,aAC7C,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,KAAC,MAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,gBAAgB,CAAC,YAE1D,KAAC,IAAI,IACD,IAAI,EACA,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,qBAAqB,EAEtE,IAAI,EAAE,EAAE,GACV,GACG,GACP,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,YAAY,IAET,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IANzC,MAAM,CAAC,gBAAgB,CAAC,CAO/B,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACtB,OAAO,IAAI,CACR,cAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAClC,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAC,CAAC,YACjD,OAAO,CAAC,IAAI,GACX,GACJ,CACT,GACC,IACJ,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ChevronsCollapseUpRight, ChevronsExpandUpRight} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport MonacoEditor from 'react-monaco-editor';\n\nimport {PageContent, Theme} from '../../../models';\nimport {block} from '../../../utils';\nimport {EditorContext} from '../../context';\nimport {parseCode} from '../../utils/code';\nimport {CodeEditorMessageProps} from '../../utils/validation';\n\nimport {options} from './constants';\n\nimport './CodeEditor.scss';\n\nconst b = block('code-editor');\n\nconst ON_CHANGE_DEBOUNCE_TIMEOUT = 300;\n\ninterface CodeEditorProps {\n    code: string;\n    fullscreenModeOn: boolean;\n    validator: (code: string) => CodeEditorMessageProps;\n    onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;\n    onChange: (content: PageContent) => void;\n    message?: CodeEditorMessageProps;\n}\n\nexport const CodeEditor = React.memo(\n    ({onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code}: CodeEditorProps) => {\n        const [message, setMessage] = React.useState(() => validator(code));\n        const {theme = Theme.Light} = React.useContext(EditorContext);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        const onChangeWithValidation = React.useCallback(\n            debounce((newCode: string) => {\n                const validationResult = validator(newCode);\n\n                setMessage(validationResult);\n                onChange(parseCode(newCode));\n            }, ON_CHANGE_DEBOUNCE_TIMEOUT),\n            [onChange, validator],\n        );\n\n        return (\n            <div className={b({fullscreen: fullscreenModeOn})}>\n                <div className={b('header')}>\n                    <Button\n                        view=\"flat-secondary\"\n                        onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}\n                    >\n                        <Icon\n                            data={\n                                fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight\n                            }\n                            size={16}\n                        />\n                    </Button>\n                </div>\n                <div className={b('code')}>\n                    <MonacoEditor\n                        key={String(fullscreenModeOn)}\n                        defaultValue={code}\n                        value={code}\n                        language=\"yaml\"\n                        options={options}\n                        onChange={onChangeWithValidation}\n                        theme={theme === Theme.Dark ? 'vs-dark' : 'vs'}\n                    />\n                </div>\n                <div className={b('footer')}>\n                    {message && (\n                        <div className={b('message-container')}>\n                            <div className={b('message', {status: message.status})}>\n                                {message.text}\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n"]}

package/build/esm/editor/components/CodeEditor/constants.js

@@ -15,3 +15,4 @@ export const options = {
     overviewRulerBorder: false,
     readOnly: false,
 };
+//# sourceMappingURL=constants.js.map

package/build/esm/editor/components/CodeEditor/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/constants.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAAuD;IACvE,QAAQ,EAAE,IAAyC;IACnD,mBAAmB,EAAE,MAAsD;IAC3E,mBAAmB,EAAE,IAAI;IACzB,gBAAgB,EAAE,KAAK;IACvB,eAAe,EAAE,IAAI;IACrB,OAAO,EAAE;QACL,OAAO,EAAE,KAAK;KACjB;IACD,kBAAkB,EAAE,CAAC;IACrB,yBAAyB,EAAE,IAAI;IAC/B,SAAS,EAAE;QACP,QAAQ,EAAE,QAAQ;KACrB;IACD,mBAAmB,EAAE,KAAK;IAC1B,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import {editor} from 'monaco-editor';\nimport {monaco} from 'react-monaco-editor';\n\nexport const options: monaco.editor.IStandaloneEditorConstructionOptions = {\n    wordWrap: 'on' as editor.IEditorOptions['wordWrap'],\n    renderLineHighlight: 'none' as editor.IEditorOptions['renderLineHighlight'],\n    selectOnLineNumbers: true,\n    renderWhitespace: 'all',\n    automaticLayout: true,\n    minimap: {\n        enabled: false,\n    },\n    overviewRulerLanes: 0,\n    hideCursorInOverviewRuler: true,\n    scrollbar: {\n        vertical: 'hidden',\n    },\n    overviewRulerBorder: false,\n    readOnly: false,\n};\n"]}

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

@@ -1,5 +1,5 @@
-import { ClassNameProps, Theme } from '../../../models';
-import { EditModeItem, ViewModeItem } from '../../types';
+import { ClassNameProps, Theme } from "../../../models/index.js";
+import { EditModeItem, ViewModeItem } from "../../types/index.js";
 import './ControlPanel.css';
 export interface ControlPanelProps extends ClassNameProps {
     viewMode?: ViewModeItem;
@@ -9,5 +9,5 @@ export interface ControlPanelProps extends ClassNameProps {
     theme: Theme;
     onThemeChange: (theme: Theme) => void;
 }
-declare const ControlPanel: ({ viewMode, editMode, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }: ControlPanelProps) => JSX.Element;
+declare const ControlPanel: ({ viewMode, editMode, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }: ControlPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanel;

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Code, Display, Eye, Smartphone, SquareDashedText } from '@gravity-ui/icons';
-import { RadioButton, Select } from '@gravity-ui/uikit';
-import { Theme, themeNames } from '../../../models';
-import { block } from '../../../utils';
-import { Tablet } from '../../icons/Tablet';
-import { EditModeItem, ViewModeItem } from '../../types';
-import { i18n } from './i18n';
+import { SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
+import { Theme, themeNames } from "../../../models/index.js";
+import { block } from "../../../utils/index.js";
+import { Tablet } from "../../icons/Tablet.js";
+import { EditModeItem, ViewModeItem } from "../../types/index.js";
+import { i18n } from "./i18n/index.js";
 import './ControlPanel.css';
 const ICON_SIZE = 14;
 const b = block('control-panel');
@@ -19,24 +19,12 @@ const ControlPanelEditModeIcons = {
     [EditModeItem.Form]: SquareDashedText,
     [EditModeItem.Code]: Code,
 };
-const ControlPanel = ({ viewMode = ViewModeItem.Desktop, editMode = EditModeItem.Form, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }) => (React.createElement("div", { className: b(null, className) },
-    React.createElement("div", { className: b('switch-container') },
-        React.createElement("span", null, i18n('edit_mode')),
-        React.createElement(RadioButton, { className: b('radio-button'), value: editMode, onUpdate: (value) => onEditModeChange(value) }, Object.values(EditModeItem).map((item) => {
-            const Icon = ControlPanelEditModeIcons[item];
-            return (React.createElement(RadioButton.Option, { key: item, value: item },
-                React.createElement("span", { className: b('icon') },
-                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-        }))),
-    React.createElement("div", { className: b('switch-container') },
-        React.createElement("span", null, i18n('view_mode')),
-        React.createElement(RadioButton, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value) }, Object.values(ViewModeItem).map((item) => {
-            const Icon = ControlPanelViewModeIcons[item];
-            return (React.createElement(RadioButton.Option, { key: item, value: item },
-                React.createElement("span", { className: b('icon') },
-                    React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
-        }))),
-    React.createElement("div", { className: b('switch-container') },
-        React.createElement("span", null, i18n('theme')),
-        React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
+const ControlPanel = ({ viewMode = ViewModeItem.Desktop, editMode = EditModeItem.Form, onViewModeChange, onEditModeChange, className, theme, onThemeChange, }) => (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('switch-container'), children: [_jsx("span", { children: i18n('edit_mode') }), _jsx(SegmentedRadioGroup, { className: b('radio-button'), value: editMode, onUpdate: (value) => onEditModeChange(value), children: Object.values(EditModeItem).map((item) => {
+                        const Icon = ControlPanelEditModeIcons[item];
+                        return (_jsx(SegmentedRadioGroup.Option, { value: item, children: _jsx("span", { className: b('icon'), children: _jsx(Icon, { width: ICON_SIZE, height: ICON_SIZE }) }) }, item));
+                    }) })] }), _jsxs("div", { className: b('switch-container'), children: [_jsx("span", { children: i18n('view_mode') }), _jsx(SegmentedRadioGroup, { className: b('radio-button'), value: viewMode, onUpdate: (value) => onViewModeChange(value), children: Object.values(ViewModeItem).map((item) => {
+                        const Icon = ControlPanelViewModeIcons[item];
+                        return (_jsx(SegmentedRadioGroup.Option, { value: item, children: _jsx("span", { className: b('icon'), children: _jsx(Icon, { width: ICON_SIZE, height: ICON_SIZE }) }) }, item));
+                    }) })] }), _jsxs("div", { className: b('switch-container'), children: [_jsx("span", { children: i18n('theme') }), _jsx(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]), children: Object.values(Theme).map((item) => (_jsx(Select.Option, { value: item, children: themeNames[item] }, item))) })] })] }));
 export default ControlPanel;
+//# sourceMappingURL=ControlPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlPanel.js","sourceRoot":"../../../../../src","sources":["editor/components/ControlPanel/ControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Code, Display, Eye, Smartphone, SquareDashedText} from '@gravity-ui/icons';\nimport {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\n\nimport {ClassNameProps, Theme, themeNames} from '../../../models';\nimport {block} from '../../../utils';\nimport {Tablet} from '../../icons/Tablet';\nimport {EditModeItem, ViewModeItem} from '../../types';\n\nimport {i18n} from './i18n';\n\nimport './ControlPanel.scss';\n\nconst ICON_SIZE = 14;\n\nconst b = block('control-panel');\n\nconst ControlPanelViewModeIcons = {\n    [ViewModeItem.Desktop]: Display,\n    [ViewModeItem.Tablet]: Tablet,\n    [ViewModeItem.Mobile]: Smartphone,\n};\n\nconst ControlPanelEditModeIcons = {\n    [EditModeItem.View]: Eye,\n    [EditModeItem.Form]: SquareDashedText,\n    [EditModeItem.Code]: Code,\n};\n\nexport interface ControlPanelProps extends ClassNameProps {\n    viewMode?: ViewModeItem;\n    editMode?: EditModeItem;\n    onViewModeChange: (viewMode: ViewModeItem) => void;\n    onEditModeChange: (editMode: EditModeItem) => void;\n    theme: Theme;\n    onThemeChange: (theme: Theme) => void;\n}\n\nconst ControlPanel = ({\n    viewMode = ViewModeItem.Desktop,\n    editMode = EditModeItem.Form,\n    onViewModeChange,\n    onEditModeChange,\n    className,\n    theme,\n    onThemeChange,\n}: ControlPanelProps) => (\n    <div className={b(null, className)}>\n        <div className={b('switch-container')}>\n            <span>{i18n('edit_mode')}</span>\n            <SegmentedRadioGroup\n                className={b('radio-button')}\n                value={editMode}\n                onUpdate={(value) => onEditModeChange(value as EditModeItem)}\n            >\n                {Object.values(EditModeItem).map((item) => {\n                    const Icon = ControlPanelEditModeIcons[item];\n\n                    return (\n                        <SegmentedRadioGroup.Option key={item} value={item}>\n                            <span className={b('icon')}>\n                                <Icon width={ICON_SIZE} height={ICON_SIZE} />\n                            </span>\n                        </SegmentedRadioGroup.Option>\n                    );\n                })}\n            </SegmentedRadioGroup>\n        </div>\n        <div className={b('switch-container')}>\n            <span>{i18n('view_mode')}</span>\n            <SegmentedRadioGroup\n                className={b('radio-button')}\n                value={viewMode}\n                onUpdate={(value) => onViewModeChange(value as ViewModeItem)}\n            >\n                {Object.values(ViewModeItem).map((item) => {\n                    const Icon = ControlPanelViewModeIcons[item];\n\n                    return (\n                        <SegmentedRadioGroup.Option key={item} value={item}>\n                            <span className={b('icon')}>\n                                <Icon width={ICON_SIZE} height={ICON_SIZE} />\n                            </span>\n                        </SegmentedRadioGroup.Option>\n                    );\n                })}\n            </SegmentedRadioGroup>\n        </div>\n        <div className={b('switch-container')}>\n            <span>{i18n('theme')}</span>\n            <Select value={[theme]} onUpdate={(value) => onThemeChange(value[0] as Theme)}>\n                {Object.values(Theme).map((item) => (\n                    <Select.Option key={item} value={item}>\n                        {themeNames[item]}\n                    </Select.Option>\n                ))}\n            </Select>\n        </div>\n    </div>\n);\n\nexport default ControlPanel;\n"]}

package/build/esm/editor/components/ControlPanel/i18n/index.d.ts

@@ -1 +1,5 @@
-export declare const i18n: (key: "theme" | "view_mode" | "edit_mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "theme" | "view_mode" | "edit_mode", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "pc-ControlPanel": Record<"theme" | "view_mode" | "edit_mode", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -1,5 +1,6 @@
 import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../../utils/cn';
-import en from './en.json';
-import ru from './ru.json';
+import { NAMESPACE } from "../../../../utils/cn.js";
+import en from "./en.json";
+import ru from "./ru.json";
 export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ControlPanel`);
+//# sourceMappingURL=index.js.map

package/build/esm/editor/components/ControlPanel/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../../../src","sources":["editor/components/ControlPanel/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAC,SAAS,EAAC,gCAA6B;AAE/C,OAAO,EAAE,kBAAkB;AAC3B,OAAO,EAAE,kBAAkB;AAE3B,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,GAAG,SAAS,cAAc,CAAC,CAAC","sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nexport const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}ControlPanel`);\n"]}

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

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
-import { ViewModeItem } from '../../types';
-export interface DeviceEmulationProps extends PropsWithChildren {
+import * as React from 'react';
+import { ViewModeItem } from "../../types/index.js";
+export interface DeviceEmulationProps extends React.PropsWithChildren {
     mode: ViewModeItem;
 }
-declare const DeviceEmulation: ({ children, mode }: DeviceEmulationProps) => JSX.Element;
+declare const DeviceEmulation: ({ children, mode }: DeviceEmulationProps) => import("react/jsx-runtime").JSX.Element;
 export default DeviceEmulation;

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

@@ -1,7 +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)))));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import DeviceEmulationMobile from "./DeviceEmulationMobile/DeviceEmulationMobile.js";
+import { isMobileDevice, mobileDevices } from "./utils.js";
+const DeviceEmulation = ({ children, mode }) => (_jsxs(React.Fragment, { children: [!isMobileDevice(mode) && children, mobileDevices.map((device) => (_jsx(DeviceEmulationMobile, { device: device, active: mode === device, children: children }, device)))] }));
 export default DeviceEmulation;
+//# sourceMappingURL=DeviceEmulation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceEmulation.js","sourceRoot":"../../../../../src","sources":["editor/components/DeviceEmulation/DeviceEmulation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,qBAAqB,yDAAsD;AAClF,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,mBAAgB;AAMtD,MAAM,eAAe,GAAG,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAuB,EAAE,EAAE,CAAC,CAChE,MAAC,KAAK,CAAC,QAAQ,eACV,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,QAAQ,EACjC,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,KAAC,qBAAqB,IAAc,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,KAAK,MAAM,YACtE,QAAQ,IADe,MAAM,CAEV,CAC3B,CAAC,IACW,CACpB,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ViewModeItem} from '../../types';\n\nimport DeviceEmulationMobile from './DeviceEmulationMobile/DeviceEmulationMobile';\nimport {isMobileDevice, mobileDevices} from './utils';\n\nexport interface DeviceEmulationProps extends React.PropsWithChildren {\n    mode: ViewModeItem;\n}\n\nconst DeviceEmulation = ({children, mode}: DeviceEmulationProps) => (\n    <React.Fragment>\n        {!isMobileDevice(mode) && children}\n        {mobileDevices.map((device) => (\n            <DeviceEmulationMobile key={device} device={device} active={mode === device}>\n                {children}\n            </DeviceEmulationMobile>\n        ))}\n    </React.Fragment>\n);\n\nexport default DeviceEmulation;\n"]}

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

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

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

@@ -1,15 +1,16 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useRef } from 'react';
-import { block } from '../../../../utils';
-import { EditorContext } from '../../../context';
-import { DeviceIframe } from '../../../widget';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { block } from "../../../../utils/index.js";
+import { EditorContext } from "../../../context.js";
+import { DeviceIframe } from "../../../widget/index.js";
 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(() => {
+    const _a = React.useContext(EditorContext), { deviceEmulationSettings } = _a, initialData = __rest(_a, ["deviceEmulationSettings"]);
+    const containerRef = React.useRef(null);
+    const deviceIframeRef = React.useRef(null);
+    React.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, {
@@ -25,16 +26,17 @@ const DeviceEmulationMobile = ({ device, active }) => {
         // render iframe only once, then update it's data with postMessage
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [device]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (deviceIframeRef.current) {
             deviceIframeRef.current.onActivenessUpdate(active);
         }
     }, [active]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (deviceIframeRef.current && initialData) {
             deviceIframeRef.current.onDataUpdate(initialData);
         }
     }, [initialData]);
-    return React.createElement("div", { className: b({ active, device }), ref: containerRef });
+    return _jsx("div", { className: b({ active, device }), ref: containerRef });
 };
 export default DeviceEmulationMobile;
+//# sourceMappingURL=DeviceEmulationMobile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceEmulationMobile.js","sourceRoot":"../../../../../../src","sources":["editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,mCAA0B;AACxC,OAAO,EAAC,aAAa,EAAC,4BAAyB;AAC/C,OAAO,EAAC,YAAY,EAAC,iCAAwB;AAG7C,OAAO,6BAA6B,CAAC;AAErC,MAAM,CAAC,GAAG,KAAK,CAAC,yBAAyB,CAAC,CAAC;AAO3C,MAAM,qBAAqB,GAAG,CAAC,EAAC,MAAM,EAAE,MAAM,EAA6B,EAAE,EAAE;IAC3E,MAAM,KAA4C,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,EAA3E,EAAC,uBAAuB,OAAmD,EAA9C,WAAW,cAAxC,2BAAyC,CAAkC,CAAC;IAClF,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC/D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,MAAoB,CAAC;QAEzB,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,EAAE,CAAC;YACxB,MAAM,GAAG,IAAI,YAAY,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,EAAE;gBAC7C,WAAW;gBACX,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC;gBAC/B,QAAQ,EAAE,uBAAuB;aACpC,CAAC,CAAC;YACH,eAAe,CAAC,OAAO,GAAG,MAAM,CAAC;QACrC,CAAC;QAED,OAAO,GAAG,EAAE;YACR,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE,CAAC;QACtB,CAAC,CAAC;QACF,kEAAkE;QAClE,uDAAuD;IAC3D,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC1B,eAAe,CAAC,OAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACvD,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,eAAe,CAAC,OAAO,IAAI,WAAW,EAAE,CAAC;YACzC,eAAe,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACtD,CAAC;IACL,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,CAAC,EAAE,GAAG,EAAE,YAAY,GAAI,CAAC;AACtE,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {block} from '../../../../utils';\nimport {EditorContext} from '../../../context';\nimport {DeviceIframe} from '../../../widget';\nimport {MobileDevice} from '../utils';\n\nimport './DeviceEmulationMobile.scss';\n\nconst b = block('device-emulation-mobile');\n\ninterface DeviceEmulationMobileProps extends React.PropsWithChildren {\n    device: MobileDevice;\n    active: boolean;\n}\n\nconst DeviceEmulationMobile = ({device, active}: DeviceEmulationMobileProps) => {\n    const {deviceEmulationSettings, ...initialData} = React.useContext(EditorContext);\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\n    const deviceIframeRef = React.useRef<DeviceIframe | null>(null);\n\n    React.useEffect(() => {\n        let iframe: DeviceIframe;\n\n        if (containerRef?.current) {\n            iframe = new DeviceIframe(containerRef?.current, {\n                initialData,\n                className: b('frame', {device}),\n                settings: deviceEmulationSettings,\n            });\n            deviceIframeRef.current = iframe;\n        }\n\n        return () => {\n            iframe?.destroy();\n        };\n        // render iframe only once, then update it's data with postMessage\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [device]);\n\n    React.useEffect(() => {\n        if (deviceIframeRef.current) {\n            deviceIframeRef.current.onActivenessUpdate(active);\n        }\n    }, [active]);\n\n    React.useEffect(() => {\n        if (deviceIframeRef.current && initialData) {\n            deviceIframeRef.current.onDataUpdate(initialData);\n        }\n    }, [initialData]);\n\n    return <div className={b({active, device})} ref={containerRef} />;\n};\n\nexport default DeviceEmulationMobile;\n"]}

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

@@ -1,4 +1,4 @@
-import { ViewModeItem } from '../../types';
+import { ViewModeItem } from "../../types/index.js";
 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

@@ -1,3 +1,4 @@
-import { ViewModeItem } from '../../types';
+import { ViewModeItem } from "../../types/index.js";
 export const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile];
 export const isMobileDevice = (mode) => [ViewModeItem.Tablet, ViewModeItem.Mobile].includes(mode);
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"../../../../../src","sources":["editor/components/DeviceEmulation/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,6BAAoB;AAIzC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAU,CAAC;AAEjF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAkB,EAAwB,EAAE,CACvE,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAoB,CAAC,CAAC","sourcesContent":["import {ViewModeItem} from '../../types';\n\nexport type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;\n\nexport const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile] as const;\n\nexport const isMobileDevice = (mode: ViewModeItem): mode is MobileDevice =>\n    [ViewModeItem.Tablet, ViewModeItem.Mobile].includes(mode as MobileDevice);\n"]}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { EditBlockProps } from '../../types';
+import * as React from 'react';
+import { EditBlockProps } from "../../types/index.js";
 import './EditBlock.css';
 export declare enum EditBlockControls {
     Up = "up",
@@ -10,5 +10,5 @@ export declare enum EditBlockControls {
 export type EditBlockActions = {
     [key in EditBlockControls]?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children, resetPaddings, }: EditBlockProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actions, isActive, onSelect, isHeader, children, resetPaddings, }: EditBlockProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

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

@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { ChevronDown, ChevronUp, Copy as CopyIcon, TrashBin } from '@gravity-ui/icons';
 import { useActionHandlers } from '@gravity-ui/uikit';
-import { block } from '../../../utils';
+import { block } from "../../../utils/index.js";
 import './EditBlock.css';
 const b = block('edit-block');
 export var EditBlockControls;
@@ -24,25 +25,23 @@ const editBlockControlsIcons = {
     [EditBlockControls.Delete]: TrashBin,
 };
 const EditBlock = ({ actions, isActive, onSelect, isHeader, children, resetPaddings, }) => {
-    const ref = useRef(null);
-    const stopPropagationProps = useMemo(() => ({ onClick: (e) => e.stopPropagation() }), []);
+    const ref = React.useRef(null);
+    const stopPropagationProps = React.useMemo(() => ({ onClick: (e) => e.stopPropagation() }), []);
     const { onKeyDown } = useActionHandlers(onSelect);
-    useEffect(() => {
+    React.useEffect(() => {
         if (isActive && ref.current) {
             //TODO: add behavior 'smooth' after addiiton of dynamic form layout open/close managing support
             ref.current.scrollIntoView({ block: 'center' });
         }
     }, [isActive]);
-    return (React.createElement("div", { className: b({ active: isActive }), onClick: onSelect, onKeyDown: onKeyDown, ref: ref, role: "button", "aria-current": isActive, tabIndex: 0 },
-        React.createElement("div", { className: b('controls', {
-                active: isActive,
-                isHeader,
-                'reset-paddings': resetPaddings,
-            }) }, isActive && (React.createElement("div", Object.assign({ className: b('controls-content') }, stopPropagationProps), actionsOrder.map((action) => {
-            const Icon = editBlockControlsIcons[action];
-            return actions[action] ? (React.createElement("button", { key: action, className: b('control'), onClick: actions[action] },
-                React.createElement(Icon, null))) : null;
-        })))),
-        children));
+    return (_jsxs("div", { className: b({ active: isActive }), onClick: onSelect, onKeyDown: onKeyDown, ref: ref, role: "button", "aria-current": isActive, tabIndex: 0, children: [_jsx("div", { className: b('controls', {
+                    active: isActive,
+                    isHeader,
+                    'reset-paddings': resetPaddings,
+                }), children: isActive && (_jsx("div", Object.assign({ className: b('controls-content') }, stopPropagationProps, { children: actionsOrder.map((action) => {
+                        const Icon = editBlockControlsIcons[action];
+                        return actions[action] ? (_jsx("button", { className: b('control'), onClick: actions[action], children: _jsx(Icon, {}) }, action)) : null;
+                    }) }))) }), children] }));
 };
 export default React.memo(EditBlock);
+//# sourceMappingURL=EditBlock.js.map