@consta/uikit 3.24.4 → 3.26.0

package/__internal__/cjs-src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,53 @@
+import './Tooltip.css';
+import React from 'react';
+import { ClickOutsideHandler } from '../../hooks/useClickOutside/useClickOutside';
+import { PropsWithJsxAttributes } from '../../utils/types/PropsWithJsxAttributes';
+import { Direction, PositioningProps } from '../Popover/Popover';
+export declare const tooltipPropSizes: readonly ["m", "s", "l"];
+export declare const tooltipPropSizesDefault: "m";
+export declare type TooltipPropSize = typeof tooltipPropSizes[number];
+export declare const tooltipPropStatus: readonly ["normal", "alert", "success", "warning"];
+export declare type TooltipPropStatus = typeof tooltipPropStatus[number];
+export declare type TooltipProps = PropsWithJsxAttributes<{
+    size?: TooltipPropSize;
+    status?: TooltipPropStatus;
+    direction?: Direction;
+    spareDirection?: Direction;
+    possibleDirections?: readonly Direction[];
+    isInteractive?: boolean;
+    children: React.ReactNode;
+    onClickOutside?: ClickOutsideHandler;
+    className?: string;
+    onSetDirection?: (direction: Direction) => void;
+} & PositioningProps>;
+export declare const Tooltip: React.ForwardRefExoticComponent<Pick<Pick<({
+    size?: "s" | "m" | "l" | undefined;
+    status?: "alert" | "success" | "warning" | "normal" | undefined;
+    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;
+    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;
+    children: React.ReactNode;
+    onClickOutside?: ClickOutsideHandler | undefined;
+    className?: string | undefined;
+    onSetDirection?: ((direction: Direction) => void) | undefined;
+} & {
+    anchorRef: React.RefObject<HTMLElement>;
+    equalAnchorWidth?: boolean | undefined;
+    position?: undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "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">) | ({
+    size?: "s" | "m" | "l" | undefined;
+    status?: "alert" | "success" | "warning" | "normal" | undefined;
+    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;
+    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;
+    children: React.ReactNode;
+    onClickOutside?: ClickOutsideHandler | undefined;
+    className?: string | undefined;
+    onSetDirection?: ((direction: Direction) => void) | undefined;
+} & {
+    anchorRef?: undefined;
+    equalAnchorWidth?: undefined;
+    position: import("../Popover/Popover").Position;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "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">), "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" | "children" | "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" | "size" | "key" | "direction" | "status" | "position" | "possibleDirections" | "spareDirection" | "isInteractive" | "onClickOutside" | "onSetDirection" | "anchorRef" | "equalAnchorWidth">, "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" | "children" | "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" | "size" | "key" | "direction" | "status" | "position" | "possibleDirections" | "spareDirection" | "isInteractive" | "onClickOutside" | "onSetDirection" | "anchorRef" | "equalAnchorWidth"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+"use strict";
+exports.__esModule = true;
+exports.Tooltip = exports.tooltipPropStatus = exports.tooltipPropSizesDefault = exports.tooltipPropSizes = void 0;
+var tslib_1 = require("tslib");
+require("./Tooltip.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var MixPopoverArrow_1 = require("../../mixs/MixPopoverArrow/MixPopoverArrow");
+var bem_1 = require("../../utils/bem");
+var Popover_1 = require("../Popover/Popover");
+var Text_1 = require("../Text/Text");
+var Theme_1 = require("../Theme/Theme");
+var ARROW_SIZE = 6;
+var ARROW_OFFSET = 8;
+var cnTooltip = bem_1.cn('Tooltip');
+exports.tooltipPropSizes = ['m', 's', 'l'];
+exports.tooltipPropSizesDefault = exports.tooltipPropSizes[0];
+exports.tooltipPropStatus = ['normal', 'alert', 'success', 'warning'];
+function renderChildren(children) {
+    return typeof children === 'string' || typeof children === 'number' ? (react_1["default"].createElement(Text_1.Text, { size: "xs" }, children)) : (children);
+}
+exports.Tooltip = react_1["default"].forwardRef(function (props, ref) {
+    var _a;
+    var children = props.children, _b = props.size, size = _b === void 0 ? exports.tooltipPropSizesDefault : _b, className = props.className, status = props.status, onSetDirectionProp = props.onSetDirection, style = props.style, rest = tslib_1.__rest(props, ["children", "size", "className", "status", "onSetDirection", "style"]);
+    var theme = Theme_1.useTheme().theme;
+    var _c = tslib_1.__read(react_1.useState(undefined), 2), direction = _c[0], setDirection = _c[1];
+    var tooltipTheme = status
+        ? tslib_1.__assign(tslib_1.__assign({}, theme), { color: {
+                primary: theme.color.accent,
+                accent: theme.color.accent,
+                invert: theme.color.primary
+            } }) : tslib_1.__assign(tslib_1.__assign({}, theme), { color: {
+            primary: theme.color.invert,
+            accent: theme.color.accent,
+            invert: theme.color.primary
+        } });
+    var tooltipThemeClassNames = Theme_1.generateThemeClassNames(tooltipTheme);
+    var onSetDirection = function (direction) {
+        onSetDirectionProp && onSetDirectionProp(direction);
+        setDirection(direction);
+    };
+    return (react_1["default"].createElement(Theme_1.ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, rest, { arrowOffset: ARROW_OFFSET + ARROW_SIZE, offset: ARROW_SIZE + 4, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: tslib_1.__assign((_a = {}, _a['--popover-arrow-size'] = ARROW_SIZE + "px", _a['--popover-arrow-offset'] = ARROW_OFFSET + "px", _a), style) }),
+            react_1["default"].createElement("div", { className: cnTooltip('Background') }),
+            react_1["default"].createElement("div", { className: cnTooltip('Arrow', [MixPopoverArrow_1.cnMixPopoverArrow({ direction: direction })]) }),
+            react_1["default"].createElement("div", { className: cnTooltip('Content', { size: size }) }, renderChildren(children)))));
+});

package/__internal__/cjs-src/components/User/User.css

@@ -0,0 +1,132 @@
+.User {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: 0;
+  border-radius: 99em;
+  text-align: left;
+  text-decoration: none;
+  -webkit-transition: background-color 0.25s ease;
+  transition: background-color 0.25s ease;
+}
+
+  .User-Block {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .User-Icon {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+  }
+
+  .User-IconRightButton {
+    --indent-r: var(--space-xs);
+    margin-left: var(--space-2xs);
+  }
+
+  .User-AvatarWrapper {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+    margin-right: var(--indent);
+    padding: var(--avatar-space);
+    border-radius: 50%;
+  }
+
+  .User-AvatarWrapper_status_available {
+        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-success);
+                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-success);
+      }
+
+  .User-AvatarWrapper_status_remote {
+        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-warning);
+                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-warning);
+      }
+
+  .User-AvatarWrapper_status_out {
+        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-alert);
+                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-alert);
+      }
+
+  .User-AvatarWrapper:last-child {
+      margin-right: 0;
+    }
+
+  .User_view_clear {
+      background-color: var(--color-control-bg-clear);
+    }
+
+  .User_view_clear:hover {
+        background-color: var(--color-control-bg-clear-hover);
+      }
+
+  .User_view_ghost {
+      background-color: var(--color-control-bg-ghost);
+    }
+
+  .User_view_ghost:hover {
+        background-color: var(--color-control-bg-ghost-hover);
+      }
+
+  .User-Name,
+  .User-Info {
+    display: -webkit-box;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .User-Name {
+    max-width: 20ch;
+  }
+
+  .User-Info {
+    max-width: 28ch;
+  }
+
+  .User_size_s {
+      --avatar-space: var(--space-3xs);
+      --indent-r: var(--space-xs);
+      --indent: var(--space-xs);
+      --icon-indent: var(--space-s);
+    }
+
+  .User_size_m {
+      --avatar-space: var(--space-2xs);
+      --indent-r: var(--space-s);
+      --indent: var(--space-xs);
+      --icon-indent: var(--space-m);
+    }
+
+  .User_size_l {
+      --avatar-space: var(--space-2xs);
+      --indent-r: var(--space-m);
+      --indent: var(--space-s);
+      --icon-indent: var(--space-l);
+    }
+
+  .User:not(.user_minified).User_width_full {
+    width: 100%;
+  }
+
+  .User:not(.user_minified).User_width_full .User-Name,
+    .User:not(.user_minified).User_width_full .User-Info {
+      max-width: none;
+    }
+
+  .User:not(.User_minified) .User-Icon {
+    margin-left: var(--icon-indent);
+  }
+
+  .User > *:last-child:not(:first-child) {
+    margin-right: var(--indent-r);
+  }

package/__internal__/cjs-src/components/User/User.d.ts

@@ -0,0 +1,36 @@
+import './User.css';
+import React from 'react';
+import { IconComponent } from '../../icons/Icon/Icon';
+export declare const userPropSize: readonly ["m", "s", "l"];
+export declare type UserPropSize = typeof userPropSize[number];
+export declare const userPropSizeDefault: UserPropSize;
+export declare const userPropView: readonly ["clear", "ghost"];
+export declare type UserPropView = typeof userPropView[number];
+export declare const userPropViewDefault: UserPropView;
+export declare const userPropWidth: readonly ["default", "full"];
+export declare type UserPropWidth = typeof userPropWidth[number];
+export declare const userPropWidthDefault: UserPropWidth;
+export declare const userPropStatus: readonly ["available", "remote", "out"];
+export declare type UserPropStatus = typeof userPropStatus[number];
+declare type Props = {
+    avatarUrl?: string;
+    name?: string;
+    size?: UserPropSize;
+    view?: UserPropView;
+    width?: UserPropWidth;
+    status?: UserPropStatus;
+    onlyAvatar?: boolean;
+    info?: string;
+    children?: never;
+} & ({
+    withArrow?: boolean;
+    iconRight?: never;
+    onIconRightClick?: never;
+} | {
+    withArrow?: never;
+    iconRight?: IconComponent;
+    onIconRightClick?: (e: React.SyntheticEvent) => void;
+});
+export declare const cnUser: import("@bem-react/classname").ClassNameFormatter;
+export declare const User: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<Props, "div">;
+export {};

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

@@ -0,0 +1,56 @@
+"use strict";
+exports.__esModule = true;
+exports.User = exports.cnUser = exports.userPropStatus = exports.userPropWidthDefault = exports.userPropWidth = exports.userPropViewDefault = exports.userPropView = exports.userPropSizeDefault = exports.userPropSize = void 0;
+var tslib_1 = require("tslib");
+require("./User.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
+var bem_1 = require("../../utils/bem");
+var getByMap_1 = require("../../utils/getByMap");
+var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
+var Avatar_1 = require("../Avatar/Avatar");
+var Button_1 = require("../Button/Button");
+var Text_1 = require("../Text/Text");
+exports.userPropSize = ['m', 's', 'l'];
+exports.userPropSizeDefault = exports.userPropSize[0];
+exports.userPropView = ['clear', 'ghost'];
+exports.userPropViewDefault = exports.userPropView[0];
+exports.userPropWidth = ['default', 'full'];
+exports.userPropWidthDefault = exports.userPropWidth[0];
+exports.userPropStatus = ['available', 'remote', 'out'];
+exports.cnUser = bem_1.cn('User');
+var infoSizeMap = {
+    s: '2xs',
+    m: '2xs',
+    l: 'xs'
+};
+var iconSizeMap = {
+    s: 'xs',
+    m: 'xs',
+    l: 's'
+};
+var avatarSizeMap = {
+    s: 'xs',
+    m: 's',
+    l: 'm'
+};
+var buttonSizeMap = {
+    s: 'xs',
+    m: 'xs',
+    l: 's'
+};
+exports.User = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
+    var _a = props.as, as = _a === void 0 ? 'div' : _a, className = props.className, _b = props.size, size = _b === void 0 ? exports.userPropSizeDefault : _b, avatarUrl = props.avatarUrl, name = props.name, _c = props.view, view = _c === void 0 ? exports.userPropViewDefault : _c, _d = props.width, width = _d === void 0 ? exports.userPropWidthDefault : _d, propOnlyAvatar = props.onlyAvatar, withArrow = props.withArrow, iconRight = props.iconRight, onIconRightClick = props.onIconRightClick, info = props.info, status = props.status, otherProps = tslib_1.__rest(props, ["as", "className", "size", "avatarUrl", "name", "view", "width", "onlyAvatar", "withArrow", "iconRight", "onIconRightClick", "info", "status"]);
+    var Tag = as;
+    var onlyAvatar = propOnlyAvatar || (!name && !info);
+    var IconRight = iconRight;
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({}, otherProps, { className: exports.cnUser({ size: size, view: view, width: width, withArrow: withArrow, minified: onlyAvatar }, [className]), ref: ref }),
+        react_1["default"].createElement("div", { className: exports.cnUser('AvatarWrapper', { status: status }) },
+            react_1["default"].createElement(Avatar_1.Avatar, { size: getByMap_1.getByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
+        !onlyAvatar && (name || info) && (react_1["default"].createElement("div", { className: exports.cnUser('Block') },
+            name && (react_1["default"].createElement(Text_1.Text, { className: exports.cnUser('Name'), size: size, view: "primary", lineHeight: "2xs" }, name)),
+            info && size !== 's' && (react_1["default"].createElement(Text_1.Text, { className: exports.cnUser('Info'), size: getByMap_1.getByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
+        withArrow && (react_1["default"].createElement(IconSelect_1.IconSelect, { className: exports.cnUser('Icon'), size: getByMap_1.getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && !onIconRightClick && (react_1["default"].createElement(IconRight, { className: exports.cnUser('Icon'), size: getByMap_1.getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && onIconRightClick && (react_1["default"].createElement(Button_1.Button, { className: exports.cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getByMap_1.getByMap(buttonSizeMap, size), form: "round" }))));
+});

package/__internal__/cjs-src/components/UserSelect/UserSelect.d.ts

@@ -0,0 +1,5 @@
+import '../SelectComponents/Select.css';
+import { UserSelectComponent } from './helpers';
+export declare const COMPONENT_NAME: "UserSelect";
+export declare const UserSelect: UserSelectComponent;
+export * from './helpers';

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

@@ -0,0 +1,95 @@
+"use strict";
+exports.__esModule = true;
+exports.UserSelect = exports.COMPONENT_NAME = void 0;
+var tslib_1 = require("tslib");
+require("../SelectComponents/Select.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var useSelect_1 = require("../../hooks/useSelect/useSelect");
+var IconClose_1 = require("../../icons/IconClose/IconClose");
+var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
+var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
+var cnSelect_1 = require("../SelectComponents/cnSelect");
+var helpers_1 = require("../SelectComponents/helpers");
+var SelectContainer_1 = require("../SelectComponents/SelectContainer/SelectContainer");
+var SelectDropdown_1 = require("../SelectComponents/SelectDropdown/SelectDropdown");
+var types_1 = require("../SelectComponents/types");
+var UserSelectItem_1 = require("./UserSelectItem/UserSelectItem");
+var UserSelectValue_1 = require("./UserSelectValue/UserSelectValue");
+var helpers_2 = require("./helpers");
+exports.COMPONENT_NAME = 'UserSelect';
+function UserSelectRender(props, ref) {
+    var defaultDropdownRef = react_1.useRef(null);
+    var controlInnerRef = react_1.useRef(null);
+    var helperInputFakeElement = react_1.useRef(null);
+    var controlRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, isLoading = _a.isLoading, required = _a.required, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemKey = _a.getItemKey, getItemLabel = _a.getItemLabel, getItemSubLabel = _a.getItemSubLabel, getItemAvatarUrl = _a.getItemAvatarUrl, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, onCreate = _a.onCreate, inputRefProp = _a.inputRef, _g = _a.labelForNotFound, labelForNotFound = _g === void 0 ? helpers_1.defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? helpers_1.defaultlabelForCreate : _h, _j = _a.labelForEmptyItems, labelForEmptyItems = _j === void 0 ? helpers_1.defaultLabelForEmptyItems : _j, _k = _a.multiple, multiple = _k === void 0 ? false : _k, searchFunction = _a.searchFunction, style = _a.style, _l = _a.dropdownForm, dropdownForm = _l === void 0 ? 'default' : _l, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "disabled", "ariaLabel", "id", "isLoading", "required", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemKey", "getItemLabel", "getItemSubLabel", "getItemAvatarUrl", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "labelForEmptyItems", "multiple", "searchFunction", "style", "dropdownForm"]);
+    var searchFunctionDefault = function (item, searchValue) {
+        var searchOfLabel = helpers_2.searchCompare(searchValue, getItemLabel(item));
+        if (searchOfLabel) {
+            return searchOfLabel;
+        }
+        return helpers_2.searchCompare(searchValue, getItemSubLabel(item));
+    };
+    var _m = useSelect_1.useSelect({
+        items: items,
+        groups: groups,
+        value: value,
+        onChange: onChange,
+        dropdownRef: dropdownRef,
+        controlRef: controlRef,
+        disabled: disabled,
+        getItemLabel: getItemLabel,
+        getItemKey: getItemKey,
+        getGroupKey: getGroupKey,
+        getItemGroupKey: getItemGroupKey,
+        getItemDisabled: getItemDisabled,
+        multiple: multiple,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onCreate: onCreate,
+        searchFunction: searchFunction || searchFunctionDefault
+    }), getKeyProps = _m.getKeyProps, getOptionProps = _m.getOptionProps, isOpen = _m.isOpen, visibleItems = _m.visibleItems, isFocused = _m.isFocused, handleInputFocus = _m.handleInputFocus, handleInputBlur = _m.handleInputBlur, handleToggleDropdown = _m.handleToggleDropdown, inputRef = _m.inputRef, handleInputClick = _m.handleInputClick, handleInputChange = _m.handleInputChange, searchValue = _m.searchValue, clearValue = _m.clearValue, getHandleRemoveValue = _m.getHandleRemoveValue, notFound = _m.notFound, hasItems = _m.hasItems;
+    var renderItemDefault = function (props) {
+        var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+        return (react_1["default"].createElement(UserSelectItem_1.UserSelectItem, { label: getItemLabel(item), subLabel: getItemSubLabel(item), avatarUrl: getItemAvatarUrl(item), active: active, hovered: hovered, size: size, indent: dropdownForm === 'round' ? 'increased' : 'normal', onClick: onClick, onMouseEnter: onMouseEnter, disable: getItemDisabled(item), multiple: multiple }));
+    };
+    var renderValueDefault = function (_a) {
+        var item = _a.item, handleRemove = _a.handleRemove;
+        return (react_1["default"].createElement(UserSelectValue_1.UserSelectValue, { label: getItemLabel(item), subLabel: getItemSubLabel(item), avatarUrl: getItemAvatarUrl(item), key: getItemKey(item), size: size, handleRemove: handleRemove, multiple: multiple, disabled: disabled }));
+    };
+    var renderValue = renderValueProp || renderValueDefault;
+    var inputRefForRender = useForkRef_1.useForkRef([inputRef, inputRefProp]);
+    var renderControlValue = function () {
+        var width = multiple ? helpers_1.getInputWidth(controlInnerRef, helperInputFakeElement) : undefined;
+        return (react_1["default"].createElement(react_1["default"].Fragment, null,
+            helpers_2.isMultipleParams(props) &&
+                Array.isArray(props.value) &&
+                props.value.map(function (item) {
+                    return renderValue({ item: item, handleRemove: getHandleRemoveValue(item) });
+                }),
+            helpers_2.isNotMultipleParams(props) && props.value && renderValue({ item: props.value }),
+            (!value || (Array.isArray(value) && value.length === 0)) && !searchValue && placeholder && (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Placeholder'), title: "placeholder" }, placeholder)),
+            react_1["default"].createElement("input", tslib_1.__assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleInputChange, ref: inputRefForRender, className: cnSelect_1.cnSelect('Input', {
+                    size: size,
+                    hide: !multiple && !!value,
+                    multiple: multiple,
+                    isUserSelect: true
+                }), value: searchValue, style: { width: width } }))));
+    };
+    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, required: required, view: view, type: "userselect", form: form, multiple: true, ref: ref, style: style }, restProps),
+        react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
+            react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlInner'), onClick: handleInputClick, role: "button", ref: controlInnerRef, "aria-hidden": "true" },
+                react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlValueContainer') }, multiple ? (react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlValue', { isUserSelect: true }) }, renderControlValue())) : (renderControlValue()))),
+            react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Indicators') },
+                value && (react_1["default"].createElement("button", { type: "button", onClick: clearValue, className: cnSelect_1.cnSelect('ClearIndicator', [MixFocus_1.cnMixFocus()]) },
+                    react_1["default"].createElement(IconClose_1.IconClose, { size: "xs", className: cnSelect_1.cnSelect('ClearIndicatorIcon') }))),
+                react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Delimiter') }),
+                react_1["default"].createElement("button", { type: "button", className: cnSelect_1.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
+                    react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_1.cnSelect('DropdownIndicatorIcon') })))),
+        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, isLoading: isLoading, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate, notFound: notFound, hasItems: hasItems, labelForEmptyItems: labelForEmptyItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined }),
+        react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('HelperInputFakeElement'), ref: helperInputFakeElement }, searchValue)));
+}
+exports.UserSelect = react_1.forwardRef(UserSelectRender);
+tslib_1.__exportStar(require("./helpers"), exports);

package/__internal__/cjs-src/components/UserSelect/UserSelectItem/UserSelectItem.css

@@ -0,0 +1,130 @@
+.UserSelectItem {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: var(--vertical-space) var(--horizontal-space);
+  color: var(--color-control-typo-default);
+  background-color: var(--color-control-bg-clear);
+  font-size: var(--font-size);
+  cursor: pointer;
+}
+
+  .UserSelectItem_size_s {
+      --horizontal-space: calc(var(--control-space-s) * 0.5);
+      --vertical-space: calc(var(--control-space-s) * 0.25);
+      --font-size: var(--control-text-size-s);
+      --sub-info-space: var(--space-xs);
+      --sub-label-font-size: var(--size-text-2xs);
+    }
+
+  .UserSelectItem_size_m {
+      --horizontal-space: calc(var(--control-space-m) * 0.5);
+      --vertical-space: calc(var(--control-space-s) * 0.5);
+      --font-size: var(--control-text-size-m);
+      --sub-info-space: var(--space-s);
+      --sub-label-font-size: var(--size-text-xs);
+    }
+
+  .UserSelectItem_size_l {
+      --horizontal-space: calc(var(--control-space-l) * 0.5);
+      --vertical-space: calc(var(--control-space-s) * 0.5);
+      --font-size: var(--control-text-size-l);
+      --sub-info-space: var(--space-s);
+      --sub-label-font-size: var(--size-text-s);
+    }
+
+  .UserSelectItem_disable {
+    color: var(--color-control-typo-disable);
+  }
+
+  .UserSelectItem_hovered {
+    background-color: var(--color-control-bg-clear-hover);
+  }
+
+  .UserSelectItem_active {
+    color: var(--color-control-typo-secondary);
+  }
+
+  .UserSelectItem_indent_increased {
+      padding-left: calc(var(--horizontal-space) * 2.6);
+    }
+
+  .UserSelectItem-AvatarContainer {
+    position: relative;
+  }
+
+  .UserSelectItem-CheckIcon {
+    position: absolute;
+    right: calc(var(--space-2xs) * -1);
+    bottom: calc(var(--space-2xs) * -1);
+    width: var(--graphics-size-xs);
+    height: var(--graphics-size-xs);
+    padding: 0;
+    color: var(--color-control-bg-default);
+    background-color: var(--color-control-bg-primary);
+    border: 1px solid var(--color-control-bg-default);
+    border-radius: 50%;
+  }
+
+  .UserSelectItem-CheckIcon_animate_appear,
+      .UserSelectItem-CheckIcon_animate_appearActive,
+      .UserSelectItem-CheckIcon_animate_appearDone,
+      .UserSelectItem-CheckIcon_animate_enter,
+      .UserSelectItem-CheckIcon_animate_enterActive,
+      .UserSelectItem-CheckIcon_animate_enterDone,
+      .UserSelectItem-CheckIcon_animate_exit,
+      .UserSelectItem-CheckIcon_animate_exitActive,
+      .UserSelectItem-CheckIcon_animate_exitDone {
+        -webkit-transition: 0.2s ease;
+        transition: 0.2s ease;
+        -webkit-transition-property: opacity, -webkit-transform;
+        transition-property: opacity, -webkit-transform;
+        transition-property: opacity, transform;
+        transition-property: opacity, transform, -webkit-transform;
+      }
+
+  .UserSelectItem-CheckIcon_animate_appear,
+      .UserSelectItem-CheckIcon_animate_enter {
+        opacity: 0;
+        -webkit-transform: scale(0.25);
+                transform: scale(0.25);
+      }
+
+  .UserSelectItem-CheckIcon_animate_enterActive,
+      .UserSelectItem-CheckIcon_animate_appearActive,
+      .UserSelectItem-CheckIcon_animate_appearDone,
+      .UserSelectItem-CheckIcon_animate_enterDone {
+        opacity: 1;
+        -webkit-transform: scale(1);
+                transform: scale(1);
+      }
+
+  .UserSelectItem-CheckIcon_animate_exit {
+        opacity: 1;
+        -webkit-transform: scale(1);
+                transform: scale(1);
+      }
+
+  .UserSelectItem-CheckIcon_animate_exitActive,
+      .UserSelectItem-CheckIcon_animate_exitDone {
+        opacity: 0;
+        -webkit-transform: scale(0.25);
+                transform: scale(0.25);
+      }
+
+  .UserSelectItem-Info {
+    padding-left: var(--sub-info-space);
+  }
+
+  .UserSelectItem-SubLabel {
+    opacity: 0.7;
+    font-size: var(--sub-label-font-size);
+  }
+
+  .UserSelectItem-SubLabel_disable {
+      opacity: 1;
+    }

package/__internal__/cjs-src/components/UserSelect/UserSelectItem/UserSelectItem.d.ts

@@ -0,0 +1,17 @@
+import './UserSelectItem.css';
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+declare type UserSelectItemProps = PropsWithHTMLAttributes<{
+    label: string;
+    active: boolean;
+    hovered: boolean;
+    size: 's' | 'm' | 'l';
+    indent: 'normal' | 'increased';
+    subLabel?: string;
+    avatarUrl?: string;
+    disable?: boolean;
+    multiple?: boolean;
+}, HTMLDivElement>;
+export declare const cnUserSelectItem: import("@bem-react/classname").ClassNameFormatter;
+export declare const UserSelectItem: React.FC<UserSelectItemProps>;
+export {};