@gravity-ui/dynamic-forms 1.0.0 → 1.0.2

package/build/esm/lib/kit/components/Inputs/MonacoInput/useMonacoOptions.d.ts

@@ -0,0 +1,2 @@
+import type { monaco } from 'react-monaco-editor';
+export declare const useMonacoOptions: (fontSize: number | undefined, readOnly: boolean) => monaco.editor.IStandaloneEditorConstructionOptions;

package/build/esm/lib/kit/components/Inputs/MonacoInput/useMonacoOptions.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export const useMonacoOptions = (fontSize, readOnly) => {
+    const options = React.useMemo(() => ({
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : 12,
+        readOnly: readOnly,
+        formatOnPaste: true,
+        formatOnType: true,
+        contextmenu: false,
+        minimap: { enabled: false },
+        autoClosingBrackets: 'languageDefined',
+        automaticLayout: true,
+    }), [fontSize, readOnly]);
+    return options;
+};

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

@@ -0,0 +1,3 @@
+.df-multi-select {
+  max-width: 305px;
+}

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

@@ -0,0 +1,3 @@
+import { ArrayInput } from '../../../../core';
+import './MultiSelect.css';
+export declare const MultiSelect: ArrayInput;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Select } from '@gravity-ui/uikit';
+import { transformArrIn, transformArrOut } from '../../../../core';
+import { block } from '../../../utils';
+import './MultiSelect.css';
+const b = block('multi-select');
+export const MultiSelect = ({ input, spec }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
+    const options = React.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                id,
+                value: id,
+                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                key: id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleToggle = React.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    const _value = React.useMemo(() => transformArrOut(value), [value]);
+    const handleChange = React.useCallback((value) => onChange(transformArrIn(value)), [onChange]);
+    return (React.createElement(Select, { width: "max", className: b(), value: _value, options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable, multiple: true }));
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+.df-number-with-scale__wrapper {
+  display: flex;
+}
+.df-number-with-scale__select {
+  max-width: 102px;
+  margin-left: 5px;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StringInputProps } from '../../../../core';
+import './NumberWithScale.css';
+export declare const NumberWithScale: React.FC<StringInputProps>;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Select, TextInput } from '@gravity-ui/uikit';
+import { block, divide, isCorrectSizeParams, multiply } from '../../../utils';
+import { useInitial } from './useInitial';
+import './NumberWithScale.css';
+const b = block('number-with-scale');
+const NumberWithScaleBase = ({ input, spec }) => {
+    const { value = '', onBlur, onFocus, onChange } = input;
+    const { sizeParams, disabled, placeholder } = spec.viewSpec;
+    const { defaultType, scale } = sizeParams;
+    const { initialValue, initialType } = useInitial(value || '', spec);
+    const [scaleValue, setScaleValue] = React.useState(initialType);
+    const [preparedValue, setPreparedValue] = React.useState(initialValue);
+    const scaleOptions = React.useMemo(() => Object.keys(scale)
+        .sort((a, b) => (BigInt(scale[a].factor) > BigInt(scale[b].factor) ? 0 : -1))
+        .map((type) => ({
+        value: type,
+        content: scale[type].title,
+    })), [scale]);
+    const incorrectStringNumber = React.useMemo(() => (value !== '' && value !== '0' ? divide(value, value) === null : false), [value]);
+    const handleChange = React.useCallback((value) => {
+        let _value = value;
+        if (value !== '') {
+            if (scaleValue !== defaultType) {
+                const cur = scale[scaleValue].factor;
+                const def = scale[defaultType].factor;
+                if (BigInt(cur) > BigInt(def)) {
+                    _value = multiply(value, divide(cur, def), 2);
+                }
+                else {
+                    _value = divide(value, divide(def, cur), 2);
+                }
+            }
+            else {
+                _value = multiply(value, '1');
+            }
+        }
+        setPreparedValue(value);
+        onChange(_value === null ? value : _value);
+    }, [onChange, setPreparedValue, scaleValue, defaultType, scale]);
+    const handleScaleChange = React.useCallback(([valueSelect]) => {
+        if (!incorrectStringNumber) {
+            if (value !== '') {
+                if (valueSelect !== defaultType) {
+                    const next = scale[valueSelect].factor;
+                    const def = scale[defaultType].factor;
+                    let _value;
+                    if (BigInt(next) > BigInt(def)) {
+                        _value = divide(value, divide(next, def), 2);
+                    }
+                    else {
+                        _value = multiply(value, divide(def, next), 2);
+                    }
+                    setPreparedValue(_value === null ? value : _value);
+                }
+                else {
+                    setPreparedValue(value);
+                }
+            }
+            setScaleValue(valueSelect);
+        }
+    }, [setPreparedValue, setScaleValue, incorrectStringNumber, value, scale, defaultType]);
+    return (React.createElement("div", { className: b('wrapper') },
+        React.createElement(TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled }),
+        React.createElement(Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber })));
+};
+export const NumberWithScale = (props) => isCorrectSizeParams(props.spec) ? React.createElement(NumberWithScaleBase, Object.assign({}, props)) : null;

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

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

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

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

package/build/esm/lib/kit/components/Inputs/NumberWithScale/useInitial.d.ts

@@ -0,0 +1,5 @@
+import { StringSpec } from '../../../../core';
+export declare const useInitial: (value: string, spec: StringSpec, deps?: any[]) => {
+    initialType: string;
+    initialValue: string;
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { divide, multiply } from '../../../utils';
+export const useInitial = (value, spec, deps = []) => {
+    const initial = React.useMemo(() => {
+        const { defaultType, viewType, scale } = spec.viewSpec.sizeParams;
+        const correctValue = divide(value, value) !== null;
+        let initialType = defaultType;
+        let initialValue = value;
+        if (viewType) {
+            if (correctValue) {
+                if (BigInt(scale[viewType].factor) > BigInt(scale[initialType].factor)) {
+                    initialValue = divide(value, divide(scale[viewType].factor, scale[initialType].factor), 2);
+                }
+                else {
+                    initialValue = multiply(value, divide(scale[initialType].factor, scale[viewType].factor), 2);
+                }
+            }
+            initialType = viewType;
+        }
+        if (correctValue) {
+            Object.keys(scale).forEach((key) => {
+                if (BigInt(scale[key].factor) > BigInt(scale[initialType].factor)) {
+                    const candidate = divide(value, divide(scale[key].factor, scale[defaultType].factor), 2);
+                    if (candidate !== null && BigInt(candidate.split('.')[0]) >= BigInt(1)) {
+                        initialType = key;
+                        initialValue = candidate;
+                    }
+                }
+            });
+        }
+        return { initialType, initialValue };
+    }, deps);
+    return initial;
+};

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

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

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

@@ -0,0 +1,33 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { Controller, transformArrIn, } from '../../../../core';
+export const ObjectBase = (_a) => {
+    var { spec, name, Layout } = _a, restProps = __rest(_a, ["spec", "name", "Layout"]);
+    const addBtn = React.useMemo(() => {
+        var _a;
+        return (React.createElement(Button, { onClick: () => restProps.input.onChange(transformArrIn(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null));
+    }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
+    const content = React.useMemo(() => {
+        if (!_.isObjectLike(spec.properties) || !Object.keys(spec.properties || {}).length) {
+            return null;
+        }
+        if (!restProps.input.value && !spec.viewSpec.showOptional) {
+            return addBtn;
+        }
+        const specProperties = Object.assign({}, spec.properties);
+        return (React.createElement(React.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
+            var _a;
+            return specProperties[property] ? (React.createElement(Controller, { initialValue: (_a = restProps.input.value) === null || _a === void 0 ? void 0 : _a[property], spec: specProperties[property], name: `${name ? name + '.' : ''}${property}`, parentOnChange: parentOnChange, key: `${name ? name + '.' : ''}${property}` })) : null;
+        })));
+    }, [spec.properties, spec.viewSpec.order, name, restProps.input.value, addBtn, parentOnChange]);
+    if (!Layout || !content) {
+        return content;
+    }
+    return (React.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+.df-oneof {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.df-oneof:last-child > .df-group-indent {
+  margin-bottom: 0;
+}
+.df-oneof:last-child > .df-group-indent:empty + .df-oneof__toggler {
+  margin-bottom: 0;
+}
+.df-oneof__toggler {
+  margin-bottom: 15px;
+}

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import _ from 'lodash';
+import { GroupIndent } from '../../';
+import { Controller } from '../../../../core';
+import { useOneOf } from '../../../hooks';
+import { block } from '../../../utils';
+import './OneOf.css';
+const b = block('oneof');
+export const OneOf = (props) => {
+    var _a;
+    const { oneOfValue, specProperties, toggler } = useOneOf({ props });
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
+        const value = _.set({}, childName.split(`${props.input.name}.`).join(''), childValue);
+        props.input.onChange(value, childErrors);
+    }, [props.input.onChange, props.input.name]);
+    return (React.createElement("div", { className: b() },
+        specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
+            React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${props.name}.${oneOfValue}` }))) : null,
+        React.createElement("div", { className: b('toggler') }, toggler)));
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+.df-oneof-card {
+  margin-bottom: 20px;
+}
+.df-oneof-card .df-accordeon-card__header-toggle-btn {
+  margin-left: 5px;
+}

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

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import _ from 'lodash';
+import { AccordeonCard } from '../../';
+import { Controller, isArrayItem, } from '../../../../core';
+import { useErrorChecker, useOneOf } from '../../../hooks';
+import { block } from '../../../utils';
+import { Row2 } from '../../Layouts';
+import { RemoveButton } from '../../Layouts/Accordeon/RemoveButton';
+import './OneOfCard.css';
+const b = block('oneof-card');
+export const OneOfCard = (props) => {
+    var _a;
+    const { input, meta, spec, name } = props;
+    const [open, setOpen] = React.useState(true);
+    const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onOpen = React.useCallback(() => setOpen(true), [setOpen]);
+    const { oneOfValue, specProperties, togglerInput } = useOneOf({
+        props,
+        onTogglerChange: onOpen,
+    });
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const toggler = React.useMemo(() => {
+        const specWithoutDescription = Object.assign(Object.assign({}, props.spec), { viewSpec: Object.assign(Object.assign({}, props.spec.viewSpec), { layoutDescription: '' }) });
+        const name = arrayItem ? '' : props.name;
+        return (React.createElement(Row2, Object.assign({}, props, { spec: specWithoutDescription, name: name }), togglerInput));
+    }, [togglerInput, props, arrayItem]);
+    const headerActionsTemplate = React.useMemo(() => {
+        if (arrayItem) {
+            return React.createElement(RemoveButton, { onDrop: input.onDrop });
+        }
+        return null;
+    }, [arrayItem, input.onDrop]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => {
+        const value = _.set({}, childName.split(`${input.name}.`).join(''), childValue);
+        input.onChange(value, childErrors);
+    }, [input.onChange, input.name]);
+    useErrorChecker({ name, meta, open, setOpen });
+    return (React.createElement(AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (React.createElement(Controller, { initialValue: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${name}.${oneOfValue}` })) : null));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+.df-select {
+  max-width: 305px;
+}

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

@@ -0,0 +1,3 @@
+import { StringInput } from '../../../../core';
+import './Select.css';
+export declare const Select: StringInput;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Select as SelectBase } from '@gravity-ui/uikit';
+import { block } from '../../../utils';
+import './Select.css';
+const b = block('select');
+export const Select = ({ input, spec }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const filterable = React.useMemo(() => { var _a; return (((_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9; }, [(_a = spec.enum) === null || _a === void 0 ? void 0 : _a.length]);
+    const options = React.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                id,
+                value: id,
+                content: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+                key: id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleChange = React.useCallback((v) => onChange(v[0]), [onChange]);
+    const handleToggle = React.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    return (React.createElement(SelectBase, { className: b(), width: "max", value: [value], options: options, onUpdate: handleChange, onOpenChange: handleToggle, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterable: filterable }));
+};

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

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

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

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

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

@@ -0,0 +1,32 @@
+.df-table-array__table {
+  margin-bottom: 10px;
+}
+.df-table-array__cell .yc-text-input,
+.df-table-array__cell .yc-select-control,
+.df-table-array__cell .yc-select,
+.df-table-array__cell .g-select {
+  max-width: 150px;
+  min-width: 150px;
+}
+.df-table-array__cell_arr, .df-table-array__cell_obj {
+  padding-left: 3px;
+}
+.df-table-array__cell_arr .yc-text-input,
+.df-table-array__cell_arr .yc-select-control:not(.df-multi-select),
+.df-table-array__cell_arr .yc-select:not(.df-multi-select),
+.df-table-array__cell_arr .g-select:not(.df-multi-select), .df-table-array__cell_obj .yc-text-input,
+.df-table-array__cell_obj .yc-select-control:not(.df-multi-select),
+.df-table-array__cell_obj .yc-select:not(.df-multi-select),
+.df-table-array__cell_obj .g-select:not(.df-multi-select) {
+  max-width: unset;
+}
+.df-table-array__cell_arr > .simple-vertical-accordeon, .df-table-array__cell_obj > .simple-vertical-accordeon {
+  margin-bottom: 0;
+}
+.df-table-array__cell_bool {
+  max-width: 50px;
+  min-width: 50px;
+}
+.df-table-array__idx {
+  padding-top: 6px;
+}

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

@@ -0,0 +1,3 @@
+import { ArrayInput } from '../../../../core';
+import './TableArrayInput.css';
+export declare const TableArrayInput: ArrayInput;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Plus, Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Table } from '@gravity-ui/uikit';
+import _ from 'lodash';
+import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
+import { block } from '../../../utils';
+import './TableArrayInput.css';
+const b = block('table-array');
+export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
+    const keys = React.useMemo(() => Object.keys(arrayInput.value || {})
+        .filter((k) => k !== OBJECT_ARRAY_FLAG &&
+        k !== OBJECT_ARRAY_CNT &&
+        arrayInput.value[k] !== REMOVED_ITEM)
+        .map((k) => k.split('<').join('').split('>').join(''))
+        .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
+    const onItemAdd = React.useCallback(() => {
+        arrayInput.onItemAdd({});
+    }, [arrayInput.onItemAdd]);
+    const onItemRemove = React.useCallback((key) => {
+        arrayInput.onItemRemove(key);
+    }, [arrayInput.onItemRemove]);
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => _.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const columns = React.useMemo(() => {
+        const { items, viewSpec: { table }, } = spec;
+        if (!(table === null || table === void 0 ? void 0 : table.length) || !isObjectSpec(items)) {
+            return null;
+        }
+        const idxColumn = {
+            id: 'idx',
+            name: '',
+            sticky: 'left',
+            template: (key, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${key}` }, idx + 1)),
+        };
+        const removeColumn = {
+            id: 'remove',
+            name: '',
+            sticky: 'right',
+            template: (key) => (React.createElement(Button, { view: "flat", onClick: () => onItemRemove(key), key: `remove-${key}` },
+                React.createElement(Icon, { data: Xmark, size: 16 }))),
+        };
+        const columns = table.map(({ property, label }) => ({
+            id: property,
+            name: label,
+            template: (key) => {
+                var _a, _b, _c;
+                const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
+                if (!entitySpec) {
+                    return null;
+                }
+                return (React.createElement("div", { className: b('cell', {
+                        bool: isBooleanSpec(entitySpec),
+                        arr: isArraySpec(entitySpec),
+                        obj: isObjectSpec(entitySpec),
+                    }), key: `${name}.<${key}>.${property}` },
+                    React.createElement(Controller, { initialValue: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: entitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange })));
+            },
+        }));
+        return [idxColumn, ...columns, removeColumn];
+    }, [name, spec, onItemRemove, parentOnChange, input.value]);
+    if (!columns) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        keys.length ? (React.createElement(Table, { className: b('table'), data: keys, columns: columns, getRowId: (_, idx) => `${name}-${idx}`, verticalAlign: "top" })) : null,
+        !arrayInput.value && spec.defaultValue ? (React.createElement(Button, { onClick: () => input.onChange(transformArrIn(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null)) : (React.createElement(Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            React.createElement(Icon, { data: Plus, size: 14 }),
+            spec.viewSpec.itemLabel || null))));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import _ from 'lodash';
+export const Text = ({ input, spec }) => {
+    const { value, onBlur, onChange, onFocus } = input;
+    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]);
+    return (React.createElement(TextInput, { type: type, value: _.isNil(value) ? '' : `${value}`, hasClear: true, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, autoComplete: type === 'password' ? 'new-password' : undefined }));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+.df-text-content.yc-label {
+  height: auto;
+  width: auto;
+}
+.df-text-content .yc-label__text {
+  text-align: initial;
+  white-space: initial;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StringIndependentInputProps } from '../../../../core';
+import './TextContent.css';
+export declare const TextContent: React.FC<StringIndependentInputProps>;