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

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControlUi = SegmentedControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const toggles_1 = require("@snack-uikit/toggles");
+const utils_1 = require("../../../utils");
+const SegmentedControlCard_1 = require("./SegmentedControlCard");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SegmentedControlUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, accessorKey, }) {
+    var _a, _b;
+    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 dataTestAttribute = (0, utils_1.parseKeyToDataTest)('segmented', accessorKey);
+    (0, react_2.useEffect)(() => {
+        var _a;
+        if (!items.find(item => String(item === null || item === void 0 ? void 0 : 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));
+        }
+    }, [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)(fields_1.FieldDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps, { size: 'm', "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)("div", { className: styles_module_scss_1.default.container, children: items.map(item => {
+                    var _a;
+                    return ((0, react_1.createElement)(SegmentedControlCard_1.SegmentedControlCard, Object.assign({ disabled: (_a = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.disabled) !== null && _a !== void 0 ? _a : uiProps === null || uiProps === void 0 ? void 0 : uiProps.disabled }, item, { key: item === null || item === void 0 ? void 0 : item.value })));
+                }) }) }) })));
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { AnyType, PRICE_PERIOD } from '../../../types';
+export type SegmentedControlItem = {
+    value: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    disabledReason?: ReactNode;
+    dataTestId?: string;
+    onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType[]]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+export declare function SegmentedControlCard({ value, label, disabled, disabledReason, dataTestId }: SegmentedControlItem): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Controls/SegmentedControl/SegmentedControlCard.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControlCard = SegmentedControlCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chips_1 = require("@snack-uikit/chips");
+const toggles_1 = require("@snack-uikit/toggles");
+const tooltip_1 = require("@snack-uikit/tooltip");
+function SegmentedControlCard({ value, label, disabled, disabledReason, dataTestId }) {
+    const { isChecked, handleClick } = (0, toggles_1.useToggleGroup)({ value });
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { open: disabled && disabled && disabledReason ? undefined : false, tip: disabledReason, children: (0, jsx_runtime_1.jsx)(chips_1.ChipToggle, { size: 'm', checked: isChecked, onChange: handleClick, disabled: !isChecked && disabled, "data-test-id": dataTestId, label: label !== null && label !== void 0 ? label : value }) }));
+}

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

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

package/dist/cjs/components/Controls/SegmentedControl/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("./SegmentedControl"), exports);

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

@@ -0,0 +1,5 @@
+.container{
+  display:flex;
+  flex-wrap:wrap;
+  gap:var(--dimension-050m, 4px);
+}

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { FieldSelectSingleProps } from '@snack-uikit/fields';
+import { FormValues, PRICE_PERIOD } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+export type SelectControlItem = {
+    value: string;
+    label?: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    disabledReason?: ReactNode;
+    dataTestId?: string;
+    onChangePeriod?: (value: PRICE_PERIOD) => void;
+    canChangeWholePricePeriod?: boolean;
+};
+type SelectUiProps = Pick<FieldSelectSingleProps, 'placeholder' | 'className' | 'readonly' | 'showClearButton' | 'showCopyButton' | 'caption' | 'showHintIcon' | 'searchable' | 'noDataState' | 'noResultsState' | 'disabled'>;
+type SelectControl = BaseControlWithItems<SelectControlItem, SelectUiProps>;
+export type SelectSingleControl = SelectControl & {
+    type: typeof CONTROL.SelectSingle;
+} & {
+    defaultValue?: string;
+};
+type SelectSingleUiProps = SelectSingleControl & {
+    value?: string;
+    onChange?(value?: string): void;
+    watchedValues?: FormValues;
+};
+export type SelectMultipleControl = SelectControl & {
+    type: typeof CONTROL.SelectMultiple;
+} & {
+    defaultValue?: string[];
+};
+type SelectMultipleUiProps = SelectMultipleControl & {
+    value?: string[];
+    onChange?(value?: string[]): void;
+    watchedValues?: FormValues;
+};
+export declare function SelectSingleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, }: SelectSingleUiProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SelectMultipleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, }: SelectMultipleUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectSingleUi = SelectSingleUi;
+exports.SelectMultipleUi = SelectMultipleUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_mobile_fields_1 = require("@sbercloud/uikit-product-mobile-fields");
+const contexts_1 = require("../../../contexts");
+const utils_1 = require("../../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function convertItemsToOptions(items) {
+    return items.map(item => {
+        var _a;
+        return ({
+            value: item.value,
+            disabled: item.disabled,
+            option: (_a = item.label) !== null && _a !== void 0 ? _a : item.value,
+            beforeContent: item.icon,
+        });
+    });
+}
+function SelectSingleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b;
+    const { layoutType } = (0, contexts_1.useCalculatorContext)();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = (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 items = (0, react_1.useMemo)(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('select', accessorKey);
+    (0, react_1.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));
+        }
+    }, [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.jsxs)("div", { children: [!decoratorProps.label && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.zeroLabel }), (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldSelect, Object.assign({ searchable: false, showClearButton: false, layoutType: layoutType, widthStrategy: 'eq' }, decoratorProps, relatedDecoratorProps, { size: 'm', selection: 'single', value: value, onChange: onChange, options: convertItemsToOptions(items), "data-test-id": dataTestAttribute }, uiProps, relatedUiProps))] }));
+}
+function SelectMultipleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, }) {
+    var _a, _b;
+    const { layoutType } = (0, contexts_1.useCalculatorContext)();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = (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 items = (0, react_1.useMemo)(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, 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.jsxs)("div", { children: [!decoratorProps.label && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.zeroLabel }), (0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldSelect, Object.assign({ layoutType: layoutType, searchable: false, showClearButton: false }, decoratorProps, relatedDecoratorProps, { selection: 'multiple', size: 'm', value: value, onChange: onChange, options: convertItemsToOptions(items) }, uiProps, relatedUiProps))] }));
+}

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

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

package/dist/cjs/components/Controls/SelectControl/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("./SelectControl"), exports);

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

@@ -0,0 +1,3 @@
+.zeroLabel{
+  height:var(--dimension-3m, 24px);
+}

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

@@ -0,0 +1,17 @@
+import { FieldSliderProps } from '@snack-uikit/fields';
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControlWithItems } from '../types';
+type SliderUiProps = Pick<FieldSliderProps, 'step' | 'className' | 'showScaleBar' | 'tipFormatter' | 'postfixIcon' | 'disabled' | 'postfix'>;
+export type SliderControl = {
+    type: typeof CONTROL.Slider;
+    defaultValue?: string;
+    accessorKey?: string;
+} & BaseControlWithItems<number, SliderUiProps>;
+export type SliderControlUiProps = SliderControl & {
+    onChange?(value: string): void;
+    watchedValues?: FormValues;
+    value?: string;
+};
+export declare function SliderControlUi({ decoratorProps, uiProps, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, value, }: SliderControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderControlUi = SliderControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const utils_1 = require("../../../utils");
+function SliderControlUi({ decoratorProps, uiProps, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, value, }) {
+    var _a, _b;
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = (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 items = (0, react_1.useMemo)(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('slider', accessorKey);
+    const { marks } = (0, react_1.useMemo)(() => {
+        const marks = items
+            .sort((a, b) => a - b)
+            .reduce((res, item, idx) => {
+            res[idx + 1] = item;
+            return res;
+        }, {});
+        return { marks };
+    }, [items]);
+    const textInputValueFormatter = (value) => String(marks[value]);
+    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;
+    }
+    const currentValue = value ? items.findIndex(item => String(item) === value) + 1 : 1;
+    return ((0, jsx_runtime_1.jsx)(fields_1.FieldSlider, Object.assign({ range: false, size: 'm', value: currentValue, onChange: newValue => {
+            const valueByKey = String(marks[newValue]);
+            onChange === null || onChange === void 0 ? void 0 : onChange(valueByKey);
+        }, marks: marks, min: 1, max: items.length, step: null, textInputFormatter: textInputValueFormatter, "data-test-id": dataTestAttribute }, uiProps, relatedUiProps, decoratorProps, relatedDecoratorProps)));
+}

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

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

package/dist/cjs/components/Controls/SliderControl/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("./SliderControl"), exports);

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

@@ -0,0 +1,26 @@
+import { FieldStepperProps } from '@snack-uikit/fields';
+import { FormValues } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseControl, WithVisible } from '../types';
+type StepperUiProps = Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'allowMoreThanLimits' | 'disabled' | 'postfix' | 'size'> & {
+    showHint?: boolean;
+    /**
+     * Множитель для значения
+     * Например: надо реальное значение это 3 млн, а отображать надо как 3
+     */
+    multiplier?: number;
+    /** Массив допустимых значений. Если указан, то step игнорируется */
+    allowedValues?: number[];
+};
+export type StepperControl = {
+    type: typeof CONTROL.Stepper;
+    defaultValue?: number;
+    uiProps: WithVisible<StepperUiProps>;
+} & Omit<BaseControl<StepperUiProps>, 'uiProps'>;
+export type StepperControlUiProps = StepperControl & {
+    value?: number;
+    onChange?(value: number): void;
+    watchedValues?: FormValues;
+};
+export declare function StepperControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }: StepperControlUiProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperControlUi = StepperControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const fields_1 = require("@snack-uikit/fields");
+const utils_1 = require("../../../utils");
+const formatNumber_1 = require("../../../utils/formatNumber");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function StepperControlUi({ decoratorProps, uiProps, value, onChange, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b, _c, _d;
+    const [innerValue, setInnerValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : 0);
+    const [selectedIdx, setSelectedIdx] = (0, react_1.useState)(0);
+    const dataTestAttribute = (0, utils_1.parseKeyToDataTest)('stepper', accessorKey);
+    (0, react_1.useEffect)(() => {
+        setInnerValue(value !== null && value !== void 0 ? value : 0);
+    }, [value]);
+    const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = (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 { min, max, multiplier = 1, step = 1, allowedValues } = Object.assign(Object.assign({}, uiProps), relatedUiProps);
+    (0, react_1.useEffect)(() => {
+        if (allowedValues) {
+            const idx = allowedValues.findIndex(item => item === value);
+            setSelectedIdx(idx >= 0 ? idx : 0);
+        }
+    }, [allowedValues, value]);
+    (0, react_1.useEffect)(() => {
+        if (min && Number((value !== null && value !== void 0 ? value : 0) / multiplier) < min) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(min * multiplier);
+            return;
+        }
+        if (max && Number((value !== null && value !== void 0 ? value : 0) / multiplier) > max) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(max * multiplier);
+            return;
+        }
+    }, [value, onChange, min, max, multiplier]);
+    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;
+    const showHint = (_d = (_c = relatedUiProps === null || relatedUiProps === void 0 ? void 0 : relatedUiProps.showHint) !== null && _c !== void 0 ? _c : uiProps.showHint) !== null && _d !== void 0 ? _d : true;
+    const handleValueChange = (rawInnerValue) => {
+        const innerValue = Number(rawInnerValue !== null && rawInnerValue !== void 0 ? rawInnerValue : 0);
+        if (allowedValues) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(innerValue);
+            return;
+        }
+        if (min && innerValue / multiplier <= min) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(min * multiplier);
+            setInnerValue(min);
+            return;
+        }
+        if (max && innerValue / multiplier >= max) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(max * multiplier);
+            setInnerValue(max);
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(innerValue);
+    };
+    if (!visible) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(fields_1.FieldDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps, { size: 'm', children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(fields_1.FieldStepper, Object.assign({ size: 'm', value: (innerValue !== null && innerValue !== void 0 ? innerValue : 0) / multiplier, postfix: uiProps.postfix, onChange: value => {
+                        if (allowedValues) {
+                            const currentIdx = selectedIdx;
+                            const isIncrement = value > innerValue / multiplier;
+                            const newIdx = isIncrement
+                                ? Math.min(currentIdx + 1, allowedValues.length - 1)
+                                : Math.max(currentIdx - 1, 0);
+                            setSelectedIdx(newIdx);
+                            handleValueChange(allowedValues[newIdx] * multiplier);
+                            return;
+                        }
+                        if (Math.abs(value - innerValue / multiplier) === step) {
+                            handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(value * multiplier);
+                            return;
+                        }
+                        setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue(value * multiplier);
+                    }, onBlur: () => {
+                        handleValueChange(innerValue);
+                    }, allowMoreThanLimits: false, "data-test-id": dataTestAttribute }, uiProps, relatedUiProps)) }), showHint && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.hintWrapper, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.hint, children: (0, formatNumber_1.formatNumber)(min) }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.hint, children: (0, formatNumber_1.formatNumber)(max) })] }))] })));
+}

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

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

package/dist/cjs/components/Controls/StepperControl/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("./StepperControl"), exports);

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

@@ -0,0 +1,18 @@
+.hintWrapper{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  flex:1;
+  box-sizing:border-box;
+  padding:var(--dimension-050m, 4px);
+}
+
+.hint{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { FieldStepperProps } from '@snack-uikit/fields';
+import { FormValues, Price } from '../../../types';
+import { CONTROL } from '../constants';
+import { BaseDecoratorProps, TooltipPlacement } from '../types';
+type TableRow = {
+    label: string;
+    labelTooltip?: ReactNode;
+    labelTooltipPlacement?: TooltipPlacement;
+    accessorKey: string;
+    priceAccessorKey?: string;
+    allowedValues?: number[];
+    uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+};
+export type TableControl = {
+    type: typeof CONTROL.Table;
+    defaultValue?: FormValues;
+    accessorKey: string;
+    decoratorProps?: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>;
+    counter?: {
+        accessorKey: string;
+        label: string;
+        uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+    };
+    rows: TableRow[];
+    onChangeFn?: never;
+    relateFn?: never;
+    watchedControls?: never;
+};
+export type TableControlUiProps = {
+    value?: string;
+    onChange?(value?: string): void;
+    watchedValues?: FormValues;
+    priceList: Record<string, Price>;
+} & TableControl;
+export declare function TableControlUi({ rows, counter, decoratorProps, value: valueProp, onChange: onChangeProp, priceList, accessorKey, }: TableControlUiProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableControlUi = TableControlUi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const scroll_1 = require("@snack-uikit/scroll");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const typography_1 = require("@snack-uikit/typography");
+const hooks_1 = require("../../../hooks");
+const utils_1 = require("../../../utils");
+const ObjectDecorator_1 = require("../ObjectDecorator");
+const StepperControl_1 = require("../StepperControl");
+const helperComponents_1 = require("./helperComponents");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TableControlUi({ rows, counter, decoratorProps, value: valueProp, onChange: onChangeProp, priceList, accessorKey, }) {
+    const { isMobile } = (0, hooks_1.useAdaptive)();
+    const onChange = (accessorKey) => (newValue) => {
+        (0, utils_1.setValue)(valueProp, accessorKey, newValue);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(valueProp);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, "data-mobile": isMobile || undefined, children: [(0, jsx_runtime_1.jsx)(ObjectDecorator_1.ObjectDecorator, Object.assign({}, decoratorProps)), counter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.counter, children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyS, { children: [" ", counter.label] }), (0, jsx_runtime_1.jsx)(StepperControl_1.StepperControlUi, { value: (0, utils_1.getValue)(valueProp, counter.accessorKey), onChange: onChange(counter.accessorKey), uiProps: Object.assign({ min: 1, size: 's', showHint: false }, counter.uiProps), accessorKey: accessorKey, type: 'stepper', decoratorProps: {} })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, { barHideStrategy: 'never', children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.row, styles_module_scss_1.default.header), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cell, children: "\u0420\u0435\u0441\u0443\u0440\u0441" }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cell, children: "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E" }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cell, children: "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u0432 \u043C\u0435\u0441\u044F\u0446" })] }), rows.map(({ accessorKey, label, labelTooltip, labelTooltipPlacement, uiProps, allowedValues }) => ((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.cell, children: (0, jsx_runtime_1.jsxs)("span", { children: [label, "\u00A0", labelTooltip && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.tipWrapperInline, children: (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { "data-pointer": true, tip: labelTooltip, placement: labelTooltipPlacement, size: 'xs', tabIndex: -1 }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cell, children: allowedValues ? ((0, jsx_runtime_1.jsx)(helperComponents_1.StepperWithAllowedValues, Object.assign({ value: (0, utils_1.getValue)(valueProp, accessorKey), onChange: onChange(accessorKey), allowedValues: allowedValues }, uiProps))) : ((0, jsx_runtime_1.jsx)(StepperControl_1.StepperControlUi, { value: (0, utils_1.getValue)(valueProp, accessorKey), onChange: onChange(accessorKey), uiProps: Object.assign({ showHint: false, min: 0, size: 's' }, uiProps), type: 'stepper', decoratorProps: {}, accessorKey: accessorKey })) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cell, children: (0, utils_1.formatNumber)((0, utils_1.getPrice)({
+                                        price: (0, utils_1.getValue)(priceList, accessorKey),
+                                        pricePeriod: 'month',
+                                    })) + ' ₽' })] }, accessorKey)))] }) })] }));
+}

package/dist/cjs/components/Controls/TableControl/helperComponents/StepperWithAllowedValues.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type StepperWithAllowedValuesProps = {
+    value: number;
+    onChange(value: number): void;
+    allowedValues: number[];
+    postfix?: ReactNode;
+};
+export declare function StepperWithAllowedValues({ value, onChange, allowedValues, postfix }: StepperWithAllowedValuesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/Controls/TableControl/helperComponents/StepperWithAllowedValues.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperWithAllowedValues = StepperWithAllowedValues;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const input_private_1 = require("@snack-uikit/input-private");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function StepperWithAllowedValues({ value, onChange, allowedValues, postfix }) {
+    const [selectedIdx, setSelectedIdx] = (0, react_1.useState)(allowedValues.findIndex(item => item === value));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.input, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MinusSVG, {}), onClick: () => {
+                    const newIdx = Math.max(selectedIdx - 1, 0);
+                    setSelectedIdx(newIdx);
+                    onChange(allowedValues[newIdx]);
+                } }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            width: `${allowedValues[selectedIdx].toString().length * 8}px`,
+                        }, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { readonly: true, value: String(allowedValues[selectedIdx]) }) }), postfix && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.postfix, children: postfix })] }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PlusSVG, {}), onClick: () => {
+                    const newIdx = Math.min(selectedIdx + 1, allowedValues.length - 1);
+                    setSelectedIdx(newIdx);
+                    onChange(allowedValues[newIdx]);
+                } })] }));
+}

package/dist/cjs/components/Controls/TableControl/helperComponents/index.d.ts

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

package/dist/cjs/components/Controls/TableControl/helperComponents/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("./StepperWithAllowedValues"), exports);