@canonical/react-components 1.2.5 → 1.3.1

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

@@ -0,0 +1,245 @@
+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

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

package/dist-esm/enums.js

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

package/dist-esm/hooks/index.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,109 @@
+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]);
+};