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

package/build/cjs/{form-generator/components/FormBuilder/FormBuilder.js → form-builder/components/FormBuilderBody/FormBuilderBody.js}

@@ -1,16 +1,14 @@
-'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormBuilder = void 0;
-const tslib_1 = require("tslib");
+exports.FormBuilderBody = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_1 = require("@gravity-ui/uikit");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const cn_1 = require("../../utils/cn.js");
 const FieldCard_1 = require("../FieldCard/FieldCard.js");
 const FormContext_1 = require("../../hooks/FormContext.js");
-const b = (0, bem_cn_lite_1.default)('form-builder');
-const FormBuilder = ({ className, formFields }) => {
-    const { addField } = (0, FormContext_1.useFormContext)();
+const b = (0, cn_1.formBuilderCn)('form-builder-body');
+const FormBuilderBody = ({ className }) => {
+    const { formFields, addField } = (0, FormContext_1.useFormContext)();
     const inputTypeMenuItems = [
         {
             type: 'text',
@@ -60,5 +58,5 @@ const FormBuilder = ({ className, formFields }) => {
     ];
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('fields-list'), children: formFields.map((field) => ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { field: field, inputTypeMenuItems: inputTypeMenuItems }, field.id))) }), (0, jsx_runtime_1.jsx)("div", { className: b('field'), children: (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: inputTypeMenuItems, renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...props, view: "action", size: "l", children: "+ Add Field" })) }) })] }));
 };
-exports.FormBuilder = FormBuilder;
-//# sourceMappingURL=FormBuilder.js.map
+exports.FormBuilderBody = FormBuilderBody;
+//# sourceMappingURL=FormBuilderBody.js.map

package/build/cjs/form-builder/components/FormBuilderBody/FormBuilderBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilderBody.js","sourceRoot":"../../../../../src","sources":["form-builder/components/FormBuilderBody/FormBuilderBody.tsx"],"names":[],"mappings":";;;;AACA,6CAAuD;AACvD,0CAA6C;AAC7C,yDAAiD;AACjD,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,kBAAa,EAAC,mBAAmB,CAAC,CAAC;AAMtC,MAAM,eAAe,GAAmC,CAAC,EAAC,SAAS,EAAC,EAAE,EAAE;IAC3E,MAAM,EAAC,UAAU,EAAE,QAAQ,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEhD,MAAM,kBAAkB,GAAwB;QAC5C;YACI,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC9B,IAAI,EAAE,YAAY;SACrB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;YACjC,IAAI,EAAE,eAAe;SACxB;QACD;YACI,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC;YAClC,IAAI,EAAE,gBAAgB;SACzB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;KACJ,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC3B,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACvB,uBAAC,qBAAS,IAEN,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,kBAAkB,IAFjC,KAAK,CAAC,EAAE,CAGf,CACL,CAAC,GACA,EAEN,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,uBAAC,oBAAY,IACT,KAAK,EAAE,kBAAkB,EACzB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACvB,uBAAC,cAAM,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,4BAEhC,CACZ,GACH,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AA3EW,QAAA,eAAe,mBA2E1B","sourcesContent":["import * as React from 'react';\nimport {Button, DropdownMenu} from '@gravity-ui/uikit';\nimport {formBuilderCn} from '../../utils/cn';\nimport {FieldCard} from '../FieldCard/FieldCard';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {InputTypeMenuItem} from '../../types';\n\nimport './FormBuilderBody.scss';\n\nconst b = formBuilderCn('form-builder-body');\n\ninterface FormBuilderBodyProps {\n    className?: string;\n}\n\nexport const FormBuilderBody: React.FC<FormBuilderBodyProps> = ({className}) => {\n    const {formFields, addField} = useFormContext();\n\n    const inputTypeMenuItems: InputTypeMenuItem[] = [\n        {\n            type: 'text',\n            action: () => addField('text'),\n            text: 'Text Input',\n        },\n        {\n            type: 'number',\n            action: () => addField('number'),\n            text: 'Number Input',\n        },\n        {\n            type: 'boolean',\n            action: () => addField('boolean'),\n            text: 'Boolean Input',\n        },\n        {\n            type: 'textarea',\n            action: () => addField('textarea'),\n            text: 'Textarea Input',\n        },\n        {\n            type: 'select',\n            action: () => addField('select'),\n            text: 'Select Input',\n        },\n        {\n            type: 'object',\n            action: () => addField('object'),\n            text: 'Object Input',\n        },\n        {\n            type: 'array',\n            action: () => addField('array'),\n            text: 'Array Input',\n        },\n        {\n            type: 'oneOf',\n            action: () => addField('oneOf'),\n            text: 'OneOf Input',\n        },\n        {\n            type: 'anyOf',\n            action: () => addField('anyOf'),\n            text: 'AnyOf Input',\n        },\n    ];\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('fields-list')}>\n                {formFields.map((field) => (\n                    <FieldCard\n                        key={field.id}\n                        field={field}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                    />\n                ))}\n            </div>\n\n            <div className={b('field')}>\n                <DropdownMenu\n                    items={inputTypeMenuItems}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"action\" size=\"l\">\n                            + Add Field\n                        </Button>\n                    )}\n                />\n            </div>\n        </div>\n    );\n};\n"]}

package/build/cjs/{form-generator → form-builder}/components/ObjectFieldRenderer/ObjectFieldRenderer.css

@@ -1,4 +1,4 @@
-.object-field-renderer__nested-fields {
+.pcformbuilder-object-field-renderer__nested-fields {
   margin-top: 12px;
   margin-left: 16px;
   padding-left: 12px;

package/build/cjs/{form-generator → form-builder}/components/ObjectFieldRenderer/ObjectFieldRenderer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ConfigInput } from "../../../editor-v2/index.js";
-import { FormObjectField, InputTypeMenuItem } from "../../hooks/types.js";
+import { ConfigInput } from "../../../form-generator/index.js";
+import { FormObjectField, InputTypeMenuItem } from "../../types.js";
 interface ObjectFieldRendererProps {
     field: FormObjectField;
     fieldName: string;

package/build/cjs/{form-generator → form-builder}/components/ObjectFieldRenderer/ObjectFieldRenderer.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectFieldRenderer = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const cn_1 = require("../../utils/cn.js");
 const AddPropertyButton_1 = require("../AddPropertyButton/AddPropertyButton.js");
 const SectionHeader_1 = require("../SectionHeader/SectionHeader.js");
 const FormContext_1 = require("../../hooks/FormContext.js");
-const b = (0, bem_cn_lite_1.default)('object-field-renderer');
+const b = (0, cn_1.formBuilderCn)('object-field-renderer');
 const ObjectFieldRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
     const { addObjectProperty } = (0, FormContext_1.useFormContext)();
     return ((0, jsx_runtime_1.jsxs)("div", { className: b('nested-fields'), children: [(0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { title: "Properties:" }), field.properties.map((property, index) => renderNestedField(property, index, field.id)), (0, jsx_runtime_1.jsx)(AddPropertyButton_1.AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => addObjectProperty(field.id, type) })] }));

package/build/cjs/form-builder/components/ObjectFieldRenderer/ObjectFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectFieldRenderer.js","sourceRoot":"../../../../../src","sources":["form-builder/components/ObjectFieldRenderer/ObjectFieldRenderer.tsx"],"names":[],"mappings":";;;;AACA,0CAA6C;AAE7C,iFAAyE;AACzE,qEAA6D;AAC7D,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,kBAAa,EAAC,uBAAuB,CAAC,CAAC;AAc1C,MAAM,mBAAmB,GAAuC,CAAC,EACpE,KAAK,EACL,SAAS,EAAE,UAAU,EACrB,kBAAkB,EAClB,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAC,iBAAiB,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAE7C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,6BAAa,IAAC,KAAK,EAAC,aAAa,GAAG,EAEpC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CACtC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAC/C,EAED,uBAAC,qCAAiB,IACd,kBAAkB,EAAE,kBAAkB,EACtC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,GACpD,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAtBW,QAAA,mBAAmB,uBAsB9B","sourcesContent":["import * as React from 'react';\nimport {formBuilderCn} from '../../utils/cn';\nimport {ConfigInput} from '../../../form-generator';\nimport {AddPropertyButton} from '../AddPropertyButton/AddPropertyButton';\nimport {SectionHeader} from '../SectionHeader/SectionHeader';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormObjectField, InputTypeMenuItem} from '../../types';\n\nimport './ObjectFieldRenderer.scss';\n\nconst b = formBuilderCn('object-field-renderer');\n\ninterface ObjectFieldRendererProps {\n    field: FormObjectField;\n    fieldName: string;\n    inputTypeMenuItems: InputTypeMenuItem[];\n    renderNestedField: (\n        field: ConfigInput,\n        index: number,\n        parentId: string,\n        optionIndex?: number,\n    ) => React.ReactNode;\n}\n\nexport const ObjectFieldRenderer: React.FC<ObjectFieldRendererProps> = ({\n    field,\n    fieldName: _fieldName,\n    inputTypeMenuItems,\n    renderNestedField,\n}) => {\n    const {addObjectProperty} = useFormContext();\n\n    return (\n        <div className={b('nested-fields')}>\n            <SectionHeader title=\"Properties:\" />\n\n            {field.properties.map((property, index) =>\n                renderNestedField(property, index, field.id),\n            )}\n\n            <AddPropertyButton\n                inputTypeMenuItems={inputTypeMenuItems}\n                onAdd={(type) => addObjectProperty(field.id, type)}\n            />\n        </div>\n    );\n};\n"]}

package/build/cjs/{form-generator → form-builder}/components/OptionHeader/OptionHeader.css

@@ -1,4 +1,4 @@
-.option-header {
+.pcformbuilder-option-header {
   display: flex;
   justify-content: space-between;
   align-items: center;

package/build/cjs/{form-generator → form-builder}/components/OptionHeader/OptionHeader.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionHeader = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_1 = require("@gravity-ui/uikit");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
-const b = (0, bem_cn_lite_1.default)('option-header');
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.formBuilderCn)('option-header');
 const OptionHeader = ({ title }) => ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-3", children: title }) }));
 exports.OptionHeader = OptionHeader;
 //# sourceMappingURL=OptionHeader.js.map

package/build/cjs/form-builder/components/OptionHeader/OptionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionHeader.js","sourceRoot":"../../../../../src","sources":["form-builder/components/OptionHeader/OptionHeader.tsx"],"names":[],"mappings":";;;;AACA,6CAAuC;AACvC,0CAA6C;AAI7C,MAAM,CAAC,GAAG,IAAA,kBAAa,EAAC,eAAe,CAAC,CAAC;AAMlC,MAAM,YAAY,GAAgC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAClE,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,GAAQ,GACxC,CACT,CAAC;AAJW,QAAA,YAAY,gBAIvB","sourcesContent":["import * as React from 'react';\nimport {Text} from '@gravity-ui/uikit';\nimport {formBuilderCn} from '../../utils/cn';\n\nimport './OptionHeader.scss';\n\nconst b = formBuilderCn('option-header');\n\ninterface OptionHeaderProps {\n    title: string;\n}\n\nexport const OptionHeader: React.FC<OptionHeaderProps> = ({title}) => (\n    <div className={b()}>\n        <Text variant=\"subheader-3\">{title}</Text>\n    </div>\n);\n"]}

package/build/cjs/{form-generator → form-builder}/components/OptionsRenderer/OptionsRenderer.css

@@ -1,28 +1,28 @@
-.options-renderer__header {
+.pcformbuilder-options-renderer__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }
-.options-renderer__option-header {
+.pcformbuilder-options-renderer__option-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }
-.options-renderer__add-option-button {
+.pcformbuilder-options-renderer__add-option-button {
   margin-left: 8px;
 }
-.options-renderer__remove-option-button {
+.pcformbuilder-options-renderer__remove-option-button {
   margin-left: 8px;
 }
-.options-renderer__nested-fields {
+.pcformbuilder-options-renderer__nested-fields {
   margin-top: 12px;
   margin-left: 16px;
   padding-left: 12px;
   border-left: 2px solid var(--g-color-line-generic);
 }
-.options-renderer__option {
+.pcformbuilder-options-renderer__option {
   margin-top: 12px;
   padding: 12px;
   background-color: var(--g-color-base-background);

package/build/cjs/{form-generator → form-builder}/components/OptionsRenderer/OptionsRenderer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ConfigInput } from "../../../editor-v2/index.js";
-import { FormOptionsField, InputTypeMenuItem } from "../../hooks/types.js";
+import { ConfigInput } from "../../../form-generator/index.js";
+import { FormOptionsField, InputTypeMenuItem } from "../../types.js";
 interface OptionsRendererProps {
     field: FormOptionsField;
     fieldName: string;

package/build/cjs/{form-generator → form-builder}/components/OptionsRenderer/OptionsRenderer.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsRenderer = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const cn_1 = require("../../utils/cn.js");
 const uikit_1 = require("@gravity-ui/uikit");
 const AddPropertyButton_1 = require("../AddPropertyButton/AddPropertyButton.js");
 const OptionHeader_1 = require("../OptionHeader/OptionHeader.js");
 const SectionHeader_1 = require("../SectionHeader/SectionHeader.js");
 const FormContext_1 = require("../../hooks/FormContext.js");
-const b = (0, bem_cn_lite_1.default)('options-renderer');
+const b = (0, cn_1.formBuilderCn)('options-renderer');
 const OptionsRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
     const { addOptionProperty, addOption, removeOption } = (0, FormContext_1.useFormContext)();
     return ((0, jsx_runtime_1.jsxs)("div", { className: b('nested-fields'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { title: "Options:" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal", size: "s", onClick: () => {

package/build/cjs/form-builder/components/OptionsRenderer/OptionsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsRenderer.js","sourceRoot":"../../../../../src","sources":["form-builder/components/OptionsRenderer/OptionsRenderer.tsx"],"names":[],"mappings":";;;;AACA,0CAA6C;AAC7C,6CAAyC;AAEzC,iFAAyE;AACzE,kEAA0D;AAC1D,qEAA6D;AAC7D,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,kBAAa,EAAC,kBAAkB,CAAC,CAAC;AAcrC,MAAM,eAAe,GAAmC,CAAC,EAC5D,KAAK,EACL,SAAS,EAAE,UAAU,EACrB,kBAAkB,EAClB,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAC,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEtE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,iCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,uBAAC,6BAAa,IAAC,KAAK,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAM,IACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE;4BACV,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;wBACxB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,6BAG5B,IACP,EAEL,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACxC,iCAAmC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACrD,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,2BAAY,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACpC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,uBAAC,cAAM,IACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oCACV,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;gCACxC,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,uBAG/B,CACZ,IACC,EAEN,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,6BAAa,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,QAAQ,GAAG,EAErD,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,CAC3C,iBAAiB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CAChE,EAED,uBAAC,qCAAiB,IACd,kBAAkB,EAAE,kBAAkB,EACtC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;oCACZ,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;gCACnD,CAAC,GACH,IACA,KA9BA,UAAU,WAAW,EAAE,CA+B3B,CACT,CAAC,IACA,CACT,CAAC;AACN,CAAC,CAAC;AA5DW,QAAA,eAAe,mBA4D1B","sourcesContent":["import * as React from 'react';\nimport {formBuilderCn} from '../../utils/cn';\nimport {Button} from '@gravity-ui/uikit';\nimport {ConfigInput} from '../../../form-generator';\nimport {AddPropertyButton} from '../AddPropertyButton/AddPropertyButton';\nimport {OptionHeader} from '../OptionHeader/OptionHeader';\nimport {SectionHeader} from '../SectionHeader/SectionHeader';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormOptionsField, InputTypeMenuItem} from '../../types';\n\nimport './OptionsRenderer.scss';\n\nconst b = formBuilderCn('options-renderer');\n\ninterface OptionsRendererProps {\n    field: FormOptionsField;\n    fieldName: string;\n    inputTypeMenuItems: InputTypeMenuItem[];\n    renderNestedField: (\n        field: ConfigInput,\n        index: number,\n        parentId: string,\n        optionIndex?: number,\n    ) => React.ReactNode;\n}\n\nexport const OptionsRenderer: React.FC<OptionsRendererProps> = ({\n    field,\n    fieldName: _fieldName,\n    inputTypeMenuItems,\n    renderNestedField,\n}) => {\n    const {addOptionProperty, addOption, removeOption} = useFormContext();\n\n    return (\n        <div className={b('nested-fields')}>\n            <div className={b('header')}>\n                <SectionHeader title=\"Options:\" />\n                <Button\n                    view=\"normal\"\n                    size=\"s\"\n                    onClick={() => {\n                        addOption(field.id);\n                    }}\n                    className={b('add-option-button')}\n                >\n                    + Add Option\n                </Button>\n            </div>\n\n            {field.options.map((option, optionIndex) => (\n                <div key={`option_${optionIndex}`} className={b('option')}>\n                    <div className={b('option-header')}>\n                        <OptionHeader title={option.title} />\n                        {field.options.length > 1 && (\n                            <Button\n                                view=\"normal\"\n                                size=\"xs\"\n                                onClick={() => {\n                                    removeOption(field.id, optionIndex);\n                                }}\n                                className={b('remove-option-button')}\n                            >\n                                Remove\n                            </Button>\n                        )}\n                    </div>\n\n                    <div className={b('nested-fields')}>\n                        <SectionHeader title=\"Properties:\" variant=\"body-2\" />\n\n                        {option.properties.map((property, propIndex) =>\n                            renderNestedField(property, propIndex, field.id, optionIndex),\n                        )}\n\n                        <AddPropertyButton\n                            inputTypeMenuItems={inputTypeMenuItems}\n                            onAdd={(type) => {\n                                addOptionProperty(field.id, optionIndex, type);\n                            }}\n                        />\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};\n"]}

package/build/cjs/form-builder/components/SectionHeader/SectionHeader.css

@@ -0,0 +1,3 @@
+.pcformbuilder-section-header {
+  margin-bottom: 8px;
+}

package/build/cjs/{form-generator → form-builder}/components/SectionHeader/SectionHeader.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionHeader = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const uikit_1 = require("@gravity-ui/uikit");
-const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
-const b = (0, bem_cn_lite_1.default)('section-header');
+const cn_1 = require("../../utils/cn.js");
+const b = (0, cn_1.formBuilderCn)('section-header');
 const SectionHeader = ({ title, variant = 'body-1' }) => ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: variant, children: title }) }));
 exports.SectionHeader = SectionHeader;
 //# sourceMappingURL=SectionHeader.js.map

package/build/cjs/form-builder/components/SectionHeader/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"../../../../../src","sources":["form-builder/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;AACA,6CAAuC;AACvC,0CAA6C;AAI7C,MAAM,CAAC,GAAG,IAAA,kBAAa,EAAC,gBAAgB,CAAC,CAAC;AAOnC,MAAM,aAAa,GAAiC,CAAC,EAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAC,EAAE,EAAE,CAAC,CACxF,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,YAAI,IAAC,OAAO,EAAE,OAAO,YAAG,KAAK,GAAQ,GACpC,CACT,CAAC;AAJW,QAAA,aAAa,iBAIxB","sourcesContent":["import * as React from 'react';\nimport {Text} from '@gravity-ui/uikit';\nimport {formBuilderCn} from '../../utils/cn';\n\nimport './SectionHeader.scss';\n\nconst b = formBuilderCn('section-header');\n\ninterface SectionHeaderProps {\n    title: string;\n    variant?: 'body-1' | 'body-2';\n}\n\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({title, variant = 'body-1'}) => (\n    <div className={b()}>\n        <Text variant={variant}>{title}</Text>\n    </div>\n);\n"]}

package/build/cjs/{form-generator → form-builder}/components/SelectFieldRenderer/SelectFieldRenderer.css

@@ -1,23 +1,23 @@
-.select-field-renderer__config-row {
+.pcformbuilder-select-field-renderer__config-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.select-field-renderer__config-row > span {
+.pcformbuilder-select-field-renderer__config-row > span {
   min-width: 90px;
   font-weight: 500;
 }
-.select-field-renderer__config-row > div {
+.pcformbuilder-select-field-renderer__config-row > div {
   flex: 1;
 }
-.select-field-renderer__config-row_vertical {
+.pcformbuilder-select-field-renderer__config-row_vertical {
   flex-direction: column;
   align-items: flex-start;
 }
-.select-field-renderer__options-title {
+.pcformbuilder-select-field-renderer__options-title {
   margin-bottom: 8px;
 }
-.select-field-renderer__enum-option {
+.pcformbuilder-select-field-renderer__enum-option {
   margin-top: 8px;
   padding: 12px;
   background-color: var(--g-color-base-generic-ultralight);
@@ -27,10 +27,10 @@
   flex-direction: column;
   gap: 8px;
 }
-.select-field-renderer__remove-button {
+.pcformbuilder-select-field-renderer__remove-button {
   align-self: flex-end;
   margin-top: 4px;
 }
-.select-field-renderer__add-button {
+.pcformbuilder-select-field-renderer__add-button {
   margin-top: 8px;
 }

package/build/cjs/{form-generator → form-builder}/components/SelectFieldRenderer/SelectFieldRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormField } from "../../hooks/types.js";
+import { FormField } from "../../types.js";
 interface SelectFieldRendererProps {
     field: FormField;
 }

package/build/cjs/{form-generator → form-builder}/components/SelectFieldRenderer/SelectFieldRenderer.js

@@ -5,9 +5,9 @@ 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 bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const cn_1 = require("../../utils/cn.js");
 const FormContext_1 = require("../../hooks/FormContext.js");
-const b = (0, bem_cn_lite_1.default)('select-field-renderer');
+const b = (0, cn_1.formBuilderCn)('select-field-renderer');
 const SelectFieldRenderer = ({ field }) => {
     const { updateField } = (0, FormContext_1.useFormContext)();
     if (field.type !== 'select') {

package/build/cjs/form-builder/components/SelectFieldRenderer/SelectFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFieldRenderer.js","sourceRoot":"../../../../../src","sources":["form-builder/components/SelectFieldRenderer/SelectFieldRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Button, DropdownMenu, Text, TextInput} from '@gravity-ui/uikit';\nimport {formBuilderCn} from '../../utils/cn';\nimport {FormField} from '../../types';\nimport {useFormContext} from '../../hooks/FormContext';\n\nimport './SelectFieldRenderer.scss';\n\nconst b = formBuilderCn('select-field-renderer');\n\ninterface SelectFieldRendererProps {\n    field: FormField;\n}\n\ninterface SelectFieldOption {\n    content: string;\n    value: string;\n}\n\nexport const SelectFieldRenderer: React.FC<SelectFieldRendererProps> = ({field}) => {\n    const {updateField} = useFormContext();\n\n    if (field.type !== 'select') {\n        return null;\n    }\n\n    const view = field.view as 'select' | 'radiobutton';\n    const mode = field.mode as 'single' | 'multiple';\n    const enumValues = (field.enum || []) as SelectFieldOption[];\n\n    return (\n        <React.Fragment>\n            <div className={b('config-row')}>\n                <Text variant=\"body-2\">View:</Text>\n                <DropdownMenu\n                    items={[\n                        {\n                            action: () => updateField(field.id, {view: 'select'}),\n                            text: 'Select',\n                        },\n                        {\n                            action: () => updateField(field.id, {view: 'radiobutton'}),\n                            text: 'Radio Button',\n                        },\n                    ]}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"normal\" size=\"s\">\n                            {view === 'radiobutton' ? 'Radio Button' : 'Select'}\n                        </Button>\n                    )}\n                />\n            </div>\n\n            <div className={b('config-row')}>\n                <Text variant=\"body-2\">Mode:</Text>\n                <DropdownMenu\n                    items={[\n                        {\n                            action: () => updateField(field.id, {mode: 'single'}),\n                            text: 'Single',\n                        },\n                        {\n                            action: () => updateField(field.id, {mode: 'multiple'}),\n                            text: 'Multiple',\n                        },\n                    ]}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"normal\" size=\"s\">\n                            {mode === 'multiple' ? 'Multiple' : 'Single'}\n                        </Button>\n                    )}\n                />\n            </div>\n\n            <div className={b('config-row', {vertical: true})}>\n                <Text variant=\"body-2\" className={b('options-title')}>\n                    Options:\n                </Text>\n                {enumValues.map((option, index) => (\n                    <div key={`enum_${index}`} className={b('enum-option')}>\n                        <div className={b('config-row')}>\n                            <Text variant=\"body-2\">Label:</Text>\n                            <TextInput\n                                value={option.content}\n                                onUpdate={(value) => {\n                                    const newEnum = [...enumValues];\n                                    newEnum[index] = {\n                                        ...newEnum[index],\n                                        content: value,\n                                    };\n                                    updateField(field.id, {enum: newEnum});\n                                }}\n                                size=\"s\"\n                            />\n                        </div>\n                        <div className={b('config-row')}>\n                            <Text variant=\"body-2\">Value:</Text>\n                            <TextInput\n                                value={option.value}\n                                onUpdate={(value) => {\n                                    const newEnum = [...enumValues];\n                                    newEnum[index] = {\n                                        ...newEnum[index],\n                                        value,\n                                    };\n                                    updateField(field.id, {enum: newEnum});\n                                }}\n                                size=\"s\"\n                            />\n                        </div>\n                        <Button\n                            view=\"flat-danger\"\n                            size=\"xs\"\n                            onClick={() => {\n                                const newEnum = [...enumValues];\n                                newEnum.splice(index, 1);\n                                updateField(field.id, {enum: newEnum});\n                            }}\n                            className={b('remove-button')}\n                        >\n                            Remove\n                        </Button>\n                    </div>\n                ))}\n                <Button\n                    view=\"normal\"\n                    size=\"s\"\n                    onClick={() => {\n                        const newEnum = [...(enumValues || [])];\n                        newEnum.push({\n                            content: `Option ${newEnum.length + 1}`,\n                            value: `option${newEnum.length + 1}`,\n                        });\n                        updateField(field.id, {enum: newEnum});\n                    }}\n                    className={b('add-button')}\n                >\n                    + Add Option\n                </Button>\n            </div>\n        </React.Fragment>\n    );\n};\n"]}

package/build/cjs/form-builder/hooks/FormContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { FormContextType, FormField } from "../types.js";
+export declare const FormContext: React.Context<FormContextType>;
+interface FormProviderProps {
+    children: React.ReactNode;
+    formFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+}
+export declare const FormProvider: React.FC<FormProviderProps>;
+export declare const useFormContext: () => FormContextType;
+export {};

package/build/cjs/{form-generator → form-builder}/hooks/FormContext.js

@@ -6,8 +6,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const useFormFields_1 = require("./useFormFields.js");
 exports.FormContext = React.createContext({});
-const FormProvider = ({ children }) => {
-    const formFieldsData = (0, useFormFields_1.useFormFields)();
+const FormProvider = ({ children, formFields, onChange }) => {
+    const formFieldsData = (0, useFormFields_1.useFormFields)({ initialFields: formFields, onChange });
     return (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: formFieldsData, children: children });
 };
 exports.FormProvider = FormProvider;

package/build/cjs/form-builder/hooks/FormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext.js","sourceRoot":"../../../../src","sources":["form-builder/hooks/FormContext.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAC/B,sDAA8C;AAGjC,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAAkB,EAAqB,CAAC,CAAC;AAQhF,MAAM,YAAY,GAAgC,CAAC,EAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC1F,MAAM,cAAc,GAAG,IAAA,6BAAa,EAAC,EAAC,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAC,CAAC,CAAC;IAC5E,OAAO,uBAAC,mBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,YAAG,QAAQ,GAAwB,CAAC;AAC1F,CAAC,CAAC;AAHW,QAAA,YAAY,gBAGvB;AAEK,MAAM,cAAc,GAAG,GAAG,EAAE;IAC/B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,mBAAW,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AARW,QAAA,cAAc,kBAQzB","sourcesContent":["import * as React from 'react';\nimport {useFormFields} from './useFormFields';\nimport {FormContextType, FormField} from '../types';\n\nexport const FormContext = React.createContext<FormContextType>({} as FormContextType);\n\ninterface FormProviderProps {\n    children: React.ReactNode;\n    formFields: FormField[];\n    onChange?: (fields: FormField[]) => void;\n}\n\nexport const FormProvider: React.FC<FormProviderProps> = ({children, formFields, onChange}) => {\n    const formFieldsData = useFormFields({initialFields: formFields, onChange});\n    return <FormContext.Provider value={formFieldsData}>{children}</FormContext.Provider>;\n};\n\nexport const useFormContext = () => {\n    const context = React.useContext(FormContext);\n\n    if (!context) {\n        throw new Error('useFormContext must be used within a FormProvider');\n    }\n\n    return context;\n};\n"]}

package/build/cjs/{form-generator → form-builder}/hooks/useFormFields.d.ts

@@ -1,6 +1,10 @@
-import { ConfigInput } from "../../editor-v2/index.js";
-import { FormField } from "./types.js";
-export declare const useFormFields: () => {
+import { ConfigInput } from "../../form-generator/index.js";
+import { FormField } from "../types.js";
+interface UseFormFieldsProps {
+    initialFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+}
+export declare const useFormFields: ({ initialFields, onChange }: UseFormFieldsProps) => {
     formFields: FormField[];
     createField: (type: ConfigInput["type"], name?: string) => FormField;
     addField: (type: ConfigInput["type"]) => void;
@@ -16,3 +20,4 @@ export declare const useFormFields: () => {
     removeOption: (fieldId: string, optionIndex: number) => void;
     resetForm: () => void;
 };
+export {};

package/build/cjs/{form-generator → form-builder}/hooks/useFormFields.js

@@ -3,19 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFields = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const useFormFields = () => {
-    const [formFields, setFormFields] = React.useState([]);
-    const [nextId, setNextId] = React.useState(1);
-    const generateId = () => {
+const useFormFields = ({ initialFields, onChange }) => {
+    const [formFields, setFormFields] = React.useState(initialFields);
+    const [nextId, setNextId] = React.useState(initialFields.length + 1);
+    const generateId = React.useCallback(() => {
         const id = `field_id_${nextId}`;
         setNextId((prev) => prev + 1);
         return id;
-    };
-    const generateName = () => {
+    }, [nextId]);
+    const generateName = React.useCallback(() => {
         const name = `field_${nextId}`;
         return name;
-    };
-    const createField = (type, name = '') => {
+    }, [nextId]);
+    const updateFormFields = React.useCallback((fields) => {
+        setFormFields(fields);
+        onChange?.(fields);
+    }, [onChange]);
+    const createField = React.useCallback((type, name = '') => {
         const fieldName = name || generateName();
         const fieldId = generateId();
         let newField;
@@ -164,8 +168,8 @@ const useFormFields = () => {
                 return createField('text', fieldName);
         }
         return newField;
-    };
-    const updateFieldById = (fields, fieldId, updates) => {
+    }, [generateId, generateName]);
+    const updateFieldById = React.useCallback((fields, fieldId, updates) => {
         return fields.map((field) => {
             if (field.id === fieldId) {
                 return { ...field, ...updates };
@@ -197,18 +201,18 @@ const useFormFields = () => {
             }
             return field;
         });
-    };
-    const addField = (type) => {
+    }, []);
+    const addField = React.useCallback((type) => {
         const newField = createField(type);
-        setFormFields((prev) => [...prev, newField]);
-    };
-    const removeField = (fieldId) => {
-        setFormFields((prev) => prev.filter((field) => field.id !== fieldId));
-    };
-    const updateField = (fieldId, updates) => {
-        setFormFields((prev) => updateFieldById(prev, fieldId, updates));
-    };
-    const addPropertyToObjectById = (fields, objectId, type = 'text') => {
+        updateFormFields([...formFields, newField]);
+    }, [createField, formFields, updateFormFields]);
+    const removeField = React.useCallback((fieldId) => {
+        updateFormFields(formFields.filter((field) => field.id !== fieldId));
+    }, [formFields, updateFormFields]);
+    const updateField = React.useCallback((fieldId, updates) => {
+        updateFormFields(updateFieldById(formFields, fieldId, updates));
+    }, [formFields, updateFieldById, updateFormFields]);
+    const addPropertyToObjectById = React.useCallback((fields, objectId, type = 'text') => {
         return fields.map((field) => {
             if (field.id === objectId && field.type === 'object') {
                 const objectField = field;
@@ -256,11 +260,11 @@ const useFormFields = () => {
             }
             return field;
         });
-    };
-    const addObjectProperty = (objectId, type = 'text') => {
-        setFormFields((prev) => addPropertyToObjectById(prev, objectId, type));
-    };
-    const addOptionProperty = (fieldId, optionIndex, type = 'text') => {
+    }, [createField]);
+    const addObjectProperty = React.useCallback((objectId, type = 'text') => {
+        updateFormFields(addPropertyToObjectById(formFields, objectId, type));
+    }, [formFields, addPropertyToObjectById, updateFormFields]);
+    const addOptionProperty = React.useCallback((fieldId, optionIndex, type = 'text') => {
         const addPropertyToOptionRecursive = (fields, targetFieldId, targetOptionIndex) => {
             return fields.map((field) => {
                 if (field.id === targetFieldId &&
@@ -309,20 +313,18 @@ const useFormFields = () => {
             });
         };
         setFormFields((prev) => addPropertyToOptionRecursive(prev, fieldId, optionIndex));
-    };
-    const removeObjectProperty = (fieldId, propertyIndex) => {
-        setFormFields((prev) => {
-            return prev.map((field) => {
-                if (field.id !== fieldId)
-                    return field;
-                const updatedField = JSON.parse(JSON.stringify(field));
-                const objectInput = updatedField;
-                objectInput.properties.splice(propertyIndex, 1);
-                return updatedField;
-            });
-        });
-    };
-    const removeOptionProperty = (fieldId, optionIndex, propertyIndex) => {
+    }, [createField]);
+    const removeObjectProperty = React.useCallback((fieldId, propertyIndex) => {
+        updateFormFields(formFields.map((field) => {
+            if (field.id !== fieldId)
+                return field;
+            const updatedField = JSON.parse(JSON.stringify(field));
+            const objectInput = updatedField;
+            objectInput.properties.splice(propertyIndex, 1);
+            return updatedField;
+        }));
+    }, [formFields, updateFormFields]);
+    const removeOptionProperty = React.useCallback((fieldId, optionIndex, propertyIndex) => {
         const removePropertyFromOptionRecursive = (fields, targetFieldId, targetOptionIndex, targetPropertyIndex) => {
             return fields.map((field) => {
                 if (field.id === targetFieldId &&
@@ -371,23 +373,21 @@ const useFormFields = () => {
             });
         };
         setFormFields((prev) => removePropertyFromOptionRecursive(prev, fieldId, optionIndex, propertyIndex));
-    };
-    const updateObjectProperty = (fieldId, propertyIndex, updates) => {
-        setFormFields((prev) => {
-            return prev.map((field) => {
-                if (field.id !== fieldId)
-                    return field;
-                const updatedField = JSON.parse(JSON.stringify(field));
-                const objectInput = updatedField;
-                objectInput.properties[propertyIndex] = {
-                    ...objectInput.properties[propertyIndex],
-                    ...updates,
-                };
-                return updatedField;
-            });
-        });
-    };
-    const updateOptionProperty = (fieldId, optionIndex, propertyIndex, updates) => {
+    }, []);
+    const updateObjectProperty = React.useCallback((fieldId, propertyIndex, updates) => {
+        updateFormFields(formFields.map((field) => {
+            if (field.id !== fieldId)
+                return field;
+            const updatedField = JSON.parse(JSON.stringify(field));
+            const objectInput = updatedField;
+            objectInput.properties[propertyIndex] = {
+                ...objectInput.properties[propertyIndex],
+                ...updates,
+            };
+            return updatedField;
+        }));
+    }, [formFields, updateFormFields]);
+    const updateOptionProperty = React.useCallback((fieldId, optionIndex, propertyIndex, updates) => {
         const updatePropertyInOptionRecursive = (fields, targetFieldId, targetOptionIndex, targetPropertyIndex, propertyUpdates) => {
             return fields.map((field) => {
                 if (field.id === targetFieldId &&
@@ -439,8 +439,8 @@ const useFormFields = () => {
             });
         };
         setFormFields((prev) => updatePropertyInOptionRecursive(prev, fieldId, optionIndex, propertyIndex, updates));
-    };
-    const addOption = (fieldId) => {
+    }, []);
+    const addOption = React.useCallback((fieldId) => {
         const addOptionRecursive = (fields, targetFieldId) => {
             return fields.map((field) => {
                 if (field.id === targetFieldId &&
@@ -496,8 +496,8 @@ const useFormFields = () => {
             });
         };
         setFormFields((prev) => addOptionRecursive(prev, fieldId));
-    };
-    const removeOption = (fieldId, optionIndex) => {
+    }, [generateId]);
+    const removeOption = React.useCallback((fieldId, optionIndex) => {
         const removeOptionRecursive = (fields, targetFieldId, targetOptionIndex) => {
             return fields.map((field) => {
                 if (field.id === targetFieldId &&
@@ -544,11 +544,11 @@ const useFormFields = () => {
                 return field;
             });
         };
-        setFormFields((prev) => removeOptionRecursive(prev, fieldId, optionIndex));
-    };
-    const resetForm = () => {
-        setFormFields([]);
-    };
+        updateFormFields(removeOptionRecursive(formFields, fieldId, optionIndex));
+    }, [formFields, updateFormFields]);
+    const resetForm = React.useCallback(() => {
+        updateFormFields([]);
+    }, [updateFormFields]);
     return {
         formFields,
         createField,