Merge branch 'master' into feat/imperative-mode

Author: gabrieljablonski

docs/docs/examples/events.mdx

@@ -8,7 +8,9 @@ Events available in ReactTooltip component.
 
 :::danger
 
-This has been deprecated. Use the `openOnClick` tooltip prop instead.
+This has been deprecated. Use `openOnClick`, or `openEvents`, `closeEvents`, and `globalCloseEvents` instead.
+
+See the [options page](../options.mdx#available-props) for more details.
 
 :::
 

docs/docs/examples/styling.mdx

@@ -372,6 +372,26 @@ In summary, if you do it correctly you can use CSS specificity instead of `!impo
 
 :::
 
+### Customizing opening/closing animation
+
+By default, the tooltip has a fade-in/fade-out transition when opening/closing, with a delay of 150ms for both.
+If you wish to change the delay for any of them, override the following CSS variables:
+
+:::caution
+
+Do not set `--rt-transition-closing-delay` to `0`. Doing so will result in the tooltip component being stuck (but not visible) on the DOM. This isn't itself a problem, but may lead to performance issues.
+
+Set to `1ms` or a similar value if you want to disable the fade-out transition when closing.
+
+:::
+
+```css
+:root {
+  --rt-transition-show-delay: 0.15s;
+  --rt-transition-closing-delay: 0.15s;
+}
+```
+
 ### Disabling ReactTooltip CSS
 
 ReactTooltip works seamlessly by automatically injecting CSS into your application. To disable this functionality, use the tooltip prop `disableStyleInjection`.

docs/docs/getting-started.mdx

@@ -219,5 +219,7 @@ For advanced styling, check [the examples](./examples/styling.mdx).
   --rt-color-warning: #f0ad4e;
   --rt-color-info: #337ab7;
   --rt-opacity: 0.9;
+  --rt-transition-show-delay: 0.15s;
+  --rt-transition-closing-delay: 0.15s;
 }
 ```

docs/docs/options.mdx

@@ -50,9 +50,15 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `float` - `boolean` - used to achieve V4's `effect="float"`
 - [x] `hidden` - `boolean` - when set, the tooltip will not show
 - [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details)
-- [x] `closeOnEsc` - `boolean` - when set, the tooltip will close after pressing the escape key
-- [x] `closeOnScroll` - `boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)
-- [x] `closeOnResize` - `boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)
+- [x] `closeOnEsc` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close after pressing the escape key~~
+- [x] `closeOnScroll` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when scrolling (similar to V4's `scrollHide`)~~
+- [x] `closeOnResize` - **DEPRECATED** - ~~`boolean` - when set, the tooltip will close when resizing the window (same as V4's `resizeHide`)~~
+
+:::note
+
+Use `globalCloseEvents` instead of `closeOnEsc`, `closeOnScroll`, and `closeOnResize`. See the [options page](../options.mdx#available-props) for more details.
+
+:::
 
 ## `V4` props available in `V5`
 
@@ -78,10 +84,10 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `delayHide` - also available on anchor element as `data-delay-hide`
 - [ ] `delayUpdate` - can be implemented if requested
 - [x] `delayShow` - also available on anchor element as `data-delay-show`
-- [ ] `event`
-- [ ] `eventOff`
+- [x] `event` - functionality changed and renamed to `openEvents`
+- [x] `eventOff` - functionality changed and renamed to `closeEvents`
 - [ ] `isCapture`
-- [ ] `globalEventOff`
+- [x] `globalEventOff` - functionality changed and renamed to `globalCloseEvents`
 - [ ] `getContent` - pass dynamic values to `content` instead
 - [x] `afterShow`
 - [x] `afterHide`
@@ -92,7 +98,7 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper`
 - [ ] `bodyMode`
 - [x] `clickable`
-- [ ] `disableInternalStyle`
+- [x] `disableInternalStyle` - renamed to `disableStyleInjection`
 
 ### Detailed informations
 

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

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

docs/package.json

@@ -6126,10 +6126,10 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-tooltip@5.21.1:
-  version "5.21.1"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.21.1.tgz#bc49d9662a4b90ed1ed4417b7de535cb5bee1d01"
-  integrity sha512-wJqF/yzK1wuJuy5/zAkVErFA609fVv1ZukhGjw44PcMvg9wL0jomnpQyz3qH1H7TWjz/wqO/OMc3ipQNjZ8zYg==
+react-tooltip@5.22.0:
+  version "5.22.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.22.0.tgz#3082065b1efbd207813f484b617b1b75325f15d5"
+  integrity sha512-xbJBRY1LyHYd7j00UeBOqZR9SH/1S47Pe+m8vM1a+ZXglkeSNnBt5YYoPttU/amjC/VZJAPQ8+2B9x8Fl8U1qA==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
     classnames "^2.3.0"

docs/yarn.lock

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.21.5",
+  "version": "5.22.0",
   "description": "react tooltip component",
   "scripts": {
     "dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",

package.json

@@ -103,7 +103,9 @@ function App() {
           ref={tooltipRef}
           anchorSelect="section[id='section-anchor-select'] > p > button"
           place="bottom"
-          events={['click']}
+          openEvents={{ click: true }}
+          closeEvents={{ click: true }}
+          globalCloseEvents={{ clickOutsideAnchor: true }}
         >
           Tooltip content
         </Tooltip>