@gravity-ui/page-constructor 8.5.0-alpha.0 → 8.5.0-alpha.10

package/build/cjs/form-builder-v2/FormBuilderV2.css

@@ -0,0 +1,93 @@
+.pcformbuilderv2-main {
+  width: 100%;
+  min-width: 640px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.pcformbuilderv2-main__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--g-spacing-2) 0;
+  gap: var(--g-spacing-3);
+}
+.pcformbuilderv2-main__toolbar-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.pcformbuilderv2-main__schema-popup {
+  width: min(560px, 90vw);
+  padding: var(--g-spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.pcformbuilderv2-main__schema-popup-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-half);
+}
+.pcformbuilderv2-main__schema-popup-json {
+  margin: 0;
+  padding: var(--g-spacing-3);
+  background: var(--g-color-base-generic);
+  border-radius: var(--g-border-radius-m);
+  font-size: 12px;
+  line-height: 1.4;
+  max-height: min(480px, 60vh);
+  overflow: auto;
+  white-space: pre;
+}
+.pcformbuilderv2-main__schema-popup-actions {
+  display: flex;
+  gap: var(--g-spacing-2);
+  justify-content: flex-end;
+}
+.pcformbuilderv2-main__visual {
+  display: grid;
+  grid-template-columns: var(--fb2-palette-w, 220px) var(--g-spacing-2) minmax(240px, 1fr) var(--g-spacing-2) var(--fb2-inspector-w, 320px);
+  padding: var(--g-spacing-4) 0;
+  align-items: stretch;
+}
+.pcformbuilderv2-main__palette, .pcformbuilderv2-main__canvas, .pcformbuilderv2-main__inspector {
+  min-width: 0;
+}
+.pcformbuilderv2-main__palette, .pcformbuilderv2-main__inspector {
+  position: sticky;
+  top: var(--g-spacing-4);
+  align-self: start;
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-main__visual {
+  grid-template-columns: 56px minmax(240px, 1fr) var(--g-spacing-2) var(--fb2-inspector-w, 320px);
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-main__canvas {
+  padding-left: var(--g-spacing-2);
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette {
+  padding: 6px;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__header {
+  display: none;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__items {
+  grid-template-columns: 1fr;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__tile {
+  padding: var(--g-spacing-1);
+  gap: 0;
+}
+.pcformbuilderv2-main_compact .pcformbuilderv2-palette__tile-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/build/cjs/form-builder-v2/FormBuilderV2.d.ts

@@ -0,0 +1,10 @@
+import { FormField } from "./types.js";
+export type FormBuilderDensity = 'full' | 'compact';
+interface FormBuilderV2Props {
+    className?: string;
+    formFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+    density?: FormBuilderDensity;
+}
+export declare const FormBuilderV2: ({ className, formFields, onChange, density, }: FormBuilderV2Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/FormBuilderV2.js

@@ -0,0 +1,123 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilderV2 = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const helpers_1 = require("@dnd-kit/helpers");
+const react_1 = require("@dnd-kit/react");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const CanvasContentContext_1 = require("./CanvasContentContext.js");
+const Canvas_1 = require("./components/Canvas/Canvas.js");
+const ContentTab_1 = require("./components/ContentTab/ContentTab.js");
+const DragOverlayPreview_1 = require("./components/DragOverlayPreview/DragOverlayPreview.js");
+const Inspector_1 = require("./components/Inspector/Inspector.js");
+const Palette_1 = require("./components/Palette/Palette.js");
+const ResizeHandle_1 = require("./components/ResizeHandle/ResizeHandle.js");
+const SchemaPopup_1 = require("./components/SchemaPopup/SchemaPopup.js");
+const FormContext_1 = require("./hooks/FormContext.js");
+const cn_1 = require("./utils/cn.js");
+const dragData_1 = require("./utils/dragData.js");
+const fieldGroups_1 = require("./utils/fieldGroups.js");
+const fieldTree_1 = require("./utils/fieldTree.js");
+const stripIds_1 = require("./utils/stripIds.js");
+const b = (0, cn_1.formBuilderV2Cn)('main');
+const PALETTE_MIN = 160;
+const PALETTE_MAX = 400;
+const PALETTE_DEFAULT = 220;
+const INSPECTOR_MIN = 270;
+const INSPECTOR_MAX = 560;
+const INSPECTOR_DEFAULT = 320;
+const FormBuilderShell = ({ className, density }) => {
+    const [mode, setMode] = React.useState('edit');
+    const [canvasContent, setCanvasContent] = React.useState({});
+    const [templateContent, setTemplateContent] = React.useState({});
+    const [paletteWidth, setPaletteWidth] = React.useState(PALETTE_DEFAULT);
+    const [inspectorWidth, setInspectorWidth] = React.useState(INSPECTOR_DEFAULT);
+    const [schemaPopupOpen, setSchemaPopupOpen] = React.useState(false);
+    const schemaButtonRef = React.useRef(null);
+    const isCompact = density === 'compact';
+    const { formFields, setAllFields, addField, addFieldToSection, insertFieldBefore, insertFieldAfter, moveFieldToSection, } = (0, FormContext_1.useFormContext)();
+    const schema = React.useMemo(() => (0, stripIds_1.stripIds)(formFields), [formFields]);
+    const handleDragEnd = React.useCallback((event) => {
+        if (event.canceled)
+            return;
+        const { source, target } = event.operation;
+        if (!source)
+            return;
+        const paletteData = (0, dragData_1.isPaletteData)(source.data) ? source.data : null;
+        const isPaletteDrag = paletteData !== null || String(source.id).startsWith(Palette_1.PALETTE_DRAGGABLE_PREFIX);
+        if (isPaletteDrag) {
+            const type = paletteData?.type;
+            if (!type)
+                return;
+            if (!target) {
+                addField(type);
+                return;
+            }
+            if ((0, dragData_1.isSectionDropData)(target.data)) {
+                addFieldToSection(target.data.sectionId, type);
+                return;
+            }
+            if (String(target.id) === String(source.id)) {
+                addField(type);
+                return;
+            }
+            const dropAfter = (0, dragData_1.isDropAfter)(event.operation.position?.current?.y, target.shape?.center?.y);
+            if (dropAfter) {
+                insertFieldAfter(String(target.id), type);
+            }
+            else {
+                insertFieldBefore(String(target.id), type);
+            }
+            return;
+        }
+        if (target && (0, dragData_1.isSectionDropData)(target.data)) {
+            moveFieldToSection(String(source.id), target.data.sectionId);
+            return;
+        }
+        const groups = (0, fieldGroups_1.buildGroupsMap)(formFields);
+        const nextGroups = (0, helpers_1.move)(groups, event);
+        const nextFields = (0, fieldGroups_1.applyGroupsMap)(nextGroups);
+        setAllFields(nextFields);
+    }, [
+        addField,
+        addFieldToSection,
+        formFields,
+        insertFieldBefore,
+        insertFieldAfter,
+        moveFieldToSection,
+        setAllFields,
+    ]);
+    const gridStyle = {
+        '--fb2-palette-w': `${paletteWidth}px`,
+        '--fb2-inspector-w': `${inspectorWidth}px`,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: b({ compact: density === 'compact' }, className), children: (0, jsx_runtime_1.jsxs)(CanvasContentContext_1.CanvasContentProvider, { content: canvasContent, setContent: setCanvasContent, templateContent: templateContent, setTemplateContent: setTemplateContent, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('toolbar'), children: [(0, jsx_runtime_1.jsx)(uikit_1.SegmentedRadioGroup, { size: "m", value: mode, onUpdate: setMode, options: [
+                                {
+                                    value: 'edit',
+                                    content: ((0, jsx_runtime_1.jsxs)("span", { className: b('toolbar-option'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Pencil, size: 14 }), "Edit"] })),
+                                },
+                                {
+                                    value: 'preview',
+                                    content: ((0, jsx_runtime_1.jsxs)("span", { className: b('toolbar-option'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye, size: 14 }), "Preview"] })),
+                                },
+                            ] }), (0, jsx_runtime_1.jsxs)(uikit_1.Button, { ref: schemaButtonRef, view: "outlined", size: "m", onClick: () => setSchemaPopupOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Code, size: 14 }), "Schema"] }), (0, jsx_runtime_1.jsx)(SchemaPopup_1.SchemaPopup, { schema: schema, onApply: setAllFields, open: schemaPopupOpen, onOpenChange: setSchemaPopupOpen, anchorElement: schemaButtonRef.current })] }), mode === 'edit' ? ((0, jsx_runtime_1.jsxs)(react_1.DragDropProvider, { onDragEnd: handleDragEnd, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('visual'), style: gridStyle, children: [(0, jsx_runtime_1.jsx)("aside", { className: b('palette'), children: (0, jsx_runtime_1.jsx)(Palette_1.Palette, {}) }), !isCompact && ((0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { value: paletteWidth, min: PALETTE_MIN, max: PALETTE_MAX, direction: "left", onChange: setPaletteWidth })), (0, jsx_runtime_1.jsx)("main", { className: b('canvas'), children: (0, jsx_runtime_1.jsx)(Canvas_1.Canvas, {}) }), (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { value: inspectorWidth, min: INSPECTOR_MIN, max: INSPECTOR_MAX, direction: "right", onChange: setInspectorWidth }), (0, jsx_runtime_1.jsx)("aside", { className: b('inspector'), children: (0, jsx_runtime_1.jsx)(Inspector_1.Inspector, {}) })] }), (0, jsx_runtime_1.jsx)(react_1.DragOverlay, { dropAnimation: null, children: (source) => {
+                                if (!source)
+                                    return null;
+                                if ((0, dragData_1.isPaletteData)(source.data)) {
+                                    return (0, jsx_runtime_1.jsx)(DragOverlayPreview_1.DragOverlayPreview, { type: source.data.type });
+                                }
+                                const field = (0, fieldTree_1.findFieldById)(formFields, String(source.id));
+                                if (!field)
+                                    return null;
+                                return (0, jsx_runtime_1.jsx)(DragOverlayPreview_1.DragOverlayPreview, { type: field.type, field: field });
+                            } })] })) : ((0, jsx_runtime_1.jsx)(ContentTab_1.ContentTab, {}))] }) }));
+};
+const FormBuilderV2 = ({ className, formFields, onChange, density = 'full', }) => {
+    return ((0, jsx_runtime_1.jsx)(FormContext_1.FormProvider, { formFields: formFields, onChange: onChange, children: (0, jsx_runtime_1.jsx)(FormBuilderShell, { className: className, density: density }) }));
+};
+exports.FormBuilderV2 = FormBuilderV2;
+//# sourceMappingURL=FormBuilderV2.js.map

package/build/cjs/form-builder-v2/FormBuilderV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderV2.js","sourceRoot":"../../../src","sources":["form-builder-v2/FormBuilderV2.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type {DragDropEvents} from '@dnd-kit/abstract';\nimport type {DragDropManager, Draggable, Droppable} from '@dnd-kit/dom';\nimport {move} from '@dnd-kit/helpers';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {Code, Eye, Pencil} from '@gravity-ui/icons';\nimport {Button, Icon, SegmentedRadioGroup} from '@gravity-ui/uikit';\n\nimport type {Content} from '../form-generator-v2/types';\n\nimport {CanvasContentProvider} from './CanvasContentContext';\nimport {Canvas} from './components/Canvas/Canvas';\nimport {ContentTab} from './components/ContentTab/ContentTab';\nimport {DragOverlayPreview} from './components/DragOverlayPreview/DragOverlayPreview';\nimport {Inspector} from './components/Inspector/Inspector';\nimport {PALETTE_DRAGGABLE_PREFIX, Palette} from './components/Palette/Palette';\nimport {ResizeHandle} from './components/ResizeHandle/ResizeHandle';\nimport {SchemaPopup} from './components/SchemaPopup/SchemaPopup';\nimport {FormProvider, useFormContext} from './hooks/FormContext';\nimport {FormField} from './types';\nimport {formBuilderV2Cn} from './utils/cn';\nimport {isDropAfter, isPaletteData, isSectionDropData} from './utils/dragData';\nimport {applyGroupsMap, buildGroupsMap} from './utils/fieldGroups';\nimport {findFieldById} from './utils/fieldTree';\nimport {stripIds} from './utils/stripIds';\n\nimport './FormBuilderV2.scss';\n\nconst b = formBuilderV2Cn('main');\n\ntype DndEvents = DragDropEvents<Draggable, Droppable, DragDropManager>;\ntype DragEndEvent = Parameters<DndEvents['dragend']>[0];\n\ntype Mode = 'edit' | 'preview';\n\nexport type FormBuilderDensity = 'full' | 'compact';\n\nconst PALETTE_MIN = 160;\nconst PALETTE_MAX = 400;\nconst PALETTE_DEFAULT = 220;\nconst INSPECTOR_MIN = 270;\nconst INSPECTOR_MAX = 560;\nconst INSPECTOR_DEFAULT = 320;\n\ninterface FormBuilderV2Props {\n    className?: string;\n    formFields: FormField[];\n    onChange?: (fields: FormField[]) => void;\n\n    density?: FormBuilderDensity;\n}\n\ninterface FormBuilderShellProps {\n    className?: string;\n    density: FormBuilderDensity;\n}\n\nconst FormBuilderShell = ({className, density}: FormBuilderShellProps) => {\n    const [mode, setMode] = React.useState<Mode>('edit');\n    const [canvasContent, setCanvasContent] = React.useState<Content>({});\n    const [templateContent, setTemplateContent] = React.useState<Content>({});\n    const [paletteWidth, setPaletteWidth] = React.useState(PALETTE_DEFAULT);\n    const [inspectorWidth, setInspectorWidth] = React.useState(INSPECTOR_DEFAULT);\n    const [schemaPopupOpen, setSchemaPopupOpen] = React.useState(false);\n    const schemaButtonRef = React.useRef<HTMLButtonElement | null>(null);\n\n    const isCompact = density === 'compact';\n\n    const {\n        formFields,\n        setAllFields,\n        addField,\n        addFieldToSection,\n        insertFieldBefore,\n        insertFieldAfter,\n        moveFieldToSection,\n    } = useFormContext();\n\n    const schema = React.useMemo(() => stripIds(formFields), [formFields]);\n\n    const handleDragEnd = React.useCallback(\n        (event: DragEndEvent) => {\n            if (event.canceled) return;\n            const {source, target} = event.operation;\n            if (!source) return;\n\n            const paletteData = isPaletteData(source.data) ? source.data : null;\n            const isPaletteDrag =\n                paletteData !== null || String(source.id).startsWith(PALETTE_DRAGGABLE_PREFIX);\n\n            if (isPaletteDrag) {\n                const type = paletteData?.type;\n                if (!type) return;\n                if (!target) {\n                    addField(type);\n                    return;\n                }\n\n                if (isSectionDropData(target.data)) {\n                    addFieldToSection(target.data.sectionId, type);\n                    return;\n                }\n\n                if (String(target.id) === String(source.id)) {\n                    addField(type);\n                    return;\n                }\n\n                const dropAfter = isDropAfter(\n                    event.operation.position?.current?.y,\n                    target.shape?.center?.y,\n                );\n                if (dropAfter) {\n                    insertFieldAfter(String(target.id), type);\n                } else {\n                    insertFieldBefore(String(target.id), type);\n                }\n                return;\n            }\n\n            if (target && isSectionDropData(target.data)) {\n                moveFieldToSection(String(source.id), target.data.sectionId);\n                return;\n            }\n\n            const groups = buildGroupsMap(formFields);\n            const nextGroups = move(groups, event);\n            const nextFields = applyGroupsMap(nextGroups);\n            setAllFields(nextFields);\n        },\n        [\n            addField,\n            addFieldToSection,\n            formFields,\n            insertFieldBefore,\n            insertFieldAfter,\n            moveFieldToSection,\n            setAllFields,\n        ],\n    );\n\n    const gridStyle = {\n        '--fb2-palette-w': `${paletteWidth}px`,\n        '--fb2-inspector-w': `${inspectorWidth}px`,\n    } as React.CSSProperties;\n\n    return (\n        <div className={b({compact: density === 'compact'}, className)}>\n            <CanvasContentProvider\n                content={canvasContent}\n                setContent={setCanvasContent}\n                templateContent={templateContent}\n                setTemplateContent={setTemplateContent}\n            >\n                <div className={b('toolbar')}>\n                    <SegmentedRadioGroup<Mode>\n                        size=\"m\"\n                        value={mode}\n                        onUpdate={setMode}\n                        options={[\n                            {\n                                value: 'edit',\n                                content: (\n                                    <span className={b('toolbar-option')}>\n                                        <Icon data={Pencil} size={14} />\n                                        Edit\n                                    </span>\n                                ),\n                            },\n                            {\n                                value: 'preview',\n                                content: (\n                                    <span className={b('toolbar-option')}>\n                                        <Icon data={Eye} size={14} />\n                                        Preview\n                                    </span>\n                                ),\n                            },\n                        ]}\n                    />\n                    <Button\n                        ref={schemaButtonRef}\n                        view=\"outlined\"\n                        size=\"m\"\n                        onClick={() => setSchemaPopupOpen((prev) => !prev)}\n                    >\n                        <Icon data={Code} size={14} />\n                        Schema\n                    </Button>\n                    <SchemaPopup\n                        schema={schema}\n                        onApply={setAllFields}\n                        open={schemaPopupOpen}\n                        onOpenChange={setSchemaPopupOpen}\n                        anchorElement={schemaButtonRef.current}\n                    />\n                </div>\n\n                {mode === 'edit' ? (\n                    <DragDropProvider onDragEnd={handleDragEnd}>\n                        <div className={b('visual')} style={gridStyle}>\n                            <aside className={b('palette')}>\n                                <Palette />\n                            </aside>\n                            {!isCompact && (\n                                <ResizeHandle\n                                    value={paletteWidth}\n                                    min={PALETTE_MIN}\n                                    max={PALETTE_MAX}\n                                    direction=\"left\"\n                                    onChange={setPaletteWidth}\n                                />\n                            )}\n                            <main className={b('canvas')}>\n                                <Canvas />\n                            </main>\n                            <ResizeHandle\n                                value={inspectorWidth}\n                                min={INSPECTOR_MIN}\n                                max={INSPECTOR_MAX}\n                                direction=\"right\"\n                                onChange={setInspectorWidth}\n                            />\n                            <aside className={b('inspector')}>\n                                <Inspector />\n                            </aside>\n                        </div>\n                        <DragOverlay dropAnimation={null}>\n                            {(source) => {\n                                if (!source) return null;\n                                if (isPaletteData(source.data)) {\n                                    return <DragOverlayPreview type={source.data.type} />;\n                                }\n                                const field = findFieldById(formFields, String(source.id));\n                                if (!field) return null;\n                                return <DragOverlayPreview type={field.type} field={field} />;\n                            }}\n                        </DragOverlay>\n                    </DragDropProvider>\n                ) : (\n                    <ContentTab />\n                )}\n            </CanvasContentProvider>\n        </div>\n    );\n};\n\nexport const FormBuilderV2 = ({\n    className,\n    formFields,\n    onChange,\n    density = 'full',\n}: FormBuilderV2Props) => {\n    return (\n        <FormProvider formFields={formFields} onChange={onChange}>\n            <FormBuilderShell className={className} density={density} />\n        </FormProvider>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/Canvas/Canvas.css

@@ -0,0 +1,15 @@
+.pcformbuilderv2-canvas {
+  padding: var(--g-spacing-5);
+  min-height: 400px;
+}
+.pcformbuilderv2-canvas__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.pcformbuilderv2-canvas__empty {
+  padding: var(--g-spacing-10) var(--g-spacing-5);
+  text-align: center;
+  border: 1px dashed var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-l);
+}

package/build/cjs/form-builder-v2/components/Canvas/Canvas.d.ts

@@ -0,0 +1,8 @@
+import { FormField } from "../../types.js";
+interface CanvasListProps {
+    fields: FormField[];
+    parentGroup: string;
+}
+declare const CanvasList: ({ fields, parentGroup }: CanvasListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Canvas: () => import("react/jsx-runtime").JSX.Element;
+export { CanvasList };

package/build/cjs/form-builder-v2/components/Canvas/Canvas.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasList = exports.Canvas = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const cn_1 = require("../../utils/cn.js");
+const CanvasCard_1 = require("../CanvasCard/CanvasCard.js");
+const b = (0, cn_1.formBuilderV2Cn)('canvas');
+const CanvasList = ({ fields, parentGroup }) => ((0, jsx_runtime_1.jsx)("div", { className: b('list'), children: fields.map((field, index) => ((0, jsx_runtime_1.jsx)(CanvasCard_1.CanvasCard, { field: field, index: index, group: parentGroup }, field.id))) }));
+exports.CanvasList = CanvasList;
+const Canvas = () => {
+    const { formFields, selectField } = (0, FormContext_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Card, { className: b(), view: "outlined", onClick: () => selectField(null), children: formFields.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: b('empty'), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Canvas is empty. Click a field type on the left to add it." }) })) : ((0, jsx_runtime_1.jsx)(CanvasList, { fields: formFields, parentGroup: "root" })) }));
+};
+exports.Canvas = Canvas;
+//# sourceMappingURL=Canvas.js.map

package/build/cjs/form-builder-v2/components/Canvas/Canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/Canvas/Canvas.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6C;AAE7C,4DAAuD;AAEvD,0CAA+C;AAC/C,4DAAoD;AAIpD,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,QAAQ,CAAC,CAAC;AAOpC,MAAM,UAAU,GAAG,CAAC,EAAC,MAAM,EAAE,WAAW,EAAkB,EAAE,EAAE,CAAC,CAC3D,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACpB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,uBAAC,uBAAU,IAAgB,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,IAAxD,KAAK,CAAC,EAAE,CAAoD,CAChF,CAAC,GACA,CACT,CAAC;AAoBM,gCAAU;AAlBX,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,MAAM,EAAC,UAAU,EAAE,WAAW,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEnD,OAAO,CACH,uBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,YACjE,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,2EAE5B,GACL,CACT,CAAC,CAAC,CAAC,CACA,uBAAC,UAAU,IAAC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,GAAG,CACxD,GACE,CACV,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,MAAM,UAgBjB","sourcesContent":["import {Card, Text} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {CanvasCard} from '../CanvasCard/CanvasCard';\n\nimport './Canvas.scss';\n\nconst b = formBuilderV2Cn('canvas');\n\ninterface CanvasListProps {\n    fields: FormField[];\n    parentGroup: string;\n}\n\nconst CanvasList = ({fields, parentGroup}: CanvasListProps) => (\n    <div className={b('list')}>\n        {fields.map((field, index) => (\n            <CanvasCard key={field.id} field={field} index={index} group={parentGroup} />\n        ))}\n    </div>\n);\n\nexport const Canvas = () => {\n    const {formFields, selectField} = useFormContext();\n\n    return (\n        <Card className={b()} view=\"outlined\" onClick={() => selectField(null)}>\n            {formFields.length === 0 ? (\n                <div className={b('empty')}>\n                    <Text variant=\"body-2\" color=\"hint\">\n                        Canvas is empty. Click a field type on the left to add it.\n                    </Text>\n                </div>\n            ) : (\n                <CanvasList fields={formFields} parentGroup=\"root\" />\n            )}\n        </Card>\n    );\n};\n\nexport {CanvasList};\n"]}

package/build/cjs/form-builder-v2/components/CanvasCard/CanvasCard.css

@@ -0,0 +1,133 @@
+.pcformbuilderv2-canvas-card {
+  position: relative;
+  padding: var(--g-spacing-3) var(--g-spacing-3);
+  border: 1px solid transparent;
+  border-radius: var(--g-border-radius-l);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+}
+.pcformbuilderv2-canvas-card:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+.pcformbuilderv2-canvas-card:hover > .pcformbuilderv2-canvas-card__controls {
+  opacity: 1;
+}
+.pcformbuilderv2-canvas-card_selected {
+  border-color: var(--g-color-line-brand);
+  background-color: var(--g-color-base-selection);
+}
+.pcformbuilderv2-canvas-card_selected .pcformbuilderv2-canvas-card__controls {
+  opacity: 1;
+}
+.pcformbuilderv2-canvas-card_dragging {
+  opacity: 0.4;
+}
+.pcformbuilderv2-canvas-card_drop-target, .pcformbuilderv2-canvas-card_drop-target-after {
+  position: relative;
+}
+.pcformbuilderv2-canvas-card_drop-target::before, .pcformbuilderv2-canvas-card_drop-target-after::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--g-color-line-brand);
+  border-radius: 2px;
+  opacity: 0.45;
+  pointer-events: none;
+}
+.pcformbuilderv2-canvas-card_drop-target::before {
+  top: calc((var(--g-spacing-3) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card_drop-target-after::before {
+  bottom: calc((var(--g-spacing-3) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__visibility-badge {
+  margin-bottom: var(--g-spacing-1);
+}
+.pcformbuilderv2-canvas-card__controls {
+  position: absolute;
+  top: var(--g-spacing-1);
+  right: var(--g-spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-half);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.pcformbuilderv2-canvas-card__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--g-spacing-5);
+  height: var(--g-spacing-5);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--g-color-text-secondary);
+  cursor: grab;
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__control:hover {
+  background-color: var(--g-color-base-simple-hover-solid);
+  color: var(--g-color-text-primary);
+}
+.pcformbuilderv2-canvas-card__control:active {
+  cursor: grabbing;
+}
+.pcformbuilderv2-canvas-card__labeled {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+}
+.pcformbuilderv2-canvas-card__labeled-title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-canvas-card__section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  padding-bottom: var(--g-spacing-1);
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pcformbuilderv2-canvas-card__children {
+  margin-top: var(--g-spacing-2);
+  padding-left: var(--g-spacing-3);
+  border-left: 2px solid var(--g-color-line-generic);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+  border-radius: 0 var(--g-border-radius-m) var(--g-border-radius-m) 0;
+  transition: border-color 0.12s ease, background-color 0.12s ease;
+}
+.pcformbuilderv2-canvas-card__children_drop-target {
+  border-left-color: var(--g-color-line-brand);
+  background-color: var(--g-color-base-selection);
+}
+.pcformbuilderv2-canvas-card__children .pcformbuilderv2-canvas-card_drop-target::before {
+  top: calc((var(--g-spacing-2) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__children .pcformbuilderv2-canvas-card_drop-target-after::before {
+  bottom: calc((var(--g-spacing-2) + 3px) / -2 - 1px);
+}
+.pcformbuilderv2-canvas-card__static-text {
+  padding: var(--g-spacing-2) 10px;
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__color-swatch {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-canvas-card__color-swatch-chip {
+  width: var(--g-spacing-6);
+  height: var(--g-spacing-6);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-s);
+}
+.pcformbuilderv2-canvas-card__color-swatch-value {
+  font-size: var(--g-text-body-1-font-size);
+  color: var(--g-color-text-secondary);
+}

package/build/cjs/form-builder-v2/components/CanvasCard/CanvasCard.d.ts

@@ -0,0 +1,9 @@
+import { FormField } from "../../types.js";
+import { SectionDropData } from "./components/SectionChildrenDropZone.js";
+export type { SectionDropData };
+interface CanvasCardProps {
+    field: FormField;
+    index: number;
+    group: string;
+}
+export declare const CanvasCard: ({ field, index, group }: CanvasCardProps) => import("react/jsx-runtime").JSX.Element;

package/build/cjs/form-builder-v2/components/CanvasCard/CanvasCard.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasCard = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const abstract_1 = require("@dnd-kit/abstract");
+const sortable_1 = require("@dnd-kit/dom/sortable");
+const sortable_2 = require("@dnd-kit/react/sortable");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const cn_1 = require("../../utils/cn.js");
+const dragData_1 = require("../../utils/dragData.js");
+const FieldPreview_1 = require("./components/FieldPreview.js");
+const SectionChildrenDropZone_1 = require("./components/SectionChildrenDropZone.js");
+const b = (0, cn_1.formBuilderV2Cn)('canvas-card');
+const CanvasCard = ({ field, index, group }) => {
+    const { selectedFieldId, selectField, removeField, duplicateField } = (0, FormContext_1.useFormContext)();
+    const isSelected = selectedFieldId === field.id;
+    const hasWhen = 'when' in field && Array.isArray(field.when) && field.when.length > 0;
+    const cardData = React.useMemo(() => ({ kind: 'card', group }), [group]);
+    const { ref, handleRef, isDragSource, isDropTarget, sortable } = (0, sortable_2.useSortable)({
+        id: field.id,
+        index,
+        group,
+        data: cardData,
+        transition: null,
+        plugins: [sortable_1.SortableKeyboardPlugin],
+        collisionPriority: field.type === 'section' ? abstract_1.CollisionPriority.Low : undefined,
+        alignment: {
+            x: 'start',
+            y: 'center',
+        },
+    });
+    const dragOp = sortable.manager?.dragOperation;
+    const source = dragOp?.source;
+    const isPaletteSource = (0, dragData_1.isPaletteData)(source?.data);
+    const sourceIndex = source && (0, sortable_1.isSortable)(source) ? source.index : undefined;
+    const pointerY = dragOp?.position?.current?.y;
+    const targetCenterY = sortable.droppable?.shape?.center?.y;
+    const dropAfter = isDropTarget &&
+        !isDragSource &&
+        (isPaletteSource
+            ? (0, dragData_1.isDropAfter)(pointerY, targetCenterY)
+            : sourceIndex !== undefined && sourceIndex < index);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        selectField(field.id);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            selectField(field.id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: b({
+            selected: isSelected,
+            dragging: isDragSource,
+            'drop-target': isDropTarget && !isDragSource && !dropAfter,
+            'drop-target-after': dropAfter,
+        }), onClick: handleClick, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-pressed": isSelected, children: [hasWhen && ((0, jsx_runtime_1.jsx)("div", { className: b('visibility-badge'), children: (0, jsx_runtime_1.jsx)(uikit_1.Label, { theme: "info", size: "s", children: "Visibility by condition" }) })), (0, jsx_runtime_1.jsx)(FieldPreview_1.FieldPreview, { field: field }), (0, jsx_runtime_1.jsxs)("div", { className: b('controls'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { ref: handleRef, view: "flat", size: "xs", className: b('control'), "aria-label": "Drag to reorder", title: "Drag to reorder", onClick: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Grip, size: 12 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: "xs", onClick: (event) => {
+                            event.stopPropagation();
+                            duplicateField(field.id);
+                        }, title: "Duplicate", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Copy, size: 12 }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-danger", size: "xs", onClick: (event) => {
+                            event.stopPropagation();
+                            removeField(field.id);
+                        }, title: "Remove", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 12 }) })] }), field.type === 'section' && ((0, jsx_runtime_1.jsx)(SectionChildrenDropZone_1.SectionChildrenDropZone, { sectionId: field.id, fields: field.fields }))] }));
+};
+exports.CanvasCard = CanvasCard;
+//# sourceMappingURL=CanvasCard.js.map

package/build/cjs/form-builder-v2/components/CanvasCard/CanvasCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCard.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/CanvasCard/CanvasCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CollisionPriority} from '@dnd-kit/abstract';\nimport {SortableKeyboardPlugin, isSortable} from '@dnd-kit/dom/sortable';\nimport {useSortable} from '@dnd-kit/react/sortable';\nimport {Copy, Grip, TrashBin} from '@gravity-ui/icons';\nimport {Button, Icon, Label} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport type {CardDragData} from '../../utils/dragData';\nimport {isDropAfter, isPaletteData} from '../../utils/dragData';\n\nimport {FieldPreview} from './components/FieldPreview';\nimport {SectionChildrenDropZone, SectionDropData} from './components/SectionChildrenDropZone';\n\nimport './CanvasCard.scss';\n\nexport type {SectionDropData};\n\nconst b = formBuilderV2Cn('canvas-card');\n\ninterface CanvasCardProps {\n    field: FormField;\n    index: number;\n    group: string;\n}\n\nexport const CanvasCard = ({field, index, group}: CanvasCardProps) => {\n    const {selectedFieldId, selectField, removeField, duplicateField} = useFormContext();\n\n    const isSelected = selectedFieldId === field.id;\n    const hasWhen = 'when' in field && Array.isArray(field.when) && field.when.length > 0;\n\n    const cardData: CardDragData = React.useMemo(() => ({kind: 'card', group}), [group]);\n\n    const {ref, handleRef, isDragSource, isDropTarget, sortable} = useSortable({\n        id: field.id,\n        index,\n        group,\n        data: cardData,\n        transition: null,\n        plugins: [SortableKeyboardPlugin],\n        collisionPriority: field.type === 'section' ? CollisionPriority.Low : undefined,\n        alignment: {\n            x: 'start',\n            y: 'center',\n        },\n    });\n\n    const dragOp = sortable.manager?.dragOperation;\n    const source = dragOp?.source;\n    const isPaletteSource = isPaletteData(source?.data);\n    const sourceIndex = source && isSortable(source) ? source.index : undefined;\n    const pointerY = dragOp?.position?.current?.y;\n    const targetCenterY = sortable.droppable?.shape?.center?.y;\n\n    const dropAfter =\n        isDropTarget &&\n        !isDragSource &&\n        (isPaletteSource\n            ? isDropAfter(pointerY, targetCenterY)\n            : sourceIndex !== undefined && sourceIndex < index);\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        selectField(field.id);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.stopPropagation();\n            selectField(field.id);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={b({\n                selected: isSelected,\n                dragging: isDragSource,\n                'drop-target': isDropTarget && !isDragSource && !dropAfter,\n                'drop-target-after': dropAfter,\n            })}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            aria-pressed={isSelected}\n        >\n            {hasWhen && (\n                <div className={b('visibility-badge')}>\n                    <Label theme=\"info\" size=\"s\">\n                        Visibility by condition\n                    </Label>\n                </div>\n            )}\n            <FieldPreview field={field} />\n\n            <div className={b('controls')}>\n                <Button\n                    ref={handleRef}\n                    view=\"flat\"\n                    size=\"xs\"\n                    className={b('control')}\n                    aria-label=\"Drag to reorder\"\n                    title=\"Drag to reorder\"\n                    onClick={(event) => event.stopPropagation()}\n                >\n                    <Icon data={Grip} size={12} />\n                </Button>\n                <Button\n                    view=\"flat\"\n                    size=\"xs\"\n                    onClick={(event) => {\n                        event.stopPropagation();\n                        duplicateField(field.id);\n                    }}\n                    title=\"Duplicate\"\n                >\n                    <Icon data={Copy} size={12} />\n                </Button>\n                <Button\n                    view=\"flat-danger\"\n                    size=\"xs\"\n                    onClick={(event) => {\n                        event.stopPropagation();\n                        removeField(field.id);\n                    }}\n                    title=\"Remove\"\n                >\n                    <Icon data={TrashBin} size={12} />\n                </Button>\n            </div>\n\n            {field.type === 'section' && (\n                <SectionChildrenDropZone sectionId={field.id} fields={field.fields} />\n            )}\n        </div>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/CanvasCard/components/FieldPreview.d.ts

@@ -0,0 +1,6 @@
+import { FormField } from "../../../types.js";
+interface FieldPreviewProps {
+    field: FormField;
+}
+export declare const FieldPreview: ({ field }: FieldPreviewProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/cjs/form-builder-v2/components/CanvasCard/components/FieldPreview.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldPreview = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = require("lodash");
+const constants_1 = require("../../../../form-generator-v2/components/constants.js");
+const CanvasContentContext_1 = require("../../../CanvasContentContext.js");
+const cn_1 = require("../../../utils/cn.js");
+const b = (0, cn_1.formBuilderV2Cn)('canvas-card');
+const isTemplateField = (field) => 'name' in field && typeof field.name === 'string' && field.name.includes('{{index}}');
+const makeOnUpdate = (setContent) => (key, value, options) => {
+    setContent((prev) => {
+        const next = (0, lodash_1.cloneDeep)(prev);
+        if (options?.unset) {
+            (0, lodash_1.unset)(next, key);
+        }
+        else {
+            (0, lodash_1.set)(next, key, value);
+        }
+        return next;
+    });
+};
+const FieldPreview = ({ field }) => {
+    const { content, setContent, templateContent, setTemplateContent } = (0, CanvasContentContext_1.useCanvasContent)();
+    const onUpdateForContent = React.useMemo(() => makeOnUpdate(setContent), [setContent]);
+    const onUpdateForTemplate = React.useMemo(() => makeOnUpdate(setTemplateContent), [setTemplateContent]);
+    if (field.type === 'section') {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: b('section-header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", children: field.title || 'Section' }), field.index ? ((0, jsx_runtime_1.jsxs)(uikit_1.Label, { theme: "info", size: "s", children: ["Array \u00B7 ", field.itemTitle ?? 'Item {{index}}'] })) : ((0, jsx_runtime_1.jsx)(uikit_1.Label, { theme: "unknown", size: "s", children: "Group" }))] }));
+    }
+    const Component = constants_1.componentMap[field.type];
+    if (!Component) {
+        return null;
+    }
+    const { when: _when, id: _id, ...fieldProps } = field;
+    const useTemplate = isTemplateField(field);
+    const widgetContent = useTemplate ? templateContent : content;
+    const onUpdate = useTemplate ? onUpdateForTemplate : onUpdateForContent;
+    return ((0, jsx_runtime_1.jsx)(Component, { ...fieldProps, content: widgetContent, onUpdate: onUpdate }));
+};
+exports.FieldPreview = FieldPreview;
+//# sourceMappingURL=FieldPreview.js.map

package/build/cjs/form-builder-v2/components/CanvasCard/components/FieldPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldPreview.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/CanvasCard/components/FieldPreview.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAA8C;AAC9C,mCAA6C;AAE7C,qFAAgF;AAEhF,2EAA+D;AAE/D,6CAAkD;AAElD,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,aAAa,CAAC,CAAC;AAEzC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAW,EAAE,CAClD,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE1F,MAAM,YAAY,GACd,CAAC,UAAyD,EAAY,EAAE,CACxE,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IACpB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,IAAI,GAAG,IAAA,kBAAS,EAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,OAAO,EAAE,KAAK,EAAE,CAAC;YACjB,IAAA,cAAK,EAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QACrB,CAAC;aAAM,CAAC;YACJ,IAAA,YAAG,EAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAMC,MAAM,YAAY,GAAG,CAAC,EAAC,KAAK,EAAoB,EAAE,EAAE;IACvD,MAAM,EAAC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,kBAAkB,EAAC,GAAG,IAAA,uCAAgB,GAAE,CAAC;IAEtF,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CACpC,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAC9B,CAAC,UAAU,CAAC,CACf,CAAC;IACF,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,EACtC,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,aAC/B,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,CAAC,KAAK,IAAI,SAAS,GAAQ,EAC5D,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACX,wBAAC,aAAK,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,8BACf,KAAK,CAAC,SAAS,IAAI,gBAAgB,IACxC,CACX,CAAC,CAAC,CAAC,CACA,uBAAC,aAAK,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,GAAG,sBAEvB,CACX,IACC,CACT,CAAC;IACN,CAAC;IAED,MAAM,SAAS,GAAG,wBAAY,CAAC,KAAK,CAAC,IAAI,CAE1B,CAAC;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,UAAU,EAAC,GAAG,KAAK,CAAC;IAEpD,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC3C,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC;IAC9D,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAExE,OAAO,CACH,uBAAC,SAAS,OACD,UAAsC,EAC3C,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;AACN,CAAC,CAAC;AAjDW,QAAA,YAAY,gBAiDvB","sourcesContent":["import * as React from 'react';\n\nimport {Label, Text} from '@gravity-ui/uikit';\nimport {cloneDeep, set, unset} from 'lodash';\n\nimport {componentMap} from '../../../../form-generator-v2/components/constants';\nimport type {Content, OnUpdate} from '../../../../form-generator-v2/types';\nimport {useCanvasContent} from '../../../CanvasContentContext';\nimport {FormField} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nconst b = formBuilderV2Cn('canvas-card');\n\nconst isTemplateField = (field: FormField): boolean =>\n    'name' in field && typeof field.name === 'string' && field.name.includes('{{index}}');\n\nconst makeOnUpdate =\n    (setContent: React.Dispatch<React.SetStateAction<Content>>): OnUpdate =>\n    (key, value, options) => {\n        setContent((prev) => {\n            const next = cloneDeep(prev);\n            if (options?.unset) {\n                unset(next, key);\n            } else {\n                set(next, key, value);\n            }\n            return next;\n        });\n    };\n\ninterface FieldPreviewProps {\n    field: FormField;\n}\n\nexport const FieldPreview = ({field}: FieldPreviewProps) => {\n    const {content, setContent, templateContent, setTemplateContent} = useCanvasContent();\n\n    const onUpdateForContent = React.useMemo<OnUpdate>(\n        () => makeOnUpdate(setContent),\n        [setContent],\n    );\n    const onUpdateForTemplate = React.useMemo<OnUpdate>(\n        () => makeOnUpdate(setTemplateContent),\n        [setTemplateContent],\n    );\n\n    if (field.type === 'section') {\n        return (\n            <div className={b('section-header')}>\n                <Text variant=\"subheader-2\">{field.title || 'Section'}</Text>\n                {field.index ? (\n                    <Label theme=\"info\" size=\"s\">\n                        Array · {field.itemTitle ?? 'Item {{index}}'}\n                    </Label>\n                ) : (\n                    <Label theme=\"unknown\" size=\"s\">\n                        Group\n                    </Label>\n                )}\n            </div>\n        );\n    }\n\n    const Component = componentMap[field.type] as\n        | React.ComponentType<Record<string, unknown>>\n        | undefined;\n    if (!Component) {\n        return null;\n    }\n\n    const {when: _when, id: _id, ...fieldProps} = field;\n\n    const useTemplate = isTemplateField(field);\n    const widgetContent = useTemplate ? templateContent : content;\n    const onUpdate = useTemplate ? onUpdateForTemplate : onUpdateForContent;\n\n    return (\n        <Component\n            {...(fieldProps as Record<string, unknown>)}\n            content={widgetContent}\n            onUpdate={onUpdate}\n        />\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/CanvasCard/components/SectionChildrenDropZone.d.ts

@@ -0,0 +1,9 @@
+import { FormField } from "../../../types.js";
+import type { SectionDropData } from "../../../utils/dragData.js";
+export declare const SECTION_DROP_PREFIX = "section-drop:";
+export type { SectionDropData };
+interface SectionChildrenDropZoneProps {
+    sectionId: string;
+    fields: FormField[];
+}
+export declare const SectionChildrenDropZone: ({ sectionId, fields }: SectionChildrenDropZoneProps) => import("react/jsx-runtime").JSX.Element;