@consta/uikit 3.17.2 → 3.18.1

package/__internal__/src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -1,81 +1,2 @@
-/// <reference types="react" />
-export declare const eventInterceptorMap: {
-    readonly Button: <T extends import("../Button/Button").Props>(props: T, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLElement>) => T;
-    readonly Checkbox: <P extends {
-        checked: boolean | undefined;
-        size?: "m" | "l" | undefined;
-        view?: "ghost" | "primary" | undefined;
-        align?: "center" | "top" | undefined;
-        disabled?: boolean | undefined;
-        intermediate?: boolean | undefined;
-        label?: string | undefined;
-        onChange?: import("../Checkbox/Checkbox").CheckboxPropOnChange | undefined;
-        name?: string | undefined;
-        onFocus?: ((event: import("react").FocusEvent<HTMLInputElement>) => void) | undefined;
-        onBlur?: ((event: import("react").FocusEvent<HTMLInputElement>) => void) | undefined;
-        autoFocus?: boolean | undefined;
-        readOnly?: boolean | undefined;
-        required?: boolean | undefined;
-        step?: string | number | undefined;
-        tabIndex?: number | undefined;
-        inputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-        children?: undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "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" | "onFocusCapture" | "onBlurCapture" | "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"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLLabelElement>) => P;
-    readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement | null>) => PROPS;
-    readonly SnackBar: <P_1 extends import("../SnackBar/types").SnackBarProps<import("../SnackBar/types").SnackBarItemDefault>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
-    readonly TextField: <P_2 extends {
-        className?: string | undefined;
-        value?: string | null | undefined;
-        cols?: number | undefined;
-        onChange?: import("../TextField/helpers").TextFieldPropOnChange | undefined;
-        id?: string | number | undefined;
-        name?: string | undefined;
-        type?: string | undefined;
-        disabled?: boolean | undefined;
-        maxLength?: number | undefined;
-        size?: "xs" | "s" | "m" | "l" | undefined;
-        view?: "default" | "clear" | undefined;
-        form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
-        state?: "alert" | "success" | "warning" | undefined;
-        status?: "alert" | "success" | "warning" | undefined;
-        width?: "default" | "full" | undefined;
-        onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        autoFocus?: boolean | undefined;
-        placeholder?: string | undefined;
-        leftSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
-            view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-            size?: "xs" | "s" | "m" | undefined;
-        }, HTMLSpanElement>> | undefined;
-        rightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
-            view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-            size?: "xs" | "s" | "m" | undefined;
-        }, HTMLSpanElement>> | undefined;
-        withClearButton?: boolean | undefined;
-        autoComplete?: "on" | "off" | "tel" | "url" | "email" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
-        max?: string | number | undefined;
-        min?: string | number | undefined;
-        readOnly?: boolean | undefined;
-        required?: boolean | undefined;
-        step?: string | number | number[] | undefined;
-        tabIndex?: number | undefined;
-        inputContainerRef?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-        inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | import("react").RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;
-        ariaLabel?: string | undefined;
-        iconSize?: "xs" | "s" | "m" | undefined;
-        children?: undefined;
-        label?: string | undefined;
-        caption?: string | undefined;
-        labelPosition?: "left" | "top" | undefined;
-        focused?: boolean | undefined;
-    } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "style" | "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" | "onFocusCapture" | "onBlurCapture" | "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"> & {
-        rows?: undefined;
-        minRows?: undefined;
-        maxRows?: undefined;
-    } & {
-        rightSide?: string | import("react").FC<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributesAndRef<{
-            view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-            size?: "xs" | "s" | "m" | undefined;
-        }, HTMLSpanElement>> | undefined;
-    } & import("react").RefAttributes<HTMLElement>>(props: P_2, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement>) => P_2;
-};
+import { EventInterceptorComponentName } from './types';
+export declare const eventInterceptorMap: Partial<Record<EventInterceptorComponentName, ((...args: any[]) => any) | undefined>>;

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

@@ -19,4 +19,6 @@ export declare const useCheckboxEventsHandler: <P extends {
     tabIndex?: number | undefined;
     inputRef?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
     children?: undefined;
+    for?: string | undefined;
+    inputId?: string | undefined;
 } & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "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" | "onFocusCapture" | "onBlurCapture" | "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"> & React.RefAttributes<HTMLLabelElement>>(props: P, handler: EventInterceptorHandler, ref: React.RefObject<HTMLLabelElement>) => P;

package/__internal__/src/components/EventInterceptor/types.d.ts

@@ -0,0 +1 @@
+export declare type EventInterceptorComponentName = 'Attachment' | 'Avatar' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Calendar' | 'Card' | 'Checkbox' | 'CheckboxGroup' | 'ChoiceGroup' | 'Collapse' | 'CollapseGroup' | 'Combobox' | 'ContextMenu' | 'DatePicker' | 'DateTime' | 'DragNDropField' | 'File' | 'FileField' | 'Grid' | 'Header' | 'Informer' | 'Layout' | 'Loader' | 'Modal' | 'Pagination' | 'Popover' | 'ProgressSpin' | 'ProgressStepBar' | 'Radio' | 'RadioGroup' | 'Select' | 'Sidebar' | 'Skeleton' | 'Slider' | 'SnackBar' | 'Steps' | 'Switch' | 'SwitchGroup' | 'Table' | 'Tabs' | 'Tag' | 'TagBase' | 'Text' | 'TextField' | 'ThemeToggler' | 'Timer' | 'Tooltip' | 'User' | 'UserSelect';

package/__internal__/src/components/EventInterceptor/usePropsHandler.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { EventInterceptorMapKeys } from './EventInterceptor';
-export declare const usePropsHandler: <PROPS extends {}>(componentName: EventInterceptorMapKeys, props: PROPS, ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined) => PROPS;
+import { EventInterceptorComponentName } from './types';
+export declare const usePropsHandler: <PROPS extends {}>(componentName: EventInterceptorComponentName, props: PROPS, ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined) => PROPS;

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

@@ -12,6 +12,7 @@ export declare type FileFieldProps = PropsWithJsxAttributes<{
     children?: RenderFn | React.ReactNode;
     inputRef?: React.Ref<HTMLInputElement>;
 }, 'input'>;
+export declare const COMPONENT_NAME: "FileField";
 export declare const cnFileField: import("@bem-react/classname").ClassNameFormatter;
 export declare const FileField: React.FC<FileFieldProps>;
 export {};

package/__internal__/src/components/FileField/FileField.js

@@ -1,16 +1,20 @@
 import { __assign, __rest } from "tslib";
 import './FileField.css';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixVisuallyHidden } from '../../mixs/MixVisuallyHidden/MixVisuallyHidden';
 import { cn } from '../../utils/bem';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
+export var COMPONENT_NAME = 'FileField';
 function isRenderFn(fn) {
     return fn.call !== undefined;
 }
 export var cnFileField = cn('FileField');
 export var FileField = function (props) {
-    var className = props.className, children = props.children, id = props.id, inputRef = props.inputRef, _a = props["aria-label"], ariaLabel = _a === void 0 ? 'File input' : _a, inputProps = __rest(props, ["className", "children", "id", "inputRef", 'aria-label']);
+    var fileFieldRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, fileFieldRef), className = _a.className, children = _a.children, id = _a.id, inputRef = _a.inputRef, _b = _a["aria-label"], ariaLabel = _b === void 0 ? 'File input' : _b, inputProps = __rest(_a, ["className", "children", "id", "inputRef", 'aria-label']);
     var content = isRenderFn(children) ? children({ role: 'button', as: 'span' }) : children;
     return (React.createElement("label", { htmlFor: id, className: cnFileField(null, [className]) },
-        React.createElement("input", __assign({}, inputProps, { className: cnFileField('Input', [cnMixVisuallyHidden()]), id: id, type: "file", "aria-label": ariaLabel, ref: inputRef })),
+        React.createElement("input", __assign({}, inputProps, { className: cnFileField('Input', [cnMixVisuallyHidden()]), id: id, type: "file", "aria-label": ariaLabel, ref: useForkRef([inputRef, fileFieldRef]) })),
         content));
 };

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

@@ -41,5 +41,6 @@ declare type Props = {
     position?: PaginationPropPosition;
 });
 declare type Pagination = (props: PropsWithHTMLAttributesAndRef<Props, HTMLDivElement>) => React.ReactElement | null;
+export declare const COMPONENT_NAME: "Pagination";
 export declare const Pagination: Pagination;
 export {};

package/__internal__/src/components/Pagination/Pagination.js

@@ -1,10 +1,11 @@
 import { __assign, __read, __rest, __spread } from "tslib";
 import './Pagination.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { IconBackward } from '../../icons/IconBackward/IconBackward';
 import { IconForward } from '../../icons/IconForward/IconForward';
 import { cn } from '../../utils/bem';
 import { Button } from '../Button/Button';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Text } from '../Text/Text';
 import { TextField } from '../TextField/TextField';
 import { getPaginationInfo } from './helpers';
@@ -18,8 +19,10 @@ export var paginationPositions = ['left', 'center', 'right'];
 export var paginationDefaultPosition = 'center';
 var getDefaultLabel = function (totalPages) { return "\u0438\u0437 " + totalPages; };
 export var cnPagination = cn('Pagination');
+export var COMPONENT_NAME = 'Pagination';
 export var Pagination = React.forwardRef(function (props, ref) {
-    var _a = props.currentPage, currentPage = _a === void 0 ? 0 : _a, _b = props.totalPages, totalPages = _b === void 0 ? 0 : _b, onChange = props.onChange, _c = props.getLabel, getLabel = _c === void 0 ? getDefaultLabel(totalPages) : _c, _d = props.form, form = _d === void 0 ? paginationDefaultForm : _d, _e = props.size, size = _e === void 0 ? paginationDefaultSize : _e, _f = props.type, type = _f === void 0 ? paginationDefaultType : _f, _g = props.position, position = _g === void 0 ? paginationDefaultPosition : _g, _h = props.minified, minified = _h === void 0 ? false : _h, _j = props.hotkeys, hotkeys = _j === void 0 ? {
+    var paginationRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, paginationRef), _b = _a.currentPage, currentPage = _b === void 0 ? 0 : _b, _c = _a.totalPages, totalPages = _c === void 0 ? 0 : _c, onChange = _a.onChange, _d = _a.getLabel, getLabel = _d === void 0 ? getDefaultLabel(totalPages) : _d, _e = _a.form, form = _e === void 0 ? paginationDefaultForm : _e, _f = _a.size, size = _f === void 0 ? paginationDefaultSize : _f, _g = _a.type, type = _g === void 0 ? paginationDefaultType : _g, _h = _a.position, position = _h === void 0 ? paginationDefaultPosition : _h, _j = _a.minified, minified = _j === void 0 ? false : _j, _k = _a.hotkeys, hotkeys = _k === void 0 ? {
         nextPage: {
             label: 'Alt →',
             values: ['Alt', 'ArrowRight']
@@ -28,12 +31,12 @@ export var Pagination = React.forwardRef(function (props, ref) {
             label: '← Alt',
             values: ['Alt', 'ArrowLeft']
         }
-    } : _j, _k = props.containerEventListener, containerEventListener = _k === void 0 ? window : _k, className = props.className, otherProps = __rest(props, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
+    } : _k, _l = _a.containerEventListener, containerEventListener = _l === void 0 ? window : _l, className = _a.className, otherProps = __rest(_a, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
     if (!totalPages)
         return null;
     var currPage = currentPage + 1;
-    var _l = getPaginationInfo(currPage, totalPages), prevPage = _l.prevPage, nextPage = _l.nextPage, isStartDots = _l.isStartDots, isEndDots = _l.isEndDots, pages = _l.pages, isEmpty = _l.isEmpty;
-    var _m = __read(React.useState([]), 2), keys = _m[0], setKeys = _m[1];
+    var _m = getPaginationInfo(currPage, totalPages), prevPage = _m.prevPage, nextPage = _m.nextPage, isStartDots = _m.isStartDots, isEndDots = _m.isEndDots, pages = _m.pages, isEmpty = _m.isEmpty;
+    var _o = __read(React.useState([]), 2), keys = _o[0], setKeys = _o[1];
     var changePage = function (page) {
         if (page && page !== currPage && onChange) {
             onChange(page - 1);

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

@@ -1,3 +1,4 @@
 import './ProgressStepBar.css';
 import { ProgressStepBarComponent } from './helpers';
+export declare const COMPONENT_NAME: "ProgressStepBar";
 export declare const ProgressStepBar: ProgressStepBarComponent;

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarCanary.js

@@ -8,14 +8,16 @@ import { useScrollElements } from '../../hooks/useScrollElements/useScrollElemen
 import { IconArrowLeft } from '../../icons/IconArrowLeft/IconArrowLeft';
 import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
 import { Button } from '../Button/Button';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';
 import { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';
 import { cnProgressStepBar, getItemPosition, getLineSize, propDirectionDefault, propSizeDefault, withDefaultGetters, } from './helpers';
+export var COMPONENT_NAME = 'ProgressStepBar';
 function ProgressStepBarRender(props, ref) {
-    var _a = withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, style = _a.style, otherProps = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
+    var containerRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, style = _a.style, otherProps = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     var _e = __read(useState([]), 2), lines = _e[0], setLines = _e[1];
     var _f = __read(useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
-    var containerRef = useRef(null);
     var listRef = useRef(null);
     var _g = useComponentSize(containerRef), width = _g.width, height = _g.height;
     var _h = useScrollElements(steps), refs = _h.refs, scrollTo = _h.scrollTo;

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarItem/ProgressStepBarItem.js

@@ -33,7 +33,7 @@ var renderPointContent = function (point, size, progress) {
     return React.createElement(Icon, { size: "xs" });
 };
 export var ProgressStepBarItem = React.forwardRef(function (props, ref) {
-    var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? propPositionDefault : _a, otherProps = __rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position"]);
+    var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? propPositionDefault : _a, tooltipZIndex = props.tooltipZIndex, otherProps = __rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position", "tooltipZIndex"]);
     var _b = __read(useFlag(), 2), isTooltipVisible = _b[0], _c = _b[1], setTooltipVisible = _c.on, setTooltipUnVisible = _c.off;
     var anchorRef = useRef(null);
     var pointProps = {
@@ -62,5 +62,5 @@ export var ProgressStepBarItem = React.forwardRef(function (props, ref) {
             (label || content) && (React.createElement("div", { className: cnProgressStepBarItem('Content', { bottomOffset: !!content }) },
                 label && (React.createElement(Text, { className: cnProgressStepBarItem('Label'), ref: anchorRef, size: size, onMouseEnter: setTooltipVisible, onMouseLeave: setTooltipUnVisible, lineHeight: size === 's' ? 'xs' : size, view: "primary" }, label)),
                 content))),
-        tooltipContent && isTooltipVisible && (React.createElement(Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
+        tooltipContent && isTooltipVisible && (React.createElement(Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', style: { zIndex: tooltipZIndex }, possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
 });

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

@@ -33,7 +33,10 @@ export declare type Props = {
     tabIndex?: number;
     inputRef?: React.Ref<HTMLInputElement>;
     children?: never;
+    for?: string;
+    inputId?: string;
 };
 export declare type RadioProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;
 export declare const cnRadio: import("@bem-react/classname").ClassNameFormatter;
+export declare const COMPONENT_NAME: "Radio";
 export declare const Radio: React.ForwardRefExoticComponent<Props & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "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" | "onFocusCapture" | "onBlurCapture" | "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"> & React.RefAttributes<HTMLLabelElement>>;

package/__internal__/src/components/Radio/Radio.js

@@ -1,8 +1,10 @@
 import { __assign, __rest } from "tslib";
 import './Radio.css';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
 import { cn } from '../../utils/bem';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 export var radioPropSize = ['m', 'l'];
 export var radioPropSizeDefault = radioPropSize[0];
 export var radioPropView = ['primary', 'ghost'];
@@ -10,14 +12,16 @@ export var radioPropViewDefault = radioPropView[0];
 export var radioPropAlign = ['center', 'top'];
 export var radioPropAlignDefault = radioPropAlign[0];
 export var cnRadio = cn('Radio');
+export var COMPONENT_NAME = 'Radio';
 export var Radio = React.forwardRef(function (props, ref) {
-    var _a = props.checked, checked = _a === void 0 ? false : _a, name = props.name, _b = props.size, size = _b === void 0 ? radioPropSizeDefault : _b, _c = props.view, view = _c === void 0 ? radioPropViewDefault : _c, _d = props.align, align = _d === void 0 ? radioPropAlignDefault : _d, disabled = props.disabled, className = props.className, label = props.label, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, readOnly = props.readOnly, required = props.required, step = props.step, tabIndex = props.tabIndex, inputRef = props.inputRef, otherProps = __rest(props, ["checked", "name", "size", "view", "align", "disabled", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var radioRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, radioRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? radioPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? radioPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? radioPropAlignDefault : _e, disabled = _a.disabled, className = _a.className, label = _a.label, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, required = _a.required, step = _a.step, tabIndex = _a.tabIndex, inputId = _a.inputId, inputRef = _a.inputRef, otherProps = __rest(_a, ["checked", "name", "size", "view", "align", "disabled", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputId", "inputRef"]);
     var handleChange = function (e) {
         if (onChange) {
             onChange({ e: e, checked: !checked });
         }
     };
-    return (React.createElement("label", __assign({}, otherProps, { className: cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: ref }),
-        React.createElement("input", { type: "radio", name: name, className: cnRadio('Input', [cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, tabIndex: tabIndex, ref: inputRef }),
+    return (React.createElement("label", __assign({}, otherProps, { className: cnRadio({ size: size, view: view, disabled: disabled, align: align }, [className]), ref: useForkRef([ref, radioRef]) }),
+        React.createElement("input", { type: "radio", name: name, className: cnRadio('Input', [cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, id: inputId, tabIndex: tabIndex, ref: inputRef }),
         label && React.createElement("span", { className: cnRadio('Label') }, label)));
 });

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

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

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

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

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

@@ -1,21 +1,15 @@
 .SelectDropdown {
-  --transition-spase: var(--space-2xs);
-  z-index: 9999;
   overflow: hidden;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 100%;
   min-width: 220px;
   margin: -1px 0 -1px;
   background: var(--color-bg-default);
   border: var(--control-border-width) solid var(--color-control-bg-border-default);
   outline: none;
-  opacity: 0;
   -webkit-box-shadow: var(--shadow-layer);
           box-shadow: var(--shadow-layer);
   font-size: var(--font-size);
-  -webkit-transform: translateY(var(--transition-spase));
-          transform: translateY(var(--transition-spase));
 }
 
   .SelectDropdown_size_xs {
@@ -58,52 +52,6 @@
       border-radius: calc(var(--input-height) * 0.5);
     }
 
-  .SelectDropdown_animate_appear,
-    .SelectDropdown_animate_appearActive,
-    .SelectDropdown_animate_appearDone,
-    .SelectDropdown_animate_enter,
-    .SelectDropdown_animate_enterActive,
-    .SelectDropdown_animate_enterDone,
-    .SelectDropdown_animate_exit,
-    .SelectDropdown_animate_exitActive,
-    .SelectDropdown_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;
-    }
-
-  .SelectDropdown_animate_appear,
-    .SelectDropdown_animate_enter {
-      opacity: 0;
-      -webkit-transform: translateY(var(--transition-spase));
-              transform: translateY(var(--transition-spase));
-    }
-
-  .SelectDropdown_animate_enterActive,
-    .SelectDropdown_animate_appearActive,
-    .SelectDropdown_animate_appearDone,
-    .SelectDropdown_animate_enterDone {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-
-  .SelectDropdown_animate_exit {
-      opacity: 1;
-      -webkit-transform: translateY(0);
-              transform: translateY(0);
-    }
-
-  .SelectDropdown_animate_exitActive,
-    .SelectDropdown_animate_exitDone {
-      opacity: 0;
-      -webkit-transform: translateY(var(--transition-spase));
-              transform: translateY(var(--transition-spase));
-    }
-
   .SelectDropdown-LabelForNotFound,
   .SelectDropdown-LabelForEmptyItems {
     padding: 0 var(--space-xs);

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

@@ -13,6 +13,7 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getOptionProps(props: OptionProps<ITEM>): GetOptionPropsResult;
     form: SelectDropdownPropForm;
     isOpen: boolean;
+    isLoading?: boolean;
     renderItem: (props: RenderItemProps<ITEM>) => JSX.Element | null;
     visibleItems: (OptionForCreate | {
         items: ITEM[];

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

@@ -1,37 +1,46 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import './SelectDropdown.css';
-import React, { Fragment, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import React, { Fragment, useMemo, useRef, useState } from 'react';
+import { Transition } from 'react-transition-group';
 import { isOptionForCreate, } from '../../../hooks/useSelect/useSelect';
+import { animateTimeout, cnMixPopoverAnimate, } from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';
 import { cn } from '../../../utils/bem';
-import { cnForCssTransition } from '../../../utils/cnForCssTransition';
 import { fabricIndex } from '../../../utils/fabricIndex';
 import { Popover } from '../../Popover/Popover';
 import { Text } from '../../Text/Text';
 import { SelectCreateButton } from '../SelectCreateButton/SelectCreateButton';
 import { SelectGroupLabel } from '../SelectGroupLabel/SelectGroupLabel';
+import { SelectLoader } from '../SelectLoader/SelectLoader';
 export var selectDropdownform = ['default', 'brick', 'round'];
 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, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound"]);
+    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, isLoading = props.isLoading, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
     var getIndex = fabricIndex(-1);
+    var _b = __read(useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     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)) {
-                        return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                    }
-                    return (React.createElement(Fragment, { key: group.key },
-                        group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                        group.items.map(function (item, i) {
-                            return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                        })));
-                }),
-                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-                !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
+    var isListShowed = useMemo(function () {
+        return (visibleItems.filter(function (group) {
+            return isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
+        }).length > 0);
+    }, [visibleItems]);
+    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) { return (React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
+            className,
+            cnMixPopoverAnimate({ direction: direction, animate: animate }),
+        ]), equalAnchorWidth: true }),
+        React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+            isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+            visibleItems.map(function (group) {
+                if (isOptionForCreate(group)) {
+                    return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                }
+                return (React.createElement(Fragment, { key: group.key },
+                    group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                    group.items.map(function (item, i) {
+                        return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                    })));
+            }),
+            !isLoading && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+            !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
 };