@ringcentral/juno 2.1.2 → 2.3.1

package/es6/components/Badge/Badge.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useMemo, useRef, } from 'react';
 import clsx from 'clsx';
 import MuiBadge from '@material-ui/core/Badge';
 import { capitalize } from '@material-ui/core/utils';
-import { combineProps, logInDev, styled, useChange, useForkRef, useThemeProps, } from '../../foundation';
+import { combineClasses, combineProps, logInDev, styled, useChange, useForkRef, useThemeProps, } from '../../foundation';
 import { RcBox } from '../Box';
 import { RcPresence } from '../Presence';
 import { BadgeStyle } from './styles';
@@ -34,7 +34,7 @@ var _RcBadge = forwardRef(function (inProps, ref) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useRoundBadgeOffset(innerRef);
     }
-    var classes = useMemo(function () { return combineProps(RcBadgeClasses, classesProp); }, [classesProp]);
+    var classes = useMemo(function () { return combineClasses(RcBadgeClasses, classesProp); }, [classesProp]);
     var CustomDotBadge = useMemo(function () {
         return isDot
             ? forwardRef(function (_a, ref) {

package/es6/components/Chip/Chip.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useLayoutEffect, useMemo, useRef, } from 'react';
 import clsx from 'clsx';
 import MuiChip from '@material-ui/core/Chip';
 import { DeleteCircle } from '@ringcentral/juno-icon';
-import { combineClasses, isRcElement, omit, removeClassName, styled, useForkRef, useThemeProps, } from '../../foundation';
+import { combineClasses, isRcElement, omit, removeClassName, overridableStyled, useForkRef, useThemeProps, } from '../../foundation';
 import { RcIconButton } from '../Buttons/IconButton';
 import { ChipStyle } from './styles';
 import { RcChipClasses } from './utils';
@@ -46,7 +46,7 @@ var _RcChip = forwardRef(function (inProps, ref) {
     });
     return (React.createElement(MuiChip, __assign({ ref: chipRef, id: id, tabIndex: disabled ? -1 : tabIndex, label: label, disabled: disabled, classes: classes, className: clsx(className, focused ? combinedClasses.focused : undefined), avatar: avatar, deleteIcon: deleteIcon, "data-test-automation-class": "selected-item", "data-test-automation-value": id ? id : label, "data-is-error": error }, rest)));
 });
-var RcChip = styled(_RcChip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ChipStyle);
+var RcChip = overridableStyled(_RcChip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ChipStyle);
 RcChip.defaultProps = {
     tabIndex: 0,
     // FIXME: after implement click state, that can be remove

package/es6/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -1,7 +1,6 @@
 import { __assign, __read, __rest } from "tslib";
 import { useCallback, useEffect, useMemo, useRef, } from 'react';
-import { useControlled } from '@material-ui/core/utils';
-import { combineProps, useForceUpdate, useId, useKeyboardMoveFocus, } from '../../../../foundation';
+import { combineProps, useForceUpdate, useControlled, useId, useKeyboardMoveFocus, } from '../../../../foundation';
 import { DEFAULT_GET_OPTION_LABEL, isItemCanSelected, } from '../../utils/DownshiftUtils';
 import { useDownshiftGroup } from '../../utils/useDownshiftGroup';
 var DEFAULT_HIGHLIGHTED_INDEX = -1;

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

@@ -1,7 +1,6 @@
 import { __assign, __awaiter, __generator, __read, __spread } from "tslib";
 import { useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
-import { useControlled } from '@material-ui/core/utils';
-import { combineProps, getSelectionPosition, useChange, useId, useSleep, } from '../../../foundation';
+import { combineProps, getSelectionPosition, useChange, useControlled, useId, useSleep, } from '../../../foundation';
 import { useSuggestionList } from '../SuggestionList/utils/useSuggestionList';
 import { DEFAULT_GET_OPTION_LABEL, DEFAULT_KEY_TO_CHIPS, downshiftComponentName, stringArrToRegExp, } from './DownshiftUtils';
 import { useDownshiftTag } from './useDownshiftTag';

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/Forms/TextField/styles/ClearIconButton.js

@@ -3,14 +3,21 @@ import React, { forwardRef } from 'react';
 import { DeleteCircle } from '@ringcentral/juno-icon';
 import { styled } from '../../../../foundation';
 import { RcIconButton } from '../../../Buttons/IconButton';
+import { RcBox } from '../../../Box';
+import { withTooltip } from '../../../Tooltip';
+var FakeButton = styled(RcIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  right: 0;\n  pointer-events: none;\n"])));
 var _ClearIconButton = forwardRef(function (_a, ref) {
-    var onMouseDown = _a.onMouseDown, rest = __rest(_a, ["onMouseDown"]);
-    return (React.createElement(RcIconButton, __assign({ ref: ref, type: "button", "aria-hidden": true, variant: "plain", symbol: DeleteCircle, tabIndex: -1, 
-        // * for prevent focus change
-        onMouseDown: function (e) {
-            e.preventDefault();
-            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
-        } }, rest)));
+    var onMouseDown = _a.onMouseDown, size = _a.size, iconSize = _a.iconSize, rest = __rest(_a, ["onMouseDown", "size", "iconSize"]);
+    return (React.createElement(RcBox, { display: "flex", alignItems: "center", position: "relative" },
+        React.createElement(RcIconButton, __assign({ type: "button", "aria-hidden": true, variant: "plain", symbol: DeleteCircle, tabIndex: -1, 
+            // * for prevent focus change
+            onMouseDown: function (e) {
+                e.preventDefault();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, size: size }, rest, { useRcTooltip: false })),
+        React.createElement(FakeButton, { variant: "plain", as: "div", size: size, ref: ref })));
 });
-export var ClearIconButton = styled(_ClearIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var templateObject_1;
+// TODO: fix this after upgarde ts
+export var ClearIconButton = styled(withTooltip(_ClearIconButton))(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+ClearIconButton.defaultProps = { useRcTooltip: true };
+var templateObject_1, templateObject_2;

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/Tabs/Tabs/MoreMenuTab/MoreMenuTab.js

@@ -4,17 +4,17 @@ import { MoreHoriz as MoreHorizIcon } from '@ringcentral/juno-icon';
 import { styled, useEventCallback, useId, } from '../../../../foundation';
 import { RcIcon } from '../../../Icon';
 import { RcListItemIcon, RcListItemText } from '../../../List';
-import { RcMenu, RcMenuItem } from '../../../Menu';
+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) {
-    var menuItems = props.menuItems, _a = props.MenuProps, MenuProps = _a === void 0 ? {} : _a, TooltipProps = props.TooltipProps, onChange = props.onChange, MoreIconProp = props.MoreIcon, rest = __rest(props, ["menuItems", "MenuProps", "TooltipProps", "onChange", "MoreIcon"]);
+    var menuItems = props.menuItems, _a = props.MenuItemComponent, MenuItemComponent = _a === void 0 ? RcMenuItem : _a, _b = props.MenuProps, MenuProps = _b === void 0 ? {} : _b, TooltipProps = props.TooltipProps, onChange = props.onChange, MoreIconProp = props.MoreIcon, rest = __rest(props, ["menuItems", "MenuItemComponent", "MenuProps", "TooltipProps", "onChange", "MoreIcon"]);
     var menuIdProp = MenuProps.id, onMenuCloseProp = MenuProps.onClose, MenuPropsRest = __rest(MenuProps, ["id", "onClose"]);
     var menuId = useId(menuIdProp);
-    var _b = __read(useState(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
     var MoreIcon = useMemo(function () {
         var Icon = MoreIconProp || (React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: MoreHorizIcon }));
         if (TooltipProps === null || TooltipProps === void 0 ? void 0 : TooltipProps.title) {
@@ -39,11 +39,11 @@ var _MoreMenuTab = forwardRef(function (props, ref) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
             };
-            return (React.createElement(RcMenuItem, { 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: getKey(menuItemRest.key, idx), 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 })));
         });
-    }, [menuItems, onChange]);
+    }, [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(RcMenu, __assign({ autoClose: true }, MenuPropsRest, { id: menuId, anchorEl: anchorEl, open: Boolean(anchorEl), variant: "menu", onClose: handleMenuClose }), MenuList)));

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';