add ability to modify mutation observer options used internally

Author: mohsinulhaq

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 12816,
-    "minified": 7779,
-    "gzipped": 2223
+    "bundled": 13027,
+    "minified": 7934,
+    "gzipped": 2253
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 12777,
-    "minified": 7751,
-    "gzipped": 2211,
+    "bundled": 12988,
+    "minified": 7906,
+    "gzipped": 2240,
     "treeshaked": {
       "rollup": {
         "code": 187,
         "import_statements": 167
       },
       "webpack": {
-        "code": 8418
+        "code": 8553
       }
     }
   }

README.md

@@ -278,7 +278,7 @@ Modifiers passed directly to the underlying popper.js instance.
 For more information, refer to Popper.js’
 [modifier docs](https://popper.js.org/popper-documentation.html#modifiers)
 
-Modifiers, applied by default:
+Default modifiers:
 
 ```
 {
@@ -288,6 +288,22 @@ Modifiers, applied by default:
 }
 ```
 
+### mutationObserverOptions
+
+> `object`
+
+Options to `MutationObserver`, used internally for updating tooltip position based on trigger DOM changes.
+For more information, refer to [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) docs.
+
+Default options:
+
+```
+{
+    childList: true,
+    subtree: true
+}
+```
+
 ## Children and tooltip functions
 
 This is where you render whatever you want. `react-popper-tooltip` uses two render props `children`

codecov.yml

@@ -0,0 +1,3 @@
+coverage:
+  status:
+    patch: off

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "React tooltip library built around react-popper",
   "homepage": "https://react-popper-tooltip.netlify.com",
   "repository": {

src/Tooltip.tsx

@@ -7,11 +7,6 @@ import {
 } from './types';
 import { callAll, TooltipContext, setRef } from './utils';
 
-const MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
-  childList: true,
-  subtree: true,
-};
-
 class Tooltip extends Component<TooltipProps> {
   public static contextType = TooltipContext;
 
@@ -22,7 +17,7 @@ class Tooltip extends Component<TooltipProps> {
     const observer = (this.observer = new MutationObserver(() => {
       this.props.scheduleUpdate();
     }));
-    observer.observe(this.tooltipRef!, MUTATION_OBSERVER_CONFIG);
+    observer.observe(this.tooltipRef!, this.props.mutationObserverOptions);
 
     if (
       this.isTriggeredBy('hover') ||

src/TooltipTrigger.tsx

@@ -20,6 +20,11 @@ const DEFAULT_MODIFIERS: PopperJS.Modifiers = {
   },
 };
 
+const DEFAULT_MUTATION_OBSERVER_CONFIG: MutationObserverInit = {
+  childList: true,
+  subtree: true,
+};
+
 class TooltipTrigger extends Component<
   TooltipTriggerProps,
   TooltipTriggerState
@@ -35,6 +40,7 @@ class TooltipTrigger extends Component<
     portalContainer: canUseDOM() ? document.body : null,
     trigger: 'hover',
     usePortal: canUseDOM(),
+    mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG,
   };
 
   public state: TooltipTriggerState = {
@@ -62,6 +68,7 @@ class TooltipTrigger extends Component<
       portalContainer,
       followCursor,
       getTooltipRef,
+      mutationObserverOptions,
       ...restProps
     } = this.props;
 
@@ -119,6 +126,7 @@ class TooltipTrigger extends Component<
                 style,
                 tooltip,
                 trigger,
+                mutationObserverOptions,
               }}
               clearScheduled={this.clearScheduled}
               hideTooltip={this.hideTooltip}

src/types.ts

@@ -113,6 +113,12 @@ export interface TooltipTriggerProps {
    * @default true // for browser environments
    */
   usePortal: boolean;
+  /**
+   * Options to MutationObserver, used internally for updating
+   * tooltip position based on trigger DOM changes
+   * @default  { childList: true, subtree: true }
+   */
+  mutationObserverOptions: MutationObserverInit;
   /**
    * Trigger
    */
@@ -142,6 +148,7 @@ export interface TooltipProps {
   placement: PopperJS.Placement;
   style: React.CSSProperties;
   trigger: Trigger;
+  mutationObserverOptions: MutationObserverInit;
   clearScheduled(): void;
   hideTooltip(): void;
   tooltip(arg: TooltipArg): React.ReactNode;

tests/TooltipTrigger.spec.tsx

@@ -54,11 +54,6 @@ const Trigger = 'Trigger';
 const Trigger2 = 'Trigger2';
 const Outside = 'Outside';
 
-window.MutationObserver = class {
-  public disconnect() {}
-  public observe() {}
-};
-
 jest.useFakeTimers();
 
 it('matches snapshot', () => {