@ringcentral/juno 2.23.1 → 2.25.0-hotfix.0

package/components/Downshift/Downshift.js

@@ -192,7 +192,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex;
+    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex, popperElementRef = _10.popperElementRef;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = tslib_1.__rest(_11, ["onBlur"]);
     var helperText = isNew
@@ -307,7 +307,7 @@ var _RcDownshift = react_1.memo(react_1.forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (react_1.default.createElement(VisuallyHidden_1.RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: utils_1.fixOffsetsModifer }, 
+        react_1.default.createElement(styles_1.StyledPopper, tslib_1.__assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: utils_1.fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

package/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -118,9 +118,6 @@ exports.useSuggestionList = function (_a) {
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
         return foundation_1.combineProps(tslib_1.__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
                 selectItem(e, item);
-            }, onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
                     getIsItemCanSelected(item)) {

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

@@ -3,6 +3,7 @@ import { ChangeEvent, HTMLAttributes } from 'react';
 import { RcIconButtonProps } from '../../Buttons/IconButton';
 import { RcDownshiftProps } from '../Downshift';
 import { RcDownshiftSelectedItem } from './SelectItem';
+import { RcDownshiftGetItemPropsOptions } from './useDownshift.interface';
 declare type UseDownshiftParams<T extends RcDownshiftSelectedItem = RcDownshiftSelectedItem> = {
     /** that input ref you binding event */
     inputRef: React.RefObject<HTMLInputElement>;
@@ -292,7 +293,7 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
         'aria-required': boolean;
         'aria-disabled': boolean;
     };
-    getItemProps: ({ item, index, ...itemRest }: import("./useDownshift.interface").RcDownshiftGetItemPropsOptions<T>) => {
+    getItemProps: (props: RcDownshiftGetItemPropsOptions<T>) => {
         isSelected?: boolean | undefined;
         disabled?: boolean | undefined;
         ref?: import("react").RefObject<any> | undefined;
@@ -577,5 +578,6 @@ export declare const useDownshift: <T extends RcDownshiftSelectedItem = RcDownsh
     id: string;
     inputChanged: boolean;
     autoCompleteSelectedIndex: number;
+    popperElementRef: import("react").RefObject<HTMLDivElement>;
 };
 export {};

package/components/Downshift/utils/useDownshift.js

@@ -29,6 +29,7 @@ exports.useDownshift = function (_a) {
     var stopAutoSelectRef = react_1.useRef(false);
     var fromPasteString = react_1.useRef('');
     var keepHighlightedIndexRef = react_1.useRef(false);
+    var popperElementRef = react_1.useRef(null);
     var _g = foundation_1.useSleep(), sleep = _g.sleep, getSleeping = _g.getSleeping;
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -146,7 +147,20 @@ exports.useDownshift = function (_a) {
                 }
             }
         },
-    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getSuggestionListItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    var getItemProps = function (props) {
+        var onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, rest = tslib_1.__rest(props, ["onMouseDown", "onMouseUp"]);
+        return getSuggestionListItemProps(tslib_1.__assign(tslib_1.__assign({}, rest), { onMouseDown: function (e) {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, onMouseUp: function (e) {
+                focusInput();
+                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+            } }));
+    };
     var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
@@ -282,8 +296,8 @@ exports.useDownshift = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var getInputProps = function (props) {
-        var suggestionListItemProps = getSuggestionListInputProps(props);
-        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListItemProps), { onPaste: function (e) {
+        var suggestionListInputProps = getSuggestionListInputProps(props);
+        return foundation_1.combineProps(tslib_1.__assign(tslib_1.__assign({}, suggestionListInputProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -320,7 +334,12 @@ exports.useDownshift = function (_a) {
                 stopAutoSelectRef.current = false;
                 blurTags();
             }, onBlur: function (e) {
+                var _a;
                 setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if ((_a = popperElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+                    return;
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItem(e, optionItems[highlightedIndexRef.current]);
@@ -532,5 +551,6 @@ exports.useDownshift = function (_a) {
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
         autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef: popperElementRef,
     };
 };

package/components/Forms/Picker/DatePicker/Calendar.js

@@ -162,7 +162,6 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
         }
     }, [previousView, view, viewChange]);
     react_1.useLayoutEffect(function () {
-        utils_2.focusDayElement();
         calendarRef.current = document.querySelector("." + utils_2.RcDatePickerClasses.popover + " ." + utils_2.RcDatePickerClasses.popoverPaper);
         var unsubscribe = utils_1.transitionendSubscriber(calendarRef.current, utils_2.onTransitionEnd);
         return function () {

package/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -15,6 +15,10 @@ var DatePickerHeader = react_1.memo(function (props) {
     var nextMonth = utils.getNextMonth(focusedDate);
     var monthLabel = utils.getCalendarHeaderText(focusedDate);
     var changeFromRef = react_1.useRef();
+    var headerRef = react_1.useRef(null);
+    react_1.useLayoutEffect(function () {
+        headerRef.current.focus();
+    }, []);
     var selectNextMonth = function () {
         onMonthChange(nextMonth, 'left');
         changeFromRef.current = 'next';
@@ -33,7 +37,7 @@ var DatePickerHeader = react_1.memo(function (props) {
             ? nextMonthAriaLabel
             : previousMonthAriaLabel)),
         react_1.default.createElement(styles_1.SwitchHeaderWrapper, { size: size, className: classes.header },
-            react_1.default.createElement(styles_1.StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select },
+            react_1.default.createElement(styles_1.StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select, ref: headerRef },
                 monthLabel,
                 react_1.default.createElement(SelectArrowDownIcon_1.SelectArrowDownIcon, null)),
             react_1.default.createElement(styles_1.SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },

package/components/Forms/Picker/TimePicker/NumberPicker.d.ts

@@ -30,6 +30,10 @@ declare type NumberPickerProps = {
     step: number;
     /** render value fn */
     renderValue?: (value: number) => string;
+    /**
+     * If `true`, the `NumberPicker` element will be focused during the first mount.
+     */
+    autoFocus?: boolean;
 } & RcClickFiledStyleProps & RcBaseProps<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'>;
 declare type NumberPickerRef = {
     value: number;
@@ -60,6 +64,10 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
     step: number;
     /** render value fn */
     renderValue?: ((value: number) => string) | undefined;
+    /**
+     * If `true`, the `NumberPicker` element will be focused during the first mount.
+     */
+    autoFocus?: boolean | undefined;
 } & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "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" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, import("../../../../foundation").RcTheme, Pick<{
     /** min number */
     min?: number | undefined;
@@ -85,7 +93,11 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
     step: number;
     /** render value fn */
     renderValue?: ((value: number) => string) | undefined;
-} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "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" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, "ref" | "key" | "className" | "color" | "id" | "lang" | "max" | "min" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "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" | "step" | "slot" | "source" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "disabled" | "onClose" | "onUpdateValue" | "isTwelveHourSystem" | "onInnerChange" | "automationId" | "getScreenReaderLabel" | "renderValue"> & {
+    /**
+     * If `true`, the `NumberPicker` element will be focused during the first mount.
+     */
+    autoFocus?: boolean | undefined;
+} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "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" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, "ref" | "key" | "className" | "color" | "id" | "lang" | "max" | "min" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "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" | "step" | "slot" | "source" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "disabled" | "autoFocus" | "onClose" | "onUpdateValue" | "isTwelveHourSystem" | "onInnerChange" | "automationId" | "getScreenReaderLabel" | "renderValue"> & {
     theme?: import("../../../../foundation").RcTheme | undefined;
 }>;
 export { NumberPicker };

package/components/Forms/Picker/TimePicker/NumberPicker.js

@@ -9,10 +9,17 @@ var StyledNumberPicker_1 = require("./styles/StyledNumberPicker");
 var StyledTimeIconButton_1 = require("./styles/StyledTimeIconButton");
 var utils_1 = require("./utils");
 var _NumberPicker = react_1.forwardRef(function (props, ref) {
-    var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, rest = tslib_1.__rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel"]);
+    var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, autoFocus = props.autoFocus, rest = tslib_1.__rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel", "autoFocus"]);
     var forceUpdate = foundation_1.useForceUpdate();
     var _a = tslib_1.__read(foundation_1.useRefState(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
     var rangeRef = react_1.useRef({ max: maxProp, min: minProp });
+    var pickerRef = react_1.useRef(null);
+    react_1.useLayoutEffect(function () {
+        if (autoFocus) {
+            pickerRef.current.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     foundation_1.useDepsChange(function () {
         rangeRef.current = { max: maxProp, min: minProp };
     }, [maxProp, minProp]);
@@ -102,7 +109,7 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
                 return 'large';
         }
     })();
-    return (react_1.default.createElement(StyledNumberPicker_1.StyledNumberPicker, tslib_1.__assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label }, rest),
+    return (react_1.default.createElement(StyledNumberPicker_1.StyledNumberPicker, tslib_1.__assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef }, rest),
         react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
                 onUpdateValue(increaseValue);
             }, symbol: juno_icon_1.ArrowUp, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),

package/components/Forms/Picker/TimePicker/TimePicker.js

@@ -240,7 +240,7 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         react_1.default.createElement(styles_1.StyledPickerPopperWrap, { size: size }, selectionShowType === 'none' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(NumberPicker_1.NumberPicker, tslib_1.__assign({ ref: hourRef, size: size, onInnerChange: handleHourInnerChange, onClick: setHourSelectionShow, onClose: closeMenu, value: hourValue }, boundary.hour, { onUpdateValue: handleHourChange, step: 1, source: isTwelveHourSystem
                     ? utils_2.twelveHourSystemSource
-                    : utils_2.twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour" }, HourPickerProps)),
+                    : utils_2.twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour", autoFocus: true }, HourPickerProps)),
             react_1.default.createElement(Box_1.RcBox, { textAlign: "center", width: "48px" }, ":"),
             react_1.default.createElement(NumberPicker_1.NumberPicker, tslib_1.__assign({ ref: minuteRef, size: size }, boundary.minute, { onUpdateValue: handleMinuteChange, onClick: setMinuteSelectionShow, onClose: closeMenu, value: minuteValue, source: utils_2.minuteSource, step: utils_2.TIME_GAP, automationId: "time-picker-minute" }, MinutePickerProps)),
             isTwelveHourSystem && (react_1.default.createElement("div", null,

package/components/Forms/TextField/TextField.js

@@ -44,7 +44,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
     // no need assign to MuiTextField
-    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, idProp = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -68,7 +68,7 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
         setValidateMessage('');
     });
-    var endAdornment = react_1.useMemo(function () {
+    var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
             var combineClearProps = foundation_1.combineProps({
@@ -89,48 +89,32 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
             return InputPropsProp.endAdornment;
         }
         return clearBtn ? getCleanButton() : undefined;
-    }, [
-        InputPropsProp,
-        clearAriaLabel,
-        clearBtn,
-        clearButtonProps,
-        clearLabel,
-        handleClear,
-        size,
-    ]);
-    var events = react_1.useMemo(function () {
-        return foundation_1.combineProps({
-            onBlur: function () {
-                runValidate();
-            },
-            onFocus: function () {
-                if (validateMessage !== '') {
-                    setValidateMessage('');
-                }
-            },
-        }, {
-            onBlur: onBlur,
-            onFocus: onFocus,
-        });
-    }, [onBlur, onFocus, runValidate, validateMessage]);
+    })();
+    var events = foundation_1.combineProps({
+        onBlur: function () {
+            runValidate();
+        },
+        onFocus: function () {
+            if (validateMessage !== '') {
+                setValidateMessage('');
+            }
+        },
+    }, {
+        onBlur: onBlur,
+        onFocus: onFocus,
+    });
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcTextFieldClasses, classesProp); }, [classesProp]);
-    var InputProps = react_1.useMemo(function () {
-        var curr = {
-            outline: combineOutlineClasses,
-            borderLess: undefined,
-            standard: undefined,
-        }[variant];
-        return foundation_1.combineProps({
-            classes: curr || utils_1.RcTextFieldInputClasses,
-            disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
-        }, tslib_1.__assign(tslib_1.__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    }, [InputPropsProp, endAdornment, variant]);
-    var FormHelperTextProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    }, [FormHelperTextPropsProp]);
-    var InputLabelProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    }, [InputLabelPropsProp]);
+    var additionClasses = {
+        outline: combineOutlineClasses,
+        borderLess: undefined,
+        standard: undefined,
+    }[variant];
+    var InputProps = foundation_1.combineProps({
+        classes: additionClasses || utils_1.RcTextFieldInputClasses,
+        disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
+    }, tslib_1.__assign(tslib_1.__assign({}, InputPropsProp), { endAdornment: endAdornment }));
+    var FormHelperTextProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = foundation_1.combineProps({ classes: utils_1.RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
     react_1.useLayoutEffect(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
@@ -158,6 +142,8 @@ var _RcTextField = react_1.forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // TODO: remove this after upgrade to Mui5
+    var id = foundation_1.useId(idProp);
     react_1.useEffect(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });

package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -155,7 +155,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
                     size: value.size ? value.size[oriStr] : 0,
                 });
             });
-            var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
+            var limitSize = tabsSizeRef.current[oriStr] - moreTabSizeRef.current[oriStr];
             var _a = utils_1.computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
             computeGroupingInfo(tabsTabLabel, menuTabLabel);
             var tabsTabChild = tabsTabLabel.map(function (key) {
@@ -189,7 +189,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
                     : computedStandardModeChild(tabRefsMap);
             }
         };
-        if (tabsSize.width !== 0 && tabsSize.height !== 0) {
+        if (tabsSizeRef.current.width !== 0 && tabsSizeRef.current.height !== 0) {
             // computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
             // not computed: visible tab change
             if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
@@ -197,7 +197,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
                 prevChildrenProp === childrenProp) {
                 return;
             }
-            computeTabChild(tabsSize);
+            // can't use tabsSize
+            // It is possible that the children prop render effect will execute before the sizeChange effect
+            // which get a old tabsSize value
+            computeTabChild(tabsSizeRef.current);
             hasResizeRef.current = false;
         }
     }, [

package/es6/components/Downshift/Downshift.js

@@ -188,7 +188,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex;
+    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex, popperElementRef = _10.popperElementRef;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = __rest(_11, ["onBlur"]);
     var helperText = isNew
@@ -303,7 +303,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (React.createElement(RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        React.createElement(StyledPopper, __assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
+        React.createElement(StyledPopper, __assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

package/es6/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -116,9 +116,6 @@ export var useSuggestionList = function (_a) {
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
         return combineProps(__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
                 selectItem(e, item);
-            }, onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
                     getIsItemCanSelected(item)) {

package/es6/components/Downshift/utils/useDownshift.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __read, __spread } from "tslib";
+import { __assign, __awaiter, __generator, __read, __rest, __spread } from "tslib";
 import { useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import { combineProps, getSelectionPosition, useChange, useControlled, useId, useSleep, } from '../../../foundation';
 import { useSuggestionList } from '../SuggestionList/utils/useSuggestionList';
@@ -27,6 +27,7 @@ export var useDownshift = function (_a) {
     var stopAutoSelectRef = useRef(false);
     var fromPasteString = useRef('');
     var keepHighlightedIndexRef = useRef(false);
+    var popperElementRef = useRef(null);
     var _g = useSleep(), sleep = _g.sleep, getSleeping = _g.getSleeping;
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -144,7 +145,20 @@ export var useDownshift = function (_a) {
                 }
             }
         },
-    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getSuggestionListItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    var getItemProps = function (props) {
+        var onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, rest = __rest(props, ["onMouseDown", "onMouseUp"]);
+        return getSuggestionListItemProps(__assign(__assign({}, rest), { onMouseDown: function (e) {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, onMouseUp: function (e) {
+                focusInput();
+                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+            } }));
+    };
     var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
@@ -280,8 +294,8 @@ export var useDownshift = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var getInputProps = function (props) {
-        var suggestionListItemProps = getSuggestionListInputProps(props);
-        return combineProps(__assign(__assign({}, suggestionListItemProps), { onPaste: function (e) {
+        var suggestionListInputProps = getSuggestionListInputProps(props);
+        return combineProps(__assign(__assign({}, suggestionListInputProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -318,7 +332,12 @@ export var useDownshift = function (_a) {
                 stopAutoSelectRef.current = false;
                 blurTags();
             }, onBlur: function (e) {
+                var _a;
                 setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if ((_a = popperElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+                    return;
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItem(e, optionItems[highlightedIndexRef.current]);
@@ -530,5 +549,6 @@ export var useDownshift = function (_a) {
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
         autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef: popperElementRef,
     };
 };

package/es6/components/Forms/Picker/DatePicker/Calendar.js

@@ -160,7 +160,6 @@ var Calendar = forwardRef(function (_a, ref) {
         }
     }, [previousView, view, viewChange]);
     useLayoutEffect(function () {
-        focusDayElement();
         calendarRef.current = document.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
         var unsubscribe = transitionendSubscriber(calendarRef.current, onTransitionEnd);
         return function () {

package/es6/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from 'react';
+import React, { memo, useRef, useLayoutEffect } from 'react';
 import { useUtils as useMuiUtils } from '@material-ui/pickers';
 import { ArrowLeft2 as arrowLeftSvg, ArrowRight as arrowRightSvg, } from '@ringcentral/juno-icon';
 import { RcVisuallyHidden } from '../../../VisuallyHidden';
@@ -12,6 +12,10 @@ var DatePickerHeader = memo(function (props) {
     var nextMonth = utils.getNextMonth(focusedDate);
     var monthLabel = utils.getCalendarHeaderText(focusedDate);
     var changeFromRef = useRef();
+    var headerRef = useRef(null);
+    useLayoutEffect(function () {
+        headerRef.current.focus();
+    }, []);
     var selectNextMonth = function () {
         onMonthChange(nextMonth, 'left');
         changeFromRef.current = 'next';
@@ -30,7 +34,7 @@ var DatePickerHeader = memo(function (props) {
             ? nextMonthAriaLabel
             : previousMonthAriaLabel)),
         React.createElement(SwitchHeaderWrapper, { size: size, className: classes.header },
-            React.createElement(StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select },
+            React.createElement(StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select, ref: headerRef },
                 monthLabel,
                 React.createElement(SelectArrowDownIcon, null)),
             React.createElement(SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },

package/es6/components/Forms/Picker/TimePicker/NumberPicker.js

@@ -1,5 +1,5 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
-import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, } from 'react';
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useLayoutEffect, } from 'react';
 import { runKeyHandler } from '@material-ui/pickers/_shared/hooks/useKeyDown';
 import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon, } from '@ringcentral/juno-icon';
 import { styled, useChange, useDepsChange, useEventCallback, useForceUpdate, useRefState, } from '../../../../foundation';
@@ -7,10 +7,17 @@ import { StyledNumberPicker } from './styles/StyledNumberPicker';
 import { StyledTimeIconButton } from './styles/StyledTimeIconButton';
 import { pad } from './utils';
 var _NumberPicker = forwardRef(function (props, ref) {
-    var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, rest = __rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel"]);
+    var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, autoFocus = props.autoFocus, rest = __rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel", "autoFocus"]);
     var forceUpdate = useForceUpdate();
     var _a = __read(useRefState(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
     var rangeRef = useRef({ max: maxProp, min: minProp });
+    var pickerRef = useRef(null);
+    useLayoutEffect(function () {
+        if (autoFocus) {
+            pickerRef.current.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     useDepsChange(function () {
         rangeRef.current = { max: maxProp, min: minProp };
     }, [maxProp, minProp]);
@@ -100,7 +107,7 @@ var _NumberPicker = forwardRef(function (props, ref) {
                 return 'large';
         }
     })();
-    return (React.createElement(StyledNumberPicker, __assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label }, rest),
+    return (React.createElement(StyledNumberPicker, __assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef }, rest),
         React.createElement(StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
                 onUpdateValue(increaseValue);
             }, symbol: ArrowUpIcon, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),

package/es6/components/Forms/Picker/TimePicker/TimePicker.js

@@ -238,7 +238,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
         React.createElement(StyledPickerPopperWrap, { size: size }, selectionShowType === 'none' ? (React.createElement(React.Fragment, null,
             React.createElement(NumberPicker, __assign({ ref: hourRef, size: size, onInnerChange: handleHourInnerChange, onClick: setHourSelectionShow, onClose: closeMenu, value: hourValue }, boundary.hour, { onUpdateValue: handleHourChange, step: 1, source: isTwelveHourSystem
                     ? twelveHourSystemSource
-                    : twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour" }, HourPickerProps)),
+                    : twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour", autoFocus: true }, HourPickerProps)),
             React.createElement(RcBox, { textAlign: "center", width: "48px" }, ":"),
             React.createElement(NumberPicker, __assign({ ref: minuteRef, size: size }, boundary.minute, { onUpdateValue: handleMinuteChange, onClick: setMinuteSelectionShow, onClose: closeMenu, value: minuteValue, source: minuteSource, step: TIME_GAP, automationId: "time-picker-minute" }, MinutePickerProps)),
             isTwelveHourSystem && (React.createElement("div", null,

package/es6/components/Forms/TextField/TextField.js

@@ -2,7 +2,7 @@ import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTextField from '@material-ui/core/TextField';
 import { DeleteCircle } from '@ringcentral/juno-icon';
-import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
+import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, useId, } from '../../../foundation';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';
@@ -41,7 +41,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
     // no need assign to MuiTextField
-    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, idProp = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -65,7 +65,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
         setValidateMessage('');
     });
-    var endAdornment = useMemo(function () {
+    var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
             var combineClearProps = combineProps({
@@ -86,48 +86,32 @@ var _RcTextField = forwardRef(function (inProps, ref) {
             return InputPropsProp.endAdornment;
         }
         return clearBtn ? getCleanButton() : undefined;
-    }, [
-        InputPropsProp,
-        clearAriaLabel,
-        clearBtn,
-        clearButtonProps,
-        clearLabel,
-        handleClear,
-        size,
-    ]);
-    var events = useMemo(function () {
-        return combineProps({
-            onBlur: function () {
-                runValidate();
-            },
-            onFocus: function () {
-                if (validateMessage !== '') {
-                    setValidateMessage('');
-                }
-            },
-        }, {
-            onBlur: onBlur,
-            onFocus: onFocus,
-        });
-    }, [onBlur, onFocus, runValidate, validateMessage]);
+    })();
+    var events = combineProps({
+        onBlur: function () {
+            runValidate();
+        },
+        onFocus: function () {
+            if (validateMessage !== '') {
+                setValidateMessage('');
+            }
+        },
+    }, {
+        onBlur: onBlur,
+        onFocus: onFocus,
+    });
     var classes = useMemo(function () { return combineClasses(RcTextFieldClasses, classesProp); }, [classesProp]);
-    var InputProps = useMemo(function () {
-        var curr = {
-            outline: combineOutlineClasses,
-            borderLess: undefined,
-            standard: undefined,
-        }[variant];
-        return combineProps({
-            classes: curr || RcTextFieldInputClasses,
-            disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
-        }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    }, [InputPropsProp, endAdornment, variant]);
-    var FormHelperTextProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    }, [FormHelperTextPropsProp]);
-    var InputLabelProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    }, [InputLabelPropsProp]);
+    var additionClasses = {
+        outline: combineOutlineClasses,
+        borderLess: undefined,
+        standard: undefined,
+    }[variant];
+    var InputProps = combineProps({
+        classes: additionClasses || RcTextFieldInputClasses,
+        disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
+    }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
+    var FormHelperTextProps = combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
     useLayoutEffect(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
@@ -155,6 +139,8 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // TODO: remove this after upgrade to Mui5
+    var id = useId(idProp);
     useEffect(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });

package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js

@@ -153,7 +153,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                     size: value.size ? value.size[oriStr] : 0,
                 });
             });
-            var limitSize = tabsSize[oriStr] - moreTabSizeRef.current[oriStr];
+            var limitSize = tabsSizeRef.current[oriStr] - moreTabSizeRef.current[oriStr];
             var _a = computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
             computeGroupingInfo(tabsTabLabel, menuTabLabel);
             var tabsTabChild = tabsTabLabel.map(function (key) {
@@ -187,7 +187,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                     : computedStandardModeChild(tabRefsMap);
             }
         };
-        if (tabsSize.width !== 0 && tabsSize.height !== 0) {
+        if (tabsSizeRef.current.width !== 0 && tabsSizeRef.current.height !== 0) {
             // computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
             // not computed: visible tab change
             if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
@@ -195,7 +195,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
                 prevChildrenProp === childrenProp) {
                 return;
             }
-            computeTabChild(tabsSize);
+            // can't use tabsSize
+            // It is possible that the children prop render effect will execute before the sizeChange effect
+            // which get a old tabsSize value
+            computeTabChild(tabsSizeRef.current);
             hasResizeRef.current = false;
         }
     }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.23.1",
+  "version": "2.25.0-hotfix.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",