@ringcentral/juno 3.0.0-alpha.10 → 3.0.0-alpha.12

package/components/Buttons/Button/Button.js

@@ -23,10 +23,11 @@ var _RcButton = (0, react_1.forwardRef)(function (props, ref) {
             },
         ]);
     }
-    var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, focusVariant = props.focusVariant, disableFocusRippleProp = props.disableFocusRipple, rest = tslib_1.__rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation", "focusVariant", "disableFocusRipple"]);
+    var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, focusVariant = props.focusVariant, _c = props.autoFocus, autoFocus = _c === void 0 ? false : _c, disableFocusRippleProp = props.disableFocusRipple, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation", "focusVariant", "autoFocus", "disableFocusRipple", "onBlur"]);
     var theme = (0, foundation_1.useTheme)();
     var innerRef = (0, react_1.useRef)(null);
     var buttonRef = (0, foundation_1.useForkRef)(innerRef, ref);
+    var _d = (0, foundation_1.useSafeAutoFocus)(autoFocus && !(disabled || loading), innerRef), suppressInitialFocusRipple = _d.suppressInitialFocusRipple, handleAutoFocusBlur = _d.handleAutoFocusBlur;
     var isPlain = variant === 'plain';
     var isReplace = loadingMode === 'replace';
     var iconSize = (0, utils_2.getButtonIconSize)(size);
@@ -92,8 +93,14 @@ var _RcButton = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useLayoutEffect)(function () {
         (0, foundation_1.removeClassName)(innerRef, 'MuiButton-iconSizeMedium');
     });
-    var disableFocusRipple = disableFocusRippleProp !== null && disableFocusRippleProp !== void 0 ? disableFocusRippleProp : focusVariant === 'focusRing';
-    return (react_1.default.createElement(Button_1.default, tslib_1.__assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes, disableFocusRipple: disableFocusRipple }, rest), loading && isReplace ? loadingElm : childrenProp));
+    var disableFocusRipple = suppressInitialFocusRipple
+        ? true
+        : disableFocusRippleProp !== null && disableFocusRippleProp !== void 0 ? disableFocusRippleProp : focusVariant === 'focusRing';
+    var handleBlur = (0, foundation_1.useEventCallback)(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (react_1.default.createElement(Button_1.default, tslib_1.__assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes, disableFocusRipple: disableFocusRipple, onBlur: handleBlur }, rest), loading && isReplace ? loadingElm : childrenProp));
 });
 exports.RcButtonDefaultSize = 'large';
 exports.RcButtonDefaultColor = 'primary';

package/components/Buttons/ButtonBase/ButtonBase.d.ts

@@ -1,7 +1,21 @@
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 import MuiButtonBase from '@material-ui/core/ButtonBase';
 type RcButtonBaseProps = ComponentProps<typeof MuiButtonBase>;
-/** @release */
-declare const RcButtonBase: import("styled-components").StyledComponent<import("@material-ui/core/ButtonBase").ExtendButtonBase<import("@material-ui/core/ButtonBase").ButtonBaseTypeMap<{}, "button">>, import("../../../foundation").RcTheme, {}, never>;
+declare const RcButtonBase: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<{
+    action?: React.Ref<import("@material-ui/core/ButtonBase").ButtonBaseActions> | undefined;
+    buttonRef?: React.Ref<unknown> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: React.ReactNode;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    onFocusVisible?: React.FocusEventHandler<any> | undefined;
+    tabIndex?: string | number | undefined;
+    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core/ButtonBase").ExtendButtonBaseTypeMap<import("@material-ui/core/ButtonBase").ButtonBaseTypeMap<{}, "button">>> & Pick<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "ref" | "key" | "suppressHydrationWarning" | "color" | "id" | "lang" | "name" | "type" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget">, "ref"> & React.RefAttributes<any>>, import("../../../foundation").RcTheme, {}, never>;
 export { RcButtonBase };
 export type { RcButtonBaseProps };

package/components/Buttons/ButtonBase/ButtonBase.js

@@ -2,10 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RcButtonBase = void 0;
 var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
 var ButtonBase_1 = tslib_1.__importDefault(require("@material-ui/core/ButtonBase"));
 var foundation_1 = require("../../../foundation");
 /** @release */
-var RcButtonBase = (0, foundation_1.styled)(ButtonBase_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var _RcButtonBase = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, focusRipple = props.focusRipple, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["autoFocus", "disabled", "focusRipple", "onBlur"]);
+    var innerRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, foundation_1.useForkRef)(ref, innerRef);
+    var _c = (0, foundation_1.useSafeAutoFocus)(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _c.suppressInitialFocusRipple, handleAutoFocusBlur = _c.handleAutoFocusBlur;
+    var handleBlur = (0, foundation_1.useEventCallback)(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return react_1.default.createElement(ButtonBase_1.default, tslib_1.__assign(tslib_1.__assign({}, rest), { ref: buttonRef, disabled: disabled, focusRipple: suppressInitialFocusRipple ? false : focusRipple, onBlur: handleBlur }));
+});
+var RcButtonBase = (0, foundation_1.styled)(_RcButtonBase)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 exports.RcButtonBase = RcButtonBase;
 RcButtonBase.displayName = 'RcButtonBase';
 var templateObject_1;

package/components/Buttons/IconButton/IconButton.d.ts

@@ -421,10 +421,7 @@ declare const RcIconButton: import("styled-components").StyledComponent<React.Fo
     disabled?: boolean | undefined;
     disableRipple?: boolean | undefined;
     disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined; /**
-     * `box-shadow` with token
-     * 0 ~ 24 for different elevation shadow
-     */
+    focusRipple?: boolean | undefined;
     focusVisibleClassName?: string | undefined;
     onFocusVisible?: React.FocusEventHandler<any> | undefined;
     tabIndex?: string | number | undefined;

package/components/Buttons/IconButton/IconButton.js

@@ -17,8 +17,11 @@ var _RcIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function (props, r
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, foundation_1.useDeprecatedCheck)(RcIconButton, props, IconButtonProps_1.rcIconButtonWarning);
     }
-    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, focusVariant = props.focusVariant, rest = tslib_1.__rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusVariant"]);
+    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, _d = props.autoFocus, autoFocus = _d === void 0 ? false : _d, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, _e = props.focusRipple, focusRippleProp = _e === void 0 ? true : _e, focusVariant = props.focusVariant, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "autoFocus", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusRipple", "focusVariant", "onBlur"]);
     var theme = (0, foundation_1.useTheme)();
+    var innerButtonRef = (0, react_1.useRef)(null);
+    var handleButtonRef = (0, foundation_1.useForkRef)(innerButtonRef, buttonRef);
+    var _f = (0, foundation_1.useSafeAutoFocus)(autoFocus && !disabled, innerButtonRef), suppressInitialFocusRipple = _f.suppressInitialFocusRipple, handleAutoFocusBlur = _f.handleAutoFocusBlur;
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';
     var isInverse = variant === 'inverse';
@@ -33,13 +36,17 @@ var _RcIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function (props, r
         _a[classes.inverse] = isInverse,
         _a[classes.round] = isRound,
         _a));
+    var handleBlur = (0, foundation_1.useEventCallback)(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
     var iconButton = (function () {
         var _a, _b;
         // `color` already handle in StyledIconButton
         // eslint-disable-next-line @typescript-eslint/no-shadow
         var color = IconProps.color, IconPropsWithoutColor = tslib_1.__rest(IconProps, ["color"]);
         var icon = react_1.default.isValidElement(children) || children === '' ? children : (react_1.default.createElement(Icon_1.RcIcon, tslib_1.__assign({ symbol: symbol, className: classes.icon, loading: loading, size: "inherit", CircularProgressProps: CircularProgressProps }, IconPropsWithoutColor), children));
-        var iconButton = (react_1.default.createElement(ButtonBase_1.RcButtonBase, tslib_1.__assign({ ref: buttonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, TouchRippleProps: (0, foundation_1.combineProps)({
+        var iconButton = (react_1.default.createElement(ButtonBase_1.RcButtonBase, tslib_1.__assign({ ref: handleButtonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, focusRipple: suppressInitialFocusRipple ? false : focusRippleProp, onBlur: handleBlur, TouchRippleProps: (0, foundation_1.combineProps)({
                 classes: utils_1.RcIconButtonTouchRippleClasses,
             }, TouchRippleProps) }, rest), icon));
         if (download && href) {

package/components/Dialer/DialPad/utils/useDialKeyboard.d.ts

@@ -9,7 +9,7 @@ export type UseDialKeyboard<E extends KeyboardEvent | React.KeyboardEvent<any>>
  * @param options onKeyDown, onKeyUp that you also want apply on target
  * @returns  onKeyDown, onKeyUp, control
  */
-export declare const useDialKeyboard: <E extends KeyboardEvent | React.KeyboardEvent<any> = React.KeyboardEvent<any>>({ onKeyDown: onKeyDownArg, onKeyUp: onKeyUpArg, }?: UseDialKeyboard<E>) => {
+export declare const useDialKeyboard: <E extends React.KeyboardEvent<any> | KeyboardEvent = React.KeyboardEvent<any>>({ onKeyDown: onKeyDownArg, onKeyUp: onKeyUpArg, }?: UseDialKeyboard<E>) => {
     onKeyDown: (e: E) => void;
     onKeyUp: (e: E) => void;
     control: React.RefObject<RcDialPadControl>;

package/components/Downshift/utils/useDownshift.d.ts

@@ -292,7 +292,7 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
     getClearButtonProps: (props?: RcIconButtonProps) => {
         variant?: import("../../Buttons/IconButton/IconButton").RcIconButtonVariant | undefined;
         size?: import("../../Buttons/IconButton/IconButton").RcIconButtonSize | undefined;
-        shouldPersistBg?: boolean | undefined; /** wrapper container ref, if you have `tag` or use in `popper`, that will be needed */
+        shouldPersistBg?: boolean | undefined;
         invisible?: boolean | undefined;
         stretchIcon?: boolean | undefined;
         useColorWhenDisabled?: boolean | undefined;
@@ -324,7 +324,7 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
     getToggleButtonProps: (props?: RcIconButtonProps) => {
         variant?: import("../../Buttons/IconButton/IconButton").RcIconButtonVariant | undefined;
         size?: import("../../Buttons/IconButton/IconButton").RcIconButtonSize | undefined;
-        shouldPersistBg?: boolean | undefined; /** wrapper container ref, if you have `tag` or use in `popper`, that will be needed */
+        shouldPersistBg?: boolean | undefined;
         invisible?: boolean | undefined;
         stretchIcon?: boolean | undefined;
         useColorWhenDisabled?: boolean | undefined;

package/components/Forms/TextField/TextField.d.ts

@@ -74,7 +74,7 @@ declare const RcTextField: import("styled-components").StyledComponent<React.For
         elevation?: keyof import("@material-ui/core/styles/shadows").Shadows | undefined;
         activeElevation?: keyof import("@material-ui/core/styles/shadows").Shadows | undefined;
         disabledFakeBorder?: boolean | undefined;
-        IconProps?: import("../../Icon/Icon").RcIconProps | undefined; /** props apply on default clear button */
+        IconProps?: import("../../Icon/Icon").RcIconProps | undefined;
         focusVariant?: "highlight" | "focusRing" | undefined;
     } & import("../../Buttons/IconButton/deprecated/IconButtonProps").RcIconButtonDeprecatedProps & Pick<import("../../Icon/Icon").RcIconProps, "symbol" | "color" | "iconColor" | "iconSize" | "loading" | "CircularProgressProps"> & import("../../../foundation").RcClassesProps<"round" | "icon" | "inverse" | "outline" | "invisible" | "contained" | "persistBg"> & RcBaseProps<{
         action?: React.Ref<import("@material-ui/core").ButtonBaseActions> | undefined;

package/components/Stepper/StepButton/StepButton.js

@@ -10,7 +10,10 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcStepButton = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcStepButton' });
-    var classesProp = props.classes, childrenProp = props.children, icon = props.icon, optional = props.optional, error = props.error, StepLabelProps = props.StepLabelProps, editable = props.editable, rest = tslib_1.__rest(props, ["classes", "children", "icon", "optional", "error", "StepLabelProps", "editable"]);
+    var classesProp = props.classes, childrenProp = props.children, icon = props.icon, optional = props.optional, error = props.error, StepLabelProps = props.StepLabelProps, editable = props.editable, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, focusRipple = props.focusRipple, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["classes", "children", "icon", "optional", "error", "StepLabelProps", "editable", "autoFocus", "disabled", "focusRipple", "onBlur"]);
+    var innerRef = (0, react_1.useRef)(null);
+    var handleRef = (0, foundation_1.useForkRef)(innerRef, ref);
+    var _c = (0, foundation_1.useSafeAutoFocus)(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _c.suppressInitialFocusRipple, handleAutoFocusBlur = _c.handleAutoFocusBlur;
     var classes = (0, react_1.useMemo)(function () { return (0, foundation_1.combineClasses)(utils_1.RcStepButtonClasses, classesProp); }, [classesProp]);
     var children = (0, react_1.useMemo)(function () {
         var childProps = (0, foundation_1.combineProps)({
@@ -21,7 +24,11 @@ var _RcStepButton = (0, react_1.forwardRef)(function (inProps, ref) {
         }, StepLabelProps);
         return (0, foundation_1.isRcElement)(childrenProp, ['RcStepLabel']) ? ((0, react_1.cloneElement)(childrenProp, childProps)) : (react_1.default.createElement(StepLabel_1.RcStepLabel, tslib_1.__assign({}, childProps), childrenProp));
     }, [StepLabelProps, childrenProp, editable, error, icon, optional]);
-    return (react_1.default.createElement(StepButton_1.default, tslib_1.__assign({}, rest, { icon: icon, optional: optional, ref: ref, classes: classes }), children));
+    var handleBlur = (0, foundation_1.useEventCallback)(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (react_1.default.createElement(StepButton_1.default, tslib_1.__assign({}, rest, { disabled: disabled, focusRipple: suppressInitialFocusRipple ? false : focusRipple, icon: icon, onBlur: handleBlur, optional: optional, ref: handleRef, classes: classes }), children));
 });
 var RcStepButton = (0, foundation_1.styled)(_RcStepButton)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.StepButtonStyle);
 exports.RcStepButton = RcStepButton;

package/components/Tabs/Tab/Tab.js

@@ -9,9 +9,16 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var _RcTab = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcTab' });
-    var classesProp = props.classes, children = props.children, direction = props.direction, rest = tslib_1.__rest(props, ["classes", "children", "direction"]);
+    var classesProp = props.classes, children = props.children, direction = props.direction, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disableFocusRipple, disableFocusRippleProp = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, onBlur = props.onBlur, rest = tslib_1.__rest(props, ["classes", "children", "direction", "autoFocus", "disableFocusRipple", "disabled", "onBlur"]);
+    var innerRef = (0, react_1.useRef)(null);
+    var tabRef = (0, foundation_1.useForkRef)(ref, innerRef);
+    var _d = (0, foundation_1.useSafeAutoFocus)(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _d.suppressInitialFocusRipple, handleAutoFocusBlur = _d.handleAutoFocusBlur;
     var classes = (0, react_1.useMemo)(function () { return (0, foundation_1.combineProps)(utils_1.RcTabClasses, classesProp); }, [classesProp]);
-    return react_1.default.createElement(Tab_1.default, tslib_1.__assign({}, rest, { ref: ref, classes: classes }));
+    var handleBlur = (0, foundation_1.useEventCallback)(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (react_1.default.createElement(Tab_1.default, tslib_1.__assign({}, rest, { ref: tabRef, classes: classes, disabled: disabled, disableFocusRipple: suppressInitialFocusRipple ? true : disableFocusRippleProp, onBlur: handleBlur })));
 });
 var RcTab = (0, foundation_1.styled)(_RcTab)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.TabStyle);
 exports.RcTab = RcTab;

package/es6/components/Buttons/Button/Button.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import MuiButton from '@material-ui/core/Button';
-import { combineClasses, isRcElement, removeClassName, styled, useDeprecatedCheck, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
+import { combineClasses, isRcElement, removeClassName, styled, useDeprecatedCheck, useEventCallback, useForkRef, useSafeAutoFocus, useTheme, useThemeProps, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcIconSizes } from '../../Icon/utils';
 import { RcCircularProgress } from '../../Progress';
@@ -20,10 +20,11 @@ var _RcButton = forwardRef(function (props, ref) {
             },
         ]);
     }
-    var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, focusVariant = props.focusVariant, disableFocusRippleProp = props.disableFocusRipple, rest = __rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation", "focusVariant", "disableFocusRipple"]);
+    var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, focusVariant = props.focusVariant, _c = props.autoFocus, autoFocus = _c === void 0 ? false : _c, disableFocusRippleProp = props.disableFocusRipple, onBlur = props.onBlur, rest = __rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation", "focusVariant", "autoFocus", "disableFocusRipple", "onBlur"]);
     var theme = useTheme();
     var innerRef = useRef(null);
     var buttonRef = useForkRef(innerRef, ref);
+    var _d = useSafeAutoFocus(autoFocus && !(disabled || loading), innerRef), suppressInitialFocusRipple = _d.suppressInitialFocusRipple, handleAutoFocusBlur = _d.handleAutoFocusBlur;
     var isPlain = variant === 'plain';
     var isReplace = loadingMode === 'replace';
     var iconSize = getButtonIconSize(size);
@@ -89,8 +90,14 @@ var _RcButton = forwardRef(function (props, ref) {
     useLayoutEffect(function () {
         removeClassName(innerRef, 'MuiButton-iconSizeMedium');
     });
-    var disableFocusRipple = disableFocusRippleProp !== null && disableFocusRippleProp !== void 0 ? disableFocusRippleProp : focusVariant === 'focusRing';
-    return (React.createElement(MuiButton, __assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes, disableFocusRipple: disableFocusRipple }, rest), loading && isReplace ? loadingElm : childrenProp));
+    var disableFocusRipple = suppressInitialFocusRipple
+        ? true
+        : disableFocusRippleProp !== null && disableFocusRippleProp !== void 0 ? disableFocusRippleProp : focusVariant === 'focusRing';
+    var handleBlur = useEventCallback(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (React.createElement(MuiButton, __assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes, disableFocusRipple: disableFocusRipple, onBlur: handleBlur }, rest), loading && isReplace ? loadingElm : childrenProp));
 });
 export var RcButtonDefaultSize = 'large';
 export var RcButtonDefaultColor = 'primary';

package/es6/components/Buttons/ButtonBase/ButtonBase.js

@@ -1,8 +1,20 @@
-import { __makeTemplateObject } from "tslib";
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef, useRef } from 'react';
 import MuiButtonBase from '@material-ui/core/ButtonBase';
-import { styled } from '../../../foundation';
+import { styled, useEventCallback, useForkRef, useSafeAutoFocus, } from '../../../foundation';
 /** @release */
-var RcButtonBase = styled(MuiButtonBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var _RcButtonBase = forwardRef(function (props, ref) {
+    var _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, focusRipple = props.focusRipple, onBlur = props.onBlur, rest = __rest(props, ["autoFocus", "disabled", "focusRipple", "onBlur"]);
+    var innerRef = useRef(null);
+    var buttonRef = useForkRef(ref, innerRef);
+    var _c = useSafeAutoFocus(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _c.suppressInitialFocusRipple, handleAutoFocusBlur = _c.handleAutoFocusBlur;
+    var handleBlur = useEventCallback(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return React.createElement(MuiButtonBase, __assign(__assign({}, rest), { ref: buttonRef, disabled: disabled, focusRipple: suppressInitialFocusRipple ? false : focusRipple, onBlur: handleBlur }));
+});
+var RcButtonBase = styled(_RcButtonBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 RcButtonBase.displayName = 'RcButtonBase';
 export { RcButtonBase };
 var templateObject_1;

package/es6/components/Buttons/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo, useMemo, useRef, } from 'react';
 import clsx from 'clsx';
-import { combineProps, styled, useDeprecatedCheck, useTheme, useThemeProps, combineClasses, } from '../../../foundation';
+import { combineProps, styled, useDeprecatedCheck, useEventCallback, useForkRef, useSafeAutoFocus, useTheme, useThemeProps, combineClasses, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcTooltip, withTooltip } from '../../Tooltip';
 import { RcButtonBase } from '../ButtonBase';
@@ -14,8 +14,11 @@ var _RcIconButton = memo(forwardRef(function (props, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
     }
-    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, focusVariant = props.focusVariant, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusVariant"]);
+    var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, _d = props.autoFocus, autoFocus = _d === void 0 ? false : _d, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, _e = props.focusRipple, focusRippleProp = _e === void 0 ? true : _e, focusVariant = props.focusVariant, onBlur = props.onBlur, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "autoFocus", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusRipple", "focusVariant", "onBlur"]);
     var theme = useTheme();
+    var innerButtonRef = useRef(null);
+    var handleButtonRef = useForkRef(innerButtonRef, buttonRef);
+    var _f = useSafeAutoFocus(autoFocus && !disabled, innerButtonRef), suppressInitialFocusRipple = _f.suppressInitialFocusRipple, handleAutoFocusBlur = _f.handleAutoFocusBlur;
     var isOutline = variant === 'outline';
     var isContained = variant === 'contained';
     var isInverse = variant === 'inverse';
@@ -30,13 +33,17 @@ var _RcIconButton = memo(forwardRef(function (props, ref) {
         _a[classes.inverse] = isInverse,
         _a[classes.round] = isRound,
         _a));
+    var handleBlur = useEventCallback(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
     var iconButton = (function () {
         var _a, _b;
         // `color` already handle in StyledIconButton
         // eslint-disable-next-line @typescript-eslint/no-shadow
         var color = IconProps.color, IconPropsWithoutColor = __rest(IconProps, ["color"]);
         var icon = React.isValidElement(children) || children === '' ? children : (React.createElement(RcIcon, __assign({ symbol: symbol, className: classes.icon, loading: loading, size: "inherit", CircularProgressProps: CircularProgressProps }, IconPropsWithoutColor), children));
-        var iconButton = (React.createElement(RcButtonBase, __assign({ ref: buttonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, TouchRippleProps: combineProps({
+        var iconButton = (React.createElement(RcButtonBase, __assign({ ref: handleButtonRef, disableRipple: ((_b = (_a = theme.props) === null || _a === void 0 ? void 0 : _a.MuiButtonBase) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, type: type, disabled: disabled, "aria-label": ariaLabel || tooltipTitle || title, title: title, "aria-disabled": disabled, className: IconClassName, focusRipple: suppressInitialFocusRipple ? false : focusRippleProp, onBlur: handleBlur, TouchRippleProps: combineProps({
                 classes: RcIconButtonTouchRippleClasses,
             }, TouchRippleProps) }, rest), icon));
         if (download && href) {

package/es6/components/Stepper/StepButton/StepButton.js

@@ -1,13 +1,16 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { cloneElement, forwardRef, useMemo, } from 'react';
+import React, { cloneElement, forwardRef, useMemo, useRef, } from 'react';
 import MuiStepButton from '@material-ui/core/StepButton';
-import { combineClasses, combineProps, isRcElement, styled, useThemeProps, } from '../../../foundation';
+import { combineClasses, combineProps, isRcElement, styled, useEventCallback, useForkRef, useSafeAutoFocus, useThemeProps, } from '../../../foundation';
 import { RcStepLabel } from '../StepLabel';
 import { StepButtonStyle } from './styles';
 import { RcStepButtonClasses } from './utils';
 var _RcStepButton = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcStepButton' });
-    var classesProp = props.classes, childrenProp = props.children, icon = props.icon, optional = props.optional, error = props.error, StepLabelProps = props.StepLabelProps, editable = props.editable, rest = __rest(props, ["classes", "children", "icon", "optional", "error", "StepLabelProps", "editable"]);
+    var classesProp = props.classes, childrenProp = props.children, icon = props.icon, optional = props.optional, error = props.error, StepLabelProps = props.StepLabelProps, editable = props.editable, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, focusRipple = props.focusRipple, onBlur = props.onBlur, rest = __rest(props, ["classes", "children", "icon", "optional", "error", "StepLabelProps", "editable", "autoFocus", "disabled", "focusRipple", "onBlur"]);
+    var innerRef = useRef(null);
+    var handleRef = useForkRef(innerRef, ref);
+    var _c = useSafeAutoFocus(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _c.suppressInitialFocusRipple, handleAutoFocusBlur = _c.handleAutoFocusBlur;
     var classes = useMemo(function () { return combineClasses(RcStepButtonClasses, classesProp); }, [classesProp]);
     var children = useMemo(function () {
         var childProps = combineProps({
@@ -18,7 +21,11 @@ var _RcStepButton = forwardRef(function (inProps, ref) {
         }, StepLabelProps);
         return isRcElement(childrenProp, ['RcStepLabel']) ? (cloneElement(childrenProp, childProps)) : (React.createElement(RcStepLabel, __assign({}, childProps), childrenProp));
     }, [StepLabelProps, childrenProp, editable, error, icon, optional]);
-    return (React.createElement(MuiStepButton, __assign({}, rest, { icon: icon, optional: optional, ref: ref, classes: classes }), children));
+    var handleBlur = useEventCallback(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (React.createElement(MuiStepButton, __assign({}, rest, { disabled: disabled, focusRipple: suppressInitialFocusRipple ? false : focusRipple, icon: icon, onBlur: handleBlur, optional: optional, ref: handleRef, classes: classes }), children));
 });
 var RcStepButton = styled(_RcStepButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), StepButtonStyle);
 RcStepButton.defaultProps = {

package/es6/components/Tabs/Tab/Tab.js

@@ -1,14 +1,21 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, useRef, } from 'react';
 import MuiTab from '@material-ui/core/Tab';
-import { combineProps, styled, useThemeProps, } from '../../../foundation';
+import { combineProps, styled, useEventCallback, useForkRef, useSafeAutoFocus, useThemeProps, } from '../../../foundation';
 import { TabStyle } from './styles';
 import { RcTabClasses } from './utils';
 var _RcTab = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcTab' });
-    var classesProp = props.classes, children = props.children, direction = props.direction, rest = __rest(props, ["classes", "children", "direction"]);
+    var classesProp = props.classes, children = props.children, direction = props.direction, _a = props.autoFocus, autoFocus = _a === void 0 ? false : _a, _b = props.disableFocusRipple, disableFocusRippleProp = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, onBlur = props.onBlur, rest = __rest(props, ["classes", "children", "direction", "autoFocus", "disableFocusRipple", "disabled", "onBlur"]);
+    var innerRef = useRef(null);
+    var tabRef = useForkRef(ref, innerRef);
+    var _d = useSafeAutoFocus(autoFocus && !disabled, innerRef), suppressInitialFocusRipple = _d.suppressInitialFocusRipple, handleAutoFocusBlur = _d.handleAutoFocusBlur;
     var classes = useMemo(function () { return combineProps(RcTabClasses, classesProp); }, [classesProp]);
-    return React.createElement(MuiTab, __assign({}, rest, { ref: ref, classes: classes }));
+    var handleBlur = useEventCallback(function (event) {
+        handleAutoFocusBlur(event);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    });
+    return (React.createElement(MuiTab, __assign({}, rest, { ref: tabRef, classes: classes, disabled: disabled, disableFocusRipple: suppressInitialFocusRipple ? true : disableFocusRippleProp, onBlur: handleBlur })));
 });
 var RcTab = styled(_RcTab)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TabStyle);
 RcTab.defaultProps = {

package/es6/foundation/hooks/index.js

@@ -26,6 +26,7 @@ export * from './useResizeObserver';
 export * from './useResponsiveMatch';
 export * from './useResultRef';
 export * from './useRetry';
+export * from './useSafeAutoFocus';
 export * from './useSleep';
 export * from './useThrottle';
 export * from './useTouchMouseEvent';

package/es6/foundation/hooks/useSafeAutoFocus/index.js

@@ -0,0 +1 @@
+export * from './useSafeAutoFocus';

package/es6/foundation/hooks/useSafeAutoFocus/useSafeAutoFocus.js

@@ -0,0 +1,35 @@
+import { __read } from "tslib";
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { useEventCallback } from '../useEventCallback';
+var useEnhancedEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+var useSafeAutoFocus = function (autoFocus, targetRef) {
+    var _a = __read(useState(autoFocus), 2), suppressInitialFocusRipple = _a[0], setSuppressInitialFocusRipple = _a[1];
+    var autoFocusAppliedRef = useRef(false);
+    var suppressInitialFocusRippleRef = useRef(autoFocus);
+    useEnhancedEffect(function () {
+        var _a;
+        if (!autoFocus) {
+            autoFocusAppliedRef.current = false;
+            suppressInitialFocusRippleRef.current = false;
+            setSuppressInitialFocusRipple(false);
+            return;
+        }
+        suppressInitialFocusRippleRef.current = true;
+        setSuppressInitialFocusRipple(true);
+        if (!autoFocusAppliedRef.current) {
+            autoFocusAppliedRef.current = true;
+            (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, targetRef]);
+    var handleAutoFocusBlur = useEventCallback(function () {
+        if (suppressInitialFocusRippleRef.current) {
+            suppressInitialFocusRippleRef.current = false;
+            setSuppressInitialFocusRipple(false);
+        }
+    });
+    return {
+        suppressInitialFocusRipple: suppressInitialFocusRipple,
+        handleAutoFocusBlur: handleAutoFocusBlur,
+    };
+};
+export { useSafeAutoFocus };

package/foundation/hooks/index.d.ts

@@ -26,6 +26,7 @@ export * from './useResizeObserver';
 export * from './useResponsiveMatch';
 export * from './useResultRef';
 export * from './useRetry';
+export * from './useSafeAutoFocus';
 export * from './useSleep';
 export * from './useThrottle';
 export * from './useTouchMouseEvent';

package/foundation/hooks/index.js

@@ -29,6 +29,7 @@ tslib_1.__exportStar(require("./useResizeObserver"), exports);
 tslib_1.__exportStar(require("./useResponsiveMatch"), exports);
 tslib_1.__exportStar(require("./useResultRef"), exports);
 tslib_1.__exportStar(require("./useRetry"), exports);
+tslib_1.__exportStar(require("./useSafeAutoFocus"), exports);
 tslib_1.__exportStar(require("./useSleep"), exports);
 tslib_1.__exportStar(require("./useThrottle"), exports);
 tslib_1.__exportStar(require("./useTouchMouseEvent"), exports);

package/foundation/hooks/useSafeAutoFocus/index.d.ts

@@ -0,0 +1 @@
+export * from './useSafeAutoFocus';

package/foundation/hooks/useSafeAutoFocus/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useSafeAutoFocus"), exports);

package/foundation/hooks/useSafeAutoFocus/package.json

@@ -0,0 +1,5 @@
+{
+  "sideEffects": false,
+  "module": "../../../es6/foundation/hooks/useSafeAutoFocus/index.js",
+  "typings": "./index.d.ts"
+}

package/foundation/hooks/useSafeAutoFocus/useSafeAutoFocus.d.ts

@@ -0,0 +1,7 @@
+import { FocusEventHandler, RefObject } from 'react';
+type UseSafeAutoFocusResult<T extends HTMLElement> = {
+    suppressInitialFocusRipple: boolean;
+    handleAutoFocusBlur: FocusEventHandler<T>;
+};
+declare const useSafeAutoFocus: <T extends HTMLElement>(autoFocus: boolean, targetRef: RefObject<T>) => UseSafeAutoFocusResult<T>;
+export { useSafeAutoFocus };

package/foundation/hooks/useSafeAutoFocus/useSafeAutoFocus.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeAutoFocus = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useEventCallback_1 = require("../useEventCallback");
+var useEnhancedEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+var useSafeAutoFocus = function (autoFocus, targetRef) {
+    var _a = tslib_1.__read((0, react_1.useState)(autoFocus), 2), suppressInitialFocusRipple = _a[0], setSuppressInitialFocusRipple = _a[1];
+    var autoFocusAppliedRef = (0, react_1.useRef)(false);
+    var suppressInitialFocusRippleRef = (0, react_1.useRef)(autoFocus);
+    useEnhancedEffect(function () {
+        var _a;
+        if (!autoFocus) {
+            autoFocusAppliedRef.current = false;
+            suppressInitialFocusRippleRef.current = false;
+            setSuppressInitialFocusRipple(false);
+            return;
+        }
+        suppressInitialFocusRippleRef.current = true;
+        setSuppressInitialFocusRipple(true);
+        if (!autoFocusAppliedRef.current) {
+            autoFocusAppliedRef.current = true;
+            (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, targetRef]);
+    var handleAutoFocusBlur = (0, useEventCallback_1.useEventCallback)(function () {
+        if (suppressInitialFocusRippleRef.current) {
+            suppressInitialFocusRippleRef.current = false;
+            setSuppressInitialFocusRipple(false);
+        }
+    });
+    return {
+        suppressInitialFocusRipple: suppressInitialFocusRipple,
+        handleAutoFocusBlur: handleAutoFocusBlur,
+    };
+};
+exports.useSafeAutoFocus = useSafeAutoFocus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",