@atlaskit/teams-app-internal-popup-adaptor 1.1.0

package/dist/es2019/PopupTriggerWithHover.js

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { loadEntryPoint } from 'react-relay';
+import { mergeRefs } from 'use-callback-ref';
+import { Popup } from '@atlaskit/popup';
+import Spinner from '@atlaskit/spinner';
+import { InternalEntryPointContainer } from '@atlassian/internal-entry-point-container';
+import { useRelayEnvironmentProvider } from '@atlassian/relay-environment-provider';
+import { useHoverTriggerRef } from './useHoverTriggerRef';
+import { usePreloadRef } from './usePreloadRef';
+import { usePressableTriggerRef } from './usePressableTriggerRef';
+const emptyEntryPointParams = {};
+const emptyEntryPointProps = {};
+const FallbackComponent = ({
+  fallback,
+  onUnmount
+}) => {
+  useEffect(() => {
+    return () => onUnmount();
+  }, [onUnmount]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fallback || /*#__PURE__*/React.createElement(Spinner, null));
+};
+export function PopupTriggerWithHover({
+  trigger,
+  triggerMode = 'click',
+  entryPoint,
+  entryPointParams,
+  entryPointProps,
+  fallback,
+  errorFallback,
+  onError,
+  forcedReportErrorUFO,
+  onOpen,
+  onClose,
+  ...popupProps
+}) {
+  const environmentProvider = useRelayEnvironmentProvider();
+  const id = useMemo(() => {
+    return entryPoint.root.getModuleName() || 'unknown';
+  }, [entryPoint]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const updateRef = useRef(null);
+  const openedByRef = useRef(null);
+  const isOpenRef = useRef(isOpen);
+  const triggers = Array.isArray(triggerMode) ? triggerMode : [triggerMode];
+  useLayoutEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  const handleOpen = useCallback(method => {
+    setIsOpen(true);
+    if (method) {
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen(method);
+    }
+  }, [onOpen]);
+  const handleClose = useCallback((event, currentLevel) => {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose(event !== null && event !== void 0 ? event : null, currentLevel);
+  }, [onClose]);
+  const load = useCallback(() => loadEntryPoint(environmentProvider, entryPoint, entryPointParams !== null && entryPointParams !== void 0 ? entryPointParams : emptyEntryPointParams), [entryPoint, entryPointParams, environmentProvider]);
+  const onLoad = useCallback(({
+    reference: entryPointReference
+  }) => {
+    if (isOpenRef.current) {
+      return;
+    }
+    handleOpen(openedByRef.current);
+    setContent( /*#__PURE__*/React.createElement(InternalEntryPointContainer, {
+      id: id,
+      entryPointReference: entryPointReference,
+      fallback: /*#__PURE__*/React.createElement(FallbackComponent, {
+        fallback: fallback,
+        onUnmount: () => {
+          var _updateRef$current;
+          return (_updateRef$current = updateRef.current) === null || _updateRef$current === void 0 ? void 0 : _updateRef$current.call(updateRef);
+        }
+      }),
+      errorFallback: errorFallback,
+      runtimeProps: {
+        ...(entryPointProps !== null && entryPointProps !== void 0 ? entryPointProps : emptyEntryPointProps),
+        onContentResized: () => {
+          var _updateRef$current2;
+          (_updateRef$current2 = updateRef.current) === null || _updateRef$current2 === void 0 ? void 0 : _updateRef$current2.call(updateRef);
+        },
+        onClose: handleClose
+      },
+      onError: onError,
+      forcedError: forcedReportErrorUFO
+    }));
+  }, [setContent, id, entryPointProps, fallback, forcedReportErrorUFO, errorFallback, handleOpen, onError, handleClose]);
+  const preloadRef = usePreloadRef({
+    load,
+    onLoad
+  });
+  const pressableRef = usePressableTriggerRef({
+    onOpen: preloadRef.loadAndOpen,
+    onClose: handleClose,
+    isOpen,
+    isDisabled: !triggers.includes('click'),
+    openedByRef
+  });
+  const {
+    triggerRef: hoverTriggerRef,
+    contentRef: hoverContentRef
+  } = useHoverTriggerRef({
+    onOpen: preloadRef.loadAndOpen,
+    onClose: handleClose,
+    isOpen,
+    isDisabled: !triggers.includes('hover'),
+    openedByRef
+  });
+  useEffect(() => {
+    if (!isOpen) {
+      openedByRef.current = null;
+    }
+  }, [isOpen]);
+  const popupTrigger = useCallback(triggerProps => {
+    const mergedRef = mergeRefs([preloadRef, pressableRef, hoverTriggerRef, triggerProps.ref]);
+    return trigger({
+      ...triggerProps,
+      ref: mergedRef
+    });
+  }, [trigger, preloadRef, pressableRef, hoverTriggerRef]);
+  const popupContent = useCallback(({
+    update
+  }) => {
+    updateRef.current = update;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: hoverContentRef,
+      role: "none"
+    }, content);
+  }, [content, hoverContentRef]);
+  return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    trigger: popupTrigger,
+    content: popupContent
+  }));
+}

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { PopupTriggerWithHover } from './PopupTriggerWithHover';

package/dist/es2019/useHoverDelay.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Hook for managing delayed hover actions with timeout management.
+ */
+function useHoverDelay(callback, delay) {
+  const timeoutRef = useRef(null);
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  const clear = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const schedule = useCallback(() => {
+    clear();
+    timeoutRef.current = window.setTimeout(() => {
+      callbackRef.current();
+    }, delay);
+  }, [delay, clear]);
+  useEffect(() => {
+    return () => clear();
+  }, [clear]);
+  return {
+    schedule,
+    clear
+  };
+}
+export { useHoverDelay };

package/dist/es2019/useHoverTriggerRef.js

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import { useHoverDelay } from './useHoverDelay';
+import { getChildPortalFromParentPopup, hasRelatedTarget, isMovingToKudos } from './utils';
+const HOVER_OPEN_DELAY = 800;
+const HOVER_CLOSE_DELAY = 200;
+/**
+ * Hover behavior for popup trigger and content with delayed open/close.
+ */
+export function useHoverTriggerRef({
+  onOpen,
+  onClose,
+  isOpen = false,
+  isDisabled = false,
+  openedByRef,
+  delays = {}
+}) {
+  const {
+    hoverOpen = HOVER_OPEN_DELAY,
+    hoverClose = HOVER_CLOSE_DELAY
+  } = delays;
+  const triggerNodeRef = useRef(null);
+  const triggerListeners = useRef([]);
+  const contentNodeRef = useRef(null);
+  const contentListeners = useRef(new Map());
+  const isOpenRef = useRef(isOpen);
+  useLayoutEffect(() => {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  const openDelay = useHoverDelay(() => {
+    if (isOpenRef.current) {
+      return;
+    }
+    if (openedByRef) {
+      openedByRef.current = 'hover';
+    }
+    onOpen();
+  }, hoverOpen);
+  const closeDelay = useHoverDelay(() => {
+    if (!isOpenRef.current) {
+      return;
+    }
+    if (!openedByRef || openedByRef.current === 'hover') {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  }, hoverClose);
+  const openDelayRef = useRef(openDelay);
+  const closeDelayRef = useRef(closeDelay);
+  openDelayRef.current = openDelay;
+  closeDelayRef.current = closeDelay;
+  const handleTriggerEnter = useCallback(() => {
+    closeDelayRef.current.clear();
+    openDelayRef.current.schedule();
+  }, []);
+  const handleTriggerLeave = useCallback(() => {
+    openDelayRef.current.clear();
+    closeDelayRef.current.schedule();
+  }, []);
+  const triggerRef = useCallback(element => {
+    if (element === triggerNodeRef.current) {
+      return;
+    }
+    triggerListeners.current.forEach(unbind => unbind());
+    triggerListeners.current = [];
+    triggerNodeRef.current = element;
+    if (element && !isDisabled) {
+      triggerListeners.current.push(bind(element, {
+        type: 'mouseenter',
+        listener: handleTriggerEnter
+      }), bind(element, {
+        type: 'mouseleave',
+        listener: handleTriggerLeave
+      }));
+    }
+  }, [handleTriggerEnter, handleTriggerLeave, isDisabled]);
+  const handleContentEnter = useCallback(() => {
+    closeDelayRef.current.clear();
+  }, []);
+  const cleanupContentListeners = useCallback(() => {
+    contentListeners.current.forEach(unbind => unbind());
+    contentListeners.current.clear();
+  }, []);
+  const attachContentListeners = useCallback(element => {
+    if (contentListeners.current.has(element)) {
+      return;
+    }
+    const handleMouseLeave = event => {
+      if (!hasRelatedTarget(event)) {
+        return;
+      }
+      const relatedTarget = event.relatedTarget;
+      if (isMovingToKudos(relatedTarget)) {
+        return;
+      }
+      const childPortal = getChildPortalFromParentPopup(relatedTarget, contentNodeRef.current);
+      if (childPortal) {
+        attachContentListeners(childPortal);
+        return;
+      }
+      closeDelayRef.current.schedule();
+    };
+    const unbindEnter = bind(element, {
+      type: 'mouseenter',
+      listener: handleContentEnter
+    });
+    const unbindLeave = bind(element, {
+      type: 'mouseleave',
+      listener: handleMouseLeave
+    });
+    contentListeners.current.set(element, () => {
+      unbindEnter();
+      unbindLeave();
+    });
+  }, [handleContentEnter]);
+  const contentRef = useCallback(element => {
+    if (element === contentNodeRef.current) {
+      return;
+    }
+    cleanupContentListeners();
+    contentNodeRef.current = element;
+    if (element && !isDisabled) {
+      attachContentListeners(element);
+    }
+  }, [attachContentListeners, cleanupContentListeners, isDisabled]);
+  useEffect(() => {
+    const listeners = contentListeners.current;
+    const triggers = triggerListeners.current;
+    return () => {
+      openDelayRef.current.clear();
+      closeDelayRef.current.clear();
+      triggers.forEach(unbind => unbind());
+      listeners.forEach(unbind => unbind());
+    };
+  }, []);
+  return {
+    triggerRef,
+    contentRef
+  };
+}

package/dist/es2019/usePreloadRef.js

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+const PRELOAD_MAX_AGE = 5 * 60 * 1000;
+const TIME_TO_INTENT = 200;
+export function usePreloadRef({
+  load,
+  onLoad
+}) {
+  const nodeRef = useRef(null);
+  const eventListeners = useRef([]);
+  const {
+    loadAndOpen,
+    preloadReference,
+    cancelPreload
+  } = useMemo(() => {
+    const request = {};
+    const clearPreloadTimeouts = () => {
+      if (request.preloadIntentTimeout != null) {
+        clearTimeout(request.preloadIntentTimeout);
+        delete request.preloadIntentTimeout;
+      }
+      if (request.preloadMaxAgeTimeout != null) {
+        clearTimeout(request.preloadMaxAgeTimeout);
+        delete request.preloadMaxAgeTimeout;
+      }
+    };
+    const cancelPreload = () => {
+      var _request$preload;
+      clearPreloadTimeouts();
+      (_request$preload = request.preload) === null || _request$preload === void 0 ? void 0 : _request$preload.dispose();
+    };
+    const loadReference = () => {
+      var _request$preload$refe, _request$preload2;
+      if (request.load) {
+        return request.load;
+      }
+      const reference = (_request$preload$refe = (_request$preload2 = request.preload) === null || _request$preload2 === void 0 ? void 0 : _request$preload2.reference) !== null && _request$preload$refe !== void 0 ? _request$preload$refe : load();
+      if (request.preload) {
+        delete request.preload;
+      }
+      request.load = {
+        reference,
+        dispose() {
+          reference.dispose();
+          delete request.load;
+        }
+      };
+      return request.load;
+    };
+    const loadAndOpen = () => {
+      clearPreloadTimeouts();
+      onLoad(loadReference());
+    };
+    const preloadReference = () => {
+      if (request.preloadIntentTimeout || request.preload) {
+        return;
+      }
+      request.preloadIntentTimeout = setTimeout(() => {
+        delete request.preloadIntentTimeout;
+        const reference = load();
+        request.preload = {
+          reference,
+          dispose() {
+            reference.dispose();
+            delete request.preload;
+          }
+        };
+        request.preloadMaxAgeTimeout = setTimeout(() => {
+          var _request$preload3;
+          delete request.preloadMaxAgeTimeout;
+          (_request$preload3 = request.preload) === null || _request$preload3 === void 0 ? void 0 : _request$preload3.dispose();
+        }, PRELOAD_MAX_AGE);
+      }, TIME_TO_INTENT);
+    };
+    return {
+      loadAndOpen,
+      preloadReference,
+      cancelPreload
+    };
+  }, [load, onLoad]);
+  const cleanUpEventListeners = useCallback(() => {
+    eventListeners.current.forEach(unbind => {
+      unbind();
+    });
+    eventListeners.current = [];
+  }, []);
+  const addEventListener = useCallback((element, type, callback) => {
+    const unbind = bind(element, {
+      type,
+      listener: callback
+    });
+    eventListeners.current.push(unbind);
+  }, []);
+  const refCallback = useCallback(element => {
+    if (element !== nodeRef.current) {
+      if (nodeRef.current) {
+        cancelPreload();
+        cleanUpEventListeners();
+      }
+      if (element) {
+        addEventListener(element, 'mouseenter', preloadReference);
+        addEventListener(element, 'mouseleave', cancelPreload);
+      }
+      nodeRef.current = element;
+    }
+  }, [preloadReference, cancelPreload, addEventListener, cleanUpEventListeners]);
+  useEffect(() => {
+    return () => {
+      cleanUpEventListeners();
+    };
+  }, [cleanUpEventListeners]);
+  return Object.assign(refCallback, {
+    loadAndOpen
+  });
+}

package/dist/es2019/usePressableTriggerRef.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+export function usePressableTriggerRef({
+  onOpen,
+  onClose,
+  isOpen = false,
+  isDisabled = false,
+  openedByRef
+}) {
+  const nodeRef = useRef(null);
+  const eventListeners = useRef([]);
+  const handleOpen = useCallback(() => {
+    if (isOpen) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    } else {
+      if (openedByRef) {
+        openedByRef.current = 'click';
+      }
+      onOpen();
+    }
+  }, [isOpen, onClose, openedByRef, onOpen]);
+  const keydownListener = useCallback(event => {
+    if (event instanceof KeyboardEvent && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      handleOpen();
+    }
+  }, [handleOpen]);
+  const cleanUpEventListeners = useCallback(() => {
+    eventListeners.current.forEach(unbind => {
+      unbind();
+    });
+    eventListeners.current = [];
+  }, []);
+  const addEventListener = useCallback((element, type, callback) => {
+    const unbind = bind(element, {
+      type,
+      listener: callback
+    });
+    eventListeners.current.push(unbind);
+  }, []);
+  const refCallback = useCallback(element => {
+    if (element !== nodeRef.current) {
+      if (nodeRef.current) {
+        cleanUpEventListeners();
+      }
+      if (element) {
+        if (!isDisabled) {
+          addEventListener(element, 'click', handleOpen);
+        }
+        // Always attach keydown for keyboard accessibility
+        addEventListener(element, 'keydown', keydownListener);
+      }
+      nodeRef.current = element;
+    }
+  }, [handleOpen, keydownListener, addEventListener, cleanUpEventListeners, isDisabled]);
+  useEffect(() => {
+    return () => {
+      cleanUpEventListeners();
+    };
+  }, [cleanUpEventListeners]);
+  return refCallback;
+}

package/dist/es2019/utils.js

@@ -0,0 +1,40 @@
+/**
+ * Type guard to check if an event has a relatedTarget property.
+ */
+function hasRelatedTarget(event) {
+  return 'relatedTarget' in event;
+}
+
+/**
+ * Checks if the mouse is moving to an atlaskit portal or kudos modal
+ * where we should prevent the popup from closing
+ */
+function isMovingToKudos(relatedTarget) {
+  var _relatedTarget$closes;
+  if (!(relatedTarget instanceof HTMLElement)) {
+    return false;
+  }
+  const iframe = ((_relatedTarget$closes = relatedTarget.closest('.atlaskit-portal')) === null || _relatedTarget$closes === void 0 ? void 0 : _relatedTarget$closes.querySelector('iframe')) || relatedTarget.closest('iframe');
+  return iframe instanceof HTMLIFrameElement && iframe.src.includes('give-kudos');
+}
+
+/**
+ * Returns the child portal if mouse is moving to a portal controlled by the parent popup.
+ */
+function getChildPortalFromParentPopup(relatedTarget, parentPopupElement) {
+  if (!(relatedTarget instanceof HTMLElement) || !parentPopupElement) {
+    return null;
+  }
+  const portal = relatedTarget.closest('.atlaskit-portal');
+  if (!portal) {
+    return null;
+  }
+  for (const trigger of Array.from(parentPopupElement.querySelectorAll('[aria-controls]'))) {
+    const controlsId = trigger.getAttribute('aria-controls');
+    if (controlsId && portal.querySelector(`#${controlsId}`)) {
+      return portal;
+    }
+  }
+  return null;
+}
+export { hasRelatedTarget, isMovingToKudos, getChildPortalFromParentPopup };

package/dist/esm/PopupTriggerWithHover.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["trigger", "triggerMode", "entryPoint", "entryPointParams", "entryPointProps", "fallback", "errorFallback", "onError", "forcedReportErrorUFO", "onOpen", "onClose"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { loadEntryPoint } from 'react-relay';
+import { mergeRefs } from 'use-callback-ref';
+import { Popup } from '@atlaskit/popup';
+import Spinner from '@atlaskit/spinner';
+import { InternalEntryPointContainer } from '@atlassian/internal-entry-point-container';
+import { useRelayEnvironmentProvider } from '@atlassian/relay-environment-provider';
+import { useHoverTriggerRef } from './useHoverTriggerRef';
+import { usePreloadRef } from './usePreloadRef';
+import { usePressableTriggerRef } from './usePressableTriggerRef';
+var emptyEntryPointParams = {};
+var emptyEntryPointProps = {};
+var FallbackComponent = function FallbackComponent(_ref) {
+  var fallback = _ref.fallback,
+    onUnmount = _ref.onUnmount;
+  useEffect(function () {
+    return function () {
+      return onUnmount();
+    };
+  }, [onUnmount]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fallback || /*#__PURE__*/React.createElement(Spinner, null));
+};
+export function PopupTriggerWithHover(_ref2) {
+  var trigger = _ref2.trigger,
+    _ref2$triggerMode = _ref2.triggerMode,
+    triggerMode = _ref2$triggerMode === void 0 ? 'click' : _ref2$triggerMode,
+    entryPoint = _ref2.entryPoint,
+    entryPointParams = _ref2.entryPointParams,
+    entryPointProps = _ref2.entryPointProps,
+    fallback = _ref2.fallback,
+    errorFallback = _ref2.errorFallback,
+    onError = _ref2.onError,
+    forcedReportErrorUFO = _ref2.forcedReportErrorUFO,
+    onOpen = _ref2.onOpen,
+    onClose = _ref2.onClose,
+    popupProps = _objectWithoutProperties(_ref2, _excluded);
+  var environmentProvider = useRelayEnvironmentProvider();
+  var id = useMemo(function () {
+    return entryPoint.root.getModuleName() || 'unknown';
+  }, [entryPoint]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    content = _useState4[0],
+    setContent = _useState4[1];
+  var updateRef = useRef(null);
+  var openedByRef = useRef(null);
+  var isOpenRef = useRef(isOpen);
+  var triggers = Array.isArray(triggerMode) ? triggerMode : [triggerMode];
+  useLayoutEffect(function () {
+    isOpenRef.current = isOpen;
+  }, [isOpen]);
+  var handleOpen = useCallback(function (method) {
+    setIsOpen(true);
+    if (method) {
+      onOpen === null || onOpen === void 0 || onOpen(method);
+    }
+  }, [onOpen]);
+  var handleClose = useCallback(function (event, currentLevel) {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose(event !== null && event !== void 0 ? event : null, currentLevel);
+  }, [onClose]);
+  var load = useCallback(function () {
+    return loadEntryPoint(environmentProvider, entryPoint, entryPointParams !== null && entryPointParams !== void 0 ? entryPointParams : emptyEntryPointParams);
+  }, [entryPoint, entryPointParams, environmentProvider]);
+  var onLoad = useCallback(function (_ref3) {
+    var entryPointReference = _ref3.reference;
+    if (isOpenRef.current) {
+      return;
+    }
+    handleOpen(openedByRef.current);
+    setContent( /*#__PURE__*/React.createElement(InternalEntryPointContainer, {
+      id: id,
+      entryPointReference: entryPointReference,
+      fallback: /*#__PURE__*/React.createElement(FallbackComponent, {
+        fallback: fallback,
+        onUnmount: function onUnmount() {
+          var _updateRef$current;
+          return (_updateRef$current = updateRef.current) === null || _updateRef$current === void 0 ? void 0 : _updateRef$current.call(updateRef);
+        }
+      }),
+      errorFallback: errorFallback,
+      runtimeProps: _objectSpread(_objectSpread({}, entryPointProps !== null && entryPointProps !== void 0 ? entryPointProps : emptyEntryPointProps), {}, {
+        onContentResized: function onContentResized() {
+          var _updateRef$current2;
+          (_updateRef$current2 = updateRef.current) === null || _updateRef$current2 === void 0 || _updateRef$current2.call(updateRef);
+        },
+        onClose: handleClose
+      }),
+      onError: onError,
+      forcedError: forcedReportErrorUFO
+    }));
+  }, [setContent, id, entryPointProps, fallback, forcedReportErrorUFO, errorFallback, handleOpen, onError, handleClose]);
+  var preloadRef = usePreloadRef({
+    load: load,
+    onLoad: onLoad
+  });
+  var pressableRef = usePressableTriggerRef({
+    onOpen: preloadRef.loadAndOpen,
+    onClose: handleClose,
+    isOpen: isOpen,
+    isDisabled: !triggers.includes('click'),
+    openedByRef: openedByRef
+  });
+  var _useHoverTriggerRef = useHoverTriggerRef({
+      onOpen: preloadRef.loadAndOpen,
+      onClose: handleClose,
+      isOpen: isOpen,
+      isDisabled: !triggers.includes('hover'),
+      openedByRef: openedByRef
+    }),
+    hoverTriggerRef = _useHoverTriggerRef.triggerRef,
+    hoverContentRef = _useHoverTriggerRef.contentRef;
+  useEffect(function () {
+    if (!isOpen) {
+      openedByRef.current = null;
+    }
+  }, [isOpen]);
+  var popupTrigger = useCallback(function (triggerProps) {
+    var mergedRef = mergeRefs([preloadRef, pressableRef, hoverTriggerRef, triggerProps.ref]);
+    return trigger(_objectSpread(_objectSpread({}, triggerProps), {}, {
+      ref: mergedRef
+    }));
+  }, [trigger, preloadRef, pressableRef, hoverTriggerRef]);
+  var popupContent = useCallback(function (_ref4) {
+    var update = _ref4.update;
+    updateRef.current = update;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: hoverContentRef,
+      role: "none"
+    }, content);
+  }, [content, hoverContentRef]);
+  return /*#__PURE__*/React.createElement(Popup, _extends({}, popupProps, {
+    isOpen: isOpen,
+    onClose: handleClose,
+    trigger: popupTrigger,
+    content: popupContent
+  }));
+}

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { PopupTriggerWithHover } from './PopupTriggerWithHover';