@react-md/tooltip - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-alpha.6

es/Tooltip.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -25,3 +27,3 @@ };
 import { CSSTransition } from "react-transition-group";
-import { bem } from "@react-md/theme";
+import { bem } from "@react-md/utils";
 import { TOOLTIP_CLASS_NAMES, TOOLTIP_TRANSITION_TIMEOUT } from "./constants";
@@ -28,0 +30,0 @@ var block = bem("rmd-tooltip");

es/TooltipHoverModeConfig.js

 import React, { useMemo } from "react";
 import { DEFAULT_DELAY } from "./constants";
-import { HoverModeDelay, HoverModeActions, HoverModeEnabled, useTooltipHoverModeState, } from "./useTooltipHoverMode";
+import { HoverModeActions, HoverModeDelay, HoverModeEnabled, useTooltipHoverModeState, } from "./useTooltipHoverMode";
 /**
@@ -5,0 +5,0 @@ * This component is used so that tooltips can gain the "hover mode"

es/Tooltipped.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -28,4 +30,4 @@ };
 import { DEFAULT_DELAY, DEFAULT_THRESHOLD } from "./constants";
+import Tooltip from "./Tooltip";
 import useTooltipState from "./useTooltipState";
-import Tooltip from "./Tooltip";
 var MERGABLE_PROPS = [
@@ -45,2 +47,3 @@ "onMouseEnter",
         position: propPosition,
+        disableHoverMode: disableHoverMode,
         defaultPosition: defaultPosition,
@@ -107,5 +110,7 @@ positionThreshold: positionThreshold,
         if (!propHandler) {
+            // @ts-ignore
             result[propName] = configHandler;
         }
         else if (!configHandler) {
+            // @ts-ignore
             result[propName] = propHandler;
@@ -115,2 +120,3 @@ }
             // not sure of a way to actually strongly type this nicely.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             result[propName] = function (event) {
@@ -145,3 +151,31 @@ propHandler(event);
 Tooltipped.defaultProps = defaultProps;
+if (process.env.NODE_ENV !== "production") {
+    Tooltipped.displayName = "Tooltipped";
+    var PropTypes = void 0;
+    try {
+        PropTypes = require("prop-types");
+    }
+    catch (e) { }
+    if (PropTypes) {
+        Tooltipped.propTypes = {
+            tooltipId: PropTypes.string,
+            dense: PropTypes.bool,
+            spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+            denseSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+            positionThreshold: PropTypes.number,
+            disableAutoSpacing: PropTypes.bool,
+            vwMargin: PropTypes.number,
+            vhMargin: PropTypes.number,
+            portal: PropTypes.bool,
+            lineWrap: PropTypes.bool,
+            focusDelay: PropTypes.number,
+            hoverDelay: PropTypes.number,
+            touchTimeout: PropTypes.number,
+            mountOnEnter: PropTypes.bool,
+            unmountOnExit: PropTypes.bool,
+            defaultPosition: PropTypes.oneOf(["above", "below", "left", "right"]),
+        };
+    }
+}
 export default Tooltipped;
 //# sourceMappingURL=Tooltipped.js.map

es/useHandlers.js

@@ -29,3 +29,3 @@ import { useCallback, useEffect, useRef, } from "react";
         }
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     var handleMouseEnter = useCallback(function (event) {
@@ -42,3 +42,3 @@ var onMouseEnter = handlers.current.onMouseEnter;
         start();
-    }, []);
+    }, [setEstimatedPosition, setInitiated, start, handlers, initiated]);
     var handleMouseLeave = useCallback(function (event) {
@@ -57,12 +57,8 @@ var onMouseLeave = handlers.current.onMouseLeave;
         }
-    }, [isHoverModeable]);
-    return {
-        stopMouseTimer: stop,
-        mouseHandlers: {
-            // the mouse flows should not be returned for the touch mode since
-            // the mouseenter event is still triggered after a touch
-            onMouseEnter: mode !== "touch" ? handleMouseEnter : onMouseEnter,
-            onMouseLeave: mode !== "touch" ? handleMouseLeave : onMouseLeave,
-        },
-    };
+    }, [isHoverModeable, handlers, hideTooltip, hoverModeActions, initiated, stop]);
+    return [
+        stop,
+        mode !== "touch" ? handleMouseEnter : onMouseEnter,
+        mode !== "touch" ? handleMouseLeave : onMouseLeave,
+    ];
 }
@@ -83,3 +79,3 @@ /**
         }
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     var handleFocus = useCallback(function (event) {
@@ -100,3 +96,6 @@ var onFocus = handlers.current.onFocus;
         start();
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, setInitiated, start]);
     var handleBlur = useCallback(function (event) {
@@ -109,3 +108,6 @@ var onBlur = handlers.current.onBlur;
         hideTooltip();
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]);
     var handleKeyDown = useCallback(function (event) {
@@ -120,3 +122,6 @@ var onKeyDown = handlers.current.onKeyDown;
         }
-    }, []);
+    }, 
+    // disabled since both initiated and handlers are refs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]);
     useEffect(function () {
@@ -144,10 +149,8 @@ if (mode !== "keyboard") {
     }, [mode, hideTooltip]);
-    return {
-        stopKeyboardTimer: stop,
-        keyboardHandlers: {
-            onFocus: mode === "keyboard" ? handleFocus : onFocus,
-            onBlur: mode === "keyboard" ? handleBlur : onBlur,
-            onKeyDown: mode === "keyboard" ? handleKeyDown : onKeyDown,
-        },
-    };
+    return [
+        stop,
+        mode === "keyboard" ? handleFocus : onFocus,
+        mode === "keyboard" ? handleBlur : onBlur,
+        mode === "keyboard" ? handleKeyDown : onKeyDown,
+    ];
 }
@@ -176,3 +179,3 @@ /**
         hideTooltip();
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     useEffect(function () {
@@ -182,3 +185,3 @@ if (!visible) {
         }
-        else if (mode !== "touch") {
+        if (mode !== "touch") {
             touched.current = false;
@@ -195,2 +198,4 @@ return;
         };
+        // disabled since it should only be updated on visible or touch changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible, mode]);
@@ -205,3 +210,6 @@ var handleTouchStart = useCallback(function (event) {
         setEstimatedPosition(event.currentTarget);
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, stop]);
     var handleTouchMove = useCallback(function (event) {
@@ -213,3 +221,6 @@ var onTouchMove = handlers.current.onTouchMove;
         touched.current = false;
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     var handleContextMenu = useCallback(function (event) {
@@ -236,12 +247,13 @@ var onContextMenu = handlers.current.onContextMenu;
         showTooltip();
-    }, []);
-    return {
-        stopTouchTimer: stop,
-        touchHandlers: {
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onContextMenu: mode === "touch" ? handleContextMenu : onContextMenu,
-        },
-    };
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setInitiated, showTooltip]);
+    return [
+        stop,
+        handleTouchStart,
+        handleTouchMove,
+        mode === "touch" ? handleContextMenu : onContextMenu,
+    ];
 }
 //# sourceMappingURL=useHandlers.js.map

es/usePosition.js

@@ -46,2 +46,3 @@ import { useCallback, useState } from "react";
                 break;
+            // no default
         }
@@ -51,3 +52,6 @@ if (prevPosition.current !== nextPosition) {
         }
-    }, []);
+    }, 
+    // disabled since useRefCache for prevPosition
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultPosition, threshold]);
     if (typeof determinedPosition !== "undefined") {
@@ -54,0 +58,0 @@ return {

es/useTooltipHoverMode.js

@@ -18,4 +18,6 @@ import { createContext, useCallback, useContext, useState } from "react";
         }
+        // disabled since useRefCache
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultDelay]);
-    var _b = useTimeout(disable, delayTimeout), start = _b.start, stop = _b.stop;
+    var _b = useTimeout(disable, delayTimeout), start = _b[0], stop = _b[1];
     var enable = useCallback(function () {
@@ -26,3 +28,5 @@ stop();
         }
-    }, []);
+        // disabled since useRefCache
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stop]);
     return {
@@ -29,0 +33,0 @@ delay: delay,

es/useTooltipState.js

@@ -1,12 +0,1 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { useCallback, useEffect, useRef } from "react";
@@ -70,7 +59,7 @@ import { useInteractionModeContext } from "@react-md/states";
     }, []);
-    var _f = useToggle(), visible = _f.toggled, showTooltip = _f.enable, hide = _f.disable;
+    var _f = useToggle(false), visible = _f[0], showTooltip = _f[1], hide = _f[2];
     var hideTooltip = useCallback(function () {
         initiated.current = null;
         hide();
-    }, []);
+    }, [hide]);
     useVisiblityChange({
@@ -98,3 +87,3 @@ visible: visible,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopMouseTimer = _h.stopMouseTimer, mouseHandlers = _h.mouseHandlers;
+    }), stopMouseTimer = _h[0], handleMouseEnter = _h[1], handleMouseLeave = _h[2];
     var _j = useKeyboardState({
@@ -111,3 +100,3 @@ mode: mode,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopKeyboardTimer = _j.stopKeyboardTimer, keyboardHandlers = _j.keyboardHandlers;
+    }), stopKeyboardTimer = _j[0], handleFocus = _j[1], handleBlur = _j[2], handleKeyDown = _j[3];
     var _k = useTouchState({
@@ -124,3 +113,3 @@ mode: mode,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopTouchTimer = _k.stopTouchTimer, touchHandlers = _k.touchHandlers;
+    }), stopTouchTimer = _k[0], handleTouchStart = _k[1], handleTouchMove = _k[2], handleContextMenu = _k[3];
     var hideAndReset = useCallback(function () {
@@ -131,3 +120,3 @@ stopMouseTimer();
         hide();
-    }, []);
+    }, [stopMouseTimer, stopKeyboardTimer, stopTouchTimer, hide]);
     useOtherInteractionDisable(initiated.current, hideAndReset);
@@ -138,5 +127,14 @@ return {
         position: position,
-        handlers: __assign({}, mouseHandlers, keyboardHandlers, touchHandlers),
+        handlers: {
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onContextMenu: handleContextMenu,
+        },
     };
 }
 //# sourceMappingURL=useTooltipState.js.map

es/useVisibilityChange.js

@@ -16,3 +16,3 @@ import { useEffect } from "react";
         }
-        var onShow = handlers.current.onShow;
+        var _a = handlers.current, onShow = _a.onShow, onHide = _a.onHide;
         if (onShow) {
@@ -22,3 +22,2 @@ onShow(mode);
         return function () {
-            var onHide = handlers.current.onHide;
             if (onHide) {
@@ -28,4 +27,6 @@ onHide();
         };
+        // only want to trigger on visibility changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
 }
 //# sourceMappingURL=useVisibilityChange.js.map

lib/Tooltip.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -37,5 +39,5 @@ };
 var react_transition_group_1 = require("react-transition-group");
-var theme_1 = require("@react-md/theme");
+var utils_1 = require("@react-md/utils");
 var constants_1 = require("./constants");
-var block = theme_1.bem("rmd-tooltip");
+var block = utils_1.bem("rmd-tooltip");
 /**
@@ -42,0 +44,0 @@ * This is the base tooltip component that can only be used to render a tooltip with an animation

lib/Tooltipped.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -40,4 +42,4 @@ };
 var constants_1 = require("./constants");
+var Tooltip_1 = __importDefault(require("./Tooltip"));
 var useTooltipState_1 = __importDefault(require("./useTooltipState"));
-var Tooltip_1 = __importDefault(require("./Tooltip"));
 var MERGABLE_PROPS = [
@@ -57,2 +59,3 @@ "onMouseEnter",
         position: propPosition,
+        disableHoverMode: disableHoverMode,
         defaultPosition: defaultPosition,
@@ -119,5 +122,7 @@ positionThreshold: positionThreshold,
         if (!propHandler) {
+            // @ts-ignore
             result[propName] = configHandler;
         }
         else if (!configHandler) {
+            // @ts-ignore
             result[propName] = propHandler;
@@ -127,2 +132,3 @@ }
             // not sure of a way to actually strongly type this nicely.
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             result[propName] = function (event) {
@@ -157,3 +163,31 @@ propHandler(event);
 Tooltipped.defaultProps = defaultProps;
+if (process.env.NODE_ENV !== "production") {
+    Tooltipped.displayName = "Tooltipped";
+    var PropTypes = void 0;
+    try {
+        PropTypes = require("prop-types");
+    }
+    catch (e) { }
+    if (PropTypes) {
+        Tooltipped.propTypes = {
+            tooltipId: PropTypes.string,
+            dense: PropTypes.bool,
+            spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+            denseSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+            positionThreshold: PropTypes.number,
+            disableAutoSpacing: PropTypes.bool,
+            vwMargin: PropTypes.number,
+            vhMargin: PropTypes.number,
+            portal: PropTypes.bool,
+            lineWrap: PropTypes.bool,
+            focusDelay: PropTypes.number,
+            hoverDelay: PropTypes.number,
+            touchTimeout: PropTypes.number,
+            mountOnEnter: PropTypes.bool,
+            unmountOnExit: PropTypes.bool,
+            defaultPosition: PropTypes.oneOf(["above", "below", "left", "right"]),
+        };
+    }
+}
 exports.default = Tooltipped;
 //# sourceMappingURL=Tooltipped.js.map

lib/useHandlers.js

@@ -31,3 +31,3 @@ "use strict";
         }
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     var handleMouseEnter = react_1.useCallback(function (event) {
@@ -44,3 +44,3 @@ var onMouseEnter = handlers.current.onMouseEnter;
         start();
-    }, []);
+    }, [setEstimatedPosition, setInitiated, start, handlers, initiated]);
     var handleMouseLeave = react_1.useCallback(function (event) {
@@ -59,12 +59,8 @@ var onMouseLeave = handlers.current.onMouseLeave;
         }
-    }, [isHoverModeable]);
-    return {
-        stopMouseTimer: stop,
-        mouseHandlers: {
-            // the mouse flows should not be returned for the touch mode since
-            // the mouseenter event is still triggered after a touch
-            onMouseEnter: mode !== "touch" ? handleMouseEnter : onMouseEnter,
-            onMouseLeave: mode !== "touch" ? handleMouseLeave : onMouseLeave,
-        },
-    };
+    }, [isHoverModeable, handlers, hideTooltip, hoverModeActions, initiated, stop]);
+    return [
+        stop,
+        mode !== "touch" ? handleMouseEnter : onMouseEnter,
+        mode !== "touch" ? handleMouseLeave : onMouseLeave,
+    ];
 }
@@ -86,3 +82,3 @@ exports.useMouseState = useMouseState;
         }
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     var handleFocus = react_1.useCallback(function (event) {
@@ -103,3 +99,6 @@ var onFocus = handlers.current.onFocus;
         start();
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, setInitiated, start]);
     var handleBlur = react_1.useCallback(function (event) {
@@ -112,3 +111,6 @@ var onBlur = handlers.current.onBlur;
         hideTooltip();
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]);
     var handleKeyDown = react_1.useCallback(function (event) {
@@ -123,3 +125,6 @@ var onKeyDown = handlers.current.onKeyDown;
         }
-    }, []);
+    }, 
+    // disabled since both initiated and handlers are refs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]);
     react_1.useEffect(function () {
@@ -147,10 +152,8 @@ if (mode !== "keyboard") {
     }, [mode, hideTooltip]);
-    return {
-        stopKeyboardTimer: stop,
-        keyboardHandlers: {
-            onFocus: mode === "keyboard" ? handleFocus : onFocus,
-            onBlur: mode === "keyboard" ? handleBlur : onBlur,
-            onKeyDown: mode === "keyboard" ? handleKeyDown : onKeyDown,
-        },
-    };
+    return [
+        stop,
+        mode === "keyboard" ? handleFocus : onFocus,
+        mode === "keyboard" ? handleBlur : onBlur,
+        mode === "keyboard" ? handleKeyDown : onKeyDown,
+    ];
 }
@@ -180,3 +183,3 @@ exports.useKeyboardState = useKeyboardState;
         hideTooltip();
-    }, delay), start = _b.start, stop = _b.stop;
+    }, delay), start = _b[0], stop = _b[1];
     react_1.useEffect(function () {
@@ -186,3 +189,3 @@ if (!visible) {
         }
-        else if (mode !== "touch") {
+        if (mode !== "touch") {
             touched.current = false;
@@ -199,2 +202,4 @@ return;
         };
+        // disabled since it should only be updated on visible or touch changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible, mode]);
@@ -209,3 +214,6 @@ var handleTouchStart = react_1.useCallback(function (event) {
         setEstimatedPosition(event.currentTarget);
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, stop]);
     var handleTouchMove = react_1.useCallback(function (event) {
@@ -217,3 +225,6 @@ var onTouchMove = handlers.current.onTouchMove;
         touched.current = false;
-    }, []);
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     var handleContextMenu = react_1.useCallback(function (event) {
@@ -240,13 +251,14 @@ var onContextMenu = handlers.current.onContextMenu;
         showTooltip();
-    }, []);
-    return {
-        stopTouchTimer: stop,
-        touchHandlers: {
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onContextMenu: mode === "touch" ? handleContextMenu : onContextMenu,
-        },
-    };
+    }, 
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setInitiated, showTooltip]);
+    return [
+        stop,
+        handleTouchStart,
+        handleTouchMove,
+        mode === "touch" ? handleContextMenu : onContextMenu,
+    ];
 }
 exports.useTouchState = useTouchState;
 //# sourceMappingURL=useHandlers.js.map

lib/usePosition.js

@@ -48,2 +48,3 @@ "use strict";
                 break;
+            // no default
         }
@@ -53,3 +54,6 @@ if (prevPosition.current !== nextPosition) {
         }
-    }, []);
+    }, 
+    // disabled since useRefCache for prevPosition
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultPosition, threshold]);
     if (typeof determinedPosition !== "undefined") {
@@ -56,0 +60,0 @@ return {

lib/useTooltipHoverMode.js

@@ -20,4 +20,6 @@ "use strict";
         }
+        // disabled since useRefCache
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultDelay]);
-    var _b = utils_1.useTimeout(disable, delayTimeout), start = _b.start, stop = _b.stop;
+    var _b = utils_1.useTimeout(disable, delayTimeout), start = _b[0], stop = _b[1];
     var enable = react_1.useCallback(function () {
@@ -28,3 +30,5 @@ stop();
         }
-    }, []);
+        // disabled since useRefCache
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stop]);
     return {
@@ -31,0 +35,0 @@ delay: delay,

lib/useTooltipState.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -76,7 +65,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
     }, []);
-    var _f = utils_1.useToggle(), visible = _f.toggled, showTooltip = _f.enable, hide = _f.disable;
+    var _f = utils_1.useToggle(false), visible = _f[0], showTooltip = _f[1], hide = _f[2];
     var hideTooltip = react_1.useCallback(function () {
         initiated.current = null;
         hide();
-    }, []);
+    }, [hide]);
     useVisibilityChange_1.default({
@@ -104,3 +93,3 @@ visible: visible,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopMouseTimer = _h.stopMouseTimer, mouseHandlers = _h.mouseHandlers;
+    }), stopMouseTimer = _h[0], handleMouseEnter = _h[1], handleMouseLeave = _h[2];
     var _j = useHandlers_1.useKeyboardState({
@@ -117,3 +106,3 @@ mode: mode,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopKeyboardTimer = _j.stopKeyboardTimer, keyboardHandlers = _j.keyboardHandlers;
+    }), stopKeyboardTimer = _j[0], handleFocus = _j[1], handleBlur = _j[2], handleKeyDown = _j[3];
     var _k = useHandlers_1.useTouchState({
@@ -130,3 +119,3 @@ mode: mode,
         setEstimatedPosition: setEstimatedPosition,
-    }), stopTouchTimer = _k.stopTouchTimer, touchHandlers = _k.touchHandlers;
+    }), stopTouchTimer = _k[0], handleTouchStart = _k[1], handleTouchMove = _k[2], handleContextMenu = _k[3];
     var hideAndReset = react_1.useCallback(function () {
@@ -137,3 +126,3 @@ stopMouseTimer();
         hide();
-    }, []);
+    }, [stopMouseTimer, stopKeyboardTimer, stopTouchTimer, hide]);
     useOtherInteractionDisable(initiated.current, hideAndReset);
@@ -144,3 +133,12 @@ return {
         position: position,
-        handlers: __assign({}, mouseHandlers, keyboardHandlers, touchHandlers),
+        handlers: {
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onContextMenu: handleContextMenu,
+        },
     };
@@ -147,0 +145,0 @@ }

lib/useVisibilityChange.js

@@ -18,3 +18,3 @@ "use strict";
         }
-        var onShow = handlers.current.onShow;
+        var _a = handlers.current, onShow = _a.onShow, onHide = _a.onHide;
         if (onShow) {
@@ -24,3 +24,2 @@ onShow(mode);
         return function () {
-            var onHide = handlers.current.onHide;
             if (onHide) {
@@ -30,2 +29,4 @@ onHide();
         };
+        // only want to trigger on visibility changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
@@ -32,0 +33,0 @@ }

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
@@ -41,10 +41,9 @@ "scripts": {
   "dependencies": {
-    "@react-md/portal": "^2.0.0-alpha.5",
-    "@react-md/sizing": "^2.0.0-alpha.5",
-    "@react-md/theme": "^2.0.0-alpha.5",
-    "@react-md/transition": "^2.0.0-alpha.5",
-    "@react-md/typography": "^2.0.0-alpha.5",
-    "@react-md/utils": "^2.0.0-alpha.5",
+    "@react-md/portal": "^2.0.0-alpha.6",
+    "@react-md/theme": "^2.0.0-alpha.6",
+    "@react-md/transition": "^2.0.0-alpha.6",
+    "@react-md/typography": "^2.0.0-alpha.6",
+    "@react-md/utils": "^2.0.0-alpha.6",
     "classnames": "^2.2.6",
-    "react-transition-group": "^4.0.0"
+    "react-transition-group": "^4.2.1"
   },
@@ -60,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "3210cd3047162980716f1eb07cb25b364a241a70"
+  "gitHead": "e3db6427d83e1a66980662f3656557cc07dfabcc"
 }

src/__tests__/usePosition.ts

@@ -1,3 +0,3 @@
-import { cleanup } from "react-testing-library";
-import { renderHook } from "react-hooks-testing-library";
+import { cleanup } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
 
@@ -4,0 +4,0 @@ import usePosition from "../usePosition";

src/__tests__/useTooltipState.ts

@@ -1,3 +0,3 @@
-import { cleanup } from "react-testing-library";
-import { renderHook } from "react-hooks-testing-library";
+import { cleanup } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
 
@@ -4,0 +4,0 @@ import useTooltipState, {

src/useHandlers.ts

@@ -85,2 +85,8 @@ import {
 
+type MouseResult = [
+  (() => void),
+  React.MouseEventHandler<HTMLElement> | undefined,
+  React.MouseEventHandler<HTMLElement> | undefined
+];
+
 /**
@@ -103,3 +109,3 @@ * This handles creating and returning the required mouse event listeners
   disableHoverMode,
-}: MouseOptions) {
+}: MouseOptions): MouseResult {
   const handlers = useRefCache({ onMouseEnter, onMouseLeave });
@@ -119,3 +125,3 @@
 
-  const { start, stop } = useTimeout(() => {
+  const [start, stop] = useTimeout(() => {
     if (initiated.current === "mouse") {
@@ -145,3 +151,3 @@ showTooltip();
     },
-    []
+    [setEstimatedPosition, setInitiated, start, handlers, initiated]
   );
@@ -166,16 +172,19 @@
     },
-    [isHoverModeable]
+    [isHoverModeable, handlers, hideTooltip, hoverModeActions, initiated, stop]
   );
 
-  return {
-    stopMouseTimer: stop,
-    mouseHandlers: {
-      // the mouse flows should not be returned for the touch mode since
-      // the mouseenter event is still triggered after a touch
-      onMouseEnter: mode !== "touch" ? handleMouseEnter : onMouseEnter,
-      onMouseLeave: mode !== "touch" ? handleMouseLeave : onMouseLeave,
-    },
-  };
+  return [
+    stop,
+    mode !== "touch" ? handleMouseEnter : onMouseEnter,
+    mode !== "touch" ? handleMouseLeave : onMouseLeave,
+  ];
 }
 
+type KeyboardResult = [
+  (() => void),
+  React.FocusEventHandler<HTMLElement> | undefined,
+  React.FocusEventHandler<HTMLElement> | undefined,
+  React.KeyboardEventHandler<HTMLElement> | undefined
+];
+
 /**
@@ -198,7 +207,7 @@ * This handles creating and returning the required keyboard event listeners
   setEstimatedPosition,
-}: KeyboardOptions) {
+}: KeyboardOptions): KeyboardResult {
   const handlers = useRefCache({ onFocus, onBlur, onKeyDown });
   const isWindowBlurred = useRef(false);
 
-  const { start, stop } = useTimeout(() => {
+  const [start, stop] = useTimeout(() => {
     if (initiated.current === "keyboard") {
@@ -209,30 +218,40 @@ showTooltip();
 
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
-    const { onFocus } = handlers.current;
-    if (onFocus) {
-      onFocus(event);
-    }
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLElement>) => {
+      const { onFocus } = handlers.current;
+      if (onFocus) {
+        onFocus(event);
+      }
 
-    // if the entire browser window was blurred, we don't want to show the tooltip
-    // on the next focus event since it is confusing to see a tooltip appear again
-    // after re-focusing a window.
-    if (isWindowBlurred.current) {
-      isWindowBlurred.current = false;
-      return;
-    }
+      // if the entire browser window was blurred, we don't want to show the tooltip
+      // on the next focus event since it is confusing to see a tooltip appear again
+      // after re-focusing a window.
+      if (isWindowBlurred.current) {
+        isWindowBlurred.current = false;
+        return;
+      }
 
-    setInitiated("keyboard");
-    setEstimatedPosition(event.currentTarget);
-    start();
-  }, []);
+      setInitiated("keyboard");
+      setEstimatedPosition(event.currentTarget);
+      start();
+    },
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, setInitiated, start]
+  );
 
-  const handleBlur = useCallback((event: React.FocusEvent<HTMLElement>) => {
-    const { onBlur } = handlers.current;
-    if (onBlur) {
-      onBlur(event);
-    }
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLElement>) => {
+      const { onBlur } = handlers.current;
+      if (onBlur) {
+        onBlur(event);
+      }
 
-    stop();
-    hideTooltip();
-  }, []);
+      stop();
+      hideTooltip();
+    },
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]
+  );
 
@@ -251,3 +270,5 @@ const handleKeyDown = useCallback(
     },
-    []
+    // disabled since both initiated and handlers are refs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hideTooltip, stop]
   );
@@ -262,3 +283,3 @@
     // the last focused element (that had a tooltip) does not make the tooltip appear
-    const handleWindowBlur = () => {
+    const handleWindowBlur = (): void => {
       if (document.hidden) {
@@ -280,12 +301,17 @@ isWindowBlurred.current = true;
 
-  return {
-    stopKeyboardTimer: stop,
-    keyboardHandlers: {
-      onFocus: mode === "keyboard" ? handleFocus : onFocus,
-      onBlur: mode === "keyboard" ? handleBlur : onBlur,
-      onKeyDown: mode === "keyboard" ? handleKeyDown : onKeyDown,
-    },
-  };
+  return [
+    stop,
+    mode === "keyboard" ? handleFocus : onFocus,
+    mode === "keyboard" ? handleBlur : onBlur,
+    mode === "keyboard" ? handleKeyDown : onKeyDown,
+  ];
 }
 
+type TouchResult = [
+  (() => void),
+  React.TouchEventHandler<HTMLElement>,
+  React.TouchEventHandler<HTMLElement>,
+  React.MouseEventHandler<HTMLElement> | undefined
+];
+
 /**
@@ -317,7 +343,7 @@ * This handles creating and returning the required touch event listeners
   setEstimatedPosition,
-}: TouchOptions) {
+}: TouchOptions): TouchResult {
   const touched = useRef(false);
   const handlers = useRefCache({ onTouchStart, onTouchMove, onContextMenu });
 
-  const { start, stop } = useTimeout(() => {
+  const [start, stop] = useTimeout(() => {
     touched.current = false;
@@ -330,3 +356,5 @@ hideTooltip();
       return;
-    } else if (mode !== "touch") {
+    }
+
+    if (mode !== "touch") {
       touched.current = false;
@@ -336,3 +364,3 @@ return;
 
-    const cb = () => {
+    const cb = (): void => {
       start();
@@ -346,2 +374,4 @@ window.removeEventListener("touchend", cb, true);
     };
+    // disabled since it should only be updated on visible or touch changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, mode]);
@@ -360,3 +390,5 @@
     },
-    []
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setEstimatedPosition, stop]
   );
@@ -373,2 +405,4 @@
     },
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -407,13 +441,13 @@ );
     },
-    []
+    // disabled since useRefCache for handlers
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setInitiated, showTooltip]
   );
 
-  return {
-    stopTouchTimer: stop,
-    touchHandlers: {
-      onTouchStart: handleTouchStart,
-      onTouchMove: handleTouchMove,
-      onContextMenu: mode === "touch" ? handleContextMenu : onContextMenu,
-    },
-  };
+  return [
+    stop,
+    handleTouchStart,
+    handleTouchMove,
+    mode === "touch" ? handleContextMenu : onContextMenu,
+  ];
 }

src/usePosition.ts

@@ -10,3 +10,3 @@ import { useCallback, useState } from "react";
 
-const NOOP = () => {};
+const NOOP = (): void => {};
 
@@ -38,35 +38,41 @@ interface PositionResult {
    */
-  const setEstimatedPosition = useCallback((container: HTMLElement) => {
-    const { top, left } = container.getBoundingClientRect();
+  const setEstimatedPosition = useCallback(
+    (container: HTMLElement) => {
+      const { top, left } = container.getBoundingClientRect();
 
-    let nextPosition = defaultPosition;
-    const vh = getViewportSize("height");
-    const vw = getViewportSize("width");
-    switch (defaultPosition) {
-      case "above":
-        if (top < vh - vh * threshold) {
-          nextPosition = "below";
-        }
-        break;
-      case "below":
-        if (top > vh * threshold) {
-          nextPosition = "above";
-        }
-        break;
-      case "left":
-        if (left < vw - vw * threshold) {
-          nextPosition = "right";
-        }
-        break;
-      case "right":
-        if (left > vw * threshold) {
-          nextPosition = "left";
-        }
-        break;
-    }
+      let nextPosition = defaultPosition;
+      const vh = getViewportSize("height");
+      const vw = getViewportSize("width");
+      switch (defaultPosition) {
+        case "above":
+          if (top < vh - vh * threshold) {
+            nextPosition = "below";
+          }
+          break;
+        case "below":
+          if (top > vh * threshold) {
+            nextPosition = "above";
+          }
+          break;
+        case "left":
+          if (left < vw - vw * threshold) {
+            nextPosition = "right";
+          }
+          break;
+        case "right":
+          if (left > vw * threshold) {
+            nextPosition = "left";
+          }
+          break;
+        // no default
+      }
 
-    if (prevPosition.current !== nextPosition) {
-      setPosition(nextPosition);
-    }
-  }, []);
+      if (prevPosition.current !== nextPosition) {
+        setPosition(nextPosition);
+      }
+    },
+    // disabled since useRefCache for prevPosition
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [defaultPosition, threshold]
+  );
 
@@ -73,0 +79,0 @@ if (typeof determinedPosition !== "undefined") {

src/useTooltipHoverMode.ts

@@ -46,5 +46,7 @@ import { createContext, useCallback, useContext, useState } from "react";
     }
+    // disabled since useRefCache
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultDelay]);
 
-  const { start, stop } = useTimeout(disable, delayTimeout);
+  const [start, stop] = useTimeout(disable, delayTimeout);
   const enable = useCallback(() => {
@@ -55,3 +57,5 @@ stop();
     }
-  }, []);
+    // disabled since useRefCache
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stop]);
 
@@ -72,6 +76,11 @@ return {
 
+interface HoverModeActionsContext {
+  enable: () => void;
+  startDisableTimer: () => void;
+}
+
 /**
  * Contains the actions to enable or start disabling the immediate mode for tooltips.
  */
-export const HoverModeActions = createContext({
+export const HoverModeActions = createContext<HoverModeActionsContext>({
   enable: () => {},
@@ -93,3 +102,3 @@ startDisableTimer: () => {},
  */
-export function useTooltipHoverModeDelay() {
+export function useTooltipHoverModeDelay(): number {
   return useContext(HoverModeDelay);
@@ -103,3 +112,3 @@ }
  */
-export function useTooltipHoverModeActions() {
+export function useTooltipHoverModeActions(): HoverModeActionsContext {
   return useContext(HoverModeActions);
@@ -111,4 +120,4 @@ }
  */
-export function useTooltipHoverModeEnabled() {
+export function useTooltipHoverModeEnabled(): boolean {
   return useContext(HoverModeEnabled);
 }

src/useTooltipState.ts

@@ -1,2 +0,2 @@
-import { useCallback, useEffect, useRef } from "react";
+import { HTMLAttributes, useCallback, useEffect, useRef } from "react";
 import { useInteractionModeContext } from "@react-md/states";
@@ -19,2 +19,19 @@ import { SimplePosition, useToggle } from "@react-md/utils";
 
+interface ReturnValue {
+  hide: () => void;
+  visible: boolean;
+  position: SimplePosition;
+  handlers: Pick<
+    HTMLAttributes<HTMLElement>,
+    | "onMouseEnter"
+    | "onMouseLeave"
+    | "onFocus"
+    | "onBlur"
+    | "onKeyDown"
+    | "onTouchStart"
+    | "onTouchMove"
+    | "onContextMenu"
+  >;
+}
+
 /**
@@ -34,3 +51,3 @@ * When the tooltip becomes visible, the tooltip should be hidden if any element
   hideTooltip: () => void
-) {
+): void {
   useEffect(() => {
@@ -128,3 +145,3 @@ if (!initiated) {
   onHide,
-}: TooltipStateOptions) {
+}: TooltipStateOptions): ReturnValue {
   const mode = useInteractionModeContext();
@@ -136,7 +153,7 @@ const initiated = useRef<TooltipInitiated>(null);
 
-  const { toggled: visible, enable: showTooltip, disable: hide } = useToggle();
+  const [visible, showTooltip, hide] = useToggle(false);
   const hideTooltip = useCallback(() => {
     initiated.current = null;
     hide();
-  }, []);
+  }, [hide]);
 
@@ -156,3 +173,3 @@ useVisiblityChange({
 
-  const { stopMouseTimer, mouseHandlers } = useMouseState({
+  const [stopMouseTimer, handleMouseEnter, handleMouseLeave] = useMouseState({
     mode,
@@ -170,3 +187,8 @@ showTooltip,
 
-  const { stopKeyboardTimer, keyboardHandlers } = useKeyboardState({
+  const [
+    stopKeyboardTimer,
+    handleFocus,
+    handleBlur,
+    handleKeyDown,
+  ] = useKeyboardState({
     mode,
@@ -184,3 +206,8 @@ showTooltip,
 
-  const { stopTouchTimer, touchHandlers } = useTouchState({
+  const [
+    stopTouchTimer,
+    handleTouchStart,
+    handleTouchMove,
+    handleContextMenu,
+  ] = useTouchState({
     mode,
@@ -203,3 +230,3 @@ visible,
     hide();
-  }, []);
+  }, [stopMouseTimer, stopKeyboardTimer, stopTouchTimer, hide]);
 
@@ -213,7 +240,12 @@ useOtherInteractionDisable(initiated.current, hideAndReset);
     handlers: {
-      ...mouseHandlers,
-      ...keyboardHandlers,
-      ...touchHandlers,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onContextMenu: handleContextMenu,
     },
   };
 }

src/useVisibilityChange.ts

@@ -34,3 +34,3 @@ import { useEffect } from "react";
   mode,
-}: VisibilityChangeOptions) {
+}: VisibilityChangeOptions): void {
   const handlers = useRefCache({ onShow, onHide });
@@ -43,3 +43,3 @@
 
-    const { onShow } = handlers.current;
+    const { onShow, onHide } = handlers.current;
     if (onShow) {
@@ -50,3 +50,2 @@ onShow(mode);
     return () => {
-      const { onHide } = handlers.current;
       if (onHide) {
@@ -56,3 +55,5 @@ onHide();
     };
+    // only want to trigger on visibility changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 }

types/Tooltip.d.ts

@@ -1,3 +0,3 @@
-import React, { ReactNode, CSSProperties, HTMLAttributes } from "react";
-import { CSSTransitionClassNames, TransitionTimeout, TransitionProps } from "@react-md/transition";
+import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { CSSTransitionClassNames, TransitionProps, TransitionTimeout } from "@react-md/transition";
 import { SimplePosition } from "@react-md/utils";
@@ -4,0 +4,0 @@ /**

types/TooltipHoverModeConfig.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode, FC } from "react";
+import { FC, ReactNode } from "react";
 interface TooltipHoverModeConfigProps {
@@ -3,0 +3,0 @@ children: ReactNode;

types/Tooltipped.d.ts

@@ -1,7 +0,7 @@
-import { FC, ReactElement, ReactNode } from "react";
+import { CSSProperties, FC, ReactElement, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
 import { Omit } from "@react-md/utils";
+import { TooltipProps } from "./Tooltip";
 import { MergableHandlers } from "./useHandlers";
 import { TooltipStateOptions } from "./useTooltipState";
-import { TooltipProps } from "./Tooltip";
 interface TooltippedProvidedProps extends MergableHandlers {
@@ -13,4 +13,3 @@ id: string;
 export declare type ChildrenRenderer = (props: TooltippedProvidedProps) => ReactElement;
-interface ChildProps extends Partial<Omit<TooltippedProvidedProps, "tooltip">> {
-}
+declare type ChildProps = Partial<Omit<TooltippedProvidedProps, "tooltip">>;
 declare type ChildElement = ReactElement<ChildProps>;
@@ -39,2 +38,6 @@ export interface TooltippedProps extends RenderConditionalPortalProps, Omit<TooltipStateOptions, "defaultPosition">, Partial<Pick<TooltipStateOptions, "defaultPosition">>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
     /**
+     * An optional style for the tooltip.
+     */
+    style?: CSSProperties;
+    /**
      * An optional className for the tooltip
@@ -41,0 +44,0 @@ */

types/useHandlers.d.ts

@@ -47,2 +47,3 @@ import { HTMLAttributes, MutableRefObject } from "react";
 export declare type MergableHandlers = MergableMouseHandlers & MergableKeyboardHandlers & MergableTouchHandlers;
+declare type MouseResult = [(() => void), React.MouseEventHandler<HTMLElement> | undefined, React.MouseEventHandler<HTMLElement> | undefined];
 /**
@@ -54,9 +55,4 @@ * This handles creating and returning the required mouse event listeners
  */
-export declare function useMouseState({ mode, showTooltip, hideTooltip, initiated, setInitiated, delay: propDelay, onMouseEnter, onMouseLeave, setEstimatedPosition, disableHoverMode, }: MouseOptions): {
-    stopMouseTimer: () => void;
-    mouseHandlers: {
-        onMouseEnter: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-        onMouseLeave: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-    };
-};
+export declare function useMouseState({ mode, showTooltip, hideTooltip, initiated, setInitiated, delay: propDelay, onMouseEnter, onMouseLeave, setEstimatedPosition, disableHoverMode, }: MouseOptions): MouseResult;
+declare type KeyboardResult = [(() => void), React.FocusEventHandler<HTMLElement> | undefined, React.FocusEventHandler<HTMLElement> | undefined, React.KeyboardEventHandler<HTMLElement> | undefined];
 /**
@@ -68,10 +64,4 @@ * This handles creating and returning the required keyboard event listeners
  */
-export declare function useKeyboardState({ mode, showTooltip, hideTooltip, delay, initiated, setInitiated, onFocus, onBlur, onKeyDown, setEstimatedPosition, }: KeyboardOptions): {
-    stopKeyboardTimer: () => void;
-    keyboardHandlers: {
-        onFocus: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        onBlur: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        onKeyDown: ((event: import("react").KeyboardEvent<HTMLElement>) => void) | undefined;
-    };
-};
+export declare function useKeyboardState({ mode, showTooltip, hideTooltip, delay, initiated, setInitiated, onFocus, onBlur, onKeyDown, setEstimatedPosition, }: KeyboardOptions): KeyboardResult;
+declare type TouchResult = [(() => void), React.TouchEventHandler<HTMLElement>, React.TouchEventHandler<HTMLElement>, React.MouseEventHandler<HTMLElement> | undefined];
 /**
@@ -92,10 +82,3 @@ * This handles creating and returning the required touch event listeners
  */
-export declare function useTouchState({ mode, visible, showTooltip, hideTooltip, delay, setInitiated, onTouchStart, onTouchMove, onContextMenu, setEstimatedPosition, }: TouchOptions): {
-    stopTouchTimer: () => void;
-    touchHandlers: {
-        onTouchStart: (event: import("react").TouchEvent<HTMLElement>) => void;
-        onTouchMove: (event: import("react").TouchEvent<HTMLElement>) => void;
-        onContextMenu: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-    };
-};
+export declare function useTouchState({ mode, visible, showTooltip, hideTooltip, delay, setInitiated, onTouchStart, onTouchMove, onContextMenu, setEstimatedPosition, }: TouchOptions): TouchResult;
 export {};

types/useTooltipHoverMode.d.ts

@@ -35,9 +35,10 @@ /// <reference types="react" />
 export declare const HoverModeDelay: import("react").Context<number>;
+interface HoverModeActionsContext {
+    enable: () => void;
+    startDisableTimer: () => void;
+}
 /**
  * Contains the actions to enable or start disabling the immediate mode for tooltips.
  */
-export declare const HoverModeActions: import("react").Context<{
-    enable: () => void;
-    startDisableTimer: () => void;
-}>;
+export declare const HoverModeActions: import("react").Context<HoverModeActionsContext>;
 /**
@@ -60,6 +61,3 @@ * Keeps track of if the immediate mode is enabled. This allows for easy configuration of
  */
-export declare function useTooltipHoverModeActions(): {
-    enable: () => void;
-    startDisableTimer: () => void;
-};
+export declare function useTooltipHoverModeActions(): HoverModeActionsContext;
 /**
@@ -66,0 +64,0 @@ * @private

types/useTooltipState.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import { HTMLAttributes } from "react";
 import { SimplePosition } from "@react-md/utils";
@@ -6,2 +6,8 @@ import { TooltipProps } from "./Tooltip";
 import { VisibilityChangeOptions } from "./useVisibilityChange";
+interface ReturnValue {
+    hide: () => void;
+    visible: boolean;
+    position: SimplePosition;
+    handlers: Pick<HTMLAttributes<HTMLElement>, "onMouseEnter" | "onMouseLeave" | "onFocus" | "onBlur" | "onKeyDown" | "onTouchStart" | "onTouchMove" | "onContextMenu">;
+}
 /**
@@ -71,16 +77,3 @@ * When the tooltip becomes visible, the tooltip should be hidden if any element
  */
-export default function useTooltipState({ position: propPosition, defaultPosition, positionThreshold, hoverDelay, touchTimeout, focusDelay, disableHoverMode, onMouseEnter, onMouseLeave, onTouchStart, onTouchMove, onFocus, onBlur, onKeyDown, onShow, onHide, }: TooltipStateOptions): {
-    hide: () => void;
-    visible: boolean;
-    position: SimplePosition;
-    handlers: {
-        onTouchStart: (event: import("react").TouchEvent<HTMLElement>) => void;
-        onTouchMove: (event: import("react").TouchEvent<HTMLElement>) => void;
-        onContextMenu: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-        onFocus: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        onBlur: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-        onKeyDown: ((event: import("react").KeyboardEvent<HTMLElement>) => void) | undefined;
-        onMouseEnter: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-        onMouseLeave: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-    };
-};
+export default function useTooltipState({ position: propPosition, defaultPosition, positionThreshold, hoverDelay, touchTimeout, focusDelay, disableHoverMode, onMouseEnter, onMouseLeave, onTouchStart, onTouchMove, onFocus, onBlur, onKeyDown, onShow, onHide, }: TooltipStateOptions): ReturnValue;
+export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

9

decreased by-10%

Lines of code

4007

increased by0.23%

Worsened metrics

Total package byte prevSize

238087

decreased by-1.67%

Number of package files

83

decreased by-4.6%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• - Removed@react-md/sizing@^2.0.0-alpha.5

• Updated@react-md/portal@^2.0.0-alpha.6

• Updated@react-md/theme@^2.0.0-alpha.6

• Updated@react-md/transition@^2.0.0-alpha.6

• Updated@react-md/typography@^2.0.0-alpha.6

• Updated@react-md/utils@^2.0.0-alpha.6

• Updatedreact-transition-group@^4.2.1