@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/navigable-container/container.tsx

@@ -6,7 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef, useEffect, useCallback } from '@wordpress/element';
+import { forwardRef, useRef, useEffect } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 
@@ -29,6 +29,21 @@ function cycleValue( value: number, total: number, offset: number ) {
 	return nextValue;
 }
 
+function getFocusableContext(
+	container: HTMLElement,
+	target: Element,
+	tabbableOnly: boolean
+) {
+	const finder = tabbableOnly ? focus.tabbable : focus.focusable;
+	const focusables = finder.find( container );
+
+	const index = focusables.indexOf( target as HTMLElement );
+	if ( index > -1 ) {
+		return { index, target, focusables };
+	}
+	return null;
+}
+
 function UnforwardedNavigableContainer(
 	{
 		children,
@@ -44,33 +59,6 @@ function UnforwardedNavigableContainer(
 ) {
 	const containerRef = useRef< HTMLDivElement | null >( null );
 
-	const getFocusableIndex = useCallback(
-		( focusables: Element[], target: Element ) => {
-			return focusables.indexOf( target );
-		},
-		[]
-	);
-
-	const getFocusableContext = useCallback(
-		( target: Element ) => {
-			if ( ! containerRef.current ) {
-				return null;
-			}
-
-			const finder = onlyBrowserTabstops
-				? focus.tabbable
-				: focus.focusable;
-			const focusables = finder.find( containerRef.current );
-
-			const index = getFocusableIndex( focusables, target );
-			if ( index > -1 && target ) {
-				return { index, target, focusables };
-			}
-			return null;
-		},
-		[ onlyBrowserTabstops, getFocusableIndex ]
-	);
-
 	useEffect( () => {
 		const container = containerRef.current;
 		if ( ! container ) {
@@ -114,7 +102,11 @@ function UnforwardedNavigableContainer(
 				return;
 			}
 
-			const context = getFocusableContext( activeElement );
+			const context = getFocusableContext(
+				container!,
+				activeElement,
+				!! onlyBrowserTabstops
+			);
 			if ( ! context ) {
 				return;
 			}
@@ -151,7 +143,7 @@ function UnforwardedNavigableContainer(
 		stopNavigationEvents,
 		cycle,
 		onNavigate,
-		getFocusableContext,
+		onlyBrowserTabstops,
 	] );
 
 	const mergedRef = useMergeRefs( [ containerRef, ref ] );

package/src/notice/style.scss

@@ -1,9 +1,9 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .components-notice {
-	--wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak);
+	--wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak);
 	--wp-components-notice-border-color: var(--wpds-color-stroke-surface-info);
-	--wp-components-notice-text-color: var(--wpds-color-fg-content-info);
+	--wp-components-notice-text-color: var(--wpds-color-foreground-content-info);
 
 	box-sizing: border-box;
 	display: grid;
@@ -19,21 +19,21 @@
 	line-height: var(--wpds-typography-line-height-sm);
 
 	&.is-success {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-success);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-success);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-success);
 	}
 
 	&.is-warning {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-warning);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-warning);
 	}
 
 	&.is-error {
-		--wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak);
+		--wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak);
 		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-error);
-		--wp-components-notice-text-color: var(--wpds-color-fg-content-error);
+		--wp-components-notice-text-color: var(--wpds-color-foreground-content-error);
 	}
 }
 
@@ -46,9 +46,7 @@
 	// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
 	// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
 	// is rendered).
-	// TODO: Replace `$button-size-small` with a WPDS size token once size tokens
-	// land in `@wordpress/theme`.
-	padding-block: calc((#{$button-size-small} - 1lh) / 2);
+	padding-block: calc((var(--wpds-dimension-size-sm) - 1lh) / 2);
 }
 
 .components-notice__actions {
@@ -65,13 +63,13 @@
 .components-notice__dismiss {
 	grid-column: 2;
 	grid-row: 1;
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	margin-inline-start: var(--wpds-dimension-gap-xs);
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
 	&:not(:disabled):not([aria-disabled="true"]):focus {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		background-color: transparent;
 	}
 

package/src/panel/README.md

@@ -2,6 +2,8 @@
 
 Panels expand and collapse multiple sections of content.
 
+The `Panel` family is intended for the block inspector sidebar. For collapsible sections elsewhere, use the [`CollapsibleCard`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-collapsiblecard--docs) component instead.
+
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
 ## Design guidelines

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

@@ -17,7 +17,6 @@ import PanelBody from '../body';
 import InputControl from '../../input-control';
 
 const meta: Meta< typeof Panel > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Containers/Panel',
 	id: 'components-panel',
 	component: Panel,
@@ -30,7 +29,8 @@ const meta: Meta< typeof Panel > = {
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
 			status: 'recommended',
-			whereUsed: 'global',
+			whereUsed: 'editor',
+			notes: 'Intended for the block inspector sidebar. For collapsible sections elsewhere, use `CollapsibleCard` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/panel/style.scss

@@ -40,7 +40,7 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	border-bottom: $border-width solid $gray-300;
+	border-bottom: $border-width solid var(--wpds-color-stroke-surface-neutral);
 
 	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
 	box-sizing: content-box;

package/src/popover/README.md

@@ -128,7 +128,7 @@ Show the popover fullscreen on mobile viewports.
 
 Specifies whether the popover should flip across its axis if there isn't space for it in the normal placement.
 
-When the using a 'top' placement, the popover will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a `right' placement.
+When using a 'top' placement, the popover will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a 'right' placement.
 
 The popover will retain its alignment of 'start' or 'end' when flipping.
 

package/src/radio-control/style.scss

@@ -56,7 +56,7 @@
 
 	&:disabled {
 		background: $components-color-gray-100;
-		border: 1px solid $components-color-gray-300;
+		border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled);
 		opacity: 1; // Override style from wp-admin forms.css.
 
 		&:checked::before {

package/src/sandbox/index.tsx

@@ -17,6 +17,23 @@ import type { SandBoxProps } from './types';
 
 type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
 
+/**
+ * Matches CSS viewport-relative length values such as `100vh`, `50.5vw`,
+ * and `.5dvh`. Used to strip viewport units from user-supplied HTML inside
+ * the sandbox iframe, because those units are relative to the iframe's
+ * own size and would create a measurement feedback loop with the
+ * resize observer.
+ *
+ * Exported for tests. NOTE: an identical regex literal is duplicated
+ * inside `observeAndResizeJS` below because that function is serialized
+ * via `.toString()` and embedded into the iframe's `srcdoc` — it has no
+ * access to this module's scope at runtime. If you change one, change
+ * the other; the "is embedded in the sandbox iframe srcdoc" test
+ * guards against drift.
+ */
+export const VIEWPORT_UNIT_VALUE_REGEX =
+	/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/;
+
 const observeAndResizeJS = function () {
 	const { MutationObserver } = window;
 
@@ -58,7 +75,7 @@ const observeAndResizeJS = function () {
 				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
 			 ).forEach( function ( style ) {
 				if (
-					/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+					/^\d*\.?\d+(?:vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
 						ruleOrNode.style[ style ]
 					)
 				) {

package/src/sandbox/test/index.tsx

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SandBox from '..';
+import SandBox, { VIEWPORT_UNIT_VALUE_REGEX } from '..';
 
 describe( 'SandBox', () => {
 	const TestWrapper = () => {
@@ -109,4 +109,47 @@ describe( 'SandBox', () => {
 			expect.stringContaining( 'https://another.super.embed' )
 		);
 	} );
+
+	describe( 'VIEWPORT_UNIT_VALUE_REGEX', () => {
+		it.each( [
+			'100vh',
+			'50vw',
+			'0vh',
+			'50.5vh',
+			'.5vh',
+			'100dvh',
+			'50svw',
+			'1lvi',
+			'100vmin',
+			'100vmax',
+		] )( 'matches viewport unit value %s', ( value ) => {
+			expect( VIEWPORT_UNIT_VALUE_REGEX.test( value ) ).toBe( true );
+		} );
+
+		it.each( [
+			'100px',
+			'50%',
+			'100',
+			'vh',
+			'.vh',
+			'calc(100vh - 10px)',
+			'100 vh',
+			'',
+		] )( 'does not match %s', ( value ) => {
+			expect( VIEWPORT_UNIT_VALUE_REGEX.test( value ) ).toBe( false );
+		} );
+
+		it( 'is embedded in the sandbox iframe srcdoc', () => {
+			// Guards against drift between the exported constant and
+			// the copy inlined into `observeAndResizeJS`, which is
+			// serialized via `.toString()` into the iframe srcdoc and
+			// cannot reference module-scope values at runtime.
+			render( <SandBox html="<p>x</p>" title="Regex Sync Test" /> );
+			const iframe =
+				screen.getByTitle< HTMLIFrameElement >( 'Regex Sync Test' );
+			const srcDoc = iframe.getAttribute( 'srcdoc' ) ?? '';
+
+			expect( srcDoc ).toContain( VIEWPORT_UNIT_VALUE_REGEX.source );
+		} );
+	} );
 } );

package/src/scrollable/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`Scrollable` is a layout component that content in a scrollable container.
+`Scrollable` is a layout component that puts content in a scrollable container.
 
 ## Usage
 

package/src/spinner/styles.ts

@@ -35,6 +35,7 @@ const commonPathProps = css`
 	stroke-width: 1.5px;
 `;
 
+// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
 export const SpinnerTrack = styled.circle`
 	${ commonPathProps };
 	stroke: ${ COLORS.gray[ 300 ] };

package/src/tab-panel/style.scss

@@ -21,15 +21,15 @@
 	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: var(--wpds-typography-font-weight-regular);
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 
 	&:disabled,
 	&[aria-disabled="true"] {
-		color: var(--wpds-color-fg-interactive-neutral-disabled);
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
 	}
 
 	&:not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 
 	&:focus:not(:disabled) {
@@ -87,7 +87,7 @@
 	&:focus-visible::before {
 		box-shadow:
 			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
@@ -101,7 +101,7 @@
 		}
 
 		&.is-active {
-			background: var(--wpds-color-bg-interactive-neutral-weak-active);
+			background: var(--wpds-color-background-interactive-neutral-weak-active);
 		}
 	}
 }
@@ -115,7 +115,7 @@
 	&:focus-visible {
 		box-shadow:
 			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;

package/src/tabs/index.tsx

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -84,31 +84,6 @@ export const Tabs = Object.assign(
 			rtl: isRTL(),
 		} );
 
-		const { items, activeId } = Ariakit.useStoreState( store );
-		const { setActiveId } = store;
-
-		useEffect( () => {
-			requestAnimationFrame( () => {
-				const focusedElement =
-					items?.[ 0 ]?.element?.ownerDocument.activeElement;
-
-				if (
-					! focusedElement ||
-					! items.some( ( item ) => focusedElement === item.element )
-				) {
-					return; // Return early if no tabs are focused.
-				}
-
-				// If, after ariakit re-computes the active tab, that tab doesn't match
-				// the currently focused tab, then we force an update to ariakit to avoid
-				// any mismatches, especially when navigating to previous/next tab with
-				// arrow keys.
-				if ( activeId !== focusedElement.id ) {
-					setActiveId( focusedElement.id );
-				}
-			} );
-		}, [ activeId, items, setActiveId ] );
-
 		const contextValue = useMemo(
 			() => ( {
 				store,

package/src/tabs/tablist.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 import clsx from 'clsx';
 
 /**
@@ -73,15 +73,14 @@ export const TabList = forwardRef<
 >( function TabList( { children, ...otherProps }, ref ) {
 	const { store } = useTabsContext() ?? {};
 
-	const selectedId = Ariakit.useStoreState( store, 'selectedId' );
-	const activeId = Ariakit.useStoreState( store, 'activeId' );
-	const selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );
-	const items = Ariakit.useStoreState( store, 'items' );
+	const selectedId = useStoreState( store, 'selectedId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
 	const [ parent, setParent ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ ref, setParent ] );
 
 	const selectedItem = store?.item( selectedId );
-	const renderedItems = Ariakit.useStoreState( store, 'renderedItems' );
+	const renderedItems = useStoreState( store, 'renderedItems' );
 
 	const selectedItemIndex =
 		renderedItems && selectedItem
@@ -110,20 +109,6 @@ export const TabList = forwardRef<
 	// Make sure selected tab is scrolled into view.
 	useScrollRectIntoView( parent, selectedRect );
 
-	const onBlur = () => {
-		if ( ! selectOnMove ) {
-			return;
-		}
-
-		// When automatic tab selection is on, make sure that the active tab is up
-		// to date with the selected tab when leaving the tablist. This makes sure
-		// that the selected tab will receive keyboard focus when tabbing back into
-		// the tablist.
-		if ( selectedId !== activeId ) {
-			store?.setActiveId( selectedId );
-		}
-	};
-
 	if ( ! store ) {
 		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -141,7 +126,6 @@ export const TabList = forwardRef<
 					tabIndex={ props.tabIndex ?? -1 }
 				/>
 			) }
-			onBlur={ onBlur }
 			data-select-on-move={ selectOnMove ? 'true' : 'false' }
 			{ ...otherProps }
 			className={ clsx(

package/src/tabs/test/index.tsx

@@ -1465,28 +1465,24 @@ describe( 'Tabs', () => {
 							/>
 						);
 
-						// When the selected tab is changed, focus should not be changed.
+						// When the selected tab is changed by the controlling
+						// component while the tablist holds focus, focus moves to
+						// the newly selected tab (Gamma).
 						expect(
 							screen.getByRole( 'tab', {
 								selected: true,
 								name: 'Gamma',
 							} )
-						).toBeVisible();
-						expect(
-							screen.getByRole( 'tab', {
-								selected: false,
-								name: 'Beta',
-							} )
 						).toHaveFocus();
 
-						// Arrow left should move focus to the previous tab (alpha).
-						// The alpha tab should be always focused, and should be selected
+						// Arrow left should move focus to the previous tab (Beta).
+						// Beta should always be focused, and should be selected
 						// when the `selectOnMove` prop is set to `true`.
 						await press.ArrowLeft();
 						expect(
 							screen.getByRole( 'tab', {
 								selected: selectOnMove,
-								name: 'Alpha',
+								name: 'Beta',
 							} )
 						).toHaveFocus();
 					} );
@@ -1530,18 +1526,15 @@ describe( 'Tabs', () => {
 							</>
 						);
 
-						// When the selected tab is changed, it should not automatically receive focus.
+						// When the selected tab is changed by the controlling
+						// component while the tablist holds focus, focus moves to
+						// the newly selected tab (Gamma), which also becomes the
+						// active tab.
 						expect(
 							screen.getByRole( 'tab', {
 								selected: true,
 								name: 'Gamma',
 							} )
-						).toBeVisible();
-						expect(
-							screen.getByRole( 'tab', {
-								selected: false,
-								name: 'Beta',
-							} )
 						).toHaveFocus();
 
 						// Press shift+tab, move focus to the button before Tabs
@@ -1550,18 +1543,14 @@ describe( 'Tabs', () => {
 							screen.getByRole( 'button', { name: 'Focus me' } )
 						).toHaveFocus();
 
-						// Press tab, move focus back to the tablist
+						// Press tab, move focus back to the tablist. Because the
+						// newly selected tab became the active tab, focus returns
+						// to Gamma regardless of `selectOnMove`.
 						await press.Tab();
-
-						const betaTab = screen.getByRole( 'tab', {
-							name: 'Beta',
-						} );
-						const gammaTab = screen.getByRole( 'tab', {
-							name: 'Gamma',
-						} );
-
 						expect(
-							selectOnMove ? gammaTab : betaTab
+							screen.getByRole( 'tab', {
+								name: 'Gamma',
+							} )
 						).toHaveFocus();
 					} );
 				}

package/src/text/test/__snapshots__/index.tsx.snap

@@ -6,7 +6,7 @@ Snapshot Diff:
 + Base styles
 
 @@ -3,8 +3,9 @@
-      "color": "var(--wp-components-color-foreground, #1e1e1e)",
+      "color": "var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))",
       "font-size": "calc((13 / 13) * 13px)",
       "font-weight": "normal",
       "line-height": "1.4",
@@ -19,7 +19,7 @@ Snapshot Diff:
 
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   line-height: 1.4;
   margin: 0;
   text-wrap: pretty;
@@ -51,7 +51,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   line-height: 1.4;
   margin: 0;
   text-wrap: pretty;