react-tooltip 5.26.2 → 5.26.4-beta.1148.rc.0

package/beta-release.js

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const util = require('util')
+const exec = util.promisify(require('child_process').exec)
+const package = require('./package.json')
+
+const args = require('minimist')(process.argv.slice(2))
+
+const issueNumber = args['issue']
+
+console.log(issueNumber)
+
+const runCommand = async (command) => {
+  return new Promise((resolve) => {
+    exec(command, (error, stdout, stderr) => {
+      resolve({ error, stdout, stderr })
+    })
+  })
+}
+
+const AutoBetaRelease = async () => {
+  // get all the versions of the package from npm
+  const { stdout } = await runCommand(`npm view . versions --json`)
+
+  // show npm published versions of this package
+  console.log(stdout)
+
+  // check if there is a beta release with the same issue number on published versions
+  const arrayOfBetaReleases = JSON.parse(stdout).filter((version) =>
+    version.includes(`${package.version}-beta.${issueNumber}`),
+  )
+
+  let fullLastBetaRelease = null
+
+  // if yes, get the latest beta release. Output: 1.0.0-beta.1.rc.0
+  if (arrayOfBetaReleases.length) {
+    fullLastBetaRelease = arrayOfBetaReleases[arrayOfBetaReleases.length - 1]
+  }
+
+  console.log('Last Beta Release: ', fullLastBetaRelease)
+
+  let nextBetaReleaseVersion = 0
+
+  if (fullLastBetaRelease) {
+    const lastBetaReleaseRCVersionArray = fullLastBetaRelease.match(/rc.+[0-9]+/g)
+
+    const lastBetaReleaseRCVersion =
+      lastBetaReleaseRCVersionArray && lastBetaReleaseRCVersionArray.length
+        ? lastBetaReleaseRCVersionArray[0]
+        : null
+
+    const lastBetaReleaseVersion = lastBetaReleaseRCVersion
+      ? lastBetaReleaseRCVersion.split('.')[1]
+      : 0
+
+    nextBetaReleaseVersion = parseInt(lastBetaReleaseVersion, 10) + 1
+  }
+
+  // next beta release version. Output: 1.0.0-beta.1.rc.1
+  const nextBetaReleaseVesionFull = `${package.version}-beta.${issueNumber}.rc.${nextBetaReleaseVersion}`
+
+  // update the beta version on package.json
+  const { error } = await runCommand(
+    `npm version ${nextBetaReleaseVesionFull} --no-git-tag-version`,
+  )
+
+  if (error) {
+    console.error(error)
+    return
+  }
+
+  // the beta version is already updated on package.json on the next line
+  console.log('Next Beta version: ', `${nextBetaReleaseVesionFull}`)
+
+  await runCommand(`echo "NEW_VERSION=${nextBetaReleaseVesionFull}" >> $GITHUB_ENV`)
+}
+
+AutoBetaRelease()

package/dist/react-tooltip.cjs

@@ -105,6 +105,96 @@ function removeStyle({ type = 'base', id = REACT_TOOLTIP_BASE_STYLES_ID, } = {})
     injected[type] = false;
 }
 
+const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
+    dom.offset(Number(offsetValue)),
+    dom.flip({
+        fallbackAxisSideDirection: 'start',
+    }),
+    dom.shift({ padding: 5 }),
+], border, }) => {
+    if (!elementReference) {
+        // elementReference can be null or undefined and we will not compute the position
+        // eslint-disable-next-line no-console
+        // console.error('The reference element for tooltip was not defined: ', elementReference)
+        return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+    }
+    if (tooltipReference === null) {
+        return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
+    }
+    const middleware = middlewares;
+    if (tooltipArrowReference) {
+        middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
+        return dom.computePosition(elementReference, tooltipReference, {
+            placement: place,
+            strategy,
+            middleware,
+        }).then(({ x, y, placement, middlewareData }) => {
+            var _a, _b;
+            const styles = { left: `${x}px`, top: `${y}px`, border };
+            /* c8 ignore start */
+            const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+            const staticSide = (_b = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
+            /* c8 ignore end */
+            const borderSide = border && {
+                borderBottom: border,
+                borderRight: border,
+            };
+            let borderWidth = 0;
+            if (border) {
+                const match = `${border}`.match(/(\d+)px/);
+                if (match === null || match === void 0 ? void 0 : match[1]) {
+                    borderWidth = Number(match[1]);
+                }
+                else {
+                    /**
+                     * this means `border` was set without `width`,
+                     * or non-px value (such as `medium`, `thick`, ...)
+                     */
+                    borderWidth = 1;
+                }
+            }
+            /* c8 ignore start */
+            const arrowStyle = {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+                right: '',
+                bottom: '',
+                ...borderSide,
+                [staticSide]: `-${4 + borderWidth}px`,
+            };
+            /* c8 ignore end */
+            return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
+        });
+    }
+    return dom.computePosition(elementReference, tooltipReference, {
+        placement: 'bottom',
+        strategy,
+        middleware,
+    }).then(({ x, y, placement }) => {
+        const styles = { left: `${x}px`, top: `${y}px` };
+        return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
+    });
+};
+
+const cssSupports = (property, value) => {
+    const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
+    return hasCssSupports ? window.CSS.supports(property, value) : true;
+};
+
+const cssTimeToMs = (time) => {
+    const match = time.match(/^([\d.]+)(ms|s)$/);
+    if (!match) {
+        return 0;
+    }
+    const [, amount, unit] = match;
+    return Number(amount) * (unit === 'ms' ? 1 : 1000);
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * This function debounce the received function
@@ -123,7 +213,7 @@ const debounce = (func, wait, immediate) => {
         };
         if (immediate && !timeout) {
             /**
-             * there's not need to clear the timeout
+             * there's no need to clear the timeout
              * since we expect it to resolve and set `timeout = null`
              */
             func.apply(this, args);
@@ -137,15 +227,70 @@ const debounce = (func, wait, immediate) => {
         }
     };
     debounced.cancel = () => {
+        /* c8 ignore start */
         if (!timeout) {
             return;
         }
+        /* c8 ignore end */
         clearTimeout(timeout);
         timeout = null;
     };
     return debounced;
 };
 
+const isObject = (object) => {
+    return object !== null && !Array.isArray(object) && typeof object === 'object';
+};
+const deepEqual = (object1, object2) => {
+    if (object1 === object2) {
+        return true;
+    }
+    if (Array.isArray(object1) && Array.isArray(object2)) {
+        if (object1.length !== object2.length) {
+            return false;
+        }
+        return object1.every((val, index) => deepEqual(val, object2[index]));
+    }
+    if (Array.isArray(object1) !== Array.isArray(object2)) {
+        return false;
+    }
+    if (!isObject(object1) || !isObject(object2)) {
+        return object1 === object2;
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    return keys1.every((key) => deepEqual(object1[key], object2[key]));
+};
+
+const isScrollable = (node) => {
+    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        return false;
+    }
+    const style = getComputedStyle(node);
+    return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
+        const value = style.getPropertyValue(propertyName);
+        return value === 'auto' || value === 'scroll';
+    });
+};
+const getScrollParent = (node) => {
+    if (!node) {
+        return null;
+    }
+    let currentParent = node.parentElement;
+    while (currentParent) {
+        if (isScrollable(currentParent)) {
+            return currentParent;
+        }
+        currentParent = currentParent.parentElement;
+    }
+    return document.scrollingElement || document.documentElement;
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
 const DEFAULT_CONTEXT_DATA = {
     anchorRefs: new Set(),
@@ -244,137 +389,6 @@ const TooltipWrapper = ({ tooltipId, children, className, place, content, html,
     return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-const isScrollable = (node) => {
-    if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-        return false;
-    }
-    const style = getComputedStyle(node);
-    return ['overflow', 'overflow-x', 'overflow-y'].some((propertyName) => {
-        const value = style.getPropertyValue(propertyName);
-        return value === 'auto' || value === 'scroll';
-    });
-};
-const getScrollParent = (node) => {
-    if (!node) {
-        return null;
-    }
-    let currentParent = node.parentElement;
-    while (currentParent) {
-        if (isScrollable(currentParent)) {
-            return currentParent;
-        }
-        currentParent = currentParent.parentElement;
-    }
-    return document.scrollingElement || document.documentElement;
-};
-
-const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [
-    dom.offset(Number(offsetValue)),
-    dom.flip({
-        fallbackAxisSideDirection: 'start',
-    }),
-    dom.shift({ padding: 5 }),
-], border, }) => {
-    if (!elementReference) {
-        // elementReference can be null or undefined and we will not compute the position
-        // eslint-disable-next-line no-console
-        // console.error('The reference element for tooltip was not defined: ', elementReference)
-        return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
-    }
-    if (tooltipReference === null) {
-        return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
-    }
-    const middleware = middlewares;
-    if (tooltipArrowReference) {
-        middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
-        return dom.computePosition(elementReference, tooltipReference, {
-            placement: place,
-            strategy,
-            middleware,
-        }).then(({ x, y, placement, middlewareData }) => {
-            var _a, _b;
-            const styles = { left: `${x}px`, top: `${y}px`, border };
-            const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
-            const staticSide = (_b = {
-                top: 'bottom',
-                right: 'left',
-                bottom: 'top',
-                left: 'right',
-            }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
-            const borderSide = border && {
-                borderBottom: border,
-                borderRight: border,
-            };
-            let borderWidth = 0;
-            if (border) {
-                const match = `${border}`.match(/(\d+)px/);
-                if (match === null || match === void 0 ? void 0 : match[1]) {
-                    borderWidth = Number(match[1]);
-                }
-                else {
-                    /**
-                     * this means `border` was set without `width`, or non-px value
-                     */
-                    borderWidth = 1;
-                }
-            }
-            const arrowStyle = {
-                left: arrowX != null ? `${arrowX}px` : '',
-                top: arrowY != null ? `${arrowY}px` : '',
-                right: '',
-                bottom: '',
-                ...borderSide,
-                [staticSide]: `-${4 + borderWidth}px`,
-            };
-            return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
-        });
-    }
-    return dom.computePosition(elementReference, tooltipReference, {
-        placement: 'bottom',
-        strategy,
-        middleware,
-    }).then(({ x, y, placement }) => {
-        const styles = { left: `${x}px`, top: `${y}px` };
-        return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
-    });
-};
-
-const cssTimeToMs = (time) => {
-    const match = time.match(/^([\d.]+)(m?s?)$/);
-    if (!match) {
-        return 0;
-    }
-    const [, amount, unit] = match;
-    if (unit !== 's' && unit !== 'ms') {
-        return 0;
-    }
-    return Number(amount) * (unit === 'ms' ? 1 : 1000);
-};
-
-const isObject = (object) => {
-    return object !== null && typeof object === 'object';
-};
-const deepEqual = (object1, object2) => {
-    if (!isObject(object1) || !isObject(object2)) {
-        return object1 === object2;
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    return keys1.every((key) => {
-        const val1 = object1[key];
-        const val2 = object2[key];
-        if (isObject(val1) && isObject(val2)) {
-            return deepEqual(val1, val2);
-        }
-        return val1 === val2;
-    });
-};
-
 var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE","closing":"core-styles-module_closing__sGnxF"};
 
 var styles = {"tooltip":"styles-module_tooltip__mnnfp","arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
@@ -925,7 +939,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         var _a, _b;
         let selector = (_b = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect) !== null && _b !== void 0 ? _b : '';
         if (!selector && id) {
-            selector = `[data-tooltip-id='${id}']`;
+            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
         }
         const documentObserverCallback = (mutationList) => {
             const newAnchors = [];
@@ -1064,7 +1078,7 @@ content, contentWrapperRef, isOpen, defaultIsOpen = false, setIsOpen, activeAnch
         var _a;
         let selector = (_a = imperativeOptions === null || imperativeOptions === void 0 ? void 0 : imperativeOptions.anchorSelect) !== null && _a !== void 0 ? _a : anchorSelect;
         if (!selector && id) {
-            selector = `[data-tooltip-id='${id}']`;
+            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
         }
         if (!selector) {
             return;
@@ -1149,11 +1163,6 @@ const TooltipContent = ({ content }) => {
     return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
 };
 
-const cssSupports = (property, value) => {
-    const hasCssSupports = 'CSS' in window && 'supports' in window.CSS;
-    return hasCssSupports ? window.CSS.supports(property, value) : true;
-};
-
 const TooltipController = React__default["default"].forwardRef(({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, openEvents, closeEvents, globalCloseEvents, imperativeModeOnly = false, style, position, isOpen, defaultIsOpen = false, disableStyleInjection = false, border, opacity, arrowColor, setIsOpen, afterShow, afterHide, role = 'tooltip', }, ref) => {
     const [tooltipContent, setTooltipContent] = React.useState(content);
     const [tooltipHtml, setTooltipHtml] = React.useState(html);
@@ -1274,10 +1283,12 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
         if (styleInjectionRef.current === disableStyleInjection) {
             return;
         }
+        /* c8 ignore start */
         {
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not change `disableStyleInjection` dynamically.');
         }
+        /* c8 ignore end */
     }, [disableStyleInjection]);
     React.useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -1294,7 +1305,7 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
         const elementRefs = new Set(anchorRefs);
         let selector = anchorSelect;
         if (!selector && id) {
-            selector = `[data-tooltip-id='${id}']`;
+            selector = `[data-tooltip-id='${id.replace(/'/g, "\\'")}']`;
         }
         if (selector) {
             try {
@@ -1304,10 +1315,12 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
                 });
             }
             catch (_b) {
+                /* c8 ignore start */
                 {
                     // eslint-disable-next-line no-console
                     console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
                 }
+                /* c8 ignore end */
             }
         }
         const anchorById = document.querySelector(`[id='${anchorId}']`);
@@ -1348,6 +1361,7 @@ const TooltipController = React__default["default"].forwardRef(({ id, anchorId,
         };
     }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
     React.useEffect(() => {
+        /* c8 ignore end */
         if (style === null || style === void 0 ? void 0 : style.border) {
             // eslint-disable-next-line no-console
             console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.');