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

package/src/confirm-dialog/component.tsx

@@ -0,0 +1,114 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import React, { useEffect, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type { Ref, KeyboardEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Modal from '../modal';
+import type { OwnProps, DialogInputEvent } from './types';
+import {
+	useContextSystem,
+	contextConnect,
+	WordPressComponentProps,
+} from '../ui/context';
+import { Flex } from '../flex';
+import Button from '../button';
+import { Text } from '../text';
+import { VStack } from '../v-stack';
+
+function ConfirmDialog(
+	props: WordPressComponentProps< OwnProps, 'div', false >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		isOpen: isOpenProp,
+		onConfirm,
+		onCancel,
+		children,
+		...otherProps
+	} = useContextSystem( props, 'ConfirmDialog' );
+
+	const [ isOpen, setIsOpen ] = useState< boolean >();
+	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
+
+	useEffect( () => {
+		// We only allow the dialog to close itself if `isOpenProp` is *not* set.
+		// If `isOpenProp` is set, then it (probably) means it's controlled by a
+		// parent component. In that case, `shouldSelfClose` might do more harm than
+		// good, so we disable it.
+		const isIsOpenSet = typeof isOpenProp !== 'undefined';
+		setIsOpen( isIsOpenSet ? isOpenProp : true );
+		setShouldSelfClose( ! isIsOpenSet );
+	}, [ isOpenProp ] );
+
+	const handleEvent = useCallback(
+		( callback?: ( event: DialogInputEvent ) => void ) => (
+			event: DialogInputEvent
+		) => {
+			callback?.( event );
+			if ( shouldSelfClose ) {
+				setIsOpen( false );
+			}
+		},
+		[ shouldSelfClose, setIsOpen ]
+	);
+
+	const handleEnter = useCallback(
+		( event: KeyboardEvent< HTMLDivElement > ) => {
+			if ( event.key === 'Enter' ) {
+				handleEvent( onConfirm )( event );
+			}
+		},
+		[ handleEvent, onConfirm ]
+	);
+
+	const cancelLabel = __( 'Cancel' );
+	const confirmLabel = __( 'OK' );
+
+	return (
+		<>
+			{ isOpen && (
+				<Modal
+					onRequestClose={ handleEvent( onCancel ) }
+					onKeyDown={ handleEnter }
+					closeButtonLabel={ cancelLabel }
+					isDismissible={ true }
+					ref={ forwardedRef }
+					__experimentalHideHeader
+					{ ...otherProps }
+				>
+					<VStack spacing={ 8 }>
+						<Text>{ children }</Text>
+						<Flex direction="row" justify="flex-end">
+							<Button
+								variant="tertiary"
+								onClick={ handleEvent( onCancel ) }
+							>
+								{ cancelLabel }
+							</Button>
+							<Button
+								variant="primary"
+								onClick={ handleEvent( onConfirm ) }
+							>
+								{ confirmLabel }
+							</Button>
+						</Flex>
+					</VStack>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+export default contextConnect( ConfirmDialog, 'ConfirmDialog' );

package/src/confirm-dialog/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import ConfirmDialog from './component';
+
+export { ConfirmDialog };

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

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

@@ -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,26 @@
+/**
+ * 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/custom-gradient-bar/constants.js

@@ -1,8 +1,3 @@
-export const COLOR_POPOVER_PROPS = {
-	className: 'components-custom-gradient-picker__color-picker-popover',
-	position: 'top',
-};
-
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;

package/src/custom-gradient-bar/control-points.js

@@ -8,8 +8,8 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 
@@ -18,8 +18,8 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  */
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
+import { CustomColorPickerDropdown } from '../color-palette';
 
 import {
 	addControlPoint,
@@ -31,7 +31,6 @@ import {
 	getHorizontalRelativeGradientPosition,
 } from './utils';
 import {
-	COLOR_POPOVER_PROPS,
 	GRADIENT_MARKERS_WIDTH,
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
@@ -74,6 +73,33 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 	);
 }
 
+function GradientColorPickerDropdown( {
+	isRenderedInSidebar,
+	gradientPickerDomRef,
+	...props
+} ) {
+	const popoverProps = useMemo( () => {
+		const result = {
+			className:
+				'components-custom-gradient-picker__color-picker-popover',
+			position: 'top',
+		};
+		if ( isRenderedInSidebar ) {
+			result.anchorRef = gradientPickerDomRef.current;
+			result.position = isRTL() ? 'bottom right' : 'bottom left';
+			result.__unstableForcePosition = true;
+		}
+		return result;
+	}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );
+	return (
+		<CustomColorPickerDropdown
+			isRenderedInSidebar={ isRenderedInSidebar }
+			popoverProps={ popoverProps }
+			{ ...props }
+		/>
+	);
+}
+
 function ControlPoints( {
 	disableRemove,
 	disableAlpha,
@@ -83,6 +109,7 @@ function ControlPoints( {
 	onChange,
 	onStartControlPointChange,
 	onStopControlPointChange,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const controlPointMoveState = useRef();
 
@@ -134,7 +161,9 @@ function ControlPoints( {
 		const initialPosition = point?.position;
 		return (
 			ignoreMarkerPosition !== initialPosition && (
-				<Dropdown
+				<GradientColorPickerDropdown
+					gradientPickerDomRef={ gradientPickerDomRef }
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
 					renderToggle={ ( { isOpen, onToggle } ) => (
@@ -225,7 +254,7 @@ function ControlPoints( {
 									);
 								} }
 							/>
-							{ ! disableRemove && (
+							{ ! disableRemove && controlPoints.length > 2 && (
 								<Button
 									className="components-custom-gradient-picker__remove-control-point"
 									onClick={ () => {
@@ -244,7 +273,6 @@ function ControlPoints( {
 							) }
 						</>
 					) }
-					popoverProps={ COLOR_POPOVER_PROPS }
 				/>
 			)
 		);
@@ -258,10 +286,14 @@ function InsertPoint( {
 	onCloseInserter,
 	insertPosition,
 	disableAlpha,
+	__experimentalIsRenderedInSidebar,
+	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
-		<Dropdown
+		<GradientColorPickerDropdown
+			gradientPickerDomRef={ gradientPickerDomRef }
+			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
 				onCloseInserter();
@@ -314,7 +346,6 @@ function InsertPoint( {
 					} }
 				/>
 			) }
-			popoverProps={ COLOR_POPOVER_PROPS }
 		/>
 	);
 }