@wordpress/components 32.1.0 → 32.2.1-next.v.0

package/build-types/private-apis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AA6BA,eAAO,MAAM,WAAW,IAAK,CAAC"}
+{"version":3,"file":"private-apis.d.ts","sourceRoot":"","sources":["../src/private-apis.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW,IAAK,CAAC"}

package/build-types/range-control/styles/range-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACX,cAAc,EAEd,UAAU,EACV,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,MAAM,UAAU,CAAC;AAalB,KAAK,SAAS,GAAG,IAAI,CAAE,iBAAiB,EAAE,uBAAuB,CAAE,CAAC;AACpE,eAAO,MAAM,IAAI;;;qHAYhB,CAAC;AAKF,eAAO,MAAM,OAAO;;;wHAWnB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAK7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAK5B,CAAC;AAYF,eAAO,MAAM,IAAI;;;;;;;aA5CZ,CAAC;;;;;2GAyDL,CAAC;AAYF,eAAO,MAAM,KAAK;;;wHAiBjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAShB,CAAC;AAQF,eAAO,MAAM,SAAS;;;4HAcrB,CAAC;AAWF,eAAO,MAAM,YAAY;;;wHA2BxB,CAAC;AAoBF,eAAO,MAAM,KAAK;;;wHAYjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;kHAatB,CAAC;AAiCF,eAAO,MAAM,OAAO;;;0HAoBnB,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;UAUvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;2GAW9B,CAAC"}
+{"version":3,"file":"range-control-styles.d.ts","sourceRoot":"","sources":["../../../src/range-control/styles/range-control-styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACX,cAAc,EAEd,UAAU,EACV,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,iBAAiB,EACjB,MAAM,UAAU,CAAC;AAalB,KAAK,SAAS,GAAG,IAAI,CAAE,iBAAiB,EAAE,uBAAuB,CAAE,CAAC;AACpE,eAAO,MAAM,IAAI;;;qHAYhB,CAAC;AAKF,eAAO,MAAM,OAAO;;;wHAWnB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAK7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAK5B,CAAC;AAcF,eAAO,MAAM,IAAI;;;;;;;aA9CZ,CAAC;;;;;2GA0DL,CAAC;AAcF,eAAO,MAAM,KAAK;;;wHAgBjB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC;AAEF,eAAO,MAAM,IAAI;;;2GAShB,CAAC;AAQF,eAAO,MAAM,SAAS;;;4HAcrB,CAAC;AAcF,eAAO,MAAM,YAAY;;;wHA2BxB,CAAC;AAwBF,eAAO,MAAM,KAAK;;;wHAYjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;kHAatB,CAAC;AAiCF,eAAO,MAAM,OAAO;;;0HAoBnB,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;UAUvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;2GAW9B,CAAC"}

package/build-types/text/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/text/styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,IAAI,2CAMhB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAEjB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAEpB,CAAC;AAEF,eAAO,MAAM,WAAW,2CAEvB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAEjB,CAAC;AAEF,eAAO,MAAM,eAAe,2CAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,2CAErB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/text/styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,IAAI,2CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAEjB,CAAC;AAEF,eAAO,MAAM,QAAQ,2CAEpB,CAAC;AAEF,eAAO,MAAM,WAAW,2CAEvB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAEjB,CAAC;AAEF,eAAO,MAAM,eAAe,2CAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,2CAErB,CAAC"}

package/build-types/toggle-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toggle-control/index.tsx"],"names":[],"mappings":"AA2FA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa;;;;0SAAyC,CAAC;AAGpE,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toggle-control/index.tsx"],"names":[],"mappings":"AA6FA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa;;;;0SAAyC,CAAC;AAGpE,eAAe,aAAa,CAAC"}

package/build-types/validated-form-controls/components/toggle-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAqCrD,eAAO,MAAM,sBAAsB;;;;4XAElC,CAAC"}
+{"version":3,"file":"toggle-control.d.ts","sourceRoot":"","sources":["../../../src/validated-form-controls/components/toggle-control.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAiCrD,eAAO,MAAM,sBAAsB;;;;4XAElC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.1.0",
+	"version": "32.2.1-next.v.0+642962a6d",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -64,24 +64,24 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.39.0",
-		"@wordpress/base-styles": "^6.15.0",
-		"@wordpress/compose": "^7.39.0",
-		"@wordpress/date": "^5.39.0",
-		"@wordpress/deprecated": "^4.39.0",
-		"@wordpress/dom": "^4.39.0",
-		"@wordpress/element": "^6.39.0",
-		"@wordpress/escape-html": "^3.39.0",
-		"@wordpress/hooks": "^4.39.0",
-		"@wordpress/html-entities": "^4.39.0",
-		"@wordpress/i18n": "^6.12.0",
-		"@wordpress/icons": "^11.6.0",
-		"@wordpress/is-shallow-equal": "^5.39.0",
-		"@wordpress/keycodes": "^4.39.0",
-		"@wordpress/primitives": "^4.39.0",
-		"@wordpress/private-apis": "^1.39.0",
-		"@wordpress/rich-text": "^7.39.0",
-		"@wordpress/warning": "^3.39.0",
+		"@wordpress/a11y": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/base-styles": "^6.15.1-next.v.0+642962a6d",
+		"@wordpress/compose": "^7.39.1-next.v.0+642962a6d",
+		"@wordpress/date": "^5.39.1-next.v.0+642962a6d",
+		"@wordpress/deprecated": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/dom": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/element": "^6.39.1-next.v.0+642962a6d",
+		"@wordpress/escape-html": "^3.39.1-next.v.0+642962a6d",
+		"@wordpress/hooks": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/html-entities": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/i18n": "^6.12.1-next.v.0+642962a6d",
+		"@wordpress/icons": "^11.6.1-next.v.0+642962a6d",
+		"@wordpress/is-shallow-equal": "^5.39.1-next.v.0+642962a6d",
+		"@wordpress/keycodes": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/primitives": "^4.39.1-next.v.0+642962a6d",
+		"@wordpress/private-apis": "^1.39.1-next.v.0+642962a6d",
+		"@wordpress/rich-text": "^7.39.1-next.v.0+642962a6d",
+		"@wordpress/warning": "^3.39.1-next.v.0+642962a6d",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -107,7 +107,7 @@
 		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.39.0",
+		"@wordpress/jest-console": "^8.39.1-next.v.0+642962a6d",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "eee1cfb1472f11183e40fb77465a5f13145df7ad"
+	"gitHead": "2de56f23b200b6dc4b1feda4408613ad088d160a"
 }

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -5,7 +5,6 @@ exports[`props should render correctly 1`] = `
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   color: var(--wp-components-color-foreground, #1e1e1e);
   font-size: calc(1.95 * 13px);

package/src/private-apis.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { useDrag } from '@use-gesture/react';
+
 /**
  * Internal dependencies
  */
@@ -42,6 +47,7 @@ lock( privateApis, {
 	DateRangeCalendar,
 	TZDate,
 	Picker,
+	useDrag,
 	ValidatedInputControl,
 	ValidatedCheckboxControl,
 	ValidatedComboboxControl,

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

@@ -78,17 +78,18 @@ export const AfterIconWrapper = styled.span`
 `;
 
 const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
-	let background = railColor || '';
-
-	if ( disabled ) {
-		background = COLORS.ui.backgroundDisabled;
-	}
+	return css`
+		background: ${ disabled
+			? COLORS.ui.backgroundDisabled
+			: railColor || COLORS.theme.gray[ 300 ] };
 
-	return css( { background } );
+		@media ( forced-colors: active ) {
+			background: GrayText;
+		}
+	`;
 };
 
 export const Rail = styled.span`
-	background-color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -103,17 +104,18 @@ export const Rail = styled.span`
 `;
 
 const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
-	let background = trackColor || 'currentColor';
-
-	if ( disabled ) {
-		background = COLORS.gray[ 400 ];
-	}
+	return css`
+		background: ${ disabled
+			? COLORS.theme.gray[ 400 ]
+			: trackColor || 'currentColor' };
 
-	return css( { background } );
+		@media ( forced-colors: active ) {
+			background: ${ disabled ? 'GrayText' : 'CanvasText' };
+		}
+	`;
 };
 
 export const Track = styled.span`
-	background-color: currentColor;
 	border-radius: ${ CONFIG.radiusFull };
 	height: ${ railHeight }px;
 	pointer-events: none;
@@ -153,12 +155,12 @@ export const Mark = styled.span`
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 	return css( {
-		color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],
+		color: isFilled ? COLORS.theme.gray[ 700 ] : COLORS.theme.gray[ 300 ],
 	} );
 };
 
 export const MarkLabel = styled.span`
-	color: ${ COLORS.gray[ 300 ] };
+	color: ${ COLORS.theme.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
 	top: 8px;
@@ -173,14 +175,17 @@ export const MarkLabel = styled.span`
 	${ markLabelFill };
 `;
 
-const thumbColor = ( { disabled }: ThumbProps ) =>
-	disabled
-		? css`
-				background-color: ${ COLORS.gray[ 400 ] };
-		  `
-		: css`
-				background-color: ${ COLORS.theme.accent };
-		  `;
+const thumbColor = ( { disabled }: ThumbProps ) => {
+	return css`
+		background: ${ disabled
+			? COLORS.theme.gray[ 400 ]
+			: COLORS.theme.accent };
+
+		@media ( forced-colors: active ) {
+			background: ${ disabled ? 'GrayText' : 'CanvasText' };
+		}
+	`;
+};
 
 export const ThumbWrapper = styled.span`
 	align-items: center;
@@ -224,6 +229,10 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 					width: ${ thumbSize + 8 }px;
 					top: -4px;
 					left: -4px;
+
+					@media ( forced-colors: active ) {
+						background: GrayText;
+					}
 				}
 		  `
 		: '';

package/src/text/styles.ts

@@ -12,7 +12,6 @@ export const Text = css`
 	color: ${ COLORS.theme.foreground };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
-	text-wrap: balance; /* Fallback for Safari. */
 	text-wrap: pretty;
 `;
 

package/src/text/test/__snapshots__/index.tsx.snap

@@ -22,7 +22,6 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -55,7 +54,6 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

package/src/toggle-control/index.tsx

@@ -28,6 +28,7 @@ function UnforwardedToggleControl(
 		className,
 		onChange,
 		disabled,
+		...additionalProps
 	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -74,6 +75,7 @@ function UnforwardedToggleControl(
 					aria-describedby={ describedBy }
 					disabled={ disabled }
 					ref={ ref }
+					{ ...additionalProps }
 				/>
 				<FlexBlock
 					as="label"

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

@@ -69,7 +69,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -410,7 +410,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -658,7 +658,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -993,7 +993,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;

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

@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.theme.foregroundInverted };
+		background: ${ COLORS.theme.gray[ 100 ] };
 		border: 1px solid ${ COLORS.theme.gray[ 700 ] };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.

package/src/validated-form-controls/components/toggle-control.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef, useEffect } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -25,14 +25,6 @@ const UnforwardedValidatedToggleControl = (
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
 
-	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
-	// so we need to set it manually.
-	useEffect( () => {
-		if ( validityTargetRef.current ) {
-			validityTargetRef.current.required = required ?? false;
-		}
-	}, [ required ] );
-
 	return (
 		<ControlWithError
 			required={ required }
@@ -40,7 +32,11 @@ const UnforwardedValidatedToggleControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<ToggleControl ref={ mergedRefs } { ...restProps } />
+			<ToggleControl
+				ref={ mergedRefs }
+				required={ required }
+				{ ...restProps }
+			/>
 		</ControlWithError>
 	);
 };