@wordpress/components 40.0.0 → 40.1.0

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -19,6 +19,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
+		disabled,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -56,6 +57,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			isBlock: ! isAdaptiveWidth,
 			isDeselectable: true,
 			setSelectedElement,
+			disabled: Boolean( disabled ),
 		} ),
 		[
 			baseId,
@@ -63,6 +65,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 			setSelectedValue,
 			isAdaptiveWidth,
 			setSelectedElement,
+			disabled,
 		]
 	);
 
@@ -74,6 +77,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 				ref={ forwardedRef }
 				role="group"
 				id={ baseId }
+				aria-disabled={ disabled || undefined }
 			>
 				{ children }
 			</View>

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -21,6 +21,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		value: valueProp,
 		id: idProp,
 		setSelectedElement,
+		disabled,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -78,6 +79,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 			// @ts-expect-error - This is wrong and we should fix it.
 			setValue,
 			setSelectedElement,
+			disabled: Boolean( disabled ),
 		} ),
 		[
 			baseId,
@@ -86,6 +88,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 			selectedValue,
 			setSelectedElement,
 			setValue,
+			disabled,
 		]
 	);
 
@@ -98,6 +101,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 				{ ...otherProps }
 				id={ baseId }
 				ref={ forwardedRef }
+				disabled={ disabled || undefined }
 			>
 				{ children }
 			</Ariakit.RadioGroup>

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

@@ -25,6 +25,7 @@ function UnconnectedToggleGroupControl(
 		isAdaptiveWidth = false,
 		isBlock = false,
 		isDeselectable = false,
+		disabled = false,
 		id,
 		label,
 		hideLabelFromVision = false,
@@ -83,6 +84,7 @@ function UnconnectedToggleGroupControl(
 				onChange={ onChange }
 				ref={ refs }
 				value={ value }
+				disabled={ disabled }
 			>
 				{ children }
 			</MainControl>

package/src/toggle-group-control/toggle-group-control/style.module.scss

@@ -30,7 +30,7 @@
 
 		border-radius: var(--wpds-border-radius-sm);
 		top: -1px;
-		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the indicator's physical offset. */
+		/* stylelint-disable-next-line logical-css/require-logical-properties -- Preserve the indicator's physical offset. */
 		left: -2px;
 		width: calc(calc(var(--selected-width, 0) * 1px) + 2px);
 		height: calc(calc(var(--selected-height, 0) * 1px) + 2px);
@@ -38,6 +38,12 @@
 		/* Hide when dimensions are unset (0) */
 		opacity: min(1, max(0, var(--selected-width, 0), var(--selected-height, 0)));
 	}
+
+	&[aria-disabled="true"] {
+		&::before {
+			opacity: calc(min(1, max(0, var(--selected-width, 0), var(--selected-height, 0))) * 0.4);
+		}
+	}
 }
 
 .has-border {
@@ -45,7 +51,7 @@
 }
 
 .has-enclosing-borders {
-	&:hover {
+	&:hover:not([aria-disabled="true"]) {
 		border-color: $components-color-gray-400;
 	}
 

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -14,11 +14,7 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl
-			label="my label"
-			value="vertical"
-			isBlock
-		>
+		<ToggleGroupControl label="my label" value="vertical" isBlock>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"
@@ -49,3 +45,10 @@ The value of the `ToggleGroupControlOption`.
 Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
 
 -   Required: No
+
+### `disabled`: `boolean`
+
+If true, this option is unselectable.
+
+-   Required: No
+-   Default: `false`

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

@@ -3,6 +3,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import { useToggleGroupControlContext } from '../context';
 
 function UnforwardedToggleGroupControlOption(
 	props: WordPressComponentProps<
@@ -12,6 +13,7 @@ function UnforwardedToggleGroupControlOption(
 	>,
 	ref: ForwardedRef< any >
 ) {
+	useToggleGroupControlContext( 'ToggleGroupControlOption' );
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;
 	return (

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

@@ -63,6 +63,9 @@ function ToggleGroupControlOptionBase(
 		...otherButtonProps
 	} = buttonProps;
 
+	const isOptionDisabled = Boolean(
+		toggleGroupControlContext.disabled || disabled
+	);
 	const isPressed = toggleGroupControlContext.value === value;
 	const labelClasses = clsx(
 		styles.label,
@@ -109,7 +112,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
-						disabled={ disabled }
+						disabled={ isOptionDisabled }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -50,3 +50,10 @@ Icon displayed as the content of the option. Usually one of the icons from the `
 The text to accessibly label the icon option. Will also be shown in a tooltip.
 
 -   Required: Yes
+
+### `disabled`: `boolean`
+
+If true, this option is unselectable.
+
+-   Required: No
+-   Default: `false`

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

@@ -3,6 +3,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import { useToggleGroupControlContext } from '../context';
 import Icon from '../../icon';
 
 function UnforwardedToggleGroupControlOptionIcon(
@@ -13,6 +14,7 @@ function UnforwardedToggleGroupControlOptionIcon(
 	>,
 	ref: ForwardedRef< any >
 ) {
+	useToggleGroupControlContext( 'ToggleGroupControlOptionIcon' );
 	const { icon, label, ...restProps } = props;
 	return (
 		<ToggleGroupControlOptionBase

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

@@ -11,6 +11,12 @@ export type ToggleGroupControlOptionBaseProps = {
 	 */
 	isIcon?: boolean;
 	value: string | number;
+	/**
+	 * Whether this option is unselectable.
+	 *
+	 * @default false
+	 */
+	disabled?: boolean;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
 	 * show the aria-label or the label prop text.
@@ -22,7 +28,7 @@ export type ToggleGroupControlOptionBaseProps = {
 
 export type ToggleGroupControlOptionIconProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'value'
+	'value' | 'disabled'
 > & {
 	/**
 	 * Icon displayed as the content of the option. Usually one of the icons from
@@ -37,7 +43,7 @@ export type ToggleGroupControlOptionIconProps = Pick<
 
 export type ToggleGroupControlOptionProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'value' | 'showTooltip'
+	'value' | 'showTooltip' | 'disabled'
 > & {
 	/**
 	 * Label for the option. If needed, the `aria-label` prop can be used in addition
@@ -111,6 +117,8 @@ export type ToggleGroupControlProps = Pick<
 	children: ReactNode;
 	/**
 	 * Whether the control is disabled.
+	 *
+	 * @default false
 	 */
 	disabled?: boolean;
 	/**
@@ -137,10 +145,11 @@ export type ToggleGroupControlContextProps = {
 	value: ToggleGroupControlProps[ 'value' ];
 	setValue: ( newValue: string | number | undefined ) => void;
 	setSelectedElement: ( element: HTMLElement | undefined ) => void;
+	disabled: boolean;
 };
 
 export type ToggleGroupControlMainControlProps = Pick<
 	ToggleGroupControlProps,
-	'children' | 'isAdaptiveWidth' | 'label' | 'onChange' | 'value'
+	'children' | 'isAdaptiveWidth' | 'label' | 'onChange' | 'value' | 'disabled'
 > &
 	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;

package/src/toolbar/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Toolbar, ToolbarButton } from '..';
 

package/src/toolbar/test/{toolbar-group.tsx → toolbar-group.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { wordpress } from '@wordpress/icons';
 import { ToolbarGroup } from '..';
@@ -87,7 +88,7 @@ describe( 'ToolbarGroup', () => {
 		} );
 
 		it( 'should call the clickHandler on click.', () => {
-			const clickHandler = jest.fn();
+			const clickHandler = vi.fn();
 			const controls = [
 				{
 					icon: wordpress,