@ringcentral/juno 2.31.0-hotfix.5 → 2.31.0-hotfix.6

package/components/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js

@@ -9,7 +9,6 @@ var List_1 = require("../../../List");
 var Menu_1 = require("../../../Menu");
 var Tooltip_1 = require("../../../Tooltip");
 var Tab_1 = require("../../Tab");
-var utils_1 = require("../MoreMenuTabs/utils");
 var styles_1 = require("./styles");
 var DEFAULT_MORE_MENU_TAB_LABEL = 'more_menu_tab';
 exports.DEFAULT_MORE_MENU_TAB_LABEL = DEFAULT_MORE_MENU_TAB_LABEL;
@@ -46,19 +45,19 @@ var _MoreMenuTab = react_1.forwardRef(function (props, ref) {
         if (!menuItems || menuItems.length === 0) {
             return null;
         }
-        return menuItems.map(function (item, idx) {
-            var icon = item.icon, label = item.label, value = item.value, disabled = item.disabled, onClick = item.onClick, selected = item.selected, menuItemRest = tslib_1.__rest(item, ["icon", "label", "value", "disabled", "onClick", "selected"]);
+        return menuItems.map(function (item) {
+            var icon = item.icon, label = item.label, value = item.value, disabled = item.disabled, onClick = item.onClick, selected = item.selected, key = item.key, menuItemRest = tslib_1.__rest(item, ["icon", "label", "value", "disabled", "onClick", "selected", "key"]);
             var handleClick = function (event) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
             };
-            return (react_1.default.createElement(MenuItemComponent, { key: utils_1.getKey(menuItemRest.key, idx), disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
+            return (react_1.default.createElement(MenuItemComponent, { key: key, disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
                 icon ? react_1.default.createElement(List_1.RcListItemIcon, null, icon) : null,
                 react_1.default.createElement(List_1.RcListItemText, { primary: label || value })));
         });
     }, [MenuItemComponent, menuItems, onChange]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Tab_1.RcTab, tslib_1.__assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId })),
+        react_1.default.createElement(Tab_1.RcTab, tslib_1.__assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId, "data-tab-more-button": "" })),
         react_1.default.createElement(Menu_1.RcMenu, tslib_1.__assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: open, variant: "menu", onClose: handleMenuClose }), MenuList)));
 });
 /** inner component */

package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabSentinel.d.ts

@@ -0,0 +1,7 @@
+import React, { FocusEventHandler } from 'react';
+export declare type MoreMenuTabSentinelProps = {
+    onFocus: FocusEventHandler<HTMLDivElement>;
+    id: string;
+    value: string;
+};
+export declare const MoreMenuTabSentinel: React.ForwardRefExoticComponent<MoreMenuTabSentinelProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+exports.MoreMenuTabSentinel = react_1.forwardRef(function (props, ref) {
+    var onFocus = props.onFocus, id = props.id;
+    return (react_1.default.createElement("div", { ref: ref, "aria-hidden": true, style: { position: 'absolute', top: 0, left: 0, height: 0, width: 0 }, tabIndex: -1, "data-tab-sentinel": id, onFocus: onFocus }));
+});
+exports.MoreMenuTabSentinel.displayName = 'MoreMenuTabSentinel';

package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.d.ts

@@ -7,7 +7,6 @@ declare type MoreButtonProps = {
     onGroupInfoChange?: (info: RcTabsMoreMenuGroupInfoType) => void;
 } & RcBaseProps<MoreMenuTabProps, 'size' | 'menuItems' | 'onChange' | 'orientation' | 'ref' | 'innerRef'>;
 declare type MoreMenuTabsProps = RcTabsProps;
-export declare const findChildrenByKey: (childrenProp: React.ReactNode, key: string) => undefined;
 /** inner component */
 declare const MoreMenuTabs: import("styled-components").StyledComponentClass<Pick<RcTabsProps, "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "orientation" | "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" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "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" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "centered" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "MoreButtonProps" | "resizeThrottleTime"> & React.RefAttributes<any>, import("../../../../foundation").RcTheme, Pick<Pick<RcTabsProps, "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "orientation" | "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" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "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" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "centered" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "MoreButtonProps" | "resizeThrottleTime"> & React.RefAttributes<any>, "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "orientation" | "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" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "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" | "slot" | "title" | "classes" | "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" | "variant" | "innerRef" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "centered" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "MoreButtonProps" | "resizeThrottleTime"> & {
     theme?: import("../../../../foundation").RcTheme | undefined;

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

@@ -1,232 +1,312 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importStar(require("react"));
-var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 var Tabs_1 = tslib_1.__importDefault(require("@material-ui/core/Tabs"));
+var react_1 = tslib_1.__importStar(require("react"));
 var foundation_1 = require("../../../../foundation");
 var MoreMenuTab_1 = require("../MoreMenuTab");
-var utils_1 = require("./utils");
-exports.findChildrenByKey = function (childrenProp, key) {
-    var children;
-    react_1.default.Children.forEach(childrenProp, function (child, idx) {
-        if (react_1.default.isValidElement(child)) {
-            var keyString = typeof child.key === 'string' ? child.key : '';
-            if (utils_1.getKey(keyString, idx) === key) {
-                children = child;
-            }
+var MoreMenuTabSentinel_1 = require("./MoreMenuTabSentinel");
+// with of more button with a icon
+var basicMoreButtonSize = 44;
+var getTabsInfoFromChildren = function (children) {
+    var childrenInfo = react_1.default.Children.map(children, function (child, index) {
+        var _a, _b;
+        if (react_1.isValidElement(child)) {
+            var key = (_a = child.key) !== null && _a !== void 0 ? _a : index;
+            return {
+                index: index,
+                key: key,
+                value: (_b = child.props.value) !== null && _b !== void 0 ? _b : key,
+                element: child,
+            };
         }
+        return null;
     });
-    return children;
+    if (!childrenInfo)
+        return [];
+    return childrenInfo.filter(function (info) { return Boolean(info); });
 };
 var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
-    var orientation = props.orientation, childrenProp = props.children, valueProp = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, _b = props.resizeThrottleTime, resizeThrottleTime = _b === void 0 ? 300 : _b, rest = tslib_1.__rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps", "resizeThrottleTime"]);
+    var orientation = props.orientation, childrenProp = props.children, value = props.value, onChange = props.onChange, _a = props.MoreButtonProps, MoreButtonProps = _a === void 0 ? {} : _a, _b = props.resizeThrottleTime, resizeThrottleTime = _b === void 0 ? 100 : _b, rest = tslib_1.__rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps", "resizeThrottleTime"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = tslib_1.__rest(MoreButtonProps, ["onGroupInfoChange"]);
-    var prevChildrenProp = foundation_1.usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
-    var oriStr = isVertical ? 'height' : 'width';
+    var sizeKey = isVertical ? 'offsetHeight' : 'offsetWidth';
     var innerRef = react_1.useRef(null);
     var moreTabRef = react_1.useRef(null);
+    var sentinelStartRef = react_1.useRef(null);
     var tabsRef = foundation_1.useForkRef(innerRef, ref);
-    var tabRefsMapRef = react_1.useRef();
-    var moreTabSizeRef = react_1.useRef(utils_1.DEFAULT_SIZE);
-    var allTabsSizeRef = react_1.useRef(utils_1.DEFAULT_SIZE);
-    var tabsTabChildRef = react_1.useRef([]);
-    var tabsSizeRef = react_1.useRef(utils_1.DEFAULT_SIZE);
-    var groupingRef = react_1.useRef();
-    var _c = tslib_1.__read(react_1.useState([]), 2), menuTabChild = _c[0], setMenuTabChild = _c[1];
-    var _d = tslib_1.__read(react_1.useState(true), 2), useMoreMode = _d[0], setUseMoreMode = _d[1];
-    var hasResizeRef = react_1.useRef(true);
-    var forceUpdate = foundation_1.useForceUpdate();
-    var sizeChange = function (size) {
-        hasResizeRef.current = true;
-        if (tabsSizeRef.current.height !== size.height ||
-            tabsSizeRef.current.width !== size.width) {
-            tabsSizeRef.current = size;
-            forceUpdate();
-        }
-    };
-    var throttleTabsSizeChange = foundation_1.useThrottle(sizeChange, resizeThrottleTime);
-    foundation_1.useResizeObserver(innerRef, function (_a) {
-        var _b = tslib_1.__read(_a, 1), entry = _b[0];
-        var _c = entry.contentRect, width = _c.width, height = _c.height;
-        var obj = { width: width, height: height };
-        throttleTabsSizeChange(obj);
-    }, { mode: 'none' });
-    var tabsSize = tabsSizeRef.current;
-    // initial tabRefsMapRef and tabsTabChildRef
-    if (tabRefsMapRef.current === undefined ||
-        prevChildrenProp !== childrenProp) {
-        var tabRefs_1 = new Map();
-        var tabsTabDefaultChild_1 = [];
-        react_1.default.Children.forEach(childrenProp, function (child, index) {
-            var _a = child.props, ref = _a.ref, value = _a.value;
-            var innerRef = react_1.createRef();
-            var tabRef = ref ? foundation_1.useForkRef(innerRef, ref) : innerRef;
-            var childrenValue = value || index;
-            var children = react_1.default.cloneElement(child, {
-                ref: tabRef,
-                value: childrenValue,
-            });
-            var keyString = typeof child.key === 'string' ? child.key : '';
-            tabRefs_1.set(utils_1.getKey(keyString, index), {
-                ref: tabRef,
-                size: null,
-                index: index,
-                value: childrenValue,
-            });
-            tabsTabDefaultChild_1.push(children);
-        });
-        tabRefsMapRef.current = tabRefs_1;
-        tabsTabChildRef.current = tabsTabDefaultChild_1;
-    }
-    var updateAllTabsSize = function () {
-        var tabRefsMap = tabRefsMapRef.current;
-        var allTabsSize = tslib_1.__assign({}, utils_1.DEFAULT_SIZE);
-        if (tabRefsMap && tabRefsMap.size !== 0) {
-            tabRefsMap.forEach(function (value, key) {
-                var _a = utils_1.getDomBoundingClientSize(value.ref.current), width = _a.width, height = _a.height;
-                allTabsSize.width += width;
-                allTabsSize.height += height;
-                var newRef = {
-                    ref: value.ref,
-                    size: { width: width, height: height },
-                    index: value.index,
-                    value: value.value,
-                };
-                tabRefsMap.set(key, newRef);
-            });
-            allTabsSizeRef.current = allTabsSize;
+    var mountStateRef = foundation_1.useMountState();
+    var _c = tslib_1.__read(react_1.useState(function () {
+        var tabsInfo = getTabsInfoFromChildren(childrenProp);
+        if (!tabsInfo) {
+            return {
+                all: [],
+                tab: [],
+                menu: [],
+            };
         }
-        return allTabsSize;
-    };
-    // get real render size when render
-    react_1.useEffect(function () {
-        if (childrenProp === prevChildrenProp) {
+        return {
+            all: tabsInfo,
+            tab: tabsInfo,
+            menu: [],
+        };
+    }), 2), groupInfo = _c[0], setGroupInfo = _c[1];
+    var throttleCalculateGroupInfo = foundation_1.useThrottle(function () {
+        var e_1, _a;
+        var _b;
+        var tablist = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tablist"]');
+        if (!tablist)
             return;
+        var allTabs = Array.from(tablist.children);
+        var allTabsSize = [];
+        var selectedIndex = groupInfo.all.findIndex(function (info) { return info.value === value; });
+        var tablistSize = tablist[sizeKey];
+        var moreButtonSize = basicMoreButtonSize;
+        var allTabsSizeSumWidthoutMoreButton = 0;
+        try {
+            for (var allTabs_1 = tslib_1.__values(allTabs), allTabs_1_1 = allTabs_1.next(); !allTabs_1_1.done; allTabs_1_1 = allTabs_1.next()) {
+                var tabEl = allTabs_1_1.value;
+                if (tabEl instanceof HTMLElement) {
+                    if (typeof tabEl.dataset['tabOriginIndex'] === 'string') {
+                        var tabOriginIndex = Number(tabEl.dataset['tabOriginIndex']);
+                        var elSize = tabEl[sizeKey];
+                        allTabsSize[tabOriginIndex] = elSize;
+                        allTabsSizeSumWidthoutMoreButton += elSize;
+                    }
+                    else if (typeof tabEl.dataset['tabMoreButton'] === 'string') {
+                        var elSize = tabEl[sizeKey];
+                        moreButtonSize = elSize;
+                    }
+                }
+            }
         }
-        updateAllTabsSize();
-        var moreElm = moreTabRef === null || moreTabRef === void 0 ? void 0 : moreTabRef.current;
-        if (moreElm) {
-            var size = utils_1.getDomBoundingClientSize(moreElm);
-            moreTabSizeRef.current = size;
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (allTabs_1_1 && !allTabs_1_1.done && (_a = allTabs_1.return)) _a.call(allTabs_1);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
-    }, [childrenProp, prevChildrenProp]);
-    react_1.useEffect(function () {
-        var _a;
-        var currSelectTabItem;
-        var tabRefsMap = tabRefsMapRef.current;
-        if (tabRefsMap) {
-            currSelectTabItem = tslib_1.__spread(tabRefsMap).find(function (_a) {
-                var _b = tslib_1.__read(_a, 2), mapValue = _b[1];
-                return valueProp === mapValue.value || valueProp === mapValue.index;
-            });
+        var newGroupInfo = {
+            all: groupInfo.all,
+            tab: [],
+            menu: [],
+        };
+        if (allTabsSizeSumWidthoutMoreButton > tablistSize) {
+            var allTabsSizeSum = allTabsSizeSumWidthoutMoreButton + moreButtonSize;
+            var targetSize = allTabsSizeSum;
+            for (var i = allTabsSize.length - 1; i >= 0; i--) {
+                if (i !== selectedIndex) {
+                    targetSize -= allTabsSize[i];
+                    newGroupInfo.menu.unshift(groupInfo.all[i]);
+                    if (targetSize <= tablistSize) {
+                        break;
+                    }
+                }
+            }
+            newGroupInfo.tab = groupInfo.all.filter(function (info) { return !newGroupInfo.menu.some(function (_a) {
+                var index = _a.index;
+                return index === info.index;
+            }); });
         }
-        var computeGroupingInfo = function (tabsTabLabel, menuTabLabel) {
-            var newGrouping = {
-                tabs: tabsTabLabel,
-                menu: menuTabLabel,
-            };
-            if (!isEqual_1.default(groupingRef.current, newGrouping)) {
-                groupingRef.current = newGrouping;
-                onGroupInfoChange === null || onGroupInfoChange === void 0 ? void 0 : onGroupInfoChange([
-                    tabsTabLabel.map(function (key) { return utils_1.parseKey(key); }),
-                    menuTabLabel.map(function (key) { return utils_1.parseKey(key); }),
-                ]);
+        else {
+            newGroupInfo.tab = newGroupInfo.all;
+        }
+        var shouldUpdateGroupInfo = false;
+        if (newGroupInfo.tab.length === groupInfo.tab.length &&
+            newGroupInfo.tab.length === groupInfo.tab.length) {
+            for (var i = 0; i < groupInfo.tab.length; i++) {
+                if (newGroupInfo.tab[i] !== groupInfo.tab[i]) {
+                    shouldUpdateGroupInfo = true;
+                    break;
+                }
             }
-        };
-        var computeWhetherToUseMoreMode = function (tabsSize, allTabsSize) {
-            if (tabsSize.width === 0 || tabsSize.height === 0) {
-                return false;
+        }
+        else {
+            shouldUpdateGroupInfo = true;
+        }
+        if (shouldUpdateGroupInfo) {
+            // prevent resize observer loop limit exceeded
+            setTimeout(function () {
+                if (mountStateRef.current)
+                    setGroupInfo(newGroupInfo);
+            }, 0);
+        }
+    }, resizeThrottleTime);
+    react_1.useEffect(function () {
+        var e_2, _a;
+        var _b;
+        var tablist = (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tablist"]');
+        if (!tablist)
+            return;
+        var resizeObserver = foundation_1.getResizeObserver(throttleCalculateGroupInfo);
+        resizeObserver.observe(tablist);
+        try {
+            for (var _c = tslib_1.__values(Array.from(tablist.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var tabItem = _d.value;
+                resizeObserver.observe(tabItem, 
+                // TODO: remove this, after remove ResizeObserver polyfill
+                // @ts-ignore
+                { box: 'border-box' });
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            if (allTabsSize.width === 0 || allTabsSize.height === 0) {
-                allTabsSize = updateAllTabsSize();
+            finally { if (e_2) throw e_2.error; }
+        }
+        var mutationObserver = new MutationObserver(function (mutations) {
+            var e_3, _a;
+            try {
+                for (var mutations_1 = tslib_1.__values(mutations), mutations_1_1 = mutations_1.next(); !mutations_1_1.done; mutations_1_1 = mutations_1.next()) {
+                    var mutation = mutations_1_1.value;
+                    if (mutation.type === 'childList') {
+                        mutation.removedNodes.forEach(function (removedNode) {
+                            if (removedNode instanceof Element) {
+                                resizeObserver.unobserve(removedNode);
+                            }
+                        });
+                        mutation.addedNodes.forEach(function (addedNode) {
+                            if (addedNode instanceof Element) {
+                                resizeObserver.observe(addedNode, 
+                                // TODO: remove this, after remove ResizeObserver polyfill
+                                // @ts-ignore
+                                { box: 'border-box' });
+                            }
+                        });
+                        // should re-calculate group info when dom is removed and not added
+                        if (mutation.removedNodes.length && !mutation.addedNodes.length) {
+                            setTimeout(function () {
+                                if (mountStateRef.current)
+                                    throttleCalculateGroupInfo();
+                            }, 0);
+                        }
+                    }
+                }
             }
-            if (!isVertical) {
-                return allTabsSize.width > tabsSize.width;
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (mutations_1_1 && !mutations_1_1.done && (_a = mutations_1.return)) _a.call(mutations_1);
+                }
+                finally { if (e_3) throw e_3.error; }
             }
-            return allTabsSize.height > tabsSize.height;
-        };
-        var computedMoreModeChild = function (tabRefsMap) {
-            var labelArray = [];
-            tabRefsMap.forEach(function (value, key) {
-                labelArray.push({
-                    key: key,
-                    size: value.size ? value.size[oriStr] : 0,
-                });
-            });
-            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) {
-                return exports.findChildrenByKey(childrenProp, key);
-            });
-            var menuTabChild = menuTabLabel.map(function (key) {
-                return exports.findChildrenByKey(childrenProp, key);
-            });
-            tabsTabChildRef.current = tabsTabChild;
-            setMenuTabChild(menuTabChild);
+        });
+        mutationObserver.observe(tablist, {
+            childList: true,
+        });
+        return function () {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
         };
-        var computedStandardModeChild = function (tabRefsMap) {
-            var tabsTabLabel = [];
-            tabRefsMap.forEach(function (value, key) {
-                tabsTabLabel.push(key);
-            });
-            computeGroupingInfo(tabsTabLabel, []);
-            var tabsTabChild = tabsTabLabel.map(function (key) {
-                return exports.findChildrenByKey(childrenProp, key);
-            });
-            tabsTabChildRef.current = tabsTabChild;
-            setMenuTabChild([]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // No need calculate during the first rendering,
+    // resize observer will do this
+    foundation_1.useOnReRender(function () {
+        throttleCalculateGroupInfo();
+    }, [value], false);
+    foundation_1.useOnReRender(function () {
+        var e_4, _a;
+        var tabsInfo = getTabsInfoFromChildren(childrenProp);
+        var newGroupInfo = {
+            all: tabsInfo,
+            tab: [],
+            menu: [],
         };
-        var computeTabChild = function (tabsSize) {
-            var useMoreMode = computeWhetherToUseMoreMode(tabsSize, allTabsSizeRef.current);
-            setUseMoreMode(useMoreMode);
-            if (tabRefsMap) {
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                useMoreMode
-                    ? computedMoreModeChild(tabRefsMap)
-                    : computedStandardModeChild(tabRefsMap);
+        var _loop_1 = function (tabInfo) {
+            if (groupInfo.tab.some(function (_a) {
+                var key = _a.key;
+                return tabInfo.key === key;
+            })) {
+                newGroupInfo.tab.push(tabInfo);
+            }
+            else {
+                // push new tab or invisible old tab to menu group
+                newGroupInfo.menu.push(tabInfo);
             }
         };
-        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]) || '')) &&
-                !hasResizeRef.current &&
-                prevChildrenProp === childrenProp) {
-                return;
+        try {
+            // Prevent moreButton from flickering after children update
+            for (var tabsInfo_1 = tslib_1.__values(tabsInfo), tabsInfo_1_1 = tabsInfo_1.next(); !tabsInfo_1_1.done; tabsInfo_1_1 = tabsInfo_1.next()) {
+                var tabInfo = tabsInfo_1_1.value;
+                _loop_1(tabInfo);
             }
-            // 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;
         }
-    }, [
-        childrenProp,
-        prevChildrenProp,
-        isVertical,
-        onGroupInfoChange,
-        oriStr,
-        tabsSize,
-        valueProp,
-    ]);
-    var MoreMenuTabCmp = react_1.useMemo(function () {
-        var menuItems = react_1.default.Children.map(menuTabChild, function (child) {
-            return tslib_1.__assign({}, child.props);
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (tabsInfo_1_1 && !tabsInfo_1_1.done && (_a = tabsInfo_1.return)) _a.call(tabsInfo_1);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+        setGroupInfo(newGroupInfo);
+    }, [childrenProp], false);
+    react_1.useEffect(function () {
+        onGroupInfoChange === null || onGroupInfoChange === void 0 ? void 0 : onGroupInfoChange([
+            groupInfo.tab.map(function (_a) {
+                var index = _a.index, key = _a.key;
+                return ({ index: index, key: key });
+            }),
+            groupInfo.menu.map(function (_a) {
+                var index = _a.index, key = _a.key;
+                return ({ index: index, key: key });
+            }),
+        ]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [groupInfo]); // ignore onGroupInfoChange
+    var useMoreMode = groupInfo.menu.length > 0;
+    var MoreMenuTabCmp = (function () {
+        if (!useMoreMode)
+            return null;
+        var menuItems = groupInfo.menu.map(function (_a) {
+            var key = _a.key, element = _a.element;
+            return tslib_1.__assign(tslib_1.__assign({}, element.props), { key: key });
         });
         return useMoreMode ? (react_1.default.createElement(MoreMenuTab_1.MoreMenuTab, tslib_1.__assign({}, MoreButtonPropsRest, { key: MoreMenuTab_1.DEFAULT_MORE_MENU_TAB_LABEL, size: rest.size, menuItems: menuItems, ref: moreTabRef, onChange: onChange, orientation: orientation }))) : null;
-    }, [
-        MoreButtonPropsRest,
-        menuTabChild,
-        onChange,
-        orientation,
-        rest.size,
-        useMoreMode,
-    ]);
-    return (react_1.default.createElement(Tabs_1.default, tslib_1.__assign({}, rest, { ref: tabsRef, value: valueProp, variant: "standard", indicatorColor: "primary", textColor: "primary", onChange: onChange, orientation: orientation }),
-        tabsTabChildRef.current,
+    })();
+    var children = (function () {
+        var tabGroupElements = groupInfo.tab.map(function (_a) {
+            var index = _a.index, key = _a.key, tabValue = _a.value, element = _a.element;
+            return react_1.cloneElement(element, {
+                key: key,
+                value: tabValue,
+                'data-tab-origin-index': index,
+                'data-tab-key': key,
+            });
+        });
+        if (!useMoreMode)
+            return tabGroupElements;
+        return tslib_1.__spread(tabGroupElements, [
+            react_1.default.createElement(MoreMenuTabSentinel_1.MoreMenuTabSentinel, { id: "start", value: "sentinel-start", key: "sentinel-start", ref: sentinelStartRef, onFocus: function () {
+                    var _a;
+                    (_a = moreTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                } })
+        ], groupInfo.menu.map(function (_a) {
+            var index = _a.index, key = _a.key, tabValue = _a.value, element = _a.element;
+            return react_1.cloneElement(element, {
+                key: key,
+                value: tabValue,
+                'data-tab-origin-index': index,
+                'data-tab-key': key,
+                'aria-hidden': true,
+                disabled: true,
+                style: tslib_1.__assign(tslib_1.__assign({}, element.props.style), { opacity: 0, position: 'absolute', top: 0, left: 0 }),
+            });
+        }), [
+            react_1.default.createElement(MoreMenuTabSentinel_1.MoreMenuTabSentinel, { id: "end", value: "sentinel-end", key: "sentinel-end", onFocus: function () {
+                    var _a;
+                    var focusTarget = ((_a = sentinelStartRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling) ||
+                        moreTabRef.current;
+                    if (focusTarget)
+                        focusTarget.focus();
+                } }),
+        ]);
+    })();
+    return (react_1.default.createElement(Tabs_1.default, tslib_1.__assign({}, rest, { ref: tabsRef, value: value, variant: "standard", indicatorColor: "primary", textColor: "primary", onChange: onChange, orientation: orientation }),
+        children,
         MoreMenuTabCmp));
 });
 /** inner component */