@ringcentral/juno 2.24.0 → 2.25.0

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/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/package.json

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