@react-md/tooltip - npm Package Compare versions

Comparing version 2.0.0-alpha.0 to 2.0.0-alpha.1

dist/scssVariables.d.ts

@@ -20,3 +20,3 @@ declare const _default: {
     "rmd-tooltip-transition-distance": string;
-    "rmd-tooltip-position-values": string;
+    "rmd-tooltip-position-values": string[];
     "rmd-tooltip-theme-values": {
@@ -23,0 +23,0 @@ "background-color": string;

dist/scssVariables.js

@@ -23,3 +23,3 @@ "use strict";
     "rmd-tooltip-transition-distance": "0.5rem",
-    "rmd-tooltip-position-values": "above below left right",
+    "rmd-tooltip-position-values": ["above", "below", "left", "right"],
     "rmd-tooltip-theme-values": {
@@ -26,0 +26,0 @@ "background-color": "#232f34",

es/constants.js

@@ -14,2 +14,3 @@ export var TOOLTIP_CLASS_NAMES = {
 };
+export var DEFAULT_DELAY = 1000;
 //# sourceMappingURL=constants.js.map

es/hooks.js

 import { useEffect, useRef, useState } from "react";
-import { positionRelativeTo, useEventListener } from "@react-md/utils";
-import { useKeyboardFocused } from "@react-md/wia-aria";
+import { positionRelativeTo } from "@react-md/utils";
 import { createPositionOptions, determineBestPosition, getSpacing, } from "./utils";
 export function useTooltipState(config) {
     var id = config.id, dense = config.dense, spacing = config.spacing, denseSpacing = config.denseSpacing, onMouseEnter = config.onMouseEnter, onMouseLeave = config.onMouseLeave, onClick = config.onClick, onBlur = config.onBlur, defaultVisible = config.defaultVisible, defaultPosition = config.defaultPosition, hoverDelay = config.hoverDelay, focusDelay = config.focusDelay, vwMargin = config.vwMargin, vhMargin = config.vhMargin, portal = config.portal, propStyle = config.style;
-    var isKeyboardFocus = useKeyboardFocused(id);
     var _a = useState(null), trigger = _a[0], setTrigger = _a[1];
@@ -22,16 +20,20 @@ var _b = useState(defaultVisible), visible = _b[0], setVisible = _b[1];
     };
+    // useEffect(() => {
+    //   if (!isKeyboardFocus || trigger !== null) {
+    //     return;
+    //   }
+    //   setTrigger("keyboard");
+    //   container.current = document.getElementById(id) as HTMLElement;
+    // }, [isKeyboardFocus]);
+    // useEventListener(
+    //   "keydown",
+    //   (event: KeyboardEvent) => {
+    //     if (event.key === "Escape") {
+    //       setVisible(false);
+    //       setTrigger(null);
+    //     }
+    //   },
+    //   { enabled: visible }
+    // );
     useEffect(function () {
-        if (!isKeyboardFocus || trigger !== null) {
-            return;
-        }
-        setTrigger("keyboard");
-        container.current = document.getElementById(id);
-    }, [isKeyboardFocus]);
-    useEventListener("keydown", function (event) {
-        if (event.key === "Escape") {
-            setVisible(false);
-            setTrigger(null);
-        }
-    }, { enabled: visible });
-    useEffect(function () {
         if (trigger === null) {
@@ -38,0 +40,0 @@ return;

es/Tooltip.js

@@ -24,3 +24,5 @@ var __assign = (this && this.__assign) || function () {
 import { CSSTransition } from "react-transition-group";
+import { bem } from "@react-md/theme";
 import { TOOLTIP_CLASS_NAMES, TOOLTIP_TRANSITION_TIMEOUT } from "./constants";
+var block = bem("rmd-tooltip");
 /**
@@ -32,9 +34,12 @@ * This is the base tooltip component that can only be used to render a tooltip with an animation
 var Tooltip = function (providedProps) {
-    var _a = providedProps, className = _a.className, classNames = _a.classNames, visible = _a.visible, timeout = _a.timeout, lazyMount = _a.lazyMount, dense = _a.dense, lineWrap = _a.lineWrap, position = _a.position, children = _a.children, forwardedRef = _a.forwardedRef, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, props = __rest(_a, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
+    var _a;
+    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, lazyMount = _b.lazyMount, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, props = __rest(_b, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
     return (React.createElement(CSSTransition, { classNames: classNames, in: visible, timeout: timeout, appear: lazyMount, mountOnEnter: lazyMount, unmountOnExit: lazyMount, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited },
-        React.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: cn("rmd-tooltip", {
-                "rmd-tooltip--dense": dense,
-                "rmd-tooltip--line-wrap": lineWrap,
-                "rmd-tooltip--dense-line-wrap": dense && lineWrap,
-            }, "rmd-tooltip--" + position, className) }), children)));
+        React.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: cn(block((_a = {
+                    dense: dense,
+                    "line-wrap": lineWrap,
+                    "dense-line-wrap": dense && lineWrap
+                },
+                _a[position] = true,
+                _a)), className) }), children)));
 };
@@ -47,3 +52,3 @@ var defaultProps = {
     timeout: TOOLTIP_TRANSITION_TIMEOUT,
-    lazyMount: true,
+    lazyMount: false,
 };
@@ -50,0 +55,0 @@ Tooltip.defaultProps = defaultProps;

es/Tooltipped.js

@@ -37,3 +37,3 @@ var __assign = (this && this.__assign) || function () {
     var _a = useTooltipState(props), visible = _a.visible, position = _a.position, tooltipHandlers = _a.tooltipHandlers, containerHandlers = _a.containerHandlers;
-    var tooltip = (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, visible: visible },
+    var tooltip = (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
         React.createElement(Tooltip, __assign({ id: tooltipId }, tooltipProps, tooltipHandlers, { className: cn({ "rmd-tooltip--portal": portal || portalInto || portalIntoId }, className), visible: visible, position: position }), tooltipChildren)));
@@ -40,0 +40,0 @@ return children({

lib/constants.js

@@ -16,2 +16,3 @@ "use strict";
 };
+exports.DEFAULT_DELAY = 1000;
 //# sourceMappingURL=constants.js.map

lib/hooks.js

@@ -5,7 +5,5 @@ "use strict";
 var utils_1 = require("@react-md/utils");
-var wia_aria_1 = require("@react-md/wia-aria");
 var utils_2 = require("./utils");
 function useTooltipState(config) {
     var id = config.id, dense = config.dense, spacing = config.spacing, denseSpacing = config.denseSpacing, onMouseEnter = config.onMouseEnter, onMouseLeave = config.onMouseLeave, onClick = config.onClick, onBlur = config.onBlur, defaultVisible = config.defaultVisible, defaultPosition = config.defaultPosition, hoverDelay = config.hoverDelay, focusDelay = config.focusDelay, vwMargin = config.vwMargin, vhMargin = config.vhMargin, portal = config.portal, propStyle = config.style;
-    var isKeyboardFocus = wia_aria_1.useKeyboardFocused(id);
     var _a = react_1.useState(null), trigger = _a[0], setTrigger = _a[1];
@@ -25,16 +23,20 @@ var _b = react_1.useState(defaultVisible), visible = _b[0], setVisible = _b[1];
     };
+    // useEffect(() => {
+    //   if (!isKeyboardFocus || trigger !== null) {
+    //     return;
+    //   }
+    //   setTrigger("keyboard");
+    //   container.current = document.getElementById(id) as HTMLElement;
+    // }, [isKeyboardFocus]);
+    // useEventListener(
+    //   "keydown",
+    //   (event: KeyboardEvent) => {
+    //     if (event.key === "Escape") {
+    //       setVisible(false);
+    //       setTrigger(null);
+    //     }
+    //   },
+    //   { enabled: visible }
+    // );
     react_1.useEffect(function () {
-        if (!isKeyboardFocus || trigger !== null) {
-            return;
-        }
-        setTrigger("keyboard");
-        container.current = document.getElementById(id);
-    }, [isKeyboardFocus]);
-    utils_1.useEventListener("keydown", function (event) {
-        if (event.key === "Escape") {
-            setVisible(false);
-            setTrigger(null);
-        }
-    }, { enabled: visible });
-    react_1.useEffect(function () {
         if (trigger === null) {
@@ -41,0 +43,0 @@ return;

lib/Tooltip.js

@@ -36,3 +36,5 @@ "use strict";
 var react_transition_group_1 = require("react-transition-group");
+var theme_1 = require("@react-md/theme");
 var constants_1 = require("./constants");
+var block = theme_1.bem("rmd-tooltip");
 /**
@@ -44,9 +46,12 @@ * This is the base tooltip component that can only be used to render a tooltip with an animation
 var Tooltip = function (providedProps) {
-    var _a = providedProps, className = _a.className, classNames = _a.classNames, visible = _a.visible, timeout = _a.timeout, lazyMount = _a.lazyMount, dense = _a.dense, lineWrap = _a.lineWrap, position = _a.position, children = _a.children, forwardedRef = _a.forwardedRef, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, props = __rest(_a, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
+    var _a;
+    var _b = providedProps, className = _b.className, classNames = _b.classNames, visible = _b.visible, timeout = _b.timeout, lazyMount = _b.lazyMount, dense = _b.dense, lineWrap = _b.lineWrap, position = _b.position, children = _b.children, forwardedRef = _b.forwardedRef, onEnter = _b.onEnter, onEntering = _b.onEntering, onEntered = _b.onEntered, onExit = _b.onExit, onExiting = _b.onExiting, onExited = _b.onExited, props = __rest(_b, ["className", "classNames", "visible", "timeout", "lazyMount", "dense", "lineWrap", "position", "children", "forwardedRef", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"]);
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { classNames: classNames, in: visible, timeout: timeout, appear: lazyMount, mountOnEnter: lazyMount, unmountOnExit: lazyMount, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited },
-        react_1.default.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: classnames_1.default("rmd-tooltip", {
-                "rmd-tooltip--dense": dense,
-                "rmd-tooltip--line-wrap": lineWrap,
-                "rmd-tooltip--dense-line-wrap": dense && lineWrap,
-            }, "rmd-tooltip--" + position, className) }), children)));
+        react_1.default.createElement("span", __assign({}, props, { ref: forwardedRef, role: "tooltip", className: classnames_1.default(block((_a = {
+                    dense: dense,
+                    "line-wrap": lineWrap,
+                    "dense-line-wrap": dense && lineWrap
+                },
+                _a[position] = true,
+                _a)), className) }), children)));
 };
@@ -59,3 +64,3 @@ var defaultProps = {
     timeout: constants_1.TOOLTIP_TRANSITION_TIMEOUT,
-    lazyMount: true,
+    lazyMount: false,
 };
@@ -62,0 +67,0 @@ Tooltip.defaultProps = defaultProps;

lib/Tooltipped.js

@@ -42,3 +42,3 @@ "use strict";
     var _a = hooks_1.useTooltipState(props), visible = _a.visible, position = _a.position, tooltipHandlers = _a.tooltipHandlers, containerHandlers = _a.containerHandlers;
-    var tooltip = (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, visible: visible },
+    var tooltip = (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
         react_1.default.createElement(Tooltip_1.default, __assign({ id: tooltipId }, tooltipProps, tooltipHandlers, { className: classnames_1.default({ "rmd-tooltip--portal": portal || portalInto || portalIntoId }, className), visible: visible, position: position }), tooltipChildren)));
@@ -45,0 +45,0 @@ return children({

package.json

 {
   "name": "@react-md/tooltip",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
   "description": "Create accessible tooltips within react-md based on the material design specifications.",
@@ -35,9 +35,9 @@ "scripts": {
   "dependencies": {
-    "@react-md/portal": "^2.0.0-alpha.0",
-    "@react-md/theme": "^2.0.0-alpha.0",
-    "@react-md/transition": "^2.0.0-alpha.0",
-    "@react-md/typography": "^2.0.0-alpha.0",
-    "@react-md/utils": "^2.0.0-alpha.0",
+    "@react-md/portal": "^2.0.0-alpha.1",
+    "@react-md/theme": "^2.0.0-alpha.1",
+    "@react-md/transition": "^2.0.0-alpha.1",
+    "@react-md/typography": "^2.0.0-alpha.1",
+    "@react-md/utils": "^2.0.0-alpha.1",
     "classnames": "^2.2.6",
-    "react-transition-group": "^2.6.0"
+    "react-transition-group": "^4.0.0"
   },
@@ -53,3 +53,3 @@ "peerDependencies": {
   },
-  "gitHead": "cc5de21740e62c1fd5da8f832f562c48eb028717"
+  "gitHead": "9197bcdf38df3cff304499431696dc8e950b4b17"
 }

src/constants.ts

@@ -20,1 +20,3 @@ import {
 };
+
+export const DEFAULT_DELAY = 1000;

src/hooks.ts

 import { useEffect, useRef, useState } from "react";
-import { Maybe, positionRelativeTo, useEventListener } from "@react-md/utils";
-import { useKeyboardFocused } from "@react-md/wia-aria";
+import { Maybe, positionRelativeTo } from "@react-md/utils";
 import { TooltipConfig, TooltipEventType } from "./types.d";
@@ -30,3 +29,2 @@ import {
   } = config;
-  const isKeyboardFocus = useKeyboardFocused(id);
   const [trigger, setTrigger] = useState<Maybe<TooltipEventType>>(null);
@@ -49,21 +47,21 @@ const [visible, setVisible] = useState(defaultVisible);
 
-  useEffect(() => {
-    if (!isKeyboardFocus || trigger !== null) {
-      return;
-    }
+  // useEffect(() => {
+  //   if (!isKeyboardFocus || trigger !== null) {
+  //     return;
+  //   }
 
-    setTrigger("keyboard");
-    container.current = document.getElementById(id) as HTMLElement;
-  }, [isKeyboardFocus]);
+  //   setTrigger("keyboard");
+  //   container.current = document.getElementById(id) as HTMLElement;
+  // }, [isKeyboardFocus]);
 
-  useEventListener(
-    "keydown",
-    (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setVisible(false);
-        setTrigger(null);
-      }
-    },
-    { enabled: visible }
-  );
+  // useEventListener(
+  //   "keydown",
+  //   (event: KeyboardEvent) => {
+  //     if (event.key === "Escape") {
+  //       setVisible(false);
+  //       setTrigger(null);
+  //     }
+  //   },
+  //   { enabled: visible }
+  // );
 
@@ -70,0 +68,0 @@ useEffect(() => {

src/scssVariables.ts

@@ -21,3 +21,3 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-tooltip-transition-distance": "0.5rem",
-  "rmd-tooltip-position-values": "above below left right",
+  "rmd-tooltip-position-values": ["above", "below", "left", "right"],
   "rmd-tooltip-theme-values": {
@@ -24,0 +24,0 @@ "background-color": "#232f34",

src/utils.ts

@@ -31,3 +31,3 @@ import {
   if (position !== "auto") {
-    return position as TooltipPosition;
+    return position;
   } else if (!container) {
@@ -34,0 +34,0 @@ return "below";

types/constants.d.ts

 import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 export declare const TOOLTIP_CLASS_NAMES: CSSTransitionClassNames;
 export declare const TOOLTIP_TRANSITION_TIMEOUT: TransitionTimeout;
+export declare const DEFAULT_DELAY = 1000;

types/hooks.d.ts

 /// <reference types="react" />
+import { Maybe } from "@react-md/utils";
 import { TooltipConfig } from "./types.d";
@@ -8,3 +9,3 @@ export declare function useTooltipState(config: TooltipConfig): {
         style: import("react").CSSProperties | undefined;
-        onEnter: (node: HTMLSpanElement | null) => void;
+        onEnter: (node: Maybe<HTMLSpanElement, null>) => void;
     };
@@ -11,0 +12,0 @@ containerHandlers: {

types/utils.d.ts

@@ -10,4 +10,4 @@ import { Maybe } from "@react-md/utils";
     horizontalSpacing: string;
-    verticalPosition: "center" | "above" | "below";
+    verticalPosition: "above" | "below" | "center";
     verticalSpacing: string;
 };

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

137012

decreased by-75.73%

Number of package files

55

decreased by-5.17%

Lines of code

2002

decreased by-64.13%

Dependency changes

• - Removeddom-helpers@3.4.0(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

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

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

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

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

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

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

• Updatedreact-transition-group@^4.0.0