@wordpress/components 28.7.0 → 28.8.0

package/src/date-time/date/use-lilius/index.ts

@@ -0,0 +1,394 @@
+/**
+ * This source is a local copy of the use-lilius library, since the original
+ * library is not actively maintained.
+ * @see https://github.com/WordPress/gutenberg/discussions/64968
+ *
+ * use-lilius@2.0.5
+ * https://github.com/Avarios/use-lilius
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2021-Present Danny Tatom
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * External dependencies
+ */
+import {
+	addMonths,
+	addYears,
+	eachDayOfInterval,
+	eachMonthOfInterval,
+	eachWeekOfInterval,
+	endOfMonth,
+	endOfWeek,
+	isAfter,
+	isBefore,
+	isEqual,
+	set,
+	setMonth,
+	setYear,
+	startOfMonth,
+	startOfToday,
+	startOfWeek,
+	subMonths,
+	subYears,
+} from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo, useState } from '@wordpress/element';
+
+export enum Month {
+	JANUARY,
+	FEBRUARY,
+	MARCH,
+	APRIL,
+	MAY,
+	JUNE,
+	JULY,
+	AUGUST,
+	SEPTEMBER,
+	OCTOBER,
+	NOVEMBER,
+	DECEMBER,
+}
+
+export enum Day {
+	SUNDAY,
+	MONDAY,
+	TUESDAY,
+	WEDNESDAY,
+	THURSDAY,
+	FRIDAY,
+	SATURDAY,
+}
+
+export interface Options {
+	/**
+	 * What day a week starts on within the calendar matrix.
+	 *
+	 * @default Day.SUNDAY
+	 */
+	weekStartsOn?: Day;
+
+	/**
+	 * The initial viewing date.
+	 *
+	 * @default new Date()
+	 */
+	viewing?: Date;
+
+	/**
+	 * The initial date(s) selection.
+	 *
+	 * @default []
+	 */
+	selected?: Date[];
+
+	/**
+	 * The number of months in the calendar.
+	 *
+	 * @default 1
+	 */
+	numberOfMonths?: number;
+}
+
+export interface Returns {
+	/**
+	 * Returns a copy of the given date with the time set to 00:00:00:00.
+	 */
+	clearTime: ( date: Date ) => Date;
+
+	/**
+	 * Returns whether or not a date is between 2 other dates (inclusive).
+	 */
+	inRange: ( date: Date, min: Date, max: Date ) => boolean;
+
+	/**
+	 * The date represented in the calendar matrix. Note that
+	 * the month and year are the only parts used.
+	 */
+	viewing: Date;
+
+	/**
+	 * Set the date represented in the calendar matrix. Note that
+	 * the month and year are the only parts used.
+	 */
+	setViewing: React.Dispatch< React.SetStateAction< Date > >;
+
+	/**
+	 * Set the viewing date to today.
+	 */
+	viewToday: () => void;
+
+	/**
+	 * Set the viewing date to the given month.
+	 */
+	viewMonth: ( month: Month ) => void;
+
+	/**
+	 * Set the viewing date to the month before the current.
+	 */
+	viewPreviousMonth: () => void;
+
+	/**
+	 * Set the viewing date to the month after the current.
+	 */
+	viewNextMonth: () => void;
+
+	/**
+	 * Set the viewing date to the given year.
+	 */
+	viewYear: ( year: number ) => void;
+
+	/**
+	 * Set the viewing date to the year before the current.
+	 */
+	viewPreviousYear: () => void;
+
+	/**
+	 * Set the viewing date to the year after the current.
+	 */
+	viewNextYear: () => void;
+
+	/**
+	 * The dates currently selected.
+	 */
+	selected: Date[];
+
+	/**
+	 * Override the currently selected dates.
+	 */
+	setSelected: React.Dispatch< React.SetStateAction< Date[] > >;
+
+	/**
+	 * Reset the selected dates to [].
+	 */
+	clearSelected: () => void;
+
+	/**
+	 * Determine whether or not a date has been selected.
+	 */
+	isSelected: ( date: Date ) => boolean;
+
+	/**
+	 * Select one or more dates.
+	 */
+	select: ( date: Date | Date[], replaceExisting?: boolean ) => void;
+
+	/**
+	 * Deselect one or more dates.
+	 */
+	deselect: ( date: Date | Date[] ) => void;
+
+	/**
+	 * Toggle the selection of a date.
+	 */
+	toggle: ( date: Date, replaceExisting?: boolean ) => void;
+
+	/**
+	 * Select a range of dates (inclusive).
+	 */
+	selectRange: ( start: Date, end: Date, replaceExisting?: boolean ) => void;
+
+	/**
+	 * Deselect a range of dates (inclusive).
+	 */
+	deselectRange: ( start: Date, end: Date ) => void;
+
+	/**
+	 * A matrix of days based on the current viewing date.
+	 */
+	calendar: Date[][][];
+}
+
+const inRange = ( date: Date, min: Date, max: Date ) =>
+	( isEqual( date, min ) || isAfter( date, min ) ) &&
+	( isEqual( date, max ) || isBefore( date, max ) );
+
+const clearTime = ( date: Date ) =>
+	set( date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 } );
+
+export const useLilius = ( {
+	weekStartsOn = Day.SUNDAY,
+	viewing: initialViewing = new Date(),
+	selected: initialSelected = [],
+	numberOfMonths = 1,
+}: Options = {} ): Returns => {
+	const [ viewing, setViewing ] = useState< Date >( initialViewing );
+
+	const viewToday = useCallback(
+		() => setViewing( startOfToday() ),
+		[ setViewing ]
+	);
+
+	const viewMonth = useCallback(
+		( month: Month ) => setViewing( ( v ) => setMonth( v, month ) ),
+		[]
+	);
+
+	const viewPreviousMonth = useCallback(
+		() => setViewing( ( v ) => subMonths( v, 1 ) ),
+		[]
+	);
+
+	const viewNextMonth = useCallback(
+		() => setViewing( ( v ) => addMonths( v, 1 ) ),
+		[]
+	);
+
+	const viewYear = useCallback(
+		( year: number ) => setViewing( ( v ) => setYear( v, year ) ),
+		[]
+	);
+
+	const viewPreviousYear = useCallback(
+		() => setViewing( ( v ) => subYears( v, 1 ) ),
+		[]
+	);
+
+	const viewNextYear = useCallback(
+		() => setViewing( ( v ) => addYears( v, 1 ) ),
+		[]
+	);
+
+	const [ selected, setSelected ] = useState< Date[] >(
+		initialSelected.map( clearTime )
+	);
+
+	const clearSelected = () => setSelected( [] );
+
+	const isSelected = useCallback(
+		( date: Date ) =>
+			selected.findIndex( ( s ) => isEqual( s, date ) ) > -1,
+		[ selected ]
+	);
+
+	const select = useCallback(
+		( date: Date | Date[], replaceExisting?: boolean ) => {
+			if ( replaceExisting ) {
+				setSelected( Array.isArray( date ) ? date : [ date ] );
+			} else {
+				setSelected( ( selectedItems ) =>
+					selectedItems.concat(
+						Array.isArray( date ) ? date : [ date ]
+					)
+				);
+			}
+		},
+		[]
+	);
+
+	const deselect = useCallback(
+		( date: Date | Date[] ) =>
+			setSelected( ( selectedItems ) =>
+				Array.isArray( date )
+					? selectedItems.filter(
+							( s ) =>
+								! date
+									.map( ( d ) => d.getTime() )
+									.includes( s.getTime() )
+					  )
+					: selectedItems.filter( ( s ) => ! isEqual( s, date ) )
+			),
+		[]
+	);
+
+	const toggle = useCallback(
+		( date: Date, replaceExisting?: boolean ) =>
+			isSelected( date )
+				? deselect( date )
+				: select( date, replaceExisting ),
+		[ deselect, isSelected, select ]
+	);
+
+	const selectRange = useCallback(
+		( start: Date, end: Date, replaceExisting?: boolean ) => {
+			if ( replaceExisting ) {
+				setSelected( eachDayOfInterval( { start, end } ) );
+			} else {
+				setSelected( ( selectedItems ) =>
+					selectedItems.concat( eachDayOfInterval( { start, end } ) )
+				);
+			}
+		},
+		[]
+	);
+
+	const deselectRange = useCallback( ( start: Date, end: Date ) => {
+		setSelected( ( selectedItems ) =>
+			selectedItems.filter(
+				( s ) =>
+					! eachDayOfInterval( { start, end } )
+						.map( ( d ) => d.getTime() )
+						.includes( s.getTime() )
+			)
+		);
+	}, [] );
+
+	const calendar = useMemo< Date[][][] >(
+		() =>
+			eachMonthOfInterval( {
+				start: startOfMonth( viewing ),
+				end: endOfMonth( addMonths( viewing, numberOfMonths - 1 ) ),
+			} ).map( ( month ) =>
+				eachWeekOfInterval(
+					{
+						start: startOfMonth( month ),
+						end: endOfMonth( month ),
+					},
+					{ weekStartsOn }
+				).map( ( week ) =>
+					eachDayOfInterval( {
+						start: startOfWeek( week, { weekStartsOn } ),
+						end: endOfWeek( week, { weekStartsOn } ),
+					} )
+				)
+			),
+		[ viewing, weekStartsOn, numberOfMonths ]
+	);
+
+	return {
+		clearTime,
+		inRange,
+		viewing,
+		setViewing,
+		viewToday,
+		viewMonth,
+		viewPreviousMonth,
+		viewNextMonth,
+		viewYear,
+		viewPreviousYear,
+		viewNextYear,
+		selected,
+		setSelected,
+		clearSelected,
+		isSelected,
+		select,
+		deselect,
+		toggle,
+		selectRange,
+		deselectRange,
+		calendar,
+	};
+};

package/src/dropdown-menu-v2/styles.ts

@@ -37,7 +37,7 @@ const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';

package/src/form-toggle/style.scss

@@ -60,6 +60,7 @@ $transition-duration: 0.2s;
 			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
+		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
 		border: math.div($toggle-thumb-size, 2) solid transparent;

package/src/index.ts

@@ -66,6 +66,7 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite/legacy';
+export { Composite } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

package/src/modal/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -37,10 +36,12 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { Spacer } from '../spacer';
+import { useModalExitAnimation } from './use-modal-exit-animation';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
-	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
 
@@ -49,7 +50,7 @@ const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
 	const {
 		bodyOpenClassName = 'modal-open',
@@ -69,7 +70,7 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
@@ -183,6 +184,9 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
 		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
@@ -199,21 +203,21 @@ function UnforwardedModal(
 		};
 	}, [ isContentScrollable, childrenContainerRef ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
-			if ( onRequestClose ) {
-				onRequestClose( event );
-			}
+			closeModal().then( () => onRequestClose( event ) );
 		}
 	}
 
 	const onContentContainerScroll = useCallback(
-		( e: UIEvent< HTMLDivElement > ) => {
+		( e: React.UIEvent< HTMLDivElement > ) => {
 			const scrollY = e?.currentTarget?.scrollTop ?? -1;
 
 			if ( ! hasScrolledContent && scrollY > 0 ) {
@@ -247,7 +251,7 @@ function UnforwardedModal(
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
 			if ( button === 0 && isSameTarget ) {
-				onRequestClose();
+				closeModal().then( () => onRequestClose() );
 			}
 		},
 	};
@@ -258,7 +262,8 @@ function UnforwardedModal(
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
 			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
@@ -270,8 +275,12 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMount !== 'firstContentElement'
@@ -323,13 +332,27 @@ function UnforwardedModal(
 								</div>
 								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel || __( 'Close' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 3 }
+										/>
+										<Button
+											size="small"
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
+											icon={ close }
+											label={
+												closeButtonLabel ||
+												__( 'Close' )
+											}
+										/>
+									</>
 								) }
 							</div>
 						) }

package/src/modal/stories/index.story.tsx

@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { starEmpty, starFilled } from '@wordpress/icons';
+import { fullscreen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -103,22 +103,16 @@ WithsizeSmall.args = {
 };
 WithsizeSmall.storyName = 'With size: small';
 
-const LikeButton = () => {
-	const [ isLiked, setIsLiked ] = useState( false );
-	return (
-		<Button
-			icon={ isLiked ? starFilled : starEmpty }
-			label="Like"
-			onClick={ () => setIsLiked( ! isLiked ) }
-		/>
-	);
-};
-
+/**
+ * The `headerActions` prop can be used to add auxiliary actions to the header, for example a fullscreen mode toggle.
+ */
 export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
-	headerActions: <LikeButton />,
-	isDismissible: false,
+	headerActions: (
+		<Button icon={ fullscreen } label="Fullscreen mode" size="small" />
+	),
+	children: <div style={ { height: '200px' } } />,
 };
 WithHeaderActions.parameters = {
 	...Default.parameters,

package/src/modal/style.scss

@@ -8,8 +8,15 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
-	// This animates the appearance of the white background.
-	@include edit-post__fade-in-animation();
+	// This animates the appearance of the backdrop.
+	@include animation__fade-in();
+
+	&.is-animating-out {
+		// Note: it's important that the fade-out animation doesn't end after the
+		// modal frame's disappear animation, because the component will be removed
+		// from the DOM when that animation ends.
+		@include animation__fade-out($delay: 80ms);
+	}
 }
 
 // The modal window element.
@@ -25,10 +32,17 @@
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
-	animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+	animation-name: components-modal__appear-animation;
+	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 	@include reduce-motion("animation");
 
+	.components-modal__screen-overlay.is-animating-out & {
+		animation-name: components-modal__disappear-animation;
+		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+	}
+
 	// Show a centered modal on bigger screens.
 	@include break-small() {
 		border-radius: $radius-large;
@@ -88,6 +102,19 @@
 	}
 }
 
+// Note: this animation is also used in the animationend JS event listener.
+// Make sure that the animation name is kept in sync across the two files.
+@keyframes components-modal__disappear-animation {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+}
+
 // Fix header to the top so it is always there to provide context to the modal
 // if the content needs to be scrolled (for example, on the keyboard shortcuts
 // modal screen).
@@ -116,11 +143,6 @@
 		margin: 0;
 	}
 
-	.components-button {
-		position: relative;
-		left: $grid-unit-10;
-	}
-
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}