@consta/uikit 3.15.0 → 3.17.0

package/__internal__/cjs-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__/cjs-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__/cjs-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__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -18,11 +18,12 @@ exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
 var cnSelectDropdown = bem_1.cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnSelectDropdown);
 exports.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 = tslib_1.__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 = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound"]);
     var getIndex = fabricIndex_1.fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        react_1["default"].createElement(Popover_1.Popover, tslib_1.__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 = react_1.useRef(null);
+    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, nodeRef: popoverRef, classNames: cnSelectDropdownCssTransition, timeout: 200 },
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__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_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (useSelect_1.isOptionForCreate(group)) {
@@ -34,5 +35,6 @@ exports.SelectDropdown = function (props) {
                             return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
 };

package/__internal__/cjs-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__/cjs-src/components/SelectComponents/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.getInputWidth = exports.defaultlabelForCreate = exports.defaultlabelForNotFound = exports.getSelectDropdownForm = void 0;
+exports.getInputWidth = exports.defaultLabelForEmptyItems = exports.defaultlabelForCreate = exports.defaultlabelForNotFound = exports.getSelectDropdownForm = void 0;
 var SelectDropdown_1 = require("./SelectDropdown/SelectDropdown");
 var mapDropdownForms = {
     "default": SelectDropdown_1.selectDropdownform[0],
@@ -22,6 +22,7 @@ function getSelectDropdownForm(form) {
 exports.getSelectDropdownForm = getSelectDropdownForm;
 exports.defaultlabelForNotFound = 'Не найдено';
 exports.defaultlabelForCreate = '+';
+exports.defaultLabelForEmptyItems = 'Список пуст';
 exports.getInputWidth = function (controlInnerRef, helperInputFakeElement) {
     if (!controlInnerRef.current || !helperInputFakeElement.current) {
         return 20;

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

@@ -3,7 +3,7 @@ exports.__esModule = true;
 exports.SelectDropdown = exports.defaultSelectDropdownPropForm = exports.selectDropdownform = void 0;
 var tslib_1 = require("tslib");
 require("./SelectDropdown.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
 var bem_1 = require("../../../utils/bem");
 var cnForCssTransition_1 = require("../../../utils/cnForCssTransition");
@@ -17,8 +17,9 @@ var cnSelectDropdown = bem_1.cn('SelectDropdownDeprecated');
 var cnSelectDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnSelectDropdown);
 exports.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 ? exports.defaultSelectDropdownPropForm : _b, isOpen = props.isOpen, renderItem = props.renderItem;
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        react_1["default"].createElement(Popover_1.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 = react_1.useRef(null);
+    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200, nodeRef: popoverRef },
+        react_1["default"].createElement(Popover_1.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_1["default"].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__/cjs-src/components/Sidebar/Sidebar.js

@@ -37,6 +37,7 @@ var ContextConsumer = function (_a) {
 exports.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 = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = react_1.useRef(null);
+    var portalRef = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
     react_1.useEffect(function () {
         if (isOpen) {
@@ -49,8 +50,8 @@ exports.Sidebar = function (props) {
     useGlobalKeys_1.useGlobalKeys({
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: exports.cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(exports.cnSidebar), timeout: 200 },
-        react_1["default"].createElement(PortalWithTheme_1.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_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: exports.cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(exports.cnSidebar), timeout: 200, nodeRef: portalRef },
+        react_1["default"].createElement(PortalWithTheme_1.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_1["default"].createElement("div", { className: exports.cnSidebar('Overlay'), "aria-label": "Overlay" }),
             react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__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: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));

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

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 require("./Slider.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useFlag_1 = require("../../hooks/useFlag/useFlag");
+var useSortSteps_1 = require("../../hooks/useSortSteps/useSortSteps");
 var bem_1 = require("../../utils/bem");
 var getByMap_1 = require("../../utils/getByMap");
 var FieldCaption_1 = require("../FieldCaption/FieldCaption");
@@ -28,6 +29,7 @@ function SliderRender(props, ref) {
     var leftButtonRef = react_1.useRef(null);
     var rightButtonRef = react_1.useRef(null);
     var sliderRef = react_1.useRef(null);
+    var sortedSteps = useSortSteps_1.useSortSteps({ step: step, min: min, max: max });
     var IconRight = rightSide;
     var IconLeft = helper_1.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap_1.getByMap(sizeMap, size);
@@ -37,13 +39,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_1.useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
+    var _m = useSliderStationing_1.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();
@@ -54,7 +56,7 @@ function SliderRender(props, ref) {
         label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, { className: cnSlider('Label'), size: size }, label)),
         react_1["default"].createElement("div", { className: cnSlider('Container') },
             leftSide === 'input' && helper_1.isNotRangeParams(props) && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
-                react_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_1.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_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_1.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_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
                 react_1["default"].createElement(IconLeft, { size: iconSize, view: "secondary" }))),
             react_1["default"].createElement("div", { className: cnSlider('Control'), ref: sliderRef },

package/__internal__/cjs-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__/cjs-src/components/SliderCanary/SliderInput/SliderInput.js

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

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

@@ -56,25 +56,18 @@ exports.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 = tslib_1.__spread([min], stepsArr_1);
-        }
-        else if (step[step.length - 1] !== max) {
-            stepsArr_1 = tslib_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__/cjs-src/components/SliderCanary/useSlider/useSlider.js

@@ -55,7 +55,7 @@ function useSlider(props) {
         });
     }, [step]);
     react_1.useEffect(function () {
-        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+        if (typeof value !== 'undefined') {
             var targetValue = helper_1.isRangeParams(props)
                 ? [
                     helper_1.getValidValue(props.value[0], min, max, step),
@@ -96,32 +96,24 @@ function useSlider(props) {
             }
             if (validKeyCode) {
                 if (Array.isArray(step)) {
-                    var stepsArr_1 = tslib_1.__spread(step);
-                    if (step[0] !== minValue) {
-                        stepsArr_1 = tslib_1.__spread([minValue], stepsArr_1);
-                    }
-                    if (step[step.length - 1] !== maxValue) {
-                        stepsArr_1 = tslib_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__/cjs-src/components/SliderCanary/useSliderStationing.js

@@ -7,17 +7,10 @@ exports.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]
             });
         }
     }
@@ -33,6 +26,7 @@ exports.getSteps = function (step, min, max) {
     return stepsArray;
 };
 exports.useSliderStationing = function (value, min, max, view, range, step, buttonRefs, sliderLineRef) {
+    if (step === void 0) { step = 1; }
     var _a = tslib_1.__read(react_1.useState([]), 2), lineSizes = _a[0], setLineSizes = _a[1];
     var _b = tslib_1.__read(react_1.useState([]), 2), buttonPositions = _b[0], setButtonPositions = _b[1];
     var calculateLines = function () {

package/__internal__/cjs-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__/cjs-src/components/SnackBar/SnackBar.js

@@ -5,23 +5,23 @@ var tslib_1 = require("tslib");
 require("./SnackBar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
+var useRefs_1 = require("../../hooks/useRefs/useRefs");
 var bem_1 = require("../../utils/bem");
 var cnForCssTransition_1 = require("../../utils/cnForCssTransition");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var SnackBarItem_1 = require("./SnackBarItem/SnackBarItem");
+var helper_1 = require("./helper");
 exports.cnSnackBar = bem_1.cn('SnackBar');
 var cssTransitionClassNames = cnForCssTransition_1.cnForCssTransition(exports.cnSnackBar, 'Item');
-exports.SnackBar = function (props) {
-    var _a = usePropsHandler_1.usePropsHandler('SnackBar', props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
-    var refs = react_1.useMemo(function () {
-        var refArray = [];
-        for (var i = 0; i < items.length; i++) {
-            refArray[i] = react_1.createRef();
-        }
-        return refArray;
-    }, [items]);
-    return (react_1["default"].createElement(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, otherProps, { className: exports.cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
-        return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            react_1["default"].createElement(SnackBarItem_1.SnackBarItem, { item: item, ref: refs[index], className: exports.cnSnackBar('Item') })));
-    })));
-};
+function SnackBarRender(propsComponent, ref) {
+    var props = usePropsHandler_1.usePropsHandler('SnackBar', helper_1.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 = tslib_1.__rest(props, ["items", "className", "getItemKey", "getItemActions", "getItemAutoClose", "getItemIcon", "getItemMessage", "getItemOnAutoClose", "getItemOnClose", "getItemShowProgress", "getItemStatus", "onItemClose", "onItemAutoClose"]);
+    var refs = useRefs_1.useRefs(items.length);
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSnackBar(null, [className]), ref: ref }, otherProps),
+        react_1["default"].createElement(react_transition_group_1.TransitionGroup, { component: null, appear: true, enter: true, exit: true }, items.map(function (item, index) {
+            return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: exports.cnSnackBar('Item', { key: getItemKey(item) }), timeout: 200 },
+                react_1["default"].createElement(SnackBarItem_1.SnackBarItem, tslib_1.__assign({ ref: refs[index], className: exports.cnSnackBar('Item') }, helper_1.getItem(item, props)))));
+        }))));
+}
+exports.SnackBar = react_1.forwardRef(SnackBarRender);
+tslib_1.__exportStar(require("./types"), exports);

package/__internal__/cjs-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__/cjs-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 {};

package/__internal__/cjs-src/components/SnackBar/SnackBarItem/SnackBarItem.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.SnackBarItem = exports.cnSnackBarItem = void 0;
+exports.SnackBarItem = exports.SnackBarItemRender = exports.cnSnackBarItem = void 0;
 var tslib_1 = require("tslib");
 require("../../Theme/_color/Theme_color_gpnDark.css");
 require("./SnackBarItem.css");
@@ -12,10 +12,10 @@ var type_guards_1 = require("../../../utils/type-guards");
 var Button_1 = require("../../Button/Button");
 var Text_1 = require("../../Text/Text");
 var Theme_1 = require("../../Theme/Theme");
-var helper_1 = require("../helper");
 var SnackBarActionButton_1 = require("../SnackBarActionButton/SnackBarActionButton");
 var SnackBarLine_1 = require("../SnackBarLine/SnackBarLine");
 var SnackBarTimer_1 = require("../SnackBarTimer/SnackBarTimer");
+var types_1 = require("../types");
 var defaultInitialTimerTime = 3;
 exports.cnSnackBarItem = bem_1.cn('SnackBarItem');
 var getAutoCloseTime = function (autoClose) {
@@ -27,9 +27,8 @@ var getAutoCloseTime = function (autoClose) {
     }
     return false;
 };
-exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
-    var item = props.item, className = props.className;
-    var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? helper_1.snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
+function SnackBarItemRender(props, ref) {
+    var onClose = props.onClose, autoClose = props.autoClose, showProgress = props.showProgress, Icon = props.icon, message = props.message, actions = props.actions, _a = props.status, status = _a === void 0 ? types_1.snackBarItemStatusDefault : _a, onAutoCloseProp = props.onAutoClose, className = props.className, otherProps = tslib_1.__rest(props, ["onClose", "autoClose", "showProgress", "icon", "message", "actions", "status", "onAutoClose", "className"]);
     var _b = tslib_1.__read(react_1.useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = tslib_1.__read(useFlag_1.useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
     var _e = tslib_1.__read(useFlag_1.useFlag(false), 2), timeIsOver = _e[0], onTimeIsOver = _e[1].on;
@@ -40,12 +39,12 @@ exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
     var handleMouseLeave = function () { return offHover(); };
     var autoCloseTime = getAutoCloseTime(autoClose);
     var hideAutoCloseTimer = showProgress === undefined || !(type_guards_1.isNumber(autoCloseTime) && autoCloseTime > 0);
-    var onAutoClose = function (item) {
+    var onAutoClose = function () {
         if (onAutoCloseProp) {
-            onAutoCloseProp(item);
+            onAutoCloseProp();
         }
         else {
-            onClose && onClose(item);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
     react_1.useEffect(function () {
@@ -60,13 +59,13 @@ exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
     }, [hover, timeIsOver, timerFunctions]);
     var handleTimeIsOver = function () {
         onTimeIsOver();
-        onAutoClose(item);
+        onAutoClose();
     };
-    var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (react_1["default"].createElement("div", { ref: ref, className: exports.cnSnackBarItem({ status: status, showProgress: showProgress }, [
+    var handleClose = onClose ? function () { return onClose(); } : undefined;
+    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: exports.cnSnackBarItem({ status: status, showProgress: showProgress }, [
             Theme_1.cnTheme({ color: 'gpnDark' }),
             className,
-        ]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
+        ]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined }, otherProps),
         autoCloseTime && showProgress !== 'line' && (react_1["default"].createElement(SnackBarTimer_1.SnackBarTimer, { className: exports.cnSnackBarItem('Timer'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
         hideAutoCloseTimer && Icon && react_1["default"].createElement(Icon, { className: exports.cnSnackBarItem('Icon'), size: "m" }),
         react_1["default"].createElement("div", { className: exports.cnSnackBarItem('Content') },
@@ -74,4 +73,6 @@ exports.SnackBarItem = react_1["default"].forwardRef(function (props, ref) {
             actions && (react_1["default"].createElement(SnackBarActionButton_1.SnackBarActionButton, { actions: actions, className: exports.cnSnackBarItem('ActionButton') }))),
         onClose && (react_1["default"].createElement(Button_1.Button, { className: exports.cnSnackBarItem('CloseButton'), view: "clear", iconLeft: IconClose_1.IconClose, form: "round", size: "xs", onClick: handleClose })),
         autoCloseTime && showProgress === 'line' && (react_1["default"].createElement(SnackBarLine_1.SnackBarLine, { className: exports.cnSnackBarItem('Line'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime }))));
-});
+}
+exports.SnackBarItemRender = SnackBarItemRender;
+exports.SnackBarItem = react_1["default"].forwardRef(SnackBarItemRender);

package/__internal__/cjs-src/components/SnackBar/SnackBarLine/SnackBarLine.d.ts

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

package/__internal__/cjs-src/components/SnackBar/SnackBarTimer/SnackBarTimer.d.ts

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