@cloud-ru/uikit-product-calculator 0.33.3 → 0.33.4

package/dist/cjs/components/Controls/ArrayControl/ArrayControl.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayControlUi = ArrayControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const contexts_1 = require("../../../contexts");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const ObjectControl_1 = require("../ObjectControl");
+const utils_2 = require("../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ArrayControlUi({ accessorKey, ui, controls, max, addText, min = 0, invertTrashOffset, }) {
+    const { value: valueProp, onChange: onChangeProp } = (0, contexts_1.useProductContext)();
+    const { isMobile } = (0, hooks_1.useAdaptive)();
+    const value = (0, utils_1.getValue)(valueProp, accessorKey);
+    const onChange = (newValue) => {
+        (0, utils_1.setValue)(valueProp, accessorKey, newValue);
+        onChangeProp(valueProp);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [value === null || value === void 0 ? void 0 : value.map((_, idx) => ((0, jsx_runtime_1.jsx)(contexts_1.ProductContext.Provider, { value: {
+                    value: Object.assign({}, (0, utils_1.getValue)(value, `[${idx}]`)),
+                    onChange: newValue => {
+                        (0, utils_1.setValue)(value, `[${idx}]`, newValue);
+                        onChange(value);
+                    },
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.row, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.wrap, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(ObjectControl_1.ObjectControlUi, { ui: ui, controls: controls, type: constants_1.CONTROL.Object }) }), (value !== null && value !== void 0 ? value : []).length > min && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.TrashSVG, {}), className: invertTrashOffset ? styles_module_scss_1.default.trashInvert : styles_module_scss_1.default.trash, size: 'm', onClick: () => {
+                                value === null || value === void 0 ? void 0 : value.splice(idx, 1);
+                                onChange(value);
+                            } }))] }, idx) }, idx))), (value !== null && value !== void 0 ? value : []).length < max && ((0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PlusSVG, {}), size: 'm', iconPosition: 'before', label: addText, onClick: () => {
+                    onChange((value !== null && value !== void 0 ? value : []).concat([(0, utils_2.getDefaultValues)(controls)]));
+                }, "data-test-id": (0, utils_1.parseKeyToDataTest)('button') }))] }));
+}

package/dist/cjs/components/Controls/ArrayControl/index.d.ts

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

package/dist/cjs/components/Controls/ArrayControl/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ArrayControl"), exports);

package/dist/cjs/components/Controls/ArrayControl/styles.module.css

@@ -0,0 +1,27 @@
+.row{
+  display:grid;
+  grid-template-columns:1fr auto;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-start;
+}
+.row .trash{
+  margin-top:var(--dimension-3m, 24px);
+}
+.row .trashInvert{
+  margin-top:calc(0px - var(--dimension-1m, 8px));
+}
+
+.container{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+
+.wrap{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-3m, 24px);
+}
+.wrap[data-mobile]{
+  gap:var(--dimension-2m, 16px);
+}

package/dist/cjs/components/Controls/CarouselControl/CarouselControl.d.ts

@@ -0,0 +1,17 @@
+import { CarouselProps } from '@snack-uikit/carousel';
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { ToggleCardItem } from '../ToggleCard';
+import { BaseControlWithItems } from '../types';
+type CarouselUiProps = Pick<CarouselProps, 'transition' | 'scrollBy' | 'className' | 'swipe' | 'infiniteScroll' | 'arrows' | 'showItems' | 'pagination' | 'gap' | 'swipeActivateLength'>;
+export type CarouselControl = {
+    type: typeof CONTROL.Carousel;
+    defaultValue?: string;
+} & BaseControlWithItems<ToggleCardItem, CarouselUiProps>;
+export type CarouselControlUiProps = {
+    value?: string;
+    onChange?(value: string): void;
+    watchedValues?: FormValues;
+} & CarouselControl;
+export declare function CarouselControlUi({ items: itemsProp, value, onChange, uiProps, decoratorProps, watchedValues, relateFn, accessorKey, }: CarouselControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/components/Controls/CarouselControl/CarouselControl.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselControlUi = CarouselControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const carousel_1 = require("@snack-uikit/carousel");
+const fields_1 = require("@snack-uikit/fields");
+const pagination_1 = require("@snack-uikit/pagination");
+const toggles_1 = require("@snack-uikit/toggles");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const ToggleCard_1 = require("../ToggleCard");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function CarouselControlUi({ items: itemsProp, value, onChange, uiProps, decoratorProps, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b;
+    const { isMobile } = (0, hooks_1.useAdaptive)();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = (0, react_2.useMemo)(() => { var _a; return (_a = relateFn === null || relateFn === void 0 ? void 0 : relateFn(watchedValues !== null && watchedValues !== void 0 ? watchedValues : {})) !== null && _a !== void 0 ? _a : {}; }, [relateFn, watchedValues]);
+    const items = (0, react_2.useMemo)(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const [page, setPage] = (0, react_2.useState)(0);
+    const maxPage = isMobile ? items.length : items.length - 1;
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('carousel', accessorKey);
+    const navigationDataTestAttribute = (0, utils_1.parseKeyToDataTest)('carousel-navigation');
+    (0, react_2.useEffect)(() => {
+        const pageIndex = items.findIndex(item => String(item.value) === String(value));
+        if (pageIndex !== -1) {
+            const itemPage = isMobile ? pageIndex : Math.max(pageIndex - 1, 0);
+            const timeout = setTimeout(() => {
+                setPage(itemPage);
+            }, 0);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [isMobile, items, value]);
+    (0, react_2.useEffect)(() => {
+        const pageIndex = items.findIndex(item => String(item.value) === String(value));
+        if (page > maxPage + 1) {
+            setPage(pageIndex);
+        }
+    }, [value, onChange, items, page, maxPage]);
+    const decPage = () => {
+        setPage(page => Math.max(0, page - 1));
+    };
+    const incPage = () => {
+        setPage(page => Math.min(page + 1, Math.max(maxPage - 1, 0)));
+    };
+    (0, react_2.useEffect)(() => {
+        var _a;
+        if (!items.find(item => String(item.value) === String(value))) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(String((_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.value));
+            setPage(0);
+        }
+    }, [value, onChange, items, relatedItems]);
+    const visible = (_b = (_a = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.visible) !== null && _a !== void 0 ? _a : uiProps === null || uiProps === void 0 ? void 0 : uiProps.visible) !== null && _b !== void 0 ? _b : true;
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.carousel, children: (0, jsx_runtime_1.jsxs)(fields_1.FieldDecorator, Object.assign({ size: 'm', caption: maxPage > 1
+                ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.controls, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronLeftSVG, {}), size: 's', onClick: decPage, "data-test-id": `${navigationDataTestAttribute}-button-left` }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronRightSVG, {}), size: 's', onClick: incPage, "data-test-id": `${navigationDataTestAttribute}-button-right` })] }))
+                : undefined }, decoratorProps, relatedDecoratorProps, { "data-test-id": dataTestAttribute, children: [(0, jsx_runtime_1.jsx)(toggles_1.ToggleGroup, { selectionMode: 'single', value: value, onChange: value => {
+                        value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+                    }, children: (0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({ pagination: false, arrows: false }, uiProps, { scrollBy: 1, swipe: true, infiniteScroll: false, showItems: isMobile ? 1.1 : 2.1, state: {
+                            page: page || 0,
+                            onChange: page => setPage(page % maxPage),
+                        }, children: items.map(item => ((0, react_1.createElement)(ToggleCard_1.ToggleCard, Object.assign({}, item, { key: item.value })))) })) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pagination, children: maxPage > 1 && (0, jsx_runtime_1.jsx)(pagination_1.PaginationSlider, { page: page + 1, total: maxPage, onChange: page => setPage(page - 1) }) })] })) }));
+}

package/dist/cjs/components/Controls/CarouselControl/index.d.ts

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

package/dist/cjs/components/Controls/CarouselControl/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CarouselControl"), exports);

package/dist/cjs/components/Controls/CarouselControl/styles.module.css

@@ -0,0 +1,27 @@
+.carousel{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+.carousel ul{
+  margin:0;
+  padding:0 0 0 var(--dimension-2m, 16px);
+  list-style-type:disc;
+}
+.carousel li{
+  list-style-type:disc;
+}
+
+.controls{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.pagination{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

package/dist/cjs/components/Controls/Control/Control.d.ts

@@ -0,0 +1,11 @@
+import { AnyType, PRICE_PERIOD } from '../../../types';
+import { FormControl } from '../types';
+type ControlProps = {
+    formControl: FormControl & {
+        accessorKey?: string;
+        onChangePeriod?: (period: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+        canChangeWholePricePeriod?: boolean;
+    };
+};
+export declare function Control({ formControl }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/Controls/Control/Control.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Control = Control;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const contexts_1 = require("../../../contexts");
+const utils_1 = require("../../../utils");
+const AlertControl_1 = require("../AlertControl");
+const ArrayControl_1 = require("../ArrayControl");
+const CarouselControl_1 = require("../CarouselControl");
+const constants_1 = require("../constants");
+const ObjectControl_1 = require("../ObjectControl");
+const SegmentedControl_1 = require("../SegmentedControl");
+const SelectControl_1 = require("../SelectControl");
+const SliderControl_1 = require("../SliderControl");
+const StepperControl_1 = require("../StepperControl");
+const TableControl_1 = require("../TableControl");
+const ToggleCardsControl_1 = require("../ToggleCardsControl");
+const ToggleControl_1 = require("../ToggleControl");
+const ToggleObjectControl_1 = require("../ToggleObjectControl");
+function Control({ formControl }) {
+    var _a, _b, _c;
+    const { calculatorType } = (0, contexts_1.useCalculatorContext)();
+    const { value: valueProp, onChange: onChangeProp, priceList: priceListProp } = (0, contexts_1.useProductContext)();
+    const { pricePeriod, setPricePeriod, onAnalyticsClick } = (0, contexts_1.useCalculatorContext)();
+    const accessorKey = (_a = formControl === null || formControl === void 0 ? void 0 : formControl.accessorKey) !== null && _a !== void 0 ? _a : '';
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const setValueFn = (arr) => {
+            arr.forEach(([accessorKey, newValue]) => {
+                (0, utils_1.setValue)(valueProp, accessorKey, newValue);
+            });
+            onChangeProp(valueProp);
+        };
+        // Если в разных продуктах есть поля с одинаковыми названиями ключа,
+        // то в formControl может возникнуть конфликт с определением и изменением значений этих полей.
+        // Попробуйте поменять название поля на другое уникальное значение.
+        (_a = formControl === null || formControl === void 0 ? void 0 : formControl.onChangePeriod) === null || _a === void 0 ? void 0 : _a.call(formControl, pricePeriod, setValueFn);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pricePeriod]);
+    const watchedValues = (_c = Object.keys((_b = formControl === null || formControl === void 0 ? void 0 : formControl.watchedControls) !== null && _b !== void 0 ? _b : {})) === null || _c === void 0 ? void 0 : _c.reduce((res, fieldName) => {
+        var _a;
+        const key = (_a = formControl === null || formControl === void 0 ? void 0 : formControl.watchedControls) === null || _a === void 0 ? void 0 : _a[fieldName];
+        if (key) {
+            res[fieldName] = (0, utils_1.getValue)(valueProp, key);
+        }
+        return res;
+    }, {});
+    watchedValues.calculatorType = calculatorType;
+    if (formControl.type === constants_1.CONTROL.Object) {
+        return (0, jsx_runtime_1.jsx)(ObjectControl_1.ObjectControlUi, Object.assign({}, formControl, { watchedValues: watchedValues }));
+    }
+    if (formControl.type === constants_1.CONTROL.Array) {
+        return (0, jsx_runtime_1.jsx)(ArrayControl_1.ArrayControlUi, Object.assign({}, formControl));
+    }
+    const value = (0, utils_1.getValue)(valueProp, accessorKey);
+    const priceList = (0, utils_1.getValue)(priceListProp, accessorKey);
+    let onChange = (uiType) => (newValue) => {
+        if (formControl === null || formControl === void 0 ? void 0 : formControl.canChangeWholePricePeriod) {
+            setPricePeriod(newValue);
+        }
+        if (typeof newValue === 'object') {
+            onAnalyticsClick(Object.values(newValue).join(' '), `${uiType}-${accessorKey}`);
+        }
+        else {
+            onAnalyticsClick(String(newValue), `${uiType}-${accessorKey}`);
+        }
+        (0, utils_1.setValue)(valueProp, accessorKey, newValue);
+        onChangeProp(valueProp);
+    };
+    if (formControl === null || formControl === void 0 ? void 0 : formControl.onChangeFn) {
+        const setValueFn = (arr) => {
+            arr.forEach(([accessorKey, newValue]) => {
+                (0, utils_1.setValue)(valueProp, accessorKey, newValue);
+            });
+            onChangeProp(valueProp);
+        };
+        onChange = (uiType) => (newValue) => {
+            var _a;
+            onAnalyticsClick(String(newValue), `${uiType}-${accessorKey}`);
+            (_a = formControl === null || formControl === void 0 ? void 0 : formControl.onChangeFn) === null || _a === void 0 ? void 0 : _a.call(formControl, newValue, setValueFn);
+        };
+    }
+    switch (formControl.type) {
+        case constants_1.CONTROL.Table: {
+            return ((0, jsx_runtime_1.jsx)(TableControl_1.TableControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('table-control-ui'), priceList: priceList })));
+        }
+        case constants_1.CONTROL.Carousel: {
+            return ((0, jsx_runtime_1.jsx)(CarouselControl_1.CarouselControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('carousel-control-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.ToggleCards: {
+            return ((0, jsx_runtime_1.jsx)(ToggleCardsControl_1.ToggleCardsControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-cards-control-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.SelectSingle: {
+            return ((0, jsx_runtime_1.jsx)(SelectControl_1.SelectSingleUi, Object.assign({}, formControl, { value: value, onChange: onChange('select-single-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.SelectMultiple: {
+            return ((0, jsx_runtime_1.jsx)(SelectControl_1.SelectMultipleUi, Object.assign({}, formControl, { value: value, onChange: onChange('select-multiple-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.Segmented: {
+            return ((0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('segment-control-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.Toggle: {
+            return ((0, jsx_runtime_1.jsx)(ToggleControl_1.ToggleControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-control-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.Stepper: {
+            return ((0, jsx_runtime_1.jsx)(StepperControl_1.StepperControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('stepper-control-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.ToggleObject: {
+            return ((0, jsx_runtime_1.jsx)(ToggleObjectControl_1.ToggleObjectControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-object-ui'), watchedValues: watchedValues })));
+        }
+        case constants_1.CONTROL.Alert: {
+            return (0, jsx_runtime_1.jsx)(AlertControl_1.AlertControlUi, Object.assign({}, formControl, { watchedValues: watchedValues }));
+        }
+        case constants_1.CONTROL.Slider: {
+            return ((0, jsx_runtime_1.jsx)(SliderControl_1.SliderControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('slider-control-ui'), watchedValues: watchedValues })));
+        }
+        default:
+            throw new Error('not reachable');
+    }
+}

package/dist/cjs/components/Controls/Control/index.d.ts

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

package/dist/cjs/components/Controls/Control/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Control"), exports);

package/dist/cjs/components/Controls/ObjectControl/ObjectControl.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { AnyType, FormValues, PRICE_PERIOD } from '../../../types';
+import { FormControl } from '..';
+import { CONTROL } from '../constants';
+import { BaseDecoratorProps } from '../types';
+type RowConfig = {
+    controls: string[];
+    template?: string;
+};
+type FormRow = string | [string, string] | ReactNode | RowConfig;
+export type ObjectControl = {
+    type: typeof CONTROL.Object;
+    /**
+     * Контроллы для описания конфигурации продукта
+     *
+     * Ключи используются для ui схемы
+     *
+     * @example {
+     *  alert: {
+     *    type: CONTROL.Alert,
+     *     ...someAlertProps
+     *   },
+     *   cpu: {
+     *     type: CONTROL.Segmented,
+     *     ...someSegmentedProps
+     *   }
+     * }
+     */
+    controls: Record<string, FormControl>;
+    /**
+     * Построчная UI схема для отображения контроллов.
+     *
+     * Элементы - ключи объекта controls
+     *
+     * @example ['specification', ['cpu', 'ram'], ['systemDisk', 'additionalDisk'], ['instanceCount']],
+     */
+    ui: FormRow[];
+    /** Флаг, отрисовывать элемент или нет */
+    visible?: boolean;
+    /** Исходное значение */
+    defaultValue?: FormValues;
+    decoratorProps?: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>;
+    /**
+     * Отслеживаемые "более главные" поля
+     *
+     * @example { storageClass: 'storages[0].obs.storageClass' },
+     */
+    watchedControls?: Record<string, string>;
+    /**
+     * Функция для изменения параметров контролла
+     *
+     * @param watchedValues - вычисленные 'watchedControls'
+     *
+     * @example ({ storageClass }) => {
+     *    if (storageClass !== StorageClassItem.Cold) {
+     *      return {
+     *           visible: false,
+     *      };
+     *    }
+     *  }
+     */
+    relateFn?(watchedValues: FormValues): {
+        visible?: boolean;
+    } | undefined;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+type ObjectControlUiProps = ObjectControl & {
+    watchedValues?: FormValues;
+};
+export declare function ObjectControlUi({ controls, ui, watchedValues, relateFn, visible: visibleProp, decoratorProps, }: ObjectControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/components/Controls/ObjectControl/ObjectControl.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectControlUi = ObjectControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const contexts_1 = require("../../../contexts");
+const utils_1 = require("../../../utils");
+const Control_1 = require("../Control");
+const ObjectDecorator_1 = require("../ObjectDecorator");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function isRowConfig(row) {
+    return Boolean(typeof row === 'object' && row && 'controls' in row);
+}
+function ObjectControlUi({ controls, ui, watchedValues, relateFn, visible: visibleProp, decoratorProps, }) {
+    var _a;
+    const { layoutType } = (0, contexts_1.useCalculatorContext)();
+    const isMobile = layoutType === 'mobile';
+    const { visible: relatedVisible } = (0, react_1.useMemo)(() => { var _a; return (_a = relateFn === null || relateFn === void 0 ? void 0 : relateFn(watchedValues !== null && watchedValues !== void 0 ? watchedValues : {})) !== null && _a !== void 0 ? _a : {}; }, [relateFn, watchedValues]);
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('row');
+    const visible = (_a = relatedVisible !== null && relatedVisible !== void 0 ? relatedVisible : visibleProp) !== null && _a !== void 0 ? _a : true;
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [decoratorProps && decoratorProps.label && (0, jsx_runtime_1.jsx)(ObjectDecorator_1.ObjectDecorator, Object.assign({}, decoratorProps)), ui.map(uiRow => {
+                if (typeof uiRow === 'string') {
+                    return (0, jsx_runtime_1.jsx)(Control_1.Control, { formControl: controls[uiRow] }, uiRow);
+                }
+                if (Array.isArray(uiRow)) {
+                    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.row, "data-test-id": dataTestAttribute, "data-mobile": isMobile || undefined, children: uiRow.map(rowItem => ((0, jsx_runtime_1.jsx)(Control_1.Control, { formControl: controls[rowItem] }, rowItem))) }, uiRow.join(' ')));
+                }
+                if (isRowConfig(uiRow)) {
+                    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rowConfig, style: {
+                            gridTemplateColumns: uiRow.template || '1fr 84px',
+                        }, children: uiRow.controls.map(rowItem => ((0, jsx_runtime_1.jsx)(Control_1.Control, { formControl: controls[rowItem] }, rowItem))) }, uiRow.controls.join(' ')));
+                }
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: uiRow });
+            })] }));
+}

package/dist/cjs/components/Controls/ObjectControl/index.d.ts

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

package/dist/cjs/components/Controls/ObjectControl/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ObjectControl"), exports);

package/dist/cjs/components/Controls/ObjectControl/styles.module.css

@@ -0,0 +1,15 @@
+.row{
+  display:grid;
+  grid-template-columns:1fr 1fr;
+  gap:var(--dimension-2m, 16px);
+}
+.row[data-mobile]{
+  grid-template-columns:1fr;
+}
+
+.rowConfig{
+  display:grid;
+  grid-template-columns:1fr 84px;
+  gap:var(--dimension-1m, 8px);
+  width:100%;
+}

package/dist/cjs/components/Controls/ObjectDecorator/ObjectDecorator.d.ts

@@ -0,0 +1,2 @@
+import { BaseDecoratorProps } from '../types';
+export declare function ObjectDecorator({ label, labelTooltip, labelTooltipPlacement, }: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Controls/ObjectDecorator/ObjectDecorator.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectDecorator = ObjectDecorator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ObjectDecorator({ label, labelTooltip, labelTooltipPlacement, }) {
+    return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.title, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: label }), labelTooltip && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.tipWrapperInline, children: (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { placement: labelTooltipPlacement, "data-pointer": true, tip: labelTooltip, size: 's', tabIndex: -1 }) }))] }));
+}

package/dist/cjs/components/Controls/ObjectDecorator/index.d.ts

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

package/dist/cjs/components/Controls/ObjectDecorator/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ObjectDecorator"), exports);

package/dist/cjs/components/Controls/ObjectDecorator/styles.module.css

@@ -0,0 +1,14 @@
+.tipWrapper{
+  display:inline-flex;
+  height:20px;
+  align-items:center;
+}
+
+.tipWrapperInline{
+  display:inline-flex;
+  height:20px;
+  padding-left:4px;
+}
+.tipWrapperInline > span{
+  transform:translate(0, 4px);
+}

package/dist/cjs/components/Controls/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,19 @@
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+import { SegmentedControlItem } from './SegmentedControlCard';
+type UiProps = {
+    className?: string;
+    disabled?: boolean;
+};
+export type SegmentedControl = {
+    type: typeof CONTROL.Segmented;
+    defaultValue?: string;
+} & BaseControlWithItems<SegmentedControlItem, UiProps>;
+export type SegmentedControlUiProps = SegmentedControl & {
+    value?: string;
+    onChange?(value?: string): void;
+    watchedValues?: FormValues;
+};
+export declare function SegmentedControlUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, accessorKey, }: SegmentedControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};