@wordpress/components 32.1.1-next.v.0 → 32.2.0

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/tabs/styles.ts

@@ -162,6 +162,7 @@ export const Tab = styled( Ariakit.Tab )`
 		align-items: center;
 		cursor: pointer;
 		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+		font-family: ${ font( 'default.fontFamily' ) };
 		font-weight: 400;
 		font-size: ${ font( 'default.fontSize' ) };
 		color: ${ COLORS.theme.foreground };

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/styles.ts

@@ -12,7 +12,6 @@ export const Text = css`
 	color: ${ COLORS.theme.foreground };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
-	text-wrap: balance; /* Fallback for Safari. */
 	text-wrap: pretty;
 `;
 

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

@@ -22,7 +22,6 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -55,7 +54,6 @@ exports[`Text snapshot tests should render correctly 1`] = `
   color: var(--wp-components-color-foreground, #1e1e1e);
   line-height: 1.4;
   margin: 0;
-  text-wrap: balance;
   text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

package/src/text/utils.ts

@@ -17,37 +17,37 @@ import { createElement } from '@wordpress/element';
 
 /**
  * @typedef Options
- * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
- * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
- * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
- * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
- * @property {string}                                                     children                  Children to highlight.
- * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
- * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
- * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
- * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
- * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
+ * @property {string}                            [activeClassName='']      Classname for active highlighted areas.
+ * @property {number}                            [activeIndex=-1]          The index of the active highlighted area.
+ * @property {React.CSSProperties}               [activeStyle]             Styles to apply to the active highlighted area.
+ * @property {boolean}                           [autoEscape]              Whether to automatically escape text.
+ * @property {boolean}                           [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
+ * @property {string}                            children                  Children to highlight.
+ * @property {FindAllArgs['findChunks']}         [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
+ * @property {string | Record<string, unknown>}  [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
+ * @property {React.CSSProperties}               [highlightStyle={}]       Styles to apply to highlighted text.
+ * @property {keyof React.JSX.IntrinsicElements} [highlightTag='mark']     Tag to use for the highlighted text.
+ * @property {FindAllArgs['sanitize']}           [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
+ * @property {string[]}                          [searchWords=[]]          Words to search for and highlight.
+ * @property {string}                            [unhighlightClassName=''] Classname to apply to unhighlighted text.
+ * @property {React.CSSProperties}               [unhighlightStyle]        Style to apply to unhighlighted text.
  */
 
 interface Options {
 	activeClassName?: string;
 	activeIndex?: number;
-	activeStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	activeStyle?: React.CSSProperties;
 	autoEscape?: boolean;
 	caseSensitive?: boolean;
 	children: string;
 	findChunks?: FindAllArgs[ 'findChunks' ];
 	highlightClassName?: string | Record< string, unknown >;
-	highlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
-	highlightTag?: keyof JSX.IntrinsicElements;
+	highlightStyle?: React.CSSProperties;
+	highlightTag?: keyof React.JSX.IntrinsicElements;
 	sanitize?: FindAllArgs[ 'sanitize' ];
 	searchWords?: string[];
 	unhighlightClassName?: string;
-	unhighlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	unhighlightStyle?: React.CSSProperties;
 }
 
 /**

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,9 @@ function UnforwardedToggleControl(
 		className,
 		onChange,
 		disabled,
+		// Prevent passing to internal component.
+		__nextHasNoMarginBottom: _,
+		...additionalProps
 	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -74,6 +77,7 @@ function UnforwardedToggleControl(
 					aria-describedby={ describedBy }
 					disabled={ disabled }
 					ref={ ref }
+					{ ...additionalProps }
 				/>
 				<FlexBlock
 					as="label"

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/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -69,7 +69,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -410,7 +410,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -658,7 +658,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;
@@ -993,7 +993,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-gray-100, #f0f0f0);
   border: 1px solid var(--wp-components-color-gray-700, #757575);
   outline: 2px solid transparent;
   outline-offset: -3px;

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

@@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		background: ${ COLORS.theme.foregroundInverted };
+		background: ${ COLORS.theme.gray[ 100 ] };
 		border: 1px solid ${ COLORS.theme.gray[ 700 ] };
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.

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

@@ -114,7 +114,7 @@ function ToggleGroupControlOptionBase(
 		ref: forwardedRef,
 	};
 
-	const labelRef = useRef< HTMLDivElement | null >( null );
+	const labelRef = useRef< HTMLDivElement >( null );
 	useLayoutEffect( () => {
 		if ( isPressed && labelRef.current ) {
 			toggleGroupControlContext.setSelectedElement( labelRef.current );

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

@@ -35,7 +35,7 @@ export type ToggleGroupControlOptionIconProps = Pick<
 	 * Icon displayed as the content of the option. Usually one of the icons from
 	 * the `@wordpress/icons` package, or a custom React `<svg>` icon.
 	 */
-	icon: JSX.Element;
+	icon: React.JSX.Element;
 	/**
 	 * The text to accessibly label the icon option. Will also be shown in a tooltip.
 	 */

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/roving-tab-index-item.tsx

@@ -14,7 +14,7 @@ export const RovingTabIndexItem = forwardRef(
 		{ children, as: Component, ...props }: RovingTabIndexItemProps,
 		forwardedRef: React.ForwardedRef< any >
 	) {
-		const localRef = useRef< any >();
+		const localRef = useRef< any >( null );
 		const ref = forwardedRef || localRef;
 		// @ts-expect-error - We actually want to throw an error if this is undefined.
 		const { lastFocusedElement, setLastFocusedElement } =

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-grid/types.ts

@@ -61,7 +61,7 @@ export type RovingTabIndexItemProps = {
 	 * </TreeGridCell>
 	 * ```
 	 */
-	children?: ( props: RovingTabIndexItemPassThruProps ) => JSX.Element;
+	children?: ( props: RovingTabIndexItemPassThruProps ) => React.JSX.Element;
 	/**
 	 * If `children` is not a function, this component will be used instead.
 	 */

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/element-rect.ts

@@ -139,7 +139,7 @@ export function useTrackElementOffsetRect(
 ) {
 	const [ indicatorPosition, setIndicatorPosition ] =
 		useState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );
-	const intervalRef = useRef< ReturnType< typeof setInterval > >();
+	const intervalRef = useRef< ReturnType< typeof setInterval > >( undefined );
 
 	const measure = useEvent( () => {
 		// Check that the targetElement is still attached to the DOM, in case

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/utils/hooks/use-update-effect.js

@@ -8,8 +8,8 @@ import { useRef, useEffect } from '@wordpress/element';
  * Source:
  * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
+ * @param {React.EffectCallback} effect
+ * @param {React.DependencyList} deps
  */
 function useUpdateEffect( effect, deps ) {
 	const mountedRef = useRef( false );

package/src/utils/rtl.js

@@ -51,9 +51,9 @@ function getConvertedKey( key ) {
 /**
  * An incredibly basic ltr -> rtl converter for style properties
  *
- * @param {import('react').CSSProperties} ltrStyles
+ * @param {React.CSSProperties} ltrStyles
  *
- * @return {import('react').CSSProperties} Converted ltr -> rtl styles
+ * @return {React.CSSProperties} Converted ltr -> rtl styles
  */
 export const convertLTRToRTL = ( ltrStyles = {} ) => {
 	return Object.fromEntries(
@@ -67,8 +67,8 @@ export const convertLTRToRTL = ( ltrStyles = {} ) => {
 /**
  * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects.
  *
- * @param {import('react').CSSProperties} ltrStyles   Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
- * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided.
+ * @param {React.CSSProperties} ltrStyles   Ltr styles. Converts and renders from ltr -> rtl styles, if applicable.
+ * @param {React.CSSProperties} [rtlStyles] Rtl styles. Renders if provided.
  *
  * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
  */

package/src/utils/use-responsive-value.ts

@@ -66,9 +66,5 @@ export function useResponsiveValue< T >(
 
 	const array = values || [];
 
-	/* eslint-disable jsdoc/no-undefined-types */
-	return /** @type {T[]} */ array[
-		/* eslint-enable jsdoc/no-undefined-types */
-		index >= array.length ? array.length - 1 : index
-	];
+	return array[ index >= array.length ? array.length - 1 : index ];
 }

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/v-stack/test/index.tsx

@@ -41,7 +41,7 @@ describe( 'props', () => {
 	} );
 
 	test( 'should not pass through invalid props to the `as` component', () => {
-		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+		const AsComponent = ( props: React.JSX.IntrinsicElements[ 'div' ] ) => {
 			return <div { ...props } />;
 		};
 

package/src/validated-form-controls/components/stories/overview.story.tsx

@@ -149,7 +149,8 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
 				>[ 'customValidity' ]
 			>( undefined );
 
-		const timeoutRef = useRef< ReturnType< typeof setTimeout > >();
+		const timeoutRef =
+			useRef< ReturnType< typeof setTimeout > >( undefined );
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		const debouncedValidate = useCallback(