@ringcentral/juno 2.2.0 → 2.3.0

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.2.0",
+  "version": "2.3.0",
   "author": "RingCentral",
   "license": "MIT",
   "bugs": {