widenarrow-ui 1.1.59 → 1.1.61

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

@@ -7,7 +7,7 @@ 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>;

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

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

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

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

package/lib/index.d.ts

@@ -441,7 +441,7 @@ 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>;
@@ -736,7 +736,7 @@ interface InputProps {
     withLabel?: boolean;
     marginBottom?: boolean;
     placeholder?: string;
-    ref?: RefObject<HTMLInputElement>;
+    inputRef?: RefObject<HTMLInputElement>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     helperText?: string;
     characterLimit?: number;
@@ -823,7 +823,7 @@ interface TextAreaInputProps {
     disabled?: boolean;
     marginBottom?: boolean;
     autoFocus?: boolean;
-    ref?: RefObject<HTMLTextAreaElement>;
+    inputRef?: RefObject<HTMLTextAreaElement>;
     style?: CSSProperties;
     readonly?: boolean;
 }

package/lib/index.esm.js

@@ -2358,6 +2358,7 @@ var styles$m = {"body":"Checkbox-module_et5-hi","container":"Checkbox-module_pUY
 
 var s$m = classNames.bind(styles$m);
 var Checkbox = function (_a) {
+    // TODO. There is an issue right now when switching between real and fake checkbox. The state is not updated correctly.
     var _b, _c;
     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(); }, []);
@@ -2402,7 +2403,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);
                                     }
@@ -3087,7 +3088,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, 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 _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 _k = useState(false), isFocused = _k[0], setFocus = _k[1];
     var htmlId = useMemo(function () { return id || shortUid(); }, []);
     var callbackRef = useCallback(function (inputElement) {
@@ -3134,7 +3135,7 @@ var Input = function (_a) {
         htmlFor: htmlId
     };
     var inputAttributes = (_b = {
-            ref: ref || callbackRef,
+            ref: inputRef || callbackRef,
             type: type,
             id: htmlId,
             autoComplete: autoComplete,
@@ -3175,7 +3176,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, ref = _a.ref, 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, inputRef = _a.inputRef, 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) {
@@ -3206,7 +3207,7 @@ var TextAreaInput = function (_a) {
             readonly: readonly,
             id: htmlId,
             name: name,
-            ref: ref || callbackRef
+            ref: inputRef || callbackRef
         },
         _b['aria-label'] = ariaLabel || placeholder,
         _b.style = style,