@wordpress/components 28.9.0 → 28.11.0

package/src/palette-edit/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
@@ -10,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../button';
 import { Heading } from '../heading';
 import { space } from '../utils/space';
-import { COLORS, CONFIG, font } from '../utils';
+import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
 import {
@@ -42,71 +41,6 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-const buttonStyleReset = ( {
-	as,
-}: {
-	as: React.ComponentProps< typeof View >[ 'as' ];
-} ) => {
-	if ( as === 'button' ) {
-		return css`
-			display: flex;
-			align-items: center;
-			width: 100%;
-			appearance: none;
-			background: transparent;
-			border: none;
-			border-radius: 0;
-			padding: 0;
-			cursor: pointer;
-
-			&:hover {
-				color: ${ COLORS.theme.accent };
-			}
-		`;
-	}
-	return null;
-};
-
-export const PaletteItem = styled( View )`
-	${ buttonStyleReset }
-
-	padding-block: 3px;
-	padding-inline-start: ${ space( 3 ) };
-	border: 1px solid ${ CONFIG.surfaceBorderColor };
-	border-bottom-color: transparent;
-	font-size: ${ font( 'default.fontSize' ) };
-
-	&:focus-visible {
-		border-color: transparent;
-		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			${ COLORS.theme.accent };
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-		outline-offset: 0;
-	}
-
-	border-top-left-radius: ${ CONFIG.radiusSmall };
-	border-top-right-radius: ${ CONFIG.radiusSmall };
-
-	& + & {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	&:last-child {
-		border-bottom-left-radius: ${ CONFIG.radiusSmall };
-		border-bottom-right-radius: ${ CONFIG.radiusSmall };
-		border-bottom-color: ${ CONFIG.surfaceBorderColor };
-	}
-
-	&.is-selected + & {
-		border-top-color: transparent;
-	}
-	&.is-selected {
-		border-color: ${ COLORS.theme.accent };
-	}
-`;
-
 export const NameContainer = styled.div`
 	line-height: ${ space( 8 ) };
 	margin-left: ${ space( 2 ) };

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/panel/stories/index.story.tsx

@@ -17,7 +17,8 @@ import InputControl from '../../input-control';
 import { wordpress } from '@wordpress/icons';
 
 const meta: Meta< typeof Panel > = {
-	title: 'Components/Panel',
+	title: 'Components/Containers/Panel',
+	id: 'components-panel',
 	component: Panel,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { PanelRow, PanelBody },

package/src/private-apis.ts

@@ -3,10 +3,10 @@
  */
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
-import { DropdownMenuV2 } from './dropdown-menu-v2';
+import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
-import Tabs from './tabs';
+import { Tabs } from './tabs';
 import { kebabCase } from './utils/strings';
 import { lock } from './lock-unlock';
 
@@ -17,6 +17,6 @@ lock( privateApis, {
 	ComponentsContext,
 	Tabs,
 	Theme,
-	DropdownMenuV2,
+	Menu,
 	kebabCase,
 } );

package/src/radio-group/index.tsx

@@ -7,6 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { useMemo, forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -34,6 +35,7 @@ function UnforwardedRadioGroup(
 		setValue: ( newValue ) => {
 			onChange?.( newValue ?? undefined );
 		},
+		rtl: isRTL(),
 	} );
 
 	const contextValue = useMemo(

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/resizable-box/stories/index.story.tsx

@@ -14,7 +14,8 @@ import ResizableBox from '..';
 import { useState } from '@wordpress/element';
 
 const meta: Meta< typeof ResizableBox > = {
-	title: 'Components/ResizableBox',
+	title: 'Components/Utilities/ResizableBox',
+	id: 'components-resizablebox',
 	component: ResizableBox,
 	argTypes: {
 		children: { control: { type: null } },

package/src/sandbox/index.native.js

@@ -336,9 +336,7 @@ const Sandbox = forwardRef( function Sandbox(
 
 	useEffect( () => {
 		updateContentHtml();
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {

package/src/sandbox/index.tsx

@@ -262,23 +262,20 @@ function SandBox( {
 				checkMessageForResize
 			);
 		};
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		trySandBox();
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandBox( true );
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
 		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, type ] );
 
 	return (

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

@@ -10,7 +10,8 @@ import SandBox from '..';
 
 const meta: Meta< typeof SandBox > = {
 	component: SandBox,
-	title: 'Components/SandBox',
+	title: 'Components/Utilities/SandBox',
+	id: 'components-sandbox',
 	argTypes: {
 		onFocus: { control: { type: null } },
 	},

package/src/scroll-lock/stories/index.story.tsx

@@ -17,7 +17,8 @@ import ScrollLock from '..';
 
 const meta: Meta< typeof ScrollLock > = {
 	component: ScrollLock,
-	title: 'Components/ScrollLock',
+	title: 'Components/Utilities/ScrollLock',
+	id: 'components-scrolllock',
 	parameters: {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },

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.native.js

@@ -122,9 +122,7 @@ function SearchControl( {
 		mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );
 
 		setCurrentStyles( futureStyles );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ isActive, isDark ] );
 
 	const clearInput = useCallback( () => {

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/shortcut/stories/index.story.tsx

@@ -10,7 +10,8 @@ import Shortcut from '../';
 
 const meta: Meta< typeof Shortcut > = {
 	component: Shortcut,
-	title: 'Components/Shortcut',
+	title: 'Components/Utilities/Shortcut',
+	id: 'components-shortcut',
 	parameters: {
 		controls: {
 			expanded: true,

package/src/slot-fill/bubbles-virtually/slot.tsx

@@ -49,11 +49,10 @@ function Slot(
 		return () => {
 			unregisterSlot( name, ref );
 		};
-		// Ignore reason: We don't want to unregister and register the slot whenever
+		// We don't want to unregister and register the slot whenever
 		// `fillProps` change, which would cause the fill to be re-mounted. Instead,
 		// we can just update the slot (see hook below).
 		// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ registerSlot, unregisterSlot, name ] );
 	// fillProps may be an update that interacts with the layout, so we
 	// useLayoutEffect.

package/src/slot-fill/fill.ts

@@ -23,9 +23,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		const refValue = ref.current;
 		registerFill( name, refValue );
 		return () => unregisterFill( name, refValue );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useLayoutEffect( () => {
@@ -33,9 +32,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		if ( slot ) {
 			slot.forceUpdate();
 		}
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ children ] );
 
 	useLayoutEffect( () => {
@@ -46,9 +44,8 @@ export default function Fill( { name, children }: FillComponentProps ) {
 		unregisterFill( ref.current.name, ref.current );
 		ref.current.name = name;
 		registerFill( name, ref.current );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// The useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
 		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	return null;

package/src/slot-fill/stories/index.story.tsx

@@ -15,7 +15,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 
 const meta: Meta< typeof Slot > = {
 	component: Slot,
-	title: 'Components/SlotFill',
+	title: 'Components/Utilities/SlotFill',
+	id: 'components-slotfill',
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Fill, SlotFillProvider },
 	argTypes: {

package/src/spacer/hook.ts

@@ -12,8 +12,9 @@ import { space } from '../utils/space';
 import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
 
-const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
-	typeof o !== 'undefined' && o !== null;
+function isDefined< T >( o: T ): o is Exclude< T, null | undefined > {
+	return typeof o !== 'undefined' && o !== null;
+}
 
 export function useSpacer(
 	props: WordPressComponentProps< SpacerProps, 'div' >

package/src/tab-panel/index.tsx

@@ -16,6 +16,7 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -120,6 +121,7 @@ const UnforwardedTabPanel = (
 		orientation,
 		selectOnMove,
 		defaultSelectedId: prependInstanceId( initialTabName ),
+		rtl: isRTL(),
 	} );
 
 	const selectedTabName = extractTabName(
@@ -218,6 +220,7 @@ const UnforwardedTabPanel = (
 							) }-view` }
 							render={
 								<Button
+									__next40pxDefaultSize
 									icon={ tab.icon }
 									label={ tab.icon && tab.title }
 									showTooltip={ !! tab.icon }

package/src/tab-panel/stories/index.story.tsx

@@ -14,7 +14,8 @@ import { link, more, wordpress } from '@wordpress/icons';
 import TabPanel from '..';
 
 const meta: Meta< typeof TabPanel > = {
-	title: 'Components/TabPanel',
+	title: 'Components/Containers/TabPanel',
+	id: 'components-tabpanel',
 	component: TabPanel,
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/tab-panel/style.scss

@@ -7,12 +7,10 @@
 	}
 }
 
-// This tab style CSS is duplicated verbatim in
-// /packages/edit-post/src/components/sidebar/settings-header/style.scss
 .components-tab-panel__tabs-item {
 	position: relative;
 	border-radius: 0;
-	height: $grid-unit-60;
+	height: $grid-unit-60 !important; // https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	background: transparent;
 	border: none;
 	box-shadow: none;