@wordpress/components 19.5.0 → 19.6.1-next.a55ed9455a.0

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,
 	};

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

@@ -164,7 +164,7 @@ export const marks = () => {
 	const minNegative = { min: -10, max: 10, step: 1 };
 	const rangeNegative = { min: -10, max: -1, step: 1 };
 
-	// use a short alias to keep formatting to fewer lines
+	// Use a short alias to keep formatting to fewer lines.
 	const Range = RangeControlLabeledByMarksType;
 
 	return (

package/src/range-control/styles/range-control-styles.js

@@ -292,7 +292,7 @@ export const Tooltip = styled.span`
 `;
 
 // @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack
+// @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
 	box-sizing: border-box;
 	display: inline-block;

package/src/range-control/test/index.js

@@ -266,9 +266,9 @@ describe( 'RangeControl', () => {
 			fireEvent.change( numberInput, { target: { value: '' } } );
 			fireEvent.blur( numberInput );
 
-			// Reset to 50. Median value of min: 0, max: 100
+			// Reset to 50. Median value of min: 0, max: 100.
 			expect( rangeInput.value ).toBe( '50' );
-			// Input field should be blank
+			// Input field should be blank.
 			expect( numberInput.value ).toBe( '' );
 		} );
 	} );

package/src/sandbox/index.js

@@ -126,7 +126,7 @@ export default function Sandbox( {
 			return;
 		}
 
-		// put the html snippet into a html document, and then write it to the iframe's document
+		// Put the html snippet into a html document, and then write it to the iframe's document
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram
 		// that expect the scripts to be part of the body.
@@ -163,9 +163,9 @@ export default function Sandbox( {
 			</html>
 		);
 
-		// writing the document like this makes it act in the same way as if it was
+		// Writing the document like this makes it act in the same way as if it was
 		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected
+		// all work as expected.
 		contentDocument.open();
 		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
 		contentDocument.close();
@@ -181,12 +181,12 @@ export default function Sandbox( {
 		function checkMessageForResize( event ) {
 			const iframe = ref.current;
 
-			// Verify that the mounted element is the source of the message
+			// Verify that the mounted element is the source of the message.
 			if ( ! iframe || iframe.contentWindow !== event.source ) {
 				return;
 			}
 
-			// Attempt to parse the message data as JSON if passed as string
+			// Attempt to parse the message data as JSON if passed as string.
 			let data = event.data || {};
 
 			if ( 'string' === typeof data ) {

package/src/sandbox/index.native.js

@@ -241,7 +241,7 @@ function Sandbox( {
 	}
 
 	function checkMessageForResize( event ) {
-		// Attempt to parse the message data as JSON if passed as string
+		// Attempt to parse the message data as JSON if passed as string.
 		let data = event.nativeEvent.data || {};
 
 		if ( 'string' === typeof data ) {

package/src/select-control/index.tsx

@@ -79,7 +79,7 @@ function SelectControl(
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
-	// Disable reason: A select with an onchange throws a warning
+	// Disable reason: A select with an onchange throws a warning.
 	if ( isEmpty( options ) && ! children ) return null;
 
 	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {

package/src/select-control/styles/select-control-styles.ts

@@ -98,6 +98,7 @@ export const Select = styled.select< SelectProps >`
 		box-shadow: none !important;
 		color: ${ COLORS.black };
 		display: block;
+		font-family: inherit;
 		margin: 0;
 		width: 100%;
 

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -50,7 +50,7 @@ function useSlotRegistry() {
 				slot.fillProps = fillProps;
 				const slotFills = fills[ name ];
 				if ( slotFills ) {
-					// Force update fills
+					// Force update fills.
 					slotFills.map( ( fill ) => fill.current.rerender() );
 				}
 			}

package/src/slot-fill/bubbles-virtually/slot.js

@@ -32,9 +32,8 @@ function Slot(
 		// cause the fill to be re-mounted. We are only considering the initial value
 		// of fillProps.
 	}, [ registry.registerSlot, registry.unregisterSlot, name ] );
-
 	// fillProps may be an update that interacts with the layout, so we
-	// useLayoutEffect
+	// useLayoutEffect.
 	useLayoutEffect( () => {
 		registry.updateSlot( name, fillProps );
 	} );

package/src/slot-fill/fill.js

@@ -37,7 +37,7 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 
 	useLayoutEffect( () => {
 		if ( name === ref.current.name ) {
-			// ignore initial effect
+			// Ignore initial effect.
 			return;
 		}
 		unregisterFill( ref.current.name, ref.current );

package/src/slot-fill/provider.js

@@ -48,7 +48,7 @@ export default class SlotFillProvider extends Component {
 		this.triggerListeners();
 
 		// Sometimes the fills are registered after the initial render of slot
-		// But before the registerSlot call, we need to rerender the slot
+		// But before the registerSlot call, we need to rerender the slot.
 		this.forceUpdateSlot( name );
 
 		// If a new instance of a slot is being mounted while another with the

package/src/snackbar/index.js

@@ -99,7 +99,7 @@ function Snackbar(
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
-		// we need to inform developers that snackbar only accepts 1 action
+		// We need to inform developers that snackbar only accepts 1 action.
 		warning(
 			'Snackbar can only have 1 action, use Notice if your message require many messages'
 		);

package/src/snackbar/list.js

@@ -68,7 +68,7 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 				{ notices.map( ( notice ) => {
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } //see https://www.framer.com/docs/animation/#layout-animations
+							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
 							initial={ 'init' }
 							animate={ 'open' }
 							exit={ 'exit' }

package/src/style-provider/index.js

@@ -1,4 +1,4 @@
-//@ts-nocheck
+// @ts-nocheck
 
 /**
  * External dependencies
@@ -11,7 +11,7 @@ import * as uuid from 'uuid';
 const uuidCache = new Set();
 
 const memoizedCreateCacheWithContainer = memoize( ( container ) => {
-	// emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine.
+	// Emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine.
 	let key = uuid.v4().replace( /[0-9]/g, '' );
 	while ( uuidCache.has( key ) ) {
 		key = uuid.v4().replace( /[0-9]/g, '' );

package/src/tab-panel/test/index.js

@@ -32,7 +32,7 @@ describe( 'TabPanel', () => {
 		TestUtils.Simulate.click( element );
 	};
 
-	// this is needed because TestUtils does not accept a stateless component.
+	// This is needed because TestUtils does not accept a stateless component.
 	// anything run through a HOC ends up as a stateless component.
 	const getTestComponent = ( WrappedComponent, props ) => {
 		class TestComponent extends Component {

package/src/text/test/index.js

@@ -99,7 +99,7 @@ describe( 'Text', () => {
 		const { container } = render(
 			<Text highlightWords={ undefined }>Lorem ipsum.</Text>
 		);
-		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered
+		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
 		expect( container.firstChild.childNodes ).toHaveLength( 1 );
 	} );
 
@@ -111,7 +111,7 @@ describe( 'Text', () => {
 		);
 
 		expect( container.firstChild ).toMatchSnapshot();
-		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered
+		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
 		expect( container.firstChild.childNodes ).toHaveLength( 1 );
 	} );
 

package/src/text/types.ts

@@ -8,13 +8,6 @@ import type { Props as TruncateProps } from '../truncate/types';
  */
 import type { CSSProperties } from 'react';
 
-type TextAdjustLineHeightForInnerControls =
-	| boolean
-	| 'large'
-	| 'medium'
-	| 'small'
-	| 'xSmall';
-
 export type TextSize =
 	| 'body'
 	| 'caption'
@@ -35,7 +28,12 @@ export interface Props extends TruncateProps {
 	/**
 	 * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 	 */
-	adjustLineHeightForInnerControls?: TextAdjustLineHeightForInnerControls;
+	adjustLineHeightForInnerControls?:
+		| boolean
+		| 'large'
+		| 'medium'
+		| 'small'
+		| 'xSmall';
 	/**
 	 * Adjusts the text color.
 	 */

package/src/text-highlight/test/index.js

@@ -12,13 +12,13 @@ import TextHighlight from '../index';
 let container = null;
 
 beforeEach( () => {
-	// setup a DOM element as a render target
+	// Setup a DOM element as a render target.
 	container = document.createElement( 'div' );
 	document.body.appendChild( container );
 } );
 
 afterEach( () => {
-	// cleanup on exiting
+	// Cleanup on exiting.
 	unmountComponentAtNode( container );
 	container.remove();
 	container = null;
@@ -77,7 +77,7 @@ describe( 'Basic rendering', () => {
 	} );
 
 	it( 'should highlight occurances of a string regardless of capitalisation', () => {
-		const highlight = 'The'; // note this occurs in both sentance of lowercase forms
+		const highlight = 'The'; // Note this occurs in both sentance of lowercase forms.
 
 		act( () => {
 			render(
@@ -91,7 +91,7 @@ describe( 'Basic rendering', () => {
 		);
 
 		// Our component matcher is case insensitive so string.Containing will
-		// return a false failure
+		// return a false failure.
 		const regex = new RegExp( highlight, 'i' );
 
 		expect( highlightedEls ).toHaveLength( 2 );

package/src/toggle-control/test/index.js

@@ -10,7 +10,7 @@ import ToggleControl from '../';
 
 describe( 'ToggleControl', () => {
 	it( 'triggers change callback with numeric value', () => {
-		// Mount: With shallow, cannot find input child of BaseControl
+		// Mount: With shallow, cannot find input child of BaseControl.
 		const onChange = jest.fn();
 		const wrapper = renderer.create(
 			<ToggleControl onChange={ onChange } />
@@ -24,7 +24,7 @@ describe( 'ToggleControl', () => {
 
 	describe( 'help', () => {
 		it( 'does not render input with describedby if no help prop', () => {
-			// Mount: With shallow, cannot find input child of BaseControl
+			// Mount: With shallow, cannot find input child of BaseControl.
 			const onChange = jest.fn();
 			const wrapper = renderer.create(
 				<ToggleControl onChange={ onChange } />
@@ -36,7 +36,7 @@ describe( 'ToggleControl', () => {
 		} );
 
 		it( 'renders input with describedby if help prop', () => {
-			// Mount: With shallow, cannot find input child of BaseControl
+			// Mount: With shallow, cannot find input child of BaseControl.
 			const onChange = jest.fn();
 			const wrapper = renderer.create(
 				<ToggleControl onChange={ onChange } help={ true } />

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -84,6 +84,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  font-family: inherit;
   height: 100%;
   -webkit-box-pack: center;
   -ms-flex-pack: center;

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -57,7 +57,7 @@ function ToggleGroupControl(
 	} );
 	const previousValue = usePrevious( value );
 
-	// Propagate radio.state change
+	// Propagate radio.state change.
 	useUpdateEffect( () => {
 		// Avoid calling onChange if radio state changed
 		// from incoming value.
@@ -66,7 +66,7 @@ function ToggleGroupControl(
 		}
 	}, [ radio.state ] );
 
-	// Sync incoming value with radio.state
+	// Sync incoming value with radio.state.
 	useUpdateEffect( () => {
 		if ( value !== radio.state ) {
 			radio.setState( value );

package/src/toggle-group-control/toggle-group-control-option/styles.ts

@@ -29,6 +29,7 @@ export const buttonView = css`
 	color: ${ COLORS.gray[ 700 ] };
 	cursor: pointer;
 	display: flex;
+	font-family: inherit;
 	height: 100%;
 	justify-content: center;
 	line-height: 100%;

package/src/toolbar/index.js

@@ -35,7 +35,7 @@ function Toolbar( { className, label, ...props }, ref ) {
 		} );
 		return <ToolbarGroup { ...props } className={ className } />;
 	}
-	// `ToolbarGroup` already uses components-toolbar for compatibility reasons
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
 	const finalClassName = classnames(
 		'components-accessible-toolbar',
 		className

package/src/toolbar-group/test/index.js

@@ -69,14 +69,14 @@ describe( 'ToolbarGroup', () => {
 		it( 'should render a nested list of controls with separator between', () => {
 			const controls = [
 				[
-					// First set
+					// First set.
 					{
 						icon: 'wordpress',
 						title: 'WordPress',
 					},
 				],
 				[
-					// Second set
+					// Second set.
 					{
 						icon: 'wordpress',
 						title: 'WordPress',

package/src/tooltip/index.js

@@ -105,7 +105,7 @@ function Tooltip( props ) {
 	const delayedSetIsOver = useDebounce( setIsOver, delay );
 
 	const createMouseDown = ( event ) => {
-		// Preserve original child callback behavior
+		// Preserve original child callback behavior.
 		emitToChild( children, 'onMouseDown', event );
 
 		// On mouse down, the next `mouseup` should revert the value of the
@@ -137,7 +137,7 @@ function Tooltip( props ) {
 
 	const createToggleIsOver = ( eventName, isDelayed ) => {
 		return ( event ) => {
-			// Preserve original child callback behavior
+			// Preserve original child callback behavior.
 			emitToChild( children, eventName, event );
 
 			// Mouse events behave unreliably in React for disabled elements,
@@ -158,7 +158,7 @@ function Tooltip( props ) {
 			}
 
 			// Needed in case unsetting is over while delayed set pending, i.e.
-			// quickly blur/mouseleave before delayedSetIsOver is called
+			// quickly blur/mouseleave before delayedSetIsOver is called.
 			delayedSetIsOver.cancel();
 
 			const _isOver = includes( [ 'focus', 'mouseenter' ], event.type );

package/src/tooltip/index.native.js

@@ -93,7 +93,7 @@ const Tooltip = ( {
 	const { onHandleScreenTouch } = useContext( TooltipContext );
 	const keyboardVisible = useKeyboardVisibility();
 
-	// Register callback to dismiss the tooltip whenever the screen is touched
+	// Register callback to dismiss the tooltip whenever the screen is touched.
 	useEffect( () => {
 		if ( visible ) {
 			onHandleScreenTouch( () => {
@@ -104,10 +104,10 @@ const Tooltip = ( {
 		return () => onHandleScreenTouch( null );
 	}, [ visible ] );
 
-	// Manage visibility animation
+	// Manage visibility animation.
 	useEffect( () => {
 		if (
-			// Initial render and visibility enabled, animate show
+			// Initial render and visibility enabled, animate show.
 			( typeof previousVisible === 'undefined' && visible ) ||
 			// Previously visible, animate hide
 			( previousVisible && previousVisible !== visible )
@@ -117,13 +117,13 @@ const Tooltip = ( {
 		}
 	}, [ visible ] );
 
-	// Manage tooltip visibility and position in relation to keyboard
+	// Manage tooltip visibility and position in relation to keyboard.
 	useEffect( () => {
 		if ( ! visible ) {
 			return;
 		}
 
-		// Update tooltip position if keyboard is visible
+		// Update tooltip position if keyboard is visible.
 		if ( keyboardVisible ) {
 			getReferenceElementPosition();
 		}
@@ -135,7 +135,7 @@ const Tooltip = ( {
 		}
 	}, [ visible, keyboardVisible ] );
 
-	// Manage tooltip position during keyboard frame changes
+	// Manage tooltip position during keyboard frame changes.
 	useEffect( () => {
 		const frameListener = Keyboard.addListener(
 			'keyboardWillChangeFrame',
@@ -253,7 +253,7 @@ const Tooltip = ( {
 const TooltipSlot = ( { children, ...rest } ) => {
 	const [ handleScreenTouch, setHandleScreenTouch ] = useState( null );
 	const onHandleScreenTouch = ( callback ) => {
-		// Must use function to set state below as `callback` is a function itself
+		// Must use function to set state below as `callback` is a function itself.
 		setHandleScreenTouch( () => callback );
 	};
 	const handleTouchStart = () => {

package/src/tooltip/test/index.js

@@ -16,7 +16,7 @@ import { act } from '@testing-library/react';
 describe( 'Tooltip', () => {
 	describe( '#render()', () => {
 		it( 'should render children (abort) if multiple children passed', () => {
-			// Mount: Enzyme shallow does not support wrapping multiple nodes
+			// Mount: Enzyme shallow does not support wrapping multiple nodes.
 			const wrapper = mount(
 				<Tooltip>
 					<div />
@@ -145,7 +145,7 @@ describe( 'Tooltip', () => {
 			expect( popoverBeforeTimeout ).toHaveLength( 0 );
 			expect( originalMouseEnter ).toHaveBeenCalledTimes( 1 );
 
-			// Force delayedSetIsOver to be called
+			// Force delayedSetIsOver to be called.
 			setTimeout( () => {
 				const popoverAfterTimeout = wrapper.find( 'Popover' );
 				expect( popoverAfterTimeout ).toHaveLength( 1 );

package/src/tooltip/test/index.native.js

@@ -15,7 +15,7 @@ import { SlotFillProvider } from '@wordpress/components';
  */
 import Tooltip from '../index';
 
-// Minimal tree to render tooltip
+// Minimal tree to render tooltip.
 const TooltipSlot = ( { children } ) => (
 	<SlotFillProvider>
 		<Tooltip.Slot>{ children }</Tooltip.Slot>
@@ -81,7 +81,7 @@ it( 'dismisses when the keyboard closes', () => {
 		</TooltipSlot>
 	);
 
-	// Show keyboard
+	// Show keyboard.
 	act( () => {
 		keyboardHandlers.forEach( ( [ event, handler ] ) => {
 			if ( event === 'keyboardDidShow' ) {

package/src/tree-grid/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr><td>Test</td></tr></tbody></table>"`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;