@gravity-ui/dynamic-forms 1.4.1 → 1.6.0

package/build/esm/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.js

@@ -4,7 +4,7 @@ import { block, divide, isCorrectSizeParams, multiply } from '../../../utils';
 import { useInitial } from './useInitial';
 import './NumberWithScale.css';
 const b = block('number-with-scale');
-const NumberWithScaleBase = ({ input, spec }) => {
+const NumberWithScaleBase = ({ name, input, spec }) => {
     const { value = '', onBlur, onFocus, onChange } = input;
     const { sizeParams, disabled, placeholder } = spec.viewSpec;
     const { defaultType, scale } = sizeParams;
@@ -61,7 +61,7 @@ const NumberWithScaleBase = ({ input, spec }) => {
         }
     }, [setPreparedValue, setScaleValue, incorrectStringNumber, value, scale, defaultType]);
     return (React.createElement("div", { className: b('wrapper') },
-        React.createElement(TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled }),
-        React.createElement(Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber })));
+        React.createElement(TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled, qa: name }),
+        React.createElement(Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber, qa: `${name}-scale` })));
 };
 export const NumberWithScale = (props) => isCorrectSizeParams(props.spec) ? React.createElement(NumberWithScaleBase, Object.assign({}, props)) : null;

package/build/esm/lib/kit/components/Inputs/ObjectBase/ObjectBase.js

@@ -8,7 +8,7 @@ export const ObjectBase = (_a) => {
     var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
     const addBtn = React.useMemo(() => {
         var _a;
-        return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled },
+        return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled, qa: `${name}-init-obj` },
             React.createElement(Icon, { data: Plus, size: 14 }),
             spec.viewSpec.layoutTitle || null));
     }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
@@ -18,7 +18,7 @@ export const ObjectBase = (_a) => {
         if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
             return null;
         }
-        if (!restProps.input.value && !spec.viewSpec.showOptional) {
+        if (!restProps.input.value) {
             return addBtn;
         }
         const specProperties = Object.assign({}, spec.properties);

package/build/esm/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentInput } from '../../../../core';
+export declare const ObjectValueInput: ObjectIndependentInput;

package/build/esm/lib/kit/components/Inputs/ObjectValueInput/ObjectValueInput.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import _ from 'lodash';
+import { Controller } from '../../../../core';
+const OBJECT_VALUE_PROPERTY_NAME = 'value';
+export const ObjectValueInput = (props) => {
+    var _a;
+    const { spec, input, name, Layout } = props;
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep(spec.properties[OBJECT_VALUE_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
+        return null;
+    }
+    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME], spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, key: `${name}.${OBJECT_VALUE_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
+    }
+    return React.createElement(React.Fragment, null, content);
+};

package/build/esm/lib/kit/components/Inputs/ObjectValueInput/index.d.ts

@@ -0,0 +1 @@
+export * from './ObjectValueInput';

package/build/esm/lib/kit/components/Inputs/ObjectValueInput/index.js

@@ -0,0 +1 @@
+export * from './ObjectValueInput';

package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.css

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

package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.js

@@ -15,7 +15,7 @@ export const OneOf = (props) => {
     }, [props.input.onChange, props.input.name]);
     const parentOnUnmount = React.useCallback((childName) => props.input.onChange((currentValue) => currentValue, { [childName]: false }), [props.input.onChange]);
     return (React.createElement("div", { className: b() },
+        React.createElement("div", null, toggler),
         specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
-            React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null,
-        React.createElement("div", { className: b('toggler') }, toggler)));
+            React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };

package/build/esm/lib/kit/components/Inputs/OneOfCard/OneOfCard.js

@@ -26,15 +26,15 @@ export const OneOfCard = (props) => {
     }, [togglerInput, props, arrayItem]);
     const headerActionsTemplate = React.useMemo(() => {
         if (arrayItem) {
-            return React.createElement(RemoveButton, { onDrop: input.onDrop });
+            return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
         }
         return null;
-    }, [arrayItem, input.onDrop]);
+    }, [arrayItem, input.onDrop, name]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
         const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
         input.onChange(value, childErrors);
     }, [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
+    return (React.createElement(AccordeonCard, { className: b(), name: name, header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${oneOfValue}` })) : null));
 };

package/build/esm/lib/kit/components/Inputs/Secret/Secret.js

@@ -1,17 +1,27 @@
 import React from 'react';
 import _ from 'lodash';
-import { Controller, } from '../../../../core';
+import { Controller } from '../../../../core';
 const SECRET_PROPERTY_NAME = 'raw';
-export const Secret = ({ spec, name, input }) => {
+export const Secret = (props) => {
     var _a;
+    const { spec, name, input, Layout } = props;
+    const childSpec = React.useMemo(() => {
+        var _a, _b;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep((_b = spec.properties) === null || _b === void 0 ? void 0 : _b[SECRET_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
-    if (!_.isObjectLike(spec.properties)) {
+    if (!childSpec) {
         return null;
     }
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[SECRET_PROPERTY_NAME]) {
-        return null;
+    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: childSpec, name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
     }
-    return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[SECRET_PROPERTY_NAME], spec: specProperties[SECRET_PROPERTY_NAME], name: `${name}.${SECRET_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount, key: `${name}.${SECRET_PROPERTY_NAME}` }));
+    return React.createElement(React.Fragment, null, content);
 };

package/build/esm/lib/kit/components/Inputs/Select/Select.js

@@ -3,7 +3,7 @@ import { Select as SelectBase } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './Select.css';
 const b = block('select');
-export const Select = ({ input, spec }) => {
+export const Select = ({ name, input, spec }) => {
     var _a;
     const { value, onBlur, onChange, onFocus } = input;
     const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
@@ -28,5 +28,5 @@ export const Select = ({ input, spec }) => {
             onBlur();
         }
     }, [onFocus, onBlur]);
-    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable }));
+    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, qa: name }));
 };

package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js

@@ -41,7 +41,7 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             id: 'remove',
             name: '',
             sticky: 'right',
-            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+            template: ({ key }) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 React.createElement(Icon, { data: Xmark, size: 16 }))),
         };
         const columns = table.map(({ property, label }) => ({
@@ -74,9 +74,9 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
     }
     return (React.createElement("div", { className: b() },
         keys.length ? (React.createElement(Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top", getRowClassNames: getRowClassNames })) : null,
-        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled, qa: `${name}-init-arr` },
             React.createElement(Icon, { data: Plus, size: 14 }),
-            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled, qa: `${name}-add-item` },
             React.createElement(Icon, { data: Plus, size: 14 }),
             spec.viewSpec.itemLabel || null))));
 };

package/build/esm/lib/kit/components/Inputs/Text/Text.d.ts

@@ -1,2 +1,2 @@
 import { NumberInputProps, StringInputProps } from '../../../../core';
-export declare const Text: <T extends NumberInputProps | StringInputProps>({ input, spec }: T) => JSX.Element;
+export declare const Text: <T extends NumberInputProps | StringInputProps>({ name, input, spec }: T) => JSX.Element;

package/build/esm/lib/kit/components/Inputs/Text/Text.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput } from '@gravity-ui/uikit';
 import _ from 'lodash';
-export const Text = ({ input, spec }) => {
+export const Text = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
     const handleChange = React.useCallback((value) => {
         onChange(value);
@@ -12,5 +12,5 @@ export const Text = ({ input, spec }) => {
         }
         return 'text';
     }, [spec.viewSpec.type]);
-    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined }));
+    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined, qa: name }));
 };

package/build/esm/lib/kit/components/Inputs/TextArea/TextArea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput as TextInputBase } from '@gravity-ui/uikit';
-export const TextArea = ({ input, spec }) => {
+export const TextArea = ({ name, input, spec }) => {
     const { value, onBlur, onChange, onFocus } = input;
-    return (React.createElement(TextInputBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, multiline: true, placeholder: spec.viewSpec.placeholder }));
+    return (React.createElement(TextInputBase, { value: value, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, maxRows: 20, minRows: 8, hasClear: true, disabled: spec.viewSpec.disabled, multiline: true, placeholder: spec.viewSpec.placeholder, qa: name }));
 };

package/build/esm/lib/kit/components/Inputs/TextLink/TextLink.js

@@ -2,14 +2,27 @@ import React from 'react';
 import _ from 'lodash';
 import { Controller, isStringSpec, } from '../../../../core';
 const TEXT_LINK_PROPERTY_NAME = 'text';
-export const TextLink = ({ spec, input, name }) => {
+export const TextLink = (props) => {
     var _a;
+    const { spec, input, name, Layout } = props;
     const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
     const parentOnUnmount = React.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
-    const specProperties = Object.assign({}, spec.properties);
-    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
-        !isStringSpec(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME]) &&
+            isStringSpec(spec.properties[TEXT_LINK_PROPERTY_NAME])) {
+            const childSpec = _.cloneDeep(spec.properties[TEXT_LINK_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
         return null;
     }
-    return (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: specProperties[TEXT_LINK_PROPERTY_NAME], name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    const content = (React.createElement(Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[TEXT_LINK_PROPERTY_NAME], spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}`, key: `${name}.${TEXT_LINK_PROPERTY_NAME}`, parentOnChange: parentOnChange, parentOnUnmount: parentOnUnmount }));
+    if (Layout) {
+        return React.createElement(Layout, Object.assign({}, props), content);
+    }
+    return React.createElement(React.Fragment, null, content);
 };

package/build/esm/lib/kit/components/Inputs/index.d.ts

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
+export * from './ObjectValueInput';
 export * from './OneOf';
 export * from './OneOfCard';
 export * from './Secret';

package/build/esm/lib/kit/components/Inputs/index.js

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './FileInput';
 export * from './MultiSelect';
 export * from './ObjectBase';
+export * from './ObjectValueInput';
 export * from './OneOf';
 export * from './OneOfCard';
 export * from './Secret';

package/build/esm/lib/kit/components/Layouts/Accordeon/Accordeon.js

@@ -14,9 +14,9 @@ export const Accordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { name: name, onDrop: onDrop });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: spec.viewSpec.layoutDescription || '', open: open, onOpenChange: setOpen, headerActionsTemplate: removeButton, hideInsteadOfDestroy: true, withBranchView: true },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface RemoveButtonProps {
+    name: string;
     onDrop: () => void;
 }
 export declare const RemoveButton: React.FC<RemoveButtonProps>;

package/build/esm/lib/kit/components/Layouts/Accordeon/RemoveButton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { Ellipsis } from '@gravity-ui/icons';
 import { Button, DropdownMenu, Icon } from '@gravity-ui/uikit';
 import i18n from '../../../i18n';
-export const RemoveButton = ({ onDrop }) => {
+export const RemoveButton = ({ name, onDrop }) => {
     const items = React.useMemo(() => [{ text: i18n('label_delete'), action: onDrop, theme: 'danger' }], [onDrop]);
-    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat" },
+    const switcher = React.useMemo(() => (React.createElement(Button, { view: "flat", qa: `${name}-drop-item` },
         React.createElement(Icon, { data: Ellipsis, size: 16 }))), []);
     return React.createElement(DropdownMenu, { switcher: switcher, items: items });
 };

package/build/esm/lib/kit/components/Layouts/AccordeonCardLayout/AccordeonCardLayout.js

@@ -18,9 +18,9 @@ export const AccordeonCardLayout = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
+    return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, headerActionsTemplate: removeButton, className: b() },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/CardAccordeon.js

@@ -14,9 +14,9 @@ export const CardAccordeon = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: onDrop });
-    }, [spec.required, input.value, onDrop]);
+        return React.createElement(RemoveButton, { onDrop: onDrop, name: name });
+    }, [spec.required, input.value, onDrop, name]);
     useErrorChecker({ name, meta, open, setOpen });
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, open: open, onToggle: onToggle },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/CardSection.js

@@ -6,8 +6,8 @@ export const CardSection = ({ name, spec, input, meta, children, }) => {
         if (spec.required || !input.value) {
             return null;
         }
-        return React.createElement(RemoveButton, { onDrop: input.onDrop });
-    }, [spec.required, input.value, input.onDrop]);
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
+        return React.createElement(RemoveButton, { onDrop: input.onDrop, name: name });
+    }, [spec.required, input.value, input.onDrop, name]);
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, description: spec.viewSpec.layoutDescription, actions: removeButton, alwaysOpen: true },
         React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: true }, children)));
 };

package/build/esm/lib/kit/components/Layouts/Row/Row.js

@@ -18,7 +18,7 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                arrayItem ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
             verboseDescription && spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };

package/build/esm/lib/kit/components/Layouts/Row2/Row2.js

@@ -15,7 +15,7 @@ export const Row2 = ({ name, spec, input, meta, children, }) => {
         React.createElement("div", { className: b('right') },
             React.createElement("div", { className: b('right-inner') },
                 React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: isArraySpec(spec) || isObjectSpec(spec) }, children),
-                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+                isArrayItem(name) ? (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                     React.createElement(Icon, { data: Xmark, size: 16 }))) : null),
             spec.viewSpec.layoutDescription ? (React.createElement("div", { className: b('description'), dangerouslySetInnerHTML: { __html: spec.viewSpec.layoutDescription } })) : null)));
 };

package/build/esm/lib/kit/components/Layouts/SectionCard/SectionCard.js

@@ -14,7 +14,7 @@ const SectionCardBase = (_a) => {
     if (meta) {
         content = (React.createElement(ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: arrOrObjFlag }, content));
     }
-    return (React.createElement(AccordeonCard, { className: b(), header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
+    return (React.createElement(AccordeonCard, { className: b(), name: name, header: spec.viewSpec.layoutTitle, description: ignoreDescription ? undefined : spec.viewSpec.layoutDescription, titleSize: titleSize, alwaysOpen: true }, content));
 };
 export const SectionCard = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "m" }));
 export const SectionCard2 = (props) => React.createElement(SectionCardBase, Object.assign({}, props, { titleSize: "s" }));

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.js

@@ -11,11 +11,11 @@ export const Transparent = ({ name, spec, input, meta, children, }) => {
     const arrOrObjFlag = React.useMemo(() => isArraySpec(spec) || isObjectSpec(spec), [spec]);
     const removeButton = React.useMemo(() => {
         if (arrayItem) {
-            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop },
+            return (React.createElement(Button, { view: "flat", className: b('remove-button'), onClick: input.onDrop, qa: `${name}-remove-item` },
                 React.createElement(Icon, { data: Xmark, size: 16 })));
         }
         return null;
-    }, [input.onDrop, arrayItem]);
+    }, [input.onDrop, arrayItem, name]);
     return (React.createElement("div", { className: b({
             'array-item': arrayItem && !arrOrObjFlag,
             'without-max-width': arrOrObjFlag,

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -32,7 +32,7 @@
   font-size: var(--yc-text-body3-font-size);
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin-right: 8px;
+  margin: 0px 5px;
 }
 .df-simple-vertical-accordeon__tooltip .yc-help-popover {
   display: flex;

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './SimpleVerticalAccordeon.css';
 interface SimpleVerticalAccordeonProps {
     children: React.ReactNode;
+    name: string;
     title: string;
     titleSize?: 's' | 'm' | 'l';
     note?: string;

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.js

@@ -44,7 +44,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         this.checkVisibility();
     }
     render() {
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, } = this.props;
+        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -52,7 +52,7 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         return (Boolean(React.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             React.createElement("div", { className: b('header') },
-                React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick },
+                React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler` },
                     React.createElement("b", { className: b('title', { size: titleSize }) }, this.getTitle()),
                     React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 })),
                 this.getTooltip(),

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
-export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
-export const ViewAccordeon = ({ value, spec, children, }) => {
+export const ViewAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(SimpleVerticalAccordeon, { title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../../core';
-export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewAccordeonCard: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { AccordeonCard } from '../../';
 import { isNotEmptyValue } from '../../../utils';
-export const ViewAccordeonCard = ({ value, spec, children, }) => {
+export const ViewAccordeonCard = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(AccordeonCard, { header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
+    return (React.createElement(AccordeonCard, { name: name, header: spec.viewSpec.layoutTitle || '', open: open, onToggle: onToggle, className: "df-accordeon-card-layout" }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.d.ts

@@ -1,2 +1,2 @@
 import { ArrayViewLayoutProps, ObjectViewLayoutProps } from '../../../core';
-export declare const ViewCardAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ value, spec, children, }: T) => JSX.Element | null;
+export declare const ViewCardAccordeon: <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({ name, value, spec, children, }: T) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewCardAccordeon.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Card } from '../';
 import { isNotEmptyValue } from '../../utils';
-export const ViewCardAccordeon = ({ value, spec, children, }) => {
+export const ViewCardAccordeon = ({ name, value, spec, children, }) => {
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, open: open, onToggle: onToggle, checkEmptyBody: true }, children));
 };

package/build/esm/lib/kit/components/ViewLayouts/ViewCardSection.d.ts

@@ -1,2 +1,2 @@
 import { FormValue, Spec, ViewLayoutProps } from '../../../core';
-export declare const ViewCardSection: <T extends FormValue, S extends Spec>({ value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;
+export declare const ViewCardSection: <T extends FormValue, S extends Spec>({ name, value, spec, children, }: ViewLayoutProps<T, S>) => JSX.Element | null;

package/build/esm/lib/kit/components/ViewLayouts/ViewCardSection.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Card } from '../../components';
 import { isNotEmptyValue } from '../../utils';
-export const ViewCardSection = ({ value, spec, children, }) => {
+export const ViewCardSection = ({ name, value, spec, children, }) => {
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(Card, { title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
+    return (React.createElement(Card, { name: name, title: spec.viewSpec.layoutTitle, alwaysOpen: true, checkEmptyBody: true }, children));
 };

package/build/esm/lib/kit/components/Views/CardOneOfView.js

@@ -19,5 +19,5 @@ export const CardOneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(Card, { title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
 };

package/build/esm/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.d.ts

@@ -0,0 +1,2 @@
+import { ObjectIndependentView } from '../../../../core';
+export declare const ObjectValueInputView: ObjectIndependentView;

package/build/esm/lib/kit/components/Views/ObjectValueInputView/ObjectValueInputView.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import React from 'react';
+import _ from 'lodash';
+import { ViewController } from '../../../../core';
+const OBJECT_VALUE_PROPERTY_NAME = 'value';
+export const ObjectValueInputView = (_a) => {
+    var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
+    const childSpec = React.useMemo(() => {
+        var _a;
+        if ((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[OBJECT_VALUE_PROPERTY_NAME]) {
+            const childSpec = _.cloneDeep(spec.properties[OBJECT_VALUE_PROPERTY_NAME]);
+            childSpec.viewSpec.layout = '';
+            return childSpec;
+        }
+        return undefined;
+    }, [spec.properties]);
+    if (!childSpec) {
+        return null;
+    }
+    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name}.${OBJECT_VALUE_PROPERTY_NAME}` }));
+    if (Layout) {
+        return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+    }
+    return React.createElement(React.Fragment, null, content);
+};

package/build/esm/lib/kit/components/Views/ObjectValueInputView/index.d.ts

@@ -0,0 +1 @@
+export * from './ObjectValueInputView';

package/build/esm/lib/kit/components/Views/ObjectValueInputView/index.js

@@ -0,0 +1 @@
+export * from './ObjectValueInputView';