@wordpress/components 19.8.3 → 19.10.0

package/src/button/test/index.js

@@ -164,7 +164,7 @@ describe( 'Button', () => {
 			expect( buttonDescription ).toBe( 'Description text' );
 		} );
 
-		it( 'should populate tooltip with describedBy content', () => {
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
 			const buttonTooltip = shallow(
 				<Button
 					describedBy="Description text"
@@ -173,6 +173,21 @@ describe( 'Button', () => {
 				/>
 			).find( 'Tooltip' );
 
+			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Label' );
+		} );
+
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+			const buttonTooltip = shallow(
+				<Button
+					label="Label"
+					describedBy="Description text"
+					icon={ plusCircle }
+					showTooltip
+				>
+					Children
+				</Button>
+			).find( 'Tooltip' );
+
 			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Description text' );
 		} );
 

package/src/circular-option-picker/index.js

@@ -87,8 +87,7 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 				'components-circular-option-picker__clear',
 				className
 			) }
-			isSmall
-			variant="secondary"
+			variant="tertiary"
 			{ ...additionalProps }
 		>
 			{ children }

package/src/color-palette/README.md

@@ -41,7 +41,6 @@ classes to be applied to the container.
 
 -   Type: `String`
 -   Required: No
--   Default: `Select or Upload Media`
 
 ### clearable
 

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

@@ -1186,13 +1186,12 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 >
                   <ForwardRef(Button)
                     className="components-circular-option-picker__clear"
-                    isSmall={true}
                     onClick={[Function]}
-                    variant="secondary"
+                    variant="tertiary"
                   >
                     <button
                       aria-describedby={null}
-                      className="components-button components-circular-option-picker__clear is-secondary is-small"
+                      className="components-button components-circular-option-picker__clear is-tertiary"
                       onClick={[Function]}
                       type="button"
                     >

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -15,102 +10,42 @@ import Button from '../../button';
 import { Heading } from '../../heading';
 import { ConfirmDialog } from '..';
 
-export default {
+const meta = {
 	component: ConfirmDialog,
 	title: 'Components (Experimental)/ConfirmDialog',
+	argTypes: {
+		children: {
+			control: { type: 'text' },
+		},
+		confirmButtonText: {
+			control: { type: 'text' },
+		},
+		cancelButtonText: {
+			control: { type: 'text' },
+		},
+		isOpen: {
+			control: { type: null },
+		},
+		onConfirm: {
+			control: { type: null },
+		},
+		onCancel: {
+			control: { type: null },
+		},
+	},
+	args: {
+		children: 'Would you like to privately publish the post now?',
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-const daText = () =>
-	text( 'message', 'Would you like to privately publish the post now?' );
-const daCancelText = () => text( 'cancel button', 'No thanks' );
-const daConfirmText = () => text( 'confirm button', 'Yes please!' );
-
-// Simplest usage: just declare the component with the required `onConfirm` prop.
-export const _default = () => {
-	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
-
-	return (
-		<>
-			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
-				{ daText() }
-			</ConfirmDialog>
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-export const WithCustomButtonLabels = () => {
-	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
-
-	return (
-		<>
-			<ConfirmDialog
-				onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
-				cancelButtonText={ daCancelText() }
-				confirmButtonText={ daConfirmText() }
-			>
-				{ daText() }
-			</ConfirmDialog>
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-export const WithJSXMessage = () => {
-	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
-
-	return (
-		<>
-			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
-				<Heading level={ 2 }>{ daText() }</Heading>
-			</ConfirmDialog>
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-export const VeeeryLongMessage = () => {
-	const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
+export default meta;
 
-	return (
-		<>
-			<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
-				{ daText().repeat( 20 ) }
-			</ConfirmDialog>
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-export const UncontrolledAndWithExplicitOnCancel = () => {
-	const [ confirmVal, setConfirmVal ] = useState(
-		"Hasn't confirmed or cancelled yet"
-	);
-
-	return (
-		<>
-			<ConfirmDialog
-				onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
-				onCancel={ () => setConfirmVal( 'Cancelled' ) }
-			>
-				{ daText() }
-			</ConfirmDialog>
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-// Controlled `ConfirmDialog`s require both `onConfirm` *and* `onCancel to be passed
-// It's expected that the user will then use it to hide the dialog, too (see the
-// `setIsOpen` calls below).
-export const Controlled = () => {
+const Template = ( args ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState(
-		"Hasn't confirmed or cancelled yet"
-	);
+	const [ confirmVal, setConfirmVal ] = useState( '' );
 
 	const handleConfirm = () => {
 		setConfirmVal( 'Confirmed!' );
@@ -121,22 +56,75 @@ export const Controlled = () => {
 		setConfirmVal( 'Cancelled' );
 		setIsOpen( false );
 	};
-
 	return (
 		<>
+			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
+				Open ConfirmDialog
+			</Button>
+
 			<ConfirmDialog
+				{ ...args }
 				isOpen={ isOpen }
 				onConfirm={ handleConfirm }
 				onCancel={ handleCancel }
 			>
-				{ daText() }
+				{ args.children }
 			</ConfirmDialog>
 
 			<Heading level={ 1 }>{ confirmVal }</Heading>
-
-			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
-				Open ConfirmDialog
-			</Button>
 		</>
 	);
 };
+
+// Simplest usage: just declare the component with the required `onConfirm` prop. Note: the `onCancel` prop is optional here, unless you'd like to render the component in Controlled mode (see below)
+export const _default = Template.bind( {} );
+const _defaultSnippet = `() => {
+  const [ isOpen, setIsOpen ] = useState( false );
+  const [ confirmVal, setConfirmVal ] = useState('');
+
+  const handleConfirm = () => {
+    setConfirmVal( 'Confirmed!' );
+    setIsOpen( false );
+  };
+
+  const handleCancel = () => {
+    setConfirmVal( 'Cancelled' );
+    setIsOpen( false );
+  };
+
+  return (
+    <>
+    <ConfirmDialog
+      isOpen={ isOpen }
+      onConfirm={ handleConfirm }
+      onCancel={ handleCancel }
+    >
+      Would you like to privately publish the post now?
+    </ConfirmDialog>
+
+    <Heading level={ 1 }>{ confirmVal }</Heading>
+
+    <Button variant="primary" onClick={ () => setIsOpen( true ) }>
+      Open ConfirmDialog
+    </Button>
+    </>
+    );
+  };`;
+_default.args = {};
+_default.parameters = {
+	docs: {
+		source: {
+			code: _defaultSnippet,
+			language: 'jsx',
+			type: 'auto',
+			format: 'true',
+		},
+	},
+};
+
+// To customize button text, pass the `cancelButtonText` and/or `confirmButtonText` props.
+export const withCustomButtonLabels = Template.bind( {} );
+withCustomButtonLabels.args = {
+	cancelButtonText: 'No thanks',
+	confirmButtonText: 'Yes please!',
+};

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

@@ -70,3 +70,22 @@ export const WithDaysHighlighted = () => {
 		/>
 	);
 };
+
+/**
+ * You can mark particular dates as invalid using the `isInvalidDate` prop. This
+ * prevents the user from being able to select it.
+ */
+export const WithInvalidDates = () => {
+	const [ currentDate, setCurrentDate ] = useState( now );
+
+	return (
+		<DateTimePicker
+			currentDate={ currentDate }
+			onChange={ setCurrentDate }
+			isInvalidDate={ ( date ) =>
+				// Mark Saturdays and Sundays as invalid.
+				date.getDay() === 0 || date.getDay() === 6
+			}
+		/>
+	);
+};

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

@@ -1,97 +1,126 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
 import moment from 'moment';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'react-dates/initialize';
 
 /**
  * Internal dependencies
  */
 import DatePicker from '../date';
 
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-
 describe( 'DatePicker', () => {
-	it( 'should pass down a moment object for currentDate', () => {
-		const currentDate = '1986-10-18T23:00:00';
-		const wrapper = shallow( <DatePicker currentDate={ currentDate } /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
-		expect( date.isSame( moment( currentDate ) ) ).toBe( true );
+	it( 'should highlight the current date', () => {
+		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 outdated 'react-dates' package.
+		// TODO: Update 'react-dates'.
+		expect( console ).toHaveWarned();
 	} );
 
-	it( 'should pass down a null date when currentDate is set to null', () => {
-		const wrapper = shallow( <DatePicker currentDate={ null } /> );
-		expect( wrapper.children().props().date ).toBeNull();
+	it( "should highlight today's date when not provided a currentDate", () => {
+		render( <DatePicker /> );
+
+		const todayDescription = moment().format( 'dddd, MMM D, YYYY' );
+		expect(
+			screen.getByRole( 'button', { name: todayDescription } )
+		).toHaveClass( 'CalendarDay__selected' );
 	} );
 
-	it( 'should pass down a moment object for now when currentDate is undefined', () => {
-		const wrapper = shallow( <DatePicker /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
+	it( 'should call onChange when a day is selected', async () => {
+		const user = userEvent.setup( { delay: null } );
+
+		const onChange = jest.fn();
+
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Friday, May 20, 2022' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2022-05-20T11:00:00' );
 	} );
 
-	describe( 'onChangeMoment', () => {
-		it( 'should call onChange with a formated date of the input', () => {
-			const onChangeSpy = jest.fn();
-			const currentDate = '1986-10-18T11:00:00';
-			const wrapper = shallow(
-				<DatePicker
-					currentDate={ currentDate }
-					onChange={ onChangeSpy }
-				/>
-			);
-			const newDate = moment();
-
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect( onChangeSpy ).toHaveBeenCalledWith(
-				newDate.format( TIMEZONELESS_FORMAT )
-			);
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is undefined', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow( <DatePicker onChange={ onChangeSpy } /> );
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is null', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow(
-				<DatePicker currentDate={ null } onChange={ onChangeSpy } />
-			);
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
+	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
+		const user = userEvent.setup( { delay: null } );
+
+		const onMonthPreviewed = jest.fn();
+		const onChange = jest.fn();
+
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				onMonthPreviewed={ onMonthPreviewed }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Move forward to switch to the next month.',
+			} )
+		);
+
+		expect( onMonthPreviewed ).toHaveBeenCalledWith(
+			expect.stringMatching( /^2022-06/ )
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: 'Monday, June 20, 2022' } )
+		);
+
+		expect( onChange ).toHaveBeenCalledWith( '2022-06-20T11:00:00' );
+	} );
+
+	it( 'should highlight events on the calendar', () => {
+		render(
+			<DatePicker
+				currentDate="2022-05-02T11:00:00"
+				events={ [
+					{ date: new Date( '2022-05-04T00:00:00' ) },
+					{ date: new Date( '2022-05-19T00:00:00' ) },
+				] }
+			/>
+		);
+
+		expect(
+			screen
+				.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.',
+		] );
+	} );
+
+	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' );
 	} );
 } );

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 { __experimentalUseDisabled as 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 }
 			>