@wordpress/components 20.0.1-next.d6164808d3.0 → 20.0.2-next.957ca95e4c.0

package/src/card/card-media/{hook.js → hook.ts}

@@ -6,14 +6,14 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { MediaProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- */
-export function useCardMedia( props ) {
+export function useCardMedia(
+	props: WordPressComponentProps< MediaProps, 'div' >
+) {
 	const { className, ...otherProps } = useContextSystem( props, 'CardMedia' );
 
 	const cx = useCx();

package/src/card/stories/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	CardDivider,
+	CardMedia,
+	CardFooter,
+} from '..';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import Button from '../../button';
+
+const meta: ComponentMeta< typeof Card > = {
+	component: Card,
+	title: 'Components/Card',
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	argTypes: {
+		as: {
+			control: { type: null },
+		},
+		children: {
+			control: { type: null },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const Template: ComponentStory< typeof Card > = ( args ) => {
+	return (
+		<div style={ { maxWidth: '280px' } }>
+			<Card { ...args }>
+				<CardHeader>
+					<Heading>CardHeader</Heading>
+				</CardHeader>
+				<CardBody>
+					<Text>CardBody</Text>
+				</CardBody>
+				<CardBody>
+					<Text>CardBody (before CardDivider)</Text>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
+					<Text>CardBody (after CardDivider)</Text>
+				</CardBody>
+				<CardMedia>
+					<img
+						alt="Card Media"
+						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+					/>
+				</CardMedia>
+				<CardFooter>
+					<Text>CardFooter</Text>
+					<Button variant="secondary">Action Button</Button>
+				</CardFooter>
+			</Card>
+		</div>
+	);
+};
+
+export const Default: ComponentStory< typeof Card > = Template.bind( {} );

package/src/card/test/{index.js → index.tsx}

@@ -56,9 +56,9 @@ describe( 'Card', () => {
 			const { container: containerSquared } = render(
 				<Card isRounded={ false }>Code is Poetry</Card>
 			);
-			expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot(
-				containerSquared.firstChild
-			);
+			expect(
+				containerRounded.firstElementChild
+			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {

package/src/card/types.ts

@@ -74,6 +74,13 @@ export type BodyProps = BaseSubComponentProps & {
 	isScrollable?: boolean;
 };
 
+export type MediaProps = {
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+};
+
 type MarginalSubComponentProps = BaseSubComponentProps & {
 	/**
 	 * Renders without a border.
@@ -86,5 +93,5 @@ type MarginalSubComponentProps = BaseSubComponentProps & {
 export type HeaderProps = MarginalSubComponentProps;
 
 export type FooterProps = MarginalSubComponentProps & {
-	justify: CSSProperties[ 'justifyContent' ];
+	justify?: CSSProperties[ 'justifyContent' ];
 };

package/src/clipboard-button/index.js

@@ -17,6 +17,14 @@ import Button from '../button';
 
 const TIMEOUT = 4000;
 
+/**
+ * @param {Object}                    props
+ * @param {string}                    [props.className]
+ * @param {import('react').ReactNode} props.children
+ * @param {() => void}                props.onCopy
+ * @param {() => void}                [props.onFinishCopy]
+ * @param {string}                    props.text
+ */
 export default function ClipboardButton( {
 	className,
 	children,
@@ -30,9 +38,11 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
+	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
 	const timeoutId = useRef();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
+		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
 		clearTimeout( timeoutId.current );
 
 		if ( onFinishCopy ) {
@@ -41,6 +51,7 @@ export default function ClipboardButton( {
 	} );
 
 	useEffect( () => {
+		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
 		clearTimeout( timeoutId.current );
 	}, [] );
 
@@ -51,7 +62,9 @@ export default function ClipboardButton( {
 	// This causes documentHasSelection() in the copy-handler component to
 	// mistakenly override the ClipboardButton, and copy a serialized string
 	// of the current block instead.
+	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
 	const focusOnCopyEventTarget = ( event ) => {
+		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
 		event.target.focus();
 	};
 

package/src/color-palette/index.js

@@ -22,6 +22,7 @@ import { VStack } from '../v-stack';
 import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
+import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -202,11 +203,13 @@ export default function ColorPalette( {
 	const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
 
 	const renderCustomColorPicker = () => (
-		<ColorPicker
-			color={ value }
-			onChange={ ( color ) => onChange( color ) }
-			enableAlpha={ enableAlpha }
-		/>
+		<DropdownContentWrapper paddingSize="none">
+			<ColorPicker
+				color={ value }
+				onChange={ ( color ) => onChange( color ) }
+				enableAlpha={ enableAlpha }
+			/>
+		</DropdownContentWrapper>
 	);
 
 	const colordColor = colord( value );

package/src/color-palette/style.scss

@@ -31,20 +31,6 @@
 	}
 }
 
-.components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
-	overflow: visible;
-	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
-	border: none;
-	outline: none;
-	border-radius: $radius-block-ui;
-	padding: 0;
-
-	.react-colorful__saturation {
-		border-top-right-radius: $radius-block-ui;
-		border-top-left-radius: $radius-block-ui;
-	}
-}
-
 .components-color-palette__custom-color-name {
 	text-align: left;
 }

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -1,10 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<ColorPicker
-  color="#f00"
-  onChange={[Function]}
-/>
+<DropdownContentWrapperDiv
+  className="components-dropdown-content-wrapper"
+  data-wp-c16t={true}
+  data-wp-component="DropdownContentWrapper"
+  paddingSize="none"
+>
+  <LegacyAdapter
+    color="#f00"
+    onChange={[Function]}
+  />
+</DropdownContentWrapperDiv>
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `

package/src/custom-gradient-picker/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -125,6 +126,17 @@ export default function CustomGradientPicker( {
 		position: parseInt( colorStop.length.value ),
 	} ) );
 
+	if ( ! __nextHasNoMargin ) {
+		deprecated(
+			'Outer margin styles for wp.components.CustomGradientPicker',
+			{
+				since: '6.1',
+				version: '6.4',
+				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
 		<VStack
 			spacing={ 5 }

package/src/custom-gradient-picker/stories/index.js

@@ -28,3 +28,6 @@ const CustomGradientPickerWithState = ( props ) => {
 };
 
 export const Default = CustomGradientPickerWithState.bind( {} );
+Default.args = {
+	__nextHasNoMargin: true,
+};

package/src/date-time/date/index.tsx

@@ -13,6 +13,8 @@ import {
 	subWeeks,
 	addWeeks,
 	isSameMonth,
+	startOfWeek,
+	endOfWeek,
 } from 'date-fns';
 
 /**
@@ -28,6 +30,7 @@ import { useState, useRef, useEffect } from '@wordpress/element';
  */
 import type { DatePickerProps } from '../types';
 import {
+	Wrapper,
 	Navigator,
 	NavigatorHeading,
 	Calendar,
@@ -63,7 +66,7 @@ export function DatePicker( {
 	events = [],
 	isInvalidDate,
 	onMonthPreviewed,
-	startOfWeek = 0,
+	startOfWeek: weekStartsOn = 0,
 }: DatePickerProps ) {
 	const date = currentDate ? inputToDate( currentDate ) : new Date();
 
@@ -78,7 +81,7 @@ export function DatePicker( {
 	} = useLilius( {
 		selected: [ startOfDay( date ) ],
 		viewing: startOfDay( date ),
-		weekStartsOn: startOfWeek,
+		weekStartsOn,
 	} );
 
 	// Used to implement a roving tab index. Tracks the day that receives focus
@@ -101,7 +104,7 @@ export function DatePicker( {
 	}
 
 	return (
-		<div
+		<Wrapper
 			className="components-datetime__date"
 			role="application"
 			aria-label={ __( 'Calendar' ) }
@@ -218,7 +221,22 @@ export function DatePicker( {
 									if ( event.key === 'ArrowDown' ) {
 										nextFocusable = addWeeks( day, 1 );
 									}
+									if ( event.key === 'PageUp' ) {
+										nextFocusable = subMonths( day, 1 );
+									}
+									if ( event.key === 'PageDown' ) {
+										nextFocusable = addMonths( day, 1 );
+									}
+									if ( event.key === 'Home' ) {
+										nextFocusable = startOfWeek( day );
+									}
+									if ( event.key === 'End' ) {
+										nextFocusable = startOfDay(
+											endOfWeek( day )
+										);
+									}
 									if ( nextFocusable ) {
+										event.preventDefault();
 										setFocusable( nextFocusable );
 										if (
 											! isSameMonth(
@@ -241,7 +259,7 @@ export function DatePicker( {
 					} )
 				) }
 			</Calendar>
-		</div>
+		</Wrapper>
 	);
 }
 
@@ -274,12 +292,14 @@ function Day( {
 
 	// Focus the day when it becomes focusable, e.g. because an arrow key is
 	// pressed. Only do this if focus is allowed - this stops us stealing focus
-	// from e.g. a TimePicker input. Note that isFocusAllowed is not a dep as
-	// there is no point calling focus() on an already focused element.
+	// from e.g. a TimePicker input.
 	useEffect( () => {
 		if ( ref.current && isFocusable && isFocusAllowed ) {
 			ref.current.focus();
 		}
+		// isFocusAllowed is not a dep as there is no point calling focus() on
+		// an already focused element.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isFocusable ] );
 
 	return (

package/src/date-time/date/styles.ts

@@ -12,6 +12,10 @@ import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { space } from '../../ui/utils/space';
 
+export const Wrapper = styled.div`
+	box-sizing: border-box;
+`;
+
 export const Navigator = styled( HStack )`
 	margin-bottom: ${ space( 4 ) };
 `;
@@ -35,6 +39,8 @@ export const Calendar = styled.div`
 
 export const DayOfWeek = styled.div`
 	color: ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
+	line-height: ${ CONFIG.fontLineHeightBase };
 
 	&:nth-of-type( 1 ) {
 		justify-self: start;

package/src/date-time/date/test/index.tsx

@@ -31,7 +31,9 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onChange when a day is selected', async () => {
-		const user = userEvent.setup( { delay: null } );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
 		const onChange = jest.fn();
 
@@ -50,7 +52,9 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
-		const user = userEvent.setup( { delay: null } );
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
 		const onMonthPreviewed = jest.fn();
 		const onChange = jest.fn();

package/src/date-time/date-time/index.tsx

@@ -17,11 +17,10 @@ import Button from '../../button';
 import { default as DatePicker } from '../date';
 import { default as TimePicker } from '../time';
 import type { DateTimePickerProps } from '../types';
-import { CalendarHelp } from './styles';
+import { Wrapper, CalendarHelp } from './styles';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { Spacer } from '../../spacer';
-import { VStack } from '../../v-stack';
 
 export { DatePicker, TimePicker };
 
@@ -64,7 +63,7 @@ function UnforwardedDateTimePicker(
 	}
 
 	return (
-		<VStack ref={ ref } className="components-datetime" spacing={ 4 }>
+		<Wrapper ref={ ref } className="components-datetime" spacing={ 4 }>
 			{ ! calendarHelpIsVisible && (
 				<>
 					<TimePicker
@@ -187,7 +186,7 @@ function UnforwardedDateTimePicker(
 					) }
 				</HStack>
 			) }
-		</VStack>
+		</Wrapper>
 	);
 }
 

package/src/date-time/date-time/styles.ts

@@ -3,6 +3,15 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { VStack } from '../../v-stack';
+
+export const Wrapper = styled( VStack )`
+	box-sizing: border-box;
+`;
+
 export const CalendarHelp = styled.div`
 	min-width: 260px;
 `;

package/src/date-time/time/styles.ts

@@ -18,6 +18,7 @@ import SelectControl from '../../select-control';
 import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
+	box-sizing: border-box;
 	font-size: ${ CONFIG.fontSize };
 `;
 

package/src/drop-zone/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -60,12 +59,12 @@ export default function DropZoneComponent( {
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
 			 * The order of the checks is important to recognise the HTML drop.
 			 */
-			if ( includes( event.dataTransfer.types, 'text/html' ) ) {
+			if ( event.dataTransfer.types.includes( 'text/html' ) ) {
 				_type = 'html';
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
-				includes( event.dataTransfer.types, 'Files' ) ||
+				event.dataTransfer.types.includes( 'Files' ) ||
 				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
 				_type = 'file';

package/src/dropdown-menu/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { menu } from '@wordpress/icons';
 
 /**
@@ -87,7 +86,7 @@ function DropdownMenu( dropdownMenuProps ) {
 						return;
 					}
 
-					if ( ! isOpen && event.keyCode === DOWN ) {
+					if ( ! isOpen && event.code === 'ArrowDown' ) {
 						event.preventDefault();
 						onToggle();
 					}

package/src/dropdown-menu/index.native.js

@@ -6,7 +6,6 @@ import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { DOWN } from '@wordpress/keycodes';
 import { BottomSheet, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
@@ -76,12 +75,6 @@ function DropdownMenu( {
 			className={ classnames( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
-				const openOnArrowDown = ( event ) => {
-					if ( ! isOpen && event.keyCode === DOWN ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
 				const mergedToggleProps = mergeProps(
 					{
 						className: classnames(
@@ -104,12 +97,6 @@ function DropdownMenu( {
 								mergedToggleProps.onClick( event );
 							}
 						} }
-						onKeyDown={ ( event ) => {
-							openOnArrowDown( event );
-							if ( mergedToggleProps.onKeyDown ) {
-								mergedToggleProps.onKeyDown( event );
-							}
-						} }
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }