manzoorwanijk · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026 · Sep 29, 2026
diff --git a/package-lock.json b/package-lock.json
@@ -7,7 +7,7 @@ import type { CompositeGroupLabelProps } from './types';
 export const CompositeGroupLabel = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
->( function CompositeGroupLabel( props, ref ) {
+>( function UnforwardedCompositeGroupLabel( props, ref ) {
 	const context = useCompositeContext();
 	const isWithinGroup = useCompositeGroupContext();
 

@@ -7,7 +7,7 @@ import type { CompositeGroupProps } from './types';
 export const CompositeGroup = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeGroupProps, 'div', false >
->( function CompositeGroup( props, ref ) {
+>( function UnforwardedCompositeGroup( props, ref ) {
 	const context = useCompositeContext();
 	const { children, ...restProps } = props;
 

@@ -7,7 +7,7 @@ import type { CompositeHoverProps } from './types';
 export const CompositeHover = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeHoverProps, 'div', false >
->( function CompositeHover( props, ref ) {
+>( function UnforwardedCompositeHover( props, ref ) {
 	const context = useCompositeContext();
 
 	// @ts-expect-error The store prop is undocumented and only used by the

@@ -39,7 +39,7 @@ export const Composite = Object.assign(
 	forwardRef<
 		HTMLDivElement,
 		WordPressComponentProps< CompositeProps, 'div', false >
-	>( function Composite(
+	>( function UnforwardedComposite(
 		{
 			// Composite store props
 			activeId,

@@ -8,7 +8,7 @@ import type { CompositeItemProps } from './types';
 export const CompositeItem = forwardRef<
 	HTMLButtonElement,
 	WordPressComponentProps< CompositeItemProps, 'button', false >
->( function CompositeItem( props, ref ) {
+>( function UnforwardedCompositeItem( props, ref ) {
 	const context = useCompositeContext();
 
 	// @ts-expect-error The store prop is undocumented and only used by the

@@ -7,7 +7,7 @@ import type { CompositeRowProps } from './types';
 export const CompositeRow = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeRowProps, 'div', false >
->( function CompositeRow( props, ref ) {
+>( function UnforwardedCompositeRow( props, ref ) {
 	const context = useCompositeContext();
 
 	// @ts-expect-error The store prop is undocumented and only used by the

@@ -7,7 +7,7 @@ import type { CompositeTypeaheadProps } from './types';
 export const CompositeTypeahead = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
->( function CompositeTypeahead( props, ref ) {
+>( function UnforwardedCompositeTypeahead( props, ref ) {
 	const context = useCompositeContext();
 
 	// @ts-expect-error The store prop is undocumented and only used by the

@@ -10,7 +10,7 @@ import { useMenuItemHideOnClick } from './use-menu-item-hide-on-click';
 export const CheckboxItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< CheckboxItemProps, 'div', false >
->( function CheckboxItem(
+>( function UnforwardedCheckboxItem(
 	{ suffix, children, disabled = false, hideOnClick = false, ...props },
 	ref
 ) {

@@ -7,7 +7,7 @@ import * as Styled from './styles';
 export const Group = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< GroupProps, 'div', false >
->( function Group( props, ref ) {
+>( function UnforwardedGroup( props, ref ) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {

@@ -6,7 +6,7 @@ import * as Styled from './styles';
 export const ItemHelpText = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function ItemHelpText( props, ref ) {
+>( function UnforwardedItemHelpText( props, ref ) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {

@@ -6,7 +6,7 @@ import * as Styled from './styles';
 export const ItemLabel = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
->( function ItemLabel( props, ref ) {
+>( function UnforwardedItemLabel( props, ref ) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {

@@ -8,7 +8,7 @@ import { useMenuItemHideOnClick } from './use-menu-item-hide-on-click';
 export const Item = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< ItemProps, 'div', false >
->( function Item(
+>( function UnforwardedItem(
 	{
 		prefix,
 		suffix,

@@ -13,7 +13,10 @@ import { Context } from './context';
 export const Popover = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< PopoverProps, 'div', false >
->( function Popover( { gutter, shift, modal = true, ...otherProps }, ref ) {
+>( function UnforwardedPopover(
+	{ gutter, shift, modal = true, ...otherProps },
+	ref
+) {
 	const menuContext = useContext( Context );
 
 	// Extract the side from the applied placement — useful for animations.

@@ -17,7 +17,7 @@ const radioCheck = (
 export const RadioItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< RadioItemProps, 'div', false >
->( function RadioItem(
+>( function UnforwardedRadioItem(
 	{ suffix, children, disabled = false, hideOnClick = false, ...props },
 	ref
 ) {

@@ -7,7 +7,7 @@ import * as Styled from './styles';
 export const Separator = forwardRef<
 	HTMLHRElement,
 	WordPressComponentProps< SeparatorProps, 'hr', false >
->( function Separator( props, ref ) {
+>( function UnforwardedSeparator( props, ref ) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {

@@ -167,7 +167,7 @@ export const WithSubmenu: StoryObj< typeof Menu > = {
 };
 
 export const WithCheckboxes: StoryObj< typeof Menu > = {
-	render: function WithCheckboxes( props: Props ) {
+	render: function WithCheckboxesRender( props: Props ) {
 		const [ isAChecked, setAChecked ] = useState( false );
 		const [ isBChecked, setBChecked ] = useState( true );
 		const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] =
@@ -317,7 +317,7 @@ export const WithCheckboxes: StoryObj< typeof Menu > = {
 };
 
 export const WithRadios: StoryObj< typeof Menu > = {
-	render: function WithRadios( props: Props ) {
+	render: function WithRadiosRender( props: Props ) {
 		const [ radioValue, setRadioValue ] = useState( 'two' );
 		const onRadioChange: React.ComponentProps<
 			typeof Menu.RadioItem
@@ -389,7 +389,7 @@ export const WithRadios: StoryObj< typeof Menu > = {
 };
 
 export const WithModal: StoryObj< typeof Menu > = {
-	render: function WithModal( props: Props ) {
+	render: function WithModalRender( props: Props ) {
 		const [ isModalOpen, setModalOpen ] = useState( false );
 
 		return (
@@ -566,7 +566,7 @@ export const ToolbarVariant: StoryObj< typeof Menu > = {
 };
 
 export const InsideModal: StoryObj< typeof Menu > = {
-	render: function InsideModal( props: Props ) {
+	render: function InsideModalRender( props: Props ) {
 		const [ isModalOpen, setModalOpen ] = useState( false );
 		return (
 			<>

@@ -10,7 +10,7 @@ import * as Styled from './styles';
 export const SubmenuTriggerItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< ItemProps, 'div', false >
->( function SubmenuTriggerItem( { suffix, ...otherProps }, ref ) {
+>( function UnforwardedSubmenuTriggerItem( { suffix, ...otherProps }, ref ) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store.parent ) {

@@ -7,7 +7,10 @@ import { Context } from './context';
 export const TriggerButton = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TriggerButtonProps, 'button', false >
->( function TriggerButton( { children, disabled = false, ...props }, ref ) {
+>( function UnforwardedTriggerButton(
+	{ children, disabled = false, ...props },
+	ref
+) {
 	const menuContext = useContext( Context );
 
 	if ( ! menuContext?.store ) {

@@ -35,7 +35,7 @@ function internalToExternalTabId(
  * It is responsible for managing the state of the tabs, and rendering one instance of the `Tabs.TabList` component and one or more instances of the `Tab.TabPanel` component.
  */
 export const Tabs = Object.assign(
-	function Tabs( {
+	function TabsRoot( {
 		selectOnMove = true,
 		defaultTabId,
 		orientation = 'horizontal',
@@ -46,7 +46,7 @@ export const Tabs = Object.assign(
 		defaultActiveTabId,
 		onActiveTabIdChange,
 	}: TabsProps ) {
-		const instanceId = useInstanceId( Tabs, 'tabs' );
+		const instanceId = useInstanceId( TabsRoot, 'tabs' );
 		const store = Ariakit.useTabStore( {
 			selectOnMove,
 			orientation,

@@ -13,7 +13,10 @@ import type { WordPressComponentProps } from '../context';
 export const Tab = forwardRef<
 	HTMLButtonElement,
 	Omit< WordPressComponentProps< TabProps, 'button', false >, 'id' >
->( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
+>( function UnforwardedTab(
+	{ children, tabId, disabled, render, ...otherProps },
+	ref
+) {
 	const { store, instanceId } = useTabsContext() ?? {};
 
 	if ( ! store ) {

@@ -59,7 +59,7 @@ function useScrollRectIntoView(
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
->( function TabList( { children, ...otherProps }, ref ) {
+>( function UnforwardedTabList( { children, ...otherProps }, ref ) {
 	const { store } = useTabsContext() ?? {};
 
 	const selectedId = useStoreState( store, 'selectedId' );

@@ -9,7 +9,7 @@ import type { WordPressComponentProps } from '../context';
 export const TabPanel = forwardRef<
 	HTMLDivElement,
 	Omit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >
->( function TabPanel(
+>( function UnforwardedTabPanel(
 	{ children, tabId, focusable = true, ...otherProps },
 	ref
 ) {

diff --git a/packages/compose/src/hooks/use-dragging/index.ts b/packages/compose/src/hooks/use-dragging/index.ts
@@ -34,10 +34,10 @@ export default function useDragging( {
 	}, [] );
 
 	const endDrag = useCallback(
-		function endDrag( event?: MouseEvent ): void {
+		function handleEndDrag( event?: MouseEvent ): void {
 			eventsRef.current.onDragEnd?.( event );
 			document.removeEventListener( 'mousemove', onMouseMove );
-			document.removeEventListener( 'mouseup', endDrag );
+			document.removeEventListener( 'mouseup', handleEndDrag );
 			setIsDragging( false );
 		},
 		[ onMouseMove ]

@@ -74,7 +74,7 @@ interface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {
 }
 
 const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
-	function GridItem(
+	function UnforwardedGridItem(
 		{
 			view,
 			selection,
@@ -120,7 +120,7 @@ const GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(
 			[ forwardedRef ]
 		);
 		useIntersectionObserver( elementRef, posinset );
-		const instanceId = useInstanceId( GridItem );
+		const instanceId = useInstanceId( UnforwardedGridItem );
 
 		const isSelected = selection.includes( id );
 

diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
@@ -8,7 +8,7 @@
 
 ### Bug Fixes
 
--   Pin `typescript-eslint` to `8.60.0`, whose peer range includes TypeScript 6.0. Later versions report `const Foo = forwardRef( function Foo() {} )` under `@typescript-eslint/no-shadow` ([#83754](https://github.com/WordPress/gutenberg/pull/83754)).
+-   Update `typescript-eslint` to `^8.70.1`, whose peer range includes TypeScript 6.0 ([#83754](https://github.com/WordPress/gutenberg/pull/83754)).
 
 ## 27.0.0 (2026-09-23)
 

diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -58,12 +58,12 @@
 		"eslint-plugin-react-hooks": "^7.1.1",
 		"globals": "^16.0.0",
 		"requireindex": "^1.2.0",
-		"typescript-eslint": "8.60.0"
+		"typescript-eslint": "^8.70.1"
 	},
 	"devDependencies": {
 		"@types/eslint": "^9",
 		"@types/estree": "^1.0.8",
-		"@typescript-eslint/parser": "8.60.0",
+		"@typescript-eslint/parser": "^8.70.1",
 		"eslint": "^10.0.0",
 		"typescript": "npm:@typescript/typescript6@^6.0.2",
 		"vitest": "^5.0.0"

@@ -99,7 +99,7 @@ const NO_SORT_STRATEGY = () => null;
  * @param ref   Forwarded to the grid's root `<div>`.
  */
 export const DashboardGrid = forwardRef< HTMLDivElement, DashboardGridProps >(
-	function DashboardGrid( props, ref ) {
+	function UnforwardedDashboardGrid( props, ref ) {
 		const {
 			layout,
 			columns,

@@ -100,7 +100,7 @@ const NO_SORT_STRATEGY = () => null;
  * @param ref   Forwarded to the surface's root `<div>`.
  */
 export const DashboardLanes = forwardRef< HTMLDivElement, DashboardLanesProps >(
-	function DashboardLanes( props, ref ) {
+	function UnforwardedDashboardLanes( props, ref ) {
 		const {
 			layout,
 			columns,

@@ -148,7 +148,10 @@ function ColorSample( {
 }
 
 export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
-	function RampTable( { label, ramps, warnings = [] }, forwardedRef ) {
+	function UnforwardedRampTable(
+		{ label, ramps, warnings = [] },
+		forwardedRef
+	) {
 		const hasAdjustedSeed = ramps.some( ( { seed, ramp } ) =>
 			isSeedAdjusted( seed.value, ramp[ seed.name ] )
 		);

@@ -217,7 +217,7 @@ function sleep( ms: number ) {
  * reopens.
  */
 export const AsyncConfirm: Story = {
-	render: function AsyncConfirm( args ) {
+	render: function AsyncConfirmRender( args ) {
 		const [ shouldFail, setShouldFail ] = useState( false );
 		const successId = useId();
 		const failureId = useId();
@@ -374,7 +374,7 @@ export const Scrollable: Story = {
  * from code or from a non-standard trigger element.
  */
 export const Controlled: Story = {
-	render: function Controlled( args ) {
+	render: function ControlledRender( args ) {
 		const [ isOpen, setIsOpen ] = useState( false );
 
 		return (

@@ -7,20 +7,19 @@ import { Text } from '../text';
 /**
  * A badge component for displaying labels with semantic intent.
  */
-export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(
-	{ intent = 'none', className, ...props },
-	ref
-) {
-	return (
-		<Text
-			ref={ ref }
-			className={ clsx(
-				styles.badge,
-				styles[ `is-${ intent }-intent` ],
-				className
-			) }
-			{ ...props }
-			variant="body-sm"
-		/>
-	);
-} );
+export const Badge = forwardRef< HTMLSpanElement, BadgeProps >(
+	function UnforwardedBadge( { intent = 'none', className, ...props }, ref ) {
+		return (
+			<Text
+				ref={ ref }
+				className={ clsx(
+					styles.badge,
+					styles[ `is-${ intent }-intent` ],
+					className
+				) }
+				{ ...props }
+				variant="body-sm"
+			/>
+		);
+	}
+);
@@ -5,7 +5,10 @@ import type { ButtonProps } from '../button/types';
 import styles from './style.module.css';
 
 const OverflowTriggerButton = forwardRef< HTMLButtonElement, ButtonProps >(
-	function OverflowTriggerButton( { children, className, ...props }, ref ) {
+	function UnforwardedOverflowTriggerButton(
+		{ children, className, ...props },
+		ref
+	) {
 		return (
 			<Button
 				{ ...props }