@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.0

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

@@ -37,18 +37,18 @@ const meta: Meta< typeof Popover > = {
 	id: 'components-popover',
 	component: Popover,
 	argTypes: {
-		anchor: { control: { type: null } },
-		anchorRef: { control: { type: null } },
-		anchorRect: { control: { type: null } },
-		children: { control: { type: null } },
+		anchor: { control: false },
+		anchorRef: { control: false },
+		anchorRect: { control: false },
+		children: { control: false },
 		focusOnMount: {
 			control: { type: 'select' },
 			options: [ 'firstElement', true, false ],
 		},
-		getAnchorRect: { control: { type: null } },
+		getAnchorRect: { control: false },
 		onClose: { action: 'onClose' },
 		onFocusOutside: { action: 'onFocusOutside' },
-		__unstableSlotName: { control: { type: null } },
+		__unstableSlotName: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -58,7 +58,9 @@ const meta: Meta< typeof Popover > = {
 export default meta;
 
 const PopoverWithAnchor = ( args: PopoverProps ) => {
-	const anchorRef = useRef( null );
+	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
+		null
+	);
 
 	return (
 		<div
@@ -71,11 +73,11 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 		>
 			<p
 				style={ { padding: '8px', background: 'salmon' } }
-				ref={ anchorRef }
+				ref={ setPopoverAnchor }
 			>
 				Popover&apos;s anchor
 			</p>
-			<Popover { ...args } anchorRef={ anchorRef } />
+			<Popover { ...args } anchor={ popoverAnchor } />
 		</div>
 	);
 };

package/src/query-controls/stories/index.story.tsx

@@ -22,12 +22,12 @@ const meta: Meta< typeof QueryControls > = {
 	title: 'Components/QueryControls',
 	component: QueryControls,
 	argTypes: {
-		numberOfItems: { control: { type: null } },
-		order: { control: { type: null } },
-		orderBy: { control: { type: null } },
-		selectedAuthorId: { control: { type: null } },
-		selectedCategories: { control: { type: null } },
-		selectedCategoryId: { control: { type: null } },
+		numberOfItems: { control: false },
+		order: { control: false },
+		orderBy: { control: false },
+		selectedAuthorId: { control: false },
+		selectedCategories: { control: false },
+		selectedCategoryId: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof RadioControl > = {
 			action: 'onChange',
 		},
 		selected: {
-			control: { type: null },
+			control: false,
 		},
 		label: {
 			control: { type: 'text' },

package/src/radio-group/stories/index.story.tsx

@@ -21,8 +21,8 @@ const meta: Meta< typeof RadioGroup > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Radio },
 	argTypes: {
-		onChange: { control: { type: null } },
-		children: { control: { type: null } },
+		onChange: { control: false },
+		children: { control: false },
 		checked: { control: { type: 'text' } },
 	},
 	parameters: {
@@ -99,5 +99,5 @@ Controlled.args = {
 	id: 'controlled-radiogroup',
 };
 Controlled.argTypes = {
-	checked: { control: { type: null } },
+	checked: { control: false },
 };

package/src/range-control/index.tsx

@@ -350,6 +350,7 @@ function UnforwardedRangeControl(
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
+						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 				{ allowReset && (

package/src/range-control/mark.tsx

@@ -38,7 +38,6 @@ export default function RangeMark(
 				{ ...otherProps }
 				aria-hidden="true"
 				className={ classes }
-				isFilled={ isFilled }
 				style={ style }
 			/>
 			{ label && (

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

@@ -33,18 +33,18 @@ const meta: Meta< typeof RangeControl > = {
 		},
 		color: { control: { type: 'color' } },
 		help: { control: { type: 'text' } },
-		icon: { control: { type: null } },
+		icon: { control: false },
 		marks: { control: { type: 'object' } },
-		onBlur: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onFocus: { control: { type: null } },
-		onMouseLeave: { control: { type: null } },
-		onMouseMove: { control: { type: null } },
+		onBlur: { control: false },
+		onChange: { control: false },
+		onFocus: { control: false },
+		onMouseLeave: { control: false },
+		onMouseMove: { control: false },
 		railColor: { control: { type: 'color' } },
 		step: { control: { type: 'number' } },
 		trackColor: { control: { type: 'color' } },
 		type: { control: { type: 'check' }, options: [ 'stepper' ] },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -130,6 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: width ease 0.1s;
+	}
+
 	${ trackBackgroundColor };
 `;
 
@@ -139,28 +143,18 @@ export const MarksWrapper = styled.span`
 	position: relative;
 	width: 100%;
 	user-select: none;
+	margin-top: 17px;
 `;
 
-const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
-	let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];
-
-	if ( disabled ) {
-		backgroundColor = COLORS.gray[ 400 ];
-	}
-
-	return css( {
-		backgroundColor,
-	} );
-};
-
 export const Mark = styled.span`
-	height: ${ thumbSize }px;
-	left: 0;
 	position: absolute;
-	top: 9px;
-	width: 1px;
-
-	${ markFill };
+	left: 0;
+	top: -4px;
+	height: 4px;
+	width: 2px;
+	transform: translateX( -50% );
+	background-color: ${ COLORS.ui.background };
+	z-index: 1;
 `;
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
@@ -173,7 +167,7 @@ export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
-	top: 22px;
+	top: 8px;
 	white-space: nowrap;
 
 	${ rtl( { left: 0 } ) };
@@ -207,6 +201,11 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: ${ CONFIG.radiusRound };
+	z-index: 3;
+
+	@media not ( prefers-reduced-motion ) {
+		transition: left ease 0.1s;
+	}
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };

package/src/resizable-box/index.tsx

@@ -112,6 +112,16 @@ function UnforwardedResizableBox(
 				showHandle && 'has-show-handle',
 				className
 			) }
+			// Add a focusable element within the drag handle. Unfortunately,
+			// `re-resizable` does not make them properly focusable by default,
+			// causing focus to move the the block wrapper which triggers block
+			// drag.
+			handleComponent={ Object.fromEntries(
+				Object.keys( HANDLE_CLASSES ).map( ( key ) => [
+					key,
+					<div key={ key } tabIndex={ -1 } />,
+				] )
+			) }
 			handleClasses={ HANDLE_CLASSES }
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }

package/src/resizable-box/stories/index.story.tsx

@@ -18,7 +18,7 @@ const meta: Meta< typeof ResizableBox > = {
 	id: 'components-resizablebox',
 	component: ResizableBox,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		enable: { control: 'object' },
 		onResizeStop: { action: 'onResizeStop' },
 	},

package/src/resizable-box/style.scss

@@ -15,6 +15,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
+
+	> div {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: z-index(".components-resizable-box__handle");
+		outline: none;
+	}
 }
 
 // Make the image inside the resize to get the full width

package/src/responsive-wrapper/stories/index.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof ResponsiveWrapper > = {
 	title: 'Components/Layout/ResponsiveWrapper',
 	id: 'components-responsivewrapper',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof SandBox > = {
 	title: 'Components/Utilities/SandBox',
 	id: 'components-sandbox',
 	argTypes: {
-		onFocus: { control: { type: null } },
+		onFocus: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -22,7 +22,7 @@ const meta: Meta< typeof Scrollable > = {
 			control: { type: 'text' },
 		},
 		children: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {
@@ -70,6 +70,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 					} }
 					type="text"
 					value="Focus me"
+					readOnly
 				/>
 			</View>
 		</Scrollable>

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

@@ -19,7 +19,7 @@ const meta: Meta< typeof SearchControl > = {
 	component: SearchControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof SelectControl > = {
 		label: { control: { type: 'text' } },
 		prefix: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -4,7 +4,6 @@
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useReducer,
 	useRef,
 	useEffect,
 	createPortal,
@@ -20,18 +19,15 @@ import type { FillComponentProps } from '../types';
 export default function Fill( { name, children }: FillComponentProps ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	const [ , rerender ] = useReducer( () => [], [] );
-	const ref = useRef( { rerender } );
+	const instanceRef = useRef( {} );
 
+	// We register fills so we can keep track of their existence.
+	// Slots can use the `useSlotFills` hook to know if there're already fills
+	// registered so they can choose to render themselves or not.
 	useEffect( () => {
-		// We register fills so we can keep track of their existence.
-		// Some Slot implementations need to know if there're already fills
-		// registered so they can choose to render themselves or not.
-		const refValue = ref.current;
-		registry.registerFill( name, refValue );
-		return () => {
-			registry.unregisterFill( name, refValue );
-		};
+		const instance = instanceRef.current;
+		registry.registerFill( name, instance );
+		return () => registry.unregisterFill( name, instance );
 	}, [ registry, name ] );
 
 	if ( ! slot || ! slot.ref.current ) {

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

@@ -23,13 +23,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		ref,
 		fillProps
 	) => {
-		const slot = slots.get( name );
-
-		slots.set( name, {
-			...slot,
-			ref: ref || slot?.ref,
-			fillProps: fillProps || slot?.fillProps || {},
-		} );
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
@@ -66,12 +60,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 			return;
 		}
 
-		slot.fillProps = fillProps;
-		const slotFills = fills.get( name );
-		if ( slotFills ) {
-			// Force update fills.
-			slotFills.forEach( ( fill ) => fill.rerender() );
-		}
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (

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

@@ -39,8 +39,7 @@ function Slot(
 		...restProps
 	} = props;
 
-	const { registerSlot, unregisterSlot, ...registry } =
-		useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 
 	const ref = useRef< HTMLElement >( null );
 
@@ -54,11 +53,9 @@ function Slot(
 	}, [ fillProps ] );
 
 	useLayoutEffect( () => {
-		registerSlot( name, ref, fillPropsRef.current );
-		return () => {
-			unregisterSlot( name, ref );
-		};
-	}, [ registerSlot, unregisterSlot, name ] );
+		registry.registerSlot( name, ref, fillPropsRef.current );
+		return () => registry.unregisterSlot( name, ref );
+	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
 		registry.updateSlot( name, ref, fillPropsRef.current );

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

@@ -20,9 +20,9 @@ const meta: Meta< typeof Slot > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Fill, SlotFillProvider },
 	argTypes: {
-		name: { control: { type: null } },
+		name: { control: false },
 		as: { control: { type: 'text' } },
-		fillProps: { control: { type: null } },
+		fillProps: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/slot-fill/types.ts

@@ -110,15 +110,16 @@ export type SlotFillProviderProps = {
 
 export type SlotRef = RefObject< HTMLElement >;
 export type Rerenderable = { rerender: () => void };
+export type FillInstance = {};
 
 export type SlotFillBubblesVirtuallyContext = {
 	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
-	fills: ObservableMap< SlotKey, Rerenderable[] >;
+	fills: ObservableMap< SlotKey, FillInstance[] >;
 	registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
 	unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void;
 	updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
-	registerFill: ( name: SlotKey, ref: Rerenderable ) => void;
-	unregisterFill: ( name: SlotKey, ref: Rerenderable ) => void;
+	registerFill: ( name: SlotKey, instance: FillInstance ) => void;
+	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.

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

@@ -19,17 +19,17 @@ const meta: Meta< typeof Snackbar > = {
 	id: 'components-snackbar',
 	component: Snackbar,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 		onDismiss: {
 			action: 'onDismiss',
-			control: { type: null },
+			control: false,
 		},
 		listRef: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

package/src/snackbar/stories/list.story.tsx

@@ -18,10 +18,10 @@ const meta: Meta< typeof SnackbarList > = {
 	id: 'components-snackbarlist',
 	component: SnackbarList,
 	argTypes: {
-		as: { control: { type: null } },
+		as: { control: false },
 		onRemove: {
 			action: 'onRemove',
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

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

@@ -13,7 +13,7 @@ const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		as: { control: { type: 'text' } },
 	},
 	parameters: {

package/src/tabs/tab.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import * as Ariakit from '@ariakit/react';
-
 /**
  * WordPress dependencies
  */
@@ -29,18 +24,6 @@ export const Tab = forwardRef<
 >( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
 	const { store, instanceId } = useTabsContext() ?? {};
 
-	// If the active item is not connected, the tablist may end up in a state
-	// where none of the tabs are tabbable. In this case, we force all tabs to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Tablist goes back to working as expected.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
 	if ( ! store ) {
 		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -55,7 +38,6 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
-			tabbable={ tabbable }
 			{ ...otherProps }
 		>
 			<StyledTabChildren>{ children }</StyledTabChildren>