@ringcentral/juno 2.1.1 → 2.3.0

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

package/foundation/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
+import { RefOrElementOrCallback } from '../../utils';
 export declare type PerformanceOptions = {
     /**
      * mode that improve performance, default is debounce
@@ -24,4 +23,4 @@ export declare const getResizeObserver: (callback: ResizeObserverCallback, exter
  * @param callback callback when element resize
  * @param performance options that improve performance
  */
-export declare const useResizeObserver: (ref: import("react").RefObject<HTMLElement>, callback: ResizeObserverCallback, performance?: PerformanceOptions) => ResizeObserver;
+export declare const useResizeObserver: <T extends HTMLElement = HTMLElement>(target: RefOrElementOrCallback<T>, callback: ResizeObserverCallback, performance?: PerformanceOptions) => ResizeObserver;

package/foundation/hooks/useResizeObserver/useResizeObserver.js

@@ -40,7 +40,7 @@ exports.getResizeObserver = function (callback, externalWindow) {
  */
 exports.useResizeObserver = function (
 /** target element ref */
-ref, 
+target, 
 /** trigger when `ResizeObserver` emit */
 callback, 
 /** performance options, `mode`, `time`, `ignoreFireWhenObserve` */
@@ -76,8 +76,8 @@ performance) {
         return exports.getResizeObserver(resizeCallback, externalWindow);
     });
     react_1.useLayoutEffect(function () {
+        var elm = utils_1.getRefElement(target);
         var observer = observerRef.current;
-        var elm = ref.current;
         if (!elm) {
             throw new Error('please check element exist before bind resize observer');
         }
@@ -87,6 +87,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/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="styled-jsx" />
 import { MouseEventHandler, TouchEventHandler } from 'react';
+import { RefOrElementOrCallback } from '../../utils';
 export interface UseTouchMouseEvent<T> {
     onMouseUp?: MouseEventHandler<T>;
     onMouseDown?: MouseEventHandler<T>;
@@ -36,4 +37,7 @@ export declare const useTouchMouseEvent: <T = unknown>({ onMouseDown: onMouseDow
     onMouseDown: (event: import("react").MouseEvent<T, MouseEvent>) => void;
     onMouseUp: (e: any) => void;
 };
-export declare const isElmEqualOrContainRef: (elm: Element | undefined, elmRef: import("react").RefObject<HTMLElement>) => boolean | undefined;
+/**
+ * check is element equal or contains target element
+ */
+export declare const isElmEqualOrContain: (sourceTarget: RefOrElementOrCallback<HTMLElement>, containTarget: RefOrElementOrCallback<HTMLElement>) => boolean | null;

package/foundation/hooks/useTouchMouseEvent/useTouchMouseEvent.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
+var utils_1 = require("../../utils");
 var useEventCallback_1 = require("../useEventCallback");
 /**
  * Provide a utils for switch trigger touch event or mouse event between different device
@@ -74,9 +75,11 @@ exports.useTouchMouseEvent = function (_a, _b) {
         onMouseUp: onMouseUp,
     };
 };
-exports.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
+ */
+exports.isElmEqualOrContain = function (sourceTarget, containTarget) {
+    var elm = utils_1.getRefElement(sourceTarget);
+    var target = utils_1.getRefElement(containTarget);
+    return elm && target && (target === elm || target.contains(elm));
 };

package/foundation/theme/theme.type.d.ts

@@ -38,7 +38,7 @@ import { RcResponsiveProps } from '../../components/Responsive';
 import { RcSnackbarActionProps, RcSnackbarContentProps, RcSnackbarProps } from '../../components/Snackbar';
 import { RcStepButtonProps, RcStepConnectorProps, RcStepIconProps, RcStepLabelProps, RcStepperProps, RcStepProps } from '../../components/Stepper';
 import { RcTablePaginationProps } from '../../components/TablePagination';
-import { RcTableProps, TableHeadCellProps, TableHeadProps } from '../../components/Tables';
+import { RcTableBodyProps, RcTableCellProps, RcTableContainerProps, RcTableHeadProps, RcTableProps, RcTableRowProps } from '../../components/Table';
 import { RcTabListProps, RcTabPanelProps, RcTabProps, RcTabsProps } from '../../components/Tabs';
 import { RcTagProps } from '../../components/Tag';
 import { RcTextProps } from '../../components/Text';
@@ -180,9 +180,12 @@ export declare type RcTheme = {
         RcStepLabel?: RcStepLabelProps;
         RcStepper?: RcStepperProps;
         RcTablePagination?: RcTablePaginationProps;
-        RcTableHeadCell?: TableHeadCellProps;
-        RcTableHeadView?: TableHeadProps;
+        RcTableBody?: RcTableBodyProps;
+        RcTableCell?: RcTableCellProps;
+        RcTableContainer?: RcTableContainerProps;
+        RcTableHead?: RcTableHeadProps;
         RcTable?: RcTableProps;
+        RcTableRow?: RcTableRowProps;
         RcTab?: RcTabProps;
         RcTabList?: RcTabListProps;
         RcTabPanel?: RcTabPanelProps;

package/foundation/utils/getRefElement.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+export declare type RefOrElementOrCallback<T extends HTMLElement = HTMLElement> = RefObject<T> | (() => T) | T;
+/**
+ * get element from React ref or callback
+ */
+export declare const getRefElement: <T extends HTMLElement = HTMLElement>(ref: RefOrElementOrCallback<T>) => T | null;

package/foundation/utils/getRefElement.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var isRef_1 = require("./isRef");
+/**
+ * get element from React ref or callback
+ */
+exports.getRefElement = function (ref) {
+    if (typeof ref === 'function') {
+        return ref();
+    }
+    if (isRef_1.isRef(ref)) {
+        return ref.current;
+    }
+    return ref;
+};

package/foundation/utils/index.d.ts

@@ -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/foundation/utils/index.js

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./classes"), exports);
 tslib_1.__exportStar(require("./clearReactReferencesInNode"), exports);
 tslib_1.__exportStar(require("./combineProps"), exports);
 tslib_1.__exportStar(require("./deepmerge"), exports);
+tslib_1.__exportStar(require("./getRefElement"), exports);
 tslib_1.__exportStar(require("./getScrollbarSize"), exports);
 tslib_1.__exportStar(require("./hasValue"), exports);
 tslib_1.__exportStar(require("./isRcElement"), exports);

package/foundation/utils/removeClassName.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { RefOrElementOrCallback } from './getRefElement';
 declare type RemoveClassNameOptions = {
     /**
      * make replace also scan child nodes
@@ -16,7 +16,7 @@ declare type RemoveClassNameOptions = {
 /**
  * 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
@@ -31,5 +31,5 @@ declare type RemoveClassNameOptions = {
  * elm => <div class="efg"></div>
  * ```
  */
-export declare function removeClassName(elmRef: RefObject<HTMLElement>, removeClass: string, { scanChildren, fullMatch }?: RemoveClassNameOptions): void;
+export declare function removeClassName(target: RefOrElementOrCallback, removeClass: string, { scanChildren, fullMatch }?: RemoveClassNameOptions): void;
 export {};

package/foundation/utils/removeClassName.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var getRefElement_1 = require("./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
@@ -18,9 +19,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * elm => <div class="efg"></div>
  * ```
  */
-function removeClassName(elmRef, removeClass, _a) {
+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_1.getRefElement(target);
     if (!elm)
         return;
     if (elm.className.includes(removeClass)) {

package/foundation/utils/selectionHandler.d.ts

@@ -1,8 +1,8 @@
-import { RefObject } from 'react';
+import { RefOrElementOrCallback } from './getRefElement';
 /**
  * get current input element selection position and is that selectRange state
  */
-export declare function getSelectionPosition(inputRef: RefObject<HTMLInputElement>): {
+export declare function getSelectionPosition<T extends HTMLInputElement | HTMLTextAreaElement>(sourceTarget: RefOrElementOrCallback<T>): {
     isSelectRange: boolean;
     position: {
         start: number;
@@ -13,7 +13,7 @@ export declare function getSelectionPosition(inputRef: RefObject<HTMLInputElemen
  * set input element selection position position,
  * if you need scroll that into view set `scrollIntoView` as true
  */
-export declare function setSelectionPosition(inputRef: RefObject<HTMLInputElement>, options: {
+export declare function setSelectionPosition<T extends HTMLInputElement | HTMLTextAreaElement>(target: RefOrElementOrCallback<T>, options: {
     start: number | null;
     end: number | null;
     direction?: 'forward' | 'backward' | 'none' | undefined;

package/foundation/utils/selectionHandler.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var getRefElement_1 = require("./getRefElement");
 /**
  * get current input element selection position and is that selectRange state
  */
-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;
+function getSelectionPosition(sourceTarget) {
+    var input = getRefElement_1.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,
@@ -18,8 +19,8 @@ exports.getSelectionPosition = getSelectionPosition;
  * set input element selection position position,
  * if you need scroll that into view set `scrollIntoView` as true
  */
-function setSelectionPosition(inputRef, options) {
-    var elm = inputRef.current;
+function setSelectionPosition(target, options) {
+    var elm = getRefElement_1.getRefElement(target);
     if (elm && options.start !== null && options.end !== null) {
         // * use blur and refocus to refocus position into view
         if (options.scrollIntoView)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "author": "RingCentral",
   "license": "MIT",
   "bugs": {
@@ -45,12 +45,12 @@
       },
       "default": "./es6/index.js"
     },
-    "./": {
+    "./*": {
       "node": {
-        "module": "./es6/",
-        "require": "./"
+        "module": "./es6/*",
+        "require": "./*"
       },
-      "default": "./es6/"
+      "default": "./es6/*"
     }
   }
 }