@react-md/tooltip - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

CHANGELOG.md

@@ -6,2 +6,33 @@ # Change Log
 
+# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)
+
+
+### Bug Fixes
+
+* **@react-md/tooltip:** cancel timer when element is clicked ([5416554](https://github.com/mlaursen/react-md/commit/5416554558cc007c31c1510f4bafcf159a3a74d5))
+
+
+### Features
+
+* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))
+* **@react-md/transition:** No longer use findDOMNode for transitions ([cb952da](https://github.com/mlaursen/react-md/commit/cb952da5b0cd0a67b9650e45d1e29896d66f01e1))
+
+
+### Other Internal Changes
+
+* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
+* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
+
+
+### Breaking Changes
+
+* Minimum React version is now 16.14 instead of 16.8
+* **react-md:** There will no longer be run-time prop validation with
+the `prop-types` package.
+
+
+
+
+
+
 # [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
@@ -8,0 +39,0 @@

es/constants.js

@@ -0,1 +1,2 @@
+/** @remarks \@since 2.0.0 */
 export var DEFAULT_TOOLTIP_CLASSNAMES = {
@@ -10,2 +11,3 @@ appear: "rmd-tooltip--enter",
 };
+/** @remarks \@since 2.0.0 */
 export var DEFAULT_TOOLTIP_TIMEOUT = {
@@ -15,3 +17,5 @@ enter: 200,
 };
+/** @remarks \@since 2.0.0 */
 export var DEFAULT_TOOLTIP_DELAY = 1000;
+/** @remarks \@since 2.0.0 */
 export var DEFAULT_TOOLTIP_THRESHOLD = 0.75;
@@ -18,0 +22,0 @@ /** @remarks \@since 2.8.0 */

es/index.js

 /**
  * @module @react-md/tooltip
  */
+export * from "./constants";
 export * from "./Tooltip";
 export * from "./Tooltipped";
-export * from "./constants";
 export * from "./useTooltip";
 export * from "./useTooltipPosition";
 //# sourceMappingURL=index.js.map

es/Tooltip.js

@@ -23,6 +23,7 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import cn from "classnames";
-import CSSTransition from "react-transition-group/CSSTransition";
 import { ConditionalPortal, } from "@react-md/portal";
+import { useCSSTransition, } from "@react-md/transition";
 import { bem } from "@react-md/utils";
@@ -59,60 +60,27 @@ import { DEFAULT_TOOLTIP_CLASSNAMES, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_TIMEOUT, } from "./constants";
  */
-export var Tooltip = forwardRef(function Tooltip(_a, ref) {
+export var Tooltip = forwardRef(function Tooltip(_a, nodeRef) {
     var _b;
-    var className = _a.className, _c = _a.classNames, classNames = _c === void 0 ? DEFAULT_TOOLTIP_CLASSNAMES : _c, visible = _a.visible, _d = _a.timeout, timeout = _d === void 0 ? DEFAULT_TOOLTIP_TIMEOUT : _d, _e = _a.dense, dense = _e === void 0 ? false : _e, _f = _a.lineWrap, lineWrap = _f === void 0 ? true : _f, _g = _a.position, position = _g === void 0 ? DEFAULT_TOOLTIP_POSITION : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.portal, portal = _h === void 0 ? true : _h, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _j = _a.mountOnEnter, mountOnEnter = _j === void 0 ? true : _j, _k = _a.unmountOnExit, unmountOnExit = _k === void 0 ? true : _k, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
-    return (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        React.createElement(CSSTransition, { classNames: classNames, in: visible, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
-            React.createElement("span", __assign({}, props, { ref: ref, role: "tooltip", className: cn(block((_b = {
-                        dense: dense,
-                        "line-wrap": lineWrap,
-                        "dense-line-wrap": dense && lineWrap
-                    },
-                    _b[position] = true,
-                    _b)), className) }), children))));
+    var className = _a.className, _c = _a.classNames, classNames = _c === void 0 ? DEFAULT_TOOLTIP_CLASSNAMES : _c, visible = _a.visible, _d = _a.timeout, timeout = _d === void 0 ? DEFAULT_TOOLTIP_TIMEOUT : _d, _e = _a.dense, dense = _e === void 0 ? false : _e, _f = _a.lineWrap, lineWrap = _f === void 0 ? true : _f, _g = _a.position, position = _g === void 0 ? DEFAULT_TOOLTIP_POSITION : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.portal, portal = _h === void 0 ? true : _h, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _j = _a.temporary, temporary = _j === void 0 ? true : _j, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "portal", "portalInto", "portalIntoId", "temporary"]);
+    var _k = useCSSTransition({
+        nodeRef: nodeRef,
+        timeout: timeout,
+        className: cn(block((_b = {
+                dense: dense,
+                "line-wrap": lineWrap,
+                "dense-line-wrap": dense && lineWrap
+            },
+            _b[position] = true,
+            _b)), className),
+        classNames: classNames,
+        transitionIn: visible,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        temporary: temporary,
+    }), elementProps = _k.elementProps, rendered = _k.rendered;
+    return (_jsx(ConditionalPortal, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId }, { children: rendered && (_jsx("span", __assign({}, props, elementProps, { role: "tooltip" }, { children: children }), void 0)) }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        Tooltip.propTypes = {
-            id: PropTypes.string.isRequired,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            children: PropTypes.node.isRequired,
-            dense: PropTypes.bool,
-            lineWrap: PropTypes.bool,
-            classNames: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.shape({
-                    appear: PropTypes.string,
-                    appearActive: PropTypes.string,
-                    enter: PropTypes.string,
-                    enterActive: PropTypes.string,
-                    enterDone: PropTypes.string,
-                    exit: PropTypes.string,
-                    exitActive: PropTypes.string,
-                    exitDone: PropTypes.string,
-                }),
-            ]),
-            timeout: PropTypes.oneOfType([
-                PropTypes.number,
-                PropTypes.shape({
-                    enter: PropTypes.number,
-                    exit: PropTypes.number,
-                }),
-            ]),
-            onEnter: PropTypes.func,
-            onEntering: PropTypes.func,
-            onEntered: PropTypes.func,
-            onExit: PropTypes.func,
-            onExiting: PropTypes.func,
-            onExited: PropTypes.func,
-            mountOnEnter: PropTypes.bool,
-            unmountOnExit: PropTypes.bool,
-            position: PropTypes.oneOf(["above", "below", "left", "right"]),
-            visible: PropTypes.bool.isRequired,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=Tooltip.js.map

es/Tooltipped.js

@@ -23,3 +23,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { Children, cloneElement, } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from "react";
 import { DEFAULT_TOOLTIP_DENSE_SPACING, DEFAULT_TOOLTIP_MARGIN, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_SPACING, DEFAULT_TOOLTIP_THRESHOLD, } from "./constants";
@@ -48,4 +49,4 @@ import { Tooltip } from "./Tooltip";
 export function Tooltipped(_a) {
-    var id = _a.id, style = _a.style, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? DEFAULT_TOOLTIP_MARGIN : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? DEFAULT_TOOLTIP_MARGIN : _d, _e = _a.spacing, spacing = _e === void 0 ? DEFAULT_TOOLTIP_SPACING : _e, _f = _a.denseSpacing, denseSpacing = _f === void 0 ? DEFAULT_TOOLTIP_DENSE_SPACING : _f, propPosition = _a.position, _g = _a.threshold, threshold = _g === void 0 ? DEFAULT_TOOLTIP_THRESHOLD : _g, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onContextMenu = _a.onContextMenu, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, describedBy = _a["aria-describedby"], _h = _a.defaultPosition, defaultPosition = _h === void 0 ? DEFAULT_TOOLTIP_POSITION : _h, _j = _a.mountOnEnter, mountOnEnter = _j === void 0 ? true : _j, _k = _a.unmountOnExit, unmountOnExit = _k === void 0 ? true : _k, disableSwapping = _a.disableSwapping, disableHoverMode = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "mountOnEnter", "unmountOnExit", "disableSwapping", "disableHoverMode", "disableAutoSpacing"]);
-    var _m = useTooltip({
+    var id = _a.id, style = _a.style, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? DEFAULT_TOOLTIP_MARGIN : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? DEFAULT_TOOLTIP_MARGIN : _d, _e = _a.spacing, spacing = _e === void 0 ? DEFAULT_TOOLTIP_SPACING : _e, _f = _a.denseSpacing, denseSpacing = _f === void 0 ? DEFAULT_TOOLTIP_DENSE_SPACING : _f, propPosition = _a.position, _g = _a.threshold, threshold = _g === void 0 ? DEFAULT_TOOLTIP_THRESHOLD : _g, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onContextMenu = _a.onContextMenu, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, describedBy = _a["aria-describedby"], _h = _a.defaultPosition, defaultPosition = _h === void 0 ? DEFAULT_TOOLTIP_POSITION : _h, _j = _a.temporary, temporary = _j === void 0 ? true : _j, disableSwapping = _a.disableSwapping, disableHoverMode = _a.disableHoverMode, _k = _a.disableAutoSpacing, disableAutoSpacing = _k === void 0 ? process.env.NODE_ENV === "test" : _k, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "temporary", "disableSwapping", "disableHoverMode", "disableAutoSpacing"]);
+    var _l = useTooltip({
         baseId: id,
@@ -72,3 +73,3 @@ style: style,
         threshold: threshold,
-    }), elementProps = _m.elementProps, tooltipProps = _m.tooltipProps;
+    }), elementProps = _l.elementProps, tooltipProps = _l.tooltipProps;
     if (!tooltipChildren) {
@@ -81,3 +82,3 @@ if (typeof children === "function") {
     }
-    var tooltip = (React.createElement(Tooltip, __assign({}, tooltipProps, props, { mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), tooltipChildren));
+    var tooltip = (_jsx(Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren }), void 0));
     if (typeof children === "function") {
@@ -109,31 +110,4 @@ return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }, __assign({}, elementProps));
-    return (React.createElement(React.Fragment, null,
-        cloneElement(child, merged),
-        tooltip));
+    return (_jsxs(_Fragment, { children: [cloneElement(child, merged), tooltip] }, void 0));
 }
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        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"]),
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=Tooltipped.js.map

es/useTooltip.js

@@ -25,3 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { useFixedPositioning } from "@react-md/transition";
+import { useFixedPositioning, } from "@react-md/transition";
 import { ABOVE_CENTER_ANCHOR, BELOW_CENTER_ANCHOR, CENTER_LEFT_ANCHOR, CENTER_RIGHT_ANCHOR, unitToNumber, useHoverMode, useOnUnmount, useUserInteractionMode, } from "@react-md/utils";
@@ -42,3 +42,3 @@ import { DEFAULT_TOOLTIP_DELAY, DEFAULT_TOOLTIP_DENSE_SPACING, DEFAULT_TOOLTIP_MARGIN, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_SPACING, DEFAULT_TOOLTIP_THRESHOLD, TOOLTIP_SPACING_VAR, } from "./constants";
         default:
-            throw new Error("Invalid position: " + position);
+            throw new Error("Invalid position: ".concat(position));
     }
@@ -77,3 +77,3 @@ }
 export function useTooltip(_a) {
-    var baseId = _a.baseId, style = _a.style, describedBy = _a.describedBy, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.spacing, spacing = _c === void 0 ? DEFAULT_TOOLTIP_SPACING : _c, _d = _a.denseSpacing, denseSpacing = _d === void 0 ? DEFAULT_TOOLTIP_DENSE_SPACING : _d, determinedPosition = _a.position, _e = _a.defaultPosition, defaultPosition = _e === void 0 ? DEFAULT_TOOLTIP_POSITION : _e, _f = _a.vwMargin, vwMargin = _f === void 0 ? DEFAULT_TOOLTIP_MARGIN : _f, _g = _a.vhMargin, vhMargin = _g === void 0 ? DEFAULT_TOOLTIP_MARGIN : _g, _h = _a.threshold, threshold = _h === void 0 ? DEFAULT_TOOLTIP_THRESHOLD : _h, _j = _a.touchTime, touchTime = _j === void 0 ? DEFAULT_TOOLTIP_DELAY : _j, _k = _a.focusTime, focusTime = _k === void 0 ? DEFAULT_TOOLTIP_DELAY : _k, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, propOnKeyDown = _a.onKeyDown, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, propOnTouchStart = _a.onTouchStart, propOnContextMenu = _a.onContextMenu, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, disableSwapping = _a.disableSwapping, disabled = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l;
+    var baseId = _a.baseId, propStyle = _a.style, describedBy = _a.describedBy, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.spacing, spacing = _c === void 0 ? DEFAULT_TOOLTIP_SPACING : _c, _d = _a.denseSpacing, denseSpacing = _d === void 0 ? DEFAULT_TOOLTIP_DENSE_SPACING : _d, determinedPosition = _a.position, _e = _a.defaultPosition, defaultPosition = _e === void 0 ? DEFAULT_TOOLTIP_POSITION : _e, _f = _a.vwMargin, vwMargin = _f === void 0 ? DEFAULT_TOOLTIP_MARGIN : _f, _g = _a.vhMargin, vhMargin = _g === void 0 ? DEFAULT_TOOLTIP_MARGIN : _g, _h = _a.threshold, threshold = _h === void 0 ? DEFAULT_TOOLTIP_THRESHOLD : _h, _j = _a.touchTime, touchTime = _j === void 0 ? DEFAULT_TOOLTIP_DELAY : _j, _k = _a.focusTime, focusTime = _k === void 0 ? DEFAULT_TOOLTIP_DELAY : _k, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, propOnKeyDown = _a.onKeyDown, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, propOnTouchStart = _a.onTouchStart, propOnContextMenu = _a.onContextMenu, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, disableSwapping = _a.disableSwapping, disabled = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l;
     var containerRef = useRef(null);
@@ -98,2 +98,3 @@ var _m = useTooltipPosition({
             setInitiatedBy(null);
+            window.clearTimeout(timeout.current);
         },
@@ -218,11 +219,14 @@ onMouseEnter: function (event) {
     });
+    var nodeRef = useRef(null);
     var _q = useFixedPositioning({
-        style: style,
+        style: propStyle,
+        nodeRef: nodeRef,
         anchor: getAnchor(position),
         disableSwapping: disableSwapping !== null && disableSwapping !== void 0 ? disableSwapping : !!determinedPosition,
         fixedTo: containerRef,
-        getOptions: function (node) {
+        getFixedPositionOptions: function () {
             var tooltipSpacing = dense ? denseSpacing : spacing;
+            var node = nodeRef.current;
             /* istanbul ignore next */
-            if (!disableAutoSpacing) {
+            if (!disableAutoSpacing && node) {
                 tooltipSpacing = window
@@ -246,9 +250,9 @@ .getComputedStyle(node)
         onExited: onExited,
-    }), _u = _q.updateStyle, positionProps = __rest(_q, ["updateStyle"]);
+    }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
     var tooltipHandlers = __assign(__assign({}, mouseHandlers), { onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onContextMenu: onContextMenu });
-    var tooltipId = baseId + "-tooltip";
+    var tooltipId = "".concat(baseId, "-tooltip");
     var elementProps = __assign({ id: baseId, "aria-describedby": cn(visible && tooltipId, describedBy) || undefined }, tooltipHandlers);
-    var tooltipProps = __assign({ id: tooltipId, dense: dense, visible: visible, position: position }, positionProps);
+    var tooltipProps = __assign({ id: tooltipId, ref: ref, dense: dense, visible: visible, position: position, style: style }, transitionOptions);
     return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode });
 }
 //# sourceMappingURL=useTooltip.js.map

lib/constants.d.ts

@@ -1,6 +0,9 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
-export declare const DEFAULT_TOOLTIP_CLASSNAMES: CSSTransitionClassNames;
-export declare const DEFAULT_TOOLTIP_TIMEOUT: TransitionTimeout;
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
+/** @remarks \@since 2.0.0 */
+export declare const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+/** @remarks \@since 2.0.0 */
+export declare const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout>;
+/** @remarks \@since 2.0.0 */
 export declare const DEFAULT_TOOLTIP_DELAY = 1000;
+/** @remarks \@since 2.0.0 */
 export declare const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
@@ -7,0 +10,0 @@ /** @remarks \@since 2.8.0 */

lib/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TOOLTIP_SPACING_VAR = exports.DEFAULT_TOOLTIP_POSITION = exports.DEFAULT_TOOLTIP_MARGIN = exports.DEFAULT_TOOLTIP_DENSE_SPACING = exports.DEFAULT_TOOLTIP_SPACING = exports.DEFAULT_TOOLTIP_THRESHOLD = exports.DEFAULT_TOOLTIP_DELAY = exports.DEFAULT_TOOLTIP_TIMEOUT = exports.DEFAULT_TOOLTIP_CLASSNAMES = void 0;
+/** @remarks \@since 2.0.0 */
 exports.DEFAULT_TOOLTIP_CLASSNAMES = {
@@ -13,2 +14,3 @@ appear: "rmd-tooltip--enter",
 };
+/** @remarks \@since 2.0.0 */
 exports.DEFAULT_TOOLTIP_TIMEOUT = {
@@ -18,3 +20,5 @@ enter: 200,
 };
+/** @remarks \@since 2.0.0 */
 exports.DEFAULT_TOOLTIP_DELAY = 1000;
+/** @remarks \@since 2.0.0 */
 exports.DEFAULT_TOOLTIP_THRESHOLD = 0.75;
@@ -21,0 +25,0 @@ /** @remarks \@since 2.8.0 */

lib/index.d.ts

 /**
  * @module @react-md/tooltip
  */
+export * from "./constants";
 export * from "./Tooltip";
 export * from "./Tooltipped";
-export * from "./constants";
 export * from "./useTooltip";
 export * from "./useTooltipPosition";

lib/index.js

@@ -16,7 +16,7 @@ "use strict";
  */
+__exportStar(require("./constants"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./Tooltipped"), exports);
-__exportStar(require("./constants"), exports);
 __exportStar(require("./useTooltip"), exports);
 __exportStar(require("./useTooltipPosition"), exports);
 //# sourceMappingURL=index.js.map

lib/Tooltip.d.ts

@@ -1,8 +0,5 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OverridableTransitionProps, TransitionTimeout } from "@react-md/transition";
+import { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
 import { SimplePosition } from "@react-md/utils";
-/** @remarks \@since 2.8.0 */
-export declare type TooltipTransitionProps = Pick<OverridableTransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountOnEnter" | "unmountOnExit">;
 /**
@@ -14,3 +11,3 @@ * The base props for the `Tooltip` component. This can be extended when
  */
-export interface TooltipProps extends TooltipTransitionProps, HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps {
+export interface TooltipProps extends HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps, CSSTransitionComponentProps {
     /**
@@ -105,2 +102,2 @@ * An id for the tooltip. This is required for accessibility and finding an
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLSpanElement>>;

lib/Tooltip.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -49,6 +30,7 @@ var t = {};
 exports.Tooltip = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var classnames_1 = __importDefault(require("classnames"));
-var CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
 var portal_1 = require("@react-md/portal");
+var transition_1 = require("@react-md/transition");
 var utils_1 = require("@react-md/utils");
@@ -85,60 +67,27 @@ var constants_1 = require("./constants");
  */
-exports.Tooltip = (0, react_1.forwardRef)(function Tooltip(_a, ref) {
+exports.Tooltip = (0, react_1.forwardRef)(function Tooltip(_a, nodeRef) {
     var _b;
-    var className = _a.className, _c = _a.classNames, classNames = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_CLASSNAMES : _c, visible = _a.visible, _d = _a.timeout, timeout = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_TIMEOUT : _d, _e = _a.dense, dense = _e === void 0 ? false : _e, _f = _a.lineWrap, lineWrap = _f === void 0 ? true : _f, _g = _a.position, position = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.portal, portal = _h === void 0 ? true : _h, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _j = _a.mountOnEnter, mountOnEnter = _j === void 0 ? true : _j, _k = _a.unmountOnExit, unmountOnExit = _k === void 0 ? true : _k, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit"]);
-    return (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        react_1.default.createElement(CSSTransition_1.default, { classNames: classNames, in: visible, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
-            react_1.default.createElement("span", __assign({}, props, { ref: ref, role: "tooltip", className: (0, classnames_1.default)(block((_b = {
-                        dense: dense,
-                        "line-wrap": lineWrap,
-                        "dense-line-wrap": dense && lineWrap
-                    },
-                    _b[position] = true,
-                    _b)), className) }), children))));
+    var className = _a.className, _c = _a.classNames, classNames = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_CLASSNAMES : _c, visible = _a.visible, _d = _a.timeout, timeout = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_TIMEOUT : _d, _e = _a.dense, dense = _e === void 0 ? false : _e, _f = _a.lineWrap, lineWrap = _f === void 0 ? true : _f, _g = _a.position, position = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.portal, portal = _h === void 0 ? true : _h, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, _j = _a.temporary, temporary = _j === void 0 ? true : _j, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "portal", "portalInto", "portalIntoId", "temporary"]);
+    var _k = (0, transition_1.useCSSTransition)({
+        nodeRef: nodeRef,
+        timeout: timeout,
+        className: (0, classnames_1.default)(block((_b = {
+                dense: dense,
+                "line-wrap": lineWrap,
+                "dense-line-wrap": dense && lineWrap
+            },
+            _b[position] = true,
+            _b)), className),
+        classNames: classNames,
+        transitionIn: visible,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited,
+        temporary: temporary,
+    }), elementProps = _k.elementProps, rendered = _k.rendered;
+    return ((0, jsx_runtime_1.jsx)(portal_1.ConditionalPortal, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId }, { children: rendered && ((0, jsx_runtime_1.jsx)("span", __assign({}, props, elementProps, { role: "tooltip" }, { children: children }), void 0)) }), void 0));
 });
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        exports.Tooltip.propTypes = {
-            id: PropTypes.string.isRequired,
-            style: PropTypes.object,
-            className: PropTypes.string,
-            children: PropTypes.node.isRequired,
-            dense: PropTypes.bool,
-            lineWrap: PropTypes.bool,
-            classNames: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.shape({
-                    appear: PropTypes.string,
-                    appearActive: PropTypes.string,
-                    enter: PropTypes.string,
-                    enterActive: PropTypes.string,
-                    enterDone: PropTypes.string,
-                    exit: PropTypes.string,
-                    exitActive: PropTypes.string,
-                    exitDone: PropTypes.string,
-                }),
-            ]),
-            timeout: PropTypes.oneOfType([
-                PropTypes.number,
-                PropTypes.shape({
-                    enter: PropTypes.number,
-                    exit: PropTypes.number,
-                }),
-            ]),
-            onEnter: PropTypes.func,
-            onEntering: PropTypes.func,
-            onEntered: PropTypes.func,
-            onExit: PropTypes.func,
-            onExiting: PropTypes.func,
-            onExited: PropTypes.func,
-            mountOnEnter: PropTypes.bool,
-            unmountOnExit: PropTypes.bool,
-            position: PropTypes.oneOf(["above", "below", "left", "right"]),
-            visible: PropTypes.bool.isRequired,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=Tooltip.js.map

lib/Tooltipped.d.ts

@@ -13,3 +13,3 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 declare type ChildElement = ReactElement<ChildProps>;
-export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
+export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "temporary"> {
     /**
@@ -70,23 +70,3 @@ * The id for the element that has a tooltip. This is always required since it
  */
-export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, mountOnEnter, unmountOnExit, disableSwapping, disableHoverMode, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
-export declare namespace Tooltipped {
-    var propTypes: {
-        tooltipId: any;
-        dense: any;
-        spacing: any;
-        denseSpacing: any;
-        positionThreshold: any;
-        disableAutoSpacing: any;
-        vwMargin: any;
-        vhMargin: any;
-        portal: any;
-        lineWrap: any;
-        focusDelay: any;
-        hoverDelay: any;
-        touchTimeout: any;
-        mountOnEnter: any;
-        unmountOnExit: any;
-        defaultPosition: any;
-    };
-}
+export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, temporary, disableSwapping, disableHoverMode, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
 export {};

lib/Tooltipped.js

@@ -13,21 +13,2 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -46,3 +27,4 @@ var t = {};
 exports.Tooltipped = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var constants_1 = require("./constants");
@@ -71,4 +53,4 @@ var Tooltip_1 = require("./Tooltip");
 function Tooltipped(_a) {
-    var id = _a.id, style = _a.style, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _d, _e = _a.spacing, spacing = _e === void 0 ? constants_1.DEFAULT_TOOLTIP_SPACING : _e, _f = _a.denseSpacing, denseSpacing = _f === void 0 ? constants_1.DEFAULT_TOOLTIP_DENSE_SPACING : _f, propPosition = _a.position, _g = _a.threshold, threshold = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_THRESHOLD : _g, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onContextMenu = _a.onContextMenu, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, describedBy = _a["aria-describedby"], _h = _a.defaultPosition, defaultPosition = _h === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _h, _j = _a.mountOnEnter, mountOnEnter = _j === void 0 ? true : _j, _k = _a.unmountOnExit, unmountOnExit = _k === void 0 ? true : _k, disableSwapping = _a.disableSwapping, disableHoverMode = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "mountOnEnter", "unmountOnExit", "disableSwapping", "disableHoverMode", "disableAutoSpacing"]);
-    var _m = (0, useTooltip_1.useTooltip)({
+    var id = _a.id, style = _a.style, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _d, _e = _a.spacing, spacing = _e === void 0 ? constants_1.DEFAULT_TOOLTIP_SPACING : _e, _f = _a.denseSpacing, denseSpacing = _f === void 0 ? constants_1.DEFAULT_TOOLTIP_DENSE_SPACING : _f, propPosition = _a.position, _g = _a.threshold, threshold = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_THRESHOLD : _g, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onContextMenu = _a.onContextMenu, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, describedBy = _a["aria-describedby"], _h = _a.defaultPosition, defaultPosition = _h === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _h, _j = _a.temporary, temporary = _j === void 0 ? true : _j, disableSwapping = _a.disableSwapping, disableHoverMode = _a.disableHoverMode, _k = _a.disableAutoSpacing, disableAutoSpacing = _k === void 0 ? process.env.NODE_ENV === "test" : _k, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "temporary", "disableSwapping", "disableHoverMode", "disableAutoSpacing"]);
+    var _l = (0, useTooltip_1.useTooltip)({
         baseId: id,
@@ -95,3 +77,3 @@ style: style,
         threshold: threshold,
-    }), elementProps = _m.elementProps, tooltipProps = _m.tooltipProps;
+    }), elementProps = _l.elementProps, tooltipProps = _l.tooltipProps;
     if (!tooltipChildren) {
@@ -104,3 +86,3 @@ if (typeof children === "function") {
     }
-    var tooltip = (react_1.default.createElement(Tooltip_1.Tooltip, __assign({}, tooltipProps, props, { mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), tooltipChildren));
+    var tooltip = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren }), void 0));
     if (typeof children === "function") {
@@ -132,32 +114,5 @@ return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }, __assign({}, elementProps));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, react_1.cloneElement)(child, merged),
-        tooltip));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(child, merged), tooltip] }, void 0));
 }
 exports.Tooltipped = Tooltipped;
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        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"]),
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=Tooltipped.js.map

lib/useTooltip.d.ts

@@ -1,3 +0,3 @@
-import { CSSProperties, HTMLAttributes } from "react";
-import { TransitionHooks } from "@react-md/transition";
+import { CSSProperties, HTMLAttributes, Ref } from "react";
+import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
 import { HoverModeEventHandlers, HoverModeOnlyReturnValue, UserInteractionMode } from "@react-md/utils";
@@ -94,3 +94,3 @@ import { TooltipProps } from "./Tooltip";
 /** @remarks \@since 2.8.0 */
-export interface BaseTooltipHookOptions<E extends HTMLElement> extends TransitionHooks, TooltipPositionHookOptions, TooltipPositioningOptions, TooltippedElementEventHandlers<E> {
+export interface BaseTooltipHookOptions<E extends HTMLElement> extends TransitionCallbacks, TooltipPositionHookOptions, TooltipPositioningOptions, TooltippedElementEventHandlers<E> {
     /**
@@ -141,3 +141,5 @@ * The amount of time to wait (in ms) before showing the tooltip after
  */
-export declare type TooltipHookProvidedTooltipProps = Pick<TooltipProps, "style"> & Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible" | "onEnter" | "onEntering" | "onEntered" | "onExited">>;
+export declare type TooltipHookProvidedTooltipProps = Pick<TooltipProps, "style"> & Required<FixedPositioningTransitionCallbacks> & Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible">> & {
+    ref: Ref<HTMLSpanElement>;
+};
 /**
@@ -192,2 +194,2 @@ * Note: This is _really_ an internal type since this is handled automatically
  */
-export declare function useTooltip<E extends HTMLElement>({ baseId, style, describedBy, dense, spacing, denseSpacing, position: determinedPosition, defaultPosition, vwMargin, vhMargin, threshold, touchTime, focusTime, onFocus: propOnFocus, onBlur: propOnBlur, onKeyDown: propOnKeyDown, onClick, onMouseEnter, onMouseLeave, onTouchStart: propOnTouchStart, onContextMenu: propOnContextMenu, onEnter, onEntering, onEntered, onExited, disableSwapping, disableHoverMode: disabled, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;
+export declare function useTooltip<E extends HTMLElement>({ baseId, style: propStyle, describedBy, dense, spacing, denseSpacing, position: determinedPosition, defaultPosition, vwMargin, vhMargin, threshold, touchTime, focusTime, onFocus: propOnFocus, onBlur: propOnBlur, onKeyDown: propOnKeyDown, onClick, onMouseEnter, onMouseLeave, onTouchStart: propOnTouchStart, onContextMenu: propOnContextMenu, onEnter, onEntering, onEntered, onExited, disableSwapping, disableHoverMode: disabled, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;

lib/useTooltip.js

@@ -47,3 +47,3 @@ "use strict";
         default:
-            throw new Error("Invalid position: " + position);
+            throw new Error("Invalid position: ".concat(position));
     }
@@ -82,3 +82,3 @@ }
 function useTooltip(_a) {
-    var baseId = _a.baseId, style = _a.style, describedBy = _a.describedBy, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.spacing, spacing = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_SPACING : _c, _d = _a.denseSpacing, denseSpacing = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_DENSE_SPACING : _d, determinedPosition = _a.position, _e = _a.defaultPosition, defaultPosition = _e === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _e, _f = _a.vwMargin, vwMargin = _f === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _f, _g = _a.vhMargin, vhMargin = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _g, _h = _a.threshold, threshold = _h === void 0 ? constants_1.DEFAULT_TOOLTIP_THRESHOLD : _h, _j = _a.touchTime, touchTime = _j === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _j, _k = _a.focusTime, focusTime = _k === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _k, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, propOnKeyDown = _a.onKeyDown, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, propOnTouchStart = _a.onTouchStart, propOnContextMenu = _a.onContextMenu, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, disableSwapping = _a.disableSwapping, disabled = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l;
+    var baseId = _a.baseId, propStyle = _a.style, describedBy = _a.describedBy, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.spacing, spacing = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_SPACING : _c, _d = _a.denseSpacing, denseSpacing = _d === void 0 ? constants_1.DEFAULT_TOOLTIP_DENSE_SPACING : _d, determinedPosition = _a.position, _e = _a.defaultPosition, defaultPosition = _e === void 0 ? constants_1.DEFAULT_TOOLTIP_POSITION : _e, _f = _a.vwMargin, vwMargin = _f === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _f, _g = _a.vhMargin, vhMargin = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_MARGIN : _g, _h = _a.threshold, threshold = _h === void 0 ? constants_1.DEFAULT_TOOLTIP_THRESHOLD : _h, _j = _a.touchTime, touchTime = _j === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _j, _k = _a.focusTime, focusTime = _k === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _k, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, propOnKeyDown = _a.onKeyDown, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, propOnTouchStart = _a.onTouchStart, propOnContextMenu = _a.onContextMenu, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, disableSwapping = _a.disableSwapping, disabled = _a.disableHoverMode, _l = _a.disableAutoSpacing, disableAutoSpacing = _l === void 0 ? process.env.NODE_ENV === "test" : _l;
     var containerRef = (0, react_1.useRef)(null);
@@ -103,2 +103,3 @@ var _m = (0, useTooltipPosition_1.useTooltipPosition)({
             setInitiatedBy(null);
+            window.clearTimeout(timeout.current);
         },
@@ -223,11 +224,14 @@ onMouseEnter: function (event) {
     });
+    var nodeRef = (0, react_1.useRef)(null);
     var _q = (0, transition_1.useFixedPositioning)({
-        style: style,
+        style: propStyle,
+        nodeRef: nodeRef,
         anchor: getAnchor(position),
         disableSwapping: disableSwapping !== null && disableSwapping !== void 0 ? disableSwapping : !!determinedPosition,
         fixedTo: containerRef,
-        getOptions: function (node) {
+        getFixedPositionOptions: function () {
             var tooltipSpacing = dense ? denseSpacing : spacing;
+            var node = nodeRef.current;
             /* istanbul ignore next */
-            if (!disableAutoSpacing) {
+            if (!disableAutoSpacing && node) {
                 tooltipSpacing = window
@@ -251,7 +255,7 @@ .getComputedStyle(node)
         onExited: onExited,
-    }), _u = _q.updateStyle, positionProps = __rest(_q, ["updateStyle"]);
+    }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
     var tooltipHandlers = __assign(__assign({}, mouseHandlers), { onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onContextMenu: onContextMenu });
-    var tooltipId = baseId + "-tooltip";
+    var tooltipId = "".concat(baseId, "-tooltip");
     var elementProps = __assign({ id: baseId, "aria-describedby": (0, classnames_1.default)(visible && tooltipId, describedBy) || undefined }, tooltipHandlers);
-    var tooltipProps = __assign({ id: tooltipId, dense: dense, visible: visible, position: position }, positionProps);
+    var tooltipProps = __assign({ id: tooltipId, ref: ref, dense: dense, visible: visible, position: position, style: style }, transitionOptions);
     return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode });
@@ -258,0 +262,0 @@ }

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
@@ -34,9 +34,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/portal": "^3.1.0",
-    "@react-md/theme": "^3.1.0",
-    "@react-md/transition": "^3.1.0",
-    "@react-md/typography": "^3.1.0",
-    "@react-md/utils": "^3.1.0",
-    "classnames": "^2.3.1",
-    "react-transition-group": "^4.4.2"
+    "@react-md/portal": "^4.0.0",
+    "@react-md/theme": "^4.0.0",
+    "@react-md/transition": "^4.0.0",
+    "@react-md/typography": "^4.0.0",
+    "@react-md/utils": "^4.0.0",
+    "classnames": "^2.3.1"
   },
@@ -48,12 +47,9 @@ "devDependencies": {
   "peerDependencies": {
-    "react": ">= 16.8",
-    "react-dom": ">= 16.8"
+    "react": ">= 16.14",
+    "react-dom": ">= 16.14"
   },
-  "optionalDependencies": {
-    "prop-types": ">= 15.6"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5891a3255f12fb34d2cc82d81d10f85f712a21e8"
+  "gitHead": "a9f2d64a777698fa65bb3196f6063cdd8321f5cb"
 }

README.md

@@ -35,3 +35,3 @@ # @react-md/tooltip
 ```tsx
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { render } from "react-dom";
@@ -38,0 +38,0 @@ import { Button } from "@react-md/button";

src/constants.ts

@@ -1,5 +0,8 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type {
+  CSSTransitionClassNames,
+  TransitionTimeout,
+} from "@react-md/transition";
 
-export const DEFAULT_TOOLTIP_CLASSNAMES: CSSTransitionClassNames = {
+/** @remarks \@since 2.0.0 */
+export const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   appear: "rmd-tooltip--enter",
@@ -14,3 +17,4 @@ appearActive: "rmd-tooltip--visible",
 
-export const DEFAULT_TOOLTIP_TIMEOUT: TransitionTimeout = {
+/** @remarks \@since 2.0.0 */
+export const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout> = {
   enter: 200,
@@ -20,3 +24,5 @@ exit: 150,
 
+/** @remarks \@since 2.0.0 */
 export const DEFAULT_TOOLTIP_DELAY = 1000;
+/** @remarks \@since 2.0.0 */
 export const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
@@ -23,0 +29,0 @@

src/index.ts

 /**
  * @module @react-md/tooltip
  */
+export * from "./constants";
 export * from "./Tooltip";
 export * from "./Tooltipped";
-
-export * from "./constants";
 export * from "./useTooltip";
 export * from "./useTooltipPosition";

src/useTooltip.ts

@@ -7,2 +7,3 @@ import {
   MouseEvent,
+  Ref,
   TouchEvent,
@@ -15,4 +16,8 @@ useCallback,
 import cn from "classnames";
-import { TransitionHooks, useFixedPositioning } from "@react-md/transition";
 import {
+  FixedPositioningTransitionCallbacks,
+  TransitionCallbacks,
+  useFixedPositioning,
+} from "@react-md/transition";
+import {
   ABOVE_CENTER_ANCHOR,
@@ -177,3 +182,3 @@ BELOW_CENTER_ANCHOR,
 export interface BaseTooltipHookOptions<E extends HTMLElement>
-  extends TransitionHooks,
+  extends TransitionCallbacks,
     TooltipPositionHookOptions,
@@ -234,15 +239,6 @@ TooltipPositioningOptions,
 export type TooltipHookProvidedTooltipProps = Pick<TooltipProps, "style"> &
-  Required<
-    Pick<
-      TooltipProps,
-      | "id"
-      | "dense"
-      | "position"
-      | "visible"
-      | "onEnter"
-      | "onEntering"
-      | "onEntered"
-      | "onExited"
-    >
-  >;
+  Required<FixedPositioningTransitionCallbacks> &
+  Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible">> & {
+    ref: Ref<HTMLSpanElement>;
+  };
 
@@ -304,3 +300,3 @@ /**
   baseId,
-  style,
+  style: propStyle,
   describedBy,
@@ -359,2 +355,3 @@ dense = false,
       setInitiatedBy(null);
+      window.clearTimeout(timeout.current);
     },
@@ -503,11 +500,18 @@ onMouseEnter: (event) => {
 
-  const { updateStyle: _u, ...positionProps } = useFixedPositioning({
+  const nodeRef = useRef<HTMLSpanElement>(null);
+  const {
+    ref,
     style,
+    callbacks: transitionOptions,
+  } = useFixedPositioning({
+    style: propStyle,
+    nodeRef,
     anchor: getAnchor(position),
     disableSwapping: disableSwapping ?? !!determinedPosition,
     fixedTo: containerRef,
-    getOptions: (node) => {
+    getFixedPositionOptions() {
       let tooltipSpacing = dense ? denseSpacing : spacing;
+      const node = nodeRef.current;
       /* istanbul ignore next */
-      if (!disableAutoSpacing) {
+      if (!disableAutoSpacing && node) {
         tooltipSpacing = window
@@ -552,6 +556,8 @@ .getComputedStyle(node)
     id: tooltipId,
+    ref,
     dense,
     visible,
     position,
-    ...positionProps,
+    style,
+    ...transitionOptions,
   };
@@ -558,0 +564,0 @@

types/constants.d.ts

@@ -1,6 +0,9 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
-export declare const DEFAULT_TOOLTIP_CLASSNAMES: CSSTransitionClassNames;
-export declare const DEFAULT_TOOLTIP_TIMEOUT: TransitionTimeout;
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
+/** @remarks \@since 2.0.0 */
+export declare const DEFAULT_TOOLTIP_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+/** @remarks \@since 2.0.0 */
+export declare const DEFAULT_TOOLTIP_TIMEOUT: Readonly<TransitionTimeout>;
+/** @remarks \@since 2.0.0 */
 export declare const DEFAULT_TOOLTIP_DELAY = 1000;
+/** @remarks \@since 2.0.0 */
 export declare const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
@@ -7,0 +10,0 @@ /** @remarks \@since 2.8.0 */

types/index.d.ts

 /**
  * @module @react-md/tooltip
  */
+export * from "./constants";
 export * from "./Tooltip";
 export * from "./Tooltipped";
-export * from "./constants";
 export * from "./useTooltip";
 export * from "./useTooltipPosition";

types/Tooltip.d.ts

@@ -1,8 +0,5 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
-import { OverridableTransitionProps, TransitionTimeout } from "@react-md/transition";
+import { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
 import { SimplePosition } from "@react-md/utils";
-/** @remarks \@since 2.8.0 */
-export declare type TooltipTransitionProps = Pick<OverridableTransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountOnEnter" | "unmountOnExit">;
 /**
@@ -14,3 +11,3 @@ * The base props for the `Tooltip` component. This can be extended when
  */
-export interface TooltipProps extends TooltipTransitionProps, HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps {
+export interface TooltipProps extends HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps, CSSTransitionComponentProps {
     /**
@@ -105,2 +102,2 @@ * An id for the tooltip. This is required for accessibility and finding an
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLSpanElement>>;

types/Tooltipped.d.ts

@@ -13,3 +13,3 @@ import { CSSProperties, ReactElement, ReactNode } from "react";
 declare type ChildElement = ReactElement<ChildProps>;
-export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
+export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "temporary"> {
     /**
@@ -70,23 +70,3 @@ * The id for the element that has a tooltip. This is always required since it
  */
-export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, mountOnEnter, unmountOnExit, disableSwapping, disableHoverMode, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
-export declare namespace Tooltipped {
-    var propTypes: {
-        tooltipId: any;
-        dense: any;
-        spacing: any;
-        denseSpacing: any;
-        positionThreshold: any;
-        disableAutoSpacing: any;
-        vwMargin: any;
-        vhMargin: any;
-        portal: any;
-        lineWrap: any;
-        focusDelay: any;
-        hoverDelay: any;
-        touchTimeout: any;
-        mountOnEnter: any;
-        unmountOnExit: any;
-        defaultPosition: any;
-    };
-}
+export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, temporary, disableSwapping, disableHoverMode, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
 export {};

types/useTooltip.d.ts

@@ -1,3 +0,3 @@
-import { CSSProperties, HTMLAttributes } from "react";
-import { TransitionHooks } from "@react-md/transition";
+import { CSSProperties, HTMLAttributes, Ref } from "react";
+import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
 import { HoverModeEventHandlers, HoverModeOnlyReturnValue, UserInteractionMode } from "@react-md/utils";
@@ -94,3 +94,3 @@ import { TooltipProps } from "./Tooltip";
 /** @remarks \@since 2.8.0 */
-export interface BaseTooltipHookOptions<E extends HTMLElement> extends TransitionHooks, TooltipPositionHookOptions, TooltipPositioningOptions, TooltippedElementEventHandlers<E> {
+export interface BaseTooltipHookOptions<E extends HTMLElement> extends TransitionCallbacks, TooltipPositionHookOptions, TooltipPositioningOptions, TooltippedElementEventHandlers<E> {
     /**
@@ -141,3 +141,5 @@ * The amount of time to wait (in ms) before showing the tooltip after
  */
-export declare type TooltipHookProvidedTooltipProps = Pick<TooltipProps, "style"> & Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible" | "onEnter" | "onEntering" | "onEntered" | "onExited">>;
+export declare type TooltipHookProvidedTooltipProps = Pick<TooltipProps, "style"> & Required<FixedPositioningTransitionCallbacks> & Required<Pick<TooltipProps, "id" | "dense" | "position" | "visible">> & {
+    ref: Ref<HTMLSpanElement>;
+};
 /**
@@ -192,2 +194,2 @@ * Note: This is _really_ an internal type since this is handled automatically
  */
-export declare function useTooltip<E extends HTMLElement>({ baseId, style, describedBy, dense, spacing, denseSpacing, position: determinedPosition, defaultPosition, vwMargin, vhMargin, threshold, touchTime, focusTime, onFocus: propOnFocus, onBlur: propOnBlur, onKeyDown: propOnKeyDown, onClick, onMouseEnter, onMouseLeave, onTouchStart: propOnTouchStart, onContextMenu: propOnContextMenu, onEnter, onEntering, onEntered, onExited, disableSwapping, disableHoverMode: disabled, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;
+export declare function useTooltip<E extends HTMLElement>({ baseId, style: propStyle, describedBy, dense, spacing, denseSpacing, position: determinedPosition, defaultPosition, vwMargin, vhMargin, threshold, touchTime, focusTime, onFocus: propOnFocus, onBlur: propOnBlur, onKeyDown: propOnKeyDown, onClick, onMouseEnter, onMouseLeave, onTouchStart: propOnTouchStart, onContextMenu: propOnContextMenu, onEnter, onEntering, onEntered, onExited, disableSwapping, disableHoverMode: disabled, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;

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

8

decreased by-20%

Number of low supply chain risk alerts

4

decreased by-50%

Worsened metrics

Total package byte prevSize

192857

decreased by-6.38%

Lines of code

3152

decreased by-7.59%

Dependency changes

• + Added@react-md/portal@4.0.3(transitive)

• + Added@react-md/theme@4.0.3(transitive)

• + Added@react-md/transition@4.0.3(transitive)

• + Added@react-md/typography@4.0.3(transitive)

• + Added@react-md/utils@4.0.3(transitive)

• - Removedreact-transition-group@^4.4.2

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@react-md/portal@3.1.0(transitive)

• - Removed@react-md/theme@3.1.0(transitive)

• - Removed@react-md/transition@3.1.0(transitive)

• - Removed@react-md/typography@3.1.0(transitive)

• - Removed@react-md/utils@3.1.0(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.12(transitive)

• - Removed@types/react-transition-group@4.4.11(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-transition-group@4.4.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-md/portal@^4.0.0

• Updated@react-md/theme@^4.0.0

• Updated@react-md/transition@^4.0.0

• Updated@react-md/typography@^4.0.0

• Updated@react-md/utils@^4.0.0