@wordpress/components 20.0.0 → 21.0.0

package/build/popover/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Popover = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -33,8 +33,6 @@ var _slotFill = require("../slot-fill");
 
 var _utils = require("./utils");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -58,12 +56,12 @@ const SLOT_NAME = 'Popover'; // An SVG displaying a triangle facing down, filled
 // Keeping the SVG's viewbox squared simplify the arrow positioning
 // calculations.
 
-const ArrowTriangle = props => (0, _element.createElement)(_primitives.SVG, (0, _extends2.default)({}, props, {
+const ArrowTriangle = () => (0, _element.createElement)(_primitives.SVG, {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: `0 0 100 100`,
   className: "components-popover__triangle",
   role: "presentation"
-}), (0, _element.createElement)(_primitives.Path, {
+}, (0, _element.createElement)(_primitives.Path, {
   className: "components-popover__triangle-bg",
   d: "M 0 0 L 50 50 L 100 0"
 }), (0, _element.createElement)(_primitives.Path, {
@@ -72,39 +70,44 @@ const ArrowTriangle = props => (0, _element.createElement)(_primitives.SVG, (0,
   vectorEffect: "non-scaling-stroke"
 }));
 
-const MaybeAnimatedWrapper = (0, _element.forwardRef)((_ref, forwardedRef) => {
+const AnimatedWrapper = (0, _element.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] = (0, _element.useState)(false);
   const shouldReduceMotion = (0, _framerMotion.useReducedMotion)();
   const {
     style: motionInlineStyles,
     ...otherMotionProps
   } = (0, _element.useMemo)(() => (0, _utils.placementToMotionAnimationProps)(placement), [placement]);
-
-  if (shouldAnimate && !shouldReduceMotion) {
-    return (0, _element.createElement)(_framerMotion.motion.div, (0, _extends2.default)({
-      style: { ...motionInlineStyles,
-        ...receivedInlineStyles
-      }
-    }, otherMotionProps, props, {
-      ref: forwardedRef
-    }));
-  }
-
-  return (0, _element.createElement)("div", (0, _extends2.default)({
+  const onAnimationComplete = (0, _element.useCallback)(() => setHasAnimatedOnce(true), []);
+  const computedAnimationProps = shouldAnimate && !shouldReduceMotion ? {
+    style: { ...motionInlineStyles,
+      ...receivedInlineStyles
+    },
+    ...otherMotionProps,
+    onAnimationComplete,
+    animate: hasAnimatedOnce ? false : otherMotionProps.animate
+  } : {
+    animate: false,
     style: receivedInlineStyles
-  }, props, {
+  };
+  return (0, _element.createElement)(_framerMotion.motion.div, (0, _extends2.default)({}, computedAnimationProps, props, {
     ref: forwardedRef
   }));
 });
-const slotNameContext = (0, _element.createContext)();
+const slotNameContext = (0, _element.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,
@@ -123,11 +126,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) {
     (0, _deprecated.default)('range prop in Popover component', {
@@ -136,36 +141,43 @@ const Popover = (_ref2, forwardedRef) => {
     });
   }
 
+  let computedFlipProp = flip;
+  let computedResizeProp = resize;
+
+  if (__unstableForcePosition !== undefined) {
+    (0, _deprecated.default)('__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) {
+    (0, _deprecated.default)('`__unstableShift` prop in Popover component', {
+      since: '6.1',
+      version: '6.3',
+      alternative: '`shift` prop`'
+    }); // Back-compat.
+
+    shouldShift = __unstableShift;
+  }
+
   const arrowRef = (0, _element.useRef)(null);
-  const anchorRefFallback = (0, _element.useRef)(null);
+  const [fallbackReferenceElement, setFallbackReferenceElement] = (0, _element.useState)(null);
+  const [referenceOwnerDocument, setReferenceOwnerDocument] = (0, _element.useState)();
+  const anchorRefFallback = (0, _element.useCallback)(node => {
+    setFallbackReferenceElement(node);
+  }, []);
   const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
   const normalizedPlacementFromProps = position ? (0, _utils.positionToPlacement)(position) : placementProp;
-  const referenceOwnerDocument = (0, _element.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.
    *
@@ -180,10 +192,10 @@ const Popover = (_ref2, forwardedRef) => {
    */
 
   const offsetRef = (0, _element.useRef)(offsetProp);
-  const middleware = [(0, _reactDom.offset)(_ref3 => {
+  const middleware = [(0, _reactDom.offset)(_ref2 => {
     let {
       placement: currentPlacement
-    } = _ref3;
+    } = _ref2;
 
     if (!frameOffsetRef.current) {
       return offsetRef.current;
@@ -203,27 +215,30 @@ const Popover = (_ref2, forwardedRef) => {
       mainAxis: offsetRef.current + frameOffsetRef.current[mainAxis] * mainAxisModifier,
       crossAxis: frameOffsetRef.current[crossAxis]
     };
-  }), __unstableForcePosition ? undefined : (0, _reactDom.flip)(), __unstableForcePosition ? undefined : (0, _reactDom.size)({
+  }), computedFlipProp ? (0, _reactDom.flip)() : undefined, computedResizeProp ? (0, _reactDom.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 ? (0, _reactDom.shift)({
+  }) : undefined, shouldShift ? (0, _reactDom.shift)({
     crossAxis: true,
     limiter: (0, _reactDom.limitShift)(),
     padding: 1 // Necessary to avoid flickering at the edge of the viewport.
 
-  }) : undefined, hasArrow ? (0, _reactDom.arrow)({
+  }) : undefined, (0, _reactDom.arrow)({
     element: arrowRef
-  }) : undefined].filter(m => !!m);
+  })].filter(m => m !== undefined);
 
   const slotName = (0, _element.useContext)(slotNameContext) || __unstableSlotName;
 
@@ -245,6 +260,7 @@ const Popover = (_ref2, forwardedRef) => {
   const [dialogRef, dialogProps] = (0, _compose.__experimentalUseDialog)({
     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 {
@@ -253,7 +269,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,
@@ -262,106 +278,53 @@ const Popover = (_ref2, forwardedRef) => {
     update,
     placement: computedPlacement,
     middlewareData: {
-      arrow: arrowData = {}
+      arrow: arrowData
     }
   } = (0, _reactDom.useFloating)({
     placement: normalizedPlacementFromProps,
-    middleware
+    middleware,
+    whileElementsMounted: (referenceParam, floatingParam, updateParam) => (0, _reactDom.autoUpdate)(referenceParam, floatingParam, updateParam, {
+      animationFrame: true
+    })
   });
   (0, _element.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.
-
-  (0, _element.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 (0, _reactDom.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 = (0, _element.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.
 
   (0, _element.useLayoutEffect)(() => {
-    if (!__unstableObserveElement) {
-      return;
-    }
-
-    const observer = new window.MutationObserver(update);
-    observer.observe(__unstableObserveElement, {
-      attributes: true
+    const resultingReferenceOwnerDoc = (0, _utils.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 = (0, _utils.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.
 
   (0, _element.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;
     }
@@ -369,26 +332,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 = (0, _utils.getFrameOffset)(referenceOwnerDocument);
-        update();
-      };
-
-      updateFrameOffset();
-      defaultView.addEventListener('resize', updateFrameOffset);
-    }
 
-    return () => {
-      referenceOwnerDocument.removeEventListener('scroll', update);
+    const updateFrameOffset = () => {
+      frameOffsetRef.current = (0, _utils.getFrameOffset)(referenceOwnerDocument);
+      update();
+    };
 
-      if (updateFrameOffset) {
-        defaultView.removeEventListener('resize', updateFrameOffset);
-      }
+    defaultView.addEventListener('resize', updateFrameOffset);
+    updateFrameOffset();
+    return () => {
+      defaultView.removeEventListener('resize', updateFrameOffset);
     };
   }, [referenceOwnerDocument, update]);
   const mergedFloatingRef = (0, _compose.useMergeRefs)([floating, dialogRef, forwardedRef]); // Disable reason: We care to capture the _bubbled_ events from inputs
@@ -396,7 +349,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
-  (0, _element.createElement)(MaybeAnimatedWrapper, (0, _extends2.default)({
+  (0, _element.createElement)(AnimatedWrapper, (0, _extends2.default)({
     shouldAnimate: animate && !isExpanded,
     placement: computedPlacement,
     className: (0, _classnames.default)('components-popover', className, {
@@ -406,11 +359,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 && (0, _element.createElement)(_scrollLock.default, null), isExpanded && (0, _element.createElement)("div", {
     className: "components-popover__header"
@@ -423,11 +376,11 @@ const Popover = (_ref2, forwardedRef) => {
   })), (0, _element.createElement)("div", {
     className: "components-popover__content"
   }, children), hasArrow && (0, _element.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` : ''
     }
   }, (0, _element.createElement)(ArrowTriangle, null)));
 
@@ -445,23 +398,51 @@ 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 = (0, _element.forwardRef)(Popover);
 
-function PopoverSlot(_ref4, ref) {
+const Popover = (0, _element.forwardRef)(UnforwardedPopover);
+exports.Popover = Popover;
+
+function PopoverSlot(_ref3, ref) {
   let {
     name = SLOT_NAME
-  } = _ref4;
-  return (0, _element.createElement)(_slotFill.Slot, {
+  } = _ref3;
+  return (0, _element.createElement)(_slotFill.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 = (0, _element.forwardRef)(PopoverSlot); // @ts-expect-error For Legacy Reasons
 
-PopoverContainer.Slot = (0, _element.forwardRef)(PopoverSlot);
-PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider;
-var _default = PopoverContainer;
+Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+var _default = Popover;
 exports.default = _default;
 //# sourceMappingURL=index.js.map