@wordpress/components 27.0.0 → 27.1.0

package/src/tabs/test/index.tsx

@@ -598,7 +598,7 @@ describe( 'Tabs', () => {
 		} );
 	} );
 	describe( 'Uncontrolled mode', () => {
-		describe( 'Without `initialTabId` prop', () => {
+		describe( 'Without `defaultTabId` prop', () => {
 			it( 'should render first tab', async () => {
 				render( <UncontrolledTabs tabs={ TABS } /> );
 
@@ -655,20 +655,20 @@ describe( 'Tabs', () => {
 			} );
 		} );
 
-		describe( 'With `initialTabId`', () => {
-			it( 'should render the tab set by `initialTabId` prop', async () => {
+		describe( 'With `defaultTabId`', () => {
+			it( 'should render the tab set by `defaultTabId` prop', async () => {
 				render(
-					<UncontrolledTabs tabs={ TABS } initialTabId="beta" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 
-			it( 'should not select a tab when `initialTabId` does not match any known tab', () => {
+			it( 'should not select a tab when `defaultTabId` does not match any known tab', () => {
 				render(
 					<UncontrolledTabs
 						tabs={ TABS }
-						initialTabId="does-not-exist"
+						defaultTabId="does-not-exist"
 					/>
 				);
 
@@ -682,25 +682,25 @@ describe( 'Tabs', () => {
 					screen.queryByRole( 'tabpanel' )
 				).not.toBeInTheDocument();
 			} );
-			it( 'should not change tabs when initialTabId is changed', async () => {
+			it( 'should not change tabs when defaultTabId is changed', async () => {
 				const { rerender } = render(
-					<UncontrolledTabs tabs={ TABS } initialTabId="beta" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
 				rerender(
-					<UncontrolledTabs tabs={ TABS } initialTabId="alpha" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="alpha" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 
-			it( 'should fall back to the tab associated to `initialTabId` if the currently active tab is removed', async () => {
+			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab is removed', async () => {
 				const mockOnSelect = jest.fn();
 
 				const { rerender } = render(
 					<UncontrolledTabs
 						tabs={ TABS }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 						onSelect={ mockOnSelect }
 					/>
 				);
@@ -714,7 +714,7 @@ describe( 'Tabs', () => {
 				rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 1 ) }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 						onSelect={ mockOnSelect }
 					/>
 				);
@@ -722,13 +722,13 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			} );
 
-			it( 'should fall back to the tab associated to `initialTabId` if the currently active tab becomes disabled', async () => {
+			it( 'should fall back to the tab associated to `defaultTabId` if the currently active tab becomes disabled', async () => {
 				const mockOnSelect = jest.fn();
 
 				const { rerender } = render(
 					<UncontrolledTabs
 						tabs={ TABS }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 						onSelect={ mockOnSelect }
 					/>
 				);
@@ -754,7 +754,7 @@ describe( 'Tabs', () => {
 				rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_ALPHA_DISABLED }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 						onSelect={ mockOnSelect }
 					/>
 				);
@@ -762,9 +762,9 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
 			} );
 
-			it( 'should have no active tabs when the tab associated to `initialTabId` is removed while being the active tab', async () => {
+			it( 'should have no active tabs when the tab associated to `defaultTabId` is removed while being the active tab', async () => {
 				const { rerender } = render(
-					<UncontrolledTabs tabs={ TABS } initialTabId="gamma" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="gamma" />
 				);
 
 				expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
@@ -773,7 +773,7 @@ describe( 'Tabs', () => {
 				rerender(
 					<UncontrolledTabs
 						tabs={ TABS.slice( 0, 2 ) }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 					/>
 				);
 
@@ -788,9 +788,9 @@ describe( 'Tabs', () => {
 				).not.toBeInTheDocument();
 			} );
 
-			it( 'waits for the tab with the `initialTabId` to be present in the `tabs` array before selecting it', async () => {
+			it( 'waits for the tab with the `defaultTabId` to be present in the `tabs` array before selecting it', async () => {
 				const { rerender } = render(
-					<UncontrolledTabs tabs={ TABS } initialTabId="delta" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="delta" />
 				);
 
 				// There should be no selected tab yet.
@@ -801,7 +801,7 @@ describe( 'Tabs', () => {
 				rerender(
 					<UncontrolledTabs
 						tabs={ TABS_WITH_DELTA }
-						initialTabId="delta"
+						defaultTabId="delta"
 					/>
 				);
 
@@ -891,7 +891,7 @@ describe( 'Tabs', () => {
 				expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
 			} );
 
-			it( 'should select first enabled tab when the tab associated to `initialTabId` is disabled', async () => {
+			it( 'should select first enabled tab when the tab associated to `defaultTabId` is disabled', async () => {
 				const TABS_ONLY_GAMMA_ENABLED = TABS.map( ( tabObj ) =>
 					tabObj.tabId !== 'gamma'
 						? {
@@ -906,7 +906,7 @@ describe( 'Tabs', () => {
 				const { rerender } = render(
 					<UncontrolledTabs
 						tabs={ TABS_ONLY_GAMMA_ENABLED }
-						initialTabId="beta"
+						defaultTabId="beta"
 					/>
 				);
 
@@ -916,7 +916,7 @@ describe( 'Tabs', () => {
 
 				// Re-enable all tabs
 				rerender(
-					<UncontrolledTabs tabs={ TABS } initialTabId="beta" />
+					<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
 				);
 
 				// Even if the initial tab becomes enabled again, the selected tab doesn't
@@ -968,14 +968,14 @@ describe( 'Tabs', () => {
 				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 			} );
 
-			it( 'should select the first enabled tab when the tab associated to `initialTabId` becomes disabled while being the active tab', async () => {
+			it( 'should select the first enabled tab when the tab associated to `defaultTabId` becomes disabled while being the active tab', async () => {
 				const mockOnSelect = jest.fn();
 
 				const { rerender } = render(
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 					/>
 				);
 
@@ -998,7 +998,7 @@ describe( 'Tabs', () => {
 					<UncontrolledTabs
 						tabs={ TABS_WITH_GAMMA_DISABLED }
 						onSelect={ mockOnSelect }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 					/>
 				);
 
@@ -1011,7 +1011,7 @@ describe( 'Tabs', () => {
 					<UncontrolledTabs
 						tabs={ TABS }
 						onSelect={ mockOnSelect }
-						initialTabId="gamma"
+						defaultTabId="gamma"
 					/>
 				);
 
@@ -1032,12 +1032,12 @@ describe( 'Tabs', () => {
 				await screen.findByRole( 'tabpanel', { name: 'Beta' } )
 			).toBeInTheDocument();
 		} );
-		it( 'should render the specified `selectedTabId`, and ignore the `initialTabId` prop', async () => {
+		it( 'should render the specified `selectedTabId`, and ignore the `defaultTabId` prop', async () => {
 			render(
 				<ControlledTabs
 					tabs={ TABS }
 					selectedTabId="gamma"
-					initialTabId="beta"
+					defaultTabId="beta"
 				/>
 			);
 

package/src/tabs/types.ts

@@ -43,7 +43,7 @@ export type TabsProps = {
 	 * Note: this prop will be overridden by the `selectedTabId` prop if it is
 	 * provided. (Controlled Mode)
 	 */
-	initialTabId?: string;
+	defaultTabId?: string;
 	/**
 	 * The function called when a tab has been selected.
 	 * It is passed the id of the newly selected tab as an argument.

package/src/toggle-group-control/test/index.tsx

@@ -71,7 +71,7 @@ const optionsWithTooltip = (
 			value="gnocchi"
 			label="Delicious Gnocchi"
 			aria-label="Click for Delicious Gnocchi"
-			showTooltip={ true }
+			showTooltip
 		/>
 		<ToggleGroupControlOption
 			value="caponata"

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

@@ -71,7 +71,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Width"
@@ -83,7 +83,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Height"
@@ -95,7 +95,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
 						onDeselect={ () => setMinHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Minimum height"
@@ -163,7 +163,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Width"
@@ -175,7 +175,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Height"
@@ -437,7 +437,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					onDeselect={ () => updateAttribute( 'height', undefined ) }
 					resetAllFilter={ () => ( { height: undefined } ) }
 					panelId={ panelId }
-					isShownByDefault={ true }
+					isShownByDefault
 				>
 					<UnitControl
 						label="Injected Height"
@@ -536,7 +536,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 					} }
 					resetAllFilter={ () => ( { height: undefined } ) }
 					panelId={ panelId }
-					isShownByDefault={ true }
+					isShownByDefault
 				>
 					<UnitControl
 						label="Injected Height"
@@ -555,7 +555,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 						}
 						resetAllFilter={ () => ( { scale: undefined } ) }
 						panelId={ panelId }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<ToggleGroupControl
 							__nextHasNoMarginBottom

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

@@ -222,10 +222,7 @@ describe( 'ToolsPanel', () => {
 					<ToolsPanelItem { ...controlProps }>
 						<div>Example control</div>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Alt control</div>
 					</ToolsPanelItem>
 				</ToolsPanel>
@@ -413,10 +410,7 @@ describe( 'ToolsPanel', () => {
 		it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 				</ToolsPanel>
@@ -440,10 +434,7 @@ describe( 'ToolsPanel', () => {
 		it( 'should render appropriate menu groups', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					<ToolsPanelItem { ...altControlProps }>
@@ -461,10 +452,7 @@ describe( 'ToolsPanel', () => {
 
 		it( 'should not render contents of items when in placeholder state', () => {
 			render(
-				<ToolsPanel
-					{ ...defaultProps }
-					shouldRenderPlaceholderItems={ true }
-				>
+				<ToolsPanel { ...defaultProps } shouldRenderPlaceholderItems>
 					<ToolsPanelItem { ...altControlProps }>
 						<div>Optional control</div>
 					</ToolsPanelItem>
@@ -493,10 +481,7 @@ describe( 'ToolsPanel', () => {
 
 			const TestPanel = () => (
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					<ToolsPanelItem
@@ -568,16 +553,13 @@ describe( 'ToolsPanel', () => {
 
 			const TestPanel = () => (
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					{ !! altControlValue && (
 						<ToolsPanelItem
 							{ ...conditionalControlProps }
-							isShownByDefault={ true }
+							isShownByDefault
 						>
 							<div>Conditional control</div>
 						</ToolsPanelItem>
@@ -1340,7 +1322,7 @@ describe( 'ToolsPanel', () => {
 							{ ...altControlProps }
 							label="Item 3"
 							data-testid="item-3"
-							isShownByDefault={ true }
+							isShownByDefault
 						>
 							<div>Item 3</div>
 						</ToolsPanelItem>
@@ -1352,8 +1334,8 @@ describe( 'ToolsPanel', () => {
 					</ToolsPanelItems>
 					<ToolsPanel
 						{ ...defaultProps }
-						hasInnerWrapper={ true }
-						shouldRenderPlaceholderItems={ true }
+						hasInnerWrapper
+						shouldRenderPlaceholderItems
 						__experimentalFirstVisibleItemClass="first"
 						__experimentalLastVisibleItemClass="last"
 					>

package/src/tooltip/style.scss

@@ -1,5 +1,6 @@
 .components-tooltip {
-	background: $black; // TODO: Discuss with designers.
+	background: $black;
+	font-family: $default-font;
 	border-radius: $radius-block-ui;
 	color: $gray-100;
 	text-align: center;

package/src/tooltip/test/index.native.js

@@ -44,7 +44,7 @@ afterAll( () => {
 it( 'displays the message', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -56,7 +56,7 @@ it( 'displays the message', () => {
 it( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -72,7 +72,7 @@ it( 'dismisses when the screen is tapped', () => {
 it( 'dismisses when the keyboard closes', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>

package/src/tree-grid/test/index.tsx

@@ -123,7 +123,7 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton aria-expanded="true">Row 1</TestButton>

package/src/utils/hooks/index.js

@@ -2,4 +2,3 @@ export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
-export { useLatestRef } from './use-latest-ref';

package/src/v-stack/test/index.tsx

@@ -39,4 +39,14 @@ describe( 'props', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	test( 'should not pass through invalid props to the `as` component', () => {
+		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+			return <div { ...props } />;
+		};
+
+		render( <VStack as={ AsComponent }>foobar</VStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );