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

package/build/esm/form-generator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["form-generator/types.ts"],"names":[],"mappings":"","sourcesContent":["import {IconProps} from '@gravity-ui/uikit';\n\nimport {PageContent} from '../models';\n\nexport type DynamicFormValue = string | number | [] | object | boolean | PageContent | undefined;\n\nexport interface BlockConfig {\n    name: string;\n    inputs?: Array<ConfigInput>;\n    group?: string;\n    hidden?: boolean;\n    default?: object;\n    previewImg?: string;\n    previewIcon?: IconProps;\n}\n\nexport interface TextInput {\n    type: 'text';\n    name: string;\n    title: string;\n}\n\nexport interface BooleanInput {\n    type: 'boolean';\n    name: string;\n    title: string;\n}\n\nexport interface NumberInput {\n    type: 'number';\n    name: string;\n    title: string;\n}\n\nexport interface TextAreaInput {\n    type: 'textarea';\n    name: string;\n    title: string;\n}\n\nexport interface SelectBaseInput {\n    type: 'select';\n    name: string;\n    title: string;\n    view: 'select' | 'radiobutton';\n    mode: 'single' | 'multiple';\n    enum: Array<{content: string; value: string}>;\n}\n\nexport interface SelectSingleInput extends SelectBaseInput {\n    type: 'select';\n    name: string;\n    title: string;\n    view: 'select' | 'radiobutton';\n    mode: 'single';\n    enum: Array<{content: string; value: string}>;\n}\n\nexport interface SelectMultipleInput extends SelectBaseInput {\n    type: 'select';\n    name: string;\n    title: string;\n    view: 'select';\n    mode: 'multiple';\n    enum: Array<{content: string; value: string}>;\n}\n\nexport interface ObjectInput {\n    type: 'object';\n    name: string;\n    title: string;\n    properties: Array<ConfigInput>;\n}\n\nexport interface ArrayBaseInput {\n    type: 'array';\n    arrayType: 'object' | 'text';\n    name: string;\n    title: string;\n    buttonText: string;\n}\n\nexport interface ArrayTextInput extends ArrayBaseInput {\n    arrayType: 'text';\n}\n\nexport interface ArrayObjectInput extends ArrayBaseInput {\n    arrayType: 'object';\n    properties: Array<ConfigInput>;\n}\n\nexport interface OneOfInput {\n    type: 'oneOf';\n    name: string;\n    key?: string;\n    title: string;\n    options: {\n        value: string;\n        title: string;\n        properties: Array<ConfigInput>;\n    }[];\n}\n\nexport interface AnyOfInput {\n    type: 'anyOf';\n    name: string;\n    key?: string;\n    title: string;\n    options: {\n        value: string;\n        title: string;\n        properties: Array<ConfigInput>;\n    }[];\n}\n\nexport interface GeneralProps {\n    showIf?: string;\n}\n\nexport type ConfigInput = (\n    | TextInput\n    | BooleanInput\n    | NumberInput\n    | TextAreaInput\n    | SelectSingleInput\n    | SelectMultipleInput\n    | ObjectInput\n    | ArrayTextInput\n    | ArrayObjectInput\n    | OneOfInput\n    | AnyOfInput\n) &\n    GeneralProps;\n"]}

package/build/esm/form-generator/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const FORM_GENERATOR_NAMESPACE = "pcformgenerator-";
+export declare const formGeneratorCn: import("@bem-react/classname").ClassNameInitilizer;

package/build/esm/form-generator/utils/cn.js

@@ -0,0 +1,4 @@
+import { withNaming } from '@bem-react/classname';
+export const FORM_GENERATOR_NAMESPACE = 'pcformgenerator-';
+export const formGeneratorCn = withNaming({ n: FORM_GENERATOR_NAMESPACE, e: '__', m: '_' });
+//# sourceMappingURL=cn.js.map

package/build/esm/form-generator/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sourceRoot":"../../../../src","sources":["form-generator/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAEhD,MAAM,CAAC,MAAM,wBAAwB,GAAG,kBAAkB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC,EAAC,CAAC,EAAE,wBAAwB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,CAAC,CAAC","sourcesContent":["import {withNaming} from '@bem-react/classname';\n\nexport const FORM_GENERATOR_NAMESPACE = 'pcformgenerator-';\n\nexport const formGeneratorCn = withNaming({n: FORM_GENERATOR_NAMESPACE, e: '__', m: '_'});\n"]}

package/build/esm/form-generator/utils/common.d.ts

@@ -0,0 +1,3 @@
+import { DynamicFormValue } from "../types.js";
+export declare const getFullPath: (path: string, name: string) => string;
+export declare const getContent: (contentConfig: DynamicFormValue, path: string) => any;

package/build/esm/form-generator/utils/common.js

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+export const getFullPath = (path, name) => {
+    if (!path && !name) {
+        return '';
+    }
+    if (!path) {
+        return name;
+    }
+    if (!name) {
+        return path;
+    }
+    return path + '.' + name;
+};
+export const getContent = (contentConfig, path) => {
+    return path ? _.get(contentConfig, path) : contentConfig;
+};
+//# sourceMappingURL=common.js.map

package/build/esm/form-generator/utils/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"../../../../src","sources":["form-generator/utils/common.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,QAAQ,CAAC;AAIvB,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,EAAE;IACtD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACd,CAAC;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,aAA+B,EAAE,IAAY,EAAE,EAAE;IACxE,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import _ from 'lodash';\n\nimport {DynamicFormValue} from '../types';\n\nexport const getFullPath = (path: string, name: string) => {\n    if (!path && !name) {\n        return '';\n    }\n\n    if (!path) {\n        return name;\n    }\n\n    if (!name) {\n        return path;\n    }\n\n    return path + '.' + name;\n};\n\nexport const getContent = (contentConfig: DynamicFormValue, path: string) => {\n    return path ? _.get(contentConfig, path) : contentConfig;\n};\n"]}

package/build/esm/form-generator-v2/FormGenerator.css

@@ -0,0 +1,10 @@
+.pc-fg-generator {
+  position: relative;
+  padding: 0 12px;
+}
+.pc-fg-generator > .pc-fg-fields > .pc-fg-base-input:first-child {
+  padding-top: 8px;
+}
+.pc-fg-generator > .pc-fg-fields > .pc-fg-text:first-child {
+  padding-top: 8px;
+}

package/build/esm/form-generator-v2/FormGenerator.d.ts

@@ -0,0 +1,11 @@
+import { ClassNameProps } from "../models/common.js";
+import { Content, Fields as FieldsType } from "./types.js";
+import './FormGenerator.css';
+type FormGeneratorProps = ClassNameProps & {
+    blockConfig: FieldsType;
+    contentConfig: Content;
+    onUpdate?: (content: Content) => void;
+    onUpdateByKey?: (key: string, value: unknown) => void;
+};
+declare const FormGenerator: ({ blockConfig, contentConfig, onUpdate, onUpdateByKey, className, }: FormGeneratorProps) => import("react/jsx-runtime").JSX.Element;
+export default FormGenerator;

package/build/esm/form-generator-v2/FormGenerator.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cloneDeep, set, unset } from 'lodash';
+import Fields from "./components/Fields/Fields.js";
+import { formGeneratorCn } from "./utils/cn.js";
+import { getValueByPath } from "./utils/fields.js";
+import './FormGenerator.css';
+const b = formGeneratorCn('generator');
+const FormGenerator = ({ blockConfig, contentConfig, onUpdate, onUpdateByKey, className, }) => {
+    const contentRef = React.useRef(contentConfig);
+    // Sync during render (not in useEffect) so that onDataUpdate calls within the same
+    // effects batch all build on top of each other. If we synced in useEffect, it would
+    // run *after* child effects, resetting any accumulated changes made by onDataUpdate.
+    contentRef.current = contentConfig;
+    const onDataUpdate = React.useCallback((key, value, options) => {
+        if (!onUpdate && !onUpdateByKey) {
+            return;
+        }
+        const newContentConfig = cloneDeep(contentRef.current ?? {});
+        const removeAt = options?.removeArrayItemAt;
+        if (typeof removeAt === 'number') {
+            const arr = getValueByPath(newContentConfig, key);
+            if (Array.isArray(arr) && removeAt >= 0 && removeAt < arr.length) {
+                arr.splice(removeAt, 1);
+            }
+        }
+        else if (options?.unset) {
+            unset(newContentConfig, key);
+        }
+        else {
+            set(newContentConfig, key, value);
+        }
+        contentRef.current = newContentConfig;
+        if (onUpdateByKey) {
+            onUpdateByKey(key, value);
+        }
+        if (onUpdate) {
+            onUpdate(newContentConfig);
+        }
+    }, [onUpdate, onUpdateByKey]);
+    return (_jsx("div", { className: b(null, className), children: _jsx(Fields, { fields: blockConfig, content: contentConfig, onUpdate: onDataUpdate }) }));
+};
+export default FormGenerator;
+//# sourceMappingURL=FormGenerator.js.map

package/build/esm/form-generator-v2/FormGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGenerator.js","sourceRoot":"../../../src","sources":["form-generator-v2/FormGenerator.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAE,GAAG,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAC;AAK7C,OAAO,MAAM,sCAAmC;AAEhD,OAAO,EAAC,eAAe,EAAC,sBAAmB;AAC3C,OAAO,EAAC,cAAc,EAAC,0BAAuB;AAE9C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;AASvC,MAAM,aAAa,GAAG,CAAC,EACnB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,SAAS,GACQ,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/C,mFAAmF;IACnF,oFAAoF;IACpF,qFAAqF;IACrF,UAAU,CAAC,OAAO,GAAG,aAAa,CAAC;IAEnC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAClC,CACI,GAAW,EACX,KAAuB,EACvB,OAAuD,EACzD,EAAE;QACA,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,OAAO;QACX,CAAC;QAED,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;QAE7D,MAAM,QAAQ,GAAG,OAAO,EAAE,iBAAiB,CAAC;QAC5C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,MAAM,GAAG,GAAG,cAAc,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;YAClD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,QAAQ,IAAI,CAAC,IAAI,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC;gBAC/D,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YAC5B,CAAC;QACL,CAAC;aAAM,IAAI,OAAO,EAAE,KAAK,EAAE,CAAC;YACxB,KAAK,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACJ,GAAG,CAAC,gBAAgB,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QACtC,CAAC;QAED,UAAU,CAAC,OAAO,GAAG,gBAAgB,CAAC;QAEtC,IAAI,aAAa,EAAE,CAAC;YAChB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,aAAa,CAAC,CAC5B,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC9B,KAAC,MAAM,IACH,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,YAAwB,GACpC,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {cloneDeep, set, unset} from 'lodash';\n\nimport {DynamicFormValue} from '../form-generator/types';\nimport {ClassNameProps} from '../models/common';\n\nimport Fields from './components/Fields/Fields';\nimport {Content, Fields as FieldsType, OnUpdate} from './types';\nimport {formGeneratorCn} from './utils/cn';\nimport {getValueByPath} from './utils/fields';\n\nimport './FormGenerator.scss';\n\nconst b = formGeneratorCn('generator');\n\ntype FormGeneratorProps = ClassNameProps & {\n    blockConfig: FieldsType;\n    contentConfig: Content;\n    onUpdate?: (content: Content) => void;\n    onUpdateByKey?: (key: string, value: unknown) => void;\n};\n\nconst FormGenerator = ({\n    blockConfig,\n    contentConfig,\n    onUpdate,\n    onUpdateByKey,\n    className,\n}: FormGeneratorProps) => {\n    const contentRef = React.useRef(contentConfig);\n    // Sync during render (not in useEffect) so that onDataUpdate calls within the same\n    // effects batch all build on top of each other. If we synced in useEffect, it would\n    // run *after* child effects, resetting any accumulated changes made by onDataUpdate.\n    contentRef.current = contentConfig;\n\n    const onDataUpdate = React.useCallback(\n        (\n            key: string,\n            value: DynamicFormValue,\n            options?: {removeArrayItemAt?: number; unset?: boolean},\n        ) => {\n            if (!onUpdate && !onUpdateByKey) {\n                return;\n            }\n\n            const newContentConfig = cloneDeep(contentRef.current ?? {});\n\n            const removeAt = options?.removeArrayItemAt;\n            if (typeof removeAt === 'number') {\n                const arr = getValueByPath(newContentConfig, key);\n                if (Array.isArray(arr) && removeAt >= 0 && removeAt < arr.length) {\n                    arr.splice(removeAt, 1);\n                }\n            } else if (options?.unset) {\n                unset(newContentConfig, key);\n            } else {\n                set(newContentConfig, key, value);\n            }\n\n            contentRef.current = newContentConfig;\n\n            if (onUpdateByKey) {\n                onUpdateByKey(key, value);\n            }\n\n            if (onUpdate) {\n                onUpdate(newContentConfig);\n            }\n        },\n        [onUpdate, onUpdateByKey],\n    );\n\n    return (\n        <div className={b(null, className)}>\n            <Fields\n                fields={blockConfig}\n                content={contentConfig}\n                onUpdate={onDataUpdate as OnUpdate}\n            />\n        </div>\n    );\n};\n\nexport default FormGenerator;\n"]}

package/build/esm/form-generator-v2/components/Base/Base.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Content, OnUpdate, When } from "../../types.js";
+import './Base.css';
+type BaseProps = {
+    when?: When;
+    content: Content;
+    name?: string;
+    onUpdate?: OnUpdate;
+    defaultValue?: unknown;
+    children: React.ReactNode;
+};
+declare const Base: ({ when, content, children, name, onUpdate, defaultValue }: BaseProps) => React.ReactNode;
+export default Base;

package/build/esm/form-generator-v2/components/Base/Base.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { getValueByPath } from "../../utils/fields.js";
+import './Base.css';
+const Base = ({ when, content, children, name, onUpdate, defaultValue }) => {
+    const verifiedConditions = React.useMemo(() => {
+        if (!when) {
+            return true;
+        }
+        let result = null;
+        let currentOperator = null;
+        for (let i = 0; i < when.length; i++) {
+            const condition = when[i];
+            if (condition.operator && !condition.field) {
+                currentOperator = condition.operator;
+                continue;
+            }
+            let currentResult = false;
+            if (condition.field) {
+                const fieldValue = getValueByPath(content, condition.field);
+                const value = condition.value;
+                switch (condition.operator) {
+                    case '===':
+                        currentResult = fieldValue === value;
+                        break;
+                    case '!==':
+                        currentResult = fieldValue !== value;
+                        break;
+                }
+            }
+            if (result === null) {
+                result = currentResult;
+            }
+            else if (currentOperator === '||') {
+                result = result || currentResult;
+            }
+            else if (currentOperator === '&&') {
+                result = result && currentResult;
+            }
+            currentOperator = null;
+        }
+        return Boolean(result);
+    }, [content, when]);
+    const isShow = React.useMemo(() => Boolean(!when || !content || verifiedConditions), [content, verifiedConditions, when]);
+    const wasVisibleRef = React.useRef(false);
+    React.useEffect(() => {
+        const wasVisible = wasVisibleRef.current;
+        wasVisibleRef.current = isShow;
+        if (wasVisible &&
+            !isShow &&
+            onUpdate &&
+            name &&
+            getValueByPath(content, name) !== undefined) {
+            onUpdate(name, undefined, { unset: true });
+        }
+        else if (!wasVisible &&
+            isShow &&
+            onUpdate &&
+            name &&
+            defaultValue !== undefined &&
+            getValueByPath(content, name) === undefined) {
+            onUpdate(name, defaultValue);
+        }
+    }, [content, isShow, name, onUpdate, defaultValue]);
+    return isShow ? children : null;
+};
+export default Base;
+//# sourceMappingURL=Base.js.map

package/build/esm/form-generator-v2/components/Base/Base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Base.js","sourceRoot":"../../../../../src","sources":["form-generator-v2/components/Base/Base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Content, OnUpdate, When} from '../../types';\nimport {getValueByPath} from '../../utils/fields';\n\nimport './Base.scss';\n\ntype BaseProps = {\n    when?: When;\n    content: Content;\n    name?: string;\n    onUpdate?: OnUpdate;\n    defaultValue?: unknown;\n    children: React.ReactNode;\n};\n\nconst Base = ({when, content, children, name, onUpdate, defaultValue}: BaseProps) => {\n    const verifiedConditions = React.useMemo(() => {\n        if (!when) {\n            return true;\n        }\n\n        let result = null;\n        let currentOperator = null;\n\n        for (let i = 0; i < when.length; i++) {\n            const condition = when[i];\n\n            if (condition.operator && !condition.field) {\n                currentOperator = condition.operator;\n                continue;\n            }\n\n            let currentResult = false;\n            if (condition.field) {\n                const fieldValue = getValueByPath(content, condition.field);\n                const value = condition.value;\n\n                switch (condition.operator) {\n                    case '===':\n                        currentResult = fieldValue === value;\n                        break;\n                    case '!==':\n                        currentResult = fieldValue !== value;\n                        break;\n                }\n            }\n\n            if (result === null) {\n                result = currentResult;\n            } else if (currentOperator === '||') {\n                result = result || currentResult;\n            } else if (currentOperator === '&&') {\n                result = result && currentResult;\n            }\n\n            currentOperator = null;\n        }\n\n        return Boolean(result);\n    }, [content, when]);\n\n    const isShow = React.useMemo(\n        () => Boolean(!when || !content || verifiedConditions),\n        [content, verifiedConditions, when],\n    );\n\n    const wasVisibleRef = React.useRef(false);\n\n    React.useEffect(() => {\n        const wasVisible = wasVisibleRef.current;\n        wasVisibleRef.current = isShow;\n\n        if (\n            wasVisible &&\n            !isShow &&\n            onUpdate &&\n            name &&\n            getValueByPath(content, name) !== undefined\n        ) {\n            onUpdate(name, undefined, {unset: true});\n        } else if (\n            !wasVisible &&\n            isShow &&\n            onUpdate &&\n            name &&\n            defaultValue !== undefined &&\n            getValueByPath(content, name) === undefined\n        ) {\n            onUpdate(name, defaultValue);\n        }\n    }, [content, isShow, name, onUpdate, defaultValue]);\n\n    return isShow ? children : null;\n};\n\nexport default Base;\n"]}

package/build/esm/form-generator-v2/components/BaseInput/BaseInput.css

@@ -0,0 +1,32 @@
+.pc-fg-base-input {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+.pc-fg-base-input:not(:first-child) {
+  margin-top: 8px;
+}
+.pc-fg-base-input:last-child {
+  margin-bottom: 0px;
+}
+.pc-fg-base-input__title {
+  padding: 5px 0;
+  min-width: 64px;
+  max-width: 128px;
+  width: 100%;
+  line-break: anywhere;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pc-fg-base-input__title::first-letter {
+  text-transform: uppercase;
+}
+.pc-fg-base-input__input {
+  margin-left: 8px;
+  flex-grow: 1;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}

package/build/esm/form-generator-v2/components/BaseInput/BaseInput.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ClassNameProps } from "../../../models/common.js";
+import './BaseInput.css';
+type BaseInputProps = ClassNameProps & {
+    title: string;
+    children: React.ReactNode;
+};
+declare const BaseInput: ({ children, title, className }: BaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export default BaseInput;

package/build/esm/form-generator-v2/components/BaseInput/BaseInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { formGeneratorCn } from "../../utils/cn.js";
+import './BaseInput.css';
+const b = formGeneratorCn('base-input');
+const BaseInput = ({ children, title, className }) => {
+    return (_jsxs("div", { className: b(null, className), children: [_jsx(Text, { variant: "body-1", className: b('title'), children: title }), _jsx("div", { className: b('input'), children: children })] }));
+};
+export default BaseInput;
+//# sourceMappingURL=BaseInput.js.map

package/build/esm/form-generator-v2/components/BaseInput/BaseInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.js","sourceRoot":"../../../../../src","sources":["form-generator-v2/components/BaseInput/BaseInput.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAE/C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAOxC,MAAM,SAAS,GAAG,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAiB,EAAE,EAAE;IAC/D,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,KAAC,IAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACvC,KAAK,GACH,EACP,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,QAAQ,GAAO,IAC1C,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Text} from '@gravity-ui/uikit';\n\nimport {ClassNameProps} from '../../../models/common';\nimport {formGeneratorCn} from '../../utils/cn';\n\nimport './BaseInput.scss';\n\nconst b = formGeneratorCn('base-input');\n\ntype BaseInputProps = ClassNameProps & {\n    title: string;\n    children: React.ReactNode;\n};\n\nconst BaseInput = ({children, title, className}: BaseInputProps) => {\n    return (\n        <div className={b(null, className)}>\n            <Text variant=\"body-1\" className={b('title')}>\n                {title}\n            </Text>\n            <div className={b('input')}>{children}</div>\n        </div>\n    );\n};\n\nexport default BaseInput;\n"]}

package/build/esm/form-generator-v2/components/ColorInput/ColorInput.d.ts

@@ -0,0 +1,5 @@
+import { ClassNameProps } from "../../../models/common.js";
+import { ColorField, CommonProps } from "../../types.js";
+type ColorInputProps = ClassNameProps & CommonProps & ColorField;
+declare const ColorInput: ({ title, name, when, content, onUpdate, className, defaultValue, }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorInput;

package/build/esm/form-generator-v2/components/ColorInput/ColorInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { unstable_ColorPicker as ColorPicker } from '@gravity-ui/uikit/unstable';
+import { getValueByPath } from "../../utils/fields.js";
+import Base from "../Base/Base.js";
+import BaseInput from "../BaseInput/BaseInput.js";
+const COLOR_PICKER_DEFAULT = '#000000';
+const ColorInput = ({ title, name, when, content, onUpdate, className, defaultValue, }) => {
+    const resolvedDefault = defaultValue ?? COLOR_PICKER_DEFAULT;
+    const value = getValueByPath(content, name) || resolvedDefault;
+    return (_jsx(Base, { when: when, content: content, name: name, onUpdate: onUpdate, defaultValue: resolvedDefault, children: _jsx(BaseInput, { title: title, className: className, children: _jsx(ColorPicker, { onUpdate: (v) => onUpdate(name, v), value: value, size: 'xs' }) }) }));
+};
+export default ColorInput;
+//# sourceMappingURL=ColorInput.js.map

package/build/esm/form-generator-v2/components/ColorInput/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sourceRoot":"../../../../../src","sources":["form-generator-v2/components/ColorInput/ColorInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,oBAAoB,IAAI,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAI/E,OAAO,EAAC,cAAc,EAAC,8BAA2B;AAClD,OAAO,IAAI,wBAAqB;AAChC,OAAO,SAAS,kCAA+B;AAI/C,MAAM,oBAAoB,GAAG,SAAS,CAAC;AAEvC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,GACE,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,YAAY,IAAI,oBAAoB,CAAC;IAC7D,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,eAAe,CAAC;IAE/D,OAAO,CACH,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,eAAe,YAE7B,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YAEzC,KAAC,WAAW,IACR,QAAQ,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,EAC1C,KAAK,EAAE,KAAe,EACtB,IAAI,EAAE,IAAa,GACrB,GACM,GACT,CACV,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {unstable_ColorPicker as ColorPicker} from '@gravity-ui/uikit/unstable';\n\nimport {ClassNameProps} from '../../../models/common';\nimport {ColorField, CommonProps} from '../../types';\nimport {getValueByPath} from '../../utils/fields';\nimport Base from '../Base/Base';\nimport BaseInput from '../BaseInput/BaseInput';\n\ntype ColorInputProps = ClassNameProps & CommonProps & ColorField;\n\nconst COLOR_PICKER_DEFAULT = '#000000';\n\nconst ColorInput = ({\n    title,\n    name,\n    when,\n    content,\n    onUpdate,\n    className,\n    defaultValue,\n}: ColorInputProps) => {\n    const resolvedDefault = defaultValue ?? COLOR_PICKER_DEFAULT;\n    const value = getValueByPath(content, name) || resolvedDefault;\n\n    return (\n        <Base\n            when={when}\n            content={content}\n            name={name}\n            onUpdate={onUpdate}\n            defaultValue={resolvedDefault}\n        >\n            <BaseInput title={title} className={className}>\n                {/* unstable API — size prop type mismatch, cast required */}\n                <ColorPicker\n                    onUpdate={(v: string) => onUpdate(name, v)}\n                    value={value as string}\n                    size={'xs' as never}\n                />\n            </BaseInput>\n        </Base>\n    );\n};\n\nexport default ColorInput;\n"]}

package/build/esm/form-generator-v2/components/Fields/Fields.d.ts

@@ -0,0 +1,10 @@
+import { ClassNameProps } from "../../../models/common.js";
+import { Content, Fields as FieldsType, OnUpdate } from "../../types.js";
+import './Fields.css';
+type FieldsProps = ClassNameProps & {
+    fields: FieldsType;
+    content: Content;
+    onUpdate: OnUpdate;
+};
+declare const Fields: ({ fields, content, onUpdate, className }: FieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default Fields;

package/build/esm/form-generator-v2/components/Fields/Fields.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { formGeneratorCn } from "../../utils/cn.js";
+import { componentMap } from "../constants.js";
+import './Fields.css';
+const b = formGeneratorCn('fields');
+const Fields = ({ fields, content, onUpdate, className }) => (_jsx("div", { className: b(null, className), children: fields.map((field, index) => {
+        const Component = componentMap[field.type];
+        if (!Component) {
+            // eslint-disable-next-line
+            console.warn(`NOT FOUND COMPONENT FOR TYPE ${field.type}`);
+            return null;
+        }
+        return (_createElement(Component, { ...field, className: b('field'), key: index, content: content, onUpdate: onUpdate }));
+    }) }));
+export default Fields;
+//# sourceMappingURL=Fields.js.map

package/build/esm/form-generator-v2/components/Fields/Fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.js","sourceRoot":"../../../../../src","sources":["form-generator-v2/components/Fields/Fields.tsx"],"names":[],"mappings":";;AAIA,OAAO,EAAC,eAAe,EAAC,0BAAuB;AAC/C,OAAO,EAAC,YAAY,EAAC,wBAAqB;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAOpC,MAAM,MAAM,GAAG,CAAC,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAc,EAAE,EAAE,CAAC,CACpE,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACzB,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAExC,CAAC;QAEF,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,2BAA2B;YAC3B,OAAO,CAAC,IAAI,CAAC,gCAAgC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;YAC3D,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,OAAO,CACH,eAAC,SAAS,OACF,KAAK,EACT,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC;IACN,CAAC,CAAC,GACA,CACT,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {ClassNameProps} from '../../../models/common';\nimport {Content, Fields as FieldsType, OnUpdate} from '../../types';\nimport {formGeneratorCn} from '../../utils/cn';\nimport {componentMap} from '../constants';\n\nimport './Fields.scss';\n\nconst b = formGeneratorCn('fields');\n\ntype FieldsProps = ClassNameProps & {\n    fields: FieldsType;\n    content: Content;\n    onUpdate: OnUpdate;\n};\nconst Fields = ({fields, content, onUpdate, className}: FieldsProps) => (\n    <div className={b(null, className)}>\n        {fields.map((field, index) => {\n            const Component = componentMap[field.type] as React.ComponentType<\n                Record<string, unknown>\n            >;\n\n            if (!Component) {\n                // eslint-disable-next-line\n                console.warn(`NOT FOUND COMPONENT FOR TYPE ${field.type}`);\n                return null;\n            }\n\n            return (\n                <Component\n                    {...field}\n                    className={b('field')}\n                    key={index}\n                    content={content}\n                    onUpdate={onUpdate}\n                />\n            );\n        })}\n    </div>\n);\n\nexport default Fields;\n"]}

package/build/esm/form-generator-v2/components/Section/Section.css

@@ -0,0 +1,160 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-fg-section {
+  position: relative;
+}
+.pc-fg-section:before {
+  position: absolute;
+  top: 0;
+  left: -24px;
+  width: calc(100% + 24px);
+  height: 1px;
+  background: var(--g-color-line-generic);
+  content: "";
+  display: block;
+  margin-left: 12px;
+}
+.pc-fg-section:after {
+  position: absolute;
+  bottom: 0;
+  left: -24px;
+  width: calc(100% + 24px);
+  height: 1px;
+  background: var(--g-color-line-generic);
+  content: "";
+  display: block;
+  margin-left: 12px;
+}
+.pc-fg-section + .pc-fg-section:before {
+  display: none;
+}
+.pc-fg-section:last-child.pc-fg-section:after {
+  content: none;
+}
+.pc-fg-section_nested {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.pc-fg-section_nested:first-child {
+  margin-top: 0;
+}
+.pc-fg-section_nested:last-child {
+  margin-bottom: 0;
+}
+.pc-fg-section_nested:before, .pc-fg-section_nested:after {
+  display: none;
+}
+.pc-fg-section_nested .pc-fg-section__header {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.pc-fg-section_nested .pc-fg-section__children_opened > .pc-fg-section__children-inner {
+  padding-top: 8px;
+}
+.pc-fg-section__header {
+  display: flex;
+  align-items: center;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.pc-fg-section__title {
+  display: inline-block;
+}
+.pc-fg-section__title::first-letter {
+  text-transform: uppercase;
+}
+.pc-fg-section__header-button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.pc-fg-section__header-button_with-hover > * {
+  transition: color 0.4s;
+}
+.pc-fg-section__header-button_with-hover:hover > * {
+  color: var(--g-color-text-primary);
+}
+.pc-fg-section__arrow {
+  margin-right: 4px;
+  color: var(--g-color-text-hint);
+}
+.pc-fg-section__plus {
+  width: 28px;
+  height: 28px;
+  padding: 6px;
+  color: var(--g-color-text-hint);
+  margin-left: auto;
+  box-sizing: border-box;
+}
+.pc-fg-section__children {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  margin-bottom: 0;
+  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.pc-fg-section__children_opened {
+  grid-template-rows: 1fr;
+  padding-bottom: 16px;
+}
+.pc-fg-section__children_opened .pc-fg-section__children_opened {
+  padding-bottom: 0;
+}
+.pc-fg-section__children-inner {
+  min-height: 0;
+  overflow: hidden;
+  transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.pc-fg-section__card {
+  padding: 12px;
+}
+.pc-fg-section__card:not(.pc-fg-section__card:nth-last-child(1)) {
+  margin-bottom: 12px;
+}
+.pc-fg-section__card .pc-fg-section:before {
+  content: none;
+}
+.pc-fg-section__item-clear {
+  margin-top: 12px;
+}
+.pc-fg-section__item-clear:first-child {
+  margin-top: 0;
+}
+.pc-fg-section__item-clear:not(.pc-fg-section__item-clear:nth-last-child(1)) {
+  margin-bottom: 12px;
+}
+.pc-fg-section__item-clear .pc-fg-section:before {
+  content: none;
+}
+.pc-fg-section__card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.pc-fg-section__card-title {
+  display: block;
+  flex-grow: 1;
+}
+.pc-fg-section__card-title::first-letter {
+  text-transform: uppercase;
+}
+.pc-fg-section__dropdown {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.pc-fg-section__dropdown_opened {
+  opacity: 1;
+}
+.pc-fg-section__header:hover > .pc-fg-section__dropdown {
+  opacity: 1;
+}

package/build/esm/form-generator-v2/components/Section/Section.d.ts

@@ -0,0 +1,6 @@
+import { ClassNameProps } from "../../../models/common.js";
+import { CommonProps, SectionField } from "../../types.js";
+import './Section.css';
+type SectionProp = ClassNameProps & CommonProps & SectionField;
+declare const Section: ({ title, opened, fields, when, content, onUpdate, className, index, withAddButton, itemTitle, itemView, }: SectionProp) => import("react/jsx-runtime").JSX.Element;
+export default Section;