@wordpress/components 25.13.0 → 25.15.1-next.79a6196f.0

package/src/dropdown-menu-v2/types.ts

@@ -1,24 +1,46 @@
 /**
  * External dependencies
  */
-import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+import type { Placement } from '@floating-ui/react-dom';
 
-export type DropdownMenuProps = {
+export interface DropdownMenuContext {
+	/**
+	 * The ariakit store shared across all DropdownMenu subcomponents.
+	 */
+	store: Ariakit.MenuStore;
+	/**
+	 * The variant used by the underlying menu popover.
+	 */
+	variant?: 'toolbar';
+}
+
+export interface DropdownMenuProps {
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactElement;
+	/**
+	 * The contents of the dropdown.
+	 */
+	children?: React.ReactNode;
 	/**
 	 * The open state of the dropdown menu when it is initially rendered. Use when
-	 * you do not need to control its open state.
+	 * not wanting to control its open state.
 	 *
+	 * @default false
 	 */
-	defaultOpen?: DropdownMenuPrimitive.DropdownMenuProps[ 'defaultOpen' ];
+	defaultOpen?: boolean;
 	/**
 	 * The controlled open state of the dropdown menu. Must be used in conjunction
 	 * with `onOpenChange`.
 	 */
-	open?: DropdownMenuPrimitive.DropdownMenuProps[ 'open' ];
+	open?: boolean;
 	/**
 	 * Event handler called when the open state of the dropdown menu changes.
 	 */
-	onOpenChange?: DropdownMenuPrimitive.DropdownMenuProps[ 'onOpenChange' ];
+	onOpenChange?: ( open: boolean ) => void;
 	/**
 	 * The modality of the dropdown menu. When set to true, interaction with
 	 * outside elements will be disabled and only menu content will be visible to
@@ -26,240 +48,132 @@ export type DropdownMenuProps = {
 	 *
 	 * @default true
 	 */
-	modal?: DropdownMenuPrimitive.DropdownMenuProps[ 'modal' ];
+	modal?: boolean;
 	/**
-	 * The preferred side of the trigger to render against when open.
-	 * Will be reversed when collisions occur and avoidCollisions is enabled.
+	 * The placement of the dropdown menu popover.
 	 *
-	 * @default 'bottom'
+	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
 	 */
-	side?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'side' ];
+	placement?: Placement;
 	/**
-	 * The distance in pixels from the trigger.
+	 * The distance between the popover and the anchor element.
 	 *
-	 * @default 0
+	 * @default 8 for root-level menus, 16 for nested menus
 	 */
-	sideOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ];
+	gutter?: number;
 	/**
-	 * The preferred alignment against the trigger.
-	 * May change when collisions occur.
+	 * The skidding of the popover along the anchor element. Can be set to
+	 * negative values to make the popover shift to the opposite side.
 	 *
-	 * @default 'start'
+	 * @default 0 for root-level menus, -8 for nested menus
 	 */
-	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
+	shift?: number;
 	/**
-	 * An offset in pixels from the "start" or "end" alignment options.
+	 * Determines whether the menu popover will be hidden when the user presses
+	 * the Escape key.
 	 *
-	 * @default 0
-	 */
-	alignOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'alignOffset' ];
-	/**
-	 * The trigger button.
-	 */
-	trigger: React.ReactNode;
+	 * @default `( event ) => { event.preventDefault(); return true; }`
+	 */
+	hideOnEscape?:
+		| boolean
+		| ( (
+				event: KeyboardEvent | React.KeyboardEvent< Element >
+		  ) => boolean );
+}
+
+export interface DropdownMenuGroupProps {
 	/**
-	 * The contents of the dropdown
+	 * The contents of the dropdown menu group.
 	 */
 	children: React.ReactNode;
-};
+}
 
-export type DropdownSubMenuTriggerProps = {
+export interface DropdownMenuItemProps {
 	/**
-	 * The contents of the item.
+	 * The contents of the menu item.
 	 */
 	children: React.ReactNode;
 	/**
-	 * The contents of the item's prefix.
+	 * The contents of the menu item's prefix.
 	 */
 	prefix?: React.ReactNode;
 	/**
-	 * The contents of the item's suffix.
-	 *
-	 * @default The standard chevron icon for a submenu trigger.
+	 * The contents of the menu item's suffix.
 	 */
 	suffix?: React.ReactNode;
-};
-
-export type DropdownSubMenuProps = {
 	/**
-	 * The open state of the submenu when it is initially rendered. Use when you
-	 * do not need to control its open state.
-	 */
-	defaultOpen?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'defaultOpen' ];
-	/**
-	 * The controlled open state of the submenu. Must be used in conjunction with
-	 * `onOpenChange`.
-	 */
-	open?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ];
-	/**
-	 * Event handler called when the open state of the submenu changes.
-	 */
-	onOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];
-	/**
-	 * When `true`, prevents the user from interacting with the item.
-	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ];
-	/**
-	 * Optional text used for typeahead purposes for the trigger. By default the typeahead
-	 * behavior will use the `.textContent` of the trigger. Use this when the content
-	 * is complex, or you have non-textual content inside.
-	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ];
-	/**
-	 * The contents rendered inside the trigger. The trigger should be
-	 * an instance of the `DropdownSubMenuTriggerProps` component.
+	 * Whether to hide the parent menu when the item is clicked.
+	 *
+	 * @default true
 	 */
-	trigger: React.ReactNode;
+	hideOnClick?: boolean;
 	/**
-	 * The contents of the dropdown sub menu
+	 * Determines if the element is disabled.
 	 */
-	children: React.ReactNode;
-};
+	disabled?: boolean;
+}
 
-export type DropdownMenuItemProps = {
+export interface DropdownMenuCheckboxItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * When true, prevents the user from interacting with the item.
+	 * Whether to hide the dropdown menu when the item is clicked.
 	 *
 	 * @default false
 	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];
+	hideOnClick?: boolean;
 	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * menu from closing when selecting that item.
+	 * The checkbox menu item's name.
 	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'onSelect' ];
+	name: string;
 	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
+	 * The checkbox item's value, useful when using multiple checkbox menu items
+	 * associated to the same `name`.
 	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'textValue' ];
+	value?: string;
 	/**
-	 * The contents of the item
+	 * The controlled checked state of the checkbox menu item.
 	 */
-	children: React.ReactNode;
+	checked?: boolean;
 	/**
-	 * The contents of the item's prefix
+	 * The checked state of the checkbox menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
 	 */
-	prefix?: React.ReactNode;
+	defaultChecked?: boolean;
 	/**
-	 * The contents of the item's suffix
+	 * Event handler called when the checked state of the checkbox menu item changes.
 	 */
-	suffix?: React.ReactNode;
-};
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
 
-export type DropdownMenuCheckboxItemProps = {
+export interface DropdownMenuRadioItemProps
+	extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
 	/**
-	 * The controlled checked state of the item.
-	 * Must be used in conjunction with `onCheckedChange`.
+	 * Whether to hide the dropdown menu when the item is clicked.
 	 *
 	 * @default false
 	 */
-	checked?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ];
-	/**
-	 * Event handler called when the checked state changes.
-	 */
-	onCheckedChange?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ];
+	hideOnClick?: boolean;
 	/**
-	 * When `true`, prevents the user from interacting with the item.
+	 * The radio item's name.
 	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];
+	name: string;
 	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * 	menu from closing when selecting that item.
+	 * The radio item's value.
 	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];
+	value: string | number;
 	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
+	 * The controlled checked state of the radio menu item.
 	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ];
+	checked?: boolean;
 	/**
-	 * The contents of the checkbox item
+	 * The checked state of the radio menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
 	 */
-	children: React.ReactNode;
+	defaultChecked?: boolean;
 	/**
-	 * The contents of the checkbox item's suffix
+	 * Event handler called when the checked radio menu item changes.
 	 */
-	suffix?: React.ReactNode;
-};
-
-export type DropdownMenuRadioGroupProps = {
-	/**
-	 * The value of the selected item in the group.
-	 */
-	value?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ];
-	/**
-	 * Event handler called when the value changes.
-	 */
-	onValueChange?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ];
-	/**
-	 * The contents of the radio group
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuRadioItemProps = {
-	/**
-	 * The unique value of the item.
-	 */
-	value: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];
-	/**
-	 * When `true`, prevents the user from interacting with the item.
-	 */
-	disabled?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ];
-	/**
-	 * Event handler called when the user selects an item (via mouse or keyboard).
-	 * Calling `event.preventDefault` in this handler will prevent the dropdown
-	 * menu from closing when selecting that item.
-	 */
-	onSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];
-	/**
-	 * Optional text used for typeahead purposes. By default the typeahead
-	 * behavior will use the `.textContent` of the item. Use this when the content
-	 * is complex, or you have non-textual content inside.
-	 */
-	textValue?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ];
-	/**
-	 * The contents of the radio item
-	 */
-	children: React.ReactNode;
-	/**
-	 * The contents of the radio item's suffix
-	 */
-	suffix?: React.ReactNode;
-};
-
-export type DropdownMenuLabelProps = {
-	/**
-	 * The contents of the label
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuGroupProps = {
-	/**
-	 * The contents of the group
-	 */
-	children: React.ReactNode;
-};
-
-export type DropdownMenuSeparatorProps = {};
-
-export type DropdownMenuInternalContext = {
-	/**
-	 * This variant can be used to change the appearance of the component in
-	 * specific contexts, ie. when rendered inside the `Toolbar` component.
-	 */
-	variant?: 'toolbar';
-};
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
 
-export type DropdownMenuPrivateContext = Pick<
-	DropdownMenuInternalContext,
-	'variant'
-> & {
-	portalContainer?: HTMLElement | null;
-};
+export interface DropdownMenuSeparatorProps {}

package/src/duotone-picker/duotone-picker.tsx

@@ -91,7 +91,7 @@ function DuotonePicker( {
 		/>
 	);
 
-	const options = duotonePalette.map( ( { colors, slug, name } ) => {
+	const duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {
 		const style = {
 			background: getGradientFromCSSColors( colors, '135deg' ),
 			color: 'transparent',
@@ -155,11 +155,15 @@ function DuotonePicker( {
 		}
 	}
 
+	const options = unsetable
+		? [ unsetOption, ...duotoneOptions ]
+		: duotoneOptions;
+
 	return (
 		<CircularOptionPicker
 			{ ...otherProps }
 			{ ...metaProps }
-			options={ unsetable ? [ unsetOption, ...options ] : options }
+			options={ options }
 			actions={
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -170,7 +174,7 @@ function DuotonePicker( {
 				)
 			}
 		>
-			<Spacer paddingTop={ 4 }>
+			<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>
 				<VStack spacing={ 3 }>
 					{ ! disableCustomColors && ! disableCustomDuotone && (
 						<CustomDuotoneBar

package/src/focal-point-picker/controls.tsx

@@ -23,6 +23,7 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -51,8 +52,10 @@ export default function FocalPointPickerControls( {
 			className="focal-point-picker__controls"
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			hasHelpText={ hasHelpText }
+			gap={ 4 }
 		>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -66,6 +69,7 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }

package/src/focal-point-picker/index.tsx

@@ -84,6 +84,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -273,6 +274,7 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -53,7 +53,7 @@ export const MediaPlaceholder = styled.div`
 `;
 
 export const StyledUnitControl = styled( UnitControl )`
-	width: 100px;
+	width: 100%;
 `;
 
 const deprecatedBottomMargin = ( {

package/src/focal-point-picker/types.ts

@@ -26,6 +26,12 @@ export type FocalPointPickerProps = Pick<
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Autoplays HTML5 video. This only applies to video sources (`url`).
 	 *
@@ -62,6 +68,7 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.

package/src/font-size-picker/font-size-picker-select.tsx

@@ -27,6 +27,7 @@ const CUSTOM_OPTION: FontSizePickerSelectOption = {
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const {
+		__next40pxDefaultSize,
 		fontSizes,
 		value,
 		disableCustomFontSizes,
@@ -67,6 +68,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__nextUnconstrainedWidth
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,10 +14,18 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		__nextHasNoMarginBottom,
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }

package/src/font-size-picker/index.native.js

@@ -11,11 +11,11 @@ import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
 
@@ -62,6 +62,12 @@ function FontSizePicker( {
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
+	const accessibilityLabel = sprintf(
+		// translators: %1$s: Font size name e.g. Small
+		__( 'Font Size, %1$s' ),
+		selectedOption.name
+	);
+
 	return (
 		<BottomSheet.SubSheet
 			navigationButton={
@@ -80,7 +86,7 @@ function FontSizePicker( {
 					}
 					onPress={ openSubSheet }
 					accessibilityRole={ 'button' }
-					accessibilityLabel={ selectedOption.name }
+					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. Small
 						__( 'Navigates to select %s' ),

package/src/font-size-picker/index.tsx

@@ -45,6 +45,7 @@ const UnforwardedFontSizePicker = (
 	const {
 		/** Start opting into the new margin-free styles that will become the default in a future version. */
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
@@ -122,6 +123,7 @@ const UnforwardedFontSizePicker = (
 	);
 	const isValueUnitRelative =
 		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+	const isDisabled = value === undefined;
 
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
@@ -152,7 +154,7 @@ const UnforwardedFontSizePicker = (
 								);
 							} }
 							isPressed={ showCustomValueControl }
-							isSmall
+							size="small"
 						/>
 					) }
 				</Header>
@@ -165,6 +167,7 @@ const UnforwardedFontSizePicker = (
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
 						<FontSizePickerSelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							fontSizes={ fontSizes }
 							value={ value }
 							disableCustomFontSizes={ disableCustomFontSizes }
@@ -194,6 +197,7 @@ const UnforwardedFontSizePicker = (
 						fontSizes={ fontSizes }
 						value={ value }
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
@@ -214,6 +218,7 @@ const UnforwardedFontSizePicker = (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
+								__next40pxDefaultSize={ __next40pxDefaultSize }
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision
@@ -241,6 +246,9 @@ const UnforwardedFontSizePicker = (
 										__nextHasNoMarginBottom={
 											__nextHasNoMarginBottom
 										}
+										__next40pxDefaultSize={
+											__next40pxDefaultSize
+										}
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
@@ -269,16 +277,18 @@ const UnforwardedFontSizePicker = (
 						{ withReset && (
 							<FlexItem>
 								<Button
-									disabled={ value === undefined }
+									disabled={ isDisabled }
+									__experimentalIsFocusable
 									onClick={ () => {
 										onChange?.( undefined );
 									} }
 									variant="secondary"
 									__next40pxDefaultSize
 									size={
-										size !== '__unstable-large'
-											? 'small'
-											: 'default'
+										size === '__unstable-large' ||
+										props.__next40pxDefaultSize
+											? 'default'
+											: 'small'
 									}
 								>
 									{ __( 'Reset' ) }

package/src/font-size-picker/types.ts

@@ -57,6 +57,12 @@ export type FontSizePickerProps = {
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Size of the control.
 	 *
@@ -93,6 +99,7 @@ export type FontSizePickerSelectProps = Pick<
 	>;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
+	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
@@ -104,7 +111,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom'
+	'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;

package/src/form-toggle/README.md

@@ -4,12 +4,6 @@ FormToggle switches a single setting on or off.
 
 ![On and off FormToggles. The top toggle is on, while the bottom toggle is off.](https://wordpress.org/gutenberg/files/2019/01/Toggle.jpg)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage