@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build/popover/index.js

@@ -1,78 +1,79 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var popover_exports = {};
+__export(popover_exports, {
+  Popover: () => Popover,
+  PopoverSlot: () => PopoverSlot,
+  SLOT_NAME: () => SLOT_NAME,
+  default: () => popover_default
 });
-exports.default = exports.SLOT_NAME = exports.PopoverSlot = exports.Popover = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _reactDom = require("@floating-ui/react-dom");
-var _framerMotion = require("framer-motion");
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _icons = require("@wordpress/icons");
-var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
-var _primitives = require("@wordpress/primitives");
-var _i18n = require("@wordpress/i18n");
-var _button = _interopRequireDefault(require("../button"));
-var _scrollLock = _interopRequireDefault(require("../scroll-lock"));
-var _slotFill = require("../slot-fill");
-var _utils = require("./utils");
-var _context = require("../context");
-var _overlayMiddlewares = require("./overlay-middlewares");
-var _styleProvider = require("../style-provider");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Name of slot in which popover should fill.
- *
- * @type {string}
- */
-const SLOT_NAME = exports.SLOT_NAME = 'Popover';
-
-/**
- * Virtual padding to account for overflow boundaries.
- *
- * @type {number}
- */
+module.exports = __toCommonJS(popover_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react_dom = require("@floating-ui/react-dom");
+var import_framer_motion = require("framer-motion");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_icons = require("@wordpress/icons");
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_primitives = require("@wordpress/primitives");
+var import_i18n = require("@wordpress/i18n");
+var import_button = __toESM(require("../button"));
+var import_scroll_lock = __toESM(require("../scroll-lock"));
+var import_slot_fill = require("../slot-fill");
+var import_utils = require("./utils");
+var import_context = require("../context");
+var import_overlay_middlewares = require("./overlay-middlewares");
+var import_style_provider = require("../style-provider");
+var import_jsx_runtime = require("react/jsx-runtime");
+const SLOT_NAME = "Popover";
 const OVERFLOW_PADDING = 8;
-
-// 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 = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SVG, {
+const ArrowTriangle = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_primitives.SVG, {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 100 100",
   className: "components-popover__triangle",
   role: "presentation",
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Path, {
+  children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.Path, {
     className: "components-popover__triangle-bg",
     d: "M 0 0 L 50 50 L 100 0"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Path, {
+  }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_primitives.Path, {
     className: "components-popover__triangle-border",
     d: "M 0 0 L 50 50 L 100 0",
     vectorEffect: "non-scaling-stroke"
   })]
 });
-const slotNameContext = (0, _element.createContext)(undefined);
-slotNameContext.displayName = '__unstableSlotNameContext';
-const fallbackContainerClassname = 'components-popover__fallback-container';
+const slotNameContext = (0, import_element.createContext)(void 0);
+slotNameContext.displayName = "__unstableSlotNameContext";
+const fallbackContainerClassname = "components-popover__fallback-container";
 const getPopoverFallbackContainer = () => {
-  let container = document.body.querySelector('.' + fallbackContainerClassname);
+  let container = document.body.querySelector("." + fallbackContainerClassname);
   if (!container) {
-    container = document.createElement('div');
+    container = document.createElement("div");
     container.className = fallbackContainerClassname;
     document.body.append(container);
   }
@@ -88,9 +89,9 @@ const UnforwardedPopover = (props, forwardedRef) => {
     className,
     noArrow = true,
     position,
-    placement: placementProp = 'bottom-start',
+    placement: placementProp = "bottom-start",
     offset: offsetProp = 0,
-    focusOnMount = 'firstElement',
+    focusOnMount = "firstElement",
     anchor,
     expandOnMobile,
     onFocusOutside,
@@ -109,96 +110,88 @@ const UnforwardedPopover = (props, forwardedRef) => {
     isAlternate,
     // Rest
     ...contentProps
-  } = (0, _context.useContextSystem)(props, 'Popover');
+  } = (0, import_context.useContextSystem)(props, "Popover");
   let computedFlipProp = flip;
   let computedResizeProp = resize;
-  if (__unstableForcePosition !== undefined) {
-    (0, _deprecated.default)('`__unstableForcePosition` prop in wp.components.Popover', {
-      since: '6.1',
-      version: '6.3',
-      alternative: '`flip={ false }` and  `resize={ false }`'
+  if (__unstableForcePosition !== void 0) {
+    (0, import_deprecated.default)("`__unstableForcePosition` prop in wp.components.Popover", {
+      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;
   }
-  if (anchorRef !== undefined) {
-    (0, _deprecated.default)('`anchorRef` prop in wp.components.Popover', {
-      since: '6.1',
-      alternative: '`anchor` prop'
+  if (anchorRef !== void 0) {
+    (0, import_deprecated.default)("`anchorRef` prop in wp.components.Popover", {
+      since: "6.1",
+      alternative: "`anchor` prop"
     });
   }
-  if (anchorRect !== undefined) {
-    (0, _deprecated.default)('`anchorRect` prop in wp.components.Popover', {
-      since: '6.1',
-      alternative: '`anchor` prop'
+  if (anchorRect !== void 0) {
+    (0, import_deprecated.default)("`anchorRect` prop in wp.components.Popover", {
+      since: "6.1",
+      alternative: "`anchor` prop"
     });
   }
-  if (getAnchorRect !== undefined) {
-    (0, _deprecated.default)('`getAnchorRect` prop in wp.components.Popover', {
-      since: '6.1',
-      alternative: '`anchor` prop'
+  if (getAnchorRect !== void 0) {
+    (0, import_deprecated.default)("`getAnchorRect` prop in wp.components.Popover", {
+      since: "6.1",
+      alternative: "`anchor` prop"
     });
   }
-  const computedVariant = isAlternate ? 'toolbar' : variant;
-  if (isAlternate !== undefined) {
-    (0, _deprecated.default)('`isAlternate` prop in wp.components.Popover', {
-      since: '6.2',
+  const computedVariant = isAlternate ? "toolbar" : variant;
+  if (isAlternate !== void 0) {
+    (0, import_deprecated.default)("`isAlternate` prop in wp.components.Popover", {
+      since: "6.2",
       alternative: "`variant` prop with the `'toolbar'` value"
     });
   }
-  const arrowRef = (0, _element.useRef)(null);
-  const [fallbackReferenceElement, setFallbackReferenceElement] = (0, _element.useState)(null);
-  const anchorRefFallback = (0, _element.useCallback)(node => {
+  const arrowRef = (0, import_element.useRef)(null);
+  const [fallbackReferenceElement, setFallbackReferenceElement] = (0, import_element.useState)(null);
+  const anchorRefFallback = (0, import_element.useCallback)((node) => {
     setFallbackReferenceElement(node);
   }, []);
-  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
+  const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
-  const normalizedPlacementFromProps = position ? (0, _utils.positionToPlacement)(position) : placementProp;
-  const middleware = [...(placementProp === 'overlay' ? (0, _overlayMiddlewares.overlayMiddlewares)() : []), (0, _reactDom.offset)(offsetProp), computedFlipProp && (0, _reactDom.flip)(), computedResizeProp && (0, _reactDom.size)({
+  const normalizedPlacementFromProps = position ? (0, import_utils.positionToPlacement)(position) : placementProp;
+  const middleware = [...placementProp === "overlay" ? (0, import_overlay_middlewares.overlayMiddlewares)() : [], (0, import_react_dom.offset)(offsetProp), computedFlipProp && (0, import_react_dom.flip)(), computedResizeProp && (0, import_react_dom.size)({
     padding: OVERFLOW_PADDING,
     apply(sizeProps) {
       var _refs$floating$curren;
       const {
         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(firstElementChild.style, {
         maxHeight: `${Math.max(0, sizeProps.availableHeight)}px`,
-        overflow: 'auto'
+        overflow: "auto"
       });
     }
-  }), shift && (0, _reactDom.shift)({
+  }), shift && (0, import_react_dom.shift)({
     crossAxis: true,
-    limiter: (0, _reactDom.limitShift)(),
-    padding: 1 // Necessary to avoid flickering at the edge of the viewport.
-  }), (0, _reactDom.arrow)({
+    limiter: (0, import_react_dom.limitShift)(),
+    padding: 1
+    // Necessary to avoid flickering at the edge of the viewport.
+  }), (0, import_react_dom.arrow)({
     element: arrowRef
   })];
-  const slotName = (0, _element.useContext)(slotNameContext) || __unstableSlotName;
-  const slot = (0, _slotFill.useSlot)(slotName);
+  const slotName = (0, import_element.useContext)(slotNameContext) || __unstableSlotName;
+  const slot = (0, import_slot_fill.useSlot)(slotName);
   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) {
+      if (type === "focus-outside" && onFocusOutside) {
         onFocusOutside(event);
       } else if (onClose) {
         onClose();
       }
     };
   }
-  const [dialogRef, dialogProps] = (0, _compose.__experimentalUseDialog)({
+  const [dialogRef, dialogProps] = (0, import_compose.__experimentalUseDialog)({
     constrainTabbing,
     focusOnMount,
     __unstableOnClose: onDialogClose,
@@ -218,28 +211,24 @@ const UnforwardedPopover = (props, forwardedRef) => {
     middlewareData: {
       arrow: arrowData
     }
-  } = (0, _reactDom.useFloating)({
-    placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps,
+  } = (0, import_react_dom.useFloating)({
+    placement: normalizedPlacementFromProps === "overlay" ? void 0 : normalizedPlacementFromProps,
     middleware,
-    whileElementsMounted: (referenceParam, floatingParam, updateParam) => (0, _reactDom.autoUpdate)(referenceParam, floatingParam, updateParam, {
+    whileElementsMounted: (referenceParam, floatingParam, updateParam) => (0, import_react_dom.autoUpdate)(referenceParam, floatingParam, updateParam, {
       layoutShift: false,
       animationFrame: true
     })
   });
-  const arrowCallbackRef = (0, _element.useCallback)(node => {
+  const arrowCallbackRef = (0, import_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.
-
   const anchorRefTop = anchorRef?.top;
   const anchorRefBottom = anchorRef?.bottom;
   const anchorRefStartContainer = anchorRef?.startContainer;
   const anchorRefCurrent = anchorRef?.current;
-  (0, _element.useLayoutEffect)(() => {
-    const resultingReferenceElement = (0, _utils.getReferenceElement)({
+  (0, import_element.useLayoutEffect)(() => {
+    const resultingReferenceElement = (0, import_utils.getReferenceElement)({
       anchor,
       anchorRef,
       anchorRect,
@@ -248,8 +237,8 @@ const UnforwardedPopover = (props, forwardedRef) => {
     });
     refs.setReference(resultingReferenceElement);
   }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anchorRect, getAnchorRect, fallbackReferenceElement, refs]);
-  const mergedFloatingRef = (0, _compose.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]);
-  const style = isExpanded ? undefined : {
+  const mergedFloatingRef = (0, import_compose.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]);
+  const style = isExpanded ? void 0 : {
     position: strategy,
     top: 0,
     left: 0,
@@ -258,16 +247,16 @@ const UnforwardedPopover = (props, forwardedRef) => {
     // to use `translateX` and `translateY` because those values would
     // be overridden by the return value of the
     // `placementToMotionAnimationProps` function.
-    x: (0, _utils.computePopoverPosition)(x),
-    y: (0, _utils.computePopoverPosition)(y)
+    x: (0, import_utils.computePopoverPosition)(x),
+    y: (0, import_utils.computePopoverPosition)(y)
   };
-  const shouldReduceMotion = (0, _compose.useReducedMotion)();
+  const shouldReduceMotion = (0, import_compose.useReducedMotion)();
   const shouldAnimate = animate && !isExpanded && !shouldReduceMotion;
-  const [animationFinished, setAnimationFinished] = (0, _element.useState)(false);
+  const [animationFinished, setAnimationFinished] = (0, import_element.useState)(false);
   const {
     style: motionInlineStyles,
     ...otherMotionProps
-  } = (0, _element.useMemo)(() => (0, _utils.placementToMotionAnimationProps)(computedPlacement), [computedPlacement]);
+  } = (0, import_element.useMemo)(() => (0, import_utils.placementToMotionAnimationProps)(computedPlacement), [computedPlacement]);
   const animationProps = shouldAnimate ? {
     style: {
       ...contentStyle,
@@ -283,111 +272,82 @@ const UnforwardedPopover = (props, forwardedRef) => {
       ...style
     }
   };
-
-  // When Floating UI has finished positioning and Framer Motion has finished animating
-  // the popover, add the `is-positioned` class to signal that all transitions have finished.
   const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null;
-  let content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_framerMotion.motion.div, {
-    className: (0, _clsx.default)(className, {
-      'is-expanded': isExpanded,
-      'is-positioned': isPositioned,
+  let content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, {
+    className: (0, import_clsx.default)(className, {
+      "is-expanded": isExpanded,
+      "is-positioned": isPositioned,
       // Use the 'alternate' classname for 'toolbar' variant for back compat.
-      [`is-${computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant
+      [`is-${computedVariant === "toolbar" ? "alternate" : computedVariant}`]: computedVariant
     }),
     ...animationProps,
     ...contentProps,
     ref: mergedFloatingRef,
     ...dialogProps,
     tabIndex: -1,
-    children: [isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_scrollLock.default, {}), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_lock.default, {}), isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
       className: "components-popover__header",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
         className: "components-popover__header-title",
         children: headerTitle
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
         className: "components-popover__close",
         size: "small",
-        icon: _icons.close,
+        icon: import_icons.close,
         onClick: onClose,
-        label: (0, _i18n.__)('Close')
+        label: (0, import_i18n.__)("Close")
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       className: "components-popover__content",
-      children: children
-    }), hasArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children
+    }), hasArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       ref: arrowCallbackRef,
-      className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '),
+      className: ["components-popover__arrow", `is-${computedPlacement.split("-")[0]}`].join(" "),
       style: {
-        left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '',
-        top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : ''
+        left: typeof arrowData?.x !== "undefined" && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : "",
+        top: typeof arrowData?.y !== "undefined" && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : ""
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowTriangle, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowTriangle, {})
     })]
   });
   const shouldRenderWithinSlot = slot.ref && !inline;
   const hasAnchor = anchorRef || anchorRect || anchor;
   if (shouldRenderWithinSlot) {
-    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_slotFill.Fill, {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slot_fill.Fill, {
       name: slotName,
       children: content
     });
   } else if (!inline) {
-    content = (0, _element.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_styleProvider.StyleProvider, {
-      document: document,
+    content = (0, import_element.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style_provider.StyleProvider, {
+      document,
       children: content
     }), getPopoverFallbackContainer());
   }
   if (hasAnchor) {
     return content;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
       ref: anchorRefFallback
     }), content]
   });
 };
-
-// Export the PopoverSlot individually to allow typescript to pick the types up.
-const PopoverSlot = exports.PopoverSlot = (0, _element.forwardRef)(({
+const PopoverSlot = (0, import_element.forwardRef)(({
   name = SLOT_NAME
 }, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_slotFill.Slot, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slot_fill.Slot, {
     bubblesVirtually: true,
-    name: name,
+    name,
     className: "popover-slot",
-    ref: ref
+    ref
   });
 });
-
-/**
- * `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 Popover = exports.Popover = Object.assign((0, _context.contextConnect)(UnforwardedPopover, 'Popover'), {
+const Popover = Object.assign((0, import_context.contextConnect)(UnforwardedPopover, "Popover"), {
   /**
    * Renders a slot that is used internally by Popover for rendering content.
    */
   Slot: Object.assign(PopoverSlot, {
-    displayName: 'Popover.Slot'
+    displayName: "Popover.Slot"
   }),
   /**
    * Provides a context to manage popover slot names.
@@ -395,8 +355,14 @@ const Popover = exports.Popover = Object.assign((0, _context.contextConnect)(Unf
    * This is marked as unstable and should not be used directly.
    */
   __unstableSlotNameProvider: Object.assign(slotNameContext.Provider, {
-    displayName: 'Popover.__unstableSlotNameProvider'
+    displayName: "Popover.__unstableSlotNameProvider"
   })
 });
-var _default = exports.default = Popover;
-//# sourceMappingURL=index.js.map
+var popover_default = Popover;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  PopoverSlot,
+  SLOT_NAME
+});
+//# sourceMappingURL=index.js.map