@react-md/tooltip - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

CHANGELOG.md

@@ -6,2 +6,29 @@ # Change Log
 
+# [5.1.0](https://github.com/mlaursen/react-md/compare/v5.0.0...v5.1.0) (2022-03-18)
+
+
+### Bug Fixes
+
+* **@react-md/tooltip:** Tooltips stay visible on mobile Firefox ([7039fef](https://github.com/mlaursen/react-md/commit/7039fef0b7003a5288ee855c7710b7a53d4a66d9))
+
+
+### Features
+
+* **@react-md/tooltip:** `useTooltip` supports new disabled option ([a934ae9](https://github.com/mlaursen/react-md/commit/a934ae931b6e08ab3a32cb688eda728cf98ce7c2))
+
+
+### Documentation
+
+* **@react-md/tooltip:** Remove documentation around `Tooltipped` component ([1a59190](https://github.com/mlaursen/react-md/commit/1a59190e7b76494b5375809d563f03c4ee0b8b75)), closes [#1367](https://github.com/mlaursen/react-md/issues/1367)
+
+
+### Other Internal Changes
+
+* run lint-scripts --fix for consistent-type-imports ([42d839d](https://github.com/mlaursen/react-md/commit/42d839d359922e0a8ee3775a75162b9755a2c2b6))
+
+
+
+
+
+
 # [5.0.0](https://github.com/mlaursen/react-md/compare/v4.0.3...v5.0.0) (2022-01-31)
@@ -8,0 +35,0 @@

es/Tooltip.js

@@ -26,4 +26,4 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { ConditionalPortal, } from "@react-md/portal";
-import { useCSSTransition, } from "@react-md/transition";
+import { ConditionalPortal } from "@react-md/portal";
+import { useCSSTransition } from "@react-md/transition";
 import { bem } from "@react-md/utils";
@@ -83,4 +83,4 @@ import { DEFAULT_TOOLTIP_CLASSNAMES, DEFAULT_TOOLTIP_POSITION, DEFAULT_TOOLTIP_TIMEOUT, } from "./constants";
     }), 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));
+    return (_jsx(ConditionalPortal, __assign({ portal: portal, portalInto: portalInto, portalIntoId: portalIntoId }, { children: rendered && (_jsx("span", __assign({}, props, elementProps, { role: "tooltip" }, { children: children }))) })));
 });
 //# sourceMappingURL=Tooltip.js.map

es/Tooltipped.js

@@ -24,6 +24,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, } from "react";
+import { 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 { useTooltip, } from "./useTooltip";
+import { useTooltip } from "./useTooltip";
 var MERGABLE_PROPS = [
@@ -80,3 +80,3 @@ "onClick",
     }
-    var tooltip = (_jsx(Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren }), void 0));
+    var tooltip = (_jsx(Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren })));
     if (typeof children === "function") {
@@ -108,4 +108,4 @@ return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }, __assign({}, elementProps));
-    return (_jsxs(_Fragment, { children: [cloneElement(child, merged), tooltip] }, void 0));
+    return (_jsxs(_Fragment, { children: [cloneElement(child, merged), tooltip] }));
 }
 //# sourceMappingURL=Tooltipped.js.map

es/useTooltip.js

@@ -39,8 +39,8 @@ var __assign = (this && this.__assign) || function () {
 };
-import { useCallback, useEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 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";
 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";
-import { useTooltipPosition, } from "./useTooltipPosition";
+import { useTooltipPosition } from "./useTooltipPosition";
 /** @internal */
@@ -92,17 +92,17 @@ function getAnchor(position) {
 export function useTooltip(_a) {
-    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 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, _l = _a.disabled, disabled = _l === void 0 ? false : _l, _m = _a.disableSwapping, disableSwapping = _m === void 0 ? false : _m, propDisableHoverMode = _a.disableHoverMode, _o = _a.disableAutoSpacing, disableAutoSpacing = _o === void 0 ? process.env.NODE_ENV === "test" : _o;
     var containerRef = useRef(null);
-    var _m = __read(useTooltipPosition({
+    var _p = __read(useTooltipPosition({
         position: determinedPosition,
         defaultPosition: defaultPosition,
         threshold: threshold,
-    }), 2), position = _m[0], updatePosition = _m[1];
+    }), 2), position = _p[0], updatePosition = _p[1];
     var mode = useUserInteractionMode();
-    var _o = __read(useState(null), 2), initiatedBy = _o[0], setInitiatedBy = _o[1];
+    var _q = __read(useState(null), 2), initiatedBy = _q[0], setInitiatedBy = _q[1];
     var windowFocusEvent = useRef(false);
     var timeout = useRef(undefined);
-    var _p = useHoverMode({
-        disabled: disabled,
+    var _r = useHoverMode({
+        disabled: propDisableHoverMode || disabled,
         exitVisibilityDelay: 0,
-    }), visible = _p.visible, setVisible = _p.setVisible, handlers = _p.handlers, _hoverHandlers = _p.hoverHandlers, disableHoverMode = _p.disableHoverMode, clearHoverTimeout = _p.clearHoverTimeout, others = __rest(_p, ["visible", "setVisible", "handlers", "hoverHandlers", "disableHoverMode", "clearHoverTimeout"]);
+    }), visible = _r.visible, setVisible = _r.setVisible, handlers = _r.handlers, _hoverHandlers = _r.hoverHandlers, disableHoverMode = _r.disableHoverMode, clearHoverTimeout = _r.clearHoverTimeout, others = __rest(_r, ["visible", "setVisible", "handlers", "hoverHandlers", "disableHoverMode", "clearHoverTimeout"]);
     var hide = useCallback(function () {
@@ -115,3 +115,3 @@ window.clearTimeout(timeout.current);
         propOnBlur === null || propOnBlur === void 0 ? void 0 : propOnBlur(event);
-        if (initiatedBy !== "keyboard") {
+        if (disabled || initiatedBy !== "keyboard") {
             return;
@@ -123,2 +123,5 @@ }
         propOnFocus === null || propOnFocus === void 0 ? void 0 : propOnFocus(event);
+        if (disabled) {
+            return;
+        }
         // if the element gained focus immediately after the browser window gains
@@ -143,3 +146,3 @@ // focus, do not start timer and ignore this event instead
         propOnKeyDown === null || propOnKeyDown === void 0 ? void 0 : propOnKeyDown(event);
-        if (initiatedBy !== "keyboard" || event.key !== "Escape") {
+        if (disabled || initiatedBy !== "keyboard" || event.key !== "Escape") {
             return;
@@ -151,3 +154,3 @@ }
         propOnTouchStart === null || propOnTouchStart === void 0 ? void 0 : propOnTouchStart(event);
-        if (event.isPropagationStopped() || mode !== "touch") {
+        if (event.isPropagationStopped() || disabled || mode !== "touch") {
             return;
@@ -166,3 +169,3 @@ }
         propOnContextMenu === null || propOnContextMenu === void 0 ? void 0 : propOnContextMenu(event);
-        if (event.isPropagationStopped() || mode !== "touch") {
+        if (event.isPropagationStopped() || disabled || mode !== "touch") {
             return;
@@ -182,2 +185,5 @@ }
     useEffect(function () {
+        if (disabled) {
+            return;
+        }
         if (mode !== "keyboard") {
@@ -198,3 +204,3 @@ windowFocusEvent.current = false;
         };
-    }, [hide, mode]);
+    }, [disabled, hide, mode]);
     useEffect(function () {
@@ -204,6 +210,6 @@ if (initiatedBy !== "touch") {
         }
-        window.addEventListener("touchmove", hide, true);
+        window.addEventListener("scroll", hide, true);
         window.addEventListener("touchend", hide, true);
         return function () {
-            window.removeEventListener("touchmove", hide, true);
+            window.removeEventListener("scroll", hide, true);
             window.removeEventListener("touchend", hide, true);
@@ -216,3 +222,3 @@ };
     var nodeRef = useRef(null);
-    var _q = useFixedPositioning({
+    var _s = useFixedPositioning({
         style: propStyle,
@@ -246,3 +252,3 @@ nodeRef: nodeRef,
         onExited: onExited,
-    }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
+    }), ref = _s.ref, style = _s.style, transitionOptions = _s.callbacks;
     var tooltipHandlers = {
@@ -256,3 +262,3 @@ onFocus: onFocus,
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            if (event.isPropagationStopped()) {
+            if (event.isPropagationStopped() || disabled) {
                 return;
@@ -267,2 +273,5 @@ }
             onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+            if (disabled) {
+                return;
+            }
             if (initiatedBy !== null) {
@@ -279,2 +288,5 @@ event.stopPropagation();
             onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+            if (disabled) {
+                return;
+            }
             if (initiatedBy !== "mouse") {
@@ -281,0 +293,0 @@ event.stopPropagation();

lib/index.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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -6,0 +10,0 @@ if (k2 === undefined) k2 = k;

lib/Tooltip.d.ts

@@ -1,5 +0,5 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
-import { SimplePosition } from "@react-md/utils";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
+import type { SimplePosition } from "@react-md/utils";
 /**
@@ -6,0 +6,0 @@ * The base props for the `Tooltip` component. This can be extended when

lib/Tooltip.js

@@ -88,4 +88,4 @@ "use strict";
     }), 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));
+    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 }))) })));
 });
 //# sourceMappingURL=Tooltip.js.map

lib/Tooltipped.d.ts

@@ -1,5 +0,5 @@
-import { CSSProperties, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type { RenderConditionalPortalProps } from "@react-md/portal";
-import { TooltipProps } from "./Tooltip";
-import { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
+import type { TooltipProps } from "./Tooltip";
+import type { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
 interface TooltippedProvidedProps extends TooltippedElementEventHandlers<HTMLElement> {
@@ -6,0 +6,0 @@ id: string;

lib/Tooltipped.js

@@ -82,3 +82,3 @@ "use strict";
     }
-    var tooltip = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren }), void 0));
+    var tooltip = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, __assign({}, tooltipProps, props, { temporary: temporary }, { children: tooltipChildren })));
     if (typeof children === "function") {
@@ -110,5 +110,5 @@ return children(__assign(__assign({}, elementProps), { tooltip: tooltip }));
     }, __assign({}, elementProps));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(child, merged), tooltip] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(child, merged), tooltip] }));
 }
 exports.Tooltipped = Tooltipped;
 //# sourceMappingURL=Tooltipped.js.map

lib/useTooltip.d.ts

@@ -1,6 +0,6 @@
-import { CSSProperties, HTMLAttributes, Ref } from "react";
-import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
-import { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
+import type { CSSProperties, HTMLAttributes, Ref } from "react";
+import type { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
+import type { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
 import type { TooltipProps } from "./Tooltip";
-import { TooltipPositionHookOptions } from "./useTooltipPosition";
+import type { TooltipPositionHookOptions } from "./useTooltipPosition";
 /**
@@ -116,2 +116,61 @@ * @internal
     disableHoverMode?: boolean;
+    /**
+     * Boolean if the event handlers should no longer attempt to show a tooltip. This
+     * should be set to `true` when your component might not have a tooltip associated
+     * with it.
+     *
+     * @example
+     * Real World Example
+     * ```tsx
+     * import type { ReactElement, ReactNode } from "react";
+     * import { Button, ButtonProps } from "@react-md/button";
+     * import { Tooltip, useTooltip } from "@react-md/tooltip":
+     *
+     * export interface TooltippedButtonProps extends ButtonProps {
+     *   id: string;
+     *   tooltip?: ReactNode;
+     * }
+     *
+     * export function TooltippedButton({
+     *   id,
+     *   tooltip,
+     *   children,
+     *   onClick,
+     *   onBlur,
+     *   onFocus,
+     *   onKeyDown,
+     *   onMouseEnter,
+     *   onMouseLeave,
+     *   onTouchStart,
+     *   onContextMenu,
+     *   ...props
+     * }: TooltippedButtonProps): ReactElement {
+     *   const { elementProps, tooltipProps } = useTooltip({
+     *     disabled: !tooltip,
+     *     baseId: id,
+     *     onClick,
+     *     onBlur,
+     *     onFocus,
+     *     onKeyDown,
+     *     onMouseEnter,
+     *     onMouseLeave,
+     *     onTouchStart,
+     *     onContextMenu,
+     *   });
+     *
+     *   return (
+     *     <>
+     *       <Button {...props} {...elementProps}>
+     *         {children}
+     *       </Button>
+     *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+     *     </>
+     *   );
+     * }
+     * ```
+     *
+     * @defaultValue `false`
+     * @remarks \@since 5.1.0
+     */
+    disabled?: boolean;
 }
@@ -193,2 +252,2 @@ /** @remarks \@since 2.8.0 */
  */
-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>;
+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, disabled, disableSwapping, disableHoverMode: propDisableHoverMode, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;

lib/useTooltip.js

@@ -97,17 +97,17 @@ "use strict";
 function useTooltip(_a) {
-    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 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, _l = _a.disabled, disabled = _l === void 0 ? false : _l, _m = _a.disableSwapping, disableSwapping = _m === void 0 ? false : _m, propDisableHoverMode = _a.disableHoverMode, _o = _a.disableAutoSpacing, disableAutoSpacing = _o === void 0 ? process.env.NODE_ENV === "test" : _o;
     var containerRef = (0, react_1.useRef)(null);
-    var _m = __read((0, useTooltipPosition_1.useTooltipPosition)({
+    var _p = __read((0, useTooltipPosition_1.useTooltipPosition)({
         position: determinedPosition,
         defaultPosition: defaultPosition,
         threshold: threshold,
-    }), 2), position = _m[0], updatePosition = _m[1];
+    }), 2), position = _p[0], updatePosition = _p[1];
     var mode = (0, utils_1.useUserInteractionMode)();
-    var _o = __read((0, react_1.useState)(null), 2), initiatedBy = _o[0], setInitiatedBy = _o[1];
+    var _q = __read((0, react_1.useState)(null), 2), initiatedBy = _q[0], setInitiatedBy = _q[1];
     var windowFocusEvent = (0, react_1.useRef)(false);
     var timeout = (0, react_1.useRef)(undefined);
-    var _p = (0, utils_1.useHoverMode)({
-        disabled: disabled,
+    var _r = (0, utils_1.useHoverMode)({
+        disabled: propDisableHoverMode || disabled,
         exitVisibilityDelay: 0,
-    }), visible = _p.visible, setVisible = _p.setVisible, handlers = _p.handlers, _hoverHandlers = _p.hoverHandlers, disableHoverMode = _p.disableHoverMode, clearHoverTimeout = _p.clearHoverTimeout, others = __rest(_p, ["visible", "setVisible", "handlers", "hoverHandlers", "disableHoverMode", "clearHoverTimeout"]);
+    }), visible = _r.visible, setVisible = _r.setVisible, handlers = _r.handlers, _hoverHandlers = _r.hoverHandlers, disableHoverMode = _r.disableHoverMode, clearHoverTimeout = _r.clearHoverTimeout, others = __rest(_r, ["visible", "setVisible", "handlers", "hoverHandlers", "disableHoverMode", "clearHoverTimeout"]);
     var hide = (0, react_1.useCallback)(function () {
@@ -120,3 +120,3 @@ window.clearTimeout(timeout.current);
         propOnBlur === null || propOnBlur === void 0 ? void 0 : propOnBlur(event);
-        if (initiatedBy !== "keyboard") {
+        if (disabled || initiatedBy !== "keyboard") {
             return;
@@ -128,2 +128,5 @@ }
         propOnFocus === null || propOnFocus === void 0 ? void 0 : propOnFocus(event);
+        if (disabled) {
+            return;
+        }
         // if the element gained focus immediately after the browser window gains
@@ -148,3 +151,3 @@ // focus, do not start timer and ignore this event instead
         propOnKeyDown === null || propOnKeyDown === void 0 ? void 0 : propOnKeyDown(event);
-        if (initiatedBy !== "keyboard" || event.key !== "Escape") {
+        if (disabled || initiatedBy !== "keyboard" || event.key !== "Escape") {
             return;
@@ -156,3 +159,3 @@ }
         propOnTouchStart === null || propOnTouchStart === void 0 ? void 0 : propOnTouchStart(event);
-        if (event.isPropagationStopped() || mode !== "touch") {
+        if (event.isPropagationStopped() || disabled || mode !== "touch") {
             return;
@@ -171,3 +174,3 @@ }
         propOnContextMenu === null || propOnContextMenu === void 0 ? void 0 : propOnContextMenu(event);
-        if (event.isPropagationStopped() || mode !== "touch") {
+        if (event.isPropagationStopped() || disabled || mode !== "touch") {
             return;
@@ -187,2 +190,5 @@ }
     (0, react_1.useEffect)(function () {
+        if (disabled) {
+            return;
+        }
         if (mode !== "keyboard") {
@@ -203,3 +209,3 @@ windowFocusEvent.current = false;
         };
-    }, [hide, mode]);
+    }, [disabled, hide, mode]);
     (0, react_1.useEffect)(function () {
@@ -209,6 +215,6 @@ if (initiatedBy !== "touch") {
         }
-        window.addEventListener("touchmove", hide, true);
+        window.addEventListener("scroll", hide, true);
         window.addEventListener("touchend", hide, true);
         return function () {
-            window.removeEventListener("touchmove", hide, true);
+            window.removeEventListener("scroll", hide, true);
             window.removeEventListener("touchend", hide, true);
@@ -221,3 +227,3 @@ };
     var nodeRef = (0, react_1.useRef)(null);
-    var _q = (0, transition_1.useFixedPositioning)({
+    var _s = (0, transition_1.useFixedPositioning)({
         style: propStyle,
@@ -251,3 +257,3 @@ nodeRef: nodeRef,
         onExited: onExited,
-    }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
+    }), ref = _s.ref, style = _s.style, transitionOptions = _s.callbacks;
     var tooltipHandlers = {
@@ -261,3 +267,3 @@ onFocus: onFocus,
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            if (event.isPropagationStopped()) {
+            if (event.isPropagationStopped() || disabled) {
                 return;
@@ -272,2 +278,5 @@ }
             onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+            if (disabled) {
+                return;
+            }
             if (initiatedBy !== null) {
@@ -284,2 +293,5 @@ event.stopPropagation();
             onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+            if (disabled) {
+                return;
+            }
             if (initiatedBy !== "mouse") {
@@ -286,0 +298,0 @@ event.stopPropagation();

lib/useTooltipPosition.d.ts

@@ -1,2 +0,2 @@
-import { SimplePosition } from "@react-md/utils";
+import type { SimplePosition } from "@react-md/utils";
 /**
@@ -3,0 +3,0 @@ * @remarks \@since 2.8.0

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
@@ -34,7 +34,7 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/portal": "^5.0.0",
-    "@react-md/theme": "^5.0.0",
-    "@react-md/transition": "^5.0.0",
-    "@react-md/typography": "^5.0.0",
-    "@react-md/utils": "^5.0.0",
+    "@react-md/portal": "^5.1.0",
+    "@react-md/theme": "^5.1.0",
+    "@react-md/transition": "^5.1.0",
+    "@react-md/typography": "^5.1.0",
+    "@react-md/utils": "^5.1.0",
     "classnames": "^2.3.1"
@@ -61,3 +61,3 @@ },
   },
-  "gitHead": "a67e871627db20ca8ee4b672f6e99f2f7f438c96"
+  "gitHead": "d2446029706ae96aada0131f93ed7c1adcc14d70"
 }

README.md

@@ -35,14 +35,23 @@ # @react-md/tooltip
 ```tsx
-import { Fragment } from "react";
 import { render } from "react-dom";
 import { Button } from "@react-md/button";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
-const App = () => (
-  <Tooltipped id="button-id" tooltip="I am a tooltip">
-    <Button>Button Text</Button>
-  </Tooltipped>
-);
+function App() {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: "button-id",
+    onClick(event) {
+      // an optional click handler for the button
+    },
+  });
 
+  return (
+    <>
+      <Button {...elementProps}>Button Text</Button>
+      <Tooltip {...tooltipProps}>I am a tooltip</Tooltip>
+    </>
+  );
+}
+
 render(<App />, document.getElementById("root"));
 ```

src/useTooltip.ts

@@ -1,2 +0,2 @@
-import {
+import type {
   CSSProperties,
@@ -9,13 +9,17 @@ FocusEvent,
   TouchEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
 } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import cn from "classnames";
-import {
+import type {
   FixedPositioningTransitionCallbacks,
   TransitionCallbacks,
-  useFixedPositioning,
 } from "@react-md/transition";
+import { useFixedPositioning } from "@react-md/transition";
+import type {
+  HoverModeEventHandlers,
+  HoverModeHookReturnValue,
+  PositionAnchor,
+  SimplePosition,
+  UserInteractionMode,
+} from "@react-md/utils";
 import {
@@ -26,10 +30,5 @@ ABOVE_CENTER_ANCHOR,
   CENTER_RIGHT_ANCHOR,
-  HoverModeEventHandlers,
-  HoverModeHookReturnValue,
-  PositionAnchor,
-  SimplePosition,
   unitToNumber,
   useHoverMode,
   useOnUnmount,
-  UserInteractionMode,
   useUserInteractionMode,
@@ -48,6 +47,4 @@ } from "@react-md/utils";
 import type { TooltipProps } from "./Tooltip";
-import {
-  TooltipPositionHookOptions,
-  useTooltipPosition,
-} from "./useTooltipPosition";
+import type { TooltipPositionHookOptions } from "./useTooltipPosition";
+import { useTooltipPosition } from "./useTooltipPosition";
 
@@ -210,2 +207,62 @@ /** @internal */
   disableHoverMode?: boolean;
+
+  /**
+   * Boolean if the event handlers should no longer attempt to show a tooltip. This
+   * should be set to `true` when your component might not have a tooltip associated
+   * with it.
+   *
+   * @example
+   * Real World Example
+   * ```tsx
+   * import type { ReactElement, ReactNode } from "react";
+   * import { Button, ButtonProps } from "@react-md/button";
+   * import { Tooltip, useTooltip } from "@react-md/tooltip":
+   *
+   * export interface TooltippedButtonProps extends ButtonProps {
+   *   id: string;
+   *   tooltip?: ReactNode;
+   * }
+   *
+   * export function TooltippedButton({
+   *   id,
+   *   tooltip,
+   *   children,
+   *   onClick,
+   *   onBlur,
+   *   onFocus,
+   *   onKeyDown,
+   *   onMouseEnter,
+   *   onMouseLeave,
+   *   onTouchStart,
+   *   onContextMenu,
+   *   ...props
+   * }: TooltippedButtonProps): ReactElement {
+   *   const { elementProps, tooltipProps } = useTooltip({
+   *     disabled: !tooltip,
+   *     baseId: id,
+   *     onClick,
+   *     onBlur,
+   *     onFocus,
+   *     onKeyDown,
+   *     onMouseEnter,
+   *     onMouseLeave,
+   *     onTouchStart,
+   *     onContextMenu,
+   *   });
+   *
+   *   return (
+   *     <>
+   *       <Button {...props} {...elementProps}>
+   *         {children}
+   *       </Button>
+   *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+   *     </>
+   *   );
+   * }
+   * ```
+   *
+   * @defaultValue `false`
+   * @remarks \@since 5.1.0
+   */
+  disabled?: boolean;
 }
@@ -324,4 +381,5 @@
   onExited,
-  disableSwapping,
-  disableHoverMode: disabled,
+  disabled = false,
+  disableSwapping = false,
+  disableHoverMode: propDisableHoverMode,
   disableAutoSpacing = process.env.NODE_ENV === "test",
@@ -348,3 +406,3 @@ }: TooltipHookOptions<E>): TooltipHookReturnValue<E> {
   } = useHoverMode({
-    disabled,
+    disabled: propDisableHoverMode || disabled,
     exitVisibilityDelay: 0,
@@ -361,3 +419,3 @@ });
 
-    if (initiatedBy !== "keyboard") {
+    if (disabled || initiatedBy !== "keyboard") {
       return;
@@ -370,2 +428,5 @@ }
     propOnFocus?.(event);
+    if (disabled) {
+      return;
+    }
 
@@ -395,3 +456,3 @@ // if the element gained focus immediately after the browser window gains
 
-    if (initiatedBy !== "keyboard" || event.key !== "Escape") {
+    if (disabled || initiatedBy !== "keyboard" || event.key !== "Escape") {
       return;
@@ -406,3 +467,3 @@ }
 
-    if (event.isPropagationStopped() || mode !== "touch") {
+    if (event.isPropagationStopped() || disabled || mode !== "touch") {
       return;
@@ -423,3 +484,3 @@ }
 
-    if (event.isPropagationStopped() || mode !== "touch") {
+    if (event.isPropagationStopped() || disabled || mode !== "touch") {
       return;
@@ -443,2 +504,6 @@ }
   useEffect(() => {
+    if (disabled) {
+      return;
+    }
+
     if (mode !== "keyboard") {
@@ -461,3 +526,3 @@ windowFocusEvent.current = false;
     };
-  }, [hide, mode]);
+  }, [disabled, hide, mode]);
   useEffect(() => {
@@ -468,6 +533,6 @@ if (initiatedBy !== "touch") {
 
-    window.addEventListener("touchmove", hide, true);
+    window.addEventListener("scroll", hide, true);
     window.addEventListener("touchend", hide, true);
     return () => {
-      window.removeEventListener("touchmove", hide, true);
+      window.removeEventListener("scroll", hide, true);
       window.removeEventListener("touchend", hide, true);
@@ -527,3 +592,3 @@ };
       onClick?.(event);
-      if (event.isPropagationStopped()) {
+      if (event.isPropagationStopped() || disabled) {
         return;
@@ -539,2 +604,6 @@ }
       onMouseEnter?.(event);
+      if (disabled) {
+        return;
+      }
+
       if (initiatedBy !== null) {
@@ -552,2 +621,6 @@ event.stopPropagation();
       onMouseLeave?.(event);
+      if (disabled) {
+        return;
+      }
+
       if (initiatedBy !== "mouse") {
@@ -554,0 +627,0 @@ event.stopPropagation();

src/useTooltipPosition.ts

 import { useCallback, useState } from "react";
-import { getViewportSize, SimplePosition } from "@react-md/utils";
+import type { SimplePosition } from "@react-md/utils";
+import { getViewportSize } from "@react-md/utils";
 
@@ -4,0 +5,0 @@ import { DEFAULT_TOOLTIP_THRESHOLD } from "./constants";

types/Tooltip.d.ts

@@ -1,5 +0,5 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
-import { SimplePosition } from "@react-md/utils";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { RenderConditionalPortalProps } from "@react-md/portal";
+import type { CSSTransitionClassNames, CSSTransitionComponentProps, TransitionTimeout } from "@react-md/transition";
+import type { SimplePosition } from "@react-md/utils";
 /**
@@ -6,0 +6,0 @@ * The base props for the `Tooltip` component. This can be extended when

types/Tooltipped.d.ts

@@ -1,5 +0,5 @@
-import { CSSProperties, ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type { RenderConditionalPortalProps } from "@react-md/portal";
-import { TooltipProps } from "./Tooltip";
-import { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
+import type { TooltipProps } from "./Tooltip";
+import type { TooltippedElementEventHandlers, BaseTooltipHookOptions } from "./useTooltip";
 interface TooltippedProvidedProps extends TooltippedElementEventHandlers<HTMLElement> {
@@ -6,0 +6,0 @@ id: string;

types/useTooltip.d.ts

@@ -1,6 +0,6 @@
-import { CSSProperties, HTMLAttributes, Ref } from "react";
-import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
-import { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
+import type { CSSProperties, HTMLAttributes, Ref } from "react";
+import type { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
+import type { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
 import type { TooltipProps } from "./Tooltip";
-import { TooltipPositionHookOptions } from "./useTooltipPosition";
+import type { TooltipPositionHookOptions } from "./useTooltipPosition";
 /**
@@ -116,2 +116,61 @@ * @internal
     disableHoverMode?: boolean;
+    /**
+     * Boolean if the event handlers should no longer attempt to show a tooltip. This
+     * should be set to `true` when your component might not have a tooltip associated
+     * with it.
+     *
+     * @example
+     * Real World Example
+     * ```tsx
+     * import type { ReactElement, ReactNode } from "react";
+     * import { Button, ButtonProps } from "@react-md/button";
+     * import { Tooltip, useTooltip } from "@react-md/tooltip":
+     *
+     * export interface TooltippedButtonProps extends ButtonProps {
+     *   id: string;
+     *   tooltip?: ReactNode;
+     * }
+     *
+     * export function TooltippedButton({
+     *   id,
+     *   tooltip,
+     *   children,
+     *   onClick,
+     *   onBlur,
+     *   onFocus,
+     *   onKeyDown,
+     *   onMouseEnter,
+     *   onMouseLeave,
+     *   onTouchStart,
+     *   onContextMenu,
+     *   ...props
+     * }: TooltippedButtonProps): ReactElement {
+     *   const { elementProps, tooltipProps } = useTooltip({
+     *     disabled: !tooltip,
+     *     baseId: id,
+     *     onClick,
+     *     onBlur,
+     *     onFocus,
+     *     onKeyDown,
+     *     onMouseEnter,
+     *     onMouseLeave,
+     *     onTouchStart,
+     *     onContextMenu,
+     *   });
+     *
+     *   return (
+     *     <>
+     *       <Button {...props} {...elementProps}>
+     *         {children}
+     *       </Button>
+     *       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+     *     </>
+     *   );
+     * }
+     * ```
+     *
+     * @defaultValue `false`
+     * @remarks \@since 5.1.0
+     */
+    disabled?: boolean;
 }
@@ -193,2 +252,2 @@ /** @remarks \@since 2.8.0 */
  */
-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>;
+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, disabled, disableSwapping, disableHoverMode: propDisableHoverMode, disableAutoSpacing, }: TooltipHookOptions<E>): TooltipHookReturnValue<E>;

types/useTooltipPosition.d.ts

@@ -1,2 +0,2 @@
-import { SimplePosition } from "@react-md/utils";
+import type { SimplePosition } from "@react-md/utils";
 /**
@@ -3,0 +3,0 @@ * @remarks \@since 2.8.0

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

Total package byte prevSize

206138

increased by4.08%

Lines of code

3456

increased by6.54%

Number of lines in readme file

57

increased by18.75%

Dependency changes

• Updated@react-md/portal@^5.1.0

• Updated@react-md/theme@^5.1.0

• Updated@react-md/transition@^5.1.0

• Updated@react-md/typography@^5.1.0

• Updated@react-md/utils@^5.1.0