@wordpress/components 19.0.4 → 19.1.2

package/build-types/flyout/styles.d.ts

@@ -8,7 +8,7 @@ export declare const FlyoutContentView: import("@emotion/styled").StyledComponen
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const CardView: import("@emotion/styled").StyledComponent<import("../surface/types").Props & {
-    size?: import("../card/types").SizeOptions | undefined;
+    size?: import("../card/types").SizeOptions | "extraSmall" | undefined;
 } & {
     elevation?: number | undefined;
     isBorderless?: boolean | undefined;

package/build-types/higher-order/with-focus-outside/index.d.ts

@@ -0,0 +1,3 @@
+declare var _default: import("@wordpress/compose/build-types/utils/create-higher-order-component").HigherOrderComponent<any, any>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build-types/higher-order/with-focus-outside/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-focus-outside/index.js"],"names":[],"mappings":""}

package/build-types/modal/aria-helper.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Hides all elements in the body element from screen-readers except
+ * the provided element and elements that should not be hidden from
+ * screen-readers.
+ *
+ * The reason we do this is because `aria-modal="true"` currently is bugged
+ * in Safari, and support is spotty in other browsers overall. In the future
+ * we should consider removing these helper functions in favor of
+ * `aria-modal="true"`.
+ *
+ * @param {Element} unhiddenElement The element that should not be hidden.
+ */
+export function hideApp(unhiddenElement: Element): void;
+/**
+ * Determines if the passed element should not be hidden from screen readers.
+ *
+ * @param {HTMLElement} element The element that should be checked.
+ *
+ * @return {boolean} Whether the element should not be hidden from screen-readers.
+ */
+export function elementShouldBeHidden(element: HTMLElement): boolean;
+/**
+ * Makes all elements in the body that have been hidden by `hideApp`
+ * visible again to screen-readers.
+ */
+export function showApp(): void;
+//# sourceMappingURL=aria-helper.d.ts.map

package/build-types/modal/aria-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aria-helper.d.ts","sourceRoot":"","sources":["../../src/modal/aria-helper.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;GAWG;AACH,yCAFW,OAAO,QAiBjB;AAED;;;;;;GAMG;AACH,+CAJW,WAAW,GAEV,OAAO,CAUlB;AAED;;;GAGG;AACH,gCASC"}

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

@@ -0,0 +1,3 @@
+declare var _default: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<any>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modal/index.js"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.js"],"names":[],"mappings":";AAujBA;;;;;;;;;;;;;;;;;;;;;;;;;0DAA+C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/popover/index.js"],"names":[],"mappings":";AA2jBA;;;;;;;;;;;;;;;;;;;;;;;;;0DAA+C"}

package/build-types/style-provider/index.d.ts

@@ -0,0 +1,5 @@
+export default function StyleProvider({ children, document }: {
+    children: any;
+    document: any;
+}): JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/build-types/style-provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/style-provider/index.js"],"names":[],"mappings":"AAsBA;;;uBAQC"}

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAuD9D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,iCAAiC,8FAGtC,CAAC;AAEF,eAAe,iCAAiC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,6BAA6B,EAAoB,MAAM,UAAU,CAAC;AA+EhF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,iCAAiC,8FAGtC,CAAC;AAEF,eAAe,iCAAiC,CAAC"}

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

@@ -14,6 +14,29 @@ export declare type ToggleGroupControlOptionProps = {
      * to specify a different label for assistive technologies.
      */
     label: string;
+    /**
+     * 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.
+     *
+     * @default false
+     */
+    showTooltip?: boolean;
+};
+export declare type WithToolTipProps = {
+    /**
+     * React children
+     */
+    children: ReactNode;
+    /**
+     * Label for the Tooltip component.
+     */
+    text: string;
+    /**
+     * Whether to wrap the control option in a Tooltip component.
+     *
+     * @default false
+     */
+    showTooltip?: boolean;
 };
 export declare type ToggleGroupControlProps = Omit<FormElementProps<any>, 'defaultValue'> & {
     /**

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.4",
+	"version": "19.1.2",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ca22e8852fcc91889510e417bdaa180ad60f8dac"
+	"gitHead": "34b76b2f9397215e5afb8443f5b3073c83913102"
 }

package/src/card/styles.js

@@ -88,6 +88,10 @@ export const rounded = css`
 	border-radius: ${ CONFIG.cardBorderRadius };
 `;
 
+const xSmallCardPadding = css`
+	padding: ${ CONFIG.cardPaddingXSmall };
+`;
+
 export const cardPaddings = {
 	large: css`
 		padding: ${ CONFIG.cardPaddingLarge };
@@ -98,9 +102,10 @@ export const cardPaddings = {
 	small: css`
 		padding: ${ CONFIG.cardPaddingSmall };
 	`,
-	xSmall: css`
-		padding: ${ CONFIG.cardPaddingXSmall };
-	`,
+	xSmall: xSmallCardPadding,
+	// The `extraSmall` size is not officially documented, but the following styles
+	// are kept for legacy reasons to support older values of the `size` prop.
+	extraSmall: xSmallCardPadding,
 };
 
 export const shady = css`

package/src/card/test/__snapshots__/index.js.snap

@@ -141,7 +141,7 @@ Snapshot Diff:
         </div>
         <div
 -         class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-1mzdgj0-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmall em57xhy0"
++         class="components-flex components-card__footer components-card-footer css-1t7s584-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -784,6 +784,11 @@ Snapshot Diff:
   </div>
 `;
 
+exports[`Card Card component should support the legacy extraSmall value for the size prop as an alias for the xSmall value 1`] = `
+Snapshot Diff:
+Compared values have no visual difference.
+`;
+
 exports[`Card Card component should warn when the isElevated prop is passed 1`] = `
 .emotion-0 {
   background-color: #fff;

package/src/card/test/index.js

@@ -143,6 +143,26 @@ describe( 'Card', () => {
 			expect( withoutBorder ).toMatchDiffSnapshot( withBorder );
 		} );
 
+		it( 'should support the legacy extraSmall value for the size prop as an alias for the xSmall value', () => {
+			const { container: containerXSmall } = render(
+				<Card size="xSmall">
+					<CardHeader>Header</CardHeader>
+					<CardBody>Body</CardBody>
+					<CardFooter>Footer</CardFooter>
+				</Card>
+			);
+			const { container: containerExtraSmall } = render(
+				<Card size="extraSmall">
+					<CardHeader>Header</CardHeader>
+					<CardBody>Body</CardBody>
+					<CardFooter>Footer</CardFooter>
+				</Card>
+			);
+			expect( containerXSmall ).toMatchDiffSnapshot(
+				containerExtraSmall
+			);
+		} );
+
 		describe( 'CardHeader', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardHeader>Header</CardHeader> );

package/src/card/types.ts

@@ -9,6 +9,7 @@ import type { CSSProperties } from 'react';
  */
 import type { Props as SurfaceProps } from '../surface/types';
 
+type DeprecatedSizeOptions = 'extraSmall';
 export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';
 
 type SizeableProps = {
@@ -17,7 +18,7 @@ type SizeableProps = {
 	 *
 	 * @default 'medium'
 	 */
-	size?: SizeOptions;
+	size?: SizeOptions | DeprecatedSizeOptions;
 };
 
 export type Props = SurfaceProps &

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/circular-option-picker/style.scss

@@ -9,6 +9,7 @@ $color-palette-circle-spacing: 12px;
 	.components-circular-option-picker__custom-clear-wrapper {
 		display: flex;
 		justify-content: flex-end;
+		margin-top: $grid-unit-15;
 	}
 
 	.components-circular-option-picker__swatches {

package/src/color-palette/index.js

@@ -5,6 +5,7 @@ import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -117,6 +118,7 @@ export default function ColorPalette( {
 	onChange,
 	value,
 	__experimentalHasMultipleOrigins = false,
+	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const Component = __experimentalHasMultipleOrigins
@@ -135,6 +137,12 @@ export default function ColorPalette( {
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
 				<Dropdown
+					contentClassName={ classnames(
+						'components-color-palette__custom-color-dropdown-content',
+						{
+							'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,
+						}
+					) }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button

package/src/color-palette/style.scss

@@ -16,3 +16,24 @@
 	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;
+	border-radius: $radius-block-ui;
+	& > div {
+		padding: 0;
+	}
+	.react-colorful__saturation {
+		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-block-ui;
+	}
+}
+
+@include break-medium() {
+	.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
+	}
+}

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/color-picker/README.md

@@ -22,32 +22,34 @@ function Example() {
 
 ## Props
 
-### `color`
-
-**Type**: `string`
+### `color`: `string`
 
 The current color value to display in the picker. Must be a hex or hex8 string.
 
-### `onChange`
+- Required: No
 
-**Type**: `(hex8Color: string) => void`
+### `onChange`: `(hex8Color: string) => void`
 
 Fired when the color changes. Always passes a hex8 color string.
 
-### `enableAlpha`
+- Required: No
 
-**Type**: `boolean`
+### `enableAlpha`: `boolean`
 
 Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
-### `defaultValue`
+- Required: No
+- Default: `false`
 
-**Type**: `string | undefined`
+### `defaultValue`: `string | undefined`
 
 An optional default value to use for the color picker.
 
-### `copyFormat`
+- Required: No
+- Default: `'#fff'`
 
-**Type**: `'hex' | 'hsl' | 'rgb' | undefined`
+### `copyFormat`: `'hex' | 'hsl' | 'rgb' | undefined`
 
 The format to copy when clicking the displayed color format.
+
+- Required: No

package/src/color-picker/component.tsx

@@ -11,6 +11,7 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
+import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -32,6 +33,7 @@ import {
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
+import { useControlledValue } from '../utils/hooks';
 
 import type { ColorType } from './types';
 
@@ -57,7 +59,7 @@ const ColorPicker = (
 ) => {
 	const {
 		enableAlpha = false,
-		color,
+		color: colorProp,
 		onChange,
 		defaultValue = '#fff',
 		copyFormat,
@@ -65,15 +67,23 @@ const ColorPicker = (
 	} = useContextSystem( props, 'ColorPicker' );
 
 	// Use a safe default value for the color and remove the possibility of `undefined`.
+	const [ color, setColor ] = useControlledValue( {
+		onChange,
+		value: colorProp,
+		defaultValue,
+	} );
+
 	const safeColordColor = useMemo( () => {
-		return color ? colord( color ) : colord( defaultValue );
-	}, [ color, defaultValue ] );
+		return colord( color );
+	}, [ color ] );
+
+	const debouncedSetColor = useDebounce( setColor );
 
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			onChange( nextValue.toHex() );
+			debouncedSetColor( nextValue.toHex() );
 		},
-		[ onChange ]
+		[ debouncedSetColor ]
 	);
 
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );

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

@@ -41,6 +41,12 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
 
+const sleep = ( ms ) => {
+	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
+	jest.advanceTimersByTime( ms + 1 );
+	return promise;
+};
+
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -87,6 +93,9 @@ describe( 'ColorPicker', () => {
 				{ pageX: 10, pageY: 10 }
 			);
 
+			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+			await sleep( 1 );
+
 			expect( onChangeComplete ).toHaveBeenCalledWith(
 				legacyColorMatcher
 			);
@@ -108,6 +117,9 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
+		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+		await sleep( 1 );
+
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
 		);
@@ -138,6 +150,9 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
+		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+		await sleep( 1 );
+
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
 		);

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/gradient-picker/index.js

@@ -110,9 +110,11 @@ export default function GradientPicker( {
 	const clearGradient = useCallback( () => onChange( undefined ), [
 		onChange,
 	] );
-	const Component = __experimentalHasMultipleOrigins
-		? MultipleOrigin
-		: SingleOrigin;
+	const Component =
+		__experimentalHasMultipleOrigins && gradients?.length
+			? MultipleOrigin
+			: SingleOrigin;
+
 	return (
 		<Component
 			className={ className }
@@ -122,7 +124,8 @@ export default function GradientPicker( {
 			onChange={ onChange }
 			value={ value }
 			actions={
-				clearable && (
+				clearable &&
+				( gradients?.length || ! disableCustomGradients ) && (
 					<CircularOptionPicker.ButtonAction
 						onClick={ clearGradient }
 					>