@canonical/react-components 1.3.1 → 1.3.2

package/dist-esm/components/Tooltip/Tooltip.js

@@ -1,245 +0,0 @@
-import classNames from "classnames";
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
-import usePortal from "react-useportal";
-import { useWindowFitment, useListener } from "../../hooks";
-export var position = {
-  btmCenter: "btm-center",
-  btmLeft: "btm-left",
-  btmRight: "btm-right",
-  left: "left",
-  right: "right",
-  topCenter: "top-center",
-  topLeft: "top-left",
-  topRight: "top-right"
-};
-var getPositionStyle = (pos, wrapperNode) => {
-  if (!wrapperNode) {
-    return null;
-  }
-  var dimensions = wrapperNode.getBoundingClientRect();
-  var {
-    x,
-    y,
-    height,
-    width
-  } = dimensions;
-  var left = x + window.scrollX || 0;
-  var top = y + window.scrollY || 0;
-  switch (pos) {
-    case "btm-center":
-      left += width / 2;
-      top += height;
-      break;
-    case "btm-left":
-      top += height;
-      break;
-    case "btm-right":
-      left += width;
-      top += height;
-      break;
-    case "left":
-      top += height / 2;
-      break;
-    case "right":
-      left += width;
-      top += height / 2;
-      break;
-    case "top-center":
-      left += width / 2;
-      break;
-    case "top-left":
-      break;
-    case "top-right":
-      left += width;
-      break;
-    default:
-      break;
-  }
-  return {
-    position: "absolute",
-    left,
-    top
-  };
-};
-export var adjustForWindow = (position, fitsWindow) => {
-  var newPosition = position;
-  if (!fitsWindow.fromLeft.fitsLeft && newPosition === "left") {
-    newPosition = "top-right";
-  }
-  if (!fitsWindow.fromRight.fitsRight && newPosition === "right") {
-    newPosition = "top-left";
-  }
-  if (!fitsWindow.fromRight.fitsLeft && newPosition.endsWith("-right")) {
-    newPosition = newPosition.replace("right", "left");
-  }
-  if (!fitsWindow.fromLeft.fitsRight && newPosition.endsWith("-left")) {
-    newPosition = newPosition.replace("left", "right");
-  }
-  if (!fitsWindow.fromTop.fitsAbove && newPosition.startsWith("top")) {
-    newPosition = newPosition.replace("top", "btm");
-  }
-  if (!fitsWindow.fromBottom.fitsBelow && newPosition.startsWith("btm")) {
-    newPosition = newPosition.replace("btm", "top");
-  }
-  if (!fitsWindow.fromLeft.fitsRight && !fitsWindow.fromRight.fitsLeft && (newPosition.endsWith("-left") || newPosition.endsWith("-right"))) {
-    newPosition = newPosition.replace("left", "center").replace("right", "center");
-  }
-  if (newPosition.endsWith("center") && (fitsWindow.fromCenter.fitsCentered.fitsRight || fitsWindow.fromCenter.fitsCentered.fitsLeft)) {
-    if (!fitsWindow.fromCenter.fitsCentered.fitsRight) {
-      newPosition = newPosition.replace("center", "right");
-    }
-    if (!fitsWindow.fromCenter.fitsCentered.fitsLeft) {
-      newPosition = newPosition.replace("center", "left");
-    }
-  }
-  return newPosition;
-};
-
-/**
- * This is the [React](https://reactjs.org/) component for Vanilla [Tooltips](https://vanillaframework.io/docs/patterns/tooltips).
- *
- * Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen.
- *
- * They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known.
- *
- * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
- */
-var Tooltip = _ref => {
-  var {
-    autoAdjust = true,
-    children,
-    className,
-    followMouse = false,
-    message,
-    position = "top-left",
-    positionElementClassName,
-    tooltipClassName,
-    zIndex,
-    delay = 350
-  } = _ref;
-  var wrapperRef = useRef(null);
-  var messageRef = useRef(null);
-  var [adjustedPosition, setAdjustedPosition] = useState(position);
-  var [positionStyle, setPositionStyle] = useState({
-    position: "absolute",
-    // Initially position the tooltip of the screen in case it gets shown
-    // before setting the position.
-    left: -9999999,
-    top: -9999999
-  });
-  var {
-    openPortal,
-    closePortal,
-    isOpen,
-    Portal
-  } = usePortal({
-    programmaticallyOpen: true
-  });
-  var tooltipId = useId();
-  var [timer, setTimer] = useState(null);
-  var cancelableClosePortal = useCallback(() => {
-    clearTimeout(timer);
-    closePortal();
-  }, [timer, closePortal]);
-  useEffect(() => {
-    if (isOpen && !followMouse && wrapperRef.current) {
-      // Position the tooltip when it becomes visible.
-      setPositionStyle(getPositionStyle(adjustedPosition, wrapperRef.current));
-    }
-  }, [adjustedPosition, isOpen, followMouse]);
-  var mouseHandler = useCallback(evt => {
-    // Set the position of the tooltip next to the mouse.
-    setPositionStyle({
-      // Don't allow the tooltip to block the mouse events.
-      pointerEvents: "none",
-      position: "absolute",
-      left: evt.pageX,
-      top: evt.pageY
-    });
-  }, []);
-  var onUpdateWindowFitment = useCallback(fitsWindow => {
-    setAdjustedPosition(adjustForWindow(position, fitsWindow));
-  }, [setAdjustedPosition, position]);
-
-  // Handle mouse events.
-  useListener(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen);
-
-  // Handle adjusting the position of the tooltip so that it remains on screen.
-  useWindowFitment(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
-  var handleKeyPress = useCallback(event => {
-    if (event.key === "Escape") {
-      cancelableClosePortal();
-    }
-  }, [cancelableClosePortal]);
-  useEffect(() => {
-    window.addEventListener("keypress", handleKeyPress);
-    return () => {
-      window.removeEventListener("keypress", handleKeyPress);
-    };
-  }, [handleKeyPress]);
-  var handleBlur = e => {
-    var _wrapperRef$current, _messageRef$current, _wrapperRef$current2;
-    // do not close if the focus is within the tooltip wrapper
-    if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
-      return;
-    }
-    if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(e.relatedTarget)) : e.target !== messageRef.current) {
-      cancelableClosePortal();
-    }
-  };
-  var handleClick = e => {
-    var _messageRef$current2;
-    // ignore clicks within the tooltip message
-    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
-      return;
-    }
-    e.target.focus();
-    openPortal(e);
-  };
-  var delayedOpenPortal = useCallback(() => {
-    if (isOpen) {
-      return;
-    }
-    if (timer) {
-      clearTimeout(timer);
-    }
-    var timeout = setTimeout(() => openPortal(), delay);
-    setTimer(timeout);
-  }, [delay, openPortal, timer, isOpen]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, message ? /*#__PURE__*/React.createElement("span", {
-    className: className,
-    onBlur: handleBlur,
-    onClick: handleClick,
-    onFocus: openPortal,
-    onMouseOut: handleBlur,
-    onMouseOver: delayedOpenPortal
-  }, /*#__PURE__*/React.createElement("span", {
-    className: positionElementClassName,
-    ref: wrapperRef,
-    style: {
-      display: "inline-block"
-    }
-  }, React.Children.map(children, child => child && /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
-    "aria-describedby": isOpen ? tooltipId : undefined
-  }) : child)), isOpen ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
-    "data-testid": "tooltip-portal",
-    style: positionStyle
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "tooltip",
-    className: "p-tooltip__message",
-    onClick: event => {
-      // Prevent clicks inside the message from bubbling to parent
-      // click handlers.
-      event.stopPropagation();
-    },
-    ref: messageRef,
-    id: tooltipId,
-    style: {
-      zIndex: zIndex
-    }
-  }, message))) : null) : /*#__PURE__*/React.createElement("span", {
-    className: className
-  }, children));
-};
-export default Tooltip;

package/dist-esm/components/Tooltip/index.js

@@ -1 +0,0 @@
-export { default, position } from "./Tooltip";

package/dist-esm/enums.js

@@ -1,8 +0,0 @@
-/**
- * The Vanilla theme types.
- */
-export var Theme = /*#__PURE__*/function (Theme) {
-  Theme["DARK"] = "dark";
-  Theme["LIGHT"] = "light";
-  return Theme;
-}({});

package/dist-esm/hooks/index.js

@@ -1,8 +0,0 @@
-export { useOnClickOutside, useClickOutside } from "./useOnClickOutside";
-export { useId } from "./useId";
-export { useListener } from "./useListener";
-export { useOnEscapePressed } from "./useOnEscapePressed";
-export { usePrevious } from "./usePrevious";
-export { useThrottle } from "./useThrottle";
-export { usePagination } from "./usePagination";
-export { useWindowFitment } from "./useWindowFitment";

package/dist-esm/hooks/useId.js

@@ -1,13 +0,0 @@
-import { useId as useIdReact } from "react";
-import { IS_DEV } from "../utils";
-
-/**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
- */
-export var useId = () => {
-  var id = useIdReact();
-  if (IS_DEV) {
-    console.warn('The useId hook has been deprecated. Use `import { useId } from "react";` instead.');
-  }
-  return id;
-};

package/dist-esm/hooks/useListener.js

@@ -1,51 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useThrottle } from "./useThrottle";
-import { usePrevious } from "./usePrevious";
-
-/**
- * A hook that handles attaching/removing listeners and smartly reattaching if
- * any of the attributes change.
- * @param targetNode The node to attach the listener to.
- * @param callback The function to call from the listener.
- * @param eventType The event name.
- * @param shouldThrottle Whether the callback calls should be throttled.
- * @param shouldListen When the listener should be active.
- * @param options Native event listener options.
- */
-export var useListener = function useListener(targetNode, callback, eventType) {
-  var shouldThrottle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var shouldListen = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var options = arguments.length > 5 ? arguments[5] : undefined;
-  var isListening = useRef(false);
-  var throttle = useThrottle(callback);
-  var eventListener = useRef(shouldThrottle ? throttle : callback);
-  var previousEventType = usePrevious(eventType);
-  var previousShouldThrottle = usePrevious(shouldThrottle);
-  var previousTargetNode = usePrevious(targetNode);
-  var previousCallback = usePrevious(callback);
-  var previousOptions = usePrevious(options);
-  useEffect(() => {
-    // If any of the props related to the attached listener changed then the
-    // listener needs to be re-attached.
-    var listenerAttributesChanged = callback !== previousCallback || eventType !== previousEventType || shouldThrottle !== previousShouldThrottle || targetNode !== previousTargetNode || options !== previousOptions;
-    if (isListening.current && (!shouldListen || listenerAttributesChanged)) {
-      previousTargetNode.removeEventListener(previousEventType, eventListener.current, previousOptions);
-      isListening.current = false;
-    }
-    if (shouldThrottle !== previousShouldThrottle || callback !== previousCallback) {
-      // Set the listener to the callback, or used the throttled callback.
-      eventListener.current = shouldThrottle ? throttle : callback;
-    }
-    if (targetNode && shouldListen && !isListening.current) {
-      targetNode.addEventListener(eventType, eventListener.current, options);
-      isListening.current = true;
-    }
-  }, [callback, eventType, options, previousCallback, previousEventType, previousOptions, previousShouldThrottle, previousTargetNode, shouldListen, shouldThrottle, targetNode, throttle]);
-  useEffect(() => () => {
-    // Unattach the listener if the component gets unmounted while
-    // listening.
-    if (targetNode && isListening.current) {
-      targetNode.removeEventListener(eventType, eventListener.current, options);
-    }
-  }, [eventType, targetNode, options]);
-};

package/dist-esm/hooks/useOnClickOutside.js

@@ -1,38 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-
-/**
- * Handle clicks outside an element.
- */
-export var useOnClickOutside = function useOnClickOutside(elementRef, onClickOutside) {
-  var {
-    isEnabled
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    isEnabled: true
-  };
-  var handleClickOutside = useCallback(evt => {
-    var _evt$target, _elementRef$current;
-    var target = evt.target;
-    // The target might be something like an SVG node which doesn't provide
-    // the class name as a string.
-    var isValidTarget = typeof (evt === null || evt === void 0 || (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
-    if (!isValidTarget || elementRef !== null && elementRef !== void 0 && elementRef.current && !((_elementRef$current = elementRef.current) !== null && _elementRef$current !== void 0 && _elementRef$current.contains(target)) && elementRef.current !== target) {
-      onClickOutside();
-    }
-  }, [elementRef, onClickOutside]);
-  useEffect(() => {
-    if (isEnabled) {
-      document.addEventListener("click", handleClickOutside, false);
-    }
-    return () => document.removeEventListener("click", handleClickOutside, false);
-  }, [handleClickOutside, isEnabled]);
-};
-
-/**
- * Handle clicks outside an element.
- * @returns A ref to pass to the element to handle clicks outside of.
- */
-export var useClickOutside = onClickOutside => {
-  var ref = useRef(null);
-  useOnClickOutside(ref, onClickOutside);
-  return ref;
-};

package/dist-esm/hooks/useOnEscapePressed.js

@@ -1,25 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-/**
- * Handle the escape key pressed.
- */
-export var useOnEscapePressed = function useOnEscapePressed(onEscape) {
-  var {
-    isEnabled
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    isEnabled: true
-  };
-  var keyDown = useCallback(evt => {
-    if (evt.code === "Escape") {
-      onEscape();
-    }
-  }, [onEscape]);
-  useEffect(() => {
-    if (isEnabled) {
-      document.addEventListener("keydown", keyDown);
-    }
-    return () => {
-      document.removeEventListener("keydown", keyDown);
-    };
-  }, [keyDown, isEnabled]);
-};

package/dist-esm/hooks/usePagination.js

@@ -1,45 +0,0 @@
-import { useMemo, useEffect, useState } from "react";
-
-/**
- * A hook that handles pagination.
- * @param data - The data array to paginate.
- * @param {Object} options
- * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
- * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
- * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
- */
-
-export function usePagination(data, options) {
-  var _data$length;
-  var defaultOptions = {
-    initialPage: 1,
-    autoResetPage: false
-  };
-  var {
-    itemsPerPage,
-    initialPage,
-    autoResetPage
-  } = Object.assign(defaultOptions, options);
-  var totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
-  var initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
-  var [pageIndex, setPageIndex] = useState(initialPageIndex);
-  var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
-  var paginate = pageNumber => setPageIndex(pageNumber - 1);
-  useEffect(() => {
-    if (typeof itemsPerPage === "number" && startIndex >= totalItems) {
-      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ?
-      // go to the last available page if the current page is out of bounds
-      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) :
-      // go to the initial page if autoResetPage is true
-      setPageIndex(0);
-    }
-  }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);
-  var pageData = useMemo(() => typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data, [startIndex, data, itemsPerPage]);
-  return {
-    pageData,
-    currentPage: pageIndex + 1,
-    paginate,
-    itemsPerPage,
-    totalItems
-  };
-}

package/dist-esm/hooks/usePrevious.js

@@ -1,16 +0,0 @@
-import { useEffect, useRef } from "react";
-
-/**
- * A hook to handle storing the previous value of anything.
- * @param value - The value to watch.
- * @param setInitial - Whether it should initialise with the current value.
- * @return The previous value.
- */
-export var usePrevious = function usePrevious(value) {
-  var setInitial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var ref = useRef(setInitial ? value : undefined);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-};

package/dist-esm/hooks/useThrottle.js

@@ -1,49 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export var THROTTLE_DELAY = 1000 / 60;
-// eslint-disable-line @typescript-eslint/no-explicit-any
-
-/**
- * A hook to handle throttling calls to a function.
- * @param callback The function to throttle.
- * @param delay The throttle delay in ms.
- * @return The callback function wrapped in the throttle.
- */
-export var useThrottle = function useThrottle(callback) {
-  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  var timeout = useRef();
-  var lastCall = useRef();
-  var lastArgs = useRef(null);
-  var throttle = useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    lastArgs.current = args;
-    var callCallback = () => {
-      callback(...lastArgs.current);
-      lastCall.current = Date.now();
-      timeout.current = null;
-    };
-    var createTimeout = () => {
-      timeout.current = window.setTimeout(() => {
-        callCallback();
-        timeout.current = null;
-      }, delay);
-    };
-    if (!lastCall.current) {
-      // Initially call the callback and start a timeout for the next call.
-      callCallback();
-      createTimeout();
-    } else if (!timeout.current && Date.now() - lastCall.current > delay) {
-      // If a timeout isn't active then create a new one if the delay time
-      // has elapsed.
-      createTimeout();
-    }
-  }, [callback, delay]);
-  useEffect(() => () => {
-    // Clear the timeout when unmounting.
-    if (timeout.current) {
-      clearTimeout(timeout.current);
-    }
-  }, []);
-  return throttle;
-};

package/dist-esm/hooks/useWindowFitment.js

@@ -1,109 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { useListener } from "./useListener";
-/**
- * A hook to determine if an element fits on the window.
- * @param targetNode The element to try and fit on the window.
- * @param referenceNode The element to use to position the target.
- * @param callback The function to call when updating fitment info.
- * @param spacer An additional space to leave between the target and reference.
- * @param shouldCheck Whether the fitment info should be being checked.
- * @param fromMouse Whether the target should be being positioned in relation
- *                  to the mouse. In this case refernceNode will be used to
- *                  listen for mouseover events.
- */
-export var useWindowFitment = function useWindowFitment(targetNode, referenceNode, callback) {
-  var spacer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-  var shouldCheck = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  var fromMouse = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var htmlRef = useRef(document.querySelector("html"));
-  var update = useCallback(evt => {
-    var referenceCoordinates;
-    if (fromMouse) {
-      if (evt) {
-        referenceCoordinates = {
-          // The mouse is a single point so use 0 for the height and width.
-          height: 0,
-          left: evt.x || 0,
-          top: evt.y || 0,
-          width: 0
-        };
-      }
-    } else if (referenceNode) {
-      referenceCoordinates = referenceNode.getBoundingClientRect();
-    }
-    if (shouldCheck && targetNode && referenceCoordinates) {
-      var {
-        height: targetHeight,
-        width: targetWidth
-      } = targetNode.getBoundingClientRect();
-      var {
-        height: referenceHeight,
-        left: referenceLeft,
-        top: referenceTop,
-        width: referenceWidth
-      } = referenceCoordinates;
-      var referenceBottom = referenceTop + referenceHeight;
-      var referenceRight = referenceLeft + referenceWidth;
-      var referenceCenterX = referenceLeft + referenceWidth / 2;
-      var referenceCenterY = referenceTop + referenceHeight / 2;
-      var windowLeft = htmlRef.current.scrollLeft;
-      var windowRight = window.innerWidth - htmlRef.current.scrollLeft;
-      var windowTop = 0;
-      var windowBottom = window.innerHeight;
-      var heightIncludingSpace = targetHeight + spacer;
-      var widthIncludingSpace = targetWidth + spacer;
-      var widthFromCenter = targetWidth / 2;
-      var heightFromCenter = targetHeight / 2;
-      callback({
-        fromTop: {
-          fitsAbove: referenceTop - heightIncludingSpace > windowTop,
-          fitsBelow: referenceTop + heightIncludingSpace < windowBottom,
-          spaceAbove: Math.abs(windowTop - referenceTop),
-          spaceBelow: windowBottom - referenceTop
-        },
-        fromBottom: {
-          fitsAbove: referenceBottom - heightIncludingSpace > windowTop,
-          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom,
-          spaceAbove: Math.abs(windowTop - referenceBottom),
-          spaceBelow: windowBottom - referenceBottom
-        },
-        fromLeft: {
-          fitsLeft: referenceLeft - widthIncludingSpace > windowLeft,
-          fitsRight: referenceLeft + widthIncludingSpace < windowRight,
-          spaceLeft: Math.abs(windowLeft - referenceLeft),
-          spaceRight: windowRight - referenceLeft
-        },
-        fromRight: {
-          fitsLeft: referenceRight - widthIncludingSpace > windowLeft,
-          fitsRight: referenceRight + widthIncludingSpace < windowRight,
-          spaceLeft: Math.abs(windowLeft - referenceRight),
-          spaceRight: windowRight - referenceRight
-        },
-        fromCenter: {
-          fitsLeft: referenceCenterX - widthIncludingSpace > windowLeft,
-          fitsRight: referenceCenterX + widthIncludingSpace < windowRight,
-          fitsAbove: referenceCenterY - heightIncludingSpace > windowTop,
-          fitsBelow: referenceCenterY + heightIncludingSpace < windowBottom,
-          spaceAbove: Math.abs(windowTop - referenceCenterY),
-          spaceBelow: windowBottom - referenceCenterY,
-          spaceLeft: Math.abs(windowLeft - referenceCenterX),
-          spaceRight: windowRight - referenceCenterX,
-          fitsCentered: {
-            fitsLeft: referenceCenterX - widthFromCenter > windowLeft,
-            fitsRight: referenceCenterX + widthFromCenter < windowRight,
-            fitsAbove: referenceCenterY - heightFromCenter > windowTop,
-            fitsBelow: referenceCenterY + heightFromCenter < windowBottom
-          }
-        }
-      });
-    }
-  }, [shouldCheck, targetNode, callback, spacer, fromMouse, referenceNode]);
-  useListener(window, update, "resize", true, shouldCheck && !fromMouse);
-  useListener(window, update, "scroll", true, shouldCheck && !fromMouse);
-  useListener(referenceNode, update, "mousemove", true, fromMouse && shouldCheck);
-  useEffect(() => {
-    if (!fromMouse) {
-      update();
-    }
-  }, [fromMouse, update]);
-};