@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.2.1

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

@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import React, { useState } from 'react';
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Heading } from '../../heading';
-import { ConfirmDialog } from '..';
-
-export default {
-	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const daText = () =>
-	text( 'message', 'Would you like to privately publish the post now?' );
-
-// 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 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" );
-
-	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 [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState(
-		"Hasn't confirmed or cancelled yet"
-	);
-
-	const handleConfirm = () => {
-		setConfirmVal( 'Confirmed!' );
-		setIsOpen( false );
-	};
-
-	const handleCancel = () => {
-		setConfirmVal( 'Cancelled' );
-		setIsOpen( false );
-	};
-
-	return (
-		<>
-			<ConfirmDialog
-				isOpen={ isOpen }
-				onConfirm={ handleConfirm }
-				onCancel={ handleCancel }
-			>
-				{ daText() }
-			</ConfirmDialog>
-
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-
-			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
-				Open ConfirmDialog
-			</Button>
-		</>
-	);
-};

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

@@ -1,302 +0,0 @@
-/**
- * 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

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-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/date-time/test/utils.js

@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import moment from 'moment';
-
-/**
- * Internal dependencies
- */
-import { getMomentDate } from '../utils';
-
-describe( 'getMomentDate', () => {
-	it( 'should return a Moment object representing a given date string', () => {
-		const currentDate = '1986-10-18T23:00:00';
-		const momentDate = getMomentDate( currentDate );
-
-		expect( moment.isMoment( momentDate ) ).toBe( true );
-		expect( momentDate.isSame( moment( currentDate ) ) ).toBe( true );
-	} );
-
-	it( 'should return null when given a null argument', () => {
-		const currentDate = null;
-		const momentDate = getMomentDate( currentDate );
-
-		expect( momentDate ).toBeNull();
-	} );
-
-	it( 'should return a Moment object representing now when given an undefined argument', () => {
-		const momentDate = getMomentDate();
-
-		expect( moment.isMoment( momentDate ) ).toBe( true );
-	} );
-} );

package/src/date-time/utils.js

@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import moment from 'moment';
-
-/**
- * Create a Moment object from a date string. With no date supplied, default to a Moment
- * object representing now. If a null value is passed, return a null value.
- *
- * @param {?string} date Date representing the currently selected date or null to signify no selection.
- * @return {?moment.Moment} Moment object for selected date or null.
- */
-export const getMomentDate = ( date ) => {
-	if ( null === date ) {
-		return null;
-	}
-	return date ? moment( date ) : moment();
-};