@ringcentral/juno 2.33.0 → 2.35.0

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

@@ -1,232 +1,311 @@
 "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 _c = foundation_1.useRcPortalWindowContext().externalWindow, externalWindow = _c === void 0 ? window : _c;
+    var mountStateRef = foundation_1.useMountState();
+    var _d = 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 = _d[0], setGroupInfo = _d[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 (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, externalWindow);
+        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 externalWindow.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.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);
+                        }
+                    }
+                }
             }
-            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 */

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

@@ -1,36 +1,5 @@
-export declare const DEFAULT_SIZE: {
-    width: number;
-    height: number;
-};
-export declare const computeChildBySize: (labelArray: {
-    key: string;
-    size: number;
-}[], fixLabel: string | undefined, limitSize: number) => {
-    plainArr: string[];
-    groupArr: string[];
-};
-export declare const getDomBoundingClientSize: (dom: HTMLElement | null) => {
-    width: number;
-    height: number;
-};
-/**
- *
- * @param keyProp React.key
- * @param idx string
- * @example
- * getKey('tab_0', 0) => childIdx_0_propKey_tab_0
- * getKey(undefined, 1) => childIdx_1
- */
-export declare const getKey: (keyProp?: string | number | undefined, idx?: number | undefined) => string;
 export declare type GroupTabInfoType = {
-    index?: string;
-    key?: string;
+    index: number;
+    key: string | number;
 };
-/**
- *
- * @example
- * parseKey(childIdx_1) => { index: 1 }
- * parseKey(childIdx_1_propKey_tab_1) => { index: 1, key: tab_1 }
- */
-export declare const parseKey: (key: string) => GroupTabInfoType;
-export declare type RcTabsMoreMenuGroupInfoType = GroupTabInfoType[][];
+export declare type RcTabsMoreMenuGroupInfoType = [GroupTabInfoType[], GroupTabInfoType[]];

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

@@ -1,89 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_SIZE = {
-    width: 0,
-    height: 0,
-};
-exports.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,
-    };
-};
-exports.getDomBoundingClientSize = function (dom) {
-    if (!dom || dom.nodeType !== 1) {
-        return exports.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
- */
-exports.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 }
- */
-exports.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/components/Tabs/Tabs/MoreMenuTabs/utils/index.js

@@ -1,4 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./MoreMenuTabsUtils"), exports);