@wordpress/components 19.8.4 → 19.11.0

package/build/popover/index.js

@@ -13,13 +13,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _dom = require("@wordpress/dom");
+var _reactDom = require("@floating-ui/react-dom");
 
 var _compose = require("@wordpress/compose");
 
 var _icons = require("@wordpress/icons");
 
-var _utils = require("./utils");
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 
 var _button = _interopRequireDefault(require("../button"));
 
@@ -51,368 +51,167 @@ var _animate = require("../animate");
 const SLOT_NAME = 'Popover';
 const slotNameContext = (0, _element.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;
+const positionToPlacement = position => {
+  const [x, y, z] = position.split(' ');
 
-  if (anchorRect) {
-    return anchorRect;
-  }
-
-  if (getAnchorRect) {
-    if (!anchorRefFallback.current) {
-      return;
-    }
-
-    const rect = getAnchorRect(anchorRefFallback.current);
-    return (0, _utils.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.
-
-
-    if (typeof (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.cloneRange) === 'function') {
-      return (0, _utils.offsetIframe)((0, _dom.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 = (0, _utils.offsetIframe)(anchorRef.getBoundingClientRect(), anchorRef.ownerDocument, container);
-
-      if (shouldAnchorIncludePadding) {
-        return rect;
-      }
-
-      return withoutPadding(rect, anchorRef);
-    }
+  if (['top', 'bottom'].includes(x)) {
+    let suffix = '';
 
-    const {
-      top,
-      bottom
-    } = anchorRef;
-    const topRect = top.getBoundingClientRect();
-    const bottomRect = bottom.getBoundingClientRect();
-    const rect = (0, _utils.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);
-  }
-
-  if (!anchorRefFallback.current) {
-    return;
-  }
-
-  const {
-    parentNode
-  } = anchorRefFallback.current;
-  const rect = (0, _utils.offsetIframe)(parentNode.getBoundingClientRect(), parentNode.ownerDocument, container);
-
-  if (shouldAnchorIncludePadding) {
-    return rect;
+    return x + suffix;
   }
 
-  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 */
     ...contentProps
   } = _ref;
-  const anchorRefFallback = (0, _element.useRef)(null);
-  const contentRef = (0, _element.useRef)(null);
-  const containerRef = (0, _element.useRef)();
-  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
-  const [animateOrigin, setAnimateOrigin] = (0, _element.useState)();
 
-  const slotName = (0, _element.useContext)(slotNameContext) || __unstableSlotName;
+  if (range) {
+    (0, _deprecated.default)('range prop in Popover component', {
+      since: '6.1',
+      version: '6.3'
+    });
+  }
 
-  const slot = (0, _slotFill.useSlot)(slotName);
+  const arrowRef = (0, _element.useRef)(null);
+  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
-  const [containerResizeListener, contentSize] = (0, _compose.useResizeObserver)();
-  noArrow = isExpanded || noArrow;
-  (0, _element.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;
+  /**
+   * Offsets the the position of the popover when the anchor is inside an iframe.
+   */
+
+  const frameOffset = (0, _element.useMemo)(() => {
+    let ownerDocument = document;
+
+    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
+      ownerDocument = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top.ownerDocument;
+    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.startContainer) {
+      ownerDocument = anchorRef.startContainer.ownerDocument;
+    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
+      ownerDocument = anchorRef.current.ownerDocument;
+    } else if (anchorRef) {
+      // This one should be deprecated.
+      ownerDocument = anchorRef.ownerDocument;
+    } else if (anchorRect && anchorRect !== null && anchorRect !== void 0 && anchorRect.ownerDocument) {
+      ownerDocument = anchorRect.ownerDocument;
+    } else if (getAnchorRect) {
+      var _getAnchorRect$ownerD, _getAnchorRect;
+
+      ownerDocument = (_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
-      } = (0, _utils.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);
-    };
-
-    refresh();
-    const {
-      ownerDocument
-    } = containerRef.current;
     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
+    };
+  }, [anchorRef, anchorRect, getAnchorRect]);
+  const middlewares = [frameOffset, offset ? (0, _reactDom.offset)(offset) : undefined, __unstableForcePosition ? undefined : (0, _reactDom.flip)(), __unstableForcePosition ? undefined : (0, _reactDom.size)({
+    apply(_ref3) {
+      let {
+        width,
+        height
+      } = _ref3;
+      if (!refs.floating.current) return;
+      Object.assign(refs.floating.current.firstChild.style, {
+        maxWidth: `${width}px`,
+        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);
-
-      if (anchorDocument && anchorDocument !== ownerDocument) {
-        var _anchorDocument$defau, _anchorDocument$defau2;
+  }),, (0, _reactDom.shift)({
+    crossAxis: true,
+    limiter: (0, _reactDom.limitShift)()
+  }), hasArrow ? (0, _reactDom.arrow)({
+    element: arrowRef
+  }) : undefined].filter(m => !!m);
+  const anchorRefFallback = (0, _element.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 = (0, _element.useContext)(slotNameContext) || __unstableSlotName;
 
-      if (observer) {
-        observer.disconnect();
-      }
-    };
-  }, [isExpanded, anchorRect, getAnchorRect, anchorRef, shouldAnchorIncludePadding, position, contentSize, __unstableStickyBoundaryElement, __unstableObserveElement, __unstableBoundaryParent]);
+  const slot = (0, _slotFill.useSlot)(slotName);
 
   const onDialogClose = (type, event) => {
     // Ideally the popover should have just a single onClose prop and
@@ -429,12 +228,104 @@ const Popover = (_ref, ref) => {
     __unstableOnClose: onDialogClose,
     onClose: onDialogClose
   });
-  const mergedRefs = (0, _compose.useMergeRefs)([containerRef, dialogRef, ref]);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    refs,
+    update,
+    placement: placementData,
+    middlewareData: {
+      arrow: arrowData = {}
+    }
+  } = (0, _reactDom.useFloating)({
+    placement: usedPlacement,
+    middleware: middlewares
+  });
+  const staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[placementData.split('-')[0]];
+  const mergedRefs = (0, _compose.useMergeRefs)([floating, dialogRef, ref]); // Updates references
+
+  (0, _element.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$height, _rect$width;
+
+          const rect = getAnchorRect();
+          return { ...rect,
+            x: (_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left,
+            y: (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top,
+            height: (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top,
+            width: (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left
+          };
+        }
+
+      };
+    } else if (anchorRefFallback.current) {
+      usedRef = anchorRefFallback.current;
+    }
+
+    if (!usedRef) {
+      return;
+    }
+
+    reference(usedRef);
+
+    if (!refs.floating.current) {
+      return;
+    }
+
+    return (0, _reactDom.autoUpdate)(usedRef, refs.floating.current, update);
+  }, [anchorRef, anchorRect, getAnchorRect]); // This is only needed for a smoth transition when moving blocks.
+
+  (0, _element.useLayoutEffect)(() => {
+    if (!__unstableObserveElement) {
+      return;
+    }
+
+    const observer = new window.MutationObserver(update);
+    observer.observe(__unstableObserveElement, {
+      attributes: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [__unstableObserveElement]);
   /** @type {false | string} */
 
-  const animateClassName = Boolean(animate && animateOrigin) && (0, _animate.getAnimateClassName)({
+  const animateClassName = !!animate && (0, _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.
 
@@ -443,13 +334,17 @@ const Popover = (_ref, ref) => {
   (0, _element.createElement)("div", (0, _extends2.default)({
     className: (0, _classnames.default)('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 && (0, _element.createElement)(_scrollLock.default, null), isExpanded && (0, _element.createElement)("div", {
     className: "components-popover__header"
   }, (0, _element.createElement)("span", {
@@ -459,13 +354,18 @@ const Popover = (_ref, ref) => {
     icon: _icons.close,
     onClick: onClose
   })), (0, _element.createElement)("div", {
-    ref: contentRef,
     className: "components-popover__content"
-  }, (0, _element.createElement)("div", {
+  }, children), hasArrow && (0, _element.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 = (0, _element.createElement)(_slotFill.Fill, {
@@ -484,10 +384,10 @@ const Popover = (_ref, ref) => {
 
 const PopoverContainer = (0, _element.forwardRef)(Popover);
 
-function PopoverSlot(_ref2, ref) {
+function PopoverSlot(_ref4, ref) {
   let {
     name = SLOT_NAME
-  } = _ref2;
+  } = _ref4;
   return (0, _element.createElement)(_slotFill.Slot, {
     bubblesVirtually: true,
     name: name,