widenarrow-ui 1.1.57 → 1.1.58

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

@@ -13,6 +13,7 @@ export interface CheckboxProps {
     helperText?: string;
     checked?: boolean;
     blocked?: boolean;
+    autoFocus?: boolean;
     withEllipsis?: boolean;
     withLabel?: boolean;
     indeterminate?: boolean;

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

@@ -16,6 +16,7 @@ export interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    autoFocus?: boolean;
     tabIndex?: number;
     toolTip?: string;
     ariaLabel?: string;

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

@@ -24,5 +24,6 @@ export interface InlineButtonProps {
     disabled?: boolean | undefined;
     style?: CSSProperties;
     tabIndex?: number;
+    autoFocus?: boolean;
     toolTip?: string;
 }

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

@@ -10,6 +10,7 @@ export interface RadioButtonProps {
     disabled?: boolean;
     helperText?: string;
     withEllipsis?: boolean;
+    autoFocus?: boolean;
     checked: boolean;
     toolTip?: string;
     onChange: (val: string | number, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;

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

@@ -21,6 +21,7 @@ export interface SelectInputProps {
     helperText?: string;
     text?: string;
     marginBottom?: boolean;
+    autoFocus?: boolean;
     loading?: boolean;
     ariaLabel?: string;
     label?: string;

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

@@ -7,6 +7,7 @@ export interface SwitchButtonProps {
     withInlineLabel?: boolean;
     ariaLabel?: string;
     disabled?: boolean;
+    autoFocus?: boolean;
     alignCenter?: boolean;
     className?: string;
     marginBottom?: boolean;

package/lib/index.d.ts

@@ -446,6 +446,7 @@ interface CheckboxProps {
     helperText?: string;
     checked?: boolean;
     blocked?: boolean;
+    autoFocus?: boolean;
     withEllipsis?: boolean;
     withLabel?: boolean;
     indeterminate?: boolean;
@@ -489,6 +490,7 @@ interface RadioButtonProps {
     disabled?: boolean;
     helperText?: string;
     withEllipsis?: boolean;
+    autoFocus?: boolean;
     checked: boolean;
     toolTip?: string;
     onChange: (val: string | number, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
@@ -696,6 +698,7 @@ interface IconButtonProps extends IconStyleInterface {
     iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
+    autoFocus?: boolean;
     tabIndex?: number;
     toolTip?: string;
     ariaLabel?: string;
@@ -789,6 +792,7 @@ interface InlineButtonProps {
     disabled?: boolean | undefined;
     style?: CSSProperties;
     tabIndex?: number;
+    autoFocus?: boolean;
     toolTip?: string;
 }
 
@@ -974,6 +978,7 @@ interface SwitchButtonProps {
     withInlineLabel?: boolean;
     ariaLabel?: string;
     disabled?: boolean;
+    autoFocus?: boolean;
     alignCenter?: boolean;
     className?: string;
     marginBottom?: boolean;
@@ -1003,6 +1008,7 @@ interface SelectInputProps {
     helperText?: string;
     text?: string;
     marginBottom?: boolean;
+    autoFocus?: boolean;
     loading?: boolean;
     ariaLabel?: string;
     label?: string;

package/lib/index.esm.js

@@ -2358,7 +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) {
     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, isFake = _a.isFake, ariaLabel = _a.ariaLabel;
+    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 htmlId = useMemo(function () { return id || shortUid(); }, []);
     var onClickRealInput = function (event) {
         if (!disabled && onChange) {
@@ -2379,6 +2379,7 @@ var Checkbox = function (_a) {
             disabled: disabled,
             checked: checked,
             name: name,
+            autoFocus: autoFocus,
             onChange: onClickRealInput,
             onFocus: onFocusCallback ? onFocusCallback : undefined,
             onBlur: onBlurCallback ? onBlurCallback : undefined
@@ -2499,7 +2500,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, 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, withEllipsis = _a.withEllipsis, disabled = _a.disabled, helperText = _a.helperText, toolTip = _a.toolTip;
     var onClick = function (event) {
         if (disabled) {
             return;
@@ -2521,6 +2522,7 @@ var RadioButton = function (_a) {
                     onChange(value || '', event);
                 }
             },
+            autoFocus: autoFocus,
             onFocus: onFocusCallback ? onFocusCallback : undefined,
             onBlur: onBlurCallback ? onBlurCallback : undefined,
             name: name
@@ -2831,7 +2833,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, 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, 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,
@@ -2859,6 +2861,7 @@ var InlineButton = memo(function (_a) {
             className: mergedClassNames,
             id: id,
             tabIndex: tabIndex,
+            autoFocus: autoFocus,
             disabled: loading || disabled,
             onClick: !!onClickCallback && !loading ? onClickCallback : undefined
         },
@@ -3028,7 +3031,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, 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, 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,
@@ -3058,6 +3061,7 @@ var IconButton = memo(function (_a) {
         _c.style = style,
         _c.href = href,
         _c.tabIndex = tabIndex,
+        _c.autoFocus = autoFocus,
         _c.target = href ? '_blank' : undefined,
         _c.rel = href ? 'noopener noreferrer' : undefined,
         _c);
@@ -3078,8 +3082,8 @@ 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, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, _k = _a.withLabel, withLabel = _k === void 0 ? true : _k, 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 _l = useState(false), isFocused = _l[0], setFocus = _l[1];
+    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) {
         if (inputElement && autoFocus) {
@@ -3449,7 +3453,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, 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, 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
@@ -3459,6 +3463,7 @@ var SwitchButton = function (_a) {
     var inputAttributes = {
         id: htmlId,
         name: name,
+        autoFocus: autoFocus,
         disabled: disabled,
         checked: checked
     };
@@ -3494,12 +3499,13 @@ 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, 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, 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 htmlId = useMemo(function () { return (id ? "".concat(id) : shortUid()); }, []);
     var inputAttributes = (_b = {
             ref: inputRef,
             id: htmlId,
             value: value,
+            autoFocus: autoFocus,
             disabled: disabled || loading
         },
         _b['aria-label'] = ariaLabel || label,