@wordpress/components 32.0.1-next.v.0 → 32.1.0

package/src/slot-fill/types.ts

@@ -112,42 +112,26 @@ export type SlotFillProviderProps = {
 	passthrough?: boolean;
 };
 
+export type SlotFillInstance = {};
 export type SlotRef = RefObject< HTMLElement >;
-export type FillInstance = {};
-export type BaseSlotInstance = {};
-
-export type SlotFillBubblesVirtuallyContext = {
-	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
-	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, instance: FillInstance ) => void;
-	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
+export type SlotRecord = { instance: SlotFillInstance } & (
+	| { type: 'children' }
+	| { type: 'portal'; ref: SlotRef; fillProps: FillProps }
+);
+export type FillRecord = { instance: SlotFillInstance; children: FillChildren };
+
+export type SlotFillRegistry = {
+	slots: ObservableMap< SlotKey, SlotRecord >;
+	fills: ObservableMap< SlotKey, FillRecord[] >;
+	registerSlot: ( name: SlotKey, slot: SlotRecord ) => void;
+	unregisterSlot: ( name: SlotKey, instance: SlotFillInstance ) => void;
+	updateSlot: ( name: SlotKey, slot: SlotRecord ) => void;
+	registerFill: ( name: SlotKey, fill: FillRecord ) => void;
+	unregisterFill: ( name: SlotKey, instance: SlotFillInstance ) => void;
+	updateFill: ( name: SlotKey, fill: FillRecord ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.
 	 */
 	isDefault?: boolean;
 };
-
-export type BaseSlotFillContext = {
-	slots: ObservableMap< SlotKey, BaseSlotInstance >;
-	fills: ObservableMap<
-		SlotKey,
-		{ instance: FillInstance; children: FillChildren }[]
-	>;
-	registerSlot: ( name: SlotKey, slot: BaseSlotInstance ) => void;
-	unregisterSlot: ( name: SlotKey, slot: BaseSlotInstance ) => void;
-	registerFill: (
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) => void;
-	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
-	updateFill: (
-		name: SlotKey,
-		instance: FillInstance,
-		children: FillChildren
-	) => void;
-};

package/src/snackbar/index.tsx

@@ -206,5 +206,6 @@ function UnforwardedSnackbar(
  * ```
  */
 export const Snackbar = forwardRef( UnforwardedSnackbar );
+Snackbar.displayName = 'Snackbar';
 
 export default Snackbar;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/spinner/index.tsx

@@ -59,4 +59,5 @@ export function UnforwardedSpinner(
  * ```
  */
 export const Spinner = forwardRef( UnforwardedSpinner );
+Spinner.displayName = 'Spinner';
 export default Spinner;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { StoryFn, Meta } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/tab-panel/index.tsx

@@ -246,4 +246,5 @@ const UnforwardedTabPanel = (
 };
 
 export const TabPanel = forwardRef( UnforwardedTabPanel );
+TabPanel.displayName = 'TabPanel';
 export default TabPanel;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -65,7 +65,9 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 					Instead, the [Tab] key will move focus to the first
 					focusable element within the panel.
 				</p>
-				<Button variant="primary">I&apos;m a button!</Button>
+				<Button __next40pxDefaultSize variant="primary">
+					I&apos;m a button!
+				</Button>
 			</Tabs.TabPanel>
 		</Tabs>
 	);
@@ -118,6 +120,7 @@ export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
 				</ul>
 			</div>
 			<Button
+				__next40pxDefaultSize
 				style={ { marginBottom: '1rem' } }
 				variant="primary"
 				onClick={ () => setFullWidth( ! fullWidth ) }
@@ -332,6 +335,7 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
 							</Tabs.TabList>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								style={ {
 									marginLeft: 'auto',
@@ -354,7 +358,11 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 					</Tabs>
 				</div>
 			) : (
-				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ () => setIsOpen( true ) }
+				>
 					Open Tabs
 				</Button>
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/text-control/index.tsx

@@ -92,5 +92,6 @@ function UnforwardedTextControl(
  * ```
  */
 export const TextControl = forwardRef( UnforwardedTextControl );
+TextControl.displayName = 'TextControl';
 
 export default TextControl;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -40,6 +40,7 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {

package/src/text-highlight/index.tsx

@@ -42,4 +42,6 @@ export const TextHighlight = ( props: TextHighlightProps ) => {
 	} );
 };
 
+TextHighlight.displayName = 'TextHighlight';
+
 export default TextHighlight;

package/src/text-highlight/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/textarea-control/index.tsx

@@ -86,5 +86,6 @@ function UnforwardedTextareaControl(
  * ```
  */
 export const TextareaControl = forwardRef( UnforwardedTextareaControl );
+TextareaControl.displayName = 'TextareaControl';
 
 export default TextareaControl;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies
@@ -29,7 +29,9 @@ export default meta;
 
 const Template: StoryFn< typeof Theme > = ( args ) => (
 	<Theme { ...args }>
-		<Button variant="primary">Hello</Button>
+		<Button __next40pxDefaultSize variant="primary">
+			Hello
+		</Button>
 	</Theme>
 );
 
@@ -38,10 +40,12 @@ Default.args = {};
 
 export const Nested: StoryFn< typeof Theme > = ( args ) => (
 	<Theme accent="crimson">
-		<Button variant="primary">Outer theme (hardcoded)</Button>
+		<Button __next40pxDefaultSize variant="primary">
+			Outer theme (hardcoded)
+		</Button>
 
 		<Theme { ...args }>
-			<Button variant="primary">
+			<Button __next40pxDefaultSize variant="primary">
 				Inner theme (set via Storybook controls)
 			</Button>
 		</Theme>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/toggle-control/index.tsx

@@ -110,5 +110,6 @@ function UnforwardedToggleControl(
  * ```
  */
 export const ToggleControl = forwardRef( UnforwardedToggleControl );
+ToggleControl.displayName = 'ToggleControl';
 
 export default ToggleControl;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/toggle-group-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/toggle-group-control/toggle-group-control/as-button-group.tsx

@@ -93,3 +93,4 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 export const ToggleGroupControlAsButtonGroup = forwardRef(
 	UnforwardedToggleGroupControlAsButtonGroup
 );
+ToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';

package/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -122,3 +122,4 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 export const ToggleGroupControlAsRadioGroup = forwardRef(
 	UnforwardedToggleGroupControlAsRadioGroup
 );
+ToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -64,5 +64,6 @@ function UnforwardedToggleGroupControlOption(
 export const ToggleGroupControlOption = forwardRef(
 	UnforwardedToggleGroupControlOption
 );
+ToggleGroupControlOption.displayName = 'ToggleGroupControlOption';
 
 export default ToggleGroupControlOption;

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -71,5 +71,6 @@ function UnforwardedToggleGroupControlOptionIcon(
 export const ToggleGroupControlOptionIcon = forwardRef(
 	UnforwardedToggleGroupControlOptionIcon
 );
+ToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';
 
 export default ToggleGroupControlOptionIcon;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies

package/src/toolbar/toolbar/index.tsx

@@ -102,4 +102,5 @@ function UnforwardedToolbar(
  * ```
  */
 export const Toolbar = forwardRef( UnforwardedToolbar );
+Toolbar.displayName = 'Toolbar';
 export default Toolbar;

package/src/toolbar/toolbar/toolbar-container.tsx

@@ -40,4 +40,5 @@ function UnforwardedToolbarContainer(
 }
 
 export const ToolbarContainer = forwardRef( UnforwardedToolbarContainer );
+ToolbarContainer.displayName = 'ToolbarContainer';
 export default ToolbarContainer;

package/src/toolbar/toolbar-button/index.tsx

@@ -132,4 +132,5 @@ function UnforwardedToolbarButton(
  * ```
  */
 export const ToolbarButton = forwardRef( UnforwardedToolbarButton );
+ToolbarButton.displayName = 'ToolbarButton';
 export default ToolbarButton;

package/src/toolbar/toolbar-dropdown-menu/index.tsx

@@ -45,4 +45,5 @@ function UnforwardedToolbarDropdownMenu(
 }
 
 export const ToolbarDropdownMenu = forwardRef( UnforwardedToolbarDropdownMenu );
+ToolbarDropdownMenu.displayName = 'ToolbarDropdownMenu';
 export default ToolbarDropdownMenu;

package/src/toolbar/toolbar-item/index.tsx

@@ -58,4 +58,5 @@ function UnforwardedToolbarItem(
 }
 
 export const ToolbarItem = forwardRef( UnforwardedToolbarItem );
+ToolbarItem.displayName = 'ToolbarItem';
 export default ToolbarItem;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import styled from '@emotion/styled';
 import { fn } from 'storybook/test';
 

package/src/tooltip/index.tsx

@@ -158,5 +158,6 @@ function UnforwardedTooltip(
 	);
 }
 export const Tooltip = forwardRef( UnforwardedTooltip );
+Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -46,13 +46,21 @@ const Template: StoryFn< typeof Tooltip > = ( props ) => (
 
 export const Default: StoryFn< typeof Tooltip > = Template.bind( {} );
 Default.args = {
-	children: <Button variant="primary">Tooltip Anchor</Button>,
+	children: (
+		<Button __next40pxDefaultSize variant="primary">
+			Tooltip Anchor
+		</Button>
+	),
 	text: 'Tooltip Text',
 };
 
 export const KeyboardShortcut = Template.bind( {} );
 KeyboardShortcut.args = {
-	children: <Button variant="secondary">Keyboard Shortcut</Button>,
+	children: (
+		<Button __next40pxDefaultSize variant="secondary">
+			Keyboard Shortcut
+		</Button>
+	),
 	shortcut: {
 		display: '⇧⌘,',
 		ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
@@ -70,7 +78,9 @@ export const Nested: StoryFn< typeof Tooltip > = Template.bind( {} );
 Nested.args = {
 	children: (
 		<Tooltip text="Nested tooltip text (that will never show)">
-			<Button variant="primary">Tooltip Anchor</Button>
+			<Button __next40pxDefaultSize variant="primary">
+				Tooltip Anchor
+			</Button>
 		</Tooltip>
 	),
 	text: 'Outer tooltip text',

package/src/tree-grid/cell.tsx

@@ -41,5 +41,6 @@ function UnforwardedTreeGridCell(
  * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
  */
 export const TreeGridCell = forwardRef( UnforwardedTreeGridCell );
+TreeGridCell.displayName = 'TreeGridCell';
 
 export default TreeGridCell;

package/src/tree-grid/index.tsx

@@ -386,6 +386,7 @@ function UnforwardedTreeGrid(
  * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
  */
 export const TreeGrid = forwardRef( UnforwardedTreeGrid );
+TreeGrid.displayName = 'TreeGrid';
 
 export default TreeGrid;
 export { default as TreeGridRow } from './row';

package/src/tree-grid/item.tsx

@@ -28,5 +28,6 @@ function UnforwardedTreeGridItem(
  * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
  */
 export const TreeGridItem = forwardRef( UnforwardedTreeGridItem );
+TreeGridItem.displayName = 'TreeGridItem';
 
 export default TreeGridItem;

package/src/tree-grid/roving-tab-index-item.tsx

@@ -48,5 +48,6 @@ export const RovingTabIndexItem = forwardRef(
 		return <Component { ...allProps }>{ children }</Component>;
 	}
 );
+RovingTabIndexItem.displayName = 'RovingTabIndexItem';
 
 export default RovingTabIndexItem;

package/src/tree-grid/row.tsx

@@ -43,5 +43,6 @@ function UnforwardedTreeGridRow(
  * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
  */
 export const TreeGridRow = forwardRef( UnforwardedTreeGridRow );
+TreeGridRow.displayName = 'TreeGridRow';
 
 export default TreeGridRow;

package/src/tree-grid/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -104,7 +104,11 @@ const Rows = ( {
 								{ ( props ) => (
 									<>
 										<Descender level={ level } />
-										<Button variant="primary" { ...props }>
+										<Button
+											__next40pxDefaultSize
+											variant="primary"
+											{ ...props }
+										>
 											{ item.name }
 										</Button>
 									</>

package/src/tree-select/index.tsx

@@ -99,6 +99,8 @@ export function TreeSelect( props: TreeSelectProps ) {
 	} );
 
 	return (
+		// Disable reason: the parent component already takes case of the `__next40pxDefaultSize` prop.
+		// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
 		<SelectControl
 			__shouldNotWarnDeprecated36pxSize
 			{ ...{ label, options, onChange } }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -40,6 +40,7 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 	return (
 		<TreeSelect
+			__next40pxDefaultSize
 			{ ...props }
 			onChange={ setSelection }
 			selectedId={ selection }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/unit-control/index.tsx

@@ -261,6 +261,7 @@ function UnforwardedUnitControl(
  * ```
  */
 export const UnitControl = forwardRef( UnforwardedUnitControl );
+UnitControl.displayName = 'UnitControl';
 
 export { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';
 export default UnitControl;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 /**
@@ -51,6 +51,7 @@ const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 
 	return (
 		<UnitControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v, extra ) => {
@@ -118,6 +119,7 @@ export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 
 	return (
 		<UnitControl
+			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v, extra ) => {

package/src/utils/dropdown-motion.ts

@@ -1,4 +1,5 @@
 // Motion configuration for dropdown-like popovers.
+// Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
 
 export const DROPDOWN_MOTION = Object.freeze( {
 	SLIDE_DISTANCE: 4,

package/src/v-stack/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { StoryFn, Meta } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/v-stack/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-vite';
 
 /**
  * Internal dependencies

package/src/validated-form-controls/components/checkbox-control.tsx

@@ -46,3 +46,4 @@ const UnforwardedValidatedCheckboxControl = (
 export const ValidatedCheckboxControl = forwardRef(
 	UnforwardedValidatedCheckboxControl
 );
+ValidatedCheckboxControl.displayName = 'ValidatedCheckboxControl';