@wordpress/components 32.5.0 → 32.6.0

package/src/autocomplete/test/get-autocomplete-match.ts

@@ -0,0 +1,338 @@
+/**
+ * Internal dependencies
+ */
+import { getAutocompleteMatch } from '../get-autocomplete-match';
+import type { WPCompleter } from '../types';
+
+const createCompleter = (
+	overrides: Partial< WPCompleter > = {}
+): WPCompleter => ( {
+	name: 'test',
+	triggerPrefix: '/',
+	options: [],
+	getOptionLabel: ( option: any ) => option,
+	...overrides,
+} );
+
+describe( 'getAutocompleteMatch', () => {
+	it( 'should return null for empty text content', () => {
+		const completers = [ createCompleter() ];
+		expect(
+			getAutocompleteMatch( '', completers, 0, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should return null when no completers are provided', () => {
+		expect(
+			getAutocompleteMatch( 'some text /', [], 0, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should return null when trigger prefix is not found in text', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		expect(
+			getAutocompleteMatch(
+				'no trigger here',
+				completers,
+				1,
+				false,
+				() => ''
+			)
+		).toBeNull();
+	} );
+
+	it( 'should match a simple trigger prefix', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		const result = getAutocompleteMatch(
+			'some text /query',
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).toEqual( {
+			completer: completers[ 0 ],
+			filterValue: 'query',
+		} );
+	} );
+
+	it( 'should return empty filterValue when only trigger is typed', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		const result = getAutocompleteMatch(
+			'hello @',
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).toEqual( {
+			completer: completers[ 0 ],
+			filterValue: '',
+		} );
+	} );
+
+	it( 'should prefer the rightmost matching trigger when multiple completers match', () => {
+		const slashCompleter = createCompleter( {
+			name: 'slash',
+			triggerPrefix: '/',
+		} );
+		const atCompleter = createCompleter( {
+			name: 'at',
+			triggerPrefix: '@',
+		} );
+		const result = getAutocompleteMatch(
+			'/command some text @user',
+			[ slashCompleter, atCompleter ],
+			1,
+			false,
+			() => ''
+		);
+		expect( result?.completer.name ).toBe( 'at' );
+	} );
+
+	it( 'should return null when text after trigger is too long (>50 chars)', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		const longText = '/' + 'a'.repeat( 51 );
+		expect(
+			getAutocompleteMatch( longText, completers, 1, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should match when text after trigger is exactly 50 chars', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		const text = '/' + 'a'.repeat( 50 );
+		const result = getAutocompleteMatch(
+			text,
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+		expect( result?.filterValue ).toBe( 'a'.repeat( 50 ) );
+	} );
+
+	it( 'should return null on mismatch with multiple words and no backspacing', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		// 4 words from trigger, mismatch (filteredOptionsLength=0), not backspacing
+		expect(
+			getAutocompleteMatch(
+				'text @one two three four',
+				completers,
+				0,
+				false,
+				() => ''
+			)
+		).toBeNull();
+	} );
+
+	it( 'should still match on mismatch when there is only one trigger word', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		const result = getAutocompleteMatch(
+			'text @xyz',
+			completers,
+			0,
+			false,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+		expect( result?.filterValue ).toBe( 'xyz' );
+	} );
+
+	it( 'should allow matching while backspacing within 3 words of trigger', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		const result = getAutocompleteMatch(
+			'text @one two three',
+			completers,
+			0,
+			true,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+	} );
+
+	it( 'should NOT match while backspacing if more than 3 words from trigger', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		expect(
+			getAutocompleteMatch(
+				'text @one two three four',
+				completers,
+				0,
+				true,
+				() => ''
+			)
+		).toBeNull();
+	} );
+
+	it( 'should return null when text after trigger starts with whitespace', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		expect(
+			getAutocompleteMatch( '/ query', completers, 1, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should return null when text after trigger ends with multiple spaces', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		expect(
+			getAutocompleteMatch( '/query  ', completers, 1, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should respect allowContext returning false', () => {
+		const completers = [
+			createCompleter( {
+				triggerPrefix: '@',
+				allowContext: () => false,
+			} ),
+		];
+		expect(
+			getAutocompleteMatch( 'text @user', completers, 1, false, () => '' )
+		).toBeNull();
+	} );
+
+	it( 'should pass correct before/after text to allowContext', () => {
+		const allowContext = jest.fn().mockReturnValue( true );
+		const completers = [
+			createCompleter( {
+				triggerPrefix: '@',
+				allowContext,
+			} ),
+		];
+		getAutocompleteMatch(
+			'before @user',
+			completers,
+			1,
+			false,
+			() => 'after'
+		);
+		expect( allowContext ).toHaveBeenCalledWith( 'before ', 'after' );
+	} );
+
+	it( 'should handle accented characters in filter value', () => {
+		const completers = [ createCompleter( { triggerPrefix: '@' } ) ];
+		const result = getAutocompleteMatch(
+			'text @café',
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+		expect( result?.filterValue ).toBe( 'cafe' );
+	} );
+
+	it( 'should match the longer trigger when prefixes overlap', () => {
+		const singleAt = createCompleter( {
+			name: 'single',
+			triggerPrefix: '@',
+		} );
+		const doubleAt = createCompleter( {
+			name: 'double',
+			triggerPrefix: '@@',
+		} );
+		const result = getAutocompleteMatch(
+			'@@user',
+			[ singleAt, doubleAt ],
+			1,
+			false,
+			() => ''
+		);
+		expect( result?.completer.name ).toBe( 'double' );
+		expect( result?.filterValue ).toBe( 'user' );
+	} );
+
+	it( 'should match the shorter trigger when only it is present', () => {
+		const singleAt = createCompleter( {
+			name: 'single',
+			triggerPrefix: '@',
+		} );
+		const doubleAt = createCompleter( {
+			name: 'double',
+			triggerPrefix: '@@',
+		} );
+		const result = getAutocompleteMatch(
+			'hello @user',
+			[ singleAt, doubleAt ],
+			1,
+			false,
+			() => ''
+		);
+		expect( result?.completer.name ).toBe( 'single' );
+		expect( result?.filterValue ).toBe( 'user' );
+	} );
+
+	it( 'should handle special regex characters in trigger prefix', () => {
+		const completers = [ createCompleter( { triggerPrefix: '$$' } ) ];
+		const result = getAutocompleteMatch(
+			'text $$query',
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+		expect( result?.filterValue ).toBe( 'query' );
+	} );
+
+	it( 'should match with spaces in filter value (single space)', () => {
+		const completers = [ createCompleter( { triggerPrefix: '/' } ) ];
+		const result = getAutocompleteMatch(
+			'/hello world',
+			completers,
+			1,
+			false,
+			() => ''
+		);
+		expect( result ).not.toBeNull();
+		expect( result?.filterValue ).toBe( 'hello world' );
+	} );
+
+	it.each( [
+		{
+			text: 'café @user',
+			trigger: '@',
+			expected: 'user',
+			desc: 'accented text before trigger',
+		},
+		{
+			text: 'naïve /command',
+			trigger: '/',
+			expected: 'command',
+			desc: 'accented text before trigger (diaeresis)',
+		},
+		{
+			text: 'résumé @josé',
+			trigger: '@',
+			expected: 'jose',
+			desc: 'accents both before and after trigger',
+		},
+		{
+			text: '@café',
+			trigger: '@',
+			expected: 'cafe',
+			desc: 'accented text after trigger only',
+		},
+		{
+			text: 'a /héllo wörld',
+			trigger: '/',
+			expected: 'hello world',
+			desc: 'accented multi-word filter value',
+		},
+	] )(
+		'should handle accents correctly: $desc',
+		( { text, trigger, expected } ) => {
+			const completers = [
+				createCompleter( { triggerPrefix: trigger } ),
+			];
+			const result = getAutocompleteMatch(
+				text,
+				completers,
+				1,
+				false,
+				() => ''
+			);
+			expect( result ).not.toBeNull();
+			expect( result?.filterValue ).toBe( expected );
+		}
+	);
+} );

package/src/autocomplete/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -12,10 +12,119 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getAutoCompleterUI } from '../autocompleter-ui';
+import { AutocompleterUI } from '../autocompleter-ui';
+import { useLastDifferentValue } from '..';
 
 type FruitOption = { visual: string; name: string; id: number };
 
+function makeRecord( text: string ) {
+	return {
+		text,
+		formats: [],
+		replacements: [],
+		start: text.length,
+		end: text.length,
+	};
+}
+
+describe( 'useLastDifferentValue', () => {
+	it( 'should return the current record on first render', () => {
+		const record = makeRecord( 'Hello' );
+		const { result } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record } }
+		);
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the previous record when text changes', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should not update when re-rendered with a new reference but same text', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// RESET_BLOCKS creates a new record object with the same text.
+		const record3 = makeRecord( 'Hello/' );
+		rerender( { value: record3 } );
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should survive multiple same-text re-renders', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		// Multiple syncs, each producing new references with the same text.
+		for ( let i = 0; i < 5; i++ ) {
+			rerender( { value: makeRecord( 'Hello/' ) } );
+		}
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should track consecutive text changes correctly', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'A' ) } }
+		);
+
+		rerender( { value: makeRecord( 'AB' ) } );
+		expect( result.current.text ).toBe( 'A' );
+
+		rerender( { value: makeRecord( 'ABC' ) } );
+		expect( result.current.text ).toBe( 'AB' );
+
+		rerender( { value: makeRecord( 'ABCD' ) } );
+		expect( result.current.text ).toBe( 'ABC' );
+	} );
+
+	it( 'should update when cursor position changes without text change', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'Hello' ) } }
+		);
+
+		// User types "/"
+		rerender( { value: makeRecord( 'Hello/' ) } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// User moves cursor left (same text, different position).
+		rerender( {
+			value: { ...makeRecord( 'Hello/' ), start: 0, end: 0 },
+		} );
+
+		// The returned record should now match the current text,
+		// so that didUserInput evaluates to false.
+		expect( result.current.text ).toBe( 'Hello/' );
+	} );
+} );
+
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {
@@ -57,8 +166,6 @@ describe( 'AutocompleterUI', () => {
 				},
 			};
 
-			const AutocompleterUI = getAutoCompleterUI( autocompleter );
-
 			const OtherElement = <div>Other Element</div>;
 
 			const Container = () => {
@@ -67,6 +174,7 @@ describe( 'AutocompleterUI', () => {
 				return (
 					<div>
 						<AutocompleterUI
+							autocompleter={ autocompleter }
 							className="test"
 							filterValue="Apple"
 							instanceId={ 1 }

package/src/autocomplete/types.ts

@@ -109,6 +109,10 @@ export type WPCompleter< TCompleterOption = any > = {
 type ContentRef = React.RefObject< HTMLElement | null >;
 
 export type AutocompleterUIProps = {
+	/**
+	 * The autocompleter configuration object.
+	 */
+	autocompleter: WPCompleter;
 	/**
 	 * The value to filter the options by.
 	 */
@@ -138,20 +142,10 @@ export type AutocompleterUIProps = {
 	 * A function to be called when an option is selected.
 	 */
 	onSelect: ( option: KeyedOption ) => void;
-	/**
-	 * A function to be called when the completer is reset
-	 * (e.g. when the user hits the escape key).
-	 */
-	onReset?: () => void;
 	/**
 	 * A function that defines the behavior of the completer when it is reset
 	 */
 	reset: ( event: Event ) => void;
-	// This is optional because it's still needed for mobile/native.
-	/**
-	 * The rich text value object the autocompleter is being applied to.
-	 */
-	value?: RichTextValue;
 	/**
 	 * A ref containing the editable element that will serve as the anchor for
 	 * `Autocomplete`'s `Popover`.
@@ -192,6 +186,19 @@ export type UseAutocompleteProps = {
 	contentRef: ContentRef;
 };
 
+export type AutocompleteState = {
+	selectedIndex: number;
+	filteredOptions: KeyedOption[];
+	filterValue: string;
+	autocompleter: WPCompleter | null;
+};
+
+export type AutocompleteAction =
+	| { type: 'RESET' }
+	| { type: 'SELECT'; index: number }
+	| { type: 'OPTIONS'; options: KeyedOption[] }
+	| { type: 'MATCH'; completer: WPCompleter; query: string };
+
 export type AutocompleteProps = UseAutocompleteProps & {
 	/**
 	 * A function that returns nodes to be rendered within the Autocomplete.

package/src/box-control/index.tsx

@@ -21,17 +21,12 @@ import {
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
-	getInitialSide,
 	isValueMixed,
 	isValuesDefined,
 	getAllowedSides,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
-import type {
-	BoxControlIconProps,
-	BoxControlProps,
-	BoxControlValue,
-} from './types';
+import type { BoxControlProps, BoxControlValue } from './types';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const defaultInputProps = {
@@ -101,10 +96,6 @@ function BoxControl( {
 		! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
 	);
 
-	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
-		getInitialSide( isLinked, splitOnAxis )
-	);
-
 	// Tracking selected units via internal state allows filtering of CSS unit
 	// only values from being saved while maintaining preexisting unit selection
 	// behaviour. Filtering CSS only values prevents invalid style values.
@@ -120,14 +111,6 @@ function BoxControl( {
 
 	const toggleLinked = () => {
 		setIsLinked( ! isLinked );
-		setSide( getInitialSide( ! isLinked, splitOnAxis ) );
-	};
-
-	const handleOnFocus = (
-		_event: React.FocusEvent< HTMLInputElement >,
-		{ side: nextSide }: { side: typeof side }
-	) => {
-		setSide( nextSide );
 	};
 
 	const handleOnChange = ( nextValues: BoxControlValue ) => {
@@ -148,7 +131,6 @@ function BoxControl( {
 		onMouseOut,
 		...inputProps,
 		onChange: handleOnChange,
-		onFocus: handleOnFocus,
 		isLinked,
 		units,
 		selectedUnits,

package/src/box-control/utils.ts

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -13,7 +14,6 @@ import type {
 	CustomValueUnits,
 	Preset,
 } from './types';
-import deprecated from '@wordpress/deprecated';
 
 export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
 	px: { max: 300, step: 1 },
@@ -160,24 +160,6 @@ export function isValuesDefined( values?: BoxControlValue ) {
 	);
 }
 
-/**
- * Get initial selected side, factoring in whether the sides are linked,
- * and whether the vertical / horizontal directions are grouped via splitOnAxis.
- *
- * @param isLinked    Whether the box control's fields are linked.
- * @param splitOnAxis Whether splitting by horizontal or vertical axis.
- * @return The initial side.
- */
-export function getInitialSide( isLinked: boolean, splitOnAxis: boolean ) {
-	let initialSide: keyof typeof LABELS = 'all';
-
-	if ( ! isLinked ) {
-		initialSide = splitOnAxis ? 'vertical' : 'top';
-	}
-
-	return initialSide;
-}
-
 /**
  * Normalizes provided sides configuration to an array containing only top,
  * right, bottom and left. This essentially just maps `horizontal` or `vertical`

package/src/button/README.md

@@ -77,7 +77,7 @@ If provided, renders `a` instead of `button`.
 
 ### `icon`
 
- - Type: `IconType`
+ - Type: `IconType | null`
  - Required: No
 
 If provided, renders an Icon component inside the button.

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

@@ -18,7 +18,6 @@ import {
 /**
  * Internal dependencies
  */
-import './style.css';
 import Button from '..';
 
 const meta: Meta< typeof Button > = {

package/src/button/style.scss

@@ -18,7 +18,7 @@
 	font-weight: $font-weight-medium;
 	margin: 0;
 	border: 0;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	appearance: none;
 	background: none;
 
@@ -410,12 +410,6 @@
 			fill: CanvasText;
 		}
 	}
-
-	// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
-	// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
-	.components-visually-hidden {
-		height: auto;
-	}
 }
 
 @keyframes components-button__busy-animation {

package/src/calendar/style.scss

@@ -53,7 +53,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	background: none;
 	padding: 0;
 	margin: 0;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	justify-content: center;
 	align-items: center;
 	display: flex;
@@ -127,7 +127,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	background: none;
 	padding: 0;
 	margin: 0;
-	cursor: pointer;
+	cursor: var(--wpds-cursor-control);
 	appearance: none;
 	display: inline-flex;
 	align-items: center;
@@ -244,7 +244,7 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 		}
 
 		&:disabled::before {
-			background-color: $components-color-disabled;
+			background-color: $components-color-gray-400;
 		}
 
 		&:hover:not(:disabled)::before {