@wordpress/components 28.6.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/date-time/time/test/index.tsx

@@ -281,12 +281,9 @@ describe( 'TimePicker', () => {
 		expect(
 			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
 		).toBe( '00' );
-		/**
-		 * This is not ideal, but best of we can do for now until we refactor
-		 * AM/PM into accessible elements, like radio buttons.
-		 */
-		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
-		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
+
+		expect( screen.getByRole( 'radio', { name: 'AM' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'PM' } ) ).toBeChecked();
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {

package/src/date-time/time/time-input/index.tsx

@@ -20,8 +20,6 @@ import {
 	Fieldset,
 } from '../styles';
 import { HStack } from '../../../h-stack';
-import Button from '../../../button';
-import ButtonGroup from '../../../button-group';
 import {
 	from12hTo24h,
 	from24hTo12h,
@@ -32,6 +30,10 @@ import type { TimeInputProps } from '../../types';
 import type { InputChangeCallback } from '../../../input-control/types';
 import { useControlledValue } from '../../../utils';
 import BaseControl from '../../../base-control';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../../../toggle-group-control';
 
 export function TimeInput( {
 	value: valueProp,
@@ -164,30 +166,28 @@ export function TimeInput( {
 					/>
 				</TimeWrapper>
 				{ is12Hour && (
-					<ButtonGroup
-						className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						isBlock
+						label={ __( 'Select AM or PM' ) }
+						hideLabelFromVision
+						value={ dayPeriod }
+						onChange={ ( newValue ) => {
+							buildAmPmChangeCallback(
+								newValue as 'AM' | 'PM'
+							)();
+						} }
 					>
-						<Button
-							className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'AM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'AM' ) }
-						>
-							{ __( 'AM' ) }
-						</Button>
-						<Button
-							className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-							variant={
-								dayPeriod === 'PM' ? 'primary' : 'secondary'
-							}
-							__next40pxDefaultSize
-							onClick={ buildAmPmChangeCallback( 'PM' ) }
-						>
-							{ __( 'PM' ) }
-						</Button>
-					</ButtonGroup>
+						<ToggleGroupControlOption
+							value="AM"
+							label={ __( 'AM' ) }
+						/>
+						<ToggleGroupControlOption
+							value="PM"
+							label={ __( 'PM' ) }
+						/>
+					</ToggleGroupControl>
 				) }
 			</HStack>
 		</Wrapper>

package/src/date-time/time/time-input/test/index.tsx

@@ -80,12 +80,11 @@ describe( 'TimeInput', () => {
 		const minutesInput = screen.getByRole( 'spinbutton', {
 			name: 'Minutes',
 		} );
-		const amButton = screen.getByRole( 'button', { name: 'AM' } );
-		const pmButton = screen.getByRole( 'button', { name: 'PM' } );
+		const amButton = screen.getByRole( 'radio', { name: 'AM' } );
+		const pmButton = screen.getByRole( 'radio', { name: 'PM' } );
 
-		// TODO: Update assert these states through the accessibility tree rather than through styles, see: https://github.com/WordPress/gutenberg/issues/61163
-		expect( amButton ).toHaveClass( 'is-primary' );
-		expect( pmButton ).not.toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
+		expect( pmButton ).not.toBeChecked();
 		expect( hoursInput ).not.toHaveValue( 0 );
 		expect( hoursInput ).toHaveValue( 12 );
 
@@ -94,7 +93,7 @@ describe( 'TimeInput', () => {
 		await user.keyboard( '{Tab}' );
 
 		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
-		expect( amButton ).toHaveClass( 'is-primary' );
+		expect( amButton ).toBeChecked();
 
 		await user.clear( hoursInput );
 		await user.type( hoursInput, '12' );
@@ -107,7 +106,7 @@ describe( 'TimeInput', () => {
 			hours: 12,
 			minutes: 35,
 		} );
-		expect( pmButton ).toHaveClass( 'is-primary' );
+		expect( pmButton ).toBeChecked();
 	} );
 
 	it( 'should call onChange with defined minutes steps', async () => {

package/src/dimension-control/README.md

@@ -1,5 +1,9 @@
 # DimensionControl
 
+<div class="callout callout-alert">
+This component is deprecated.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>

package/src/dimension-control/index.tsx

@@ -17,6 +17,7 @@ import sizesTable, { findSizeBySlug } from './sizes';
 import type { DimensionControlProps, Size } from './types';
 import type { SelectControlSingleSelectionProps } from '../select-control/types';
 import { ContextSystemProvider } from '../context';
+import deprecated from '@wordpress/deprecated';
 
 const CONTEXT_VALUE = {
 	BaseControl: {
@@ -29,7 +30,7 @@ const CONTEXT_VALUE = {
 /**
  * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
  *
- * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+ * @deprecated
  *
  * ```jsx
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
@@ -62,6 +63,11 @@ export function DimensionControl( props: DimensionControlProps ) {
 		className = '',
 	} = props;
 
+	deprecated( 'wp.components.DimensionControl', {
+		since: '6.7',
+		version: '7.0',
+	} );
+
 	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
 		( val ) => {
 			const theSize = findSizeBySlug( sizes, val );

package/src/dimension-control/stories/index.story.tsx

@@ -13,9 +13,15 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This component is deprecated.
+ */
 const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
-	title: 'Components (Experimental)/DimensionControl',
+	title: 'Components (Deprecated)/DimensionControl',
+	id: 'components-dimensioncontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },
@@ -42,7 +48,6 @@ const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 );
 
 export const Default = Template.bind( {} );
-
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	label: 'Please select a size',

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -45,7 +45,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -157,8 +157,8 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -249,7 +249,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -327,7 +327,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -439,8 +439,8 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -541,7 +541,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -619,7 +619,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -731,8 +731,8 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -845,7 +845,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
@@ -923,7 +923,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   min-height: 0;
 }
 
-.emotion-6:focus-within:not( :has( :is( .em5sgkm7, .emotion-19 ):focus-within ) ) .emotion-26 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -1035,8 +1035,8 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 }
 
 .emotion-21 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
   position: absolute;
   pointer-events: none;
   right: 0;
@@ -1149,7 +1149,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-7"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >