@ringcentral/juno 2.35.4 → 2.36.0

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/components/Presence/assets/Check.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Check = react_1.memo(react_1.forwardRef(function (props, svgRef) { return (react_1.default.createElement("svg", tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    react_1.default.createElement("path", { id: "Shape", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.62,10.38L17.51,23.72A2.19,2.19,0,0,1,16,24.89h-.41a2.17,2.17,0,0,1-1.37-.53L8,19a2.22,2.22,0,0,1,2.38-3.7,1.76,1.76,0,0,1,.39.32L14.9,19.2,20.71,8.3a2.21,2.21,0,0,1,2.95-1.06,2.15,2.15,0,0,1,1.15,1.25,2.23,2.23,0,0,1-.08,1.7l-.11.21Z" }))); }));
+    react_1.default.createElement("g", { id: "Available" },
+        react_1.default.createElement("path", { id: "Shape", fill: "#3c9949", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" })),
+    react_1.default.createElement("path", { fill: "#fff", d: "M24.62,10.38,17.51,23.72A2.19,2.19,0,0,1,16,24.89h-.41a2.17,2.17,0,0,1-1.37-.53L8,19a2.22,2.22,0,0,1,2.38-3.7,2,2,0,0,1,.39.32L14.9,19.2,20.71,8.3a2.22,2.22,0,0,1,2.94-1.07h0a2.15,2.15,0,0,1,1.15,1.25,2.23,2.23,0,0,1-.08,1.7l-.11.21Z" }))); }));
 Check.displayName = 'Check';
 Check['iconName'] = 'check';
 exports.default = Check;

package/components/Presence/assets/Dnd.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Dnd = react_1.memo(react_1.forwardRef(function (props, svgRef) { return (react_1.default.createElement("svg", tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    react_1.default.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.44,18.22H7.56a2.22,2.22,0,1,1,0-4.44H24.44a2.22,2.22,0,1,1,0,4.44Z" }))); }));
+    react_1.default.createElement("path", { fill: '#dd6057', d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" }),
+    react_1.default.createElement("path", { fill: "#fff", d: "M24.44,18.22H7.56a2.22,2.22,0,1,1,0-4.44H24.44a2.22,2.22,0,0,1,0,4.44Z" }))); }));
 Dnd.displayName = 'Dnd';
 Dnd['iconName'] = 'dnd';
 exports.default = Dnd;

package/components/Presence/assets/Unattended.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Unattended = react_1.memo(react_1.forwardRef(function (props, svgRef) { return (react_1.default.createElement("svg", tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    react_1.default.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm7.54,20.39a2.23,2.23,0,0,1-3.15,3.15h0L16,19.15l-4.39,4.39a2.23,2.23,0,0,1-3.15-3.15h0L12.85,16,8.46,11.61a2.23,2.23,0,0,1,3.15-3.15L16,12.85l4.39-4.39a2.23,2.23,0,0,1,3.15,3.15h0L19.15,16Z" }))); }));
+    react_1.default.createElement("path", { fill: "#dd6057", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" }),
+    react_1.default.createElement("path", { fill: "#fff", d: "M23.54,20.39a2.23,2.23,0,0,1-3.15,3.15h0L16,19.15l-4.39,4.39a2.23,2.23,0,0,1-3.15-3.15h0L12.85,16,8.46,11.61a2.23,2.23,0,0,1,3.15-3.15L16,12.85l4.39-4.39a2.23,2.23,0,0,1,3.15,3.15h0L19.15,16Z" }))); }));
 Unattended.displayName = 'Unattended';
 Unattended['iconName'] = 'unattended';
 exports.default = Unattended;

package/components/Presence/styles/StyledPresence.js

@@ -4,19 +4,18 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var foundation_1 = require("../../../foundation");
 var Icon_1 = require("../../Icon");
-var utils_1 = require("../utils");
 exports._StyledPresence = react_1.forwardRef(function (_a, ref) {
     var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, rest = tslib_1.__rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue"]);
     return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref }, rest)));
 });
 exports.StyledPresence = foundation_1.styled(exports._StyledPresence)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
     ";\n"])), function (_a) {
-    var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
+    var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
     return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
         ";\n      ",
         ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
         ? foundation_1.getParsePaletteColor(color)
-        : utils_1.RcPresenceBackgroundColors[type] || foundation_1.palette2('neutral', 'l01'), foundation_1.fakeBorder({
+        : foundation_1.palette2('neutral', 'l01'), foundation_1.fakeBorder({
         inset: false,
         color: foundation_1.palette2('neutral', 'l01'),
         size: borderSizeValue,

package/components/Presence/utils/RcPresenceUtils.d.ts

@@ -2,4 +2,3 @@ import { UnitMap } from '../../../foundation';
 import { RcPresenceSize, RcPresenceType } from '../Presence';
 export declare const RcPresenceSizes: UnitMap<RcPresenceSize, [number, number]>;
 export declare const RcPresenceColors: UnitMap<RcPresenceType>;
-export declare const RcPresenceBackgroundColors: UnitMap<RcPresenceType>;

package/components/Presence/utils/RcPresenceUtils.js

@@ -28,17 +28,3 @@ exports.RcPresenceColors = {
     notReady: presenceOff,
     offline: presenceOff,
 };
-exports.RcPresenceBackgroundColors = {
-    // positive
-    available: '#FFFFFF',
-    attended: '#FFFFFF',
-    // negative
-    unAttended: '#FFFFFF',
-    onCall: '#FFFFFF',
-    inMeeting: '#FFFFFF',
-    DND: '#FFFFFF',
-    busy: '#FFFFFF',
-    unavailable: foundation_1.palette2('neutral', 'l01'),
-    notReady: foundation_1.palette2('neutral', 'l01'),
-    offline: foundation_1.palette2('neutral', 'l01'),
-};

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/components/Presence/assets/Check.js

@@ -1,7 +1,9 @@
 import { __assign } from "tslib";
 import React, { forwardRef, memo } from 'react';
 var Check = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    React.createElement("path", { id: "Shape", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.62,10.38L17.51,23.72A2.19,2.19,0,0,1,16,24.89h-.41a2.17,2.17,0,0,1-1.37-.53L8,19a2.22,2.22,0,0,1,2.38-3.7,1.76,1.76,0,0,1,.39.32L14.9,19.2,20.71,8.3a2.21,2.21,0,0,1,2.95-1.06,2.15,2.15,0,0,1,1.15,1.25,2.23,2.23,0,0,1-.08,1.7l-.11.21Z" }))); }));
+    React.createElement("g", { id: "Available" },
+        React.createElement("path", { id: "Shape", fill: "#3c9949", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" })),
+    React.createElement("path", { fill: "#fff", d: "M24.62,10.38,17.51,23.72A2.19,2.19,0,0,1,16,24.89h-.41a2.17,2.17,0,0,1-1.37-.53L8,19a2.22,2.22,0,0,1,2.38-3.7,2,2,0,0,1,.39.32L14.9,19.2,20.71,8.3a2.22,2.22,0,0,1,2.94-1.07h0a2.15,2.15,0,0,1,1.15,1.25,2.23,2.23,0,0,1-.08,1.7l-.11.21Z" }))); }));
 Check.displayName = 'Check';
 Check['iconName'] = 'check';
 export default Check;

package/es6/components/Presence/assets/Dnd.js

@@ -1,7 +1,8 @@
 import { __assign } from "tslib";
 import React, { forwardRef, memo } from 'react';
 var Dnd = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    React.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm8.44,18.22H7.56a2.22,2.22,0,1,1,0-4.44H24.44a2.22,2.22,0,1,1,0,4.44Z" }))); }));
+    React.createElement("path", { fill: '#dd6057', d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" }),
+    React.createElement("path", { fill: "#fff", d: "M24.44,18.22H7.56a2.22,2.22,0,1,1,0-4.44H24.44a2.22,2.22,0,0,1,0,4.44Z" }))); }));
 Dnd.displayName = 'Dnd';
 Dnd['iconName'] = 'dnd';
 export default Dnd;

package/es6/components/Presence/assets/Unattended.js

@@ -1,7 +1,8 @@
 import { __assign } from "tslib";
 import React, { forwardRef, memo } from 'react';
 var Unattended = memo(forwardRef(function (props, svgRef) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ref: svgRef }, props),
-    React.createElement("path", { d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm7.54,20.39a2.23,2.23,0,0,1-3.15,3.15h0L16,19.15l-4.39,4.39a2.23,2.23,0,0,1-3.15-3.15h0L12.85,16,8.46,11.61a2.23,2.23,0,0,1,3.15-3.15L16,12.85l4.39-4.39a2.23,2.23,0,0,1,3.15,3.15h0L19.15,16Z" }))); }));
+    React.createElement("path", { fill: "#dd6057", d: "M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z" }),
+    React.createElement("path", { fill: "#fff", d: "M23.54,20.39a2.23,2.23,0,0,1-3.15,3.15h0L16,19.15l-4.39,4.39a2.23,2.23,0,0,1-3.15-3.15h0L12.85,16,8.46,11.61a2.23,2.23,0,0,1,3.15-3.15L16,12.85l4.39-4.39a2.23,2.23,0,0,1,3.15,3.15h0L19.15,16Z" }))); }));
 Unattended.displayName = 'Unattended';
 Unattended['iconName'] = 'unattended';
 export default Unattended;

package/es6/components/Presence/styles/StyledPresence.js

@@ -2,19 +2,18 @@ import { __assign, __makeTemplateObject, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { css, getParsePaletteColor, palette2, styled, fakeBorder, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
-import { RcPresenceBackgroundColors } from '../utils';
 export var _StyledPresence = forwardRef(function (_a, ref) {
     var color = _a.color, type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, rest = __rest(_a, ["color", "type", "iconSizeValue", "borderSizeValue"]);
     return (React.createElement("div", __assign({ ref: ref }, rest)));
 });
 export var StyledPresence = styled(_StyledPresence)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: content-box;\n\n  ",
     ";\n"])), function (_a) {
-    var type = _a.type, iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
+    var iconSizeValue = _a.iconSizeValue, borderSizeValue = _a.borderSizeValue, color = _a.color;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      background: ", ";\n      ", ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      background: ",
         ";\n      ",
         ";\n      ", " {\n        svg {\n          width: ", "px;\n          height: ", "px;\n        }\n      }\n    "])), iconSizeValue, iconSizeValue, color
         ? getParsePaletteColor(color)
-        : RcPresenceBackgroundColors[type] || palette2('neutral', 'l01'), fakeBorder({
+        : palette2('neutral', 'l01'), fakeBorder({
         inset: false,
         color: palette2('neutral', 'l01'),
         size: borderSizeValue,

package/es6/components/Presence/utils/RcPresenceUtils.js

@@ -26,17 +26,3 @@ export var RcPresenceColors = {
     notReady: presenceOff,
     offline: presenceOff,
 };
-export var RcPresenceBackgroundColors = {
-    // positive
-    available: '#FFFFFF',
-    attended: '#FFFFFF',
-    // negative
-    unAttended: '#FFFFFF',
-    onCall: '#FFFFFF',
-    inMeeting: '#FFFFFF',
-    DND: '#FFFFFF',
-    busy: '#FFFFFF',
-    unavailable: palette2('neutral', 'l01'),
-    notReady: palette2('neutral', 'l01'),
-    offline: palette2('neutral', 'l01'),
-};

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/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.4",
+  "version": "2.36.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",