@wordpress/components 21.0.2 → 21.1.2-next.4d3b314fd5.0

package/src/tools-panel/tools-panel-header/component.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { speak } from '@wordpress/a11y';
-import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { check, moreVertical, plus } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
@@ -20,12 +20,14 @@ import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
 	ToolsPanelHeaderProps,
 } from '../types';
 
 const DefaultControlsGroup = ( {
+	itemClassName,
 	items,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
@@ -33,15 +35,17 @@ const DefaultControlsGroup = ( {
 		return null;
 	}
 
+	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
+
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Defaults' ) }>
 			{ items.map( ( [ label, hasValue ] ) => {
 				if ( hasValue ) {
 					return (
 						<MenuItem
 							key={ label }
+							className={ itemClassName }
 							role="menuitem"
-							icon={ reset }
 							label={ sprintf(
 								// translators: %s: The name of the control being reset e.g. "Padding".
 								__( 'Reset %s' ),
@@ -58,6 +62,7 @@ const DefaultControlsGroup = ( {
 									'assertive'
 								);
 							} }
+							suffix={ resetSuffix }
 						>
 							{ label }
 						</MenuItem>
@@ -67,8 +72,8 @@ const DefaultControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
+						className={ itemClassName }
 						role="menuitemcheckbox"
-						icon={ check }
 						isSelected
 						aria-disabled
 					>
@@ -89,7 +94,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Tools' ) }>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -147,6 +152,7 @@ const ToolsPanelHeader = (
 ) => {
 	const {
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
@@ -197,6 +203,7 @@ const ToolsPanelHeader = (
 							<DefaultControlsGroup
 								items={ defaultItems }
 								toggleItem={ toggleItem }
+								itemClassName={ defaultControlsItemClassName }
 							/>
 							<OptionalControlsGroup
 								items={ optionalItems }

package/src/tools-panel/tools-panel-header/hook.ts

@@ -33,12 +33,17 @@ export function useToolsPanelHeader(
 		return cx( styles.ToolsPanelHeading );
 	}, [ cx ] );
 
+	const defaultControlsItemClassName = useMemo( () => {
+		return cx( styles.DefaultControlsItem );
+	}, [ cx ] );
+
 	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
 		useToolsPanelContext();
 
 	return {
 		...otherProps,
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,

package/src/tools-panel/types.ts

@@ -147,6 +147,7 @@ export type ToolsPanelContext = {
 };
 
 export type ToolsPanelControlsGroupProps = {
+	itemClassName?: string;
 	items: [ string, boolean ][];
 	toggleItem: ( label: string ) => void;
 };

package/src/tree-grid/index.js

@@ -36,12 +36,13 @@ function getRowFocusables( rowElement ) {
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props               Component props.
- * @param {WPElement} props.children      Children to be rendered.
- * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow    Callback to fire when moving focus to a different row.
- * @param {Object}    ref                 A ref to the underlying DOM table element.
+ * @param {Object}    props                      Component props.
+ * @param {WPElement} props.children             Children to be rendered.
+ * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
+ * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
+ * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
+ * @param {string}    props.applicationAriaLabel Label to use for the application role.
+ * @param {Object}    ref                        A ref to the underlying DOM table element.
  */
 function TreeGrid(
 	{
@@ -49,6 +50,7 @@ function TreeGrid(
 		onExpandRow = () => {},
 		onCollapseRow = () => {},
 		onFocusRow = () => {},
+		applicationAriaLabel,
 		...props
 	},
 	ref
@@ -286,14 +288,21 @@ function TreeGrid(
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<RovingTabIndexContainer>
-			<table
-				{ ...props }
-				role="treegrid"
-				onKeyDown={ onKeyDown }
-				ref={ ref }
-			>
-				<tbody>{ children }</tbody>
-			</table>
+			{
+				// Prevent browser mode from triggering in NVDA by wrapping List View
+				// in a role=application wrapper.
+				// see: https://github.com/WordPress/gutenberg/issues/43729
+			 }
+			<div role="application" aria-label={ applicationAriaLabel }>
+				<table
+					{ ...props }
+					role="treegrid"
+					onKeyDown={ onKeyDown }
+					ref={ ref }
+				>
+					<tbody>{ children }</tbody>
+				</table>
+			</div>
 		</RovingTabIndexContainer>
 	);
 	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */

package/src/tree-grid/test/__snapshots__/cell.js.snap

@@ -1,23 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<table
-  onKeyDown={[Function]}
-  role="treegrid"
+<div
+  role="application"
 >
-  <tbody>
-    <tr>
-      <td
-        role="gridcell"
-      >
-        <button
-          className="my-button"
-          onFocus={[Function]}
+  <table
+    onKeyDown={[Function]}
+    role="treegrid"
+  >
+    <tbody>
+      <tr>
+        <td
+          role="gridcell"
         >
-          Click Me!
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          <button
+            className="my-button"
+            onFocus={[Function]}
+          >
+            Click Me!
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

package/src/tree-grid/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;

package/src/unit-control/index.native.js

@@ -47,6 +47,10 @@ function UnitControl( {
 		if ( pickerRef?.current ) {
 			pickerRef.current.presentPicker();
 		}
+		// Disable reason: this should be fixed by the native team.
+		// It would be great if this could be done in the context of
+		// https://github.com/WordPress/gutenberg/pull/39218
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ pickerRef?.current ] );
 
 	const currentInputValue = currentInput === null ? value : currentInput;
@@ -102,6 +106,10 @@ function UnitControl( {
 			anchorNodeRef?.current
 				? findNodeHandle( anchorNodeRef?.current )
 				: undefined,
+		// Disable reason: this should be fixed by the native team.
+		// It would be great if this could be done in the context of
+		// https://github.com/WordPress/gutenberg/pull/39218
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ anchorNodeRef?.current ]
 	);
 

package/src/unit-control/index.tsx

@@ -100,7 +100,7 @@ function UnforwardedUnitControl(
 		if ( parsedUnit !== undefined ) {
 			setUnit( parsedUnit );
 		}
-	}, [ parsedUnit ] );
+	}, [ parsedUnit, setUnit ] );
 
 	// Stores parsed value for hand-off in state reducer.
 	const refParsedQuantity = useRef< number | undefined >( undefined );
@@ -265,7 +265,7 @@ function UnforwardedUnitControl(
 				autoComplete={ autoComplete }
 				className={ classes }
 				disabled={ disabled }
-				disableUnits={ disableUnits }
+				hideHTMLArrows
 				isPressEnterToChange={ isPressEnterToChange }
 				label={ label }
 				onBlur={ handleOnBlur }

package/src/unit-control/styles/unit-control-styles.ts

@@ -18,10 +18,6 @@ type SelectProps = {
 	selectSize: SelectSize;
 };
 
-type InputProps = {
-	disableUnits?: boolean;
-};
-
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
@@ -32,30 +28,14 @@ export const Root = styled.div`
 	}
 `;
 
-const arrowStyles = ( { disableUnits }: InputProps ) => {
-	if ( disableUnits ) return '';
-
-	return css`
-		&::-webkit-outer-spin-button,
-		&::-webkit-inner-spin-button {
-			-webkit-appearance: none;
-			margin: 0;
-		}
-	`;
-};
-
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
 export const ValueInput = styled( NumberControl )`
 	&&& {
 		input {
-			appearance: none;
-			-moz-appearance: textfield;
 			display: block;
 			width: 100%;
-
-			${ arrowStyles };
 		}
 	}
 `;

package/src/unit-control/test/index.tsx

@@ -111,9 +111,12 @@ describe( 'UnitControl', () => {
 				<UnitControl className="hello" />
 			);
 
-			expect( withoutClassName.firstChild ).toMatchDiffSnapshot(
-				withClassName.firstChild
-			);
+			expect(
+				withoutClassName.querySelector( '.components-unit-control' )
+			).not.toHaveClass( 'hello' );
+			expect(
+				withClassName.querySelector( '.components-unit-control' )
+			).toHaveClass( 'hello' );
 		} );
 
 		it( 'should not render select, if units are disabled', () => {

package/src/utils/hooks/use-controlled-state.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -70,11 +70,14 @@ function useControlledState( currentState, options = defaultOptions ) {
 
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {(nextState: T) => void} */
-	const setState = ( nextState ) => {
-		if ( ! hasCurrentState ) {
-			setInternalState( nextState );
-		}
-	};
+	const setState = useCallback(
+		( nextState ) => {
+			if ( ! hasCurrentState ) {
+				setInternalState( nextState );
+			}
+		},
+		[ hasCurrentState ]
+	);
 	/* eslint-enable jsdoc/no-undefined-types */
 
 	return [ state, setState ];