@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/build-module/popover/index.js

@@ -6,15 +6,18 @@ 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';
+import { useFloating, flip, shift, autoUpdate, arrow, offset as offsetMiddleware, limitShift, size } from '@floating-ui/react-dom'; // eslint-disable-next-line no-restricted-imports
+
+import { motion, useReducedMotion } from 'framer-motion';
 /**
  * WordPress dependencies
  */
 
-import { useRef, useLayoutEffect, forwardRef, createContext, useContext, useMemo } from '@wordpress/element';
+import { useRef, useLayoutEffect, forwardRef, createContext, useContext, useMemo, useEffect } from '@wordpress/element';
 import { useViewportMatch, useMergeRefs, __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
+import { Path, SVG } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
@@ -22,64 +25,64 @@ import deprecated from '@wordpress/deprecated';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
-import { getAnimateClassName } from '../animate';
+import { getFrameOffset, positionToPlacement, placementToMotionAnimationProps } from './utils';
 /**
  * Name of slot in which popover should fill.
  *
  * @type {string}
  */
 
-const SLOT_NAME = 'Popover';
-const slotNameContext = createContext();
-
-const positionToPlacement = position => {
-  const [x, y, z] = position.split(' ');
-
-  if (['top', 'bottom'].includes(x)) {
-    let suffix = '';
-
-    if (!!z && z === 'left' || y === 'right') {
-      suffix = '-start';
-    } else if (!!z && z === 'right' || y === 'left') {
-      suffix = '-end';
-    }
-
-    return x + suffix;
-  }
-
-  return y;
-};
-
-const placementToAnimationOrigin = placement => {
-  const [a, b] = placement.split('-');
-  let x, y;
-
-  if (a === 'top' || a === 'bottom') {
-    x = a === 'top' ? 'bottom' : 'top';
-    y = 'middle';
-
-    if (b === 'start') {
-      y = 'left';
-    } else if (b === 'end') {
-      y = 'right';
-    }
-  }
-
-  if (a === 'left' || a === 'right') {
-    x = 'center';
-    y = a === 'left' ? 'right' : 'left';
-
-    if (b === 'start') {
-      x = 'top';
-    } else if (b === 'end') {
-      x = 'bottom';
-    }
+const SLOT_NAME = 'Popover'; // An SVG displaying a triangle facing down, filled with a solid
+// color and bordered in such a way to create an arrow-like effect.
+// Keeping the SVG's viewbox squared simplify the arrow positioning
+// calculations.
+
+const ArrowTriangle = props => createElement(SVG, _extends({}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: `0 0 100 100`,
+  className: "components-popover__triangle",
+  role: "presentation"
+}), createElement(Path, {
+  className: "components-popover__triangle-bg",
+  d: "M 0 0 L 50 50 L 100 0"
+}), createElement(Path, {
+  className: "components-popover__triangle-border",
+  d: "M 0 0 L 50 50 L 100 0",
+  vectorEffect: "non-scaling-stroke"
+}));
+
+const MaybeAnimatedWrapper = forwardRef((_ref, forwardedRef) => {
+  let {
+    style: receivedInlineStyles,
+    placement,
+    shouldAnimate = false,
+    ...props
+  } = _ref;
+  const shouldReduceMotion = useReducedMotion();
+  const {
+    style: motionInlineStyles,
+    ...otherMotionProps
+  } = useMemo(() => placementToMotionAnimationProps(placement), [placement]);
+
+  if (shouldAnimate && !shouldReduceMotion) {
+    return createElement(motion.div, _extends({
+      style: { ...motionInlineStyles,
+        ...receivedInlineStyles
+      }
+    }, otherMotionProps, props, {
+      ref: forwardedRef
+    }));
   }
 
-  return x + ' ' + y;
-};
+  return createElement("div", _extends({
+    style: receivedInlineStyles
+  }, props, {
+    ref: forwardedRef
+  }));
+});
+const slotNameContext = createContext();
 
-const Popover = (_ref, ref) => {
+const Popover = (_ref2, forwardedRef) => {
   let {
     range,
     animate = true,
@@ -90,8 +93,8 @@ const Popover = (_ref, ref) => {
     noArrow = true,
     isAlternate,
     position,
-    placement = 'bottom-start',
-    offset,
+    placement: placementProp = 'bottom-start',
+    offset: offsetProp = 0,
     focusOnMount = 'firstElement',
     anchorRef,
     anchorRect,
@@ -100,10 +103,10 @@ const Popover = (_ref, ref) => {
     onFocusOutside,
     __unstableSlotName = SLOT_NAME,
     __unstableObserveElement,
-    __unstableForcePosition,
+    __unstableForcePosition = false,
     __unstableShift = false,
     ...contentProps
-  } = _ref;
+  } = _ref2;
 
   if (range) {
     deprecated('range prop in Popover component', {
@@ -117,69 +120,77 @@ const Popover = (_ref, ref) => {
   const isMobileViewport = useViewportMatch('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
-  const usedPlacement = position ? positionToPlacement(position) : placement;
-  const ownerDocument = useMemo(() => {
+  const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
+  const referenceOwnerDocument = useMemo(() => {
+    var _documentToReturn;
+
+    let documentToReturn;
+
     if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
-      return anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top.ownerDocument;
+      documentToReturn = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top.ownerDocument;
     } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.startContainer) {
-      return anchorRef.startContainer.ownerDocument;
+      documentToReturn = anchorRef.startContainer.ownerDocument;
     } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-      return anchorRef.current.ownerDocument;
+      documentToReturn = anchorRef.current.ownerDocument;
     } else if (anchorRef) {
       // This one should be deprecated.
-      return anchorRef.ownerDocument;
+      documentToReturn = anchorRef.ownerDocument;
     } else if (anchorRect && anchorRect !== null && anchorRect !== void 0 && anchorRect.ownerDocument) {
-      return anchorRect.ownerDocument;
+      documentToReturn = anchorRect.ownerDocument;
     } else if (getAnchorRect) {
-      var _getAnchorRect$ownerD, _getAnchorRect;
+      var _getAnchorRect;
 
-      return (_getAnchorRect$ownerD = (_getAnchorRect = getAnchorRect(anchorRefFallback.current)) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument) !== null && _getAnchorRect$ownerD !== void 0 ? _getAnchorRect$ownerD : document;
+      documentToReturn = (_getAnchorRect = getAnchorRect(anchorRefFallback.current)) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument;
     }
 
-    return document;
+    return (_documentToReturn = documentToReturn) !== null && _documentToReturn !== void 0 ? _documentToReturn : document;
   }, [anchorRef, anchorRect, getAnchorRect]);
   /**
    * Offsets the position of the popover when the anchor is inside an iframe.
+   *
+   * Store the offset in a ref, due to constraints with floating-ui:
+   * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
    */
 
-  const frameOffset = useMemo(() => {
-    const {
-      defaultView
-    } = ownerDocument;
-    const {
-      frameElement
-    } = defaultView;
+  const frameOffsetRef = useRef(getFrameOffset(referenceOwnerDocument));
+  /**
+   * Store the offset prop in a ref, due to constraints with floating-ui:
+   * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
+   */
+
+  const offsetRef = useRef(offsetProp);
+  const middleware = [offsetMiddleware(_ref3 => {
+    let {
+      placement: currentPlacement
+    } = _ref3;
 
-    if (!frameElement || ownerDocument === document) {
-      return undefined;
+    if (!frameOffsetRef.current) {
+      return offsetRef.current;
     }
 
-    const iframeRect = frameElement.getBoundingClientRect();
-    return {
-      name: 'iframeOffset',
-
-      fn(_ref2) {
-        let {
-          x,
-          y
-        } = _ref2;
-        return {
-          x: x + iframeRect.left,
-          y: y + iframeRect.top
-        };
-      }
+    const isTopBottomPlacement = currentPlacement.includes('top') || currentPlacement.includes('bottom'); // The main axis should represent the gap between the
+    // floating element and the reference element. The cross
+    // axis is always perpendicular to the main axis.
+
+    const mainAxis = isTopBottomPlacement ? 'y' : 'x';
+    const crossAxis = mainAxis === 'x' ? 'y' : 'x'; // When the popover is before the reference, subtract the offset,
+    // of the main axis else add it.
 
+    const hasBeforePlacement = currentPlacement.includes('top') || currentPlacement.includes('left');
+    const mainAxisModifier = hasBeforePlacement ? -1 : 1;
+    return {
+      mainAxis: offsetRef.current + frameOffsetRef.current[mainAxis] * mainAxisModifier,
+      crossAxis: frameOffsetRef.current[crossAxis]
     };
-  }, [ownerDocument]);
-  const middlewares = [frameOffset, offset ? offsetMiddleware(offset) : undefined, __unstableForcePosition ? undefined : flip(), __unstableForcePosition ? undefined : size({
+  }), __unstableForcePosition ? undefined : flip(), __unstableForcePosition ? undefined : size({
     apply(sizeProps) {
       const {
-        height
+        availableHeight
       } = 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`,
+        maxHeight: `${availableHeight}px`,
         overflow: 'auto'
       });
     }
@@ -196,16 +207,19 @@ const Popover = (_ref, ref) => {
   const slotName = useContext(slotNameContext) || __unstableSlotName;
 
   const slot = useSlot(slotName);
-
-  const onDialogClose = (type, event) => {
-    // Ideally the popover should have just a single onClose prop and
-    // not three props that potentially do the same thing.
-    if (type === 'focus-outside' && onFocusOutside) {
-      onFocusOutside(event);
-    } else if (onClose) {
-      onClose();
-    }
-  };
+  let onDialogClose;
+
+  if (onClose || onFocusOutside) {
+    onDialogClose = (type, event) => {
+      // Ideally the popover should have just a single onClose prop and
+      // not three props that potentially do the same thing.
+      if (type === 'focus-outside' && onFocusOutside) {
+        onFocusOutside(event);
+      } else if (onClose) {
+        onClose();
+      }
+    };
+  }
 
   const [dialogRef, dialogProps] = useDialog({
     focusOnMount,
@@ -213,35 +227,46 @@ const Popover = (_ref, ref) => {
     onClose: onDialogClose
   });
   const {
+    // Positioning coordinates
     x,
     y,
+    // Callback refs (not regular refs). This allows the position to be updated.
+    // when either elements change.
     reference,
     floating,
-    strategy,
+    // Object with "regular" refs to both "reference" and "floating"
     refs,
+    // Type of CSS position property to use (absolute or fixed)
+    strategy,
     update,
-    placement: placementData,
+    placement: computedPlacement,
     middlewareData: {
       arrow: arrowData = {}
     }
   } = useFloating({
-    placement: usedPlacement,
-    middleware: middlewares
+    placement: normalizedPlacementFromProps,
+    middleware
   });
-  const staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[placementData.split('-')[0]];
-  const mergedRefs = useMergeRefs([floating, dialogRef, ref]); // Updates references
+  useEffect(() => {
+    offsetRef.current = offsetProp;
+    update();
+  }, [offsetProp, update]); // Update the `reference`'s ref.
+  //
+  // In floating-ui's terms:
+  // - "reference" refers to the popover's anchor element.
+  // - "floating" refers the floating popover's element.
+  // A floating element can also be positioned relative to a virtual element,
+  // instead of a real one. A virtual element is represented by an object
+  // with the `getBoundingClientRect()` function (like real elements).
+  // See https://floating-ui.com/docs/virtual-elements for more info.
 
   useLayoutEffect(() => {
-    // No ref or position have been passed
-    let usedRef;
+    let resultingReferenceRef;
 
     if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
-      usedRef = {
+      // Create a virtual element for the ref. The expectation is that
+      // if anchorRef.top is defined, then anchorRef.bottom is defined too.
+      resultingReferenceRef = {
         getBoundingClientRect() {
           const topRect = anchorRef.top.getBoundingClientRect();
           const bottomRect = anchorRef.bottom.getBoundingClientRect();
@@ -250,18 +275,23 @@ const Popover = (_ref, ref) => {
 
       };
     } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-      usedRef = anchorRef.current;
+      // Standard React ref.
+      resultingReferenceRef = anchorRef.current;
     } else if (anchorRef) {
-      usedRef = anchorRef;
+      // If `anchorRef` holds directly the element's value (no `current` key)
+      // This is a weird scenario and should be deprecated.
+      resultingReferenceRef = anchorRef;
     } else if (anchorRect) {
-      usedRef = {
+      // Create a virtual element for the ref.
+      resultingReferenceRef = {
         getBoundingClientRect() {
           return anchorRect;
         }
 
       };
     } else if (getAnchorRect) {
-      usedRef = {
+      // Create a virtual element for the ref.
+      resultingReferenceRef = {
         getBoundingClientRect() {
           var _rect$x, _rect$y, _rect$width, _rect$height;
 
@@ -271,21 +301,25 @@ const Popover = (_ref, ref) => {
 
       };
     } else if (anchorRefFallback.current) {
-      usedRef = anchorRefFallback.current;
+      // If no explicit ref is passed via props, fall back to
+      // anchoring to the popover's parent node.
+      resultingReferenceRef = anchorRefFallback.current.parentNode;
     }
 
-    if (!usedRef) {
+    if (!resultingReferenceRef) {
       return;
     }
 
-    reference(usedRef);
+    reference(resultingReferenceRef);
 
     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.
+    return autoUpdate(resultingReferenceRef, refs.floating.current, update); // 'reference' and 'refs.floating' are refs and don't need to be listed
+    // as dependencies (see https://github.com/WordPress/gutenberg/pull/41612)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorRef, anchorRect, getAnchorRect, update]); // This is only needed for a smooth transition when moving blocks.
 
   useLayoutEffect(() => {
     if (!__unstableObserveElement) {
@@ -299,33 +333,57 @@ const Popover = (_ref, ref) => {
     return () => {
       observer.disconnect();
     };
-  }, [__unstableObserveElement]); // If we're using getAnchorRect, we need to update the position as we scroll the iframe.
+  }, [__unstableObserveElement, update]); // If the reference element is in a different ownerDocument (e.g. iFrame),
+  // we need to manually update the floating's position as the reference's owner
+  // document scrolls. Also update the frame offset if the view resizes.
 
   useLayoutEffect(() => {
-    if (ownerDocument === document) {
+    var _referenceOwnerDocume;
+
+    if (referenceOwnerDocument === document) {
+      frameOffsetRef.current = undefined;
       return;
     }
 
-    ownerDocument.addEventListener('scroll', update);
-    return () => ownerDocument.removeEventListener('scroll', update);
-  }, [ownerDocument]);
-  /** @type {false | string} */
+    const {
+      defaultView
+    } = referenceOwnerDocument;
+    referenceOwnerDocument.addEventListener('scroll', update);
+    let updateFrameOffset;
+    const hasFrameElement = !!(referenceOwnerDocument !== null && referenceOwnerDocument !== void 0 && (_referenceOwnerDocume = referenceOwnerDocument.defaultView) !== null && _referenceOwnerDocume !== void 0 && _referenceOwnerDocume.frameElement);
+
+    if (hasFrameElement) {
+      updateFrameOffset = () => {
+        frameOffsetRef.current = getFrameOffset(referenceOwnerDocument);
+        update();
+      };
+
+      updateFrameOffset();
+      defaultView.addEventListener('resize', updateFrameOffset);
+    }
+
+    return () => {
+      referenceOwnerDocument.removeEventListener('scroll', update);
 
-  const animateClassName = !!animate && getAnimateClassName({
-    type: 'appear',
-    origin: placementToAnimationOrigin(placementData)
-  }); // Disable reason: We care to capture the _bubbled_ events from inputs
+      if (updateFrameOffset) {
+        defaultView.removeEventListener('resize', updateFrameOffset);
+      }
+    };
+  }, [referenceOwnerDocument, update]);
+  const mergedFloatingRef = useMergeRefs([floating, dialogRef, forwardedRef]); // Disable reason: We care to capture the _bubbled_ events from inputs
   // within popover as inferring close intent.
 
   let content = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  createElement("div", _extends({
-    className: classnames('components-popover', className, animateClassName, {
+  createElement(MaybeAnimatedWrapper, _extends({
+    shouldAnimate: animate && !isExpanded,
+    placement: computedPlacement,
+    className: classnames('components-popover', className, {
       'is-expanded': isExpanded,
       'is-alternate': isAlternate
     })
   }, contentProps, {
-    ref: mergedRefs
+    ref: mergedFloatingRef
   }, dialogProps, {
     tabIndex: "-1",
     style: isExpanded ? undefined : {
@@ -344,16 +402,13 @@ const Popover = (_ref, ref) => {
   })), createElement("div", {
     className: "components-popover__content"
   }, children), hasArrow && createElement("div", {
-    className: "components-popover__arrow",
     ref: arrowRef,
+    className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '),
     style: {
-      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'
+      left: Number.isFinite(arrowData === null || arrowData === void 0 ? void 0 : arrowData.x) ? `${arrowData.x}px` : '',
+      top: Number.isFinite(arrowData === null || arrowData === void 0 ? void 0 : arrowData.y) ? `${arrowData.y}px` : ''
     }
-  }));
+  }, createElement(ArrowTriangle, null)));
 
   if (slot.ref) {
     content = createElement(Fill, {
@@ -372,10 +427,10 @@ const Popover = (_ref, ref) => {
 
 const PopoverContainer = forwardRef(Popover);
 
-function PopoverSlot(_ref3, ref) {
+function PopoverSlot(_ref4, ref) {
   let {
     name = SLOT_NAME
-  } = _ref3;
+  } = _ref4;
   return createElement(Slot, {
     bubblesVirtually: true,
     name: name,