@consta/uikit 3.9.1 → 3.11.0

package/__internal__/src/components/SliderCanary/useSlider/useSlider.js

@@ -0,0 +1,227 @@
+import { __read, __spread } from "tslib";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { getActiveValue, getNewValue, getValidValue, getValueByPosition, isNotRangeParams, isRangeParams, trackPosition, } from './helper';
+export function useSlider(props) {
+    var disabled = props.disabled, range = props.range, value = props.value, min = props.min, max = props.max, _a = props.step, step = _a === void 0 ? 1 : _a, onChange = props.onChange, onAfterChange = props.onAfterChange, sliderRef = props.sliderRef, buttonRefs = props.buttonRefs;
+    var minValue = max > min ? min : 0;
+    var maxValue = max > min ? max : 100;
+    var _b = __read(useState(value), 2), currentValue = _b[0], setCurrentValue = _b[1];
+    var _c = __read(useState(null), 2), leftPopover = _c[0], setLeftPopover = _c[1];
+    var _d = __read(useState(null), 2), rightPopover = _d[0], setRightPopover = _d[1];
+    var _e = __read(useFlag(false), 2), draggable = _e[0], _f = _e[1], on = _f.on, off = _f.off;
+    var activeButton = useRef(null);
+    var sizeSlider = useComponentSize(sliderRef);
+    var addListeners = function () {
+        document.addEventListener('mouseup', handleTouchEnd);
+        document.addEventListener('touchend', handleTouchEnd);
+        document.addEventListener('mousemove', handleTouchMove);
+        document.addEventListener('touchmove', handleTouchMove);
+    };
+    var removeListeners = function () {
+        document.removeEventListener('mouseup', handleTouchEnd);
+        document.removeEventListener('touchend', handleTouchEnd);
+        document.removeEventListener('mousemove', handleTouchMove);
+        document.removeEventListener('touchmove', handleTouchMove);
+    };
+    useEffect(function () {
+        addListeners();
+        return function () {
+            removeListeners();
+        };
+    }, [
+        activeButton.current,
+        step,
+        currentValue,
+        value,
+        min,
+        max,
+        sliderRef.current,
+        buttonRefs,
+        disabled,
+        draggable,
+    ]);
+    useEffect(function () {
+        if (Array.isArray(currentValue)) {
+            setTooltipPosition(currentValue[0], 'left');
+            setTooltipPosition(currentValue[1], 'right');
+        }
+        else {
+            setTooltipPosition(currentValue, 'left');
+        }
+    }, [currentValue]);
+    useEffect(function () {
+        if (JSON.stringify(value) !== JSON.stringify(currentValue)) {
+            setCurrentValue(value);
+            setTooltipPosition(getActiveValue(value, activeButton.current), 'left');
+            activeButton.current = null;
+        }
+    }, [value]);
+    useEffect(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            value: Array.isArray(currentValue)
+                ? [
+                    getNewValue(currentValue[0], currentValue[0], step, min, max, 'left'),
+                    getNewValue(currentValue[1], currentValue[1], step, min, max, 'right'),
+                ]
+                : getNewValue(currentValue, currentValue, step, min, max, 'left')
+        });
+    }, [step]);
+    useEffect(function () {
+        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+            var targetValue = isRangeParams(props)
+                ? [
+                    getValidValue(props.value[0], min, max, step),
+                    getValidValue(props.value[1], min, max, step),
+                ]
+                : getValidValue(props.value, min, max, step);
+            setCurrentValue(targetValue);
+        }
+    }, [range, typeof value]);
+    useEffect(function () {
+        var _a;
+        if (isRangeParams(props)) {
+            if (props.value[0] > props.value[1]) {
+                var newValue = [props.value[1], props.value[1]];
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { value: newValue });
+            }
+        }
+    }, []);
+    var onKeyPress = useCallback(function (event, typeButton) {
+        if (!disabled && typeof typeButton === 'string' && typeof currentValue !== 'undefined') {
+            var stepIncrement_1 = !Array.isArray(step) ? step || 1 : 1;
+            var validKeyCode = false;
+            var changedValue_1 = getActiveValue(currentValue, typeButton);
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowRight':
+                case '+':
+                    validKeyCode = true;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                case '-':
+                    validKeyCode = true;
+                    stepIncrement_1 *= -1;
+                    break;
+                default:
+                    break;
+            }
+            if (validKeyCode) {
+                if (Array.isArray(step)) {
+                    var stepsArr_1 = __spread(step);
+                    if (step[0] !== minValue) {
+                        stepsArr_1 = __spread([minValue], stepsArr_1);
+                    }
+                    if (step[step.length - 1] !== maxValue) {
+                        stepsArr_1 = __spread(stepsArr_1, [maxValue]);
+                    }
+                    stepsArr_1.forEach(function (stepPoint, index) {
+                        if (typeof typeButton === 'string' && changedValue_1 === stepPoint) {
+                            if (stepIncrement_1 >= 0) {
+                                if (index === 0) {
+                                    stepIncrement_1 = stepsArr_1[1] - minValue;
+                                }
+                                else {
+                                    stepIncrement_1 =
+                                        (typeof stepsArr_1[index + 1] !== 'undefined'
+                                            ? stepsArr_1[index + 1]
+                                            : maxValue) - stepPoint;
+                                }
+                            }
+                            else if (index === 0) {
+                                stepIncrement_1 = minValue - stepsArr_1[1];
+                            }
+                            else {
+                                stepIncrement_1 =
+                                    (typeof stepsArr_1[index - 1] !== 'undefined' ? stepsArr_1[index - 1] : minValue) -
+                                        stepPoint;
+                            }
+                        }
+                    });
+                }
+                var newValue = getNewValue(changedValue_1 + stepIncrement_1, currentValue, step, min, max, typeButton);
+                setCurrentValue(newValue);
+                setTooltipPosition(getActiveValue(newValue, typeButton), typeButton);
+                onChange === null || onChange === void 0 ? void 0 : onChange({
+                    e: event,
+                    value: newValue
+                });
+            }
+        }
+    }, [currentValue, step, min, max]);
+    var setTooltipPosition = function (value, position) {
+        if (sliderRef.current && position) {
+            var button = buttonRefs[position === 'left' ? 0 : 1].current || sliderRef.current;
+            var _a = sliderRef.current.getBoundingClientRect(), x = _a.x, width = _a.width;
+            var newPosition = {
+                y: button.offsetTop + button.offsetHeight + 50,
+                x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width
+            };
+            if (position === 'left') {
+                setLeftPopover(newPosition);
+            }
+            else {
+                setRightPopover(newPosition);
+            }
+        }
+    };
+    var changePosition = function (event) {
+        var nativeEvent = event;
+        if (typeof activeButton.current !== 'string') {
+            return value;
+        }
+        var position = trackPosition(nativeEvent);
+        var positionValue = getValueByPosition(position, sliderRef, minValue, maxValue);
+        return getNewValue(positionValue, currentValue, step, min, max, activeButton.current);
+    };
+    var onFocus = function (e, button) {
+        activeButton.current = button;
+    };
+    var handleTouchMove = function (event) {
+        if (typeof activeButton.current === 'string' && draggable) {
+            var position = changePosition(event);
+            var oldValue = getActiveValue(currentValue, activeButton.current);
+            var newValue = getActiveValue(position, activeButton.current);
+            if (oldValue !== newValue) {
+                setCurrentValue(position);
+                onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange({ e: event, value: position });
+            }
+        }
+    };
+    var handleTouchEnd = function (event) {
+        var position = changePosition(event);
+        if (typeof position !== 'undefined') {
+            setCurrentValue(position);
+            onChange === null || onChange === void 0 ? void 0 : onChange({ e: event, value: position });
+        }
+        off();
+        if (JSON.stringify(position) !== JSON.stringify(currentValue)) {
+            buttonRefs.forEach(function (button) {
+                var _a;
+                (_a = button.current) === null || _a === void 0 ? void 0 : _a.blur();
+            });
+            activeButton.current = null;
+        }
+    };
+    useEffect(function () {
+        if (isRangeParams(props)) {
+            props.value.forEach(function (val, index) {
+                setTooltipPosition(getActiveValue(val, activeButton.current), index === 0 ? 'left' : 'right');
+            });
+        }
+        if (isNotRangeParams(props)) {
+            setTooltipPosition(getActiveValue(value, activeButton.current), 'left');
+        }
+        activeButton.current = null;
+    }, [sizeSlider, typeof value]);
+    return {
+        onKeyPress: onKeyPress,
+        onFocus: onFocus,
+        dragPoint: on,
+        activeButton: activeButton.current,
+        popoverPosition: [leftPopover, rightPopover],
+        currentValue: currentValue
+    };
+}

package/__internal__/src/components/SliderCanary/useSliderStationing.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Line, PropView } from './helper';
+declare type UseSliderStationing = (value: number | [number, number] | undefined, min: number, max: number, view: PropView, range: boolean | undefined, step: number | number[] | undefined, buttonRefs: [React.RefObject<HTMLButtonElement>, React.RefObject<HTMLButtonElement>], sliderLineRef: React.RefObject<HTMLDivElement>) => {
+    lineSizes: Line[];
+    buttonPositions: number[];
+};
+export declare const getSteps: (step: number | number[], min: number, max: number) => {
+    min: number;
+    max: number;
+}[];
+export declare const useSliderStationing: UseSliderStationing;
+export {};

package/__internal__/src/components/SliderCanary/useSliderStationing.js

@@ -0,0 +1,128 @@
+import { __read } from "tslib";
+import { useCallback, useEffect, useState } from 'react';
+export var getSteps = function (step, min, max) {
+    var stepsArray = [];
+    var size = min;
+    if (Array.isArray(step)) {
+        step.forEach(function (stepSize) {
+            stepsArray.push({
+                min: size,
+                max: stepSize
+            });
+            size += stepSize - size;
+        });
+        if (size !== max) {
+            stepsArray.push({
+                min: size,
+                max: max
+            });
+        }
+    }
+    else {
+        for (var i = min; i < max; i += step) {
+            stepsArray.push({
+                min: size,
+                max: size + (max - i < step ? max - i : step)
+            });
+            size += step;
+        }
+    }
+    return stepsArray;
+};
+export var useSliderStationing = function (value, min, max, view, range, step, buttonRefs, sliderLineRef) {
+    var _a = __read(useState([]), 2), lineSizes = _a[0], setLineSizes = _a[1];
+    var _b = __read(useState([]), 2), buttonPositions = _b[0], setButtonPositions = _b[1];
+    var calculateLines = function () {
+        var sizesArray = [];
+        var absoluteSize = Math.abs(max - min);
+        if (typeof value !== 'undefined') {
+            if (view === 'default') {
+                if (!Array.isArray(value) && typeof value === 'number') {
+                    sizesArray.push({
+                        width: (1 - (max - value) / absoluteSize) * 100,
+                        active: true
+                    });
+                    sizesArray.push({
+                        width: ((max - value) / absoluteSize) * 100,
+                        active: false
+                    });
+                }
+                else if (Array.isArray(value) && value) {
+                    sizesArray.push({
+                        width: ((value[0] - min) / absoluteSize) * 100,
+                        active: false
+                    });
+                    sizesArray.push({
+                        width: ((value[1] - value[0]) / absoluteSize) * 100,
+                        active: true
+                    });
+                    sizesArray.push({
+                        width: ((max - value[1]) / absoluteSize) * 100,
+                        active: false
+                    });
+                }
+                else {
+                    sizesArray.push({
+                        width: 100,
+                        active: false
+                    });
+                }
+            }
+            else if (typeof step !== 'undefined') {
+                getSteps(step, min, max).forEach(function (stepSize) {
+                    sizesArray.push({
+                        width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,
+                        active: (typeof value === 'number' || Array.isArray(value)) &&
+                            (range && Array.isArray(value)
+                                ? stepSize.max > value[0] && stepSize.min < value[1]
+                                : stepSize.max <= value)
+                    });
+                });
+            }
+        }
+        else {
+            sizesArray.push({
+                width: 100,
+                active: false
+            });
+        }
+        return sizesArray;
+    };
+    var getValidValue = function (value) {
+        if (value < min)
+            return min;
+        if (value > max)
+            return max;
+        return value;
+    };
+    var calculateButtonPositions = useCallback(function () {
+        var absoluteSize = Math.abs(max - min);
+        var defaultPaddingValue = 0;
+        var positions = [];
+        buttonRefs.forEach(function (buttonRef, index) {
+            var _a, _b;
+            if (buttonRef.current &&
+                buttonRef.current.offsetWidth &&
+                sliderLineRef.current &&
+                sliderLineRef.current.offsetWidth) {
+                defaultPaddingValue =
+                    (absoluteSize * ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)) /
+                        (2 * ((_b = sliderLineRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth)) || 0;
+            }
+            if (typeof value === 'number' || Array.isArray(value)) {
+                positions.push(typeof value === 'number'
+                    ? (1 - (max - getValidValue(value) + defaultPaddingValue) / absoluteSize) * 100
+                    : (1 - (max - getValidValue(value[index]) + defaultPaddingValue) / absoluteSize) * 100);
+            }
+        });
+        return positions;
+    }, [buttonRefs, sliderLineRef]);
+    useEffect(function () {
+        setLineSizes(calculateLines());
+        setButtonPositions(calculateButtonPositions());
+    }, [value, min, max, range, step, view]);
+    return {
+        lineSizes: lineSizes,
+        buttonPositions: buttonPositions
+    };
+};

package/__internal__/src/components/SnackBar/SnackBar.css

@@ -6,6 +6,12 @@
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  max-width: calc(400px + var(--space-xs) * 2);
+  padding-right: var(--space-xs);
+  padding-left: var(--space-xs);
 }
 
   .SnackBar-Item_animate_appear,

package/__internal__/src/components/Steps/Steps.css

@@ -1,9 +1,36 @@
 .Steps {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
 }
 
   .Steps-Item:not(:last-child) {
       margin-right: var(--space-xs);
     }
+
+  .Steps-List {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: visible;
+  }
+
+  .Steps-List::-webkit-scrollbar {
+      display: none;
+    }
+
+  .Steps-Button_side_left {
+        margin-right: var(--space-xs);
+      }
+
+  .Steps-Button_side_right {
+        margin-left: var(--space-xs);
+      }

package/__internal__/src/components/Steps/Steps.js

@@ -1,19 +1,48 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import './Steps.css';
-import React from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
+import { useOverflow } from '../../hooks/useOverflow/useOverflow';
+import { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';
+import { IconArrowLeft } from '../../icons/IconArrowLeft/IconArrowLeft';
+import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
 import { cn } from '../../utils/bem';
+import { Button } from '../Button/Button';
 import { StepsStep } from './StepsStep/StepsStep';
 export var stepsSizes = ['m', 'l'];
 export var stepsDefaultSize = stepsSizes[0];
 export var cnSteps = cn('Steps');
 export var Steps = React.forwardRef(function (props, ref) {
     var _a = props.size, size = _a === void 0 ? stepsDefaultSize : _a, items = props.items, value = props.value, getLabel = props.getLabel, getDisabled = props.getDisabled, getCompleted = props.getCompleted, getSkipped = props.getSkipped, onChange = props.onChange, className = props.className, otherProps = __rest(props, ["size", "items", "value", "getLabel", "getDisabled", "getCompleted", "getSkipped", "onChange", "className"]);
-    var _b = useChoiceGroup({
+    var _b = __read(useState(-1), 2), activeStep = _b[0], setActiveStep = _b[1];
+    var _c = useChoiceGroup({
         value: value,
         getKey: getLabel,
         callBack: onChange,
         multiple: false
-    }), getOnChange = _b.getOnChange, getChecked = _b.getChecked;
-    return (React.createElement("div", __assign({ ref: ref, className: cnSteps({ size: size }, [className]) }, otherProps), items.map(function (item, index) { return (React.createElement(StepsStep, { key: index, className: cnSteps('Item'), label: (getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item)) ? getLabel(item) : index + 1 + " " + getLabel(item), size: size, active: getChecked(item), onChange: getOnChange(item), completed: getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item), skipped: getSkipped === null || getSkipped === void 0 ? void 0 : getSkipped(item), disabled: getDisabled === null || getDisabled === void 0 ? void 0 : getDisabled(item) })); })));
+    }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
+    useMemo(function () {
+        items.forEach(function (item, index) {
+            if (getChecked(item)) {
+                setActiveStep(index);
+            }
+        });
+    }, [items, value]);
+    var _d = useScrollElements(items), refs = _d.refs, scrollTo = _d.scrollTo;
+    var stepsRef = useRef(null);
+    var isOverflow = useOverflow({ currentRef: stepsRef });
+    var changeStep = function (e, prev) {
+        if (prev && activeStep !== 0) {
+            getOnChange(items[activeStep - 1])(e);
+            scrollTo(activeStep - 1);
+        }
+        if (!prev && activeStep !== items.length - 1) {
+            getOnChange(items[activeStep + 1])(e);
+            scrollTo(activeStep + 1);
+        }
+    };
+    return (React.createElement("div", __assign({ ref: ref, className: cnSteps({ size: size }, [className]) }, otherProps),
+        isOverflow && (React.createElement(Button, { iconLeft: function () { return React.createElement(IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: cnSteps('Button', { side: 'left' }), onClick: function (e) { return changeStep(e, true); } })),
+        React.createElement("div", { ref: stepsRef, className: cnSteps('List') }, items.map(function (item, index) { return (React.createElement(StepsStep, { key: index, ref: refs[index], className: cnSteps('Item'), label: (getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item)) ? getLabel(item) : index + 1 + " " + getLabel(item), size: size, active: activeStep === index, onChange: getOnChange(item), completed: getCompleted === null || getCompleted === void 0 ? void 0 : getCompleted(item), skipped: getSkipped === null || getSkipped === void 0 ? void 0 : getSkipped(item), disabled: getDisabled === null || getDisabled === void 0 ? void 0 : getDisabled(item) })); })),
+        isOverflow && (React.createElement(Button, { iconLeft: function () { return React.createElement(IconArrowRight, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: cnSteps('Button', { side: 'right' }), onClick: function (e) { return changeStep(e, false); } }))));
 });

package/__internal__/src/components/Steps/StepsStep/StepsStep.css

@@ -16,6 +16,7 @@
   font-family: var(--font);
   line-height: var(--line-height-text-s);
   text-align: left;
+  white-space: nowrap;
   cursor: pointer;
   -webkit-transition: color 0.2s, font-weight 0.2s;
   transition: color 0.2s, font-weight 0.2s;

package/__internal__/src/components/Steps/StepsStep/StepsStep.js

@@ -2,7 +2,7 @@ import './StepsStep.css';
 import React from 'react';
 import { IconCheck } from '../../../icons/IconCheck/IconCheck';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 export var cnStepsStep = cn('StepsStep');
 var sizeMap = {
     m: 'xs',
@@ -13,7 +13,7 @@ export var StepsStep = React.forwardRef(function (props, ref) {
     var clickHandler = function (e) {
         !active && !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange(e));
     };
-    var iconSize = getSizeByMap(sizeMap, size);
+    var iconSize = getByMap(sizeMap, size);
     return (React.createElement("button", { ref: ref, className: cnStepsStep({ size: size, active: active, disabled: disabled, completed: completed, skipped: skipped }, [className]), type: "button", title: label, onClick: clickHandler },
         completed && React.createElement(IconCheck, { className: cnStepsStep('Icon'), size: iconSize }),
         label));

package/__internal__/src/components/Table/Cell/TableCell.css

@@ -36,14 +36,21 @@
   }
 
   .TableCell_isSortable,
-  .TableCell_isFilterable {
+  .TableCell_isFilterable,
+  .TableCell_isControl {
     --buttons-wrapper-size: var(--space-xl);
   }
 
-  .TableCell_isSortable.TableCell_isFilterable {
+  .TableCell_isSortable.TableCell_isFilterable,
+  .TableCell_isSortable.TableCell_isControl,
+  .TableCell_isFilterable.TableCell_isControl {
     --buttons-wrapper-size: var(--space-4xl);
   }
 
+  .TableCell_isSortable.TableCell_isFilterable.TableCell_isControl {
+    --buttons-wrapper-size: var(--space-5xl);
+  }
+
   .TableCell_stickyOnTop,
   .TableCell_stickyOnLeft {
     position: -webkit-sticky;

package/__internal__/src/components/Table/Cell/TableCell.js

@@ -17,6 +17,7 @@ var getCellClasses = function (props) {
         stickyOnTop: (props.type === 'header' && props.isSticky) || props.type === 'resizer',
         stickyOnLeft: column.isSticky,
         isFilterable: column.filterable,
+        isControl: Boolean(column.control),
         withoutBorder: props.type === 'resizer',
         isClickable: 'isClickable' in props && props.isClickable,
         isBorderTop: 'isBorderTop' in props && props.isBorderTop,

package/__internal__/src/components/Table/ChoiceGroupFilter/TableChoiceGroupFilter.js

@@ -18,5 +18,5 @@ export var TableChoiceGroupFilter = function (_a) {
         setValue(value);
     };
     return (React.createElement(TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
-        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, multiple: false, className: cnChoiceGroupFilter() })));
+        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, className: cnChoiceGroupFilter() })));
 };

package/__internal__/src/components/Table/Table.d.ts

@@ -79,6 +79,7 @@ export declare type TableColumn<T extends TableRow> = {
     width?: ColumnWidth;
     mergeCells?: boolean;
     position?: Position;
+    hidden?: boolean;
     control?: ({ column }: TableControl<T>) => React.ReactNode;
 } & (GroupColumnAddition<T> | SingleColumnAddition<T>);
 export declare type TableProps<T extends TableRow> = {
@@ -89,6 +90,7 @@ export declare type TableProps<T extends TableRow> = {
     size?: Size;
     stickyHeader?: boolean;
     stickyColumns?: number;
+    minColumnWidth?: number;
     isResizable?: boolean;
     activeRow?: ActiveRow;
     verticalAlign?: VerticalAlign;
@@ -101,6 +103,11 @@ export declare type TableProps<T extends TableRow> = {
     onRowHover?: onRowHover;
     onRowClick?: onRowClick;
     onRowCreate?: onRowCreate;
+    getAdditionalClassName?: (props: {
+        column: TableColumn<T>;
+        row: T;
+        isActive: boolean;
+    }) => string;
     rowCreateText?: string;
     lazyLoad?: LazyLoad;
     onFiltersUpdated?: (filters: SelectedFilters) => void;

package/__internal__/src/components/Table/Table.js

@@ -52,26 +52,26 @@ var sortingData = function (rows, sorting, onSortBy) {
 var defaultEmptyRowsPlaceholder = (React.createElement(Text, { as: "span", view: "primary", size: "s", lineHeight: "s" }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
 var InternalTable = function (props, ref) {
     var _a, _b, _c, _d;
-    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, activeRow = props.activeRow, _j = props.verticalAlign, verticalAlign = _j === void 0 ? 'top' : _j, _k = props.headerVerticalAlign, headerVerticalAlign = _k === void 0 ? 'center' : _k, zebraStriped = props.zebraStriped, _l = props.borderBetweenRows, borderBetweenRows = _l === void 0 ? false : _l, _m = props.borderBetweenColumns, borderBetweenColumns = _m === void 0 ? false : _m, _o = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _o === void 0 ? defaultEmptyRowsPlaceholder : _o, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, _p = props.rowCreateText, rowCreateText = _p === void 0 ? '+ Добавить строку' : _p, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _q = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _q === void 0 ? false : _q;
-    var _r = useHeaderData(columns), headers = _r.headers, flattenedHeaders = _r.flattenedHeaders, lowHeaders = _r.lowHeaders, headerRowsRefs = _r.headerRowsRefs, headerRowsHeights = _r.headerRowsHeights, resizerTopOffsets = _r.resizerTopOffsets;
+    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, getAdditionalClassName = props.getAdditionalClassName, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
+    var _s = useHeaderData(columns), headers = _s.headers, flattenedHeaders = _s.flattenedHeaders, lowHeaders = _s.lowHeaders, headerRowsRefs = _s.headerRowsRefs, headerRowsHeights = _s.headerRowsHeights, resizerTopOffsets = _s.resizerTopOffsets;
     var stickyColumnsGrid = ((_a = headers[0][stickyColumns - 1]) === null || _a === void 0 ? void 0 : _a.position.gridIndex) +
         (((_b = headers[0][stickyColumns - 1]) === null || _b === void 0 ? void 0 : _b.position.colSpan) || 1);
     var getColumnsWidth = function () { return lowHeaders.map(function (column) { return column.width; }); };
-    var _s = __read(React.useState(getColumnsWidth()), 2), resizedColumnWidths = _s[0], setResizedColumnWidths = _s[1];
+    var _t = __read(React.useState(getColumnsWidth()), 2), resizedColumnWidths = _t[0], setResizedColumnWidths = _t[1];
     var filters = React.useMemo(function () {
         return rawFilters && rawFilters.filter(function (filter) { return filter.id && filter.field; });
     }, [rawFilters]);
     React.useEffect(function () {
         setResizedColumnWidths(getColumnsWidth());
     }, [lowHeaders.length]);
-    var _t = __read(React.useState([]), 2), initialColumnWidths = _t[0], setInitialColumnWidths = _t[1];
-    var _u = __read(React.useState(null), 2), sorting = _u[0], setSorting = _u[1];
-    var _v = __read(React.useState(null), 2), visibleFilter = _v[0], setVisibleFilter = _v[1];
-    var _w = __read(React.useState({ top: 0, left: 0 }), 2), tableScroll = _w[0], setTableScroll = _w[1];
+    var _u = __read(React.useState([]), 2), initialColumnWidths = _u[0], setInitialColumnWidths = _u[1];
+    var _v = __read(React.useState(null), 2), sorting = _v[0], setSorting = _v[1];
+    var _w = __read(React.useState(null), 2), visibleFilter = _w[0], setVisibleFilter = _w[1];
+    var _x = __read(React.useState({ top: 0, left: 0 }), 2), tableScroll = _x[0], setTableScroll = _x[1];
     var tableRef = React.useRef(null);
     var columnsRefs = React.useRef({});
-    var _x = useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _x.selectedFilters, updateSelectedFilters = _x.updateSelectedFilters, removeOneSelectedFilter = _x.removeOneSelectedFilter, removeAllSelectedFilters = _x.removeAllSelectedFilters;
-    var _y = __read(React.useState([]), 2), expandedRowIds = _y[0], setExpandedRowIds = _y[1];
+    var _y = useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _y.selectedFilters, updateSelectedFilters = _y.updateSelectedFilters, removeOneSelectedFilter = _y.removeOneSelectedFilter, removeAllSelectedFilters = _y.removeAllSelectedFilters;
+    var _z = __read(React.useState([]), 2), expandedRowIds = _z[0], setExpandedRowIds = _z[1];
     // установка сортировки по умолчанию
     React.useEffect(function () {
         var sortingColumn = columns.find(function (col) { return isString(col.order) && Object.prototype.hasOwnProperty.call(Order, col.order); });
@@ -177,7 +177,7 @@ var InternalTable = function (props, ref) {
         return onRowCreate && onRowCreate({ e: e, id: id, index: index });
     }; };
     var handleColumnResize = function (idx, delta) {
-        var columnMinWidth = Math.min(150, initialColumnWidths[idx]);
+        var columnMinWidth = Math.min(minColumnWidth, initialColumnWidths[idx]);
         var prevColumnWidth = resizedColumnWidths[idx] || initialColumnWidths[idx];
         var newColumnWidth = Math.max(columnMinWidth, prevColumnWidth + delta);
         updateColumnWidth(idx, newColumnWidth);
@@ -227,8 +227,8 @@ var InternalTable = function (props, ref) {
             selectedFilters: selectedFilters
         })
         : sortedTableData;
-    var _z = lazyLoad || {}, _0 = _z.maxVisibleRows, maxVisibleRows = _0 === void 0 ? 210 : _0, _1 = _z.scrollableEl, scrollableEl = _1 === void 0 ? tableRef.current : _1;
-    var _2 = useLazyLoadData(maxVisibleRows, scrollableEl, !!lazyLoad), getSlicedRows = _2.getSlicedRows, setBoundaryRef = _2.setBoundaryRef;
+    var _0 = lazyLoad || {}, _1 = _0.maxVisibleRows, maxVisibleRows = _1 === void 0 ? 210 : _1, _2 = _0.scrollableEl, scrollableEl = _2 === void 0 ? tableRef.current : _2;
+    var _3 = useLazyLoadData(maxVisibleRows, scrollableEl, !!lazyLoad), getSlicedRows = _3.getSlicedRows, setBoundaryRef = _3.setBoundaryRef;
     var flatRowsData = transformRows(filteredData, expandedRowIds, isExpandedRowsByDefault);
     var rowsData = getSlicedRows(flatRowsData);
     var tableStyle = {
@@ -350,6 +350,10 @@ var InternalTable = function (props, ref) {
                                 ? activeRow.id !== undefined && activeRow.id !== row.id
                                 : false,
                             isMerged: column.mergeCells && rowSpan > 1
+                        }), className: getAdditionalClassName === null || getAdditionalClassName === void 0 ? void 0 : getAdditionalClassName({
+                            column: column,
+                            row: row,
+                            isActive: activeRow ? activeRow.id === row.id : false
                         }), onClick: function (e) {
                             return handleSelectRow({ id: row.id, e: e });
                         }, column: column, verticalAlign: verticalAlign, isClickable: !!isRowsClickable, showVerticalShadow: showVerticalCellShadow &&