@wordpress/components 28.9.0 → 28.10.0

package/src/drop-zone/style.scss

@@ -42,7 +42,7 @@
 		transform: scale(0.9);
 	}
 
-	&.is-active:not(.has-dragged-out) {
+	&.is-active.is-dragging-over-element {
 		.components-drop-zone__content {
 			opacity: 1;
 

package/src/modal/aria-helper.ts

@@ -47,6 +47,7 @@ export function elementShouldBeHidden( element: Element ) {
 	const role = element.getAttribute( 'role' );
 	return ! (
 		element.tagName === 'SCRIPT' ||
+		element.hasAttribute( 'hidden' ) ||
 		element.hasAttribute( 'aria-hidden' ) ||
 		element.hasAttribute( 'aria-live' ) ||
 		( role && LIVE_REGION_ARIA_ROLES.has( role ) )

package/src/palette-edit/index.tsx

@@ -49,7 +49,6 @@ import { kebabCase } from '../utils/strings';
 import type {
 	Color,
 	ColorPickerPopoverProps,
-	Gradient,
 	NameInputProps,
 	OptionProps,
 	PaletteEditListViewProps,
@@ -70,6 +69,28 @@ function NameInput( { value, onChange, label }: NameInputProps ) {
 	);
 }
 
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+export function deduplicateElementSlugs< T extends PaletteElement >(
+	elements: T[]
+) {
+	const slugCounts: { [ slug: string ]: number } = {};
+
+	return elements.map( ( element ) => {
+		let newSlug: string | undefined;
+
+		const { slug } = element;
+		slugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;
+
+		if ( slugCounts[ slug ] > 1 ) {
+			newSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;
+		}
+
+		return { ...element, slug: newSlug ?? slug };
+	} );
+}
+
 /**
  * Returns a name and slug for a palette item. The name takes the format "Color + id".
  * To ensure there are no duplicate ids, this function checks all slugs.
@@ -109,7 +130,7 @@ export function getNameAndSlugForPosition(
 	};
 }
 
-function ColorPickerPopover< T extends Color | Gradient >( {
+function ColorPickerPopover< T extends PaletteElement >( {
 	isGradient,
 	element,
 	onChange,
@@ -167,7 +188,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	);
 }
 
-function Option< T extends Color | Gradient >( {
+function Option< T extends PaletteElement >( {
 	canOnlyChangeValues,
 	element,
 	onChange,
@@ -265,7 +286,7 @@ function Option< T extends Color | Gradient >( {
 	);
 }
 
-function PaletteEditListView< T extends Color | Gradient >( {
+function PaletteEditListView< T extends PaletteElement >( {
 	elements,
 	onChange,
 	canOnlyChangeValues,
@@ -280,7 +301,11 @@ function PaletteEditListView< T extends Color | Gradient >( {
 		elementsReferenceRef.current = elements;
 	}, [ elements ] );
 
-	const debounceOnChange = useDebounce( onChange, 100 );
+	const debounceOnChange = useDebounce(
+		( updatedElements: T[] ) =>
+			onChange( deduplicateElementSlugs( updatedElements ) ),
+		100
+	);
 
 	return (
 		<VStack spacing={ 3 }>

package/src/palette-edit/test/index.tsx

@@ -7,7 +7,10 @@ import { click, type, press } from '@ariakit/test';
 /**
  * Internal dependencies
  */
-import PaletteEdit, { getNameAndSlugForPosition } from '..';
+import PaletteEdit, {
+	getNameAndSlugForPosition,
+	deduplicateElementSlugs,
+} from '..';
 import type { PaletteElement } from '../types';
 
 const noop = () => {};
@@ -97,6 +100,52 @@ describe( 'getNameAndSlugForPosition', () => {
 	} );
 } );
 
+describe( 'deduplicateElementSlugs', () => {
+	it( 'should not change the slugs if they are unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-2',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( elements );
+	} );
+	it( 'should change the slugs if they are not unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		] );
+	} );
+} );
+
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
 		paletteLabel: 'Test label',

package/src/range-control/styles/range-control-styles.ts

@@ -57,7 +57,10 @@ const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
 	return '';
 };
 
-export const Wrapper = styled.div< WrapperProps >`
+export const Wrapper = styled( 'div', {
+	shouldForwardProp: ( prop: string ) =>
+		! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),
+} )< WrapperProps >`
 	display: block;
 	flex: 1;
 	position: relative;
@@ -261,9 +264,20 @@ export const InputRange = styled.input`
 `;
 
 const tooltipShow = ( { show }: TooltipProps ) => {
-	return css( {
-		opacity: show ? 1 : 0,
-	} );
+	return css`
+		display: ${ show ? 'inline-block' : 'none' };
+		opacity: ${ show ? 1 : 0 };
+
+		@media not ( prefers-reduced-motion ) {
+			transition:
+				opacity 120ms ease,
+				display 120ms ease allow-discrete;
+		}
+
+		@starting-style {
+			opacity: 0;
+		}
+	`;
 };
 
 const tooltipPosition = ( { position }: TooltipProps ) => {
@@ -284,10 +298,8 @@ export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: ${ CONFIG.radiusSmall };
 	color: white;
-	display: inline-block;
 	font-size: 12px;
 	min-width: 32px;
-	opacity: 0;
 	padding: 4px 8px;
 	pointer-events: none;
 	position: absolute;
@@ -295,11 +307,8 @@ export const Tooltip = styled.span< TooltipProps >`
 	user-select: none;
 	line-height: 1.4;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: opacity 120ms ease;
-	}
-
 	${ tooltipShow };
+
 	${ tooltipPosition };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },

package/src/range-control/tooltip.tsx

@@ -40,7 +40,7 @@ export default function SimpleTooltip(
 	return (
 		<Tooltip
 			{ ...restProps }
-			aria-hidden={ show }
+			aria-hidden="false"
 			className={ classes }
 			position={ position }
 			show={ show }

package/src/search-control/README.md

@@ -76,6 +76,8 @@ A function that receives the value of the input.
 
 #### onClose
 
+_Note: this prop is deprecated._
+
 When an `onClose` callback is provided, the search control will render a close button that will trigger the given callback.
 
 Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value.

package/src/search-control/index.tsx

@@ -10,6 +10,7 @@ import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
 import { forwardRef, useMemo, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -31,6 +32,12 @@ function SuffixItem( {
 		return <Icon icon={ search } />;
 	}
 
+	if ( onClose ) {
+		deprecated( '`onClose` prop in wp.components.SearchControl', {
+			since: '6.8',
+		} );
+	}
+
 	const onReset = () => {
 		onChange( '' );
 		searchRef.current?.focus();

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

@@ -50,18 +50,3 @@ Default.args = {
 	help: 'Help text to explain the input.',
 	__nextHasNoMarginBottom: true,
 };
-
-/**
- * When an `onClose` callback is provided, the search control will render a close button
- * that will trigger the given callback.
- *
- * Use this if you want the button to trigger your own logic to close the search field entirely,
- * rather than just clearing the input value.
- */
-export const WithOnClose = Template.bind( {} );
-WithOnClose.args = {
-	...Default.args,
-};
-WithOnClose.argTypes = {
-	onClose: { action: 'onClose' },
-};

package/src/search-control/test/index.tsx

@@ -72,13 +72,16 @@ describe( 'SearchControl', () => {
 			expect( onChangeSpy ).toHaveBeenLastCalledWith( '' );
 		} );
 
-		it( 'should should render a Close button (instead of Reset) when onClose function is provided', async () => {
+		it( 'should render a Close button (instead of Reset) when onClose function is provided', async () => {
 			const onChangeSpy = jest.fn();
 			const onCloseSpy = jest.fn();
 			render(
 				<Component onChange={ onChangeSpy } onClose={ onCloseSpy } />
 			);
 
+			expect( console ).toHaveWarnedWith(
+				'`onClose` prop in wp.components.SearchControl is deprecated since version 6.8.'
+			);
 			expect(
 				screen.queryByRole( 'button', { name: 'Close search' } )
 			).toBeVisible();

package/src/search-control/types.ts

@@ -40,6 +40,9 @@ export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {
 	 *
 	 * Use this if you want the button to trigger your own logic to close the search field entirely,
 	 * rather than just clearing the input value.
+	 *
+	 * @deprecated
+	 * @ignore
 	 */
 	onClose?: () => void;
 	/** @ignore */

package/src/tabs/styles.ts

@@ -9,18 +9,15 @@ import * as Ariakit from '@ariakit/react';
  */
 import { COLORS, CONFIG } from '../utils';
 import { space } from '../utils/space';
+import Icon from '../icon';
 
 export const TabListWrapper = styled.div`
-	position: relative;
 	display: flex;
 	align-items: stretch;
-	flex-direction: row;
-	text-align: center;
 	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
-		text-align: start;
 	}
 
 	:where( [aria-orientation='horizontal'] ) {
@@ -30,21 +27,22 @@ export const TabListWrapper = styled.div`
 	--direction-factor: 1;
 	--direction-start: left;
 	--direction-end: right;
-	--indicator-start: var( --indicator-left );
+	--selected-start: var( --selected-left, 0 );
 	&:dir( rtl ) {
 		--direction-factor: -1;
 		--direction-start: right;
 		--direction-end: left;
-		--indicator-start: var( --indicator-right );
+		--selected-start: var( --selected-right, 0 );
 	}
 
 	@media not ( prefers-reduced-motion ) {
-		&.is-animation-enabled::before {
-			transition-property: transform;
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius, border-block;
 			transition-duration: 0.2s;
 			transition-timing-function: ease-out;
 		}
 	}
+	position: relative;
 	&::before {
 		content: '';
 		position: absolute;
@@ -59,7 +57,7 @@ export const TabListWrapper = styled.div`
 	/* 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'] ) {
+	&[aria-orientation='horizontal'] {
 		--fade-width: 4rem;
 		--fade-gradient-base: transparent 0%, black var( --fade-width );
 		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
@@ -90,51 +88,81 @@ export const TabListWrapper = styled.div`
 			width: calc( var( --antialiasing-factor ) * 1px );
 			transform: translateX(
 					calc(
-						var( --indicator-start ) * var( --direction-factor ) *
+						var( --selected-start ) * var( --direction-factor ) *
 							1px
 					)
 				)
 				scaleX(
 					calc(
-						var( --indicator-width ) / var( --antialiasing-factor )
+						var( --selected-width, 0 ) /
+							var( --antialiasing-factor )
 					)
 				);
 			border-bottom: var( --wp-admin-border-width-focus ) solid
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::before {
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: calc( var( --antialiasing-factor ) * 1px );
-		transform: translateY( calc( var( --indicator-top ) * 1px ) )
-			scaleY(
-				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
+	&[aria-orientation='vertical'] {
+		&::before {
+			/* Adjusting the border radius to match the scaling in the y axis. */
+			border-radius: ${ CONFIG.radiusSmall } /
+				calc(
+					${ CONFIG.radiusSmall } /
+						(
+							var( --selected-height, 0 ) /
+								var( --antialiasing-factor )
+						)
+				);
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateY( calc( var( --selected-top, 0 ) * 1px ) )
+				scaleY(
+					calc(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+				);
+			background-color: color-mix(
+				in srgb,
+				${ COLORS.theme.accent },
+				transparent 96%
 			);
-		background-color: ${ COLORS.theme.gray[ 100 ] };
+		}
+		&[data-select-on-move='true']:has(
+				:is( :focus-visible, [data-focus-visible] )
+			)::before {
+			box-sizing: border-box;
+			border: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+			/* Adjusting the border width to match the scaling in the y axis. */
+			border-block-width: calc(
+				var( --wp-admin-border-width-focus, 1px ) /
+					(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+			);
+		}
 	}
 `;
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
-		scroll-margin: 24px;
-		flex-grow: 1;
-		flex-shrink: 0;
-		display: inline-flex;
-		align-items: center;
-		position: relative;
+		/* Resets */
 		border-radius: 0;
-		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;
+
+		flex: 1 0 auto;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
 		cursor: pointer;
-		line-height: 1.2; // Some languages characters e.g. Japanese may have a native higher line-height.
-		padding: ${ space( 4 ) };
-		margin-left: 0;
-		font-weight: 500;
-		text-align: inherit;
+		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+		font-weight: 400;
 		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
@@ -142,24 +170,19 @@ export const Tab = styled( Ariakit.Tab )`
 			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:not( [aria-disabled='true'] ):hover {
+		&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) {
 			color: ${ COLORS.theme.accent };
 		}
 
 		&:focus:not( :disabled ) {
-			position: relative;
 			box-shadow: none;
 			outline: none;
 		}
 
-		// Focus.
+		// Focus indicator.
+		position: relative;
 		&::after {
-			content: '';
 			position: absolute;
-			top: ${ space( 3 ) };
-			right: ${ space( 3 ) };
-			bottom: ${ space( 3 ) };
-			left: ${ space( 3 ) };
 			pointer-events: none;
 
 			// Draw the indicator.
@@ -172,23 +195,69 @@ export const Tab = styled( Ariakit.Tab )`
 			opacity: 0;
 
 			@media not ( prefers-reduced-motion ) {
-				transition: opacity 0.1s linear;
+				transition: opacity 0.15s 0.15s linear;
 			}
 		}
 
-		&:focus-visible::after {
+		&[data-focus-visible]::after {
 			opacity: 1;
 		}
 	}
 
+	[aria-orientation='horizontal'] & {
+		padding-inline: ${ space( 4 ) };
+		height: ${ space( 12 ) };
+		text-align: center;
+		scroll-margin: 24px;
+
+		&::after {
+			content: '';
+			inset: ${ space( 3 ) };
+		}
+	}
+
 	[aria-orientation='vertical'] & {
-		min-height: ${ space(
-			10
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
+		padding: ${ space( 2 ) } ${ space( 3 ) };
+		min-height: ${ space( 10 ) };
+		text-align: start;
+
+		&[aria-selected='true'] {
+			color: ${ COLORS.theme.accent };
+			fill: currentColor;
+		}
 	}
+	[aria-orientation='vertical'][data-select-on-move='false'] &::after {
+		content: '';
+		inset: var( --wp-admin-border-width-focus );
+	}
+`;
 
+export const TabChildren = styled.span`
+	flex-grow: 1;
+`;
+
+export const TabChevron = styled( Icon )`
+	flex-shrink: 0;
+	margin-inline-end: ${ space( -1 ) };
 	[aria-orientation='horizontal'] & {
-		justify-content: center;
+		display: none;
+	}
+	opacity: 0;
+	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
+		opacity: 1;
+	}
+	// The chevron is transitioned into existence when selectOnMove is enabled,
+	// because otherwise it looks jarring, as it shows up outside of the focus
+	// indicator that's being animated at the same time.
+	@media not ( prefers-reduced-motion ) {
+		[data-select-on-move='true']
+			[role='tab']:is( [aria-selected='true'],  )
+			& {
+			transition: opacity 0.3s ease-in;
+		}
+	}
+	&:dir( rtl ) {
+		rotate: 180deg;
 	}
 `;
 
@@ -198,7 +267,7 @@ export const TabPanel = styled( Ariakit.TabPanel )`
 		outline: none;
 	}
 
-	&:focus-visible {
+	&[data-focus-visible] {
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			${ COLORS.theme.accent };
 		// Windows high contrast mode.

package/src/tabs/tab.tsx

@@ -10,8 +10,13 @@ import { forwardRef } from '@wordpress/element';
 import type { TabProps } from './types';
 import warning from '@wordpress/warning';
 import { useTabsContext } from './context';
-import { Tab as StyledTab } from './styles';
+import {
+	Tab as StyledTab,
+	TabChildren as StyledTabChildren,
+	TabChevron as StyledTabChevron,
+} from './styles';
 import type { WordPressComponentProps } from '../context';
+import { chevronRight } from '@wordpress/icons';
 
 export const Tab = forwardRef<
 	HTMLButtonElement,
@@ -33,7 +38,8 @@ export const Tab = forwardRef<
 			render={ render }
 			{ ...otherProps }
 		>
-			{ children }
+			<StyledTabChildren>{ children }</StyledTabChildren>
+			<StyledTabChevron icon={ chevronRight } />
 		</StyledTab>
 	);
 } );