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

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

@@ -1,66 +1,20 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
+import { usePostMessage } from '../../common/hooks/usePostMessage';
 import { useEditorStore } from '../editorContext';
 import { PostMessageContext } from './messagesContext';
 import { createMessagesStore } from './store';
-const DEBUG_MODE = false;
 export const PostMessageProvider = ({ children }) => {
+    var _a;
     const storeRef = useRef();
     if (!storeRef.current) {
         storeRef.current = createMessagesStore();
     }
     const editorStore = useEditorStore();
-    const sendPostMessage = useCallback((args) => {
-        window.parent.postMessage(args, '*');
-    }, []);
-    const notifySubscribers = 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]);
-    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 = 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 } = usePostMessage({
+        subscribers: (_a = storeRef.current) === null || _a === void 0 ? void 0 : _a.getState().subscribers,
+        storesWithReducer,
+    });
     return (React.createElement(PostMessageContext.Provider, { value: {
             state: storeRef.current,
             sendMessage: sendMessage,

package/build/esm/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/esm/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/esm/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/esm/editor-v2/components/BigOverlay/BigOverlay.d.ts

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

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

@@ -0,0 +1,38 @@
+import React, { useContext, useState } from 'react';
+import { Stop } from '@gravity-ui/icons';
+import { ActionTypes, } from '../../../common/types';
+import { block } from '../../../utils';
+import { IframeContext, useIframeStore } from '../../context/iframeContext';
+import { useMessageObserver } from '../../context/messagesContext';
+import './BigOverlay.css';
+const b = block('big-overlay');
+const BigOverlay = ({ className }) => {
+    const { zoom } = useIframeStore();
+    const { iframeElement } = useContext(IframeContext);
+    const [mousePosition, setMousePosition] = useState(undefined);
+    useMessageObserver(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]);
+    useMessageObserver(ActionTypes.InsertModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    useMessageObserver(ActionTypes.ReorderModeDisable, () => {
+        setMousePosition(undefined);
+    });
+    return (React.createElement("div", { className: b(null, className) }, mousePosition ? (React.createElement("div", { className: b('border'), style: {
+            top: mousePosition.y,
+            left: mousePosition.x,
+        } },
+        React.createElement(Stop, { height: 20, width: 20 }))) : null));
+};
+export default BigOverlay;

package/build/esm/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/esm/editor-v2/components/BlockConfig/BlockConfig.d.ts

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import _ from 'lodash';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import { useEditorStore } from '../../context/editorContext';
+import { generateChildrenPathFromArray } from '../../utils';
+import DynamicForm from '../DynamicForm/DynamicForm';
+import './BlockConfig.css';
+const b = block('block-config');
+const BlockConfig = ({ className }) => {
+    const { selectedBlock } = useEditorStore();
+    const { config, blocks, subBlocks, updateField } = useContentConfigStore();
+    const currentBlockPath = (selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        ? generateChildrenPathFromArray(selectedBlock === null || selectedBlock === void 0 ? void 0 : selectedBlock.path)
+        : '[]';
+    const currentConfig = _.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.createElement("div", { className: b('empty') }, "Select block for start");
+    }
+    if (!currentSchema) {
+        return React.createElement("div", { className: b('empty') },
+            "Not supported: ",
+            currentConfig.type);
+    }
+    return (React.createElement("div", { className: b(null, className) },
+        React.createElement("div", { className: b('title') }, currentSchema.schema.name),
+        React.createElement(DynamicForm, { contentConfig: currentConfig, blockConfig: currentSchema.schema.inputs, onUpdate: onUpdate })));
+};
+export default BlockConfig;

package/build/esm/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/esm/editor-v2/components/BlocksList/BlocksList.d.ts

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

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

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+import { Card } from '@gravity-ui/uikit';
+import { ActionTypes } from '../../../common/types';
+import { block } from '../../../utils';
+import { useContentConfigStore } from '../../context/contentConfig';
+import { useMessageSender } from '../../context/messagesContext';
+import './BlocksList.css';
+const b = block('blocks-list');
+const BlocksList = (_p) => {
+    const { blocks } = useContentConfigStore();
+    const sendMessage = useMessageSender();
+    const onMouseDown = useCallback((blockType) => {
+        sendMessage({ type: ActionTypes.InsertModeEnable, payload: { blockType } });
+    }, [sendMessage]);
+    return (React.createElement("div", { className: b() },
+        React.createElement("div", { className: b('section') },
+            React.createElement("div", { className: b('title') }, "Blocks"),
+            blocks.map(({ type, schema: { name } }) => (React.createElement(Card, { key: type, className: b('card'), onMouseDown: () => onMouseDown(type) }, name))))));
+};
+export default BlocksList;

package/build/esm/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/esm/editor-v2/components/DynamicForm/DynamicForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ConfigInput } from '../../../common/types';
+import { ClassNameProps, PageContent } from '../../../models';
+import './DynamicForm.css';
+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/esm/editor-v2/components/DynamicForm/DynamicForm.js

@@ -0,0 +1,116 @@
+import React, { useCallback } from 'react';
+import _ from 'lodash';
+import { block } from '../../../utils';
+import ArrayDynamicField from './Fields/Array/Array';
+import BooleanDynamicField from './Fields/Boolean/Boolean';
+import NumberDynamicField from './Fields/Number/Number';
+import ObjectDynamicField from './Fields/Object/Object';
+import OneOfDynamicField from './Fields/OneOf/OneOf';
+import SelectDynamicField from './Fields/Select/Select';
+import TextDynamicField from './Fields/Text/Text';
+import TextAreaDynamicField from './Fields/TextArea/TextArea';
+import { getContent, getFullPath } from './utils';
+import './DynamicForm.css';
+const b = block('dynamic-form');
+const DynamicForm = (props) => {
+    const { blockConfig, onUpdate, contentConfig } = props;
+    const inputs = blockConfig;
+    const getData = useCallback((variable) => {
+        if (variable.startsWith('block.')) {
+            const purePath = variable.replace('block.', '');
+            return _.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 = 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 = useCallback((input) => {
+        const fieldPath = input.name;
+        const fieldValue = getContent(contentConfig, input.name);
+        if (input.showIf) {
+            const decision = decide(input.showIf);
+            if (!decision) {
+                return React.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(getFullPath(fieldPath, key), value);
+        };
+        switch (input.type) {
+            case 'text': {
+                return (React.createElement(TextDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'boolean': {
+                return (React.createElement(BooleanDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'textarea': {
+                return (React.createElement(TextAreaDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'select': {
+                return (React.createElement(SelectDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), input: input, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'number': {
+                return (React.createElement(NumberDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), title: input.title, value: fieldValue, onUpdate: onSimpleDynamicFieldUpdate }));
+            }
+            case 'object': {
+                if (!input || !('properties' in input)) {
+                    return null;
+                }
+                return (React.createElement(ObjectDynamicField, { onRefresh: (value) => onUpdate(fieldPath, value), blockConfig: input.properties, title: input.title, value: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'array': {
+                return (React.createElement(ArrayDynamicField, { blockConfig: input, title: input.title, values: fieldValue, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            case 'oneOf': {
+                if (!input || !('options' in input)) {
+                    return null;
+                }
+                return (React.createElement(OneOfDynamicField, { inputConfig: input, contentConfig: contentConfig, onUpdate: onComplexDynamicFieldUpdate }));
+            }
+            default: {
+                return React.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.createElement("div", { className: b() }, sortedInputs.map((input, index) => (React.createElement(React.Fragment, { key: index }, renderInput(input))))));
+};
+export default DynamicForm;

package/build/esm/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/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../../../models';
+import './FieldBase.css';
+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/esm/editor-v2/components/DynamicForm/FieldBase/FieldBase.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { ArrowToggle, Button, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { block } from '../../../../utils';
+import './FieldBase.css';
+const b = block('field-base');
+const FieldBase = (props) => {
+    const { className, title, textSize, children, onRefresh, expandable = false } = props;
+    const [showChildren, setShowChildren] = useState(!expandable);
+    const titleComponent = React.useMemo(() => {
+        if (title) {
+            const defaultTitle = (React.createElement("div", { className: b('title', { size: textSize }) }, _.capitalize(title)));
+            if (expandable) {
+                return (React.createElement("div", { className: b('foldable'), onClick: () => setShowChildren(!showChildren) },
+                    React.createElement(ArrowToggle, { direction: showChildren ? 'bottom' : 'right', className: b('arrow-toggle') }),
+                    defaultTitle));
+            }
+            return React.createElement("div", { className: b('non-foldable') }, defaultTitle);
+        }
+        return null;
+    }, [expandable, showChildren, textSize, title]);
+    return (React.createElement("div", { className: b(null, className) },
+        title && (React.createElement("div", { className: b('top') },
+            titleComponent,
+            onRefresh && (React.createElement(Button, { className: b('button'), onClick: () => onRefresh(undefined), view: 'flat', size: 'xs' },
+                React.createElement(Icon, { data: ArrowRotateLeft, size: 14 }))))),
+        (!title || showChildren) && React.createElement("div", { className: b('children') }, children)));
+};
+export default FieldBase;

package/build/esm/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/esm/editor-v2/components/DynamicForm/Fields/Array/Array.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ArrayObjectInput, ArrayTextInput } from '../../../../../common/types';
+import { ClassNameProps } from '../../../../../models';
+import { DynamicFormValue } from '../../DynamicForm';
+import './Array.css';
+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;