@ringcentral/juno 2.35.5 → 2.36.1

package/components/Menu/SubMenu/SubMenu.js

@@ -21,7 +21,7 @@ var POPPER_OFFSET = 2;
 var MemoMenuList = react_1.memo(MenuList_1.RcMenuList);
 var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcSubMenu' });
-    var classesProp = props.classes, children = props.children, titleProp = props.title, disabled = props.disabled, onKeyDown = props.onKeyDown, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, MenuListProps = props.MenuListProps, _a = props.PopperProps, PopperProps = _a === void 0 ? {} : _a, onClose = props.onClose, rest = tslib_1.__rest(props, ["classes", "children", "title", "disabled", "onKeyDown", "onMouseEnter", "onMouseLeave", "MenuListProps", "PopperProps", "onClose"]);
+    var classesProp = props.classes, children = props.children, titleProp = props.title, disabled = props.disabled, onKeyDown = props.onKeyDown, onTouchStart = props.onTouchStart, onTouchEnd = props.onTouchEnd, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, MenuListProps = props.MenuListProps, _a = props.PopperProps, PopperProps = _a === void 0 ? {} : _a, onClose = props.onClose, rest = tslib_1.__rest(props, ["classes", "children", "title", "disabled", "onKeyDown", "onTouchStart", "onTouchEnd", "onMouseEnter", "onMouseLeave", "MenuListProps", "PopperProps", "onClose"]);
     var _popperRef = react_1.useRef(null);
     var popperRef = foundation_1.useForkRef(_popperRef, PopperProps.ref || null);
     var popperId = foundation_1.useId(PopperProps.id);
@@ -31,25 +31,41 @@ var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
     var menuListContext = react_1.useContext(MenuListContext_1.RcMenuListContext);
     var menuContext = react_1.useContext(MenuContext_1.RcMenuContext);
     var subMenuContext = react_1.useContext(SubMenuContext_1.RcSubMenuContext);
+    var ignoreMouseEventRef = react_1.useRef(false);
     var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
-    var handleClose = foundation_1.useEventCallback(function (e, reason) {
+    var handleClose = function (e, reason) {
         var _a;
         onClose === null || onClose === void 0 ? void 0 : onClose(e, reason);
         (_a = menuListContext === null || menuListContext === void 0 ? void 0 : menuListContext.onClose) === null || _a === void 0 ? void 0 : _a.call(menuListContext, e, reason);
-    });
-    var handleItemKeyDown = foundation_1.useEventCallback(function (e) {
+    };
+    var handleItemKeyDown = function (e) {
         var key = e.key;
         var ArrowRight = foundation_1.a11yKeyboard.ArrowRight, Space = foundation_1.a11yKeyboard.Space, Enter = foundation_1.a11yKeyboard.Enter;
         if ([ArrowRight, Space, Enter].includes(key)) {
             openPopper(e);
         }
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    });
-    var handleItemMouseEnter = foundation_1.useEventCallback(function (e) {
-        openPopper(e);
+    };
+    var handleItemTouchStart = function (e) {
+        ignoreMouseEventRef.current = true;
+        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+    };
+    var handleItemTouchEnd = function (e) {
+        if (foundation_1.isTap(e)) {
+            openPopper(e);
+        }
+        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+    };
+    var handleItemMouseEnter = function (e) {
+        if (!ignoreMouseEventRef.current) {
+            openPopper(e);
+        }
+        else {
+            ignoreMouseEventRef.current = false;
+        }
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
-    });
-    var handleItemMouseLeave = foundation_1.useEventCallback(function (e) {
+    };
+    var handleItemMouseLeave = function (e) {
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
         if (!_popperRef.current || !e.currentTarget) {
             return;
@@ -62,27 +78,27 @@ var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
             closePopper();
             handleClose(e, 'subMenuItemAnchorMouseLeave');
         }
-    });
+    };
     var classes = react_1.useMemo(function () { return foundation_1.combineClasses(utils_1.RcSubMenuClasses, classesProp); }, [classesProp]);
     var title = react_1.useMemo(function () {
         return typeof titleProp === 'string' ? (react_1.default.createElement(ListItemText_1.RcListItemText, null, titleProp)) : (titleProp);
     }, [titleProp]);
     var onPopperKeyDown = PopperProps.onKeyDown, onPopperMouseLeave = PopperProps.onMouseLeave, restPopperProps = tslib_1.__rest(PopperProps, ["onKeyDown", "onMouseLeave"]);
-    var openPopper = foundation_1.useEventCallback(function (event) {
+    var openPopper = function (event) {
         if (!disabled && event.currentTarget) {
             setAnchorEl(event.currentTarget);
             setOpen(true);
         }
-    });
-    var closePopper = foundation_1.useEventCallback(function () {
+    };
+    var closePopper = function () {
         setOpen(false);
         setAnchorEl(null);
-    });
+    };
     var handleCloseSubMenu = foundation_1.useEventCallback(function () {
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         closePopper();
     });
-    var handlePopperKeyDown = foundation_1.useEventCallback(function (e) {
+    var handlePopperKeyDown = function (e) {
         var _a;
         var key = e.key;
         var ArrowLeft = foundation_1.a11yKeyboard.ArrowLeft, Escape = foundation_1.a11yKeyboard.Escape, Tab = foundation_1.a11yKeyboard.Tab;
@@ -99,16 +115,14 @@ var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
             handleClose(e, reason);
         }
         onPopperKeyDown === null || onPopperKeyDown === void 0 ? void 0 : onPopperKeyDown(e);
-    });
-    var handlePopperClickAway = foundation_1.useEventCallback(function (e) {
-        if (anchorEl &&
-            e.target &&
-            !anchorEl.contains(e.target)) {
+    };
+    var handlePopperClickAway = function (e) {
+        if (anchorEl && e.target && !anchorEl.contains(e.target)) {
             closePopper();
             handleClose(e, 'backdropClick');
         }
-    });
-    var handlePopperMouseLeave = foundation_1.useEventCallback(function (e) {
+    };
+    var handlePopperMouseLeave = function (e) {
         closePopper();
         onPopperMouseLeave === null || onPopperMouseLeave === void 0 ? void 0 : onPopperMouseLeave(e);
         if (!anchorEl || !e.currentTarget) {
@@ -121,7 +135,7 @@ var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
         if (!isMoveToAnchor) {
             handleClose(e, 'popperMouseLeave');
         }
-    });
+    };
     react_1.useLayoutEffect(function () {
         if (open &&
             menuListContext.menuListId !== '' &&
@@ -177,7 +191,7 @@ var _RcSubMenu = react_1.forwardRef(function (inProps, ref) {
         },
     }); }, [externalWindow]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(MenuItem_1.RcMenuItem, tslib_1.__assign({ "aria-controls": popperId }, rest, { ref: ref, disabled: disabled, classes: classes, onKeyDown: handleItemKeyDown, onMouseEnter: handleItemMouseEnter, onMouseLeave: handleItemMouseLeave, idRef: menuItemIdRef, isSubMenuItem: true, "aria-haspopup": "true", "aria-expanded": open }),
+        react_1.default.createElement(MenuItem_1.RcMenuItem, tslib_1.__assign({ "aria-controls": popperId }, rest, { ref: ref, disabled: disabled, classes: classes, onKeyDown: handleItemKeyDown, onTouchStart: handleItemTouchStart, onTouchEnd: handleItemTouchEnd, onMouseEnter: handleItemMouseEnter, onMouseLeave: handleItemMouseLeave, idRef: menuItemIdRef, isSubMenuItem: true, "aria-haspopup": "true", "aria-expanded": open }),
             title,
             react_1.default.createElement(styles_1.StyledListItemSecondaryAction, null,
                 react_1.default.createElement(Icon_1.RcIcon, { size: "medium", color: "neutral.f04", symbol: juno_icon_1.ArrowRight }))),

package/es6/components/Menu/SubMenu/SubMenu.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, memo, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { ArrowRight } from '@ringcentral/juno-icon';
-import { a11yKeyboard, combineClasses, styled, useEventCallback, useForkRef, useId, useRcPortalWindowContext, useThemeProps, } from '../../../foundation';
+import { a11yKeyboard, combineClasses, styled, useEventCallback, useForkRef, useId, useRcPortalWindowContext, useThemeProps, isTap, } from '../../../foundation';
 import { ClickAwayListener } from '../../ClickAwayListener';
 import { RcIcon } from '../../Icon';
 import { RcListItemText } from '../../List/ListItemText';
@@ -18,7 +18,7 @@ var POPPER_OFFSET = 2;
 var MemoMenuList = memo(RcMenuList);
 var _RcSubMenu = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSubMenu' });
-    var classesProp = props.classes, children = props.children, titleProp = props.title, disabled = props.disabled, onKeyDown = props.onKeyDown, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, MenuListProps = props.MenuListProps, _a = props.PopperProps, PopperProps = _a === void 0 ? {} : _a, onClose = props.onClose, rest = __rest(props, ["classes", "children", "title", "disabled", "onKeyDown", "onMouseEnter", "onMouseLeave", "MenuListProps", "PopperProps", "onClose"]);
+    var classesProp = props.classes, children = props.children, titleProp = props.title, disabled = props.disabled, onKeyDown = props.onKeyDown, onTouchStart = props.onTouchStart, onTouchEnd = props.onTouchEnd, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, MenuListProps = props.MenuListProps, _a = props.PopperProps, PopperProps = _a === void 0 ? {} : _a, onClose = props.onClose, rest = __rest(props, ["classes", "children", "title", "disabled", "onKeyDown", "onTouchStart", "onTouchEnd", "onMouseEnter", "onMouseLeave", "MenuListProps", "PopperProps", "onClose"]);
     var _popperRef = useRef(null);
     var popperRef = useForkRef(_popperRef, PopperProps.ref || null);
     var popperId = useId(PopperProps.id);
@@ -28,25 +28,41 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
     var menuListContext = useContext(RcMenuListContext);
     var menuContext = useContext(RcMenuContext);
     var subMenuContext = useContext(RcSubMenuContext);
+    var ignoreMouseEventRef = useRef(false);
     var externalWindow = useRcPortalWindowContext().externalWindow;
-    var handleClose = useEventCallback(function (e, reason) {
+    var handleClose = function (e, reason) {
         var _a;
         onClose === null || onClose === void 0 ? void 0 : onClose(e, reason);
         (_a = menuListContext === null || menuListContext === void 0 ? void 0 : menuListContext.onClose) === null || _a === void 0 ? void 0 : _a.call(menuListContext, e, reason);
-    });
-    var handleItemKeyDown = useEventCallback(function (e) {
+    };
+    var handleItemKeyDown = function (e) {
         var key = e.key;
         var ArrowRight = a11yKeyboard.ArrowRight, Space = a11yKeyboard.Space, Enter = a11yKeyboard.Enter;
         if ([ArrowRight, Space, Enter].includes(key)) {
             openPopper(e);
         }
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    });
-    var handleItemMouseEnter = useEventCallback(function (e) {
-        openPopper(e);
+    };
+    var handleItemTouchStart = function (e) {
+        ignoreMouseEventRef.current = true;
+        onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+    };
+    var handleItemTouchEnd = function (e) {
+        if (isTap(e)) {
+            openPopper(e);
+        }
+        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+    };
+    var handleItemMouseEnter = function (e) {
+        if (!ignoreMouseEventRef.current) {
+            openPopper(e);
+        }
+        else {
+            ignoreMouseEventRef.current = false;
+        }
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
-    });
-    var handleItemMouseLeave = useEventCallback(function (e) {
+    };
+    var handleItemMouseLeave = function (e) {
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
         if (!_popperRef.current || !e.currentTarget) {
             return;
@@ -59,27 +75,27 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
             closePopper();
             handleClose(e, 'subMenuItemAnchorMouseLeave');
         }
-    });
+    };
     var classes = useMemo(function () { return combineClasses(RcSubMenuClasses, classesProp); }, [classesProp]);
     var title = useMemo(function () {
         return typeof titleProp === 'string' ? (React.createElement(RcListItemText, null, titleProp)) : (titleProp);
     }, [titleProp]);
     var onPopperKeyDown = PopperProps.onKeyDown, onPopperMouseLeave = PopperProps.onMouseLeave, restPopperProps = __rest(PopperProps, ["onKeyDown", "onMouseLeave"]);
-    var openPopper = useEventCallback(function (event) {
+    var openPopper = function (event) {
         if (!disabled && event.currentTarget) {
             setAnchorEl(event.currentTarget);
             setOpen(true);
         }
-    });
-    var closePopper = useEventCallback(function () {
+    };
+    var closePopper = function () {
         setOpen(false);
         setAnchorEl(null);
-    });
+    };
     var handleCloseSubMenu = useEventCallback(function () {
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         closePopper();
     });
-    var handlePopperKeyDown = useEventCallback(function (e) {
+    var handlePopperKeyDown = function (e) {
         var _a;
         var key = e.key;
         var ArrowLeft = a11yKeyboard.ArrowLeft, Escape = a11yKeyboard.Escape, Tab = a11yKeyboard.Tab;
@@ -96,16 +112,14 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
             handleClose(e, reason);
         }
         onPopperKeyDown === null || onPopperKeyDown === void 0 ? void 0 : onPopperKeyDown(e);
-    });
-    var handlePopperClickAway = useEventCallback(function (e) {
-        if (anchorEl &&
-            e.target &&
-            !anchorEl.contains(e.target)) {
+    };
+    var handlePopperClickAway = function (e) {
+        if (anchorEl && e.target && !anchorEl.contains(e.target)) {
             closePopper();
             handleClose(e, 'backdropClick');
         }
-    });
-    var handlePopperMouseLeave = useEventCallback(function (e) {
+    };
+    var handlePopperMouseLeave = function (e) {
         closePopper();
         onPopperMouseLeave === null || onPopperMouseLeave === void 0 ? void 0 : onPopperMouseLeave(e);
         if (!anchorEl || !e.currentTarget) {
@@ -118,7 +132,7 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
         if (!isMoveToAnchor) {
             handleClose(e, 'popperMouseLeave');
         }
-    });
+    };
     useLayoutEffect(function () {
         if (open &&
             menuListContext.menuListId !== '' &&
@@ -174,7 +188,7 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
         },
     }); }, [externalWindow]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(RcMenuItem, __assign({ "aria-controls": popperId }, rest, { ref: ref, disabled: disabled, classes: classes, onKeyDown: handleItemKeyDown, onMouseEnter: handleItemMouseEnter, onMouseLeave: handleItemMouseLeave, idRef: menuItemIdRef, isSubMenuItem: true, "aria-haspopup": "true", "aria-expanded": open }),
+        React.createElement(RcMenuItem, __assign({ "aria-controls": popperId }, rest, { ref: ref, disabled: disabled, classes: classes, onKeyDown: handleItemKeyDown, onTouchStart: handleItemTouchStart, onTouchEnd: handleItemTouchEnd, onMouseEnter: handleItemMouseEnter, onMouseLeave: handleItemMouseLeave, idRef: menuItemIdRef, isSubMenuItem: true, "aria-haspopup": "true", "aria-expanded": open }),
             title,
             React.createElement(StyledListItemSecondaryAction, null,
                 React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: ArrowRight }))),

package/es6/foundation/utils/index.js

@@ -21,3 +21,4 @@ export * from './shallowEqual';
 export * from './styleParser';
 export * from './swapArrayLocs';
 export * from './withDeprecatedCheck';
+export * from './isTap';

package/es6/foundation/utils/isTap.js

@@ -0,0 +1,11 @@
+/**
+ * @param event TouchEndEvent
+ */
+export var isTap = function (event) {
+    if (event.touches.length < 2 && event.changedTouches.length < 2) {
+        var touch = event.touches[0] || event.changedTouches[0];
+        var elm = document.elementFromPoint(touch.clientX, touch.clientY);
+        return event.currentTarget === elm || event.currentTarget.contains(elm);
+    }
+    return false;
+};

package/foundation/theme/DefaultTheme.d.ts

@@ -0,0 +1,3 @@
+/** that theme provide user to custom with */
+export interface DefaultTheme {
+}

package/foundation/theme/DefaultTheme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/foundation/theme/index.d.ts

@@ -7,3 +7,4 @@ export * from './paletteProp.type';
 export * from './theme.type';
 export * from './typography.type';
 export * from './useThemeProps';
+export * from './DefaultTheme';

package/foundation/theme/theme.type.d.ts

@@ -57,9 +57,7 @@ import radius from './assets/radius.json';
 import shape from './assets/shape.json';
 import zIndex from './assets/zIndex.json';
 import { RcTypographyType } from './typography.type';
-/** that theme provide user to custom with */
-export interface DefaultTheme {
-}
+import { DefaultTheme } from './DefaultTheme';
 /** inner for make `(DefaultTheme & ForExtendTheme)['palette']` work with ts */
 declare type ForExtendTheme = {
     palette: {};

package/foundation/theme/typography.type.d.ts

@@ -1,12 +1,17 @@
 import { Theme as MuiTheme } from '@material-ui/core/styles';
 import typography from './assets/typography.json';
+import { DefaultTheme } from './DefaultTheme';
 declare type RcTypographyPickFields = 'fontFamily' | 'codeFontFamily' | 'fontSize' | 'htmlFontSize' | 'fontWeightLight' | 'fontWeightRegular' | 'fontWeightMedium' | 'fontWeightBold';
-export declare type RcTypographyKeys = 'display4' | 'display3' | 'display2' | 'display1' | 'headline2' | 'headline1' | 'title2' | 'title1' | 'subheading2' | 'subheading1' | 'body2' | 'body1' | 'caption2' | 'caption1' | 'inherit';
+export declare type RcTypographyKeys = 'display4' | 'display3' | 'display2' | 'display1' | 'headline2' | 'headline1' | 'title2' | 'title1' | 'subheading2' | 'subheading1' | 'body2' | 'body1' | 'caption2' | 'caption1' | 'inherit' | keyof ExtensionTypography;
 export declare type RcTypographyAddition = Pick<typeof typography, RcTypographyPickFields>;
-export declare type RcTypographies = Record<RcTypographyKeys, {
+export declare type RcTypographyDetail = {
     fontSize: string | number;
-    fontWeight: number | number;
+    fontWeight: number;
     lineHeight: string | number;
-}>;
-export declare type RcTypographyType = RcTypographyAddition & RcTypographies & MuiTheme['typography'];
+};
+export declare type RcTypographies = Record<RcTypographyKeys, RcTypographyDetail>;
+declare type ExtensionTypography = (DefaultTheme & {
+    typography: {};
+})['typography'];
+export declare type RcTypographyType = RcTypographyAddition & ExtensionTypography & RcTypographies & MuiTheme['typography'];
 export {};

package/foundation/utils/index.d.ts

@@ -21,3 +21,4 @@ export * from './shallowEqual';
 export * from './styleParser';
 export * from './swapArrayLocs';
 export * from './withDeprecatedCheck';
+export * from './isTap';

package/foundation/utils/index.js

@@ -24,3 +24,4 @@ tslib_1.__exportStar(require("./shallowEqual"), exports);
 tslib_1.__exportStar(require("./styleParser"), exports);
 tslib_1.__exportStar(require("./swapArrayLocs"), exports);
 tslib_1.__exportStar(require("./withDeprecatedCheck"), exports);
+tslib_1.__exportStar(require("./isTap"), exports);

package/foundation/utils/isTap.d.ts

@@ -0,0 +1,5 @@
+import { TouchEvent } from 'react';
+/**
+ * @param event TouchEndEvent
+ */
+export declare const isTap: (event: TouchEvent<Element>) => boolean;

package/foundation/utils/isTap.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @param event TouchEndEvent
+ */
+exports.isTap = function (event) {
+    if (event.touches.length < 2 && event.changedTouches.length < 2) {
+        var touch = event.touches[0] || event.changedTouches[0];
+        var elm = document.elementFromPoint(touch.clientX, touch.clientY);
+        return event.currentTarget === elm || event.currentTarget.contains(elm);
+    }
+    return false;
+};

package/package.json

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