@lumx/react 3.11.0 → 3.11.1-alpha.0

package/index.js

@@ -4434,6 +4434,147 @@ 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.
  */
@@ -4520,7 +4661,6 @@ function usePopoverStyle(_ref5) {
     fitWithinViewportHeight,
     boundaryRef,
     anchorRef,
-    children,
     placement,
     style,
     zIndex
@@ -4576,9 +4716,39 @@ function usePopoverStyle(_ref5) {
     placement,
     modifiers
   });
+
+  // Auto update popover
   useEffect(() => {
-    update === null || update === void 0 ? void 0 : update();
-  }, [children, update]);
+    const {
+      current: anchorElement
+    } = anchorRef;
+    if (!update || !popperElement || !anchorElement || !(WINDOW !== null && WINDOW !== void 0 && WINDOW.ResizeObserver)) {
+      return undefined;
+    }
+
+    // Only update once per frame
+    let frame;
+    function limitedUpdate() {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        update === null || update === void 0 ? void 0 : update();
+        frame = undefined;
+      });
+    }
+
+    // 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;
   const popoverStyle = useMemo(() => {
     const newStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, style), styles.popper), {}, {
@@ -4587,6 +4757,9 @@ function usePopoverStyle(_ref5) {
     if (fitWithinViewportHeight && !newStyles.maxHeight) {
       newStyles.maxHeight = (WINDOW === null || WINDOW === void 0 ? void 0 : WINDOW.innerHeight) || (DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.documentElement.clientHeight);
     }
+
+    // Do not show the popover while it's not properly placed
+    if (!newStyles.transform) newStyles.visibility = 'hidden';
     return newStyles;
   }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
   return {
@@ -4680,7 +4853,6 @@ const _InnerPopover = forwardRef((props, ref) => {
     fitWithinViewportHeight,
     boundaryRef,
     anchorRef,
-    children,
     placement,
     style,
     zIndex
@@ -4698,7 +4870,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 ? renderPopover( /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
+  return isOpen && styles.popover ? renderPopover( /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: mergedRefs,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1d,