@lumx/react 3.11.1-alpha.0 → 3.11.1-alpha.2

package/index.js

@@ -4434,147 +4434,6 @@ const ARROW_SIZE$1 = 14;
  */
 const POPOVER_ZINDEX = 9999;
 
-const errorString = 'PositionObserver Error';
-const ROOT = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.documentElement;
-
-/**
- * The PositionObserver class is a utility class that observes the position
- * of DOM elements and triggers a callback when their position changes.
- */
-class PositionObserver {
-  /**
-   * The constructor takes two arguments, a `callback`, which is called
-   * whenever the position of an observed element changes and an `options` object.
-   * The callback function should take an array of `PositionObserverEntry` objects
-   * as its only argument, but it's not required.
-   *
-   * @param callback the callback that applies to all targets of this observer
-   */
-  constructor(callback) {
-    _defineProperty(this, "entries", void 0);
-    _defineProperty(this, "_tick", void 0);
-    _defineProperty(this, "_callback", void 0);
-    /**
-     * Start observing the position of the specified element.
-     * If the element is not currently attached to the DOM,
-     * it will NOT be added to the entries.
-     *
-     * @param target an `Element` target
-     */
-    _defineProperty(this, "observe", target => {
-      if (!(target instanceof Element)) {
-        throw new Error(`${errorString}: ${target} is not an instance of Element.`);
-      }
-      if (!(ROOT !== null && ROOT !== void 0 && ROOT.contains(target))) return;
-      this._new(target).then(_ref => {
-        let {
-          boundingClientRect
-        } = _ref;
-        if (ROOT && boundingClientRect && !this.entries.has(target)) {
-          const {
-            clientWidth,
-            clientHeight
-          } = ROOT;
-          this.entries.set(target, {
-            target,
-            boundingClientRect,
-            clientWidth,
-            clientHeight
-          });
-        }
-        if (!this._tick) this._tick = requestAnimationFrame(this._runCallback);
-      });
-    });
-    /**
-     * Private method responsible for all the heavy duty,
-     * the observer's runtime.
-     */
-    _defineProperty(this, "_runCallback", () => {
-      /* istanbul ignore if @preserve - a guard must be set */
-      if (!ROOT || !this.entries.size) return;
-      const {
-        clientWidth,
-        clientHeight
-      } = ROOT;
-      const queue = new Promise(resolve => {
-        const updates = [];
-        this.entries.forEach(_ref2 => {
-          let {
-            target,
-            boundingClientRect: oldBoundingBox,
-            clientWidth: oldWidth,
-            clientHeight: oldHeight
-          } = _ref2;
-          /* istanbul ignore if @preserve - a guard must be set when target has been removed */
-          if (!ROOT.contains(target)) return;
-          this._new(target).then(_ref3 => {
-            let {
-              boundingClientRect,
-              isIntersecting
-            } = _ref3;
-            /* istanbul ignore if @preserve - make sure to only count visible entries */
-            if (!isIntersecting) return;
-            const {
-              left,
-              top
-            } = boundingClientRect;
-
-            /* istanbul ignore else @preserve - only schedule entries that changed position */
-            if (oldBoundingBox.top !== top || oldBoundingBox.left !== left || oldWidth !== clientWidth || oldHeight !== clientHeight) {
-              const newEntry = {
-                target,
-                boundingClientRect,
-                clientHeight,
-                clientWidth
-              };
-              this.entries.set(target, newEntry);
-              updates.push(newEntry);
-            }
-          });
-        });
-        resolve(updates);
-      });
-      this._tick = requestAnimationFrame(async () => {
-        // execute the queue
-        const updates = await queue;
-
-        // only execute the callback if position actually changed
-        /* istanbul ignore else @preserve */
-        if (updates.length) this._callback(updates, this);
-        this._runCallback();
-      });
-    });
-    /**
-     * Check intersection status and resolve it
-     * right away.
-     *
-     * @param target an `Element` target
-     */
-    _defineProperty(this, "_new", target => {
-      return new Promise(resolve => {
-        if (!(WINDOW !== null && WINDOW !== void 0 && WINDOW.IntersectionObserver)) return;
-        const intersectionObserver = new IntersectionObserver((_ref4, ob) => {
-          let [entry] = _ref4;
-          ob.disconnect();
-          resolve(entry);
-        });
-        intersectionObserver.observe(target);
-      });
-    });
-    /**
-     * Immediately stop observing all elements.
-     */
-    _defineProperty(this, "disconnect", () => {
-      cancelAnimationFrame(this._tick);
-      this.entries.clear();
-      this._tick = 0;
-    });
-    this.entries = new Map();
-    this._callback = callback;
-    this._tick = 0;
-  }
-}
-
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
@@ -4736,17 +4595,12 @@ function usePopoverStyle(_ref5) {
       });
     }
 
-    // On anchor move
-    const positionObserver = new PositionObserver(limitedUpdate);
-    positionObserver.observe(anchorElement);
-
     // On anchor or popover resize
     const resizeObserver = new ResizeObserver(limitedUpdate);
     resizeObserver.observe(anchorElement);
     resizeObserver.observe(popperElement);
     return () => {
       resizeObserver.disconnect();
-      positionObserver.disconnect();
     };
   }, [anchorRef, popperElement, update]);
   const position = (_state$placement = state === null || state === void 0 ? void 0 : state.placement) !== null && _state$placement !== void 0 ? _state$placement : placement;
@@ -4759,7 +4613,7 @@ function usePopoverStyle(_ref5) {
     }
 
     // Do not show the popover while it's not properly placed
-    if (!newStyles.transform) newStyles.visibility = 'hidden';
+    if (!newStyles.transform) newStyles.opacity = 0;
     return newStyles;
   }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
   return {
@@ -4870,7 +4724,7 @@ const _InnerPopover = forwardRef((props, ref) => {
   useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
-  return isOpen && styles.popover ? renderPopover( /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
+  return isOpen ? renderPopover( /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: mergedRefs,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1d,