@wordpress/components 23.3.5 → 23.5.0

package/src/popover/utils.ts

@@ -74,7 +74,7 @@ const POSITION_TO_PLACEMENT: Record<
  * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
  * (used by `floating-ui`).
  *
- * @param  position The legacy position
+ * @param position The legacy position
  * @return The corresponding placement
  */
 export const positionToPlacement = (
@@ -105,13 +105,14 @@ const PLACEMENT_TO_ANIMATION_ORIGIN: Record<
 	left: { originX: 1, originY: 0.5 }, // open from middle, right
 	'left-start': { originX: 1, originY: 0 }, // open from top, right
 	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
+	overlay: { originX: 0.5, originY: 0.5 }, // open from center, center
 };
 
 /**
  * Given the floating-ui `placement`, compute the framer-motion props for the
  * popover's entry animation.
  *
- * @param  placement A placement string from floating ui
+ * @param placement A placement string from floating ui
  * @return The object containing the motion props
  */
 export const placementToMotionAnimationProps = (
@@ -141,7 +142,7 @@ export const placementToMotionAnimationProps = (
 /**
  * Returns the offset of a document's frame element.
  *
- * @param  document The iframe's owner document.
+ * @param document The iframe's owner document.
  *
  * @return The offset of the document's frame element, or undefined if the
  * document has no frame element.
@@ -157,6 +158,23 @@ export const getFrameOffset = (
 	return { x: iframeRect.left, y: iframeRect.top };
 };
 
+export const getFrameScale = (
+	document?: Document
+): {
+	x: number;
+	y: number;
+} => {
+	const frameElement = document?.defaultView?.frameElement as HTMLElement;
+	if ( ! frameElement ) {
+		return { x: 1, y: 1 };
+	}
+	const rect = frameElement.getBoundingClientRect();
+	return {
+		x: rect.width / frameElement.offsetWidth,
+		y: rect.height / frameElement.offsetHeight,
+	};
+};
+
 export const getReferenceOwnerDocument = ( {
 	anchor,
 	anchorRef,
@@ -213,11 +231,13 @@ export const getReferenceElement = ( {
 	anchorRect,
 	getAnchorRect,
 	fallbackReferenceElement,
+	scale,
 }: Pick<
 	PopoverProps,
 	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
 > & {
 	fallbackReferenceElement: Element | null;
+	scale: { x: number; y: number };
 } ): ReferenceType | null => {
 	let referenceElement = null;
 
@@ -279,6 +299,22 @@ export const getReferenceElement = ( {
 		referenceElement = fallbackReferenceElement.parentElement;
 	}
 
+	if ( referenceElement && ( scale.x !== 1 || scale.y !== 1 ) ) {
+		// If the popover is inside an iframe, the coordinates of the
+		// reference element need to be scaled to match the iframe's scale.
+		const rect = referenceElement.getBoundingClientRect();
+		referenceElement = {
+			getBoundingClientRect() {
+				return new window.DOMRect(
+					rect.x * scale.x,
+					rect.y * scale.y,
+					rect.width * scale.x,
+					rect.height * scale.y
+				);
+			},
+		};
+	}
+
 	// Convert any `undefined` value to `null`.
 	return referenceElement ?? null;
 };

package/src/query-controls/terms.ts

@@ -16,7 +16,7 @@ import type {
 /**
  * Returns terms in a tree form.
  *
- * @param  flatTerms Array of terms in flat format.
+ * @param flatTerms Array of terms in flat format.
  *
  * @return Terms in tree format.
  */

package/src/range-control/utils.ts

@@ -14,9 +14,9 @@ import type { UseControlledRangeValueArgs } from './types';
 /**
  * A float supported clamp function for a specific value.
  *
- * @param  value The value to clamp.
- * @param  min   The minimum value.
- * @param  max   The maximum value.
+ * @param value The value to clamp.
+ * @param min   The minimum value.
+ * @param max   The maximum value.
  *
  * @return A (float) number
  */
@@ -31,7 +31,7 @@ export function floatClamp( value: number | null, min: number, max: number ) {
 /**
  * Hook to store a clamped value, derived from props.
  *
- * @param  settings
+ * @param settings
  * @return The controlled value and the value setter.
  */
 export function useControlledRangeValue(

package/src/resizable-box/resize-tooltip/utils.ts

@@ -34,12 +34,12 @@ interface UseResizeLabelArgs {
  * Custom hook that manages resize listener events. It also provides a label
  * based on current resize width x height values.
  *
- * @param  props
- * @param  props.axis        Only shows the label corresponding to the axis.
- * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.
- * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.
- * @param  props.position    Adjusts label value.
- * @param  props.showPx      Whether to add `PX` to the label.
+ * @param props
+ * @param props.axis        Only shows the label corresponding to the axis.
+ * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param props.position    Adjusts label value.
+ * @param props.showPx      Whether to add `PX` to the label.
  *
  * @return Properties for hook.
  */
@@ -174,14 +174,14 @@ interface GetSizeLabelArgs {
 /**
  * Gets the resize label based on width and height values (as well as recent changes).
  *
- * @param  props
- * @param  props.axis     Only shows the label corresponding to the axis.
- * @param  props.height   Height value.
- * @param  props.moveX    Recent width (x axis) changes.
- * @param  props.moveY    Recent width (y axis) changes.
- * @param  props.position Adjusts label value.
- * @param  props.showPx   Whether to add `PX` to the label.
- * @param  props.width    Width value.
+ * @param props
+ * @param props.axis     Only shows the label corresponding to the axis.
+ * @param props.height   Height value.
+ * @param props.moveX    Recent width (x axis) changes.
+ * @param props.moveY    Recent width (y axis) changes.
+ * @param props.position Adjusts label value.
+ * @param props.showPx   Whether to add `PX` to the label.
+ * @param props.width    Width value.
  *
  * @return The rendered label.
  */

package/src/snackbar/index.tsx

@@ -26,8 +26,8 @@ const NOTICE_TIMEOUT = 10000;
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.
  *
- * @param  message    Message to announce.
- * @param  politeness Politeness to announce.
+ * @param message    Message to announce.
+ * @param politeness Politeness to announce.
  */
 function useSpokenMessage(
 	message: SnackbarProps[ 'spokenMessage' ],

package/src/tab-panel/stories/index.tsx

@@ -3,16 +3,25 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { link, more, wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import TabPanel from '..';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: ComponentMeta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
@@ -55,3 +64,35 @@ DisabledTab.args = {
 		},
 	],
 };
+
+const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<TabPanel { ...props } />
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
+WithTabIconsAndTooltips.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			icon: wordpress,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+			icon: link,
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			icon: more,
+		},
+	],
+};