@ringcentral/juno 2.40.0 → 2.40.1

package/components/Tooltip/Tooltip.js

@@ -24,15 +24,33 @@ var _RcTooltip = react_1.forwardRef(function (inProps, ref) {
     classNameProp = props.className, classesProp = props.classes, PopperPropsProp = props.PopperProps, textColor = props.textColor, color = props.color, ignorePointer = props.ignorePointer, size = props.size, maskProps = props.maskProps, title = props.title, injectGlobalStyle = props.injectGlobalStyle, rest = tslib_1.__rest(props, ["children", "tooltipForceHide", "open", "onOpen", "onClose", "className", "classes", "PopperProps", "textColor", "color", "ignorePointer", "size", "maskProps", "title", "injectGlobalStyle"]);
     var externalWindow = foundation_1.useRcPortalWindowContext().externalWindow;
     var _a = tslib_1.__read(react_1.useState(false), 2), isDisabledButton = _a[0], setIsDisabledButton = _a[1];
+    var popperInnerRef = react_1.useRef(null);
     var innerRef = react_1.useRef(null);
     var tooltipRef = foundation_1.useForkRef(ref, innerRef);
     var classes = react_1.useMemo(function () {
         return foundation_1.combineClasses(foundation_1.combineClasses({ popper: classNameProp }, utils_1.RcTooltipClasses), classesProp);
     }, [classNameProp, classesProp]);
     var PopperProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({
+        var _a = PopperPropsProp || {}, tooltipPopperRef = _a.ref, restPopperPropsProp = tslib_1.__rest(_a, ["ref"]);
+        return tslib_1.__assign(tslib_1.__assign({}, foundation_1.combineProps({
             container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body,
-        }, PopperPropsProp);
+            popperOptions: {
+                // when popper update position, if left < 0 and top <= 0, that means popper is out of window
+                // that occur when use not destroy component, use style hidden, host element be disappear, but popper still exist
+                onUpdate: function (e) {
+                    var tooltipElm = popperInnerRef === null || popperInnerRef === void 0 ? void 0 : popperInnerRef.current;
+                    if (tooltipElm &&
+                        e.popper &&
+                        e.popper.left < 0 &&
+                        e.popper.top <= 0) {
+                        tooltipElm.style.display = 'none';
+                    }
+                },
+            },
+        }, restPopperPropsProp)), { ref: function (elm) {
+                popperInnerRef.current = elm;
+                foundation_1.setRef(tooltipPopperRef, elm);
+            } });
     }, [PopperPropsProp, externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body]);
     var forceHideAdditionProps = utils_1.useTooltipForceHide({
         ref: innerRef,

package/es6/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTooltip from '@material-ui/core/Tooltip';
-import { combineClasses, combineProps, logInDev, styled, useDeprecatedCheck, useForkRef, useRcPortalWindowContext, useThemeProps, } from '../../foundation';
+import { combineClasses, combineProps, logInDev, styled, useDeprecatedCheck, useForkRef, useRcPortalWindowContext, useThemeProps, setRef, } from '../../foundation';
 import { Mask, tooltipStyle } from './styles';
 import { RcTooltipClasses, useTooltipForceHide } from './utils';
 var _RcTooltip = forwardRef(function (inProps, ref) {
@@ -22,15 +22,33 @@ var _RcTooltip = forwardRef(function (inProps, ref) {
     classNameProp = props.className, classesProp = props.classes, PopperPropsProp = props.PopperProps, textColor = props.textColor, color = props.color, ignorePointer = props.ignorePointer, size = props.size, maskProps = props.maskProps, title = props.title, injectGlobalStyle = props.injectGlobalStyle, rest = __rest(props, ["children", "tooltipForceHide", "open", "onOpen", "onClose", "className", "classes", "PopperProps", "textColor", "color", "ignorePointer", "size", "maskProps", "title", "injectGlobalStyle"]);
     var externalWindow = useRcPortalWindowContext().externalWindow;
     var _a = __read(useState(false), 2), isDisabledButton = _a[0], setIsDisabledButton = _a[1];
+    var popperInnerRef = useRef(null);
     var innerRef = useRef(null);
     var tooltipRef = useForkRef(ref, innerRef);
     var classes = useMemo(function () {
         return combineClasses(combineClasses({ popper: classNameProp }, RcTooltipClasses), classesProp);
     }, [classNameProp, classesProp]);
     var PopperProps = useMemo(function () {
-        return combineProps({
+        var _a = PopperPropsProp || {}, tooltipPopperRef = _a.ref, restPopperPropsProp = __rest(_a, ["ref"]);
+        return __assign(__assign({}, combineProps({
             container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body,
-        }, PopperPropsProp);
+            popperOptions: {
+                // when popper update position, if left < 0 and top <= 0, that means popper is out of window
+                // that occur when use not destroy component, use style hidden, host element be disappear, but popper still exist
+                onUpdate: function (e) {
+                    var tooltipElm = popperInnerRef === null || popperInnerRef === void 0 ? void 0 : popperInnerRef.current;
+                    if (tooltipElm &&
+                        e.popper &&
+                        e.popper.left < 0 &&
+                        e.popper.top <= 0) {
+                        tooltipElm.style.display = 'none';
+                    }
+                },
+            },
+        }, restPopperPropsProp)), { ref: function (elm) {
+                popperInnerRef.current = elm;
+                setRef(tooltipPopperRef, elm);
+            } });
     }, [PopperPropsProp, externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body]);
     var forceHideAdditionProps = useTooltipForceHide({
         ref: innerRef,

package/es6/foundation/hooks/useForkRef/useForkRef.js

@@ -1,4 +1,4 @@
-import { useForkRef as MuiUseForkRef } from '@material-ui/core/utils';
+import { useForkRef as MuiUseForkRef, setRef as MuiSetRef, } from '@material-ui/core/utils';
 /**
  * That method will give you ability fork same value `ref object` or `method`
  * Example:
@@ -17,3 +17,4 @@ import { useForkRef as MuiUseForkRef } from '@material-ui/core/utils';
  * ```
  */
 export var useForkRef = MuiUseForkRef;
+export var setRef = MuiSetRef;

package/foundation/hooks/useForkRef/useForkRef.d.ts

@@ -1,4 +1,4 @@
-import { useForkRef as MuiUseForkRef } from '@material-ui/core/utils';
+import { useForkRef as MuiUseForkRef, setRef as MuiSetRef } from '@material-ui/core/utils';
 /**
  * That method will give you ability fork same value `ref object` or `method`
  * Example:
@@ -17,3 +17,4 @@ import { useForkRef as MuiUseForkRef } from '@material-ui/core/utils';
  * ```
  */
 export declare const useForkRef: typeof MuiUseForkRef;
+export declare const setRef: typeof MuiSetRef;

package/foundation/hooks/useForkRef/useForkRef.js

@@ -19,3 +19,4 @@ var utils_1 = require("@material-ui/core/utils");
  * ```
  */
 exports.useForkRef = utils_1.useForkRef;
+exports.setRef = utils_1.setRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.40.0",
+  "version": "2.40.1",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",