ember-attacher 1.3.0 → 2.0.1

package/addon/components/attach-popover.js

@@ -1,102 +1,149 @@
-import classic from 'ember-classic-decorator';
-import { tagName, layout as templateLayout } from '@ember-decorators/component';
-import { observes } from '@ember-decorators/object';
-import { action, computed } from '@ember/object';
-import Component from '@ember/component';
-import DEFAULTS from '../defaults';
-import layout from '../templates/components/attach-popover';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
 import { cancel, debounce, later, next, run } from '@ember/runloop';
 import { getOwner } from '@ember/application';
 import { guidFor } from '@ember/object/internals';
-import { htmlSafe, isHTMLSafe } from '@ember/string';
+import { htmlSafe, isHTMLSafe } from '@ember/template';
 import { stripInProduction } from 'ember-attacher/-debug/helpers';
-import { warn } from '@ember/debug';
-import { isEmpty } from '@ember/utils';
+import { warn, assert } from '@ember/debug';
+import { isEmpty, typeOf } from '@ember/utils';
+import { autoUpdate, computePosition, arrow, flip } from '@floating-ui/dom';
+import { buildWaiter } from '@ember/test-waiters';
+import { tracked } from '@glimmer/tracking';
+import DEFAULTS from '../defaults';
+
+const animationTestWaiter = buildWaiter('attach-popover');
 
-@classic
-@templateLayout(layout)
-@tagName('')
 export default class AttachPopover extends Component {
+  @tracked parentNotFound = true;
+  @tracked parentElement = null;
+  @tracked _isStartingAnimation = false;
+  @tracked _arrowElement = null;
+  @tracked _currentTarget = null;
+  // This is set to true when the popover is shown in order to override lazyRender=false
+  @tracked _mustRender = false;
+  @tracked _transitionDuration = 0;
+  _floatingElement = null;
   configKey = 'popover';
+
   /**
    * ================== PUBLIC CONFIG OPTIONS ==================
    */
+  get arrow() {
+    return this.args.arrow ?? this._config.arrow ?? DEFAULTS.arrow;
+  }
 
-  animation = DEFAULTS.animation;
-
-  arrow = DEFAULTS.arrow;
-  flip = DEFAULTS.flip;
-  hideDelay = DEFAULTS.hideDelay;
-  hideDuration = DEFAULTS.hideDuration;
-  hideOn = DEFAULTS.hideOn;
-  interactive = DEFAULTS.interactive;
-  isOffset = DEFAULTS.isOffset;
-  isShown = DEFAULTS.isShown;
-  lazyRender = DEFAULTS.lazyRender;
-  onChange = null;
-  placement = DEFAULTS.placement;
-  popperContainer = DEFAULTS.popperContainer;
-  popperOptions = DEFAULTS.popperOptions;
-  popperTarget = null;
-  renderInPlace = DEFAULTS.renderInPlace;
-  showDelay = DEFAULTS.showDelay;
-  showDuration = DEFAULTS.showDuration;
-  showOn = DEFAULTS.showOn;
-  style = DEFAULTS.style;
-  useCapture = DEFAULTS.useCapture;
+  get autoUpdate() {
+    return this.args.autoUpdate ?? this._config.autoUpdate ?? DEFAULTS.autoUpdate;
+  }
 
-  // Exposed via the named yield to enable custom hide events
-  @action
-  hide() {
-    this._hide();
+  get animation() {
+    return this.args.animation || this._config.animation || DEFAULTS.animation;
   }
 
-  @action
-  _registerAPI(api) {
-    this._disableEventListeners = api.disableEventListeners;
-    this._enableEventListeners = api.enableEventListeners;
-    this._popperElement = api.popperElement;
-    this._update = api.update;
-
-    if (!this.isDestroying && !this.isDestroyed) {
-      if (this.registerAPI !== undefined) {
-        this.registerAPI(api);
-      }
+  get flip() {
+    return this.args.flip ?? this._config.flip ?? DEFAULTS.flip;
+  }
 
-      if (this._isHidden) {
-        // Hide the attachment until it has been positioned,
-        // preventing jank during initial positioning
-        this._popperElement.style.visibility = 'hidden';
+  get hideDelay() {
+    return this.args.hideDelay ?? this._config.hideDelay ?? DEFAULTS.hideDelay;
+  }
 
-        // The attachment has no width if initially hidden. This can cause it to be positioned so
-        // far to the right that it overflows the screen until enough updates fix its position.
-        // We avoid this by positioning initially hidden elements in the top left of the screen.
-        // The attachment will then correctly update its position from the first this._show()
-        this._popperElement.style.transform = null;
+  get hideDuration() {
+    return this.args.hideDuration ?? this._config.hideDuration ?? DEFAULTS.hideDuration;
+  }
 
-        this._popperElement.style.display = this.isShown ? '' : 'none';
-      }
+  get hideOn() {
+    return this.args.hideOn || this._config.hideOn || DEFAULTS.hideOn;
+  }
+
+  get interactive() {
+    return this.args.interactive ?? this._config.interactive ?? DEFAULTS.interactive;
+  }
+
+  get isOffset() {
+    return this.args.isOffset ?? this._config.isOffset ?? DEFAULTS.interactive;
+  }
+
+  get isShown() {
+    return this.args.isShown ?? this._config.isShown ?? DEFAULTS.isShown;
+  }
+
+  get lazyRender() {
+    return this.args.lazyRender ?? this._config.lazyRender ?? DEFAULTS.lazyRender;
+  }
+
+  get placement() {
+    return this.args.placement ?? this._config.placement ?? DEFAULTS.placement;
+  }
+
+  get floatingElementContainer() {
+    return this.args.floatingElementContainer || this._config.floatingElementContainer || DEFAULTS.floatingElementContainer;
+  }
+
+  get class() {
+    return this.args.class || this._config.class;
+  }
+
+  get floatingUiOptions() {
+    return this.args.floatingUiOptions || this._config.floatingUiOptions || DEFAULTS.floatingUiOptions;
+  }
+
+  get renderInPlace() {
+    return this.args.renderInPlace ?? this._config.renderInPlace ?? DEFAULTS.renderInPlace;
+  }
+
+  get showDelay() {
+    return this.args.showDelay ?? this._config.showDelay ?? DEFAULTS.showDelay;
+  }
+
+  get showDuration() {
+    return this.args.showDuration ?? this._config.showDuration ?? DEFAULTS.showDuration;
+  }
+
+  get showOn() {
+    if (this.args.showOn === null) {
+      return null;
     }
+
+    return this.args.showOn ?? this._config.showOn ?? DEFAULTS.showOn;
   }
 
-  // The circle element needs a special duration that is slightly faster than the popper's
+  get style() {
+    return this.args.style ?? this._config.style ?? DEFAULTS.style;
+  }
+
+  get useCapture() {
+    return this.args.useCapture ?? this._config.useCapture ?? DEFAULTS.useCapture;
+  }
+
+  get isFillAnimation() {
+    return this.animation === 'fill';
+  }
+
+  get renderFloatingElement() {
+    return (this.renderInPlace || this._currentTarget) && (!this.lazyRender || this._mustRender);
+  }
+
+  get id() {
+    return this.args.id || `${guidFor(this)}-floating`;
+  }
+
+  // The circle element needs a special duration that is slightly faster than the floating element's
   // transition, this prevents text from appearing outside the circle as it fills the background
-  @computed('_transitionDuration')
   get _circleTransitionDuration() {
     return htmlSafe(
       `transition-duration: ${Math.round(this._transitionDuration / 1.25)}ms`
     );
   }
 
-  @computed('class', 'arrow', 'animation', '_isStartingAnimation')
   get _class() {
     const showOrHideClass = `ember-attacher-${this._isStartingAnimation ? 'show' : 'hide'}`;
     const arrowClass = `ember-attacher-${this.arrow ? 'with' : 'without'}-arrow`;
 
-    return `ember-attacher-${this.animation} ${this.class || ''} ${showOrHideClass} ${arrowClass}`;
+    return [`ember-attacher-${this.animation}`, this.class || '', showOrHideClass, arrowClass].filter(Boolean).join(' ');
   }
 
-  @computed('style', '_transitionDuration')
   get _style() {
     const style = this.style;
     const transitionDuration = this._transitionDuration;
@@ -114,7 +161,6 @@ export default class AttachPopover extends Component {
     return getOwner(this).resolveRegistration('config:environment').emberAttacher || {};
   }
 
-  @computed('_envConfig', 'configKey')
   get _config() {
     return {
       ...this._envConfig,
@@ -122,7 +168,6 @@ export default class AttachPopover extends Component {
     };
   }
 
-  @computed('hideOn')
   get _hideOn() {
     let hideOn = this.hideOn;
 
@@ -133,63 +178,89 @@ export default class AttachPopover extends Component {
     return hideOn === null ? [] : hideOn.split(' ');
   }
 
-  @computed('arrow', 'flip', 'modifiers')
-  get _modifiers() {
-    // Copy the modifiers since we might write to the provided hash
-    const modifiers
-      = this.modifiers ? Object.assign({}, this.modifiers) : {};
+  get _middleware() {
+    // Copy the middleware since we might write to the provided array
+    const middleware
+      = this.args.middleware ? [...this.args.middleware] : [];
 
-    const arrow = this.arrow;
-    if (typeof(arrow) === 'boolean' && !modifiers.arrow) {
-      modifiers.arrow = { enabled: arrow };
+    if (this.arrow && this._arrowElement && !middleware.find(name => name === 'arrow')) {
+      middleware.push(arrow({ element: this._arrowElement }));
     }
 
     const flipString = this.flip;
     if (flipString) {
-      const flipModifier = { behavior: flipString.split(' ') };
-      if (!modifiers.flip) {
-        modifiers.flip = flipModifier;
-      } else if (!modifiers.flip.behavior) {
-        // Copy the flip modifier since we are altering the provided hash
-        modifiers.flip = Object.assign({}, modifiers.flip, flipModifier);
+      const flipOptions = { fallbackPlacements: flipString.split(' ') };
+      const flipMiddleware = middleware.find(name => name === 'flip');
+      if (!flipMiddleware) {
+        middleware.push(flip(flipOptions));
+      } else if (!flipMiddleware.fallbackPlacements) {
+        Object.assign({}, flipMiddleware, flipOptions);
       }
     }
 
-    return modifiers;
+    return middleware;
+  }
+
+  get _floatingElementContainer() {
+    const maybeContainer = this.floatingElementContainer;
+    const renderInPlace = this._renderInPlace;
+    let floatingElementContainer;
+
+    if (renderInPlace) {
+      floatingElementContainer = this.parentElement;
+    } else if (maybeContainer instanceof Element) {
+      floatingElementContainer = maybeContainer;
+    } else if (typeof maybeContainer === 'string') {
+      const selector = maybeContainer;
+      const possibleContainers = self.document.querySelectorAll(selector);
+
+      assert(`floatingElementContainer selector "${selector}" found `
+        + `${possibleContainers.length} possible containers when there should be exactly 1`, possibleContainers.length === 1);
+
+      floatingElementContainer = possibleContainers[0];
+    }
+
+    return floatingElementContainer;
+  }
+
+  get _renderInPlace() {
+    // self.document is undefined in Fastboot, so we have to render in
+    // place for the floating element to show up at all.
+    return self.document ? !!this.renderInPlace : true;
   }
 
   _setIsVisibleAfterDelay(isVisible, delay) {
-    if (!this._popperElement) {
+    if (!this._floatingElement) {
       this._animationTimeout = requestAnimationFrame(() => {
-        this._animationTimeout = this._setIsVisibleAfterDelay(isVisible, delay);
+        this._setIsVisibleAfterDelay(isVisible, delay);
       });
-
       return;
     }
-    const onChange = this.onChange;
+    const onChange = this.args.onChange;
 
     if (delay) {
       this._delayedVisibilityToggle = later(this, () => {
         this._animationTimeout = requestAnimationFrame(() => {
+          animationTestWaiter.endAsync(this._animationTimeout);
           if (!this.isDestroyed && !this.isDestroying) {
-            this._popperElement.style.display = isVisible ? '' : 'none';
+            this._floatingElement.style.display = isVisible ? 'block' : 'none';
 
             // Prevent jank by making the attachment invisible until positioned.
             // The visibility style will be toggled by this._startShowAnimation()
-            this._popperElement.style.visibility = isVisible ? 'hidden' : '';
+            this._floatingElement.style.visibility = isVisible ? 'hidden' : '';
 
             if (onChange) {
               onChange(isVisible);
             }
           }
         });
+        animationTestWaiter.beginAsync(this._animationTimeout);
       }, delay);
     } else {
-      this._popperElement.style.display = isVisible ? '' : 'none';
-
+      this._floatingElement.style.display = isVisible ? 'block' : 'none';
       // Prevent jank by making the attachment invisible until positioned.
       // The visibility style will be toggled by this._startShowAnimation()
-      this._popperElement.style.visibility = isVisible ? 'hidden' : '';
+      this._floatingElement.style.visibility = isVisible ? 'hidden' : '';
 
       if (onChange) {
         onChange(isVisible);
@@ -197,10 +268,6 @@ export default class AttachPopover extends Component {
     }
   }
 
-  // This is set to true when the popover is shown in order to override lazyRender=false
-  _mustRender = false;
-
-  @computed('showOn')
   get _showOn() {
     let showOn = this.showOn;
 
@@ -211,26 +278,41 @@ export default class AttachPopover extends Component {
     return showOn === null ? [] : showOn.split(' ');
   }
 
-  _transitionDuration = 0;
+  // Exposed via the named yield to enable custom hide events
+  @action
+  hide() {
+    this._hide();
+  }
 
-  /**
-   * ================== LIFECYCLE HOOKS ==================
-   */
+  @action
+  onParentFinderInsert(element) {
+    this.parentElement = element.parentElement;
+    this._initializeAttacher();
+  }
 
-  init() {
-    super.init(...arguments);
+  @action
+  _ensureArgumentsAreValid() {
+    stripInProduction(() => {
+      if (this.arrow && this.isFillAnimation) {
+        warn('Animation: \'fill\' is not compatible with arrow: true', { id: 70015 });
+      }
+
+      if (this.useCapture !== this._lastUseCaptureArgumentValue) {
+        warn(
+          'The value of the useCapture argument was mutated',
+          { id: 'ember-attacher.use-capture-mutated' }
+        );
+      }
+    });
+  }
 
-    // Used to determine the attachments initial parent element
-    this._parentFinder = self.document ? self.document.createTextNode('') : '';
 
-    // Holds the current popper target so event listeners can be removed if the target changes
-    this._currentTarget = null;
+  constructor() {
+    super(...arguments);
 
     // The debounced _hide() and _show() are stored here so they can be cancelled when necessary
     this._delayedVisibilityToggle = null;
 
-    this.id = this.id || `${guidFor(this)}-popper`;
-
     // The final source of truth on whether or not all _hide() or _show() actions have completed
     this._isHidden = true;
 
@@ -257,97 +339,12 @@ export default class AttachPopover extends Component {
     this._show = this._show.bind(this);
     this._showAfterDelay = this._showAfterDelay.bind(this);
 
-    this._setUserSuppliedDefaults();
-  }
-
-  didReceiveAttrs() {
-    super.didReceiveAttrs(...arguments);
-
-    stripInProduction(() => {
-      // eslint-disable-next-line ember/no-attrs-in-components
-      const attrs = this.attrs || {};
-      const userDefaults = this._config;
-
-      let arrow;
-      if (attrs.arrow !== undefined) {
-        arrow = attrs.arrow.value;
-      } else if (userDefaults.arrow !== undefined) {
-        arrow = userDefaults.arrow;
-      } else {
-        arrow = DEFAULTS.arrow;
-      }
-
-      let animation;
-      if (attrs.animation !== undefined) {
-        animation = attrs.animation.value;
-      } else if (userDefaults.animation !== undefined) {
-        animation = userDefaults.animation;
-      } else {
-        animation = DEFAULTS.animation;
-      }
-
-      if (arrow && animation === 'fill') {
-        warn('Animation: \'fill\' is not compatible with arrow: true', { id: 70015 });
-      }
-
-      this._lastUseCaptureArgumentValue = this.useCapture;
-    });
-  }
-
-  didUpdateAttrs() {
-    super.didUpdateAttrs(...arguments);
-
-    stripInProduction(() => {
-      if (this.useCapture !== this._lastUseCaptureArgumentValue) {
-        warn(
-          'The value of the useCapture argument was mutated',
-          { id: 'ember-attacher.use-capture-mutated' }
-        );
-      }
-    })
-  }
-
-  _setUserSuppliedDefaults() {
-    const userDefaults = this._config;
-
-    // Exit early if no custom defaults are found
-    if (!Object.keys(userDefaults).length) {
-      return;
-    }
-
-    // eslint-disable-next-line ember/no-attrs-in-components
-    const attrs = this.attrs || {};
-
-    for (const key in userDefaults) {
-      stripInProduction(() => {
-        // eslint-disable-next-line no-prototype-builtins
-        if (!['popover','tooltip', 'class'].includes(key) && !DEFAULTS.hasOwnProperty(key)) {
-          warn(`Unknown property given as an ember-attacher default: ${key}`, { id: 700152 });
-        }
-      });
-
-      // Don't override attrs manually passed into the component
-      if (attrs[key] === undefined) {
-        if (key === 'arrow') {
-          this.set('arrow', userDefaults[key]);
-        } else {
-          this[key] = userDefaults[key];
-        }
-      }
-    }
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
-    this._initializeAttacher();
+    this._lastUseCaptureArgumentValue = this.useCapture;
   }
 
   _initializeAttacher() {
     this._removeEventListeners();
-
-    this.set('_currentTarget', this.popperTarget || this._parentFinder.parentNode);
-
+    this._currentTarget = this.args.explicitTarget || this.parentElement;
     this._addListenersForShowEvents();
 
     if (!this._isHidden || this.isShown) {
@@ -360,7 +357,6 @@ export default class AttachPopover extends Component {
   }
 
   _addListenersForShowEvents() {
-
     if (!this._currentTarget) {
       return;
     }
@@ -372,10 +368,10 @@ export default class AttachPopover extends Component {
     });
   }
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
+  willDestroy() {
+    super.willDestroy(...arguments);
 
-    cancelAnimationFrame(this._animationTimeout);
+    this._cancelAnimation();
     cancel(this._delayedVisibilityToggle);
 
     this._removeEventListeners();
@@ -386,7 +382,6 @@ export default class AttachPopover extends Component {
       document.removeEventListener(eventType, this._hideListenersOnDocumentByEvent[eventType], this.useCapture);
       delete this._hideListenersOnDocumentByEvent[eventType];
     });
-
     if (!this._currentTarget) {
       return;
     }
@@ -399,13 +394,13 @@ export default class AttachPopover extends Component {
       });
   }
 
-  @observes('hideOn', 'showOn', 'popperTarget')
-  _targetOrTriggersChanged() {
+  @action
+  onTargetOrTriggerChange() {
     this._initializeAttacher();
   }
 
-  @observes('isShown')
-  _isShownChanged() {
+  @action
+  onIsShownChange() {
     const isShown = this.isShown;
 
     if (isShown === true && this._isHidden) {
@@ -426,7 +421,7 @@ export default class AttachPopover extends Component {
   _showAfterDelay() {
     cancel(this._delayedVisibilityToggle);
 
-    this.set('_mustRender', true);
+    this._mustRender = true;
 
     this._addListenersForHideEvents();
 
@@ -436,13 +431,13 @@ export default class AttachPopover extends Component {
   }
 
   _show() {
-    cancelAnimationFrame(this._animationTimeout);
+    this._cancelAnimation();
 
     if (!this._currentTarget) {
       return;
     }
 
-    this.set('_mustRender', true);
+    this._mustRender = true;
 
     // Make the attachment visible immediately so transition animations can take place
     this._setIsVisibleAfterDelay(true, 0);
@@ -457,43 +452,44 @@ export default class AttachPopover extends Component {
     // All included animations set opaque: 0, so the attachment is still effectively hidden until
     // the final RAF occurs.
     this._animationTimeout = requestAnimationFrame(() => {
+      animationTestWaiter.endAsync(this._animationTimeout);
       if (this.isDestroyed || this.isDestroying || !this._currentTarget) {
         return;
       }
 
-      const popperElement = this._popperElement;
+      const floatingElement = this._floatingElement;
 
       // Wait until the element is visible before continuing
-      if (!popperElement || popperElement.style.display === 'none') {
-        this._animationTimeout = this._startShowAnimation();
-
+      if (!floatingElement || floatingElement.style.display === 'none') {
+        this._startShowAnimation();
         return;
       }
 
-      this._enableEventListeners();
       this._update();
 
       // Wait for the above positioning to take effect before starting the show animation,
       // else the positioning itself will be animated, causing animation glitches.
       this._animationTimeout = requestAnimationFrame(() => {
+        animationTestWaiter.endAsync(this._animationTimeout);
         if (this.isDestroyed || this.isDestroying || !this._currentTarget) {
           return;
         }
-
         run(() => {
           if (this.isDestroyed || this.isDestroying || !this._currentTarget) {
             return;
           }
-          // Make the popper element visible now that it has been positioned
-          popperElement.style.visibility = '';
-          this.set('_transitionDuration', parseInt(this.showDuration));
-          this.set('_isStartingAnimation', true);
-          popperElement.setAttribute('aria-hidden', 'false');
+          // Make the floating element visible now that it has been positioned
+          floatingElement.style.visibility = '';
+          this._transitionDuration = parseInt(this.showDuration);
+          this._isStartingAnimation = true;
+          floatingElement.setAttribute('aria-hidden', 'false');
         });
 
         this._isHidden = false;
       });
+      animationTestWaiter.beginAsync(this._animationTimeout);
     });
+    animationTestWaiter.beginAsync(this._animationTimeout);
   }
 
   /**
@@ -509,18 +505,20 @@ export default class AttachPopover extends Component {
   }
 
   _hide() {
-    if (!this._popperElement) {
+    if (!this._floatingElement) {
       this._animationTimeout = requestAnimationFrame(() => {
+        animationTestWaiter.endAsync(this._animationTimeout);
         this._animationTimeout = this._hide();
       });
+      animationTestWaiter.beginAsync(this._animationTimeout);
       return;
     }
 
-    cancelAnimationFrame(this._animationTimeout);
+    this._cancelAnimation();
 
     this._removeListenersForHideEvents();
-
     this._animationTimeout = requestAnimationFrame(() => {
+      animationTestWaiter.endAsync(this._animationTimeout);
       // Avoid a race condition where we attempt to hide after the component is being destroyed.
       if (this.isDestroyed || this.isDestroying) {
         return;
@@ -533,18 +531,16 @@ export default class AttachPopover extends Component {
           return;
         }
 
-        this.set('_transitionDuration', hideDuration);
-        this.set('_isStartingAnimation', false);
-        this._popperElement.setAttribute('aria-hidden', 'true');
-
+        this._transitionDuration = hideDuration;
+        this._isStartingAnimation = false;
+        this._floatingElement.setAttribute('aria-hidden', 'true');
         // Wait for any animations to complete before hiding the attachment
         this._setIsVisibleAfterDelay(false, hideDuration);
       });
 
-      this._disableEventListeners();
-
       this._isHidden = true;
     });
+    animationTestWaiter.beginAsync(this._animationTimeout);
   }
 
   /**
@@ -628,10 +624,10 @@ export default class AttachPopover extends Component {
       return;
     }
 
-    // If cursor is not on the attachment or target, hide the popover
+    // If cursor is not on the attachment or target, hide the floating element
     if (!target.contains(event.target)
       && !(this.isOffset && this._isCursorBetweenTargetAndAttachment(event))
-      && (this._popperElement && !this._popperElement.contains(event.target))) {
+      && (this._floatingElement && !this._floatingElement.contains(event.target))) {
       // Remove this listener before hiding the attachment
       delete this._hideListenersOnDocumentByEvent.mousemove;
       document.removeEventListener('mousemove', this._hideIfMouseOutsideTargetOrAttachment, this.useCapture);
@@ -648,7 +644,7 @@ export default class AttachPopover extends Component {
 
     const { clientX, clientY } = event;
 
-    const attachmentPosition = this._popperElement.getBoundingClientRect();
+    const attachmentPosition = this._floatingElement.getBoundingClientRect();
     const targetPosition = this._currentTarget.getBoundingClientRect();
 
     const isBetweenLeftAndRight = clientX > Math.min(attachmentPosition.left, targetPosition.left)
@@ -692,7 +688,7 @@ export default class AttachPopover extends Component {
     const targetReceivedClick = this._currentTarget.contains(event.target);
 
     if (this.interactive) {
-      if (!targetReceivedClick && !this._popperElement.contains(event.target)) {
+      if (!targetReceivedClick && !this._floatingElement.contains(event.target)) {
         this._hideAfterDelay();
       }
     } else if (!targetReceivedClick) {
@@ -718,7 +714,7 @@ export default class AttachPopover extends Component {
     const targetContainsFocus = this._currentTarget.contains(event.relatedTarget);
 
     if (this.interactive) {
-      if (!targetContainsFocus && !this._popperElement.contains(event.relatedTarget)) {
+      if (!targetContainsFocus && !this._floatingElement.contains(event.relatedTarget)) {
         this._hideAfterDelay();
       }
     } else if (!targetContainsFocus) {
@@ -762,4 +758,75 @@ export default class AttachPopover extends Component {
       }
     });
   }
+
+  @action
+  didInsertFloatingElement(floatingElement) {
+    this._floatingElement = floatingElement;
+
+    if (this.renderInPlace) {
+      this.parentElement = floatingElement.parentElement;
+      this._initializeAttacher();
+    }
+  }
+
+  @action
+  didInsertArrow(element) {
+    this._arrowElement = element;
+  }
+
+  @action
+  onOptionsChange() {
+    this._ensureArgumentsAreValid();
+    this._update();
+  }
+
+  @action
+  willDestroyFloatingElement() {
+    this._cleanup?.();
+  }
+
+  _update() {
+    this._cleanup?.();
+    if (this.autoUpdate) {
+      this._cleanup = autoUpdate(
+        this._currentTarget,
+        this._floatingElement,
+        this._updatePosition,
+        typeOf(this.autoUpdate) === 'object' ? this.autoUpdate : undefined
+      );
+    } else {
+      this._updatePosition();
+    }
+  }
+
+  @action
+  _updatePosition() {
+    const computePositionToken = animationTestWaiter.beginAsync();
+    computePosition(this._currentTarget, this._floatingElement, {
+      ...this.floatingUiOptions,
+      middleware: this._middleware,
+      placement: this.placement
+    }).then(({ x, y, placement, middlewareData }) => {
+      animationTestWaiter.endAsync(computePositionToken);
+      Object.assign(this._floatingElement.style, { left: `${x}px`, top: `${y}px`, });
+
+      if (middlewareData.arrow) {
+        const { x, y } = middlewareData.arrow;
+
+        Object.assign(this._arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
+      this._floatingElement.setAttribute('x-placement', placement);
+    });
+  }
+
+  _cancelAnimation() {
+    cancelAnimationFrame(this._animationTimeout);
+
+    if (animationTestWaiter.items.get(this._animationTimeout)) {
+      animationTestWaiter.endAsync(this._animationTimeout);
+    }
+  }
 }