@gravity-ui/page-constructor 8.5.0-alpha.2 → 8.5.0-alpha.4

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;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionChildrenDropZone = exports.SECTION_DROP_PREFIX = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@dnd-kit/react");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../utils/cn.js");
+const Canvas_1 = require("../../Canvas/Canvas.js");
+const b = (0, cn_1.formBuilderV2Cn)('canvas-card');
+exports.SECTION_DROP_PREFIX = 'section-drop:';
+const SectionChildrenDropZone = ({ sectionId, fields }) => {
+    const { ref, isDropTarget } = (0, react_1.useDroppable)({
+        id: `${exports.SECTION_DROP_PREFIX}${sectionId}`,
+        data: { kind: 'section-drop', sectionId },
+    });
+    const className = b('children');
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: `${className}${isDropTarget ? ` ${className}_drop-target` : ''}`, children: [(0, jsx_runtime_1.jsx)(Canvas_1.CanvasList, { fields: fields, parentGroup: `section:${sectionId}` }), fields.length === 0 && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Empty section. Drag a tile from the palette into this box, or select the section first and click a tile to add it inside." }))] }));
+};
+exports.SectionChildrenDropZone = SectionChildrenDropZone;
+//# sourceMappingURL=SectionChildrenDropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionChildrenDropZone.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/CanvasCard/components/SectionChildrenDropZone.tsx"],"names":[],"mappings":";;;;AAAA,0CAA4C;AAC5C,6CAAuC;AAGvC,6CAAkD;AAElD,mDAA+C;AAE/C,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,aAAa,CAAC,CAAC;AAE5B,QAAA,mBAAmB,GAAG,eAAe,CAAC;AAS5C,MAAM,uBAAuB,GAAG,CAAC,EAAC,SAAS,EAAE,MAAM,EAA+B,EAAE,EAAE;IACzF,MAAM,EAAC,GAAG,EAAE,YAAY,EAAC,GAAG,IAAA,oBAAY,EAAC;QACrC,EAAE,EAAE,GAAG,2BAAmB,GAAG,SAAS,EAAE;QACxC,IAAI,EAAE,EAAC,IAAI,EAAE,cAAc,EAAE,SAAS,EAAC;KAC1C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC;IAEhC,OAAO,CACH,iCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,aACtF,uBAAC,mBAAU,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,SAAS,EAAE,GAAI,EAClE,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CACpB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,0IAG5B,CACV,IACC,CACT,CAAC;AACN,CAAC,CAAC;AAnBW,QAAA,uBAAuB,2BAmBlC","sourcesContent":["import {useDroppable} from '@dnd-kit/react';\nimport {Text} from '@gravity-ui/uikit';\n\nimport {FormField} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\nimport type {SectionDropData} from '../../../utils/dragData';\nimport {CanvasList} from '../../Canvas/Canvas';\n\nconst b = formBuilderV2Cn('canvas-card');\n\nexport const SECTION_DROP_PREFIX = 'section-drop:';\n\nexport type {SectionDropData};\n\ninterface SectionChildrenDropZoneProps {\n    sectionId: string;\n    fields: FormField[];\n}\n\nexport const SectionChildrenDropZone = ({sectionId, fields}: SectionChildrenDropZoneProps) => {\n    const {ref, isDropTarget} = useDroppable({\n        id: `${SECTION_DROP_PREFIX}${sectionId}`,\n        data: {kind: 'section-drop', sectionId},\n    });\n\n    const className = b('children');\n\n    return (\n        <div ref={ref} className={`${className}${isDropTarget ? ` ${className}_drop-target` : ''}`}>\n            <CanvasList fields={fields} parentGroup={`section:${sectionId}`} />\n            {fields.length === 0 && (\n                <Text variant=\"body-2\" color=\"hint\">\n                    Empty section. Drag a tile from the palette into this box, or select the section\n                    first and click a tile to add it inside.\n                </Text>\n            )}\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,22 @@
+.pcformbuilderv2-content-tab {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--g-spacing-4);
+  margin-top: var(--g-spacing-4);
+}
+.pcformbuilderv2-content-tab__column {
+  padding: var(--g-spacing-4);
+}
+.pcformbuilderv2-content-tab__title {
+  display: block;
+  margin-bottom: var(--g-spacing-3);
+}
+.pcformbuilderv2-content-tab__json {
+  margin: 0;
+  padding: var(--g-spacing-3);
+  background: var(--g-color-base-generic);
+  border-radius: var(--g-border-radius-m);
+  font-size: 12px;
+  overflow: auto;
+  max-height: 70vh;
+}

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

@@ -0,0 +1 @@
+export declare const ContentTab: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentTab = 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 FormGenerator_1 = tslib_1.__importDefault(require("../../../form-generator-v2/FormGenerator.js"));
+const CanvasContentContext_1 = require("../../CanvasContentContext.js");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const cn_1 = require("../../utils/cn.js");
+const stripIds_1 = require("../../utils/stripIds.js");
+const b = (0, cn_1.formBuilderV2Cn)('content-tab');
+const ContentTab = () => {
+    const { formFields } = (0, FormContext_1.useFormContext)();
+    const { content, setContent } = (0, CanvasContentContext_1.useCanvasContent)();
+    const schema = React.useMemo(() => (0, stripIds_1.stripIds)(formFields), [formFields]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b('column'), view: "outlined", children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", className: b('title'), children: "Live form" }), schema.length > 0 ? ((0, jsx_runtime_1.jsx)(FormGenerator_1.default, { blockConfig: schema, contentConfig: content, onUpdate: setContent })) : ((0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", color: "hint", children: "Add fields on the Visual tab to see the form here." }))] }), (0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b('column'), view: "outlined", children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", className: b('title'), children: "Content JSON" }), (0, jsx_runtime_1.jsx)("pre", { className: b('json'), children: JSON.stringify(content, null, 2) })] })] }));
+};
+exports.ContentTab = ContentTab;
+//# sourceMappingURL=ContentTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTab.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/ContentTab/ContentTab.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAA6C;AAE7C,wGAAqE;AACrE,wEAA4D;AAC5D,4DAAuD;AACvD,0CAA+C;AAC/C,sDAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,aAAa,CAAC,CAAC;AAElC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC3B,MAAM,EAAC,UAAU,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IACtC,MAAM,EAAC,OAAO,EAAE,UAAU,EAAC,GAAG,IAAA,uCAAgB,GAAE,CAAC;IAEjD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,mBAAQ,EAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,EAAE,aACf,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,UAAU,aACzC,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,0BAE1C,EACN,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,uBAAC,uBAAa,IACV,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,UAAU,GACtB,CACL,CAAC,CAAC,CAAC,CACA,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM,mEAE5B,CACV,IACE,EACP,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,UAAU,aACzC,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,6BAE1C,EACP,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IAChE,IACL,CACT,CAAC;AACN,CAAC,CAAC;AAhCW,QAAA,UAAU,cAgCrB","sourcesContent":["import * as React from 'react';\n\nimport {Card, Text} from '@gravity-ui/uikit';\n\nimport FormGenerator from '../../../form-generator-v2/FormGenerator';\nimport {useCanvasContent} from '../../CanvasContentContext';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {stripIds} from '../../utils/stripIds';\n\nimport './ContentTab.scss';\n\nconst b = formBuilderV2Cn('content-tab');\n\nexport const ContentTab = () => {\n    const {formFields} = useFormContext();\n    const {content, setContent} = useCanvasContent();\n\n    const schema = React.useMemo(() => stripIds(formFields), [formFields]);\n\n    return (\n        <div className={b()}>\n            <Card className={b('column')} view=\"outlined\">\n                <Text variant=\"subheader-2\" className={b('title')}>\n                    Live form\n                </Text>\n                {schema.length > 0 ? (\n                    <FormGenerator\n                        blockConfig={schema}\n                        contentConfig={content}\n                        onUpdate={setContent}\n                    />\n                ) : (\n                    <Text variant=\"body-2\" color=\"hint\">\n                        Add fields on the Visual tab to see the form here.\n                    </Text>\n                )}\n            </Card>\n            <Card className={b('column')} view=\"outlined\">\n                <Text variant=\"subheader-2\" className={b('title')}>\n                    Content JSON\n                </Text>\n                <pre className={b('json')}>{JSON.stringify(content, null, 2)}</pre>\n            </Card>\n        </div>\n    );\n};\n"]}

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

@@ -0,0 +1,13 @@
+.pcformbuilderv2-drag-overlay {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  padding: var(--g-spacing-2) var(--g-spacing-3);
+  color: var(--g-color-text-primary);
+  cursor: grabbing;
+}
+.pcformbuilderv2-drag-overlay__text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}

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

@@ -0,0 +1,7 @@
+import type { BuilderFieldType, FormField } from "../../types.js";
+interface DragOverlayPreviewProps {
+    type: BuilderFieldType;
+    field?: FormField;
+}
+export declare const DragOverlayPreview: ({ type, field }: DragOverlayPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragOverlayPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn.js");
+const fieldMeta_1 = require("../../utils/fieldMeta.js");
+const b = (0, cn_1.formBuilderV2Cn)('drag-overlay');
+const getFieldTitle = (f) => {
+    if (!f)
+        return '';
+    if ('title' in f)
+        return f.title ?? '';
+    if ('text' in f)
+        return f.text ?? '';
+    return '';
+};
+const DragOverlayPreview = ({ type, field }) => {
+    const name = field && 'name' in field ? field.name : '';
+    const title = getFieldTitle(field);
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(), view: "raised", children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: fieldMeta_1.TYPE_ICONS[type], size: 14 }), (0, jsx_runtime_1.jsxs)("div", { className: b('text'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", children: fieldMeta_1.TYPE_LABELS[type] }), (name || title) && ((0, jsx_runtime_1.jsx)(uikit_1.Label, { theme: "unknown", size: "s", children: name || title }))] })] }));
+};
+exports.DragOverlayPreview = DragOverlayPreview;
+//# sourceMappingURL=DragOverlayPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragOverlayPreview.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/DragOverlayPreview/DragOverlayPreview.tsx"],"names":[],"mappings":";;;;AAAA,6CAA0D;AAG1D,0CAA+C;AAC/C,wDAA8D;AAI9D,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,cAAc,CAAC,CAAC;AAO1C,MAAM,aAAa,GAAG,CAAC,CAAwB,EAAU,EAAE;IACvD,IAAI,CAAC,CAAC;QAAE,OAAO,EAAE,CAAC;IAClB,IAAI,OAAO,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;IACvC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IACrC,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEK,MAAM,kBAAkB,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAA0B,EAAE,EAAE;IACzE,MAAM,IAAI,GAAG,KAAK,IAAI,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAEnC,OAAO,CACH,wBAAC,YAAI,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,IAAI,EAAC,QAAQ,aAC/B,uBAAC,YAAI,IAAC,IAAI,EAAE,sBAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,GAAI,EAC1C,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,uBAAC,YAAI,IAAC,OAAO,EAAC,QAAQ,YAAE,uBAAW,CAAC,IAAI,CAAC,GAAQ,EAChD,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAChB,uBAAC,aAAK,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,GAAG,YAC1B,IAAI,IAAI,KAAK,GACV,CACX,IACC,IACH,CACV,CAAC;AACN,CAAC,CAAC;AAjBW,QAAA,kBAAkB,sBAiB7B","sourcesContent":["import {Card, Icon, Label, Text} from '@gravity-ui/uikit';\n\nimport type {BuilderFieldType, FormField} from '../../types';\nimport {formBuilderV2Cn} from '../../utils/cn';\nimport {TYPE_ICONS, TYPE_LABELS} from '../../utils/fieldMeta';\n\nimport './DragOverlayPreview.scss';\n\nconst b = formBuilderV2Cn('drag-overlay');\n\ninterface DragOverlayPreviewProps {\n    type: BuilderFieldType;\n    field?: FormField;\n}\n\nconst getFieldTitle = (f: FormField | undefined): string => {\n    if (!f) return '';\n    if ('title' in f) return f.title ?? '';\n    if ('text' in f) return f.text ?? '';\n    return '';\n};\n\nexport const DragOverlayPreview = ({type, field}: DragOverlayPreviewProps) => {\n    const name = field && 'name' in field ? field.name : '';\n    const title = getFieldTitle(field);\n\n    return (\n        <Card className={b()} view=\"raised\">\n            <Icon data={TYPE_ICONS[type]} size={14} />\n            <div className={b('text')}>\n                <Text variant=\"body-2\">{TYPE_LABELS[type]}</Text>\n                {(name || title) && (\n                    <Label theme=\"unknown\" size=\"s\">\n                        {name || title}\n                    </Label>\n                )}\n            </div>\n        </Card>\n    );\n};\n"]}

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

@@ -0,0 +1,30 @@
+.pcformbuilderv2-field-settings__row {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  align-items: start;
+  gap: var(--g-spacing-2);
+}
+.pcformbuilderv2-field-settings__row-label {
+  padding-top: 6px;
+  font-size: var(--g-text-body-1-font-size);
+  line-height: 1.4;
+  color: var(--g-color-text-secondary);
+}
+.pcformbuilderv2-field-settings__options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: var(--g-spacing-2);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.pcformbuilderv2-field-settings__option-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+}
+.pcformbuilderv2-field-settings__add-option {
+  align-self: flex-start;
+  margin-top: var(--g-spacing-1);
+}

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

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

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSettings = 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 FormContext_1 = require("../../hooks/FormContext.js");
+const fieldNames_1 = require("../../utils/fieldNames.js");
+const WhenEditor_1 = require("../WhenEditor/WhenEditor.js");
+const ColorInputSettings_1 = require("./fields/ColorInputSettings.js");
+const OptionsSettings_1 = require("./fields/OptionsSettings.js");
+const Row_1 = require("./fields/Row.js");
+const SectionSettings_1 = require("./fields/SectionSettings.js");
+const SwitchSettings_1 = require("./fields/SwitchSettings.js");
+const TextFieldSettings_1 = require("./fields/TextFieldSettings.js");
+const TextSettings_1 = require("./fields/TextSettings.js");
+const FieldSettings = ({ field }) => {
+    const { updateField, formFields } = (0, FormContext_1.useFormContext)();
+    const availableFields = React.useMemo(() => {
+        const all = Array.from((0, fieldNames_1.collectNames)(formFields));
+        if (field.type === 'section' || field.type === 'text')
+            return all;
+        return all.filter((n) => n !== field.name);
+    }, [formFields, field]);
+    const whenEditorSection = ((0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Visible when", children: (0, jsx_runtime_1.jsx)(WhenEditor_1.WhenEditor, { when: field.when, availableFields: availableFields, onChange: (next) => updateField(field.id, { when: next }) }) }));
+    const commonRows = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Title", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: 'title' in field ? (field.title ?? '') : '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Label shown above the field" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Name", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: 'name' in field ? (field.name ?? '') : '', onUpdate: (value) => updateField(field.id, { name: value }), placeholder: "Path in content object" }) })] }));
+    if (field.type === 'section') {
+        return ((0, jsx_runtime_1.jsx)(SectionSettings_1.SectionSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'text') {
+        return ((0, jsx_runtime_1.jsx)(TextSettings_1.TextSettings, { field: field, updateField: updateField, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'textInput' || field.type === 'textArea') {
+        return ((0, jsx_runtime_1.jsx)(TextFieldSettings_1.TextFieldSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'switch') {
+        return ((0, jsx_runtime_1.jsx)(SwitchSettings_1.SwitchSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'colorInput') {
+        return ((0, jsx_runtime_1.jsx)(ColorInputSettings_1.ColorInputSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    if (field.type === 'select' || field.type === 'segmentedRadioGroup') {
+        return ((0, jsx_runtime_1.jsx)(OptionsSettings_1.OptionsSettings, { field: field, updateField: updateField, commonRows: commonRows, whenEditorSection: whenEditorSection }));
+    }
+    return null;
+};
+exports.FieldSettings = FieldSettings;
+//# sourceMappingURL=FieldSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldSettings.js","sourceRoot":"../../../../../src","sources":["form-builder-v2/components/FieldSettings/FieldSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport type {When} from '../../../form-generator-v2/types';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {collectNames} from '../../utils/fieldNames';\nimport {WhenEditor} from '../WhenEditor/WhenEditor';\n\nimport {ColorInputSettings} from './fields/ColorInputSettings';\nimport {OptionsSettings} from './fields/OptionsSettings';\nimport {Row} from './fields/Row';\nimport {SectionSettings} from './fields/SectionSettings';\nimport {SwitchSettings} from './fields/SwitchSettings';\nimport {TextFieldSettings} from './fields/TextFieldSettings';\nimport {TextSettings} from './fields/TextSettings';\n\nimport './FieldSettings.scss';\n\ninterface FieldSettingsProps {\n    field: FormField;\n}\n\nexport const FieldSettings = ({field}: FieldSettingsProps) => {\n    const {updateField, formFields} = useFormContext();\n\n    const availableFields = React.useMemo(() => {\n        const all = Array.from(collectNames(formFields));\n        if (field.type === 'section' || field.type === 'text') return all;\n        return all.filter((n) => n !== field.name);\n    }, [formFields, field]);\n\n    const whenEditorSection = (\n        <Row label=\"Visible when\">\n            <WhenEditor\n                when={field.when}\n                availableFields={availableFields}\n                onChange={(next: When | undefined) => updateField(field.id, {when: next})}\n            />\n        </Row>\n    );\n\n    const commonRows = (\n        <React.Fragment>\n            <Row label=\"Title\">\n                <TextInput\n                    value={'title' in field ? (field.title ?? '') : ''}\n                    onUpdate={(value) => updateField(field.id, {title: value})}\n                    placeholder=\"Label shown above the field\"\n                />\n            </Row>\n            <Row label=\"Name\">\n                <TextInput\n                    value={'name' in field ? (field.name ?? '') : ''}\n                    onUpdate={(value) => updateField(field.id, {name: value})}\n                    placeholder=\"Path in content object\"\n                />\n            </Row>\n        </React.Fragment>\n    );\n\n    if (field.type === 'section') {\n        return (\n            <SectionSettings\n                field={field}\n                updateField={updateField}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'text') {\n        return (\n            <TextSettings\n                field={field}\n                updateField={updateField}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'textInput' || field.type === 'textArea') {\n        return (\n            <TextFieldSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'switch') {\n        return (\n            <SwitchSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'colorInput') {\n        return (\n            <ColorInputSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    if (field.type === 'select' || field.type === 'segmentedRadioGroup') {\n        return (\n            <OptionsSettings\n                field={field}\n                updateField={updateField}\n                commonRows={commonRows}\n                whenEditorSection={whenEditorSection}\n            />\n        );\n    }\n\n    return null;\n};\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface ColorInputSettingsProps {
+    field: BuilderLeafField & {
+        type: 'colorInput';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const ColorInputSettings: ({ field, updateField, commonRows, whenEditorSection, }: ColorInputSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorInputSettings = 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 Row_1 = require("./Row.js");
+const ColorInputSettings = ({ field, updateField, commonRows, whenEditorSection, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [commonRows, (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Default", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.defaultValue ?? '', onUpdate: (value) => updateField(field.id, { defaultValue: value || undefined }), placeholder: "#000000" }) }), whenEditorSection] }));
+exports.ColorInputSettings = ColorInputSettings;
+//# sourceMappingURL=ColorInputSettings.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/ColorInputSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInputSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/ColorInputSettings.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAA4C;AAI5C,kCAA0B;AASnB,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACK,EAAE,EAAE,CAAC,CAC3B,wBAAC,KAAK,CAAC,QAAQ,eACV,UAAU,EACX,uBAAC,SAAG,IAAC,KAAK,EAAC,SAAS,YAChB,uBAAC,iBAAS,IACN,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,YAAY,EAAE,KAAK,IAAI,SAAS,EAAC,CAAC,EAC9E,WAAW,EAAC,SAAS,GACvB,GACA,EACL,iBAAiB,IACL,CACpB,CAAC;AAjBW,QAAA,kBAAkB,sBAiB7B","sourcesContent":["import * as React from 'react';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ninterface ColorInputSettingsProps {\n    field: BuilderLeafField & {type: 'colorInput'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const ColorInputSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: ColorInputSettingsProps) => (\n    <React.Fragment>\n        {commonRows}\n        <Row label=\"Default\">\n            <TextInput\n                value={field.defaultValue ?? ''}\n                onUpdate={(value) => updateField(field.id, {defaultValue: value || undefined})}\n                placeholder=\"#000000\"\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/OptionsSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface OptionsSettingsProps {
+    field: BuilderLeafField & {
+        type: 'select' | 'segmentedRadioGroup';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const OptionsSettings: ({ field, updateField, commonRows, whenEditorSection, }: OptionsSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/OptionsSettings.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsSettings = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../utils/cn.js");
+const Row_1 = require("./Row.js");
+const b = (0, cn_1.formBuilderV2Cn)('field-settings');
+const OptionsSettings = ({ field, updateField, commonRows, whenEditorSection, }) => {
+    const options = field.options ?? [];
+    const updateOption = (index, key, value) => {
+        const next = options.map((opt, i) => (i === index ? { ...opt, [key]: value } : opt));
+        updateField(field.id, { options: next });
+    };
+    const removeOption = (index) => {
+        const next = options.filter((_, i) => i !== index);
+        updateField(field.id, { options: next });
+    };
+    const addOption = () => {
+        const nextIndex = options.length + 1;
+        updateField(field.id, {
+            options: [...options, { value: `option${nextIndex}`, content: `Option ${nextIndex}` }],
+        });
+    };
+    const defaultValueOptions = [
+        { value: '', content: '— none —' },
+        ...options.map((o) => ({ value: o.value, content: o.content ?? o.value })),
+    ];
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [commonRows, (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Default", children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { size: "m", value: [field.defaultValue ?? ''], options: defaultValueOptions, onUpdate: (next) => {
+                        const value = next[0];
+                        updateField(field.id, { defaultValue: value || undefined });
+                    } }) }), field.type === 'select' && ((0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Has clear", children: (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { checked: Boolean(field.hasClear), onUpdate: (value) => updateField(field.id, { hasClear: value }), children: "Allow clearing the selection" }) })), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Options", children: (0, jsx_runtime_1.jsxs)("div", { className: b('options'), children: [options.map((opt, index) => ((0, jsx_runtime_1.jsxs)("div", { className: b('option-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "s", value: opt.value, onUpdate: (value) => updateOption(index, 'value', value), placeholder: "value" }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "s", value: opt.content ?? '', onUpdate: (value) => updateOption(index, 'content', value), placeholder: "label" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "s", view: "flat-danger", disabled: options.length <= 1, onClick: () => removeOption(index), title: "Remove option", children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.TrashBin, size: 12 }) })] }, index))), (0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('add-option'), size: "s", view: "normal", onClick: addOption, children: "+ Add option" })] }) }), whenEditorSection] }));
+};
+exports.OptionsSettings = OptionsSettings;
+//# sourceMappingURL=OptionsSettings.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/OptionsSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/OptionsSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {TrashBin} from '@gravity-ui/icons';\nimport {Button, Checkbox, Icon, Select, TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nimport {Row} from './Row';\n\nconst b = formBuilderV2Cn('field-settings');\n\ninterface OptionsSettingsProps {\n    field: BuilderLeafField & {type: 'select' | 'segmentedRadioGroup'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const OptionsSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: OptionsSettingsProps) => {\n    const options = field.options ?? [];\n\n    const updateOption = (index: number, key: 'value' | 'content', value: string) => {\n        const next = options.map((opt, i) => (i === index ? {...opt, [key]: value} : opt));\n        updateField(field.id, {options: next});\n    };\n\n    const removeOption = (index: number) => {\n        const next = options.filter((_, i) => i !== index);\n        updateField(field.id, {options: next});\n    };\n\n    const addOption = () => {\n        const nextIndex = options.length + 1;\n        updateField(field.id, {\n            options: [...options, {value: `option${nextIndex}`, content: `Option ${nextIndex}`}],\n        });\n    };\n\n    const defaultValueOptions = [\n        {value: '', content: '— none —'},\n        ...options.map((o) => ({value: o.value, content: o.content ?? o.value})),\n    ];\n\n    return (\n        <React.Fragment>\n            {commonRows}\n            <Row label=\"Default\">\n                <Select\n                    size=\"m\"\n                    value={[field.defaultValue ?? '']}\n                    options={defaultValueOptions}\n                    onUpdate={(next) => {\n                        const value = next[0];\n                        updateField(field.id, {defaultValue: value || undefined});\n                    }}\n                />\n            </Row>\n            {field.type === 'select' && (\n                <Row label=\"Has clear\">\n                    <Checkbox\n                        checked={Boolean(field.hasClear)}\n                        onUpdate={(value) => updateField(field.id, {hasClear: value})}\n                    >\n                        Allow clearing the selection\n                    </Checkbox>\n                </Row>\n            )}\n            <Row label=\"Options\">\n                <div className={b('options')}>\n                    {options.map((opt, index) => (\n                        <div key={index} className={b('option-row')}>\n                            <TextInput\n                                size=\"s\"\n                                value={opt.value}\n                                onUpdate={(value) => updateOption(index, 'value', value)}\n                                placeholder=\"value\"\n                            />\n                            <TextInput\n                                size=\"s\"\n                                value={opt.content ?? ''}\n                                onUpdate={(value) => updateOption(index, 'content', value)}\n                                placeholder=\"label\"\n                            />\n                            <Button\n                                size=\"s\"\n                                view=\"flat-danger\"\n                                disabled={options.length <= 1}\n                                onClick={() => removeOption(index)}\n                                title=\"Remove option\"\n                            >\n                                <Icon data={TrashBin} size={12} />\n                            </Button>\n                        </div>\n                    ))}\n                    <Button className={b('add-option')} size=\"s\" view=\"normal\" onClick={addOption}>\n                        + Add option\n                    </Button>\n                </div>\n            </Row>\n            {whenEditorSection}\n        </React.Fragment>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/Row.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface RowProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare const Row: ({ label, children }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/Row.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../utils/cn.js");
+const b = (0, cn_1.formBuilderV2Cn)('field-settings');
+const Row = ({ label, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: b('row'), children: [(0, jsx_runtime_1.jsx)("span", { className: b('row-label'), children: label }), (0, jsx_runtime_1.jsx)("div", { children: children })] }));
+exports.Row = Row;
+//# sourceMappingURL=Row.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/Row.tsx"],"names":[],"mappings":";;;;AAEA,6CAAkD;AAElD,MAAM,CAAC,GAAG,IAAA,oBAAe,EAAC,gBAAgB,CAAC,CAAC;AAOrC,MAAM,GAAG,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAW,EAAE,EAAE,CAAC,CAChD,iCAAK,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,aACpB,iCAAM,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,YAAG,KAAK,GAAQ,EAC/C,0CAAM,QAAQ,GAAO,IACnB,CACT,CAAC;AALW,QAAA,GAAG,OAKd","sourcesContent":["import * as React from 'react';\n\nimport {formBuilderV2Cn} from '../../../utils/cn';\n\nconst b = formBuilderV2Cn('field-settings');\n\ninterface RowProps {\n    label: string;\n    children: React.ReactNode;\n}\n\nexport const Row = ({label, children}: RowProps) => (\n    <div className={b('row')}>\n        <span className={b('row-label')}>{label}</span>\n        <div>{children}</div>\n    </div>\n);\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SectionSettings.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { BuilderSectionField, FieldUpdate } from "../../../types.js";
+interface SectionSettingsProps {
+    field: BuilderSectionField;
+    updateField: (id: string, updates: FieldUpdate) => void;
+    whenEditorSection: React.ReactNode;
+}
+export declare const SectionSettings: ({ field, updateField, whenEditorSection }: SectionSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SectionSettings.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionSettings = 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 fieldNames_1 = require("../../../utils/fieldNames.js");
+const Row_1 = require("./Row.js");
+const SectionSettings = ({ field, updateField, whenEditorSection }) => {
+    const isArray = Boolean(field.index);
+    const handleArrayModeToggle = (value) => {
+        if (value) {
+            updateField(field.id, {
+                index: 'index',
+                withAddButton: true,
+                itemTitle: 'Item {{index}}',
+                itemView: 'card',
+                fields: (0, fieldNames_1.transformChildNames)(field.fields, fieldNames_1.prefixNameForArrayMode),
+            });
+        }
+        else {
+            updateField(field.id, {
+                index: undefined,
+                withAddButton: undefined,
+                itemTitle: undefined,
+                itemView: undefined,
+                fields: (0, fieldNames_1.transformChildNames)(field.fields, fieldNames_1.stripArrayModePrefix),
+            });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Title", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.title ?? '', onUpdate: (value) => updateField(field.id, { title: value }), placeholder: "Section heading" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Opened", children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { checked: Boolean(field.opened), onUpdate: (value) => updateField(field.id, { opened: value }), children: "Expanded by default" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Array mode", children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { checked: isArray, onUpdate: handleArrayModeToggle, children: "Repeating group (array of items)" }) }), isArray && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Hint", children: (0, jsx_runtime_1.jsxs)(uikit_1.Text, { variant: "caption-2", color: "hint", children: ["Child field names must include ", (0, jsx_runtime_1.jsx)("code", { children: '{{index}}' }), " so each row gets its own value. New fields get an ", (0, jsx_runtime_1.jsx)("code", { children: 'items[{{index}}].' }), ' ', "prefix automatically."] }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Index name", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.index ?? '', onUpdate: (value) => updateField(field.id, { index: value || 'index' }), placeholder: "index" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Item title", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.itemTitle ?? '', onUpdate: (value) => updateField(field.id, { itemTitle: value || undefined }), placeholder: "Item {{index}}" }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Item view", children: (0, jsx_runtime_1.jsx)(uikit_1.Select, { size: "m", value: [field.itemView ?? 'clear'], options: [
+                                { value: 'clear', content: 'Clear (flat)' },
+                                { value: 'card', content: 'Card (bordered)' },
+                            ], onUpdate: (next) => updateField(field.id, {
+                                itemView: next[0],
+                            }) }) }), (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Add button", children: (0, jsx_runtime_1.jsx)(uikit_1.Checkbox, { checked: Boolean(field.withAddButton), onUpdate: (value) => updateField(field.id, { withAddButton: value }), children: "Show \u201CAdd item\u201D button" }) })] })), whenEditorSection] }));
+};
+exports.SectionSettings = SectionSettings;
+//# sourceMappingURL=SectionSettings.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SectionSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/SectionSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Checkbox, Select, Switch, Text, TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderSectionField, FieldUpdate} from '../../../types';\nimport {\n    prefixNameForArrayMode,\n    stripArrayModePrefix,\n    transformChildNames,\n} from '../../../utils/fieldNames';\n\nimport {Row} from './Row';\n\ninterface SectionSettingsProps {\n    field: BuilderSectionField;\n    updateField: (id: string, updates: FieldUpdate) => void;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const SectionSettings = ({field, updateField, whenEditorSection}: SectionSettingsProps) => {\n    const isArray = Boolean(field.index);\n\n    const handleArrayModeToggle = (value: boolean) => {\n        if (value) {\n            updateField(field.id, {\n                index: 'index',\n                withAddButton: true,\n                itemTitle: 'Item {{index}}',\n                itemView: 'card',\n                fields: transformChildNames(field.fields, prefixNameForArrayMode),\n            });\n        } else {\n            updateField(field.id, {\n                index: undefined,\n                withAddButton: undefined,\n                itemTitle: undefined,\n                itemView: undefined,\n                fields: transformChildNames(field.fields, stripArrayModePrefix),\n            });\n        }\n    };\n\n    return (\n        <React.Fragment>\n            <Row label=\"Title\">\n                <TextInput\n                    value={field.title ?? ''}\n                    onUpdate={(value) => updateField(field.id, {title: value})}\n                    placeholder=\"Section heading\"\n                />\n            </Row>\n            <Row label=\"Opened\">\n                <Switch\n                    checked={Boolean(field.opened)}\n                    onUpdate={(value) => updateField(field.id, {opened: value})}\n                >\n                    Expanded by default\n                </Switch>\n            </Row>\n            <Row label=\"Array mode\">\n                <Switch checked={isArray} onUpdate={handleArrayModeToggle}>\n                    Repeating group (array of items)\n                </Switch>\n            </Row>\n            {isArray && (\n                <React.Fragment>\n                    <Row label=\"Hint\">\n                        <Text variant=\"caption-2\" color=\"hint\">\n                            Child field names must include <code>{'{{index}}'}</code> so each row\n                            gets its own value. New fields get an <code>{'items[{{index}}].'}</code>{' '}\n                            prefix automatically.\n                        </Text>\n                    </Row>\n                    <Row label=\"Index name\">\n                        <TextInput\n                            value={field.index ?? ''}\n                            onUpdate={(value) => updateField(field.id, {index: value || 'index'})}\n                            placeholder=\"index\"\n                        />\n                    </Row>\n                    <Row label=\"Item title\">\n                        <TextInput\n                            value={field.itemTitle ?? ''}\n                            onUpdate={(value) =>\n                                updateField(field.id, {itemTitle: value || undefined})\n                            }\n                            placeholder=\"Item {{index}}\"\n                        />\n                    </Row>\n                    <Row label=\"Item view\">\n                        <Select\n                            size=\"m\"\n                            value={[field.itemView ?? 'clear']}\n                            options={[\n                                {value: 'clear', content: 'Clear (flat)'},\n                                {value: 'card', content: 'Card (bordered)'},\n                            ]}\n                            onUpdate={(next) =>\n                                updateField(field.id, {\n                                    itemView: next[0] as 'card' | 'clear',\n                                })\n                            }\n                        />\n                    </Row>\n                    <Row label=\"Add button\">\n                        <Checkbox\n                            checked={Boolean(field.withAddButton)}\n                            onUpdate={(value) => updateField(field.id, {withAddButton: value})}\n                        >\n                            Show &ldquo;Add item&rdquo; button\n                        </Checkbox>\n                    </Row>\n                </React.Fragment>\n            )}\n            {whenEditorSection}\n        </React.Fragment>\n    );\n};\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SwitchSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface SwitchSettingsProps {
+    field: BuilderLeafField & {
+        type: 'switch';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const SwitchSettings: ({ field, updateField, commonRows, whenEditorSection, }: SwitchSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SwitchSettings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchSettings = 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 Row_1 = require("./Row.js");
+const SwitchSettings = ({ field, updateField, commonRows, whenEditorSection, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [commonRows, (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Default", children: (0, jsx_runtime_1.jsx)(uikit_1.Switch, { checked: Boolean(field.defaultValue), onUpdate: (value) => updateField(field.id, { defaultValue: value }) }) }), whenEditorSection] }));
+exports.SwitchSettings = SwitchSettings;
+//# sourceMappingURL=SwitchSettings.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/SwitchSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/SwitchSettings.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAAyC;AAIzC,kCAA0B;AASnB,MAAM,cAAc,GAAG,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACC,EAAE,EAAE,CAAC,CACvB,wBAAC,KAAK,CAAC,QAAQ,eACV,UAAU,EACX,uBAAC,SAAG,IAAC,KAAK,EAAC,SAAS,YAChB,uBAAC,cAAM,IACH,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,CAAC,GACnE,GACA,EACL,iBAAiB,IACL,CACpB,CAAC;AAhBW,QAAA,cAAc,kBAgBzB","sourcesContent":["import * as React from 'react';\n\nimport {Switch} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ninterface SwitchSettingsProps {\n    field: BuilderLeafField & {type: 'switch'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const SwitchSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: SwitchSettingsProps) => (\n    <React.Fragment>\n        {commonRows}\n        <Row label=\"Default\">\n            <Switch\n                checked={Boolean(field.defaultValue)}\n                onUpdate={(value) => updateField(field.id, {defaultValue: value})}\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}

package/build/cjs/form-builder-v2/components/FieldSettings/fields/TextFieldSettings.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { BuilderLeafField, FieldUpdate } from "../../../types.js";
+interface TextFieldSettingsProps {
+    field: BuilderLeafField & {
+        type: 'textInput' | 'textArea';
+    };
+    updateField: (id: string, updates: FieldUpdate) => void;
+    commonRows: React.ReactNode;
+    whenEditorSection: React.ReactNode;
+}
+export declare const TextFieldSettings: ({ field, updateField, commonRows, whenEditorSection, }: TextFieldSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/cjs/form-builder-v2/components/FieldSettings/fields/TextFieldSettings.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFieldSettings = 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 Row_1 = require("./Row.js");
+const TextFieldSettings = ({ field, updateField, commonRows, whenEditorSection, }) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [commonRows, (0, jsx_runtime_1.jsx)(Row_1.Row, { label: "Default", children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: field.defaultValue ?? '', onUpdate: (value) => updateField(field.id, { defaultValue: value || undefined }), placeholder: "Default value" }) }), whenEditorSection] }));
+exports.TextFieldSettings = TextFieldSettings;
+//# sourceMappingURL=TextFieldSettings.js.map

package/build/cjs/form-builder-v2/components/FieldSettings/fields/TextFieldSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldSettings.js","sourceRoot":"../../../../../../src","sources":["form-builder-v2/components/FieldSettings/fields/TextFieldSettings.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,6CAA4C;AAI5C,kCAA0B;AASnB,MAAM,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,UAAU,EACV,iBAAiB,GACI,EAAE,EAAE,CAAC,CAC1B,wBAAC,KAAK,CAAC,QAAQ,eACV,UAAU,EACX,uBAAC,SAAG,IAAC,KAAK,EAAC,SAAS,YAChB,uBAAC,iBAAS,IACN,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,EAAC,YAAY,EAAE,KAAK,IAAI,SAAS,EAAC,CAAC,EAC9E,WAAW,EAAC,eAAe,GAC7B,GACA,EACL,iBAAiB,IACL,CACpB,CAAC;AAjBW,QAAA,iBAAiB,qBAiB5B","sourcesContent":["import * as React from 'react';\n\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport type {BuilderLeafField, FieldUpdate} from '../../../types';\n\nimport {Row} from './Row';\n\ninterface TextFieldSettingsProps {\n    field: BuilderLeafField & {type: 'textInput' | 'textArea'};\n    updateField: (id: string, updates: FieldUpdate) => void;\n    commonRows: React.ReactNode;\n    whenEditorSection: React.ReactNode;\n}\n\nexport const TextFieldSettings = ({\n    field,\n    updateField,\n    commonRows,\n    whenEditorSection,\n}: TextFieldSettingsProps) => (\n    <React.Fragment>\n        {commonRows}\n        <Row label=\"Default\">\n            <TextInput\n                value={field.defaultValue ?? ''}\n                onUpdate={(value) => updateField(field.id, {defaultValue: value || undefined})}\n                placeholder=\"Default value\"\n            />\n        </Row>\n        {whenEditorSection}\n    </React.Fragment>\n);\n"]}