@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.0

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/spacer/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import type { Props } from './types';
 
 function Spacer(
 	props: WordPressComponentProps< Props, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const spacerProps = useSpacer( props );
 

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/surface/component.js

@@ -7,7 +7,7 @@ import { useSurface } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Surface( props, forwardedRef ) {
 	const surfaceProps = useSurface( props );

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/component.js

@@ -7,7 +7,7 @@ import useText from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').Ref<any>}                                                         forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                forwardedRef
  */
 function Text( props, forwardedRef ) {
 	const textProps = useText( props );

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

@@ -24,8 +24,8 @@ import BaseControl from '../base-control';
 
 /**
  *
- * @param {Props}                                 props Props
- * @param {import('react').Ref<HTMLInputElement>} [ref]
+ * @param {Props}                                          props Props
+ * @param {import('react').ForwardedRef<HTMLInputElement>} ref
  */
 function TextControl(
 	{

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

@@ -17,7 +17,7 @@ import Button from '../../button';
 
 export default {
 	component: ToggleGroupControl,
-	title: 'Components/ToggleGroupControl',
+	title: 'Components (Experimental)/ToggleGroupControl',
 	parameters: {
 		knobs: { disable: false },
 	},

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;
@@ -121,21 +122,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 .emotion-11 {
   font-size: 13px;
   line-height: 1;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate( -50%, -50% );
-  -moz-transform: translate( -50%, -50% );
-  -ms-transform: translate( -50%, -50% );
-  transform: translate( -50%, -50% );
-}
-
-.emotion-13 {
-  font-size: 13px;
-  font-weight: bold;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
 }
 
 <div
@@ -179,12 +165,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           >
             R
           </div>
-          <div
-            aria-hidden="true"
-            class="emotion-13 emotion-14"
-          >
-            R
-          </div>
         </button>
       </div>
       <div
@@ -207,12 +187,6 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           >
             J
           </div>
-          <div
-            aria-hidden="true"
-            class="emotion-13 emotion-14"
-          >
-            J
-          </div>
         </button>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
 
@@ -31,7 +31,7 @@ const noop = () => {};
 
 function ToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'input' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		className,
@@ -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/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Radio } from 'reakit';
 
@@ -24,7 +24,7 @@ import * as styles from './styles';
 import { useCx } from '../../utils/hooks';
 import Tooltip from '../../tooltip';
 
-const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
+const { ButtonContentView, LabelView } = styles;
 
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
@@ -39,7 +39,7 @@ const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 
 function ToggleGroupControlOption(
 	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const toggleGroupControlContext = useToggleGroupControlContext();
 	const id = useInstanceId(
@@ -88,9 +88,6 @@ function ToggleGroupControlOption(
 					value={ value }
 				>
 					<ButtonContentView>{ label }</ButtonContentView>
-					<LabelPlaceholderView aria-hidden>
-						{ label }
-					</LabelPlaceholderView>
 				</Radio>
 			</WithToolTip>
 		</LabelView>

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%;
@@ -60,24 +61,12 @@ export const buttonActive = css`
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
 `;
 
 export const separatorActive = css`
 	background: transparent;
 `;
 
-export const LabelPlaceholderView = styled.div`
-	font-size: ${ CONFIG.fontSize };
-	font-weight: bold;
-	height: 0;
-	overflow: hidden;
-	visibility: hidden;
-`;
-
 export const medium = css`
 	min-height: ${ CONFIG.controlHeight };
 `;

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/tools-panel/stories/index.js

@@ -467,7 +467,6 @@ export const WithConditionallyRenderedControl = () => {
 	);
 };
 
-export { TypographyPanel } from './typography-panel';
 export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`

package/src/tools-panel/tools-panel/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import type { ToolsPanelProps } from '../types';
 
 const ToolsPanel = (
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		children,

package/src/tools-panel/tools-panel-header/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -114,7 +114,7 @@ const OptionalControlsGroup = ( {
 
 const ToolsPanelHeader = (
 	props: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		areAllOptionalControlsHidden,

package/src/tools-panel/tools-panel-item/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import type { ToolsPanelItemProps } from '../types';
 // prevents props being applied to HTML elements that would make them invalid.
 const ToolsPanelItem = (
 	props: WordPressComponentProps< ToolsPanelItemProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		children,

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' ) {