react-popper-tooltip - npm Package Compare versions

Comparing version 2.8.0-alpha.0 to 2.8.0

dist/cjs/react-popper-tooltip.js

@@ -26,5 +26,3 @@ 'use strict';
 };
-var noop = function noop() {
-  return undefined;
-};
+var noop = function noop() {};
 var canUseDOM = function canUseDOM() {
@@ -85,7 +83,12 @@ return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     _this.addOutsideClickHandler = function () {
-      return document.addEventListener('click', _this.handleOutsideClick);
+      if ('ontouchend' in window) {
+        document.addEventListener('touchend', _this.handleOutsideClick);
+      } else {
+        document.addEventListener('click', _this.handleOutsideClick);
+      }
     };
 
     _this.removeOutsideClickHandler = function () {
-      return document.removeEventListener('click', _this.handleOutsideClick);
+      document.removeEventListener('touchend', _this.handleOutsideClick);
+      document.removeEventListener('click', _this.handleOutsideClick);
     };
@@ -101,29 +104,25 @@
 
-    _this.getArrowProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getArrowProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        return _extends({}, props, {
-          ref: ref,
-          style: _extends({}, props.style, _this.props.arrowProps.style)
-        });
-      };
+      return _extends({}, props, {
+        style: _extends({}, props.style, _this.props.arrowProps.style)
+      });
     };
 
-    _this.getTooltipProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getTooltipProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        var isHoverTriggered = _this.props.trigger === 'hover';
-        return _extends({}, props, {
-          onMouseEnter: callAll(isHoverTriggered && _this.props.clearScheduled, props.onMouseEnter),
-          onMouseLeave: callAll(isHoverTriggered && _this.props.hideTooltip, props.onMouseLeave),
-          ref: ref,
-          style: _extends({}, props.style, _this.props.style)
-        });
-      };
+      var isHoverTriggered = _this.props.trigger === 'hover';
+      return _extends({}, props, isHoverTriggered && {
+        onMouseEnter: callAll(_this.props.clearScheduled, props.onMouseEnter)
+      }, isHoverTriggered && {
+        onMouseLeave: callAll(_this.props.hideTooltip, props.onMouseLeave)
+      }, {
+        style: _extends({}, props.style, _this.props.style)
+      });
     };
@@ -210,5 +209,7 @@
     }, tooltip({
-      getArrowProps: this.getArrowProps(arrowProps.ref),
-      getTooltipProps: this.getTooltipProps(innerRef),
-      placement: placement
+      arrowRef: arrowProps.ref,
+      getArrowProps: this.getArrowProps,
+      getTooltipProps: this.getTooltipProps,
+      placement: placement,
+      tooltipRef: innerRef
     }));
@@ -240,4 +241,2 @@ };
     _this.state = {
-      pageX: undefined,
-      pageY: undefined,
       tooltipShown: _this.props.defaultTooltipShown
@@ -327,23 +326,27 @@ };
 
-    _this.getTriggerProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getTriggerProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        var _this$props = _this.props,
-            trigger = _this$props.trigger,
-            followCursor = _this$props.followCursor;
-        var isClickTriggered = trigger === 'click';
-        var isHoverTriggered = trigger === 'hover';
-        var isRightClickTriggered = trigger === 'right-click';
-        return _extends({}, props, {
-          onClick: callAll(isClickTriggered && _this.clickToggle, props.onClick),
-          onContextMenu: callAll(isRightClickTriggered && _this.contextMenuToggle, props.onContextMenu),
-          onMouseEnter: callAll(isHoverTriggered && _this.showTooltip, props.onMouseEnter),
-          onMouseLeave: callAll(isHoverTriggered && _this.hideTooltip, props.onMouseLeave),
-          onMouseMove: callAll(isHoverTriggered && followCursor && _this.showTooltip, props.onMouseMove),
-          ref: ref
-        });
-      };
+      var _this$props = _this.props,
+          trigger = _this$props.trigger,
+          followCursor = _this$props.followCursor;
+      var isClickTriggered = trigger === 'click';
+      var isHoverTriggered = trigger === 'hover';
+      var isRightClickTriggered = trigger === 'right-click';
+      var isTouchEnabled = canUseDOM() && 'ontouchend' in window;
+      return _extends({}, props, isClickTriggered && isTouchEnabled && {
+        onTouchEnd: callAll(_this.clickToggle, props.onTouchEnd)
+      }, isClickTriggered && !isTouchEnabled && {
+        onClick: callAll(_this.clickToggle, props.onClick)
+      }, isRightClickTriggered && {
+        onContextMenu: callAll(_this.contextMenuToggle, props.onContextMenu)
+      }, isHoverTriggered && {
+        onMouseEnter: callAll(_this.showTooltip, props.onMouseEnter)
+      }, isHoverTriggered && {
+        onMouseLeave: callAll(_this.hideTooltip, props.onMouseLeave)
+      }, isHoverTriggered && followCursor && {
+        onMouseMove: callAll(_this.showTooltip, props.onMouseMove)
+      });
     };
@@ -373,3 +376,4 @@
         portalContainer = _this$props2.portalContainer,
-        followCursor = _this$props2.followCursor;
+        followCursor = _this$props2.followCursor,
+        getTooltipRef = _this$props2.getTooltipRef;
     var _this$context = this.context,
@@ -383,2 +387,3 @@ parentOutsideClickHandler = _this$context.parentOutsideClickHandler,
     var popper = React.createElement(reactPopper.Popper, {
+      innerRef: getTooltipRef,
       placement: placement,
@@ -427,3 +432,4 @@ modifiers: _extends({}, DEFAULT_MODIFIERS, modifiers)
       return children({
-        getTriggerProps: _this2.getTriggerProps(ref)
+        getTriggerProps: _this2.getTriggerProps,
+        triggerRef: ref
       });
@@ -430,0 +436,0 @@ }), this.getState() && (usePortal ? reactDom.createPortal(popper, portalContainer) : popper));

dist/esm/react-popper-tooltip.js

@@ -24,5 +24,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 };
-var noop = function noop() {
-  return undefined;
-};
+var noop = function noop() {};
 var canUseDOM = function canUseDOM() {
@@ -83,7 +81,12 @@ return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     _this.addOutsideClickHandler = function () {
-      return document.addEventListener('click', _this.handleOutsideClick);
+      if ('ontouchend' in window) {
+        document.addEventListener('touchend', _this.handleOutsideClick);
+      } else {
+        document.addEventListener('click', _this.handleOutsideClick);
+      }
     };
 
     _this.removeOutsideClickHandler = function () {
-      return document.removeEventListener('click', _this.handleOutsideClick);
+      document.removeEventListener('touchend', _this.handleOutsideClick);
+      document.removeEventListener('click', _this.handleOutsideClick);
     };
@@ -99,29 +102,25 @@
 
-    _this.getArrowProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getArrowProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        return _extends({}, props, {
-          ref: ref,
-          style: _extends({}, props.style, _this.props.arrowProps.style)
-        });
-      };
+      return _extends({}, props, {
+        style: _extends({}, props.style, _this.props.arrowProps.style)
+      });
     };
 
-    _this.getTooltipProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getTooltipProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        var isHoverTriggered = _this.props.trigger === 'hover';
-        return _extends({}, props, {
-          onMouseEnter: callAll(isHoverTriggered && _this.props.clearScheduled, props.onMouseEnter),
-          onMouseLeave: callAll(isHoverTriggered && _this.props.hideTooltip, props.onMouseLeave),
-          ref: ref,
-          style: _extends({}, props.style, _this.props.style)
-        });
-      };
+      var isHoverTriggered = _this.props.trigger === 'hover';
+      return _extends({}, props, isHoverTriggered && {
+        onMouseEnter: callAll(_this.props.clearScheduled, props.onMouseEnter)
+      }, isHoverTriggered && {
+        onMouseLeave: callAll(_this.props.hideTooltip, props.onMouseLeave)
+      }, {
+        style: _extends({}, props.style, _this.props.style)
+      });
     };
@@ -208,5 +207,7 @@
     }, tooltip({
-      getArrowProps: this.getArrowProps(arrowProps.ref),
-      getTooltipProps: this.getTooltipProps(innerRef),
-      placement: placement
+      arrowRef: arrowProps.ref,
+      getArrowProps: this.getArrowProps,
+      getTooltipProps: this.getTooltipProps,
+      placement: placement,
+      tooltipRef: innerRef
     }));
@@ -238,4 +239,2 @@ };
     _this.state = {
-      pageX: undefined,
-      pageY: undefined,
       tooltipShown: _this.props.defaultTooltipShown
@@ -325,23 +324,27 @@ };
 
-    _this.getTriggerProps = function (ref) {
-      return function (props) {
-        if (props === void 0) {
-          props = {};
-        }
+    _this.getTriggerProps = function (props) {
+      if (props === void 0) {
+        props = {};
+      }
 
-        var _this$props = _this.props,
-            trigger = _this$props.trigger,
-            followCursor = _this$props.followCursor;
-        var isClickTriggered = trigger === 'click';
-        var isHoverTriggered = trigger === 'hover';
-        var isRightClickTriggered = trigger === 'right-click';
-        return _extends({}, props, {
-          onClick: callAll(isClickTriggered && _this.clickToggle, props.onClick),
-          onContextMenu: callAll(isRightClickTriggered && _this.contextMenuToggle, props.onContextMenu),
-          onMouseEnter: callAll(isHoverTriggered && _this.showTooltip, props.onMouseEnter),
-          onMouseLeave: callAll(isHoverTriggered && _this.hideTooltip, props.onMouseLeave),
-          onMouseMove: callAll(isHoverTriggered && followCursor && _this.showTooltip, props.onMouseMove),
-          ref: ref
-        });
-      };
+      var _this$props = _this.props,
+          trigger = _this$props.trigger,
+          followCursor = _this$props.followCursor;
+      var isClickTriggered = trigger === 'click';
+      var isHoverTriggered = trigger === 'hover';
+      var isRightClickTriggered = trigger === 'right-click';
+      var isTouchEnabled = canUseDOM() && 'ontouchend' in window;
+      return _extends({}, props, isClickTriggered && isTouchEnabled && {
+        onTouchEnd: callAll(_this.clickToggle, props.onTouchEnd)
+      }, isClickTriggered && !isTouchEnabled && {
+        onClick: callAll(_this.clickToggle, props.onClick)
+      }, isRightClickTriggered && {
+        onContextMenu: callAll(_this.contextMenuToggle, props.onContextMenu)
+      }, isHoverTriggered && {
+        onMouseEnter: callAll(_this.showTooltip, props.onMouseEnter)
+      }, isHoverTriggered && {
+        onMouseLeave: callAll(_this.hideTooltip, props.onMouseLeave)
+      }, isHoverTriggered && followCursor && {
+        onMouseMove: callAll(_this.showTooltip, props.onMouseMove)
+      });
     };
@@ -371,3 +374,4 @@
         portalContainer = _this$props2.portalContainer,
-        followCursor = _this$props2.followCursor;
+        followCursor = _this$props2.followCursor,
+        getTooltipRef = _this$props2.getTooltipRef;
     var _this$context = this.context,
@@ -381,2 +385,3 @@ parentOutsideClickHandler = _this$context.parentOutsideClickHandler,
     var popper = React.createElement(Popper, {
+      innerRef: getTooltipRef,
       placement: placement,
@@ -425,3 +430,4 @@ modifiers: _extends({}, DEFAULT_MODIFIERS, modifiers)
       return children({
-        getTriggerProps: _this2.getTriggerProps(ref)
+        getTriggerProps: _this2.getTriggerProps,
+        triggerRef: ref
       });
@@ -428,0 +434,0 @@ }), this.getState() && (usePortal ? createPortal(popper, portalContainer) : popper));

dist/TooltipTrigger.d.ts

@@ -10,3 +10,3 @@ import React, { Component } from 'react';
         followCursor: boolean;
-        onVisibilityChange: () => undefined;
+        onVisibilityChange: () => void;
         placement: string;
@@ -18,7 +18,3 @@ portalContainer: HTMLElement | null;
     static contextType: React.Context<{}>;
-    state: {
-        pageX: undefined;
-        pageY: undefined;
-        tooltipShown: boolean;
-    };
+    state: ITooltipTriggerState;
     private hideTimeout?;
@@ -25,0 +21,0 @@ private showTimeout?;

dist/types.d.ts

@@ -5,2 +5,3 @@ import PopperJS from 'popper.js';
 export interface IGetTriggerPropsArg {
+    onTouchEnd?(event: React.SyntheticEvent): void;
     onClick?(event: React.SyntheticEvent): void;
@@ -24,5 +25,8 @@ onContextMenu?(event: React.SyntheticEvent): void;
 export interface IChildrenArg {
+    triggerRef: ReactPopper.RefHandler;
     getTriggerProps(arg?: IGetTriggerPropsArg): any;
 }
 export interface ITooltipArg {
+    arrowRef: ReactPopper.RefHandler;
+    tooltipRef: ReactPopper.RefHandler;
     placement: PopperJS.Placement;
@@ -34,3 +38,3 @@ getArrowProps(arg?: IGetArrowPropsArg): IGetArrowPropsArg;
     /**
-     * whether to close the tooltip when it's trigger is out of the boundary
+     * Whether to close the tooltip when it's trigger is out of the boundary
      * @default true
@@ -40,3 +44,3 @@ */
     /**
-     * whether tooltip is shown by default
+     * Whether tooltip is shown by default
      * @default false
@@ -46,3 +50,3 @@ */
     /**
-     * delay in hiding the tooltip
+     * Delay in hiding the tooltip
      * @default 0
@@ -52,3 +56,3 @@ */
     /**
-     * delay in showing the tooltip
+     * Delay in showing the tooltip
      * @default 0
@@ -58,3 +62,3 @@ */
     /**
-     * whether to make the tooltip spawn at cursor position
+     * Whether to make the tooltip spawn at cursor position
      * @default false
@@ -64,7 +68,11 @@ */
     /**
-     * function that can be used to obtain a trigger element reference
+     * Function that can be used to obtain a tooltip element reference
      */
+    getTooltipRef?: ReactPopper.RefHandler;
+    /**
+     * Function that can be used to obtain a trigger element reference
+     */
     getTriggerRef?: ReactPopper.RefHandler;
     /**
-     * modifiers passed directly to the underlying popper.js instance
+     * Modifiers passed directly to the underlying popper.js instance
      * For more information, refer to Popper.js’ modifier docs:
@@ -75,11 +83,3 @@ * @link https://popper.js.org/popper-documentation.html#modifiers
     /**
-     * Popper’s placement. Valid placements are:
-     *  - auto
-     *  - top
-     *  - right
-     *  - bottom
-     *  - left
-     * Each placement can have a variation from this list:
-     *  -start
-     *  -end
+     * Tooltip placement w.r.t. trigger
      *  @default right
@@ -89,3 +89,3 @@ */
     /**
-     * element to be used as portal container
+     * Element to be used as portal container
      * @default document.body
@@ -95,7 +95,7 @@ */
     /**
-     * use to create controlled tooltip
+     * Used to create controlled tooltip
      */
     tooltipShown?: boolean;
     /**
-     * the event that triggers the tooltip
+     * Event that triggers the tooltip
      * @default hover
@@ -105,18 +105,19 @@ */
     /**
-     * whether to use React.createPortal for creating tooltip
+     * Whether to use React.createPortal for creating tooltip
+     * @default true // for browser environments
      */
     usePortal: boolean;
     /**
-     * trigger
+     * Trigger
      */
-    children(arg: IChildrenArg): JSX.Element;
+    children(arg: IChildrenArg): React.ReactNode;
     /**
-     * сalled when the visibility of the tooltip changes
-     * @default noop
+     * Called when the visibility of the tooltip changes
+     * @default no-op
      */
     onVisibilityChange(tooltipShown: boolean): void;
     /**
-     * tooltip
+     * Tooltip
      */
-    tooltip(arg: ITooltipArg): JSX.Element;
+    tooltip(arg: ITooltipArg): React.ReactNode;
 }
@@ -144,4 +145,4 @@ export interface ITooltipTriggerState {
     removeParentOutsideClickHandler(): void;
-    tooltip(arg: ITooltipArg): JSX.Element;
+    tooltip(arg: ITooltipArg): React.ReactNode;
     scheduleUpdate(): void;
 }

dist/utils.d.ts

 import React from 'react';
 export declare const TooltipContext: React.Context<{}>;
 declare type Fn = (...args: any[]) => void;
-declare type FnOrBool = boolean | undefined | (Fn);
+declare type FnOrBool = undefined | Fn;
 export declare const callAll: (...fns: FnOrBool[]) => (...args: any[]) => void;
-export declare const noop: () => undefined;
+export declare const noop: () => void;
 export declare const canUseDOM: () => boolean;
 export {};

package.json

 {
   "name": "react-popper-tooltip",
-  "version": "2.8.0-alpha.0",
+  "version": "2.8.0",
   "description": "React tooltip library built around react-popper",
@@ -26,3 +26,3 @@ "homepage": "https://mohsinulhaq.github.io/react-popper-tooltip/",
     "docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist",
-    "typecheck": "tsc --noEmit true",
+    "typecheck": "tsc --noEmit",
     "lint": "tslint -p .",
@@ -62,3 +62,3 @@ "test": "jest"
     "@babel/preset-typescript": "^7.1.0",
-    "@types/jest": "^23.3.11",
+    "@types/jest": "^23.3.12",
     "@types/react": "^16.7.18",
@@ -81,7 +81,9 @@ "@types/react-dom": "^16.0.11",
     "rollup": "^0.68.2",
-    "rollup-plugin-babel": "^4.2.0",
+    "rollup-plugin-babel": "^4.3.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-size-snapshot": "^0.7.0",
-    "tslint": "^5.12.0",
+    "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-plugin-prettier": "^2.0.1",
     "tslint-react": "^3.6.0",
@@ -88,0 +90,0 @@ "typescript": "^3.2.2"

README.md

@@ -37,5 +37,12 @@ # React Tooltip
 
-const Tooltip = ({getTooltipProps, getArrowProps, placement}) => (
+const Tooltip = ({
+  arrowRef,
+  tooltipRef,
+  getArrowProps,
+  getTooltipProps,
+  placement
+}) => (
   <div
     {...getTooltipProps({
+      ref: tooltipRef,
       className: 'tooltip-container'
@@ -47,4 +54,5 @@ /* your props here */
       {...getArrowProps({
-        'data-placement': placement,
-        className: 'tooltip-arrow'
+        ref: arrowRef,
+        className: 'tooltip-arrow',
+        'data-placement': placement
         /* your props here */
@@ -57,3 +65,3 @@ })}
 
-const Trigger = ({getTriggerProps}) => (
+const Trigger = ({getTriggerProps, triggerRef}) => (
   <span
@@ -93,8 +101,15 @@ {...getTriggerProps({
 
-const Tooltip = ({tooltip, children, hideArrow, ...props}) => (
+const Tooltip = ({children, tooltip, hideArrow, ...props}) => (
   <TooltipTrigger
     {...props}
-    tooltip={({getTooltipProps, getArrowProps, placement}) => (
+    tooltip={({
+      arrowRef,
+      tooltipRef,
+      getArrowProps,
+      getTooltipProps,
+      placement
+    }) => (
       <div
         {...getTooltipProps({
+          ref: tooltipRef,
           className: 'tooltip-container'
@@ -106,4 +121,5 @@ })}
             {...getArrowProps({
-              'data-placement': placement,
-              className: 'tooltip-arrow'
+              ref: arrowRef,
+              className: 'tooltip-arrow',
+              'data-placement': placement
             })}
@@ -116,5 +132,6 @@ />
   >
-    {({getTriggerProps}) => (
+    {({getTriggerProps, triggerRef}) => (
       <span
         {...getTriggerProps({
+          ref: triggerRef,
           className: 'trigger'
@@ -313,2 +330,3 @@ })}
 | --------------- | -------------- | --------------------------------------------------------------------- |
+| triggerRef      | `function ref` | returns the react ref you should apply to the trigger element.        |
 | getTriggerProps | `function({})` | returns the props you should apply to the trigger element you render. |
@@ -320,5 +338,7 @@
 | --------------- | -------------- | --------------------------------------------------------------------- |
+| arrowRef        | `function ref` | return the react ref you should apply to the tooltip arrow element.   |
+| tooltipRef      | `function ref` | return the react ref you should apply to the tooltip element.         |
+| getArrowProps   | `function({})` | return the props you should apply to the tooltip arrow element.       |
 | getTooltipProps | `function({})` | returns the props you should apply to the tooltip element you render. |
-| getArrowProps   | `function({})` | return the props you should apply to the tooltip arrow element.       |
-| placement       | `string`       | return the placement of the tooltip.                                  |
+| placement       | `string`       | return the dynamic placement of the tooltip.                          |
 
@@ -325,0 +345,0 @@ ## Inspiration and Thanks!

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

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95862

increased by2.78%

Lines of code

1065

increased by0.85%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

344

increased by6.17%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

34

increased by6.25%

No dependency changes