@wordpress/components 19.9.0 → 19.12.0

package/src/date-time/{test/time.js → time/test/index.tsx}

@@ -1,15 +1,20 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
-import TimePicker from '../time';
+import TimePicker from '..';
 
 describe( 'TimePicker', () => {
-	it( 'should call onChange with updated date values', () => {
+	it( 'should call onChange with updated date values', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -26,38 +31,46 @@ describe( 'TimePicker', () => {
 		const hoursInput = screen.getByLabelText( 'Hours' );
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( monthInput, { target: { value: '12' } } );
-		fireEvent.blur( monthInput );
+		await user.selectOptions( monthInput, '12' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-12-18T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( dayInput, { target: { value: '22' } } );
-		fireEvent.blur( dayInput );
+		await user.clear( dayInput );
+		await user.type( dayInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-12-22T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( yearInput, { target: { value: '2018' } } );
-		fireEvent.blur( yearInput );
+		await user.clear( yearInput );
+		await user.type( yearInput, '2018' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T11:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( hoursInput, { target: { value: '12' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:00:00' );
 		onChangeSpy.mockClear();
 
-		fireEvent.change( minutesInput, { target: { value: '35' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '2018-12-22T00:35:00' );
 		onChangeSpy.mockClear();
 	} );
 
-	it( 'should call onChange with an updated hour (12-hour clock)', () => {
+	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -70,13 +83,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '10' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '10' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T10:00:00' );
 	} );
 
-	it( 'should not call onChange with an updated hour (12-hour clock) if the hour is out of bounds', () => {
+	it( 'should call onChange with a bounded hour (12-hour clock) if the hour is out of bounds', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -89,13 +107,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '22' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '22' );
+		await user.keyboard( '{Tab}' );
 
-		expect( onChangeSpy ).not.toHaveBeenCalled();
+		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T00:00:00' );
 	} );
 
-	it( 'should call onChange with an updated hour (24-hour clock)', () => {
+	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -108,13 +131,18 @@ describe( 'TimePicker', () => {
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
 
-		fireEvent.change( hoursInput, { target: { value: '22' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T22:00:00' );
 	} );
 
-	it( 'should not call onChange with an updated minute if out of bounds', () => {
+	it( 'should call onChange with a bounded minute if out of bounds', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -127,13 +155,18 @@ describe( 'TimePicker', () => {
 
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( minutesInput, { target: { value: '99' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '99' );
+		await user.keyboard( '{Tab}' );
 
-		expect( onChangeSpy ).not.toHaveBeenCalled();
+		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:59:00' );
 	} );
 
-	it( 'should switch to PM correctly', () => {
+	it( 'should switch to PM correctly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -146,12 +179,16 @@ describe( 'TimePicker', () => {
 
 		const pmButton = screen.getByText( 'PM' );
 
-		fireEvent.click( pmButton );
+		await user.click( pmButton );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T23:00:00' );
 	} );
 
-	it( 'should switch to AM correctly', () => {
+	it( 'should switch to AM correctly', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -164,12 +201,16 @@ describe( 'TimePicker', () => {
 
 		const amButton = screen.getByText( 'AM' );
 
-		fireEvent.click( amButton );
+		await user.click( amButton );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T11:00:00' );
 	} );
 
-	it( 'should allow to set the time correctly when the PM period is selected', () => {
+	it( 'should allow to set the time correctly when the PM period is selected', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -181,11 +222,12 @@ describe( 'TimePicker', () => {
 		);
 
 		const pmButton = screen.getByText( 'PM' );
-		fireEvent.click( pmButton );
+		await user.click( pmButton );
 
 		const hoursInput = screen.getByLabelText( 'Hours' );
-		fireEvent.change( hoursInput, { target: { value: '6' } } );
-		fireEvent.blur( hoursInput );
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '6' );
+		await user.keyboard( '{Tab}' );
 
 		// When clicking on 'PM', we expect the time to be 11pm
 		expect( onChangeSpy ).toHaveBeenNthCalledWith(
@@ -199,7 +241,11 @@ describe( 'TimePicker', () => {
 		);
 	} );
 
-	it( 'should truncate at the minutes on change', () => {
+	it( 'should truncate at the minutes on change', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		const onChangeSpy = jest.fn();
 
 		render(
@@ -212,8 +258,9 @@ describe( 'TimePicker', () => {
 
 		const minutesInput = screen.getByLabelText( 'Minutes' );
 
-		fireEvent.change( minutesInput, { target: { value: '22' } } );
-		fireEvent.blur( minutesInput );
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '22' );
+		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( '1986-10-18T23:22:00' );
 	} );
@@ -237,11 +284,21 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		expect( screen.getByLabelText( 'Month' ).value ).toBe( '07' );
-		expect( screen.getByLabelText( 'Day' ).value ).toBe( '13' );
-		expect( screen.getByLabelText( 'Year' ).value ).toBe( '2020' );
-		expect( screen.getByLabelText( 'Hours' ).value ).toBe( '06' );
-		expect( screen.getByLabelText( 'Minutes' ).value ).toBe( '00' );
+		expect(
+			( screen.getByLabelText( 'Month' ) as HTMLInputElement ).value
+		).toBe( '07' );
+		expect(
+			( screen.getByLabelText( 'Day' ) as HTMLInputElement ).value
+		).toBe( '13' );
+		expect(
+			( screen.getByLabelText( 'Year' ) as HTMLInputElement ).value
+		).toBe( '2020' );
+		expect(
+			( screen.getByLabelText( 'Hours' ) as HTMLInputElement ).value
+		).toBe( '06' );
+		expect(
+			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
+		).toBe( '00' );
 		/**
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
@@ -267,14 +324,12 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		const form = screen.getByRole( 'form' );
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
 
-		let monthInputIndex = [].indexOf.call(
-			form.elements,
+		let monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		let dayInputIndex = [].indexOf.call(
-			form.elements,
+		let dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -290,12 +345,10 @@ describe( 'TimePicker', () => {
 			</form>
 		);
 
-		monthInputIndex = [].indexOf.call(
-			form.elements,
+		monthInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Month' )
 		);
-		dayInputIndex = [].indexOf.call(
-			form.elements,
+		dayInputIndex = Array.from( form.elements ).indexOf(
 			screen.getByLabelText( 'Day' )
 		);
 
@@ -313,11 +366,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = screen.getByLabelText( 'Month' ).value;
-		const dayInput = screen.getByLabelText( 'Day' ).value;
-		const yearInput = screen.getByLabelText( 'Year' ).value;
-		const hoursInput = screen.getByLabelText( 'Hours' ).value;
-		const minutesInput = screen.getByLabelText( 'Minutes' ).value;
+		const monthInput = ( screen.getByLabelText(
+			'Month'
+		) as HTMLInputElement ).value;
+		const dayInput = ( screen.getByLabelText( 'Day' ) as HTMLInputElement )
+			.value;
+		const yearInput = ( screen.getByLabelText(
+			'Year'
+		) as HTMLInputElement ).value;
+		const hoursInput = ( screen.getByLabelText(
+			'Hours'
+		) as HTMLInputElement ).value;
+		const minutesInput = ( screen.getByLabelText(
+			'Minutes'
+		) as HTMLInputElement ).value;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

package/src/date-time/{timezone.js → time/timezone.tsx}

@@ -7,10 +7,12 @@ import { __experimentalGetSettings as getDateSettings } from '@wordpress/date';
 /**
  * Internal dependencies
  */
-import Tooltip from '../tooltip';
+import Tooltip from '../../tooltip';
+import { TimeZone as StyledComponent } from './styles';
 
 /**
- * Displays timezone information when user timezone is different from site timezone.
+ * Displays timezone information when user timezone is different from site
+ * timezone.
  */
 const TimeZone = () => {
 	const { timezone } = getDateSettings();
@@ -24,9 +26,9 @@ const TimeZone = () => {
 		return null;
 	}
 
-	const offsetSymbol = timezone.offset >= 0 ? '+' : '';
+	const offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';
 	const zoneAbbr =
-		'' !== timezone.abbr && isNaN( timezone.abbr )
+		'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )
 			? timezone.abbr
 			: `UTC${ offsetSymbol }${ timezone.offset }`;
 
@@ -37,7 +39,9 @@ const TimeZone = () => {
 
 	return (
 		<Tooltip position="top center" text={ timezoneDetail }>
-			<div className="components-datetime__timezone">{ zoneAbbr }</div>
+			<StyledComponent className="components-datetime__timezone">
+				{ zoneAbbr }
+			</StyledComponent>
 		</Tooltip>
 	);
 };

package/src/date-time/types.ts

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import type { Moment } from 'moment';
+
+export type TimePickerProps = {
+	/**
+	 * The initial current time the time picker should render.
+	 */
+	currentTime?: Date | string | number | null;
+
+	/**
+	 * 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`).
+	 */
+	is12Hour?: boolean;
+
+	/**
+	 * The function called when a new time has been selected. It is passed the
+	 * time as an argument.
+	 */
+	onChange?: ( time: string ) => void;
+};
+
+export type DatePickerEvent = {
+	/**
+	 * The date of the event.
+	 */
+	date: Date;
+};
+
+export type DatePickerDayProps = {
+	/**
+	 * The day to display.
+	 */
+	day: Moment;
+
+	/**
+	 * List of events to show on this day.
+	 *
+	 * @default []
+	 */
+	events?: DatePickerEvent[];
+};
+
+export type DatePickerProps = {
+	/**
+	 * The current date and time at initialization. Optionally pass in a `null`
+	 * value to specify no date is currently selected.
+	 */
+	currentDate?: Date | string | number | null;
+
+	/**
+	 * The function called when a new date has been selected. It is passed the
+	 * date as an argument.
+	 */
+	onChange?: ( date: string ) => void;
+
+	/**
+	 * A callback function which receives a Date object representing a day as an
+	 * argument, and should return a Boolean to signify if the day is valid or
+	 * not.
+	 */
+	isInvalidDate?: ( date: Date ) => boolean;
+
+	/**
+	 * 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.
+	 */
+	onMonthPreviewed?: ( date: string ) => void;
+
+	/**
+	 * List of events to show in the date picker. Each event will appear as a
+	 * dot on the day of the event.
+	 */
+	events?: DatePickerEvent[];
+};
+
+export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
+	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+		/**
+		 * The function called when a new date or time has been selected. It is
+		 * passed the date and time as an argument.
+		 */
+		onChange?: ( date: string | null ) => void;
+
+		/**
+		 * Start opting in to not displaying a Help button which will become the
+		 * default in a future version.
+		 *
+		 * @default false
+		 */
+		__nextRemoveHelpButton?: boolean;
+
+		/**
+		 * Start opting in to not displaying a Reset button which will become
+		 * the default in a future version.
+		 *
+		 * @default false
+		 */
+		__nextRemoveResetButton?: boolean;
+	};

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionControl rendering renders with custom sizes 1`] = `
-<ForwardRef(SelectControl)
+<ForwardRef(UnforwardedSelectControl)
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -34,7 +34,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with defaults 1`] = `
-<ForwardRef(SelectControl)
+<ForwardRef(UnforwardedSelectControl)
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -75,7 +75,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 `;
 
 exports[`DimensionControl rendering renders with icon and custom icon label 1`] = `
-<ForwardRef(SelectControl)
+<ForwardRef(UnforwardedSelectControl)
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={
@@ -128,7 +128,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 `;
 
 exports[`DimensionControl rendering renders with icon and default icon label 1`] = `
-<ForwardRef(SelectControl)
+<ForwardRef(UnforwardedSelectControl)
   className="block-editor-dimension-control"
   hideLabelFromVision={false}
   label={

package/src/disabled/index.js

@@ -1,19 +1,13 @@
 /**
  * External dependencies
  */
-import { includes, debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useCallback,
-	useLayoutEffect,
-	useRef,
-} from '@wordpress/element';
-import { focus } from '@wordpress/dom';
+import { useDisabled } from '@wordpress/compose';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,25 +17,6 @@ import { StyledWrapper } from './styles/disabled-styles';
 const Context = createContext( false );
 const { Consumer, Provider } = Context;
 
-/**
- * Names of control nodes which qualify for disabled behavior.
- *
- * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
- *
- * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
- *
- * @type {string[]}
- */
-const DISABLED_ELIGIBLE_NODE_NAMES = [
-	'BUTTON',
-	'FIELDSET',
-	'INPUT',
-	'OPTGROUP',
-	'OPTION',
-	'SELECT',
-	'TEXTAREA',
-];
-
 /**
  * @typedef OwnProps
  * @property {string}                    [className]       Classname for the disabled element.
@@ -54,68 +29,8 @@ const DISABLED_ELIGIBLE_NODE_NAMES = [
  * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.
  */
 function Disabled( { className, children, isDisabled = true, ...props } ) {
-	/** @type {import('react').RefObject<HTMLDivElement>} */
-	const node = useRef( null );
-
-	const disable = () => {
-		if ( ! node.current ) {
-			return;
-		}
-
-		focus.focusable.find( node.current ).forEach( ( focusable ) => {
-			if (
-				includes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )
-			) {
-				focusable.setAttribute( 'disabled', '' );
-			}
-
-			if ( focusable.nodeName === 'A' ) {
-				focusable.setAttribute( 'tabindex', '-1' );
-			}
-
-			const tabIndex = focusable.getAttribute( 'tabindex' );
-			if ( tabIndex !== null && tabIndex !== '-1' ) {
-				focusable.removeAttribute( 'tabindex' );
-			}
-
-			if ( focusable.hasAttribute( 'contenteditable' ) ) {
-				focusable.setAttribute( 'contenteditable', 'false' );
-			}
-		} );
-	};
-
-	// Debounce re-disable since disabling process itself will incur
-	// additional mutations which should be ignored.
-	const debouncedDisable = useCallback(
-		debounce( disable, undefined, { leading: true } ),
-		[]
-	);
-
-	useLayoutEffect( () => {
-		if ( ! isDisabled ) {
-			return;
-		}
-
-		disable();
-
-		/** @type {MutationObserver | undefined} */
-		let observer;
-		if ( node.current ) {
-			observer = new window.MutationObserver( debouncedDisable );
-			observer.observe( node.current, {
-				childList: true,
-				attributes: true,
-				subtree: true,
-			} );
-		}
-
-		return () => {
-			if ( observer ) {
-				observer.disconnect();
-			}
-			debouncedDisable.cancel();
-		};
-	}, [] );
+	/** @type {import('react').RefCallback<HTMLDivElement>} */
+	const ref = useDisabled();
 
 	if ( ! isDisabled ) {
 		return <Provider value={ false }>{ children }</Provider>;
@@ -124,7 +39,7 @@ function Disabled( { className, children, isDisabled = true, ...props } ) {
 	return (
 		<Provider value={ true }>
 			<StyledWrapper
-				ref={ node }
+				ref={ ref }
 				className={ classnames( className, 'components-disabled' ) }
 				{ ...props }
 			>