@wordpress/components 21.2.0 → 22.0.0

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

@@ -25,15 +25,17 @@ const meta: ComponentMeta< typeof SelectControl > = {
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
 
-const SelectControlWithState: ComponentStory< typeof SelectControl > = (
-	args
-) => {
+const SelectControlWithState: ComponentStory< typeof SelectControl > = ( {
+	onChange,
+	...args
+} ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
 
@@ -41,7 +43,10 @@ const SelectControlWithState: ComponentStory< typeof SelectControl > = (
 		<SelectControl
 			{ ...args }
 			value={ selection }
-			onChange={ setSelection }
+			onChange={ ( value ) => {
+				setSelection( value );
+				onChange?.( value );
+			} }
 		/>
 	);
 };

package/src/shortcut/test/index.tsx

@@ -11,7 +11,7 @@ import Shortcut from '..';
 describe( 'Shortcut', () => {
 	it( 'does not render anything if no shortcut prop is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {

package/src/slot-fill/bubbles-virtually/fill.js

@@ -28,18 +28,18 @@ function useForceUpdate() {
 }
 
 export default function Fill( { name, children } ) {
-	const slot = useSlot( name );
+	const { registerFill, unregisterFill, ...slot } = useSlot( name );
 	const ref = useRef( { rerender: useForceUpdate() } );
 
 	useEffect( () => {
-		// We register fills so we can keep track of their existance.
+		// We register fills so we can keep track of their existence.
 		// Some Slot implementations need to know if there're already fills
 		// registered so they can choose to render themselves or not.
-		slot.registerFill( ref );
+		registerFill( ref );
 		return () => {
-			slot.unregisterFill( ref );
+			unregisterFill( ref );
 		};
-	}, [ slot.registerFill, slot.unregisterFill ] );
+	}, [ registerFill, unregisterFill ] );
 
 	if ( ! slot.ref || ! slot.ref.current ) {
 		return null;

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -67,9 +67,11 @@ function useSlotRegistry() {
 		if ( fills.current.get( name ) ) {
 			fills.current.set(
 				name,
-				fills.current
-					.get( name )
-					.filter( ( fillRef ) => fillRef !== ref )
+				valRef(
+					fills.current
+						.get( name )
+						.filter( ( fillRef ) => fillRef !== ref )
+				)
 			);
 		}
 	}, [] );

package/src/slot-fill/bubbles-virtually/slot.js

@@ -19,19 +19,21 @@ function Slot(
 	{ name, fillProps = {}, as: Component = 'div', ...props },
 	forwardedRef
 ) {
-	const registry = useContext( SlotFillContext );
+	const { registerSlot, unregisterSlot, ...registry } =
+		useContext( SlotFillContext );
 	const ref = useRef();
 
 	useLayoutEffect( () => {
-		registry.registerSlot( name, ref, fillProps );
+		registerSlot( name, ref, fillProps );
 		return () => {
-			registry.unregisterSlot( name, ref );
+			unregisterSlot( name, ref );
 		};
-		// We are not including fillProps in the deps because we don't want to
-		// unregister and register the slot whenever fillProps change, which would
-		// cause the fill to be re-mounted. We are only considering the initial value
-		// of fillProps.
-	}, [ registry.registerSlot, registry.unregisterSlot, name ] );
+		// Ignore reason: We don't want to unregister and register the slot whenever
+		// `fillProps` change, which would cause the fill to be re-mounted. Instead,
+		// we can just update the slot (see hook below).
+		// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ registerSlot, unregisterSlot, name ] );
 	// fillProps may be an update that interacts with the layout, so we
 	// useLayoutEffect.
 	useLayoutEffect( () => {

package/src/slot-fill/bubbles-virtually/use-slot.js

@@ -15,7 +15,13 @@ import { useCallback, useContext } from '@wordpress/element';
 import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
-	const registry = useContext( SlotFillContext );
+	const {
+		updateSlot: registryUpdateSlot,
+		unregisterSlot: registryUnregisterSlot,
+		registerFill: registryRegisterFill,
+		unregisterFill: registryUnregisterFill,
+		...registry
+	} = useContext( SlotFillContext );
 	const slots = useSnapshot( registry.slots, { sync: true } );
 	// The important bit here is that this call ensures
 	// the hook only causes a re-render if the slot
@@ -24,30 +30,30 @@ export default function useSlot( name ) {
 
 	const updateSlot = useCallback(
 		( fillProps ) => {
-			registry.updateSlot( name, fillProps );
+			registryUpdateSlot( name, fillProps );
 		},
-		[ name, registry.updateSlot ]
+		[ name, registryUpdateSlot ]
 	);
 
 	const unregisterSlot = useCallback(
 		( slotRef ) => {
-			registry.unregisterSlot( name, slotRef );
+			registryUnregisterSlot( name, slotRef );
 		},
-		[ name, registry.unregisterSlot ]
+		[ name, registryUnregisterSlot ]
 	);
 
 	const registerFill = useCallback(
 		( fillRef ) => {
-			registry.registerFill( name, fillRef );
+			registryRegisterFill( name, fillRef );
 		},
-		[ name, registry.registerFill ]
+		[ name, registryRegisterFill ]
 	);
 
 	const unregisterFill = useCallback(
 		( fillRef ) => {
-			registry.unregisterFill( name, fillRef );
+			registryUnregisterFill( name, fillRef );
 		},
-		[ name, registry.unregisterFill ]
+		[ name, registryUnregisterFill ]
 	);
 
 	return {

package/src/slot-fill/fill.js

@@ -20,8 +20,12 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 	} );
 
 	useLayoutEffect( () => {
-		registerFill( name, ref.current );
-		return () => unregisterFill( name, ref.current );
+		const refValue = ref.current;
+		registerFill( name, refValue );
+		return () => unregisterFill( name, refValue );
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useLayoutEffect( () => {
@@ -29,6 +33,9 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		if ( slot ) {
 			slot.forceUpdate();
 		}
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ children ] );
 
 	useLayoutEffect( () => {
@@ -39,6 +46,9 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		unregisterFill( ref.current.name, ref.current );
 		ref.current.name = name;
 		registerFill( name, ref.current );
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	if ( ! slot || ! slot.node ) {

package/src/slot-fill/use-slot.js

@@ -26,6 +26,9 @@ const useSlot = ( name ) => {
 		} );
 
 		return unsubscribe;
+		// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
+		// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	return slot;

package/src/snackbar/index.js

@@ -93,7 +93,7 @@ function Snackbar(
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ onDismiss, onRemove ] );
+	}, [ onDismiss, onRemove, explicitDismiss ] );
 
 	const classes = classnames( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,

package/src/style.scss

@@ -1,3 +1,7 @@
+// Variables
+@import "./utils/theme-variables.scss";
+
+// Components
 @import "./animate/style.scss";
 @import "./autocomplete/style.scss";
 @import "./button-group/style.scss";

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

@@ -5,14 +5,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderLeft 1`] = `
@@ -20,14 +22,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderRight 1`] = `
@@ -35,14 +39,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderTop 1`] = `
@@ -50,14 +56,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render correctly 1`] = `
@@ -67,12 +75,14 @@ exports[`props should render correctly 1`] = `
   position: relative;
 }
 
-<div
-  class="components-surface emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Surface"
->
-  Surface
+<div>
+  <div
+    class="components-surface emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Surface"
+  >
+    Surface
+  </div>
 </div>
 `;
 
@@ -81,12 +91,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;

package/src/surface/test/index.tsx

@@ -16,43 +16,33 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
+		expect( base.container ).toMatchSnapshot();
 	} );
 
 	test( 'should render variants', () => {
 		const { container } = render(
 			<Surface variant="secondary">Surface</Surface>
 		);
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderLeft', () => {
 		const { container } = render( <Surface borderLeft>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderRight', () => {
 		const { container } = render( <Surface borderRight>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderTop', () => {
 		const { container } = render( <Surface borderTop>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderBottom', () => {
 		const { container } = render( <Surface borderBottom>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 } );

package/src/tab-panel/index.tsx

@@ -85,7 +85,7 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleClick = ( tabKey: string ) => {
+	const handleTabSelection = ( tabKey: string ) => {
 		setSelected( tabKey );
 		onSelect?.( tabKey );
 	};
@@ -97,14 +97,10 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab ) {
-			setSelected(
-				initialTabName ||
-					( tabs.length > 0 ? tabs[ 0 ].name : undefined )
-			);
+		if ( ! selectedTab?.name && tabs.length > 0 ) {
+			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
-	}, [ tabs ] );
+	}, [ tabs, selectedTab?.name, initialTabName ] );
 
 	return (
 		<div className={ className }>
@@ -127,7 +123,7 @@ export function TabPanel( {
 						aria-controls={ `${ instanceId }-${ tab.name }-view` }
 						selected={ tab.name === selected }
 						key={ tab.name }
-						onClick={ () => handleClick( tab.name ) }
+						onClick={ () => handleTabSelection( tab.name ) }
 					>
 						{ tab.title }
 					</TabButton>

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

@@ -38,14 +38,22 @@ describe( 'TabPanel', () => {
 	it( 'should render a tabpanel, and clicking should change tabs', async () => {
 		const user = setupUser();
 		const panelRenderFunction = jest.fn();
+		const mockOnSelect = jest.fn();
 
-		render( <TabPanel tabs={ TABS } children={ panelRenderFunction } /> );
+		render(
+			<TabPanel
+				tabs={ TABS }
+				children={ panelRenderFunction }
+				onSelect={ mockOnSelect }
+			/>
+		);
 
 		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
 		expect(
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
 
@@ -54,6 +62,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Beta' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 1 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 
@@ -62,6 +71,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 	} );
 
 	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
@@ -117,4 +127,71 @@ describe( 'TabPanel', () => {
 			'gamma-class'
 		);
 	} );
+
+	it( 'should select `initialTabname` if defined', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ TABS }
+				initialTabName="beta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+	} );
+
+	describe( 'fallbacks when new tab list invalidates current selection', () => {
+		it( 'should select `initialTabName` if defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+
+		it( 'should select first tab if `initialTabName` not defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+		} );
+	} );
 } );

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

@@ -31,17 +31,19 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
+<div>
   <span
-    class=""
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
   >
-    Lorem ipsum.
+    <span
+      class=""
+    >
+      Lorem ipsum.
+    </span>
   </span>
-</span>
+</div>
 `;
 
 exports[`Text snapshot tests should render correctly 1`] = `
@@ -53,11 +55,13 @@ exports[`Text snapshot tests should render correctly 1`] = `
   font-weight: normal;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
-  Lorem ipsum.
-</span>
+<div>
+  <span
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
+  >
+    Lorem ipsum.
+  </span>
+</div>
 `;

package/src/text/test/index.tsx

@@ -14,7 +14,7 @@ describe( 'Text', () => {
 	describe( 'snapshot tests', () => {
 		test( 'should render correctly', () => {
 			const { container } = render( <Text>Lorem ipsum.</Text> );
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 
@@ -116,7 +116,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
 		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );

package/src/text-control/index.tsx

@@ -62,8 +62,6 @@ function UnforwardedTextControl(
 /**
  * TextControl components let users enter and edit text.
  *
- *
- * @example
  * ```jsx
  * import { TextControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';