@wordpress/components 23.9.0 → 25.0.0

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

@@ -65,10 +65,11 @@ 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));
-  outline: none;
+  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));
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {
@@ -81,6 +82,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 160ms ease;
   transition: transform 160ms ease;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -400,10 +403,11 @@ 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));
-  outline: none;
+  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));
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -46,8 +46,10 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 		&:focus-within {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };
-			outline: none;
 			z-index: 1;
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
 		}
 	`;
 };
@@ -80,6 +82,9 @@ export const BackdropView = styled.div`
 	transition: transform ${ CONFIG.transitionDurationFast } ease;
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: -3px;
 `;
 
 export const VisualLabelWrapper = styled.div`

package/src/toolbar/stories/index.tsx

@@ -82,32 +82,31 @@ Default.args = {
 			</ToolbarGroup>
 			<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 }
-							/>
-						)
-					}
+					{ /* There is an issue here with TS not recognizing the
+					 * `RenderProp` being passed.
+					 * @ts-expect-error */ }
+					{ ( toggleProps ) => (
+						<DropdownMenu
+							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>
 			<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/tooltip/style.scss

@@ -7,11 +7,11 @@
 }
 
 .components-tooltip .components-popover__content {
-	background: $components-color-foreground; // TODO: Discuss with designers.
+	background: $black; // TODO: Discuss with designers.
 	border-radius: $radius-block-ui;
 	border-width: 0;
 	outline: none;
-	color: $components-color-foreground-inverted;
+	color: $gray-100;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;

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/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/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/tsconfig.json

@@ -34,6 +34,7 @@
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
 		{ "path": "../react-i18n" },
+		{ "path": "../rich-text" },
 		{ "path": "../warning" }
 	],
 	"include": [ "src/**/*" ],