chore: merge from master

Author: gabrieljablonski

.github/ISSUE_TEMPLATE/bug_report.md

@@ -26,12 +26,14 @@ If applicable, add screenshots to help explain your problem.
  - OS: [e.g. iOS]
  - Browser [e.g. chrome, safari]
  - Version [e.g. 22]
+ - Frameworks [e.g. React 18, Next.js 13]
 
 **Smartphone (please complete the following information if possible or delete this section):**
  - Device: [e.g. iPhone6]
  - OS: [e.g. iOS8.1]
  - Browser [e.g. stock browser, safari]
  - Version [e.g. 22]
+ - Frameworks [e.g. React 18, Next.js 13]
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/pull-request.yaml

@@ -5,10 +5,20 @@ on:
     branches:
       - '!master'
   pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
 
 jobs:
   lint:
+    if: 'github.event.pull_request.draft == false'
     uses: ./.github/workflows/lint.yaml
 
   bundlesize:
+    if: 'github.event.pull_request.draft == false'
     uses: ./.github/workflows/bundlesize.yaml
+
+  fail_if_pull_request_is_draft:
+    if: github.event.pull_request.draft == true
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Fails in order to indicate that pull request needs to be marked as ready to review and unit tests workflow needs to pass.
+        run: exit 1

.npmignore

@@ -21,7 +21,15 @@ coverage/
 .travis.yml
 .editorconfig
 
-// others
+// misc folders
 .vscode/
 .husky/
 .github/
+
+// misc files
+bundlesize.config.json
+
+// bundler - rollup
+rollup.config.dev.js
+rollup.config.prod.js
+rollup.config.types.js

bundlesize.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/react-tooltip.cjs.min.js",
-      "maxSize": "13.5 kB"
+      "maxSize": "14 kB"
     },
     {
       "path": "./dist/react-tooltip.esm.min.js",
-      "maxSize": "13.5 kB"
+      "maxSize": "14 kB"
     },
     {
       "path": "./dist/react-tooltip.umd.min.js",
-      "maxSize": "13.5 kB"
+      "maxSize": "14 kB"
     }
   ]
 }

docs/docs/options.mdx

@@ -109,8 +109,3 @@ import 'react-tooltip/dist/react-tooltip.css';
 | data-tooltip-show              | number  | false    |            | any `number`                                      | tooltip show will be delayed in miliseconds by the amount of value                                                                        |
 | data-tooltip-hide              | number  | false    |            | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                                                                        |
 | data-tooltip-float             | boolean | false    | `false`    | `true` `false`                                    | tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                            |
-
-#### Observations
-
-- When using `data-tooltip-content` the `<br />` works by default
-- When using prop `content` the `<br />` doesn't work by default, use prop `html` instead of this

docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -8,7 +8,7 @@ If you are using V4 and want to use V5, please read this doc.
 
 ## From V4 to V5
 
-V4 was a great react tooltip component but was built a few years ago, he was built with react class components and it's hard to maintain and to the community give contributions, so, with this in mind, we build a new version of react tooltip using [floating-ui](https://floating-ui.com/) behind the scenes. This gives a great improvement in performance and in a new and easier code to let the community contribute to the project.
+V4 was a great react tooltip component but was built a few years ago, it was built with react class components and it's hard to maintain and to the community give contributions, so, with this in mind, we built a new version of react tooltip using [floating-ui](https://floating-ui.com/) behind the scenes. This gives a great improvement in performance and a new and easier code to let the community contribute to the project.
 
 ## Improvements
 
@@ -22,7 +22,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
 - All data attributes are now prefixed with `data-tooltip-`
 - Default Padding changed from `padding: 8px 21px;` to `padding: 8px 16px;`
 - Exported module now is `Tooltip` instead of `ReactTooltip`
-- - If you already have a `Tooltip` component in your application and want to explicitly declare this is `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"`
+- If you already have a `Tooltip` component in your application and want to explicitly declare this as `ReactTooltip`, just `import { Tooltip as ReactTooltip } from "react-tooltip"`
 - CSS import is now optional, so you can modify and/or add any styling to your floating tooltip element
 - `data-tip` attribute now is `data-tooltip-content`
 - `getContent` prop was removed. Instead, you can directly pass dynamic content to the `content` tooltip prop, or to `data-tooltip-content` in the anchor element

docs/package.json

@@ -23,7 +23,7 @@
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-tooltip": "5.7.3"
+    "react-tooltip": "5.7.5"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.3.0",

docs/yarn.lock

@@ -1605,17 +1605,17 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@floating-ui/core@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.2.tgz#d06a66d3ad8214186eda2432ac8b8d81868a571f"
-  integrity sha512-Skfy0YS3NJ5nV9us0uuPN0HDk1Q4edljaOhRBJGDWs9EBa7ZVMYBHRFlhLvvmwEoaIM9BlH6QJFn9/uZg0bACg==
+"@floating-ui/core@^1.1.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.0.tgz#ae7ae7923d41f3d84cb2fd88740a89436610bbec"
+  integrity sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA==
 
-"@floating-ui/dom@^1.0.4":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.7.tgz#9e8e6615ce03e5ebc6a4ae879640a199a366f86d"
-  integrity sha512-6RsqvCYe0AYWtsGvuWqCm7mZytnXAZCjWtsWu1Kg8dI3INvj/DbKlDsZO+mKSaQdPT12uxIW9W2dAWJkPx4Y5g==
+"@floating-ui/dom@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.1.tgz#66aa747e15894910869bf9144fc54fc7d6e9f975"
+  integrity sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==
   dependencies:
-    "@floating-ui/core" "^1.0.2"
+    "@floating-ui/core" "^1.1.0"
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -6125,12 +6125,12 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-tooltip@5.7.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.7.3.tgz#41971e34d37ba0fdca530b3327915eba96a487c8"
-  integrity sha512-aaGMRQKSpsixwekVtL268D2f4mJAw4PTTEAziyjYhalm8YmFkPoZKQDnVInjmBAmcLWmY7o+yJU5SHB3rcC7Tg==
+react-tooltip@5.7.5:
+  version "5.7.5"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.7.5.tgz#f3487e000a24b6ff84c8181064809a57b43c2e99"
+  integrity sha512-hAr3AMSF47AuycEnI+ShwloYHTtVrftocXCfEjWAFvvAVpNGE9wredZs6NlUE1JtpOXIOe/oJUpoYj925v5hLQ==
   dependencies:
-    "@floating-ui/dom" "^1.0.4"
+    "@floating-ui/dom" "1.1.1"
     classnames "^2.3.2"
 
 react@18.2.0:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.7.3",
+  "version": "5.7.5",
   "description": "react tooltip component",
   "scripts": {
     "dev": "node ./cli.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",
@@ -117,7 +117,7 @@
     ]
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
+    "@floating-ui/dom": "1.1.1",
     "classnames": "^2.3.2"
   }
 }

src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ const Tooltip = ({
   events = ['hover'],
   positionStrategy = 'absolute',
   middlewares,
-  wrapper: WrapperElement = 'div',
+  wrapper: WrapperElement,
   children = null,
   delayShow = 0,
   delayHide = 0,
@@ -41,12 +41,13 @@ const Tooltip = ({
   setActiveAnchor,
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
-  const tooltipArrowRef = useRef<HTMLDivElement>(null)
+  const tooltipArrowRef = useRef<HTMLElement>(null)
   const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
   const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
   const [inlineStyles, setInlineStyles] = useState({})
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState(false)
+  const [rendered, setRendered] = useState(false)
   const wasShowing = useRef(false)
   const lastFloatPosition = useRef<IPosition | null>(null)
   /**
@@ -73,14 +74,44 @@ const Tooltip = ({
     }
   }, [anchorSelect])
 
-  const handleShow = (value: boolean) => {
-    if (setIsOpen) {
-      setIsOpen(value)
+  useEffect(() => {
+    if (!show) {
+      setRendered(false)
     }
+  }, [show])
+
+  const handleShow = (value: boolean) => {
+    setRendered(true)
+    /**
+     * wait for the component to render and calculate position
+     * before actually showing
+     */
+    setTimeout(() => {
+      setIsOpen?.(value)
+      if (isOpen === undefined) {
+        setShow(value)
+      }
+    }, 10)
+  }
+
+  /**
+   * this replicates the effect from `handleShow()`
+   * when `isOpen` is changed from outside
+   */
+  useEffect(() => {
     if (isOpen === undefined) {
-      setShow(value)
+      return () => null
     }
-  }
+    if (isOpen) {
+      setRendered(true)
+    }
+    const timeout = setTimeout(() => {
+      setShow(isOpen)
+    }, 10)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [isOpen])
 
   useEffect(() => {
     if (show === wasShowing.current) {
@@ -138,7 +169,7 @@ const Tooltip = ({
   const handleHideTooltip = () => {
     if (clickable) {
       // allow time for the mouse to reach the tooltip, in case there's a gap
-      handleHideTooltipDelayed(delayHide || 50)
+      handleHideTooltipDelayed(delayHide || 100)
     } else if (delayHide) {
       handleHideTooltipDelayed()
     } else {
@@ -330,7 +361,12 @@ const Tooltip = ({
       })
       parentObserver.disconnect()
     }
+    /**
+     * rendered is also a dependency to ensure anchor observers are re-registered
+     * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
+     */
   }, [
+    rendered,
     anchorRefs,
     activeAnchor,
     closeOnEsc,
@@ -389,7 +425,6 @@ const Tooltip = ({
     }
   }, [
     show,
-    isOpen,
     anchorId,
     anchorsBySelect,
     activeAnchor,
@@ -426,13 +461,14 @@ const Tooltip = ({
   }, [])
 
   const hasContentOrChildren = Boolean(html || content || children)
+  const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0
 
-  return (
+  return rendered ? (
     <WrapperElement
       id={id}
       role="tooltip"
       className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
-        [styles['show']]: hasContentOrChildren && (isOpen || show),
+        [styles['show']]: canShow,
         [styles['fixed']]: positionStrategy === 'fixed',
         [styles['clickable']]: clickable,
       })}
@@ -452,7 +488,7 @@ const Tooltip = ({
         ref={tooltipArrowRef}
       />
     </WrapperElement>
-  )
+  ) : null
 }
 
 export default Tooltip