@wordpress/components 33.0.1-next.v.202604201441.0 → 33.1.0

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

@@ -26,7 +26,7 @@ const meta: Meta< typeof SearchControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SearchControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof SelectControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof Shortcut > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/slot-fill/fill.tsx

@@ -37,9 +37,9 @@ export default function Fill( { name, children }: FillComponentProps ) {
 	useLayoutEffect( () => {
 		registry.updateFill( name, {
 			instance: instanceRef.current,
-			children: childrenRef.current,
+			children,
 		} );
-	} );
+	}, [ registry, name, children ] );
 
 	const slot = useObservableValue( registry.slots, name );
 

package/src/slot-fill/stories/index.story.tsx

@@ -28,7 +28,7 @@ const meta: Meta< typeof Slot > = {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -39,7 +39,7 @@ const meta: Meta< typeof Snackbar > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -20,7 +20,7 @@ const meta: Meta< typeof Spinner > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/style-provider/index.tsx

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import * as uuid from 'uuid';
-
-/**
- * Internal dependencies
- */
+import { useLayoutEffect } from '@wordpress/element';
+import { registerDocument } from '@wordpress/style-runtime';
 import type { StyleProviderProps } from './types';
 
 const uuidCache = new Set();
@@ -36,6 +31,14 @@ const memoizedCreateCacheWithContainer = ( container: HTMLElement ) => {
 export function StyleProvider( props: StyleProviderProps ) {
 	const { children, document } = props;
 
+	useLayoutEffect( () => {
+		if ( ! document ) {
+			return;
+		}
+
+		return registerDocument( document );
+	}, [ document ] );
+
 	if ( ! document ) {
 		return null;
 	}

package/src/style-provider/test/index.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { registerStyle } from '@wordpress/style-runtime';
+import StyleProvider from '..';
+
+type GlobalScopeWithStyleRuntime = typeof globalThis & {
+	__wpStyleRuntime?: unknown;
+};
+
+describe( 'StyleProvider', () => {
+	const globalScope = globalThis as GlobalScopeWithStyleRuntime;
+
+	afterEach( () => {
+		delete globalScope.__wpStyleRuntime;
+		document.head.innerHTML = '';
+	} );
+
+	it( 'registers the provided document for package style injection', () => {
+		render(
+			<StyleProvider document={ document }>
+				<div />
+			</StyleProvider>
+		);
+
+		registerStyle( 'test-style', '.test-class{color:red;}' );
+
+		const iframeDocument = document.implementation.createHTMLDocument();
+
+		render(
+			<StyleProvider document={ iframeDocument }>
+				<div />
+			</StyleProvider>
+		);
+
+		expect( iframeDocument.head.innerHTML ).toBe(
+			'<style data-wp-hash="test-style">.test-class{color:red;}</style>'
+		);
+	} );
+} );

package/src/tab-panel/style.scss

@@ -45,7 +45,7 @@
 
 		// Animation
 		@media not (prefers-reduced-motion) {
-			transition: all 0.1s linear;
+			transition: height 0.1s linear;
 		}
 	}
 
@@ -74,7 +74,7 @@
 
 		// Animation
 		@media not (prefers-reduced-motion) {
-			transition: all 0.1s linear;
+			transition: box-shadow 0.1s linear;
 		}
 	}
 

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

@@ -35,7 +35,7 @@ const meta: Meta< typeof Tabs > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'When building for the Gutenberg repo, use this component instead of `TabPanel`. Otherwise, continue using `TabPanel`. Both will be superseded by `Tabs` in `@wordpress/ui`, but continue using these for now.',
 		},

package/src/text/styles.ts

@@ -28,7 +28,7 @@ export const destructive = css`
 `;
 
 export const muted = css`
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 `;
 
 export const highlighterText = css`

package/src/text/test/index.tsx

@@ -69,7 +69,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: COLORS.gray[ 700 ],
+			color: COLORS.theme.gray[ 700 ],
 		} );
 	} );
 

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

@@ -30,7 +30,7 @@ const meta: Meta< typeof TextControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
 		},

package/src/text-highlight/stories/index.story.tsx

@@ -19,7 +19,7 @@ const meta: Meta< typeof TextHighlight > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof TextareaControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `TextareaControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -28,7 +28,7 @@ const meta: Meta< typeof ToggleControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `ToggleControl` in `@wordpress/ui`, but continue using for now.',
 		},

package/src/toggle-group-control/stories/index.story.tsx

@@ -38,7 +38,7 @@ const meta: Meta< typeof ToggleGroupControl > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 			notes: 'Will be superseded by `ToggleGroupControl` in `@wordpress/ui`, but continue using for now.',
 		},

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

@@ -57,7 +57,7 @@ const meta: Meta< typeof Toolbar > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

package/src/toolbar/toolbar-group/index.tsx

@@ -17,7 +17,7 @@ import ToolbarGroupCollapsed from './toolbar-group-collapsed';
 import ToolbarContext from '../toolbar-context';
 import type { ToolbarGroupProps, ToolbarGroupControls } from './types';
 
-function isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {
+function isNestedArray< T >( arr: T | T[] ): arr is T[] {
 	return Array.isArray( arr ) && Array.isArray( arr[ 0 ] );
 }
 
@@ -78,7 +78,7 @@ function ToolbarGroup( {
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets: ToolbarGroupControls[][];
-	if ( isNestedArray( controls ) ) {
+	if ( isNestedArray< ToolbarGroupControls[] >( controls ) ) {
 		controlSets = controls;
 	} else {
 		controlSets = [ controls ];

package/src/tools-panel/stories/index.story.tsx

@@ -46,7 +46,7 @@ const meta: Meta< typeof ToolsPanel > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'editor',
 		},
 	},

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof Tooltip > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/tooltip/test/index.tsx

@@ -286,7 +286,7 @@ describe( 'Tooltip', () => {
 
 	describe( 'delay', () => {
 		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const ADDITIONAL_DELAY = 100;
+			const ADDITIONAL_DELAY = 500;
 
 			render(
 				<Tooltip
@@ -304,7 +304,8 @@ describe( 'Tooltip', () => {
 			await hover( anchor );
 			expectTooltipToBeHidden();
 
-			// Advance time by default delay
+			// Advance time by default delay, which is still well before the
+			// custom delay even when CI is slow to resolve the hover event.
 			await sleep( TOOLTIP_DELAY );
 
 			// Tooltip hasn't appeared yet

package/src/tree-grid/stories/index.story.tsx

@@ -33,7 +33,7 @@ const meta: Meta< typeof TreeGrid > = {
 	parameters: {
 		controls: { expanded: true },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/tree-select/stories/index.story.tsx

@@ -31,7 +31,7 @@ const meta: Meta< typeof TreeSelect > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof Truncate > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

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

@@ -40,7 +40,7 @@ const meta: Meta< typeof UnitControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'recommended',
 			whereUsed: 'global',
 		},
 	},

package/src/utils/breakpoint.js

@@ -4,7 +4,7 @@
 import breakpoints from './breakpoint-values';
 
 /**
- * @param {keyof breakpoints} point
+ * @param {keyof typeof breakpoints} point
  * @return {string} Media query declaration.
  */
 export const breakpoint = ( point ) =>

package/src/utils/config-values.js

@@ -65,6 +65,9 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
 	surfaceBackgroundTertiaryColor: COLORS.white,
 	surfaceColor: COLORS.white,
+	// Modal exit animation: `use-modal-exit-animation` parses this for the
+	// `animationend` timeout race; keep the numeric duration equal to
+	// `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
 	transitionDuration: '200ms',
 	transitionDurationFast: '160ms',
 	transitionDurationFaster: '120ms',

package/src/utils/dropdown-motion.ts

@@ -1,14 +1,15 @@
 // Motion configuration for dropdown-like popovers.
 // Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
+// Values should stay in sync with --wpds-motion-* design tokens.
 
 export const DROPDOWN_MOTION = Object.freeze( {
 	SLIDE_DISTANCE: 4,
 	SLIDE_DURATION: 200,
 	SLIDE_EASING: {
 		function: 'cubic-bezier',
-		args: [ 0, 0, 0, 1 ] as const,
+		args: [ 0.25, 0, 0, 1 ] as const,
 	},
-	FADE_DURATION: 80,
+	FADE_DURATION: 100,
 	FADE_EASING: {
 		function: 'linear',
 	},
@@ -24,6 +25,9 @@ const convertEasingToString = ( easing: {
 	return easing.function;
 };
 
+// Note: --wpds-* tokens can't be used here directly because the build-time
+// fallback injection is not compatible with Emotion. This file is consumed
+// by Menu's Emotion styles.
 export const DROPDOWN_MOTION_CSS = Object.freeze( {
 	SLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,
 	SLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,

package/src/utils/font.js

@@ -5,7 +5,7 @@ import FONT from './font-values';
 
 /**
  *
- * @param {keyof FONT} value Path of value from `FONT`
+ * @param {keyof typeof FONT} value Path of value from `FONT`
  * @return {string} Font rule value
  */
 export function font( value ) {

package/src/visually-hidden/component.tsx

@@ -24,6 +24,7 @@ function UnconnectedVisuallyHidden(
 		<View
 			ref={ forwardedRef }
 			{ ...contextProps }
+			data-visually-hidden=""
 			style={ { ...visuallyHidden, ...( styleProp || {} ) } }
 		/>
 	);

package/src/visually-hidden/stories/index.story.tsx

@@ -1,15 +1,7 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import { VisuallyHidden } from '..';
 
 const meta: Meta< typeof VisuallyHidden > = {
-	tags: [ 'manifest' ],
 	component: VisuallyHidden,
 	title: 'Components/Typography/VisuallyHidden',
 	id: 'components-visuallyhidden',
@@ -23,8 +15,9 @@ const meta: Meta< typeof VisuallyHidden > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use `VisuallyHidden` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/build-types/visually-hidden/test/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/test/index.tsx"],"names":[],"mappings":""}

package/src/visually-hidden/test/__snapshots__/index.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VisuallyHidden should render correctly 1`] = `
-<div
-  class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
-  data-wp-c16t="true"
-  data-wp-component="VisuallyHidden"
-  style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal; word-break: normal;"
->
-  This is hidden
-</div>
-`;

package/src/visually-hidden/test/index.tsx

@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '..';
-
-describe( 'VisuallyHidden', () => {
-	it( 'should render correctly', () => {
-		const text = 'This is hidden';
-		render( <VisuallyHidden>{ text }</VisuallyHidden> );
-		expect( screen.getByText( text ) ).toMatchSnapshot();
-	} );
-} );