Merge branch 'master' into fix-issue-809

Author: erezcarmel

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: [danielbarion] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [4.5.0](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.5...v4.5.0) (2022-11-09)
+
+### Features
+
+- add disable internal style prop into react-tooltip.d.ts as feat to trigger semantic-release ([ce41c47](https://github.com/ReactTooltip/react-tooltip/commit/ce41c479c2532a01afbcd4250a523dbeaa014672)), closes [#811](https://github.com/ReactTooltip/react-tooltip/issues/811)
+
+## [4.4.5](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.4...v4.4.5) (2022-11-09)
+
+### Bug Fixes
+
+- add padding into the ts type file ([365c2da](https://github.com/ReactTooltip/react-tooltip/commit/365c2dad98d15ecd32356c05ee962225fa018b06)), closes [#817](https://github.com/ReactTooltip/react-tooltip/issues/817) [#808](https://github.com/ReactTooltip/react-tooltip/issues/808)
+
+## [4.4.4](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.3...v4.4.4) (2022-11-09)
+
+### Bug Fixes
+
+- Fixed the tooltip arrow overlapping tooltip content ([51c7e1a](https://github.com/ReactTooltip/react-tooltip/commit/51c7e1a854c80ea545c22edb403e831d0941d8f9))
+
 ## [4.4.3](https://github.com/ReactTooltip/react-tooltip/compare/v4.4.2...v4.4.3) (2022-10-22)
 
 ### Bug Fixes

README.md

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "description": "react tooltip component",
   "private": false,
   "main": "dist/index.js",

package.json

@@ -108,6 +108,10 @@ export interface TooltipProps {
   clickable?: boolean;
   // Aria role for the tooltip
   role?: string;
+  // Padding attribute
+  padding?: string;
+  // Set internal style as optional
+  disableInternalStyle?: boolean;
 }
 
 // ReactTooltip component is the default export

react-tooltip.d.ts

@@ -67,7 +67,7 @@ function generateStyle(
         border-top-right-radius: ${arrowRadius}px;
         border: 1px solid ${borderColor};
         background-color: ${arrowColor};
-        z-index: 1;
+        z-index: -2;
         bottom: -6px;
         left: 50%;
         margin-left: -6px;
@@ -81,7 +81,7 @@ function generateStyle(
         content: "";
         background-color: inherit;
         position: absolute;
-        z-index: 2;
+        z-index: -1;
         width: 18px;
         height: 10px;
     }
@@ -93,7 +93,7 @@ function generateStyle(
         border-top-right-radius: ${arrowRadius}px;
         border: 1px solid ${borderColor};
         background-color: ${arrowColor};
-        z-index: 1;
+        z-index: -2;
         top: -6px;
         left: 50%;
         margin-left: -6px;
@@ -107,7 +107,7 @@ function generateStyle(
         content: "";
         background-color: inherit;
         position: absolute;
-        z-index: 2;
+        z-index: -1;
         width: 10px;
         height: 18px;
     }
@@ -119,7 +119,7 @@ function generateStyle(
         border-top-right-radius: ${arrowRadius}px;
         border: 1px solid ${borderColor};
         background-color: ${arrowColor};
-        z-index: 1;
+        z-index: -2;
         right: -6px;
         top: 50%;
         margin-top: -6px;
@@ -133,7 +133,7 @@ function generateStyle(
         content: "";
         background-color: inherit;
         position: absolute;
-        z-index: 2;
+        z-index: -1;
         width: 10px;
         height: 18px;
     }
@@ -145,7 +145,7 @@ function generateStyle(
         border-top-right-radius: ${arrowRadius}px;
         border: 1px solid ${borderColor};
         background-color: ${arrowColor};
-        z-index: 1;
+        z-index: -2;
         left: -6px;
         top: 50%;
         margin-top: -6px;

src/decorators/styler.js

@@ -74,7 +74,8 @@ class ReactTooltip extends React.Component {
       bodyMode: PropTypes.bool,
       possibleCustomEvents: PropTypes.string,
       possibleCustomEventsOff: PropTypes.string,
-      clickable: PropTypes.bool
+      clickable: PropTypes.bool,
+      disableInternalStyle: PropTypes.bool
     };
   }
 
@@ -152,12 +153,15 @@ class ReactTooltip extends React.Component {
   }
 
   componentDidMount() {
-    const { insecure, resizeHide } = this.props;
+    const { insecure, resizeHide, disableInternalStyle } = this.props;
     this.mount = true;
 
     this.bindListener(); // Bind listener for tooltip
     this.bindWindowEvents(resizeHide); // Bind global event for static method
-    this.injectStyles(); // Inject styles for each DOM root having tooltip.
+
+    if (!disableInternalStyle) {
+      this.injectStyles(); // Inject styles for each DOM root having tooltip.
+    }
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -798,14 +802,16 @@ class ReactTooltip extends React.Component {
     const { extraClass, html, ariaProps, disable, uuid } = this.state;
     const content = this.getTooltipContent();
     const isEmptyTip = this.isEmptyTip(content);
-    const style = generateTooltipStyle(
-      this.state.uuid,
-      this.state.customColors,
-      this.state.type,
-      this.state.border,
-      this.state.padding,
-      this.state.customRadius
-    );
+    const style = this.props.disableInternalStyle
+      ? ''
+      : generateTooltipStyle(
+          this.state.uuid,
+          this.state.customColors,
+          this.state.type,
+          this.state.border,
+          this.state.padding,
+          this.state.customRadius
+        );
 
     const tooltipClass =
       '__react_component_tooltip' +
@@ -828,7 +834,9 @@ class ReactTooltip extends React.Component {
       .join(' ');
 
     if (html) {
-      const htmlContent = `${content}\n<style aria-hidden="true">${style}</style>`;
+      const htmlContent = `${content}${
+        style ? `\n<style aria-hidden="true">${style}</style>` : ''
+      }`;
 
       return (
         <Wrapper
@@ -849,10 +857,12 @@ class ReactTooltip extends React.Component {
           ref={(ref) => (this.tooltipRef = ref)}
           data-id="tooltip"
         >
-          <style
-            dangerouslySetInnerHTML={{ __html: style }}
-            aria-hidden="true"
-          />
+          {style && (
+            <style
+              dangerouslySetInnerHTML={{ __html: style }}
+              aria-hidden="true"
+            />
+          )}
           {content}
         </Wrapper>
       );