@wordpress/components 19.17.0 → 20.0.1-next.d6164808d3.0

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

@@ -1,10 +1,9 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
+import { format } from 'date-fns';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import 'react-dates/initialize';
 
 /**
  * Internal dependencies
@@ -16,22 +15,19 @@ describe( 'DatePicker', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );
 
 		expect(
-			screen.getByRole( 'button', { name: 'Monday, May 2, 2022' } )
-		).toHaveClass( 'CalendarDay__selected' );
-
-		// Expect React deprecation warning due to 'react-dates' using outdated
-		// React lifecycle methods.
-		// https://github.com/react-dates/react-dates/issues/1748
-		expect( console ).toHaveWarned();
+			screen.getByRole( 'button', { name: 'May 2, 2022. Selected' } )
+		).not.toBeNull();
 	} );
 
 	it( "should highlight today's date when not provided a currentDate", () => {
 		render( <DatePicker /> );
 
-		const todayDescription = moment().format( 'dddd, MMMM D, YYYY' );
+		const todayDescription = format( new Date(), 'MMMM d, yyyy' );
 		expect(
-			screen.getByRole( 'button', { name: todayDescription } )
-		).toHaveClass( 'CalendarDay__selected' );
+			screen.getByRole( 'button', {
+				name: `${ todayDescription }. Selected`,
+			} )
+		).not.toBeNull();
 	} );
 
 	it( 'should call onChange when a day is selected', async () => {
@@ -47,7 +43,7 @@ describe( 'DatePicker', () => {
 		);
 
 		await user.click(
-			screen.getByRole( 'button', { name: 'Friday, May 20, 2022' } )
+			screen.getByRole( 'button', { name: 'May 20, 2022' } )
 		);
 
 		expect( onChange ).toHaveBeenCalledWith( '2022-05-20T11:00:00' );
@@ -69,7 +65,7 @@ describe( 'DatePicker', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Move forward to switch to the next month.',
+				name: 'View next month',
 			} )
 		);
 
@@ -78,7 +74,7 @@ describe( 'DatePicker', () => {
 		);
 
 		await user.click(
-			screen.getByRole( 'button', { name: 'Monday, June 20, 2022' } )
+			screen.getByRole( 'button', { name: 'June 20, 2022' } )
 		);
 
 		expect( onChange ).toHaveBeenCalledWith( '2022-06-20T11:00:00' );
@@ -97,31 +93,25 @@ describe( 'DatePicker', () => {
 
 		expect(
 			screen
-				.getAllByLabelText( 'There is 1 event.', { exact: false } )
+				.getAllByLabelText( 'There is 1 event', { exact: false } )
 				.map( ( day ) => day.getAttribute( 'aria-label' ) )
 		).toEqual( [
-			'Wednesday, May 4, 2022. There is 1 event.',
-			'Thursday, May 19, 2022. There is 1 event.',
+			'May 4, 2022. There is 1 event',
+			'May 19, 2022. There is 1 event',
 		] );
 	} );
 
 	it( 'should not allow invalid date to be selected', async () => {
-		const user = userEvent.setup( { delay: null } );
-
-		const onChange = jest.fn();
-
 		render(
 			<DatePicker
 				currentDate="2022-05-02T11:00:00"
-				onChange={ onChange }
 				isInvalidDate={ ( date ) => date.getDate() === 20 }
 			/>
 		);
 
-		await user.click(
-			screen.getByRole( 'button', { name: 'Friday, May 20, 2022' } )
-		);
-
-		expect( onChange ).not.toHaveBeenCalledWith( '2022-05-20T11:00:00' );
+		const button = screen.getByRole( 'button', {
+			name: 'May 20, 2022',
+		} ) as HTMLButtonElement;
+		expect( button.disabled ).toBe( true );
 	} );
 } );

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

@@ -21,6 +21,7 @@ import { CalendarHelp } from './styles';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { Spacer } from '../../spacer';
+import { VStack } from '../../v-stack';
 
 export { DatePicker, TimePicker };
 
@@ -63,7 +64,7 @@ function UnforwardedDateTimePicker(
 	}
 
 	return (
-		<div ref={ ref } className="components-datetime">
+		<VStack ref={ ref } className="components-datetime" spacing={ 4 }>
 			{ ! calendarHelpIsVisible && (
 				<>
 					<TimePicker
@@ -186,7 +187,7 @@ function UnforwardedDateTimePicker(
 					) }
 				</HStack>
 			) }
-		</div>
+		</VStack>
 	);
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
+import { startOfMinute, format, set, setHours, setMonth } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -39,8 +39,8 @@ import {
 	PRESS_DOWN,
 	PRESS_UP,
 } from '../../input-control/reducer/actions';
-
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
+import { inputToDate } from '../utils';
+import { TIMEZONELESS_FORMAT } from '../constants';
 
 function from12hTo24h( hours: number, isPm: boolean ) {
 	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
@@ -98,24 +98,27 @@ export function TimePicker( {
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
-		currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
+		currentTime ? startOfMinute( inputToDate( currentTime ) ) : new Date()
 	);
 
 	// Reset the state when currentTime changed.
+	// TODO: useEffect() shouldn't be used like this, causes an unnecessary render
 	useEffect( () => {
 		setDate(
-			currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
+			currentTime
+				? startOfMinute( inputToDate( currentTime ) )
+				: new Date()
 		);
 	}, [ currentTime ] );
 
 	const { day, month, year, minutes, hours, am } = useMemo(
 		() => ( {
-			day: date.format( 'DD' ),
-			month: date.format( 'MM' ),
-			year: date.format( 'YYYY' ),
-			minutes: date.format( 'mm' ),
-			hours: date.format( is12Hour ? 'hh' : 'HH' ),
-			am: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',
+			day: format( date, 'dd' ),
+			month: format( date, 'MM' ),
+			year: format( date, 'yyyy' ),
+			minutes: format( date, 'mm' ),
+			hours: format( date, is12Hour ? 'hh' : 'HH' ),
+			am: format( date, 'a' ),
 		} ),
 		[ date, is12Hour ]
 	);
@@ -142,9 +145,9 @@ export function TimePicker( {
 				numberValue = from12hTo24h( numberValue, am === 'PM' );
 			}
 
-			const newDate = date.clone()[ method ]( numberValue );
+			const newDate = set( date, { [ method ]: numberValue } );
 			setDate( newDate );
-			onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+			onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
 		};
 		return callback;
 	};
@@ -157,11 +160,12 @@ export function TimePicker( {
 
 			const parsedHours = parseInt( hours, 10 );
 
-			const newDate = date
-				.clone()
-				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
+			const newDate = setHours(
+				date,
+				from12hTo24h( parsedHours, value === 'PM' )
+			);
 			setDate( newDate );
-			onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+			onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
 		};
 	}
 
@@ -207,9 +211,9 @@ export function TimePicker( {
 					{ value: '12', label: __( 'December' ) },
 				] }
 				onChange={ ( value ) => {
-					const newDate = date.clone().month( Number( value ) - 1 );
+					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
-					onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+					onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
 				} }
 			/>
 		</MonthSelectWrapper>

package/src/date-time/utils.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { toDate } from 'date-fns';
+
+/**
+ * Like date-fn's toDate, but tries to guess the format when a string is
+ * given.
+ *
+ * @param  input Value to turn into a date.
+ */
+export function inputToDate( input: Date | string | number ): Date {
+	if ( typeof input === 'string' ) {
+		return new Date( input );
+	}
+	return toDate( input );
+}

package/src/dimension-control/index.js

@@ -6,17 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-/**
- * Internal dependencies
- */
-import { Icon, SelectControl } from '../';
 import { __ } from '@wordpress/i18n';
-
 import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { Icon, SelectControl } from '../';
 import sizesTable, { findSizeBySlug } from './sizes';
 
 export function DimensionControl( props ) {

package/src/disabled/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useDisabled } from '@wordpress/compose';
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { StyledWrapper } from './styles/disabled-styles';
+import type { DisabledProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+const Context = createContext< boolean >( false );
+const { Consumer, Provider } = Context;
+
+/**
+ * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
+ *
+ * ```jsx
+ * import { Button, Disabled, TextControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyDisabled = () => {
+ * 	const [ isDisabled, setIsDisabled ] = useState( true );
+ *
+ * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ * 	if ( isDisabled ) {
+ * 		input = <Disabled>{ input }</Disabled>;
+ * 	}
+ *
+ * 	const toggleDisabled = () => {
+ * 		setIsDisabled( ( state ) => ! state );
+ * 	};
+ *
+ * 	return (
+ * 		<div>
+ * 			{ input }
+ * 			<Button variant="primary" onClick={ toggleDisabled }>
+ * 				Toggle Disabled
+ * 			</Button>
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+function Disabled( {
+	className,
+	children,
+	isDisabled = true,
+	...props
+}: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) {
+	const ref = useDisabled();
+
+	if ( ! isDisabled ) {
+		return <Provider value={ false }>{ children }</Provider>;
+	}
+
+	return (
+		<Provider value={ true }>
+			<StyledWrapper
+				ref={ ref }
+				className={ classnames( className, 'components-disabled' ) }
+				{ ...props }
+			>
+				{ children }
+			</StyledWrapper>
+		</Provider>
+	);
+}
+
+Disabled.Context = Context;
+Disabled.Consumer = Consumer;
+
+export default Disabled;

package/src/disabled/stories/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Disabled from '../';
+import SelectControl from '../../select-control/';
+import TextControl from '../../text-control/';
+import TextareaControl from '../../textarea-control/';
+
+const meta: ComponentMeta< typeof Disabled > = {
+	title: 'Components/Disabled',
+	component: Disabled,
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const Form = () => {
+	const [ textControlValue, setTextControlValue ] = useState( '' );
+	const [ textAreaValue, setTextAreaValue ] = useState( '' );
+	return (
+		<div>
+			<TextControl
+				label="Text Control"
+				value={ textControlValue }
+				onChange={ setTextControlValue }
+			/>
+			<TextareaControl
+				label="TextArea Control"
+				value={ textAreaValue }
+				onChange={ setTextAreaValue }
+			/>
+			<SelectControl
+				label="Select Control"
+				onChange={ () => {} }
+				options={ [
+					{ value: '', label: 'Select an option', disabled: true },
+					{ value: 'a', label: 'Option A' },
+					{ value: 'b', label: 'Option B' },
+					{ value: 'c', label: 'Option C' },
+				] }
+			/>
+		</div>
+	);
+};
+
+export const Default: ComponentStory< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<Form />
+		</Disabled>
+	);
+};
+Default.args = {
+	isDisabled: true,
+};
+
+export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<div contentEditable tabIndex={ 0 }>
+				contentEditable
+			</div>
+		</Disabled>
+	);
+};
+ContentEditable.args = {
+	isDisabled: true,
+};

package/src/disabled/test/index.tsx

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Disabled from '../';
+
+jest.mock( '@wordpress/dom', () => {
+	const focus = jest.requireActual( '../../../../dom/src' ).focus;
+	return {
+		focus: {
+			...focus,
+			focusable: {
+				...focus.focusable,
+				find( context: Element, options = { sequential: false } ) {
+					// In JSDOM, all elements have zero'd widths and height.
+					// This is a metric for focusable's `isVisible`, so find
+					// and apply an arbitrary non-zero width.
+					Array.from( context.querySelectorAll( '*' ) ).forEach(
+						( element ) => {
+							Object.defineProperties( element, {
+								offsetWidth: {
+									get: () => 1,
+									configurable: true,
+								},
+							} );
+						}
+					);
+
+					return focus.focusable.find( context, options );
+				},
+			},
+		},
+	};
+} );
+
+describe( 'Disabled', () => {
+	const Form = () => (
+		<form title="form">
+			<input />
+			<div title="edit my content" contentEditable tabIndex={ 0 } />
+		</form>
+	);
+
+	it( 'will disable all fields', () => {
+		render(
+			<Disabled>
+				<Form />
+			</Disabled>
+		);
+
+		const input = screen.getByRole( 'textbox' );
+		const contentEditable = screen.getByTitle( 'edit my content' );
+		expect( input ).toBeDisabled();
+		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+		expect( contentEditable ).not.toHaveAttribute( 'tabindex' );
+		expect( contentEditable ).not.toHaveAttribute( 'disabled' );
+	} );
+
+	it( 'should cleanly un-disable via reconciliation', () => {
+		const MaybeDisable = ( { isDisabled = true } ) =>
+			isDisabled ? (
+				<Disabled>
+					<Form />
+				</Disabled>
+			) : (
+				<Form />
+			);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const contentEditable = screen.getByTitle( 'edit my content' );
+
+		expect( input ).toBeDisabled();
+		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( input ).not.toBeDisabled();
+		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
+		expect( contentEditable ).toHaveAttribute( 'tabindex' );
+	} );
+
+	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled isDisabled={ isDisabled }>
+				<Form />
+			</Disabled>
+		);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const contentEditable = screen.getByTitle( 'edit my content' );
+
+		expect( input ).toBeDisabled();
+		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( input ).not.toBeDisabled();
+		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
+	} );
+
+	it( 'will disable all fields on sneaky DOM manipulation', async () => {
+		render(
+			<Disabled>
+				<Form />
+			</Disabled>
+		);
+
+		const form = screen.getByTitle( 'form' );
+		form.insertAdjacentHTML(
+			'beforeend',
+			'<input title="sneaky input" />'
+		);
+		form.insertAdjacentHTML(
+			'beforeend',
+			'<div title="sneaky editable content" contentEditable tabIndex={ 0 } />'
+		);
+		const sneakyInput = screen.getByTitle( 'sneaky input' );
+		const sneakyEditable = screen.getByTitle( 'sneaky editable content' );
+
+		await waitFor( () => expect( sneakyInput ).toBeDisabled() );
+		await waitFor( () =>
+			expect( sneakyEditable ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			)
+		);
+	} );
+
+	describe( 'Consumer', () => {
+		function DisabledStatus() {
+			return (
+				<p>
+					<Disabled.Consumer>
+						{ ( isDisabled ) =>
+							isDisabled ? 'Disabled' : 'Not disabled'
+						}
+					</Disabled.Consumer>
+				</p>
+			);
+		}
+
+		test( "lets components know that they're disabled via context", () => {
+			render(
+				<Disabled>
+					<DisabledStatus />
+				</Disabled>
+			);
+
+			expect( screen.getByText( 'Disabled' ) ).toBeInTheDocument();
+		} );
+
+		test( "lets components know that they're not disabled via context when isDisabled is false", () => {
+			render(
+				<Disabled isDisabled={ false }>
+					<DisabledStatus />
+				</Disabled>
+			);
+			expect( screen.getByText( 'Not disabled' ) ).toBeInTheDocument();
+		} );
+
+		test( "lets components know that they're not disabled via context when the Disabled component is not rendered at all", () => {
+			render( <DisabledStatus /> );
+			expect( screen.getByText( 'Not disabled' ) ).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/disabled/types.ts

@@ -0,0 +1,13 @@
+export interface DisabledProps {
+	/**
+	 * Whether to disable all the descendant fields.
+	 *
+	 * @default true
+	 */
+	isDisabled?: boolean;
+
+	/**
+	 * The children elements.
+	 */
+	children: React.ReactNode;
+}

package/src/dropdown/index.js

@@ -40,6 +40,7 @@ export default function Dropdown( props ) {
 		popoverProps,
 		onClose,
 		onToggle,
+		style,
 	} = props;
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
@@ -95,6 +96,7 @@ export default function Dropdown( props ) {
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
 			tabIndex="-1"
+			style={ style }
 		>
 			{ renderToggle( args ) }
 			{ isOpen && (
@@ -108,11 +110,7 @@ export default function Dropdown( props ) {
 					// This value is used to ensure that the dropdowns
 					// align with the editor header by default.
 					offset={ 13 }
-					anchorRef={
-						! hasAnchorRef
-							? containerRef?.current?.firstChild // Anchor to the rendered toggle.
-							: undefined
-					}
+					anchorRef={ ! hasAnchorRef ? containerRef : undefined }
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { text } from '@storybook/addon-knobs';
+import { text, boolean } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
@@ -25,6 +25,10 @@ export const _default = () => {
 	const label = text( 'Label', 'Select a direction.' );
 	const firstMenuItemLabel = text( 'First Menu Item Label', 'Up' );
 	const secondMenuItemLabel = text( 'First Menu Item Label', 'Down' );
+	const toggleButtonTootip = boolean(
+		'Show tooltip on a toggle button',
+		true
+	);
 
 	const controls = [
 		{
@@ -37,5 +41,12 @@ export const _default = () => {
 		},
 	];
 
-	return <DropdownMenu icon={ menu } label={ label } controls={ controls } />;
+	return (
+		<DropdownMenu
+			icon={ menu }
+			label={ label }
+			controls={ controls }
+			toggleProps={ { showTooltip: toggleButtonTootip } }
+		/>
+	);
 };