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

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

@@ -1,230 +1,310 @@
-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, } 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 mountStateRef = useMountState();
+    var _c = __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 = _c[0], setGroupInfo = _c[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 (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 = 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);
+        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 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 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);
+                        }
+                    }
+                }
             }
-            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 */

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

@@ -1,87 +0,0 @@
-export var DEFAULT_SIZE = {
-    width: 0,
-    height: 0,
-};
-export var computeChildBySize = function (labelArray, fixLabel, limitSize) {
-    var plainArr = [];
-    var groupArr = [];
-    var sumSize = 0;
-    var groupFlag = false;
-    labelArray.forEach(function (_label) {
-        var label = _label.key, size = _label.size;
-        if (groupFlag === false && sumSize + size < limitSize) {
-            sumSize += size;
-            plainArr.push(label);
-        }
-        else {
-            groupFlag = true;
-            groupArr.push(label);
-        }
-    });
-    if (fixLabel && groupArr.includes(fixLabel)) {
-        plainArr = [];
-        groupArr = [];
-        var fixLabelSize_1 = 0;
-        labelArray.forEach(function (_label) {
-            var label = _label.key, size = _label.size;
-            if (label === fixLabel) {
-                fixLabelSize_1 = size;
-            }
-        });
-        var sumFixSize_1 = 0;
-        var groupFlag_1 = false;
-        labelArray.forEach(function (_label) {
-            var label = _label.key, size = _label.size;
-            if (label === fixLabel) {
-                return;
-            }
-            if (groupFlag_1 === false && sumFixSize_1 + size < limitSize - fixLabelSize_1) {
-                sumFixSize_1 += size;
-                plainArr.push(label);
-            }
-            else {
-                groupFlag_1 = true;
-                groupArr.push(label);
-            }
-        });
-        plainArr.push(fixLabel);
-    }
-    return {
-        plainArr: plainArr,
-        groupArr: groupArr,
-    };
-};
-export var getDomBoundingClientSize = function (dom) {
-    if (!dom || dom.nodeType !== 1) {
-        return DEFAULT_SIZE;
-    }
-    var _a = dom.getBoundingClientRect(), width = _a.width, height = _a.height;
-    return {
-        width: width,
-        height: height,
-    };
-};
-/**
- *
- * @param keyProp React.key
- * @param idx string
- * @example
- * getKey('tab_0', 0) => childIdx_0_propKey_tab_0
- * getKey(undefined, 1) => childIdx_1
- */
-export var getKey = function (keyProp, idx) {
-    return "childIdx_" + idx + (keyProp ? "_propKey_" + keyProp : '');
-};
-/**
- *
- * @example
- * parseKey(childIdx_1) => { index: 1 }
- * parseKey(childIdx_1_propKey_tab_1) => { index: 1, key: tab_1 }
- */
-export var parseKey = function (key) {
-    var match = /^(?:childIdx_)(\d+)(?:_propKey_)?(.*)/gi.exec(key);
-    return {
-        index: match === null || match === void 0 ? void 0 : match[1],
-        key: match === null || match === void 0 ? void 0 : match[2].replace(/^\.\$/i, ''),
-    };
-};

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

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

package/es6/foundation/hooks/useOnReRender/useOnReRender.js

@@ -1,12 +1,15 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect, useRef, useEffect } from 'react';
 import { useEventCallback } from '../useEventCallback';
 /**
  * only trigger when re-render, not trigger on component first render
  */
-export var useOnReRender = function (cb, deps) {
+export var useOnReRender = function (cb, deps, isLayout) {
+    if (isLayout === void 0) { isLayout = true; }
     var count = useRef(0);
     var method = useEventCallback(cb);
-    useLayoutEffect(function () {
+    var isLayoutRef = useRef(isLayout);
+    var useTargetEffect = isLayoutRef.current ? useLayoutEffect : useEffect;
+    useTargetEffect(function () {
         if (count.current === 0) {
             count.current = 1;
             return function () { };

package/foundation/hooks/useOnReRender/useOnReRender.d.ts

@@ -2,4 +2,4 @@ import { DependencyList } from 'react';
 /**
  * only trigger when re-render, not trigger on component first render
  */
-export declare const useOnReRender: (cb: () => any, deps?: DependencyList | undefined) => void;
+export declare const useOnReRender: (cb: () => any, deps?: DependencyList | undefined, isLayout?: boolean) => void;

package/foundation/hooks/useOnReRender/useOnReRender.js

@@ -5,10 +5,13 @@ var useEventCallback_1 = require("../useEventCallback");
 /**
  * only trigger when re-render, not trigger on component first render
  */
-exports.useOnReRender = function (cb, deps) {
+exports.useOnReRender = function (cb, deps, isLayout) {
+    if (isLayout === void 0) { isLayout = true; }
     var count = react_1.useRef(0);
     var method = useEventCallback_1.useEventCallback(cb);
-    react_1.useLayoutEffect(function () {
+    var isLayoutRef = react_1.useRef(isLayout);
+    var useTargetEffect = isLayoutRef.current ? react_1.useLayoutEffect : react_1.useEffect;
+    useTargetEffect(function () {
         if (count.current === 0) {
             count.current = 1;
             return function () { };

package/package.json

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