@wordpress/components 29.11.0 → 29.13.1-next.719a03cbe.0

package/src/calendar/utils/use-localization-props.ts

@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { Modifiers, BaseProps } from '../types';
+
+function isLocaleRTL( localeCode: string ) {
+	const localeObj = new Intl.Locale( localeCode );
+	if ( 'getTextInfo' in localeObj ) {
+		// @ts-expect-error - getTextInfo is not typed yet
+		// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
+		return localeObj.getTextInfo().direction === 'rtl';
+	}
+	return [
+		'ar', // Arabic
+		'he', // Hebrew
+		'fa', // Persian (Farsi)
+		'ur', // Urdu
+		'ps', // Pashto
+		'syr', // Syriac
+		'dv', // Divehi
+		'ku', // Kurdish (Sorani)
+		'yi', // Yiddish
+	].includes( localeObj.language );
+}
+
+/**
+ * Returns localization props for the calendar components.
+ *
+ * Notes:
+ * - the following props should be intended as defaults, and should
+ *   be overridden by consumer props if listed as public props.
+ * - It is possible for the translated strings to use a different locale
+ *   than the formatted dates and the computed `dir`. This is because the
+ *   translation function doesn't expose the locale used for the translated
+ *   strings, meaning that the dates are formatted using the `locale` prop.
+ *   For a correct localized experience, consumers should make sure that
+ *   translation context and `locale` prop are consistent.
+ * @param props
+ * @param props.locale
+ * @param props.timeZone
+ * @param props.mode
+ */
+export const useLocalizationProps = ( {
+	locale,
+	timeZone,
+	mode,
+}: {
+	locale: NonNullable< BaseProps[ 'locale' ] >;
+	timeZone: BaseProps[ 'timeZone' ];
+	mode: 'single' | 'range';
+} ) => {
+	return useMemo( () => {
+		// ie. April 2025
+		const monthNameFormatter = new Intl.DateTimeFormat( locale.code, {
+			year: 'numeric',
+			month: 'long',
+			timeZone,
+		} );
+		// ie. M, T, W, T, F, S, S
+		const weekdayNarrowFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'narrow',
+			timeZone,
+		} );
+		// ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
+		const weekdayLongFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'long',
+			timeZone,
+		} );
+		// ie. Monday, April 29, 2025
+		const fullDateFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+			timeZone,
+		} );
+
+		// Note: the following props should be intended as defaults, and should
+		// be overridden by consumer props if listed as public props.
+		return {
+			'aria-label':
+				mode === 'single'
+					? __( 'Date calendar' )
+					: __( 'Date range calendar' ),
+			labels: {
+				/**
+				 * The label for the month grid.
+				 * @param date
+				 */
+				labelGrid: ( date: Date ) => monthNameFormatter.format( date ),
+				/**
+				 * The label for the gridcell, when the calendar is not interactive.
+				 * @param date
+				 * @param modifiers
+				 */
+				labelGridcell: (
+					date: Date,
+					/** The modifiers for the day. */
+					modifiers?: Modifiers
+				) => {
+					const formattedDate = fullDateFormatter.format( date );
+					let label = formattedDate;
+					if ( modifiers?.today ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( 'Today, %s' ),
+							formattedDate
+						);
+					}
+					return label;
+				},
+				/** The label for the "next month" button. */
+				labelNext: () => __( 'Go to the Next Month' ),
+				/** The label for the "previous month" button. */
+				labelPrevious: () => __( 'Go to the Previous Month' ),
+				/**
+				 * The label for the day button.
+				 * @param date
+				 * @param modifiers
+				 */
+				labelDayButton: (
+					date: Date,
+					/** The modifiers for the day. */
+					modifiers?: Modifiers
+				) => {
+					const formattedDate = fullDateFormatter.format( date );
+					let label = formattedDate;
+					if ( modifiers?.today ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( 'Today, %s' ),
+							formattedDate
+						);
+					}
+					if ( modifiers?.selected ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( '%s, selected' ),
+							formattedDate
+						);
+					}
+					return label;
+				},
+				/**
+				 * The label for the weekday.
+				 * @param date
+				 */
+				labelWeekday: ( date: Date ) =>
+					weekdayLongFormatter.format( date ),
+			},
+			locale,
+			dir: isLocaleRTL( locale.code ) ? 'rtl' : 'ltr',
+			formatters: {
+				formatWeekdayName: ( date: Date ) => {
+					return weekdayNarrowFormatter.format( date );
+				},
+				formatCaption: ( date: Date ) => {
+					return monthNameFormatter.format( date );
+				},
+			},
+			timeZone,
+		} as const;
+	}, [ locale, timeZone, mode ] );
+};

package/src/circular-option-picker/stories/index.story.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useState, createContext, useContext } from '@wordpress/element';
+import { createContext, useContext, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -152,7 +152,7 @@ WithDropdownLinkAction.args = {
 	actions: (
 		<CircularOptionPicker.DropdownLinkAction
 			dropdownProps={ {
-				popoverProps: { position: 'top right' },
+				popoverProps: { placement: 'top-end' },
 				renderContent: () => (
 					<div>This is an example of a DropdownLinkAction.</div>
 				),

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -58,7 +58,7 @@ function ControlPointButton( {
 				aria-label={ sprintf(
 					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
 					__(
-						'Gradient control point at position %1$s%% with color code %2$s.'
+						'Gradient control point at position %1$d%% with color code %2$s.'
 					),
 					position,
 					color

package/src/custom-select-control-v2/custom-select.tsx

@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { createContext, useCallback, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -43,8 +43,11 @@ function defaultRenderSelectedValue(
 	if ( Array.isArray( value ) ) {
 		return value.length === 1
 			? value[ 0 ]
-			: // translators: %s: number of items selected (it will always be 2 or more items)
-			  sprintf( __( '%s items selected' ), value.length );
+			: sprintf(
+					// translators: %d: number of items selected (it will always be 2 or more items)
+					_n( '%d item selected', '%d items selected', value.length ),
+					value.length
+			  );
 	}
 
 	return value;

package/src/date-time/date/index.tsx

@@ -344,7 +344,7 @@ function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
 		);
 	} else if ( isSelected ) {
 		return sprintf(
-			// translators: %s: The calendar date.
+			// translators: 1: The calendar date.
 			__( '%1$s. Selected' ),
 			localizedDate
 		);

package/src/form-file-upload/index.tsx

@@ -58,18 +58,12 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
-	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
-	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
-	// This can be removed once the Chromium fix is in the stable channel.
-	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
-	const isSafari =
-		globalThis.window?.navigator.userAgent.includes( 'Safari' ) &&
-		! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&
-		! globalThis.window?.navigator.userAgent.includes( 'Chromium' );
-	const compatAccept =
-		! isSafari && !! accept?.includes( 'image/*' )
-			? `${ accept }, image/heic, image/heif`
-			: accept;
+
+	// iOS browsers may not reliably handle 'audio/*' in the accept attribute.
+	// Adding explicit audio MIME types improves compatibility across all devices.
+	const compatAccept = accept?.includes( 'audio/*' )
+		? `${ accept }, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm`
+		: accept;
 
 	return (
 		<div className="components-form-file-upload">

package/src/form-token-field/index.tsx

@@ -241,6 +241,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			case 'Escape':
 				preventDefault = handleEscapeKey( event );
 				break;
+			case 'Tab':
+				preventDefault = handleTabKey( event );
+				break;
 			default:
 				break;
 		}
@@ -372,17 +375,25 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		return true; // PreventDefault.
 	}
 
-	function handleEscapeKey( event: KeyboardEvent ) {
+	function collapseSuggestionsList( event: KeyboardEvent ) {
 		if ( event.target instanceof HTMLInputElement ) {
 			setIncompleteTokenValue( event.target.value );
 			setIsExpanded( false );
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}
+	}
 
+	function handleEscapeKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
 		return true; // PreventDefault.
 	}
 
+	function handleTabKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
+		return false; // Do not prevent the default behavior.
+	}
+
 	function handleCommaKey() {
 		if ( inputHasValidValue() ) {
 			addNewToken( incompleteTokenValue );

package/src/form-token-field/token.tsx

@@ -47,7 +47,7 @@ export default function Token( {
 	const transformedValue = displayTransform( value );
 	const termPositionAndCount = sprintf(
 		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
-		__( '%1$s (%2$s of %3$s)' ),
+		__( '%1$s (%2$d of %3$d)' ),
 		transformedValue,
 		termPosition,
 		termsCount

package/src/index.ts

@@ -57,6 +57,7 @@ export {
 	CardHeader,
 	CardMedia,
 } from './card';
+export { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalPaletteEdit } from './palette-edit';

package/src/mobile/bottom-sheet/cell.native.js

@@ -304,13 +304,13 @@ class BottomSheetCell extends Component {
 			}
 			return ! help
 				? sprintf(
-						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
+						/* translators: accessibility text. Inline textinput title and value. %1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
 						label,
 						value
 				  ) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
 				: sprintf(
-						/* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
+						/* translators: accessibility text. Inline textinput title, value and help text. %1: Cell title, %2: cell value, , %3: cell help. */
 						_x( '%1$s, %2$s, %3$s', 'inline textinput cell' ),
 						label,
 						value,

package/src/mobile/image/index.native.js

@@ -282,7 +282,7 @@ const ImageComponent = ( {
 				accessible
 				disabled={ ! isSelected }
 				accessibilityLabel={ alt }
-				accessibilityHint={ __( 'Double tap and hold to edit' ) }
+				accessibilityHint={ __( 'Double tap to view larger.' ) }
 				accessibilityRole="imagebutton"
 				key={ url }
 				style={ imageContainerStyles }

package/src/mobile/link-picker/index.native.js

@@ -135,7 +135,7 @@ export const LinkPicker = ( {
 					<BottomSheet.LinkSuggestionItemCell
 						accessible
 						accessibilityLabel={ sprintf(
-							/* translators: Copy URL from the clipboard, https://sample.url */
+							/* translators: %s: Copy URL from the clipboard, https://sample.url */
 							__( 'Copy URL from the clipboard, %s' ),
 							clipboardUrl
 						) }

package/src/navigation/menu/menu-title-search.tsx

@@ -77,7 +77,7 @@ function MenuTitleSearch( {
 	const placeholder = sprintf(
 		/* translators: placeholder for menu search box. %s: menu title */
 		__( 'Search %s' ),
-		title?.toLowerCase()
+		title?.toLowerCase() || ''
 	).trim();
 
 	return (

package/src/palette-edit/index.tsx

@@ -122,8 +122,8 @@ export function getNameAndSlugForPosition(
 
 	return {
 		name: sprintf(
-			/* translators: %s: is an id for a custom color */
-			__( 'Color %s' ),
+			/* translators: %d: is an id for a custom color */
+			__( 'Color %d' ),
 			position
 		),
 		slug: `${ slugPrefix }color-${ position }`,
@@ -223,7 +223,7 @@ function Option< T extends PaletteElement >( {
 					aria-label={ sprintf(
 						// translators: %s is a color or gradient name, e.g. "Red".
 						__( 'Edit: %s' ),
-						element.name.trim().length ? element.name : value
+						element.name.trim().length ? element.name : value || ''
 					) }
 					style={ { padding: 0 } }
 				>
@@ -267,7 +267,7 @@ function Option< T extends PaletteElement >( {
 								__( 'Remove color: %s' ),
 								element.name.trim().length
 									? element.name
-									: value
+									: value || ''
 							) }
 							onClick={ onRemove }
 						/>

package/src/select-control/style.scss

@@ -2,9 +2,3 @@
 	outline: 0;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
-
-@media (max-width: #{ ($break-medium) }) {
-	.components-base-control .components-base-control__field .components-select-control__input {
-		font-size: 16px;
-	}
-}

package/src/style.scss

@@ -13,6 +13,7 @@
 @import "./badge/styles.scss";
 @import "./button-group/style.scss";
 @import "./button/style.scss";
+@import "./calendar/style.scss";
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
 @import "./palette-edit/style.scss";