widenarrow-ui 1.1.58 → 1.1.60

package/lib/components/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode, RefObject } from 'react';
 import { HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
 export interface ButtonProps {
     text?: string;
@@ -16,6 +16,7 @@ export interface ButtonProps {
     toolTip?: string;
     style?: CSSProperties;
     withEllipsis?: boolean;
+    ref?: RefObject<HTMLButtonElement>;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     id?: string | number;
     loading?: boolean;

package/lib/components/Checkbox/Checkbox.types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, MouseEvent, FocusEvent } from 'react';
+import { ChangeEvent, KeyboardEvent, MouseEvent, FocusEvent, RefObject } from 'react';
 export interface CheckboxProps {
     label: string;
     id?: string | number;
@@ -7,9 +7,10 @@ export interface CheckboxProps {
     onChange?: (val: string, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
     onFocusCallback?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlurCallback?: (event: FocusEvent<HTMLInputElement>) => void;
-    onChangeFake?: (val: string, event: MouseEvent<HTMLDivElement>) => void;
+    onChangeFake?: (val: string, event: MouseEvent<HTMLSpanElement>) => void;
     className?: string;
     ariaLabel?: string;
+    ref?: RefObject<HTMLInputElement>;
     helperText?: string;
     checked?: boolean;
     blocked?: boolean;

package/lib/components/IconButton/IconButton.types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, CSSProperties } from 'react';
+import { MouseEvent, CSSProperties, RefObject } from 'react';
 import { IconStyleInterface } from '../../types/styling.types';
 import { ColorTypes, HierarchyTypes, SizeTypes } from '../../constants';
 export interface IconButtonProps extends IconStyleInterface {
@@ -16,6 +16,7 @@ export interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    ref?: RefObject<HTMLButtonElement>;
     autoFocus?: boolean;
     tabIndex?: number;
     toolTip?: string;

package/lib/components/InlineButton/InlineButton.types.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode, CSSProperties } from 'react';
+import { MouseEvent, ReactNode, CSSProperties, RefObject } from 'react';
 import { HierarchyTypes, IconTypes, SizeTypes } from '../../constants';
 export interface InlineButtonProps {
     text: string;
@@ -23,6 +23,7 @@ export interface InlineButtonProps {
     withEllipsis?: boolean;
     disabled?: boolean | undefined;
     style?: CSSProperties;
+    ref?: RefObject<HTMLButtonElement>;
     tabIndex?: number;
     autoFocus?: boolean;
     toolTip?: string;

package/lib/components/Input/Input.types.d.ts

@@ -26,7 +26,7 @@ export interface InputProps {
     withLabel?: boolean;
     marginBottom?: boolean;
     placeholder?: string;
-    inputRef?: RefObject<HTMLInputElement>;
+    ref?: RefObject<HTMLInputElement>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     helperText?: string;
     characterLimit?: number;

package/lib/components/RadioButton/RadioButton.types.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
+import { ChangeEvent, FocusEvent, KeyboardEvent, RefObject } from 'react';
 export interface RadioButtonProps {
     className?: string;
     name?: string;
@@ -13,6 +13,7 @@ export interface RadioButtonProps {
     autoFocus?: boolean;
     checked: boolean;
     toolTip?: string;
+    ref?: RefObject<HTMLInputElement>;
     onChange: (val: string | number, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
     onFocusCallback?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlurCallback?: (event: FocusEvent<HTMLInputElement>) => void;

package/lib/components/SelectInput/SelectInput.types.d.ts

@@ -6,7 +6,7 @@ export interface OptionItem {
     disabled?: boolean;
 }
 export interface SelectInputProps {
-    inputRef?: RefObject<HTMLSelectElement>;
+    ref?: RefObject<HTMLSelectElement>;
     id?: string | number;
     className?: string;
     inputClassName?: string;

package/lib/components/SwitchButton/SwitchButton.types.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 export interface SwitchButtonProps {
     checked: boolean;
     id?: string | number;
@@ -11,5 +12,6 @@ export interface SwitchButtonProps {
     alignCenter?: boolean;
     className?: string;
     marginBottom?: boolean;
+    ref?: RefObject<HTMLInputElement>;
     onClickCallback: () => void;
 }

package/lib/components/TextAreaInput/TextAreaInput.types.d.ts

@@ -19,7 +19,7 @@ export interface TextAreaInputProps {
     disabled?: boolean;
     marginBottom?: boolean;
     autoFocus?: boolean;
-    inputRef?: RefObject<HTMLTextAreaElement>;
+    ref?: RefObject<HTMLTextAreaElement>;
     style?: CSSProperties;
     readonly?: boolean;
 }

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { CSSProperties, MouseEvent, ReactNode, FC, ChangeEvent, KeyboardEvent, FocusEvent, RefObject } from 'react';
+import react__default, { CSSProperties, MouseEvent, RefObject, ReactNode, FC, ChangeEvent, KeyboardEvent, FocusEvent } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 
 declare enum IconTypes {
@@ -421,6 +421,7 @@ interface ButtonProps {
     toolTip?: string;
     style?: CSSProperties;
     withEllipsis?: boolean;
+    ref?: RefObject<HTMLButtonElement>;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     id?: string | number;
     loading?: boolean;
@@ -440,9 +441,10 @@ interface CheckboxProps {
     onChange?: (val: string, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
     onFocusCallback?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlurCallback?: (event: FocusEvent<HTMLInputElement>) => void;
-    onChangeFake?: (val: string, event: MouseEvent<HTMLDivElement>) => void;
+    onChangeFake?: (val: string, event: MouseEvent<HTMLSpanElement>) => void;
     className?: string;
     ariaLabel?: string;
+    ref?: RefObject<HTMLInputElement>;
     helperText?: string;
     checked?: boolean;
     blocked?: boolean;
@@ -493,6 +495,7 @@ interface RadioButtonProps {
     autoFocus?: boolean;
     checked: boolean;
     toolTip?: string;
+    ref?: RefObject<HTMLInputElement>;
     onChange: (val: string | number, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
     onFocusCallback?: (event: FocusEvent<HTMLInputElement>) => void;
     onBlurCallback?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -698,6 +701,7 @@ interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    ref?: RefObject<HTMLButtonElement>;
     autoFocus?: boolean;
     tabIndex?: number;
     toolTip?: string;
@@ -732,7 +736,7 @@ interface InputProps {
     withLabel?: boolean;
     marginBottom?: boolean;
     placeholder?: string;
-    inputRef?: RefObject<HTMLInputElement>;
+    ref?: RefObject<HTMLInputElement>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     helperText?: string;
     characterLimit?: number;
@@ -791,6 +795,7 @@ interface InlineButtonProps {
     withEllipsis?: boolean;
     disabled?: boolean | undefined;
     style?: CSSProperties;
+    ref?: RefObject<HTMLButtonElement>;
     tabIndex?: number;
     autoFocus?: boolean;
     toolTip?: string;
@@ -818,7 +823,7 @@ interface TextAreaInputProps {
     disabled?: boolean;
     marginBottom?: boolean;
     autoFocus?: boolean;
-    inputRef?: RefObject<HTMLTextAreaElement>;
+    ref?: RefObject<HTMLTextAreaElement>;
     style?: CSSProperties;
     readonly?: boolean;
 }
@@ -982,6 +987,7 @@ interface SwitchButtonProps {
     alignCenter?: boolean;
     className?: string;
     marginBottom?: boolean;
+    ref?: RefObject<HTMLInputElement>;
     onClickCallback: () => void;
 }
 
@@ -993,7 +999,7 @@ interface OptionItem {
     disabled?: boolean;
 }
 interface SelectInputProps {
-    inputRef?: RefObject<HTMLSelectElement>;
+    ref?: RefObject<HTMLSelectElement>;
     id?: string | number;
     className?: string;
     inputClassName?: string;

package/lib/index.esm.js

@@ -2307,7 +2307,7 @@ var styles$n = {"body":"Button-module_AK7AMO","container":"Button-module_0j8mdA"
 var s$n = classNames.bind(styles$n);
 var Button = memo(function (_a) {
     var _b, _c;
-    var className = _a.className, id = _a.id, style = _a.style, _d = _a.type, type = _d === void 0 ? HierarchyTypes.PRIMARY : _d, _e = _a.size, size = _e === void 0 ? SizeTypes.MEDIUM : _e, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, text = _a.text, toolTip = _a.toolTip, icon = _a.icon, iconSize = _a.iconSize, withIconRight = _a.withIconRight, rotateIconByDegree = _a.rotateIconByDegree, withEllipsis = _a.withEllipsis, onClickCallback = _a.onClickCallback, loading = _a.loading, disabled = _a.disabled, children = _a.children, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, tabIndex = _a.tabIndex;
+    var className = _a.className, id = _a.id, style = _a.style, _d = _a.type, type = _d === void 0 ? HierarchyTypes.PRIMARY : _d, _e = _a.size, size = _e === void 0 ? SizeTypes.MEDIUM : _e, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, text = _a.text, toolTip = _a.toolTip, icon = _a.icon, ref = _a.ref, iconSize = _a.iconSize, withIconRight = _a.withIconRight, rotateIconByDegree = _a.rotateIconByDegree, withEllipsis = _a.withEllipsis, onClickCallback = _a.onClickCallback, loading = _a.loading, disabled = _a.disabled, children = _a.children, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, tabIndex = _a.tabIndex;
     var mergedClassNames = s$n('container', (_b = {},
         _b["container_".concat(type)] = !!type,
         _b["container_sizeSm_".concat(size)] = !!size,
@@ -2338,6 +2338,7 @@ var Button = memo(function (_a) {
     var baseAttributes = (_c = {
             className: mergedClassNames,
             id: id,
+            ref: ref,
             disabled: loading || disabled,
             onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
@@ -2358,7 +2359,7 @@ var styles$m = {"body":"Checkbox-module_et5-hi","container":"Checkbox-module_pUY
 var s$m = classNames.bind(styles$m);
 var Checkbox = function (_a) {
     var _b, _c;
-    var value = _a.value, className = _a.className, label = _a.label, id = _a.id, name = _a.name, _d = _a.withLabel, withLabel = _d === void 0 ? true : _d, helperText = _a.helperText, onChange = _a.onChange, onFocusCallback = _a.onFocusCallback, onBlurCallback = _a.onBlurCallback, onChangeFake = _a.onChangeFake, withEllipsis = _a.withEllipsis, checked = _a.checked, blocked = _a.blocked, indeterminate = _a.indeterminate, disabled = _a.disabled, autoFocus = _a.autoFocus, isFake = _a.isFake, ariaLabel = _a.ariaLabel;
+    var value = _a.value, className = _a.className, label = _a.label, id = _a.id, name = _a.name, ref = _a.ref, _d = _a.withLabel, withLabel = _d === void 0 ? true : _d, helperText = _a.helperText, onChange = _a.onChange, onFocusCallback = _a.onFocusCallback, onBlurCallback = _a.onBlurCallback, onChangeFake = _a.onChangeFake, withEllipsis = _a.withEllipsis, checked = _a.checked, blocked = _a.blocked, indeterminate = _a.indeterminate, disabled = _a.disabled, autoFocus = _a.autoFocus, isFake = _a.isFake, ariaLabel = _a.ariaLabel;
     var htmlId = useMemo(function () { return id || shortUid(); }, []);
     var onClickRealInput = function (event) {
         if (!disabled && onChange) {
@@ -2379,6 +2380,7 @@ var Checkbox = function (_a) {
             disabled: disabled,
             checked: checked,
             name: name,
+            ref: ref,
             autoFocus: autoFocus,
             onChange: onClickRealInput,
             onFocus: onFocusCallback ? onFocusCallback : undefined,
@@ -2400,7 +2402,7 @@ var Checkbox = function (_a) {
                             box_disabledAndChecked: disabled && checked
                         }), role: 'button', onClick: onClickFakeInput, tabIndex: 0, "aria-label": ariaLabel || label, children: checked ? jsx(Icon, { icon: IconTypes.CHECK, className: s$m('icon') }) : null })) : (jsxs(Fragment, { children: [jsx("input", __assign({ className: s$m('input', {
                                     input_disabled: disabled
-                                }), type: 'checkbox', onChange: onClickRealInput, onKeyDown: function (event) {
+                                }), type: 'checkbox', onKeyDown: function (event) {
                                     if (event.key === 'Enter' && onChange) {
                                         onChange(value || '', event);
                                     }
@@ -2500,7 +2502,7 @@ var styles$j = {"body":"RadioButton-module_sinlEa","container":"RadioButton-modu
 var s$j = classNames.bind(styles$j);
 var RadioButton = function (_a) {
     var _b;
-    var className = _a.className, label = _a.label, id = _a.id, name = _a.name, _c = _a.withLabel, withLabel = _c === void 0 ? true : _c, ariaLabel = _a.ariaLabel, onChange = _a.onChange, onFocusCallback = _a.onFocusCallback, onBlurCallback = _a.onBlurCallback, checked = _a.checked, value = _a.value, autoFocus = _a.autoFocus, withEllipsis = _a.withEllipsis, disabled = _a.disabled, helperText = _a.helperText, toolTip = _a.toolTip;
+    var className = _a.className, label = _a.label, id = _a.id, name = _a.name, _c = _a.withLabel, withLabel = _c === void 0 ? true : _c, ariaLabel = _a.ariaLabel, onChange = _a.onChange, onFocusCallback = _a.onFocusCallback, onBlurCallback = _a.onBlurCallback, checked = _a.checked, value = _a.value, autoFocus = _a.autoFocus, ref = _a.ref, withEllipsis = _a.withEllipsis, disabled = _a.disabled, helperText = _a.helperText, toolTip = _a.toolTip;
     var onClick = function (event) {
         if (disabled) {
             return;
@@ -2517,11 +2519,12 @@ var RadioButton = function (_a) {
             disabled: disabled,
             checked: checked,
             onChange: onClick,
-            onkeydown: function (event) {
-                if (event.key === 'Enter' && onChange) {
+            onKeyDown: function (event) {
+                if (event.key === 'Enter' && onChange && !disabled) {
                     onChange(value || '', event);
                 }
             },
+            ref: ref,
             autoFocus: autoFocus,
             onFocus: onFocusCallback ? onFocusCallback : undefined,
             onBlur: onBlurCallback ? onBlurCallback : undefined,
@@ -2833,7 +2836,7 @@ var styles$f = {"body":"InlineButton-module_aw3KLt","container":"InlineButton-mo
 var s$f = classNames.bind(styles$f);
 var InlineButton = memo(function (_a) {
     var _b, _c;
-    var className = _a.className, id = _a.id, loading = _a.loading, ariaLabel = _a.ariaLabel, text = _a.text, style = _a.style, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, _e = _a.type, type = _e === void 0 ? HierarchyTypes.PRIMARY : _e, textClassName = _a.textClassName, children = _a.children, icon = _a.icon, withIconRight = _a.withIconRight, iconSize = _a.iconSize, autoFocus = _a.autoFocus, iconClassName = _a.iconClassName, tabIndex = _a.tabIndex, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, onClickCallback = _a.onClickCallback, withEllipsis = _a.withEllipsis, disabled = _a.disabled, toolTip = _a.toolTip;
+    var className = _a.className, id = _a.id, loading = _a.loading, ariaLabel = _a.ariaLabel, text = _a.text, ref = _a.ref, style = _a.style, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, _e = _a.type, type = _e === void 0 ? HierarchyTypes.PRIMARY : _e, textClassName = _a.textClassName, children = _a.children, icon = _a.icon, withIconRight = _a.withIconRight, iconSize = _a.iconSize, autoFocus = _a.autoFocus, iconClassName = _a.iconClassName, tabIndex = _a.tabIndex, rotateIcon = _a.rotateIcon, rotateIconByDegree = _a.rotateIconByDegree, onClickCallback = _a.onClickCallback, withEllipsis = _a.withEllipsis, disabled = _a.disabled, toolTip = _a.toolTip;
     var mergedClassNames = s$f('container', (_b = {},
         _b["container_".concat(type)] = !!type,
         _b["container_sizeSm_".concat(size)] = !!size,
@@ -2862,6 +2865,7 @@ var InlineButton = memo(function (_a) {
             id: id,
             tabIndex: tabIndex,
             autoFocus: autoFocus,
+            ref: ref,
             disabled: loading || disabled,
             onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
@@ -3031,7 +3035,7 @@ var styles$a = {"body":"IconButton-module_DV09bK","container":"IconButton-module
 var s$a = classNames.bind(styles$a);
 var IconButton = memo(function (_a) {
     var _b, _c;
-    var className = _a.className, disabled = _a.disabled, style = _a.style, icon = _a.icon, id = _a.id, text = _a.text, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, _e = _a.type, type = _e === void 0 ? HierarchyTypes.SECONDARY : _e, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, tabIndex = _a.tabIndex, autoFocus = _a.autoFocus, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
+    var className = _a.className, disabled = _a.disabled, style = _a.style, icon = _a.icon, id = _a.id, text = _a.text, _d = _a.size, size = _d === void 0 ? SizeTypes.MEDIUM : _d, _e = _a.type, type = _e === void 0 ? HierarchyTypes.SECONDARY : _e, href = _a.href, iconColor = _a.iconColor, iconSize = _a.iconSize, iconClassName = _a.iconClassName, onClickCallback = _a.onClickCallback, rotateIcon = _a.rotateIcon, tabIndex = _a.tabIndex, autoFocus = _a.autoFocus, ref = _a.ref, rotateIconByDegree = _a.rotateIconByDegree, toolTip = _a.toolTip, ariaLabel = _a.ariaLabel;
     var mergedClassNames = s$a('container', (_b = {},
         _b["container_".concat(size)] = size,
         _b["container_".concat(type)] = type,
@@ -3062,6 +3066,7 @@ var IconButton = memo(function (_a) {
         _c.href = href,
         _c.tabIndex = tabIndex,
         _c.autoFocus = autoFocus,
+        _c.ref = ref,
         _c.target = href ? '_blank' : undefined,
         _c.rel = href ? 'noopener noreferrer' : undefined,
         _c);
@@ -3082,7 +3087,7 @@ var styles$9 = {"body":"Input-module_cNvink","container":"Input-module_itXJpS","
 var s$9 = classNames.bind(styles$9);
 var Input = function (_a) {
     var _b, _c, _d;
-    var _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.autoComplete, autoComplete = _f === void 0 ? 'off' : _f, _g = _a.size, size = _g === void 0 ? SizeTypes.MEDIUM : _g, _h = _a.type, type = _h === void 0 ? 'text' : _h, autoFocus = _a.autoFocus, _j = _a.withLabel, withLabel = _j === void 0 ? true : _j, characterLimit = _a.characterLimit, id = _a.id, ariaLabel = _a.ariaLabel, name = _a.name, inputRef = _a.inputRef, className = _a.className, disabled = _a.disabled, readOnly = _a.readOnly, error = _a.error, iconClassName = _a.iconClassName, inputClassName = _a.inputClassName, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, marginBottom = _a.marginBottom, onBlur = _a.onBlur, onChange = _a.onChange, onEnter = _a.onEnter, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, helperText = _a.helperText, required = _a.required, value = _a.value;
+    var _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.autoComplete, autoComplete = _f === void 0 ? 'off' : _f, _g = _a.size, size = _g === void 0 ? SizeTypes.MEDIUM : _g, _h = _a.type, type = _h === void 0 ? 'text' : _h, autoFocus = _a.autoFocus, _j = _a.withLabel, withLabel = _j === void 0 ? true : _j, characterLimit = _a.characterLimit, id = _a.id, ariaLabel = _a.ariaLabel, name = _a.name, ref = _a.ref, className = _a.className, disabled = _a.disabled, readOnly = _a.readOnly, error = _a.error, iconClassName = _a.iconClassName, inputClassName = _a.inputClassName, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, marginBottom = _a.marginBottom, onBlur = _a.onBlur, onChange = _a.onChange, onEnter = _a.onEnter, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, helperText = _a.helperText, required = _a.required, value = _a.value;
     var _k = useState(false), isFocused = _k[0], setFocus = _k[1];
     var htmlId = useMemo(function () { return id || shortUid(); }, []);
     var callbackRef = useCallback(function (inputElement) {
@@ -3129,7 +3134,6 @@ var Input = function (_a) {
         htmlFor: htmlId
     };
     var inputAttributes = (_b = {
-            ref: inputRef || callbackRef,
             type: type,
             id: htmlId,
             autoComplete: autoComplete,
@@ -3160,7 +3164,7 @@ var Input = function (_a) {
                             _d.input_disabled = disabled,
                             _d.input_readOnly = readOnly,
                             _d[inputClassName] = inputClassName,
-                            _d)) }, pickAttributes(inputAttributes))), iconRight && (jsx("div", { className: s$9('rightIconElement', {
+                            _d)), ref: ref || callbackRef }, pickAttributes(inputAttributes))), iconRight && (jsx("div", { className: s$9('rightIconElement', {
                             pointerEventsNone: type === 'time'
                         }), children: getIconElement(iconRight) }))] }), helperText && jsx(Paragraph, { className: s$9('helperText', { helperText_disabled: disabled }), children: helperText }), error && (jsx(Paragraph, { fontWeight: '600', color: ColorTypes.RED, fontSize: 's', children: error }))] })));
 };
@@ -3170,7 +3174,7 @@ var styles$8 = {"body":"TextAreaInput-module_hdGRr2","container":"TextAreaInput-
 var s$8 = classNames.bind(styles$8);
 var TextAreaInput = function (_a) {
     var _b, _c, _d;
-    var onChange = _a.onChange, rows = _a.rows, placeholder = _a.placeholder, value = _a.value, name = _a.name, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, inputClassName = _a.inputClassName, className = _a.className, disabled = _a.disabled, style = _a.style, label = _a.label, _e = _a.withLabel, withLabel = _e === void 0 ? true : _e, id = _a.id, marginBottom = _a.marginBottom, helperText = _a.helperText, inputRef = _a.inputRef, onEnter = _a.onEnter, onKeyDown = _a.onKeyDown, error = _a.error, readonly = _a.readonly;
+    var onChange = _a.onChange, rows = _a.rows, placeholder = _a.placeholder, value = _a.value, name = _a.name, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, inputClassName = _a.inputClassName, className = _a.className, disabled = _a.disabled, style = _a.style, label = _a.label, _e = _a.withLabel, withLabel = _e === void 0 ? true : _e, id = _a.id, marginBottom = _a.marginBottom, helperText = _a.helperText, ref = _a.ref, onEnter = _a.onEnter, onKeyDown = _a.onKeyDown, error = _a.error, readonly = _a.readonly;
     var htmlId = useMemo(function () { return id || shortUid(); }, []);
     var callbackRef = useCallback(function (inputElement) {
         if (inputElement && autoFocus) {
@@ -3205,7 +3209,7 @@ var TextAreaInput = function (_a) {
         _b['aria-label'] = ariaLabel || placeholder,
         _b.style = style,
         _b);
-    return (jsxs("label", __assign({ className: s$8('container', (_c = { container_marginBottom: marginBottom }, _c[className] = className, _c)) }, pickAttributes(containerAttributes), { children: [label ? jsx("span", { className: s$8('label', { label_disabled: disabled, label_hidden: !withLabel }), children: label }) : null, jsx("textarea", __assign({ ref: inputRef || callbackRef, className: s$8('textarea', (_d = {}, _d[inputClassName] = inputClassName, _d.textarea_disabled = disabled, _d.textarea_hasError = error, _d)), rows: rows || 9, onChange: onChange, onKeyDown: onInputKeyDown, value: value }, pickAttributes(inputAttributes))), helperText && jsx("p", { className: s$8('helperText'), children: helperText }), error && (jsx(Paragraph, { fontWeight: '600', color: ColorTypes.RED, fontSize: 's', children: error }))] })));
+    return (jsxs("label", __assign({ className: s$8('container', (_c = { container_marginBottom: marginBottom }, _c[className] = className, _c)) }, pickAttributes(containerAttributes), { children: [label ? jsx("span", { className: s$8('label', { label_disabled: disabled, label_hidden: !withLabel }), children: label }) : null, jsx("textarea", __assign({ className: s$8('textarea', (_d = {}, _d[inputClassName] = inputClassName, _d.textarea_disabled = disabled, _d.textarea_hasError = error, _d)), rows: rows || 9, onChange: onChange, onKeyDown: onInputKeyDown, value: value, ref: ref || callbackRef }, pickAttributes(inputAttributes))), helperText && jsx("p", { className: s$8('helperText'), children: helperText }), error && (jsx(Paragraph, { fontWeight: '600', color: ColorTypes.RED, fontSize: 's', children: error }))] })));
 };
 
 var styles$7 = {"body":"ListItem-module_n7Ak1-","container":"ListItem-module_lPz7mU","container_extraSmall":"ListItem-module_6f5xCU","ar4_1":"ListItem-module_1HylOl","ar3_1":"ListItem-module_7aamph","ar21_9":"ListItem-module_OSMSIU","ar16_9":"ListItem-module_3Ixb-h","ar21_13":"ListItem-module_Klz0-9","ar4_3":"ListItem-module_Gx7Ru9","ar1_1":"ListItem-module_mVr45a","container_small":"ListItem-module_m9JeVI","container_medium":"ListItem-module_z3JW0m","container_large":"ListItem-module_i8OgwF","container_withHoverEffect":"ListItem-module_SUXG6M","heading":"ListItem-module_rMkhge","container_withBorderRadius":"ListItem-module_6ksaN9","imageContainer":"ListItem-module_yzwFhY","imageContainer_withCallback":"ListItem-module_dCCoLc","imageIcon":"ListItem-module_8-Y3Xe","innerContainer":"ListItem-module_ik5eLO","contentContainer":"ListItem-module_1qcnga","contentContainer_withEllipsis":"ListItem-module_Ni-375","contentContainer_withCallback":"ListItem-module_fwSh-g","buttonsContainer":"ListItem-module_eZnT-8","marginBottom_025":"ListItem-module_-xeyZ0","marginBottom_05":"ListItem-module_9MPy7z","marginBottom_15":"ListItem-module_dcSDCx","marginBottom_25":"ListItem-module_BNPjps","marginBottom_auto":"ListItem-module_hf5I4R","marginTop_025":"ListItem-module_A-XeQ7","marginTop_05":"ListItem-module_Cos-Os","marginTop_15":"ListItem-module_3Iti0l","marginTop_25":"ListItem-module_1DjAnl","marginTop_auto":"ListItem-module_J--EdS","marginLeft_025":"ListItem-module_X3Zz4H","marginLeft_05":"ListItem-module_OB6o2z","marginLeft_15":"ListItem-module_n-15Am","marginLeft_25":"ListItem-module_pFBba9","marginLeft_auto":"ListItem-module_c79kRY","marginRight_025":"ListItem-module_O58DIq","marginRight_05":"ListItem-module_CtMZ9M","marginRight_15":"ListItem-module_IfMzji","marginRight_25":"ListItem-module_xZzFRV","marginRight_auto":"ListItem-module_ZGafEz","marginX_025":"ListItem-module_mKjxiH","marginX_05":"ListItem-module_KvLIGX","marginX_15":"ListItem-module_AfZ6Ft","marginX_25":"ListItem-module_roBHo2","marginX_auto":"ListItem-module_4AQtuP","marginY_025":"ListItem-module_zX6thg","marginY_05":"ListItem-module_o9Gp15","marginY_15":"ListItem-module_YWTJrL","marginY_25":"ListItem-module_uncJzy","marginY_auto":"ListItem-module_jr5ciA","margin_0":"ListItem-module_OuGYlS","marginX_0":"ListItem-module_Wg4DDG","marginY_0":"ListItem-module_E70pFP","marginBottom_0":"ListItem-module_ur7ddv","marginTop_0":"ListItem-module_G19aif","marginLeft_0":"ListItem-module_GoiVRj","marginRight_0":"ListItem-module_8OvtnZ","margin_1":"ListItem-module_waLeWF","marginX_1":"ListItem-module_t3vCMK","marginY_1":"ListItem-module_NN3O0m","marginBottom_1":"ListItem-module_cDHyMo","marginTop_1":"ListItem-module_4Y-bTn","marginLeft_1":"ListItem-module_pGoNLi","marginRight_1":"ListItem-module_vQrpXb","margin_2":"ListItem-module_daYPnm","marginX_2":"ListItem-module_Zu8m91","marginY_2":"ListItem-module_t-K9RY","marginBottom_2":"ListItem-module_M5mubI","marginTop_2":"ListItem-module_y3QsdF","marginLeft_2":"ListItem-module_kYkioh","marginRight_2":"ListItem-module_i5y8yP","margin_3":"ListItem-module_zXy5Wn","marginX_3":"ListItem-module_2WWlF6","marginY_3":"ListItem-module_cnQHR4","marginBottom_3":"ListItem-module_UAAm5y","marginTop_3":"ListItem-module_Qu1kMr","marginLeft_3":"ListItem-module_XtKjTZ","marginRight_3":"ListItem-module_Rfeleg","margin_4":"ListItem-module_fyCmns","marginX_4":"ListItem-module_T6UnRg","marginY_4":"ListItem-module_F-vhVy","marginBottom_4":"ListItem-module_pzxGtW","marginTop_4":"ListItem-module_6rvmUY","marginLeft_4":"ListItem-module_ULlQxT","marginRight_4":"ListItem-module_Sxm5Jy","margin_5":"ListItem-module_LRS1ql","marginX_5":"ListItem-module_PDGoRk","marginY_5":"ListItem-module_lI9QSF","marginBottom_5":"ListItem-module_F2Ruhl","marginTop_5":"ListItem-module_s4ONUU","marginLeft_5":"ListItem-module_agFI8y","marginRight_5":"ListItem-module_qPHWd3","margin_6":"ListItem-module_fbqjUw","marginX_6":"ListItem-module_ogpZA-","marginY_6":"ListItem-module_28skQP","marginBottom_6":"ListItem-module_ctzkHz","marginTop_6":"ListItem-module_BQTCco","marginLeft_6":"ListItem-module_RRTMAM","marginRight_6":"ListItem-module_Zz8pR9","margin_7":"ListItem-module_R0y9zx","marginX_7":"ListItem-module_gQETSi","marginY_7":"ListItem-module_KiGTP-","marginBottom_7":"ListItem-module_vRQE9U","marginTop_7":"ListItem-module_A3Ng8h","marginLeft_7":"ListItem-module_4ulnSS","marginRight_7":"ListItem-module_e2qZaE","margin_8":"ListItem-module_3ifJ3x","marginX_8":"ListItem-module_Lc-eiF","marginY_8":"ListItem-module_zJhR5E","marginBottom_8":"ListItem-module_kcZiJf","marginTop_8":"ListItem-module_iTit2N","marginLeft_8":"ListItem-module_tExXUs","marginRight_8":"ListItem-module_VpGMAY","padding_025":"ListItem-module_YJFg8w","padding_05":"ListItem-module_PhA0cx","padding_15":"ListItem-module_KMItuV","padding_25":"ListItem-module_ITUwFY","paddingBottom_025":"ListItem-module_MLnAUj","paddingBottom_05":"ListItem-module_3y7whC","paddingBottom_15":"ListItem-module_WCfpBG","paddingBottom_25":"ListItem-module_mN7UdB","paddingTop_025":"ListItem-module_pVc2iX","paddingTop_05":"ListItem-module_hpowGP","paddingTop_15":"ListItem-module_ubIsOD","paddingTop_25":"ListItem-module_rB52c2","paddingLeft_025":"ListItem-module_fCIkxf","paddingLeft_05":"ListItem-module_bQa-3D","paddingLeft_15":"ListItem-module_CP-1yG","paddingLeft_25":"ListItem-module_BqfycI","paddingRight_025":"ListItem-module_da1Aqh","paddingRight_05":"ListItem-module_95A9LU","paddingRight_15":"ListItem-module_BxtTyt","paddingRight_25":"ListItem-module_iguxXn","paddingX_025":"ListItem-module_-xvw2N","paddingX_05":"ListItem-module_QFNqP9","paddingX_15":"ListItem-module_tPrZvC","paddingX_25":"ListItem-module_EnXVao","paddingY_025":"ListItem-module_6botae","paddingY_05":"ListItem-module_8wrBa1","paddingY_15":"ListItem-module_zSvBev","paddingY_25":"ListItem-module_i6k7-1","padding_0":"ListItem-module_2JAay-","paddingX_0":"ListItem-module_-119Mv","paddingY_0":"ListItem-module_NJjmFH","paddingBottom_0":"ListItem-module_qDRAFb","paddingTop_0":"ListItem-module_B-yUXU","paddingLeft_0":"ListItem-module_QfxARe","paddingRight_0":"ListItem-module_aW6ytI","padding_1":"ListItem-module_7UMvGz","paddingX_1":"ListItem-module_Xs29qG","paddingY_1":"ListItem-module_Cj35LQ","paddingBottom_1":"ListItem-module_whe9Mk","paddingTop_1":"ListItem-module_nMhRaN","paddingLeft_1":"ListItem-module_bCrRYy","paddingRight_1":"ListItem-module_RA5OlH","padding_2":"ListItem-module_8fVZ5w","paddingX_2":"ListItem-module_mxvwzM","paddingY_2":"ListItem-module_1aHKRb","paddingBottom_2":"ListItem-module_0VHAtr","paddingTop_2":"ListItem-module_wdc2HD","paddingLeft_2":"ListItem-module_D3Kqt-","paddingRight_2":"ListItem-module_GgmgM6","padding_3":"ListItem-module_IV4zzD","paddingX_3":"ListItem-module_r7Tbvb","paddingY_3":"ListItem-module_bcZf6C","paddingBottom_3":"ListItem-module_p-3eci","paddingTop_3":"ListItem-module_Lsczys","paddingLeft_3":"ListItem-module_DTv4wS","paddingRight_3":"ListItem-module_CVcnl8","padding_4":"ListItem-module_J84C30","paddingX_4":"ListItem-module_5cxj8H","paddingY_4":"ListItem-module_a9WB19","paddingBottom_4":"ListItem-module_lj64pz","paddingTop_4":"ListItem-module_lJxEA0","paddingLeft_4":"ListItem-module_24t3pg","paddingRight_4":"ListItem-module_PuFeCS","padding_5":"ListItem-module_IP7Wx8","paddingX_5":"ListItem-module_Uw-S2x","paddingY_5":"ListItem-module_G7bspa","paddingBottom_5":"ListItem-module_2hFg3W","paddingTop_5":"ListItem-module_JBOWGT","paddingLeft_5":"ListItem-module_A2OzZV","paddingRight_5":"ListItem-module_mdKKBw","padding_6":"ListItem-module_jEUNSi","paddingX_6":"ListItem-module_Q4iPGX","paddingY_6":"ListItem-module_XTUH-p","paddingBottom_6":"ListItem-module_dwB3iF","paddingTop_6":"ListItem-module_DYQlxV","paddingLeft_6":"ListItem-module_5yMv0h","paddingRight_6":"ListItem-module_H9-tzJ","padding_7":"ListItem-module_4zmXhD","paddingX_7":"ListItem-module_o-LskD","paddingY_7":"ListItem-module_-drK0P","paddingBottom_7":"ListItem-module_n1-fFT","paddingTop_7":"ListItem-module_dYBPeO","paddingLeft_7":"ListItem-module_wMUJ2Q","paddingRight_7":"ListItem-module_bNyS12","padding_8":"ListItem-module_vF8-gg","paddingX_8":"ListItem-module_-q8Wua","paddingY_8":"ListItem-module_6ZrNjy","paddingBottom_8":"ListItem-module_BbqnNp","paddingTop_8":"ListItem-module_XiE-Vl","paddingLeft_8":"ListItem-module_VEgivI","paddingRight_8":"ListItem-module_1NSUIh","backgroundColor_purple1":"ListItem-module_GDJSJG","backgroundColor_purple2":"ListItem-module_uyGK9f","backgroundColor_purple3":"ListItem-module_vT-clt","backgroundColor_purple4":"ListItem-module_LMDR6R","backgroundColor_purple5":"ListItem-module_UAQExO","backgroundColor_purple6":"ListItem-module_Tn6N-j","backgroundColor_purple7":"ListItem-module_IA5BgJ","backgroundColor_white":"ListItem-module_abXTw9","backgroundColor_grey1":"ListItem-module_GJIEyx","backgroundColor_grey2":"ListItem-module_qeCW6h","backgroundColor_grey3":"ListItem-module_E0YQ58","backgroundColor_grey4":"ListItem-module_u3nFvg","backgroundColor_grey5":"ListItem-module_NVb1fW","backgroundColor_grey6":"ListItem-module_eACK7D","backgroundColor_black":"ListItem-module_Me9MT3","backgroundColor_mint1":"ListItem-module_kCq0m2","backgroundColor_mint2":"ListItem-module_Y0zPHc","backgroundColor_mint3":"ListItem-module_aHOeit","backgroundColor_blue1":"ListItem-module_W2A8tg","backgroundColor_blue2":"ListItem-module_h8b23V","backgroundColor_blue3":"ListItem-module_GGWhr2","backgroundColor_blue4":"ListItem-module_Z-Ppq6","backgroundColor_pink":"ListItem-module_gJwDrf","backgroundColor_green":"ListItem-module_b1KgOd","backgroundColor_red":"ListItem-module_vFt6K0","backgroundColor_yellow":"ListItem-module_-fmyci","backgroundColor_orange":"ListItem-module_2jzp7A","backgroundColor_mainPurple":"ListItem-module_rfRo-5","backgroundColor_mainGrey":"ListItem-module_OLIO8r","backgroundColor_mainDark":"ListItem-module_h-yJfU","backgroundColor_current":"ListItem-module_npyJ02","backgroundColor_inherit":"ListItem-module_eAID1D","border_1":"ListItem-module_RArgTk","borderBottom_1":"ListItem-module_P7VTIX","borderTop_1":"ListItem-module_SLd5Jk","borderLeft_1":"ListItem-module_LK8R8X","borderRight_1":"ListItem-module_TncESJ","border_2":"ListItem-module_SEOiOp","borderBottom_2":"ListItem-module_6SMrhc","borderTop_2":"ListItem-module_yXIJQC","borderLeft_2":"ListItem-module_OO9-ma","borderRight_2":"ListItem-module_2O1rCe","border_3":"ListItem-module_6isYOP","borderBottom_3":"ListItem-module_p7BPwh","borderTop_3":"ListItem-module_PeHHMG","borderLeft_3":"ListItem-module_NEQr4B","borderRight_3":"ListItem-module_OKjZvB","borderColor_purple1":"ListItem-module_DR8r9u","borderColor_purple2":"ListItem-module_mBKoFR","borderColor_purple3":"ListItem-module_Jq8Kys","borderColor_purple4":"ListItem-module_ZUk42z","borderColor_purple5":"ListItem-module_ZiUEwy","borderColor_purple6":"ListItem-module_BAUl8t","borderColor_purple7":"ListItem-module_BVwnY-","borderColor_white":"ListItem-module_Bi1r3w","borderColor_grey1":"ListItem-module_dNDfjh","borderColor_grey2":"ListItem-module_Rfufrt","borderColor_grey3":"ListItem-module_m06ets","borderColor_grey4":"ListItem-module_Qp8a3i","borderColor_grey5":"ListItem-module_THnXZp","borderColor_grey6":"ListItem-module_oj0OVt","borderColor_black":"ListItem-module_5A2pvc","borderColor_mint1":"ListItem-module_vfpaYA","borderColor_mint2":"ListItem-module_O1Cn3l","borderColor_mint3":"ListItem-module_0PSXtr","borderColor_blue1":"ListItem-module_B9ZBUl","borderColor_blue2":"ListItem-module_NHEoMd","borderColor_blue3":"ListItem-module_b-p0jy","borderColor_blue4":"ListItem-module_YID0Wa","borderColor_pink":"ListItem-module_91lgQu","borderColor_green":"ListItem-module_PAqjBk","borderColor_red":"ListItem-module_LHqT1w","borderColor_yellow":"ListItem-module_0C-bSJ","borderColor_orange":"ListItem-module_R-0Faf","borderColor_mainPurple":"ListItem-module_wDFrXx","borderColor_mainGrey":"ListItem-module_AlO3cS","borderColor_mainDark":"ListItem-module_dD3oXR","borderColor_current":"ListItem-module_Lv1uQw","borderColor_inherit":"ListItem-module_D7TJgu"};
@@ -3453,7 +3457,7 @@ var styles$2 = {"body":"SwitchButton-module_BSiKOl","container":"SwitchButton-mo
 var s$2 = classNames.bind(styles$2);
 var SwitchButton = function (_a) {
     var _b, _c;
-    var className = _a.className, onClickCallback = _a.onClickCallback, checked = _a.checked, disabled = _a.disabled, label = _a.label, id = _a.id, name = _a.name, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, withInlineLabel = _a.withInlineLabel, withLabel = _a.withLabel, alignCenter = _a.alignCenter, marginBottom = _a.marginBottom;
+    var className = _a.className, onClickCallback = _a.onClickCallback, checked = _a.checked, disabled = _a.disabled, label = _a.label, id = _a.id, name = _a.name, ref = _a.ref, autoFocus = _a.autoFocus, ariaLabel = _a.ariaLabel, withInlineLabel = _a.withInlineLabel, withLabel = _a.withLabel, alignCenter = _a.alignCenter, marginBottom = _a.marginBottom;
     var htmlId = useMemo(function () { return id || shortUid(); }, []);
     var containerAttributes = (_b = {
             htmlFor: htmlId
@@ -3463,6 +3467,7 @@ var SwitchButton = function (_a) {
     var inputAttributes = {
         id: htmlId,
         name: name,
+        ref: ref,
         autoFocus: autoFocus,
         disabled: disabled,
         checked: checked
@@ -3499,10 +3504,10 @@ var styles$1 = {"body":"SelectInput-module_w2mdUW","container":"SelectInput-modu
 var s$1 = classNames.bind(styles$1);
 var SelectInput = function (_a) {
     var _b, _c, _d;
-    var label = _a.label, _e = _a.withLabel, withLabel = _e === void 0 ? true : _e, inputRef = _a.inputRef, _f = _a.nativeHtmlComponent, nativeHtmlComponent = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? SizeTypes.MEDIUM : _g, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, ariaLabel = _a.ariaLabel, id = _a.id, onChange = _a.onChange, defaultOption = _a.defaultOption, value = _a.value, error = _a.error, autoFocus = _a.autoFocus, helperText = _a.helperText, options = _a.options, disabled = _a.disabled, loading = _a.loading, className = _a.className, inputClassName = _a.inputClassName, marginBottom = _a.marginBottom;
+    var label = _a.label, _e = _a.withLabel, withLabel = _e === void 0 ? true : _e, ref = _a.ref, _f = _a.nativeHtmlComponent, nativeHtmlComponent = _f === void 0 ? true : _f, _g = _a.size, size = _g === void 0 ? SizeTypes.MEDIUM : _g, sizeMd = _a.sizeMd, sizeLg = _a.sizeLg, sizeXl = _a.sizeXl, ariaLabel = _a.ariaLabel, id = _a.id, onChange = _a.onChange, defaultOption = _a.defaultOption, value = _a.value, error = _a.error, autoFocus = _a.autoFocus, helperText = _a.helperText, options = _a.options, disabled = _a.disabled, loading = _a.loading, className = _a.className, inputClassName = _a.inputClassName, marginBottom = _a.marginBottom;
     var htmlId = useMemo(function () { return (id ? "".concat(id) : shortUid()); }, []);
     var inputAttributes = (_b = {
-            ref: inputRef,
+            ref: ref,
             id: htmlId,
             value: value,
             autoFocus: autoFocus,