@wordpress/components 24.0.0 → 25.1.0

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -22,6 +22,7 @@ const BottomSheetSelectControl = ( {
 	options: items,
 	onChange,
 	value: selectedValue,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -68,8 +69,9 @@ const BottomSheetSelectControl = ( {
 						__( 'Navigates to select %s' ),
 						label
 					) }
+					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -29,6 +29,7 @@ const BottomSheetTextControl = ( {
 	icon,
 	footerNote,
 	cellPlaceholder,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -62,8 +63,9 @@ const BottomSheetTextControl = ( {
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
 					placeholder={ cellPlaceholder || placeholder || '' }
+					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

package/src/modal/index.tsx

@@ -252,12 +252,7 @@ function UnforwardedModal(
 								) }
 							</div>
 						) }
-						<div
-							ref={ childrenContainerRef }
-							className="components-modal__children-container"
-						>
-							{ children }
-						</div>
+						<div ref={ childrenContainerRef }>{ children }</div>
 					</div>
 				</div>
 			</StyleProvider>

package/src/popover/index.tsx

@@ -74,7 +74,7 @@ import { overlayMiddlewares } from './overlay-middlewares';
  *
  * @type {string}
  */
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.

package/src/private-apis.ts

@@ -9,6 +9,19 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 import { default as CustomSelectControl } from './custom-select-control';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { createPrivateSlotFill } from './slot-fill';
+import {
+	DropdownMenu as DropdownMenuV2,
+	DropdownMenuCheckboxItem as DropdownMenuCheckboxItemV2,
+	DropdownMenuGroup as DropdownMenuGroupV2,
+	DropdownMenuItem as DropdownMenuItemV2,
+	DropdownMenuLabel as DropdownMenuLabelV2,
+	DropdownMenuRadioGroup as DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItem as DropdownMenuRadioItemV2,
+	DropdownMenuSeparator as DropdownMenuSeparatorV2,
+	DropdownSubMenu as DropdownSubMenuV2,
+	DropdownSubMenuTrigger as DropdownSubMenuTriggerV2,
+} from './dropdown-menu-v2';
+import { ComponentsContext } from './ui/context/context-system-provider';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -21,4 +34,15 @@ lock( privateApis, {
 	CustomSelectControl,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
+	ComponentsContext,
+	DropdownMenuV2,
+	DropdownMenuCheckboxItemV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	DropdownMenuLabelV2,
+	DropdownMenuRadioGroupV2,
+	DropdownMenuRadioItemV2,
+	DropdownMenuSeparatorV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
 } );

package/src/range-control/index.native.js

@@ -25,6 +25,7 @@ const RangeControl = memo(
 		max,
 		type,
 		separatorType,
+		disabled,
 		...props
 	} ) => {
 		if ( type === 'stepper' ) {
@@ -36,6 +37,7 @@ const RangeControl = memo(
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					disabled={ disabled }
 				/>
 			);
 		}
@@ -61,6 +63,7 @@ const RangeControl = memo(
 				allowReset={ allowReset }
 				defaultValue={ initialSliderValue }
 				separatorType={ separatorType }
+				disabled={ disabled }
 				{ ...props }
 			/>
 		);

package/src/search-control/style.scss

@@ -41,10 +41,12 @@
 .components-search-control__icon {
 	position: absolute;
 	top: 0;
+	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
 	bottom: 0;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 
 	> svg {
 		margin: $grid-unit-10 0;

package/src/slot-fill/README.md

@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -89,3 +89,28 @@ const Toolbar = ( { isMobile } ) => (
 	</div>
 );
 ```
+
+Props can also be passed from a `Slot` to a `Fill` by using the prop `fillProps` on the `Slot`:
+
+```jsx
+const { Fill, Slot } = createSlotFill( 'Toolbar' );
+
+const ToolbarItem = () => (
+	<Fill>
+		{ ( { hideToolbar } ) => {
+			<Button onClick={ hideToolbar }>Hide</Button>;
+		} }
+	</Fill>
+);
+
+const Toolbar = () => 
+	const hideToolbar() => {
+		console.log( 'Hide toolbar' );
+	}
+	return (
+		<div className="toolbar">
+			<Slot fillProps={ { hideToolbar } } />
+		</div>
+	);
+);
+```

package/src/tab-panel/index.tsx

@@ -2,11 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import {
+	forwardRef,
 	useState,
 	useEffect,
 	useLayoutEffect,
@@ -76,16 +78,19 @@ const TabButton = ( {
  * );
  * ```
  */
-export function TabPanel( {
-	className,
-	children,
-	tabs,
-	selectOnMove = true,
-	initialTabName,
-	orientation = 'horizontal',
-	activeClass = 'is-active',
-	onSelect,
-}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
+const UnforwardedTabPanel = (
+	{
+		className,
+		children,
+		tabs,
+		selectOnMove = true,
+		initialTabName,
+		orientation = 'horizontal',
+		activeClass = 'is-active',
+		onSelect,
+	}: WordPressComponentProps< TabPanelProps, 'div', false >,
+	ref: ForwardedRef< any >
+) => {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
@@ -151,7 +156,7 @@ export function TabPanel( {
 	}, [ tabs, selectedTab?.disabled, handleTabSelection ] );
 
 	return (
-		<div className={ className }>
+		<div className={ className } ref={ ref }>
 			<NavigableMenu
 				role="tablist"
 				orientation={ orientation }
@@ -196,6 +201,7 @@ export function TabPanel( {
 			) }
 		</div>
 	);
-}
+};
 
+export const TabPanel = forwardRef( UnforwardedTabPanel );
 export default TabPanel;

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -67,8 +67,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8:focus-within {
   border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {
@@ -81,6 +82,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 160ms ease;
   transition: transform 160ms ease;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -402,8 +405,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8:focus-within {
   border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
   box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: none;
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
 .emotion-10 {

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -46,8 +46,10 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 		&:focus-within {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };
-			outline: none;
 			z-index: 1;
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
 		}
 	`;
 };
@@ -80,6 +82,9 @@ export const BackdropView = styled.div`
 	transition: transform ${ CONFIG.transitionDurationFast } ease;
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: -3px;
 `;
 
 export const VisualLabelWrapper = styled.div`

package/src/toolbar/stories/index.tsx

@@ -82,34 +82,31 @@ Default.args = {
 			</ToolbarGroup>
 			<ToolbarGroup>
 				<ToolbarItem>
-					{
-						// @ts-expect-error TODO: Remove when DropdownMenu is typed
-						( toggleProps ) => {
-							return (
-								<DropdownMenu
-									hasArrowIndicator
-									icon={ alignLeft }
-									label="Align"
-									controls={ [
-										{
-											icon: alignLeft,
-											title: 'Align left',
-											isActive: true,
-										},
-										{
-											icon: alignCenter,
-											title: 'Align center',
-										},
-										{
-											icon: alignRight,
-											title: 'Align right',
-										},
-									] }
-									toggleProps={ toggleProps }
-								/>
-							);
-						}
-					}
+					{ /* There is an issue here with TS not recognizing the
+					 * `RenderProp` being passed.
+					 * @ts-expect-error */ }
+					{ ( toggleProps ) => (
+						<DropdownMenu
+							icon={ alignLeft }
+							label="Align"
+							controls={ [
+								{
+									icon: alignLeft,
+									title: 'Align left',
+									isActive: true,
+								},
+								{
+									icon: alignCenter,
+									title: 'Align center',
+								},
+								{
+									icon: alignRight,
+									title: 'Align right',
+								},
+							] }
+							toggleProps={ toggleProps }
+						/>
+					) }
 				</ToolbarItem>
 			</ToolbarGroup>
 			<ToolbarGroup>

package/src/toolbar/toolbar/index.tsx

@@ -16,7 +16,22 @@ import deprecated from '@wordpress/deprecated';
 import ToolbarGroup from '../toolbar-group';
 import ToolbarContainer from './toolbar-container';
 import type { ToolbarProps } from './types';
-import type { WordPressComponentProps } from '../../ui/context';
+import {
+	WordPressComponentProps,
+	ContextSystemProvider,
+} from '../../ui/context';
+
+// TODO:
+// - (optional) make the legacy `DropdownMenu` read the context variable
+// - swap the legacy `DropdownMenu` with the new version of the component
+//   once it's stable
+const CONTEXT_SYSTEM_VALUE = {
+	DropdownMenu: {
+		// Note: the legacy `DropdownMenu` component is not yet reactive to this
+		// context variant. See https://github.com/WordPress/gutenberg/pull/51097.
+		variant: 'toolbar',
+	},
+};
 
 function UnforwardedToolbar(
 	{
@@ -40,12 +55,14 @@ function UnforwardedToolbar(
 		className
 	);
 	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
+		<ContextSystemProvider value={ CONTEXT_SYSTEM_VALUE }>
+			<ToolbarContainer
+				className={ finalClassName }
+				label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</ContextSystemProvider>
 	);
 }
 

package/src/tooltip/style.scss

@@ -7,11 +7,11 @@
 }
 
 .components-tooltip .components-popover__content {
-	background: $components-color-foreground; // TODO: Discuss with designers.
+	background: $black; // TODO: Discuss with designers.
 	border-radius: $radius-block-ui;
 	border-width: 0;
 	outline: none;
-	color: $components-color-foreground-inverted;
+	color: $gray-100;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;

package/src/ui/context/index.ts

@@ -4,6 +4,7 @@ export {
 } from './context-system-provider';
 export {
 	contextConnect,
+	contextConnectWithoutRef,
 	hasConnectNamespace,
 	getConnectNamespace,
 } from './context-connect';

package/src/utils/config-values.js

@@ -67,6 +67,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
+	popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

package/src/view/README.md

@@ -27,13 +27,13 @@ function Example() {
 
 ## Props
 
-##### as
+### as
 
 **Type**: `string`,`E`
 
 Render the component as another React Component or HTML Element.
 
-##### css
+### css
 
 **Type**: `InterpolatedCSS`