@gravity-ui/dynamic-forms 3.0.0 → 3.1.0

package/build/cjs/lib/core/components/Form/Controller.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const hooks_1 = require("./hooks");
 const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
-    const { tools, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
+    const { tools, externalErrors, __mirror } = (0, hooks_1.useDynamicFormsCtx)();
     const { inputEntity, Layout } = (0, hooks_1.useComponents)(spec);
     const render = (0, hooks_1.useRender)({ name, spec, inputEntity, Layout });
     const validate = (0, hooks_1.useValidate)(spec);
@@ -18,6 +18,7 @@ const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) =>
         tools,
         parentOnChange,
         parentOnUnmount,
+        externalErrors,
     });
     const withSearch = (0, hooks_1.useSearch)(spec, renderProps.input.value, name);
     (0, hooks_1.useControllerMirror)(name, {

package/build/cjs/lib/core/components/Form/DynamicField.js

@@ -9,7 +9,7 @@ const helpers_1 = require("../../helpers");
 const Controller_1 = require("./Controller");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
-const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
+const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, errors: externalErrors, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
     const { tools, store } = (0, hooks_1.useStore)(name);
@@ -20,8 +20,9 @@ const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
         generateRandomValue,
         tools,
+        externalErrors,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue, externalErrors]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,

package/build/cjs/lib/core/components/Form/hooks/useField.js

@@ -7,7 +7,7 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../../helpers");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
+const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, externalErrors, }) => {
     const firstRenderRef = react_1.default.useRef(true);
     const validate = react_1.default.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate((0, utils_1.transformArrOut)(value)), [propsValidate]);
     const [state, setState] = react_1.default.useState(() => {
@@ -27,7 +27,13 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
                 }
             }
         }
-        const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        let externalError = lodash_1.default.get(externalErrors, name);
+        if (!(lodash_1.default.isString(externalError) ||
+            lodash_1.default.isBoolean(externalError) ||
+            lodash_1.default.isUndefined(externalError))) {
+            externalError = undefined;
+        }
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || externalError;
         const dirty = !lodash_1.default.isEqual(value, initialValue);
         return {
             active: false,
@@ -138,6 +144,18 @@ const useField = ({ name, spec, initialValue, value: externalValue, validate: pr
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
+    react_1.default.useEffect(() => {
+        const externalError = lodash_1.default.get(externalErrors, name);
+        if (!firstRenderRef.current &&
+            (lodash_1.default.isString(externalError) ||
+                lodash_1.default.isBoolean(externalError) ||
+                lodash_1.default.isUndefined(externalError)) &&
+            state.error !== externalError &&
+            !(state.error && !externalError)) {
+            setState(Object.assign(Object.assign({}, state), { error: externalError }));
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: externalError }));
+        }
+    }, [externalErrors]);
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
         return () => {

package/build/cjs/lib/core/components/Form/hooks/useStore.js

@@ -7,14 +7,14 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_final_form_1 = require("react-final-form");
 const utils_1 = require("../utils");
 const useStore = (name) => {
-    const form = (0, react_final_form_1.useForm)();
+    const formState = (0, react_final_form_1.useFormState)();
     const firstRenderRef = react_1.default.useRef(true);
     const [store, setStore] = react_1.default.useState(() => {
         const values = (0, utils_1.transformArrIn)({
-            [name]: lodash_1.default.get(form.getState().values, name),
+            [name]: lodash_1.default.get(formState.values, name),
         });
         const initialValue = (0, utils_1.transformArrIn)({
-            [name]: lodash_1.default.get(form.getState().initialValues, name),
+            [name]: lodash_1.default.get(formState.initialValues, name),
         });
         return {
             name,
@@ -23,7 +23,7 @@ const useStore = (name) => {
             errors: {},
         };
     });
-    const submitFailed = form.getState().submitFailed;
+    const submitFailed = formState.submitFailed;
     const tools = react_1.default.useMemo(() => ({
         initialValue: store.initialValue,
         onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.set(Object.assign({}, store.values), name, lodash_1.default.clone(value)), errors: errors || {} }))),
@@ -33,10 +33,10 @@ const useStore = (name) => {
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current) {
             const values = (0, utils_1.transformArrIn)({
-                [name]: lodash_1.default.get(form.getState().values, name),
+                [name]: lodash_1.default.get(formState.values, name),
             });
             const initialValue = (0, utils_1.transformArrIn)({
-                [name]: lodash_1.default.get(form.getState().initialValues, name),
+                [name]: lodash_1.default.get(formState.initialValues, name),
             });
             setStore({
                 name: name,

package/build/cjs/lib/core/components/View/DynamicView.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../helpers");
 const ViewController_1 = require("./ViewController");
@@ -12,7 +11,7 @@ const hooks_1 = require("./hooks");
 const DynamicView = ({ value, spec, config, Link, Monaco }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const context = react_1.default.useMemo(() => ({ config, value, Link, Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
-    if (lodash_1.default.isObjectLike(value) && (0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectViewConfig)(config)) {
+    if ((0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectViewConfig)(config)) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(ViewController_1.ViewController, { spec: spec, name: "" })));
     }

package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.css

@@ -2,6 +2,9 @@
   display: flex;
   align-items: flex-end;
 }
+.df-array-base_add-button-right .df-transparent {
+  align-items: flex-end;
+}
 .df-array-base__items-wrapper_add-button-down {
   margin-bottom: 15px;
 }

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

@@ -3,38 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const icons_1 = require("@gravity-ui/icons");
+const components_1 = require("@gravity-ui/components");
 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)('text');
-const Text = ({ name, input, spec }) => {
-    const { value, onBlur, onChange, onFocus } = input;
-    const [hideValue, setHideValue] = react_1.default.useState(spec.viewSpec.type === 'password');
-    const handleChange = react_1.default.useCallback((value) => {
-        onChange(value);
-    }, [onChange, spec]);
-    const type = react_1.default.useMemo(() => {
-        if (spec.viewSpec.type === 'password') {
-            return 'password';
-        }
-        return 'text';
-    }, [spec.viewSpec.type]);
-    const additionalRightContent = react_1.default.useMemo(() => {
-        if (type === 'password') {
-            const onClick = () => {
-                setHideValue((hideValue) => !hideValue);
-            };
-            return (react_1.default.createElement("div", { className: b() },
-                input.value ? (react_1.default.createElement(uikit_1.CopyToClipboard, { text: String(value), timeout: 500 }, (state) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", className: b('button'), size: "s" },
-                    react_1.default.createElement(uikit_1.Icon, { size: 14, data: state === uikit_1.CopyToClipboardStatus.Pending
-                            ? icons_1.Copy
-                            : icons_1.CopyCheck }))))) : null,
-                react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: onClick, className: b('button'), size: "s" },
-                    react_1.default.createElement(uikit_1.Icon, { data: hideValue ? icons_1.Eye : icons_1.EyeSlash, size: 14 }))));
-        }
-        return undefined;
-    }, [hideValue, input.value, type, value]);
-    return (react_1.default.createElement(uikit_1.TextInput, { type: hideValue ? 'password' : 'text', value: lodash_1.default.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, rightContent: additionalRightContent }));
+const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    const props = {
+        value: lodash_1.default.isNil(value) ? '' : `${value}`,
+        hasClear: true,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onUpdate: onChange,
+        disabled: spec.viewSpec.disabled,
+        placeholder: spec.viewSpec.placeholder,
+        qa: name,
+    };
+    if (spec.viewSpec.type === 'password') {
+        return (react_1.default.createElement(components_1.PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+    }
+    return react_1.default.createElement(uikit_1.TextInput, Object.assign({}, props, { type: "text" }));
 };
 exports.Text = Text;

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -1,7 +1,6 @@
 .df-transparent {
   display: flex;
   margin-bottom: 15px;
-  align-items: flex-end;
 }
 .df-transparent:last-child {
   margin-bottom: 0;
@@ -12,6 +11,9 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
+.df-transparent_without-max-width > .df-error-wrapper {
+  width: auto;
+}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewAccordeon = void 0;
 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 SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
 const ViewAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = react_1.default.useState(true);
+    const [open, setOpen] = react_1.default.useState(lodash_1.default.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewCardAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const __1 = require("../");
 const utils_1 = require("../../utils");
 const ViewCardAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = react_1.default.useState(true);
+    const [open, setOpen] = react_1.default.useState(lodash_1.default.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;

package/build/esm/lib/core/components/Form/Controller.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { useComponents, useControllerMirror, useDynamicFormsCtx, useField, useRender, useSearch, useValidate, } from './hooks';
 export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount, }) => {
-    const { tools, __mirror } = useDynamicFormsCtx();
+    const { tools, externalErrors, __mirror } = useDynamicFormsCtx();
     const { inputEntity, Layout } = useComponents(spec);
     const render = useRender({ name, spec, inputEntity, Layout });
     const validate = useValidate(spec);
@@ -14,6 +14,7 @@ export const Controller = ({ spec, name, value, parentOnChange, parentOnUnmount,
         tools,
         parentOnChange,
         parentOnUnmount,
+        externalErrors,
     });
     const withSearch = useSearch(spec, renderProps.input.value, name);
     useControllerMirror(name, {

package/build/esm/lib/core/components/Form/DynamicField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { Spec, StringSpec } from '../../types';
-import { DynamicFormConfig, FieldValue, WonderMirror } from './types';
+import { BaseValidateError, DynamicFormConfig, FieldValue, WonderMirror } from './types';
 export interface DynamicFieldProps {
     name: string;
     spec: Spec;
@@ -10,6 +10,7 @@ export interface DynamicFieldProps {
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
     generateRandomValue?: (spec: StringSpec) => string;
     withoutInsertFFDebounce?: boolean;
+    errors?: Record<string, BaseValidateError>;
     __mirror?: WonderMirror;
 }
 export declare const DynamicField: React.FC<DynamicFieldProps>;

package/build/esm/lib/core/components/Form/DynamicField.js

@@ -5,7 +5,7 @@ import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
 import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useSearchStore, useStore, } from './hooks';
 import { getDefaultSearchFunction, isCorrectConfig } from './utils';
-export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, __mirror, }) => {
+export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, errors: externalErrors, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
     const { tools, store } = useStore(name);
@@ -16,8 +16,9 @@ export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
         generateRandomValue,
         tools,
+        externalErrors,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue]);
+    }), [tools, config, Monaco, __mirror, generateRandomValue, externalErrors]);
     const searchContext = React.useMemo(() => ({
         setField,
         removeField,

package/build/esm/lib/core/components/Form/hooks/useField.d.ts

@@ -1,5 +1,5 @@
 import { Spec } from '../../../types';
-import { DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
+import { BaseValidateError, DynamicFormsContext, FieldRenderProps, FieldValue, ValidateError } from '../types';
 export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;
     spec: SpecType;
@@ -9,5 +9,6 @@ export interface UseFieldProps<Value extends FieldValue, SpecType extends Spec>
     tools: DynamicFormsContext['tools'];
     parentOnChange: ((childName: string, childValue: FieldValue, childErrors: Record<string, ValidateError>) => void) | null;
     parentOnUnmount: ((childName: string) => void) | null;
+    externalErrors?: Record<string, BaseValidateError>;
 }
-export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;
+export declare const useField: <Value extends FieldValue, SpecType extends Spec>({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, externalErrors, }: UseFieldProps<Value, SpecType>) => FieldRenderProps<Value>;

package/build/esm/lib/core/components/Form/hooks/useField.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { isArraySpec, isNumberSpec, isObjectSpec } from '../../../helpers';
 import { OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG } from '../constants';
 import { isArrayItem, transformArrIn, transformArrOut } from '../utils';
-export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, }) => {
+export const useField = ({ name, spec, initialValue, value: externalValue, validate: propsValidate, tools, parentOnChange, parentOnUnmount: externalParentOnUnmount, externalErrors, }) => {
     const firstRenderRef = React.useRef(true);
     const validate = React.useCallback((value) => propsValidate === null || propsValidate === void 0 ? void 0 : propsValidate(transformArrOut(value)), [propsValidate]);
     const [state, setState] = React.useState(() => {
@@ -23,7 +23,13 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
                 }
             }
         }
-        const error = validate === null || validate === void 0 ? void 0 : validate(value);
+        let externalError = _.get(externalErrors, name);
+        if (!(_.isString(externalError) ||
+            _.isBoolean(externalError) ||
+            _.isUndefined(externalError))) {
+            externalError = undefined;
+        }
+        const error = (validate === null || validate === void 0 ? void 0 : validate(value)) || externalError;
         const dirty = !_.isEqual(value, initialValue);
         return {
             active: false,
@@ -134,6 +140,18 @@ export const useField = ({ name, spec, initialValue, value: externalValue, valid
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);
+    React.useEffect(() => {
+        const externalError = _.get(externalErrors, name);
+        if (!firstRenderRef.current &&
+            (_.isString(externalError) ||
+                _.isBoolean(externalError) ||
+                _.isUndefined(externalError)) &&
+            state.error !== externalError &&
+            !(state.error && !externalError)) {
+            setState(Object.assign(Object.assign({}, state), { error: externalError }));
+            (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: externalError }));
+        }
+    }, [externalErrors]);
     React.useEffect(() => {
         firstRenderRef.current = false;
         return () => {

package/build/esm/lib/core/components/Form/hooks/useStore.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import _ from 'lodash';
-import { useForm } from 'react-final-form';
+import { useFormState } from 'react-final-form';
 import { transformArrIn } from '../utils';
 export const useStore = (name) => {
-    const form = useForm();
+    const formState = useFormState();
     const firstRenderRef = React.useRef(true);
     const [store, setStore] = React.useState(() => {
         const values = transformArrIn({
-            [name]: _.get(form.getState().values, name),
+            [name]: _.get(formState.values, name),
         });
         const initialValue = transformArrIn({
-            [name]: _.get(form.getState().initialValues, name),
+            [name]: _.get(formState.initialValues, name),
         });
         return {
             name,
@@ -19,7 +19,7 @@ export const useStore = (name) => {
             errors: {},
         };
     });
-    const submitFailed = form.getState().submitFailed;
+    const submitFailed = formState.submitFailed;
     const tools = React.useMemo(() => ({
         initialValue: store.initialValue,
         onChange: (name, value, errors) => setStore((store) => (Object.assign(Object.assign({}, store), { values: _.set(Object.assign({}, store.values), name, _.clone(value)), errors: errors || {} }))),
@@ -29,10 +29,10 @@ export const useStore = (name) => {
     React.useEffect(() => {
         if (!firstRenderRef.current) {
             const values = transformArrIn({
-                [name]: _.get(form.getState().values, name),
+                [name]: _.get(formState.values, name),
             });
             const initialValue = transformArrIn({
-                [name]: _.get(form.getState().initialValues, name),
+                [name]: _.get(formState.initialValues, name),
             });
             setStore({
                 name: name,

package/build/esm/lib/core/components/Form/types/context.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
 import { StringSpec } from '../../../types';
-import { DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
+import { BaseValidateError, DynamicFormConfig, FieldValue, ValidateError, WonderMirror } from './';
 export interface DynamicFormsContext {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
@@ -12,5 +12,6 @@ export interface DynamicFormsContext {
         onUnmount: (name: string) => void;
         submitFailed: boolean;
     };
+    externalErrors?: Record<string, BaseValidateError>;
     __mirror?: WonderMirror;
 }

package/build/esm/lib/core/components/View/DynamicView.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { AnyObject, FormValue, Spec } from '../../types';
+import { FormValue, Spec } from '../../types';
 import { DynamicViewConfig } from './types';
 export interface DynamicViewProps {
-    value: AnyObject;
+    value: FormValue;
     spec: Spec;
     config: DynamicViewConfig;
     Link?: React.ComponentType<{

package/build/esm/lib/core/components/View/DynamicView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import _ from 'lodash';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { ViewController } from './ViewController';
@@ -8,7 +7,7 @@ import { useCreateContext } from './hooks';
 export const DynamicView = ({ value, spec, config, Link, Monaco }) => {
     const DynamicFormsCtx = useCreateContext();
     const context = React.useMemo(() => ({ config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
-    if (_.isObjectLike(value) && isCorrectSpec(spec) && isCorrectViewConfig(config)) {
+    if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(ViewController, { spec: spec, name: "" })));
     }

package/build/esm/lib/core/components/View/types/context.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { MonacoEditorProps } from 'react-monaco-editor/lib/types';
-import { AnyObject, FormValue, Spec } from '../../../types';
+import { FormValue, Spec } from '../../../types';
 import { DynamicViewConfig } from './';
 export interface DynamicViewContext {
     config: DynamicViewConfig;
-    value: AnyObject;
+    value: FormValue;
     Link?: React.ComponentType<{
         value: FormValue;
         link: Spec['viewSpec']['link'];

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

@@ -2,6 +2,9 @@
   display: flex;
   align-items: flex-end;
 }
+.df-array-base_add-button-right .df-transparent {
+  align-items: flex-end;
+}
 .df-array-base__items-wrapper_add-button-down {
   margin-bottom: 15px;
 }

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

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

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

@@ -1,36 +1,20 @@
 import React from 'react';
-import { Copy, CopyCheck, Eye, EyeSlash } from '@gravity-ui/icons';
-import { Button, CopyToClipboard, CopyToClipboardStatus, Icon, TextInput } from '@gravity-ui/uikit';
+import { PasswordInput } from '@gravity-ui/components';
+import { TextInput } from '@gravity-ui/uikit';
 import _ from 'lodash';
-import { block } from '../../../utils';
-import './Text.css';
-const b = block('text');
-export const Text = ({ name, input, spec }) => {
-    const { value, onBlur, onChange, onFocus } = input;
-    const [hideValue, setHideValue] = React.useState(spec.viewSpec.type === 'password');
-    const handleChange = React.useCallback((value) => {
-        onChange(value);
-    }, [onChange, spec]);
-    const type = React.useMemo(() => {
-        if (spec.viewSpec.type === 'password') {
-            return 'password';
-        }
-        return 'text';
-    }, [spec.viewSpec.type]);
-    const additionalRightContent = React.useMemo(() => {
-        if (type === 'password') {
-            const onClick = () => {
-                setHideValue((hideValue) => !hideValue);
-            };
-            return (React.createElement("div", { className: b() },
-                input.value ? (React.createElement(CopyToClipboard, { text: String(value), timeout: 500 }, (state) => (React.createElement(Button, { view: "flat-secondary", className: b('button'), size: "s" },
-                    React.createElement(Icon, { size: 14, data: state === CopyToClipboardStatus.Pending
-                            ? Copy
-                            : CopyCheck }))))) : null,
-                React.createElement(Button, { view: "flat-secondary", onClick: onClick, className: b('button'), size: "s" },
-                    React.createElement(Icon, { data: hideValue ? Eye : EyeSlash, size: 14 }))));
-        }
-        return undefined;
-    }, [hideValue, input.value, type, value]);
-    return (React.createElement(TextInput, { type: hideValue ? 'password' : 'text', 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, rightContent: additionalRightContent }));
+export const Text = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    const props = {
+        value: _.isNil(value) ? '' : `${value}`,
+        hasClear: true,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onUpdate: onChange,
+        disabled: spec.viewSpec.disabled,
+        placeholder: spec.viewSpec.placeholder,
+        qa: name,
+    };
+    if (spec.viewSpec.type === 'password') {
+        return (React.createElement(PasswordInput, Object.assign({}, props, { autoComplete: "new-password", showCopyButton: true, showRevealButton: true })));
+    }
+    return React.createElement(TextInput, Object.assign({}, props, { type: "text" }));
 };

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

@@ -1,7 +1,6 @@
 .df-transparent {
   display: flex;
   margin-bottom: 15px;
-  align-items: flex-end;
 }
 .df-transparent:last-child {
   margin-bottom: 0;
@@ -12,6 +11,9 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
+.df-transparent_without-max-width > .df-error-wrapper {
+  width: auto;
+}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import _ from 'lodash';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(_.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import _ from 'lodash';
 import { Card } from '../';
 import { isNotEmptyValue } from '../../utils';
 export const ViewCardAccordeon = ({ name, value, spec, children, }) => {
-    const [open, setOpen] = React.useState(true);
+    const [open, setOpen] = React.useState(_.isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     if (!isNotEmptyValue(value, spec)) {
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^2.4.0",
+    "@gravity-ui/components": "^2.8.0",
     "@gravity-ui/i18n": "^1.1.0",
-    "@gravity-ui/icons": "^2.5.0",
+    "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -48,11 +48,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^17.0.0",
     "@commitlint/config-conventional": "^17.0.0",
-    "@gravity-ui/eslint-config": "^2.1.1",
-    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/eslint-config": "^2.2.0",
+    "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.8.0",
+    "@gravity-ui/uikit": "^5.19.1",
     "@storybook/addon-essentials": "^7.0.27",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.27",

package/build/cjs/lib/kit/components/Inputs/Text/Text.css

@@ -1,6 +0,0 @@
-.df-text {
-  display: flex;
-}
-.df-text__button {
-  --yc-button-background-color-hover: transparent;
-}

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

@@ -1,6 +0,0 @@
-.df-text {
-  display: flex;
-}
-.df-text__button {
-  --yc-button-background-color-hover: transparent;
-}