@ringcentral/juno 2.33.0 → 2.35.0

package/es6/components/Presence/styles/StyledPresence.js

@@ -15,11 +15,11 @@ export var _StyledPresence = forwardRef(function (_a, ref) {
 export var StyledPresence = styled(_StyledPresence)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
     ";\n"])), function (_a) {
     var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      margin: ", "px;\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
-        ";\n      margin: ", "px;\n      ",
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
+        ";\n      ",
         ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
         ? getParsePaletteColor(color)
-        : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), borderSizeValue, fakeBorder({
+        : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), fakeBorder({
         inset: false,
         color: palette2('neutral', 'l01'),
         size: borderSizeValue,

package/es6/components/Presence/utils/RcPresenceUtils.js

@@ -2,7 +2,7 @@ import { palette2 } from '../../../foundation';
 // first is width, second is border
 export var RcPresenceSizes = {
     xxsmall: [8, 1],
-    xsmall: [8, 2],
+    xsmall: [10, 1],
     small: [10, 2],
     medium: [12, 2],
     large: [16, 2],

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

@@ -7,7 +7,6 @@ import { RcListItemIcon, RcListItemText } from '../../../List';
 import { RcMenu, RcMenuItem, } from '../../../Menu';
 import { RcTooltip } from '../../../Tooltip';
 import { RcTab } from '../../Tab';
-import { getKey } from '../MoreMenuTabs/utils';
 import { MoreMenuTabStyle } from './styles';
 var DEFAULT_MORE_MENU_TAB_LABEL = 'more_menu_tab';
 var _MoreMenuTab = forwardRef(function (props, ref) {
@@ -43,19 +42,19 @@ var _MoreMenuTab = 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 = __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 = __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.createElement(MenuItemComponent, { key: getKey(menuItemRest.key, idx), disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
+            return (React.createElement(MenuItemComponent, { key: key, disabled: disabled, selected: selected, value: value, onClick: handleClick, "data-test-automation-id": menuItemRest['data-test-automation-id'] },
                 icon ? React.createElement(RcListItemIcon, null, icon) : null,
                 React.createElement(RcListItemText, { primary: label || value })));
         });
     }, [MenuItemComponent, menuItems, onChange]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(RcTab, __assign({}, rest, { ref: ref, onClick: handleTabClick, label: MoreIcon, value: DEFAULT_MORE_MENU_TAB_LABEL, "aria-haspopup": "true", "aria-controls": menuId })),
+        React.createElement(RcTab, __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.createElement(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: open, variant: "menu", onClose: handleMenuClose }), MenuList)));
 });
 /** inner component */

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

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+export var MoreMenuTabSentinel = forwardRef(function (props, ref) {
+    var onFocus = props.onFocus, id = props.id;
+    return (React.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 }));
+});
+MoreMenuTabSentinel.displayName = 'MoreMenuTabSentinel';

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

@@ -1,230 +1,309 @@
-import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib";
-import React, { createRef, forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
-import isEqual from 'lodash/isEqual';
+import { __assign, __makeTemplateObject, __read, __rest, __spread, __values } from "tslib";
 import MuiTabs from '@material-ui/core/Tabs';
-import { styled, useForceUpdate, useForkRef, usePrevious, useResizeObserver, useThrottle, } from '../../../../foundation';
+import React, { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState, } from 'react';
+import { getResizeObserver, styled, useForkRef, useMountState, useOnReRender, useThrottle, useRcPortalWindowContext, } from '../../../../foundation';
 import { DEFAULT_MORE_MENU_TAB_LABEL, MoreMenuTab, } from '../MoreMenuTab';
-import { computeChildBySize, DEFAULT_SIZE, getDomBoundingClientSize, getKey, parseKey, } from './utils';
-export var findChildrenByKey = function (childrenProp, key) {
-    var children;
-    React.Children.forEach(childrenProp, function (child, idx) {
-        if (React.isValidElement(child)) {
-            var keyString = typeof child.key === 'string' ? child.key : '';
-            if (getKey(keyString, idx) === key) {
-                children = child;
-            }
+import { MoreMenuTabSentinel } from './MoreMenuTabSentinel';
+// with of more button with a icon
+var basicMoreButtonSize = 44;
+var getTabsInfoFromChildren = function (children) {
+    var childrenInfo = React.Children.map(children, function (child, index) {
+        var _a, _b;
+        if (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 = 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 = __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 = __rest(props, ["orientation", "children", "value", "onChange", "MoreButtonProps", "resizeThrottleTime"]);
     var onGroupInfoChange = MoreButtonProps.onGroupInfoChange, MoreButtonPropsRest = __rest(MoreButtonProps, ["onGroupInfoChange"]);
-    var prevChildrenProp = usePrevious(function () { return childrenProp; });
     var isVertical = orientation === 'vertical';
-    var oriStr = isVertical ? 'height' : 'width';
+    var sizeKey = isVertical ? 'offsetHeight' : 'offsetWidth';
     var innerRef = useRef(null);
     var moreTabRef = useRef(null);
+    var sentinelStartRef = useRef(null);
     var tabsRef = useForkRef(innerRef, ref);
-    var tabRefsMapRef = useRef();
-    var moreTabSizeRef = useRef(DEFAULT_SIZE);
-    var allTabsSizeRef = useRef(DEFAULT_SIZE);
-    var tabsTabChildRef = useRef([]);
-    var tabsSizeRef = useRef(DEFAULT_SIZE);
-    var groupingRef = useRef();
-    var _c = __read(useState([]), 2), menuTabChild = _c[0], setMenuTabChild = _c[1];
-    var _d = __read(useState(true), 2), useMoreMode = _d[0], setUseMoreMode = _d[1];
-    var hasResizeRef = useRef(true);
-    var forceUpdate = 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 = useThrottle(sizeChange, resizeThrottleTime);
-    useResizeObserver(innerRef, function (_a) {
-        var _b = __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.Children.forEach(childrenProp, function (child, index) {
-            var _a = child.props, ref = _a.ref, value = _a.value;
-            var innerRef = createRef();
-            var tabRef = ref ? useForkRef(innerRef, ref) : innerRef;
-            var childrenValue = value || index;
-            var children = React.cloneElement(child, {
-                ref: tabRef,
-                value: childrenValue,
-            });
-            var keyString = typeof child.key === 'string' ? child.key : '';
-            tabRefs_1.set(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 = __assign({}, DEFAULT_SIZE);
-        if (tabRefsMap && tabRefsMap.size !== 0) {
-            tabRefsMap.forEach(function (value, key) {
-                var _a = 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 _c = useRcPortalWindowContext().externalWindow, externalWindow = _c === void 0 ? window : _c;
+    var mountStateRef = useMountState();
+    var _d = __read(useState(function () {
+        var tabsInfo = getTabsInfoFromChildren(childrenProp);
+        if (!tabsInfo) {
+            return {
+                all: [],
+                tab: [],
+                menu: [],
+            };
         }
-        return allTabsSize;
-    };
-    // get real render size when render
-    useEffect(function () {
-        if (childrenProp === prevChildrenProp) {
+        return {
+            all: tabsInfo,
+            tab: tabsInfo,
+            menu: [],
+        };
+    }), 2), groupInfo = _d[0], setGroupInfo = _d[1];
+    var throttleCalculateGroupInfo = 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 = __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 (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 = 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]);
-    useEffect(function () {
-        var _a;
-        var currSelectTabItem;
-        var tabRefsMap = tabRefsMapRef.current;
-        if (tabRefsMap) {
-            currSelectTabItem = __spread(tabRefsMap).find(function (_a) {
-                var _b = __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(groupingRef.current, newGrouping)) {
-                groupingRef.current = newGrouping;
-                onGroupInfoChange === null || onGroupInfoChange === void 0 ? void 0 : onGroupInfoChange([
-                    tabsTabLabel.map(function (key) { return parseKey(key); }),
-                    menuTabLabel.map(function (key) { return 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);
+    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 = getResizeObserver(throttleCalculateGroupInfo, externalWindow);
+        resizeObserver.observe(tablist);
+        try {
+            for (var _c = __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' });
             }
-            if (allTabsSize.width === 0 || allTabsSize.height === 0) {
-                allTabsSize = updateAllTabsSize();
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            if (!isVertical) {
-                return allTabsSize.width > tabsSize.width;
+            finally { if (e_2) throw e_2.error; }
+        }
+        var mutationObserver = new externalWindow.MutationObserver(function (mutations) {
+            var e_3, _a;
+            try {
+                for (var mutations_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.getAttribute('role') === 'tab') {
+                                resizeObserver.unobserve(removedNode);
+                            }
+                        });
+                        mutation.addedNodes.forEach(function (addedNode) {
+                            if (addedNode.getAttribute('role') === 'tab') {
+                                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);
+                        }
+                    }
+                }
             }
-            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 = 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 findChildrenByKey(childrenProp, key);
-            });
-            var menuTabChild = menuTabLabel.map(function (key) {
-                return findChildrenByKey(childrenProp, key);
-            });
-            tabsTabChildRef.current = tabsTabChild;
-            setMenuTabChild(menuTabChild);
+            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; }
+            }
+        });
+        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 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
+    useOnReRender(function () {
+        throttleCalculateGroupInfo();
+    }, [value], false);
+    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 = __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 = useMemo(function () {
-        var menuItems = React.Children.map(menuTabChild, function (child) {
-            return __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);
+    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 __assign(__assign({}, element.props), { key: key });
         });
         return useMoreMode ? (React.createElement(MoreMenuTab, __assign({}, MoreButtonPropsRest, { key: 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.createElement(MuiTabs, __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 cloneElement(element, {
+                key: key,
+                value: tabValue,
+                'data-tab-origin-index': index,
+                'data-tab-key': key,
+            });
+        });
+        if (!useMoreMode)
+            return tabGroupElements;
+        return __spread(tabGroupElements, [
+            React.createElement(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 cloneElement(element, {
+                key: key,
+                value: tabValue,
+                'data-tab-origin-index': index,
+                'data-tab-key': key,
+                'aria-hidden': true,
+                disabled: true,
+                style: __assign(__assign({}, element.props.style), { opacity: 0, position: 'absolute', top: 0, left: 0 }),
+            });
+        }), [
+            React.createElement(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.createElement(MuiTabs, __assign({}, rest, { ref: tabsRef, value: value, variant: "standard", indicatorColor: "primary", textColor: "primary", onChange: onChange, orientation: orientation }),
+        children,
         MoreMenuTabCmp));
 });
 /** inner component */