@gravity-ui/page-constructor 6.2.0-beta.1 → 7.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor/containers/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,qDAA4C;AAC7F,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,QAAQ,8CAA2C;AAC1D,OAAO,EAAC,UAAU,EAAC,kDAA+C;AAClE,OAAO,YAAY,sDAAmD;AACtE,OAAO,EAAC,aAAa,EAAC,wDAAqD;AAC3E,OAAO,MAAM,0CAAuC;AACpD,OAAO,EAAC,YAAY,EAAC,sDAAmD;AACxE,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAE5C,OAAO,EAAC,IAAI,EAAC,wBAAqB;AAElC,OAAO,EAAC,cAAc,EAAC,kCAA+B;AAEtD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACzC,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC;IAE9B,MAAM,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,eAAe,EACf,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,KAAK,GACR,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,CACH,MAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,aAClC,KAAC,YAAY,IACT,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,aAAa,EAAE,aAAa,GAC9B,EACD,cAAc,IAAI,iBAAiB,IAAI,CACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAI,CAChF,EACA,cAAc,IAAI,CACf,KAAC,UAAU,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,mBAAmB,EACrC,wBAAwB,EAAE,2BAA2B,GACvD,CACL,EACD,MAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aACzC,cAAc,IAAI,iBAAiB,IAAI,CACpC,KAAC,MAAM,CAAC,IAAI,cACR,KAAC,IAAI,IACD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,eAAe,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GACpB,GACQ,CACjB,EACA,CAAC,cAAc,IAAI,CAChB,MAAC,MAAM,CAAC,KAAK,eACT,KAAC,aAAa,cACV,KAAC,uBAAuB,OAAK,aAAa,EAAE,KAAK,EAAE,gBAAgB,YAC/D,KAAC,eAAe,OAAK,aAAa,GAAI,GAChB,IAHV,kBAAkB,CAItB,EACf,cAAc,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,IAClC,CAClB,IACI,IACY,CAC5B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {PageConstructor, PageConstructorProvider} from '../../../containers/PageConstructor';\nimport {block} from '../../../utils';\nimport AddBlock from '../../components/AddBlock/AddBlock';\nimport {CodeEditor} from '../../components/CodeEditor/CodeEditor';\nimport ControlPanel from '../../components/ControlPanel/ControlPanel';\nimport {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';\nimport Layout from '../../components/Layout/Layout';\nimport {PageSettings} from '../../components/PageSettings/PageSettings';\nimport {EditorContext} from '../../context';\nimport {EditorProps} from '../../types';\nimport {Form} from '../Form/Form';\n\nimport {useEditorState} from './hooks/useEditorState';\n\nimport './Editor.scss';\n\nconst b = block('editor');\n\nexport const Editor = (props: EditorProps) => {\n    const {providerProps} = props;\n\n    const {\n        context,\n        viewMode,\n        editMode,\n        constructorTheme,\n        onThemeUpdate,\n        onViewModeUpdate,\n        onEditModeUpdate,\n        isCodeEditMode,\n        isFormEditMode,\n        isDesktopViewMode,\n        content,\n        schema,\n        onContentUpdate,\n        code,\n        codeValidator,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n        activeBlockIndex,\n        onSelect,\n        isCodeOnlyMode,\n        errorBoundaryState,\n        outgoingProps,\n        onAdd,\n    } = useEditorState(props);\n\n    return (\n        <EditorContext.Provider value={context}>\n            <ControlPanel\n                viewMode={viewMode}\n                onViewModeChange={onViewModeUpdate}\n                editMode={editMode}\n                onEditModeChange={onEditModeUpdate}\n                theme={constructorTheme}\n                className={b('panel')}\n                onThemeChange={onThemeUpdate}\n            />\n            {isFormEditMode && isDesktopViewMode && (\n                <PageSettings content={content} schema={schema} onChange={onContentUpdate} />\n            )}\n            {isCodeEditMode && (\n                <CodeEditor\n                    code={code}\n                    onChange={onContentUpdate}\n                    validator={codeValidator}\n                    fullscreenModeOn={codeFullscreeModeOn}\n                    onFullscreenModeOnUpdate={onCodeFullscreeModeOnUpdate}\n                />\n            )}\n            <Layout editMode={editMode} viewMode={viewMode}>\n                {isFormEditMode && isDesktopViewMode && (\n                    <Layout.Left>\n                        <Form\n                            content={content}\n                            onChange={onContentUpdate}\n                            activeBlockIndex={activeBlockIndex}\n                            schema={schema}\n                            onSelect={onSelect}\n                        />\n                    </Layout.Left>\n                )}\n                {!isCodeOnlyMode && (\n                    <Layout.Right>\n                        <ErrorBoundary key={errorBoundaryState}>\n                            <PageConstructorProvider {...providerProps} theme={constructorTheme}>\n                                <PageConstructor {...outgoingProps} />\n                            </PageConstructorProvider>\n                        </ErrorBoundary>\n                        {isFormEditMode && <AddBlock onAdd={onAdd} />}\n                    </Layout.Right>\n                )}\n            </Layout>\n        </EditorContext.Provider>\n    );\n};\n"]}
+{"version":3,"file":"Editor.js","sourceRoot":"../../../../../src","sources":["editor/containers/Editor/Editor.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,uBAAuB,EAAC,qDAA4C;AAC7F,OAAO,EAAC,KAAK,EAAC,gCAAuB;AACrC,OAAO,QAAQ,8CAA2C;AAC1D,OAAO,EAAC,UAAU,EAAC,kDAA+C;AAClE,OAAO,YAAY,sDAAmD;AACtE,OAAO,EAAC,aAAa,EAAC,wDAAqD;AAC3E,OAAO,MAAM,0CAAuC;AACpD,OAAO,EAAC,YAAY,EAAC,sDAAmD;AACxE,OAAO,EAAC,aAAa,EAAC,yBAAsB;AAE5C,OAAO,EAAC,IAAI,EAAC,wBAAqB;AAElC,OAAO,EAAC,cAAc,EAAC,kCAA+B;AAEtD,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACzC,MAAM,EAAC,aAAa,EAAC,GAAG,KAAK,CAAC;IAE9B,MAAM,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,eAAe,EACf,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,KAAK,GACR,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,CACH,MAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,aAClC,KAAC,YAAY,IACT,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,gBAAgB,EACvB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,aAAa,EAAE,aAAa,GAC9B,EACD,cAAc,IAAI,iBAAiB,IAAI,CACpC,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAI,CAChF,EACA,cAAc,IAAI,CACf,KAAC,UAAU,IACP,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,mBAAmB,EACrC,wBAAwB,EAAE,2BAA2B,GACvD,CACL,EACD,MAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aACzC,cAAc,IAAI,iBAAiB,IAAI,CACpC,KAAC,MAAM,CAAC,IAAI,cACR,KAAC,IAAI,IACD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,eAAe,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,GACpB,GACQ,CACjB,EACA,CAAC,cAAc,IAAI,CAChB,MAAC,MAAM,CAAC,KAAK,eACT,KAAC,aAAa,cACV,KAAC,uBAAuB,oBAAK,aAAa,IAAE,KAAK,EAAE,gBAAgB,YAC/D,KAAC,eAAe,oBAAK,aAAa,EAAI,IAChB,IAHV,kBAAkB,CAItB,EACf,cAAc,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,IAClC,CAClB,IACI,IACY,CAC5B,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {PageConstructor, PageConstructorProvider} from '../../../containers/PageConstructor';\nimport {block} from '../../../utils';\nimport AddBlock from '../../components/AddBlock/AddBlock';\nimport {CodeEditor} from '../../components/CodeEditor/CodeEditor';\nimport ControlPanel from '../../components/ControlPanel/ControlPanel';\nimport {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';\nimport Layout from '../../components/Layout/Layout';\nimport {PageSettings} from '../../components/PageSettings/PageSettings';\nimport {EditorContext} from '../../context';\nimport {EditorProps} from '../../types';\nimport {Form} from '../Form/Form';\n\nimport {useEditorState} from './hooks/useEditorState';\n\nimport './Editor.scss';\n\nconst b = block('editor');\n\nexport const Editor = (props: EditorProps) => {\n    const {providerProps} = props;\n\n    const {\n        context,\n        viewMode,\n        editMode,\n        constructorTheme,\n        onThemeUpdate,\n        onViewModeUpdate,\n        onEditModeUpdate,\n        isCodeEditMode,\n        isFormEditMode,\n        isDesktopViewMode,\n        content,\n        schema,\n        onContentUpdate,\n        code,\n        codeValidator,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n        activeBlockIndex,\n        onSelect,\n        isCodeOnlyMode,\n        errorBoundaryState,\n        outgoingProps,\n        onAdd,\n    } = useEditorState(props);\n\n    return (\n        <EditorContext.Provider value={context}>\n            <ControlPanel\n                viewMode={viewMode}\n                onViewModeChange={onViewModeUpdate}\n                editMode={editMode}\n                onEditModeChange={onEditModeUpdate}\n                theme={constructorTheme}\n                className={b('panel')}\n                onThemeChange={onThemeUpdate}\n            />\n            {isFormEditMode && isDesktopViewMode && (\n                <PageSettings content={content} schema={schema} onChange={onContentUpdate} />\n            )}\n            {isCodeEditMode && (\n                <CodeEditor\n                    code={code}\n                    onChange={onContentUpdate}\n                    validator={codeValidator}\n                    fullscreenModeOn={codeFullscreeModeOn}\n                    onFullscreenModeOnUpdate={onCodeFullscreeModeOnUpdate}\n                />\n            )}\n            <Layout editMode={editMode} viewMode={viewMode}>\n                {isFormEditMode && isDesktopViewMode && (\n                    <Layout.Left>\n                        <Form\n                            content={content}\n                            onChange={onContentUpdate}\n                            activeBlockIndex={activeBlockIndex}\n                            schema={schema}\n                            onSelect={onSelect}\n                        />\n                    </Layout.Left>\n                )}\n                {!isCodeOnlyMode && (\n                    <Layout.Right>\n                        <ErrorBoundary key={errorBoundaryState}>\n                            <PageConstructorProvider {...providerProps} theme={constructorTheme}>\n                                <PageConstructor {...outgoingProps} />\n                            </PageConstructorProvider>\n                        </ErrorBoundary>\n                        {isFormEditMode && <AddBlock onAdd={onAdd} />}\n                    </Layout.Right>\n                )}\n            </Layout>\n        </EditorContext.Provider>\n    );\n};\n"]}

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

@@ -8,11 +8,13 @@ import usePreviousValue from "../../../hooks/usePreviousValue.js";
  * @returns {string} - updated code
  */
 export function useCode({ content, codeFullscreeModeOn, isCodeEditMode }) {
+    var _a;
     const [code, setCode] = React.useState('');
-    const prevContentLength = usePreviousValue(content.blocks?.length);
+    const prevContentLength = usePreviousValue((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
     const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);
     React.useEffect(() => {
-        const blocksCountChanged = prevContentLength !== content.blocks?.length;
+        var _a;
+        const blocksCountChanged = prevContentLength !== ((_a = content.blocks) === null || _a === void 0 ? void 0 : _a.length);
         const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;
         if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {
             setCode(yaml.dump(content, { lineWidth: -1 }));

package/build/esm/editor/containers/Editor/hooks/useCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCode.js","sourceRoot":"../../../../../../src","sources":["editor/containers/Editor/hooks/useCode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,gBAAgB,2CAAwC;AAQ/D;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EAAC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAe;IAChF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnE,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC;QACxE,MAAM,gBAAgB,GAAG,mBAAmB,KAAK,uBAAuB,CAAC;QAEzE,IAAI,kBAAkB,IAAI,cAAc,IAAI,gBAAgB,EAAE,CAAC;YAC3D,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;QACjD,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/F,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport yaml from 'js-yaml';\n\nimport {PageContent} from '../../../../models';\nimport usePreviousValue from '../../../hooks/usePreviousValue';\n\ntype UseCodeProps = {\n    content: PageContent;\n    codeFullscreeModeOn: boolean;\n    isCodeEditMode: boolean;\n};\n\n/**\n * Transorms PageConstructor content in JSON to YAML on code editor mode switching\n *\n * @param {Object} props - props parent from form\n * @returns {string} - updated code\n */\nexport function useCode({content, codeFullscreeModeOn, isCodeEditMode}: UseCodeProps) {\n    const [code, setCode] = React.useState('');\n\n    const prevContentLength = usePreviousValue(content.blocks?.length);\n    const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);\n\n    React.useEffect(() => {\n        const blocksCountChanged = prevContentLength !== content.blocks?.length;\n        const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;\n\n        if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {\n            setCode(yaml.dump(content, {lineWidth: -1}));\n        }\n    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);\n\n    return code;\n}\n"]}
+{"version":3,"file":"useCode.js","sourceRoot":"../../../../../../src","sources":["editor/containers/Editor/hooks/useCode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,OAAO,gBAAgB,2CAAwC;AAQ/D;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,EAAC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAe;;IAChF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3C,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAA,OAAO,CAAC,MAAM,0CAAE,MAAM,CAAC,CAAC;IACnE,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,MAAM,kBAAkB,GAAG,iBAAiB,MAAK,MAAA,OAAO,CAAC,MAAM,0CAAE,MAAM,CAAA,CAAC;QACxE,MAAM,gBAAgB,GAAG,mBAAmB,KAAK,uBAAuB,CAAC;QAEzE,IAAI,kBAAkB,IAAI,cAAc,IAAI,gBAAgB,EAAE,CAAC;YAC3D,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAC,SAAS,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;QACjD,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/F,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport yaml from 'js-yaml';\n\nimport {PageContent} from '../../../../models';\nimport usePreviousValue from '../../../hooks/usePreviousValue';\n\ntype UseCodeProps = {\n    content: PageContent;\n    codeFullscreeModeOn: boolean;\n    isCodeEditMode: boolean;\n};\n\n/**\n * Transorms PageConstructor content in JSON to YAML on code editor mode switching\n *\n * @param {Object} props - props parent from form\n * @returns {string} - updated code\n */\nexport function useCode({content, codeFullscreeModeOn, isCodeEditMode}: UseCodeProps) {\n    const [code, setCode] = React.useState('');\n\n    const prevContentLength = usePreviousValue(content.blocks?.length);\n    const prevCodeFullscreeModeOn = usePreviousValue(codeFullscreeModeOn);\n\n    React.useEffect(() => {\n        const blocksCountChanged = prevContentLength !== content.blocks?.length;\n        const codeModeSwitched = codeFullscreeModeOn !== prevCodeFullscreeModeOn;\n\n        if (blocksCountChanged || isCodeEditMode || codeModeSwitched) {\n            setCode(yaml.dump(content, {lineWidth: -1}));\n        }\n    }, [isCodeEditMode, content, prevContentLength, codeFullscreeModeOn, prevCodeFullscreeModeOn]);\n\n    return code;\n}\n"]}

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

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
@@ -12,7 +13,8 @@ import { EditModeItem, ViewModeItem } from "../../../types/index.js";
 import { addCustomDecorator, checkIsMobile, getBlockId } from "../../../utils/index.js";
 import { useCode } from "./useCode.js";
 // Editor business logic
-export const useEditorState = ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }) => {
+export const useEditorState = (_a) => {
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = __rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
     const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = useMainState(rest);
     const { viewMode, editMode, onEditModeUpdate, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = useSettingsState();
     const isCodeEditMode = editMode === EditModeItem.Code;
@@ -27,10 +29,10 @@ export const useEditorState = ({ customSchema, onChange, providerProps, transfor
         const custom = isCodeEditMode || isViewEditMode
             ? rest.custom
             : addCustomDecorator([
-                (props) => _jsx(NotFoundBlock, { ...props }),
-                (props) => (_jsx(EditBlock, { ...injectEditBlockProps(props) })),
+                (props) => _jsx(NotFoundBlock, Object.assign({}, props)),
+                (props) => (_jsx(EditBlock, Object.assign({}, injectEditBlockProps(props)))),
                 // need errorBoundaryState flag to reset error on content update
-                (props) => (_createElement(ErrorBoundary, { ...props, key: `${getBlockId(props)}-${errorBoundaryState}` })),
+                (props) => (_createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
             ], rest.custom);
         return {
             content: transformedContent,
@@ -51,11 +53,7 @@ export const useEditorState = ({ customSchema, onChange, providerProps, transfor
             content: transformedContent,
             custom: rest.custom,
         },
-        providerProps: {
-            ...providerProps,
-            isMobile: checkIsMobile(viewMode),
-            theme: constructorTheme,
-        },
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: checkIsMobile(viewMode), theme: constructorTheme }),
         deviceEmulationSettings,
         theme: editorTheme,
     }), [
@@ -68,7 +66,7 @@ export const useEditorState = ({ customSchema, onChange, providerProps, transfor
         editorTheme,
     ]);
     React.useEffect(() => {
-        onChange?.(content);
+        onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
     const code = useCode({ isCodeEditMode, content, codeFullscreeModeOn });
     return {

package/build/esm/editor/containers/Editor/hooks/useEditorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditorState.js","sourceRoot":"../../../../../../src","sources":["editor/containers/Editor/hooks/useEditorState.tsx"],"names":[],"mappings":";;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,qBAAqB,EAAC,oCAA2B;AACzD,OAAO,SAAS,mDAAgD;AAChE,OAAO,EAAC,aAAa,EAAC,2DAAwD;AAC9E,OAAO,EAAC,aAAa,EAAC,2DAAwD;AAC9E,OAAO,EAAC,gBAAgB,EAAC,2CAAwC;AACjE,OAAO,EAAC,YAAY,EAAC,qCAA4B;AACjD,OAAO,EAAC,gBAAgB,EAAC,yCAAgC;AACzD,OAAO,EAAC,YAAY,EAAe,YAAY,EAAC,gCAAuB;AACvE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAE,UAAU,EAAC,gCAAuB;AAE7E,OAAO,EAAC,OAAO,EAAC,qBAAkB;AAElC,wBAAwB;AACxB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,uBAAuB,EACvB,KAAK,EAAE,WAAW,EAClB,GAAG,IAAI,EACG,EAAE,EAAE;IACd,MAAM,EACF,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,oBAAoB,GACvB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAEvB,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,KAAK,EAAE,gBAAgB,EACvB,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACnB,2BAA2B,GAC9B,GAAG,gBAAgB,EAAE,CAAC;IAEvB,MAAM,cAAc,GAAG,QAAQ,KAAK,YAAY,CAAC,IAAI,CAAC;IACtD,MAAM,cAAc,GAAG,QAAQ,KAAK,YAAY,CAAC,IAAI,CAAC;IACtD,MAAM,cAAc,GAAG,QAAQ,KAAK,YAAY,CAAC,IAAI,CAAC;IACtD,MAAM,iBAAiB,GAAG,QAAQ,KAAK,YAAY,CAAC,OAAO,CAAC;IAC5D,MAAM,cAAc,GAAG,mBAAmB,IAAI,cAAc,CAAC;IAE7D,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EACpF,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAClD,CAAC;IACF,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACxF,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,MAAM,GACR,cAAc,IAAI,cAAc;YAC5B,CAAC,CAAC,IAAI,CAAC,MAAM;YACb,CAAC,CAAC,kBAAkB,CACd;gBACI,CAAC,KAA2B,EAAE,EAAE,CAAC,KAAC,aAAa,OAAK,KAAK,GAAI;gBAC7D,CAAC,KAA2B,EAAE,EAAE,CAAC,CAC7B,KAAC,SAAS,OAAK,oBAAoB,CAAC,KAAK,CAAC,GAAI,CACjD;gBACD,gEAAgE;gBAChE,CAAC,KAA2B,EAAE,EAAE,CAAC,CAC7B,eAAC,aAAa,OACN,KAAK,EACT,GAAG,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,GACnD,CACL;aACJ,EACD,IAAI,CAAC,MAAM,CACd,CAAC;QAEZ,OAAO;YACH,OAAO,EAAE,kBAAkB;YAC3B,MAAM;YACN,QAAQ;SACX,CAAC;IACN,CAAC,EAAE;QACC,oBAAoB;QACpB,kBAAkB;QAClB,QAAQ;QACR,kBAAkB;QAClB,IAAI,CAAC,MAAM;QACX,cAAc;QACd,cAAc;KACjB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACH,gBAAgB,EAAE;YACd,OAAO,EAAE,kBAAkB;YAC3B,MAAM,EAAE,IAAI,CAAC,MAAM;SACtB;QACD,aAAa,EAAE;YACX,GAAG,aAAa;YAChB,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC;YACjC,KAAK,EAAE,gBAAgB;SAC1B;QACD,uBAAuB;QACvB,KAAK,EAAE,WAAW;KACrB,CAAC,EACF;QACI,aAAa;QACb,IAAI,CAAC,MAAM;QACX,QAAQ;QACR,kBAAkB;QAClB,uBAAuB;QACvB,gBAAgB;QAChB,WAAW;KACd,CACJ,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,IAAI,GAAG,OAAO,CAAC,EAAC,cAAc,EAAE,OAAO,EAAE,mBAAmB,EAAC,CAAC,CAAC;IAErE,OAAO;QACH,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,gBAAgB;QAChB,aAAa;QACb,gBAAgB;QAChB,gBAAgB;QAChB,cAAc;QACd,iBAAiB;QACjB,OAAO;QACP,MAAM;QACN,eAAe;QACf,IAAI;QACJ,aAAa;QACb,mBAAmB;QACnB,2BAA2B;QAC3B,gBAAgB;QAChB,QAAQ;QACR,cAAc;QACd,kBAAkB;QAClB,aAAa;QACb,KAAK;QACL,cAAc;KACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {BlockDecorationProps} from '../../../../models';\nimport {generateDefaultSchema} from '../../../../schema';\nimport EditBlock from '../../../components/EditBlock/EditBlock';\nimport {ErrorBoundary} from '../../../components/ErrorBoundary/ErrorBoundary';\nimport {NotFoundBlock} from '../../../components/NotFoundBlock/NotFoundBlock';\nimport {useCodeValidator} from '../../../hooks/useCodeValidator';\nimport {useMainState} from '../../../store/main';\nimport {useSettingsState} from '../../../store/settings';\nimport {EditModeItem, EditorProps, ViewModeItem} from '../../../types';\nimport {addCustomDecorator, checkIsMobile, getBlockId} from '../../../utils';\n\nimport {useCode} from './useCode';\n\n// Editor business logic\nexport const useEditorState = ({\n    customSchema,\n    onChange,\n    providerProps,\n    transformContent,\n    deviceEmulationSettings,\n    theme: editorTheme,\n    ...rest\n}: EditorProps) => {\n    const {\n        content,\n        activeBlockIndex,\n        errorBoundaryState,\n        onContentUpdate,\n        onAdd,\n        onSelect,\n        injectEditBlockProps,\n    } = useMainState(rest);\n\n    const {\n        viewMode,\n        editMode,\n        onEditModeUpdate,\n        theme: constructorTheme,\n        onViewModeUpdate,\n        onThemeUpdate,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n    } = useSettingsState();\n\n    const isCodeEditMode = editMode === EditModeItem.Code;\n    const isViewEditMode = editMode === EditModeItem.View;\n    const isFormEditMode = editMode === EditModeItem.Form;\n    const isDesktopViewMode = viewMode === ViewModeItem.Desktop;\n    const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;\n\n    const transformedContent = React.useMemo(\n        () => (transformContent ? transformContent(content, {viewMode, editMode}) : content),\n        [content, transformContent, viewMode, editMode],\n    );\n    const schema = React.useMemo(() => generateDefaultSchema(customSchema), [customSchema]);\n    const codeValidator = useCodeValidator(schema);\n\n    const outgoingProps = React.useMemo(() => {\n        const custom =\n            isCodeEditMode || isViewEditMode\n                ? rest.custom\n                : addCustomDecorator(\n                      [\n                          (props: BlockDecorationProps) => <NotFoundBlock {...props} />,\n                          (props: BlockDecorationProps) => (\n                              <EditBlock {...injectEditBlockProps(props)} />\n                          ),\n                          // need errorBoundaryState flag to reset error on content update\n                          (props: BlockDecorationProps) => (\n                              <ErrorBoundary\n                                  {...props}\n                                  key={`${getBlockId(props)}-${errorBoundaryState}`}\n                              />\n                          ),\n                      ],\n                      rest.custom,\n                  );\n\n        return {\n            content: transformedContent,\n            custom,\n            viewMode,\n        };\n    }, [\n        injectEditBlockProps,\n        errorBoundaryState,\n        viewMode,\n        transformedContent,\n        rest.custom,\n        isCodeEditMode,\n        isViewEditMode,\n    ]);\n\n    const context = React.useMemo(\n        () => ({\n            constructorProps: {\n                content: transformedContent,\n                custom: rest.custom,\n            },\n            providerProps: {\n                ...providerProps,\n                isMobile: checkIsMobile(viewMode),\n                theme: constructorTheme,\n            },\n            deviceEmulationSettings,\n            theme: editorTheme,\n        }),\n        [\n            providerProps,\n            rest.custom,\n            viewMode,\n            transformedContent,\n            deviceEmulationSettings,\n            constructorTheme,\n            editorTheme,\n        ],\n    );\n\n    React.useEffect(() => {\n        onChange?.(content);\n    }, [content, onChange]);\n\n    const code = useCode({isCodeEditMode, content, codeFullscreeModeOn});\n\n    return {\n        context,\n        viewMode,\n        editMode,\n        constructorTheme,\n        onThemeUpdate,\n        onViewModeUpdate,\n        onEditModeUpdate,\n        isCodeEditMode,\n        isDesktopViewMode,\n        content,\n        schema,\n        onContentUpdate,\n        code,\n        codeValidator,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n        activeBlockIndex,\n        onSelect,\n        isCodeOnlyMode,\n        errorBoundaryState,\n        outgoingProps,\n        onAdd,\n        isFormEditMode,\n    };\n};\n"]}
+{"version":3,"file":"useEditorState.js","sourceRoot":"../../../../../../src","sources":["editor/containers/Editor/hooks/useEditorState.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {BlockDecorationProps} from '../../../../models';\nimport {generateDefaultSchema} from '../../../../schema';\nimport EditBlock from '../../../components/EditBlock/EditBlock';\nimport {ErrorBoundary} from '../../../components/ErrorBoundary/ErrorBoundary';\nimport {NotFoundBlock} from '../../../components/NotFoundBlock/NotFoundBlock';\nimport {useCodeValidator} from '../../../hooks/useCodeValidator';\nimport {useMainState} from '../../../store/main';\nimport {useSettingsState} from '../../../store/settings';\nimport {EditModeItem, EditorProps, ViewModeItem} from '../../../types';\nimport {addCustomDecorator, checkIsMobile, getBlockId} from '../../../utils';\n\nimport {useCode} from './useCode';\n\n// Editor business logic\nexport const useEditorState = ({\n    customSchema,\n    onChange,\n    providerProps,\n    transformContent,\n    deviceEmulationSettings,\n    theme: editorTheme,\n    ...rest\n}: EditorProps) => {\n    const {\n        content,\n        activeBlockIndex,\n        errorBoundaryState,\n        onContentUpdate,\n        onAdd,\n        onSelect,\n        injectEditBlockProps,\n    } = useMainState(rest);\n\n    const {\n        viewMode,\n        editMode,\n        onEditModeUpdate,\n        theme: constructorTheme,\n        onViewModeUpdate,\n        onThemeUpdate,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n    } = useSettingsState();\n\n    const isCodeEditMode = editMode === EditModeItem.Code;\n    const isViewEditMode = editMode === EditModeItem.View;\n    const isFormEditMode = editMode === EditModeItem.Form;\n    const isDesktopViewMode = viewMode === ViewModeItem.Desktop;\n    const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;\n\n    const transformedContent = React.useMemo(\n        () => (transformContent ? transformContent(content, {viewMode, editMode}) : content),\n        [content, transformContent, viewMode, editMode],\n    );\n    const schema = React.useMemo(() => generateDefaultSchema(customSchema), [customSchema]);\n    const codeValidator = useCodeValidator(schema);\n\n    const outgoingProps = React.useMemo(() => {\n        const custom =\n            isCodeEditMode || isViewEditMode\n                ? rest.custom\n                : addCustomDecorator(\n                      [\n                          (props: BlockDecorationProps) => <NotFoundBlock {...props} />,\n                          (props: BlockDecorationProps) => (\n                              <EditBlock {...injectEditBlockProps(props)} />\n                          ),\n                          // need errorBoundaryState flag to reset error on content update\n                          (props: BlockDecorationProps) => (\n                              <ErrorBoundary\n                                  {...props}\n                                  key={`${getBlockId(props)}-${errorBoundaryState}`}\n                              />\n                          ),\n                      ],\n                      rest.custom,\n                  );\n\n        return {\n            content: transformedContent,\n            custom,\n            viewMode,\n        };\n    }, [\n        injectEditBlockProps,\n        errorBoundaryState,\n        viewMode,\n        transformedContent,\n        rest.custom,\n        isCodeEditMode,\n        isViewEditMode,\n    ]);\n\n    const context = React.useMemo(\n        () => ({\n            constructorProps: {\n                content: transformedContent,\n                custom: rest.custom,\n            },\n            providerProps: {\n                ...providerProps,\n                isMobile: checkIsMobile(viewMode),\n                theme: constructorTheme,\n            },\n            deviceEmulationSettings,\n            theme: editorTheme,\n        }),\n        [\n            providerProps,\n            rest.custom,\n            viewMode,\n            transformedContent,\n            deviceEmulationSettings,\n            constructorTheme,\n            editorTheme,\n        ],\n    );\n\n    React.useEffect(() => {\n        onChange?.(content);\n    }, [content, onChange]);\n\n    const code = useCode({isCodeEditMode, content, codeFullscreeModeOn});\n\n    return {\n        context,\n        viewMode,\n        editMode,\n        constructorTheme,\n        onThemeUpdate,\n        onViewModeUpdate,\n        onEditModeUpdate,\n        isCodeEditMode,\n        isDesktopViewMode,\n        content,\n        schema,\n        onContentUpdate,\n        code,\n        codeValidator,\n        codeFullscreeModeOn,\n        onCodeFullscreeModeOnUpdate,\n        activeBlockIndex,\n        onSelect,\n        isCodeOnlyMode,\n        errorBoundaryState,\n        outgoingProps,\n        onAdd,\n        isFormEditMode,\n    };\n};\n"]}

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

@@ -12,14 +12,11 @@ export const Form = React.memo(({ content, onChange, activeBlockIndex, onSelect,
     const spec = useFormSpec(schema);
     const { blocks: blocksSpec } = spec || {};
     return (_jsxs("div", { className: b(), children: [_jsx(Text, { variant: "body-2", children: 'Blocks' }), blocks.map((blockData, index) => blocksSpec[blockData.type] ? (_jsx("div", { className: b('block-form'), children: _jsx(BlockForm, { spec: blocksSpec[blockData.type], data: blockData, active: activeBlockIndex === index, onChange: (data) => {
-                        onChange({
-                            ...content,
-                            blocks: [
+                        onChange(Object.assign(Object.assign({}, content), { blocks: [
                                 ...blocks.slice(0, index),
                                 data,
                                 ...blocks.slice(index + 1),
-                            ],
-                        });
+                            ] }));
                     }, onSelect: () => onSelect(index) }) }, getBlockKey(blockData, index))) : null)] }));
 });
 Form.displayName = 'Form';

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"../../../../../src","sources":["editor/containers/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAC,KAAK,EAAE,WAAW,EAAC,gCAAuB;AAClD,OAAO,EAAC,SAAS,EAAC,gDAA6C;AAC/D,OAAO,WAAW,mCAAgC;AAElD,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAU/B,8GAA8G;AAE9G,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAC1B,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAY,EAAE,EAAE;IACnE,MAAM,EAAC,MAAM,EAAC,GAAG,OAAO,IAAI,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,EAAC,MAAM,EAAE,UAAU,EAAC,GAAG,IAAI,IAAI,EAAE,CAAC;IAExC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,YAAE,QAAQ,GAAQ,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAC7B,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzB,cAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YAC3B,KAAC,SAAS,IACN,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAChC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,KAAK,KAAK,EAClC,QAAQ,EAAE,CAAC,IAAW,EAAE,EAAE;wBACtB,QAAQ,CAAC;4BACL,GAAG,OAAO;4BACV,MAAM,EAAE;gCACJ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;gCACzB,IAAI;gCACJ,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;6BAC7B;yBACJ,CAAC,CAAC;oBACP,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GACjC,IAhBgC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAiB7D,CACT,CAAC,CAAC,CAAC,IAAI,CACX,IACC,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Text} from '@gravity-ui/uikit';\nimport {JSONSchema4} from 'json-schema';\n\nimport {Block, PageContent} from '../../../models';\nimport {block, getBlockKey} from '../../../utils';\nimport {BlockForm} from '../../components/BlockForm/BlockForm';\nimport useFormSpec from '../../hooks/useFormSpec';\n\nimport './Form.scss';\n\nconst b = block('editor-form');\n\nexport interface FormProps {\n    content: PageContent;\n    schema: JSONSchema4;\n    activeBlockIndex: number;\n    onChange: (content: PageContent) => void;\n    onSelect: (index: number) => void;\n}\n\n// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be extremely refactor\n\nexport const Form = React.memo(\n    ({content, onChange, activeBlockIndex, onSelect, schema}: FormProps) => {\n        const {blocks} = content || {};\n        const spec = useFormSpec(schema);\n        const {blocks: blocksSpec} = spec || {};\n\n        return (\n            <div className={b()}>\n                <Text variant=\"body-2\">{'Blocks'}</Text>\n                {blocks.map((blockData, index) =>\n                    blocksSpec[blockData.type] ? (\n                        <div className={b('block-form')} key={getBlockKey(blockData, index)}>\n                            <BlockForm\n                                spec={blocksSpec[blockData.type]}\n                                data={blockData}\n                                active={activeBlockIndex === index}\n                                onChange={(data: Block) => {\n                                    onChange({\n                                        ...content,\n                                        blocks: [\n                                            ...blocks.slice(0, index),\n                                            data,\n                                            ...blocks.slice(index + 1),\n                                        ],\n                                    });\n                                }}\n                                onSelect={() => onSelect(index)}\n                            />\n                        </div>\n                    ) : null,\n                )}\n            </div>\n        );\n    },\n);\n\nForm.displayName = 'Form';\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"../../../../../src","sources":["editor/containers/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAC,KAAK,EAAE,WAAW,EAAC,gCAAuB;AAClD,OAAO,EAAC,SAAS,EAAC,gDAA6C;AAC/D,OAAO,WAAW,mCAAgC;AAElD,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;AAU/B,8GAA8G;AAE9G,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAC1B,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAY,EAAE,EAAE;IACnE,MAAM,EAAC,MAAM,EAAC,GAAG,OAAO,IAAI,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,MAAM,EAAC,MAAM,EAAE,UAAU,EAAC,GAAG,IAAI,IAAI,EAAE,CAAC;IAExC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,YAAE,QAAQ,GAAQ,EACvC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAC7B,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzB,cAAK,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YAC3B,KAAC,SAAS,IACN,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,EAChC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,gBAAgB,KAAK,KAAK,EAClC,QAAQ,EAAE,CAAC,IAAW,EAAE,EAAE;wBACtB,QAAQ,iCACD,OAAO,KACV,MAAM,EAAE;gCACJ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;gCACzB,IAAI;gCACJ,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;6BAC7B,IACH,CAAC;oBACP,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GACjC,IAhBgC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAiB7D,CACT,CAAC,CAAC,CAAC,IAAI,CACX,IACC,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Text} from '@gravity-ui/uikit';\nimport {JSONSchema4} from 'json-schema';\n\nimport {Block, PageContent} from '../../../models';\nimport {block, getBlockKey} from '../../../utils';\nimport {BlockForm} from '../../components/BlockForm/BlockForm';\nimport useFormSpec from '../../hooks/useFormSpec';\n\nimport './Form.scss';\n\nconst b = block('editor-form');\n\nexport interface FormProps {\n    content: PageContent;\n    schema: JSONSchema4;\n    activeBlockIndex: number;\n    onChange: (content: PageContent) => void;\n    onSelect: (index: number) => void;\n}\n\n// TODO in https://github.com/gravity-ui/page-constructor/issues/884 this component will be extremely refactor\n\nexport const Form = React.memo(\n    ({content, onChange, activeBlockIndex, onSelect, schema}: FormProps) => {\n        const {blocks} = content || {};\n        const spec = useFormSpec(schema);\n        const {blocks: blocksSpec} = spec || {};\n\n        return (\n            <div className={b()}>\n                <Text variant=\"body-2\">{'Blocks'}</Text>\n                {blocks.map((blockData, index) =>\n                    blocksSpec[blockData.type] ? (\n                        <div className={b('block-form')} key={getBlockKey(blockData, index)}>\n                            <BlockForm\n                                spec={blocksSpec[blockData.type]}\n                                data={blockData}\n                                active={activeBlockIndex === index}\n                                onChange={(data: Block) => {\n                                    onChange({\n                                        ...content,\n                                        blocks: [\n                                            ...blocks.slice(0, index),\n                                            data,\n                                            ...blocks.slice(index + 1),\n                                        ],\n                                    });\n                                }}\n                                onSelect={() => onSelect(index)}\n                            />\n                        </div>\n                    ) : null,\n                )}\n            </div>\n        );\n    },\n);\n\nForm.displayName = 'Form';\n"]}

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

@@ -23,10 +23,7 @@ async function getEditorBlocksData() {
         const preview = getBlockPreview(blockType);
         template.meta = template.meta || {};
         template.meta.title = template.meta.title || formatBlockName(blockType);
-        EdiorBlockData[blockType] = {
-            ...template,
-            preview,
-        };
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
     }
     return EdiorBlockData;
 }

package/build/esm/editor/data/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["editor/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAC,8BAAqB;AAC9C,OAAO,EAAC,eAAe,EAAC,0BAAiB;AAEzC,OAAO,cAAc,sCAAmC;AACxD,OAAO,WAAW,mCAAgC;AAalD,MAAM,gBAAgB,GAAG,CAAC,SAAoB,EAA4C,EAAE,CACxF,MAAM,CAAC,eAAe,SAAS,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAEzE,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAoB,EAAE;IAC/D,IAAI,CAAC;QACD,IAAI,SAAS,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO,WAAW,CAAC;QACvB,CAAC;QAED,OAAO,cAAc,CAAC;IAC1B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACX,8BAA8B;QAC9B,OAAO,CAAC,IAAI,CAAC,qBAAqB,SAAS,YAAY,CAAC,CAAC;QACzD,OAAO,cAAc,CAAC;IAC1B,CAAC;AACL,CAAC,CAAC;AAIF,KAAK,UAAU,mBAAmB;IAC9B,MAAM,cAAc,GAAqB,EAAE,CAAC;IAE5C,KAAK,MAAM,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;QAC/C,MAAM,QAAQ,GAAG,MAAM,gBAAgB,CAAC,SAAsB,CAAC,CAAC;QAEhE,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;QAE3C,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;QAExE,cAAc,CAAC,SAAS,CAAC,GAAG;YACxB,GAAG,QAAQ;YACX,OAAO;SACV,CAAC;IACN,CAAC;IAED,OAAO,cAAc,CAAC;AAC1B,CAAC;AAED,OAAO,EAAmB,mBAAmB,EAAC,CAAC","sourcesContent":["import {Block, BlockType} from '../../models';\nimport {formatBlockName} from '../utils';\n\nimport DefaultPreview from './previews/default-preview';\nimport HeaderBlock from './previews/header-block';\n\nexport type PreviewComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n\nexport interface EdiorBlockData {\n    template: Block;\n    preview: PreviewComponent;\n    meta: {\n        title: string;\n        description?: string;\n    };\n}\n\nconst getBlockTemplate = (blockType: BlockType): Promise<Omit<EdiorBlockData, 'preview'>> =>\n    import(`./templates/${blockType}.json`).then((data) => data.default);\n\nconst getBlockPreview = (blockType: BlockType): PreviewComponent => {\n    try {\n        if (blockType === BlockType.HeaderBlock) {\n            return HeaderBlock;\n        }\n\n        return DefaultPreview;\n    } catch (err) {\n        /*eslint-disable no-console */\n        console.warn(`Preview image for ${blockType} not found`);\n        return DefaultPreview;\n    }\n};\n\ntype EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;\n\nasync function getEditorBlocksData(): Promise<EditorBlocksData> {\n    const EdiorBlockData: EditorBlocksData = {};\n\n    for (const blockType of Object.values(BlockType)) {\n        const template = await getBlockTemplate(blockType as BlockType);\n\n        const preview = getBlockPreview(blockType);\n\n        template.meta = template.meta || {};\n        template.meta.title = template.meta.title || formatBlockName(blockType);\n\n        EdiorBlockData[blockType] = {\n            ...template,\n            preview,\n        };\n    }\n\n    return EdiorBlockData;\n}\n\nexport {EditorBlocksData, getEditorBlocksData};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["editor/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAC,8BAAqB;AAC9C,OAAO,EAAC,eAAe,EAAC,0BAAiB;AAEzC,OAAO,cAAc,sCAAmC;AACxD,OAAO,WAAW,mCAAgC;AAalD,MAAM,gBAAgB,GAAG,CAAC,SAAoB,EAA4C,EAAE,CACxF,MAAM,CAAC,eAAe,SAAS,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAEzE,MAAM,eAAe,GAAG,CAAC,SAAoB,EAAoB,EAAE;IAC/D,IAAI,CAAC;QACD,IAAI,SAAS,KAAK,SAAS,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO,WAAW,CAAC;QACvB,CAAC;QAED,OAAO,cAAc,CAAC;IAC1B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACX,8BAA8B;QAC9B,OAAO,CAAC,IAAI,CAAC,qBAAqB,SAAS,YAAY,CAAC,CAAC;QACzD,OAAO,cAAc,CAAC;IAC1B,CAAC;AACL,CAAC,CAAC;AAIF,KAAK,UAAU,mBAAmB;IAC9B,MAAM,cAAc,GAAqB,EAAE,CAAC;IAE5C,KAAK,MAAM,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;QAC/C,MAAM,QAAQ,GAAG,MAAM,gBAAgB,CAAC,SAAsB,CAAC,CAAC;QAEhE,MAAM,OAAO,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;QAE3C,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;QAExE,cAAc,CAAC,SAAS,CAAC,mCAClB,QAAQ,KACX,OAAO,GACV,CAAC;IACN,CAAC;IAED,OAAO,cAAc,CAAC;AAC1B,CAAC;AAED,OAAO,EAAmB,mBAAmB,EAAC,CAAC","sourcesContent":["import {Block, BlockType} from '../../models';\nimport {formatBlockName} from '../utils';\n\nimport DefaultPreview from './previews/default-preview';\nimport HeaderBlock from './previews/header-block';\n\nexport type PreviewComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n\nexport interface EdiorBlockData {\n    template: Block;\n    preview: PreviewComponent;\n    meta: {\n        title: string;\n        description?: string;\n    };\n}\n\nconst getBlockTemplate = (blockType: BlockType): Promise<Omit<EdiorBlockData, 'preview'>> =>\n    import(`./templates/${blockType}.json`).then((data) => data.default);\n\nconst getBlockPreview = (blockType: BlockType): PreviewComponent => {\n    try {\n        if (blockType === BlockType.HeaderBlock) {\n            return HeaderBlock;\n        }\n\n        return DefaultPreview;\n    } catch (err) {\n        /*eslint-disable no-console */\n        console.warn(`Preview image for ${blockType} not found`);\n        return DefaultPreview;\n    }\n};\n\ntype EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;\n\nasync function getEditorBlocksData(): Promise<EditorBlocksData> {\n    const EdiorBlockData: EditorBlocksData = {};\n\n    for (const blockType of Object.values(BlockType)) {\n        const template = await getBlockTemplate(blockType as BlockType);\n\n        const preview = getBlockPreview(blockType);\n\n        template.meta = template.meta || {};\n        template.meta.title = template.meta.title || formatBlockName(blockType);\n\n        EdiorBlockData[blockType] = {\n            ...template,\n            preview,\n        };\n    }\n\n    return EdiorBlockData;\n}\n\nexport {EditorBlocksData, getEditorBlocksData};\n"]}

package/build/esm/editor/data/previews/default-preview.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { a11yHiddenSvgProps } from "../../../utils/svg.js";
-const DefaultPreview = (props) => (_jsxs("svg", { width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a11yHiddenSvgProps, ...props, children: [_jsx("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }), _jsx("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })] }));
+const DefaultPreview = (props) => (_jsxs("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props, { children: [_jsx("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }), _jsx("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }), _jsx("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })] })));
 export default DefaultPreview;
 //# sourceMappingURL=default-preview.js.map

package/build/esm/editor/data/previews/default-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-preview.js","sourceRoot":"../../../../../src","sources":["editor/data/previews/default-preview.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,8BAA2B;AAEtD,MAAM,cAAc,GAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CACvE,eACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,kBAAkB,KAClB,KAAK,aAET,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAG,EAChE,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAG,IAC1F,CACT,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {a11yHiddenSvgProps} from '../../../utils/svg';\n\nconst DefaultPreview: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg\n        width=\"150\"\n        height=\"76\"\n        viewBox=\"0 0 150 76\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...a11yHiddenSvgProps}\n        {...props}\n    >\n        <rect x=\"1\" y=\"1\" width=\"148\" height=\"74\" rx=\"8\" fill=\"white\" />\n        <rect\n            x=\"14.7674\"\n            y=\"21.6512\"\n            width=\"28.3953\"\n            height=\"6.88372\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect x=\"43.1628\" y=\"21.6512\" width=\"28.3953\" height=\"6.88372\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"14.7674\"\n            y=\"31.9767\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7675\"\n            y=\"37.1395\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7675\"\n            y=\"42.3023\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7674\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect x=\"33.6977\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"52.6279\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"78.4418\"\n            y=\"9.60464\"\n            width=\"56.7907\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"0.5\" y=\"0.5\" width=\"149\" height=\"75\" rx=\"8.5\" stroke=\"black\" strokeOpacity=\"0.1\" />\n    </svg>\n);\n\nexport default DefaultPreview;\n"]}
+{"version":3,"file":"default-preview.js","sourceRoot":"../../../../../src","sources":["editor/data/previews/default-preview.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,8BAA2B;AAEtD,MAAM,cAAc,GAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CACvE,6BACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,kBAAkB,EAClB,KAAK,eAET,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAG,EAChE,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,SAAS,GAChB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAG,KAC1F,CACT,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {a11yHiddenSvgProps} from '../../../utils/svg';\n\nconst DefaultPreview: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg\n        width=\"150\"\n        height=\"76\"\n        viewBox=\"0 0 150 76\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...a11yHiddenSvgProps}\n        {...props}\n    >\n        <rect x=\"1\" y=\"1\" width=\"148\" height=\"74\" rx=\"8\" fill=\"white\" />\n        <rect\n            x=\"14.7674\"\n            y=\"21.6512\"\n            width=\"28.3953\"\n            height=\"6.88372\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect x=\"43.1628\" y=\"21.6512\" width=\"28.3953\" height=\"6.88372\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"14.7674\"\n            y=\"31.9767\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7675\"\n            y=\"37.1395\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7675\"\n            y=\"42.3023\"\n            width=\"56.7907\"\n            height=\"3.44186\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect\n            x=\"14.7674\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"#E7E7E7\"\n        />\n        <rect x=\"33.6977\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"52.6279\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"78.4418\"\n            y=\"9.60464\"\n            width=\"56.7907\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"0.5\" y=\"0.5\" width=\"149\" height=\"75\" rx=\"8.5\" stroke=\"black\" strokeOpacity=\"0.1\" />\n    </svg>\n);\n\nexport default DefaultPreview;\n"]}

package/build/esm/editor/data/previews/header-block.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { a11yHiddenSvgProps } from "../../../utils/svg.js";
-const Header = (props) => (_jsxs("svg", { width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a11yHiddenSvgProps, ...props, children: [_jsx("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }), _jsx("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })] }));
+const Header = (props) => (_jsxs("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, a11yHiddenSvgProps, props, { children: [_jsx("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }), _jsx("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }), _jsx("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "currentColor" }), _jsx("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "currentColor" }), _jsx("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })] })));
 export default Header;
 //# sourceMappingURL=header-block.js.map

package/build/esm/editor/data/previews/header-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-block.js","sourceRoot":"../../../../../src","sources":["editor/data/previews/header-block.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,8BAA2B;AAEtD,MAAM,MAAM,GAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CAC/D,eACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,kBAAkB,KAClB,KAAK,aAET,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAG,EAChE,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAG,IAC1F,CACT,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {a11yHiddenSvgProps} from '../../../utils/svg';\n\nconst Header: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg\n        width=\"150\"\n        height=\"76\"\n        viewBox=\"0 0 150 76\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...a11yHiddenSvgProps}\n        {...props}\n    >\n        <rect x=\"1\" y=\"1\" width=\"148\" height=\"74\" rx=\"8\" fill=\"white\" />\n        <rect\n            x=\"4.44174\"\n            y=\"9.60464\"\n            width=\"141.116\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"14.7674\" y=\"21.6512\" width=\"28.3953\" height=\"6.88372\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"43.1628\"\n            y=\"21.6512\"\n            width=\"28.3953\"\n            height=\"6.88372\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"14.7674\" y=\"31.9767\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"37.1395\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"42.3023\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"33.6976\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect\n            x=\"52.6279\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect\n            x=\"78.4418\"\n            y=\"9.60464\"\n            width=\"56.7907\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"0.5\" y=\"0.5\" width=\"149\" height=\"75\" rx=\"8.5\" stroke=\"black\" strokeOpacity=\"0.1\" />\n    </svg>\n);\n\nexport default Header;\n"]}
+{"version":3,"file":"header-block.js","sourceRoot":"../../../../../src","sources":["editor/data/previews/header-block.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,kBAAkB,EAAC,8BAA2B;AAEtD,MAAM,MAAM,GAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CAC/D,6BACI,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,kBAAkB,EAClB,KAAK,eAET,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,GAAG,EAChE,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC5F,eAAM,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,GAAG,EAC3F,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,QAAQ,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,cAAc,GACrB,EACF,eACI,CAAC,EAAC,SAAS,EACX,CAAC,EAAC,SAAS,EACX,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,eAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,GAAG,KAC1F,CACT,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {a11yHiddenSvgProps} from '../../../utils/svg';\n\nconst Header: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n    <svg\n        width=\"150\"\n        height=\"76\"\n        viewBox=\"0 0 150 76\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...a11yHiddenSvgProps}\n        {...props}\n    >\n        <rect x=\"1\" y=\"1\" width=\"148\" height=\"74\" rx=\"8\" fill=\"white\" />\n        <rect\n            x=\"4.44174\"\n            y=\"9.60464\"\n            width=\"141.116\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"14.7674\" y=\"21.6512\" width=\"28.3953\" height=\"6.88372\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"43.1628\"\n            y=\"21.6512\"\n            width=\"28.3953\"\n            height=\"6.88372\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"14.7674\" y=\"31.9767\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"37.1395\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"42.3023\" width=\"56.7907\" height=\"3.44186\" rx=\"0.860465\" fill=\"white\" />\n        <rect x=\"14.7674\" y=\"49.186\" width=\"18.9302\" height=\"5.16279\" rx=\"0.860465\" fill=\"white\" />\n        <rect\n            x=\"33.6976\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect\n            x=\"52.6279\"\n            y=\"49.186\"\n            width=\"18.9302\"\n            height=\"5.16279\"\n            rx=\"0.860465\"\n            fill=\"currentColor\"\n        />\n        <rect\n            x=\"78.4418\"\n            y=\"9.60464\"\n            width=\"56.7907\"\n            height=\"56.7907\"\n            rx=\"5.16279\"\n            fill=\"currentColor\"\n        />\n        <rect x=\"0.5\" y=\"0.5\" width=\"149\" height=\"75\" rx=\"8.5\" stroke=\"black\" strokeOpacity=\"0.1\" />\n    </svg>\n);\n\nexport default Header;\n"]}

package/build/esm/editor/data/templates/{slider-new-block.json → slider-old-block.json}

@@ -1,8 +1,8 @@
 {
   "template": {
-    "type": "slider-new-block",
+    "type": "slider-old-block",
     "title": {
-      "text": "Slider new",
+      "text": "Slider",
       "url": "https://example.com"
     },
     "children": [

package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.js

@@ -14,7 +14,7 @@ const ajv = new Ajv({
     strictTypes: false,
     strictRequired: false,
 });
-const getOneOfCustomSpecDefaultType = (spec) => spec.viewSpec?.order?.[0] || Object.keys(spec.properties || {})[0];
+const getOneOfCustomSpecDefaultType = (spec) => { var _a, _b; return ((_b = (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.order) === null || _b === void 0 ? void 0 : _b[0]) || Object.keys(spec.properties || {})[0]; };
 // dynamic-forms pass {} as default value for required properties of all types
 // this function replaces {} with default value accordingly to selected OneOf option spec type
 const getControllerDefautValue = (value, valueSpecType) => {
@@ -39,31 +39,29 @@ const getControllerDefautValue = (value, valueSpecType) => {
  * @returns {React.FC<ObjectIndependentInputProps>}
  */
 export const OneOfCustom = (props) => {
+    var _a;
     const { spec, input, name } = props;
     const { properties } = spec;
     //getting oneOf option type from initial value
-    const valueType = React.useMemo(() => (properties &&
-        Object.keys(properties)?.find((key) => {
-            const fieldSchema = (properties?.[key]).__schema;
-            return fieldSchema && ajv.validate(fieldSchema, transformArrOut(input.value));
-        })) ||
-        getOneOfCustomSpecDefaultType(spec), 
+    const valueType = React.useMemo(() => {
+        var _a;
+        return (properties &&
+            ((_a = Object.keys(properties)) === null || _a === void 0 ? void 0 : _a.find((key) => {
+                const fieldSchema = (properties === null || properties === void 0 ? void 0 : properties[key]).__schema;
+                return fieldSchema && ajv.validate(fieldSchema, transformArrOut(input.value));
+            }))) ||
+            getOneOfCustomSpecDefaultType(spec);
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const { oneOfValue, specProperties, toggler } = useOneOf({
-        props: {
-            ...props,
-            input: {
-                ...input,
-                value: valueType ? { [valueType]: input.value } : input.value,
-            },
-        },
+        props: Object.assign(Object.assign({}, props), { input: Object.assign(Object.assign({}, input), { value: valueType ? { [valueType]: input.value } : input.value }) }),
     });
     const parentOnChange = React.useCallback((_childName, childValue, childErrors) => {
         input.onChange(childValue, childErrors);
     }, [input]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input]);
-    const valueSpecType = specProperties[oneOfValue]?.type || SpecTypes.Object;
+    const valueSpecType = ((_a = specProperties[oneOfValue]) === null || _a === void 0 ? void 0 : _a.type) || SpecTypes.Object;
     return (_jsxs("div", { className: b(), children: [_jsx("div", { children: toggler }), specProperties[oneOfValue] && (_jsx(GroupIndent, { children: _jsx(Controller, { value: getControllerDefautValue(input.value, valueSpecType), name: name, spec: specProperties[oneOfValue], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }, `${name}.${oneOfValue}`) }))] }));
 };
 //# sourceMappingURL=OneOfCustom.js.map

package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneOfCustom.js","sourceRoot":"../../../../../../src","sources":["editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {\n    Controller,\n    FieldObjectValue,\n    FieldValue,\n    GroupIndent,\n    ObjectIndependentInputProps,\n    ObjectSpec,\n    SpecTypes,\n    ValidateError,\n    transformArrOut,\n} from '@gravity-ui/dynamic-forms';\nimport Ajv from 'ajv';\nimport isEmpty from 'lodash/isEmpty';\n\nimport {block} from '../../../../utils';\nimport {getSpecTypeDefaultValue, useOneOf} from '../../hooks/useOneOf';\nimport {SpecCustomProps} from '../../parser/types';\n\nimport './OneOfCustom.scss';\n\nconst b = block('one-of-custom');\n\nconst ajv = new Ajv({\n    $data: true,\n    strict: false,\n    strictSchema: false,\n    strictTypes: false,\n    strictRequired: false,\n});\n\nconst getOneOfCustomSpecDefaultType = (spec: ObjectSpec) =>\n    spec.viewSpec?.order?.[0] || Object.keys(spec.properties || {})[0];\n\n// dynamic-forms pass {} as default value for required properties of all types\n// this function replaces {} with default value accordingly to selected OneOf option spec type\nconst getControllerDefautValue = (value: FieldValue, valueSpecType?: SpecTypes) => {\n    const isDefaultValue = typeof value === 'object' && isEmpty(value);\n    const defaultValue = valueSpecType ? getSpecTypeDefaultValue(valueSpecType) : undefined;\n\n    return isDefaultValue ? (defaultValue as FieldValue) : value;\n};\n\n/**\n * Customization of @gravity-ui/dynamic-forms OneOf component\n *\n * Main differences from original component:\n *\n * 1. Custom component can detect initial data type by it's json schema passed it __schema property of spec and\n * shows according input\n *\n * 2. Custom component doesn't create additional nested level of data for each OneOf option and doesn't wraps data value, e.g.\n *\n * custom component: {propertyName: propertyValue}\n * original component: {propertyName: {option1: {value: propertyValue}}}\n *\n * @param {ObjectIndependentInputProps} props - props of original OneOf component\n * @returns {React.FC<ObjectIndependentInputProps>}\n */\nexport const OneOfCustom: React.FC<ObjectIndependentInputProps> = (props) => {\n    const {spec, input, name} = props;\n    const {properties} = spec;\n\n    //getting oneOf option type from initial value\n    const valueType = React.useMemo(\n        () =>\n            (properties &&\n                Object.keys(properties)?.find((key) => {\n                    const fieldSchema = (properties?.[key] as SpecCustomProps).__schema;\n\n                    return fieldSchema && ajv.validate(fieldSchema, transformArrOut(input.value));\n                })) ||\n            getOneOfCustomSpecDefaultType(spec),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n\n    const {oneOfValue, specProperties, toggler} = useOneOf({\n        props: {\n            ...props,\n            input: {\n                ...input,\n                value: valueType ? {[valueType]: input.value} : input.value,\n            },\n        },\n    });\n\n    const parentOnChange = React.useCallback(\n        (\n            _childName: string,\n            childValue: FieldValue,\n            childErrors?: Record<string, ValidateError>,\n        ) => {\n            input.onChange(childValue as FieldObjectValue, childErrors);\n        },\n        [input],\n    );\n\n    const parentOnUnmount = React.useCallback(\n        (childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),\n        [input],\n    );\n\n    const valueSpecType = specProperties[oneOfValue]?.type || SpecTypes.Object;\n\n    return (\n        <div className={b()}>\n            <div>{toggler}</div>\n            {specProperties[oneOfValue] && (\n                <GroupIndent>\n                    <Controller\n                        value={getControllerDefautValue(input.value, valueSpecType)}\n                        name={name}\n                        spec={specProperties[oneOfValue]}\n                        parentOnChange={parentOnChange}\n                        parentOnUnmount={parentOnUnmount}\n                        key={`${name}.${oneOfValue}`}\n                    />\n                </GroupIndent>\n            )}\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"OneOfCustom.js","sourceRoot":"../../../../../../src","sources":["editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {\n    Controller,\n    FieldObjectValue,\n    FieldValue,\n    GroupIndent,\n    ObjectIndependentInputProps,\n    ObjectSpec,\n    SpecTypes,\n    ValidateError,\n    transformArrOut,\n} from '@gravity-ui/dynamic-forms';\nimport Ajv from 'ajv';\nimport isEmpty from 'lodash/isEmpty';\n\nimport {block} from '../../../../utils';\nimport {getSpecTypeDefaultValue, useOneOf} from '../../hooks/useOneOf';\nimport {SpecCustomProps} from '../../parser/types';\n\nimport './OneOfCustom.scss';\n\nconst b = block('one-of-custom');\n\nconst ajv = new Ajv({\n    $data: true,\n    strict: false,\n    strictSchema: false,\n    strictTypes: false,\n    strictRequired: false,\n});\n\nconst getOneOfCustomSpecDefaultType = (spec: ObjectSpec) =>\n    spec.viewSpec?.order?.[0] || Object.keys(spec.properties || {})[0];\n\n// dynamic-forms pass {} as default value for required properties of all types\n// this function replaces {} with default value accordingly to selected OneOf option spec type\nconst getControllerDefautValue = (value: FieldValue, valueSpecType?: SpecTypes) => {\n    const isDefaultValue = typeof value === 'object' && isEmpty(value);\n    const defaultValue = valueSpecType ? getSpecTypeDefaultValue(valueSpecType) : undefined;\n\n    return isDefaultValue ? (defaultValue as FieldValue) : value;\n};\n\n/**\n * Customization of @gravity-ui/dynamic-forms OneOf component\n *\n * Main differences from original component:\n *\n * 1. Custom component can detect initial data type by it's json schema passed it __schema property of spec and\n * shows according input\n *\n * 2. Custom component doesn't create additional nested level of data for each OneOf option and doesn't wraps data value, e.g.\n *\n * custom component: {propertyName: propertyValue}\n * original component: {propertyName: {option1: {value: propertyValue}}}\n *\n * @param {ObjectIndependentInputProps} props - props of original OneOf component\n * @returns {React.FC<ObjectIndependentInputProps>}\n */\nexport const OneOfCustom: React.FC<ObjectIndependentInputProps> = (props) => {\n    const {spec, input, name} = props;\n    const {properties} = spec;\n\n    //getting oneOf option type from initial value\n    const valueType = React.useMemo(\n        () =>\n            (properties &&\n                Object.keys(properties)?.find((key) => {\n                    const fieldSchema = (properties?.[key] as SpecCustomProps).__schema;\n\n                    return fieldSchema && ajv.validate(fieldSchema, transformArrOut(input.value));\n                })) ||\n            getOneOfCustomSpecDefaultType(spec),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n\n    const {oneOfValue, specProperties, toggler} = useOneOf({\n        props: {\n            ...props,\n            input: {\n                ...input,\n                value: valueType ? {[valueType]: input.value} : input.value,\n            },\n        },\n    });\n\n    const parentOnChange = React.useCallback(\n        (\n            _childName: string,\n            childValue: FieldValue,\n            childErrors?: Record<string, ValidateError>,\n        ) => {\n            input.onChange(childValue as FieldObjectValue, childErrors);\n        },\n        [input],\n    );\n\n    const parentOnUnmount = React.useCallback(\n        (childName: string) => input.onChange((currentValue) => currentValue, {[childName]: false}),\n        [input],\n    );\n\n    const valueSpecType = specProperties[oneOfValue]?.type || SpecTypes.Object;\n\n    return (\n        <div className={b()}>\n            <div>{toggler}</div>\n            {specProperties[oneOfValue] && (\n                <GroupIndent>\n                    <Controller\n                        value={getControllerDefautValue(input.value, valueSpecType)}\n                        name={name}\n                        spec={specProperties[oneOfValue]}\n                        parentOnChange={parentOnChange}\n                        parentOnUnmount={parentOnUnmount}\n                        key={`${name}.${oneOfValue}`}\n                    />\n                </GroupIndent>\n            )}\n        </div>\n    );\n};\n"]}

package/build/esm/editor/dynamic-forms-custom/hooks/useOneOf.js

@@ -32,16 +32,18 @@ export const useOneOf = ({ props, onTogglerChange }) => {
         return (valueKeys || order || Object.keys(specProperties))[0];
     });
     const onOneOfChange = React.useCallback(([newValue]) => {
+        var _a;
         if (newValue !== oneOfValue) {
-            const specType = specProperties[newValue]?.type || SpecTypes.Object;
+            const specType = ((_a = specProperties[newValue]) === null || _a === void 0 ? void 0 : _a.type) || SpecTypes.Object;
             input.onChange(getSpecTypeDefaultValue(specType));
             setOneOfValue(newValue);
-            onTogglerChange?.(newValue);
+            onTogglerChange === null || onTogglerChange === void 0 ? void 0 : onTogglerChange(newValue);
         }
     }, [setOneOfValue, input, oneOfValue, specProperties, onTogglerChange]);
     const options = React.useMemo(() => (order || Object.keys(specProperties)).map((value) => {
-        const title = spec.description?.[value] ||
-            specProperties[value]?.viewSpec.layoutTitle ||
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
             value ||
             '';
         return {
@@ -51,17 +53,17 @@ export const useOneOf = ({ props, onTogglerChange }) => {
         };
     }), [spec.description, order, specProperties]);
     const togglerInput = React.useMemo(() => {
-        if (oneOfParams?.toggler !== 'radio' &&
-            (oneOfParams?.toggler === 'select' ||
+        if ((oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler) !== 'radio' &&
+            ((oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler) === 'select' ||
                 options.length > 3 ||
                 some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
             return (_jsx(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: disabled, filterable: options.length > 7, qa: name }));
         }
         return (_jsx(SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: disabled, qa: name, children: options.map(({ value, title }) => (_jsx(SegmentedRadioGroup.Option, { value: value, children: title }, value))) }));
-    }, [options, oneOfValue, onOneOfChange, name, oneOfParams?.toggler, disabled]);
+    }, [options, oneOfValue, onOneOfChange, name, oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler, disabled]);
     const toggler = React.useMemo(() => {
         if (Layout) {
-            return _jsx(Layout, { ...props, children: togglerInput });
+            return _jsx(Layout, Object.assign({}, props, { children: togglerInput }));
         }
         return togglerInput;
     }, [Layout, togglerInput, props]);

package/build/esm/editor/dynamic-forms-custom/hooks/useOneOf.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOneOf.js","sourceRoot":"../../../../../src","sources":["editor/dynamic-forms-custom/hooks/useOneOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {\n    FieldObjectValue,\n    ObjectIndependentInputProps,\n    Spec,\n    SpecTypes,\n} from '@gravity-ui/dynamic-forms';\nimport {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport isObjectLike from 'lodash/isObjectLike';\nimport some from 'lodash/some';\n\nconst MAX_TAB_TITLE_LENGTH = 20;\n\nexport interface UseOneOfParams {\n    props: ObjectIndependentInputProps;\n    onTogglerChange?: (value: string) => void;\n}\n\nexport const getSpecTypeDefaultValue = (type: SpecTypes) => {\n    switch (type) {\n        case SpecTypes.Array:\n            return [];\n        case SpecTypes.Boolean:\n        case SpecTypes.Number:\n        case SpecTypes.String:\n            return undefined;\n        default:\n            return {};\n    }\n};\n\nexport const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {\n    const {name, input, spec, Layout} = props;\n    const {order, disabled, oneOfParams} = spec.viewSpec;\n\n    const specProperties = React.useMemo(\n        () => (isObjectLike(spec.properties) ? (spec.properties as Record<string, Spec>) : {}),\n        [spec.properties],\n    );\n\n    const [oneOfValue, setOneOfValue] = React.useState(() => {\n        let valueKeys: string[] | undefined;\n\n        if (isObjectLike(input.value)) {\n            const keys = Object.keys(input.value);\n\n            if (keys.length) {\n                valueKeys = keys;\n            }\n        }\n\n        return (valueKeys || order || Object.keys(specProperties))[0];\n    });\n\n    const onOneOfChange = React.useCallback(\n        ([newValue]: string[]) => {\n            if (newValue !== oneOfValue) {\n                const specType = specProperties[newValue]?.type || SpecTypes.Object;\n                input.onChange(getSpecTypeDefaultValue(specType) as FieldObjectValue);\n                setOneOfValue(newValue);\n                onTogglerChange?.(newValue);\n            }\n        },\n        [setOneOfValue, input, oneOfValue, specProperties, onTogglerChange],\n    );\n\n    const options = React.useMemo(\n        () =>\n            (order || Object.keys(specProperties)).map((value) => {\n                const title =\n                    spec.description?.[value] ||\n                    specProperties[value]?.viewSpec.layoutTitle ||\n                    value ||\n                    '';\n\n                return {\n                    value,\n                    title,\n                    content: title,\n                };\n            }),\n        [spec.description, order, specProperties],\n    );\n\n    const togglerInput = React.useMemo(() => {\n        if (\n            oneOfParams?.toggler !== 'radio' &&\n            (oneOfParams?.toggler === 'select' ||\n                options.length > 3 ||\n                some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))\n        ) {\n            return (\n                <Select\n                    width=\"max\"\n                    value={[oneOfValue]}\n                    onUpdate={onOneOfChange}\n                    options={options}\n                    disabled={disabled}\n                    filterable={options.length > 7}\n                    qa={name}\n                />\n            );\n        }\n\n        return (\n            <SegmentedRadioGroup\n                value={oneOfValue}\n                onChange={(event) => onOneOfChange([event.target.value])}\n                disabled={disabled}\n                qa={name}\n            >\n                {options.map(({value, title}) => (\n                    <SegmentedRadioGroup.Option key={value} value={value}>\n                        {title}\n                    </SegmentedRadioGroup.Option>\n                ))}\n            </SegmentedRadioGroup>\n        );\n    }, [options, oneOfValue, onOneOfChange, name, oneOfParams?.toggler, disabled]);\n\n    const toggler = React.useMemo(() => {\n        if (Layout) {\n            return <Layout {...props}>{togglerInput}</Layout>;\n        }\n\n        return togglerInput;\n    }, [Layout, togglerInput, props]);\n\n    return {oneOfValue, specProperties, toggler, togglerInput};\n};\n"]}
+{"version":3,"file":"useOneOf.js","sourceRoot":"../../../../../src","sources":["editor/dynamic-forms-custom/hooks/useOneOf.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {\n    FieldObjectValue,\n    ObjectIndependentInputProps,\n    Spec,\n    SpecTypes,\n} from '@gravity-ui/dynamic-forms';\nimport {SegmentedRadioGroup, Select} from '@gravity-ui/uikit';\nimport isObjectLike from 'lodash/isObjectLike';\nimport some from 'lodash/some';\n\nconst MAX_TAB_TITLE_LENGTH = 20;\n\nexport interface UseOneOfParams {\n    props: ObjectIndependentInputProps;\n    onTogglerChange?: (value: string) => void;\n}\n\nexport const getSpecTypeDefaultValue = (type: SpecTypes) => {\n    switch (type) {\n        case SpecTypes.Array:\n            return [];\n        case SpecTypes.Boolean:\n        case SpecTypes.Number:\n        case SpecTypes.String:\n            return undefined;\n        default:\n            return {};\n    }\n};\n\nexport const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {\n    const {name, input, spec, Layout} = props;\n    const {order, disabled, oneOfParams} = spec.viewSpec;\n\n    const specProperties = React.useMemo(\n        () => (isObjectLike(spec.properties) ? (spec.properties as Record<string, Spec>) : {}),\n        [spec.properties],\n    );\n\n    const [oneOfValue, setOneOfValue] = React.useState(() => {\n        let valueKeys: string[] | undefined;\n\n        if (isObjectLike(input.value)) {\n            const keys = Object.keys(input.value);\n\n            if (keys.length) {\n                valueKeys = keys;\n            }\n        }\n\n        return (valueKeys || order || Object.keys(specProperties))[0];\n    });\n\n    const onOneOfChange = React.useCallback(\n        ([newValue]: string[]) => {\n            if (newValue !== oneOfValue) {\n                const specType = specProperties[newValue]?.type || SpecTypes.Object;\n                input.onChange(getSpecTypeDefaultValue(specType) as FieldObjectValue);\n                setOneOfValue(newValue);\n                onTogglerChange?.(newValue);\n            }\n        },\n        [setOneOfValue, input, oneOfValue, specProperties, onTogglerChange],\n    );\n\n    const options = React.useMemo(\n        () =>\n            (order || Object.keys(specProperties)).map((value) => {\n                const title =\n                    spec.description?.[value] ||\n                    specProperties[value]?.viewSpec.layoutTitle ||\n                    value ||\n                    '';\n\n                return {\n                    value,\n                    title,\n                    content: title,\n                };\n            }),\n        [spec.description, order, specProperties],\n    );\n\n    const togglerInput = React.useMemo(() => {\n        if (\n            oneOfParams?.toggler !== 'radio' &&\n            (oneOfParams?.toggler === 'select' ||\n                options.length > 3 ||\n                some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))\n        ) {\n            return (\n                <Select\n                    width=\"max\"\n                    value={[oneOfValue]}\n                    onUpdate={onOneOfChange}\n                    options={options}\n                    disabled={disabled}\n                    filterable={options.length > 7}\n                    qa={name}\n                />\n            );\n        }\n\n        return (\n            <SegmentedRadioGroup\n                value={oneOfValue}\n                onChange={(event) => onOneOfChange([event.target.value])}\n                disabled={disabled}\n                qa={name}\n            >\n                {options.map(({value, title}) => (\n                    <SegmentedRadioGroup.Option key={value} value={value}>\n                        {title}\n                    </SegmentedRadioGroup.Option>\n                ))}\n            </SegmentedRadioGroup>\n        );\n    }, [options, oneOfValue, onOneOfChange, name, oneOfParams?.toggler, disabled]);\n\n    const toggler = React.useMemo(() => {\n        if (Layout) {\n            return <Layout {...props}>{togglerInput}</Layout>;\n        }\n\n        return togglerInput;\n    }, [Layout, togglerInput, props]);\n\n    return {oneOfValue, specProperties, toggler, togglerInput};\n};\n"]}