@ringcentral/juno 2.5.0 → 2.8.0

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

@@ -1,24 +1,29 @@
 import { __assign, __rest } from "tslib";
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { useA11yKeyEvent } from '../useA11yKeyEvent';
 import { useDebounce } from '../useDebounce';
 import { useEventCallback } from '../useEventCallback';
-import { isElmEqualOrContain, useTouchMouseEvent, } from '../useTouchMouseEvent';
+import { useEventListener } from '../useEventListener';
+import { useGlobalListener } from '../useGlobalListener';
+import { useTouchMouseEvent } from '../useTouchMouseEvent';
+export var 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 }
  */
 export var 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 = useRef(false);
     var isA11yDownRef = useRef(false);
-    var elmRef = useRef(null);
+    var actionRef = useRef(null);
     var reasonRef = useRef('click');
     var emitLongPress = useDebounce(function (e) {
         // * only when have onPress set have emit
@@ -27,10 +32,10 @@ export var 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 && isElmEqualOrContain(e.target, elmRef)) {
+        globalMouseUpListener.remove();
+        if (!isEmittedRef.current && isInside) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
         reasonRef.current = 'click';
@@ -39,11 +44,8 @@ export var 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';
         }
@@ -51,22 +53,49 @@ export var useLongPress = function (_a, _b, _c) {
     };
     var _j = 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 = __rest(_j, ["onMouseUp"]);
+    }, { actionRef: actionRef }), onMouseUp = _j.onMouseUp, onTouchEnd = _j.onTouchEnd, onTouchStart = _j.onTouchStart, events = __rest(_j, ["onMouseUp", "onTouchEnd", "onTouchStart"]);
+    // use event listener for make event `passive` work in safari
+    useEventListener(actionRef, 'touchstart', onTouchStart, {
+        passive: false,
+    });
+    // use event listener for make event `passive` work in safari
+    useEventListener(actionRef, 'touchend', onTouchEnd, {
+        passive: false,
+    });
+    var globalMouseUpListener = useGlobalListener('mouseup', onMouseUp, {
+        target: externalWindow,
+        startImmediately: false,
+    });
     var handleDeleteKeyDown = useA11yKeyEvent(function (e) {
         reasonRef.current = 'keyboard';
         // * keydown when hold will trigger many time, show when current is a11y down, not trigger again
@@ -82,18 +111,8 @@ export var useLongPress = function (_a, _b, _c) {
     var handleKeyUp = 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(function (e) {
-        onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(e);
-        e.preventDefault();
-    });
-    useEffect(function () {
-        return function () {
-            // * clean when in start remove
-            externalWindow.document.removeEventListener('mouseup', onMouseUp);
-        };
-    }, [onMouseUp, externalWindow]);
-    return __assign({ ref: elmRef, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
+    return __assign({ ref: actionRef, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, events);
 };

package/es6/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { useRcPortalWindowContext } from '../../contexts';
 import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
@@ -11,6 +12,7 @@ import { useEventCallback } from '../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:
@@ -24,47 +26,44 @@ import { useEventCallback } from '../useEventCallback';
  */
 export var 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 = useRef(false);
-    var isStartRef = 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 = useRef(false);
+    var document = useRcPortalWindowContext().document;
     var onTouchStart = useEventCallback(function (e) {
-        startAction();
+        stopMouseEventRef.current = true;
         onTouchStartArg === null || onTouchStartArg === void 0 ? void 0 : onTouchStartArg(e);
     });
+    function checkInside(elm) {
+        var hostElement = getRefElement(actionRef);
+        if (hostElement) {
+            return !!(elm && isElmEqualOrContain(elm, hostElement));
+        }
+        return false;
+    }
     var onTouchEnd = 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(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(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/hooks/useEventListener/useEventListener.d.ts

@@ -1,20 +1,16 @@
+import { SyntheticEvent } from 'react';
 import { RefOrElementOrCallback } from '../../utils';
-/**
- * bind event when component mount and auto remove event when destroy.
- * can remove listener by call returned function or pass empty 'target'.
- *
- * @param target
- * listener will be removed when target is changed to null,
- * or rebinding to new element when `ref.current` change
- * @returns a method object
- * - listen() listen listener again, if that have listener, that will not listen again
- * - remove() remove listener
- * @example
- * ```ts
- * useEventListener(window, 'keyup', () => console.log('window key up'))
- * ```
- */
-export declare function useEventListener(target?: RefOrElementOrCallback | EventTarget, ...o: Parameters<EventTarget['addEventListener']>): {
+export declare type UseEventListenerAction = {
     listen: () => void;
     remove: () => void;
 };
+export declare type UseEventListenerConfig = {
+    /**
+     * start listening when component mounted
+     *
+     * @default true
+     */
+    startImmediately?: boolean;
+};
+export declare function useEventListener<T = SyntheticEvent>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event?: T) => void, config?: UseEventListenerConfig): UseEventListenerAction;
+export declare function useEventListener<T = SyntheticEvent>(target: RefOrElementOrCallback | EventTarget, key: string, callback: (event?: T) => void, options?: AddEventListenerOptions | boolean, config?: UseEventListenerConfig): UseEventListenerAction;

package/foundation/hooks/useEventListener/useEventListener.js

@@ -19,13 +19,14 @@ var useEventCallback_1 = require("../useEventCallback");
  * useEventListener(window, 'keyup', () => console.log('window key up'))
  * ```
  */
-function useEventListener(target) {
-    var o = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        o[_i - 1] = arguments[_i];
+function useEventListener(target, key, callback) {
+    var args = [];
+    for (var _i = 3; _i < arguments.length; _i++) {
+        args[_i - 3] = arguments[_i];
     }
-    var _a = tslib_1.__read(o, 3), key = _a[0], cb = _a[1], options = _a[2];
-    var listener = useEventCallback_1.useEventCallback(cb);
+    var _a = getListenerOverloadOption(args), options = _a.options, config = _a.config;
+    var _b = (config || {}).startImmediately, startImmediately = _b === void 0 ? true : _b;
+    var listener = useEventCallback_1.useEventCallback(callback);
     var cancelRef = react_1.useRef(function () { });
     var bindRef = react_1.useRef(function () { });
     var currentRefElm = utils_1.getRefElement(target);
@@ -40,7 +41,9 @@ function useEventListener(target) {
         cancelRef.current = function () {
             return currentElm.removeEventListener(key, listener, options);
         };
-        bindRef.current();
+        if (startImmediately) {
+            bindRef.current();
+        }
         return cancelRef.current;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [target, currentRefElm]);
@@ -50,3 +53,19 @@ function useEventListener(target) {
     };
 }
 exports.useEventListener = useEventListener;
+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, restOptions = tslib_1.__rest(_a, ["startImmediately"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+        };
+    }
+    return { options: options, config: config };
+}

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

@@ -0,0 +1,55 @@
+import { SyntheticEvent } from 'react';
+import { RefOrElementOrCallback } from '../../utils';
+export declare const globalListenerEventMap: Map<string, {
+    /**
+     * listener exec method
+     */
+    exec: (e: any) => void;
+    /**
+     * all listener
+     */
+    listeners: Set<(e: any) => void>;
+}>;
+export declare type CreateGlobalListenerConfig = {
+    /**
+     * custom key for determining different event group, default is same as `key`
+     */
+    customKey?: string;
+    /**
+     * custom binding event target, default is `window`
+     */
+    target?: RefOrElementOrCallback | EventTarget;
+};
+/**
+ * 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: <T extends SyntheticEvent<Element, Event>>(key: string, listener: (event?: T | undefined) => void, options?: boolean | AddEventListenerOptions | undefined, { customKey, target: targetProp, }?: CreateGlobalListenerConfig) => {
+    listen: () => void;
+    /**
+     * remove listener
+     */
+    remove: () => void;
+    /**
+     * current listener state
+     */
+    readonly state: {
+        /**
+         * current listener state count
+         */
+        readonly count: number;
+        /**
+         * is that be listening
+         */
+        listening: boolean;
+    };
+};

package/foundation/hooks/useGlobalListener/createGlobalListener.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../../utils");
+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, options, _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, options);
+        }
+        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, options);
+            exports.globalListenerEventMap.delete(customKey);
+        }
+    };
+    return {
+        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,
+            };
+        },
+    };
+};

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

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

package/foundation/hooks/useGlobalListener/index.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./createGlobalListener"), exports);
 tslib_1.__exportStar(require("./useGlobalListener"), exports);

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 {};