@wordpress/components 19.9.0 → 19.12.0

package/build-module/popover/index.js

@@ -6,19 +6,19 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
+import { useFloating, flip, shift, autoUpdate, arrow, offset as offsetMiddleware, limitShift, size } from '@floating-ui/react-dom';
 /**
  * WordPress dependencies
  */
 
-import { useRef, useState, useLayoutEffect, forwardRef, createContext, useContext } from '@wordpress/element';
-import { getRectangleFromRange } from '@wordpress/dom';
-import { useViewportMatch, useResizeObserver, useMergeRefs, __experimentalUseDialog as useDialog } from '@wordpress/compose';
+import { useRef, useLayoutEffect, forwardRef, createContext, useContext, useMemo } from '@wordpress/element';
+import { useViewportMatch, useMergeRefs, __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
 
-import { computePopoverPosition, offsetIframe } from './utils';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
@@ -32,368 +32,170 @@ import { getAnimateClassName } from '../animate';
 const SLOT_NAME = 'Popover';
 const slotNameContext = createContext();
 
-function computeAnchorRect(anchorRefFallback, anchorRect, getAnchorRect) {
-  let anchorRef = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  let shouldAnchorIncludePadding = arguments.length > 4 ? arguments[4] : undefined;
-  let container = arguments.length > 5 ? arguments[5] : undefined;
-
-  if (anchorRect) {
-    return anchorRect;
-  }
-
-  if (getAnchorRect) {
-    if (!anchorRefFallback.current) {
-      return;
-    }
-
-    const rect = getAnchorRect(anchorRefFallback.current);
-    return offsetIframe(rect, rect.ownerDocument || anchorRefFallback.current.ownerDocument, container);
-  }
-
-  if (anchorRef !== false) {
-    if (!anchorRef || !window.Range || !window.Element || !window.DOMRect) {
-      return;
-    } // Duck-type to check if `anchorRef` is an instance of Range
-    // `anchorRef instanceof window.Range` checks will break across document boundaries
-    // such as in an iframe.
+const positionToPlacement = position => {
+  const [x, y, z] = position.split(' ');
 
+  if (['top', 'bottom'].includes(x)) {
+    let suffix = '';
 
-    if (typeof (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.cloneRange) === 'function') {
-      return offsetIframe(getRectangleFromRange(anchorRef), anchorRef.endContainer.ownerDocument, container);
-    } // Duck-type to check if `anchorRef` is an instance of Element
-    // `anchorRef instanceof window.Element` checks will break across document boundaries
-    // such as in an iframe.
-
-
-    if (typeof (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect) === 'function') {
-      const rect = offsetIframe(anchorRef.getBoundingClientRect(), anchorRef.ownerDocument, container);
-
-      if (shouldAnchorIncludePadding) {
-        return rect;
-      }
-
-      return withoutPadding(rect, anchorRef);
-    }
-
-    const {
-      top,
-      bottom
-    } = anchorRef;
-    const topRect = top.getBoundingClientRect();
-    const bottomRect = bottom.getBoundingClientRect();
-    const rect = offsetIframe(new window.DOMRect(topRect.left, topRect.top, topRect.width, bottomRect.bottom - topRect.top), top.ownerDocument, container);
-
-    if (shouldAnchorIncludePadding) {
-      return rect;
+    if (!!z && z === 'left' || y === 'right') {
+      suffix = '-start';
+    } else if (!!z && z === 'right' || y === 'left') {
+      suffix = '-end';
     }
 
-    return withoutPadding(rect, anchorRef);
+    return x + suffix;
   }
 
-  if (!anchorRefFallback.current) {
-    return;
-  }
-
-  const {
-    parentNode
-  } = anchorRefFallback.current;
-  const rect = offsetIframe(parentNode.getBoundingClientRect(), parentNode.ownerDocument, container);
-
-  if (shouldAnchorIncludePadding) {
-    return rect;
-  }
-
-  return withoutPadding(rect, parentNode);
-}
-
-function getComputedStyle(node) {
-  return node.ownerDocument.defaultView.getComputedStyle(node);
-}
+  return y;
+};
 
-function withoutPadding(rect, element) {
-  const {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  } = getComputedStyle(element);
-  const top = paddingTop ? parseInt(paddingTop, 10) : 0;
-  const bottom = paddingBottom ? parseInt(paddingBottom, 10) : 0;
-  const left = paddingLeft ? parseInt(paddingLeft, 10) : 0;
-  const right = paddingRight ? parseInt(paddingRight, 10) : 0;
-  return {
-    x: rect.left + left,
-    y: rect.top + top,
-    width: rect.width - left - right,
-    height: rect.height - top - bottom,
-    left: rect.left + left,
-    right: rect.right - right,
-    top: rect.top + top,
-    bottom: rect.bottom - bottom
-  };
-}
-/**
- * Sets or removes an element attribute.
- *
- * @param {Element} element The element to modify.
- * @param {string}  name    The attribute name to set or remove.
- * @param {?string} value   The value to set. A falsy value will remove the
- *                          attribute.
- */
+const placementToAnimationOrigin = placement => {
+  const [a, b] = placement.split('-');
+  let x, y;
 
+  if (a === 'top' || a === 'bottom') {
+    x = a === 'top' ? 'bottom' : 'top';
+    y = 'middle';
 
-function setAttribute(element, name, value) {
-  if (!value) {
-    if (element.hasAttribute(name)) {
-      element.removeAttribute(name);
+    if (b === 'start') {
+      y = 'left';
+    } else if (b === 'end') {
+      y = 'right';
     }
-  } else if (element.getAttribute(name) !== value) {
-    element.setAttribute(name, value);
-  }
-}
-/**
- * Sets or removes an element style property.
- *
- * @param {Element} element  The element to modify.
- * @param {string}  property The property to set or remove.
- * @param {?string} value    The value to set. A falsy value will remove the
- *                           property.
- */
-
-
-function setStyle(element, property) {
-  let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-
-  if (element.style[property] !== value) {
-    element.style[property] = value;
   }
-}
-/**
- * Sets or removes an element class.
- *
- * @param {Element} element The element to modify.
- * @param {string}  name    The class to set or remove.
- * @param {boolean} toggle  True to set the class, false to remove.
- */
 
+  if (a === 'left' || a === 'right') {
+    x = 'center';
+    y = a === 'left' ? 'right' : 'left';
 
-function setClass(element, name, toggle) {
-  if (toggle) {
-    if (!element.classList.contains(name)) {
-      element.classList.add(name);
+    if (b === 'start') {
+      x = 'top';
+    } else if (b === 'end') {
+      x = 'bottom';
     }
-  } else if (element.classList.contains(name)) {
-    element.classList.remove(name);
-  }
-}
-
-function getAnchorDocument(anchor) {
-  if (!anchor) {
-    return;
-  }
-
-  if (anchor.endContainer) {
-    return anchor.endContainer.ownerDocument;
-  }
-
-  if (anchor.top) {
-    return anchor.top.ownerDocument;
   }
 
-  return anchor.ownerDocument;
-}
+  return x + ' ' + y;
+};
 
 const Popover = (_ref, ref) => {
   let {
+    range,
+    animate = true,
     headerTitle,
     onClose,
     children,
     className,
     noArrow = true,
     isAlternate,
-    // Disable reason: We generate the `...contentProps` rest as remainder
-    // of props which aren't explicitly handled by this component.
-
-    /* eslint-disable no-unused-vars */
-    position = 'bottom right',
-    range,
+    position,
+    placement = 'bottom-start',
+    offset,
     focusOnMount = 'firstElement',
     anchorRef,
-    shouldAnchorIncludePadding,
     anchorRect,
     getAnchorRect,
     expandOnMobile,
-    animate = true,
     onFocusOutside,
-    __unstableStickyBoundaryElement,
     __unstableSlotName = SLOT_NAME,
     __unstableObserveElement,
-    __unstableBoundaryParent,
     __unstableForcePosition,
-    __unstableForceXAlignment,
-    __unstableEditorCanvasWrapper,
-
-    /* eslint-enable no-unused-vars */
+    __unstableShift = false,
     ...contentProps
   } = _ref;
-  const anchorRefFallback = useRef(null);
-  const contentRef = useRef(null);
-  const containerRef = useRef();
-  const isMobileViewport = useViewportMatch('medium', '<');
-  const [animateOrigin, setAnimateOrigin] = useState();
 
-  const slotName = useContext(slotNameContext) || __unstableSlotName;
+  if (range) {
+    deprecated('range prop in Popover component', {
+      since: '6.1',
+      version: '6.3'
+    });
+  }
 
-  const slot = useSlot(slotName);
+  const arrowRef = useRef(null);
+  const isMobileViewport = useViewportMatch('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
-  const [containerResizeListener, contentSize] = useResizeObserver();
-  noArrow = isExpanded || noArrow;
-  useLayoutEffect(() => {
-    if (isExpanded) {
-      setClass(containerRef.current, 'is-without-arrow', noArrow);
-      setClass(containerRef.current, 'is-alternate', isAlternate);
-      setAttribute(containerRef.current, 'data-x-axis');
-      setAttribute(containerRef.current, 'data-y-axis');
-      setStyle(containerRef.current, 'top');
-      setStyle(containerRef.current, 'left');
-      setStyle(contentRef.current, 'maxHeight');
-      setStyle(contentRef.current, 'maxWidth');
-      return;
+  const hasArrow = !isExpanded && !noArrow;
+  const usedPlacement = position ? positionToPlacement(position) : placement;
+  const ownerDocument = useMemo(() => {
+    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
+      return anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top.ownerDocument;
+    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.startContainer) {
+      return anchorRef.startContainer.ownerDocument;
+    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
+      return anchorRef.current.ownerDocument;
+    } else if (anchorRef) {
+      // This one should be deprecated.
+      return anchorRef.ownerDocument;
+    } else if (anchorRect && anchorRect !== null && anchorRect !== void 0 && anchorRect.ownerDocument) {
+      return anchorRect.ownerDocument;
+    } else if (getAnchorRect) {
+      var _getAnchorRect$ownerD, _getAnchorRect;
+
+      return (_getAnchorRect$ownerD = (_getAnchorRect = getAnchorRect()) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument) !== null && _getAnchorRect$ownerD !== void 0 ? _getAnchorRect$ownerD : document;
     }
 
-    const refresh = () => {
-      if (!containerRef.current || !contentRef.current) {
-        return;
-      }
-
-      let anchor = computeAnchorRect(anchorRefFallback, anchorRect, getAnchorRect, anchorRef, shouldAnchorIncludePadding, containerRef.current);
-
-      if (!anchor) {
-        return;
-      }
-
-      const {
-        offsetParent,
-        ownerDocument
-      } = containerRef.current;
-      let relativeOffsetTop = 0; // If there is a positioned ancestor element that is not the body,
-      // subtract the position from the anchor rect. If the position of
-      // the popover is fixed, the offset parent is null or the body
-      // element, in which case the position is relative to the viewport.
-      // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
-
-      if (offsetParent && offsetParent !== ownerDocument.body) {
-        const offsetParentRect = offsetParent.getBoundingClientRect();
-        relativeOffsetTop = offsetParentRect.top;
-        anchor = new window.DOMRect(anchor.left - offsetParentRect.left, anchor.top - offsetParentRect.top, anchor.width, anchor.height);
-      }
-
-      let boundaryElement;
-
-      if (__unstableBoundaryParent) {
-        boundaryElement = containerRef.current.parentElement;
-      }
-
-      const usedContentSize = !contentSize.height ? contentRef.current.getBoundingClientRect() : contentSize;
-      const {
-        popoverTop,
-        popoverLeft,
-        xAxis,
-        yAxis,
-        contentHeight,
-        contentWidth
-      } = computePopoverPosition(anchor, usedContentSize, position, __unstableStickyBoundaryElement, containerRef.current, relativeOffsetTop, boundaryElement, __unstableForcePosition, __unstableForceXAlignment, __unstableEditorCanvasWrapper);
-
-      if (typeof popoverTop === 'number' && typeof popoverLeft === 'number') {
-        setStyle(containerRef.current, 'top', popoverTop + 'px');
-        setStyle(containerRef.current, 'left', popoverLeft + 'px');
-      }
-
-      setClass(containerRef.current, 'is-without-arrow', noArrow || xAxis === 'center' && yAxis === 'middle');
-      setClass(containerRef.current, 'is-alternate', isAlternate);
-      setAttribute(containerRef.current, 'data-x-axis', xAxis);
-      setAttribute(containerRef.current, 'data-y-axis', yAxis);
-      setStyle(contentRef.current, 'maxHeight', typeof contentHeight === 'number' ? contentHeight + 'px' : '');
-      setStyle(contentRef.current, 'maxWidth', typeof contentWidth === 'number' ? contentWidth + 'px' : ''); // Compute the animation position.
-
-      const yAxisMapping = {
-        top: 'bottom',
-        bottom: 'top'
-      };
-      const xAxisMapping = {
-        left: 'right',
-        right: 'left'
-      };
-      const animateYAxis = yAxisMapping[yAxis] || 'middle';
-      const animateXAxis = xAxisMapping[xAxis] || 'center';
-      setAnimateOrigin(animateXAxis + ' ' + animateYAxis);
-    };
+    return document;
+  }, [anchorRef, anchorRect, getAnchorRect]);
+  /**
+   * Offsets the the position of the popover when the anchor is inside an iframe.
+   */
 
-    refresh();
-    const {
-      ownerDocument
-    } = containerRef.current;
+  const frameOffset = useMemo(() => {
     const {
       defaultView
     } = ownerDocument;
-    /*
-     * There are sometimes we need to reposition or resize the popover that
-     * are not handled by the resize/scroll window events (i.e. CSS changes
-     * in the layout that changes the position of the anchor).
-     *
-     * For these situations, we refresh the popover every 0.5s
-     */
-
-    const intervalHandle = defaultView.setInterval(refresh, 500);
-    let rafId;
-
-    const refreshOnAnimationFrame = () => {
-      defaultView.cancelAnimationFrame(rafId);
-      rafId = defaultView.requestAnimationFrame(refresh);
-    }; // Sometimes a click trigger a layout change that affects the popover
-    // position. This is an opportunity to immediately refresh rather than
-    // at the interval.
-
-
-    defaultView.addEventListener('click', refreshOnAnimationFrame);
-    defaultView.addEventListener('resize', refresh);
-    defaultView.addEventListener('scroll', refresh, true);
-    const anchorDocument = getAnchorDocument(anchorRef); // If the anchor is within an iframe, the popover position also needs
-    // to refrest when the iframe content is scrolled or resized.
-
-    if (anchorDocument && anchorDocument !== ownerDocument) {
-      anchorDocument.defaultView.addEventListener('resize', refresh);
-      anchorDocument.defaultView.addEventListener('scroll', refresh, true);
+    const {
+      frameElement
+    } = defaultView;
+
+    if (!frameElement || ownerDocument === document) {
+      return undefined;
     }
 
-    let observer;
+    const iframeRect = frameElement.getBoundingClientRect();
+    return {
+      name: 'iframeOffset',
+
+      fn(_ref2) {
+        let {
+          x,
+          y
+        } = _ref2;
+        return {
+          x: x + iframeRect.left,
+          y: y + iframeRect.top
+        };
+      }
 
-    if (__unstableObserveElement) {
-      observer = new defaultView.MutationObserver(refresh);
-      observer.observe(__unstableObserveElement, {
-        attributes: true
+    };
+  }, [ownerDocument]);
+  const middlewares = [frameOffset, offset ? offsetMiddleware(offset) : undefined, __unstableForcePosition ? undefined : flip(), __unstableForcePosition ? undefined : size({
+    apply(sizeProps) {
+      const {
+        height
+      } = sizeProps;
+      if (!refs.floating.current) return; // Reduce the height of the popover to the available space.
+
+      Object.assign(refs.floating.current.firstChild.style, {
+        maxHeight: `${height}px`,
+        overflow: 'auto'
       });
     }
 
-    return () => {
-      defaultView.clearInterval(intervalHandle);
-      defaultView.removeEventListener('resize', refresh);
-      defaultView.removeEventListener('scroll', refresh, true);
-      defaultView.removeEventListener('click', refreshOnAnimationFrame);
-      defaultView.cancelAnimationFrame(rafId);
+  }), __unstableShift ? shift({
+    crossAxis: true,
+    limiter: limitShift(),
+    padding: 1 // Necessary to avoid flickering at the edge of the viewport.
 
-      if (anchorDocument && anchorDocument !== ownerDocument) {
-        var _anchorDocument$defau, _anchorDocument$defau2;
+  }) : undefined, hasArrow ? arrow({
+    element: arrowRef
+  }) : undefined].filter(m => !!m);
+  const anchorRefFallback = useRef(null);
 
-        (_anchorDocument$defau = anchorDocument.defaultView) === null || _anchorDocument$defau === void 0 ? void 0 : _anchorDocument$defau.removeEventListener('resize', refresh);
-        (_anchorDocument$defau2 = anchorDocument.defaultView) === null || _anchorDocument$defau2 === void 0 ? void 0 : _anchorDocument$defau2.removeEventListener('scroll', refresh, true);
-      }
+  const slotName = useContext(slotNameContext) || __unstableSlotName;
 
-      if (observer) {
-        observer.disconnect();
-      }
-    };
-  }, [isExpanded, anchorRect, getAnchorRect, anchorRef, shouldAnchorIncludePadding, position, contentSize, __unstableStickyBoundaryElement, __unstableObserveElement, __unstableBoundaryParent]);
+  const slot = useSlot(slotName);
 
   const onDialogClose = (type, event) => {
     // Ideally the popover should have just a single onClose prop and
@@ -410,12 +212,108 @@ const Popover = (_ref, ref) => {
     __unstableOnClose: onDialogClose,
     onClose: onDialogClose
   });
-  const mergedRefs = useMergeRefs([containerRef, dialogRef, ref]);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    refs,
+    update,
+    placement: placementData,
+    middlewareData: {
+      arrow: arrowData = {}
+    }
+  } = useFloating({
+    placement: usedPlacement,
+    middleware: middlewares
+  });
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[placementData.split('-')[0]];
+  const mergedRefs = useMergeRefs([floating, dialogRef, ref]); // Updates references
+
+  useLayoutEffect(() => {
+    // No ref or position have been passed
+    let usedRef;
+
+    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
+      usedRef = {
+        getBoundingClientRect() {
+          const topRect = anchorRef.top.getBoundingClientRect();
+          const bottomRect = anchorRef.bottom.getBoundingClientRect();
+          return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
+        }
+
+      };
+    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
+      usedRef = anchorRef.current;
+    } else if (anchorRef) {
+      usedRef = anchorRef;
+    } else if (anchorRect) {
+      usedRef = {
+        getBoundingClientRect() {
+          return anchorRect;
+        }
+
+      };
+    } else if (getAnchorRect) {
+      usedRef = {
+        getBoundingClientRect() {
+          var _rect$x, _rect$y, _rect$width, _rect$height;
+
+          const rect = getAnchorRect();
+          return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);
+        }
+
+      };
+    } else if (anchorRefFallback.current) {
+      usedRef = anchorRefFallback.current;
+    }
+
+    if (!usedRef) {
+      return;
+    }
+
+    reference(usedRef);
+
+    if (!refs.floating.current) {
+      return;
+    }
+
+    return autoUpdate(usedRef, refs.floating.current, update);
+  }, [anchorRef, anchorRect, getAnchorRect]); // This is only needed for a smoth transition when moving blocks.
+
+  useLayoutEffect(() => {
+    if (!__unstableObserveElement) {
+      return;
+    }
+
+    const observer = new window.MutationObserver(update);
+    observer.observe(__unstableObserveElement, {
+      attributes: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [__unstableObserveElement]); // If we're using getAnchorRect, we need to update the position as we scroll the iframe.
+
+  useLayoutEffect(() => {
+    if (ownerDocument === document) {
+      return;
+    }
+
+    ownerDocument.addEventListener('scroll', update);
+    return () => ownerDocument.removeEventListener('scroll', update);
+  }, [ownerDocument]);
   /** @type {false | string} */
 
-  const animateClassName = Boolean(animate && animateOrigin) && getAnimateClassName({
+  const animateClassName = !!animate && getAnimateClassName({
     type: 'appear',
-    origin: animateOrigin
+    origin: placementToAnimationOrigin(placementData)
   }); // Disable reason: We care to capture the _bubbled_ events from inputs
   // within popover as inferring close intent.
 
@@ -424,13 +322,17 @@ const Popover = (_ref, ref) => {
   createElement("div", _extends({
     className: classnames('components-popover', className, animateClassName, {
       'is-expanded': isExpanded,
-      'is-without-arrow': noArrow,
       'is-alternate': isAlternate
     })
   }, contentProps, {
     ref: mergedRefs
   }, dialogProps, {
-    tabIndex: "-1"
+    tabIndex: "-1",
+    style: isExpanded ? undefined : {
+      position: strategy,
+      left: Number.isNaN(x) ? 0 : x,
+      top: Number.isNaN(y) ? 0 : y
+    }
   }), isExpanded && createElement(ScrollLock, null), isExpanded && createElement("div", {
     className: "components-popover__header"
   }, createElement("span", {
@@ -440,13 +342,18 @@ const Popover = (_ref, ref) => {
     icon: close,
     onClick: onClose
   })), createElement("div", {
-    ref: contentRef,
     className: "components-popover__content"
-  }, createElement("div", {
+  }, children), hasArrow && createElement("div", {
+    className: "components-popover__arrow",
+    ref: arrowRef,
     style: {
-      position: 'relative'
+      left: !(arrowData !== null && arrowData !== void 0 && arrowData.x) || Number.isNaN(arrowData === null || arrowData === void 0 ? void 0 : arrowData.x) ? 0 : arrowData.x,
+      top: !(arrowData !== null && arrowData !== void 0 && arrowData.y) || Number.isNaN(arrowData === null || arrowData === void 0 ? void 0 : arrowData.y) ? 0 : arrowData.y,
+      right: undefined,
+      bottom: undefined,
+      [staticSide]: '-4px'
     }
-  }, containerResizeListener, children)));
+  }));
 
   if (slot.ref) {
     content = createElement(Fill, {
@@ -465,10 +372,10 @@ const Popover = (_ref, ref) => {
 
 const PopoverContainer = forwardRef(Popover);
 
-function PopoverSlot(_ref2, ref) {
+function PopoverSlot(_ref3, ref) {
   let {
     name = SLOT_NAME
-  } = _ref2;
+  } = _ref3;
   return createElement(Slot, {
     bubblesVirtually: true,
     name: name,