fix: Missing html attributes in sidebar item templates (#33904)

.changeset/honest-pumpkins-joke.md

+---
+'@rocket.chat/meteor': patch
+---
+
+adds missing html attributes in sidebar item templates

apps/meteor/client/sidebarv2/Item/Condensed.tsx

 import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ReactElement } from 'react';
+import type { HTMLAttributes, ReactElement } from 'react';
 import React, { memo, useState } from 'react';
 
 type CondensedProps = {
@@ -17,9 +17,9 @@ type CondensedProps = {
 	selected?: boolean;
 	badges?: ReactElement;
 	clickable?: boolean;
-};
+} & Omit<HTMLAttributes<HTMLAnchorElement>, 'is'>;
 
-const Condensed = ({ icon, title, avatar, actions, href, unread, menu, badges, selected }: CondensedProps) => {
+const Condensed = ({ icon, title, avatar, actions, href, unread, menu, badges, selected, ...props }: CondensedProps) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -32,7 +32,7 @@ const Condensed = ({ icon, title, avatar, actions, href, unread, menu, badges, s
 	};
 
 	return (
-		<SidebarV2Item href={href} selected={selected}>
+		<SidebarV2Item href={href} selected={selected} {...props}>
 			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
 			{icon && icon}
 			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>

apps/meteor/client/sidebarv2/Item/Extended.tsx

@@ -11,6 +11,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
+import type { HTMLAttributes } from 'react';
 import React, { memo, useState } from 'react';
 
 import { useShortTimeAgo } from '../../hooks/useTimeAgo';
@@ -30,7 +31,7 @@ type ExtendedProps = {
 	menuOptions?: any;
 	titleIcon?: React.ReactNode;
 	threadUnread?: boolean;
-};
+} & Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const Extended = ({
 	icon,
@@ -47,6 +48,7 @@ const Extended = ({
 	threadUnread: _threadUnread,
 	unread,
 	selected,
+	...props
 }: ExtendedProps) => {
 	const formatDate = useShortTimeAgo();
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
@@ -61,7 +63,7 @@ const Extended = ({
 	};
 
 	return (
-		<SidebarV2Item href={href} selected={selected}>
+		<SidebarV2Item href={href} selected={selected} {...props}>
 			{avatar && <SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>}
 
 			<SidebarV2ItemCol>

apps/meteor/client/sidebarv2/Item/Medium.tsx

 import { IconButton, SidebarV2Item, SidebarV2ItemAvatarWrapper, SidebarV2ItemMenu, SidebarV2ItemTitle } from '@rocket.chat/fuselage';
 import { useEffectEvent, usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { Keys as IconName } from '@rocket.chat/icons';
+import type { HTMLAttributes } from 'react';
 import React, { memo, useState } from 'react';
 
 type MediumProps = {
@@ -15,9 +16,9 @@ type MediumProps = {
 	badges?: React.ReactNode;
 	selected?: boolean;
 	menuOptions?: any;
-};
+} & Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
-const Medium = ({ icon, title, avatar, actions, href, badges, unread, menu, selected }: MediumProps) => {
+const Medium = ({ icon, title, avatar, actions, href, badges, unread, menu, selected, ...props }: MediumProps) => {
 	const [menuVisibility, setMenuVisibility] = useState(!!window.DISABLE_ANIMATION);
 
 	const isReduceMotionEnabled = usePrefersReducedMotion();
@@ -30,7 +31,7 @@ const Medium = ({ icon, title, avatar, actions, href, badges, unread, menu, sele
 	};
 
 	return (
-		<SidebarV2Item href={href} selected={selected}>
+		<SidebarV2Item href={href} selected={selected} {...props}>
 			<SidebarV2ItemAvatarWrapper>{avatar}</SidebarV2ItemAvatarWrapper>
 			{icon && icon}
 			<SidebarV2ItemTitle unread={unread}>{title}</SidebarV2ItemTitle>