@gravity-ui/dynamic-forms 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.4.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.3.0...v1.4.0) (2023-04-11)
+
+
+### Features
+
+* **FileInput:** added new input file input ([#24](https://github.com/gravity-ui/dynamic-forms/issues/24)) ([1553318](https://github.com/gravity-ui/dynamic-forms/commit/155331839e50ab4192b69ba32992e37b972378c4))
+
+## [1.3.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.2.0...v1.3.0) (2023-03-31)
+
+
+### Features
+
+* update row note position ([#20](https://github.com/gravity-ui/dynamic-forms/issues/20)) ([4f15395](https://github.com/gravity-ui/dynamic-forms/commit/4f153959596d3325ddeb2c2e9b24382e36d2db75))
+
+
+### Bug Fixes
+
+* add fixes + tests ([#15](https://github.com/gravity-ui/dynamic-forms/issues/15)) ([80113dd](https://github.com/gravity-ui/dynamic-forms/commit/80113dd05737b18158865506ed3ac8479d69e8d0))
+* **search:** fixed bug related to form blinking ([#21](https://github.com/gravity-ui/dynamic-forms/issues/21)) ([20bab2f](https://github.com/gravity-ui/dynamic-forms/commit/20bab2f628d698714bcee35993583f2c7712e843))
+* **textArea:** fixed row for text area ([#22](https://github.com/gravity-ui/dynamic-forms/issues/22)) ([d5469e7](https://github.com/gravity-ui/dynamic-forms/commit/d5469e7dd0eee86b26e8daba94e93d2fa9465b96))
+
 ## [1.2.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.1.1...v1.2.0) (2023-03-23)
 
 

package/README.md

@@ -1,10 +1,6 @@
 # @gravity-ui/dynamic-forms · [![npm package](https://img.shields.io/npm/v/@gravity-ui/dynamic-forms)](https://www.npmjs.com/package/@gravity-ui/dynamic-forms) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/dynamic-forms/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/dynamic-forms/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/dynamic-forms/)
 
-This is a template for typical package.
-
-1. Create a new repository and use this repository as a template.
-2. Replace `dynamic-forms` through the whole repository with your name.
-3. Overwrite other things at your desire.
+The JSON Schema-based library for rendering forms and form values.
 
 ## Install
 
@@ -13,3 +9,36 @@ npm install --save-dev @gravity-ui/dynamic-forms
 ```
 
 ## Usage
+
+```jsx
+import {DynamicField, Spec, dynamicConfig} from '@gravity-ui/dynamic-forms';
+
+// To embed in a final-form
+<DynamicField name={name} spec={spec} config={config} />;
+
+import {DynamicView, dynamicViewConfig} from '@gravity-ui/dynamic-forms';
+
+// To get an overview of the values
+<DynamicView value={value} spec={spec} config={dynamicViewConfig} />;
+```
+
+### I18N
+
+Certain components include text tokens (words and phrases) that are available in two languages: `en` (the default) and `ru`. To set the language, use the `configure` function:
+
+```js
+// index.js
+
+import {configure, Lang} from '@gravity-ui/dynamic-forms';
+
+configure({lang: Lang.Ru});
+```
+
+## Development
+
+To start the development server with storybook execute the following command:
+
+```shell
+npm ci
+npm run dev
+```

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

@@ -5,9 +5,8 @@ const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const helpers_1 = require("../../helpers");
 const hooks_1 = require("./hooks");
-const useSearch_1 = require("./hooks/useSearch");
 const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount, }) => {
-    const { tools } = (0, hooks_1.useDynamicFormsCtx)();
+    const { tools, __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);
@@ -20,7 +19,14 @@ const Controller = ({ spec, name, initialValue, parentOnChange, parentOnUnmount,
         parentOnChange,
         parentOnUnmount,
     });
-    const withSearch = (0, useSearch_1.useSearch)(spec, renderProps.input.value, name);
+    const withSearch = (0, hooks_1.useSearch)(spec, renderProps.input.value, name);
+    (0, hooks_1.useControllerMirror)(name, {
+        useComponents: { inputEntity, Layout },
+        useRender: render,
+        useValidate: validate,
+        useField: renderProps,
+        useSearch: withSearch,
+    }, __mirror);
     if (lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec)) {
         return withSearch(render(renderProps));
     }

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

@@ -9,16 +9,18 @@ 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, search }) => {
+const DynamicField = ({ name, spec, config, Monaco, search, __mirror, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
     const SearchContext = (0, hooks_1.useCreateSearchContext)();
-    const { tools, watcher } = (0, hooks_1.useStore)(name);
-    const { setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)(name);
+    const { tools, store } = (0, hooks_1.useStore)(name);
+    const watcher = (0, hooks_1.useIntegrationFF)(store);
+    const { store: searchStore, setField, removeField, isHiddenField } = (0, hooks_1.useSearchStore)();
     const context = react_1.default.useMemo(() => ({
         config,
         Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
         tools,
-    }), [tools, config, Monaco]);
+        __mirror,
+    }), [tools, config, Monaco, __mirror]);
     const searchContext = react_1.default.useMemo(() => ({
         setField,
         removeField,
@@ -26,6 +28,11 @@ const DynamicField = ({ name, spec, config, Monaco, search }) => {
         searchFunction: lodash_1.default.isFunction(search) ? search : (0, utils_1.getDefaultSearchFunction)(search),
     }), [isHiddenField, removeField, search, setField]);
     const correctParams = react_1.default.useMemo(() => lodash_1.default.isString(name) && (0, helpers_1.isCorrectSpec)(spec) && (0, utils_1.isCorrectConfig)(config), [name, spec, config]);
+    (0, hooks_1.useDynamicFieldMirror)({
+        useStore: { tools, store },
+        useIntegrationFF: watcher,
+        useSearchStore: { store: searchStore, setField, removeField, isHiddenField },
+    }, __mirror);
     if (correctParams) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(SearchContext.Provider, { value: searchContext },

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

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./useComponents"), exports);
+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("./useField"), exports);
+tslib_1.__exportStar(require("./useIntegrationFF"), exports);
 tslib_1.__exportStar(require("./useRender"), exports);
 tslib_1.__exportStar(require("./useStore"), exports);
 tslib_1.__exportStar(require("./useValidate"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControllerMirror = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useControllerMirror = (name, params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.controller) {
+        __mirror.controller[name] = params;
+    }
+    react_1.default.useEffect(() => {
+        return () => {
+            var _a;
+            if ((_a = __mirror === null || __mirror === void 0 ? void 0 : __mirror.controller) === null || _a === void 0 ? void 0 : _a[name]) {
+                delete __mirror.controller[name];
+            }
+        };
+    }, []);
+};
+exports.useControllerMirror = useControllerMirror;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicFieldMirror = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useDynamicFieldMirror = (params, __mirror) => {
+    if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+        __mirror.field.useStore = params.useStore;
+        __mirror.field.useIntegrationFF = params.useIntegrationFF;
+        __mirror.field.useSearchStore = params.useSearchStore;
+    }
+    react_1.default.useEffect(() => {
+        return () => {
+            if (__mirror === null || __mirror === void 0 ? void 0 : __mirror.field) {
+                delete __mirror.field.useStore;
+                delete __mirror.field.useIntegrationFF;
+                delete __mirror.field.useSearchStore;
+            }
+        };
+    }, []);
+};
+exports.useDynamicFieldMirror = useDynamicFieldMirror;

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

@@ -126,7 +126,7 @@ const useField = ({ name, spec, initialValue, validate: propsValidate, tools, pa
         onDrop,
     ]);
     react_1.default.useEffect(() => {
-        if (!firstRenderRef.current || !lodash_1.default.isEqual(initialValue, state.value)) {
+        if (!firstRenderRef.current || !lodash_1.default.isEqual(initialValue, state.value) || state.error) {
             (parentOnChange ? parentOnChange : tools.onChange)(name, state.value, Object.assign(Object.assign({}, state.childErrors), { [name]: state.error }));
         }
     }, [state.value]);

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntegrationFF = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const react_final_form_1 = require("react-final-form");
+const utils_1 = require("../utils");
+const useIntegrationFF = (store) => {
+    const form = (0, react_final_form_1.useForm)();
+    const watcher = react_1.default.useMemo(() => {
+        const props = {
+            name: store.name,
+            render: () => null,
+            subscription: {},
+            validate: () => {
+                const asyncErrors = [];
+                let error;
+                lodash_1.default.values(store.errors).forEach((err) => {
+                    if (err) {
+                        if (lodash_1.default.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
+                            asyncErrors.push(err);
+                        }
+                        else {
+                            error = err;
+                        }
+                    }
+                });
+                if (asyncErrors.length) {
+                    return Promise.all(asyncErrors).then((r) => r[0]);
+                }
+                return error;
+            },
+        };
+        return react_1.default.createElement(react_final_form_1.Field, Object.assign({}, props));
+    }, [store.name, store.errors]);
+    const change = react_1.default.useCallback((0, debounce_1.default)((value) => {
+        form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
+    }, 100), [form.change, store.name]);
+    react_1.default.useEffect(() => {
+        change(store.values);
+    }, [store.values]);
+    return watcher;
+};
+exports.useIntegrationFF = useIntegrationFF;

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

@@ -5,8 +5,8 @@ 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 useSearchStore = (name) => {
-    const [store, setStore] = react_1.default.useState({ [name]: false });
+const useSearchStore = () => {
+    const [store, setStore] = react_1.default.useState({});
     const isHiddenField = react_1.default.useCallback((name) => {
         const selfFlag = store[name];
         if (selfFlag === false) {
@@ -24,6 +24,9 @@ const useSearchStore = (name) => {
                 return false;
             }
         }
+        if (lodash_1.default.isUndefined(selfFlag)) {
+            return false;
+        }
         return true;
     }, [store]);
     return {

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

@@ -21,44 +21,12 @@ const useStore = (name) => {
         };
     });
     const submitFailed = form.getState().submitFailed;
-    const watcher = react_1.default.useMemo(() => {
-        const props = {
-            name: store.name,
-            render: () => null,
-            subscription: {},
-            validate: () => {
-                const asyncErrors = [];
-                let error;
-                lodash_1.default.values(store.errors).forEach((err) => {
-                    if (err) {
-                        if (lodash_1.default.isFunction(err === null || err === void 0 ? void 0 : err.then)) {
-                            asyncErrors.push(err);
-                        }
-                        else {
-                            error = err;
-                        }
-                    }
-                });
-                if (asyncErrors.length) {
-                    return Promise.all(asyncErrors).then((r) => r[0]);
-                }
-                return error;
-            },
-        };
-        return react_1.default.createElement(react_final_form_1.Field, Object.assign({}, props));
-    }, [store.name, store.errors]);
     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, value), errors: errors || {} }))),
-        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { errors: lodash_1.default.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
+        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 || {} }))),
+        onUnmount: (name) => setStore((store) => (Object.assign(Object.assign({}, store), { values: lodash_1.default.omit(store.values, name), errors: lodash_1.default.omit(store.errors, Object.keys(store.errors).filter((key) => key.startsWith(name))) }))),
         submitFailed,
     }), [store.initialValue, setStore, submitFailed]);
-    const change = react_1.default.useCallback(lodash_1.default.debounce((value) => {
-        form.change(store.name, lodash_1.default.get((0, utils_1.transformArrOut)(value), store.name));
-    }, 100), [form.change, store.name]);
-    react_1.default.useEffect(() => {
-        change(store.values);
-    }, [store.values]);
     react_1.default.useEffect(() => {
         if (!firstRenderRef.current) {
             const initialValue = (0, utils_1.transformArrIn)({
@@ -75,6 +43,6 @@ const useStore = (name) => {
     react_1.default.useEffect(() => {
         firstRenderRef.current = false;
     }, []);
-    return { tools, watcher };
+    return { tools, store };
 };
 exports.useStore = useStore;

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

@@ -8,8 +8,10 @@ tslib_1.__exportStar(require("./context"), exports);
 tslib_1.__exportStar(require("./field"), exports);
 tslib_1.__exportStar(require("./input"), exports);
 tslib_1.__exportStar(require("./layout"), exports);
+tslib_1.__exportStar(require("./mirror"), exports);
 tslib_1.__exportStar(require("./number"), exports);
 tslib_1.__exportStar(require("./object"), exports);
+tslib_1.__exportStar(require("./store"), exports);
 tslib_1.__exportStar(require("./string"), exports);
 tslib_1.__exportStar(require("./validators"), exports);
 tslib_1.__exportStar(require("./value"), exports);

package/build/cjs/lib/core/components/Form/types/mirror.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/core/components/Form/types/store.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("./hooks");
 const ViewController = ({ spec, name, }) => {
-    const { value, Link } = (0, hooks_1.useDynamicFormsCtx)();
-    const { viewEntity, Layout } = (0, hooks_1.useComponents)(spec);
+    const { config, value, Link } = (0, hooks_1.useDynamicFormsCtx)();
+    const { viewEntity, Layout } = (0, hooks_1.useComponents)(spec, config);
     const render = (0, hooks_1.useRender)({ name, value, spec, viewEntity, Layout, Link });
     return react_1.default.createElement(react_1.default.Fragment, null, render);
 };

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

@@ -7,10 +7,8 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_is_1 = require("react-is");
 const helpers_1 = require("../../../helpers");
 const helpers_2 = require("../helpers");
-const _1 = require("./");
-const useComponents = (spec) => {
+const useComponents = (spec, config) => {
     var _a, _b;
-    const { config } = (0, _1.useDynamicFormsCtx)();
     const { views, layouts } = react_1.default.useMemo(() => {
         if ((0, helpers_2.isCorrectViewConfig)(config) && (0, helpers_1.isCorrectSpec)(spec)) {
             return config[spec.type];

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

@@ -0,0 +1,20 @@
+.df-file-input {
+  display: flex;
+}
+.df-file-input__input {
+  opacity: 0;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+}
+.df-file-input__file-name {
+  display: block;
+  margin: auto 10px;
+  max-width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--yc-color-text-secondary);
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
+const utils_1 = require("../../../utils");
+const utils_2 = require("./utils");
+const b = (0, utils_1.block)('file-input');
+const FileInput = ({ input, spec }) => {
+    var _a, _b;
+    const { value, onChange } = input;
+    const inputRef = react_1.default.useRef(null);
+    const [fileName, setFileName] = react_1.default.useState('');
+    const handleClick = react_1.default.useCallback(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleDownload = react_1.default.useCallback(async (file) => { var _a; return await (0, utils_2.readFile)(file, (_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod); }, [(_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.readAsMethod]);
+    const handleReset = react_1.default.useCallback(() => {
+        setFileName('');
+        onChange('');
+    }, [onChange]);
+    const handleInputChange = react_1.default.useCallback(async (event) => {
+        const file = event.target.files;
+        if (file && file.length > 0) {
+            setFileName(file[0].name);
+            const data = (await handleDownload(file[0]));
+            onChange(data);
+        }
+    }, [handleDownload, onChange]);
+    const fileNameContent = react_1.default.useMemo(() => {
+        if (value) {
+            if (fileName) {
+                return react_1.default.createElement(react_1.default.Fragment, null, fileName);
+            }
+            return (react_1.default.createElement(uikit_1.Label, { size: "m", theme: "info" }, (0, i18n_1.default)('label-data_loaded')));
+        }
+        return null;
+    }, [fileName, value]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Button, { disabled: spec.viewSpec.disabled, onClick: handleClick }, (0, i18n_1.default)('button-upload_file')),
+        react_1.default.createElement("input", { type: "file", ref: inputRef, autoComplete: "off", disabled: spec.viewSpec.disabled, onChange: handleInputChange, className: b('input'), tabIndex: -1, accept: (_b = spec.viewSpec.fileInput) === null || _b === void 0 ? void 0 : _b.accept }),
+        react_1.default.createElement("span", { className: b('file-name') }, fileNameContent),
+        value ? (react_1.default.createElement(uikit_1.Button, { view: "flat", onClick: handleReset, disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark, size: 16 }))) : null));
+};
+exports.FileInput = FileInput;

package/build/cjs/lib/kit/components/Inputs/FileInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileInput"), exports);

package/build/cjs/lib/kit/components/Inputs/FileInput/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readFile = void 0;
+function readFile(file, readAsMethod = 'readAsBinaryString') {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        if (typeof reader[readAsMethod] !== 'function') {
+            reject(new Error(`Unknown parameter: ${readAsMethod}`));
+            return;
+        }
+        reader.addEventListener('load', () => resolve(reader.result));
+        reader.addEventListener('error', () => reject(reader.error));
+        reader[readAsMethod](file);
+    });
+}
+exports.readFile = readFile;

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

@@ -68,9 +68,10 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
         return [idxColumn, ...columns, removeColumn];
     }, [name, spec, onItemRemove, parentOnChange, parentOnUnmount, input.value]);
     const getRowClassNames = react_1.default.useCallback(({ key }) => {
-        const searchResult = isHiddenField(`${name}.<${key}>`);
+        var _a;
+        const searchResult = (_a = spec.viewSpec.table) === null || _a === void 0 ? void 0 : _a.every(({ property }) => isHiddenField(`${name}.<${key}>.${property}`));
         return [b('row', { hidden: searchResult })];
-    }, [isHiddenField, name]);
+    }, [isHiddenField, name, spec.viewSpec.table]);
     if (!columns) {
         return null;
     }

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const TEXT_LINK_PROPERTY_NAME = 'text';
+const TextLink = ({ spec, input, name }) => {
+    var _a;
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const parentOnUnmount = react_1.default.useCallback((childName) => input.onChange((currentValue) => currentValue, { [childName]: false }), [input.onChange]);
+    const specProperties = Object.assign({}, spec.properties);
+    if (!specProperties[TEXT_LINK_PROPERTY_NAME] ||
+        !(0, core_1.isStringSpec)(specProperties[TEXT_LINK_PROPERTY_NAME])) {
+        return null;
+    }
+    return (react_1.default.createElement(core_1.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 }));
+};
+exports.TextLink = TextLink;

package/build/cjs/lib/kit/components/Inputs/TextLink/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TextLink"), exports);

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

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 tslib_1.__exportStar(require("./Checkbox"), exports);
+tslib_1.__exportStar(require("./FileInput"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);
 tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);
@@ -14,5 +15,6 @@ tslib_1.__exportStar(require("./TableArrayInput"), exports);
 tslib_1.__exportStar(require("./Text"), exports);
 tslib_1.__exportStar(require("./TextArea"), exports);
 tslib_1.__exportStar(require("./TextContent"), exports);
+tslib_1.__exportStar(require("./TextLink"), exports);
 tslib_1.__exportStar(require("./NumberWithScale"), exports);
 tslib_1.__exportStar(require("./MonacoInput"), exports);

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

@@ -13,13 +13,16 @@
 }
 .df-row__left {
   width: 180px;
+  min-height: 28px;
   display: flex;
+  margin-bottom: auto;
   flex-direction: column;
   flex-shrink: 0;
 }
 .df-row__left-inner {
-  min-height: 28px;
-  display: flex;
+  display: inline;
+  margin-top: auto;
+  margin-bottom: auto;
 }
 .df-row__left::after {
   content: "";
@@ -27,18 +30,24 @@
   flex-shrink: 1;
 }
 .df-row__title {
-  align-self: center;
+  word-break: break-word;
+  margin-right: 3px;
+}
+.df-row__title_required::after {
+  content: "*";
+  color: var(--yc-color-text-danger);
 }
 .df-row__note {
-  height: 28px;
-  display: flex;
-  align-items: center;
-  margin-left: 5px;
+  padding-right: 16px;
+}
+.df-row__note-inner {
+  position: absolute;
+  margin-top: 1px;
 }
-.df-row__note .yc-help-popover {
+.df-row__note-inner .yc-help-popover {
   display: flex;
 }
-.df-row__note .yc-help-popover > span {
+.df-row__note-inner .yc-help-popover > span {
   display: flex;
 }
 .df-row__right {
@@ -59,6 +68,5 @@
   margin-left: 5px;
 }
 .df-row__required-mark {
-  margin-left: 2px;
   color: var(--yc-color-text-danger);
 }

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

@@ -14,11 +14,10 @@ const RowBase = ({ name, spec, input, meta, verboseDescription, children, }) =>
     return (react_1.default.createElement("div", { className: b({ 'extra-width': (0, core_1.isArraySpec)(spec) || arrayItem }) },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement("div", { className: b('left-inner') },
-                react_1.default.createElement("div", { className: b('title') },
-                    spec.viewSpec.layoutTitle,
-                    spec.required && react_1.default.createElement("span", { className: b('required-mark') }, "*")),
-                !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("div", { className: b('note') },
-                    react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] }))) : null)),
+                react_1.default.createElement("span", { className: b('title', { required: spec.required }) }, spec.viewSpec.layoutTitle),
+                !verboseDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement("span", { className: b('note') },
+                    react_1.default.createElement("span", { className: b('note-inner') },
+                        react_1.default.createElement(uikit_1.HelpPopover, { htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })))) : null)),
         react_1.default.createElement("div", { className: b('right') },
             react_1.default.createElement("div", { className: b('right-inner') },
                 react_1.default.createElement(components_1.ErrorWrapper, { name: name, meta: meta, withoutChildErrorStyles: (0, core_1.isArraySpec)(spec) || (0, core_1.isObjectSpec)(spec) }, children),

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInputView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const i18n_1 = tslib_1.__importDefault(require("../../../../kit/i18n"));
+const components_1 = require("../../../components");
+const FileInputView = ({ value, spec }) => {
+    var _a;
+    return (react_1.default.createElement(components_1.LongValue, { value: ((_a = spec.viewSpec.fileInput) === null || _a === void 0 ? void 0 : _a.ignoreText) ? (0, i18n_1.default)('label-data_loaded') : value }));
+};
+exports.FileInputView = FileInputView;

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./FileInputView"), exports);