@wordpress/components 20.0.0 → 21.0.0

package/build-module/popover/index.js

@@ -1,19 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-import { useFloating, flip, shift, autoUpdate, arrow, offset as offsetMiddleware, limitShift, size } from '@floating-ui/react-dom'; // eslint-disable-next-line no-restricted-imports
+import { useFloating, flip as flipMiddleware, shift as shiftMiddleware, 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, useEffect } from '@wordpress/element';
+import { useRef, useLayoutEffect, forwardRef, createContext, useContext, useMemo, useState, useCallback, useEffect } from '@wordpress/element';
 import { useViewportMatch, useMergeRefs, __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -25,24 +24,24 @@ import { Path, SVG } from '@wordpress/primitives';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
-import { getFrameOffset, positionToPlacement, placementToMotionAnimationProps } from './utils';
+import { getFrameOffset, positionToPlacement, placementToMotionAnimationProps, getReferenceOwnerDocument, getReferenceElement } from './utils';
+
 /**
  * Name of slot in which popover should fill.
  *
  * @type {string}
  */
-
 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, {
+const ArrowTriangle = () => createElement(SVG, {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: `0 0 100 100`,
   className: "components-popover__triangle",
   role: "presentation"
-}), createElement(Path, {
+}, createElement(Path, {
   className: "components-popover__triangle-bg",
   d: "M 0 0 L 50 50 L 100 0"
 }), createElement(Path, {
@@ -51,39 +50,44 @@ const ArrowTriangle = props => createElement(SVG, _extends({}, props, {
   vectorEffect: "non-scaling-stroke"
 }));
 
-const MaybeAnimatedWrapper = forwardRef((_ref, forwardedRef) => {
+const AnimatedWrapper = forwardRef((_ref, forwardedRef) => {
   let {
     style: receivedInlineStyles,
     placement,
     shouldAnimate = false,
     ...props
   } = _ref;
+  // When animating, animate only once (i.e. when the popover is opened), and
+  // do not animate on subsequent prop changes (as it conflicts with
+  // floating-ui's positioning updates).
+  const [hasAnimatedOnce, setHasAnimatedOnce] = useState(false);
   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 createElement("div", _extends({
+  const onAnimationComplete = useCallback(() => setHasAnimatedOnce(true), []);
+  const computedAnimationProps = shouldAnimate && !shouldReduceMotion ? {
+    style: { ...motionInlineStyles,
+      ...receivedInlineStyles
+    },
+    ...otherMotionProps,
+    onAnimationComplete,
+    animate: hasAnimatedOnce ? false : otherMotionProps.animate
+  } : {
+    animate: false,
     style: receivedInlineStyles
-  }, props, {
+  };
+  return createElement(motion.div, _extends({}, computedAnimationProps, props, {
     ref: forwardedRef
   }));
 });
-const slotNameContext = createContext();
+const slotNameContext = createContext(undefined);
 
-const Popover = (_ref2, forwardedRef) => {
-  let {
+const UnforwardedPopover = (props, forwardedRef) => {
+  var _frameOffsetRef$curre, _frameOffsetRef$curre2, _frameOffsetRef$curre3, _frameOffsetRef$curre4;
+
+  const {
     range,
     animate = true,
     headerTitle,
@@ -102,11 +106,13 @@ const Popover = (_ref2, forwardedRef) => {
     expandOnMobile,
     onFocusOutside,
     __unstableSlotName = SLOT_NAME,
-    __unstableObserveElement,
-    __unstableForcePosition = false,
-    __unstableShift = false,
+    flip = true,
+    resize = true,
+    shift = false,
+    __unstableShift,
+    __unstableForcePosition,
     ...contentProps
-  } = _ref2;
+  } = props;
 
   if (range) {
     deprecated('range prop in Popover component', {
@@ -115,36 +121,43 @@ const Popover = (_ref2, forwardedRef) => {
     });
   }
 
+  let computedFlipProp = flip;
+  let computedResizeProp = resize;
+
+  if (__unstableForcePosition !== undefined) {
+    deprecated('__unstableForcePosition prop in Popover component', {
+      since: '6.1',
+      version: '6.3',
+      alternative: '`flip={ false }` and  `resize={ false }`'
+    }); // Back-compat, set the `flip` and `resize` props
+    // to `false` to replicate `__unstableForcePosition`.
+
+    computedFlipProp = !__unstableForcePosition;
+    computedResizeProp = !__unstableForcePosition;
+  }
+
+  let shouldShift = shift;
+
+  if (__unstableShift !== undefined) {
+    deprecated('`__unstableShift` prop in Popover component', {
+      since: '6.1',
+      version: '6.3',
+      alternative: '`shift` prop`'
+    }); // Back-compat.
+
+    shouldShift = __unstableShift;
+  }
+
   const arrowRef = useRef(null);
-  const anchorRefFallback = useRef(null);
+  const [fallbackReferenceElement, setFallbackReferenceElement] = useState(null);
+  const [referenceOwnerDocument, setReferenceOwnerDocument] = useState();
+  const anchorRefFallback = useCallback(node => {
+    setFallbackReferenceElement(node);
+  }, []);
   const isMobileViewport = useViewportMatch('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
   const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
-  const referenceOwnerDocument = useMemo(() => {
-    var _documentToReturn;
-
-    let documentToReturn;
-
-    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
-      documentToReturn = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top.ownerDocument;
-    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.startContainer) {
-      documentToReturn = anchorRef.startContainer.ownerDocument;
-    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-      documentToReturn = anchorRef.current.ownerDocument;
-    } else if (anchorRef) {
-      // This one should be deprecated.
-      documentToReturn = anchorRef.ownerDocument;
-    } else if (anchorRect && anchorRect !== null && anchorRect !== void 0 && anchorRect.ownerDocument) {
-      documentToReturn = anchorRect.ownerDocument;
-    } else if (getAnchorRect) {
-      var _getAnchorRect;
-
-      documentToReturn = (_getAnchorRect = getAnchorRect(anchorRefFallback.current)) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument;
-    }
-
-    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.
    *
@@ -159,10 +172,10 @@ const Popover = (_ref2, forwardedRef) => {
    */
 
   const offsetRef = useRef(offsetProp);
-  const middleware = [offsetMiddleware(_ref3 => {
+  const middleware = [offsetMiddleware(_ref2 => {
     let {
       placement: currentPlacement
-    } = _ref3;
+    } = _ref2;
 
     if (!frameOffsetRef.current) {
       return offsetRef.current;
@@ -182,27 +195,30 @@ const Popover = (_ref2, forwardedRef) => {
       mainAxis: offsetRef.current + frameOffsetRef.current[mainAxis] * mainAxisModifier,
       crossAxis: frameOffsetRef.current[crossAxis]
     };
-  }), __unstableForcePosition ? undefined : flip(), __unstableForcePosition ? undefined : size({
+  }), computedFlipProp ? flipMiddleware() : undefined, computedResizeProp ? size({
     apply(sizeProps) {
+      var _refs$floating$curren;
+
       const {
-        availableHeight
-      } = sizeProps;
-      if (!refs.floating.current) return; // Reduce the height of the popover to the available space.
+        firstElementChild
+      } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {}; // Only HTMLElement instances have the `style` property.
+
+      if (!(firstElementChild instanceof HTMLElement)) return; // Reduce the height of the popover to the available space.
 
-      Object.assign(refs.floating.current.firstChild.style, {
-        maxHeight: `${availableHeight}px`,
+      Object.assign(firstElementChild.style, {
+        maxHeight: `${sizeProps.availableHeight}px`,
         overflow: 'auto'
       });
     }
 
-  }), __unstableShift ? shift({
+  }) : undefined, shouldShift ? shiftMiddleware({
     crossAxis: true,
     limiter: limitShift(),
     padding: 1 // Necessary to avoid flickering at the edge of the viewport.
 
-  }) : undefined, hasArrow ? arrow({
+  }) : undefined, arrow({
     element: arrowRef
-  }) : undefined].filter(m => !!m);
+  })].filter(m => m !== undefined);
 
   const slotName = useContext(slotNameContext) || __unstableSlotName;
 
@@ -224,6 +240,7 @@ const Popover = (_ref2, forwardedRef) => {
   const [dialogRef, dialogProps] = useDialog({
     focusOnMount,
     __unstableOnClose: onDialogClose,
+    // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
     onClose: onDialogClose
   });
   const {
@@ -232,7 +249,7 @@ const Popover = (_ref2, forwardedRef) => {
     y,
     // Callback refs (not regular refs). This allows the position to be updated.
     // when either elements change.
-    reference,
+    reference: referenceCallbackRef,
     floating,
     // Object with "regular" refs to both "reference" and "floating"
     refs,
@@ -241,106 +258,53 @@ const Popover = (_ref2, forwardedRef) => {
     update,
     placement: computedPlacement,
     middlewareData: {
-      arrow: arrowData = {}
+      arrow: arrowData
     }
   } = useFloating({
     placement: normalizedPlacementFromProps,
-    middleware
+    middleware,
+    whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, {
+      animationFrame: true
+    })
   });
   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(() => {
-    let resultingReferenceRef;
-
-    if (anchorRef !== null && anchorRef !== void 0 && anchorRef.top) {
-      // 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();
-          return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top);
-        }
-
-      };
-    } else if (anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-      // Standard React ref.
-      resultingReferenceRef = anchorRef.current;
-    } else if (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) {
-      // Create a virtual element for the ref.
-      resultingReferenceRef = {
-        getBoundingClientRect() {
-          return anchorRect;
-        }
-
-      };
-    } else if (getAnchorRect) {
-      // Create a virtual element for the ref.
-      resultingReferenceRef = {
-        getBoundingClientRect() {
-          var _rect$x, _rect$y, _rect$width, _rect$height;
-
-          const rect = getAnchorRect(anchorRefFallback.current);
-          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) {
-      // If no explicit ref is passed via props, fall back to
-      // anchoring to the popover's parent node.
-      resultingReferenceRef = anchorRefFallback.current.parentNode;
-    }
-
-    if (!resultingReferenceRef) {
-      return;
-    }
-
-    reference(resultingReferenceRef);
-
-    if (!refs.floating.current) {
-      return;
-    }
-
-    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.
+  }, [offsetProp, update]);
+  const arrowCallbackRef = useCallback(node => {
+    arrowRef.current = node;
+    update();
+  }, [update]); // When any of the possible anchor "sources" change,
+  // recompute the reference element (real or virtual) and its owner document.
 
   useLayoutEffect(() => {
-    if (!__unstableObserveElement) {
-      return;
-    }
-
-    const observer = new window.MutationObserver(update);
-    observer.observe(__unstableObserveElement, {
-      attributes: true
+    const resultingReferenceOwnerDoc = getReferenceOwnerDocument({
+      anchorRef,
+      anchorRect,
+      getAnchorRect,
+      fallbackReferenceElement,
+      fallbackDocument: document
     });
-    return () => {
-      observer.disconnect();
-    };
-  }, [__unstableObserveElement, update]); // If the reference element is in a different ownerDocument (e.g. iFrame),
+    const resultingReferenceElement = getReferenceElement({
+      anchorRef,
+      anchorRect,
+      getAnchorRect,
+      fallbackReferenceElement
+    });
+    referenceCallbackRef(resultingReferenceElement);
+    setReferenceOwnerDocument(resultingReferenceOwnerDoc);
+  }, [anchorRef, anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.top, anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.bottom, anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.startContainer, anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current, anchorRect, getAnchorRect, fallbackReferenceElement, referenceCallbackRef]); // 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(() => {
-    var _referenceOwnerDocume;
+    var _refs$floating, _refs$floating$curren2, _referenceOwnerDocume;
 
-    if (referenceOwnerDocument === document) {
+    if ( // Reference and root documents are the same.
+    referenceOwnerDocument === document || // Reference and floating are in the same document.
+    referenceOwnerDocument === (refs === null || refs === void 0 ? void 0 : (_refs$floating = refs.floating) === null || _refs$floating === void 0 ? void 0 : (_refs$floating$curren2 = _refs$floating.current) === null || _refs$floating$curren2 === void 0 ? void 0 : _refs$floating$curren2.ownerDocument) || // The reference's document has no view (i.e. window)
+    // or frame element (ie. it's not an iframe).
+    !(referenceOwnerDocument !== null && referenceOwnerDocument !== void 0 && (_referenceOwnerDocume = referenceOwnerDocument.defaultView) !== null && _referenceOwnerDocume !== void 0 && _referenceOwnerDocume.frameElement)) {
       frameOffsetRef.current = undefined;
       return;
     }
@@ -348,26 +312,16 @@ const Popover = (_ref2, forwardedRef) => {
     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 updateFrameOffset = () => {
+      frameOffsetRef.current = getFrameOffset(referenceOwnerDocument);
+      update();
+    };
 
-      if (updateFrameOffset) {
-        defaultView.removeEventListener('resize', updateFrameOffset);
-      }
+    defaultView.addEventListener('resize', updateFrameOffset);
+    updateFrameOffset();
+    return () => {
+      defaultView.removeEventListener('resize', updateFrameOffset);
     };
   }, [referenceOwnerDocument, update]);
   const mergedFloatingRef = useMergeRefs([floating, dialogRef, forwardedRef]); // Disable reason: We care to capture the _bubbled_ events from inputs
@@ -375,7 +329,7 @@ const Popover = (_ref2, forwardedRef) => {
 
   let content = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  createElement(MaybeAnimatedWrapper, _extends({
+  createElement(AnimatedWrapper, _extends({
     shouldAnimate: animate && !isExpanded,
     placement: computedPlacement,
     className: classnames('components-popover', className, {
@@ -385,11 +339,11 @@ const Popover = (_ref2, forwardedRef) => {
   }, contentProps, {
     ref: mergedFloatingRef
   }, dialogProps, {
-    tabIndex: "-1",
+    tabIndex: -1,
     style: isExpanded ? undefined : {
       position: strategy,
-      left: Number.isNaN(x) ? 0 : x,
-      top: Number.isNaN(y) ? 0 : y
+      left: Number.isNaN(x) ? 0 : x !== null && x !== void 0 ? x : undefined,
+      top: Number.isNaN(y) ? 0 : y !== null && y !== void 0 ? y : undefined
     }
   }), isExpanded && createElement(ScrollLock, null), isExpanded && createElement("div", {
     className: "components-popover__header"
@@ -402,11 +356,11 @@ const Popover = (_ref2, forwardedRef) => {
   })), createElement("div", {
     className: "components-popover__content"
   }, children), hasArrow && createElement("div", {
-    ref: arrowRef,
+    ref: arrowCallbackRef,
     className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '),
     style: {
-      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` : ''
+      left: typeof (arrowData === null || arrowData === void 0 ? void 0 : arrowData.x) !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x + ((_frameOffsetRef$curre = (_frameOffsetRef$curre2 = frameOffsetRef.current) === null || _frameOffsetRef$curre2 === void 0 ? void 0 : _frameOffsetRef$curre2.x) !== null && _frameOffsetRef$curre !== void 0 ? _frameOffsetRef$curre : 0)}px` : '',
+      top: typeof (arrowData === null || arrowData === void 0 ? void 0 : arrowData.y) !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y + ((_frameOffsetRef$curre3 = (_frameOffsetRef$curre4 = frameOffsetRef.current) === null || _frameOffsetRef$curre4 === void 0 ? void 0 : _frameOffsetRef$curre4.y) !== null && _frameOffsetRef$curre3 !== void 0 ? _frameOffsetRef$curre3 : 0)}px` : ''
     }
   }, createElement(ArrowTriangle, null)));
 
@@ -424,22 +378,49 @@ const Popover = (_ref2, forwardedRef) => {
     ref: anchorRefFallback
   }, content);
 };
+/**
+ * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
+ *
+ * ```jsx
+ * import { Button, Popover } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyPopover = () => {
+ * 	const [ isVisible, setIsVisible ] = useState( false );
+ * 	const toggleVisible = () => {
+ * 		setIsVisible( ( state ) => ! state );
+ * 	};
+ *
+ * 	return (
+ * 		<Button variant="secondary" onClick={ toggleVisible }>
+ * 			Toggle Popover!
+ * 			{ isVisible && <Popover>Popover is toggled!</Popover> }
+ * 		</Button>
+ * 	);
+ * };
+ * ```
+ *
+ */
 
-const PopoverContainer = forwardRef(Popover);
 
-function PopoverSlot(_ref4, ref) {
+export const Popover = forwardRef(UnforwardedPopover);
+
+function PopoverSlot(_ref3, ref) {
   let {
     name = SLOT_NAME
-  } = _ref4;
-  return createElement(Slot, {
+  } = _ref3;
+  return createElement(Slot // @ts-expect-error Need to type `SlotFill`
+  , {
     bubblesVirtually: true,
     name: name,
     className: "popover-slot",
     ref: ref
   });
-}
+} // @ts-expect-error For Legacy Reasons
+
+
+Popover.Slot = forwardRef(PopoverSlot); // @ts-expect-error For Legacy Reasons
 
-PopoverContainer.Slot = forwardRef(PopoverSlot);
-PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider;
-export default PopoverContainer;
+Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+export default Popover;
 //# sourceMappingURL=index.js.map