@gravity-ui/page-constructor 6.3.1 → 6.3.2-alpha.10

package/build/cjs/context/editorStoreContext/PCEditorStoreContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StoreApi } from 'zustand';
+import { EditorState } from "../../common/store.js";
+export interface PCEditorStoreContextProps {
+    state: StoreApi<EditorState>;
+}
+export declare const PCEditorStoreContext: React.Context<PCEditorStoreContextProps>;

package/build/cjs/context/editorStoreContext/PCEditorStoreContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PCEditorStoreContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const store_1 = require("../../common/store.js");
+exports.PCEditorStoreContext = React.createContext({
+    state: (0, store_1.createPCEditorStore)(),
+});
+//# sourceMappingURL=PCEditorStoreContext.js.map

package/build/cjs/context/editorStoreContext/PCEditorStoreContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PCEditorStoreContext.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreContext.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAI/B,iDAAoE;AAMvD,QAAA,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAA4B;IAC/E,KAAK,EAAE,IAAA,2BAAmB,GAAE;CAC/B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState, createPCEditorStore} from '../../common/store';\n\nexport interface PCEditorStoreContextProps {\n    state: StoreApi<EditorState>;\n}\n\nexport const PCEditorStoreContext = React.createContext<PCEditorStoreContextProps>({\n    state: createPCEditorStore(),\n});\n"]}

package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface PCEditorStoreProviderProps extends React.PropsWithChildren {
+}
+export declare const PCEditorStoreProvider: ({ children }: PCEditorStoreProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PCEditorStoreProvider = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const store_1 = require("../../common/store.js");
+const PCEditorStoreContext_1 = require("./PCEditorStoreContext.js");
+const PCEditorStoreProvider = ({ children }) => {
+    const storeRef = React.useRef();
+    const syncStore = React.useCallback((message) => {
+        if (storeRef.current && message.state) {
+            storeRef.current.setState(message.state);
+        }
+    }, []);
+    React.useEffect(() => {
+        const onMessage = (e) => {
+            const message = e.data;
+            syncStore(message);
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+            window.removeEventListener('message', onMessage);
+        };
+    }, [syncStore]);
+    if (!storeRef.current) {
+        storeRef.current = (0, store_1.createPCEditorStore)();
+    }
+    return ((0, jsx_runtime_1.jsx)(PCEditorStoreContext_1.PCEditorStoreContext.Provider, { value: {
+            state: storeRef.current,
+        }, children: children }));
+};
+exports.PCEditorStoreProvider = PCEditorStoreProvider;
+//# sourceMappingURL=PCEditorStoreProvider.js.map

package/build/cjs/context/editorStoreContext/PCEditorStoreProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PCEditorStoreProvider.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/PCEditorStoreProvider.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAI/B,iDAAoE;AAGpE,oEAA4D;AAIrD,MAAM,qBAAqB,GAAG,CAAC,EAAC,QAAQ,EAA6B,EAAE,EAAE;IAC5E,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAyB,CAAC;IAEvD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAyB,EAAE,EAAE;QAC9D,IAAI,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;YAClC,MAAM,OAAO,GAAG,CAAC,CAAC,IAAwB,CAAC;YAC3C,SAAS,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,QAAQ,CAAC,OAAO,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAC7C,CAAC;IAED,OAAO,CACH,uBAAC,2CAAoB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACH,KAAK,EAAE,QAAQ,CAAC,OAAO;SAC1B,YAEA,QAAQ,GACmB,CACnC,CAAC;AACN,CAAC,CAAC;AAnCW,QAAA,qBAAqB,yBAmChC","sourcesContent":["import * as React from 'react';\n\nimport {StoreApi} from 'zustand';\n\nimport {EditorState, createPCEditorStore} from '../../common/store';\nimport {StoreSyncMessage} from '../../common/types';\n\nimport {PCEditorStoreContext} from './PCEditorStoreContext';\n\ninterface PCEditorStoreProviderProps extends React.PropsWithChildren {}\n\nexport const PCEditorStoreProvider = ({children}: PCEditorStoreProviderProps) => {\n    const storeRef = React.useRef<StoreApi<EditorState>>();\n\n    const syncStore = React.useCallback((message: StoreSyncMessage) => {\n        if (storeRef.current && message.state) {\n            storeRef.current.setState(message.state);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        const onMessage = (e: MessageEvent) => {\n            const message = e.data as StoreSyncMessage;\n            syncStore(message);\n        };\n\n        window.addEventListener('message', onMessage);\n\n        return () => {\n            window.removeEventListener('message', onMessage);\n        };\n    }, [syncStore]);\n\n    if (!storeRef.current) {\n        storeRef.current = createPCEditorStore();\n    }\n\n    return (\n        <PCEditorStoreContext.Provider\n            value={{\n                state: storeRef.current,\n            }}\n        >\n            {children}\n        </PCEditorStoreContext.Provider>\n    );\n};\n"]}

package/build/cjs/context/editorStoreContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PCEditorStoreContext.js";
+export * from "./PCEditorStoreProvider.js";

package/build/cjs/context/editorStoreContext/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PCEditorStoreContext.js"), exports);
+tslib_1.__exportStar(require("./PCEditorStoreProvider.js"), exports);
+//# sourceMappingURL=index.js.map

package/build/cjs/context/editorStoreContext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["context/editorStoreContext/index.ts"],"names":[],"mappings":";;;AAAA,oEAAuC;AACvC,qEAAwC","sourcesContent":["export * from './PCEditorStoreContext';\nexport * from './PCEditorStoreProvider';\n"]}

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

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

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

@@ -14,8 +14,7 @@ const context_1 = require("../../context.js");
 const code_1 = require("../../utils/code.js");
 const constants_1 = require("./constants.js");
 const b = (0, utils_1.block)('code-editor');
-const ON_CHANGE_DEBOUNCE_TIMEOUT = 300;
-exports.CodeEditor = React.memo(({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }) => {
+const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
     const [message, setMessage] = React.useState(() => validator(code));
     const { theme = models_1.Theme.Light } = React.useContext(context_1.EditorContext);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -23,8 +22,8 @@ exports.CodeEditor = React.memo(({ onChange, validator, fullscreenModeOn, onFull
         const validationResult = validator(newCode);
         setMessage(validationResult);
         onChange((0, code_1.parseCode)(newCode));
-    }, ON_CHANGE_DEBOUNCE_TIMEOUT), [onChange, validator]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ fullscreen: fullscreenModeOn }), children: [(0, jsx_runtime_1.jsx)("div", { className: b('header'), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }) }) }), (0, jsx_runtime_1.jsx)("div", { className: b('code'), children: (0, jsx_runtime_1.jsx)(react_monaco_editor_1.default, { defaultValue: code, value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), (0, jsx_runtime_1.jsx)("div", { className: b('footer'), children: message && ((0, jsx_runtime_1.jsx)("div", { className: b('message-container'), children: (0, jsx_runtime_1.jsx)("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
-});
-exports.CodeEditor.displayName = 'CodeEditor';
+    }, 200), [onChange, validator]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ fullscreen: fullscreenModeOn }), children: [(0, jsx_runtime_1.jsx)("div", { className: b('header'), children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }) }) }), (0, jsx_runtime_1.jsx)("div", { className: b('code'), children: (0, jsx_runtime_1.jsx)(react_monaco_editor_1.default, { value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' }, String(fullscreenModeOn)) }), (0, jsx_runtime_1.jsx)("div", { className: b('footer'), children: message && ((0, jsx_runtime_1.jsx)("div", { className: b('message-container'), children: (0, jsx_runtime_1.jsx)("div", { className: b('message', { status: message.status }), children: message.text }) })) })] }));
+};
+exports.CodeEditor = CodeEditor;
 //# sourceMappingURL=CodeEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAiF;AACjF,6CAA+C;AAC/C,0EAAuC;AACvC,sFAA+C;AAE/C,qDAAmD;AACnD,mDAAqC;AACrC,8CAA4C;AAC5C,8CAA2C;AAG3C,8CAAoC;AAIpC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAW1B,QAAA,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,cAAK,CAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAa,CAAC,CAAC;IAE9D,uDAAuD;IACvD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC5C,IAAA,kBAAQ,EAAC,CAAC,OAAe,EAAE,EAAE;QACzB,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAE5C,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAC7B,QAAQ,CAAC,IAAA,gBAAS,EAAC,OAAO,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,0BAA0B,CAAC,EAC9B,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,gBAAgB,EAAC,CAAC,aAC7C,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,gBAAgB,CAAC,YAE1D,uBAAC,YAAI,IACD,IAAI,EACA,gBAAgB,CAAC,CAAC,CAAC,+BAAuB,CAAC,CAAC,CAAC,6BAAqB,EAEtE,IAAI,EAAE,EAAE,GACV,GACG,GACP,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,6BAAY,IAET,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,mBAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,KAAK,EAAE,KAAK,KAAK,cAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IANzC,MAAM,CAAC,gBAAgB,CAAC,CAO/B,GACA,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACtB,OAAO,IAAI,CACR,gCAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAClC,gCAAK,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,kBAAU,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"]}
+{"version":3,"file":"CodeEditor.js","sourceRoot":"../../../../../src","sources":["editor/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAC/B,6CAAiF;AACjF,6CAA+C;AAC/C,0EAAuC;AACvC,sFAA+C;AAE/C,qDAAmD;AACnD,mDAAqC;AACrC,8CAA4C;AAC5C,8CAA2C;AAG3C,8CAAoC;AAIpC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAWxB,MAAM,UAAU,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,IAAI,GACU,EAAE,EAAE;IAClB,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,cAAK,CAAC,KAAK,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,uBAAa,CAAC,CAAC;IAE9D,uDAAuD;IACvD,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC5C,IAAA,kBAAQ,EAAC,CAAC,OAAe,EAAE,EAAE;QACzB,MAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAE5C,UAAU,CAAC,gBAAgB,CAAC,CAAC;QAC7B,QAAQ,CAAC,IAAA,gBAAS,EAAC,OAAO,CAAC,CAAC,CAAC;IACjC,CAAC,EAAE,GAAG,CAAC,EACP,CAAC,QAAQ,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAE,gBAAgB,EAAC,CAAC,aAC7C,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACvB,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,CAAC,gBAAgB,CAAC,YAE1D,uBAAC,YAAI,IACD,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAAuB,CAAC,CAAC,CAAC,6BAAqB,EACxE,IAAI,EAAE,EAAE,GACV,GACG,GACP,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,6BAAY,IAET,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,mBAAO,EAChB,QAAQ,EAAE,sBAAsB,EAChC,KAAK,EAAE,KAAK,KAAK,cAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IALzC,MAAM,CAAC,gBAAgB,CAAC,CAM/B,GACA,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YACtB,OAAO,IAAI,CACR,gCAAK,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,YAClC,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAC,CAAC,YAAG,OAAO,CAAC,IAAI,GAAO,GAC1E,CACT,GACC,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AArDW,QAAA,UAAU,cAqDrB","sourcesContent":["import * as React from 'react';\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\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 = ({\n    onChange,\n    validator,\n    fullscreenModeOn,\n    onFullscreenModeOnUpdate,\n    code,\n}: 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        }, 200),\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={fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight}\n                        size={16}\n                    />\n                </Button>\n            </div>\n            <div className={b('code')}>\n                <MonacoEditor\n                    key={String(fullscreenModeOn)}\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})}>{message.text}</div>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/build/cjs/editor/data/templates/test-editor-block.json

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "test-editor-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "table": {
+      "content": [
+        ["Lorem", "ipsum 1", "dolor 2", "sit 3"],
+        ["Lorem 1", "0", "0", "0"],
+        ["Lorem 2", "0", "0", "1"],
+        ["Lorem 3", "0", "0", "1"],
+        ["Lorem 4", "0", "1", "1"],
+        ["Lorem 5", "1", "1", "1"]
+      ],
+      "legend": ["ipsum 1", "ipsum 2"],
+      "justify": ["start", "center", "center", "center"]
+    }
+  }
+}

package/build/cjs/editor-v2/components/BlockCard/BlockCard.css

@@ -0,0 +1,27 @@
+.pceditor-block-card {
+  padding: 8px;
+  cursor: grab;
+  user-select: none;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  gap: 4px;
+  max-width: 300px;
+}
+.pceditor-block-card:active {
+  background-color: var(--g-color-base-generic-hover);
+  cursor: grabbing;
+}
+.pceditor-block-card__image-img {
+  pointer-events: none;
+}
+.pceditor-block-card__name {
+  justify-self: flex-end;
+  color: var(--g-color-text-secondary);
+}
+.pceditor-block-card__icon {
+  color: var(--g-color-text-complementary);
+}

package/build/cjs/editor-v2/components/BlockCard/BlockCard.d.ts

@@ -0,0 +1,9 @@
+export interface BlockCardProps {
+    className?: string;
+    type: string;
+    name: string;
+    previewImg?: string;
+    onMouseDown: (type: string) => void;
+}
+declare const BlockCard: ({ className, type, name, previewImg, onMouseDown }: BlockCardProps) => import("react/jsx-runtime").JSX.Element;
+export default BlockCard;

package/build/cjs/editor-v2/components/BlockCard/BlockCard.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.editorCn)('block-card');
+const BlockCard = ({ className, type, name, previewImg, onMouseDown }) => {
+    const handleMouseDown = React.useCallback(() => {
+        onMouseDown(type);
+    }, [onMouseDown, type]);
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(null, className), onMouseDown: handleMouseDown, children: [(0, jsx_runtime_1.jsx)("div", { className: b('image'), children: previewImg ? ((0, jsx_runtime_1.jsx)("img", { className: b('image-img'), src: previewImg, alt: "" })) : ((0, jsx_runtime_1.jsx)(uikit_1.Icon, { className: b('icon'), size: 45, data: icons_1.SquareBars })) }), (0, jsx_runtime_1.jsx)("div", { className: b('name'), children: name })] }));
+};
+exports.default = BlockCard;
+//# sourceMappingURL=BlockCard.js.map

package/build/cjs/editor-v2/components/BlockCard/BlockCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockCard.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/BlockCard/BlockCard.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6C;AAC7C,6CAA6C;AAC7C,qDAA+B;AAE/B,0CAAwC;AAIxC,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAUjC,MAAM,SAAS,GAAG,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAiB,EAAE,EAAE;IACnF,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,OAAO,CACH,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,WAAW,EAAE,eAAe,aAC7D,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACrB,UAAU,CAAC,CAAC,CAAC,CACV,gCAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC7D,CAAC,CAAC,CAAC,CACA,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,kBAAU,GAAI,CAC7D,GACC,EACN,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,IACpC,CACV,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import {SquareBars} from '@gravity-ui/icons';\nimport {Card, Icon} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {editorCn} from '../../utils/cn';\n\nimport './BlockCard.scss';\n\nconst b = editorCn('block-card');\n\nexport interface BlockCardProps {\n    className?: string;\n    type: string;\n    name: string;\n    previewImg?: string;\n    onMouseDown: (type: string) => void;\n}\n\nconst BlockCard = ({className, type, name, previewImg, onMouseDown}: BlockCardProps) => {\n    const handleMouseDown = React.useCallback(() => {\n        onMouseDown(type);\n    }, [onMouseDown, type]);\n\n    return (\n        <Card className={b(null, className)} onMouseDown={handleMouseDown}>\n            <div className={b('image')}>\n                {previewImg ? (\n                    <img className={b('image-img')} src={previewImg} alt=\"\" />\n                ) : (\n                    <Icon className={b('icon')} size={45} data={SquareBars} />\n                )}\n            </div>\n            <div className={b('name')}>{name}</div>\n        </Card>\n    );\n};\n\nexport default BlockCard;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.css

@@ -0,0 +1,5 @@
+.pceditor-dynamic-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.d.ts

@@ -0,0 +1,10 @@
+import { ConfigInput, DynamicFormValue } from "../../../common/types/index.js";
+interface DynamicFormProps {
+    blockConfig: Array<ConfigInput>;
+    contentConfig?: object;
+    onUpdateByKey?: (key: string, value: DynamicFormValue) => void;
+    onUpdate?: (value: object) => void;
+    className?: string;
+}
+declare const DynamicForm: ({ blockConfig, onUpdateByKey, onUpdate, contentConfig }: DynamicFormProps) => import("react/jsx-runtime").JSX.Element;
+export default DynamicForm;

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn.js");
+const Array_1 = tslib_1.__importDefault(require("./Fields/Array/Array.js"));
+const Boolean_1 = tslib_1.__importDefault(require("./Fields/Boolean/Boolean.js"));
+const Number_1 = tslib_1.__importDefault(require("./Fields/Number/Number.js"));
+const Object_1 = tslib_1.__importDefault(require("./Fields/Object/Object.js"));
+const AnyOf_1 = tslib_1.__importDefault(require("./Fields/AnyOf/AnyOf.js"));
+const OneOf_1 = tslib_1.__importDefault(require("./Fields/OneOf/OneOf.js"));
+const Select_1 = tslib_1.__importDefault(require("./Fields/Select/Select.js"));
+const Text_1 = tslib_1.__importDefault(require("./Fields/Text/Text.js"));
+const TextArea_1 = tslib_1.__importDefault(require("./Fields/TextArea/TextArea.js"));
+const utils_1 = require("./utils.js");
+const b = (0, cn_1.editorCn)('dynamic-form');
+const DynamicForm = ({ blockConfig, onUpdateByKey, onUpdate, contentConfig }) => {
+    const inputs = blockConfig;
+    const onDataUpdate = React.useCallback((key, value) => {
+        if (onUpdateByKey) {
+            onUpdateByKey(key, value);
+        }
+        if (onUpdate && contentConfig) {
+            const newContentConfig = lodash_1.default.cloneDeep(contentConfig);
+            lodash_1.default.set(newContentConfig, key, value);
+            onUpdate(newContentConfig);
+        }
+    }, [onUpdateByKey, onUpdate, contentConfig]);
+    const getData = React.useCallback((variable) => {
+        if (variable.startsWith('block.')) {
+            const purePath = variable.replace('block.', '');
+            return lodash_1.default.get(contentConfig, purePath);
+        }
+        if ((variable.startsWith(`'`) && variable.endsWith(`'`)) ||
+            (variable.startsWith(`"`) && variable.endsWith(`"`))) {
+            // @ts-ignore TODO: replaceAll types
+            return variable.replaceAll(`'`, '').replaceAll(`"`, '');
+        }
+        return undefined;
+    }, [contentConfig]);
+    const decide = React.useCallback((showIf) => {
+        const parts = showIf.split(' ');
+        if (!(parts.length === 3)) {
+            // eslint-disable-next-line no-console
+            console.log('Something bad happened in showIf, ignored');
+            return true;
+        }
+        const [firstVariable, equals, secondVariable] = parts;
+        const data1 = getData(firstVariable);
+        const data2 = getData(secondVariable);
+        if (equals === '===') {
+            return data1 === data2;
+        }
+        else {
+            return data1 !== data2;
+        }
+    }, [getData]);
+    const renderInput = React.useCallback((input) => {
+        const fieldPath = input.name;
+        const fieldValue = (0, utils_1.getContent)(contentConfig, input.name);
+        if (input.showIf) {
+            const decision = decide(input.showIf);
+            if (!decision) {
+                return (0, jsx_runtime_1.jsxs)("div", { children: ["Hidden Field: ", input.name] });
+            }
+        }
+        // Text, Select, Boolean and etc
+        const onSimpleDynamicFieldUpdate = (value) => {
+            onDataUpdate(fieldPath, value);
+        };
+        // Array and Objects
+        const onComplexDynamicFieldUpdate = (key, value) => {
+            onDataUpdate((0, utils_1.getFullPath)(fieldPath, key), value);
+        };
+        switch (input.type) {
+            case 'text': {
+                return ((0, jsx_runtime_1.jsx)(Text_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'boolean': {
+                return ((0, jsx_runtime_1.jsx)(Boolean_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'textarea': {
+                return ((0, jsx_runtime_1.jsx)(TextArea_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'select': {
+                return ((0, jsx_runtime_1.jsx)(Select_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'number': {
+                return ((0, jsx_runtime_1.jsx)(Number_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'object': {
+                if (!input || !('properties' in input)) {
+                    return null;
+                }
+                return ((0, jsx_runtime_1.jsx)(Object_1.default, { onRefresh: (value) => onDataUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'array': {
+                return ((0, jsx_runtime_1.jsx)(Array_1.default, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'oneOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return ((0, jsx_runtime_1.jsx)(OneOf_1.default, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'anyOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return ((0, jsx_runtime_1.jsx)(AnyOf_1.default, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            default: {
+                return (0, jsx_runtime_1.jsxs)("div", { children: ["Ignore ", JSON.stringify(input)] });
+            }
+        }
+    }, [contentConfig, decide, onDataUpdate]);
+    const sortedInputs = inputs.sort((x, y) => {
+        const nestingFieldTypes = ['object', 'array', 'oneOf', 'anyOf'];
+        if (nestingFieldTypes.includes(x.type)) {
+            return 1;
+        }
+        if (nestingFieldTypes.includes(y.type)) {
+            return -1;
+        }
+        return 0;
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: sortedInputs.map((input, index) => ((0, jsx_runtime_1.jsx)(React.Fragment, { children: renderInput(input) }, index))) }));
+};
+exports.default = DynamicForm;
+//# sourceMappingURL=DynamicForm.js.map

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicForm.js","sourceRoot":"../../../../../src","sources":["editor-v2/components/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\n\nimport {ConfigInput, DynamicFormValue} from '../../../common/types';\nimport {editorCn} from '../../utils/cn';\n\nimport ArrayDynamicField from './Fields/Array/Array';\nimport BooleanDynamicField from './Fields/Boolean/Boolean';\nimport NumberDynamicField from './Fields/Number/Number';\nimport ObjectDynamicField from './Fields/Object/Object';\nimport AnyOfDynamicField from './Fields/AnyOf/AnyOf';\nimport OneOfDynamicField from './Fields/OneOf/OneOf';\nimport SelectDynamicField from './Fields/Select/Select';\nimport TextDynamicField from './Fields/Text/Text';\nimport TextAreaDynamicField from './Fields/TextArea/TextArea';\nimport {getContent, getFullPath} from './utils';\n\nimport './DynamicForm.scss';\n\nconst b = editorCn('dynamic-form');\n\ninterface DynamicFormProps {\n    blockConfig: Array<ConfigInput>;\n    contentConfig?: object;\n    onUpdateByKey?: (key: string, value: DynamicFormValue) => void;\n    onUpdate?: (value: object) => void;\n    className?: string;\n}\n\nconst DynamicForm = ({blockConfig, onUpdateByKey, onUpdate, contentConfig}: DynamicFormProps) => {\n    const inputs = blockConfig;\n\n    const onDataUpdate = React.useCallback(\n        (key: string, value: DynamicFormValue) => {\n            if (onUpdateByKey) {\n                onUpdateByKey(key, value);\n            }\n            if (onUpdate && contentConfig) {\n                const newContentConfig = _.cloneDeep(contentConfig);\n                _.set(newContentConfig, key, value);\n                onUpdate(newContentConfig);\n            }\n        },\n        [onUpdateByKey, onUpdate, contentConfig],\n    );\n\n    const getData = React.useCallback(\n        (variable: string) => {\n            if (variable.startsWith('block.')) {\n                const purePath = variable.replace('block.', '');\n                return _.get(contentConfig, purePath);\n            }\n\n            if (\n                (variable.startsWith(`'`) && variable.endsWith(`'`)) ||\n                (variable.startsWith(`\"`) && variable.endsWith(`\"`))\n            ) {\n                // @ts-ignore TODO: replaceAll types\n                return variable.replaceAll(`'`, '').replaceAll(`\"`, '');\n            }\n\n            return undefined;\n        },\n        [contentConfig],\n    );\n\n    const decide = React.useCallback(\n        (showIf: string): boolean => {\n            const parts = showIf.split(' ');\n\n            if (!(parts.length === 3)) {\n                // eslint-disable-next-line no-console\n                console.log('Something bad happened in showIf, ignored');\n                return true;\n            }\n\n            const [firstVariable, equals, secondVariable] = parts;\n\n            const data1 = getData(firstVariable);\n            const data2 = getData(secondVariable);\n\n            if (equals === '===') {\n                return data1 === data2;\n            } else {\n                return data1 !== data2;\n            }\n        },\n        [getData],\n    );\n\n    const renderInput = React.useCallback(\n        (input: ConfigInput) => {\n            const fieldPath = input.name;\n            const fieldValue = getContent(contentConfig, input.name);\n\n            if (input.showIf) {\n                const decision = decide(input.showIf);\n\n                if (!decision) {\n                    return <div>Hidden Field: {input.name}</div>;\n                }\n            }\n\n            // Text, Select, Boolean and etc\n            const onSimpleDynamicFieldUpdate = (value: DynamicFormValue) => {\n                onDataUpdate(fieldPath, value);\n            };\n\n            // Array and Objects\n            const onComplexDynamicFieldUpdate = (key: string, value: DynamicFormValue) => {\n                onDataUpdate(getFullPath(fieldPath, key), value);\n            };\n\n            switch (input.type) {\n                case 'text': {\n                    return (\n                        <TextDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'boolean': {\n                    return (\n                        <BooleanDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'textarea': {\n                    return (\n                        <TextAreaDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'select': {\n                    return (\n                        <SelectDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            input={input}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'number': {\n                    return (\n                        <NumberDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onSimpleDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'object': {\n                    if (!input || !('properties' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <ObjectDynamicField\n                            onRefresh={(value) => onDataUpdate(fieldPath, value)}\n                            blockConfig={input.properties}\n                            title={input.title}\n                            value={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'array': {\n                    return (\n                        <ArrayDynamicField\n                            blockConfig={input}\n                            title={input.title}\n                            values={fieldValue}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'oneOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <OneOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                case 'anyOf': {\n                    if (!input || !('options' in input)) {\n                        return null;\n                    }\n\n                    return (\n                        <AnyOfDynamicField\n                            inputConfig={input}\n                            contentConfig={contentConfig}\n                            onUpdate={onComplexDynamicFieldUpdate}\n                        />\n                    );\n                }\n                default: {\n                    return <div>Ignore {JSON.stringify(input)}</div>;\n                }\n            }\n        },\n        [contentConfig, decide, onDataUpdate],\n    );\n\n    const sortedInputs = inputs.sort((x, y) => {\n        const nestingFieldTypes = ['object', 'array', 'oneOf', 'anyOf'];\n        if (nestingFieldTypes.includes(x.type)) {\n            return 1;\n        }\n        if (nestingFieldTypes.includes(y.type)) {\n            return -1;\n        }\n        return 0;\n    });\n\n    return (\n        <div className={b()}>\n            {sortedInputs.map((input, index) => (\n                <React.Fragment key={index}>{renderInput(input)}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default DynamicForm;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.css

@@ -0,0 +1,87 @@
+.pceditor-field-base {
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.pceditor-field-base:hover > .pceditor-field-base__top .pceditor-field-base__title > .pceditor-field-base__button {
+  opacity: 1;
+}
+.pceditor-field-base_expandable {
+  flex-direction: column;
+}
+.pceditor-field-base_expandable > .pceditor-field-base__top {
+  width: 100%;
+  flex-basis: initial;
+}
+.pceditor-field-base_expandable > .pceditor-field-base__children {
+  width: 100%;
+}
+.pceditor-field-base__top {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  word-break: break-word;
+}
+.pceditor-field-base__children_expandable {
+  border-left: 3px solid var(--g-color-line-generic);
+  padding: 6px 12px;
+}
+.pceditor-field-base__foldable {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 6px 0;
+  border-top-left-radius: var(--g-border-radius-m);
+  border-top-right-radius: var(--g-border-radius-m);
+}
+.pceditor-field-base__foldable:hover {
+  color: var(--g-color-text-link-hover);
+}
+.pceditor-field-base__foldable:active {
+  color: var(--g-color-text-link-active);
+}
+.pceditor-field-base__non-foldable:before {
+  position: absolute;
+  right: calc(100% + 5px);
+}
+.pceditor-field-base__button {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  margin-left: 2px;
+}
+.pceditor-field-base__title {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: 500;
+  margin: 5px 16px 5px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.pceditor-field-base__title_size_s {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+}
+.pceditor-field-base__title_size_m {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pceditor-field-base__title_size_l {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+}
+.pceditor-field-base:last-child {
+  border-bottom: none;
+}

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface FieldBaseParams {
+    title?: string;
+    textSize?: 's' | 'm' | 'l';
+    onRefresh?: (value: undefined) => void;
+    expandable?: boolean;
+}
+export interface FieldBaseProps extends React.PropsWithChildren, FieldBaseParams {
+    className?: string;
+}
+declare const FieldBase: React.FC<FieldBaseProps>;
+export default FieldBase;

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const icons_1 = require("@gravity-ui/icons");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const React = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../utils/cn.js");
+const b = (0, cn_1.editorCn)('field-base');
+const FieldBase = ({ className, title, textSize = 's', children, expandable = false, onRefresh, }) => {
+    const [showChildren, setShowChildren] = React.useState(!expandable);
+    const titleComponent = React.useMemo(() => {
+        if (title) {
+            const defaultTitle = ((0, jsx_runtime_1.jsxs)("div", { className: b('title', { size: textSize }), children: [(0, jsx_runtime_1.jsx)("span", { children: lodash_1.default.capitalize(title) }), onRefresh && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('button'), onClick: (e) => {
+                            e.stopPropagation();
+                            onRefresh(undefined);
+                        }, view: 'flat', size: 'xs', children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }) }))] }));
+            if (expandable) {
+                return (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+                (0, jsx_runtime_1.jsxs)("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren), children: [defaultTitle, (0, jsx_runtime_1.jsx)(uikit_1.ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') })] }));
+            }
+            return (0, jsx_runtime_1.jsx)("div", { className: b('non-foldable'), children: defaultTitle });
+        }
+        return null;
+    }, [expandable, showChildren, textSize, title, onRefresh]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ expandable }, className), children: [title && (0, jsx_runtime_1.jsx)("div", { className: b('top'), children: titleComponent }), (!title || showChildren) && ((0, jsx_runtime_1.jsx)("div", { className: b('children', { expandable }), children: children }))] }));
+};
+exports.default = FieldBase;
+//# sourceMappingURL=FieldBase.js.map

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBase.js","sourceRoot":"../../../../../../src","sources":["editor-v2/components/DynamicForm/FieldBase/FieldBase.tsx"],"names":[],"mappings":";;;;AAAA,6CAA4D;AAC5D,6CAAkD;AAClD,4DAAuB;AACvB,qDAA+B;AAE/B,6CAA2C;AAI3C,MAAM,CAAC,GAAG,IAAA,aAAQ,EAAC,YAAY,CAAC,CAAC;AAajC,MAAM,SAAS,GAA6B,CAAC,EACzC,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,GAAG,EACd,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAEpE,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,YAAY,GAAG,CACjB,iCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC,aACxC,2CAAO,gBAAC,CAAC,UAAU,CAAC,KAAK,CAAC,GAAQ,EACjC,SAAS,IAAI,CACV,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;4BAChD,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,SAAS,CAAC,SAAS,CAAC,CAAC;wBACzB,CAAC,EACD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,IAAI,YAEV,uBAAC,YAAI,IAAC,IAAI,EAAE,uBAAe,EAAE,IAAI,EAAE,EAAE,GAAI,GACpC,CACZ,IACC,CACT,CAAC;YAEF,IAAI,UAAU,EAAE,CAAC;gBACb,OAAO;gBACH,yGAAyG;gBACzG,iCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,aACvE,YAAY,EACb,uBAAC,mBAAW,IACR,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,GAC9B,IACA,CACT,CAAC;YACN,CAAC;YAED,OAAO,gCAAK,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAAG,YAAY,GAAO,CAAC;QACnE,CAAC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAE3D,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,UAAU,EAAC,EAAE,SAAS,CAAC,aACrC,KAAK,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,YAAG,cAAc,GAAO,EACzD,CAAC,CAAC,KAAK,IAAI,YAAY,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,UAAU,EAAC,CAAC,YAAG,QAAQ,GAAO,CAChE,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["import {ArrowToggle, Button, Icon} from '@gravity-ui/uikit';\nimport {ArrowRotateLeft} from '@gravity-ui/icons';\nimport _ from 'lodash';\nimport * as React from 'react';\n\nimport {editorCn} from '../../../utils/cn';\n\nimport './FieldBase.scss';\n\nconst b = editorCn('field-base');\n\nexport interface FieldBaseParams {\n    title?: string;\n    textSize?: 's' | 'm' | 'l';\n    onRefresh?: (value: undefined) => void;\n    expandable?: boolean;\n}\n\nexport interface FieldBaseProps extends React.PropsWithChildren, FieldBaseParams {\n    className?: string;\n}\n\nconst FieldBase: React.FC<FieldBaseProps> = ({\n    className,\n    title,\n    textSize = 's',\n    children,\n    expandable = false,\n    onRefresh,\n}) => {\n    const [showChildren, setShowChildren] = React.useState(!expandable);\n\n    const titleComponent = React.useMemo(() => {\n        if (title) {\n            const defaultTitle = (\n                <div className={b('title', {size: textSize})}>\n                    <span>{_.capitalize(title)}</span>\n                    {onRefresh && (\n                        <Button\n                            className={b('button')}\n                            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                                e.stopPropagation();\n                                onRefresh(undefined);\n                            }}\n                            view={'flat'}\n                            size={'xs'}\n                        >\n                            <Icon data={ArrowRotateLeft} size={14} />\n                        </Button>\n                    )}\n                </div>\n            );\n\n            if (expandable) {\n                return (\n                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n                    <div className={b('foldable')} onClick={() => setShowChildren(!showChildren)}>\n                        {defaultTitle}\n                        <ArrowToggle\n                            direction={showChildren ? 'bottom' : 'right'}\n                            className={b('arrow-toggle')}\n                        />\n                    </div>\n                );\n            }\n\n            return <div className={b('non-foldable')}>{defaultTitle}</div>;\n        }\n\n        return null;\n    }, [expandable, showChildren, textSize, title, onRefresh]);\n\n    return (\n        <div className={b({expandable}, className)}>\n            {title && <div className={b('top')}>{titleComponent}</div>}\n            {(!title || showChildren) && (\n                <div className={b('children', {expandable})}>{children}</div>\n            )}\n        </div>\n    );\n};\n\nexport default FieldBase;\n"]}

package/build/cjs/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.css

@@ -0,0 +1,6 @@
+.pceditor-anyof-dynamic-field__radio {
+  margin: 16px 12px;
+}
+.pceditor-anyof-dynamic-field__select {
+  min-width: 80px;
+}

package/build/cjs/editor-v2/components/DynamicForm/Fields/AnyOf/AnyOf.d.ts

@@ -0,0 +1,9 @@
+import { AnyOfInput, DynamicFormValue } from "../../../../../common/types/index.js";
+interface AnyOfDynamicFieldProps {
+    contentConfig: DynamicFormValue;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    inputConfig: AnyOfInput;
+    className?: string;
+}
+declare const AnyOfDynamicField: ({ contentConfig, onUpdate, className, inputConfig, }: AnyOfDynamicFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default AnyOfDynamicField;