@reach/tooltip - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

es/index.js

@@ -129,5 +129,6 @@ var _states;
   // console.log({ action, state, nextState, contextId: context.id });
+  // !nextState && console.log('no transition taken')
 
   if (!nextState) {
-    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
+    return;
   }
@@ -213,3 +214,3 @@
 } ////////////////////////////////////////////////////////////////////////////////
-// THE HOOK! It's about time we got to the goods!
+// useTooltip
 
@@ -252,25 +253,25 @@
   });
+  useEffect(function () {
+    var listener = function listener(event) {
+      if ((event.key === "Escape" || event.key === "Esc") && state === VISIBLE) {
+        transition("selectWithKeyboard");
+      }
+    };
 
+    document.addEventListener("keydown", listener);
+    return function () {
+      return document.removeEventListener("keydown", listener);
+    };
+  }, []);
+
   var handleMouseEnter = function handleMouseEnter() {
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE:
-        {
-          transition("mouseenter", {
-            id: id
-          });
-        }
-    }
+    transition("mouseenter", {
+      id: id
+    });
   };
 
   var handleMouseMove = function handleMouseMove() {
-    switch (state) {
-      case FOCUSED:
-        {
-          transition("mousemove", {
-            id: id
-          });
-        }
-    }
+    transition("mousemove", {
+      id: id
+    });
   };
@@ -280,24 +281,9 @@
     if (window.__REACH_DISABLE_TOOLTIPS) return;
-
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE:
-        {
-          transition("focus", {
-            id: id
-          });
-        }
-    }
+    transition("focus", {
+      id: id
+    });
   };
 
   var handleMouseLeave = function handleMouseLeave() {
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED:
-        {
-          transition("mouseleave");
-        }
-    }
+    transition("mouseleave");
   };
@@ -308,11 +294,3 @@
     if (context.id !== id) return;
-
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED:
-        {
-          transition("blur");
-        }
-    }
+    transition("blur");
   };
@@ -323,20 +301,8 @@
     if (context.id !== id) return;
-
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-        {
-          transition("mousedown");
-        }
-    }
+    transition("mousedown");
   };
 
   var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " || event.key === "Escape") {
-      switch (state) {
-        case VISIBLE:
-          {
-            transition("selectWithKeyboard");
-          }
-      }
+    if (event.key === "Enter" || event.key === " ") {
+      transition("selectWithKeyboard");
     }
@@ -364,4 +330,5 @@ };
 } ////////////////////////////////////////////////////////////////////////////////
+// Tooltip
 
-function Tooltip(_ref2) {
+export function Tooltip(_ref2) {
   var children = _ref2.children,
@@ -397,2 +364,3 @@ label = _ref2.label,
 }
+Tooltip.displayName = "Tooltip";
 
@@ -405,6 +373,6 @@ if (process.env.NODE_ENV !== "production") {
   };
-  Tooltip.displayName = "Tooltip";
 }
 
 export default Tooltip; ////////////////////////////////////////////////////////////////////////////////
+// TooltipPopup
 
@@ -430,2 +398,3 @@ export var TooltipPopup = forwardRef(function TooltipPopup(_ref3, forwardRef) {
 });
+TooltipPopup.displayName = "TooltipPopup";
 
@@ -438,4 +407,5 @@ if (process.env.NODE_ENV !== "production") {
   };
-  TooltipPopup.displayName = "TooltipPopup";
-} // Need a separate component so that useRect works inside the portal
+} ////////////////////////////////////////////////////////////////////////////////
+// TooltipContent
+// Need a separate component so that useRect works inside the portal
 
@@ -470,7 +440,8 @@
 });
+TooltipContent.displayName = "TooltipContent";
 
 if (process.env.NODE_ENV !== "production") {
   TooltipContent.propTypes = {};
-  TooltipContent.displayName = "TooltipContent";
-} // feels awkward when it's perfectly aligned w/ the trigger
+} ////////////////////////////////////////////////////////////////////////////////
+// feels awkward when it's perfectly aligned w/ the trigger
 
@@ -480,3 +451,3 @@
 
-var getStyles = function getStyles(position, triggerRect, tooltipRect) {
+function getStyles(position, triggerRect, tooltipRect) {
   var haventMeasuredTooltipYet = !tooltipRect;
@@ -491,5 +462,5 @@
   return position(triggerRect, tooltipRect);
-};
+}
 
-var positionDefault = function positionDefault(triggerRect, tooltipRect) {
+function positionDefault(triggerRect, tooltipRect) {
   var collisions = {
@@ -507,2 +478,2 @@ top: triggerRect.top - tooltipRect.height < 0,
   };
-};
+}

index.d.ts

@@ -40,3 +40,3 @@ /**
   ariaLabel?: string;
-  position?: (position1: DOMRect, position2: DOMRect) => DOMRect;
+  position?: (position1: DOMRect, position2: DOMRect) => Partial<DOMRect>;
   label: React.ReactNode;
@@ -43,0 +43,0 @@ } & Omit<React.HTMLProps<HTMLDivElement>, "label">;

index.js

@@ -5,2 +5,3 @@ "use strict";
 exports.useTooltip = useTooltip;
+exports.Tooltip = Tooltip;
 exports.TooltipPopup = exports["default"] = void 0;
@@ -113,5 +114,6 @@
   // console.log({ action, state, nextState, contextId: context.id });
+  // !nextState && console.log('no transition taken')
 
   if (!nextState) {
-    throw new Error("Unknown state for action \"" + action + "\" from state \"" + state + "\"");
+    return;
   }
@@ -197,3 +199,3 @@
 } ////////////////////////////////////////////////////////////////////////////////
-// THE HOOK! It's about time we got to the goods!
+// useTooltip
 
@@ -236,25 +238,25 @@
   });
+  (0, _react.useEffect)(function () {
+    var listener = function listener(event) {
+      if ((event.key === "Escape" || event.key === "Esc") && state === VISIBLE) {
+        transition("selectWithKeyboard");
+      }
+    };
 
+    document.addEventListener("keydown", listener);
+    return function () {
+      return document.removeEventListener("keydown", listener);
+    };
+  }, []);
+
   var handleMouseEnter = function handleMouseEnter() {
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE:
-        {
-          transition("mouseenter", {
-            id: id
-          });
-        }
-    }
+    transition("mouseenter", {
+      id: id
+    });
   };
 
   var handleMouseMove = function handleMouseMove() {
-    switch (state) {
-      case FOCUSED:
-        {
-          transition("mousemove", {
-            id: id
-          });
-        }
-    }
+    transition("mousemove", {
+      id: id
+    });
   };
@@ -264,24 +266,9 @@
     if (window.__REACH_DISABLE_TOOLTIPS) return;
-
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE:
-        {
-          transition("focus", {
-            id: id
-          });
-        }
-    }
+    transition("focus", {
+      id: id
+    });
   };
 
   var handleMouseLeave = function handleMouseLeave() {
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED:
-        {
-          transition("mouseleave");
-        }
-    }
+    transition("mouseleave");
   };
@@ -292,11 +279,3 @@
     if (context.id !== id) return;
-
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED:
-        {
-          transition("blur");
-        }
-    }
+    transition("blur");
   };
@@ -307,20 +286,8 @@
     if (context.id !== id) return;
-
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-        {
-          transition("mousedown");
-        }
-    }
+    transition("mousedown");
   };
 
   var handleKeyDown = function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " || event.key === "Escape") {
-      switch (state) {
-        case VISIBLE:
-          {
-            transition("selectWithKeyboard");
-          }
-      }
+    if (event.key === "Enter" || event.key === " ") {
+      transition("selectWithKeyboard");
     }
@@ -348,2 +315,3 @@ };
 } ////////////////////////////////////////////////////////////////////////////////
+// Tooltip
 
@@ -384,2 +352,4 @@
 
+Tooltip.displayName = "Tooltip";
+
 if (process.env.NODE_ENV !== "production") {
@@ -391,6 +361,6 @@ Tooltip.propTypes = {
   };
-  Tooltip.displayName = "Tooltip";
 }
 
 var _default = Tooltip; ////////////////////////////////////////////////////////////////////////////////
+// TooltipPopup
 
@@ -418,2 +388,3 @@ exports["default"] = _default;
 exports.TooltipPopup = TooltipPopup;
+TooltipPopup.displayName = "TooltipPopup";
 
@@ -426,4 +397,5 @@ if (process.env.NODE_ENV !== "production") {
   };
-  TooltipPopup.displayName = "TooltipPopup";
-} // Need a separate component so that useRect works inside the portal
+} ////////////////////////////////////////////////////////////////////////////////
+// TooltipContent
+// Need a separate component so that useRect works inside the portal
 
@@ -458,7 +430,8 @@
 });
+TooltipContent.displayName = "TooltipContent";
 
 if (process.env.NODE_ENV !== "production") {
   TooltipContent.propTypes = {};
-  TooltipContent.displayName = "TooltipContent";
-} // feels awkward when it's perfectly aligned w/ the trigger
+} ////////////////////////////////////////////////////////////////////////////////
+// feels awkward when it's perfectly aligned w/ the trigger
 
@@ -468,3 +441,3 @@
 
-var getStyles = function getStyles(position, triggerRect, tooltipRect) {
+function getStyles(position, triggerRect, tooltipRect) {
   var haventMeasuredTooltipYet = !tooltipRect;
@@ -479,5 +452,5 @@
   return position(triggerRect, tooltipRect);
-};
+}
 
-var positionDefault = function positionDefault(triggerRect, tooltipRect) {
+function positionDefault(triggerRect, tooltipRect) {
   var collisions = {
@@ -495,2 +468,2 @@ top: triggerRect.top - tooltipRect.height < 0,
   };
-};
+}

package.json

 {
   "name": "@reach/tooltip",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Accessible tooltips",
@@ -12,6 +12,6 @@ "main": "index.js",
     "@reach/auto-id": "^0.6.1",
-    "@reach/portal": "^0.6.1",
-    "@reach/rect": "^0.6.1",
+    "@reach/portal": "^0.6.2",
+    "@reach/rect": "^0.6.2",
     "@reach/utils": "^0.6.1",
-    "@reach/visually-hidden": "^0.6.1",
+    "@reach/visually-hidden": "^0.6.2",
     "prop-types": "^15.7.2"
@@ -23,5 +23,2 @@ },
   },
-  "devDependencies": {
-    "react-spring": "^8.0.27"
-  },
   "author": "React Training <[e-mail]>",
@@ -37,3 +34,3 @@ "license": "MIT",
   ],
-  "gitHead": "c1e249448a3672ccc65698218f0f38ef9814ab90"
+  "gitHead": "00e73c5da6d25f50194612f74de71156fde2a80a"
 }

src/index.js

@@ -147,7 +147,6 @@ ////////////////////////////////////////////////////////////////////////////////
   // console.log({ action, state, nextState, contextId: context.id });
+  // !nextState && console.log('no transition taken')
 
   if (!nextState) {
-    throw new Error(
-      `Unknown state for action "${action}" from state "${state}"`
-    );
+    return;
   }
@@ -229,3 +228,4 @@
 ////////////////////////////////////////////////////////////////////////////////
-// THE HOOK! It's about time we got to the goods!
+// useTooltip
+
 export function useTooltip({
@@ -273,18 +273,21 @@ id: idProp,
 
+  useEffect(() => {
+    const listener = event => {
+      if (
+        (event.key === "Escape" || event.key === "Esc") &&
+        state === VISIBLE
+      ) {
+        transition("selectWithKeyboard");
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, []);
+
   const handleMouseEnter = () => {
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE: {
-        transition("mouseenter", { id });
-      }
-    }
+    transition("mouseenter", { id });
   };
 
   const handleMouseMove = () => {
-    switch (state) {
-      case FOCUSED: {
-        transition("mousemove", { id });
-      }
-    }
+    transition("mousemove", { id });
   };
@@ -294,19 +297,7 @@
     if (window.__REACH_DISABLE_TOOLTIPS) return;
-    switch (state) {
-      case IDLE:
-      case VISIBLE:
-      case LEAVING_VISIBLE: {
-        transition("focus", { id });
-      }
-    }
+    transition("focus", { id });
   };
 
   const handleMouseLeave = () => {
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED: {
-        transition("mouseleave");
-      }
-    }
+    transition("mouseleave");
   };
@@ -317,9 +308,3 @@
     if (context.id !== id) return;
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE:
-      case DISMISSED: {
-        transition("blur");
-      }
-    }
+    transition("blur");
   };
@@ -330,17 +315,8 @@
     if (context.id !== id) return;
-    switch (state) {
-      case FOCUSED:
-      case VISIBLE: {
-        transition("mousedown");
-      }
-    }
+    transition("mousedown");
   };
 
   const handleKeyDown = event => {
-    if (event.key === "Enter" || event.key === " " || event.key === "Escape") {
-      switch (state) {
-        case VISIBLE: {
-          transition("selectWithKeyboard");
-        }
-      }
+    if (event.key === "Enter" || event.key === " ") {
+      transition("selectWithKeyboard");
     }
@@ -372,3 +348,12 @@ };
 ////////////////////////////////////////////////////////////////////////////////
-function Tooltip({ children, label, ariaLabel, id, DEBUG_STYLE, ...rest }) {
+// Tooltip
+
+export function Tooltip({
+  children,
+  label,
+  ariaLabel,
+  id,
+  DEBUG_STYLE,
+  ...rest
+}) {
   const child = Children.only(children);
@@ -403,2 +388,3 @@
 
+Tooltip.displayName = "Tooltip";
 if (__DEV__) {
@@ -410,3 +396,2 @@ Tooltip.propTypes = {
   };
-  Tooltip.displayName = "Tooltip";
 }
@@ -417,2 +402,4 @@
 ////////////////////////////////////////////////////////////////////////////////
+// TooltipPopup
+
 export const TooltipPopup = forwardRef(function TooltipPopup(
@@ -449,2 +436,3 @@ {
 
+TooltipPopup.displayName = "TooltipPopup";
 if (__DEV__) {
@@ -456,6 +444,8 @@ TooltipPopup.propTypes = {
   };
-  TooltipPopup.displayName = "TooltipPopup";
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// TooltipContent
 // Need a separate component so that useRect works inside the portal
+
 const TooltipContent = forwardRef(function TooltipContent(
@@ -501,11 +491,13 @@ {
 
+TooltipContent.displayName = "TooltipContent";
 if (__DEV__) {
   TooltipContent.propTypes = {};
-  TooltipContent.displayName = "TooltipContent";
 }
 
+////////////////////////////////////////////////////////////////////////////////
+
 // feels awkward when it's perfectly aligned w/ the trigger
 const OFFSET = 8;
 
-const getStyles = (position, triggerRect, tooltipRect) => {
+function getStyles(position, triggerRect, tooltipRect) {
   const haventMeasuredTooltipYet = !tooltipRect;
@@ -516,5 +508,5 @@ if (haventMeasuredTooltipYet) {
   return position(triggerRect, tooltipRect);
-};
+}
 
-const positionDefault = (triggerRect, tooltipRect) => {
+function positionDefault(triggerRect, tooltipRect) {
   const collisions = {
@@ -545,2 +537,2 @@ top: triggerRect.top - tooltipRect.height < 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

Dev dependency count

0

decreased by-100%

Worsened metrics

Total package byte prevSize

48340

decreased by-1.61%

Lines of code

1310

decreased by-4.87%

Dependency changes

• Updated@reach/portal@^0.6.2

• Updated@reach/rect@^0.6.2

• Updated@reach/visually-hidden@^0.6.2