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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useMemo, useState } from 'react';
+import { ChevronLeftSVG, ChevronRightSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Carousel } from '@snack-uikit/carousel';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { PaginationSlider } from '@snack-uikit/pagination';
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { useAdaptive } from '../../../hooks';
+import { parseKeyToDataTest } from '../../../utils';
+import { ToggleCard } from '../ToggleCard';
+import styles from './styles.module.css';
+export function CarouselControlUi({ items: itemsProp, value, onChange, uiProps, decoratorProps, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b;
+    const { isMobile } = useAdaptive();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = 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 = useMemo(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const [page, setPage] = useState(0);
+    const maxPage = isMobile ? items.length : items.length - 1;
+    const dataTestAttribute = parseKeyToDataTest('carousel', accessorKey);
+    const navigationDataTestAttribute = parseKeyToDataTest('carousel-navigation');
+    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]);
+    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)));
+    };
+    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 (_jsx("div", { className: styles.carousel, children: _jsxs(FieldDecorator, Object.assign({ size: 'm', caption: maxPage > 1
+                ? (_jsxs("div", { className: styles.controls, children: [_jsx(ButtonFunction, { icon: _jsx(ChevronLeftSVG, {}), size: 's', onClick: decPage, "data-test-id": `${navigationDataTestAttribute}-button-left` }), _jsx(ButtonFunction, { icon: _jsx(ChevronRightSVG, {}), size: 's', onClick: incPage, "data-test-id": `${navigationDataTestAttribute}-button-right` })] }))
+                : undefined }, decoratorProps, relatedDecoratorProps, { "data-test-id": dataTestAttribute, children: [_jsx(ToggleGroup, { selectionMode: 'single', value: value, onChange: value => {
+                        value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+                    }, children: _jsx(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 => (_createElement(ToggleCard, Object.assign({}, item, { key: item.value })))) })) }), _jsx("div", { className: styles.pagination, children: maxPage > 1 && _jsx(PaginationSlider, { page: page + 1, total: maxPage, onChange: page => setPage(page - 1) }) })] })) }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/Controls/Control/Control.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useCalculatorContext, useProductContext } from '../../../contexts';
+import { getValue, setValue } from '../../../utils';
+import { AlertControlUi } from '../AlertControl';
+import { ArrayControlUi } from '../ArrayControl';
+import { CarouselControlUi } from '../CarouselControl';
+import { CONTROL } from '../constants';
+import { ObjectControlUi } from '../ObjectControl';
+import { SegmentedControlUi } from '../SegmentedControl';
+import { SelectMultipleUi, SelectSingleUi } from '../SelectControl';
+import { SliderControlUi } from '../SliderControl';
+import { StepperControlUi } from '../StepperControl';
+import { TableControlUi } from '../TableControl';
+import { ToggleCardsControlUi } from '../ToggleCardsControl';
+import { ToggleControlUi } from '../ToggleControl';
+import { ToggleObjectControlUi } from '../ToggleObjectControl';
+export function Control({ formControl }) {
+    var _a, _b, _c;
+    const { calculatorType } = useCalculatorContext();
+    const { value: valueProp, onChange: onChangeProp, priceList: priceListProp } = useProductContext();
+    const { pricePeriod, setPricePeriod, onAnalyticsClick } = useCalculatorContext();
+    const accessorKey = (_a = formControl === null || formControl === void 0 ? void 0 : formControl.accessorKey) !== null && _a !== void 0 ? _a : '';
+    useEffect(() => {
+        var _a;
+        const setValueFn = (arr) => {
+            arr.forEach(([accessorKey, newValue]) => {
+                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] = getValue(valueProp, key);
+        }
+        return res;
+    }, {});
+    watchedValues.calculatorType = calculatorType;
+    if (formControl.type === CONTROL.Object) {
+        return _jsx(ObjectControlUi, Object.assign({}, formControl, { watchedValues: watchedValues }));
+    }
+    if (formControl.type === CONTROL.Array) {
+        return _jsx(ArrayControlUi, Object.assign({}, formControl));
+    }
+    const value = getValue(valueProp, accessorKey);
+    const priceList = 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}`);
+        }
+        setValue(valueProp, accessorKey, newValue);
+        onChangeProp(valueProp);
+    };
+    if (formControl === null || formControl === void 0 ? void 0 : formControl.onChangeFn) {
+        const setValueFn = (arr) => {
+            arr.forEach(([accessorKey, newValue]) => {
+                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 CONTROL.Table: {
+            return (_jsx(TableControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('table-control-ui'), priceList: priceList })));
+        }
+        case CONTROL.Carousel: {
+            return (_jsx(CarouselControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('carousel-control-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.ToggleCards: {
+            return (_jsx(ToggleCardsControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-cards-control-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.SelectSingle: {
+            return (_jsx(SelectSingleUi, Object.assign({}, formControl, { value: value, onChange: onChange('select-single-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.SelectMultiple: {
+            return (_jsx(SelectMultipleUi, Object.assign({}, formControl, { value: value, onChange: onChange('select-multiple-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.Segmented: {
+            return (_jsx(SegmentedControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('segment-control-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.Toggle: {
+            return (_jsx(ToggleControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-control-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.Stepper: {
+            return (_jsx(StepperControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('stepper-control-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.ToggleObject: {
+            return (_jsx(ToggleObjectControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('toggle-object-ui'), watchedValues: watchedValues })));
+        }
+        case CONTROL.Alert: {
+            return _jsx(AlertControlUi, Object.assign({}, formControl, { watchedValues: watchedValues }));
+        }
+        case CONTROL.Slider: {
+            return (_jsx(SliderControlUi, Object.assign({}, formControl, { value: value, onChange: onChange('slider-control-ui'), watchedValues: watchedValues })));
+        }
+        default:
+            throw new Error('not reachable');
+    }
+}

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

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

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

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

package/dist/esm/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/esm/components/Controls/ObjectControl/ObjectControl.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useCalculatorContext } from '../../../contexts';
+import { parseKeyToDataTest } from '../../../utils';
+import { Control } from '../Control';
+import { ObjectDecorator } from '../ObjectDecorator';
+import styles from './styles.module.css';
+function isRowConfig(row) {
+    return Boolean(typeof row === 'object' && row && 'controls' in row);
+}
+export function ObjectControlUi({ controls, ui, watchedValues, relateFn, visible: visibleProp, decoratorProps, }) {
+    var _a;
+    const { layoutType } = useCalculatorContext();
+    const isMobile = layoutType === 'mobile';
+    const { visible: relatedVisible } = 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 = parseKeyToDataTest('row');
+    const visible = (_a = relatedVisible !== null && relatedVisible !== void 0 ? relatedVisible : visibleProp) !== null && _a !== void 0 ? _a : true;
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [decoratorProps && decoratorProps.label && _jsx(ObjectDecorator, Object.assign({}, decoratorProps)), ui.map(uiRow => {
+                if (typeof uiRow === 'string') {
+                    return _jsx(Control, { formControl: controls[uiRow] }, uiRow);
+                }
+                if (Array.isArray(uiRow)) {
+                    return (_jsx("div", { className: styles.row, "data-test-id": dataTestAttribute, "data-mobile": isMobile || undefined, children: uiRow.map(rowItem => (_jsx(Control, { formControl: controls[rowItem] }, rowItem))) }, uiRow.join(' ')));
+                }
+                if (isRowConfig(uiRow)) {
+                    return (_jsx("div", { className: styles.rowConfig, style: {
+                            gridTemplateColumns: uiRow.template || '1fr 84px',
+                        }, children: uiRow.controls.map(rowItem => (_jsx(Control, { formControl: controls[rowItem] }, rowItem))) }, uiRow.controls.join(' ')));
+                }
+                return _jsx(_Fragment, { children: uiRow });
+            })] }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/Controls/ObjectDecorator/ObjectDecorator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function ObjectDecorator({ label, labelTooltip, labelTooltipPlacement, }) {
+    return (_jsxs("span", { className: styles.title, children: [_jsx(Typography.SansTitleM, { children: label }), labelTooltip && (_jsx("span", { className: styles.tipWrapperInline, children: _jsx(QuestionTooltip, { placement: labelTooltipPlacement, "data-pointer": true, tip: labelTooltip, size: 's', tabIndex: -1 }) }))] }));
+}

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

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

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

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

package/dist/esm/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/esm/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 {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useMemo } from 'react';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { ToggleGroup } from '@snack-uikit/toggles';
+import { parseKeyToDataTest } from '../../../utils';
+import { SegmentedControlCard } from './SegmentedControlCard';
+import styles from './styles.module.css';
+export function SegmentedControlUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, accessorKey, }) {
+    var _a, _b;
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = 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 = useMemo(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = parseKeyToDataTest('segmented', accessorKey);
+    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 (_jsx(FieldDecorator, Object.assign({}, decoratorProps, relatedDecoratorProps, { size: 'm', "data-test-id": dataTestAttribute, children: _jsx(ToggleGroup, { selectionMode: 'single', value: value, onChange: value => {
+                value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
+            }, children: _jsx("div", { className: styles.container, children: items.map(item => {
+                    var _a;
+                    return (_createElement(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/esm/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/esm/components/Controls/SegmentedControl/SegmentedControlCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChipToggle } from '@snack-uikit/chips';
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+export function SegmentedControlCard({ value, label, disabled, disabledReason, dataTestId }) {
+    const { isChecked, handleClick } = useToggleGroup({ value });
+    return (_jsx(Tooltip, { open: disabled && disabled && disabledReason ? undefined : false, tip: disabledReason, children: _jsx(ChipToggle, { size: 'm', checked: isChecked, onChange: handleClick, disabled: !isChecked && disabled, "data-test-id": dataTestId, label: label !== null && label !== void 0 ? label : value }) }));
+}

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

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

package/dist/esm/components/Controls/SegmentedControl/index.js

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

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

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

package/dist/esm/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/esm/components/Controls/SelectControl/SelectControl.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { AdaptiveFieldSelect } from '@sbercloud/uikit-product-mobile-fields';
+import { useCalculatorContext } from '../../../contexts';
+import { parseKeyToDataTest } from '../../../utils';
+import styles from './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,
+        });
+    });
+}
+export function SelectSingleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, watchedValues, relateFn, accessorKey, }) {
+    var _a, _b;
+    const { layoutType } = useCalculatorContext();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = 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 = useMemo(() => relatedItems !== null && relatedItems !== void 0 ? relatedItems : itemsProp, [itemsProp, relatedItems]);
+    const dataTestAttribute = parseKeyToDataTest('select', accessorKey);
+    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 (_jsxs("div", { children: [!decoratorProps.label && _jsx("div", { className: styles.zeroLabel }), _jsx(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))] }));
+}
+export function SelectMultipleUi({ decoratorProps, uiProps, value, onChange, items: itemsProp, relateFn, watchedValues, }) {
+    var _a, _b;
+    const { layoutType } = useCalculatorContext();
+    const { items: relatedItems, decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps, } = 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 = 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 (_jsxs("div", { children: [!decoratorProps.label && _jsx("div", { className: styles.zeroLabel }), _jsx(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/esm/components/Controls/SelectControl/index.d.ts

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

package/dist/esm/components/Controls/SelectControl/index.js

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

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

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

package/dist/esm/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 {};