@ringcentral/juno 2.2.0 → 2.3.0

package/es6/components/Downshift/utils/useDownshiftTag.js

@@ -2,8 +2,7 @@ import { __assign, __read, __rest, __spread } from "tslib";
 import { useMemo, useRef, useState } from 'react';
 import isString from 'lodash/isString';
 import uniqueId from 'lodash/uniqueId';
-import { useControlled } from '@material-ui/core/utils';
-import { combineProps, useEventCallback, useKeyboardMoveFocus, useRefState, } from '../../../foundation';
+import { combineProps, useControlled, useEventCallback, useKeyboardMoveFocus, useRefState, } from '../../../foundation';
 import { DEFAULT_GET_OPTION_LABEL, downshiftComponentName, stringArrToRegExp, } from './DownshiftUtils';
 var DOWNSHIFT_ID_TOKEN = 'rc-chip-';
 /** @inner inner hook work with useDownshift */

package/es6/components/Forms/Picker/DatePicker/DatePicker.js

@@ -2,11 +2,10 @@ import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, } from 'react';
 import moment from 'moment';
 import MomentUtils from '@date-io/moment';
-import { useControlled } from '@material-ui/core/utils';
 import { MuiPickersUtilsProvider, useUtils as useMuiUtils, } from '@material-ui/pickers';
 import { findClosestEnabledDate as MuiFindClosestEnabledDate } from '@material-ui/pickers/_helpers/date-utils';
 import { DateBorder } from '@ringcentral/juno-icon';
-import { combineClasses, combineProps, omit, styled, useDeprecatedCheck, useEventCallback, useThemeProps, } from '../../../../foundation';
+import { combineClasses, combineProps, omit, styled, useControlled, useDeprecatedCheck, useEventCallback, useThemeProps, } from '../../../../foundation';
 import { PickerTextField, } from '../utils';
 import { Calendar } from './Calendar';
 import { invalidateDateInRange, RcDatePickerClasses, ScreenReaderProvider, } from './utils';

package/es6/components/Forms/Select/PlainSelect/PlainSelect.js

@@ -1,7 +1,6 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useMemo, useState } from 'react';
-import { useControlled } from '@material-ui/core';
-import { combineProps, hasValue, logInDev, styled, } from '../../../../foundation';
+import { combineProps, hasValue, logInDev, useControlled, styled, } from '../../../../foundation';
 import { RcButton } from '../../../Buttons';
 import { RcMenu } from '../../../Menu';
 import { RcVirtualizedMenu } from '../../../VirtualizedMenu';

package/es6/components/Table/Table.js

@@ -0,0 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import MuiTable from '@material-ui/core/Table';
+import { styled, useThemeProps } from '../../foundation';
+import React, { forwardRef, useMemo } from 'react';
+import { RcTableContext } from './context';
+var _RcTable = forwardRef(function (props, ref) {
+    var _a = useThemeProps({ props: props, name: 'RcTable' }), children = _a.children, size = _a.size, rest = __rest(_a, ["children", "size"]);
+    var tableContextValue = useMemo(function () { return ({ size: size }); }, [size]);
+    return (React.createElement(MuiTable, __assign({}, rest, { ref: ref }),
+        React.createElement(RcTableContext.Provider, { value: tableContextValue }, children)));
+});
+var RcTable = styled(_RcTable)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+RcTable.displayName = 'RcTable';
+export { RcTable };
+var templateObject_1;

package/es6/components/Table/TableBody/TableBody.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import MuiTableBody from '@material-ui/core/TableBody';
+import React, { forwardRef } from 'react';
+import { styled, useThemeProps } from '../../../foundation';
+var _RcTableBody = forwardRef(function (props, ref) {
+    var _a = useThemeProps({ props: props, name: 'RcTableHead' }), children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(MuiTableBody, __assign({}, rest, { ref: ref }), children));
+});
+var RcTableBody = styled(_RcTableBody)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+RcTableBody.displayName = 'RcTableBody';
+export { RcTableBody };
+var templateObject_1;

package/es6/components/Table/TableBody/index.js

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

package/es6/components/Table/TableCell/TableCell.js

@@ -0,0 +1,37 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef, useMemo, useContext } from 'react';
+import MuiTableCell from '@material-ui/core/TableCell';
+import { combineClasses, styled, useThemeProps, } from '../../../foundation';
+import { TableCellStyle } from './styles';
+import { RcTableCellClasses } from './utils';
+import { RcButtonBase } from '../../Buttons';
+import { RcIcon } from '../../Icon';
+import { JumpToLatest as AscSortIcon, JumpToUnread as DescSortIcon, } from '@ringcentral/juno-icon';
+import clsx from 'clsx';
+import { RcTableContext } from '../context';
+var _RcTableCell = forwardRef(function (props, ref) {
+    var _a = useThemeProps({ props: props, name: 'RcTableCell' }), classesProp = _a.classes, childrenProp = _a.children, size = _a.size, sortDirection = _a.sortDirection, _b = _a.activeSort, activeSort = _b === void 0 ? false : _b, rest = __rest(_a, ["classes", "children", "size", "sortDirection", "activeSort"]);
+    var classes = combineClasses(RcTableCellClasses, classesProp);
+    var children = useMemo(function () {
+        var _a;
+        if (sortDirection) {
+            return (React.createElement(RcButtonBase, { disableRipple: true, className: clsx(classes.sortButton, (_a = {},
+                    _a[classes.activeSort] = activeSort,
+                    _a)) },
+                childrenProp,
+                React.createElement(RcIcon, { size: "small", className: classes.sortIcon, symbol: sortDirection === 'asc' ? DescSortIcon : AscSortIcon })));
+        }
+        return childrenProp;
+    }, [activeSort, childrenProp, classes, sortDirection]);
+    return (React.createElement(MuiTableCell, __assign({}, rest, (sortDirection ? { sortDirection: sortDirection } : {}), { ref: ref, classes: classes }), children));
+});
+var RcTableCell = styled(_RcTableCell).attrs(function (_a) {
+    var _b;
+    var sizeProp = _a.size, _c = _a.sortDirection, sortDirection = _c === void 0 ? false : _c, rest = __rest(_a, ["size", "sortDirection"]);
+    var contextSize = useContext(RcTableContext).size;
+    var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : contextSize) !== null && _b !== void 0 ? _b : 'medium';
+    return __assign(__assign({}, rest), { size: size, sortDirection: sortDirection });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TableCellStyle);
+RcTableCell.displayName = 'RcTableCell';
+export { RcTableCell };
+var templateObject_1;

package/es6/components/Table/TableCell/index.js

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

package/es6/components/Table/TableCell/styles/TableCellStyle.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from "tslib";
+import { css, fakeBorder, focusVisible, palette2, px, spacing, typography, } from '../../../../foundation';
+import { RcIcon } from '../../../Icon';
+import { RcTableCellClasses } from '../utils';
+var SizeMap = {
+    large: 56,
+    medium: 48,
+    small: 40,
+};
+export var TableCellStyle = function (prop) {
+    var size = prop.size, sortDirection = prop.sortDirection;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "], ["\n    box-sizing: border-box;\n    padding: ", ";\n    min-width: 96px;\n\n    &.", " {\n      ", "\n      height: 40px;\n      border-bottom: 1px solid ", ";\n      color: ", ";\n      background-color: ", ";\n\n      padding: ", ";\n\n      .", " {\n        opacity: 0;\n        padding: ", ";\n      }\n\n      .", " {\n        color: ", ";\n\n        .", " {\n          opacity: 1;\n        }\n      }\n\n      .", " {\n        display: inline-flex;\n        justify-content: flex-start;\n        flex-direction: inherit;\n        align-items: center;\n\n        height: 100%;\n        width: 100%;\n        padding: ", ";\n\n        ", " {\n          color: ", ";\n        }\n\n        &:hover {\n          background-color: ", ";\n\n          .", " {\n            opacity: 1;\n          }\n        }\n\n        ", " {\n          ", "\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.", " {\n      ", "\n      color: ", ";\n\n      padding: ", ";\n      height: ", ";\n    }\n  "])), spacing(0, 2), RcTableCellClasses.head, typography('caption2'), palette2('neutral', 'l02'), palette2('neutral', 'f05'), palette2('neutral', 'b02'), Boolean(sortDirection) && 'unset', RcTableCellClasses.sortIcon, spacing(0, 2), RcTableCellClasses.activeSort, palette2('interactive', 'f01'), RcTableCellClasses.sortIcon, RcTableCellClasses.sortButton, spacing(0, 2), RcIcon, palette2('neutral', 'f04'), palette2('neutral', 'b03'), RcTableCellClasses.sortIcon, focusVisible, fakeBorder({ color: palette2('interactive', 'f01') }), palette2('neutral', 'b03'), RcTableCellClasses.body, typography('body1'), palette2('neutral', 'f06'), size === 'auto' && spacing(3, 2), size !== 'auto' && px(SizeMap[size]));
+};
+var templateObject_1;

package/es6/components/Table/TableCell/styles/index.js

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

package/es6/components/Table/TableCell/utils/TableCellUtils.js

@@ -0,0 +1,2 @@
+import { RcClasses } from '../../../../foundation';
+export var RcTableCellClasses = RcClasses(['head', 'body', 'sortIcon', 'activeSort', 'sortButton'], 'RcTableCell');

package/es6/components/Table/TableCell/utils/index.js

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

package/es6/components/Table/TableContainer/TableContainer.js

@@ -0,0 +1,20 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import MuiTableContainer from '@material-ui/core/TableContainer';
+import React, { forwardRef } from 'react';
+import { styled, useThemeProps } from '../../../foundation';
+import { TableContainerStyle } from './styles';
+var _RcTableContainer = forwardRef(function (props, ref) {
+    var _a = useThemeProps({
+        props: props,
+        name: 'RcTableContainer',
+    }), children = _a.children, bordered = _a.bordered, rest = __rest(_a, ["children", "bordered"]);
+    return (React.createElement(MuiTableContainer, __assign({}, rest, { ref: ref }), children));
+});
+var RcTableContainer = styled(_RcTableContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TableContainerStyle);
+RcTableContainer.defaultProps = {
+    bordered: false,
+    square: false,
+};
+RcTableContainer.displayName = 'RcTableContainer';
+export { RcTableContainer };
+var templateObject_1;

package/es6/components/Table/TableContainer/index.js

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

package/es6/components/Table/TableContainer/styles/TableContainerStyle.js

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from "tslib";
+import { css, palette2, px } from '../../../../foundation';
+import { RcTableBody } from '../../TableBody';
+import { RcTableCell } from '../../TableCell';
+import { RcTableRow } from '../../TableRow';
+export var TableContainerStyle = function (props) {
+    var bordered = props.bordered, square = props.square;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ",
+        "\n  "])), bordered && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "], ["\n      border-radius: ", ";\n      border: 1px solid ", ";\n\n      ", " ", ":last-child ", " {\n        border: none;\n      }\n    "])), !square && px(4), palette2('neutral', 'l02'), RcTableBody, RcTableRow, RcTableCell));
+};
+var templateObject_1, templateObject_2;

package/es6/components/Table/TableContainer/styles/index.js

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

package/es6/components/Table/TableHead/TableHead.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import MuiTableHead from '@material-ui/core/TableHead';
+import React, { forwardRef } from 'react';
+import { styled, useThemeProps } from '../../../foundation';
+var _RcTableHead = forwardRef(function (props, ref) {
+    var _a = useThemeProps({ props: props, name: 'RcTableHead' }), children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(MuiTableHead, __assign({}, rest, { ref: ref }), children));
+});
+var RcTableHead = styled(_RcTableHead)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+RcTableHead.displayName = 'RcTableHead';
+export { RcTableHead };
+var templateObject_1;

package/es6/components/Table/TableHead/index.js

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

package/es6/components/Table/TableRow/TableRow.js

@@ -0,0 +1,18 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef, useMemo } from 'react';
+import MuiTableRow from '@material-ui/core/TableRow';
+import { combineClasses, styled, useThemeProps, } from '../../../foundation';
+import { TableRowStyle } from './styles';
+import { RcTableRowClasses } from './utils';
+import clsx from 'clsx';
+var _RcTableRow = forwardRef(function (props, ref) {
+    var _a;
+    var _b = useThemeProps({ props: props, name: 'RcTableRow' }), className = _b.className, classesProp = _b.classes, children = _b.children, disabled = _b.disabled, rest = __rest(_b, ["className", "classes", "children", "disabled"]);
+    var classes = useMemo(function () { return combineClasses(RcTableRowClasses, classesProp); }, [classesProp]);
+    return (React.createElement(MuiTableRow, __assign({}, rest, { ref: ref, classes: classes, className: clsx(className, (_a = {}, _a[RcTableRowClasses.disabled] = disabled, _a)) }), children));
+});
+var RcTableRow = styled(_RcTableRow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), TableRowStyle);
+RcTableRow.defaultProps = {};
+RcTableRow.displayName = 'RcTableRow';
+export { RcTableRow };
+var templateObject_1;

package/es6/components/Table/TableRow/index.js

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

package/es6/components/Table/TableRow/styles/TableRowStyle.js

@@ -0,0 +1,7 @@
+import { __makeTemplateObject } from "tslib";
+import { css, nonTouchHoverMedia, palette2, setOpacity, } from '../../../../foundation';
+import { RcTableRowClasses } from '../utils';
+export var TableRowStyle = function () {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n      &.", ", &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &.", ", &.", ", &:hover {\n        background-color: unset;\n      }\n    }\n  "], ["\n    ", " {\n      &.", ", &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &.", ", &.", ", &:hover {\n        background-color: unset;\n      }\n    }\n  "])), nonTouchHoverMedia, RcTableRowClasses.hover, setOpacity(palette2('action', 'grayLight'), '08'), RcTableRowClasses.selected, setOpacity(palette2('interactive', 'f01'), '08'), RcTableRowClasses.disabled, RcTableRowClasses.selected, RcTableRowClasses.hover);
+};
+var templateObject_1;

package/es6/components/Table/TableRow/styles/index.js

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

package/es6/components/Table/TableRow/utils/TableRowUtils.js

@@ -0,0 +1,2 @@
+import { RcClasses } from '../../../../foundation';
+export var RcTableRowClasses = RcClasses(['selected', 'hover', 'disabled'], 'RcTableRow');

package/es6/components/Table/TableRow/utils/index.js

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

package/es6/components/Table/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var RcTableContext = createContext({});

package/es6/components/Table/index.js

@@ -0,0 +1,7 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableContainer';
+export * from './TableHead';
+export * from './TableRow';
+export * from './context';

package/es6/components/Tables/TableHead.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { useThemeProps } from '../../foundation';
 import { StyledTableRow } from './styled';
 import { RcTableHeadCell } from './TableHeadCell';
 import { ORDER_TABLE_BY } from './types';
-var RcTableHeadView = function (inProps) {
-    var props = useThemeProps({ props: inProps, name: 'RcTableHeadView' });
+var RcTableHeadView = function (props) {
     var columnData = props.columnData, sortMap = props.sortMap, sortHandler = props.sortHandler;
     return (React.createElement("thead", null,
         React.createElement(StyledTableRow, null, columnData.map(function (column) {

package/es6/components/Tables/TableHeadCell.js

@@ -3,12 +3,11 @@ import React, { useMemo } from 'react';
 import isFunction from 'lodash/isFunction';
 import isNumber from 'lodash/isNumber';
 import { JumpToLatest as arrowDown, JumpToUnread as arrowUp, } from '@ringcentral/juno-icon';
-import { useA11yKeyEvent, useThemeProps } from '../../foundation';
+import { useA11yKeyEvent } from '../../foundation';
 import { RcIcon } from '../Icon';
 import { StyledSortIconWrapper, StyledTableHeadCell, StyledTableHeadCellContent, StyledTableHeadText, } from './styled';
 import { ARIA_SORT_VALUES, ORDER_TABLE_BY, SORT_ICON_CLASS, } from './types';
-var RcTableHeadCell = function (inProps) {
-    var props = useThemeProps({ props: inProps, name: 'RcTableHeadCell' });
+var RcTableHeadCell = function (props) {
     var automationID = props.automationID, title = props.title, width = props.width, sortDirection = props.sortDirection, sortKey = props.sortKey, textAlign = props.textAlign;
     var onClick = function () {
         var sortHandler = props.sortHandler, sortKey = props.sortKey, sortDirection = props.sortDirection;

package/es6/components/Tooltip/utils/useTooltipForceHide.js

@@ -1,8 +1,24 @@
 import { __read } from "tslib";
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useRef } from 'react';
-import { useChange, useEventCallback, useEventListener, usePrevious, useRefState, } from '../../../foundation';
+import { logInDev, useChange, useEventCallback, useEventListener, usePrevious, useRefState, } from '../../../foundation';
 export var useTooltipForceHide = function (_a) {
     var tooltipForceHide = _a.tooltipForceHide, openProp = _a.open, onClose = _a.onClose, onOpen = _a.onOpen, ref = _a.ref;
+    if (process.env.NODE_ENV !== 'production') {
+        useChange(function (prev) {
+            // ignore first time
+            if (prev !== undefined) {
+                logInDev({
+                    component: 'RcTooltip',
+                    message: 'Should not change tooltipForceHide between controlled and uncontrolled, tooltipForceHide should always be boolean value',
+                    level: 'error',
+                });
+            }
+        }, function () { return tooltipForceHide === undefined; });
+    }
+    // * when not set tooltipForceHide, always return undefined directly, not bind any event addition
+    if (tooltipForceHide === undefined)
+        return undefined;
     var _b = __read(useRefState(false), 2), openRef = _b[0], setOpen = _b[1];
     var isOverRef = useRef(false);
     var openState = tooltipForceHide ? false : openProp !== null && openProp !== void 0 ? openProp : openRef.current;
@@ -35,14 +51,12 @@ export var useTooltipForceHide = function (_a) {
         setOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
     });
-    return tooltipForceHide !== undefined
-        ? {
-            disableFocusListener: tooltipForceHide,
-            disableHoverListener: tooltipForceHide,
-            disableTouchListener: tooltipForceHide,
-            open: openState,
-            onOpen: handleOpen,
-            onClose: handleClose,
-        }
-        : undefined;
+    return {
+        disableFocusListener: tooltipForceHide,
+        disableHoverListener: tooltipForceHide,
+        disableTouchListener: tooltipForceHide,
+        open: openState,
+        onOpen: handleOpen,
+        onClose: handleClose,
+    };
 };

package/es6/components/index.js

@@ -41,7 +41,7 @@ export * from './Responsive';
 export * from './Snackbar';
 export * from './Stepper';
 export * from './TablePagination';
-export * from './Tables';
+export * from './Table';
 export * from './Tabs';
 export * from './Tag';
 export * from './Text';

package/es6/foundation/hooks/index.js

@@ -2,12 +2,14 @@ export * from './useA11yKeyEvent';
 export * from './useAnnouncer';
 export * from './useAudio';
 export * from './useChange';
+export * from './useControlled';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
 export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
+export * from './useGlobalListener';
 export * from './useHiddenTabindex';
 export * from './useId';
 export * from './useInterval';

package/es6/foundation/hooks/useControlled/index.js

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

package/es6/foundation/hooks/useControlled/useControlled.js

@@ -0,0 +1 @@
+export { useControlled } from '@material-ui/core/utils';

package/es6/foundation/hooks/useEventListener/useEventListener.js

@@ -1,6 +1,6 @@
 import { __read } from "tslib";
 import { useEffect, useRef } from 'react';
-import { isRef } from '../../utils/isRef';
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * bind event when component mount and auto remove event when destroy.
@@ -26,16 +26,18 @@ export function useEventListener(target) {
     var listener = useEventCallback(cb);
     var cancelRef = useRef(function () { });
     var bindRef = useRef(function () { });
-    var currentRefElm = isRef(target) && target.current;
+    var currentRefElm = getRefElement(target);
     useEffect(function () {
         if (!target)
             return;
-        var elm = isRef(target) ? target.current : target;
-        if (!elm) {
+        var currentElm = getRefElement(target);
+        if (!currentElm) {
             return cancelRef.current;
         }
-        bindRef.current = function () { return elm.addEventListener(key, listener, options); };
-        cancelRef.current = function () { return elm.removeEventListener(key, listener, options); };
+        bindRef.current = function () { return currentElm.addEventListener(key, listener, options); };
+        cancelRef.current = function () {
+            return currentElm.removeEventListener(key, listener, options);
+        };
         bindRef.current();
         return cancelRef.current;
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/es6/foundation/hooks/useGlobalListener/index.js

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

package/es6/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -0,0 +1,130 @@
+import { useEffect, useRef } from 'react';
+import { getRefElement, logInDev } from '../../utils';
+import { useEventCallback } from '../useEventCallback';
+export var globalListenerEventMap = new Map();
+/**
+ * create globalListener handler for share one listener event
+ *
+ * @example
+ * ```ts
+ * const globalListener = createGlobalListener('focus', () => { console.log('focus') });
+ * const globalListener2 = createGlobalListener('focus', () => { console.log('focus') });
+ * globalListener.listen();
+ * globalListener2.listen();
+ *
+ * => // that will only create an event listener on window, but every callback will get emit value when event triggered
+ * ```
+ */
+export var createGlobalListener = function (key, listener, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d;
+    var listening = false;
+    var getMapValue = function () { return globalListenerEventMap.get(customKey); };
+    var addListener = function () {
+        if (listening)
+            return;
+        var savedEvent = getMapValue();
+        if (!(savedEvent === null || savedEvent === void 0 ? void 0 : savedEvent.exec)) {
+            var exec = function (e) {
+                var event = getMapValue();
+                event === null || event === void 0 ? void 0 : event.listeners.forEach(function (c) { return c(e); });
+            };
+            globalListenerEventMap.set(customKey, {
+                exec: exec,
+                listeners: new Set([listener]),
+            });
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.addEventListener(key, exec);
+        }
+        else {
+            savedEvent.listeners.add(listener);
+        }
+        listening = true;
+    };
+    var removeListener = function () {
+        if (!listening)
+            return;
+        listening = false;
+        var _savedEvent = getMapValue();
+        if (!_savedEvent)
+            return;
+        var listeners = _savedEvent.listeners;
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            var target = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec);
+            globalListenerEventMap.delete(customKey);
+        }
+    };
+    return {
+        /**
+         * bind listener again
+         */
+        listen: function () { return addListener(); },
+        /**
+         * remove listener
+         */
+        remove: function () { return removeListener(); },
+        /**
+         * current listener state
+         */
+        get state() {
+            return {
+                /**
+                 * current listener state count
+                 */
+                get count() {
+                    var _a;
+                    return ((_a = getMapValue()) === null || _a === void 0 ? void 0 : _a.listeners.size) || 0;
+                },
+                /**
+                 * is that be listening
+                 */
+                listening: listening,
+            };
+        },
+    };
+};
+/**
+ * bind global event, when you bind same key event,
+ * that will reuse one event listener and trigger both callback once that listener be triggered.
+ *
+ * also you can control listener with method `listen` and `remove`
+ * and get listener `state` for check listener count number and current listing state.
+ *
+ * - `key` `options` only work when set first time, never change after first render
+ *
+ * @example
+ * ```ts
+ * useGlobalListener('keyup', () => console.log('window key up1'))
+ * useGlobalListener('keyup', () => console.log('window key up2'))
+ * useGlobalListener('keyup', () => console.log('window key up3'))
+ *
+ * => // that will only create an event listener on `window`, but every callback will get emit value when event triggered
+ * ```
+ */
+export function useGlobalListener(key, listener, options) {
+    if (options === void 0) { options = {}; }
+    var _listener = useEventCallback(listener);
+    var globalListener = useRef(createGlobalListener(key, _listener, options)).current;
+    if (process.env.NODE_ENV !== 'production') {
+        var _a = options.customKey, customKey_1 = _a === void 0 ? key : _a, _b = options.target, targetProp_1 = _b === void 0 ? window : _b;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(function () {
+            var target = getRefElement(targetProp_1);
+            if (target !== window && customKey_1 === key) {
+                logInDev({
+                    component: 'useGlobalListener',
+                    message: 'When you custom binding event target, you must custom key for determining different event group',
+                    level: 'error',
+                });
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
+    useEffect(function () {
+        globalListener.listen();
+        return globalListener.remove;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return globalListener;
+}

package/es6/foundation/hooks/useHiddenTabindex/useHiddenTabindex.js

@@ -1,17 +1,18 @@
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * group hidden logic, when binding events element focus,
  * that hiddenRef will auto be `tabindex={-1}` *
  */
-export var useHiddenTabindex = function (hiddenRef) {
+export var useHiddenTabindex = function (target) {
     var handleFocus = useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === 0) {
             hiddenElm.tabIndex = -1;
         }
     });
     var handleBlur = useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === -1) {
             hiddenElm.tabIndex = 0;
         }

package/es6/foundation/hooks/useLongPress/useLongPress.js

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { useA11yKeyEvent } from '../useA11yKeyEvent';
 import { useDebounce } from '../useDebounce';
 import { useEventCallback } from '../useEventCallback';
-import { isElmEqualOrContainRef, useTouchMouseEvent, } from '../useTouchMouseEvent';
+import { isElmEqualOrContain, useTouchMouseEvent, } from '../useTouchMouseEvent';
 /**
  * Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
  *
@@ -30,8 +30,7 @@ export var useLongPress = function (_a, _b, _c) {
     var end = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
         document.removeEventListener('mouseup', onMouseUp);
-        if (!isEmittedRef.current &&
-            isElmEqualOrContainRef(e.target, elmRef)) {
+        if (!isEmittedRef.current && isElmEqualOrContain(e.target, elmRef)) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
         reasonRef.current = 'click';