@wordpress/components 19.5.0 → 19.6.1

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -44,7 +44,7 @@ export const KeyboardAwareFlatList = ( {
 					this.latestContentOffsetY !== undefined &&
 					! shouldPreventAutomaticScroll()
 				) {
-					// Reset the content position if keyboard is still closed
+					// Reset the content position if keyboard is still closed.
 					if ( this.scrollViewRef ) {
 						this.scrollViewRef.scrollToPosition(
 							0,
@@ -74,7 +74,7 @@ KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
 	previousCaretY
 ) => {
 	if ( previousCaretY ) {
-		//if this is not the first tap
+		// If this is not the first tap.
 		scrollView.refreshScrollForField( targetId );
 	}
 };

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

@@ -22,7 +22,7 @@ import LinkPickerResults from './link-picker-results';
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
 
-// this creates a search suggestion for adding a url directly
+// This creates a search suggestion for adding a url directly.
 export const createDirectEntry = ( value ) => {
 	let type = 'URL';
 
@@ -64,8 +64,8 @@ export const LinkPicker = ( {
 	} );
 	const directEntry = createDirectEntry( value );
 
-	// the title of a direct entry is displayed as the raw input value, but if we
-	// are replacing empty text, we want to use the generated url
+	// The title of a direct entry is displayed as the raw input value, but if we
+	// are replacing empty text, we want to use the generated url.
 	const pickLink = ( { title, url, isDirectEntry } ) => {
 		onLinkPicked( { title: isDirectEntry ? url : title, url } );
 	};

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

@@ -34,7 +34,7 @@ export default function LinkPickerResults( {
 		pendingRequest.current = null;
 	};
 
-	// a stable debounced function to fetch suggestions and append
+	// A stable debounced function to fetch suggestions and append.
 	const { fetchMoreSuggestions } = useSelect( ( select ) => {
 		const { getSettings } = select( 'core/block-editor' );
 		const fetchLinkSuggestions = async ( { search } ) => {
@@ -49,8 +49,8 @@ export default function LinkPickerResults( {
 			query: search,
 			links: currentSuggestions,
 		} ) => {
-			// return early if we've already detected the end of data or we are
-			// already awaiting a response
+			// Return early if we've already detected the end of data or we are
+			// already awaiting a response.
 			if ( hasAllSuggestions || pendingRequest.current ) {
 				return;
 			}
@@ -58,10 +58,10 @@ export default function LinkPickerResults( {
 			pendingRequest.current = request;
 			const suggestions = await request;
 
-			// only update links for the most recent request
+			// Only update links for the most recent request.
 			if ( suggestions && request === pendingRequest.current ) {
-				// since we don't have the response header, we check if the results
-				// are truncated to determine we've reached the end
+				// Since we don't have the response header, we check if the results
+				// are truncated to determine we've reached the end.
 				if ( suggestions.length < PER_PAGE ) {
 					setHasAllSuggestions( true );
 				}
@@ -76,10 +76,10 @@ export default function LinkPickerResults( {
 		};
 	}, [] );
 
-	// prevent setting state when unmounted
+	// Prevent setting state when unmounted.
 	useEffect( () => clearRequest, [] );
 
-	// any time the query changes, we reset pagination
+	// Any time the query changes, we reset pagination.
 	useEffect( () => {
 		clearRequest();
 		nextPage.current = 1;

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -86,9 +86,9 @@ function ImageLinkDestinationsScreen( props ) {
 		navigation.navigate( blockSettingsScreens.settings, {
 			// The `inputValue` name is reused from LinkPicker, as it helps avoid
 			// bugs from stale values remaining in the React Navigation route
-			// parameters
+			// parameters.
 			inputValue: newUrl,
-			// Clear link text value that may be set from LinkPicker
+			// Clear link text value that may be set from LinkPicker.
 			text: '',
 		} );
 	};

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

@@ -33,7 +33,6 @@ import LinkRelIcon from './link-rel';
 import styles from './style.scss';
 
 const NEW_TAB_REL = 'noreferrer noopener';
-
 function LinkSettings( {
 	// Control link settings `BottomSheet` visibility
 	isVisible,
@@ -222,7 +221,7 @@ function LinkSettings( {
 		if ( ! clipboardText ) {
 			return;
 		}
-		// Check if pasted text is URL
+		// Check if pasted text is URL.
 		if ( ! isURL( clipboardText ) ) {
 			return;
 		}

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

@@ -70,12 +70,12 @@ describe.each( [
 	 * WHEN the USER selects the SETTINGS BUTTON on the EDIT IMAGE BLOCK or EDIT BUTTON BLOCK;
 	 */
 	it( 'should display the LINK SETTINGS with an EMPTY LINK TO field.', async () => {
-		// Arrange
+		// Arrange.
 		const url = 'https://tonytahmouchtest.files.wordpress.com';
 		const subject = await initializeEditor( { initialHtml } );
 		Clipboard.getString.mockReturnValue( url );
 
-		// Act
+		// Act.
 		const block = await waitFor( () =>
 			subject.getByA11yLabel(
 				type === 'core/image' ? /Image Block/ : /Button Block/
@@ -87,7 +87,7 @@ describe.each( [
 			await waitFor( () => subject.getByA11yLabel( 'Open Settings' ) )
 		);
 
-		// Assert
+		// Assert.
 		const linkToField = await waitFor( () =>
 			subject.getByA11yLabel(
 				`Link to, ${
@@ -107,12 +107,12 @@ describe.each( [
 			 * WHEN the USER selects the LINK TO cell;
 			 */
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
-				// Arrange
+				// Arrange.
 				const url = 'tonytahmouchtest.files.wordpress.com';
 				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
-				// Act
+				// Act.
 				const block = await waitFor( () =>
 					subject.getByA11yLabel(
 						type === 'core/image' ? /Image Block/ : /Button Block/
@@ -145,7 +145,7 @@ describe.each( [
 				}
 				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
 
-				// Assert
+				// Assert.
 				expect(
 					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
@@ -160,12 +160,12 @@ describe.each( [
 			 * WHEN the USER selects the LINK TO cell;
 			 */
 			it( 'should display the LINK PICKER with NO FROM CLIPBOARD CELL.', async () => {
-				// Arrange
+				// Arrange.
 				const url = 'https://tonytahmouchtest.files.wordpress.com';
 				const subject = await initializeEditor( { initialHtml } );
 				Clipboard.getString.mockReturnValue( url );
 
-				// Act
+				// Act.
 				const block = await waitFor( () =>
 					subject.getByA11yLabel(
 						type === 'core/image' ? /Image Block/ : /Button Block/
@@ -221,7 +221,7 @@ describe.each( [
 				}
 				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
 
-				// Assert
+				// Assert.
 				expect(
 					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
@@ -239,12 +239,12 @@ describe.each( [
 				'should display the LINK PICKER with the FROM CLIPBOARD CELL populated' +
 					' with the URL from the CLIPBOARD.',
 				async () => {
-					// Arrange
+					// Arrange.
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
 					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
-					// Act
+					// Act.
 					const block = await waitFor( () =>
 						subject.getByA11yLabel(
 							type === 'core/image'
@@ -283,7 +283,7 @@ describe.each( [
 						)
 					);
 
-					// Assert
+					// Assert.
 					const clipboardUrl = await waitFor( () =>
 						subject.getByText( url )
 					);
@@ -306,12 +306,12 @@ describe.each( [
 				'should display the LINK SETTINGS with the URL from the CLIPBOARD' +
 					' populated in the LINK TO field.',
 				async () => {
-					// Arrange
+					// Arrange.
 					const url = 'https://tonytahmouchtest.files.wordpress.com';
 					const subject = await initializeEditor( { initialHtml } );
 					Clipboard.getString.mockReturnValue( url );
 
-					// Act
+					// Act.
 					const block = await waitFor( () =>
 						subject.getByA11yLabel(
 							type === 'core/image'
@@ -352,7 +352,7 @@ describe.each( [
 						)
 					);
 
-					// Assert
+					// Assert.
 					const linkToField = await waitFor( () =>
 						subject.getByA11yLabel(
 							`Link to, ${

package/src/modal/aria-helper.js

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

package/src/modal/index.js

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 
 /**
  * External dependencies
@@ -45,7 +45,7 @@ function Modal( props, forwardedRef ) {
 		shouldCloseOnEsc = true,
 		shouldCloseOnClickOutside = true,
 		isDismissible = true,
-		/* accessibility */
+		/* Accessibility. */
 		aria = {
 			labelledby: null,
 			describedby: null,

package/src/navigable-container/container.js

@@ -93,9 +93,9 @@ class NavigableContainer extends Component {
 
 		const offset = eventToOffset( event );
 
-		// eventToOffset returns undefined if the event is not handled by the component
+		// eventToOffset returns undefined if the event is not handled by the component.
 		if ( offset !== undefined && stopNavigationEvents ) {
-			// Prevents arrow key handlers bound to the document directly interfering
+			// Prevents arrow key handlers bound to the document directly interfering.
 			event.stopImmediatePropagation();
 
 			// When navigating a collection of items, prevent scroll containers

package/src/navigable-container/tabbable.js

@@ -27,7 +27,7 @@ export function TabbableContainer( { eventToOffset, ...props }, ref ) {
 		// - +1: move focus forward
 		// - -1: move focus backward
 		// -  0: don't move focus, but acknowledge event and thus stop it
-		// - undefined: do nothing, let the event propagate
+		// - undefined: do nothing, let the event propagate.
 		if ( eventToOffset ) {
 			return eventToOffset( evt );
 		}

package/src/navigable-container/test/menu.js

@@ -75,7 +75,7 @@ describe( 'NavigableMenu', () => {
 
 		container.querySelector( '#btn1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
 				getByRole( 'menu' ),
@@ -129,7 +129,7 @@ describe( 'NavigableMenu', () => {
 
 		container.querySelector( '#btn1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
 				getByRole( 'menu' ),
@@ -185,7 +185,7 @@ describe( 'NavigableMenu', () => {
 
 		container.querySelector( '#btn1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
 				getByRole( 'menu' ),
@@ -239,7 +239,7 @@ describe( 'NavigableMenu', () => {
 
 		container.querySelector( '#btn1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
 				getByRole( 'menu' ),
@@ -284,7 +284,7 @@ describe( 'NavigableMenu', () => {
 
 		container.querySelector( '#btn1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown( getByRole( 'menu' ), keyCode );
 			expect( currentIndex ).toBe( expectedActiveIndex );

package/src/navigable-container/test/tabbable.js

@@ -75,7 +75,7 @@ describe( 'TabbableContainer', () => {
 
 		container.querySelector( '#section1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown(
 			keyCode,
 			shiftKey,
@@ -132,7 +132,7 @@ describe( 'TabbableContainer', () => {
 
 		container.querySelector( '#section1' ).focus();
 
-		// Navigate options
+		// Navigate options.
 		function assertKeyDown(
 			keyCode,
 			shiftKey,

package/src/navigation/item/index.js

@@ -43,7 +43,7 @@ export default function NavigationItem( props ) {
 
 	// If hideIfTargetMenuEmpty prop is true
 	// And the menu we are supposed to navigate to
-	// Is marked as empty, then we skip rendering the item
+	// Is marked as empty, then we skip rendering the item.
 	if (
 		hideIfTargetMenuEmpty &&
 		navigateToMenu &&

package/src/navigation/menu/index.js

@@ -45,7 +45,7 @@ export default function NavigationMenu( props ) {
 		search: uncontrolledSearch,
 	};
 
-	// Keep the children rendered to make sure invisible items are included in the navigation tree
+	// Keep the children rendered to make sure invisible items are included in the navigation tree.
 	if ( activeMenu !== menu ) {
 		return (
 			<NavigationMenuContext.Provider value={ context }>

package/src/navigation/stories/controlled-state.js

@@ -15,11 +15,11 @@ export function ControlledStateStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );
 	const [ activeMenu, setActiveMenu ] = useState( 'root' );
 
-	// Mock navigation link
+	// Mock navigation link.
 	const MockLink = ( { href, children } ) => (
 		<Button
 			href={ href }
-			// Since we're not actually navigating pages, simulate it with on onClick
+			// Since we're not actually navigating pages, simulate it with on onClick.
 			onClick={ ( event ) => {
 				event.preventDefault();
 				const item = href.replace( 'https://example.com/', '' );

package/src/navigator/navigator-provider/component.tsx

@@ -85,7 +85,7 @@ function NavigatorProvider(
 
 	const cx = useCx();
 	const classes = useMemo(
-		// Prevents horizontal overflow while animating screen transitions
+		// Prevents horizontal overflow while animating screen transitions.
 		() => cx( css( { overflowX: 'hidden' } ), className ),
 		[ className, cx ]
 	);

package/src/navigator/navigator-screen/component.tsx

@@ -62,9 +62,9 @@ function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 		() =>
 			cx(
 				css( {
-					// Ensures horizontal overflow is visually accessible
+					// Ensures horizontal overflow is visually accessible.
 					overflowX: 'auto',
-					// In case the root has a height, it should not be exceeded
+					// In case the root has a height, it should not be exceeded.
 					maxHeight: '100%',
 				} ),
 				className

package/src/navigator/test/index.js

@@ -45,7 +45,7 @@ function CustomNavigatorButton( { path, onClick, ...props } ) {
 	return (
 		<NavigatorButton
 			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goTo`
+				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
 			} }
 			path={ path }
@@ -62,7 +62,7 @@ function CustomNavigatorButtonWithFocusRestoration( {
 	return (
 		<NavigatorButton
 			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goTo`
+				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
 			} }
 			path={ path }
@@ -75,7 +75,7 @@ function CustomNavigatorBackButton( { onClick, ...props } ) {
 	return (
 		<NavigatorBackButton
 			onClick={ () => {
-				// Used to spy on the values passed to `navigator.goBack`
+				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );
 			} }
 			{ ...props }
@@ -137,7 +137,7 @@ const MyNavigation = ( {
 			</CustomNavigatorBackButton>
 		</NavigatorScreen>
 
-		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included */ }
+		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
 	</NavigatorProvider>
 );
 
@@ -262,43 +262,42 @@ describe( 'Navigator', () => {
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Navigate to child screen
+		// Navigate to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getBackButton() ).toBeInTheDocument();
 
-		// Navigate back to home screen
+		// Navigate back to home screen.
 		fireEvent.click( getBackButton() );
-
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Navigate again to child screen
+		// Navigate again to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toBeInTheDocument();
 
-		// Navigate to nested screen
+		// Navigate to nested screen.
 		fireEvent.click( getToNestedScreenButton() );
 
 		expect( getNestedScreen() ).toBeInTheDocument();
 		expect( getBackButton() ).toBeInTheDocument();
 
-		// Navigate back to child screen
+		// Navigate back to child screen.
 		fireEvent.click( getBackButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toBeInTheDocument();
 
-		// Navigate back to home screen
+		// Navigate back to home screen.
 		fireEvent.click( getBackButton() );
 
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Check the values passed to `navigator.goTo()`
+		// Check the values passed to `navigator.goTo()`.
 		expect( spy ).toHaveBeenCalledTimes( 6 );
 		expect( spy ).toHaveBeenNthCalledWith( 1, {
 			path: PATHS.CHILD,
@@ -343,7 +342,7 @@ describe( 'Navigator', () => {
 			getNestedScreen( { throwIfNotFound: false } )
 		).not.toBeInTheDocument();
 
-		// Check the values passed to `navigator.goTo()`
+		// Check the values passed to `navigator.goTo()`.
 		expect( spy ).toHaveBeenCalledTimes( 1 );
 		expect( spy ).toHaveBeenNthCalledWith( 1, {
 			path: PATHS.NOT_FOUND,
@@ -356,23 +355,23 @@ describe( 'Navigator', () => {
 
 		expect( getHomeScreen() ).toBeInTheDocument();
 
-		// Navigate to child screen
+		// Navigate to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 
-		// Navigate to nested screen
+		// Navigate to nested screen.
 		fireEvent.click( getToNestedScreenButton() );
 
 		expect( getNestedScreen() ).toBeInTheDocument();
 
-		// Navigate back to child screen, check that focus was correctly restored
+		// Navigate back to child screen, check that focus was correctly restored.
 		fireEvent.click( getBackButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toHaveFocus();
 
-		// Navigate back to home screen, check that focus was correctly restored
+		// Navigate back to home screen, check that focus was correctly restored.
 		fireEvent.click( getBackButton() );
 
 		expect( getHomeScreen() ).toBeInTheDocument();
@@ -392,14 +391,14 @@ describe( 'Navigator', () => {
 			INVALID_HTML_ATTRIBUTE.escaped
 		);
 
-		// Navigate to screen with an invalid HTML value for its `path`
+		// Navigate to screen with an invalid HTML value for its `path`.
 		fireEvent.click( getToInvalidHTMLPathScreenButton() );
 
 		expect( getInvalidHTMLPathScreen() ).toBeInTheDocument();
 		expect( getBackButton() ).toBeInTheDocument();
 
 		// Navigate back to home screen, check that the focus restoration selector
-		// worked correctly despite the escaping
+		// worked correctly despite the escaping.
 		fireEvent.click( getBackButton() );
 
 		expect( getHomeScreen() ).toBeInTheDocument();

package/src/navigator/types.ts

@@ -19,7 +19,7 @@ export type NavigatorContext = {
 	goBack: () => void;
 };
 
-// Returned by the `useNavigator` hook
+// Returned by the `useNavigator` hook.
 export type Navigator = NavigatorContext;
 
 export type NavigatorProviderProps = {

package/src/number-control/index.js

@@ -43,7 +43,7 @@ export function NumberControl(
 	const baseStep = isStepAny ? 1 : parseFloat( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = ( value, stepOverride ) => {
-		// When step is "any" clamp the value, otherwise round and clamp it
+		// When step is "any" clamp the value, otherwise round and clamp it.
 		return isStepAny
 			? Math.min( max, Math.max( min, value ) )
 			: roundClamp( value, min, max, stepOverride ?? baseStep );

package/src/panel/body.js

@@ -48,10 +48,10 @@ export function PanelBody(
 		onToggle( next );
 	};
 
-	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value
+	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
 	const scrollAfterOpenRef = useRef();
 	scrollAfterOpenRef.current = scrollAfterOpen;
-	// Runs after initial render
+	// Runs after initial render.
 	useUpdateEffect( () => {
 		if (
 			isOpened &&

package/src/popover/index.js

@@ -79,7 +79,7 @@ function computeAnchorRect(
 
 		// Duck-type to check if `anchorRef` is an instance of Range
 		// `anchorRef instanceof window.Range` checks will break across document boundaries
-		// such as in an iframe
+		// such as in an iframe.
 		if ( typeof anchorRef?.cloneRange === 'function' ) {
 			return offsetIframe(
 				getRectangleFromRange( anchorRef ),
@@ -90,7 +90,7 @@ function computeAnchorRect(
 
 		// Duck-type to check if `anchorRef` is an instance of Element
 		// `anchorRef instanceof window.Element` checks will break across document boundaries
-		// such as in an iframe
+		// such as in an iframe.
 		if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
 			const rect = offsetIframe(
 				anchorRef.getBoundingClientRect(),
@@ -389,7 +389,7 @@ const Popover = (
 				typeof contentWidth === 'number' ? contentWidth + 'px' : ''
 			);
 
-			// Compute the animation position
+			// Compute the animation position.
 			const yAxisMapping = {
 				top: 'bottom',
 				bottom: 'top',

package/src/popover/utils.js

@@ -7,7 +7,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Module constants
  */
-const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
+const HEIGHT_OFFSET = 10; // Used by the arrow and a bit of empty space.
 
 /**
  * Utility used to compute the popover position over the xAxis
@@ -39,7 +39,7 @@ export function computePopoverXAxisPosition(
 ) {
 	const { width } = contentSize;
 
-	// Correct xAxis for RTL support
+	// Correct xAxis for RTL support.
 	if ( xAxis === 'left' && isRTL() ) {
 		xAxis = 'right';
 	} else if ( xAxis === 'right' && isRTL() ) {
@@ -52,7 +52,7 @@ export function computePopoverXAxisPosition(
 		corner = 'left';
 	}
 
-	// x axis alignment choices
+	// X axis alignment choices.
 	const anchorMidPoint = Math.round( anchorRect.left + anchorRect.width / 2 );
 	const centerAlignment = {
 		popoverLeft: anchorMidPoint,
@@ -91,7 +91,7 @@ export function computePopoverXAxisPosition(
 				: width,
 	};
 
-	// Choosing the x axis
+	// Choosing the x axis.
 	let chosenXAxis = xAxis;
 	let contentWidth = null;
 
@@ -228,7 +228,7 @@ export function computePopoverYAxisPosition(
 		}
 	}
 
-	// y axis alignment choices
+	// Y axis alignment choices.
 	let anchorMidPoint = anchorRect.top + anchorRect.height / 2;
 
 	if ( corner === 'bottom' ) {
@@ -261,7 +261,7 @@ export function computePopoverYAxisPosition(
 				: height,
 	};
 
-	// Choosing the y axis
+	// Choosing the y axis.
 	let chosenYAxis = yAxis;
 	let contentHeight = null;
 

package/src/radio-group/index.js

@@ -25,7 +25,7 @@ function RadioGroup(
 	const radioContext = {
 		...radioState,
 		disabled,
-		// controlled or uncontrolled
+		// Controlled or uncontrolled.
 		state: checked ?? radioState.state,
 		setState: onChange ?? radioState.setState,
 	};