@wordpress/components 19.3.0 → 19.4.1

package/build-types/unit-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,qBAAqB,GAAG,KAAK,CAAE,iBAAiB,CAAE,GAAG,KAAK,CAAC;AAEvE,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;CACb,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,qBAAqB,GAAG,KAAK,CAAE,iBAAiB,CAAE,GAAG,KAAK,CAAC;AAEvE,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;CACb,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -8,7 +8,7 @@ declare namespace _default {
     export const borderWidth: string;
     export const borderWidthFocus: string;
     export const borderWidthTab: string;
-    export const spinnerSize: string;
+    export const spinnerSize: number;
     export const fontSize: string;
     export const fontSizeH1: string;
     export const fontSizeH2: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.3.0",
+	"version": "19.4.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,20 +36,20 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
-		"@wordpress/a11y": "^3.3.0",
-		"@wordpress/compose": "^5.1.0",
-		"@wordpress/date": "^4.3.0",
-		"@wordpress/deprecated": "^3.3.0",
-		"@wordpress/dom": "^3.3.0",
-		"@wordpress/element": "^4.1.0",
-		"@wordpress/hooks": "^3.3.0",
-		"@wordpress/i18n": "^4.3.0",
-		"@wordpress/icons": "^6.2.0",
-		"@wordpress/is-shallow-equal": "^4.3.0",
-		"@wordpress/keycodes": "^3.3.0",
-		"@wordpress/primitives": "^3.1.0",
-		"@wordpress/rich-text": "^5.1.0",
-		"@wordpress/warning": "^2.3.0",
+		"@wordpress/a11y": "^3.3.1",
+		"@wordpress/compose": "^5.1.1",
+		"@wordpress/date": "^4.3.1",
+		"@wordpress/deprecated": "^3.3.1",
+		"@wordpress/dom": "^3.3.1",
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/hooks": "^3.3.1",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/icons": "^7.0.0",
+		"@wordpress/is-shallow-equal": "^4.3.1",
+		"@wordpress/keycodes": "^3.3.1",
+		"@wordpress/primitives": "^3.1.1",
+		"@wordpress/rich-text": "^5.1.1",
+		"@wordpress/warning": "^2.3.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -66,7 +66,6 @@
 		"react-resize-aware": "^3.1.0",
 		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
-		"rememo": "^3.0.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -76,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
+	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
 }

package/src/base-field/hook.js

@@ -50,7 +50,7 @@ export function useBaseField( props ) {
 				isInline && styles.inline,
 				className
 			),
-		[ className, controlGroupStyles, hasError, isInline, isSubtle ]
+		[ className, controlGroupStyles, cx, hasError, isInline, isSubtle ]
 	);
 
 	return {

package/src/button/deprecated.js

@@ -14,6 +14,7 @@ function IconButton( { labelPosition, size, tooltip, label, ...props }, ref ) {
 	deprecated( 'wp.components.IconButton', {
 		since: '5.4',
 		alternative: 'wp.components.Button',
+		version: '6.2',
 	} );
 
 	return (

package/src/button/index.js

@@ -48,6 +48,7 @@ function useDeprecatedProps( {
 		deprecated( 'Button isDefault prop', {
 			since: '5.4',
 			alternative: 'variant="secondary"',
+			version: '6.2',
 		} );
 
 		computedVariant ??= 'secondary';

package/src/card/card/component.js

@@ -38,7 +38,7 @@ function Card( props, forwardedRef ) {
 
 	const elevationClassName = useMemo(
 		() => cx( css( { borderRadius: elevationBorderRadius } ) ),
-		[ elevationBorderRadius ]
+		[ cx, elevationBorderRadius ]
 	);
 
 	const contextProviderValue = useMemo( () => {

package/src/card/card/hook.js

@@ -61,7 +61,7 @@ export function useCard( props ) {
 			isRounded && styles.rounded,
 			className
 		);
-	}, [ className, isBorderless, isRounded ] );
+	}, [ className, cx, isBorderless, isRounded ] );
 
 	const surfaceProps = useSurface( { ...otherProps, className: classes } );
 

package/src/card/card-body/hook.js

@@ -35,7 +35,7 @@ export function useCardBody( props ) {
 				'components-card__body',
 				className
 			),
-		[ className, isShady, size ]
+		[ className, cx, isShady, size ]
 	);
 
 	return {

package/src/card/card-divider/hook.js

@@ -30,7 +30,7 @@ export function useCardDivider( props ) {
 				'components-card__divider',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

package/src/card/card-footer/hook.js

@@ -38,7 +38,7 @@ export function useCardFooter( props ) {
 				'components-card__footer',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-header/hook.js

@@ -37,7 +37,7 @@ export function useCardHeader( props ) {
 				'components-card__header',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className, cx, isBorderless, isShady, size ]
 	);
 
 	return {

package/src/card/card-media/hook.js

@@ -27,7 +27,7 @@ export function useCardMedia( props ) {
 				'components-card__media',
 				className
 			),
-		[ className ]
+		[ className, cx ]
 	);
 
 	return {

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

package/src/color-indicator/index.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */

package/src/color-palette/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /**
  * External dependencies
  */

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

@@ -391,7 +391,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                           fill="#000"
                           focusable={false}
                           height={24}
-                          role="img"
                           viewBox="0 0 24 24"
                           width={24}
                           xmlns="http://www.w3.org/2000/svg"

package/src/color-picker/color-display.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
 
 /**
  * Internal dependencies

package/src/color-picker/component.tsx

@@ -73,7 +73,7 @@ const ColorPicker = (
 	} );
 
 	const safeColordColor = useMemo( () => {
-		return colord( color );
+		return colord( color || '' );
 	}, [ color ] );
 
 	const debouncedSetColor = useDebounce( setColor );

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

@@ -83,6 +83,8 @@ function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
 	if ( props.color.hex ) {
 		return props.color.hex;
 	}
+
+	return undefined;
 }
 
 const transformColorStringToLegacyColor = memoize(

package/src/combobox-control/stories/index.js

@@ -266,7 +266,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl() {
+function CountryCodeComboboxControl( { allowReset } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -276,9 +276,13 @@ function CountryCodeComboboxControl() {
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
+				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = () => <CountryCodeComboboxControl />;
+export const _default = CountryCodeComboboxControl.bind( {} );
+_default.args = {
+	allowReset: false,
+};

package/src/combobox-control/style.scss

@@ -40,7 +40,7 @@ input.components-combobox-control__input[type="text"] {
 
 .components-combobox-control__reset.components-button {
 	display: flex;
-	height: $grid-unit-30;
-	min-width: $grid-unit-30;
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
 	padding: 0;
 }

package/src/date-time/README.md

@@ -28,7 +28,7 @@ const MyDateTimePicker = () => {
 			is12Hour={ true }
 		/>
 	);
-}
+};
 ```
 
 ## Props
@@ -52,7 +52,7 @@ The function called when a new date or time has been selected. It is passed the
 
 ### is12Hour
 
-Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.
+Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed to the default format `DD-MM-YYYY`).
 
 -   Type: `bool`
 -   Required: No
@@ -69,5 +69,5 @@ A callback function which receives a Date object representing a day as an argume
 
 A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
 
-- Type: `Function`
-- Required: No
+-   Type: `Function`
+-   Required: No

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

@@ -278,7 +278,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex < dayInputIndex ).toBe( true );
+		expect( monthInputIndex > dayInputIndex ).toBe( true );
 
 		rerender(
 			<form aria-label="form">
@@ -299,7 +299,7 @@ describe( 'TimePicker', () => {
 			screen.getByLabelText( 'Day' )
 		);
 
-		expect( monthInputIndex > dayInputIndex ).toBe( true );
+		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {

package/src/date-time/time.js

@@ -196,13 +196,13 @@ export function TimePicker( { is12Hour, currentTime, onChange } ) {
 
 	const dayMonthFormat = is12Hour ? (
 		<>
-			{ dayFormat }
 			{ monthFormat }
+			{ dayFormat }
 		</>
 	) : (
 		<>
-			{ monthFormat }
 			{ dayFormat }
+			{ monthFormat }
 		</>
 	);
 

package/src/dropdown/index.js

@@ -27,19 +27,20 @@ function useObservableState( initialState, onStateChange ) {
 	];
 }
 
-export default function Dropdown( {
-	renderContent,
-	renderToggle,
-	position = 'bottom right',
-	className,
-	contentClassName,
-	expandOnMobile,
-	headerTitle,
-	focusOnMount,
-	popoverProps,
-	onClose,
-	onToggle,
-} ) {
+export default function Dropdown( props ) {
+	const {
+		renderContent,
+		renderToggle,
+		position = 'bottom right',
+		className,
+		contentClassName,
+		expandOnMobile,
+		headerTitle,
+		focusOnMount,
+		popoverProps,
+		onClose,
+		onToggle,
+	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 

package/src/elevation/hook.js

@@ -112,6 +112,7 @@ export function useElevation( props ) {
 		active,
 		borderRadius,
 		className,
+		cx,
 		focus,
 		hover,
 		isInteractive,

package/src/flex/flex/hook.js

@@ -126,6 +126,7 @@ export function useFlex( props ) {
 	}, [
 		align,
 		className,
+		cx,
 		direction,
 		expanded,
 		gap,

package/src/grid/hook.js

@@ -71,6 +71,7 @@ export default function useGrid( props ) {
 		alignment,
 		className,
 		columnGap,
+		cx,
 		gap,
 		gridTemplateColumns,
 		gridTemplateRows,

package/src/item-group/item/hook.ts

@@ -48,7 +48,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 				spacedAround && styles.spacedAround,
 				className
 			),
-		[ as, className, size, spacedAround ]
+		[ as, className, cx, size, spacedAround ]
 	);
 
 	const wrapperClassName = cx( styles.itemWrapper );

package/src/item-group/stories/index.js

@@ -145,7 +145,7 @@ const ItemWithChevron = ( {
 
 	const itemClassName = useMemo(
 		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className ]
+		[ alwaysVisible, className, cx ]
 	);
 
 	const chevronIconClassName = useMemo(
@@ -155,7 +155,7 @@ const ItemWithChevron = ( {
 				fill: currentColor;
 				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
 			` ),
-		[ isRtlLayout ]
+		[ cx, isRtlLayout ]
 	);
 
 	return (

package/src/mobile/inserter-button/index.native.js

@@ -10,14 +10,13 @@ import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { sparkles } from '@wordpress/icons';
 import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-
+import sparkles from './sparkles';
 class MenuItem extends Component {
 	constructor() {
 		super( ...arguments );

package/src/mobile/inserter-button/sparkles.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sparkles = (
+	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M10 11c-1.588-.479-4-.91-4-.91s2-.241 4-.454c1.8-.191 3.365-.502 4-3.181C14.635 3.775 15 1 15 1s.365 2.775 1 5.455c.635 2.679 2 2.969 4 3.181 2 .213 4 .455 4 .455s-2.412.43-4 .909c-1.588.479-3 1-4 4.546-.746 2.643-.893 4.948-1 5.454-.107-.506-.167-2.5-1-5.454C13 12 11.588 11.479 10 11zM7.333 3.5C6.803 3.333 6 3.182 6 3.182s.667-.085 1.333-.16c.6-.066 1.122-.175 1.334-1.113C8.878.971 9 0 9 0s.122.971.333 1.91c.212.937.667 1.038 1.334 1.113.666.074 1.333.159 1.333.159s-.804.15-1.333.318c-.53.167-1 .35-1.334 1.59C9.085 6.017 9.036 6.824 9 7c-.036-.177-.056-.875-.333-1.91-.334-1.24-.804-1.423-1.334-1.59zM2.444 18C1.474 17.713 0 17.454 0 17.454s1.222-.145 2.444-.272c1.1-.115 2.057-.302 2.445-1.91C5.277 13.666 5.5 12 5.5 12s.223 1.665.611 3.273c.388 1.607 1.222 1.781 2.445 1.909 1.222.127 2.444.273 2.444.273s-1.474.258-2.444.545c-.971.287-1.834.6-2.445 2.727-.456 1.586-.546 2.97-.611 3.273-.065-.304-.102-1.5-.611-3.273C4.278 18.6 3.415 18.287 2.444 18z"
+			fill="#F0C930"
+		/>
+	</SVG>
+);
+
+export default sparkles;

package/src/mobile/link-settings/test/edit.native.js

@@ -72,7 +72,7 @@ describe.each( [
 	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
 		// Arrange
 		const url = 'https://tonytahmouchtest.files.wordpress.com';
-		const subject = initializeEditor( { initialHtml } );
+		const subject = await initializeEditor( { initialHtml } );
 		Clipboard.getString.mockReturnValue( url );
 
 		// Act
@@ -109,7 +109,7 @@ describe.each( [
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
 				const url = 'tonytahmouchtest.files.wordpress.com';
-				const subject = initializeEditor( { initialHtml } );
+				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
@@ -162,7 +162,7 @@ describe.each( [
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
 				// Arrange
 				const url = 'https://tonytahmouchtest.files.wordpress.com';
-				const subject = initializeEditor( { initialHtml } );
+				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act
@@ -241,7 +241,7 @@ describe.each( [
 				async () => {
 					// Arrange
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = initializeEditor( { initialHtml } );
+					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act
@@ -308,7 +308,7 @@ describe.each( [
 				async () => {
 					// Arrange
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
-					const subject = initializeEditor( { initialHtml } );
+					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act

package/src/modal/index.js

@@ -22,7 +22,6 @@ import {
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
@@ -45,8 +44,7 @@ function Modal( props, forwardedRef ) {
 		focusOnMount = true,
 		shouldCloseOnEsc = true,
 		shouldCloseOnClickOutside = true,
-		isDismissable, // Deprecated
-		isDismissible = isDismissable || true,
+		isDismissible = true,
 		/* accessibility */
 		aria = {
 			labelledby: null,
@@ -93,13 +91,6 @@ function Modal( props, forwardedRef ) {
 		};
 	}, [] );
 
-	if ( isDismissable ) {
-		deprecated( 'isDismissable prop of the Modal component', {
-			since: '5.4',
-			alternative: 'isDismissible prop (renamed) of the Modal component',
-		} );
-	}
-
 	function handleEscapeKeyDown( event ) {
 		if (
 			shouldCloseOnEsc &&

package/src/navigator/context.ts

@@ -10,7 +10,7 @@ import type { NavigatorContext as NavigatorContextType } from './types';
 
 const initialContextValue: NavigatorContextType = {
 	location: {},
-	push: () => {},
-	pop: () => {},
+	goTo: () => {},
+	goBack: () => {},
 };
 export const NavigatorContext = createContext( initialContextValue );

package/src/navigator/navigator-provider/README.md

@@ -16,19 +16,19 @@ import {
 } from '@wordpress/components';
 
 function NavigatorButton( { path, ...props } ) {
-	const { push } = useNavigator();
+	const { goTo } = useNavigator();
 	return (
 		<Button
 		 variant="primary"
-		 onClick={ () => push( path ) }
+		 onClick={ () => goTo( path ) }
 		 { ...props }
 	 />
  );
 }
 
 function NavigatorBackButton( props ) {
-	const { pop } = useNavigator();
-	return <Button variant="secondary" onClick={ () => pop() } { ...props } />;
+	const { goBack } = useNavigator();
+	return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
 }
 
 const MyNavigation = () => (
@@ -64,15 +64,17 @@ You can retrieve a `navigator` instance by using the `useNavigator` hook.
 
 The `navigator` instance has a few properties:
 
-### `push`: `( path: string, options: NavigateOptions ) => void`
+### `goTo`: `( path: string, options: NavigateOptions ) => void`
 
-The `push` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
+The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
 
-There currently aren't any available options.
+The available options are:
 
-### `pop`: `() => void`
+- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back.
 
-The `pop` function allows navigating to the previous path.
+### `goBack`: `() => void`
+
+The `goBack` function allows navigating to the previous path.
 
 ### `location`: `NavigatorLocation`