@ringcentral/juno 2.2.0 → 2.3.0

package/es6/foundation/hooks/useOverflow/useOverflow.js

@@ -1,11 +1,12 @@
 import { useRef } from 'react';
+import { getRefElement } from '../../utils';
 import { useResizeObserver } from '../useResizeObserver';
 /**
  * trigger when overflow state change
  */
 export var useOverflow = function (
 /** target element ref */
-innerRef, 
+target, 
 /** trigger when `ResizeObserver` emit */
 cb, 
 /**
@@ -20,19 +21,21 @@ performance) {
     }; }
     // * not have default value for that can trigger change first time.
     var showRef = useRef();
-    return useResizeObserver(innerRef, function () {
-        if (innerRef.current) {
-            var _a = innerRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
-            if (showRef.current !== show) {
-                showRef.current = show;
-                cb(show, {
-                    scrollWidth: scrollWidth,
-                    clientWidth: clientWidth,
-                    scrollHeight: scrollHeight,
-                    clientHeight: clientHeight,
-                });
-            }
-        }
+    return useResizeObserver(target, function () {
+        var element = getRefElement(target);
+        if (!element)
+            return;
+        var scrollWidth = element.scrollWidth, clientWidth = element.clientWidth, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
+        var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (showRef.current === show)
+            return;
+        // only emit when state change
+        showRef.current = show;
+        cb(show, {
+            scrollWidth: scrollWidth,
+            clientWidth: clientWidth,
+            scrollHeight: scrollHeight,
+            clientHeight: clientHeight,
+        });
     }, performance);
 };

package/es6/foundation/hooks/useResizeObserver/useResizeObserver.js

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import ResizeObserverPolyfill from 'resize-observer-polyfill';
 import { useRcPortalWindowContext } from '../../contexts';
-import { logInDev } from '../../utils';
+import { getRefElement, logInDev } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 import { useResultRef } from '../useResultRef';
 /**
@@ -38,7 +38,7 @@ export var getResizeObserver = function (callback, externalWindow) {
  */
 export var useResizeObserver = function (
 /** target element ref */
-ref, 
+target, 
 /** trigger when `ResizeObserver` emit */
 callback, 
 /** performance options, `mode`, `time`, `ignoreFireWhenObserve` */
@@ -74,8 +74,8 @@ performance) {
         return getResizeObserver(resizeCallback, externalWindow);
     });
     useLayoutEffect(function () {
+        var elm = getRefElement(target);
         var observer = observerRef.current;
-        var elm = ref.current;
         if (!elm) {
             throw new Error('please check element exist before bind resize observer');
         }
@@ -85,6 +85,6 @@ performance) {
         };
         // TODO: wait https://github.com/facebook/react/pull/20477 eslint support to remove this exhaustive-deps comment with support custom hooks
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ref]);
+    }, [target]);
     return observerRef.current;
 };

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

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { getRefElement } from '../../utils';
 import { useEventCallback } from '../useEventCallback';
 /**
  * Provide a utils for switch trigger touch event or mouse event between different device
@@ -72,9 +73,11 @@ export var useTouchMouseEvent = function (_a, _b) {
         onMouseUp: onMouseUp,
     };
 };
-export var isElmEqualOrContainRef = function (elm, elmRef) {
-    var _a;
-    return (elm &&
-        elmRef &&
-        (elmRef.current === elm || ((_a = elmRef.current) === null || _a === void 0 ? void 0 : _a.contains(elm))));
+/**
+ * check is element equal or contains target element
+ */
+export var isElmEqualOrContain = function (sourceTarget, containTarget) {
+    var elm = getRefElement(sourceTarget);
+    var target = getRefElement(containTarget);
+    return elm && target && (target === elm || target.contains(elm));
 };

package/es6/foundation/utils/getRefElement.js

@@ -0,0 +1,13 @@
+import { isRef } from './isRef';
+/**
+ * get element from React ref or callback
+ */
+export var getRefElement = function (ref) {
+    if (typeof ref === 'function') {
+        return ref();
+    }
+    if (isRef(ref)) {
+        return ref.current;
+    }
+    return ref;
+};

package/es6/foundation/utils/index.js

@@ -4,6 +4,7 @@ export * from './classes';
 export * from './clearReactReferencesInNode';
 export * from './combineProps';
 export * from './deepmerge';
+export * from './getRefElement';
 export * from './getScrollbarSize';
 export * from './hasValue';
 export * from './isRcElement';

package/es6/foundation/utils/removeClassName.js

@@ -1,7 +1,8 @@
+import { getRefElement } from './getRefElement';
 /**
  * remove className from element, default will not scan child nodes, if you want to scan child nodes, set `scanChildren` to `true`.
  *
- * @param elmRef target element reference
+ * @param target target element reference or element or callback
  * @param removeClass className to remove, default will use class `includes` to check, if you want to use full match, set `fullMatch` to `true`
  *
  * @example
@@ -16,9 +17,9 @@
  * elm => <div class="efg"></div>
  * ```
  */
-export function removeClassName(elmRef, removeClass, _a) {
+export function removeClassName(target, removeClass, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.scanChildren, scanChildren = _c === void 0 ? false : _c, _d = _b.fullMatch, fullMatch = _d === void 0 ? false : _d;
-    var elm = elmRef.current;
+    var elm = getRefElement(target);
     if (!elm)
         return;
     if (elm.className.includes(removeClass)) {

package/es6/foundation/utils/selectionHandler.js

@@ -1,10 +1,11 @@
+import { getRefElement } from './getRefElement';
 /**
  * get current input element selection position and is that selectRange state
  */
-export function getSelectionPosition(inputRef) {
-    var _a, _b;
-    var currentPosition = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart;
-    var currentPositionEnd = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.selectionEnd;
+export function getSelectionPosition(sourceTarget) {
+    var input = getRefElement(sourceTarget);
+    var currentPosition = input === null || input === void 0 ? void 0 : input.selectionStart;
+    var currentPositionEnd = input === null || input === void 0 ? void 0 : input.selectionEnd;
     var isSelectRange = currentPosition !== currentPositionEnd;
     return {
         isSelectRange: isSelectRange,
@@ -15,8 +16,8 @@ export function getSelectionPosition(inputRef) {
  * set input element selection position position,
  * if you need scroll that into view set `scrollIntoView` as true
  */
-export function setSelectionPosition(inputRef, options) {
-    var elm = inputRef.current;
+export function setSelectionPosition(target, options) {
+    var elm = getRefElement(target);
     if (elm && options.start !== null && options.end !== null) {
         // * use blur and refocus to refocus position into view
         if (options.scrollIntoView)

package/foundation/hooks/index.d.ts

@@ -2,12 +2,14 @@ export * from './useA11yKeyEvent';
 export * from './useAnnouncer';
 export * from './useAudio';
 export * from './useChange';
+export * from './useControlled';
 export * from './useDebounce';
 export * from './useEventCallback';
 export * from './useEventListener';
 export * from './useEver';
 export * from './useForceUpdate';
 export * from './useForkRef';
+export * from './useGlobalListener';
 export * from './useHiddenTabindex';
 export * from './useId';
 export * from './useInterval';

package/foundation/hooks/index.js

@@ -5,12 +5,14 @@ tslib_1.__exportStar(require("./useA11yKeyEvent"), exports);
 tslib_1.__exportStar(require("./useAnnouncer"), exports);
 tslib_1.__exportStar(require("./useAudio"), exports);
 tslib_1.__exportStar(require("./useChange"), exports);
+tslib_1.__exportStar(require("./useControlled"), exports);
 tslib_1.__exportStar(require("./useDebounce"), exports);
 tslib_1.__exportStar(require("./useEventCallback"), exports);
 tslib_1.__exportStar(require("./useEventListener"), exports);
 tslib_1.__exportStar(require("./useEver"), exports);
 tslib_1.__exportStar(require("./useForceUpdate"), exports);
 tslib_1.__exportStar(require("./useForkRef"), exports);
+tslib_1.__exportStar(require("./useGlobalListener"), exports);
 tslib_1.__exportStar(require("./useHiddenTabindex"), exports);
 tslib_1.__exportStar(require("./useId"), exports);
 tslib_1.__exportStar(require("./useInterval"), exports);

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

@@ -0,0 +1 @@
+export * from './useControlled';

package/foundation/hooks/useControlled/index.js

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

package/foundation/hooks/useControlled/useControlled.d.ts

@@ -0,0 +1 @@
+export { useControlled } from '@material-ui/core/utils';

package/foundation/hooks/useControlled/useControlled.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("@material-ui/core/utils");
+exports.useControlled = utils_1.useControlled;

package/foundation/hooks/useEventListener/useEventListener.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="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'.
@@ -14,7 +14,7 @@
  * useEventListener(window, 'keyup', () => console.log('window key up'))
  * ```
  */
-export declare function useEventListener(target?: EventTarget | null | React.RefObject<HTMLElement>, ...o: Parameters<EventTarget['addEventListener']>): {
+export declare function useEventListener(target?: RefOrElementOrCallback | EventTarget, ...o: Parameters<EventTarget['addEventListener']>): {
     listen: () => void;
     remove: () => void;
 };

package/foundation/hooks/useEventListener/useEventListener.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var isRef_1 = require("../../utils/isRef");
+var utils_1 = require("../../utils");
 var useEventCallback_1 = require("../useEventCallback");
 /**
  * bind event when component mount and auto remove event when destroy.
@@ -28,16 +28,18 @@ function useEventListener(target) {
     var listener = useEventCallback_1.useEventCallback(cb);
     var cancelRef = react_1.useRef(function () { });
     var bindRef = react_1.useRef(function () { });
-    var currentRefElm = isRef_1.isRef(target) && target.current;
+    var currentRefElm = utils_1.getRefElement(target);
     react_1.useEffect(function () {
         if (!target)
             return;
-        var elm = isRef_1.isRef(target) ? target.current : target;
-        if (!elm) {
+        var currentElm = utils_1.getRefElement(target);
+        if (!currentElm) {
             return cancelRef.current;
         }
-        bindRef.current = function () { return elm.addEventListener(key, listener, options); };
-        cancelRef.current = function () { return elm.removeEventListener(key, listener, options); };
+        bindRef.current = function () { return currentElm.addEventListener(key, listener, options); };
+        cancelRef.current = function () {
+            return currentElm.removeEventListener(key, listener, options);
+        };
         bindRef.current();
         return cancelRef.current;
         // eslint-disable-next-line react-hooks/exhaustive-deps

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

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

package/foundation/hooks/useGlobalListener/index.js

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

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

@@ -0,0 +1,108 @@
+/// <reference types="react" />
+/// <reference types="styled-jsx" />
+import { RefOrElementOrCallback } from '../../utils';
+export declare const globalListenerEventMap: Map<string, {
+    /**
+     * listener exec method
+     */
+    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;
+    };
+};

package/foundation/hooks/useGlobalListener/useGlobalListener.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+            };
+        },
+    };
+};
+/**
+ * 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
+ * ```
+ */
+function useGlobalListener(key, listener, options) {
+    if (options === void 0) { options = {}; }
+    var _listener = useEventCallback_1.useEventCallback(listener);
+    var globalListener = react_1.useRef(exports.createGlobalListener(key, _listener, options)).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',
+                });
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    }
+    react_1.useEffect(function () {
+        globalListener.listen();
+        return globalListener.remove;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return globalListener;
+}
+exports.useGlobalListener = useGlobalListener;

package/foundation/hooks/useHiddenTabindex/useHiddenTabindex.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { RefOrElementOrCallback } from '../../utils';
 /**
  * group hidden logic, when binding events element focus,
  * that hiddenRef will auto be `tabindex={-1}` *
  */
-export declare const useHiddenTabindex: <T extends HTMLElement>(hiddenRef: React.RefObject<T>) => {
+export declare const useHiddenTabindex: <T extends HTMLElement>(target: RefOrElementOrCallback<T>) => {
     onFocus: () => void;
     onBlur: () => void;
 };

package/foundation/hooks/useHiddenTabindex/useHiddenTabindex.js

@@ -1,19 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../../utils");
 var useEventCallback_1 = require("../useEventCallback");
 /**
  * group hidden logic, when binding events element focus,
  * that hiddenRef will auto be `tabindex={-1}` *
  */
-exports.useHiddenTabindex = function (hiddenRef) {
+exports.useHiddenTabindex = function (target) {
     var handleFocus = useEventCallback_1.useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = utils_1.getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === 0) {
             hiddenElm.tabIndex = -1;
         }
     });
     var handleBlur = useEventCallback_1.useEventCallback(function () {
-        var hiddenElm = hiddenRef.current;
+        var hiddenElm = utils_1.getRefElement(target);
         if (hiddenElm && hiddenElm.tabIndex === -1) {
             hiddenElm.tabIndex = 0;
         }

package/foundation/hooks/useLongPress/useLongPress.js

@@ -32,8 +32,7 @@ exports.useLongPress = function (_a, _b, _c) {
     var end = function (e) {
         // ! mouse up only trigger when up on element, so we host that in document
         document.removeEventListener('mouseup', onMouseUp);
-        if (!isEmittedRef.current &&
-            useTouchMouseEvent_1.isElmEqualOrContainRef(e.target, elmRef)) {
+        if (!isEmittedRef.current && useTouchMouseEvent_1.isElmEqualOrContain(e.target, elmRef)) {
             onTap === null || onTap === void 0 ? void 0 : onTap(e, reasonRef.current);
         }
         reasonRef.current = 'click';

package/foundation/hooks/useOverflow/useOverflow.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
+import { RefOrElementOrCallback } from '../../utils';
 import { PerformanceOptions } from '../useResizeObserver';
 /**
  * trigger when overflow state change
  */
-export declare const useOverflow: (innerRef: import("react").RefObject<HTMLElement>, cb: (state: boolean, value: {
+export declare const useOverflow: (target: RefOrElementOrCallback<HTMLElement>, cb: (state: boolean, value: {
     scrollWidth: number;
     clientWidth: number;
     scrollHeight: number;

package/foundation/hooks/useOverflow/useOverflow.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var utils_1 = require("../../utils");
 var useResizeObserver_1 = require("../useResizeObserver");
 /**
  * trigger when overflow state change
  */
 exports.useOverflow = function (
 /** target element ref */
-innerRef, 
+target, 
 /** trigger when `ResizeObserver` emit */
 cb, 
 /**
@@ -22,19 +23,21 @@ performance) {
     }; }
     // * not have default value for that can trigger change first time.
     var showRef = react_1.useRef();
-    return useResizeObserver_1.useResizeObserver(innerRef, function () {
-        if (innerRef.current) {
-            var _a = innerRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
-            if (showRef.current !== show) {
-                showRef.current = show;
-                cb(show, {
-                    scrollWidth: scrollWidth,
-                    clientWidth: clientWidth,
-                    scrollHeight: scrollHeight,
-                    clientHeight: clientHeight,
-                });
-            }
-        }
+    return useResizeObserver_1.useResizeObserver(target, function () {
+        var element = utils_1.getRefElement(target);
+        if (!element)
+            return;
+        var scrollWidth = element.scrollWidth, clientWidth = element.clientWidth, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
+        var show = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (showRef.current === show)
+            return;
+        // only emit when state change
+        showRef.current = show;
+        cb(show, {
+            scrollWidth: scrollWidth,
+            clientWidth: clientWidth,
+            scrollHeight: scrollHeight,
+            clientHeight: clientHeight,
+        });
     }, performance);
 };