@ringcentral/juno 2.4.2 → 2.6.0

package/es6/components/Virtuoso/react-virtuoso/stateFlagsSystem.js

@@ -1,6 +1,10 @@
 import { __read } from "tslib";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
+export var UP = 'up';
+export var DOWN = 'down';
+export var NONE = 'none';
 var INITIAL_BOTTOM_STATE = {
     atBottom: false,
     notAtBottomBecause: 'NOT_SHOWING_LAST_ITEM',
@@ -8,42 +12,54 @@ var INITIAL_BOTTOM_STATE = {
         offsetBottom: 0,
         scrollTop: 0,
         viewportHeight: 0,
-        totalHeight: 0,
+        scrollHeight: 0,
     },
 };
 export var stateFlagsSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight;
+    var _b = __read(_a, 1), _c = _b[0], scrollContainerState = _c.scrollContainerState, scrollTop = _c.scrollTop, viewportHeight = _c.viewportHeight, headerHeight = _c.headerHeight, footerHeight = _c.footerHeight, scrollBy = _c.scrollBy;
     var isAtBottom = u.statefulStream(false);
     var isAtTop = u.statefulStream(true);
     var atBottomStateChange = u.stream();
     var atTopStateChange = u.stream();
-    var listStateListener = u.stream();
+    var atBottomThreshold = u.statefulStream(4);
     // skip 1 to avoid an initial on/off flick
     var isScrolling = u.streamFromEmitter(u.pipe(u.merge(u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(true)), u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(false), u.debounceTime(100))), u.distinctUntilChanged()));
+    var isScrollingBy = u.statefulStreamFromEmitter(u.pipe(u.merge(u.pipe(scrollBy, u.mapTo(true)), u.pipe(scrollBy, u.mapTo(false), u.debounceTime(200))), u.distinctUntilChanged()), false);
+    // u.subscribe(isScrollingBy, (isScrollingBy) => console.log({ isScrollingBy }))
     u.connect(u.pipe(u.duc(scrollTop), u.map(function (top) { return top === 0; }), u.distinctUntilChanged()), isAtTop);
     u.connect(isAtTop, atTopStateChange);
-    var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(listStateListener, u.duc(scrollTop), u.duc(viewportHeight)), u.scan(function (current, _a) {
-        var _b = __read(_a, 3), _c = _b[0], bottom = _c.bottom, offsetBottom = _c.offsetBottom, scrollTop = _b[1], viewportHeight = _b[2];
-        var isAtBottom = offsetBottom === 0 && scrollTop + viewportHeight - bottom > -4;
+    var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(scrollContainerState, u.duc(viewportHeight), u.duc(headerHeight), u.duc(footerHeight), u.duc(atBottomThreshold)), u.scan(function (current, _a) {
+        var _b = __read(_a, 5), _c = __read(_b[0], 2), scrollTop = _c[0], scrollHeight = _c[1], viewportHeight = _b[1], _headerHeight = _b[2], _footerHeight = _b[3], atBottomThreshold = _b[4];
+        var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
         var state = {
             viewportHeight: viewportHeight,
             scrollTop: scrollTop,
-            offsetBottom: offsetBottom,
-            totalHeight: bottom + offsetBottom,
+            scrollHeight: scrollHeight,
         };
         if (isAtBottom) {
+            var atBottomBecause = void 0;
+            var scrollTopDelta = void 0;
+            if (scrollTop > current.state.scrollTop) {
+                atBottomBecause = 'SCROLLED_DOWN';
+                scrollTopDelta = current.state.scrollTop - scrollTop;
+            }
+            else {
+                atBottomBecause = 'SIZE_DECREASED';
+                scrollTopDelta =
+                    current.state.scrollTop - scrollTop ||
+                        current.scrollTopDelta;
+            }
             return {
                 atBottom: true,
                 state: state,
+                atBottomBecause: atBottomBecause,
+                scrollTopDelta: scrollTopDelta,
             };
         }
         var notAtBottomBecause;
-        if (state.totalHeight > current.state.totalHeight) {
+        if (state.scrollHeight > current.state.scrollHeight) {
             notAtBottomBecause = 'SIZE_INCREASED';
         }
-        else if (offsetBottom !== 0) {
-            notAtBottomBecause = 'NOT_SHOWING_LAST_ITEM';
-        }
         else if (viewportHeight < current.state.viewportHeight) {
             notAtBottomBecause = 'VIEWPORT_HEIGHT_DECREASING';
         }
@@ -59,14 +75,64 @@ export var stateFlagsSystem = u.system(function (_a) {
             state: state,
         };
     }, INITIAL_BOTTOM_STATE), u.distinctUntilChanged(function (prev, next) {
-        // prev && console.log(prev.atBottom, next.atBottom)
         return prev && prev.atBottom === next.atBottom;
     })));
+    var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _a) {
+        var _b = __read(_a, 2), scrollTop = _b[0], scrollHeight = _b[1];
+        if (current.scrollHeight !== scrollHeight) {
+            if (current.scrollTop !== scrollTop) {
+                return {
+                    scrollHeight: scrollHeight,
+                    scrollTop: scrollTop,
+                    jump: current.scrollTop - scrollTop,
+                    changed: true,
+                };
+            }
+            return {
+                scrollHeight: scrollHeight,
+                scrollTop: scrollTop,
+                jump: 0,
+                changed: true,
+            };
+        }
+        return {
+            scrollTop: scrollTop,
+            scrollHeight: scrollHeight,
+            jump: 0,
+            changed: false,
+        };
+    }, { scrollHeight: 0, jump: 0, scrollTop: 0, changed: false }), u.filter(function (value) { return value.changed; }), u.map(function (value) { return value.jump; })), 0);
     u.connect(u.pipe(atBottomState, u.map(function (state) { return state.atBottom; })), isAtBottom);
-    u.subscribe(isAtBottom, function (value) {
-        setTimeout(function () { return u.publish(atBottomStateChange, value); });
-    });
-    // connect(isAtBottom, atBottomStateChange)
+    u.connect(u.pipe(isAtBottom, u.throttleTime(50)), atBottomStateChange);
+    var scrollDirection = u.statefulStream(DOWN);
+    u.connect(u.pipe(scrollContainerState, u.map(function (_a) {
+        var _b = __read(_a, 1), scrollTop = _b[0];
+        return scrollTop;
+    }), u.distinctUntilChanged(), u.scan(function (acc, scrollTop) {
+        // if things change while compensating for items, ignore,
+        // but store the new scrollTop
+        if (u.getValue(isScrollingBy)) {
+            return { direction: acc.direction, prevScrollTop: scrollTop };
+        }
+        return {
+            direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
+            prevScrollTop: scrollTop,
+        };
+    }, { direction: DOWN, prevScrollTop: 0 }), u.map(function (value) { return value.direction; })), scrollDirection);
+    u.connect(u.pipe(scrollContainerState, u.throttleTime(50), u.mapTo(NONE)), scrollDirection);
+    var scrollVelocity = u.statefulStream(0);
+    u.connect(u.pipe(isScrolling, u.filter(function (value) { return !value; }), u.mapTo(0)), scrollVelocity);
+    u.connect(u.pipe(scrollTop, u.throttleTime(100), u.withLatestFrom(isScrolling), u.filter(function (_a) {
+        var _b = __read(_a, 2), _ = _b[0], isScrolling = _b[1];
+        return !!isScrolling;
+    }), u.scan(function (_a, _b) {
+        var _c = __read(_a, 2), _ = _c[0], prev = _c[1];
+        var _d = __read(_b, 1), next = _d[0];
+        return [prev, next];
+    }, [0, 0]), u.map(function (_a) {
+        var _b = __read(_a, 2), prev = _b[0], next = _b[1];
+        return next - prev;
+    })), scrollVelocity);
     return {
         isScrolling: isScrolling,
         isAtTop: isAtTop,
@@ -74,6 +140,9 @@ export var stateFlagsSystem = u.system(function (_a) {
         atBottomState: atBottomState,
         atTopStateChange: atTopStateChange,
         atBottomStateChange: atBottomStateChange,
-        listStateListener: listStateListener,
+        scrollDirection: scrollDirection,
+        atBottomThreshold: atBottomThreshold,
+        scrollVelocity: scrollVelocity,
+        lastJumpDueToItemResize: lastJumpDueToItemResize,
     };
 }, u.tup(domIOSystem));

package/es6/components/Virtuoso/react-virtuoso/upwardScrollFixSystem.js

@@ -1,43 +1,43 @@
 import { __read } from "tslib";
 /* eslint-disable no-continue */
 import * as u from '@virtuoso.dev/urx';
-import { domIOSystem, UP } from './domIOSystem';
+import { domIOSystem } from './domIOSystem';
 import { listStateSystem } from './listStateSystem';
+import { loggerSystem, LogLevel } from './loggerSystem';
 import { sizeSystem } from './sizeSystem';
-import { stateFlagsSystem } from './stateFlagsSystem';
+import { stateFlagsSystem, UP } from './stateFlagsSystem';
 /**
  * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
  */
 export var upwardScrollFixSystem = u.system(function (_a) {
-    var _b = __read(_a, 4), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, scrollDirection = _c.scrollDirection, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, isScrolling = _b[1].isScrolling, listState = _b[2].listState, _d = _b[3], beforeUnshiftWith = _d.beforeUnshiftWith, sizes = _d.sizes;
-    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress), u.filter(function (_a) {
-        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
-        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP);
-    }), u.map(function (_a) {
-        var _b = __read(_a, 1), state = _b[0];
-        return state;
-    }), u.scan(function (_a, _b) {
-        var _c = __read(_a, 2), prevItems = _c[1];
-        var items = _b.items;
+    var _b = __read(_a, 5), _c = _b[0], scrollBy = _c.scrollBy, scrollTop = _c.scrollTop, deviation = _c.deviation, scrollingInProgress = _c.scrollingInProgress, _d = _b[1], isScrolling = _d.isScrolling, isAtBottom = _d.isAtBottom, atBottomState = _d.atBottomState, scrollDirection = _d.scrollDirection, lastJumpDueToItemResize = _d.lastJumpDueToItemResize, listState = _b[2].listState, _e = _b[3], beforeUnshiftWith = _e.beforeUnshiftWith, shiftWithOffset = _e.shiftWithOffset, sizes = _e.sizes, log = _b[4].log;
+    var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_a, 
+    // @ts-ignore
+    _b) {
+        var _c = __read(_a, 3), prevItems = _c[1], prevTotalCount = _c[2];
+        var 
+        // @ts-ignore
+        _d = __read(_b, 2), _e = _d[0], items = _e.items, totalCount = _e.totalCount, lastJumpDueToItemResize = _d[1];
         var newDev = 0;
-        if (prevItems.length > 0 && items.length > 0) {
-            var firstItemIndex = items[0].originalIndex;
-            var prevFirstItemIndex = prevItems[0].originalIndex;
-            var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
-            if (!atStart) {
-                // Handles an item taller than the viewport
-                if (firstItemIndex === prevFirstItemIndex) {
-                    newDev = items[0].size - prevItems[0].size;
-                }
-                else {
+        if (prevTotalCount === totalCount) {
+            if (prevItems.length > 0 && items.length > 0) {
+                var firstItemIndex = items[0].originalIndex;
+                var prevFirstItemIndex = prevItems[0].originalIndex;
+                var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
+                var onlyItem = items.length === 1;
+                if (!atStart) {
                     var _loop_1 = function (index) {
                         var item = items[index];
                         var prevItem = prevItems.find(function (pItem) { return pItem.originalIndex === item.originalIndex; });
                         if (!prevItem) {
                             return "continue";
                         }
-                        if (item.offset !== prevItem.offset) {
-                            newDev = item.offset - prevItem.offset;
+                        if (item.offset !== prevItem.offset || onlyItem) {
+                            newDev =
+                                item.offset -
+                                    prevItem.offset +
+                                    item.size -
+                                    prevItem.size;
                             return "break";
                         }
                     };
@@ -48,13 +48,21 @@ export var upwardScrollFixSystem = u.system(function (_a) {
                     }
                 }
             }
+            if (newDev !== 0) {
+                newDev += lastJumpDueToItemResize;
+            }
         }
-        return [newDev, items];
-    }, [0, []]), u.filter(function (_a) {
+        return [newDev, items, totalCount];
+    }, [0, [], 0]), u.filter(function (_a) {
         var _b = __read(_a, 1), amount = _b[0];
         return amount !== 0;
+    }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_a) {
+        var _b = __read(_a, 4), scrollTop = _b[1], scrollDirection = _b[2], scrollingInProgress = _b[3];
+        // console.log({ amount, scrollTop, scrollDirection, scrollingInProgress, isAtBottom, atBottomState })
+        return (!scrollingInProgress && scrollTop !== 0 && scrollDirection === UP); // && (isAtBottom ? amount > 0 : true)
     }), u.map(function (_a) {
-        var _b = __read(_a, 1), amount = _b[0];
+        var _b = __read(_a, 5), _c = __read(_b[0], 1), amount = _c[0], log = _b[4];
+        log('Upward scrolling compensation', { amount: amount }, LogLevel.DEBUG);
         return amount;
     })));
     u.connect(u.pipe(deviationOffset, u.withLatestFrom(deviation), u.map(function (_a) {
@@ -79,9 +87,12 @@ export var upwardScrollFixSystem = u.system(function (_a) {
             u.publish(scrollBy, { top: -offset, behavior: 'auto' });
         }
     });
+    u.connect(u.pipe(shiftWithOffset, u.map(function (offset) {
+        return { top: -offset };
+    })), scrollBy);
     u.connect(u.pipe(beforeUnshiftWith, u.withLatestFrom(sizes), u.map(function (_a) {
         var _b = __read(_a, 2), offset = _b[0], lastSize = _b[1].lastSize;
         return offset * lastSize;
     })), deviationOffset);
     return { deviation: deviation };
-}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem));
+}, u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem, loggerSystem));

package/es6/components/Virtuoso/react-virtuoso/utils/correctItemSize.js

@@ -0,0 +1,3 @@
+export function correctItemSize(el, dimension) {
+    return Math.round(el.getBoundingClientRect()[dimension]);
+}

package/es6/components/Virtuoso/react-virtuoso/windowScrollerSystem.js

@@ -2,15 +2,16 @@ import { __assign, __read } from "tslib";
 import * as u from '@virtuoso.dev/urx';
 import { domIOSystem } from './domIOSystem';
 export var windowScrollerSystem = u.system(function (_a) {
-    var _b = __read(_a, 1), _c = _b[0], scrollTop = _c.scrollTop, scrollTo = _c.scrollTo;
+    var _b = __read(_a, 1), _c = _b[0], scrollTo = _c.scrollTo, scrollContainerState = _c.scrollContainerState;
+    var windowScrollContainerState = u.stream();
     var windowViewportRect = u.stream();
-    var windowScrollTop = u.stream();
     var windowScrollTo = u.stream();
     var useWindowScroll = u.statefulStream(false);
-    u.connect(u.pipe(u.combineLatest(windowScrollTop, windowViewportRect), u.map(function (_a) {
-        var _b = __read(_a, 2), windowScrollTop = _b[0], offsetTop = _b[1].offsetTop;
-        return Math.max(0, windowScrollTop - offsetTop);
-    })), scrollTop);
+    var customScrollParent = u.statefulStream(undefined);
+    u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_a) {
+        var _b = __read(_a, 2), _c = __read(_b[0], 2), windowScrollTop = _c[0], scrollHeight = _c[1], offsetTop = _b[1].offsetTop;
+        return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+    })), scrollContainerState);
     u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_a) {
         var _b = __read(_a, 2), scrollTo = _b[0], offsetTop = _b[1].offsetTop;
         return __assign(__assign({}, scrollTo), { top: scrollTo.top + offsetTop });
@@ -18,8 +19,9 @@ export var windowScrollerSystem = u.system(function (_a) {
     return {
         // config
         useWindowScroll: useWindowScroll,
+        customScrollParent: customScrollParent,
         // input
-        windowScrollTop: windowScrollTop,
+        windowScrollContainerState: windowScrollContainerState,
         windowViewportRect: windowViewportRect,
         // signals
         windowScrollTo: windowScrollTo,

package/es6/foundation/hooks/useEventListener/useEventListener.js

@@ -1,4 +1,4 @@
-import { __read } from "tslib";
+import { __assign, __rest } from "tslib";
 import { useEffect, useRef } from 'react';
 import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
@@ -17,13 +17,14 @@ import { useEventCallback } from '../useEventCallback';
  * useEventListener(window, 'keyup', () => console.log('window key up'))
  * ```
  */
-export function useEventListener(target) {
-    var o = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        o[_i - 1] = arguments[_i];
+export function useEventListener(target, key, callback) {
+    var args = [];
+    for (var _i = 3; _i < arguments.length; _i++) {
+        args[_i - 3] = arguments[_i];
     }
-    var _a = __read(o, 3), key = _a[0], cb = _a[1], options = _a[2];
-    var listener = 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(callback);
     var cancelRef = useRef(function () { });
     var bindRef = useRef(function () { });
     var currentRefElm = getRefElement(target);
@@ -38,7 +39,9 @@ export 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]);
@@ -47,3 +50,19 @@ export function useEventListener(target) {
         remove: function () { return cancelRef.current(); },
     };
 }
+function getListenerOverloadOption(args) {
+    var options;
+    var config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        var _a = __assign(__assign({}, (args[0] || {})), (args[1] || {})), startImmediately = _a.startImmediately, restOptions = __rest(_a, ["startImmediately"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+        };
+    }
+    return { options: options, config: config };
+}

package/es6/foundation/hooks/useGlobalListener/createGlobalListener.js

@@ -0,0 +1,81 @@
+import { getRefElement } from '../../utils';
+export var 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
+ * ```
+ */
+export var 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 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); });
+            };
+            globalListenerEventMap.set(customKey, {
+                exec: exec,
+                listeners: new Set([listener]),
+            });
+            var target = 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 = getRefElement(targetProp);
+            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec, options);
+            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/es6/foundation/hooks/useGlobalListener/index.js

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

package/es6/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -1,89 +1,8 @@
+import { __assign, __rest } from "tslib";
 import { useEffect, useRef } from 'react';
 import { getRefElement, logInDev } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
-export var 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
- * ```
- */
-export var 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 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); });
-            };
-            globalListenerEventMap.set(customKey, {
-                exec: exec,
-                listeners: new Set([listener]),
-            });
-            var target = 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 = getRefElement(targetProp);
-            target === null || target === void 0 ? void 0 : target.removeEventListener(key, _savedEvent.exec);
-            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,
-            };
-        },
-    };
-};
+import { createGlobalListener, } from './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.
@@ -91,40 +10,91 @@ export var 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
  * ```
  */
-export function useGlobalListener(key, listener, options) {
-    if (options === void 0) { options = {}; }
+export 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(listener);
-    var globalListener = useRef(createGlobalListener(key, _listener, options)).current;
+    var globalListener = useRef(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
         useEffect(function () {
-            var target = getRefElement(targetProp_1);
-            if (target !== window && customKey_1 === key) {
-                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) {
+                    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 = getRefElement(targetProp);
+                if (target !== window) {
+                    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
         }, []);
     }
     useEffect(function () {
-        globalListener.listen();
+        if (startImmediately) {
+            globalListener.listen();
+        }
         return globalListener.remove;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return globalListener;
 }
+function getListenerOverloadOption(args) {
+    var options;
+    var config;
+    if (typeof args[0] === 'boolean') {
+        options = args[0];
+        config = args[1];
+    }
+    else {
+        var _a = __assign(__assign({}, (args[0] || {})), (args[1] || {})), startImmediately = _a.startImmediately, customKey = _a.customKey, target = _a.target, restOptions = __rest(_a, ["startImmediately", "customKey", "target"]);
+        options = restOptions;
+        config = {
+            startImmediately: startImmediately,
+            customKey: customKey,
+            target: target,
+        };
+    }
+    return { options: options, config: config };
+}