@wordpress/components 21.3.0 → 22.1.0

package/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -58,46 +58,70 @@ function ToggleGroupControlOptionBase(
 		'ToggleGroupControlOptionBase'
 	);
 	const {
-		className,
 		isBlock = false,
+		isDeselectable = false,
+		size = 'default',
+		...otherContextProps /* context props for Ariakit Radio */
+	} = toggleGroupControlContext;
+	const {
+		className,
 		isIcon = false,
 		value,
 		children,
-		size = 'default',
 		showTooltip = false,
-		...radioProps
-	} = {
-		...toggleGroupControlContext,
-		...buttonProps,
-	};
+		...otherButtonProps
+	} = buttonProps;
 
-	const isActive = radioProps.state === value;
+	const isPressed = otherContextProps.state === value;
 	const cx = useCx();
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
-		styles.buttonView,
-		isIcon && styles.isIcon( { size } ),
-		className,
-		isActive && styles.buttonActive
+		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
+		className
 	);
 
+	const buttonOnClick = () => {
+		if ( isDeselectable && isPressed ) {
+			otherContextProps.setState( undefined );
+		} else {
+			otherContextProps.setState( value );
+		}
+	};
+
+	const commonProps = {
+		...otherButtonProps,
+		className: classes,
+		'data-value': value,
+		ref: forwardedRef,
+	};
+
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
+		<LabelView className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
-				text={ radioProps[ 'aria-label' ] }
+				text={ otherButtonProps[ 'aria-label' ] }
 			>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ radioProps[ 'aria-label' ] }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ children }</ButtonContentView>
-				</Radio>
+				{ isDeselectable ? (
+					<button
+						{ ...commonProps }
+						aria-pressed={ isPressed }
+						type="button"
+						onClick={ buttonOnClick }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</button>
+				) : (
+					<Radio
+						{ ...commonProps }
+						{
+							...otherContextProps /* these are only for Ariakit Radio */
+						}
+						as="button"
+						value={ value }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</Radio>
+				) }
 			</WithToolTip>
 		</LabelView>
 	);

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

@@ -8,7 +8,10 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
-import type { ToggleGroupControlProps } from '../types';
+import type {
+	ToggleGroupControlProps,
+	ToggleGroupControlOptionBaseProps,
+} from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -21,7 +24,15 @@ export const labelBlock = css`
 	flex: 1;
 `;
 
-export const buttonView = css`
+export const buttonView = ( {
+	isDeselectable,
+	isIcon,
+	isPressed,
+	size,
+}: Pick< ToggleGroupControlProps, 'isDeselectable' | 'size' > &
+	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
+		isPressed?: boolean;
+	} ) => css`
 	align-items: center;
 	appearance: none;
 	background: transparent;
@@ -53,22 +64,39 @@ export const buttonView = css`
 	&:active {
 		background: ${ CONFIG.toggleGroupControlBackgroundColor };
 	}
+
+	${ isDeselectable && deselectable }
+	${ isIcon && isIconStyles( { size } ) }
+	${ isPressed && pressed }
+`;
+
+const pressed = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;
+
+const deselectable = css`
+	color: ${ COLORS.gray[ 900 ] };
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px ${ COLORS.white },
+			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.ui.theme };
+		outline: 2px solid transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`
+	display: flex;
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
 `;
 
-export const separatorActive = css`
-	background: transparent;
-`;
-
-export const isIcon = ( {
-	size,
-}: {
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
-} ) => {
+const isIconStyles = ( {
+	size = 'default',
+}: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
 		'__unstable-large': '34px',
@@ -81,11 +109,3 @@ export const isIcon = ( {
 		padding-right: 0;
 	`;
 };
-
-export const buttonActive = css`
-	color: ${ COLORS.white };
-
-	&:active {
-		background: transparent;
-	}
-`;

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

@@ -9,7 +9,6 @@ import type { RadioStateReturn } from 'reakit';
  * Internal dependencies
  */
 import type { BaseControlProps } from '../base-control/types';
-import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
@@ -72,69 +71,75 @@ export type WithToolTipProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlProps = Omit<
-	FormElementProps< any >,
-	'defaultValue'
-> &
-	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		/**
-		 * Label for the form element.
-		 */
-		label: string;
-		/**
-		 * If true, the label will only be visible to screen readers.
-		 *
-		 * @default false
-		 */
-		hideLabelFromVision?: boolean;
-		/**
-		 * Determines if segments should be rendered with equal widths.
-		 *
-		 * @default false
-		 */
-		isAdaptiveWidth?: boolean;
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-		/**
-		 * Borderless style that may be preferred in some contexts.
-		 *
-		 * @default false
-		 */
-		__experimentalIsBorderless?: boolean;
-		/**
-		 * Callback when a segment is selected.
-		 */
-		onChange?: ( value: ReactText | undefined ) => void;
-		/**
-		 * The value of `ToggleGroupControl`
-		 */
-		value?: ReactText;
-		/**
-		 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
-		 * `ToggleGroupControlOptionIcon` components.
-		 */
-		children: ReactNode;
-		/**
-		 * The size variant of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
-	};
+export type ToggleGroupControlProps = Pick<
+	BaseControlProps,
+	'help' | '__nextHasNoMarginBottom'
+> & {
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Determines if segments should be rendered with equal widths.
+	 *
+	 * @default false
+	 */
+	isAdaptiveWidth?: boolean;
+	/**
+	 * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of
+	 * the available space. This is the recommended style when the options are text-based and not icons.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	/**
+	 * Whether an option can be deselected by clicking it again.
+	 *
+	 * @default false
+	 */
+	isDeselectable?: boolean;
+	/**
+	 * Callback when a segment is selected.
+	 */
+	onChange?: ( value: ReactText | undefined ) => void;
+	/**
+	 * The selected value.
+	 */
+	value?: ReactText;
+	/**
+	 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
+	 * `ToggleGroupControlOptionIcon` components.
+	 */
+	children: ReactNode;
+	/**
+	 * The size variant of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | '__unstable-large';
+};
 
-export type ToggleGroupControlContextProps = RadioStateReturn &
-	Pick< ToggleGroupControlProps, 'size' > & {
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-	};
+type ToggleGroupControlAsRadioContext = {
+	isDeselectable?: false;
+} & RadioStateReturn;
+
+type ToggleGroupControlAsButtonContext = { isDeselectable: true } & Pick<
+	RadioStateReturn,
+	'state' | 'setState'
+>;
+
+export type ToggleGroupControlContextProps = Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'size'
+> & {
+	baseId: string;
+} & ( ToggleGroupControlAsRadioContext | ToggleGroupControlAsButtonContext );
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
@@ -142,3 +147,11 @@ export type ToggleGroupControlBackdropProps = {
 	isAdaptiveWidth?: boolean;
 	state?: any;
 };
+
+export type ToggleGroupControlMainControlProps = Pick<
+	ToggleGroupControlProps,
+	'children' | 'isAdaptiveWidth' | 'label' | 'size'
+> & {
+	onChange: ( value: ReactText | undefined ) => void;
+	value?: ReactText;
+};

package/src/toolbar-dropdown-menu/index.js

@@ -26,7 +26,7 @@ function ToolbarDropdownMenu( props, ref ) {
 				<DropdownMenu
 					{ ...props }
 					popoverProps={ {
-						isAlternate: true,
+						variant: 'toolbar',
 						...props.popoverProps,
 					} }
 					toggleProps={ toolbarItemProps }

package/src/tools-panel/stories/index.js

@@ -497,7 +497,6 @@ export const WithConditionallyRenderedControl = () => {
 export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tools-panel/stories/tools-panel-with-item-group-slot.js

@@ -203,7 +203,6 @@ export const ToolsPanelWithItemGroupSlot = () => {
 };
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {

package/src/tools-panel/styles.ts

@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: var( --wp-admin-theme-color-darker-10 );
+	color: ${ COLORS.ui.themeDark10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;

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

@@ -108,11 +108,15 @@ export function useToolsPanelItem(
 	const menuGroup = isShownByDefault ? 'default' : 'optional';
 	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
+	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
-		if ( isResetting || ! hasMatchingPanel ) {
+		// We check whether this item is currently registered as items rendered
+		// via fills can persist through the parent panel being remounted.
+		// See: https://github.com/WordPress/gutenberg/pull/45673
+		if ( ! isRegistered || isResetting || ! hasMatchingPanel ) {
 			return;
 		}
 
@@ -126,6 +130,7 @@ export function useToolsPanelItem(
 	}, [
 		hasMatchingPanel,
 		isMenuItemChecked,
+		isRegistered,
 		isResetting,
 		isValueSet,
 		wasMenuItemChecked,

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

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

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

@@ -2,6 +2,8 @@
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>
-  child element
+  <div>
+    child element
+  </div>
 </div>
 `;

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

@@ -1,36 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      class="my-row"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        class="my-row"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
 
 exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;

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

@@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => {
 			</TreeGrid>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -97,7 +97,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowRight',
@@ -149,7 +149,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowLeft',
@@ -188,8 +188,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowDown',
@@ -210,8 +210,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 1' ).focus();
 
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'End',
@@ -232,8 +232,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',
@@ -254,8 +254,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 3' ).focus();
 
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
 				key: 'Home',
@@ -276,8 +276,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',

package/src/tree-grid/test/roving-tab-index.js

@@ -16,6 +16,6 @@ describe( 'RovingTabIndex', () => {
 			</RovingTabIndex>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/tree-grid/test/row.js

@@ -20,7 +20,7 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards other props to the rendered tr element', () => {
@@ -39,6 +39,6 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );