@ringcentral/juno 2.5.0 → 2.6.0

package/foundation/hooks/useGlobalListener/useGlobalListener.d.ts

@@ -1,108 +1,14 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
-import { RefOrElementOrCallback } from '../../utils';
-export declare const globalListenerEventMap: Map<string, {
+import { SyntheticEvent } from 'react';
+import { createGlobalListener, CreateGlobalListenerConfig } from './createGlobalListener';
+declare type GlobalListener = ReturnType<typeof createGlobalListener>;
+export declare type UseGlobalListenerConfig = CreateGlobalListenerConfig & {
     /**
-     * listener exec method
+     * start listening when component mounted
+     *
+     * @default true
      */
-    exec: (e: any) => void;
-    /**
-     * all listener
-     */
-    listeners: Set<(e: any) => void>;
-}>;
-/**
- * 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 declare const createGlobalListener: (key: string, listener: EventListener, { customKey, target: targetProp, }?: {
-    /**
-     * custom key for determining different event group, default is same as `key`
-     */
-    customKey?: string | undefined;
-    /**
-     * custom binding event target, default is `window`
-     */
-    target?: EventTarget | HTMLElement | import("react").RefObject<HTMLElement> | (() => HTMLElement) | undefined;
-}) => {
-    /**
-     * bind listener again
-     */
-    listen: () => void;
-    /**
-     * remove listener
-     */
-    remove: () => void;
-    /**
-     * current listener state
-     */
-    readonly state: {
-        /**
-         * current listener state count
-         */
-        readonly count: number;
-        /**
-         * is that be listening
-         */
-        listening: boolean;
-    };
-};
-/**
- * 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 declare function useGlobalListener(key: string, listener: EventListener, options?: {
-    /**
-     * custom key for determining different event group, default is same as `key`
-     */
-    customKey?: string;
-    /**
-     * custom binding event target, default is `window`
-     */
-    target?: RefOrElementOrCallback | EventTarget;
-}): {
-    /**
-     * bind listener again
-     */
-    listen: () => void;
-    /**
-     * remove listener
-     */
-    remove: () => void;
-    /**
-     * current listener state
-     */
-    readonly state: {
-        /**
-         * current listener state count
-         */
-        readonly count: number;
-        /**
-         * is that be listening
-         */
-        listening: boolean;
-    };
+    startImmediately?: boolean;
 };
+export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, config?: UseGlobalListenerConfig): GlobalListener;
+export declare function useGlobalListener<T extends SyntheticEvent>(key: string, listener: (event?: T) => void, options?: AddEventListenerOptions | boolean, config?: UseGlobalListenerConfig): GlobalListener;
+export {};

package/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -1,91 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
 var react_1 = require("react");
 var utils_1 = require("../../utils");
 var useEventCallback_1 = require("../useEventCallback");
-exports.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
- * ```
- */
-exports.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 exports.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); });
-            };
-            exports.globalListenerEventMap.set(customKey, {
-                exec: exec,
-                listeners: new Set([listener]),
-            });
-            var target = utils_1.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 = utils_1.getRefElement(targetProp);
-            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec);
-            exports.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,
-            };
-        },
-    };
-};
+var createGlobalListener_1 = require("./createGlobalListener");
 /**
  * bind global event, when you bind same key event,
  * that will reuse one event listener and trigger both callback once that listener be triggered.
@@ -93,41 +12,92 @@ exports.createGlobalListener = function (key, listener, _a) {
  * 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
+ * config:
+ * - `target`: custom binding event target, default is `window`
+ * - `customKey`: custom key for determining different event group, default is same as `key`
+ * - `startImmediately`: start listener immediately, default is `true`
+ *
+ * * `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'))
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
+ *
+ * useGlobalListener('touchend', () => console.log('window key up3'), { passive: false }, {
+ *  target: someWantHostElement,
+ *  customKey: 'hostTouchend',
+ * })
  *
  * => // that will only create an event listener on `window`, but every callback will get emit value when event triggered
  * ```
  */
-function useGlobalListener(key, listener, options) {
-    if (options === void 0) { options = {}; }
+function useGlobalListener(key, listener) {
+    var args = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        args[_i - 2] = arguments[_i];
+    }
+    var _a = getListenerOverloadOption(args), options = _a.options, config = _a.config;
+    var _b = config || {}, _c = _b.customKey, customKey = _c === void 0 ? key : _c, _d = _b.target, targetProp = _d === void 0 ? window : _d, _e = _b.startImmediately, startImmediately = _e === void 0 ? true : _e;
     var _listener = useEventCallback_1.useEventCallback(listener);
-    var globalListener = react_1.useRef(exports.createGlobalListener(key, _listener, options)).current;
+    var globalListener = react_1.useRef(createGlobalListener_1.createGlobalListener(key, _listener, options, {
+        customKey: customKey,
+        target: targetProp,
+    })).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
         react_1.useEffect(function () {
-            var target = utils_1.getRefElement(targetProp_1);
-            if (target !== window && customKey_1 === key) {
-                utils_1.logInDev({
-                    component: 'useGlobalListener',
-                    message: 'When you custom binding event target, you must custom key for determining different event group',
-                    level: 'error',
-                });
+            if (customKey === key) {
+                if (Object.keys(options).length > 0) {
+                    utils_1.logInDev({
+                        component: 'useGlobalListener',
+                        message: 'when have set options, suggest you also bind customKey, otherwise, it may use previous listener without same options',
+                        level: 'warn',
+                    });
+                }
+                var target = utils_1.getRefElement(targetProp);
+                if (target !== window) {
+                    utils_1.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
         }, []);
     }
     react_1.useEffect(function () {
-        globalListener.listen();
+        if (startImmediately) {
+            globalListener.listen();
+        }
         return globalListener.remove;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return globalListener;
 }
 exports.useGlobalListener = useGlobalListener;
+function getListenerOverloadOption(args) {
+    var options;
+    var config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        var _a = tslib_1.__assign(tslib_1.__assign({}, (args[0] || {})), (args[1] || {})), startImmediately = _a.startImmediately, customKey = _a.customKey, target = _a.target, restOptions = tslib_1.__rest(_a, ["startImmediately", "customKey", "target"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+            customKey: customKey,
+            target: target,
+        };
+    }
+    return { options: options, config: config };
+}

package/foundation/hooks/useLongPress/useLongPress.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { UseTouchMouseEvent } from '../useTouchMouseEvent';
+export declare const isTouchEvent: <T = unknown>(ev: React.MouseEvent<T, MouseEvent> | React.TouchEvent<T>) => ev is React.TouchEvent<T>;
 export interface UseLongPressOptions {
-    /** is prevent all non need event */
+    /**
+     * auto event.preventDefault for `mousedown`, `touchstart`, `touchend`
+     * always use for not leave that element
+     */
     isPreventDefault?: boolean;
     /** the longPress delay */
     delay?: number;
@@ -18,7 +22,6 @@ export declare type UseLongPressOutput<T> = {
 export declare type UseLongPressInput<T> = {
     onKeyUp?: (e: React.KeyboardEvent<T>) => void;
     onKeyDown?: (e: React.KeyboardEvent<T>) => void;
-    onContextMenu?: (e: React.MouseEvent<T, MouseEvent>) => void;
 } & UseTouchMouseEvent<T>;
 /**
  * Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
@@ -26,14 +29,11 @@ export declare type UseLongPressInput<T> = {
  * - Trigger `onTap` when user action leave small than delay time.
  * - Trigger `onPress` when action time is long than delay time.
  *
- * @default UseLongPressOptions { isPreventDefault = true, delay = 300 }
+ * @default UseLongPressOptions { delay = 300 }
  */
-export declare const useLongPress: <T = unknown>({ onTap, onPress }: UseLongPressOutput<T>, { onTouchStart, onTouchEnd, onMouseDown, onKeyDown, onKeyUp, onContextMenu, onMouseUp: onMouseUpArg, }?: UseLongPressInput<T>, { isPreventDefault, delay, externalWindow, }?: UseLongPressOptions) => {
-    onTouchStart: (e: any) => void;
-    onTouchEnd: (e: any) => void;
+export declare const useLongPress: <T extends HTMLElement = HTMLElement>({ onTap, onPress }: UseLongPressOutput<T>, { onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, onMouseDown, onKeyDown, onKeyUp, onMouseUp: onMouseUpArg, }?: UseLongPressInput<T>, { isPreventDefault, delay, externalWindow, }?: UseLongPressOptions) => {
     onMouseDown: (event: React.MouseEvent<T, MouseEvent>) => void;
-    ref: React.RefObject<HTMLElement>;
-    onContextMenu: (e: any) => void;
+    ref: React.MutableRefObject<T | null>;
     onKeyDown: (e: any) => void;
     onKeyUp: (e: any) => void;
 };

package/foundation/hooks/useLongPress/useLongPress.js

@@ -5,22 +5,27 @@ var react_1 = require("react");
 var useA11yKeyEvent_1 = require("../useA11yKeyEvent");
 var useDebounce_1 = require("../useDebounce");
 var useEventCallback_1 = require("../useEventCallback");
+var useEventListener_1 = require("../useEventListener");
+var useGlobalListener_1 = require("../useGlobalListener");
 var useTouchMouseEvent_1 = require("../useTouchMouseEvent");
+exports.isTouchEvent = function (ev) {
+    return 'touches' in ev;
+};
 /**
  * Provide longPress helper, both `click`/`tab`/`keydown` will trigger event
  *
  * - Trigger `onTap` when user action leave small than delay time.
  * - Trigger `onPress` when action time is long than delay time.
  *
- * @default UseLongPressOptions { isPreventDefault = true, delay = 300 }
+ * @default UseLongPressOptions { delay = 300 }
  */
 exports.useLongPress = function (_a, _b, _c) {
     var onTap = _a.onTap, onPress = _a.onPress;
-    var _d = _b === void 0 ? {} : _b, onTouchStart = _d.onTouchStart, onTouchEnd = _d.onTouchEnd, onMouseDown = _d.onMouseDown, onKeyDown = _d.onKeyDown, onKeyUp = _d.onKeyUp, onContextMenu = _d.onContextMenu, onMouseUpArg = _d.onMouseUp;
+    var _d = _b === void 0 ? {} : _b, onTouchStartArg = _d.onTouchStart, onTouchEndArg = _d.onTouchEnd, onMouseDown = _d.onMouseDown, onKeyDown = _d.onKeyDown, onKeyUp = _d.onKeyUp, onMouseUpArg = _d.onMouseUp;
     var _e = _c === void 0 ? {} : _c, _f = _e.isPreventDefault, isPreventDefault = _f === void 0 ? true : _f, _g = _e.delay, delay = _g === void 0 ? 300 : _g, _h = _e.externalWindow, externalWindow = _h === void 0 ? window : _h;
     var isEmittedRef = react_1.useRef(false);
     var isA11yDownRef = react_1.useRef(false);
-    var elmRef = react_1.useRef(null);
+    var actionRef = react_1.useRef(null);
     var reasonRef = react_1.useRef('click');
     var emitLongPress = useDebounce_1.useDebounce(function (e) {
         // * only when have onPress set have emit
@@ -29,10 +34,10 @@ exports.useLongPress = function (_a, _b, _c) {
             isEmittedRef.current = true;
         }
     }, delay);
-    var end = function (e) {
+    var end = function (e, isInside) {
         // ! mouse up only trigger when up on element, so we host that in document
-        externalWindow.document.removeEventListener('mouseup', onMouseUp);
-        if (!isEmittedRef.current && useTouchMouseEvent_1.isElmEqualOrContain(e.target, elmRef)) {
+        globalMouseUpListener.remove();
+        if (!isEmittedRef.current && isInside) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
         reasonRef.current = 'click';
@@ -41,11 +46,8 @@ exports.useLongPress = function (_a, _b, _c) {
     };
     var start = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
-        externalWindow.document.addEventListener('mouseup', onMouseUp);
+        globalMouseUpListener.listen();
         var isTouch = e.type === 'touchstart';
-        if (!isTouch)
-            e.preventDefault();
-        e.stopPropagation();
         if (isTouch) {
             reasonRef.current = 'tap';
         }
@@ -53,22 +55,49 @@ exports.useLongPress = function (_a, _b, _c) {
     };
     var _j = useTouchMouseEvent_1.useTouchMouseEvent({
         onTouchStart: function (e) {
-            onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+            // prevent long touch leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onTouchStartArg === null || onTouchStartArg === void 0 ? void 0 : onTouchStartArg(e);
             start(e);
         },
-        onTouchEnd: function (e) {
-            onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
-            end(e);
+        onTouchEnd: function (e, isInside) {
+            // prevent leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
+            onTouchEndArg === null || onTouchEndArg === void 0 ? void 0 : onTouchEndArg(e, isInside);
+            end(e, isInside);
         },
         onMouseDown: function (e) {
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
             start(e);
         },
-        onMouseUp: function (e) {
+        onMouseUp: function (e, isInside) {
+            // prevent leave element focus
+            if (isPreventDefault) {
+                e.preventDefault();
+            }
             onMouseUpArg === null || onMouseUpArg === void 0 ? void 0 : onMouseUpArg(e);
-            end(e);
+            end(e, isInside);
         },
-    }, { isPreventDefault: isPreventDefault }), onMouseUp = _j.onMouseUp, events = tslib_1.__rest(_j, ["onMouseUp"]);
+    }, { actionRef: actionRef }), onMouseUp = _j.onMouseUp, onTouchEnd = _j.onTouchEnd, onTouchStart = _j.onTouchStart, events = tslib_1.__rest(_j, ["onMouseUp", "onTouchEnd", "onTouchStart"]);
+    // use event listener for make event `passive` work in safari
+    useEventListener_1.useEventListener(actionRef, 'touchstart', onTouchStart, {
+        passive: false,
+    });
+    // use event listener for make event `passive` work in safari
+    useEventListener_1.useEventListener(actionRef, 'touchend', onTouchEnd, {
+        passive: false,
+    });
+    var globalMouseUpListener = useGlobalListener_1.useGlobalListener('mouseup', onMouseUp, {
+        target: externalWindow,
+        startImmediately: false,
+    });
     var handleDeleteKeyDown = useA11yKeyEvent_1.useA11yKeyEvent(function (e) {
         reasonRef.current = 'keyboard';
         // * keydown when hold will trigger many time, show when current is a11y down, not trigger again
@@ -84,18 +113,8 @@ exports.useLongPress = function (_a, _b, _c) {
     var handleKeyUp = useEventCallback_1.useEventCallback(function (e) {
         onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(e);
         if (isA11yDownRef.current)
-            end(e);
+            end(e, true);
         isA11yDownRef.current = false;
     });
-    var handleContextMenu = useEventCallback_1.useEventCallback(function (e) {
-        onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(e);
-        e.preventDefault();
-    });
-    react_1.useEffect(function () {
-        return function () {
-            // * clean when in start remove
-            externalWindow.document.removeEventListener('mouseup', onMouseUp);
-        };
-    }, [onMouseUp, externalWindow]);
-    return tslib_1.__assign({ ref: elmRef, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
+    return tslib_1.__assign({ ref: actionRef, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
 };

package/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.d.ts

@@ -1,14 +1,31 @@
-/// <reference types="styled-jsx" />
 import { MouseEventHandler, TouchEventHandler } from 'react';
 import { RefOrElementOrCallback } from '../../utils';
-export interface UseTouchMouseEvent<T> {
-    onMouseUp?: MouseEventHandler<T>;
-    onMouseDown?: MouseEventHandler<T>;
-    onTouchEnd?: TouchEventHandler<T>;
-    onTouchStart?: TouchEventHandler<T>;
+export interface UseTouchMouseEvent<T> extends Partial<UseTouchMouseOutputEvent<T>> {
+    onTouchEnd?: (event: React.TouchEvent<T>, 
+    /**
+     * when set insideRef, that will also emit the state of host reference contain pointer element when action stop
+     */
+    isInside?: boolean) => void;
+    onMouseUp?: (event: React.MouseEvent<T, globalThis.MouseEvent>, 
+    /**
+     * when set insideRef, that will also emit the state of host reference contain pointer element when action stop
+     */
+    isInside?: boolean) => void;
 }
-export interface UseTouchMouseEventOptions {
-    isPreventDefault?: boolean;
+export interface UseTouchMouseOutputEvent<T> {
+    onMouseUp: MouseEventHandler<T>;
+    onMouseDown: MouseEventHandler<T>;
+    onTouchEnd: TouchEventHandler<T>;
+    onTouchStart: TouchEventHandler<T>;
+}
+export interface UseTouchMouseEventOptions<T extends HTMLElement> {
+    /**
+     * when set that elementRef, event will bring with leave state when `touchend` and `mouseup`
+     *
+     * stop action event in browser default can be trigger when `touchend`, `mouseup` outside target element,
+     * set that host ref to make sure `touchend`, `mouseup` event only trigger when release inside target element
+     */
+    actionRef?: RefOrElementOrCallback<T>;
 }
 /**
  * Provide a utils for switch trigger touch event or mouse event between different device
@@ -20,6 +37,7 @@ export interface UseTouchMouseEventOptions {
  *   - onMouseDown
  *   - onMouseUp
  *
+ * ### Once that is touch support device, that mouse event will never can be trigger
  * https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
  *
  * Event order:
@@ -31,12 +49,7 @@ export interface UseTouchMouseEventOptions {
  * - mouseup
  * - click
  */
-export declare const useTouchMouseEvent: <T = unknown>({ onMouseDown: onMouseDownArg, onMouseUp: onMouseUpArg, onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, }: UseTouchMouseEvent<T>, { isPreventDefault }?: UseTouchMouseEventOptions) => {
-    onTouchStart: (e: any) => void;
-    onTouchEnd: (e: any) => void;
-    onMouseDown: (event: import("react").MouseEvent<T, MouseEvent>) => void;
-    onMouseUp: (e: any) => void;
-};
+export declare const useTouchMouseEvent: <T extends HTMLElement = HTMLElement>({ onMouseDown: onMouseDownArg, onMouseUp: onMouseUpArg, onTouchStart: onTouchStartArg, onTouchEnd: onTouchEndArg, }: UseTouchMouseEvent<T>, { actionRef }?: UseTouchMouseEventOptions<T>) => UseTouchMouseOutputEvent<T>;
 /**
  * check is element equal or contains target element
  */

package/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var contexts_1 = require("../../contexts");
 var utils_1 = require("../../utils");
 var useEventCallback_1 = require("../useEventCallback");
 /**
@@ -13,6 +14,7 @@ var useEventCallback_1 = require("../useEventCallback");
  *   - onMouseDown
  *   - onMouseUp
  *
+ * ### Once that is touch support device, that mouse event will never can be trigger
  * https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
  *
  * Event order:
@@ -26,47 +28,44 @@ var useEventCallback_1 = require("../useEventCallback");
  */
 exports.useTouchMouseEvent = function (_a, _b) {
     var onMouseDownArg = _a.onMouseDown, onMouseUpArg = _a.onMouseUp, onTouchStartArg = _a.onTouchStart, onTouchEndArg = _a.onTouchEnd;
-    var _c = (_b === void 0 ? {} : _b).isPreventDefault, isPreventDefault = _c === void 0 ? true : _c;
-    var isLiveEndRef = react_1.useRef(false);
-    var isStartRef = react_1.useRef(false);
-    var startAction = function () { return (isStartRef.current = true); };
-    var endAction = function () { return (isStartRef.current = false); };
+    var actionRef = (_b === void 0 ? {} : _b).actionRef;
+    var stopMouseEventRef = react_1.useRef(false);
+    var document = contexts_1.useRcPortalWindowContext().document;
     var onTouchStart = useEventCallback_1.useEventCallback(function (e) {
-        startAction();
+        stopMouseEventRef.current = true;
         onTouchStartArg === null || onTouchStartArg === void 0 ? void 0 : onTouchStartArg(e);
     });
+    function checkInside(elm) {
+        var hostElement = utils_1.getRefElement(actionRef);
+        if (hostElement) {
+            return !!(elm && exports.isElmEqualOrContain(elm, hostElement));
+        }
+        return false;
+    }
     var onTouchEnd = useEventCallback_1.useEventCallback(function (e) {
-        endAction();
-        isLiveEndRef.current = true;
-        onTouchEndArg === null || onTouchEndArg === void 0 ? void 0 : onTouchEndArg(e);
-    });
-    var preventDefaultEvent = function (e) {
-        if (isPreventDefault) {
-            e.preventDefault();
-            e.stopPropagation();
+        var isInside;
+        if (actionRef && e.touches.length < 2 && e.changedTouches.length < 2) {
+            var touch = e.touches[0] || e.changedTouches[0];
+            var elm = document.elementFromPoint(touch.pageX, touch.pageY);
+            isInside = !!elm && checkInside(elm);
         }
-    };
+        onTouchEndArg === null || onTouchEndArg === void 0 ? void 0 : onTouchEndArg(e, isInside);
+    });
     var onMouseDown = useEventCallback_1.useEventCallback(function (e) {
-        startAction();
-        if (isLiveEndRef.current) {
-            e.preventDefault();
-            e.stopPropagation();
+        if (stopMouseEventRef.current) {
             return;
         }
         onMouseDownArg === null || onMouseDownArg === void 0 ? void 0 : onMouseDownArg(e);
     });
     var onMouseUp = useEventCallback_1.useEventCallback(function (e) {
-        if (!isStartRef.current) {
-            preventDefaultEvent(e);
-            return;
-        }
-        endAction();
-        if (isLiveEndRef.current) {
-            isLiveEndRef.current = false;
-            preventDefaultEvent(e);
+        var isInside;
+        if (stopMouseEventRef.current)
             return;
+        if (actionRef) {
+            var elm = e.target;
+            isInside = !!elm && checkInside(elm);
         }
-        onMouseUpArg === null || onMouseUpArg === void 0 ? void 0 : onMouseUpArg(e);
+        onMouseUpArg === null || onMouseUpArg === void 0 ? void 0 : onMouseUpArg(e, isInside);
     });
     return {
         onTouchStart: onTouchStart,

package/foundation/typings/deepPartial.d.ts

@@ -1,3 +1,3 @@
 export declare type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : T[P] extends Record<any, any> ? DeepPartial<T[P]> : T[P];
 };

package/package.json

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