add shadow dom support

Author: mohsinulhaq

.size-snapshot.json

@@ -1,8 +1,8 @@
 {
   "react-popper-tooltip.js": {
-    "bundled": 10837,
-    "minified": 5193,
-    "gzipped": 1733,
+    "bundled": 10999,
+    "minified": 5259,
+    "gzipped": 1763,
     "treeshaked": {
       "rollup": {
         "code": 142,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "React tooltip library built around react-popper",
   "author": "Mohsin Ul Haq <[email protected]>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"{src,tests,examples}**/*.{ts,tsx}\"",
     "start": "rollup -c -w",
-    "test": "jest tests/",
+    "test": "jest --env=jsdom tests",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "postinstall": "husky install",
@@ -64,25 +64,25 @@
     "react-popper": "^2.2.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.14.1",
+    "@babel/core": "^7.14.3",
+    "@babel/plugin-transform-runtime": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
     "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.8",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@types/react": "^17.0.7",
+    "@types/react-dom": "^17.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
     "babel-loader": "^8.2.2",
-    "eslint": "^7.26.0",
+    "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
@@ -91,10 +91,10 @@
     "jest": "^26.6.3",
     "lint-staged": "^11.0.0",
     "pinst": "^2.1.6",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.47.0",
+    "rollup": "^2.50.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.12.0",

src/usePopperTooltip.ts

@@ -35,9 +35,9 @@ export function usePopperTooltip(
   // Merging options with default options.
   // Keys with undefined values are replaced with the default ones if any.
   // Keys with other values pass through.
-  const finalConfig = (Object.keys(defaultConfig) as Array<
-    keyof typeof defaultConfig
-  >).reduce(
+  const finalConfig = (
+    Object.keys(defaultConfig) as Array<keyof typeof defaultConfig>
+  ).reduce(
     (config, key) => ({
       ...config,
       [key]: config[key] !== undefined ? config[key] : defaultConfig[key],
@@ -125,7 +125,7 @@ export function usePopperTooltip(
 
     const handleClickOutside: EventListener = (event) => {
       const { tooltipRef, triggerRef } = getLatest();
-      const target = event.target;
+      const target = event.composedPath?.()?.[0] || event.target;
       if (target instanceof Node) {
         if (
           tooltipRef != null &&

tests/usePopperTooltip.spec.tsx

@@ -155,7 +155,7 @@ describe('trigger option', () => {
 });
 
 test('closeOnOutsideClick removes tooltip on document.body click', async () => {
-  render(<Tooltip options={{ closeOnOutsideClick: true, trigger: 'click' }} />);
+  render(<Tooltip options={{ trigger: 'click' }} />);
 
   // Show on click
   userEvent.click(screen.getByText(TriggerText));
@@ -168,6 +168,19 @@ test('closeOnOutsideClick removes tooltip on document.body click', async () => {
   });
 });
 
+test("closeOnOutsideClick doesn't remove tooltip on tooltip click", async () => {
+  render(<Tooltip options={{ trigger: 'click' }} />);
+
+  // Show on click
+  userEvent.click(screen.getByText(TriggerText));
+  expect(await screen.findByText(TooltipText)).toBeInTheDocument();
+
+  userEvent.click(screen.getByText(TooltipText));
+  await waitFor(() => {
+    expect(screen.queryByText(TooltipText)).toBeInTheDocument();
+  });
+});
+
 test('delayShow option renders tooltip after specified delay', async () => {
   jest.useFakeTimers();
   render(<Tooltip options={{ delayShow: 5000 }} />);