@wordpress/components 25.6.1 → 25.8.0

package/src/popover/utils.ts

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type { ReferenceType } from '@floating-ui/react-dom';
+import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import type {
 
 const POSITION_TO_PLACEMENT: Record<
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	Placement
 > = {
 	bottom: 'bottom',
 	top: 'top',
@@ -79,8 +79,7 @@ const POSITION_TO_PLACEMENT: Record<
  */
 export const positionToPlacement = (
 	position: NonNullable< PopoverProps[ 'position' ] >
-): NonNullable< PopoverProps[ 'placement' ] > =>
-	POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
+) => POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
 
 /**
  * @typedef AnimationOrigin
@@ -139,91 +138,17 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-/**
- * Returns the offset of a document's frame element.
- *
- * @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.
- */
-export const getFrameOffset = (
-	document?: Document
-): { x: number; y: number } | undefined => {
-	const frameElement = document?.defaultView?.frameElement;
-	if ( ! frameElement ) {
-		return;
-	}
-	const iframeRect = frameElement.getBoundingClientRect();
-	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,
-	anchorRect,
-	getAnchorRect,
-	fallbackReferenceElement,
-	fallbackDocument,
-}: Pick<
-	PopoverProps,
-	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
-> & {
-	fallbackReferenceElement: Element | null;
-	fallbackDocument: Document;
-} ): Document => {
-	// 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.
-	let resultingReferenceOwnerDoc;
-	if ( anchor ) {
-		resultingReferenceOwnerDoc = anchor.ownerDocument;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
-		resultingReferenceOwnerDoc = ( anchorRef as PopoverAnchorRefTopBottom )
-			?.top.ownerDocument;
-	} else if ( ( anchorRef as Range | undefined )?.startContainer ) {
-		resultingReferenceOwnerDoc = ( anchorRef as Range ).startContainer
-			.ownerDocument;
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
-		resultingReferenceOwnerDoc = (
-			( anchorRef as PopoverAnchorRefReference ).current as Element
-		 ).ownerDocument;
-	} else if ( anchorRef as Element | undefined ) {
-		// This one should be deprecated.
-		resultingReferenceOwnerDoc = ( anchorRef as Element ).ownerDocument;
-	} else if ( anchorRect && anchorRect?.ownerDocument ) {
-		resultingReferenceOwnerDoc = anchorRect.ownerDocument;
-	} else if ( getAnchorRect ) {
-		resultingReferenceOwnerDoc = getAnchorRect(
-			fallbackReferenceElement
-		)?.ownerDocument;
-	}
+function isTopBottom(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefTopBottom {
+	return !! ( anchorRef as PopoverAnchorRefTopBottom )?.top;
+}
 
-	return resultingReferenceOwnerDoc ?? fallbackDocument;
-};
+function isRef(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefReference {
+	return !! ( anchorRef as PopoverAnchorRefReference )?.current;
+}
 
 export const getReferenceElement = ( {
 	anchor,
@@ -231,31 +156,25 @@ 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;
 
 	if ( anchor ) {
 		referenceElement = anchor;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
+	} else if ( isTopBottom( anchorRef ) ) {
 		// Create a virtual element for the ref. The expectation is that
 		// if anchorRef.top is defined, then anchorRef.bottom is defined too.
 		// Seems to be used by the block toolbar, when multiple blocks are selected
 		// (top and bottom blocks are used to calculate the resulting rect).
 		referenceElement = {
 			getBoundingClientRect() {
-				const topRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).top.getBoundingClientRect();
-				const bottomRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).bottom.getBoundingClientRect();
+				const topRect = anchorRef.top.getBoundingClientRect();
+				const bottomRect = anchorRef.bottom.getBoundingClientRect();
 				return new window.DOMRect(
 					topRect.x,
 					topRect.y,
@@ -264,12 +183,10 @@ export const getReferenceElement = ( {
 				);
 			},
 		};
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
+	} else if ( isRef( anchorRef ) ) {
 		// Standard React ref.
-		referenceElement = ( anchorRef as PopoverAnchorRefReference ).current;
-	} else if ( anchorRef as Element | undefined ) {
+		referenceElement = 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.
 		referenceElement = anchorRef as Element;
@@ -299,22 +216,6 @@ 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/progress-bar/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { ProgressBar } from '..';
 
-const meta: ComponentMeta< typeof ProgressBar > = {
+const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
 	title: 'Components (Experimental)/ProgressBar',
 	argTypes: {
@@ -23,11 +23,9 @@ const meta: ComponentMeta< typeof ProgressBar > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ProgressBar > = ( { ...args } ) => {
+const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 	return <ProgressBar { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ProgressBar > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};

package/src/progress-bar/styles.ts

@@ -54,7 +54,10 @@ export const Indicator = styled.div< {
 					animationName: animateProgressBar,
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
-			: css( { width: `${ value }%` } ) };
+			: css( {
+					width: `${ value }%`,
+					transition: 'width 0.4s ease-in-out',
+			  } ) };
 `;
 
 export const ProgressElement = styled.progress`

package/src/query-controls/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ import type {
 	QueryControlsWithMultipleCategorySelectionProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof QueryControls > = {
+const meta: Meta< typeof QueryControls > = {
 	title: 'Components/QueryControls',
 	component: QueryControls,
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof QueryControls > = {
 };
 export default meta;
 
-export const Default: Story< typeof QueryControls > = ( args ) => {
+export const Default: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -146,7 +146,7 @@ Default.args = {
 	selectedAuthorId: 1,
 };
 
-const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
+const SingleCategoryTemplate: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -184,8 +184,7 @@ const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
 		/>
 	);
 };
-export const SelectSingleCategory: Story< typeof QueryControls > =
-	SingleCategoryTemplate.bind( {} );
+export const SelectSingleCategory = SingleCategoryTemplate.bind( {} );
 SelectSingleCategory.args = {
 	categoriesList: [
 		{

package/src/radio-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import RadioControl from '..';
 
-const meta: ComponentMeta< typeof RadioControl > = {
+const meta: Meta< typeof RadioControl > = {
 	component: RadioControl,
 	title: 'Components/RadioControl',
 	argTypes: {
@@ -39,7 +39,7 @@ const meta: ComponentMeta< typeof RadioControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RadioControl > = ( {
+const Template: StoryFn< typeof RadioControl > = ( {
 	onChange,
 	options,
 	...args
@@ -59,9 +59,7 @@ const Template: ComponentStory< typeof RadioControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RadioControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RadioControl > = Template.bind( {} );
 Default.args = {
 	label: 'Post visibility',
 	options: [

package/src/radio-group/stories/index.story.js

@@ -12,6 +12,7 @@ import RadioGroup from '../';
 export default {
 	title: 'Components (Deprecated)/RadioGroup',
 	component: RadioGroup,
+	subcomponents: { Radio },
 	parameters: {
 		docs: {
 			description: {

package/src/range-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import RangeControl from '..';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof RangeControl > = {
+const meta: Meta< typeof RangeControl > = {
 	component: RangeControl,
 	title: 'Components/RangeControl',
 	argTypes: {
@@ -53,10 +53,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RangeControl > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState< number >();
 
 	return (
@@ -71,9 +68,7 @@ const Template: ComponentStory< typeof RangeControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RangeControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
@@ -87,7 +82,7 @@ Default.args = {
  * values. This also overrides both `withInputField` and `showTooltip` props to
  * `false`.
  */
-export const WithAnyStep: ComponentStory< typeof RangeControl > = ( {
+export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -113,7 +108,7 @@ WithAnyStep.args = {
 	step: 'any',
 };
 
-const MarkTemplate: ComponentStory< typeof RangeControl > = ( {
+const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 	label,
 	onChange,
 	...args
@@ -168,7 +163,7 @@ const marksWithNegatives = [
  * automatically generated or custom mark indicators can be provided by an
  * `Array`.
  */
-export const WithIntegerStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
@@ -184,7 +179,7 @@ WithIntegerStepAndMarks.args = {
  * `step` ticks. Marks may be automatically generated or custom mark indicators
  * can be provided by an `Array`.
  */
-export const WithDecimalStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
@@ -203,9 +198,8 @@ WithDecimalStepAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeMinimumAndMarks: ComponentStory<
-	typeof RangeControl
-> = MarkTemplate.bind( {} );
+export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
 	marks: marksWithNegatives,
@@ -219,7 +213,7 @@ WithNegativeMinimumAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeRangeAndMarks: ComponentStory< typeof RangeControl > =
+export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
@@ -234,7 +228,7 @@ WithNegativeRangeAndMarks.args = {
  * non-integer values. This may still be used in conjunction with `marks`
  * rendering a visual representation of `step` ticks.
  */
-export const WithAnyStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {

package/src/resizable-box/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import ResizableBox from '..';
  */
 import { useState } from '@wordpress/element';
 
-const meta: ComponentMeta< typeof ResizableBox > = {
+const meta: Meta< typeof ResizableBox > = {
 	title: 'Components/ResizableBox',
 	component: ResizableBox,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof ResizableBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResizableBox > = ( {
+const Template: StoryFn< typeof ResizableBox > = ( {
 	onResizeStop,
 	...props
 } ) => {

package/src/responsive-wrapper/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ResponsiveWrapper from '..';
 
-const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+const meta: Meta< typeof ResponsiveWrapper > = {
 	component: ResponsiveWrapper,
 	title: 'Components/ResponsiveWrapper',
 	argTypes: {
@@ -21,7 +21,7 @@ const meta: ComponentMeta< typeof ResponsiveWrapper > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+const Template: StoryFn< typeof ResponsiveWrapper > = ( args ) => (
 	<ResponsiveWrapper { ...args } />
 );
 
@@ -46,8 +46,7 @@ Default.args = {
  * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
  * its container, unless the `height` and `width` attributes are specified.
  */
-export const WithSVG: ComponentStory< typeof ResponsiveWrapper > =
-	Template.bind( {} );
+export const WithSVG: StoryFn< typeof ResponsiveWrapper > = Template.bind( {} );
 WithSVG.args = {
 	children: (
 		<svg

package/src/sandbox/stories/index.story.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import SandBox from '..';
 
-const meta: ComponentMeta< typeof SandBox > = {
+const meta: Meta< typeof SandBox > = {
 	component: SandBox,
 	title: 'Components/SandBox',
 	argTypes: {
@@ -22,9 +22,7 @@ const meta: ComponentMeta< typeof SandBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof SandBox > = ( args ) => (
-	<SandBox { ...args } />
-);
+const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/scroll-lock/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -15,7 +15,7 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import ScrollLock from '..';
 
-const meta: ComponentMeta< typeof ScrollLock > = {
+const meta: Meta< typeof ScrollLock > = {
 	component: ScrollLock,
 	title: 'Components/ScrollLock',
 	parameters: {
@@ -59,7 +59,7 @@ function ToggleContainer( props: { children: ReactNode } ) {
 	);
 }
 
-export const Default: ComponentStory< typeof ScrollLock > = () => {
+export const Default: StoryFn< typeof ScrollLock > = () => {
 	const [ isScrollLocked, setScrollLocked ] = useState( false );
 	const toggleLock = () => setScrollLocked( ! isScrollLocked );
 

package/src/scrollable/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useRef } from '@wordpress/element';
 import { View } from '../../view';
 import { Scrollable } from '..';
 
-const meta: ComponentMeta< typeof Scrollable > = {
+const meta: Meta< typeof Scrollable > = {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
 	argTypes: {
@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Scrollable > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
+const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 	const targetRef = useRef< HTMLInputElement >( null );
 
 	const onButtonClick = () => {
@@ -76,7 +76,7 @@ const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Scrollable > = Template.bind( {} );
+export const Default: StoryFn< typeof Scrollable > = Template.bind( {} );
 Default.args = {
 	smoothScroll: false,
 	scrollDirection: 'y',

package/src/search-control/README.md

@@ -90,6 +90,13 @@ If true, the label will not be visible, but will be read by screen readers. Defa
 -   Type: `Boolean`
 -   Required: No
 
+#### `size`: `'default'` | `'compact'`
+
+The size of the component.
+
+-   Required: No
+-   Default: `'default'`
+
 ## Related components
 
 -   To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.