@wordpress/components 19.0.3 → 19.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE/C;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,oBAAY,6BAA6B,GAAG;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,CAAE,GAAG,CAAE,EACvB,cAAc,CACd,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAM,IAAI,CAAC;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,oBAAY,8BAA8B,GAAG,gBAAgB,GAAG;IAC/D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,+BAA+B,GAAG;IAC7C,YAAY,EAAE,gBAAgB,CAAE,WAAW,GAAG,SAAS,CAAE,CAAC;IAC1D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/toggle-group-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE/C;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,oBAAY,6BAA6B,GAAG;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,IAAI,CACzC,gBAAgB,CAAE,GAAG,CAAE,EACvB,cAAc,CACd,GAAG;IACH;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAM,IAAI,CAAC;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,oBAAY,8BAA8B,GAAG,gBAAgB,GAAG;IAC/D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,oBAAY,+BAA+B,GAAG;IAC7C,YAAY,EAAE,gBAAgB,CAAE,WAAW,GAAG,SAAS,CAAE,CAAC;IAC1D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC"}

package/build-types/tooltip/index.d.ts

@@ -5,11 +5,5 @@
  */
 export const TOOLTIP_DELAY: number;
 export default Tooltip;
-declare function Tooltip({ children, position, text, shortcut, delay, }: {
-    children: any;
-    position: any;
-    text: any;
-    shortcut: any;
-    delay?: number | undefined;
-}): any;
+declare function Tooltip(props: any): any;
 //# sourceMappingURL=index.d.ts.map

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAiEjC;;;;;;QAuIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAiEjC,0CAkIC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.0.3",
+	"version": "19.1.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6594e767659bd3289e633a17c44fdf6a4933194"
+	"gitHead": "49c7be0ff5dc493fc9e5a861e18273dd1f3fce8c"
 }

package/src/circular-option-picker/index.js

@@ -25,15 +25,17 @@ function Option( {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
-			className={ classnames(
-				className,
-				'components-circular-option-picker__option'
-			) }
+			className="components-circular-option-picker__option"
 			{ ...additionalProps }
 		/>
 	);
 	return (
-		<div className="components-circular-option-picker__option-wrapper">
+		<div
+			className={ classnames(
+				className,
+				'components-circular-option-picker__option-wrapper'
+			) }
+		>
 			{ tooltipText ? (
 				<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>
 			) : (

package/src/color-palette/index.js

@@ -135,6 +135,7 @@ export default function ColorPalette( {
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
+					contentClassName="components-color-palette__custom-color-dropdown-content"
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button

package/src/color-palette/style.scss

@@ -16,3 +16,12 @@
 	color: $white;
 	cursor: pointer;
 }
+
+.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
+	overflow: visible;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
+	border: none;
+	& > div {
+		padding: 0;
+	}
+}

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -26,6 +26,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
+  contentClassName="components-color-palette__custom-color-dropdown-content"
   key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
@@ -177,6 +178,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         data-wp-component="VStack"
       >
         <Dropdown
+          contentClassName="components-color-palette__custom-color-dropdown-content"
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}

package/src/date-time/test/time.js

@@ -47,13 +47,13 @@ describe( 'TimePicker', () => {
 		fireEvent.change( hoursInput, { target: { value: '12' } } );
 		fireEvent.blur( hoursInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:00:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:00:00' );
 		onChangeSpy.mockClear();
 
 		fireEvent.change( minutesInput, { target: { value: '35' } } );
 		fireEvent.blur( minutesInput );
 
-		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T12:35:00' );
+		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:35:00' );
 		onChangeSpy.mockClear();
 	} );
 
@@ -169,6 +169,36 @@ describe( 'TimePicker', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:00:00' );
 	} );
 
+	it( 'should allow to set the time correctly when the PM period is selected', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimePicker
+				currentTime="1986-10-18T11:00:00"
+				onChange={ onChangeSpy }
+				is12Hour
+			/>
+		);
+
+		const pmButton = screen.getByText( 'PM' );
+		fireEvent.click( pmButton );
+
+		const hoursInput = screen.getByLabelText( 'Hours' );
+		fireEvent.change( hoursInput, { target: { value: '6' } } );
+		fireEvent.blur( hoursInput );
+
+		// When clicking on 'PM', we expect the time to be 11pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			1,
+			'1986-10-18T23:00:00'
+		);
+		// When changing the hours to '6', we expect the time to be 6pm
+		expect( onChangeSpy ).toHaveBeenNthCalledWith(
+			2,
+			'1986-10-18T18:00:00'
+		);
+	} );
+
 	it( 'should truncate at the minutes on change', () => {
 		const onChangeSpy = jest.fn();
 

package/src/date-time/time.js

@@ -28,6 +28,10 @@ import TimeZone from './timezone';
  */
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
+function from12hTo24h( hours, isPm ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
 /**
  * <UpdateOnBlurAsIntegerField>
  * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.
@@ -117,8 +121,16 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 	}
 
 	function update( name, value ) {
+		// If the 12-hour format is being used and the 'PM' period is selected, then
+		// the incoming value (which ranges 1-12) should be increased by 12 to match
+		// the expected 24-hour format.
+		let adjustedValue = value;
+		if ( name === 'hours' && is12Hour ) {
+			adjustedValue = from12hTo24h( value, am === 'PM' );
+		}
+
 		// Clone the date and call the specific setter function according to `name`.
-		const newDate = date.clone()[ name ]( value );
+		const newDate = date.clone()[ name ]( adjustedValue );
 		changeDate( newDate );
 	}
 
@@ -132,11 +144,7 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 			const newDate = date
 				.clone()
-				.hours(
-					value === 'PM'
-						? ( ( parsedHours % 12 ) + 12 ) % 24
-						: parsedHours % 12
-				);
+				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
 
 			changeDate( newDate );
 		};

package/src/duotone-picker/duotone-picker.js

@@ -19,6 +19,7 @@ import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 
 function DuotonePicker( {
+	clearable = true,
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
@@ -69,11 +70,13 @@ function DuotonePicker( {
 				);
 			} ) }
 			actions={
-				<CircularOptionPicker.ButtonAction
-					onClick={ () => onChange( undefined ) }
-				>
-					{ __( 'Clear' ) }
-				</CircularOptionPicker.ButtonAction>
+				!! clearable && (
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => onChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</CircularOptionPicker.ButtonAction>
+				)
 			}
 		>
 			{ ! disableCustomColors && ! disableCustomDuotone && (

package/src/font-size-picker/index.js

@@ -186,6 +186,7 @@ function FontSizePicker(
 								value={ option.value }
 								label={ option.label }
 								aria-label={ option.name }
+								showTooltip={ true }
 							/>
 						) ) }
 					</ToggleGroupControl>

package/src/index.js

@@ -36,7 +36,7 @@ export {
 } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
-export { default as __experimentalColorEdit } from './color-edit';
+export { default as __experimentalPaletteEdit } from './palette-edit';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
 export { ColorPicker } from './color-picker';

package/src/mobile/global-styles-context/test/fixtures/theme.native.js

@@ -23,7 +23,7 @@ export const GLOBAL_STYLES_PALETTE = [
 ];
 
 export const GLOBAL_STYLES_GRADIENTS = {
-	core: [
+	default: [
 		{
 			name: 'Vivid cyan blue to vivid purple',
 			gradient:
@@ -138,7 +138,7 @@ export const PARSED_GLOBAL_STYLES = {
 export const RAW_FEATURES = {
 	color: {
 		palette: {
-			core: [
+			default: [
 				{
 					name: 'Black',
 					slug: 'black',
@@ -174,7 +174,7 @@ export const RAW_FEATURES = {
 			],
 		},
 		gradients: {
-			core: [
+			default: [
 				{
 					name: 'Vivid cyan blue to vivid purple',
 					gradient:
@@ -204,7 +204,7 @@ export const RAW_FEATURES = {
 	},
 	typography: {
 		fontSizes: {
-			core: [
+			default: [
 				{
 					name: 'Small',
 					slug: 'small',

package/src/mobile/global-styles-context/utils.native.js

@@ -233,10 +233,10 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 
 export function getMappedValues( features, palette ) {
 	const typography = features?.typography;
-	const colors = { ...palette?.theme, ...palette?.user };
+	const colors = { ...palette?.theme, ...palette?.custom };
 	const fontSizes = {
 		...typography?.fontSizes?.theme,
-		...typography?.fontSizes?.user,
+		...typography?.fontSizes?.custom,
 	};
 	const mappedValues = {
 		color: {
@@ -265,7 +265,7 @@ function normalizeFontSizes( fontSizes ) {
 	const normalizedFontSizes = {};
 	const dimensions = Dimensions.get( 'window' );
 
-	[ 'core', 'theme', 'user' ].forEach( ( key ) => {
+	[ 'default', 'theme', 'user' ].forEach( ( key ) => {
 		if ( fontSizes[ key ] ) {
 			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
 				( fontSizeObject ) => {

package/src/navigation/item/index.js

@@ -15,7 +15,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import Button from '../../button';
 import { useNavigationContext } from '../context';
-import { ItemUI } from '../styles/navigation-styles';
+import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
@@ -29,6 +29,7 @@ export default function NavigationItem( props ) {
 		navigateToMenu,
 		onClick = noop,
 		title,
+		icon,
 		hideIfTargetMenuEmpty,
 		isText,
 		...restProps
@@ -62,7 +63,7 @@ export default function NavigationItem( props ) {
 
 		onClick( event );
 	};
-	const icon = isRTL() ? chevronLeft : chevronRight;
+	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
 	const baseProps = children ? props : { ...props, onClick: undefined };
 	const itemProps = isText
 		? restProps
@@ -72,12 +73,18 @@ export default function NavigationItem( props ) {
 		<NavigationItemBase { ...baseProps } className={ classes }>
 			{ children || (
 				<ItemUI { ...itemProps }>
+					{ icon && (
+						<ItemIconUI>
+							<Icon icon={ icon } />
+						</ItemIconUI>
+					) }
+
 					<NavigationItemBaseContent
 						title={ title }
 						badge={ badge }
 					/>
 
-					{ navigateToMenu && <Icon icon={ icon } /> }
+					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
 				</ItemUI>
 			) }
 		</NavigationItemBase>

package/src/navigation/stories/more-examples.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress } from '@wordpress/icons';
+import { Icon, wordpress, home } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,6 +33,7 @@ export function MoreExamplesStory() {
 				</NavigationGroup>
 				<NavigationGroup title="Items with Unusual Features">
 					<NavigationItem
+						icon={ home }
 						item="item-sub-menu"
 						navigateToMenu="sub-menu"
 						title="Sub-Menu with Custom Back Label"

package/src/navigation/styles/navigation-styles.js

@@ -184,6 +184,11 @@ export const ItemUI = styled.div`
 	opacity: 0.7;
 `;
 
+export const ItemIconUI = styled.span`
+	display: flex;
+	margin-right: ${ space( 2 ) };
+`;
+
 export const ItemBadgeUI = styled.span`
 	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
 	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };