@wordpress/components 27.3.0 → 27.5.0

package/src/checkbox-control/style.scss

@@ -1,5 +1,16 @@
-$checkbox-input-size: 20px;
-$checkbox-input-size-sm: 24px; // Width & height for small viewports.
+.components-checkbox-control {
+	// Careful, these CSS vars have experimental overrides in Data Views (packages/dataviews/src/style.scss).
+	--checkbox-input-size: 24px; // Width & height for small viewports.
+
+	@include break-small() {
+		--checkbox-input-size: 20px;
+	}
+}
+
+.components-checkbox-control__label {
+	// Ensure label is aligned with checkbox along X axis
+	line-height: var(--checkbox-input-size);
+}
 
 .components-checkbox-control__input[type="checkbox"] {
 	@include checkbox-control;
@@ -14,13 +25,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	padding: 0 !important;
 	text-align: center;
 	vertical-align: top;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		height: $checkbox-input-size;
-		width: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	height: var(--checkbox-input-size);
 
 	appearance: none;
 	transition: 0.1s border-color ease-in-out;
@@ -49,31 +55,34 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: 12px;
+	margin-right: $grid-unit-15;
 	vertical-align: middle;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		width: $checkbox-input-size;
-		height: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	aspect-ratio: 1;
+	flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
+	--checkmark-size: var(--checkbox-input-size);
+
 	fill: $white;
 	cursor: pointer;
 	position: absolute;
-	left: 0;
-	top: 0;
-	width: $button-size-small;
-	height: $button-size-small;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: var(--checkmark-size);
+	height: var(--checkmark-size);
+	user-select: none;
+	pointer-events: none;
 
 	@include break-small() {
-		left: -2px;
-		top: -2px;
+		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
-	user-select: none;
-	pointer-events: none;
+}
+
+.components-checkbox-control__help {
+	display: inline-block;
+	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
 }

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,32 +5,33 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,13 +8,27 @@
-        <span
-          class="components-checkbox-control__input-container"
-        >
-          <input
-            class="components-checkbox-control__input"
--           id="inspector-checkbox-control-6"
-+           id="inspector-checkbox-control-7"
-            type="checkbox"
-            value="1"
-+         />
-+         <svg
-+           aria-hidden="true"
-+           class="components-checkbox-control__indeterminate"
-+           focusable="false"
-+           height="24"
-+           role="presentation"
-+           viewBox="0 0 24 24"
-+           width="24"
-+           xmlns="http://www.w3.org/2000/svg"
-+         >
-+           <path
-+             d="M7 11.5h10V13H7z"
-            />
-+         </svg>
-        </span>
+@@ -13,14 +13,28 @@
+          <span
+            class="components-checkbox-control__input-container"
+          >
+            <input
+              class="components-checkbox-control__input"
+-             id="inspector-checkbox-control-6"
++             id="inspector-checkbox-control-7"
+              type="checkbox"
+              value="1"
++           />
++           <svg
++             aria-hidden="true"
++             class="components-checkbox-control__indeterminate"
++             focusable="false"
++             height="24"
++             role="presentation"
++             viewBox="0 0 24 24"
++             width="24"
++             xmlns="http://www.w3.org/2000/svg"
++           >
++             <path
++               d="M7 11.5h10V13H7z"
+              />
++           </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>

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

@@ -86,6 +86,11 @@ describe( 'CheckboxControl', () => {
 				containerIndeterminate
 			);
 		} );
+
+		it( 'should associate the `help` text accessibly', () => {
+			render( <CheckboxControl help="Help text" /> );
+			expect( getInput() ).toHaveAccessibleDescription( 'Help text' );
+		} );
 	} );
 
 	describe( 'Value', () => {

package/src/color-palette/index.native.js

@@ -61,6 +61,7 @@ function ColorPalette( {
 
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
+	const delayedScrollRef = useRef();
 
 	const mergedColors = [
 		...new Set(
@@ -216,11 +217,11 @@ function ColorPalette( {
 	}
 
 	function scrollToEndWithDelay() {
-		const delayedScroll = setTimeout( () => {
-			scrollViewRef.current.scrollToEnd();
+		delayedScrollRef.current = setTimeout( () => {
+			scrollViewRef?.current.scrollToEnd();
 		}, ANIMATION_DURATION );
 		return () => {
-			clearTimeout( delayedScroll );
+			clearTimeout( delayedScrollRef.current );
 		};
 	}
 

package/src/color-picker/hex-input.tsx

@@ -21,7 +21,9 @@ import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
-		if ( ! nextValue ) return;
+		if ( ! nextValue ) {
+			return;
+		}
 		const hexValue = nextValue.startsWith( '#' )
 			? nextValue
 			: '#' + nextValue;

package/src/color-picker/hue-picker.native.js

@@ -72,8 +72,12 @@ export default class HuePicker extends Component {
 	}
 
 	normalizeValue( value ) {
-		if ( value < 0 ) return 0;
-		if ( value > 1 ) return 1;
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
 		return value;
 	}
 

package/src/color-picker/index.native.js

@@ -82,9 +82,15 @@ function ColorPicker( {
 	const currentColor = combineToHex();
 
 	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
-		if ( h !== undefined ) setHue( h );
-		if ( s !== undefined ) setSaturation( s );
-		if ( v !== undefined ) setValue( v );
+		if ( h !== undefined ) {
+			setHue( h );
+		}
+		if ( s !== undefined ) {
+			setSaturation( s );
+		}
+		if ( v !== undefined ) {
+			setValue( v );
+		}
 		setColor( combineToHex( h, s, v ) );
 	};
 

package/src/color-picker/saturation-picker.native.js

@@ -56,8 +56,12 @@ export default class SaturationValuePicker extends Component {
 	}
 
 	normalizeValue( value ) {
-		if ( value < 0 ) return 0;
-		if ( value > 1 ) return 1;
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
 		return value;
 	}
 

package/src/color-picker/use-deprecated-props.ts

@@ -25,11 +25,17 @@ function isLegacyProps( props: any ): props is LegacyProps {
 function getColorFromLegacyProps(
 	color: LegacyProps[ 'color' ]
 ): string | undefined {
-	if ( color === undefined ) return;
+	if ( color === undefined ) {
+		return;
+	}
 
-	if ( typeof color === 'string' ) return color;
+	if ( typeof color === 'string' ) {
+		return color;
+	}
 
-	if ( color.hex ) return color.hex;
+	if ( color.hex ) {
+		return color.hex;
+	}
 
 	return undefined;
 }

package/src/combobox-control/README.md

@@ -110,8 +110,8 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 
 ## Related components
 
--   Like this component, but without a search input, the `CustomSelectControl` component.
+-   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.
 
--   To select one option from a set, when you want to show all the available options at once, use the `Radio` component.
--   To select one or more items from a set, use the `CheckboxControl` component.
--   To toggle a single setting on or off, use the `ToggleControl` component.
+-   To select one option from a set, when you want to show all the available options at once, use the [`RadioControl`](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/) component.
+-   To select one or more items from a set, use the [`CheckboxControl`](https://developer.wordpress.org/block-editor/reference-guides/components/checkbox-control/) component.
+-   To toggle a single setting on or off, use the [`ToggleControl`](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/) component.

package/src/context/context-connect.ts

@@ -116,7 +116,9 @@ function _contextConnect<
 export function getConnectNamespace(
 	Component: ReactChild | undefined | {}
 ): string[] {
-	if ( ! Component ) return [];
+	if ( ! Component ) {
+		return [];
+	}
 
 	let namespaces = [];
 
@@ -145,7 +147,9 @@ export function hasConnectNamespace(
 	Component: ReactNode,
 	match: string[] | string
 ): boolean {
-	if ( ! Component ) return false;
+	if ( ! Component ) {
+		return false;
+	}
 
 	if ( typeof match === 'string' ) {
 		return getConnectNamespace( Component ).includes( match );

package/src/custom-select-control/index.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
  */
 import { Icon, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -101,18 +101,6 @@ export default function CustomSelectControl( props ) {
 		stateReducer,
 	} );
 
-	const [ isFocused, setIsFocused ] = useState( false );
-
-	function handleOnFocus( e ) {
-		setIsFocused( true );
-		onFocus?.( e );
-	}
-
-	function handleOnBlur( e ) {
-		setIsFocused( false );
-		onBlur?.( e );
-	}
-
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -168,7 +156,6 @@ export default function CustomSelectControl( props ) {
 			) }
 			<InputBase
 				__next40pxDefaultSize={ __next40pxDefaultSize }
-				isFocused={ isOpen || isFocused }
 				size={ size }
 				suffix={ <SelectControlChevronDown /> }
 			>
@@ -176,8 +163,8 @@ export default function CustomSelectControl( props ) {
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					as="button"
-					onFocus={ handleOnFocus }
-					onBlur={ handleOnBlur }
+					onFocus={ onFocus }
+					onBlur={ onBlur }
 					selectSize={ size }
 					__next40pxDefaultSize={ __next40pxDefaultSize }
 					{ ...getToggleButtonProps( {
@@ -196,46 +183,49 @@ export default function CustomSelectControl( props ) {
 							</span>
 						) }
 				</SelectControlSelect>
+				<div className="components-custom-select-control__menu-wrapper">
+					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+					<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
+						{ isOpen &&
+							items.map( ( item, index ) => (
+								// eslint-disable-next-line react/jsx-key
+								<li
+									{ ...getItemProps( {
+										item,
+										index,
+										key: item.key,
+										className: classnames(
+											item.className,
+											'components-custom-select-control__item',
+											{
+												'is-highlighted':
+													index === highlightedIndex,
+												'has-hint':
+													!! item.__experimentalHint,
+												'is-next-40px-default-size':
+													__next40pxDefaultSize,
+											}
+										),
+										style: item.style,
+									} ) }
+								>
+									{ item.name }
+									{ item.__experimentalHint && (
+										<span className="components-custom-select-control__item-hint">
+											{ item.__experimentalHint }
+										</span>
+									) }
+									{ item === selectedItem && (
+										<Icon
+											icon={ check }
+											className="components-custom-select-control__item-icon"
+										/>
+									) }
+								</li>
+							) ) }
+					</ul>
+				</div>
 			</InputBase>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
-				{ isOpen &&
-					items.map( ( item, index ) => (
-						// eslint-disable-next-line react/jsx-key
-						<li
-							{ ...getItemProps( {
-								item,
-								index,
-								key: item.key,
-								className: classnames(
-									item.className,
-									'components-custom-select-control__item',
-									{
-										'is-highlighted':
-											index === highlightedIndex,
-										'has-hint': !! item.__experimentalHint,
-										'is-next-40px-default-size':
-											__next40pxDefaultSize,
-									}
-								),
-								style: item.style,
-							} ) }
-						>
-							{ item.name }
-							{ item.__experimentalHint && (
-								<span className="components-custom-select-control__item-hint">
-									{ item.__experimentalHint }
-								</span>
-							) }
-							{ item === selectedItem && (
-								<Icon
-									icon={ check }
-									className="components-custom-select-control__item-icon"
-								/>
-							) }
-						</li>
-					) ) }
-			</ul>
 		</div>
 	);
 }

package/src/custom-select-control/style.scss

@@ -14,6 +14,12 @@
 	margin-left: 10px;
 }
 
+.components-custom-select-control__menu-wrapper {
+	position: absolute;
+	min-width: 100%;
+	bottom: 0;
+}
+
 .components-custom-select-control__menu {
 	// Hide when collapsed.
 	&[aria-hidden="true"] {

package/src/custom-select-control-v2/README.md

@@ -1,9 +1,5 @@
 # CustomSelectControlV2
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 Used to render a customizable select control component.
 
 ## Development guidelines

package/src/custom-select-control-v2/legacy-component/index.tsx

@@ -30,7 +30,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
-			if ( ! onChange ) return;
+			if ( ! onChange ) {
+				return;
+			}
 
 			// Executes the logic in a microtask after the popup is closed.
 			// This is simply to ensure the isOpen state matches that in Downshift.

package/src/custom-select-control-v2/stories/default.story.tsx

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2/Default',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170

package/src/custom-select-control-v2/stories/legacy.story.tsx

@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },

package/src/custom-select-control-v2/types.ts

@@ -187,4 +187,11 @@ export type CustomSelectItemProps = {
 	 * used if left `undefined`.
 	 */
 	children?: React.ReactNode;
+	/**
+	 * If true, the item will be disabled.
+	 *
+	 * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.
+	 * @default false
+	 */
+	disabled?: boolean;
 };

package/src/dimension-control/stories/index.story.tsx

@@ -29,10 +29,10 @@ export default {
 				mobile,
 			},
 		},
-		parameters: {
-			controls: { expanded: true },
-			docs: { canvas: { sourceState: 'shown' } },
-		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
 	},
 } as Meta< typeof DimensionControl >;