@gravity-ui/page-constructor 3.5.0-alpha.0 → 3.6.0

package/build/cjs/editor/data/templates/questions-block.json

@@ -0,0 +1,105 @@
+{
+  "template": {
+    "type": "questions-block",
+    "title": "Lorem ipsum",
+    "text": "<p>Dolor sit amet, consectetur adipiscing elit <a href=\"https://example.com\">sed do eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
+    "additionalInfo": "<p>Dolor sit amet <a href=\"https://example.com\">consectetur adipiscing</a>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ",
+    "links": [
+      {
+        "url": "/security",
+        "text": "Learn more",
+        "theme": "normal",
+        "arrow": true
+      }
+    ],
+    "buttons": [
+      {
+        "text": "Button\r",
+        "theme": "action",
+        "url": "https://example.com"
+      }
+    ],
+    "items": [
+      {
+        "title": "Lorem ipsum dolor sit amet 0",
+        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 1",
+        "text": "<p>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Lorem ipsum dolor sit amet 2",
+        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 3",
+        "text": "<p>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Lorem ipsum dolor sit amet 4",
+        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 5",
+        "text": "<p>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Lorem ipsum dolor sit amet 6",
+        "text": "<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      },
+      {
+        "title": "Ut enim ad minim veniam, quis nostrud exercitation ullamco? 7",
+        "text": "<p>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ",
+        "link": {
+          "url": "#",
+          "text": "Documentation",
+          "theme": "normal",
+          "arrow": true
+        }
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/security-block.json

@@ -0,0 +1,36 @@
+{
+  "template": {
+    "type": "security-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "media": {
+      "youtube": "0Qd3T6skprA"
+    },
+    "theme": "dark",
+    "points": [
+      {
+        "img": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "link": {
+          "text": "Learn more",
+          "url": "https://example.com"
+        }
+      },
+      {
+        "img": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "link": {
+          "text": "Learn more",
+          "url": "https://example.com"
+        }
+      },
+      {
+        "img": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "link": {
+          "text": "Certificates and standards",
+          "url": "https://example.com"
+        }
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/share-block.json

@@ -0,0 +1,6 @@
+{
+  "template": {
+    "type": "share-block",
+    "items": ["facebook", "vk", "telegram", "twitter", "linkedin"]
+  }
+}

package/build/cjs/editor/data/templates/simple-block.json

@@ -0,0 +1,7 @@
+{
+  "template": {
+    "type": "simple-block",
+    "title": "Simple Block",
+    "description": "A simple block with a title and description."
+  }
+}

package/build/cjs/editor/data/templates/slider-block.json

@@ -0,0 +1,46 @@
+{
+  "template": {
+    "type": "slider-block",
+    "title": {
+      "text": "Slider",
+      "url": "https://example.com"
+    },
+    "children": [
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_4_light.svg"
+      },
+      {
+        "type": "basic-card",
+        "url": "https://example.com",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
+      }
+    ]
+  }
+}

package/build/cjs/editor/data/templates/table-block.json

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "table-block",
+    "title": "Lorem ipsum dolor sit amet",
+    "table": {
+      "content": [
+        ["Lorem", "ipsum 1", "dolor 2", "sit 3"],
+        ["Lorem 1", "0", "0", "0"],
+        ["Lorem 2", "0", "0", "1"],
+        ["Lorem 3", "0", "0", "1"],
+        ["Lorem 4", "0", "1", "1"],
+        ["Lorem 5", "1", "1", "1"]
+      ],
+      "legend": ["ipsum 1", "ipsum 2"],
+      "justify": ["start", "center", "center", "center"]
+    }
+  }
+}

package/build/cjs/editor/data/templates/tabs-block.json

@@ -0,0 +1,90 @@
+{
+  "template": {
+    "type": "tabs-block",
+    "title": {
+      "text": "Lorem ipsum"
+    },
+    "items": [
+      {
+        "tabName": "Dolor sit amet",
+        "title": "Lorem ipsum dolor sit amet",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+        "buttons": [
+          {
+            "text": "Button",
+            "theme": "action",
+            "url": "https://example.com"
+          },
+          {
+            "text": "Button",
+            "theme": "outlined",
+            "url": "https://example.com"
+          }
+        ],
+        "image": {
+          "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_white.png",
+          "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"
+        }
+      },
+      {
+        "tabName": "Lorem ipsum",
+        "title": "Lorem ipsum",
+        "media": {
+          "light": {
+            "video": {
+              "src": [
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_light.webm",
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_light.mp4",
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_light.png"
+              ],
+              "loop": {
+                "start": 0
+              }
+            },
+            "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_white.png"
+          },
+          "dark": {
+            "video": {
+              "src": [
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.webm",
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.mp4",
+                "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png"
+              ],
+              "loop": {
+                "start": 0
+              }
+            },
+            "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"
+          }
+        },
+        "caption": "Dolor sit amet",
+        "text": "* Ut enim ad minim veniam\n* Ut enim ad minim veniam",
+        "links": [
+          {
+            "url": "https://example.com",
+            "text": "Link",
+            "theme": "normal",
+            "arrow": true
+          }
+        ]
+      },
+      {
+        "tabName": "Consectetur adipiscing elit",
+        "title": "Consectetur adipiscing elit",
+        "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "media": {
+          "light": {
+            "youtube": "https://youtu.be/0Qd3T6skprA",
+            "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_light.png"
+          },
+          "dark": {
+            "youtube": "https://youtu.be/0Qd3T6skprA",
+            "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png"
+          }
+        },
+        "caption": "Consectetur adipiscing elit",
+        "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      }
+    ]
+  }
+}

package/build/cjs/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css

@@ -0,0 +1,27 @@
+.pc-one-of-custom {
+  display: flex;
+  flex-direction: column;
+}
+.pc-one-of-custom:last-child > .df-group-indent {
+  margin-bottom: 0;
+}
+.pc-one-of-custom .df-group-indent {
+  all: unset;
+}
+.pc-one-of-custom .df-group-indent > .df-use-search {
+  padding-top: 11px;
+  padding-left: 20px;
+  margin-top: 4px;
+  margin-bottom: 20px;
+  margin-left: 5px;
+  border-left: 1px solid var(--yc-color-line-generic-accent);
+}
+.pc-one-of-custom .df-group-indent > .df-use-search:empty {
+  display: none;
+}
+.pc-one-of-custom .df-group-indent > .df-use-search:last-child {
+  margin-bottom: 0;
+}
+.pc-one-of-custom .df-group-indent > .df-use-search > .df-simple-vertical-accordeon_view {
+  margin-top: -10px;
+}

package/build/cjs/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ObjectIndependentInputProps } from '@gravity-ui/dynamic-forms';
+/**
+ * Customization of @gravity-ui/dynamic-forms OneOf component
+ *
+ * Main differences from original component:
+ *
+ * 1. Custom component can detect initial data type by it's json schema passed it __schema property of spec and
+ * shows according input
+ *
+ * 2. Custom component doesn't create additional nested level of data for each OneOf option and doesn't wraps data value, e.g.
+ *
+ * custom component: {propertyName: propertyValue}
+ * original component: {propertyName: {option1: {value: propertyValue}}}
+ *
+ * @param {ObjectIndependentInputProps} props - props of original OneOf component
+ * @returns {React.FC<ObjectIndependentInputProps>}
+ */
+export declare const OneOfCustom: React.FC<ObjectIndependentInputProps>;

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfCustom = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const ajv_1 = tslib_1.__importDefault(require("ajv"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../../utils");
+const useOneOf_1 = require("../../hooks/useOneOf");
+const b = (0, utils_1.block)('one-of-custom');
+const ajv = new ajv_1.default({
+    $data: true,
+    strict: false,
+    strictSchema: false,
+    strictTypes: false,
+    strictRequired: false,
+});
+const getOneOfCustomSpecDefaultType = (spec) => { var _a, _b; return ((_b = (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.order) === null || _b === void 0 ? void 0 : _b[0]) || Object.keys(spec.properties || {})[0]; };
+// dynamic-forms pass {} as default value for required properties of all types
+// this function replaces {} with default value accordingly to selected OneOf option spec type
+const getControllerDefautValue = (value, valueSpecType) => {
+    const isDefaultValue = typeof value === 'object' && lodash_1.default.isEmpty(value);
+    const defaultValue = valueSpecType ? (0, useOneOf_1.getSpecTypeDefaultValue)(valueSpecType) : undefined;
+    return isDefaultValue ? defaultValue : value;
+};
+/**
+ * Customization of @gravity-ui/dynamic-forms OneOf component
+ *
+ * Main differences from original component:
+ *
+ * 1. Custom component can detect initial data type by it's json schema passed it __schema property of spec and
+ * shows according input
+ *
+ * 2. Custom component doesn't create additional nested level of data for each OneOf option and doesn't wraps data value, e.g.
+ *
+ * custom component: {propertyName: propertyValue}
+ * original component: {propertyName: {option1: {value: propertyValue}}}
+ *
+ * @param {ObjectIndependentInputProps} props - props of original OneOf component
+ * @returns {React.FC<ObjectIndependentInputProps>}
+ */
+const OneOfCustom = (props) => {
+    var _a;
+    const { spec, input, name } = props;
+    const { properties } = spec;
+    //getting oneOf option type from initial value
+    const valueType = (0, react_1.useMemo)(() => {
+        var _a;
+        return (properties &&
+            ((_a = Object.keys(properties)) === null || _a === void 0 ? void 0 : _a.find((key) => {
+                const fieldSchema = (properties === null || properties === void 0 ? void 0 : properties[key]).__schema;
+                return fieldSchema && ajv.validate(fieldSchema, (0, dynamic_forms_1.transformArrOut)(input.value));
+            }))) ||
+            getOneOfCustomSpecDefaultType(spec);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const { oneOfValue, specProperties, toggler } = (0, useOneOf_1.useOneOf)({
+        props: Object.assign(Object.assign({}, props), { input: Object.assign(Object.assign({}, input), { value: valueType ? { [valueType]: input.value } : input.value }) }),
+    });
+    const parentOnChange = react_1.default.useCallback((_childName, childValue, childErrors) => {
+        input.onChange(childValue, childErrors);
+    }, [input]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input]);
+    const valueSpecType = ((_a = specProperties[oneOfValue]) === null || _a === void 0 ? void 0 : _a.type) || dynamic_forms_1.SpecTypes.Object;
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", null, toggler),
+        specProperties[oneOfValue] && (react_1.default.createElement(dynamic_forms_1.GroupIndent, null,
+            react_1.default.createElement(dynamic_forms_1.Controller, { value: getControllerDefautValue(input.value, valueSpecType), name: name, spec: specProperties[oneOfValue], parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })))));
+};
+exports.OneOfCustom = OneOfCustom;

package/build/cjs/editor/dynamic-forms-custom/config.d.ts

@@ -0,0 +1,2 @@
+import { DynamicFormConfig } from '@gravity-ui/dynamic-forms';
+export declare const dynamicConfig: DynamicFormConfig;

package/build/cjs/editor/dynamic-forms-custom/config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dynamicConfig = void 0;
+const tslib_1 = require("tslib");
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const OneOfCustom_1 = require("./components/OneOfCustom/OneOfCustom");
+const getDynamicConfig = () => {
+    const dynamicConfig = lodash_1.default.cloneDeep(dynamic_forms_1.dynamicConfig);
+    dynamicConfig.object.inputs['oneof_custom'] = { Component: OneOfCustom_1.OneOfCustom, independent: true };
+    return dynamicConfig;
+};
+exports.dynamicConfig = getDynamicConfig();

package/build/cjs/editor/dynamic-forms-custom/hooks/useOneOf.d.ts

@@ -0,0 +1,12 @@
+import { ObjectIndependentInputProps, Spec, SpecTypes } from '@gravity-ui/dynamic-forms';
+export interface UseOneOfParams {
+    props: ObjectIndependentInputProps;
+    onTogglerChange?: (value: string) => void;
+}
+export declare const getSpecTypeDefaultValue: (type: SpecTypes) => {} | undefined;
+export declare const useOneOf: ({ props, onTogglerChange }: UseOneOfParams) => {
+    oneOfValue: string;
+    specProperties: Record<string, Spec>;
+    toggler: JSX.Element;
+    togglerInput: JSX.Element;
+};

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOneOf = exports.getSpecTypeDefaultValue = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const MAX_TAB_TITLE_LENGTH = 20;
+const getSpecTypeDefaultValue = (type) => {
+    switch (type) {
+        case dynamic_forms_1.SpecTypes.Array:
+            return [];
+        case dynamic_forms_1.SpecTypes.Boolean:
+        case dynamic_forms_1.SpecTypes.Number:
+        case dynamic_forms_1.SpecTypes.String:
+            return undefined;
+        default:
+            return {};
+    }
+};
+exports.getSpecTypeDefaultValue = getSpecTypeDefaultValue;
+const useOneOf = ({ props, onTogglerChange }) => {
+    const { name, input, spec, Layout } = props;
+    const { order, disabled, oneOfParams } = spec.viewSpec;
+    const specProperties = react_1.default.useMemo(() => (lodash_1.default.isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
+    const [oneOfValue, setOneOfValue] = react_1.default.useState(() => {
+        let valueKeys;
+        if (lodash_1.default.isObjectLike(input.value)) {
+            const keys = Object.keys(input.value);
+            if (keys.length) {
+                valueKeys = keys;
+            }
+        }
+        return (valueKeys || order || Object.keys(specProperties))[0];
+    });
+    const onOneOfChange = react_1.default.useCallback(([newValue]) => {
+        var _a;
+        if (newValue !== oneOfValue) {
+            const specType = ((_a = specProperties[newValue]) === null || _a === void 0 ? void 0 : _a.type) || dynamic_forms_1.SpecTypes.Object;
+            input.onChange((0, exports.getSpecTypeDefaultValue)(specType));
+            setOneOfValue(newValue);
+            onTogglerChange === null || onTogglerChange === void 0 ? void 0 : onTogglerChange(newValue);
+        }
+    }, [setOneOfValue, input, oneOfValue, specProperties, onTogglerChange]);
+    const options = react_1.default.useMemo(() => (order || Object.keys(specProperties)).map((value) => {
+        var _a, _b;
+        const title = ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[value]) ||
+            ((_b = specProperties[value]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
+            value ||
+            '';
+        return {
+            value,
+            title,
+            content: title,
+        };
+    }), [spec.description, order, specProperties]);
+    const togglerInput = react_1.default.useMemo(() => {
+        if ((oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler) !== 'radio' &&
+            ((oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler) === 'select' ||
+                options.length > 3 ||
+                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+            return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: disabled, filterable: options.length > 7, qa: name }));
+        }
+        return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: disabled, qa: name }, options.map(({ value, title }) => (react_1.default.createElement(uikit_1.RadioButton.Option, { key: value, value: value }, title)))));
+    }, [options, oneOfValue, onOneOfChange, name, oneOfParams === null || oneOfParams === void 0 ? void 0 : oneOfParams.toggler, disabled]);
+    const toggler = react_1.default.useMemo(() => {
+        if (Layout) {
+            return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);
+        }
+        return togglerInput;
+    }, [Layout, togglerInput, props]);
+    return { oneOfValue, specProperties, toggler, togglerInput };
+};
+exports.useOneOf = useOneOf;

package/build/cjs/editor/dynamic-forms-custom/parser/detect.d.ts

@@ -0,0 +1,9 @@
+import { Schema } from '../../../schema';
+export declare enum ParserType {
+    Object = "object",
+    Array = "array",
+    Children = "children",
+    OneOf = "oneOf",
+    Primitive = "primitive"
+}
+export declare const detectParserType: (data: Schema) => ParserType;

package/build/cjs/editor/dynamic-forms-custom/parser/detect.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectParserType = exports.ParserType = void 0;
+const dynamic_forms_1 = require("@gravity-ui/dynamic-forms");
+var ParserType;
+(function (ParserType) {
+    ParserType["Object"] = "object";
+    ParserType["Array"] = "array";
+    ParserType["Children"] = "children";
+    ParserType["OneOf"] = "oneOf";
+    ParserType["Primitive"] = "primitive";
+})(ParserType = exports.ParserType || (exports.ParserType = {}));
+const isOneOf = (data) => 'oneOf' in data;
+const isObject = (data) => 'properties' in data;
+const isArray = (data) => 'type' in data && data.type === dynamic_forms_1.SpecTypes.Array;
+const isChildren = (data) => 'type' in data &&
+    data.type === dynamic_forms_1.SpecTypes.Array &&
+    'items' in data &&
+    typeof data.items !== 'undefined' &&
+    '$ref' in data.items;
+//detector applying order matters!
+const ParserTypeDetectors = [
+    { type: ParserType.OneOf, detector: isOneOf },
+    { type: ParserType.Children, detector: isChildren },
+    { type: ParserType.Object, detector: isObject },
+    { type: ParserType.Array, detector: isArray },
+];
+const detectParserType = (data) => {
+    for (const { type, detector } of ParserTypeDetectors) {
+        if (detector(data)) {
+            return type;
+        }
+    }
+    return ParserType.Primitive;
+};
+exports.detectParserType = detectParserType;

package/build/cjs/editor/dynamic-forms-custom/parser/index.d.ts

@@ -0,0 +1,28 @@
+import { Schema } from '../../../schema';
+import { FormSpecs } from './types';
+declare class FormSpecParser {
+    private schema;
+    private definitions;
+    /**
+     * Transforms page-constructor json schema into dynamic-forms specs for each block
+     *
+     * @param schema {Schema} - page-constructor json schema
+     * @returns {FormSpecs} - object containig dynamic-forms specs for each constructor block
+     */
+    parse(schema: Schema): FormSpecs;
+    private getChildrenSpec;
+    private getRequiredProperties;
+    private childrenParser;
+    private oneOfParser;
+    private arrayParser;
+    private objectParser;
+    private primitiveParser;
+    private schemaParserMap;
+    private parseSchemaProperty;
+    private getBlocksSpec;
+    private getPageSpec;
+    private getFormSpec;
+    private init;
+}
+declare const _default: FormSpecParser;
+export default _default;