Update PostDate block toggle/popover with new Toggler hook

Also:
* Added use of aria-expanded attribute
* Added anchorRef on popover for better positioning

packages/block-library/src/post-date/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 import {
 	AlignmentToolbar,
@@ -25,6 +25,7 @@ import {
 	CustomSelectControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalUseToggler as useToggler } from '@wordpress/compose';
 import { edit } from '@wordpress/icons';
 
 export default function PostDateEdit( { attributes, context, setAttributes } ) {
@@ -38,7 +39,12 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 		'date',
 		postId
 	);
-	const [ isPickerOpen, setIsPickerOpen ] = useState( false );
+	const timeRef = useRef();
+	const {
+		togglerHandlers,
+		isOn: isPickerOpen,
+		offUnlessToggler,
+	} = useToggler();
 	const settings = __experimentalGetSettings();
 	// To know if the current time format is a 12 hour time, look for "a".
 	// Also make sure this "a" is not escaped by a "/".
@@ -50,6 +56,15 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 			.reverse()
 			.join( '' ) // Reverse the string and test for "a" not followed by a slash.
 	);
+	const datePicker = (
+		<Popover onClose={ offUnlessToggler } anchorRef={ timeRef.current }>
+			<DateTimePicker
+				currentDate={ date }
+				onChange={ setDate }
+				is12Hour={ is12Hour }
+			/>
+		</Popover>
+	);
 	const formatOptions = Object.values( settings.formats ).map(
 		( formatOption ) => ( {
 			key: formatOption,
@@ -64,17 +79,9 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 	} );
 
 	let postDate = date ? (
-		<time dateTime={ dateI18n( 'c', date ) }>
+		<time dateTime={ dateI18n( 'c', date ) } ref={ timeRef }>
 			{ dateI18n( resolvedFormat, date ) }
-			{ isPickerOpen && (
-				<Popover onClose={ setIsPickerOpen.bind( null, false ) }>
-					<DateTimePicker
-						currentDate={ date }
-						onChange={ setDate }
-						is12Hour={ is12Hour }
-					/>
-				</Popover>
-			) }
+			{ isPickerOpen && datePicker }
 		</time>
 	) : (
 		__( 'No Date' )
@@ -95,13 +102,10 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 				{ date && (
 					<ToolbarGroup>
 						<ToolbarButton
+							aria-expanded={ isPickerOpen }
 							icon={ edit }
 							title={ __( 'Change Date' ) }
-							onClick={ () =>
-								setIsPickerOpen(
-									( _isPickerOpen ) => ! _isPickerOpen
-								)
-							}
+							{ ...togglerHandlers }
 						/>
 					</ToolbarGroup>
 				) }