@consta/uikit 3.16.0 → 3.17.2

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

@@ -1,11 +1,14 @@
 "use strict";
 exports.__esModule = true;
-exports.Popover = exports.directions = exports.directionsStartEdge = exports.directionsStartCenter = exports.usePopoverReposition = void 0;
+exports.Popover = exports.directions = exports.popoverPropOffset = exports.directionsStartEdge = exports.directionsStartCenter = exports.usePopoverReposition = void 0;
 var tslib_1 = require("tslib");
+require("./Popover.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useClickOutside_1 = require("../../hooks/useClickOutside/useClickOutside");
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var useThemeVars_1 = require("../../hooks/useThemeVars/useThemeVars");
+var bem_1 = require("../../utils/bem");
 var PortalWithTheme_1 = require("../PortalWithTheme/PortalWithTheme");
 var Theme_1 = require("../Theme/Theme");
 var helpers_1 = require("./helpers");
@@ -39,6 +42,20 @@ exports.directionsStartEdge = [
     'rightStartUp',
     'rightStartDown',
 ];
+exports.popoverPropOffset = [
+    '3xs',
+    '2xs',
+    'xs',
+    's',
+    'm',
+    'l',
+    'xl',
+    '2xl',
+    '3xl',
+    '4xl',
+    '5xl',
+    '6xl',
+];
 exports.directions = tslib_1.__spread(exports.directionsStartCenter, exports.directionsStartEdge);
 var isRenderProp = function (children) { return typeof children === 'function'; };
 /**
@@ -56,20 +73,23 @@ var ContextConsumer = function (_a) {
     });
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
+var cnPopover = bem_1.cn('Popover');
 exports.Popover = react_1["default"].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 ? exports.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 = tslib_1.__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 ? exports.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 = tslib_1.__rest(props, ["children", "direction", "offset", "arrowOffset", "possibleDirections", "isInteractive", "onClickOutside", "spareDirection", "style", "className", "position", "anchorRef", "equalAnchorWidth", "onSetDirection"]);
     var ref = react_1["default"].useRef(null);
     var theme = Theme_1.useTheme().theme;
-    var _f = tslib_1.__read(react_1["default"].useState(), 2), anchorClientRect = _f[0], setAnchorClientRect = _f[1];
-    var _g = useComponentSize_1.useComponentSize(ref), width = _g.width, height = _g.height;
+    var _g = tslib_1.__read(react_1["default"].useState(), 2), anchorClientRect = _g[0], setAnchorClientRect = _g[1];
+    var _h = useComponentSize_1.useComponentSize(ref), width = _h.width, height = _h.height;
     var anchorSize = useComponentSize_1.useComponentSize(anchorRef || { current: null });
     var previousDirectionRef = react_1["default"].useRef(null);
     var previousDirection = previousDirectionRef.current;
-    var _h = tslib_1.__read(react_1["default"].useState([]), 2), bannedDirections = _h[0], setBannedDirections = _h[1];
+    var _j = tslib_1.__read(react_1["default"].useState([]), 2), bannedDirections = _j[0], setBannedDirections = _j[1];
     var resetBannedDirections = function () {
         setBannedDirections(function (state) { return (state.length ? [] : state); });
         previousDirectionRef.current = null;
     };
+    var vars = useThemeVars_1.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_1["default"].useLayoutEffect(updateAnchorClientRect, [anchorSize]);
     usePopoverReposition_1.usePopoverReposition({
@@ -80,14 +100,16 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
             updateAnchorClientRect();
         }
     });
-    var _j = helpers_1.getComputedPositionAndDirection({
+    var _k = helpers_1.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,
@@ -97,7 +119,7 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
             : passedPosition,
         anchorSize: anchorSize,
         spareDirection: spareDirection
-    }), position = _j.position, direction = _j.direction;
+    }), position = _k.position, direction = _k.direction;
     react_1.useEffect(function () { return onSetDirection && onSetDirection(direction); }, [direction]);
     /**
      * Может возникнуть ситуация, когда перерасчет поповера всегда будет выдавать 2 направления
@@ -115,6 +137,6 @@ exports.Popover = react_1["default"].forwardRef(function (props, componentRef) {
     // Главное не сбрасывать при изменении размеров поповера, т.к. именно оно может вызвать бесконечный перебор
     react_1["default"].useLayoutEffect(resetBannedDirections, [props]);
     var content = isRenderProp(children) ? children(direction) : children;
-    return (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__assign(tslib_1.__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_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, tslib_1.__assign({}, otherProps, { preset: theme, className: cnPopover(null, [className]), container: window.document.body, ref: useForkRef_1.useForkRef([ref, componentRef]), style: tslib_1.__assign(tslib_1.__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_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside, ignoreClicksInsideRefs: [ref, anchorRef || { current: null }] }, content)));
 });

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

@@ -1,11 +1,14 @@
 "use strict";
 exports.__esModule = true;
-exports.getComputedPositionAndDirection = exports.getPositionsByDirection = void 0;
+exports.getComputedPositionAndDirection = exports.getPositionsByDirection = exports.convertPixelsToNumber = void 0;
 var tslib_1 = require("tslib");
 var getPosition = function (x, y) { return ({
     x: Math.round(x),
     y: Math.round(y)
 }); };
+exports.convertPixelsToNumber = function (pixels) {
+    return Number(pixels.slice(0, pixels.length - 2));
+};
 exports.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;
@@ -56,15 +59,16 @@ exports.getPositionsByDirection = function (_a) {
     };
 };
 exports.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' ? exports.convertPixelsToNumber(offset) : offset;
     var positionsByDirection = exports.getPositionsByDirection({
         contentSize: contentSize,
         anchorSize: anchorSize,
         position: initialPosition,
-        offset: offset,
+        offset: currentOffset,
         arrowOffset: arrowOffset
     });
     var direction = tslib_1.__spread([initialDirection], possibleDirections).filter(function (dir) { return !bannedDirections.includes(dir); })

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, 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, ref = props.ref, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "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)) {

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/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>;