@react-md/tooltip - npm Package Compare versions

Comparing version 2.7.1 to 2.8.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [2.8.0](https://github.com/mlaursen/react-md/compare/v2.7.1...v2.8.0) (2021-04-22)
+
+
+### Bug Fixes
+
+* **@react-md/utils:** Click Behavior for Hover Mode ([d0fda80](https://github.com/mlaursen/react-md/commit/d0fda80332406e3323df457d9822d9dd6df3f8da))
+
+
+### Other Internal Changes
+
+* **@react-md/tooltip:** Cleaned up some `useTooltip` code ([0a6aed9](https://github.com/mlaursen/react-md/commit/0a6aed906f76690f8a6e3e026cd30dbf991ef148))
+* **@react-md/tooltip:** Updated `Tooltip` to use new Hover Mode ([386f47b](https://github.com/mlaursen/react-md/commit/386f47ba4e0976a3f5727a714710914bb5968987))
+* **tsconfig:** separate tsconfig by package instead of a single root ([b278230](https://github.com/mlaursen/react-md/commit/b2782303b2a2db07eeaa25b6a3d04337976cffaa))
+
+
+
+
+
+
 ## [2.7.1](https://github.com/mlaursen/react-md/compare/v2.7.0...v2.7.1) (2021-03-23)
@@ -8,0 +27,0 @@

es/constants.js

@@ -16,2 +16,15 @@ export var DEFAULT_TOOLTIP_CLASSNAMES = {
 export var DEFAULT_TOOLTIP_THRESHOLD = 0.75;
+/** @remarks \@since 2.8.0 */
+export var DEFAULT_TOOLTIP_SPACING = "1.5rem";
+/** @remarks \@since 2.8.0 */
+export var DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
+/** @remarks \@since 2.8.0 */
+export var DEFAULT_TOOLTIP_MARGIN = 16;
+/** @remarks \@since 2.8.0 */
+export var DEFAULT_TOOLTIP_POSITION = "below";
+/**
+ * @internal
+ * @remarks \@since 2.8.0
+ */
+export var TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";
 //# sourceMappingURL=constants.js.map

es/index.js

@@ -5,4 +5,4 @@ export * from "./Tooltip";
 export * from "./constants";
-export { useTooltipState } from "./useTooltipState";
-export { useTooltipHoverModeState } from "./useTooltipHoverMode";
+export * from "./useTooltip";
+export * from "./useTooltipPosition";
 //# sourceMappingURL=index.js.map

es/Tooltip.js

@@ -26,4 +26,5 @@ var __assign = (this && this.__assign) || function () {
 import CSSTransition from "react-transition-group/CSSTransition";
+import { ConditionalPortal, } from "@react-md/portal";
 import { bem } from "@react-md/utils";
-import { DEFAULT_TOOLTIP_CLASSNAMES, DEFAULT_TOOLTIP_TIMEOUT, } from "./constants";
+import { DEFAULT_TOOLTIP_CLASSNAMES, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_TIMEOUT, } from "./constants";
 var block = bem("rmd-tooltip");
@@ -35,14 +36,37 @@ /**
  * `visible` prop.
+ *
+ * @example
+ * Simple Usage
+ * ```tsx
+ * import { Button } from "@react-md/button";
+ * import { useTooltip, Tooltip } from "@react-md/tooltip";
+ *
+ * function Example() {
+ *   const { tooltipProps, elementProps } = useTooltip({
+ *     baseId: 'my-element',
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <Button {...elementProps}>Button</Button>
+ *       <Tooltip {...tooltipProps}>
+ *         Tooltip Content
+ *       </Tooltip>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export var Tooltip = forwardRef(function Tooltip(_a, ref) {
     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 ? "below" : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.mountOnEnter, mountOnEnter = _h === void 0 ? true : _h, _j = _a.unmountOnExit, unmountOnExit = _j === void 0 ? true : _j, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "mountOnEnter", "unmountOnExit"]);
-    return (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.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))));
 });
@@ -49,0 +73,0 @@ /* istanbul ignore next */

es/TooltipHoverModeConfig.js

@@ -1,4 +0,5 @@
-import React, { useMemo } from "react";
+/* istanbul ignore file */
+import React from "react";
+import { HoverModeProvider } from "@react-md/utils";
 import { DEFAULT_TOOLTIP_DELAY } from "./constants";
-import { HoverModeActions, HoverModeDelay, HoverModeEnabled, useTooltipHoverModeState, } from "./useTooltipHoverMode";
 /**
@@ -8,15 +9,10 @@ * This component is used so that tooltips can gain the "hover mode"
  * tooltips will become visible immediately until 3 seconds have passed.
+ *
+ * @deprecated \@since 2.8.0 Use the {@link @react-md/utils#HoverModeProvider}
+ * instead.
  */
 export function TooltipHoverModeConfig(_a) {
     var _b = _a.defaultDelay, defaultDelay = _b === void 0 ? DEFAULT_TOOLTIP_DELAY : _b, _c = _a.delayTimeout, delayTimeout = _c === void 0 ? DEFAULT_TOOLTIP_DELAY : _c, _d = _a.enabled, enabled = _d === void 0 ? true : _d, children = _a.children;
-    var _e = useTooltipHoverModeState(defaultDelay, delayTimeout), delay = _e.delay, enable = _e.enable, startDisableTimer = _e.startDisableTimer;
-    var actions = useMemo(function () { return ({
-        enable: enable,
-        startDisableTimer: startDisableTimer,
-    }); }, [enable, startDisableTimer]);
-    return (React.createElement(HoverModeDelay.Provider, { value: delay },
-        React.createElement(HoverModeActions.Provider, { value: actions },
-            React.createElement(HoverModeEnabled.Provider, { value: enabled }, children))));
+    return (React.createElement(HoverModeProvider, { disabled: !enabled, defaultVisibleInTime: defaultDelay, deactivateTime: delayTimeout }, children));
 }
-/* istanbul ignore next */
 if (process.env.NODE_ENV !== "production") {
@@ -23,0 +19,0 @@ try {

es/Tooltipped.js

@@ -23,15 +23,11 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { Children, cloneElement, useMemo, useRef, } from "react";
-import cn from "classnames";
-import { ConditionalPortal, } from "@react-md/portal";
-import { useFixedPositioning } from "@react-md/transition";
-import { unitToNumber, } from "@react-md/utils";
-import { DEFAULT_TOOLTIP_DELAY, DEFAULT_TOOLTIP_THRESHOLD } from "./constants";
+import React, { Children, cloneElement, } from "react";
+import { DEFAULT_TOOLTIP_DENSE_SPACING, DEFAULT_TOOLTIP_MARGIN, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_SPACING, DEFAULT_TOOLTIP_THRESHOLD, } from "./constants";
 import { Tooltip } from "./Tooltip";
-import { useTooltipState } from "./useTooltipState";
+import { useTooltip, } from "./useTooltip";
 var MERGABLE_PROPS = [
+    "onClick",
     "onMouseEnter",
     "onMouseLeave",
     "onTouchStart",
-    "onTouchMove",
     "onFocus",
@@ -45,48 +41,33 @@ "onKeyDown",
  * the child with `React.cloneChild`.
+ *
+ * Note: This component is _kind of_ deprecated in favor of using the
+ * `useTooltip` hook and `Tooltip` component instead.
+ *
+ * @see {@link Tooltip} for an example
  */
 export function Tooltipped(_a) {
-    var id = _a.id, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? 16 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.hoverDelay, hoverDelay = _e === void 0 ? DEFAULT_TOOLTIP_DELAY : _e, _f = _a.focusDelay, focusDelay = _f === void 0 ? DEFAULT_TOOLTIP_DELAY : _f, _g = _a.touchTimeout, touchTimeout = _g === void 0 ? DEFAULT_TOOLTIP_DELAY : _g, _h = _a.spacing, spacing = _h === void 0 ? "1.5rem" : _h, _j = _a.denseSpacing, denseSpacing = _j === void 0 ? "0.875rem" : _j, propPosition = _a.position, _k = _a.positionThreshold, positionThreshold = _k === void 0 ? DEFAULT_TOOLTIP_THRESHOLD : _k, _l = _a.portal, portal = _l === void 0 ? true : _l, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove, onContextMenu = _a.onContextMenu, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onShow = _a.onShow, onHide = _a.onHide, disableHoverMode = _a.disableHoverMode, describedBy = _a["aria-describedby"], _m = _a.defaultPosition, defaultPosition = _m === void 0 ? "below" : _m, disableSwapping = _a.disableSwapping, _o = _a.mountOnEnter, mountOnEnter = _o === void 0 ? true : _o, _p = _a.unmountOnExit, unmountOnExit = _p === void 0 ? true : _p, _q = _a.disableAutoSpacing, disableAutoSpacing = _q === void 0 ? process.env.NODE_ENV === "test" : _q, props = __rest(_a, ["id", "children", "tooltip", "dense", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "touchTimeout", "spacing", "denseSpacing", "position", "positionThreshold", "portal", "portalInto", "portalIntoId", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchMove", "onContextMenu", "onFocus", "onKeyDown", "onShow", "onHide", "disableHoverMode", "aria-describedby", "defaultPosition", "disableSwapping", "mountOnEnter", "unmountOnExit", "disableAutoSpacing"]);
-    var _r = useTooltipState({
+    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, positionThreshold = _a.positionThreshold, _g = _a.threshold, threshold = _g === void 0 ? positionThreshold !== null && positionThreshold !== void 0 ? positionThreshold : 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, _tooltipId = _a.tooltipId, _hoverDelay = _a.hoverDelay, _focusDelay = _a.focusDelay, _touchTimeout = _a.touchTimeout, _onShow = _a.onShow, _onHide = _a.onHide, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "positionThreshold", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "mountOnEnter", "unmountOnExit", "disableSwapping", "disableHoverMode", "disableAutoSpacing", "tooltipId", "hoverDelay", "focusDelay", "touchTimeout", "onShow", "onHide"]);
+    var _m = useTooltip({
+        baseId: id,
+        style: style,
+        dense: dense,
+        spacing: spacing,
+        denseSpacing: denseSpacing,
+        vwMargin: vwMargin,
+        vhMargin: vhMargin,
         position: propPosition,
+        defaultPosition: defaultPosition,
+        disableSwapping: disableSwapping,
         disableHoverMode: disableHoverMode,
-        defaultPosition: defaultPosition,
-        positionThreshold: positionThreshold,
-        hoverDelay: hoverDelay,
-        focusDelay: focusDelay,
-        touchTimeout: touchTimeout,
+        disableAutoSpacing: disableAutoSpacing,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onClick: onClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onTouchStart: onTouchStart,
-        onTouchMove: onTouchMove,
         onContextMenu: onContextMenu,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onShow: onShow,
-        onHide: onHide,
-    }), hide = _r.hide, visible = _r.visible, position = _r.position, handlers = _r.handlers;
-    var labelledBy = useRef(visible);
-    var currentSpacing = useMemo(function () { return unitToNumber(dense ? denseSpacing : spacing); }, [spacing, denseSpacing, dense]);
-    var getOptions;
-    if (!disableAutoSpacing) {
-        getOptions = function (node) {
-            var spacing = unitToNumber(window.getComputedStyle(node).getPropertyValue("--rmd-tooltip-spacing"));
-            return { xMargin: spacing, yMargin: spacing };
-        };
-    }
-    var isHorizontal = position === "left" || position === "right";
-    var _s = useFixedPositioning({
-        anchor: {
-            x: isHorizontal ? position : "center",
-            y: isHorizontal ? "center" : position,
-        },
-        disableSwapping: typeof disableSwapping === "boolean" ? disableSwapping : !!propPosition,
-        fixedTo: function () { return document.getElementById(id); },
-        vhMargin: vhMargin,
-        vwMargin: vwMargin,
-        yMargin: currentSpacing,
-        xMargin: currentSpacing,
-        onResize: hide,
-        onScroll: hide,
-        getOptions: getOptions,
-    }), style = _s.style, onEnter = _s.onEnter, onEntering = _s.onEntering, onEntered = _s.onEntered, onExited = _s.onExited;
+        threshold: threshold,
+    }), elementProps = _m.elementProps, tooltipProps = _m.tooltipProps;
     if (!tooltipChildren) {
@@ -99,26 +80,13 @@ if (typeof children === "function") {
     }
-    var tooltipId = props.tooltipId;
-    if (!tooltipId) {
-        tooltipId = id + "-tooltip";
-    }
-    var tooltip = (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        React.createElement(Tooltip, __assign({ id: tooltipId }, props, { dense: dense, position: position, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, style: style, onEnter: function (node, appear) {
-                if (onEnter) {
-                    onEnter(node, appear);
-                }
-                labelledBy.current = true;
-            }, onEntering: onEntering, onEntered: onEntered, onExited: function (node) {
-                if (onExited) {
-                    onExited(node);
-                }
-                labelledBy.current = false;
-            }, visible: visible }), tooltipChildren)));
-    var config = __assign({ id: id, "aria-describedby": cn(labelledBy.current && tooltipId, describedBy) || undefined }, handlers);
+    var tooltip = (React.createElement(Tooltip, __assign({}, tooltipProps, props, { mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), tooltipChildren));
     if (typeof children === "function") {
-        return children(__assign(__assign({}, config), { tooltip: tooltip }));
+        return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }
     var child = Children.only(children);
+    // TODO: remove this mess since you should provide handlers to the
+    // `Tooltipped` component instead of the child element.
+    /* istanbul ignore next */
     var merged = MERGABLE_PROPS.reduce(function (result, propName) {
         var propHandler = child.props[propName];
-        var configHandler = config[propName];
+        var configHandler = elementProps[propName];
         if (!propHandler) {
@@ -139,3 +107,3 @@ result[propName] = configHandler;
         return result;
-    }, __assign({}, config));
+    }, __assign({}, elementProps));
     return (React.createElement(React.Fragment, null,
@@ -142,0 +110,0 @@ cloneElement(child, merged),

lib/constants.d.ts

@@ -7,1 +7,14 @@ import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 export declare const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_SPACING = "1.5rem";
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_MARGIN = 16;
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_POSITION = "below";
+/**
+ * @internal
+ * @remarks \@since 2.8.0
+ */
+export declare const TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";

lib/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_TOOLTIP_THRESHOLD = exports.DEFAULT_TOOLTIP_DELAY = exports.DEFAULT_TOOLTIP_TIMEOUT = exports.DEFAULT_TOOLTIP_CLASSNAMES = void 0;
+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;
 exports.DEFAULT_TOOLTIP_CLASSNAMES = {
@@ -19,2 +19,15 @@ appear: "rmd-tooltip--enter",
 exports.DEFAULT_TOOLTIP_THRESHOLD = 0.75;
+/** @remarks \@since 2.8.0 */
+exports.DEFAULT_TOOLTIP_SPACING = "1.5rem";
+/** @remarks \@since 2.8.0 */
+exports.DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
+/** @remarks \@since 2.8.0 */
+exports.DEFAULT_TOOLTIP_MARGIN = 16;
+/** @remarks \@since 2.8.0 */
+exports.DEFAULT_TOOLTIP_POSITION = "below";
+/**
+ * @internal
+ * @remarks \@since 2.8.0
+ */
+exports.TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";
 //# sourceMappingURL=constants.js.map

lib/index.d.ts

@@ -5,3 +5,3 @@ export * from "./Tooltip";
 export * from "./constants";
-export { useTooltipState } from "./useTooltipState";
-export { useTooltipHoverModeState } from "./useTooltipHoverMode";
+export * from "./useTooltip";
+export * from "./useTooltipPosition";

lib/index.js

@@ -13,3 +13,2 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTooltipHoverModeState = exports.useTooltipState = void 0;
 __exportStar(require("./Tooltip"), exports);
@@ -19,6 +18,4 @@ __exportStar(require("./Tooltipped"), exports);
 __exportStar(require("./constants"), exports);
-var useTooltipState_1 = require("./useTooltipState");
-Object.defineProperty(exports, "useTooltipState", { enumerable: true, get: function () { return useTooltipState_1.useTooltipState; } });
-var useTooltipHoverMode_1 = require("./useTooltipHoverMode");
-Object.defineProperty(exports, "useTooltipHoverModeState", { enumerable: true, get: function () { return useTooltipHoverMode_1.useTooltipHoverModeState; } });
+__exportStar(require("./useTooltip"), exports);
+__exportStar(require("./useTooltipPosition"), exports);
 //# sourceMappingURL=index.js.map

lib/Tooltip.d.ts

 import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { RenderConditionalPortalProps } from "@react-md/portal";
 import { OverridableTransitionProps, 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">;
 /**
  * The base props for the `Tooltip` component. This can be extended when
  * creating custom tooltip implementations.
+ *
+ * @remarks \@since 2.8.0 Supports the {@link RenderConditionalPortalProps}
  */
-export interface TooltipProps extends Pick<OverridableTransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountOnEnter" | "unmountOnExit">, HTMLAttributes<HTMLSpanElement> {
+export interface TooltipProps extends TooltipTransitionProps, HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps {
     /**
@@ -76,3 +81,25 @@ * An id for the tooltip. This is required for accessibility and finding an
  * `visible` prop.
+ *
+ * @example
+ * Simple Usage
+ * ```tsx
+ * import { Button } from "@react-md/button";
+ * import { useTooltip, Tooltip } from "@react-md/tooltip";
+ *
+ * function Example() {
+ *   const { tooltipProps, elementProps } = useTooltip({
+ *     baseId: 'my-element',
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <Button {...elementProps}>Button</Button>
+ *       <Tooltip {...tooltipProps}>
+ *         Tooltip Content
+ *       </Tooltip>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;

lib/Tooltip.js

@@ -51,2 +51,3 @@ "use strict";
 var CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
+var portal_1 = require("@react-md/portal");
 var utils_1 = require("@react-md/utils");
@@ -60,14 +61,37 @@ var constants_1 = require("./constants");
  * `visible` prop.
+ *
+ * @example
+ * Simple Usage
+ * ```tsx
+ * import { Button } from "@react-md/button";
+ * import { useTooltip, Tooltip } from "@react-md/tooltip";
+ *
+ * function Example() {
+ *   const { tooltipProps, elementProps } = useTooltip({
+ *     baseId: 'my-element',
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <Button {...elementProps}>Button</Button>
+ *       <Tooltip {...tooltipProps}>
+ *         Tooltip Content
+ *       </Tooltip>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 exports.Tooltip = react_1.forwardRef(function Tooltip(_a, ref) {
     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 ? "below" : _g, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, _h = _a.mountOnEnter, mountOnEnter = _h === void 0 ? true : _h, _j = _a.unmountOnExit, unmountOnExit = _j === void 0 ? true : _j, props = __rest(_a, ["className", "classNames", "visible", "timeout", "dense", "lineWrap", "position", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "mountOnEnter", "unmountOnExit"]);
-    return (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: 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.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: classnames_1.default(block((_b = {
+                        dense: dense,
+                        "line-wrap": lineWrap,
+                        "dense-line-wrap": dense && lineWrap
+                    },
+                    _b[position] = true,
+                    _b)), className) }), children))));
 });
@@ -74,0 +98,0 @@ /* istanbul ignore next */

lib/TooltipHoverModeConfig.d.ts

@@ -12,2 +12,5 @@ import { ReactElement, ReactNode } from "react";
  * tooltips will become visible immediately until 3 seconds have passed.
+ *
+ * @deprecated \@since 2.8.0 Use the {@link @react-md/utils#HoverModeProvider}
+ * instead.
  */
@@ -14,0 +17,0 @@ export declare function TooltipHoverModeConfig({ defaultDelay, delayTimeout, enabled, children, }: TooltipHoverModeConfigProps): ReactElement;

lib/TooltipHoverModeConfig.js

 "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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipHoverModeConfig = void 0;
-var react_1 = __importStar(require("react"));
+/* istanbul ignore file */
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("@react-md/utils");
 var constants_1 = require("./constants");
-var useTooltipHoverMode_1 = require("./useTooltipHoverMode");
 /**
@@ -30,16 +15,11 @@ * This component is used so that tooltips can gain the "hover mode"
  * tooltips will become visible immediately until 3 seconds have passed.
+ *
+ * @deprecated \@since 2.8.0 Use the {@link @react-md/utils#HoverModeProvider}
+ * instead.
  */
 function TooltipHoverModeConfig(_a) {
     var _b = _a.defaultDelay, defaultDelay = _b === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _b, _c = _a.delayTimeout, delayTimeout = _c === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _c, _d = _a.enabled, enabled = _d === void 0 ? true : _d, children = _a.children;
-    var _e = useTooltipHoverMode_1.useTooltipHoverModeState(defaultDelay, delayTimeout), delay = _e.delay, enable = _e.enable, startDisableTimer = _e.startDisableTimer;
-    var actions = react_1.useMemo(function () { return ({
-        enable: enable,
-        startDisableTimer: startDisableTimer,
-    }); }, [enable, startDisableTimer]);
-    return (react_1.default.createElement(useTooltipHoverMode_1.HoverModeDelay.Provider, { value: delay },
-        react_1.default.createElement(useTooltipHoverMode_1.HoverModeActions.Provider, { value: actions },
-            react_1.default.createElement(useTooltipHoverMode_1.HoverModeEnabled.Provider, { value: enabled }, children))));
+    return (react_1.default.createElement(utils_1.HoverModeProvider, { disabled: !enabled, defaultVisibleInTime: defaultDelay, deactivateTime: delayTimeout }, children));
 }
 exports.TooltipHoverModeConfig = TooltipHoverModeConfig;
-/* istanbul ignore next */
 if (process.env.NODE_ENV !== "production") {
@@ -46,0 +26,0 @@ try {

lib/Tooltipped.d.ts

 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
+import { UserInteractionMode } from "@react-md/utils";
 import { TooltipProps } from "./Tooltip";
-import { MergableHandlers } from "./useHandlers";
-import { TooltipStateOptions } from "./useTooltipState";
-interface TooltippedProvidedProps extends MergableHandlers {
+import { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
+interface TooltippedProvidedProps extends TooltippedElementEventHandlers<HTMLElement> {
     id: string;
@@ -14,3 +14,3 @@ "aria-describedby"?: string;
 declare type ChildElement = ReactElement<ChildProps>;
-export interface TooltippedProps extends RenderConditionalPortalProps, Omit<TooltipStateOptions, "defaultPosition">, Partial<Pick<TooltipStateOptions, "defaultPosition">>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
+export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
     /**
@@ -29,7 +29,2 @@ * The id for the element that has a tooltip. This is always required since it
     /**
-     * An optional id for the tooltip. When this is omitted, it will be set as
-     * `${id}-tooltip`.
-     */
-    tooltipId?: string;
-    /**
      * An optional additional `aria-describedby` id or ids to merge with the
@@ -49,46 +44,2 @@ * tooltip id. This is really used for things like notifications or when
     /**
-     * The amount of spacing to use for a non-dense tooltip. This is the distance
-     * between the container element and the tooltip.
-     */
-    spacing?: number | string;
-    /**
-     * The amount of spacing to use for a dense tooltip. This is the distance
-     * between the container element and the tooltip.
-     */
-    denseSpacing?: number | string;
-    /**
-     * Since `react-md` provides mixins to automatically apply a dense spec
-     * through mixins via mexia queries, the dense spec might be applied in css
-     * instead of in JS. This component will actually check the current spacing
-     * amount that has been applied when the tooltip becomes visible.
-     *
-     * If this behavior is not desired, you can enable this prop and it will only
-     * use the provided `spacing` or `denseSpacing` props based on the `dense`
-     * prop.
-     *
-     * Note: This will be defaulted to `true` when the
-     * `process.env.NODE_ENV === 'test'` since test environments normally don't
-     * have a default `window.getComgetComputedStyle` value that is not `NaN`
-     * which will display errors in your tests.
-     */
-    disableAutoSpacing?: boolean;
-    /**
-     * Boolean if the auto-swapping behavior should be disabled. When this value
-     * is `undefined`, it'll be treated as `true` when the `position` prop is
-     * defined, otherwise `false`.
-     */
-    disableSwapping?: boolean;
-    /**
-     * This is the viewwidth margin to use in the positioning calculation. This is
-     * just used so that the tooltip can be placed with some spacing between the
-     * left and right edges of the viewport if desired.
-     */
-    vwMargin?: number;
-    /**
-     * This is the viewheight margin to use in the positioning calculation. This
-     * is just used so that the tooltip can be placed with some spacing between
-     * the top and abottom edges of the viewport if desired.
-     */
-    vhMargin?: number;
-    /**
      * The children for this component should either be a function or a single
@@ -111,2 +62,16 @@ * element. When the children is a single React element, this component will
     children: ChildElement | ChildrenRenderer;
+    /** @deprecated \@since 2.8.0 Use `threshold` instead.  */
+    positionThreshold?: number;
+    /** @deprecated \@since 2.8.0 */
+    tooltipId?: string;
+    /** @deprecated \@since 2.8.0 */
+    hoverDelay?: number;
+    /** @deprecated \@since 2.8.0 */
+    focusDelay?: number;
+    /** @deprecated \@since 2.8.0 */
+    touchTimeout?: number;
+    /** @deprecated \@since 2.8.0 */
+    onShow?(mode: UserInteractionMode): void;
+    /** @deprecated \@since 2.8.0 */
+    onHide?(): void;
 }
@@ -117,4 +82,9 @@ /**
  * the child with `React.cloneChild`.
+ *
+ * Note: This component is _kind of_ deprecated in favor of using the
+ * `useTooltip` hook and `Tooltip` component instead.
+ *
+ * @see {@link Tooltip} for an example
  */
-export declare function Tooltipped({ id, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, hoverDelay, focusDelay, touchTimeout, spacing, denseSpacing, position: propPosition, positionThreshold, portal, portalInto, portalIntoId, onMouseEnter, onMouseLeave, onTouchStart, onTouchMove, onContextMenu, onFocus, onKeyDown, onShow, onHide, disableHoverMode, "aria-describedby": describedBy, defaultPosition, disableSwapping, mountOnEnter, unmountOnExit, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
+export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, positionThreshold, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, mountOnEnter, unmountOnExit, disableSwapping, disableHoverMode, disableAutoSpacing, tooltipId: _tooltipId, hoverDelay: _hoverDelay, focusDelay: _focusDelay, touchTimeout: _touchTimeout, onShow: _onShow, onHide: _onHide, ...props }: TooltippedProps): ReactElement;
 export declare namespace Tooltipped {
@@ -121,0 +91,0 @@ var propTypes: {

lib/Tooltipped.js

@@ -43,20 +43,13 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltipped = void 0;
 var react_1 = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var portal_1 = require("@react-md/portal");
-var transition_1 = require("@react-md/transition");
-var utils_1 = require("@react-md/utils");
 var constants_1 = require("./constants");
 var Tooltip_1 = require("./Tooltip");
-var useTooltipState_1 = require("./useTooltipState");
+var useTooltip_1 = require("./useTooltip");
 var MERGABLE_PROPS = [
+    "onClick",
     "onMouseEnter",
     "onMouseLeave",
     "onTouchStart",
-    "onTouchMove",
     "onFocus",
@@ -70,48 +63,33 @@ "onKeyDown",
  * the child with `React.cloneChild`.
+ *
+ * Note: This component is _kind of_ deprecated in favor of using the
+ * `useTooltip` hook and `Tooltip` component instead.
+ *
+ * @see {@link Tooltip} for an example
  */
 function Tooltipped(_a) {
-    var id = _a.id, children = _a.children, tooltipChildren = _a.tooltip, _b = _a.dense, dense = _b === void 0 ? false : _b, _c = _a.vhMargin, vhMargin = _c === void 0 ? 16 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.hoverDelay, hoverDelay = _e === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _e, _f = _a.focusDelay, focusDelay = _f === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _f, _g = _a.touchTimeout, touchTimeout = _g === void 0 ? constants_1.DEFAULT_TOOLTIP_DELAY : _g, _h = _a.spacing, spacing = _h === void 0 ? "1.5rem" : _h, _j = _a.denseSpacing, denseSpacing = _j === void 0 ? "0.875rem" : _j, propPosition = _a.position, _k = _a.positionThreshold, positionThreshold = _k === void 0 ? constants_1.DEFAULT_TOOLTIP_THRESHOLD : _k, _l = _a.portal, portal = _l === void 0 ? true : _l, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove, onContextMenu = _a.onContextMenu, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onShow = _a.onShow, onHide = _a.onHide, disableHoverMode = _a.disableHoverMode, describedBy = _a["aria-describedby"], _m = _a.defaultPosition, defaultPosition = _m === void 0 ? "below" : _m, disableSwapping = _a.disableSwapping, _o = _a.mountOnEnter, mountOnEnter = _o === void 0 ? true : _o, _p = _a.unmountOnExit, unmountOnExit = _p === void 0 ? true : _p, _q = _a.disableAutoSpacing, disableAutoSpacing = _q === void 0 ? process.env.NODE_ENV === "test" : _q, props = __rest(_a, ["id", "children", "tooltip", "dense", "vhMargin", "vwMargin", "hoverDelay", "focusDelay", "touchTimeout", "spacing", "denseSpacing", "position", "positionThreshold", "portal", "portalInto", "portalIntoId", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchMove", "onContextMenu", "onFocus", "onKeyDown", "onShow", "onHide", "disableHoverMode", "aria-describedby", "defaultPosition", "disableSwapping", "mountOnEnter", "unmountOnExit", "disableAutoSpacing"]);
-    var _r = useTooltipState_1.useTooltipState({
+    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, positionThreshold = _a.positionThreshold, _g = _a.threshold, threshold = _g === void 0 ? positionThreshold !== null && positionThreshold !== void 0 ? positionThreshold : 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, _tooltipId = _a.tooltipId, _hoverDelay = _a.hoverDelay, _focusDelay = _a.focusDelay, _touchTimeout = _a.touchTimeout, _onShow = _a.onShow, _onHide = _a.onHide, props = __rest(_a, ["id", "style", "children", "tooltip", "dense", "vhMargin", "vwMargin", "spacing", "denseSpacing", "position", "positionThreshold", "threshold", "onClick", "onMouseEnter", "onMouseLeave", "onTouchStart", "onContextMenu", "onBlur", "onFocus", "onKeyDown", "aria-describedby", "defaultPosition", "mountOnEnter", "unmountOnExit", "disableSwapping", "disableHoverMode", "disableAutoSpacing", "tooltipId", "hoverDelay", "focusDelay", "touchTimeout", "onShow", "onHide"]);
+    var _m = useTooltip_1.useTooltip({
+        baseId: id,
+        style: style,
+        dense: dense,
+        spacing: spacing,
+        denseSpacing: denseSpacing,
+        vwMargin: vwMargin,
+        vhMargin: vhMargin,
         position: propPosition,
+        defaultPosition: defaultPosition,
+        disableSwapping: disableSwapping,
         disableHoverMode: disableHoverMode,
-        defaultPosition: defaultPosition,
-        positionThreshold: positionThreshold,
-        hoverDelay: hoverDelay,
-        focusDelay: focusDelay,
-        touchTimeout: touchTimeout,
+        disableAutoSpacing: disableAutoSpacing,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onClick: onClick,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
         onTouchStart: onTouchStart,
-        onTouchMove: onTouchMove,
         onContextMenu: onContextMenu,
-        onFocus: onFocus,
-        onKeyDown: onKeyDown,
-        onShow: onShow,
-        onHide: onHide,
-    }), hide = _r.hide, visible = _r.visible, position = _r.position, handlers = _r.handlers;
-    var labelledBy = react_1.useRef(visible);
-    var currentSpacing = react_1.useMemo(function () { return utils_1.unitToNumber(dense ? denseSpacing : spacing); }, [spacing, denseSpacing, dense]);
-    var getOptions;
-    if (!disableAutoSpacing) {
-        getOptions = function (node) {
-            var spacing = utils_1.unitToNumber(window.getComputedStyle(node).getPropertyValue("--rmd-tooltip-spacing"));
-            return { xMargin: spacing, yMargin: spacing };
-        };
-    }
-    var isHorizontal = position === "left" || position === "right";
-    var _s = transition_1.useFixedPositioning({
-        anchor: {
-            x: isHorizontal ? position : "center",
-            y: isHorizontal ? "center" : position,
-        },
-        disableSwapping: typeof disableSwapping === "boolean" ? disableSwapping : !!propPosition,
-        fixedTo: function () { return document.getElementById(id); },
-        vhMargin: vhMargin,
-        vwMargin: vwMargin,
-        yMargin: currentSpacing,
-        xMargin: currentSpacing,
-        onResize: hide,
-        onScroll: hide,
-        getOptions: getOptions,
-    }), style = _s.style, onEnter = _s.onEnter, onEntering = _s.onEntering, onEntered = _s.onEntered, onExited = _s.onExited;
+        threshold: threshold,
+    }), elementProps = _m.elementProps, tooltipProps = _m.tooltipProps;
     if (!tooltipChildren) {
@@ -124,26 +102,13 @@ if (typeof children === "function") {
     }
-    var tooltipId = props.tooltipId;
-    if (!tooltipId) {
-        tooltipId = id + "-tooltip";
-    }
-    var tooltip = (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        react_1.default.createElement(Tooltip_1.Tooltip, __assign({ id: tooltipId }, props, { dense: dense, position: position, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, style: style, onEnter: function (node, appear) {
-                if (onEnter) {
-                    onEnter(node, appear);
-                }
-                labelledBy.current = true;
-            }, onEntering: onEntering, onEntered: onEntered, onExited: function (node) {
-                if (onExited) {
-                    onExited(node);
-                }
-                labelledBy.current = false;
-            }, visible: visible }), tooltipChildren)));
-    var config = __assign({ id: id, "aria-describedby": classnames_1.default(labelledBy.current && tooltipId, describedBy) || undefined }, handlers);
+    var tooltip = (react_1.default.createElement(Tooltip_1.Tooltip, __assign({}, tooltipProps, props, { mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }), tooltipChildren));
     if (typeof children === "function") {
-        return children(__assign(__assign({}, config), { tooltip: tooltip }));
+        return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }
     var child = react_1.Children.only(children);
+    // TODO: remove this mess since you should provide handlers to the
+    // `Tooltipped` component instead of the child element.
+    /* istanbul ignore next */
     var merged = MERGABLE_PROPS.reduce(function (result, propName) {
         var propHandler = child.props[propName];
-        var configHandler = config[propName];
+        var configHandler = elementProps[propName];
         if (!propHandler) {
@@ -164,3 +129,3 @@ result[propName] = configHandler;
         return result;
-    }, __assign({}, config));
+    }, __assign({}, elementProps));
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -167,0 +132,0 @@ react_1.cloneElement(child, merged),

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
@@ -41,12 +41,12 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/portal": "^2.7.0",
-    "@react-md/theme": "^2.7.1",
-    "@react-md/transition": "^2.7.1",
-    "@react-md/typography": "^2.7.1",
-    "@react-md/utils": "^2.7.1",
-    "classnames": "^2.2.6",
+    "@react-md/portal": "^2.8.0",
+    "@react-md/theme": "^2.8.0",
+    "@react-md/transition": "^2.8.0",
+    "@react-md/typography": "^2.8.0",
+    "@react-md/utils": "^2.8.0",
+    "classnames": "^2.3.1",
     "react-transition-group": "^4.4.1"
   },
   "devDependencies": {
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-dom": "^17.0.1"
@@ -63,3 +63,3 @@ },
   },
-  "gitHead": "4fb8828b048fd2472096d5f55033cc4a7ba24e1a"
+  "gitHead": "20e013ae17ebccaaac74e246b9cde88df11d5c84"
 }

src/constants.ts

@@ -21,1 +21,16 @@ import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 export const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
+
+/** @remarks \@since 2.8.0 */
+export const DEFAULT_TOOLTIP_SPACING = "1.5rem";
+/** @remarks \@since 2.8.0 */
+export const DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
+/** @remarks \@since 2.8.0 */
+export const DEFAULT_TOOLTIP_MARGIN = 16;
+/** @remarks \@since 2.8.0 */
+export const DEFAULT_TOOLTIP_POSITION = "below";
+
+/**
+ * @internal
+ * @remarks \@since 2.8.0
+ */
+export const TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";

src/index.ts

@@ -6,3 +6,3 @@ export * from "./Tooltip";
 export * from "./constants";
-export { useTooltipState } from "./useTooltipState";
-export { useTooltipHoverModeState } from "./useTooltipHoverMode";
+export * from "./useTooltip";
+export * from "./useTooltipPosition";

types/constants.d.ts

@@ -7,1 +7,14 @@ import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 export declare const DEFAULT_TOOLTIP_THRESHOLD = 0.75;
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_SPACING = "1.5rem";
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_DENSE_SPACING = "0.875rem";
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_MARGIN = 16;
+/** @remarks \@since 2.8.0 */
+export declare const DEFAULT_TOOLTIP_POSITION = "below";
+/**
+ * @internal
+ * @remarks \@since 2.8.0
+ */
+export declare const TOOLTIP_SPACING_VAR = "--rmd-tooltip-spacing";

types/index.d.ts

@@ -5,3 +5,3 @@ export * from "./Tooltip";
 export * from "./constants";
-export { useTooltipState } from "./useTooltipState";
-export { useTooltipHoverModeState } from "./useTooltipHoverMode";
+export * from "./useTooltip";
+export * from "./useTooltipPosition";

types/Tooltip.d.ts

 import React, { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+import { RenderConditionalPortalProps } from "@react-md/portal";
 import { OverridableTransitionProps, 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">;
 /**
  * The base props for the `Tooltip` component. This can be extended when
  * creating custom tooltip implementations.
+ *
+ * @remarks \@since 2.8.0 Supports the {@link RenderConditionalPortalProps}
  */
-export interface TooltipProps extends Pick<OverridableTransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "mountOnEnter" | "unmountOnExit">, HTMLAttributes<HTMLSpanElement> {
+export interface TooltipProps extends TooltipTransitionProps, HTMLAttributes<HTMLSpanElement>, RenderConditionalPortalProps {
     /**
@@ -76,3 +81,25 @@ * An id for the tooltip. This is required for accessibility and finding an
  * `visible` prop.
+ *
+ * @example
+ * Simple Usage
+ * ```tsx
+ * import { Button } from "@react-md/button";
+ * import { useTooltip, Tooltip } from "@react-md/tooltip";
+ *
+ * function Example() {
+ *   const { tooltipProps, elementProps } = useTooltip({
+ *     baseId: 'my-element',
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <Button {...elementProps}>Button</Button>
+ *       <Tooltip {...tooltipProps}>
+ *         Tooltip Content
+ *       </Tooltip>
+ *     </>
+ *   );
+ * }
+ * ```
  */
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLSpanElement>>;

types/TooltipHoverModeConfig.d.ts

@@ -12,2 +12,5 @@ import { ReactElement, ReactNode } from "react";
  * tooltips will become visible immediately until 3 seconds have passed.
+ *
+ * @deprecated \@since 2.8.0 Use the {@link @react-md/utils#HoverModeProvider}
+ * instead.
  */
@@ -14,0 +17,0 @@ export declare function TooltipHoverModeConfig({ defaultDelay, delayTimeout, enabled, children, }: TooltipHoverModeConfigProps): ReactElement;

types/Tooltipped.d.ts

 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
+import { UserInteractionMode } from "@react-md/utils";
 import { TooltipProps } from "./Tooltip";
-import { MergableHandlers } from "./useHandlers";
-import { TooltipStateOptions } from "./useTooltipState";
-interface TooltippedProvidedProps extends MergableHandlers {
+import { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
+interface TooltippedProvidedProps extends TooltippedElementEventHandlers<HTMLElement> {
     id: string;
@@ -14,3 +14,3 @@ "aria-describedby"?: string;
 declare type ChildElement = ReactElement<ChildProps>;
-export interface TooltippedProps extends RenderConditionalPortalProps, Omit<TooltipStateOptions, "defaultPosition">, Partial<Pick<TooltipStateOptions, "defaultPosition">>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
+export interface TooltippedProps extends RenderConditionalPortalProps, BaseTooltipHookOptions<HTMLElement>, Pick<TooltipProps, "dense" | "lineWrap" | "mountOnEnter" | "unmountOnExit"> {
     /**
@@ -29,7 +29,2 @@ * The id for the element that has a tooltip. This is always required since it
     /**
-     * An optional id for the tooltip. When this is omitted, it will be set as
-     * `${id}-tooltip`.
-     */
-    tooltipId?: string;
-    /**
      * An optional additional `aria-describedby` id or ids to merge with the
@@ -49,46 +44,2 @@ * tooltip id. This is really used for things like notifications or when
     /**
-     * The amount of spacing to use for a non-dense tooltip. This is the distance
-     * between the container element and the tooltip.
-     */
-    spacing?: number | string;
-    /**
-     * The amount of spacing to use for a dense tooltip. This is the distance
-     * between the container element and the tooltip.
-     */
-    denseSpacing?: number | string;
-    /**
-     * Since `react-md` provides mixins to automatically apply a dense spec
-     * through mixins via mexia queries, the dense spec might be applied in css
-     * instead of in JS. This component will actually check the current spacing
-     * amount that has been applied when the tooltip becomes visible.
-     *
-     * If this behavior is not desired, you can enable this prop and it will only
-     * use the provided `spacing` or `denseSpacing` props based on the `dense`
-     * prop.
-     *
-     * Note: This will be defaulted to `true` when the
-     * `process.env.NODE_ENV === 'test'` since test environments normally don't
-     * have a default `window.getComgetComputedStyle` value that is not `NaN`
-     * which will display errors in your tests.
-     */
-    disableAutoSpacing?: boolean;
-    /**
-     * Boolean if the auto-swapping behavior should be disabled. When this value
-     * is `undefined`, it'll be treated as `true` when the `position` prop is
-     * defined, otherwise `false`.
-     */
-    disableSwapping?: boolean;
-    /**
-     * This is the viewwidth margin to use in the positioning calculation. This is
-     * just used so that the tooltip can be placed with some spacing between the
-     * left and right edges of the viewport if desired.
-     */
-    vwMargin?: number;
-    /**
-     * This is the viewheight margin to use in the positioning calculation. This
-     * is just used so that the tooltip can be placed with some spacing between
-     * the top and abottom edges of the viewport if desired.
-     */
-    vhMargin?: number;
-    /**
      * The children for this component should either be a function or a single
@@ -111,2 +62,16 @@ * element. When the children is a single React element, this component will
     children: ChildElement | ChildrenRenderer;
+    /** @deprecated \@since 2.8.0 Use `threshold` instead.  */
+    positionThreshold?: number;
+    /** @deprecated \@since 2.8.0 */
+    tooltipId?: string;
+    /** @deprecated \@since 2.8.0 */
+    hoverDelay?: number;
+    /** @deprecated \@since 2.8.0 */
+    focusDelay?: number;
+    /** @deprecated \@since 2.8.0 */
+    touchTimeout?: number;
+    /** @deprecated \@since 2.8.0 */
+    onShow?(mode: UserInteractionMode): void;
+    /** @deprecated \@since 2.8.0 */
+    onHide?(): void;
 }
@@ -117,4 +82,9 @@ /**
  * the child with `React.cloneChild`.
+ *
+ * Note: This component is _kind of_ deprecated in favor of using the
+ * `useTooltip` hook and `Tooltip` component instead.
+ *
+ * @see {@link Tooltip} for an example
  */
-export declare function Tooltipped({ id, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, hoverDelay, focusDelay, touchTimeout, spacing, denseSpacing, position: propPosition, positionThreshold, portal, portalInto, portalIntoId, onMouseEnter, onMouseLeave, onTouchStart, onTouchMove, onContextMenu, onFocus, onKeyDown, onShow, onHide, disableHoverMode, "aria-describedby": describedBy, defaultPosition, disableSwapping, mountOnEnter, unmountOnExit, disableAutoSpacing, ...props }: TooltippedProps): ReactElement;
+export declare function Tooltipped({ id, style, children, tooltip: tooltipChildren, dense, vhMargin, vwMargin, spacing, denseSpacing, position: propPosition, positionThreshold, threshold, onClick, onMouseEnter, onMouseLeave, onTouchStart, onContextMenu, onBlur, onFocus, onKeyDown, "aria-describedby": describedBy, defaultPosition, mountOnEnter, unmountOnExit, disableSwapping, disableHoverMode, disableAutoSpacing, tooltipId: _tooltipId, hoverDelay: _hoverDelay, focusDelay: _focusDelay, touchTimeout: _touchTimeout, onShow: _onShow, onHide: _onHide, ...props }: TooltippedProps): ReactElement;
 export declare namespace Tooltipped {
@@ -121,0 +91,0 @@ var propTypes: {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

238846

decreased by-16.69%

Number of package files

70

decreased by-25.53%

Lines of code

4010

decreased by-14.81%

Number of low supply chain risk alerts

10

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@react-md/portal@^2.8.0

• Updated@react-md/theme@^2.8.0

• Updated@react-md/transition@^2.8.0

• Updated@react-md/typography@^2.8.0

• Updated@react-md/utils@^2.8.0

• Updatedclassnames@^2.3.1