@wordpress/components 22.0.0 → 23.0.0

package/src/navigator/navigator-screen/component.tsx

@@ -75,6 +75,12 @@ function UnconnectedNavigatorScreen(
 		[ className, cx ]
 	);
 
+	const locationRef = useRef( location );
+
+	useEffect( () => {
+		locationRef.current = location;
+	}, [ location ] );
+
 	// Focus restoration
 	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
@@ -87,7 +93,7 @@ function UnconnectedNavigatorScreen(
 			isInitialLocation ||
 			! isMatch ||
 			! wrapperRef.current ||
-			location.hasRestoredFocus
+			locationRef.current.hasRestoredFocus
 		) {
 			return;
 		}
@@ -119,12 +125,11 @@ function UnconnectedNavigatorScreen(
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
-		location.hasRestoredFocus = true;
+		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
-		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );

package/src/notice/README.md

@@ -34,7 +34,8 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 -   **Default** notices have **no background**.
--   **Informational** notices are **blue.**
+-   **Informational** notices are **blue** by default.
+    - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 -   **Success** notices are **green.**
 -   **Warning** notices are **yellow\*\***.\*\*
 -   **Error** notices are **red.**

package/src/notice/style.scss

@@ -3,7 +3,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	background-color: $white;
-	border-left: 4px solid var(--wp-admin-theme-color);
+	border-left: 4px solid $components-color-accent;
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;

package/src/notice/test/list.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,11 +10,14 @@ import NoticeList from '../list';
 
 describe( 'NoticeList', () => {
 	it( 'should merge className', () => {
-		const { container } = render(
-			<NoticeList notices={ [] } className="is-ok" />
+		render(
+			<NoticeList notices={ [] } className="is-ok">
+				List of notices
+			</NoticeList>
 		);
 
-		expect( container.firstChild ).toHaveClass( 'is-ok' );
-		expect( container.firstChild ).toHaveClass( 'components-notice-list' );
+		const noticeList = screen.getByText( 'List of notices' );
+		expect( noticeList ).toHaveClass( 'is-ok' );
+		expect( noticeList ).toHaveClass( 'components-notice-list' );
 	} );
 } );

package/src/number-control/stories/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,9 +11,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import NumberControl from '../';
+import NumberControl from '..';
 
-export default {
+const meta: ComponentMeta< typeof NumberControl > = {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
 	argTypes: {
@@ -19,10 +24,19 @@ export default {
 		type: { control: { type: 'text' } },
 		value: { control: null },
 	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
 };
 
-function Template( { onChange, ...props } ) {
-	const [ value, setValue ] = useState( '0' );
+export default meta;
+
+const Template: ComponentStory< typeof NumberControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '0' );
 	const [ isValidValue, setIsValidValue ] = useState( true );
 
 	return (
@@ -32,14 +46,17 @@ function Template( { onChange, ...props } ) {
 				value={ value }
 				onChange={ ( v, extra ) => {
 					setValue( v );
-					setIsValidValue( extra.event.target.validity.valid );
-					onChange( v, extra );
+					setIsValidValue(
+						( extra.event.target as HTMLInputElement ).validity
+							.valid
+					);
+					onChange?.( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
 		</>
 	);
-}
+};
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/number-control/styles/{number-control-styles.js → number-control-styles.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -12,8 +11,9 @@ import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
 import { space } from '../../ui/utils/space';
+import type { NumberControlProps } from '../types';
 
-const htmlArrowStyles = ( { hideHTMLArrows } ) => {
+const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
 	if ( ! hideHTMLArrows ) {
 		return ``;
 	}
@@ -35,7 +35,9 @@ export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
 
-const spinButtonSizeStyles = ( { size } ) => {
+const spinButtonSizeStyles = ( {
+	size,
+}: Pick< NumberControlProps, 'size' > ) => {
 	if ( size !== 'small' ) {
 		return ``;
 	}