@wordpress/components 23.8.0 → 24.0.0

package/src/tab-panel/index.tsx

@@ -101,7 +101,7 @@ export function TabPanel( {
 	// to show the `tab-panel` associated with the clicked tab.
 	const activateTabAutomatically = (
 		_childIndex: number,
-		child: HTMLButtonElement
+		child: HTMLElement
 	) => {
 		child.click();
 	};

package/src/theme/color-algorithms.ts

@@ -48,7 +48,7 @@ export function checkContrasts(
 	outputs: ThemeOutputValues[ 'colors' ]
 ) {
 	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#007cba';
+	const accent = inputs.accent || '#3858e9';
 	const foreground = outputs.foreground || COLORS.gray[ 900 ];
 	const gray = outputs.gray || COLORS.gray;
 

package/src/theme/stories/index.tsx

@@ -103,7 +103,7 @@ export const ColorScheme: ComponentStory< typeof Theme > = ( {
 	);
 };
 ColorScheme.args = {
-	accent: '#007cba',
+	accent: '#3858e9',
 	background: '#fff',
 };
 ColorScheme.argTypes = {

package/src/theme/test/color-algorithms.ts

@@ -53,9 +53,9 @@ describe( 'Theme color algorithms', () => {
 				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
 			);
 
-			generateThemeVariables( { background: '#eee' } );
+			generateThemeVariables( { background: '#1a1a1a' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#007cba").'
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );
 

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

@@ -65,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
@@ -400,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }

package/src/toolbar/stories/index.tsx

@@ -83,30 +83,32 @@ Default.args = {
 			<ToolbarGroup>
 				<ToolbarItem>
 					{
-						// @ts-expect-error TODO: Remove when ToolbarItem/DropdownMenu is typed
-						( toggleProps ) => (
-							<DropdownMenu
-								hasArrowIndicator
-								icon={ alignLeft }
-								label="Align"
-								controls={ [
-									{
-										icon: alignLeft,
-										title: 'Align left',
-										isActive: true,
-									},
-									{
-										icon: alignCenter,
-										title: 'Align center',
-									},
-									{
-										icon: alignRight,
-										title: 'Align right',
-									},
-								] }
-								toggleProps={ toggleProps }
-							/>
-						)
+						// @ts-expect-error TODO: Remove when DropdownMenu is typed
+						( toggleProps ) => {
+							return (
+								<DropdownMenu
+									hasArrowIndicator
+									icon={ alignLeft }
+									label="Align"
+									controls={ [
+										{
+											icon: alignLeft,
+											title: 'Align left',
+											isActive: true,
+										},
+										{
+											icon: alignCenter,
+											title: 'Align center',
+										},
+										{
+											icon: alignRight,
+											title: 'Align right',
+										},
+									] }
+									toggleProps={ toggleProps }
+								/>
+							);
+						}
 					}
 				</ToolbarItem>
 			</ToolbarGroup>

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

@@ -82,19 +82,16 @@ function UnforwardedToolbarButton(
 			{ ...props }
 			ref={ ref }
 		>
-			{
-				// @ts-expect-error
-				( toolbarItemProps ) => (
-					<Button
-						label={ title }
-						isPressed={ isActive }
-						disabled={ isDisabled }
-						{ ...toolbarItemProps }
-					>
-						{ children }
-					</Button>
-				)
-			}
+			{ ( toolbarItemProps ) => (
+				<Button
+					label={ title }
+					isPressed={ isActive }
+					disabled={ isDisabled }
+					{ ...toolbarItemProps }
+				>
+					{ children }
+				</Button>
+			) }
 		</ToolbarItem>
 	);
 }

package/src/toolbar/toolbar-item/{index.js → index.tsx}

@@ -1,9 +1,8 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
 import { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,14 @@ import warning from '@wordpress/warning';
  */
 import ToolbarContext from '../toolbar-context';
 
-function ToolbarItem( { children, as: Component, ...props }, ref ) {
+function ToolbarItem(
+	{
+		children,
+		as: Component,
+		...props
+	}: React.ComponentPropsWithoutRef< typeof BaseToolbarItem >,
+	ref: ForwardedRef< any >
+) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( typeof children !== 'function' && ! Component ) {
@@ -33,6 +39,9 @@ function ToolbarItem( { children, as: Component, ...props }, ref ) {
 		if ( Component ) {
 			return <Component { ...allProps }>{ children }</Component>;
 		}
+		if ( typeof children !== 'function' ) {
+			return null;
+		}
 		return children( allProps );
 	}
 

package/src/tree-grid/README.md

@@ -127,8 +127,26 @@ An integer value that represents the total number of items in the set, at this s
 
 An optional value that designates whether a row is expanded or collapsed. Currently this value only sets the correct aria-expanded property on a row, it has no other built-in behavior.
 
+If there is a need to implement `aria-expanded` elsewhere in the row, cell, or element within a cell, you may pass `isExpanded={ undefined }`. In order for keyboard navigation to continue working, add the `data-expanded` attribute with either `true`/`false`. This allows the `TreeGrid` component to still manage keyboard interactions while allowing the `aria-expanded` attribute to be placed elsewhere. See the example below.
+
 -   Required: No
 
+```jsx
+function TreeMenu() {
+	return (
+		<TreeGrid>
+			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 } isExpanded={ undefined } data-expanded={ false }>
+				<TreeGridCell>
+					{ ( props ) => (
+						<Button aria-expanded="false" onClick={ onSelect } { ...props }>Select</Button>
+					) }
+				</TreeGridCell>
+			</TreeGridRow>
+		</TreeGrid>
+	);
+}
+```
+
 ### TreeGridCell
 
 #### Props

package/src/tree-grid/index.tsx

@@ -91,7 +91,8 @@ function UnforwardedTreeGrid(
 			const canExpandCollapse = 0 === currentColumnIndex;
 			const cannotFocusNextColumn =
 				canExpandCollapse &&
-				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
+					activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
 				keyCode === RIGHT;
 
 			if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
@@ -112,6 +113,8 @@ function UnforwardedTreeGrid(
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'true' ||
 							activeRow.getAttribute( 'aria-expanded' ) === 'true'
 						) {
 							onCollapseRow( activeRow );
@@ -151,8 +154,10 @@ function UnforwardedTreeGrid(
 						// Right:
 						// If a row is focused, and it is collapsed, expands the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'false' ||
 							activeRow.getAttribute( 'aria-expanded' ) ===
-							'false'
+								'false'
 						) {
 							onExpandRow( activeRow );
 							event.preventDefault();

package/src/tree-grid/types.ts

@@ -22,6 +22,13 @@ export type TreeGridRowProps = {
 	 * An optional value that designates whether a row is expanded or collapsed.
 	 * Currently this value only sets the correct aria-expanded property on a row,
 	 * it has no other built-in behavior.
+	 *
+	 * If there is a need to implement `aria-expanded` elsewhere in the row, cell,
+	 * or element within a cell, you may pass `isExpanded={ undefined }`.
+	 * In order for keyboard navigation to continue working, add the
+	 * `data-expanded` attribute with either `true`/`false`. This allows the
+	 * `TreeGrid` component to still manage keyboard interactions while allowing
+	 * the `aria-expanded` attribute to be placed elsewhere.
 	 */
 	isExpanded?: boolean;
 };

package/src/ui/context/wordpress-component.ts

@@ -44,7 +44,7 @@ export type WordPressComponent<
 	 * We restrict it to a class to align with the already existing class names that
 	 * are generated by the context system.
 	 */
-	selector: `.${ string }`;
+	selector?: `.${ string }`;
 };
 
 export type WordPressComponentFromProps<

package/src/utils/colors-values.js

@@ -29,11 +29,11 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches @wordpress/base-styles
+// Matches the Modern admin scheme in @wordpress/base-styles
 const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
 	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
 };
 
 const UI = {

package/src/utils/theme-variables.scss

@@ -2,10 +2,10 @@
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
-// defined, fallback to the default theme color (WP blue).
-$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+// defined, fallback to the default theme color (WP blueberry).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
 // Used when placing text on the accent color.
 $components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);

package/src/utils/use-deprecated-props.ts

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function useDeprecated36pxDefaultSizeProp<
+	P extends Record< string, any > & {
+		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
+	}
+>(
+	props: P,
+	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
+	componentIdentifier: string
+) {
+	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
+		props;
+	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
+		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
+			alternative: '`__next40pxDefaultSize`',
+			since: '6.3',
+		} );
+	}
+
+	return {
+		...otherProps,
+		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
+	};
+}

package/src/view/component.tsx

@@ -27,10 +27,10 @@ import type { ViewProps } from './types';
  * }
  * ```
  */
-// @ts-expect-error
 export const View: WordPressComponent<
 	'div',
-	ViewProps & RefAttributes< any >
+	ViewProps & RefAttributes< any >,
+	true
 > = styled.div``;
 
 View.selector = '.components-view';

package/tsconfig.json

@@ -12,8 +12,8 @@
 			"snapshot-diff",
 			"@wordpress/jest-console"
 		],
-		// Some errors in Reakit types with TypeScript 4.3
-		// Remove the following line when they've been addressed.
+		// TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
+		// between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
 		"skipLibCheck": true,
 		"strictNullChecks": true
 	},
@@ -34,6 +34,7 @@
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
 		{ "path": "../react-i18n" },
+		{ "path": "../rich-text" },
 		{ "path": "../warning" }
 	],
 	"include": [ "src/**/*" ],