@react-md/tooltip - npm Package Compare versions

Comparing version 4.0.3 to 5.0.0

CHANGELOG.md

@@ -6,2 +6,33 @@ # Change Log
 
+# [5.0.0](https://github.com/mlaursen/react-md/compare/v4.0.3...v5.0.0) (2022-01-31)
+
+
+### Other Internal Changes
+
+* feat!(utils): Updated the HoverMode API ([ac60bdb](https://github.com/mlaursen/react-md/commit/ac60bdb0cd8dc3ba55c8ea080f4ad3886b579033))
+
+
+### Breaking Changes
+
+* `DEFAULT_HOVER_MODE_STICKY_EXIT_TIME` has been renamed to
+`DEFAULT_HOVER_MODE_EXIT_TIME`.
+* The `exitVisibilityDelay` always defaults to
+`DEFAULT_HOVER_MODE_EXIT_TIME`.
+* The `useHoverMode` hook no longer accepts an
+`HTMLElement` generic and instead the event handlers will automatically
+infer the `HTMLElement` based on usage.
+* The `useHoverMode` hook no longer returns
+`stickyHandlers` and instead returns `hoverHandlers` that only include
+`onMouseEnter` and `onMouseLeave`. The `handlers` that are returned now
+include `onClick`, `onMouseEnter`, and `onMouseLeave`. This was kind of
+what the `stickyHandlers` was before. In addition, clicking an element
+no longer disabled the hover mode behavior.
+* The following typescript types have been removed:
+`HoverModeOnlyOptions`, `HoverModeOnlyReturnValue`
+
+
+
+
+
+
 ## [4.0.3](https://github.com/mlaursen/react-md/compare/v4.0.2...v4.0.3) (2021-12-31)
@@ -8,0 +39,0 @@

es/useTooltip.js

@@ -104,30 +104,4 @@ var __assign = (this && this.__assign) || function () {
         disabled: disabled,
-        onClick: function (event) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            if (event.isPropagationStopped()) {
-                return;
-            }
-            setVisible(false);
-            setInitiatedBy(null);
-            window.clearTimeout(timeout.current);
-        },
-        onMouseEnter: function (event) {
-            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
-            if (initiatedBy !== null) {
-                event.stopPropagation();
-                return;
-            }
-            containerRef.current = event.currentTarget;
-            updatePosition(event.currentTarget);
-            setInitiatedBy("mouse");
-        },
-        onMouseLeave: function (event) {
-            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
-            if (initiatedBy !== "mouse") {
-                event.stopPropagation();
-                return;
-            }
-            setInitiatedBy(null);
-        },
-    }), visible = _p.visible, setVisible = _p.setVisible, mouseHandlers = _p.handlers, disableHoverMode = _p.disableHoverMode, others = __rest(_p, ["visible", "setVisible", "handlers", "disableHoverMode"]);
+        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"]);
     var hide = useCallback(function () {
@@ -263,8 +237,44 @@ window.clearTimeout(timeout.current);
     }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
-    var tooltipHandlers = __assign(__assign({}, mouseHandlers), { onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onContextMenu: onContextMenu });
+    var tooltipHandlers = {
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onTouchStart: onTouchStart,
+        onContextMenu: onContextMenu,
+        onClick: function (event) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.isPropagationStopped()) {
+                return;
+            }
+            setVisible(false);
+            setInitiatedBy(null);
+            window.clearTimeout(timeout.current);
+            clearHoverTimeout();
+        },
+        onMouseEnter: function (event) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+            if (initiatedBy !== null) {
+                event.stopPropagation();
+                return;
+            }
+            containerRef.current = event.currentTarget;
+            updatePosition(event.currentTarget);
+            setInitiatedBy("mouse");
+            handlers.onMouseEnter(event);
+        },
+        onMouseLeave: function (event) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+            if (initiatedBy !== "mouse") {
+                event.stopPropagation();
+                return;
+            }
+            setInitiatedBy(null);
+            handlers.onMouseLeave(event);
+        },
+    };
     var tooltipId = "".concat(baseId, "-tooltip");
     var elementProps = __assign({ id: baseId, "aria-describedby": cn(visible && tooltipId, describedBy) || undefined }, tooltipHandlers);
     var tooltipProps = __assign({ id: tooltipId, ref: ref, dense: dense, visible: visible, position: position, style: style }, transitionOptions);
-    return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode });
+    return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode, clearHoverTimeout: clearHoverTimeout });
 }
 //# sourceMappingURL=useTooltip.js.map

lib/useTooltip.d.ts

 import { CSSProperties, HTMLAttributes, Ref } from "react";
 import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
-import { HoverModeEventHandlers, HoverModeOnlyReturnValue, UserInteractionMode } from "@react-md/utils";
+import { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
 import type { TooltipProps } from "./Tooltip";
@@ -21,3 +21,3 @@ import { TooltipPositionHookOptions } from "./useTooltipPosition";
  */
-export declare type TooltippedElementEventHandlers<E extends HTMLElement> = HoverModeEventHandlers<E> & TooltipTouchEventHandlers<E> & TooltipKeyboardEventHandlers<E>;
+export declare type TooltippedElementEventHandlers<E extends HTMLElement> = TooltipTouchEventHandlers<E> & TooltipKeyboardEventHandlers<E> & Pick<HTMLAttributes<E>, keyof HoverModeEventHandlers>;
 /** @remarks \@since 2.8.0 */
@@ -150,3 +150,3 @@ export interface TooltipHookProvidedElementProps<E extends HTMLElement> extends Required<TooltippedElementEventHandlers<E>> {
  */
-export interface TooltipHookReturnValue<E extends HTMLElement> extends Omit<HoverModeOnlyReturnValue<E>, "handlers"> {
+export interface TooltipHookReturnValue<E extends HTMLElement> extends Omit<HoverModeHookReturnValue, "handlers" | "hoverHandlers"> {
     /** {@inheritDoc TooltippedElementEventHandlers} */
@@ -153,0 +153,0 @@ handlers: Required<TooltippedElementEventHandlers<E>>;

lib/useTooltip.js

@@ -110,30 +110,4 @@ "use strict";
         disabled: disabled,
-        onClick: function (event) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            if (event.isPropagationStopped()) {
-                return;
-            }
-            setVisible(false);
-            setInitiatedBy(null);
-            window.clearTimeout(timeout.current);
-        },
-        onMouseEnter: function (event) {
-            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
-            if (initiatedBy !== null) {
-                event.stopPropagation();
-                return;
-            }
-            containerRef.current = event.currentTarget;
-            updatePosition(event.currentTarget);
-            setInitiatedBy("mouse");
-        },
-        onMouseLeave: function (event) {
-            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
-            if (initiatedBy !== "mouse") {
-                event.stopPropagation();
-                return;
-            }
-            setInitiatedBy(null);
-        },
-    }), visible = _p.visible, setVisible = _p.setVisible, mouseHandlers = _p.handlers, disableHoverMode = _p.disableHoverMode, others = __rest(_p, ["visible", "setVisible", "handlers", "disableHoverMode"]);
+        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"]);
     var hide = (0, react_1.useCallback)(function () {
@@ -269,9 +243,45 @@ window.clearTimeout(timeout.current);
     }), ref = _q.ref, style = _q.style, transitionOptions = _q.callbacks;
-    var tooltipHandlers = __assign(__assign({}, mouseHandlers), { onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onContextMenu: onContextMenu });
+    var tooltipHandlers = {
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onKeyDown: onKeyDown,
+        onTouchStart: onTouchStart,
+        onContextMenu: onContextMenu,
+        onClick: function (event) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            if (event.isPropagationStopped()) {
+                return;
+            }
+            setVisible(false);
+            setInitiatedBy(null);
+            window.clearTimeout(timeout.current);
+            clearHoverTimeout();
+        },
+        onMouseEnter: function (event) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event);
+            if (initiatedBy !== null) {
+                event.stopPropagation();
+                return;
+            }
+            containerRef.current = event.currentTarget;
+            updatePosition(event.currentTarget);
+            setInitiatedBy("mouse");
+            handlers.onMouseEnter(event);
+        },
+        onMouseLeave: function (event) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+            if (initiatedBy !== "mouse") {
+                event.stopPropagation();
+                return;
+            }
+            setInitiatedBy(null);
+            handlers.onMouseLeave(event);
+        },
+    };
     var tooltipId = "".concat(baseId, "-tooltip");
     var elementProps = __assign({ id: baseId, "aria-describedby": (0, classnames_1.default)(visible && tooltipId, describedBy) || undefined }, tooltipHandlers);
     var tooltipProps = __assign({ id: tooltipId, ref: ref, dense: dense, visible: visible, position: position, style: style }, transitionOptions);
-    return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode });
+    return __assign(__assign({}, others), { visible: visible, setVisible: setVisible, handlers: tooltipHandlers, elementProps: elementProps, tooltipProps: tooltipProps, disableHoverMode: disableHoverMode, clearHoverTimeout: clearHoverTimeout });
 }
 exports.useTooltip = useTooltip;
 //# sourceMappingURL=useTooltip.js.map

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "4.0.3",
+  "version": "5.0.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": "^4.0.3",
-    "@react-md/theme": "^4.0.3",
-    "@react-md/transition": "^4.0.3",
-    "@react-md/typography": "^4.0.3",
-    "@react-md/utils": "^4.0.3",
+    "@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",
     "classnames": "^2.3.1"
@@ -61,3 +61,3 @@ },
   },
-  "gitHead": "39edcb237de86528426b8011396f677b01b6a929"
+  "gitHead": "a67e871627db20ca8ee4b672f6e99f2f7f438c96"
 }

src/useTooltip.ts

@@ -26,3 +26,3 @@ import {
   HoverModeEventHandlers,
-  HoverModeOnlyReturnValue,
+  HoverModeHookReturnValue,
   PositionAnchor,
@@ -93,5 +93,5 @@ SimplePosition,
 export type TooltippedElementEventHandlers<E extends HTMLElement> =
-  HoverModeEventHandlers<E> &
-    TooltipTouchEventHandlers<E> &
-    TooltipKeyboardEventHandlers<E>;
+  TooltipTouchEventHandlers<E> &
+    TooltipKeyboardEventHandlers<E> &
+    Pick<HTMLAttributes<E>, keyof HoverModeEventHandlers>;
 
@@ -250,3 +250,3 @@ /** @remarks \@since 2.8.0 */
 export interface TooltipHookReturnValue<E extends HTMLElement>
-  extends Omit<HoverModeOnlyReturnValue<E>, "handlers"> {
+  extends Omit<HoverModeHookReturnValue, "handlers" | "hoverHandlers"> {
   /** {@inheritDoc TooltippedElementEventHandlers} */
@@ -340,37 +340,10 @@ handlers: Required<TooltippedElementEventHandlers<E>>;
     setVisible,
-    handlers: mouseHandlers,
+    handlers,
+    hoverHandlers: _hoverHandlers,
     disableHoverMode,
+    clearHoverTimeout,
     ...others
-  } = useHoverMode<E>({
+  } = useHoverMode({
     disabled,
-    onClick: (event) => {
-      onClick?.(event);
-      if (event.isPropagationStopped()) {
-        return;
-      }
-
-      setVisible(false);
-      setInitiatedBy(null);
-      window.clearTimeout(timeout.current);
-    },
-    onMouseEnter: (event) => {
-      onMouseEnter?.(event);
-      if (initiatedBy !== null) {
-        event.stopPropagation();
-        return;
-      }
-
-      containerRef.current = event.currentTarget;
-      updatePosition(event.currentTarget);
-      setInitiatedBy("mouse");
-    },
-    onMouseLeave: (event) => {
-      onMouseLeave?.(event);
-      if (initiatedBy !== "mouse") {
-        event.stopPropagation();
-        return;
-      }
-
-      setInitiatedBy(null);
-    },
+    exitVisibilityDelay: 0,
   });
@@ -537,3 +510,2 @@ const hide = useCallback(() => {
   const tooltipHandlers: Required<TooltippedElementEventHandlers<E>> = {
-    ...mouseHandlers,
     onFocus,
@@ -544,2 +516,35 @@ onBlur,
     onContextMenu,
+    onClick(event) {
+      onClick?.(event);
+      if (event.isPropagationStopped()) {
+        return;
+      }
+
+      setVisible(false);
+      setInitiatedBy(null);
+      window.clearTimeout(timeout.current);
+      clearHoverTimeout();
+    },
+    onMouseEnter(event) {
+      onMouseEnter?.(event);
+      if (initiatedBy !== null) {
+        event.stopPropagation();
+        return;
+      }
+
+      containerRef.current = event.currentTarget;
+      updatePosition(event.currentTarget);
+      setInitiatedBy("mouse");
+      handlers.onMouseEnter(event);
+    },
+    onMouseLeave(event) {
+      onMouseLeave?.(event);
+      if (initiatedBy !== "mouse") {
+        event.stopPropagation();
+        return;
+      }
+
+      setInitiatedBy(null);
+      handlers.onMouseLeave(event);
+    },
   };
@@ -571,3 +576,4 @@
     disableHoverMode,
+    clearHoverTimeout,
   };
 }

types/useTooltip.d.ts

 import { CSSProperties, HTMLAttributes, Ref } from "react";
 import { FixedPositioningTransitionCallbacks, TransitionCallbacks } from "@react-md/transition";
-import { HoverModeEventHandlers, HoverModeOnlyReturnValue, UserInteractionMode } from "@react-md/utils";
+import { HoverModeEventHandlers, HoverModeHookReturnValue, UserInteractionMode } from "@react-md/utils";
 import type { TooltipProps } from "./Tooltip";
@@ -21,3 +21,3 @@ import { TooltipPositionHookOptions } from "./useTooltipPosition";
  */
-export declare type TooltippedElementEventHandlers<E extends HTMLElement> = HoverModeEventHandlers<E> & TooltipTouchEventHandlers<E> & TooltipKeyboardEventHandlers<E>;
+export declare type TooltippedElementEventHandlers<E extends HTMLElement> = TooltipTouchEventHandlers<E> & TooltipKeyboardEventHandlers<E> & Pick<HTMLAttributes<E>, keyof HoverModeEventHandlers>;
 /** @remarks \@since 2.8.0 */
@@ -150,3 +150,3 @@ export interface TooltipHookProvidedElementProps<E extends HTMLElement> extends Required<TooltippedElementEventHandlers<E>> {
  */
-export interface TooltipHookReturnValue<E extends HTMLElement> extends Omit<HoverModeOnlyReturnValue<E>, "handlers"> {
+export interface TooltipHookReturnValue<E extends HTMLElement> extends Omit<HoverModeHookReturnValue, "handlers" | "hoverHandlers"> {
     /** {@inheritDoc TooltippedElementEventHandlers} */
@@ -153,0 +153,0 @@ handlers: Required<TooltippedElementEventHandlers<E>>;

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198065

increased by1.17%

Lines of code

3244

increased by0.87%

Dependency changes

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

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

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

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

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

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

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

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

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

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

• Updated@react-md/portal@^5.0.0

• Updated@react-md/theme@^5.0.0

• Updated@react-md/transition@^5.0.0

• Updated@react-md/typography@^5.0.0

• Updated@react-md/utils@^5.0.0