@consta/uikit 3.18.0 → 3.18.1

package/Responses503/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Responses503",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesConnectionError/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesConnectionError",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesDeleted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesDeleted",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesEmptyBox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesEmptyBox",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesEmptyPockets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesEmptyPockets",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesExit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesExit",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage403/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage403",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage404/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage404",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage500/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage500",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImage503/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImage503",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageConnectionError/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageConnectionError",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageDeleted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageDeleted",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyBox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyBox",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageEmptyPockets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageEmptyPockets",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageNothingFound",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesImageSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesImageSuccess",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesNothingFound/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesNothingFound",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ResponsesSuccess/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ResponsesSuccess",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Select",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Sidebar",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Skeleton",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SliderCanary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SliderCanary",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SnackBar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SnackBar",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Switch",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SwitchGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SwitchGroup",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Table",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tabs",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tag",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TagBase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TagBase",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Text",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TextField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TextField",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Theme",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ThemeToggler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ThemeToggler",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Timer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Timer",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tooltip",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/User/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/User",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelect",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelectDeprecated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelectDeprecated",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

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

@@ -1,6 +1,7 @@
 import './Calendar.css';
 import { CalendarComponent } from './helpers';
 export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
+export declare const COMPONENT_NAME: "Calendar";
 export declare const Calendar: CalendarComponent;
 export * from './CalendarCell/CalendarCell';
 export * from './CalendarDay/CalendarDay';

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

@@ -1,11 +1,13 @@
 "use strict";
 exports.__esModule = true;
-exports.Calendar = exports.cnCalendar = void 0;
+exports.Calendar = exports.COMPONENT_NAME = exports.cnCalendar = void 0;
 var tslib_1 = require("tslib");
 require("./Calendar.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var bem_1 = require("../../utils/bem");
 var getByMap_1 = require("../../utils/getByMap");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var CalendarViewOneMonth_1 = require("./CalendarViewOneMonth/CalendarViewOneMonth");
 var CalendarViewSlider_1 = require("./CalendarViewSlider/CalendarViewSlider");
 var CalendarViewTwoMonths_1 = require("./CalendarViewTwoMonths/CalendarViewTwoMonths");
@@ -16,10 +18,12 @@ var viewMap = {
     twoMonths: CalendarViewTwoMonths_1.CalendarViewTwoMonths,
     slider: CalendarViewSlider_1.CalendarViewSlider
 };
+exports.COMPONENT_NAME = 'Calendar';
 exports.Calendar = react_1["default"].forwardRef(function (props, ref) {
-    var _a = props.view, view = _a === void 0 ? helpers_1.calendarPropViewDefault : _a, className = props.className, otherProps = tslib_1.__rest(props, ["view", "className"]);
+    var calendarRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, calendarRef), _b = _a.view, view = _b === void 0 ? helpers_1.calendarPropViewDefault : _b, className = _a.className, otherProps = tslib_1.__rest(_a, ["view", "className"]);
     var ViewComponent = getByMap_1.getByMap(viewMap, view);
-    return react_1["default"].createElement(ViewComponent, tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnCalendar(null, [className]) }));
+    return (react_1["default"].createElement(ViewComponent, tslib_1.__assign({}, otherProps, { ref: useForkRef_1.useForkRef([ref, calendarRef]), className: exports.cnCalendar(null, [className]) })));
 });
 tslib_1.__exportStar(require("./CalendarCell/CalendarCell"), exports);
 tslib_1.__exportStar(require("./CalendarDay/CalendarDay"), exports);

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

@@ -33,6 +33,8 @@ declare type Props = {
     tabIndex?: number;
     inputRef?: React.Ref<HTMLInputElement>;
     children?: never;
+    for?: string;
+    inputId?: string;
 };
 export declare type CheckboxProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;
 export declare const COMPONENT_NAME: "Checkbox";

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

@@ -18,13 +18,13 @@ exports.COMPONENT_NAME = 'Checkbox';
 exports.cnCheckbox = bem_1.cn(exports.COMPONENT_NAME);
 exports.Checkbox = react_1["default"].forwardRef(function (props, ref) {
     var checkboxRef = react_1["default"].useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? exports.checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? exports.checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? exports.checkboxPropAlignDefault : _e, disabled = _a.disabled, _f = _a.intermediate, intermediate = _f === void 0 ? false : _f, 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, inputRef = _a.inputRef, otherProps = tslib_1.__rest(_a, ["checked", "name", "size", "view", "align", "disabled", "intermediate", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? exports.checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? exports.checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? exports.checkboxPropAlignDefault : _e, disabled = _a.disabled, _f = _a.intermediate, intermediate = _f === void 0 ? false : _f, 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 = tslib_1.__rest(_a, ["checked", "name", "size", "view", "align", "disabled", "intermediate", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputId", "inputRef"]);
     var handleChange = function (e) {
         if (onChange) {
             onChange({ e: e, checked: !checked });
         }
     };
     return (react_1["default"].createElement("label", tslib_1.__assign({}, otherProps, { className: exports.cnCheckbox({ size: size, view: view, disabled: disabled, intermediate: intermediate, align: align }, [className]), ref: useForkRef_1.useForkRef([ref, checkboxRef]) }),
-        react_1["default"].createElement("input", { type: "checkbox", name: name, className: exports.cnCheckbox('Input', [MixFocus_1.cnMixFocus()]), checked: checked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, tabIndex: tabIndex, ref: inputRef }),
+        react_1["default"].createElement("input", { type: "checkbox", name: name, className: exports.cnCheckbox('Input', [MixFocus_1.cnMixFocus()]), checked: checked, id: inputId, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly, required: required, step: step, tabIndex: tabIndex, ref: inputRef }),
         label && react_1["default"].createElement("span", { className: exports.cnCheckbox('Label') }, label)));
 });

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

@@ -17,6 +17,7 @@ export declare const collapsePropIconPositionDefault: "left";
 export declare const collapsePropDirectionIcon: readonly ["up", "right", "down", "left", "upRight", "downRight", "upLeft", "downLeft"];
 export declare const collapsePropDirectionIconDefault: "up";
 export declare const collapsePropCloseDirectionIconDefault: "down";
+export declare const COMPONENT_NAME: "Collapse";
 declare type CollapseProps = PropsWithHTMLAttributesAndRef<{
     size?: CollapsePropSize;
     icon?: IconComponent;

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

@@ -1,12 +1,14 @@
 "use strict";
 exports.__esModule = true;
-exports.Collapse = exports.sizeIconMap = exports.cnCollapse = exports.collapsePropCloseDirectionIconDefault = exports.collapsePropDirectionIconDefault = exports.collapsePropDirectionIcon = exports.collapsePropIconPositionDefault = exports.collapsePropIconPosition = exports.collapsePropHorizontalSpace = exports.collapsePropViewDefault = exports.collapsePropView = exports.collapsePropSizeDefault = exports.collapsePropSize = void 0;
+exports.Collapse = exports.sizeIconMap = exports.cnCollapse = exports.COMPONENT_NAME = exports.collapsePropCloseDirectionIconDefault = exports.collapsePropDirectionIconDefault = exports.collapsePropDirectionIcon = exports.collapsePropIconPositionDefault = exports.collapsePropIconPosition = exports.collapsePropHorizontalSpace = exports.collapsePropViewDefault = exports.collapsePropView = exports.collapsePropSizeDefault = exports.collapsePropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Collapse.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var IconArrowDown_1 = require("../../icons/IconArrowDown/IconArrowDown");
 var bem_1 = require("../../utils/bem");
 var getByMap_1 = require("../../utils/getByMap");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var Text_1 = require("../Text/Text");
 var CollapseIcon_1 = require("./CollapseIcon/CollapseIcon");
 exports.collapsePropSize = ['m', 'l', 's', 'xs', '2xs'];
@@ -32,6 +34,7 @@ exports.collapsePropIconPositionDefault = exports.collapsePropIconPosition[0];
 exports.collapsePropDirectionIcon = CollapseIcon_1.collapseIconPropDirection;
 exports.collapsePropDirectionIconDefault = exports.collapsePropDirectionIcon[0];
 exports.collapsePropCloseDirectionIconDefault = exports.collapsePropDirectionIcon[2];
+exports.COMPONENT_NAME = 'Collapse';
 exports.cnCollapse = bem_1.cn('Collapse');
 exports.sizeIconMap = {
     '2xs': 'xs',
@@ -45,8 +48,9 @@ function renderSide(side) {
     return sides.map(function (item, index) { return (react_1["default"].createElement("div", { className: exports.cnCollapse('Side'), key: index }, item)); });
 }
 exports.Collapse = react_1["default"].forwardRef(function (props, ref) {
-    var label = props.label, _a = props.size, size = _a === void 0 ? exports.collapsePropSizeDefault : _a, _b = props.view, view = _b === void 0 ? exports.collapsePropViewDefault : _b, className = props.className, isOpen = props.isOpen, children = props.children, hoverEffect = props.hoverEffect, divider = props.divider, _c = props.icon, icon = _c === void 0 ? IconArrowDown_1.IconArrowDown : _c, closeIcon = props.closeIcon, rightSide = props.rightSide, horizontalSpace = props.horizontalSpace, _d = props.iconPosition, iconPosition = _d === void 0 ? exports.collapsePropIconPositionDefault : _d, _e = props.directionIcon, directionIcon = _e === void 0 ? exports.collapsePropDirectionIconDefault : _e, _f = props.closeDirectionIcon, closeDirectionIcon = _f === void 0 ? exports.collapsePropCloseDirectionIconDefault : _f, style = props.style, otherProps = tslib_1.__rest(props, ["label", "size", "view", "className", "isOpen", "children", "hoverEffect", "divider", "icon", "closeIcon", "rightSide", "horizontalSpace", "iconPosition", "directionIcon", "closeDirectionIcon", "style"]);
-    return (react_1["default"].createElement("div", { ref: ref, className: exports.cnCollapse({ size: size, view: view, horizontalSpace: horizontalSpace }, [className]), style: style },
+    var collapseRef = react_1.useRef(null);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, collapseRef), label = _a.label, _b = _a.size, size = _b === void 0 ? exports.collapsePropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.collapsePropViewDefault : _c, className = _a.className, isOpen = _a.isOpen, children = _a.children, hoverEffect = _a.hoverEffect, divider = _a.divider, _d = _a.icon, icon = _d === void 0 ? IconArrowDown_1.IconArrowDown : _d, closeIcon = _a.closeIcon, rightSide = _a.rightSide, horizontalSpace = _a.horizontalSpace, _e = _a.iconPosition, iconPosition = _e === void 0 ? exports.collapsePropIconPositionDefault : _e, _f = _a.directionIcon, directionIcon = _f === void 0 ? exports.collapsePropDirectionIconDefault : _f, _g = _a.closeDirectionIcon, closeDirectionIcon = _g === void 0 ? exports.collapsePropCloseDirectionIconDefault : _g, style = _a.style, otherProps = tslib_1.__rest(_a, ["label", "size", "view", "className", "isOpen", "children", "hoverEffect", "divider", "icon", "closeIcon", "rightSide", "horizontalSpace", "iconPosition", "directionIcon", "closeDirectionIcon", "style"]);
+    return (react_1["default"].createElement("div", { ref: useForkRef_1.useForkRef([ref, collapseRef]), className: exports.cnCollapse({ size: size, view: view, horizontalSpace: horizontalSpace }, [className]), style: style },
         react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnCollapse('Label', {
                 hoverEffect: hoverEffect,
                 iconPosition: iconPosition

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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.Combobox = void 0;
+exports.Combobox = exports.COMPONENT_NAME = void 0;
 var tslib_1 = require("tslib");
 require("../SelectComponents/Select.css");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -9,6 +9,7 @@ var useSelect_1 = require("../../hooks/useSelect/useSelect");
 var IconClose_1 = require("../../icons/IconClose/IconClose");
 var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
 var MixFocus_1 = require("../../mixs/MixFocus/MixFocus");
+var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var cnSelect_1 = require("../SelectComponents/cnSelect");
 var helpers_1 = require("../SelectComponents/helpers");
 var SelectContainer_1 = require("../SelectComponents/SelectContainer/SelectContainer");
@@ -17,12 +18,13 @@ var SelectItem_1 = require("../SelectComponents/SelectItem/SelectItem");
 var SelectValueTag_1 = require("../SelectComponents/SelectValueTag/SelectValueTag");
 var types_1 = require("../SelectComponents/types");
 var helpers_2 = require("./helpers");
+exports.COMPONENT_NAME = 'Combobox';
 function ComboboxRender(props, ref) {
     var defaultDropdownRef = react_1.useRef(null);
     var controlInnerRef = react_1.useRef(null);
     var helperInputFakeElement = react_1.useRef(null);
     var controlRef = react_1.useRef(null);
-    var _a = helpers_2.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 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, 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 ? helpers_1.defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? helpers_1.defaultlabelForCreate : _h, _j = _a.labelForEmptyItems, labelForEmptyItems = _j === void 0 ? helpers_1.defaultLabelForEmptyItems : _j, searchFunction = _a.searchFunction, _k = _a.multiple, multiple = _k === void 0 ? false : _k, style = _a.style, otherProps = tslib_1.__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_1.usePropsHandler(exports.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, required = _a.required, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, 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 ? helpers_1.defaultlabelForNotFound : _g, _h = _a.labelForCreate, labelForCreate = _h === void 0 ? helpers_1.defaultlabelForCreate : _h, _j = _a.labelForEmptyItems, labelForEmptyItems = _j === void 0 ? helpers_1.defaultLabelForEmptyItems : _j, onInputChange = _a.onInputChange, searchFunction = _a.searchFunction, isLoading = _a.isLoading, _k = _a.multiple, multiple = _k === void 0 ? false : _k, style = _a.style, otherProps = tslib_1.__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_1.useSelect({
         items: items,
         groups: groups,
@@ -57,6 +59,11 @@ function ComboboxRender(props, ref) {
     };
     var renderValue = renderValueProp || (multiple ? renderValueDefaultMultiple : renderValueDefaultNotMultiple);
     var inputRefForRender = useForkRef_1.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 ? helpers_1.getInputWidth(controlInnerRef, helperInputFakeElement) : undefined;
         return (react_1["default"].createElement(react_1["default"].Fragment, null,
@@ -67,7 +74,7 @@ function ComboboxRender(props, ref) {
                 }),
             helpers_2.isNotMultipleParams(props) && props.value && renderValue({ item: props.value }),
             (!value || (Array.isArray(value) && value.length === 0)) && !searchValue && placeholder && (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Placeholder'), title: "placeholder" }, placeholder)),
-            react_1["default"].createElement("input", tslib_1.__assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleInputChange, ref: inputRefForRender, className: cnSelect_1.cnSelect('Input', { size: size, hide: !multiple && !!value, multiple: multiple }), value: searchValue, style: { width: width } }))));
+            react_1["default"].createElement("input", tslib_1.__assign({}, getKeyProps(), { type: "text", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, onChange: handleChangeValue, ref: inputRefForRender, className: cnSelect_1.cnSelect('Input', { size: size, hide: !multiple && !!value, multiple: multiple }), value: searchValue, style: { width: width } }))));
     };
     return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, required: required, form: form, multiple: multiple, ref: ref, style: style }, otherProps),
         react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('Control', { hasInput: true }), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
@@ -79,7 +86,7 @@ function ComboboxRender(props, ref) {
                 react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Delimiter') }),
                 react_1["default"].createElement("button", { type: "button", className: cnSelect_1.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_1.cnSelect('DropdownIndicatorIcon') })))),
-        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, 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_1["default"].createElement(SelectDropdown_1.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_1["default"].createElement("div", { className: cnSelect_1.cnSelect('HelperInputFakeElement'), ref: helperInputFakeElement }, searchValue)));
 }
 exports.Combobox = react_1.forwardRef(ComboboxRender);

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