@gravity-ui/page-constructor 5.14.4-alpha.0 → 5.14.4-alpha.2

package/build/cjs/context/messagesContext/messagesProvider.js

@@ -3,68 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PostMessageProvider = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const usePostMessage_1 = require("../../common/hooks/usePostMessage");
 const editorContext_1 = require("../editorContext");
 const messagesContext_1 = require("./messagesContext");
 const store_1 = require("./store");
-const DEBUG_MODE = false;
 const PostMessageProvider = ({ children }) => {
+    var _a;
     const storeRef = (0, react_1.useRef)();
     if (!storeRef.current) {
         storeRef.current = (0, store_1.createMessagesStore)();
     }
     const editorStore = (0, editorContext_1.useEditorStore)();
-    const sendPostMessage = (0, react_1.useCallback)((args) => {
-        window.parent.postMessage(args, '*');
-    }, []);
-    const notifySubscribers = (0, react_1.useCallback)((action, source) => {
-        const meta = { source };
-        const storesWithReducer = [editorStore];
-        const { type, payload } = action;
-        const store = storeRef.current;
-        if (!type) {
-            return;
-        }
-        if (store) {
-            const { subscribers } = store.getState();
-            const foundedSubscribers = subscribers.filter((subscriber) => subscriber.action === type);
-            for (const storeWithReducer of storesWithReducer) {
-                storeWithReducer.reducer(action, meta);
-            }
-            if (foundedSubscribers.length) {
-                for (const subscriber of foundedSubscribers) {
-                    subscriber.handler(payload, meta);
-                }
-            }
-        }
-    }, [editorStore]);
-    (0, react_1.useEffect)(() => {
-        const onMessage = (e) => {
-            const { action, debug } = e.data;
-            if (action && action.type) {
-                if (debug) {
-                    // eslint-disable-next-line no-console
-                    console.log(`🔵 ➡️ Editor ${action.type}`, action.payload);
-                }
-                notifySubscribers(action, 'editor');
-            }
-        };
-        window.addEventListener('message', onMessage);
-        return () => {
-            window.removeEventListener('message', onMessage);
-        };
-    }, [notifySubscribers]);
-    const sendMessage = (0, react_1.useCallback)((action, { debug = DEBUG_MODE, direction = 'both' } = {}) => {
-        if (debug) {
-            // eslint-disable-next-line no-console
-            console.log(`🟢 Website ➡️ ${action.type}`, action.payload);
-        }
-        if (direction === 'both' || direction === 'editor') {
-            sendPostMessage({ action, debug });
-        }
-        if (direction === 'both' || direction === 'pc') {
-            notifySubscribers(action, 'pc');
-        }
-    }, [notifySubscribers, sendPostMessage]);
+    const storesWithReducer = [editorStore];
+    const { sendMessage } = (0, usePostMessage_1.usePostMessage)({
+        subscribers: (_a = storeRef.current) === null || _a === void 0 ? void 0 : _a.getState().subscribers,
+        storesWithReducer,
+    });
     return (react_1.default.createElement(messagesContext_1.PostMessageContext.Provider, { value: {
             state: storeRef.current,
             sendMessage: sendMessage,

package/build/cjs/context/messagesContext/store.d.ts

@@ -1,5 +1,4 @@
-import { Subscriber } from '../../types';
-import { SubscriptionFunc } from './types';
+import { Subscriber, SubscriptionFunc } from '../../common/types';
 export interface MessagesState {
     subscribers: Subscriber[];
 }

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

@@ -0,0 +1,18 @@
+{
+  "template": {
+    "type": "test-editor-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-v2/components/BigOverlay/BigOverlay.css

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-big-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.pc-big-overlay__border {
+  pointer-events: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  background-color: var(--g-color-base-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+}

package/build/cjs/editor-v2/components/BigOverlay/BigOverlay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface BigOverlayProps extends ClassNameProps {
+}
+declare const BigOverlay: React.FC<BigOverlayProps>;
+export default BigOverlay;

package/build/cjs/editor-v2/components/BigOverlay/BigOverlay.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const types_1 = require("../../../common/types");
+const utils_1 = require("../../../utils");
+const iframeContext_1 = require("../../context/iframeContext");
+const messagesContext_1 = require("../../context/messagesContext");
+const b = (0, utils_1.block)('big-overlay');
+const BigOverlay = ({ className }) => {
+    const { zoom } = (0, iframeContext_1.useIframeStore)();
+    const { iframeElement } = (0, react_1.useContext)(iframeContext_1.IframeContext);
+    const [mousePosition, setMousePosition] = (0, react_1.useState)(undefined);
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.OverlayModeOnMove, (payload, meta) => {
+        if (payload && payload.cursor) {
+            const { x, y } = payload.cursor;
+            const iframeRect = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.getClientRects().item(0);
+            if (iframeRect) {
+                const zoomedX = (x * zoom) / 100;
+                const zoomedY = (y * zoom) / 100;
+                const newX = meta.source === 'editor' ? x : zoomedX + iframeRect.x;
+                const newY = meta.source === 'editor' ? y : zoomedY + iframeRect.y;
+                setMousePosition({ x: newX, y: newY });
+            }
+        }
+    }, [iframeElement, zoom]);
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.InsertModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    (0, messagesContext_1.useMessageObserver)(types_1.ActionTypes.ReorderModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    return (react_1.default.createElement("div", { className: b(null, className) }, mousePosition ? (react_1.default.createElement("div", { className: b('border'), style: {
+            top: mousePosition.y,
+            left: mousePosition.x,
+        } },
+        react_1.default.createElement(icons_1.Stop, { height: 20, width: 20 }))) : null));
+};
+exports.default = BigOverlay;

package/build/cjs/editor-v2/components/BlockConfig/BlockConfig.css

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-block-config {
+  padding: 12px;
+}
+.pc-block-config__title {
+  margin-bottom: 16px;
+  margin-top: 8px;
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
+.pc-block-config__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/cjs/editor-v2/components/BlockConfig/BlockConfig.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '../../../models';
+interface BlockConfigProps extends ClassNameProps {
+}
+declare const BlockConfig: React.FC<BlockConfigProps>;
+export default BlockConfig;

package/build/cjs/editor-v2/components/BlockConfig/BlockConfig.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const editorContext_1 = require("../../context/editorContext");
+const utils_2 = require("../../utils");
+const DynamicForm_1 = tslib_1.__importDefault(require("../DynamicForm/DynamicForm"));
+const b = (0, utils_1.block)('block-config');
+const BlockConfig = ({ className }) => {
+    const { selectedBlock } = (0, editorContext_1.useEditorStore)();
+    const { config, blocks, subBlocks, updateField } = (0, contentConfig_1.useContentConfigStore)();
+    const currentBlockPath = (selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        ? (0, utils_2.generateChildrenPathFromArray)(selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        : '[]';
+    const currentConfig = lodash_1.default.get(config.blocks, currentBlockPath || '');
+    const currentSchema = [...blocks, ...subBlocks].find(({ type }) => type === (currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.type));
+    const onUpdate = (key, value) => {
+        updateField('blocks' + currentBlockPath + '.' + key, value);
+    };
+    if (!currentConfig) {
+        return react_1.default.createElement("div", { className: b('empty') }, "Select block for start");
+    }
+    if (!currentSchema) {
+        return react_1.default.createElement("div", { className: b('empty') },
+            "Not supported: ",
+            currentConfig.type);
+    }
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        react_1.default.createElement("div", { className: b('title') }, currentSchema.schema.name),
+        react_1.default.createElement(DynamicForm_1.default, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate })));
+};
+exports.default = BlockConfig;

package/build/cjs/editor-v2/components/BlocksList/BlocksList.css

@@ -0,0 +1,42 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-blocks-list {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pc-blocks-list__card {
+  padding: 8px;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+.pc-blocks-list__card:last-child {
+  margin-bottom: 0;
+}
+.pc-blocks-list__card:active {
+  background-color: var(--g-color-base-generic-hover);
+}
+.pc-blocks-list__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+  margin-bottom: 10px;
+}
+.pc-blocks-list__section {
+  margin-bottom: 20px;
+}
+.pc-blocks-list__section:last-child {
+  margin-bottom: 0;
+}

package/build/cjs/editor-v2/components/BlocksList/BlocksList.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { ItemConfig } from '../../../common/types';
+export interface BlocksListProps {
+    blocks: ItemConfig[];
+}
+declare const BlocksList: (_p: PropsWithChildren<BlocksListProps>) => JSX.Element;
+export default BlocksList;

package/build/cjs/editor-v2/components/BlocksList/BlocksList.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const types_1 = require("../../../common/types");
+const utils_1 = require("../../../utils");
+const contentConfig_1 = require("../../context/contentConfig");
+const messagesContext_1 = require("../../context/messagesContext");
+const b = (0, utils_1.block)('blocks-list');
+const BlocksList = (_p) => {
+    const { blocks } = (0, contentConfig_1.useContentConfigStore)();
+    const sendMessage = (0, messagesContext_1.useMessageSender)();
+    const onMouseDown = (0, react_1.useCallback)((blockType) => {
+        sendMessage({ type: types_1.ActionTypes.InsertModeEnable, payload: { blockType } });
+    }, [sendMessage]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('section') },
+            react_1.default.createElement("div", { className: b('title') }, "Blocks"),
+            blocks.map(({ type, schema: { name } }) => (react_1.default.createElement(uikit_1.Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+};
+exports.default = BlocksList;

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.css

@@ -0,0 +1,2 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ConfigInput } from '../../../common/types';
+import { ClassNameProps, PageContent } from '../../../models';
+export type DynamicFormValue = string | number | [] | object | boolean | PageContent | undefined;
+interface DynamicFormProps extends ClassNameProps {
+    blockConfig: Array<ConfigInput>;
+    contentConfig: PageContent;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+}
+declare const DynamicForm: React.FC<DynamicFormProps>;
+export default DynamicForm;

package/build/cjs/editor-v2/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../utils");
+const Array_1 = tslib_1.__importDefault(require("./Fields/Array/Array"));
+const Boolean_1 = tslib_1.__importDefault(require("./Fields/Boolean/Boolean"));
+const Number_1 = tslib_1.__importDefault(require("./Fields/Number/Number"));
+const Object_1 = tslib_1.__importDefault(require("./Fields/Object/Object"));
+const OneOf_1 = tslib_1.__importDefault(require("./Fields/OneOf/OneOf"));
+const Select_1 = tslib_1.__importDefault(require("./Fields/Select/Select"));
+const Text_1 = tslib_1.__importDefault(require("./Fields/Text/Text"));
+const TextArea_1 = tslib_1.__importDefault(require("./Fields/TextArea/TextArea"));
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('dynamic-form');
+const DynamicForm = (props) => {
+    const { blockConfig, onUpdate, contentConfig } = props;
+    const inputs = blockConfig;
+    const getData = (0, react_1.useCallback)((variable) => {
+        if (variable.startsWith('block.')) {
+            const purePath = variable.replace('block.', '');
+            return lodash_1.default.get(contentConfig, purePath);
+        }
+        if ((variable.startsWith(`'`) && variable.endsWith(`'`)) ||
+            (variable.startsWith(`"`) && variable.endsWith(`"`))) {
+            // @ts-ignore TODO: replaceAll types
+            return variable.replaceAll(`'`, '').replaceAll(`"`, '');
+        }
+        return undefined;
+    }, [contentConfig]);
+    const decide = (0, react_1.useCallback)((showIf) => {
+        const parts = showIf.split(' ');
+        if (!(parts.length === 3)) {
+            // eslint-disable-next-line no-console
+            console.log('Something bad happened in showIf, ignored');
+            return true;
+        }
+        const [firstVariable, equals, secondVariable] = parts;
+        const data1 = getData(firstVariable);
+        const data2 = getData(secondVariable);
+        if (equals === '===') {
+            return data1 === data2;
+        }
+        else {
+            return data1 !== data2;
+        }
+    }, [getData]);
+    const renderInput = (0, react_1.useCallback)((input) => {
+        const fieldPath = input.name;
+        const fieldValue = (0, utils_2.getContent)(contentConfig, input.name);
+        if (input.showIf) {
+            const decision = decide(input.showIf);
+            if (!decision) {
+                return react_1.default.createElement("div", null,
+                    "Hidden Field: ",
+                    input.name);
+            }
+        }
+        // Text, Select, Boolean and etc
+        const onSimpleDynamicFieldUpdate = (value) => {
+            onUpdate(fieldPath, value);
+        };
+        // Array and Objects
+        const onComplexDynamicFieldUpdate = (key, value) => {
+            onUpdate((0, utils_2.getFullPath)(fieldPath, key), value);
+        };
+        switch (input.type) {
+            case 'text': {
+                return (react_1.default.createElement(Text_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'boolean': {
+                return (react_1.default.createElement(Boolean_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'textarea': {
+                return (react_1.default.createElement(TextArea_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'select': {
+                return (react_1.default.createElement(Select_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'number': {
+                return (react_1.default.createElement(Number_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'object': {
+                if (!input || !('properties' in input)) {
+                    return null;
+                }
+                return (react_1.default.createElement(Object_1.default, { onRefresh: (value) => onUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'array': {
+                return (react_1.default.createElement(Array_1.default, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'oneOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return (react_1.default.createElement(OneOf_1.default, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            default: {
+                return react_1.default.createElement("div", null,
+                    "Ignore ",
+                    JSON.stringify(input));
+            }
+        }
+    }, [contentConfig, decide, onUpdate]);
+    const sortedInputs = inputs.sort((x, y) => {
+        const nestingFieldTypes = ['object', 'array', 'oneOf'];
+        if (nestingFieldTypes.includes(x.type)) {
+            return 1;
+        }
+        if (nestingFieldTypes.includes(y.type)) {
+            return -1;
+        }
+        return 0;
+    });
+    return (react_1.default.createElement("div", { className: b() }, sortedInputs.map((input, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index }, renderInput(input))))));
+};
+exports.default = DynamicForm;

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.css

@@ -0,0 +1,61 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+body {
+  --pc-editor-header-height: 48px;
+  --pc-editor-code-header-height: 36px;
+  --pc-editor-divider-width: 12px;
+  --pc-editor-left-column-width: calc(400px + var(--pc-editor-divider-width));
+  --pc-editor-base-color: var(--g-color-base-brand);
+  --pc-editor-control-color: var(--g-color-base-brand);
+  --pc-editor-control-icon-color: var(--g-color-text-dark-primary);
+}
+
+.pc-field-base {
+  position: relative;
+  margin-top: 20px;
+}
+.pc-field-base:hover > .pc-field-base__top > .pc-field-base__button {
+  opacity: 1;
+}
+.pc-field-base__top {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.pc-field-base__foldable {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.pc-field-base__non-foldable:before {
+  position: absolute;
+  right: calc(100% + 5px);
+}
+.pc-field-base__button {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+.pc-field-base__title {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base__title_size_l {
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.pc-field-base:first-child {
+  margin-top: 0;
+}

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../../../models';
+export interface FieldBaseParams {
+    title?: string;
+    textSize?: 's' | 'm' | 'l';
+    onRefresh?: (value: undefined) => void;
+    expandable?: boolean;
+}
+export interface FieldBaseProps extends ClassNameProps, PropsWithChildren, FieldBaseParams {
+}
+declare const FieldBase: React.FC<FieldBaseProps>;
+export default FieldBase;

package/build/cjs/editor-v2/components/DynamicForm/FieldBase/FieldBase.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../../../utils");
+const b = (0, utils_1.block)('field-base');
+const FieldBase = (props) => {
+    const { className, title, textSize, children, onRefresh, expandable = false } = props;
+    const [showChildren, setShowChildren] = (0, react_1.useState)(!expandable);
+    const titleComponent = react_1.default.useMemo(() => {
+        if (title) {
+            const defaultTitle = (react_1.default.createElement("div", { className: b('title', { size: textSize }) }, lodash_1.default.capitalize(title)));
+            if (expandable) {
+                return (react_1.default.createElement("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren) },
+                    react_1.default.createElement(uikit_1.ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') }),
+                    defaultTitle));
+            }
+            return react_1.default.createElement("div", { className: b('non-foldable') }, defaultTitle);
+        }
+        return null;
+    }, [expandable, showChildren, textSize, title]);
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        title && (react_1.default.createElement("div", { className: b('top') },
+            titleComponent,
+            onRefresh && (react_1.default.createElement(uikit_1.Button, { className: b('button'), onClick: () => onRefresh(undefined), view: 'flat', size: 'xs' },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 14 }))))),
+        (!title || showChildren) && react_1.default.createElement("div", { className: b('children') }, children)));
+};
+exports.default = FieldBase;

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/Array.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-array-dynamic-field__card {
+  padding: 12px;
+  margin-top: 12px;
+}
+.pc-array-dynamic-field__card:first-child {
+  margin-bottom: 0;
+}
+.pc-array-dynamic-field__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 10px;
+}
+.pc-array-dynamic-field__row:first-child {
+  margin-top: 0;
+}
+.pc-array-dynamic-field__card-head {
+  margin-bottom: 8px;
+}
+.pc-array-dynamic-field__row-title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  font-weight: var(--g-text-subheader-font-weight);
+}
+.pc-array-dynamic-field__row-title, .pc-array-dynamic-field__row-field {
+  flex: 1;
+}
+.pc-array-dynamic-field__empty {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+}
+.pc-array-dynamic-field__add-button {
+  margin-top: 12px;
+}

package/build/cjs/editor-v2/components/DynamicForm/Fields/Array/Array.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ArrayObjectInput, ArrayTextInput } from '../../../../../common/types';
+import { ClassNameProps } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+type ArrayInput = ArrayTextInput | ArrayObjectInput;
+interface ArrayFieldProps extends ClassNameProps {
+    title: string;
+    values: Array<DynamicFormValue>;
+    onUpdate: (key: string, value: DynamicFormValue) => void;
+    blockConfig: ArrayInput;
+}
+declare const ArrayDynamicField: React.FC<ArrayFieldProps>;
+export default ArrayDynamicField;