@wordpress/components 25.8.2 → 25.9.0

package/src/search-control/style.scss

@@ -43,6 +43,8 @@
 
 	&.is-size-compact input[type="search"].components-search-control__input {
 		height: $grid-unit-40;
+		padding-left: $grid-unit-10;
+		padding-right: $grid-unit-40;
 	}
 
 }
@@ -58,6 +60,10 @@
 	justify-content: center;
 
 	width: $icon-size;
+
+	.is-size-compact & {
+		right: $grid-unit-05;
+	}
 }
 
 .components-search-control__input-wrapper {

package/src/select-control/README.md

@@ -82,8 +82,8 @@ Use sentences in your menu.
 Render a user interface to select the size of an image.
 
 ```jsx
+import { useState } from 'react';
 import { SelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MySelectControl = () => {
 	const [ size, setSize ] = useState( '50%' );
@@ -182,7 +182,7 @@ If true, the label will only be visible to screen readers.
 
 If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
 
 #### multiple

package/src/select-control/index.tsx

@@ -15,9 +15,10 @@ import { useState, forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
 import { Select } from './styles/select-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -50,10 +51,14 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...restProps
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp(
+		props,
+		'wp.components.SelectControl',
+		'6.4'
+	);
 	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
@@ -107,11 +112,11 @@ function UnforwardedSelectControl(
 				}
 				prefix={ prefix }
 				labelPosition={ labelPosition }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 			>
 				<Select
 					{ ...restProps }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }

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

@@ -8,14 +8,14 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 
 interface SelectProps
 	extends Pick<
 		SelectControlProps,
-		'__next36pxDefaultSize' | 'disabled' | 'multiple'
+		'__next40pxDefaultSize' | 'disabled' | 'multiple'
 	> {
 	// Using `selectSize` instead of `size` to avoid a type conflict with the
 	// `size` HTML attribute of the `select` element.
@@ -52,7 +52,7 @@ const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 };
 
 const sizeStyles = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	multiple,
 	selectSize = 'default',
 }: SelectProps ) => {
@@ -64,8 +64,8 @@ const sizeStyles = ( {
 
 	const sizes = {
 		default: {
-			height: 36,
-			minHeight: 36,
+			height: 40,
+			minHeight: 40,
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
@@ -83,7 +83,7 @@ const sizeStyles = ( {
 		},
 	};
 
-	if ( ! __next36pxDefaultSize ) {
+	if ( ! __next40pxDefaultSize ) {
 		sizes.default = {
 			height: 30,
 			minHeight: 30,
@@ -100,7 +100,7 @@ const sizeStyles = ( {
 export const chevronIconSize = 18;
 
 const sizePaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	multiple,
 	selectSize = 'default',
 }: SelectProps ) => {
@@ -110,7 +110,7 @@ const sizePaddings = ( {
 		'__unstable-large': 16,
 	};
 
-	if ( ! __next36pxDefaultSize ) {
+	if ( ! __next40pxDefaultSize ) {
 		padding.default = 8;
 	}
 

package/src/select-control/test/select-control.tsx

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import SelectControl from '..';
 
-const setupUser = () => userEvent.setup();
-
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
 		render( <SelectControl /> );
@@ -20,7 +18,7 @@ describe( 'SelectControl', () => {
 	} );
 
 	it( 'should not render its children', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -49,7 +47,7 @@ describe( 'SelectControl', () => {
 	} );
 
 	it( 'should not render its options', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(

package/src/select-control/types.ts

@@ -12,6 +12,7 @@ import type { BaseControlProps } from '../base-control/types';
 type SelectControlBaseProps = Pick<
 	InputBaseProps,
 	| '__next36pxDefaultSize'
+	| '__next40pxDefaultSize'
 	| 'disabled'
 	| 'hideLabelFromVision'
 	| 'label'

package/src/slot-fill/bubbles-virtually/{fill.js → fill.tsx}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,7 @@ import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
  */
 import useSlot from './use-slot';
 import StyleProvider from '../../style-provider';
+import type { FillComponentProps } from '../types';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
@@ -28,7 +28,8 @@ function useForceUpdate() {
 	};
 }
 
-export default function Fill( { name, children } ) {
+export default function Fill( props: FillComponentProps ) {
+	const { name, children } = props;
 	const { registerFill, unregisterFill, ...slot } = useSlot( name );
 	const rerender = useForceUpdate();
 	const ref = useRef( { rerender } );
@@ -47,17 +48,15 @@ export default function Fill( { name, children } ) {
 		return null;
 	}
 
-	if ( typeof children === 'function' ) {
-		children = children( slot.fillProps );
-	}
-
 	// When using a `Fill`, the `children` will be rendered in the document of the
 	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
 	// to make sure we're referencing the right document/iframe (instead of the
 	// context of the `Fill`'s parent).
 	const wrappedChildren = (
 		<StyleProvider document={ slot.ref.current.ownerDocument }>
-			{ children }
+			{ typeof children === 'function'
+				? children( slot.fillProps ?? {} )
+				: children }
 		</StyleProvider>
 	);
 

package/src/slot-fill/bubbles-virtually/{slot-fill-context.js → slot-fill-context.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -8,8 +7,12 @@ import { proxyMap } from 'valtio/utils';
  */
 import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
+/**
+ * Internal dependencies
+ */
+import type { SlotFillBubblesVirtuallyContext } from '../types';
 
-const SlotFillContext = createContext( {
+const initialContextValue: SlotFillBubblesVirtuallyContext = {
 	slots: proxyMap(),
 	fills: proxyMap(),
 	registerSlot: () => {
@@ -25,6 +28,8 @@ const SlotFillContext = createContext( {
 
 	// This helps the provider know if it's using the default context value or not.
 	isDefault: true,
-} );
+};
+
+const SlotFillContext = createContext( initialContextValue );
 
 export default SlotFillContext;

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

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { ref as valRef } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import type {
+	SlotFillProviderProps,
+	SlotFillBubblesVirtuallyContext,
+} from '../types';
+
+function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
+	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = proxyMap();
+	const fills: SlotFillBubblesVirtuallyContext[ 'fills' ] = proxyMap();
+
+	const registerSlot: SlotFillBubblesVirtuallyContext[ 'registerSlot' ] = (
+		name,
+		ref,
+		fillProps
+	) => {
+		const slot = slots.get( name );
+
+		slots.set(
+			name,
+			valRef( {
+				...slot,
+				ref: ref || slot?.ref,
+				fillProps: fillProps || slot?.fillProps || {},
+			} )
+		);
+	};
+
+	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
+		( name, ref ) => {
+			// Make sure we're not unregistering a slot registered by another element
+			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+			if ( slots.get( name )?.ref === ref ) {
+				slots.delete( name );
+			}
+		};
+
+	const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
+		name,
+		fillProps
+	) => {
+		const slot = slots.get( name );
+		if ( ! slot ) {
+			return;
+		}
+
+		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+			return;
+		}
+
+		slot.fillProps = fillProps;
+		const slotFills = fills.get( name );
+		if ( slotFills ) {
+			// Force update fills.
+			slotFills.map( ( fill ) => fill.current.rerender() );
+		}
+	};
+
+	const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
+		name,
+		ref
+	) => {
+		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+	};
+
+	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
+		name,
+		ref
+	) => {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
+		}
+
+		fills.set(
+			name,
+			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+		);
+	};
+
+	return {
+		slots,
+		fills,
+		registerSlot,
+		updateSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+	};
+}
+
+export default function SlotFillProvider( {
+	children,
+}: SlotFillProviderProps ) {
+	const registry = useMemo( createSlotRegistry, [] );
+	return (
+		<SlotFillContext.Provider value={ registry }>
+			{ children }
+		</SlotFillContext.Provider>
+	);
+}

package/src/slot-fill/bubbles-virtually/{slot.js → slot.tsx}

@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,21 +19,30 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import { View } from '../../view';
 import SlotFillContext from './slot-fill-context';
+import type { WordPressComponentProps } from '../../context';
+import type { SlotComponentProps } from '../types';
 
-function Slot( props, forwardedRef ) {
+function Slot(
+	props: WordPressComponentProps<
+		Omit< SlotComponentProps, 'bubblesVirtually' >,
+		'div'
+	>,
+	forwardedRef: ForwardedRef< any >
+) {
 	const {
 		name,
 		fillProps = {},
 		as,
 		// `children` is not allowed. However, if it is passed,
 		// it will be displayed as is, so remove `children`.
+		// @ts-ignore
 		children,
 		...restProps
 	} = props;
 
 	const { registerSlot, unregisterSlot, ...registry } =
 		useContext( SlotFillContext );
-	const ref = useRef();
+	const ref = useRef< HTMLElement >( null );
 
 	useLayoutEffect( () => {
 		registerSlot( name, ref, fillProps );

package/src/slot-fill/bubbles-virtually/{use-slot-fills.js → use-slot-fills.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -13,8 +12,9 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
+import type { SlotKey } from '../types';
 
-export default function useSlotFills( name ) {
+export default function useSlotFills( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
 	const fills = useSnapshot( registry.fills, { sync: true } );
 	// The important bit here is that this call ensures that the hook

package/src/slot-fill/bubbles-virtually/{use-slot.js → use-slot.ts}

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
@@ -13,8 +12,14 @@ import { useMemo, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import SlotFillContext from './slot-fill-context';
+import type {
+	SlotFillBubblesVirtuallyFillRef,
+	SlotFillBubblesVirtuallySlotRef,
+	FillProps,
+	SlotKey,
+} from '../types';
 
-export default function useSlot( name ) {
+export default function useSlot( name: SlotKey ) {
 	const registry = useContext( SlotFillContext );
 	const slots = useSnapshot( registry.slots, { sync: true } );
 	// The important bit here is that the `useSnapshot` call ensures that the
@@ -24,10 +29,14 @@ export default function useSlot( name ) {
 
 	const api = useMemo(
 		() => ( {
-			updateSlot: ( fillProps ) => registry.updateSlot( name, fillProps ),
-			unregisterSlot: ( ref ) => registry.unregisterSlot( name, ref ),
-			registerFill: ( ref ) => registry.registerFill( name, ref ),
-			unregisterFill: ( ref ) => registry.unregisterFill( name, ref ),
+			updateSlot: ( fillProps: FillProps ) =>
+				registry.updateSlot( name, fillProps ),
+			unregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>
+				registry.unregisterSlot( name, ref ),
+			registerFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
+				registry.registerFill( name, ref ),
+			unregisterFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>
+				registry.unregisterFill( name, ref ),
 		} ),
 		[ name, registry ]
 	);

package/src/slot-fill/context.ts

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { BaseSlotFillContext } from './types';
+
+const initialValue: BaseSlotFillContext = {
+	registerSlot: () => {},
+	unregisterSlot: () => {},
+	registerFill: () => {},
+	unregisterFill: () => {},
+	getSlot: () => undefined,
+	getFills: () => [],
+	subscribe: () => () => {},
+};
+export const SlotFillContext = createContext( initialValue );
+
+export default SlotFillContext;

package/src/slot-fill/{fill.js → fill.ts}

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -10,8 +8,9 @@ import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
  */
 import SlotFillContext from './context';
 import useSlot from './use-slot';
+import type { FillComponentProps } from './types';
 
-export default function Fill( { name, children } ) {
+export default function Fill( { name, children }: FillComponentProps ) {
 	const { registerFill, unregisterFill } = useContext( SlotFillContext );
 	const slot = useSlot( name );
 

package/src/slot-fill/{index.js → index.tsx}

@@ -1,4 +1,8 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -14,10 +18,19 @@ import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
 import SlotFillContext from './bubbles-virtually/slot-fill-context';
+import type { WordPressComponentProps } from '../context';
+
 export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
+import type {
+	DistributiveOmit,
+	FillComponentProps,
+	SlotComponentProps,
+	SlotFillProviderProps,
+	SlotKey,
+} from './types';
 
-export function Fill( props ) {
+export function Fill( props: FillComponentProps ) {
 	// We're adding both Fills here so they can register themselves before
 	// their respective slot has been registered. Only the Fill that has a slot
 	// will render. The other one will return null.
@@ -28,20 +41,27 @@ export function Fill( props ) {
 		</>
 	);
 }
-export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
+
+export function UnforwardedSlot(
+	props: SlotComponentProps &
+		Omit< WordPressComponentProps< {}, 'div' >, 'className' >,
+	ref: ForwardedRef< any >
+) {
+	const { bubblesVirtually, ...restProps } = props;
 	if ( bubblesVirtually ) {
-		return <BubblesVirtuallySlot { ...props } ref={ ref } />;
+		return <BubblesVirtuallySlot { ...restProps } ref={ ref } />;
 	}
-	return <BaseSlot { ...props } />;
-} );
+	return <BaseSlot { ...restProps } />;
+}
+export const Slot = forwardRef( UnforwardedSlot );
 
-export function Provider( { children, ...props } ) {
+export function Provider( { children }: SlotFillProviderProps ) {
 	const parent = useContext( SlotFillContext );
 	if ( ! parent.isDefault ) {
-		return children;
+		return <>{ children }</>;
 	}
 	return (
-		<SlotFillProvider { ...props }>
+		<SlotFillProvider>
 			<BubblesVirtuallySlotFillProvider>
 				{ children }
 			</BubblesVirtuallySlotFillProvider>
@@ -49,12 +69,16 @@ export function Provider( { children, ...props } ) {
 	);
 }
 
-export function createSlotFill( key ) {
+export function createSlotFill( key: SlotKey ) {
 	const baseName = typeof key === 'symbol' ? key.description : key;
-	const FillComponent = ( props ) => <Fill name={ key } { ...props } />;
+	const FillComponent = ( props: Omit< FillComponentProps, 'name' > ) => (
+		<Fill name={ key } { ...props } />
+	);
 	FillComponent.displayName = `${ baseName }Fill`;
 
-	const SlotComponent = ( props ) => <Slot name={ key } { ...props } />;
+	const SlotComponent = (
+		props: DistributiveOmit< SlotComponentProps, 'name' >
+	) => <Slot name={ key } { ...props } />;
 	SlotComponent.displayName = `${ baseName }Slot`;
 	SlotComponent.__unstableName = key;
 
@@ -64,7 +88,7 @@ export function createSlotFill( key ) {
 	};
 }
 
-export const createPrivateSlotFill = ( name ) => {
+export const createPrivateSlotFill = ( name: string ) => {
 	const privateKey = Symbol( name );
 	const privateSlotFill = createSlotFill( privateKey );