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

package/src/confirm-dialog/test/index.js

@@ -0,0 +1,302 @@
+/**
+ * External dependencies
+ */
+import {
+	render,
+	fireEvent,
+	waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { ConfirmDialog } from '..';
+
+const noop = () => {};
+
+describe( 'Confirm', () => {
+	describe( 'Confirm component', () => {
+		describe( 'Structure', () => {
+			it( 'should render correctly', () => {
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const dialog = wrapper.getByRole( 'dialog' );
+				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
+
+				expect( dialog ).toBeInTheDocument();
+
+				elementsTexts.forEach( ( txt ) => {
+					const el = wrapper.getByText( txt );
+					expect( el ).toBeInTheDocument();
+				} );
+			} );
+		} );
+
+		describe( 'When uncontrolled', () => {
+			it( 'should render', () => {
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+
+				expect( confirmDialog ).toBeInTheDocument();
+			} );
+
+			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ onConfirm }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const button = wrapper.getByText( 'OK' );
+
+				fireEvent.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onConfirm ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const button = wrapper.getByText( 'Cancel' );
+
+				fireEvent.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const button = wrapper.getByText( 'Cancel' );
+
+				fireEvent.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+			} );
+
+			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+
+				//The overlay click is handled by detecting an onBlur from the modal frame.
+				fireEvent.blur( confirmDialog );
+
+				await waitForElementToBeRemoved( confirmDialog );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+
+				fireEvent.keyDown( confirmDialog, { keyCode: 27 } );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+				const wrapper = render(
+					<ConfirmDialog onConfirm={ onConfirm }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = wrapper.getByRole( 'dialog' );
+
+				fireEvent.keyDown( confirmDialog, { keyCode: 13 } );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onConfirm ).toHaveBeenCalled();
+			} );
+		} );
+	} );
+
+	describe( 'When controlled (isOpen is not `undefined`)', () => {
+		it( 'should render when `isOpen` is set to `true`', async () => {
+			const wrapper = render(
+				<ConfirmDialog
+					isOpen={ true }
+					onConfirm={ noop }
+					onCancel={ noop }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const confirmDialog = wrapper.getByRole( 'dialog' );
+
+			expect( confirmDialog ).toBeInTheDocument();
+		} );
+
+		it( 'should not render if `isOpen` is set to false', async () => {
+			const wrapper = render(
+				<ConfirmDialog
+					isOpen={ false }
+					onConfirm={ noop }
+					onCancel={ noop }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			// `queryByRole` needs to be used here because in this scenario the
+			// dialog is never rendered.
+			const confirmDialog = wrapper.queryByRole( 'dialog' );
+
+			expect( confirmDialog ).not.toBeInTheDocument();
+		} );
+
+		it( 'should call the `onConfirm` callback if `OK`', async () => {
+			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+			const wrapper = render(
+				<ConfirmDialog isOpen={ true } onConfirm={ onConfirm }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const button = wrapper.getByText( 'OK' );
+
+			fireEvent.click( button );
+
+			expect( onConfirm ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			const wrapper = render(
+				<ConfirmDialog
+					isOpen={ true }
+					onConfirm={ noop }
+					onCancel={ onCancel }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const button = wrapper.getByText( 'Cancel' );
+
+			fireEvent.click( button );
+
+			expect( onCancel ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
+			jest.useFakeTimers();
+
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			const wrapper = render(
+				<ConfirmDialog
+					isOpen={ true }
+					onConfirm={ noop }
+					onCancel={ onCancel }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const frame = wrapper.baseElement.querySelector(
+				'.components-modal__frame'
+			);
+
+			//The overlay click is handled by detecting an onBlur from the modal frame.
+			fireEvent.blur( frame );
+
+			// We don't wait for a DOM side effect here, so we need to fake the timers
+			// and "advance" it so that the `queueBlurCheck` in the `useFocusOutside` hook
+			// properly executes its timeout task.
+			jest.advanceTimersByTime( 0 );
+
+			expect( onCancel ).toHaveBeenCalled();
+
+			jest.useRealTimers();
+		} );
+
+		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			const wrapper = render(
+				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const frame = wrapper.baseElement.querySelector(
+				'.components-modal__frame'
+			);
+
+			fireEvent.keyDown( frame, { keyCode: 27 } );
+
+			expect( onCancel ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
+			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+			const wrapper = render(
+				<ConfirmDialog
+					isOpen={ true }
+					onConfirm={ onConfirm }
+					onCancel={ noop }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const frame = wrapper.baseElement.querySelector(
+				'.components-modal__frame'
+			);
+
+			fireEvent.keyDown( frame, { keyCode: 13 } );
+
+			expect( onConfirm ).toHaveBeenCalled();
+		} );
+	} );
+} );

package/src/confirm-dialog/types.ts

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
+
+export type DialogInputEvent =
+	| KeyboardEvent< HTMLDivElement >
+	| MouseEvent< HTMLButtonElement >;
+
+type BaseProps = {
+	children: ReactNode;
+	onConfirm: ( event: DialogInputEvent ) => void;
+};
+
+type ControlledProps = BaseProps & {
+	onCancel: ( event: DialogInputEvent ) => void;
+	isOpen: boolean;
+};
+
+type UncontrolledProps = BaseProps & {
+	onCancel?: ( event: DialogInputEvent ) => void;
+	isOpen?: never;
+};
+
+export type OwnProps = ControlledProps | UncontrolledProps;

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

@@ -98,6 +98,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 			labelPosition="top"
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
+			size="__unstable-large"
 			value={ hasGradient && type }
 		/>
 	);

package/src/custom-gradient-picker/style.scss

@@ -111,13 +111,8 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 
 // All these styles should be made generic and changed on the inputs for all components.
 .components-custom-gradient-picker {
-	.components-select-control__input,
-	.components-input-control__input {
-		height: 40px !important;
-	}
 	.components-input-control__label {
 		line-height: 1;
-		padding-bottom: $grid-unit-10 !important;
 	}
 	label {
 		text-transform: uppercase;

package/src/custom-select-control/stories/index.js

@@ -57,3 +57,30 @@ export const longLabels = () => (
 		options={ longLabelOptions }
 	/>
 );
+
+const withHintsOptions = [
+	{
+		key: 'thumbnail',
+		name: 'Thumbnail',
+		__experimentalHint: '150x150',
+	},
+	{
+		key: 'medium',
+		name: 'Medium',
+		__experimentalHint: '250x250',
+	},
+	{
+		key: 'large',
+		name: 'Large',
+		__experimentalHint: '1024x1024',
+	},
+	{
+		key: 'full',
+		name: 'Full Size',
+		__experimentalHint: '1600x1600',
+	},
+];
+
+export const hints = () => (
+	<CustomSelectControl label="Testing hints" options={ withHintsOptions } />
+);

package/src/date-time/README.md

@@ -28,7 +28,7 @@ const MyDateTimePicker = () => {
 			is12Hour={ true }
 		/>
 	);
-}
+};
 ```
 
 ## Props
@@ -52,7 +52,7 @@ The function called when a new date or time has been selected. It is passed the
 
 ### is12Hour
 
-Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.
+Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be `MM-DD-YYYY` (as opposed to the default format `DD-MM-YYYY`).
 
 -   Type: `bool`
 -   Required: No
@@ -64,3 +64,10 @@ A callback function which receives a Date object representing a day as an argume
 
 -   Type: `Function`
 -   Required: No
+
+### onMonthPreviewed
+
+A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
+
+-   Type: `Function`
+-   Required: No

package/src/date-time/date.js

@@ -11,9 +11,14 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 /**
  * WordPress dependencies
  */
-import { Component, createRef, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { isRTL, _n, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { getMomentDate } from './utils';
+
 /**
  * Module Constants
  */
@@ -70,21 +75,18 @@ function DatePickerDay( { day, events = [] } ) {
 	);
 }
 
-class DatePicker extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onChangeMoment = this.onChangeMoment.bind( this );
-		this.nodeRef = createRef();
-		this.onMonthPreviewedHandler = this.onMonthPreviewedHandler.bind(
-			this
-		);
-	}
-
-	onMonthPreviewedHandler( newMonthDate ) {
-		this.props.onMonthPreviewed?.( newMonthDate.toISOString() );
-		this.keepFocusInside();
-	}
+function DatePicker( {
+	currentDate,
+	onChange,
+	events,
+	isInvalidDate,
+	onMonthPreviewed,
+} ) {
+	const nodeRef = useRef();
+	const onMonthPreviewedHandler = ( newMonthDate ) => {
+		onMonthPreviewed?.( newMonthDate.toISOString() );
+		keepFocusInside();
+	};
 
 	/*
 	 * Todo: We should remove this function ASAP.
@@ -92,21 +94,21 @@ class DatePicker extends Component {
 	 * This focus loss closes the date picker popover.
 	 * Ideally we should add an upstream commit on react-dates to fix this issue.
 	 */
-	keepFocusInside() {
-		if ( ! this.nodeRef.current ) {
+	const keepFocusInside = () => {
+		if ( ! nodeRef.current ) {
 			return;
 		}
 
-		const { ownerDocument } = this.nodeRef.current;
+		const { ownerDocument } = nodeRef.current;
 		const { activeElement } = ownerDocument;
 
 		// If focus was lost.
 		if (
 			! activeElement ||
-			! this.nodeRef.current.contains( ownerDocument.activeElement )
+			! nodeRef.current.contains( ownerDocument.activeElement )
 		) {
 			// Retrieve the focus region div.
-			const focusRegion = this.nodeRef.current.querySelector(
+			const focusRegion = nodeRef.current.querySelector(
 				'.DayPicker_focusRegion'
 			);
 			if ( ! focusRegion ) {
@@ -115,11 +117,9 @@ class DatePicker extends Component {
 			// Keep the focus on focus region.
 			focusRegion.focus();
 		}
-	}
-
-	onChangeMoment( newDate ) {
-		const { currentDate, onChange } = this.props;
+	};
 
+	const onChangeMoment = ( newDate ) => {
 		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 		const momentDate = currentDate ? moment( currentDate ) : moment();
 		const momentTime = {
@@ -131,71 +131,54 @@ class DatePicker extends Component {
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
 
 		// Keep focus on the date picker.
-		this.keepFocusInside();
-	}
-
-	/**
-	 * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
-	 * object representing now. If a null value is passed, return a null value.
-	 *
-	 * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
-	 * @return {?moment.Moment} Moment object for selected date or null.
-	 */
-	getMomentDate( currentDate ) {
-		if ( null === currentDate ) {
-			return null;
-		}
-		return currentDate ? moment( currentDate ) : moment();
-	}
+		keepFocusInside();
+	};
 
-	getEventsPerDay( day ) {
-		if ( ! this.props.events?.length ) {
+	const getEventsPerDay = ( day ) => {
+		if ( ! events?.length ) {
 			return [];
 		}
 
-		return this.props.events.filter( ( eventDay ) =>
+		return events.filter( ( eventDay ) =>
 			day.isSame( eventDay.date, 'day' )
 		);
-	}
-
-	render() {
-		const { currentDate, isInvalidDate } = this.props;
-		const momentDate = this.getMomentDate( currentDate );
-
-		return (
-			<div className="components-datetime__date" ref={ this.nodeRef }>
-				<DayPickerSingleDateController
-					date={ momentDate }
-					daySize={ 30 }
-					focused
-					hideKeyboardShortcutsPanel
-					// This is a hack to force the calendar to update on month or year change
-					// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-					key={ `datepicker-controller-${
-						momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
-					}` }
-					noBorder
-					numberOfMonths={ 1 }
-					onDateChange={ this.onChangeMoment }
-					transitionDuration={ 0 }
-					weekDayFormat="ddd"
-					dayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }
-					isRTL={ isRTL() }
-					isOutsideRange={ ( date ) => {
-						return isInvalidDate && isInvalidDate( date.toDate() );
-					} }
-					onPrevMonthClick={ this.onMonthPreviewedHandler }
-					onNextMonthClick={ this.onMonthPreviewedHandler }
-					renderDayContents={ ( day ) => (
-						<DatePickerDay
-							day={ day }
-							events={ this.getEventsPerDay( day ) }
-						/>
-					) }
-				/>
-			</div>
-		);
-	}
+	};
+
+	const momentDate = getMomentDate( currentDate );
+
+	return (
+		<div className="components-datetime__date" ref={ nodeRef }>
+			<DayPickerSingleDateController
+				date={ momentDate }
+				daySize={ 30 }
+				focused
+				hideKeyboardShortcutsPanel
+				// This is a hack to force the calendar to update on month or year change
+				// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
+				key={ `datepicker-controller-${
+					momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
+				}` }
+				noBorder
+				numberOfMonths={ 1 }
+				onDateChange={ onChangeMoment }
+				transitionDuration={ 0 }
+				weekDayFormat="ddd"
+				dayAriaLabelFormat={ ARIAL_LABEL_TIME_FORMAT }
+				isRTL={ isRTL() }
+				isOutsideRange={ ( date ) => {
+					return isInvalidDate && isInvalidDate( date.toDate() );
+				} }
+				onPrevMonthClick={ onMonthPreviewedHandler }
+				onNextMonthClick={ onMonthPreviewedHandler }
+				renderDayContents={ ( day ) => (
+					<DatePickerDay
+						day={ day }
+						events={ getEventsPerDay( day ) }
+					/>
+				) }
+			/>
+		</div>
+	);
 }
 
 export default DatePicker;

package/src/date-time/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/date-time/stories/time.js

@@ -13,7 +13,7 @@ export default {
 	title: 'Components/TimePicker',
 	component: TimePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/date-time/test/date.js

@@ -31,32 +31,6 @@ describe( 'DatePicker', () => {
 		expect( moment.isMoment( date ) ).toBe( true );
 	} );
 
-	describe( 'getMomentDate', () => {
-		it( 'should return a Moment object representing a given date string', () => {
-			const currentDate = '1986-10-18T23:00:00';
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate( currentDate );
-
-			expect( moment.isMoment( momentDate ) ).toBe( true );
-			expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
-		} );
-
-		it( 'should return null when given a null agrument', () => {
-			const currentDate = null;
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate( currentDate );
-
-			expect( momentDate ).toBeNull();
-		} );
-
-		it( 'should return a Moment object representing now when given an undefined argument', () => {
-			const wrapper = shallow( <DatePicker /> );
-			const momentDate = wrapper.instance().getMomentDate();
-
-			expect( moment.isMoment( momentDate ) ).toBe( true );
-		} );
-	} );
-
 	describe( 'onChangeMoment', () => {
 		it( 'should call onChange with a formated date of the input', () => {
 			const onChangeSpy = jest.fn();
@@ -69,7 +43,7 @@ describe( 'DatePicker', () => {
 			);
 			const newDate = moment();
 
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect( onChangeSpy ).toHaveBeenCalledWith(
 				newDate.format( TIMEZONELESS_FORMAT )
@@ -87,7 +61,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(
@@ -110,7 +84,7 @@ describe( 'DatePicker', () => {
 				minutes: current.minutes(),
 				seconds: current.seconds(),
 			} );
-			wrapper.instance().onChangeMoment( newDate );
+			wrapper.childAt( 0 ).props().onDateChange( newDate );
 
 			expect(
 				moment( onChangeSpyArgument ).isSame(