@gravity-ui/dynamic-forms 4.11.0 → 4.13.0

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

@@ -18,15 +18,27 @@ const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search,
     const watcher = (0, hooks_1.useIntegrationFF)(store, withoutInsertFFDebounce, destroyOnUnregister);
     const { mutatorsStore, mutateDFState } = (0, hooks_1.useMutators)(externalMutators);
     const { store: searchStore, setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)();
+    const shared = (0, hooks_1.useFormSharedStore)();
     const context = react_1.default.useMemo(() => ({
         config,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
         generateRandomValue,
         tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
         store,
+        shared,
         mutatorsStore,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue, mutatorsStore, mutateDFState, store]);
+    }), [
+        tools,
+        shared,
+        config,
+        Monaco,
+        __mirror,
+        generateRandomValue,
+        mutatorsStore,
+        mutateDFState,
+        store,
+    ]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,

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

@@ -5,6 +5,8 @@ tslib_1.__exportStar(require("./useControllerMirror"), exports);
 tslib_1.__exportStar(require("./useCreateContext"), exports);
 tslib_1.__exportStar(require("./useDynamicFieldMirror"), exports);
 tslib_1.__exportStar(require("./useDynamicFormsCtx"), exports);
+tslib_1.__exportStar(require("./useFormShared"), exports);
+tslib_1.__exportStar(require("./useFormSharedStore"), exports);
 tslib_1.__exportStar(require("./useGenerateRandomValue"), exports);
 tslib_1.__exportStar(require("./useIntegrationFF"), exports);
 tslib_1.__exportStar(require("./useMutateDFState"), exports);

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormShared = void 0;
+const useDynamicFormsCtx_1 = require("./useDynamicFormsCtx");
+const useFormShared = () => (0, useDynamicFormsCtx_1.useDynamicFormsCtx)().shared;
+exports.useFormShared = useFormShared;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormSharedStore = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useFormSharedStore = () => {
+    const [store, setStore] = react_1.default.useState({});
+    const onChangeShared = react_1.default.useCallback((name, value) => setStore((s) => (Object.assign(Object.assign({}, s), { [name]: value }))), [setStore]);
+    return { store, onChangeShared };
+};
+exports.useFormSharedStore = useFormSharedStore;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStoreValue = exports.useMutateDFState = void 0;
+exports.useFormShared = exports.useStoreValue = exports.useMutateDFState = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./Controller"), exports);
@@ -8,5 +8,6 @@ tslib_1.__exportStar(require("./DynamicField"), exports);
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useMutateDFState", { enumerable: true, get: function () { return hooks_1.useMutateDFState; } });
 Object.defineProperty(exports, "useStoreValue", { enumerable: true, get: function () { return hooks_1.useStoreValue; } });
+Object.defineProperty(exports, "useFormShared", { enumerable: true, get: function () { return hooks_1.useFormShared; } });
 tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./utils"), exports);

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

@@ -10,13 +10,15 @@ const helpers_2 = require("./helpers");
 const hooks_1 = require("./hooks");
 const DynamicView = ({ value, spec, config, Link, Monaco, showLayoutDescription, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
+    const shared = (0, hooks_1.useViewSharedStore)();
     const context = react_1.default.useMemo(() => ({
         config,
         value,
         showLayoutDescription,
         Link,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
-    }), [config, value, Link, Monaco, showLayoutDescription]);
+        shared,
+    }), [config, value, Link, Monaco, showLayoutDescription, shared]);
     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/core/components/View/hooks/index.js

@@ -6,3 +6,5 @@ tslib_1.__exportStar(require("./useCreateContext"), exports);
 tslib_1.__exportStar(require("./useDynamicFormsCtx"), exports);
 tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useMonaco"), exports);
+tslib_1.__exportStar(require("./useViewShared"), exports);
+tslib_1.__exportStar(require("./useViewSharedStore"), exports);

package/build/cjs/lib/core/components/View/hooks/useViewShared.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewShared = void 0;
+const useDynamicFormsCtx_1 = require("./useDynamicFormsCtx");
+const useViewShared = () => (0, useDynamicFormsCtx_1.useDynamicFormsCtx)().shared;
+exports.useViewShared = useViewShared;

package/build/cjs/lib/core/components/View/hooks/useViewSharedStore.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewSharedStore = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useViewSharedStore = () => {
+    const [store, setStore] = react_1.default.useState({});
+    const onChangeShared = react_1.default.useCallback((name, value) => setStore((s) => (Object.assign(Object.assign({}, s), { [name]: value }))), [setStore]);
+    return { store, onChangeShared };
+};
+exports.useViewSharedStore = useViewSharedStore;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDynamicFormsCtx = void 0;
+exports.useViewShared = exports.useDynamicFormsCtx = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DynamicView"), exports);
 tslib_1.__exportStar(require("./ViewController"), exports);
@@ -8,3 +8,4 @@ tslib_1.__exportStar(require("./helpers"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useDynamicFormsCtx", { enumerable: true, get: function () { return hooks_1.useDynamicFormsCtx; } });
+Object.defineProperty(exports, "useViewShared", { enumerable: true, get: function () { return hooks_1.useViewShared; } });

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextContent = void 0;
+exports.TextContent = exports.TextContentComponent = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
@@ -9,9 +9,8 @@ const utils_1 = require("../../../utils");
 const LazyLoader_1 = require("../../LazyLoader");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('text-content');
-const TextContent = (_a) => {
-    var _b;
-    var { spec, Layout, input } = _a, restProps = tslib_1.__rest(_a, ["spec", "Layout", "input"]);
+const TextContentComponent = ({ spec, value, Layout, }) => {
+    var _a;
     const { textContentParams, layoutDescription } = spec.viewSpec;
     const text = react_1.default.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
     if (!text) {
@@ -20,23 +19,36 @@ const TextContent = (_a) => {
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (react_1.default.createElement(LazyLoader_1.LazyLoader, { component: (0, utils_2.loadIcon)(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
-        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: input.value, icon: iconLib }, content));
+        content = (react_1.default.createElement(uikit_1.Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {
         content = (react_1.default.createElement("div", { className: b('wrapper') },
-            iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            iconLib ? (react_1.default.createElement(uikit_1.Text, { color: (_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.iconColor, className: b('icon') }, iconLib)) : null,
             content,
-            input.value ? (react_1.default.createElement(react_1.default.Fragment, null,
+            value ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(uikit_1.Text, { className: b('separator') }, ":"),
-                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, input.value))) : null));
+                react_1.default.createElement(uikit_1.Text, { color: "secondary" }, value))) : null));
     }
     if (Layout) {
         const _spec = (0, cloneDeep_1.default)(spec);
         if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
             _spec.viewSpec.layoutDescription = undefined;
         }
-        return (react_1.default.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
+        return react_1.default.createElement(Layout, { spec: _spec }, content);
     }
     return content;
 };
+exports.TextContentComponent = TextContentComponent;
+const TextContent = ({ name, spec, Layout, input, arrayInput, meta, layoutProps, }) => {
+    const WrappedLayout = react_1.default.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                return (react_1.default.createElement(Layout, Object.assign({ name: name, input: input, layoutProps: layoutProps, arrayInput: arrayInput, meta: meta }, props)));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, layoutProps, input, arrayInput, meta, name]);
+    return react_1.default.createElement(exports.TextContentComponent, { spec: spec, value: input.value, Layout: WrappedLayout });
+};
 exports.TextContent = TextContent;

package/build/cjs/lib/kit/components/Views/TextContentView.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContentView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Inputs_1 = require("../Inputs");
+const TextContentView = ({ name, spec, Layout, value }) => {
+    const WrappedLayout = react_1.default.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                const VALUE_STUB = 'if u see this, please create issue about it here: https://github.com/gravity-ui/dynamic-forms/issues/new';
+                return react_1.default.createElement(Layout, Object.assign({ name: name, value: VALUE_STUB }, props));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, name]);
+    return react_1.default.createElement(Inputs_1.TextContentComponent, { spec: spec, value: value, Layout: WrappedLayout });
+};
+exports.TextContentView = TextContentView;

package/build/cjs/lib/kit/components/Views/index.js

@@ -15,6 +15,7 @@ tslib_1.__exportStar(require("./ObjectValueInputView"), exports);
 tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
+tslib_1.__exportStar(require("./TextContentView"), exports);
 tslib_1.__exportStar(require("./TextLinkView"), exports);
 tslib_1.__exportStar(require("./TimeRangeSelectorView"), exports);
 tslib_1.__exportStar(require("./DateView"), exports);

package/build/cjs/lib/kit/constants/config.js

@@ -202,7 +202,7 @@ exports.dynamicViewConfig = {
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },
-            text_content: undefined,
+            text_content: { Component: components_1.TextContentView, independent: true },
         },
         layouts: {
             row: components_1.ViewRow,

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

@@ -5,7 +5,7 @@ import isString from 'lodash/isString';
 import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { Controller } from './Controller';
-import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useIntegrationFF, useMutators, useSearchStore, useStore, } from './hooks';
+import { useCreateContext, useCreateSearchContext, useDynamicFieldMirror, useFormSharedStore, useIntegrationFF, useMutators, useSearchStore, useStore, } from './hooks';
 import { getDefaultSearchFunction, isCorrectConfig } from './utils';
 export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue, search, withoutInsertFFDebounce, destroyOnUnregister = true, mutators: externalMutators, __mirror, }) => {
     const DynamicFormsCtx = useCreateContext();
@@ -14,15 +14,27 @@ export const DynamicField = ({ name, spec, config, Monaco, generateRandomValue,
     const watcher = useIntegrationFF(store, withoutInsertFFDebounce, destroyOnUnregister);
     const { mutatorsStore, mutateDFState } = useMutators(externalMutators);
     const { store: searchStore, setField, removeField, isHiddenField } = useSearchStore();
+    const shared = useFormSharedStore();
     const context = React.useMemo(() => ({
         config,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
         generateRandomValue,
         tools: Object.assign(Object.assign({}, tools), { mutateDFState }),
         store,
+        shared,
         mutatorsStore,
         __mirror,
-    }), [tools, config, Monaco, __mirror, generateRandomValue, mutatorsStore, mutateDFState, store]);
+    }), [
+        tools,
+        shared,
+        config,
+        Monaco,
+        __mirror,
+        generateRandomValue,
+        mutatorsStore,
+        mutateDFState,
+        store,
+    ]);
     const searchContext = React.useMemo(() => ({
         setField,
         removeField,

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

@@ -2,6 +2,8 @@ export * from './useControllerMirror';
 export * from './useCreateContext';
 export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
+export * from './useFormShared';
+export * from './useFormSharedStore';
 export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
 export * from './useMutateDFState';

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

@@ -2,6 +2,8 @@ export * from './useControllerMirror';
 export * from './useCreateContext';
 export * from './useDynamicFieldMirror';
 export * from './useDynamicFormsCtx';
+export * from './useFormShared';
+export * from './useFormSharedStore';
 export * from './useGenerateRandomValue';
 export * from './useIntegrationFF';
 export * from './useMutateDFState';

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

@@ -0,0 +1,4 @@
+export declare const useFormShared: <SharedStore extends Record<string, any>>() => {
+    store: SharedStore;
+    onChangeShared: <Name extends keyof SharedStore, Value extends SharedStore[Name]>(name: Name, value: Value) => void;
+};

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

@@ -0,0 +1,2 @@
+import { useDynamicFormsCtx } from './useDynamicFormsCtx';
+export const useFormShared = () => useDynamicFormsCtx().shared;

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

@@ -0,0 +1,4 @@
+export declare const useFormSharedStore: () => {
+    store: {};
+    onChangeShared: (name: string, value: any) => void;
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export const useFormSharedStore = () => {
+    const [store, setStore] = React.useState({});
+    const onChangeShared = React.useCallback((name, value) => setStore((s) => (Object.assign(Object.assign({}, s), { [name]: value }))), [setStore]);
+    return { store, onChangeShared };
+};

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

@@ -1,6 +1,6 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export { useMutateDFState, useStoreValue } from './hooks';
+export { useMutateDFState, useStoreValue, useFormShared } from './hooks';
 export * from './types';
 export * from './utils';

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

@@ -1,6 +1,6 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export { useMutateDFState, useStoreValue } from './hooks';
+export { useMutateDFState, useStoreValue, useFormShared } from './hooks';
 export * from './types';
 export * from './utils';

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

@@ -14,6 +14,10 @@ export interface DynamicFormsContext {
         mutateDFState: (mutators: DynamicFormMutators) => void;
     };
     store: DynamicFieldStore;
+    shared: {
+        store: Record<string, any>;
+        onChangeShared: (name: string, value: any) => void;
+    };
     mutatorsStore: DynamicFormMutatorsStore;
     __mirror?: WonderMirror;
 }

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

@@ -3,16 +3,18 @@ import { isValidElementType } from 'react-is';
 import { isCorrectSpec } from '../../helpers';
 import { ViewController } from './ViewController';
 import { isCorrectViewConfig } from './helpers';
-import { useCreateContext } from './hooks';
+import { useCreateContext, useViewSharedStore } from './hooks';
 export const DynamicView = ({ value, spec, config, Link, Monaco, showLayoutDescription, }) => {
     const DynamicFormsCtx = useCreateContext();
+    const shared = useViewSharedStore();
     const context = React.useMemo(() => ({
         config,
         value,
         showLayoutDescription,
         Link,
         Monaco: isValidElementType(Monaco) ? Monaco : undefined,
-    }), [config, value, Link, Monaco, showLayoutDescription]);
+        shared,
+    }), [config, value, Link, Monaco, showLayoutDescription, shared]);
     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/hooks/index.d.ts

@@ -3,3 +3,5 @@ export * from './useCreateContext';
 export * from './useDynamicFormsCtx';
 export * from './useRender';
 export * from './useMonaco';
+export * from './useViewShared';
+export * from './useViewSharedStore';

package/build/esm/lib/core/components/View/hooks/index.js

@@ -3,3 +3,5 @@ export * from './useCreateContext';
 export * from './useDynamicFormsCtx';
 export * from './useRender';
 export * from './useMonaco';
+export * from './useViewShared';
+export * from './useViewSharedStore';

package/build/esm/lib/core/components/View/hooks/useViewShared.d.ts

@@ -0,0 +1,4 @@
+export declare const useViewShared: <SharedStore extends Record<string, any>>() => {
+    store: SharedStore;
+    onChangeShared: <Name extends keyof SharedStore, Value extends SharedStore[Name]>(name: Name, value: Value) => void;
+};

package/build/esm/lib/core/components/View/hooks/useViewShared.js

@@ -0,0 +1,2 @@
+import { useDynamicFormsCtx } from './useDynamicFormsCtx';
+export const useViewShared = () => useDynamicFormsCtx().shared;

package/build/esm/lib/core/components/View/hooks/useViewSharedStore.d.ts

@@ -0,0 +1,4 @@
+export declare const useViewSharedStore: () => {
+    store: {};
+    onChangeShared: (name: string, value: any) => void;
+};

package/build/esm/lib/core/components/View/hooks/useViewSharedStore.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const useViewSharedStore = () => {
+    const [store, setStore] = React.useState({});
+    const onChangeShared = React.useCallback((name, value) => setStore((s) => (Object.assign(Object.assign({}, s), { [name]: value }))), [setStore]);
+    return { store, onChangeShared };
+};

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

@@ -2,4 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
-export { useDynamicFormsCtx } from './hooks';
+export { useDynamicFormsCtx, useViewShared } from './hooks';

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

@@ -2,4 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
-export { useDynamicFormsCtx } from './hooks';
+export { useDynamicFormsCtx, useViewShared } from './hooks';

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

@@ -11,4 +11,8 @@ export interface DynamicViewContext {
         link: Spec['viewSpec']['link'];
     }>;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    shared: {
+        store: Record<string, any>;
+        onChangeShared: (name: string, value: any) => void;
+    };
 }

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

@@ -1,4 +1,13 @@
 import React from 'react';
-import { StringIndependentInputProps } from '../../../../core';
+import { StringIndependentInput, StringSpec } from '../../../../core';
 import './TextContent.css';
-export declare const TextContent: React.FC<StringIndependentInputProps>;
+export interface TextContentComponentProps {
+    spec: StringSpec;
+    value?: string;
+    Layout?: React.FC<{
+        spec: StringSpec;
+        children: React.ReactElement;
+    }>;
+}
+export declare const TextContentComponent: React.FC<TextContentComponentProps>;
+export declare const TextContent: StringIndependentInput;

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { Label, Text } from '@gravity-ui/uikit';
 import cloneDeep from 'lodash/cloneDeep';
@@ -7,9 +6,8 @@ import { LazyLoader } from '../../LazyLoader';
 import { loadIcon } from './utils';
 import './TextContent.css';
 const b = block('text-content');
-export const TextContent = (_a) => {
-    var _b;
-    var { spec, Layout, input } = _a, restProps = __rest(_a, ["spec", "Layout", "input"]);
+export const TextContentComponent = ({ spec, value, Layout, }) => {
+    var _a;
     const { textContentParams, layoutDescription } = spec.viewSpec;
     const text = React.useMemo(() => ((textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text) ? textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text : layoutDescription), [layoutDescription, textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text]);
     if (!text) {
@@ -18,22 +16,34 @@ export const TextContent = (_a) => {
     const iconLib = (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) ? (React.createElement(LazyLoader, { component: loadIcon(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.icon) })) : null;
     let content = React.createElement("span", { dangerouslySetInnerHTML: { __html: text } });
     if (textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.themeLabel) {
-        content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: input.value, icon: iconLib }, content));
+        content = (React.createElement(Label, { size: "m", theme: textContentParams.themeLabel, className: b(), value: value, icon: iconLib }, content));
     }
     else {
         content = (React.createElement("div", { className: b('wrapper') },
-            iconLib ? (React.createElement(Text, { color: (_b = spec.viewSpec.textContentParams) === null || _b === void 0 ? void 0 : _b.iconColor, className: b('icon') }, iconLib)) : null,
+            iconLib ? (React.createElement(Text, { color: (_a = spec.viewSpec.textContentParams) === null || _a === void 0 ? void 0 : _a.iconColor, className: b('icon') }, iconLib)) : null,
             content,
-            input.value ? (React.createElement(React.Fragment, null,
+            value ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { className: b('separator') }, ":"),
-                React.createElement(Text, { color: "secondary" }, input.value))) : null));
+                React.createElement(Text, { color: "secondary" }, value))) : null));
     }
     if (Layout) {
         const _spec = cloneDeep(spec);
         if (!(textContentParams === null || textContentParams === void 0 ? void 0 : textContentParams.text)) {
             _spec.viewSpec.layoutDescription = undefined;
         }
-        return (React.createElement(Layout, Object.assign({ spec: _spec, input: input }, restProps), content));
+        return React.createElement(Layout, { spec: _spec }, content);
     }
     return content;
 };
+export const TextContent = ({ name, spec, Layout, input, arrayInput, meta, layoutProps, }) => {
+    const WrappedLayout = React.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                return (React.createElement(Layout, Object.assign({ name: name, input: input, layoutProps: layoutProps, arrayInput: arrayInput, meta: meta }, props)));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, layoutProps, input, arrayInput, meta, name]);
+    return React.createElement(TextContentComponent, { spec: spec, value: input.value, Layout: WrappedLayout });
+};

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextContentComponent } from '../Inputs';
+export const TextContentView = ({ name, spec, Layout, value }) => {
+    const WrappedLayout = React.useMemo(() => {
+        if (Layout) {
+            const Component = (props) => {
+                const VALUE_STUB = 'if u see this, please create issue about it here: https://github.com/gravity-ui/dynamic-forms/issues/new';
+                return React.createElement(Layout, Object.assign({ name: name, value: VALUE_STUB }, props));
+            };
+            return Component;
+        }
+        return undefined;
+    }, [Layout, name]);
+    return React.createElement(TextContentComponent, { spec: spec, value: value, Layout: WrappedLayout });
+};

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

@@ -12,6 +12,7 @@ export * from './ObjectValueInputView';
 export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
+export * from './TextContentView';
 export * from './TextLinkView';
 export * from './TimeRangeSelectorView';
 export * from './DateView';

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

@@ -12,6 +12,7 @@ export * from './ObjectValueInputView';
 export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
+export * from './TextContentView';
 export * from './TextLinkView';
 export * from './TimeRangeSelectorView';
 export * from './DateView';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -199,7 +199,7 @@ export const dynamicViewConfig = {
             file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },
-            text_content: undefined,
+            text_content: { Component: TextContentView, independent: true },
         },
         layouts: {
             row: ViewRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.11.0",
+  "version": "4.13.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -38,6 +38,7 @@
     "playwright:install": "playwright install --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"