@consta/uikit 3.16.0 → 3.17.2

package/__internal__/src/components/EventInterceptor/propsHandlers/useSnackBarEventsHandler.d.ts

@@ -1,6 +1,3 @@
-import React from 'react';
+import { SnackBarItemDefault, SnackBarProps } from '../../SnackBar/types';
 import { EventInterceptorHandler } from '../EventInterceptor';
-export declare const useSnackBarEventsHandler: <P extends React.PropsWithChildren<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-    items: import("../../SnackBar/helper").Item[];
-    children?: undefined;
-}, HTMLDivElement>>>(props: P, handler: EventInterceptorHandler) => P;
+export declare const useSnackBarEventsHandler: <P extends SnackBarProps<SnackBarItemDefault>>(props: P, handler: EventInterceptorHandler) => P;

package/__internal__/src/components/Popover/Popover.css

@@ -0,0 +1,8 @@
+.Popover {
+  position: absolute;
+  top: var(--popover-top);
+  left: var(--popover-left);
+  visibility: var(--popover-visibility);
+  width: var(--popover-width);
+  pointer-events: var(--popover-pointer-events);
+}

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

@@ -1,3 +1,4 @@
+import './Popover.css';
 import React from 'react';
 import { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';
 import { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';
@@ -9,6 +10,8 @@ export { usePopoverReposition };
  */
 export declare const directionsStartCenter: readonly ["downCenter", "upCenter", "downRight", "downLeft", "upRight", "upLeft", "leftUp", "leftCenter", "leftDown", "rightUp", "rightCenter", "rightDown"];
 export declare const directionsStartEdge: readonly ["downStartLeft", "upStartLeft", "downStartRight", "upStartRight", "leftStartUp", "leftStartDown", "rightStartUp", "rightStartDown"];
+export declare const popoverPropOffset: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export declare type PopoverPropOffset = typeof popoverPropOffset[number] | number;
 export declare const directions: ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[];
 export declare type Direction = typeof directions[number];
 export declare type Position = {
@@ -28,7 +31,7 @@ declare type ChildrenRenderProp = (direction: Direction) => React.ReactNode;
 export declare type Props = PropsWithJsxAttributes<{
     direction?: Direction;
     spareDirection?: Direction;
-    offset?: number;
+    offset?: PopoverPropOffset;
     arrowOffset?: number;
     possibleDirections?: readonly Direction[];
     isInteractive?: boolean;
@@ -39,7 +42,7 @@ export declare type Props = PropsWithJsxAttributes<{
 export declare const Popover: React.ForwardRefExoticComponent<Pick<Pick<({
     direction?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
     spareDirection?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
-    offset?: number | undefined;
+    offset?: number | "xs" | "s" | "m" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
     arrowOffset?: number | undefined;
     possibleDirections?: readonly ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[] | undefined;
     isInteractive?: boolean | undefined;
@@ -53,7 +56,7 @@ export declare const Popover: React.ForwardRefExoticComponent<Pick<Pick<({
 } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key">) | ({
     direction?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
     spareDirection?: "downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown" | undefined;
-    offset?: number | undefined;
+    offset?: number | "xs" | "s" | "m" | "l" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | undefined;
     arrowOffset?: number | undefined;
     possibleDirections?: readonly ("downCenter" | "upCenter" | "downRight" | "downLeft" | "upRight" | "upLeft" | "leftUp" | "leftCenter" | "leftDown" | "rightUp" | "rightCenter" | "rightDown" | "downStartLeft" | "upStartLeft" | "downStartRight" | "upStartRight" | "leftStartUp" | "leftStartDown" | "rightStartUp" | "rightStartDown")[] | undefined;
     isInteractive?: boolean | undefined;

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/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, 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 = __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 = __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)) {

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

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

@@ -1,4 +1,4 @@
-import { __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import '../../Theme/_color/Theme_color_gpnDark.css';
 import './SnackBarItem.css';
 import React, { useEffect, useState } from 'react';
@@ -9,10 +9,10 @@ import { isNumber, isString } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Text } from '../../Text/Text';
 import { cnTheme } from '../../Theme/Theme';
-import { snackBarItemStatusDefault, } from '../helper';
 import { SnackBarActionButton } from '../SnackBarActionButton/SnackBarActionButton';
 import { SnackBarLine } from '../SnackBarLine/SnackBarLine';
 import { SnackBarTimer } from '../SnackBarTimer/SnackBarTimer';
+import { snackBarItemStatusDefault, } from '../types';
 var defaultInitialTimerTime = 3;
 export var cnSnackBarItem = cn('SnackBarItem');
 var getAutoCloseTime = function (autoClose) {
@@ -24,9 +24,8 @@ var getAutoCloseTime = function (autoClose) {
     }
     return false;
 };
-export var SnackBarItem = React.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 ? snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
+export 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 ? snackBarItemStatusDefault : _a, onAutoCloseProp = props.onAutoClose, className = props.className, otherProps = __rest(props, ["onClose", "autoClose", "showProgress", "icon", "message", "actions", "status", "onAutoClose", "className"]);
     var _b = __read(useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = __read(useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
     var _e = __read(useFlag(false), 2), timeIsOver = _e[0], onTimeIsOver = _e[1].on;
@@ -37,12 +36,12 @@ export var SnackBarItem = React.forwardRef(function (props, ref) {
     var handleMouseLeave = function () { return offHover(); };
     var autoCloseTime = getAutoCloseTime(autoClose);
     var hideAutoCloseTimer = showProgress === undefined || !(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();
         }
     };
     useEffect(function () {
@@ -57,13 +56,13 @@ export var SnackBarItem = React.forwardRef(function (props, ref) {
     }, [hover, timeIsOver, timerFunctions]);
     var handleTimeIsOver = function () {
         onTimeIsOver();
-        onAutoClose(item);
+        onAutoClose();
     };
-    var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (React.createElement("div", { ref: ref, className: cnSnackBarItem({ status: status, showProgress: showProgress }, [
+    var handleClose = onClose ? function () { return onClose(); } : undefined;
+    return (React.createElement("div", __assign({ ref: ref, className: cnSnackBarItem({ status: status, showProgress: showProgress }, [
             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.createElement(SnackBarTimer, { className: cnSnackBarItem('Timer'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
         hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBarItem('Icon'), size: "m" }),
         React.createElement("div", { className: cnSnackBarItem('Content') },
@@ -71,4 +70,5 @@ export var SnackBarItem = React.forwardRef(function (props, ref) {
             actions && (React.createElement(SnackBarActionButton, { actions: actions, className: cnSnackBarItem('ActionButton') }))),
         onClose && (React.createElement(Button, { className: cnSnackBarItem('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose })),
         autoCloseTime && showProgress === 'line' && (React.createElement(SnackBarLine, { className: cnSnackBarItem('Line'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime }))));
-});
+}
+export var SnackBarItem = React.forwardRef(SnackBarItemRender);

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