Merge branch 'master' into add_padding_props

Author: pvcresin

.eslintrc

@@ -1,24 +1,16 @@
 {
   "parser": "babel-eslint",
-  "extends": [
-    "standard",
-    "standard-react",
-    "prettier",
-    "eslint:recommended"
-  ],
+  "extends": ["standard", "standard-react", "prettier", "eslint:recommended"],
   "env": {
     "es6": true,
     "jest": true
   },
-  "plugins": [
-    "react",
-    "prettier"
-  ],
+  "plugins": ["react", "prettier"],
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2018,
     "ecmaFeatures": {
-      "impliedStrict": true, 
+      "impliedStrict": true,
       "jsx": true,
       "arrowFunctions": true,
       "blockBindings": true,
@@ -38,13 +30,15 @@
     }
   },
   "rules": {
+    "react/jsx-no-bind": "off",
     "space-before-function-paren": 0,
     "react/jsx-boolean-value": 0,
-    "max-len": [2, {"code":120,"ignoreComments":true}],
-    "newline-per-chained-call": 0, 
+    "max-len": [2, { "code": 120, "ignoreComments": true }],
+    "newline-per-chained-call": 0,
     "no-trailing-spaces": ["error"],
-    "quotes": ["error", "double", { "avoidEscape": true }],
+    "quotes": ["error", "single", { "avoidEscape": true }],
     "comma-dangle": ["error", "never"],
+    "no-template-curly-in-string": "off",
     "semi": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "quote-props": ["error", "consistent"],

.prettierrc.js

@@ -0,0 +1,11 @@
+// prettier.config.js or .prettierrc.js
+module.exports = {
+  singleQuote: true,
+  trailingComma: "none",
+  tabWidth: 2,
+  printWidth: 80,
+  semi: true,
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  endOfLine: "lf"
+};

.travis.yml

@@ -3,7 +3,7 @@ cache:
   directories:
     - node_modules
 node_js:
-  - 11
+  - 12
 notifications:
   email:
     recipients:
@@ -21,6 +21,7 @@ script:
   - yarn
   - yarn build
   - cd ..
+  - commitlint-travis
 
 after_success:
   - yarn semantic-release

CHANGELOG.md

@@ -1,3 +1,59 @@
+## [4.2.15](https://github.com/wwayne/react-tooltip/compare/v4.2.14...v4.2.15) (2021-02-26)
+
+
+### Bug Fixes
+
+* do not delay show if tooltip is already shown ([#676](https://github.com/wwayne/react-tooltip/issues/676)) ([e8b9d84](https://github.com/wwayne/react-tooltip/commit/e8b9d84))
+
+## [4.2.14](https://github.com/wwayne/react-tooltip/compare/v4.2.13...v4.2.14) (2021-02-16)
+
+
+### Bug Fixes
+
+* **styles:** change style injection way ([#668](https://github.com/wwayne/react-tooltip/issues/668)) ([1e10cce](https://github.com/wwayne/react-tooltip/commit/1e10cce)), closes [#650](https://github.com/wwayne/react-tooltip/issues/650)
+
+## [4.2.13](https://github.com/wwayne/react-tooltip/compare/v4.2.12...v4.2.13) (2021-01-15)
+
+
+### Bug Fixes
+
+* **domexception:** revert previous changed for unexpected behavior ([85e38bb](https://github.com/wwayne/react-tooltip/commit/85e38bb)), closes [#667](https://github.com/wwayne/react-tooltip/issues/667)
+
+## [4.2.12](https://github.com/wwayne/react-tooltip/compare/v4.2.11...v4.2.12) (2021-01-14)
+
+
+### Bug Fixes
+
+* **style injection:** change style injection default root ([a00c5b7](https://github.com/wwayne/react-tooltip/commit/a00c5b7)), closes [#665](https://github.com/wwayne/react-tooltip/issues/665)
+
+## [4.2.11](https://github.com/wwayne/react-tooltip/compare/v4.2.10...v4.2.11) (2020-11-22)
+
+
+### Bug Fixes
+
+* **styles:** add styles for shadow dom ([00d1539](https://github.com/wwayne/react-tooltip/commit/00d1539)), closes [#597](https://github.com/wwayne/react-tooltip/issues/597)
+
+## [4.2.10](https://github.com/wwayne/react-tooltip/compare/v4.2.9...v4.2.10) (2020-09-14)
+
+
+### Bug Fixes
+
+* **build:** removing single quotes on cpy for windows shell ([#632](https://github.com/wwayne/react-tooltip/issues/632)) ([9c280af](https://github.com/wwayne/react-tooltip/commit/9c280af))
+
+## [4.2.9](https://github.com/wwayne/react-tooltip/compare/v4.2.8...v4.2.9) (2020-08-27)
+
+
+### Bug Fixes
+
+* **getposition:** properly determine parents with will-change: transform ([3a76250](https://github.com/wwayne/react-tooltip/commit/3a76250))
+
+## [4.2.8](https://github.com/wwayne/react-tooltip/compare/v4.2.7...v4.2.8) (2020-08-06)
+
+
+### Bug Fixes
+
+* **showtooltip:** check if tooltipRef is undefined ([#623](https://github.com/wwayne/react-tooltip/issues/623)) ([f63eab2](https://github.com/wwayne/react-tooltip/commit/f63eab2))
+
 ## Change Log
 
 ### v3.9.0 (2018/11/07 00:43 +00:00)

README.md

@@ -1,7 +1,7 @@
 # react-tooltip
 
 [![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
-[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 [![npm download][download-image]][download-url]
 [![Build Status](https://travis-ci.org/wwayne/react-tooltip.svg?branch=master)](https://travis-ci.org/wwayne/react-tooltip)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -13,7 +13,7 @@
 
 [![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/heuristic-curran-bddeu?fontsize=14&hidenavigation=1&theme=dark)
 
-Or see it on [Github Page](https://wwayne.github.io/react-tooltip/).
+Or see it on [Github Page](https://wwayne.github.io/react-tooltip).
 
 ## Maintainers
 
@@ -39,12 +39,12 @@ yarn add react-tooltip
 
 ## Usage
 
-**Using NPM**
+### Using NPM
 
 1 . Require react-tooltip after installation
 
 ```js
-import ReactTooltip from "react-tooltip";
+import ReactTooltip from 'react-tooltip';
 ```
 
 2 . Add data-tip = "your placeholder" to your element
@@ -55,11 +55,11 @@ import ReactTooltip from "react-tooltip";
 
 3 . Include react-tooltip component
 
-```js
+```jsx
 <ReactTooltip />
 ```
 
-**Standalone**
+### Standalone
 
 You can import `node_modules/react-tooltip/dist/index.js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
 
@@ -71,8 +71,6 @@ Notes:
 - The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
 - The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
 
-Check example: [React-tooltip Test](https://react-tooltip.netlify.com/)
-
 | Global           | Specific              | Type          | Values                                                                                                                                | Description                                                                                                                                                                                         |
 | :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | place            | data-place            | String        | top, right, bottom, left                                                                                                              | placement                                                                                                                                                                                           |
@@ -108,9 +106,9 @@ Check example: [React-tooltip Test](https://react-tooltip.netlify.com/)
 
 ### Security Note
 
-The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html-react](https://www.npmjs.com/package/sanitize-html-react). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
+The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
 
-##### Note:
+#### Note
 
 1. **data-tip** is necessary, because `<ReactTooltip />` finds the tooltip via this attribute
 2. **data-for** corresponds to the **id** of `<ReactTooltip />`
@@ -122,7 +120,7 @@ The `html` option allows a tooltip to directly display raw HTML. This is a secur
 
 > Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
 
-```js
+```jsx
 import ReactTooltip from 'react-tooltip'
 
 <p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -138,7 +136,7 @@ import ReactTooltip from 'react-tooltip'
 
 > Show specific tooltip manually, for example:
 
-```js
+```jsx
 import ReactTooltip from 'react-tooltip'
 
 <p ref={ref => this.fooRef = ref} data-tip='tooltip'></p>
@@ -175,6 +173,46 @@ Same for empty children, if you don't want show the tooltip when the children is
 <ReactTooltip id='test'>{}</ReactTooltip>
 ```
 
+### 3. Tooltip not binding to dynamic content
+
+When you render `<ReactTooltip>` ahead of dynamic content, and are using `data-for={id}` attributes 
+on new dynamic content, the tooltip will not register its event listener.  
+
+For example, you render a generic tooltip in the root of your app, then load a list of content async.
+Elements in the list use the `data-for={id}` attribute to bind the tooltip on hover.
+Since the tooltip has already scanned for data-tip these new elements will not trigger.
+
+One workaround for this is to trigger `ReactTooltip.rebuild()` after the data load to scan for the attribute again, 
+to allow event wireup.
+
+#### Example
+
+```jsx
+<app>
+  <ReactTooltip id="foo" />
+  <list/>
+</app>
+```
+
+```jsx
+
+const dynamicList = (props) => {
+
+ useEffect(() => {
+        ReactTooltip.rebuild();
+    });
+
+return(
+  <list>
+    {data.map((item)=> {
+      <span data-for="foo">My late bound tooltip triggered data</span>
+    });}
+  </list>
+);
+};
+
+```
+
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

bin/transferSass.js

@@ -1,35 +1,35 @@
-var sass = require("node-sass");
-var fs = require("fs");
-var path = require("path");
+const sass = require('node-sass');
+const fs = require('fs');
+const path = require('path');
 
 function transferSass() {
   sass.render(
     {
-      file: path.resolve(__dirname, "../src/index.scss"),
-      outputStyle: "compressed",
+      file: path.resolve(__dirname, '../src/index.scss'),
+      outputStyle: 'compressed'
     },
     function(err, result) {
       if (err) {
         console.log(err);
         return;
       }
-      var cssSource = result.css.toString();
+      const cssSource = result.css.toString();
       fs.writeFile(
-        path.resolve(__dirname, "../src/style.js"),
-        "export default '" + cssSource.replace(/\n/g, "") + "'",
+        path.resolve(__dirname, '../src/style.js'),
+        "export default '" + cssSource.replace(/\n/g, '') + "'",
         function(err) {
           if (err) {
             console.error(err);
           }
-          console.log("css file has been transformed to JS successful");
+          console.log('css file has been transformed to JS successful');
           fs.writeFile(
-            path.resolve(__dirname, "../src/style.css"),
+            path.resolve(__dirname, '../src/style.css'),
             cssSource,
             function(err) {
               if (err) {
                 console.error(err);
               }
-              console.log("css file has been transformed successful");
+              console.log('css file has been transformed successful');
               process.exit();
             }
           );
@@ -41,7 +41,7 @@ function transferSass() {
 
 transferSass();
 
-fs.watch(path.resolve(__dirname, "../src/index.scss"), function(
+fs.watch(path.resolve(__dirname, '../src/index.scss'), function(
   event,
   filename
 ) {