@consta/uikit 3.18.0 → 3.18.1

package/__internal__/src/components/Combobox/Combobox.js

@@ -6,6 +6,7 @@ import { useSelect } from '../../hooks/useSelect/useSelect';
 import { IconClose } from '../../icons/IconClose/IconClose';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { cnSelect } from '../SelectComponents/cnSelect';
 import { defaultlabelForCreate, defaultLabelForEmptyItems, defaultlabelForNotFound, getInputWidth, getSelectDropdownForm, } from '../SelectComponents/helpers';
 import { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';
@@ -14,12 +15,13 @@ import { SelectItem } from '../SelectComponents/SelectItem/SelectItem';
 import { SelectValueTag } from '../SelectComponents/SelectValueTag/SelectValueTag';
 import { defaultPropForm, defaultPropSize, defaultPropView } from '../SelectComponents/types';
 import { isMultipleParams, isNotMultipleParams, withDefaultGetters, } from './helpers';
+export var COMPONENT_NAME = 'Combobox';
 function ComboboxRender(props, ref) {
     var defaultDropdownRef = useRef(null);
     var controlInnerRef = useRef(null);
     var helperInputFakeElement = useRef(null);
     var controlRef = useRef(null);
-    var _a = withDefaultGetters(props), 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, required = _a.required, _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, getItemKey = _a.getItemKey, 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 ? defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? defaultlabelForCreate : _h, _j = _a.labelForEmptyItems, labelForEmptyItems = _j === void 0 ? defaultLabelForEmptyItems : _j, searchFunction = _a.searchFunction, _k = _a.multiple, multiple = _k === void 0 ? false : _k, style = _a.style, otherProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "disabled", "ariaLabel", "id", "required", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "labelForEmptyItems", "searchFunction", "multiple", "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, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, required = _a.required, _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, getItemKey = _a.getItemKey, 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 ? defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? defaultlabelForCreate : _h, _j = _a.labelForEmptyItems, labelForEmptyItems = _j === void 0 ? defaultLabelForEmptyItems : _j, onInputChange = _a.onInputChange, searchFunction = _a.searchFunction, isLoading = _a.isLoading, _k = _a.multiple, multiple = _k === void 0 ? false : _k, style = _a.style, otherProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "disabled", "ariaLabel", "id", "required", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "onCreate", "inputRef", "labelForNotFound", "labelForCreate", "labelForEmptyItems", "onInputChange", "searchFunction", "isLoading", "multiple", "style"]);
     var _l = useSelect({
         items: items,
         groups: groups,
@@ -54,6 +56,11 @@ function ComboboxRender(props, ref) {
     };
     var renderValue = renderValueProp || (multiple ? renderValueDefaultMultiple : renderValueDefaultNotMultiple);
     var inputRefForRender = useForkRef([inputRef, inputRefProp]);
+    var handleChangeValue = function (e) {
+        handleInputChange(e);
+        var value = e.target.value;
+        !disabled && (onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ e: e, id: id, name: name, value: value || null }));
+    };
     var renderControlValue = function () {
         var width = multiple ? getInputWidth(controlInnerRef, helperInputFakeElement) : undefined;
         return (React.createElement(React.Fragment, null,
@@ -64,7 +71,7 @@ function ComboboxRender(props, ref) {
                 }),
             isNotMultipleParams(props) && props.value && renderValue({ item: props.value }),
             (!value || (Array.isArray(value) && value.length === 0)) && !searchValue && placeholder && (React.createElement("span", { className: cnSelect('Placeholder'), title: "placeholder" }, placeholder)),
-            React.createElement("input", __assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleInputChange, ref: inputRefForRender, className: cnSelect('Input', { size: size, hide: !multiple && !!value, multiple: multiple }), value: searchValue, style: { width: width } }))));
+            React.createElement("input", __assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleChangeValue, ref: inputRefForRender, className: cnSelect('Input', { size: size, hide: !multiple && !!value, multiple: multiple }), value: searchValue, style: { width: width } }))));
     };
     return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, view: view, required: required, form: form, multiple: multiple, ref: ref, style: style }, otherProps),
         React.createElement("div", { className: cnSelect('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
@@ -76,7 +83,7 @@ function ComboboxRender(props, ref) {
                 React.createElement("span", { className: cnSelect('Delimiter') }),
                 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, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate, labelForEmptyItems: labelForEmptyItems, notFound: notFound, 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, labelForNotFound: labelForNotFound, labelForCreate: labelForCreate, isLoading: isLoading, labelForEmptyItems: labelForEmptyItems, notFound: notFound, hasItems: hasItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined }),
         React.createElement("div", { className: cnSelect('HelperInputFakeElement'), ref: helperInputFakeElement }, searchValue)));
 }
 export var Combobox = forwardRef(ComboboxRender);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { PropForm, PropSize, PropStatus, PropView, RenderItemProps } from '../SelectComponents/types';
+import { TextFieldPropOnChange } from '../TextField/helpers';
 export declare type DefaultItem = {
     label: string;
     id: string | number;
@@ -39,6 +40,7 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     placeholder?: string;
     ariaLabel?: string;
     status?: PropStatus;
+    isLoading?: boolean;
     dropdownClassName?: string;
     dropdownRef?: React.RefObject<HTMLDivElement>;
     name?: string;
@@ -59,6 +61,7 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     multiple?: MULTIPLE;
     value?: PropValue<ITEM, MULTIPLE>;
     groups?: GROUP[];
+    onInputChange?: TextFieldPropOnChange;
     getItemLabel?: PropGetItemLabel<ITEM>;
     getItemKey?: PropGetItemKey<ITEM>;
     getItemGroupKey?: PropGetItemGroupKey<ITEM>;
@@ -104,6 +107,7 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     placeholder?: string | undefined;
     ariaLabel?: string | undefined;
     status?: "alert" | "success" | "warning" | undefined;
+    isLoading?: boolean | undefined;
     dropdownClassName?: string | undefined;
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     name?: string | undefined;
@@ -124,6 +128,7 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     multiple?: MULTIPLE | undefined;
     value?: PropValue<ITEM, MULTIPLE>;
     groups?: GROUP[] | undefined;
+    onInputChange?: TextFieldPropOnChange | undefined;
     getItemLabel?: PropGetItemLabel<ITEM> | undefined;
     getItemKey?: PropGetItemKey<ITEM> | undefined;
     getItemGroupKey?: PropGetItemGroupKey<ITEM> | undefined;

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

@@ -1,4 +1,5 @@
 import './ContextMenu.css';
 import { ContextMenuComponent } from './types';
+export declare const COMPONENT_NAME: "ContextMenu";
 export declare const ContextMenu: ContextMenuComponent;
 export * from './types';

package/__internal__/src/components/ContextMenuCanary/ContextMenuCanary.js

@@ -6,14 +6,16 @@ import { useFlag } from '../../hooks/useFlag/useFlag';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { animateTimeout, cnMixPopoverAnimate, } from '../../mixs/MixPopoverAnimate/MixPopoverAnimate';
 import { cn } from '../../utils/bem';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { ContextMenuLevels } from './ContextMenuLevels/ContextMenuLevels';
 var cnContextMenu = cn('ContextMenuCanary');
+export var COMPONENT_NAME = 'ContextMenu';
 function ContextMenuRender(props, ref) {
-    var isOpen = props.isOpen, className = props.className, onSetDirection = props.onSetDirection, otherProps = __rest(props, ["isOpen", "className", "onSetDirection"]);
-    var _a = __read(useFlag(), 2), playAnimation = _a[0], setPlayAnimation = _a[1];
-    var _b = __read(useState(props.direction), 2), direction = _b[0], setDirection = _b[1];
     var nodeRef = useRef(null);
     var levelRef = useForkRef([ref, nodeRef]);
+    var _a = usePropsHandler(COMPONENT_NAME, props, levelRef), isOpen = _a.isOpen, className = _a.className, onSetDirection = _a.onSetDirection, otherProps = __rest(_a, ["isOpen", "className", "onSetDirection"]);
+    var _b = __read(useFlag(), 2), playAnimation = _b[0], setPlayAnimation = _b[1];
+    var _c = __read(useState(props.direction), 2), direction = _c[0], setDirection = _c[1];
     var handleSetDirection = function (d) {
         setDirection(d);
         onSetDirection === null || onSetDirection === void 0 ? void 0 : onSetDirection(d);

package/__internal__/src/components/ContextMenuCanary/ContextMenuLevels/ContextMenuLevels.js

@@ -63,9 +63,8 @@ function ContextMenuLevelsRender(propsComponent, ref) {
         }));
     }, [items]);
     var firstLevelRef = useForkRef([levelsRefs[0], ref]);
-    return (React.createElement(React.Fragment, null, levels.map(function (level, index) {
-        var _a;
-        return (React.createElement(ContextMenuLevel, __assign({}, otherProps, level, { key: "ContextMenu-" + index, style: __assign(__assign({}, style), { zIndex: Number((_a = style === null || style === void 0 ? void 0 : style.zIndex) !== null && _a !== void 0 ? _a : 0) + index }), levelDepth: index, getItemLabel: getItemLabel, addLevel: addLevel, deleteLevel: deleteLevel, onSetDirection: index > 0 ? setSubMenuDirection : props.onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getItemSubMenu: getItemSubMenu, getItemKey: getItemKey, ref: index === 0 ? firstLevelRef : levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' })));
-    })));
+    return (React.createElement(React.Fragment, null, levels.map(function (level, index) { return (React.createElement(ContextMenuLevel, __assign({}, otherProps, level, { key: "ContextMenu-" + index, style: __assign(__assign({}, style), {
+            zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined
+        }), levelDepth: index, getItemLabel: getItemLabel, addLevel: addLevel, deleteLevel: deleteLevel, onSetDirection: index > 0 ? setSubMenuDirection : props.onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getItemSubMenu: getItemSubMenu, getItemKey: getItemKey, ref: index === 0 ? firstLevelRef : levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' }))); })));
 }
 export var ContextMenuLevels = React.forwardRef(ContextMenuLevelsRender);

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

@@ -1,3 +1,4 @@
 import { DatePickerComponent } from './helpers';
+export declare const COMPONENT_NAME: "DatePicker";
 export declare const DatePicker: DatePickerComponent;
 export * from './helpers';

package/__internal__/src/components/DatePickerCanary/DatePickerCanary.js

@@ -1,7 +1,9 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { maxDateDefault, minDateDefault } from '../../utils/date';
 import { getByMap } from '../../utils/getByMap';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { DatePickerTypeDate } from './DatePickerTypeDate/DatePickerTypeDate';
 import { DatePickerTypeDateRange } from './DatePickerTypeDateRange/DatePickerTypeDateRange';
 import { DatePickerTypeDateTime } from './DatePickerTypeDateTime/DatePickerTypeDateTime';
@@ -13,8 +15,10 @@ var typeMap = {
     'date-time': DatePickerTypeDateTime,
     'date-time-range': DatePickerTypeDateTimeRange
 };
+export var COMPONENT_NAME = 'DatePicker';
 export var DatePicker = forwardRef(function (props, ref) {
-    var _a = props.type, type = _a === void 0 ? datePickerPropTypeDefault : _a, _b = props.minDate, minDate = _b === void 0 ? minDateDefault : _b, _c = props.maxDate, maxDate = _c === void 0 ? maxDateDefault : _c, multiplicityMinutes = props.multiplicityMinutes, multiplicitySeconds = props.multiplicitySeconds, multiplicityHours = props.multiplicityHours, otherProps = __rest(props, ["type", "minDate", "maxDate", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
+    var datePickerRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, datePickerRef), _b = _a.type, type = _b === void 0 ? datePickerPropTypeDefault : _b, _c = _a.minDate, minDate = _c === void 0 ? minDateDefault : _c, _d = _a.maxDate, maxDate = _d === void 0 ? maxDateDefault : _d, multiplicityMinutes = _a.multiplicityMinutes, multiplicitySeconds = _a.multiplicitySeconds, multiplicityHours = _a.multiplicityHours, otherProps = __rest(_a, ["type", "minDate", "maxDate", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
     var timeProps = type === 'date-time'
         ? {
             multiplicityMinutes: multiplicityMinutes,
@@ -23,6 +27,6 @@ export var DatePicker = forwardRef(function (props, ref) {
         }
         : undefined;
     var Component = getByMap(typeMap, type);
-    return React.createElement(Component, __assign({}, otherProps, timeProps, { minDate: minDate, maxDate: maxDate, ref: ref }));
+    return (React.createElement(Component, __assign({}, otherProps, timeProps, { minDate: minDate, maxDate: maxDate, ref: useForkRef([ref, datePickerRef]) })));
 });
 export * from './helpers';

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

@@ -1,3 +1,4 @@
 import { DateTimeComponent } from './helpers/types';
+export declare const COMPONENT_NAME: "DateTime";
 export declare const DateTime: DateTimeComponent;
 export * from './helpers/types';

package/__internal__/src/components/DateTimeCanary/DateTimeCanary.js

@@ -1,6 +1,8 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { getByMap } from '../../utils/getByMap';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { DateTimeTypeDate } from './DateTimeTypeDate/DateTimeTypeDate';
 import { DateTimeTypeDateTime } from './DateTimeTypeDateTime/DateTimeTypeDateTime';
 import { DateTimeTypeMonth } from './DateTimeTypeMonth/DateTimeTypeMonth';
@@ -14,9 +16,11 @@ var typeMap = {
     'time': DateTimeTypeTime,
     'date-time': DateTimeTypeDateTime
 };
+export var COMPONENT_NAME = 'DateTime';
 export var DateTime = forwardRef(function (props, ref) {
-    var _a = props.type, type = _a === void 0 ? dateTimePropTypeDefault : _a, otherProps = __rest(props, ["type"]);
+    var dateTimeRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, dateTimeRef), _b = _a.type, type = _b === void 0 ? dateTimePropTypeDefault : _b, otherProps = __rest(_a, ["type"]);
     var Component = getByMap(typeMap, type);
-    return React.createElement(Component, __assign({}, otherProps, { ref: ref }));
+    return React.createElement(Component, __assign({}, otherProps, { ref: useForkRef([ref, dateTimeRef]) }));
 });
 export * from './helpers/types';

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

@@ -10,4 +10,5 @@ export declare type DragNDropFieldProps = {
 export declare type DragNDropFieldChildrenRenderProp = (props: {
     openFileDialog: () => void;
 } & Pick<DragNDropFieldProps, 'accept' | 'maxSize' | 'multiple'>) => React.ReactNode;
+export declare const COMPONENT_NAME: "DragNDropField";
 export declare const DragNDropField: React.ForwardRefExoticComponent<DragNDropFieldProps & React.RefAttributes<HTMLDivElement>>;

package/__internal__/src/components/DragNDropField/DragNDropField.js

@@ -1,16 +1,19 @@
 import { __assign } from "tslib";
 import './DragNDropField.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cn } from '../../utils/bem';
+import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Text } from '../Text/Text';
 import { DragNDropFieldContent } from './DragNDropFieldContent/DragNDropFieldContent';
 import { DragNDropFieldTooltip } from './DragNDropFieldTooltip/DragNDropFieldTooltip';
 import { getErrorsList } from './getErrorsList';
 var cnDragNDropField = cn('DragNDropField');
-export var DragNDropField = React.forwardRef(function (_a, ref) {
-    var accept = _a.accept, maxSize = _a.maxSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent : _c;
+export var COMPONENT_NAME = 'DragNDropField';
+export var DragNDropField = React.forwardRef(function (props, ref) {
+    var dragNDropFieldRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, dragNDropFieldRef), accept = _a.accept, maxSize = _a.maxSize, _b = _a.multiple, multiple = _b === void 0 ? false : _b, onDropFiles = _a.onDropFiles, _c = _a.children, children = _c === void 0 ? DragNDropFieldContent : _c;
     var handleDrop = React.useCallback(function (acceptedFiles) { return acceptedFiles.length > 0 && onDropFiles(acceptedFiles); }, [onDropFiles]);
     var _d = useDropzone({
         accept: (accept === null || accept === void 0 ? void 0 : accept.length) ? accept : undefined,
@@ -33,7 +36,7 @@ export var DragNDropField = React.forwardRef(function (_a, ref) {
         : children;
     var errors = React.useMemo(function () { return getErrorsList(fileRejections); }, [fileRejections]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({}, rootProps, { ref: useForkRef([ref, rootRef]) }),
+        React.createElement("div", __assign({}, rootProps, { ref: useForkRef([ref, rootRef, dragNDropFieldRef]) }),
             React.createElement("input", __assign({}, getInputProps())),
             isDragActive ? (React.createElement(Text, { view: "secondary", size: "s", align: "center" }, "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430")) : (content)),
         React.createElement(DragNDropFieldTooltip, { anchorRef: rootRef, errors: errors })));

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/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,6 +1,4 @@
 .SelectDropdown {
-  --transition-spase: var(--space-2xs);
-  z-index: 9999;
   overflow: hidden;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -9,12 +7,9 @@
   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 {
@@ -57,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[];