@gravity-ui/dynamic-forms 1.0.0 → 1.0.1

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayBase = 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 lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const ArrayBase = ({ spec, name, arrayInput, input }) => {
+    const keys = react_1.default.useMemo(() => Object.keys(arrayInput.value || {})
+        .filter((k) => k !== core_1.OBJECT_ARRAY_FLAG &&
+        k !== core_1.OBJECT_ARRAY_CNT &&
+        arrayInput.value[k] !== core_1.REMOVED_ITEM)
+        .map((k) => k.split('<').join('').split('>').join(''))
+        .sort((a, b) => Number(a) - Number(b)), [arrayInput.value]);
+    const itemSpecCorrect = react_1.default.useMemo(() => (0, core_1.isCorrectSpec)(spec.items), [spec.items]);
+    const onItemAdd = react_1.default.useCallback(() => {
+        var _a;
+        let item;
+        if (!((_a = spec.items) === null || _a === void 0 ? void 0 : _a.required)) {
+            if ((0, core_1.isArraySpec)(spec.items)) {
+                item = { OBJECT_ARRAY_FLAG: true, OBJECT_ARRAY_CNT: 0 };
+            }
+            else if ((0, core_1.isObjectSpec)(spec.items)) {
+                item = {};
+            }
+        }
+        arrayInput.onItemAdd(item);
+    }, [arrayInput.onItemAdd, spec.items]);
+    const getItemSpec = react_1.default.useCallback((idx) => {
+        if (!itemSpecCorrect) {
+            return null;
+        }
+        const itemSpec = Object.assign({}, spec.items);
+        itemSpec.viewSpec = Object.assign(Object.assign({}, itemSpec.viewSpec), { layoutTitle: itemSpec.viewSpec.layoutTitle
+                ? `${itemSpec.viewSpec.layoutTitle} ${idx + 1}`
+                : `${idx + 1}` });
+        return itemSpec;
+    }, [spec.items, itemSpecCorrect]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${input.name}.`).join(''), childValue), childErrors), [input.onChange, input.name]);
+    const items = react_1.default.useMemo(() => keys.map((key, idx) => {
+        var _a;
+        const itemSpec = getItemSpec(idx);
+        if (!itemSpec) {
+            return null;
+        }
+        return (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[`<${key}>`], parentOnChange: parentOnChange, spec: itemSpec, name: `${name}.<${key}>`, key: `${name}.<${key}>` }));
+    }), [keys.join(''), name, getItemSpec, parentOnChange, input.value]);
+    if (!itemSpecCorrect) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        items,
+        !arrayInput.value && spec.defaultValue ? (react_1.default.createElement(uikit_1.Button, { onClick: () => input.onChange((0, core_1.transformArrIn)(spec.defaultValue)), disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null)) : (react_1.default.createElement(uikit_1.Button, { onClick: onItemAdd, disabled: spec.viewSpec.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            spec.viewSpec.itemLabel || null))));
+};
+exports.ArrayBase = ArrayBase;

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardOneOf = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../../");
+const core_1 = require("../../../../core");
+const hooks_1 = require("../../../hooks");
+const Layouts_1 = require("../../Layouts");
+const RemoveButton_1 = require("../../Layouts/Accordeon/RemoveButton");
+const CardOneOf = (props) => {
+    var _a;
+    const { input, meta, spec, name } = props;
+    const [open, setOpen] = react_1.default.useState(true);
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onOpen = react_1.default.useCallback(() => setOpen(true), [setOpen]);
+    const { oneOfValue, specProperties, togglerInput } = (0, hooks_1.useOneOf)({
+        props,
+        onTogglerChange: onOpen,
+    });
+    const toggler = react_1.default.useMemo(() => (react_1.default.createElement(Layouts_1.Row, Object.assign({}, props, { name: "__stub-name" }), togglerInput)), [togglerInput, props]);
+    const actions = react_1.default.useMemo(() => {
+        if ((0, core_1.isArrayItem)(name)) {
+            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop });
+        }
+        return;
+    }, [name, input.onDrop]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
+        const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
+        input.onChange(value, childErrors);
+    }, [input.onChange, input.name]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(__1.Card, { title: toggler, description: spec.viewSpec.layoutDescription, actions: actions, open: open, onToggle: onToggle, disableHeaderToggle: true }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.Controller, { initialValue: (_a = input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${name}.${oneOfValue}`, parentOnChange: parentOnChange, key: `${name}.${oneOfValue}` })) : null));
+};
+exports.CardOneOf = CardOneOf;

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

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

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

@@ -0,0 +1,5 @@
+.df-checkbox {
+  height: 28px;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('checkbox');
+const Checkbox = ({ input, spec }) => {
+    const { value, onBlur, onChange, onFocus } = input;
+    const handleChange = react_1.default.useCallback((e) => onChange(e.target.checked), [onChange]);
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement(uikit_1.Checkbox, { checked: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, disabled: spec.viewSpec.disabled })));
+};
+exports.Checkbox = Checkbox;

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

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

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css

@@ -0,0 +1,16 @@
+.df-monaco-header {
+  height: 52px;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  align-items: center;
+  background-color: var(--yc-color-private-black-50-solid);
+}
+.df-monaco-header_card {
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+.df-monaco-header__language {
+  margin-top: 2px;
+  margin-left: 10px;
+  font-size: 16px;
+}

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonacoHeader = 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 utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('monaco-header');
+const MonacoHeader = ({ language, editButton, card }) => (react_1.default.createElement("div", { className: b({ card }) },
+    react_1.default.createElement("div", null,
+        react_1.default.createElement(uikit_1.Icon, { data: icons_1.File, size: 18 }),
+        react_1.default.createElement("span", { className: b('language') }, language)), editButton !== null && editButton !== void 0 ? editButton : null));
+exports.MonacoHeader = MonacoHeader;

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css

@@ -0,0 +1,9 @@
+.df-monaco-input {
+  width: 550px;
+}
+.df-monaco-input_card {
+  width: auto;
+}
+.df-monaco-input__container {
+  border: 1px solid var(--yc-color-line-generic);
+}

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonacoInputCard = exports.MonacoInput = exports.MonacoInputBase = 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 hooks_1 = require("../../../../core/components/Form/hooks");
+const utils_1 = require("../../../utils");
+const MonacoHeader_1 = require("./MonacoHeader");
+const MonacoInputDialog_1 = require("./MonacoInputDialog");
+const useMonacoOptions_1 = require("./useMonacoOptions");
+const b = (0, utils_1.block)('monaco-input');
+const MonacoInputBase = ({ input, spec, card, MonacoComponent, withoutDialog, }) => {
+    const { value, onChange } = input;
+    const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
+    const { monacoParams, disabled, layoutTitle } = spec.viewSpec;
+    const { language, fontSize } = monacoParams !== null && monacoParams !== void 0 ? monacoParams : { language: 'plaintext', fontSize: 11 };
+    const [monacoEditorDialog, setMonacoEditorDialog] = react_1.default.useState(false);
+    const [monacoValue, setMonacoValue] = react_1.default.useState(value);
+    const handleMonacoEditorDialogClose = react_1.default.useCallback(() => setMonacoEditorDialog(false), []);
+    const dialogButton = react_1.default.useMemo(() => {
+        if (!withoutDialog) {
+            return (react_1.default.createElement(uikit_1.Button, { onClick: () => setMonacoEditorDialog(true) },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronsExpandUpRight, size: 16 })));
+        }
+        return;
+    }, [withoutDialog, setMonacoEditorDialog]);
+    react_1.default.useEffect(() => onChange(monacoValue), [monacoValue]);
+    const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, disabled !== null && disabled !== void 0 ? disabled : false);
+    if (!MonacoEditor) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b({ card }) },
+        react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card, editButton: dialogButton }),
+            react_1.default.createElement(MonacoEditor, { language: language, value: monacoValue, height: "300", onChange: setMonacoValue, options: options })),
+        react_1.default.createElement(MonacoInputDialog_1.MonacoInputDialog, { title: layoutTitle, fontSize: fontSize, value: monacoValue, visible: monacoEditorDialog, language: language, card: card, changeMonacoValue: setMonacoValue, onChange: onChange, onClose: handleMonacoEditorDialogClose, MonacoComponent: MonacoComponent })));
+};
+exports.MonacoInputBase = MonacoInputBase;
+const MonacoInput = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props)));
+exports.MonacoInput = MonacoInput;
+const MonacoInputCard = (props) => (react_1.default.createElement(exports.MonacoInputBase, Object.assign({}, props, { card: true })));
+exports.MonacoInputCard = MonacoInputCard;

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css

@@ -0,0 +1,9 @@
+.df-monaco-input-dialog .yc-dialog-footer {
+  padding: 10px 32px 32px;
+}
+.df-monaco-input-dialog__container {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.df-monaco-input-dialog__dialog-header .yc-dialog-header__caption {
+  min-height: 24px;
+}

package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonacoInputDialog = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const hooks_1 = require("../../../../core/components/Form/hooks");
+const i18n_1 = tslib_1.__importDefault(require("../../../i18n"));
+const utils_1 = require("../../../utils");
+const MonacoHeader_1 = require("./MonacoHeader");
+const useMonacoOptions_1 = require("./useMonacoOptions");
+const b = (0, utils_1.block)('monaco-input-dialog');
+const MonacoInputDialog = ({ value, title, visible, language, card, onChange, onClose, changeMonacoValue, fontSize, MonacoComponent, }) => {
+    const MonacoEditor = (0, hooks_1.useMonaco)() || MonacoComponent;
+    const handleClose = react_1.default.useCallback(() => {
+        onChange(value);
+        onClose();
+    }, [onChange, onClose]);
+    const options = (0, useMonacoOptions_1.useMonacoOptions)(fontSize, false);
+    if (!MonacoEditor) {
+        return null;
+    }
+    return (react_1.default.createElement(uikit_1.Dialog, { open: visible, onClose: handleClose, className: b() },
+        react_1.default.createElement(uikit_1.Dialog.Header, { caption: title, className: b('dialog-header') }),
+        react_1.default.createElement(uikit_1.Dialog.Body, null,
+            react_1.default.createElement("div", { className: b('container') },
+                react_1.default.createElement(MonacoHeader_1.MonacoHeader, { language: language, card: card }),
+                react_1.default.createElement(MonacoEditor, { language: language, height: "600", width: "900", value: value, onChange: changeMonacoValue, options: options }))),
+        react_1.default.createElement(uikit_1.Dialog.Footer, { textButtonApply: (0, i18n_1.default)('button_cancel'), onClickButtonApply: handleClose })));
+};
+exports.MonacoInputDialog = MonacoInputDialog;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMonacoOptions = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useMonacoOptions = (fontSize, readOnly) => {
+    const options = react_1.default.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;
+};
+exports.useMonacoOptions = useMonacoOptions;

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

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

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const core_1 = require("../../../../core");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('multi-select');
+const MultiSelect = ({ input, spec }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const filterable = react_1.default.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_1.default.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_1.default.useCallback((open) => {
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [onFocus, onBlur]);
+    const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
+    const handleChange = react_1.default.useCallback((value) => onChange((0, core_1.transformArrIn)(value)), [onChange]);
+    return (react_1.default.createElement(uikit_1.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 }));
+};
+exports.MultiSelect = MultiSelect;

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

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

package/build/cjs/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/cjs/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberWithScale = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const useInitial_1 = require("./useInitial");
+const b = (0, utils_1.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 } = (0, useInitial_1.useInitial)(value || '', spec);
+    const [scaleValue, setScaleValue] = react_1.default.useState(initialType);
+    const [preparedValue, setPreparedValue] = react_1.default.useState(initialValue);
+    const scaleOptions = react_1.default.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_1.default.useMemo(() => (value !== '' && value !== '0' ? (0, utils_1.divide)(value, value) === null : false), [value]);
+    const handleChange = react_1.default.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 = (0, utils_1.multiply)(value, (0, utils_1.divide)(cur, def), 2);
+                }
+                else {
+                    _value = (0, utils_1.divide)(value, (0, utils_1.divide)(def, cur), 2);
+                }
+            }
+            else {
+                _value = (0, utils_1.multiply)(value, '1');
+            }
+        }
+        setPreparedValue(value);
+        onChange(_value === null ? value : _value);
+    }, [onChange, setPreparedValue, scaleValue, defaultType, scale]);
+    const handleScaleChange = react_1.default.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 = (0, utils_1.divide)(value, (0, utils_1.divide)(next, def), 2);
+                    }
+                    else {
+                        _value = (0, utils_1.multiply)(value, (0, utils_1.divide)(def, next), 2);
+                    }
+                    setPreparedValue(_value === null ? value : _value);
+                }
+                else {
+                    setPreparedValue(value);
+                }
+            }
+            setScaleValue(valueSelect);
+        }
+    }, [setPreparedValue, setScaleValue, incorrectStringNumber, value, scale, defaultType]);
+    return (react_1.default.createElement("div", { className: b('wrapper') },
+        react_1.default.createElement(uikit_1.TextInput, { value: preparedValue, onBlur: onBlur, onFocus: onFocus, onUpdate: handleChange, placeholder: placeholder, disabled: disabled }),
+        react_1.default.createElement(uikit_1.Select, { width: "max", className: b('select', 'df-error-wrapper-ignore'), value: [scaleValue], options: scaleOptions, onUpdate: handleScaleChange, disabled: disabled || incorrectStringNumber })));
+};
+const NumberWithScale = (props) => (0, utils_1.isCorrectSizeParams)(props.spec) ? react_1.default.createElement(NumberWithScaleBase, Object.assign({}, props)) : null;
+exports.NumberWithScale = NumberWithScale;

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInitial = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const useInitial = (value, spec, deps = []) => {
+    const initial = react_1.default.useMemo(() => {
+        const { defaultType, viewType, scale } = spec.viewSpec.sizeParams;
+        const correctValue = (0, utils_1.divide)(value, value) !== null;
+        let initialType = defaultType;
+        let initialValue = value;
+        if (viewType) {
+            if (correctValue) {
+                if (BigInt(scale[viewType].factor) > BigInt(scale[initialType].factor)) {
+                    initialValue = (0, utils_1.divide)(value, (0, utils_1.divide)(scale[viewType].factor, scale[initialType].factor), 2);
+                }
+                else {
+                    initialValue = (0, utils_1.multiply)(value, (0, utils_1.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 = (0, utils_1.divide)(value, (0, utils_1.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;
+};
+exports.useInitial = useInitial;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectBase = 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 lodash_1 = tslib_1.__importDefault(require("lodash"));
+const core_1 = require("../../../../core");
+const ObjectBase = (_a) => {
+    var { spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["spec", "name", "Layout"]);
+    const addBtn = react_1.default.useMemo(() => {
+        var _a;
+        return (react_1.default.createElement(uikit_1.Button, { onClick: () => restProps.input.onChange((0, core_1.transformArrIn)(spec.defaultValue) || {}), disabled: (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.disabled },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Plus, size: 14 }),
+            spec.viewSpec.layoutTitle || null));
+    }, [spec.defaultValue, spec.viewSpec.layoutTitle, restProps.input.onChange]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => restProps.input.onChange((currentValue) => lodash_1.default.set(Object.assign({}, currentValue), childName.split(`${restProps.input.name}.`).join(''), childValue), childErrors), [restProps.input.onChange, restProps.input.name]);
+    const content = react_1.default.useMemo(() => {
+        if (!lodash_1.default.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_1.default.createElement(react_1.default.Fragment, null, (spec.viewSpec.order || Object.keys(specProperties)).map((property) => {
+            var _a;
+            return specProperties[property] ? (react_1.default.createElement(core_1.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_1.default.createElement(Layout, Object.assign({ spec: spec, name: name }, restProps), content));
+};
+exports.ObjectBase = ObjectBase;

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

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

package/build/cjs/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/cjs/lib/kit/components/Inputs/OneOf/OneOf.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOf = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../../");
+const core_1 = require("../../../../core");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('oneof');
+const OneOf = (props) => {
+    var _a;
+    const { oneOfValue, specProperties, toggler } = (0, hooks_1.useOneOf)({ props });
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
+        const value = lodash_1.default.set({}, childName.split(`${props.input.name}.`).join(''), childValue);
+        props.input.onChange(value, childErrors);
+    }, [props.input.onChange, props.input.name]);
+    return (react_1.default.createElement("div", { className: b() },
+        specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
+            react_1.default.createElement(core_1.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_1.default.createElement("div", { className: b('toggler') }, toggler)));
+};
+exports.OneOf = OneOf;

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

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

package/build/cjs/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/cjs/lib/kit/components/Inputs/OneOfCard/OneOfCard.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OneOfCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const __1 = require("../../");
+const core_1 = require("../../../../core");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const Layouts_1 = require("../../Layouts");
+const RemoveButton_1 = require("../../Layouts/Accordeon/RemoveButton");
+const b = (0, utils_1.block)('oneof-card');
+const OneOfCard = (props) => {
+    var _a;
+    const { input, meta, spec, name } = props;
+    const [open, setOpen] = react_1.default.useState(true);
+    const onToggle = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const onOpen = react_1.default.useCallback(() => setOpen(true), [setOpen]);
+    const { oneOfValue, specProperties, togglerInput } = (0, hooks_1.useOneOf)({
+        props,
+        onTogglerChange: onOpen,
+    });
+    const arrayItem = react_1.default.useMemo(() => (0, core_1.isArrayItem)(name), [name]);
+    const toggler = react_1.default.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_1.default.createElement(Layouts_1.Row2, Object.assign({}, props, { spec: specWithoutDescription, name: name }), togglerInput));
+    }, [togglerInput, props, arrayItem]);
+    const headerActionsTemplate = react_1.default.useMemo(() => {
+        if (arrayItem) {
+            return react_1.default.createElement(RemoveButton_1.RemoveButton, { onDrop: input.onDrop });
+        }
+        return null;
+    }, [arrayItem, input.onDrop]);
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => {
+        const value = lodash_1.default.set({}, childName.split(`${input.name}.`).join(''), childValue);
+        input.onChange(value, childErrors);
+    }, [input.onChange, input.name]);
+    (0, hooks_1.useErrorChecker)({ name, meta, open, setOpen });
+    return (react_1.default.createElement(__1.AccordeonCard, { className: b(), header: toggler, description: spec.viewSpec.layoutDescription || '', open: open, onToggle: onToggle, ignoreHeaderToggle: true, headerActionsTemplate: headerActionsTemplate }, specProperties[oneOfValue] ? (react_1.default.createElement(core_1.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));
+};
+exports.OneOfCard = OneOfCard;

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

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