@consta/uikit 3.10.0 → 3.11.0

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/Table/Table.d.ts

@@ -103,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,7 +52,7 @@ 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, _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, _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 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);
@@ -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 &&

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

@@ -6,7 +6,7 @@ export declare const tagBasePropSizeDefault: "m";
 export declare type TagBasePropSize = typeof tagBasePropSize[number];
 export declare const tagBasePropGroupNumberValue: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9];
 export declare const tagBasePropGroupStringValue: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-export declare const tagBasePropGroup: ("1" | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
+export declare const tagBasePropGroup: ("1" | 1 | 4 | 2 | 7 | 3 | 5 | 6 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
 export declare type TagBasePropGroup = typeof tagBasePropGroup[number];
 export declare const tagBasePropView: readonly ["stroked", "filled"];
 export declare const tagBasePropViewDefault: "stroked";

package/__internal__/src/components/UserSelect/helpers.d.ts

@@ -103,7 +103,7 @@ export declare const isMultipleParams: <ITEM, GROUP>(params: UserSelectProps<ITE
 export declare const isNotMultipleParams: <ITEM, GROUP>(params: UserSelectProps<ITEM, GROUP, boolean>) => params is UserSelectProps<ITEM, GROUP, false>;
 export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGroup, MULTIPLE extends boolean = false>(props: UserSelectProps<ITEM, GROUP, MULTIPLE>): {
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     placeholder?: string | undefined;

package/__internal__/src/hooks/useOverflow/useOverflow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    currentRef: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement> | Document | Window;
+};
+export declare const useOverflow: (props: Props) => boolean;
+export {};

package/__internal__/src/hooks/useOverflow/useOverflow.js

@@ -0,0 +1,50 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useComponentSize } from '../useComponentSize/useComponentSize';
+var getMaxWidth = function (element) {
+    if (element instanceof Window) {
+        return element.outerWidth;
+    }
+    if (element instanceof Document) {
+        return element.documentElement.offsetWidth;
+    }
+    if (element instanceof HTMLElement) {
+        return element.offsetWidth;
+    }
+    if (element.current) {
+        return element.current.offsetWidth;
+    }
+    return 0;
+};
+export var useOverflow = function (props) {
+    var currentRef = props.currentRef, containerRef = props.containerRef;
+    var _a = __read(useState(false), 2), isOverflow = _a[0], setIsOverflow = _a[1];
+    var size = useComponentSize(currentRef);
+    useEffect(function () {
+        var _a;
+        var container = containerRef || ((_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement);
+        if (container && currentRef.current) {
+            var cs = container instanceof HTMLElement
+                ? getComputedStyle(container)
+                : {
+                    paddingLeft: '0',
+                    paddingTop: '0',
+                    paddingBottom: '0',
+                    paddingRight: '0'
+                };
+            var padding = {
+                top: parseFloat(cs.paddingTop),
+                left: parseFloat(cs.paddingLeft),
+                right: parseFloat(cs.paddingRight),
+                bottom: parseFloat(cs.paddingBottom)
+            };
+            if (getMaxWidth(container) - padding.left - padding.right < currentRef.current.scrollWidth) {
+                setIsOverflow(true);
+            }
+            else {
+                setIsOverflow(false);
+            }
+        }
+    }, [size.width, size.height]);
+    return isOverflow;
+};

package/__internal__/src/hooks/useScrollElements/useScrollElements.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type UseScrollElementsResult = {
+    refs: React.RefObject<HTMLElement>[];
+    scrollTo: (index: number) => void;
+};
+export declare function useScrollElements<ITEM>(items: ITEM[]): UseScrollElementsResult;
+export {};

package/__internal__/src/hooks/useScrollElements/useScrollElements.js

@@ -0,0 +1,30 @@
+import { createRef, useMemo } from 'react';
+export function useScrollElements(items) {
+    var refs = useMemo(function () {
+        var refArray = [];
+        for (var i = 0; i < items.length; i++) {
+            refArray[i] = createRef();
+        }
+        return refArray;
+    }, [items]);
+    var scrollTo = function (index) {
+        var _a;
+        var currentRef = refs[index];
+        var container = (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (currentRef.current && container) {
+            var defaultPadding = getComputedStyle(container).position !== 'relative' ? container.offsetLeft : 0;
+            var scrollLeft = currentRef.current.offsetLeft - defaultPadding;
+            if (index === 0) {
+                scrollLeft = 0;
+            }
+            else if (index === refs.length - 1) {
+                scrollLeft = container.scrollWidth;
+            }
+            container.scrollLeft = scrollLeft;
+        }
+    };
+    return {
+        refs: refs,
+        scrollTo: scrollTo
+    };
+}

package/createIcon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createIcon",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/createResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createResponsesImage",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "keywords": [
     "ui-kit",
     "design-system",
@@ -287,6 +287,7 @@
     "Select",
     "Sidebar",
     "Skeleton",
+    "SliderCanary",
     "SnackBar",
     "Steps",
     "Switch",
@@ -317,8 +318,10 @@
     "useGlobalKeys",
     "useKeys",
     "useMutableRef",
+    "useOverflow",
     "usePrevious",
     "useResizeObserved",
+    "useScrollElements",
     "useScrollPosition",
     "useSelect",
     "useThemeVars",

package/useChoiceGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroup",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useChoiceGroupIndexed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroupIndexed",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useClickOutside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useClickOutside",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useComponentSize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useComponentSize",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useDebounce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useDebounce",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useFlag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useFlag",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useForkRef/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useForkRef",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useGlobalKeys/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useGlobalKeys",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useKeys/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useKeys",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useMutableRef/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useMutableRef",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useOverflow/es.js

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useOverflow/useOverflow";

package/useOverflow/index.d.ts

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useOverflow/useOverflow";

package/useOverflow/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../__internal__/cjs-src/hooks/useOverflow/useOverflow"), exports);

package/useOverflow/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@consta/uikit/useOverflow",
+  "version": "3.11.0",
+  "main": "index.js",
+  "module": "es.js",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/usePrevious/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/usePrevious",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useResizeObserved/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useResizeObserved",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useScrollElements/es.js

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useScrollElements/useScrollElements";

package/useScrollElements/index.d.ts

@@ -0,0 +1 @@
+export * from "../__internal__/src/hooks/useScrollElements/useScrollElements";

package/useScrollElements/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("../__internal__/cjs-src/hooks/useScrollElements/useScrollElements"), exports);

package/useScrollElements/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@consta/uikit/useScrollElements",
+  "version": "3.11.0",
+  "main": "index.js",
+  "module": "es.js",
+  "sideEffects": [
+    "*.css"
+  ]
+}

package/useScrollPosition/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useScrollPosition",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useSelect",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useThemeVars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useThemeVars",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useTimer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useTimer",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/withTooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/withTooltip",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [