@consta/uikit 3.15.1 → 3.17.1

package/__internal__/src/components/Popover/Popover.js

@@ -1,8 +1,11 @@
 import { __assign, __read, __rest, __spread } from "tslib";
+import './Popover.css';
 import React, { useEffect } from 'react';
 import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
 import { useComponentSize } from '../../hooks/useComponentSize/useComponentSize';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
+import { useThemeVars } from '../../hooks/useThemeVars/useThemeVars';
+import { cn } from '../../utils/bem';
 import { PortalWithTheme, usePortalContext } from '../PortalWithTheme/PortalWithTheme';
 import { useTheme } from '../Theme/Theme';
 import { getComputedPositionAndDirection } from './helpers';
@@ -36,6 +39,20 @@ export var directionsStartEdge = [
     'rightStartUp',
     'rightStartDown',
 ];
+export var popoverPropOffset = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl',
+    '5xl',
+    '6xl',
+];
 export var directions = __spread(directionsStartCenter, directionsStartEdge);
 var isRenderProp = function (children) { return typeof children === 'function'; };
 /**
@@ -53,20 +70,23 @@ var ContextConsumer = function (_a) {
     });
     return React.createElement(React.Fragment, null, children);
 };
+var cnPopover = cn('Popover');
 export var Popover = React.forwardRef(function (props, componentRef) {
-    var children = props.children, _a = props.direction, passedDirection = _a === void 0 ? 'upCenter' : _a, _b = props.offset, offset = _b === void 0 ? 0 : _b, arrowOffset = props.arrowOffset, _c = props.possibleDirections, possibleDirections = _c === void 0 ? directions : _c, _d = props.isInteractive, isInteractive = _d === void 0 ? true : _d, onClickOutside = props.onClickOutside, _e = props.spareDirection, spareDirection = _e === void 0 ? 'downStartLeft' : _e, style = props.style, passedPosition = props.position, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
+    var _a;
+    var children = props.children, _b = props.direction, passedDirection = _b === void 0 ? 'upCenter' : _b, _c = props.offset, offset = _c === void 0 ? 0 : _c, arrowOffset = props.arrowOffset, _d = props.possibleDirections, possibleDirections = _d === void 0 ? directions : _d, _e = props.isInteractive, isInteractive = _e === void 0 ? true : _e, onClickOutside = props.onClickOutside, _f = props.spareDirection, spareDirection = _f === void 0 ? 'downStartLeft' : _f, style = props.style, className = props.className, passedPosition = props.position, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
     var ref = React.useRef(null);
     var theme = useTheme().theme;
-    var _f = __read(React.useState(), 2), anchorClientRect = _f[0], setAnchorClientRect = _f[1];
-    var _g = useComponentSize(ref), width = _g.width, height = _g.height;
+    var _g = __read(React.useState(), 2), anchorClientRect = _g[0], setAnchorClientRect = _g[1];
+    var _h = useComponentSize(ref), width = _h.width, height = _h.height;
     var anchorSize = useComponentSize(anchorRef || { current: null });
     var previousDirectionRef = React.useRef(null);
     var previousDirection = previousDirectionRef.current;
-    var _h = __read(React.useState([]), 2), bannedDirections = _h[0], setBannedDirections = _h[1];
+    var _j = __read(React.useState([]), 2), bannedDirections = _j[0], setBannedDirections = _j[1];
     var resetBannedDirections = function () {
         setBannedDirections(function (state) { return (state.length ? [] : state); });
         previousDirectionRef.current = null;
     };
+    var vars = useThemeVars();
     var updateAnchorClientRect = function () { var _a; return setAnchorClientRect((_a = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()); };
     React.useLayoutEffect(updateAnchorClientRect, [anchorSize]);
     usePopoverReposition({
@@ -77,14 +97,16 @@ export var Popover = React.forwardRef(function (props, componentRef) {
             updateAnchorClientRect();
         }
     });
-    var _j = getComputedPositionAndDirection({
+    var _k = getComputedPositionAndDirection({
         contentSize: { width: width, height: height },
         viewportSize: {
             // Размер вьюпорта без скроллбаров
             width: document.documentElement.clientWidth,
             height: document.documentElement.clientHeight
         },
-        offset: offset,
+        offset: typeof offset === 'string'
+            ? vars.space["--space-" + offset]
+            : offset,
         arrowOffset: arrowOffset,
         direction: passedDirection,
         possibleDirections: possibleDirections,
@@ -94,7 +116,7 @@ export var Popover = React.forwardRef(function (props, componentRef) {
             : passedPosition,
         anchorSize: anchorSize,
         spareDirection: spareDirection
-    }), position = _j.position, direction = _j.direction;
+    }), position = _k.position, direction = _k.direction;
     useEffect(function () { return onSetDirection && onSetDirection(direction); }, [direction]);
     /**
      * Может возникнуть ситуация, когда перерасчет поповера всегда будет выдавать 2 направления
@@ -112,6 +134,6 @@ export var Popover = React.forwardRef(function (props, componentRef) {
     // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор
     React.useLayoutEffect(resetBannedDirections, [props]);
     var content = isRenderProp(children) ? children(direction) : children;
-    return (React.createElement(PortalWithTheme, __assign({}, otherProps, { preset: theme, container: window.document.body, ref: useForkRef([ref, componentRef]), style: __assign(__assign(__assign({}, style), (equalAnchorWidth && { width: anchorSize.width })), { pointerEvents: isInteractive ? undefined : 'none', position: 'absolute', top: ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY, left: ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX, visibility: position ? undefined : 'hidden' }) }),
+    return (React.createElement(PortalWithTheme, __assign({}, otherProps, { preset: theme, className: cnPopover(null, [className]), container: window.document.body, ref: useForkRef([ref, componentRef]), style: __assign(__assign({}, style), (_a = {}, _a['--popover-top'] = ((position === null || position === void 0 ? void 0 : position.y) || 0) + window.scrollY + "px", _a['--popover-left'] = ((position === null || position === void 0 ? void 0 : position.x) || 0) + window.scrollX + "px", _a["--popover-width"] = equalAnchorWidth ? anchorSize.width + "px" : undefined, _a["--popover-pointer-events"] = isInteractive ? undefined : 'none', _a["--popover-visibility"] = position ? undefined : 'hidden', _a)) }),
         React.createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, content)));
 });

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

@@ -1,6 +1,7 @@
 import { Direction, Position } from './Popover';
 declare type Size = Pick<ClientRect, 'width' | 'height'>;
 declare type PositionsByDirection = Record<Direction, NonNullable<Position>>;
+export declare const convertPixelsToNumber: (pixels: string) => number;
 export declare const getPositionsByDirection: ({ contentSize, anchorSize, position: { x, y }, offset, arrowOffset, }: {
     contentSize: Size;
     anchorSize: Size;
@@ -13,7 +14,7 @@ declare type ComputedPositionAndDirectionParams = {
     contentSize: Size;
     viewportSize: Size;
     anchorSize?: Size;
-    offset: number;
+    offset?: number | string;
     arrowOffset?: number;
     direction: Direction;
     spareDirection: Direction;

package/__internal__/src/components/Popover/helpers.js

@@ -3,6 +3,9 @@ var getPosition = function (x, y) { return ({
     x: Math.round(x),
     y: Math.round(y)
 }); };
+export var convertPixelsToNumber = function (pixels) {
+    return Number(pixels.slice(0, pixels.length - 2));
+};
 export var getPositionsByDirection = function (_a) {
     var contentSize = _a.contentSize, anchorSize = _a.anchorSize, _b = _a.position, x = _b.x, y = _b.y, offset = _a.offset, _c = _a.arrowOffset, arrowOffset = _c === void 0 ? 0 : _c;
     var contentWidth = contentSize.width, contentHeight = contentSize.height;
@@ -53,15 +56,16 @@ export var getPositionsByDirection = function (_a) {
     };
 };
 export var getComputedPositionAndDirection = function (_a) {
-    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, offset = _a.offset, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection;
+    var initialPosition = _a.position, contentSize = _a.contentSize, viewportSize = _a.viewportSize, _b = _a.anchorSize, anchorSize = _b === void 0 ? { width: 0, height: 0 } : _b, _c = _a.offset, offset = _c === void 0 ? 0 : _c, arrowOffset = _a.arrowOffset, initialDirection = _a.direction, possibleDirections = _a.possibleDirections, bannedDirections = _a.bannedDirections, spareDirection = _a.spareDirection;
     if (!initialPosition) {
         return { position: initialPosition, direction: initialDirection };
     }
+    var currentOffset = typeof offset === 'string' ? convertPixelsToNumber(offset) : offset;
     var positionsByDirection = getPositionsByDirection({
         contentSize: contentSize,
         anchorSize: anchorSize,
         position: initialPosition,
-        offset: offset,
+        offset: currentOffset,
         arrowOffset: arrowOffset
     });
     var direction = __spread([initialDirection], possibleDirections).filter(function (dir) { return !bannedDirections.includes(dir); })

package/__internal__/src/components/Select/Select.js

@@ -6,7 +6,7 @@ import { useSelect } from '../../hooks/useSelect/useSelect';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { cnSelect, COMPONENT_NAME } from '../SelectComponents/cnSelect';
-import { getSelectDropdownForm } from '../SelectComponents/helpers';
+import { defaultLabelForEmptyItems, getSelectDropdownForm } from '../SelectComponents/helpers';
 import { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';
 import { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';
 import { SelectItem } from '../SelectComponents/SelectItem/SelectItem';
@@ -15,8 +15,8 @@ import { withDefaultGetters, } from './helpers';
 function SelectRender(props, ref) {
     var defaultDropdownRef = useRef(null);
     var controlRef = useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
-    var _g = useSelect({
+    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, _g = _a.labelForEmptyItems, labelForEmptyItems = _g === void 0 ? defaultLabelForEmptyItems : _g, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "labelForEmptyItems", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
+    var _h = useSelect({
         items: items,
         groups: groups,
         value: value,
@@ -32,7 +32,7 @@ function SelectRender(props, ref) {
         multiple: false,
         onBlur: onBlur,
         onFocus: onFocus
-    }), getKeyProps = _g.getKeyProps, getOptionProps = _g.getOptionProps, isOpen = _g.isOpen, visibleItems = _g.visibleItems, isFocused = _g.isFocused, handleInputFocus = _g.handleInputFocus, handleInputBlur = _g.handleInputBlur, handleToggleDropdown = _g.handleToggleDropdown, inputRef = _g.inputRef, handleInputClick = _g.handleInputClick, notFound = _g.notFound;
+    }), getKeyProps = _h.getKeyProps, getOptionProps = _h.getOptionProps, isOpen = _h.isOpen, visibleItems = _h.visibleItems, isFocused = _h.isFocused, handleInputFocus = _h.handleInputFocus, handleInputBlur = _h.handleInputBlur, handleToggleDropdown = _h.handleToggleDropdown, inputRef = _h.inputRef, handleInputClick = _h.handleInputClick, notFound = _h.notFound, hasItems = _h.hasItems;
     var dropdownForm = getSelectDropdownForm(form);
     var renderItemDefault = function (props) {
         var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
@@ -53,7 +53,7 @@ function SelectRender(props, ref) {
             React.createElement("span", { className: cnSelect('Indicators') },
                 React.createElement("button", { type: "button", className: cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     React.createElement(IconSelect, { size: "xs", className: cnSelect('DropdownIndicatorIcon') })))),
-        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
+        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, labelForEmptyItems: labelForEmptyItems, hasItems: hasItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
 }
 export var Select = forwardRef(SelectRender);
 export * from './helpers';

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

@@ -42,6 +42,7 @@ export declare type SelectProps<ITEM = DefaultItem, GROUP = DefaultGroup> = Prop
     dropdownRef?: React.RefObject<HTMLDivElement>;
     required?: boolean;
     name?: string;
+    labelForEmptyItems?: string;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM>;
     renderValue?: PropRenderValue<ITEM>;
@@ -101,6 +102,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     required?: boolean | undefined;
     name?: string | undefined;
+    labelForEmptyItems?: string | undefined;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM> | undefined;
     renderValue?: PropRenderValue<ITEM> | undefined;

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.css

@@ -104,7 +104,8 @@
               transform: translateY(var(--transition-spase));
     }
 
-  .SelectDropdown-LabelForNotFound {
+  .SelectDropdown-LabelForNotFound,
+  .SelectDropdown-LabelForEmptyItems {
     padding: 0 var(--space-xs);
   }
 

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts

@@ -23,7 +23,9 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getGroupLabel?: (group: GROUP) => string;
     labelForCreate?: string;
     labelForNotFound?: string;
+    labelForEmptyItems?: string;
     notFound?: boolean;
+    hasItems?: boolean;
 }>;
 declare type SelectDropdown = <ITEM, GROUP>(props: Props<ITEM, GROUP>) => React.ReactElement | null;
 export declare const SelectDropdown: SelectDropdown;

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import './SelectDropdown.css';
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isOptionForCreate, } from '../../../hooks/useSelect/useSelect';
 import { cn } from '../../../utils/bem';
@@ -15,11 +15,12 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, ref = props.ref, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound"]);
     var getIndex = fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
+    var popoverRef = useRef(null);
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, nodeRef: popoverRef, classNames: cnSelectDropdownCssTransition, timeout: 200 },
+        React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, ref: popoverRef, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
             React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (isOptionForCreate(group)) {
@@ -31,5 +32,6 @@ export var SelectDropdown = function (props) {
                             return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
 };

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

@@ -3,4 +3,5 @@ import { PropForm } from './types';
 export declare function getSelectDropdownForm(form: PropForm): SelectDropdownPropForm;
 export declare const defaultlabelForNotFound = "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
 export declare const defaultlabelForCreate = "+";
+export declare const defaultLabelForEmptyItems = "\u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0443\u0441\u0442";
 export declare const getInputWidth: (controlInnerRef: React.RefObject<HTMLDivElement>, helperInputFakeElement: React.RefObject<HTMLDivElement>) => number;

package/__internal__/src/components/SelectComponents/helpers.js

@@ -18,6 +18,7 @@ export function getSelectDropdownForm(form) {
 }
 export var defaultlabelForNotFound = 'Не найдено';
 export var defaultlabelForCreate = '+';
+export var defaultLabelForEmptyItems = 'Список пуст';
 export var getInputWidth = function (controlInnerRef, helperInputFakeElement) {
     if (!controlInnerRef.current || !helperInputFakeElement.current) {
         return 20;

package/__internal__/src/components/SelectComponentsDeprecated/SelectDropdown/SelectDropdown.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import './SelectDropdown.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { cn } from '../../../utils/bem';
 import { cnForCssTransition } from '../../../utils/cnForCssTransition';
@@ -14,8 +14,9 @@ var cnSelectDropdown = cn('SelectDropdownDeprecated');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var SelectDropdown = function (props) {
     var controlRef = props.controlRef, visibleOptions = props.visibleOptions, highlightedIndex = props.highlightedIndex, size = props.size, getOptionProps = props.getOptionProps, inputValue = props.inputValue, dropdownRef = props.dropdownRef, id = props.id, _a = props.hasGroup, hasGroup = _a === void 0 ? false : _a, selectedValues = props.selectedValues, labelForCreate = props.labelForCreate, getOptionKey = props.getOptionKey, className = props.className, labelForNotFound = props.labelForNotFound, _b = props.form, form = _b === void 0 ? defaultSelectDropdownPropForm : _b, isOpen = props.isOpen, renderItem = props.renderItem;
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        React.createElement(Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), "aria-activedescendant": id + "-" + highlightedIndex, equalAnchorWidth: true },
+    var popoverRef = useRef(null);
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200, nodeRef: popoverRef },
+        React.createElement(Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, ref: popoverRef, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), "aria-activedescendant": id + "-" + highlightedIndex, equalAnchorWidth: true },
             React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef }, visibleOptions.length > 0 ? (visibleOptions.map(function (option, index) {
                 var isOptionForCreate = 'optionForCreate' in option;
                 var currentOption = visibleOptions[index];

package/__internal__/src/components/Sidebar/Sidebar.js

@@ -34,6 +34,7 @@ var ContextConsumer = function (_a) {
 export var Sidebar = function (props) {
     var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, style = props.style, rootClassName = props.rootClassName, otherProps = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = useRef(null);
+    var portalRef = useRef(null);
     var theme = useTheme().theme;
     useEffect(function () {
         if (isOpen) {
@@ -46,8 +47,8 @@ export var Sidebar = function (props) {
     useGlobalKeys({
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200 },
-        React.createElement(PortalWithTheme, { preset: theme, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200, nodeRef: portalRef },
+        React.createElement(PortalWithTheme, { preset: theme, ref: portalRef, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && React.createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
             React.createElement("div", __assign({}, otherProps, { style: __assign(__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));

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

@@ -2,6 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './Slider.css';
 import React, { forwardRef, useRef } from 'react';
 import { useFlag } from '../../hooks/useFlag/useFlag';
+import { useSortSteps } from '../../hooks/useSortSteps/useSortSteps';
 import { cn } from '../../utils/bem';
 import { getByMap } from '../../utils/getByMap';
 import { FieldCaption } from '../FieldCaption/FieldCaption';
@@ -25,6 +26,7 @@ function SliderRender(props, ref) {
     var leftButtonRef = useRef(null);
     var rightButtonRef = useRef(null);
     var sliderRef = useRef(null);
+    var sortedSteps = useSortSteps({ step: step, min: min, max: max });
     var IconRight = rightSide;
     var IconLeft = isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap(sizeMap, size);
@@ -34,13 +36,13 @@ function SliderRender(props, ref) {
         value: value,
         min: min,
         max: max,
-        step: step,
+        step: sortedSteps,
         onChange: onChange,
         onAfterChange: onAfterChange,
         sliderRef: sliderRef,
         buttonRefs: [leftButtonRef, rightButtonRef]
     }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, handlePress = _l.handlePress, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
-    var _m = useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
+    var _m = useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, sortedSteps, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
     var changeHovered = function (status) {
         if (status)
             on();
@@ -51,7 +53,7 @@ function SliderRender(props, ref) {
         label && (React.createElement(FieldLabel, { className: cnSlider('Label'), size: size }, label)),
         React.createElement("div", { className: cnSlider('Container') },
             leftSide === 'input' && isNotRangeParams(props) && (React.createElement("div", { className: cnSlider('Side', { position: 'left' }) },
-                React.createElement(SliderInput, { value: props.value, onChange: function (params) { var _a; return isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: step, disabled: disabled }))),
+                React.createElement(SliderInput, { value: props.value, onChange: function (params) { var _a; return isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: sortedSteps, disabled: disabled }))),
             IconLeft && (React.createElement("div", { className: cnSlider('Side', { position: 'left' }) },
                 React.createElement(IconLeft, { size: iconSize, view: "secondary" }))),
             React.createElement("div", { className: cnSlider('Control'), ref: sliderRef },

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

@@ -6,7 +6,7 @@ declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min'
     min?: number;
     max?: number;
     onChange?: (props: {
-        e?: React.ChangeEvent | React.MouseEvent;
+        e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;
         value: number;
     }) => void;
 };

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

@@ -18,5 +18,5 @@ export var SliderInput = function (props) {
         setCurrentValue(validatedValue.toString());
     };
     useEffect(function () { return setCurrentValue(value.toString()); }, [value]);
-    return (React.createElement(TextField, __assign({ onBlur: commitChange, type: "number", min: min, max: max, step: Array.isArray(step) ? 1 : step, onChange: handleChange, value: currentValue }, otherProps)));
+    return (React.createElement(TextField, __assign({ onBlur: commitChange, type: "number", min: min, max: max, step: step, onChange: handleChange, value: currentValue }, otherProps)));
 };

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

@@ -1,4 +1,4 @@
-import { __read, __spread } from "tslib";
+import { __read } from "tslib";
 import { getSteps } from '../useSliderStationing';
 export var isRangeParams = function (params) {
     return !!params.range;
@@ -53,25 +53,18 @@ export var getValidValue = function (value, min, max, step) {
             return (Math.ceil(Number(value.toFixed(division ? division.length : 0)) / stepValue) * stepValue);
         }
         var resultValue_1 = value;
-        var stepsArr_1 = step;
-        if (step[0] !== min) {
-            stepsArr_1 = __spread([min], stepsArr_1);
-        }
-        else if (step[step.length - 1] !== max) {
-            stepsArr_1 = __spread(stepsArr_1, [max]);
-        }
-        stepsArr_1.forEach(function (stepPoint, index) {
+        step.forEach(function (stepPoint, index) {
             var minValue = min;
             var maxValue = max;
             if (index === 0) {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
             }
-            else if (index === stepsArr_1.length - 1) {
+            else if (index === step.length - 1) {
                 minValue = stepPoint;
                 maxValue = max;
             }
             else {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
                 minValue = stepPoint;
             }
             if (value <= maxValue && value >= minValue) {

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

@@ -52,7 +52,7 @@ export function useSlider(props) {
         });
     }, [step]);
     useEffect(function () {
-        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+        if (typeof value !== 'undefined') {
             var targetValue = isRangeParams(props)
                 ? [
                     getValidValue(props.value[0], min, max, step),
@@ -93,32 +93,24 @@ export function useSlider(props) {
             }
             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) {
+                    step.forEach(function (stepPoint, index) {
                         if (typeof typeButton === 'number' && changedValue_1 === stepPoint) {
                             if (stepIncrement_1 >= 0) {
                                 if (index === 0) {
-                                    stepIncrement_1 = stepsArr_1[1] - minValue;
+                                    stepIncrement_1 = step[1] - minValue;
                                 }
                                 else {
                                     stepIncrement_1 =
-                                        (typeof stepsArr_1[index + 1] !== 'undefined'
-                                            ? stepsArr_1[index + 1]
-                                            : maxValue) - stepPoint;
+                                        (typeof step[index + 1] !== 'undefined' ? step[index + 1] : maxValue) -
+                                            stepPoint;
                                 }
                             }
                             else if (index === 0) {
-                                stepIncrement_1 = minValue - stepsArr_1[1];
+                                stepIncrement_1 = minValue - step[1];
                             }
                             else {
                                 stepIncrement_1 =
-                                    (typeof stepsArr_1[index - 1] !== 'undefined' ? stepsArr_1[index - 1] : minValue) -
+                                    (typeof step[index - 1] !== 'undefined' ? step[index - 1] : minValue) -
                                         stepPoint;
                             }
                         }

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

@@ -4,17 +4,10 @@ export var getSteps = function (step, min, max) {
     var stepsArray = [];
     var size = min;
     if (Array.isArray(step)) {
-        step.forEach(function (stepSize) {
+        for (var i = 0; i < step.length - 1; i++) {
             stepsArray.push({
-                min: size,
-                max: stepSize
-            });
-            size += stepSize - size;
-        });
-        if (size !== max) {
-            stepsArray.push({
-                min: size,
-                max: max
+                min: step[i],
+                max: step[i + 1]
             });
         }
     }
@@ -30,6 +23,7 @@ export var getSteps = function (step, min, max) {
     return stepsArray;
 };
 export var useSliderStationing = function (value, min, max, view, range, step, buttonRefs, sliderLineRef) {
+    if (step === void 0) { step = 1; }
     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 () {

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

@@ -1,5 +1,5 @@
 import './SnackBar.css';
-import React from 'react';
-import { SnackBarProps } from './helper';
+import { SnackBarComponent } from './types';
 export declare const cnSnackBar: import("@bem-react/classname").ClassNameFormatter;
-export declare const SnackBar: React.FC<SnackBarProps>;
+export declare const SnackBar: SnackBarComponent;
+export * from './types';

package/__internal__/src/components/SnackBar/SnackBar.js

@@ -1,24 +1,24 @@
 import { __assign, __rest } from "tslib";
 import './SnackBar.css';
-import React, { createRef, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { useRefs } from '../../hooks/useRefs/useRefs';
 import { cn } from '../../utils/bem';
 import { cnForCssTransition } from '../../utils/cnForCssTransition';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { SnackBarItem } from './SnackBarItem/SnackBarItem';
+import { getItem, withDefaultGetters } from './helper';
 export var cnSnackBar = cn('SnackBar');
 var cssTransitionClassNames = cnForCssTransition(cnSnackBar, 'Item');
-export var SnackBar = function (props) {
-    var _a = usePropsHandler('SnackBar', props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
-    var refs = useMemo(function () {
-        var refArray = [];
-        for (var i = 0; i < items.length; i++) {
-            refArray[i] = createRef();
-        }
-        return refArray;
-    }, [items]);
-    return (React.createElement(TransitionGroup, __assign({}, otherProps, { className: cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
-        return (React.createElement(CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            React.createElement(SnackBarItem, { item: item, ref: refs[index], className: cnSnackBar('Item') })));
-    })));
-};
+function SnackBarRender(propsComponent, ref) {
+    var props = usePropsHandler('SnackBar', withDefaultGetters(propsComponent));
+    var items = props.items, className = props.className, getItemKey = props.getItemKey, getItemActions = props.getItemActions, getItemAutoClose = props.getItemAutoClose, getItemIcon = props.getItemIcon, getItemMessage = props.getItemMessage, getItemOnAutoClose = props.getItemOnAutoClose, getItemOnClose = props.getItemOnClose, getItemShowProgress = props.getItemShowProgress, getItemStatus = props.getItemStatus, onItemClose = props.onItemClose, onItemAutoClose = props.onItemAutoClose, otherProps = __rest(props, ["items", "className", "getItemKey", "getItemActions", "getItemAutoClose", "getItemIcon", "getItemMessage", "getItemOnAutoClose", "getItemOnClose", "getItemShowProgress", "getItemStatus", "onItemClose", "onItemAutoClose"]);
+    var refs = useRefs(items.length);
+    return (React.createElement("div", __assign({ className: cnSnackBar(null, [className]), ref: ref }, otherProps),
+        React.createElement(TransitionGroup, { component: null, appear: true, enter: true, exit: true }, items.map(function (item, index) {
+            return (React.createElement(CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: cnSnackBar('Item', { key: getItemKey(item) }), timeout: 200 },
+                React.createElement(SnackBarItem, __assign({ ref: refs[index], className: cnSnackBar('Item') }, getItem(item, props)))));
+        }))));
+}
+export var SnackBar = forwardRef(SnackBarRender);
+export * from './types';

package/__internal__/src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.d.ts

@@ -1,4 +1,4 @@
 import './SnackBarActionButton.css';
 import React from 'react';
-import { SnackBarActionButtonProps } from '../helper';
+import { SnackBarActionButtonProps } from '../types';
 export declare const SnackBarActionButton: React.FC<SnackBarActionButtonProps>;

package/__internal__/src/components/SnackBar/SnackBarItem/SnackBarItem.d.ts

@@ -1,9 +1,7 @@
 import '../../Theme/_color/Theme_color_gpnDark.css';
 import './SnackBarItem.css';
 import React from 'react';
-import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
-import { SnackBarItemProps } from '../helper';
-declare type SnackBarItemComponent = (props: PropsWithHTMLAttributesAndRef<SnackBarItemProps, HTMLDivElement>) => React.ReactElement | null;
+import { SnackBarItemComponent, SnackBarItemProps } from '../types';
 export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
+export declare function SnackBarItemRender(props: SnackBarItemProps, ref: React.Ref<HTMLDivElement>): JSX.Element;
 export declare const SnackBarItem: SnackBarItemComponent;
-export {};