@wordpress/components 28.7.0 → 28.8.1-next.1f6eadc42.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/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

@@ -37,6 +37,7 @@ 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';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
@@ -323,13 +324,21 @@ function UnforwardedModal(
 								</div>
 								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel || __( 'Close' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 3 }
+										/>
+										<Button
+											size="small"
+											onClick={ onRequestClose }
+											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

@@ -116,11 +116,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;
 	}

package/src/navigator/navigator-screen/component.tsx

@@ -17,6 +17,7 @@ import {
 import { useMergeRefs } from '@wordpress/compose';
 import { isRTL as isRTLFn } from '@wordpress/i18n';
 import { escapeAttribute } from '@wordpress/escape-html';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ function UnconnectedNavigatorScreen(
 	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
+	if ( ! /^\//.test( props.path ) ) {
+		warning(
+			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+		);
+	}
+
 	const screenId = useId();
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,

package/src/navigator/test/index.tsx

@@ -642,6 +642,14 @@ describe( 'Navigator', () => {
 		).toHaveAttribute( 'id', INVALID_HTML_ATTRIBUTE.escaped );
 	} );
 
+	it( 'should warn if the `path` prop does not follow the required format', () => {
+		render( <NavigatorScreen path="not-valid">Test</NavigatorScreen> );
+
+		expect( console ).toHaveWarnedWith(
+			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+		);
+	} );
+
 	it( 'should match correctly paths with named arguments', async () => {
 		const user = userEvent.setup();
 

package/src/popover/style.scss

@@ -27,9 +27,10 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 	box-sizing: border-box;
 	width: min-content;
 
-	// Alternate treatment for popovers that put them at elevation zero with high contrast.
+	// Alternate treatment for popovers that put them at elevation zero with high contrast and smaller radius.
 	.is-alternate & {
 		box-shadow: $shadow-popover-border-default-alternate;
+		border-radius: $radius-small;
 	}
 
 	// A style that gives the popover no visible ui.

package/src/private-apis.ts

@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { Composite } from './composite';
-import { useCompositeStore } from './composite/store';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
 import { DropdownMenuV2 } from './dropdown-menu-v2';
@@ -14,13 +12,6 @@ import { lock } from './lock-unlock';
 
 export const privateApis = {};
 lock( privateApis, {
-	CompositeV2: Composite,
-	CompositeGroupV2: Composite.Group,
-	CompositeItemV2: Composite.Item,
-	CompositeRowV2: Composite.Row,
-	CompositeTypeaheadV2: Composite.Typeahead,
-	CompositeHoverV2: Composite.Hover,
-	useCompositeStoreV2: useCompositeStore,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,

package/src/select-control/README.md

@@ -103,7 +103,7 @@ Render a user interface to select multiple users from a list.
 ```jsx
 <SelectControl
 	multiple
-	label={ __( 'Select some users:' ) }
+	label={ __( 'User' ) }
 	value={ this.state.users } // e.g: value = [ 'a', 'c' ]
 	onChange={ ( users ) => {
 		this.setState( { users } );
@@ -126,7 +126,7 @@ const [ item, setItem ] = useState( '' );
 // ...
 
 <SelectControl
-    label={ __( 'Select an item:' ) }
+    label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
     __nextHasNoMarginBottom

package/src/slot-fill/index.tsx

@@ -71,6 +71,7 @@ export function Provider( {
 		</SlotFillProvider>
 	);
 }
+Provider.displayName = 'SlotFillProvider';
 
 export function createSlotFill( key: SlotKey ) {
 	const baseName = typeof key === 'symbol' ? key.description : key;

package/src/tabs/styles.ts

@@ -22,36 +22,65 @@ export const TabListWrapper = styled.div`
 		text-align: start;
 	}
 
-	@media not ( prefers-reduced-motion: reduce ) {
+	@media not ( prefers-reduced-motion ) {
 		&.is-animation-enabled::after {
-			transition-property: left, top, width, height;
+			transition-property: transform;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
 	}
+	--direction-factor: 1;
+	--direction-origin-x: left;
+	--indicator-start: var( --indicator-left );
+	&:dir( rtl ) {
+		--direction-factor: -1;
+		--direction-origin-x: right;
+		--indicator-start: var( --indicator-right );
+	}
 	&::after {
 		content: '';
 		position: absolute;
 		pointer-events: none;
+		transform-origin: var( --direction-origin-x ) top;
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
 		outline-offset: -1px;
 	}
-	&:not( [aria-orientation='vertical'] )::after {
-		bottom: 0;
-		left: var( --indicator-left );
-		width: var( --indicator-width );
-		height: 0;
-		border-bottom: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+
+	/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+	--antialiasing-factor: 100;
+	&:not( [aria-orientation='vertical'] ) {
+		&::after {
+			bottom: 0;
+			height: 0;
+			width: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateX(
+					calc(
+						var( --indicator-start ) * var( --direction-factor ) *
+							1px
+					)
+				)
+				scaleX(
+					calc(
+						var( --indicator-width ) / var( --antialiasing-factor )
+					)
+				);
+			border-bottom: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+		}
 	}
 	&[aria-orientation='vertical']::after {
 		z-index: -1;
+		top: 0;
 		left: 0;
 		width: 100%;
-		top: var( --indicator-top );
-		height: var( --indicator-height );
+		width: calc( var( --antialiasing-factor ) * 1px );
+		transform: translateY( calc( var( --indicator-top ) * 1px ) )
+			scaleY(
+				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
+			);
 		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;

package/src/tabs/tablist.tsx

@@ -78,10 +78,11 @@ export const TabList = forwardRef<
 			onBlur={ onBlur }
 			{ ...otherProps }
 			style={ {
-				'--indicator-left': `${ indicatorPosition.left }px`,
-				'--indicator-top': `${ indicatorPosition.top }px`,
-				'--indicator-width': `${ indicatorPosition.width }px`,
-				'--indicator-height': `${ indicatorPosition.height }px`,
+				'--indicator-top': indicatorPosition.top,
+				'--indicator-right': indicatorPosition.right,
+				'--indicator-left': indicatorPosition.left,
+				'--indicator-width': indicatorPosition.width,
+				'--indicator-height': indicatorPosition.height,
 				...otherProps.style,
 			} }
 			className={ clsx(