@wordpress/components 32.2.1-next.v.0 → 32.2.1-next.v.202602091733.0

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

@@ -24,6 +24,11 @@ const meta: Meta< typeof SearchControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SearchControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -32,6 +32,11 @@ const meta: Meta< typeof SelectControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -17,6 +17,10 @@ const meta: Meta< typeof Shortcut > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/slot-fill/index.tsx

@@ -64,9 +64,18 @@ export function createSlotFill( key: SlotKey ) {
 	);
 	FillComponent.displayName = `${ baseName }Fill`;
 
-	const SlotComponent = (
-		props: DistributiveOmit< SlotComponentProps, 'name' >
-	) => <Slot name={ key } { ...props } />;
+	// Wrap SlotComponent with forwardRef to support ref forwarding
+	const SlotComponent = forwardRef(
+		(
+			props: DistributiveOmit< SlotComponentProps, 'name' >,
+			ref: ForwardedRef< any >
+		) => <Slot name={ key } ref={ ref } { ...props } />
+	) as React.ForwardRefExoticComponent<
+		DistributiveOmit< SlotComponentProps, 'name' > &
+			React.RefAttributes< any >
+	> & {
+		__unstableName: SlotKey;
+	};
 	SlotComponent.displayName = `${ baseName }Slot`;
 	/**
 	 * @deprecated 6.8.0

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

@@ -26,6 +26,10 @@ const meta: Meta< typeof Slot > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 

package/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -43,14 +43,14 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
     data-position="first"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     />
   </div>
   <div
     data-position="second"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     >
       Content
     </div>
@@ -67,7 +67,7 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
     data-position="second"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     >
       Content
     </div>
@@ -208,7 +208,7 @@ exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     />
   </div>
 </div>

package/src/slot-fill/test/index.js

@@ -3,6 +3,11 @@
  */
 import { render, screen, within } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -82,4 +87,37 @@ describe( 'createSlotFill', () => {
 			within( pageSidebar ).queryByText( 'Post Section' )
 		).not.toBeInTheDocument();
 	} );
+
+	test( 'should forward ref to the slot when using bubblesVirtually', () => {
+		const TestSlotFill = createSlotFill( 'TestRefSlot' );
+		const ref = createRef();
+
+		render(
+			<SlotFillProvider>
+				<TestSlotFill.Fill>
+					<p>Content</p>
+				</TestSlotFill.Fill>
+				<TestSlotFill.Slot bubblesVirtually ref={ ref } />
+			</SlotFillProvider>
+		);
+
+		expect( ref.current ).not.toBeNull();
+		expect( ref.current.tagName ).toBe( 'DIV' );
+	} );
+
+	test( 'should forward ref without bubblesVirtually (ref stays null for fragment-based slot)', () => {
+		const TestSlotFill = createSlotFill( 'TestRefSlotBase' );
+		const ref = createRef();
+
+		render(
+			<SlotFillProvider>
+				<TestSlotFill.Fill>
+					<p>Content</p>
+				</TestSlotFill.Fill>
+				<TestSlotFill.Slot ref={ ref } />
+			</SlotFillProvider>
+		);
+
+		expect( ref.current ).toBeNull();
+	} );
 } );

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

@@ -37,6 +37,10 @@ const meta: Meta< typeof Snackbar > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -45,6 +45,11 @@ const meta: Meta< typeof Spacer > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

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

@@ -18,6 +18,10 @@ const meta: Meta< typeof Spinner > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -22,6 +22,11 @@ const meta: Meta< typeof Surface > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/surface/test/__snapshots__/index.tsx.snap

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1bmtyqd-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1921uc5-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-iin9ud-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-i25gtk-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-4j30ez-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1pd05xm-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1v7smm4-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-y3blhg-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -94,8 +94,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1afnk4j-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-15um7qp-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-o6qg0g-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >

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

@@ -21,6 +21,11 @@ const meta: Meta< typeof TabPanel > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'use-with-caution',
+			whereUsed: 'global',
+			notes: 'When building for the Gutenberg repo, use `Tabs` instead. Otherwise, continue using for now.',
+		},
 	},
 	args: {
 		onSelect: fn(),

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

@@ -34,6 +34,11 @@ const meta: Meta< typeof Tabs > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'When building for the Gutenberg repo, use this component instead of `TabPanel`. Otherwise, continue using `TabPanel`. Both will be superseded by `Tabs` in `@wordpress/ui`, but continue using these for now.',
+		},
 	},
 	args: {
 		onActiveTabIdChange: fn(),

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

@@ -30,6 +30,11 @@ const meta: Meta< typeof Text > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+		},
 	},
 };
 export default meta;

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

@@ -28,6 +28,11 @@ const meta: Meta< typeof TextControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
+		},
 	},
 };
 export default meta;

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

@@ -17,6 +17,10 @@ const meta: Meta< typeof TextHighlight > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -28,6 +28,11 @@ const meta: Meta< typeof TextareaControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `TextareaControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -23,6 +23,11 @@ const meta: Meta< typeof Theme > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'This is an internal experiment and not meant for external use. Will be superseded by `@wordpress/theme`.',
+		},
 	},
 };
 export default meta;

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

@@ -20,6 +20,10 @@ const meta: Meta< typeof Tip > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'unaudited',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/toggle-control/index.tsx

@@ -28,6 +28,8 @@ function UnforwardedToggleControl(
 		className,
 		onChange,
 		disabled,
+		// Prevent passing to internal component.
+		__nextHasNoMarginBottom: _,
 		...additionalProps
 	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >

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

@@ -26,6 +26,11 @@ const meta: Meta< typeof ToggleControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `ToggleControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -37,6 +37,11 @@ const meta: Meta< typeof ToggleGroupControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `ToggleGroupControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -56,6 +56,10 @@ const meta: Meta< typeof Toolbar > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 

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

@@ -45,6 +45,10 @@ const meta: Meta< typeof ToolsPanel > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

package/src/tooltip/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from '@wordpress/element';
+import type { TooltipInternalContext as TooltipInternalContextType } from './types';
+
+export const TooltipInternalContext =
+	createContext< TooltipInternalContextType >( {
+		isNestedInTooltip: false,
+	} );
+TooltipInternalContext.displayName = 'TooltipInternalContext';

package/src/tooltip/index.tsx

@@ -1,36 +1,17 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useInstanceId } from '@wordpress/compose';
 import {
 	Children,
 	useContext,
-	createContext,
 	forwardRef,
 	cloneElement,
 } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import type {
-	TooltipProps,
-	TooltipInternalContext as TooltipInternalContextType,
-} from './types';
+import type { TooltipProps } from './types';
 import Shortcut from '../shortcut';
 import { positionToPlacement } from '../popover/utils';
-
-const TooltipInternalContext = createContext< TooltipInternalContextType >( {
-	isNestedInTooltip: false,
-} );
-TooltipInternalContext.displayName = 'TooltipInternalContext';
+import { TooltipInternalContext } from './context';
 
 /**
  * Time over anchor to wait before showing tooltip
@@ -158,6 +139,5 @@ function UnforwardedTooltip(
 	);
 }
 export const Tooltip = forwardRef( UnforwardedTooltip );
-Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;

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

@@ -36,6 +36,10 @@ const meta: Meta< typeof Tooltip > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -32,6 +32,10 @@ const meta: Meta< typeof TreeGrid > = {
 	},
 	parameters: {
 		controls: { expanded: true },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -29,6 +29,10 @@ const meta: Meta< typeof TreeSelect > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 

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

@@ -22,6 +22,10 @@ const meta: Meta< typeof Truncate > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -39,6 +39,10 @@ const meta: Meta< typeof UnitControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/utils/hooks/use-cx.ts

@@ -4,8 +4,7 @@
 import { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/serialize';
 import { insertStyles } from '@emotion/utils';
-// eslint-disable-next-line no-restricted-imports
-import type { ClassNamesArg } from '@emotion/css';
+import type { ClassNamesArg } from '@emotion/css/create-instance';
 // eslint-disable-next-line no-restricted-imports
 import { cx as innerCx } from '@emotion/css';
 

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

@@ -42,6 +42,11 @@ const meta: Meta< typeof VStack > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -19,6 +19,11 @@ const meta: Meta< typeof View > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/view/test/__snapshots__/index.js.snap

@@ -3,7 +3,7 @@
 exports[`props should render as another element 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -13,7 +13,7 @@ exports[`props should render as another element 1`] = `
 exports[`props should render correctly 1`] = `
 <div>
   <div
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </div>
@@ -23,7 +23,7 @@ exports[`props should render correctly 1`] = `
 exports[`props should render with custom styles (Array) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -33,7 +33,7 @@ exports[`props should render with custom styles (Array) 1`] = `
 exports[`props should render with custom styles (object) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>
@@ -43,7 +43,7 @@ exports[`props should render with custom styles (object) 1`] = `
 exports[`props should render with custom styles (string) 1`] = `
 <div>
   <p
-    class="emotion-0 emotion-1"
+    class="css-1ragr82-PolymorphicDiv emotion-0"
   >
     <span />
   </p>

package/src/visually-hidden/stories/index.story.tsx

@@ -21,6 +21,10 @@ const meta: Meta< typeof VisuallyHidden > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/visually-hidden/test/__snapshots__/index.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`VisuallyHidden should render correctly 1`] = `
 <div
-  class="components-visually-hidden emotion-0 emotion-1"
+  class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
   data-wp-c16t="true"
   data-wp-component="VisuallyHidden"
   style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"

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

@@ -24,6 +24,11 @@ const meta: Meta< typeof ZStack > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation. Write your own CSS instead.',
+		},
 	},
 };
 export default meta;