refactor: Explicit component props (23/23)

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx

@@ -16,7 +16,7 @@ export const VideoConfPopupContainer = styled('div', ({ position: _position, ...
 	border-radius: 0.25rem;
 `;
 
-type VideoConfPopupProps = {
+export type VideoConfPopupProps = {
 	children: ReactNode;
 	position?: number;
 } & HTMLAttributes<HTMLElement>;

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx

@@ -14,7 +14,9 @@ const backdropStyle = css`
 	}
 `;
 
-const VideoConfPopupBackdrop = ({ children }: { children: ReactNode }) => (
+export type VideoConfPopupBackdropProps = { children: ReactNode };
+
+const VideoConfPopupBackdrop = ({ children }: VideoConfPopupBackdropProps) => (
 	<Box m={40} zIndex={99} className={backdropStyle}>
 		{children}
 	</Box>

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const VideoConfPopupContent = ({ children }: { children: ReactNode }) => (
+export type VideoConfPopupContentProps = { children: ReactNode };
+
+const VideoConfPopupContent = ({ children }: VideoConfPopupContentProps) => (
 	<Box display='flex' flexDirection='column' mbs={8}>
 		{children}
 	</Box>

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupHeader.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const VideoConfPopupHeader = ({ children }: { children: ReactNode }) => (
+export type VideoConfPopupHeaderProps = { children: ReactNode };
+
+const VideoConfPopupHeader = ({ children }: VideoConfPopupHeaderProps) => (
 	<Box display='flex' minHeight='x28' justifyContent='space-between'>
 		{children}
 	</Box>

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupIcon.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const VideoConfPopupIcon = ({ children }: { children: ReactNode }) => (
+export type VideoConfPopupIconProps = { children: ReactNode };
+
+const VideoConfPopupIcon = ({ children }: VideoConfPopupIconProps) => (
 	<Box display='flex' flexShrink={0} alignItems='center' size='x18' overflow='hidden' justifyContent='center'>
 		{children}
 	</Box>

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-type VideoConfPopupInfoProps = {
+export type VideoConfPopupInfoProps = {
 	avatar?: ReactNode;
 	icon?: ReactNode;
 	children: ReactNode;

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx

@@ -6,7 +6,7 @@ import VideoConfPopupContent from './VideoConfPopupContent';
 import VideoConfPopupFooter from './VideoConfPopupFooter';
 import VideoConfPopupHeader from './VideoConfPopupHeader';
 
-type VideoConfPopupSkeletonProps = Omit<ComponentProps<typeof VideoConfPopup>, 'children'>;
+export type VideoConfPopupSkeletonProps = Omit<ComponentProps<typeof VideoConfPopup>, 'children'>;
 
 const VideoConfPopupSkeleton = (props: VideoConfPopupSkeletonProps) => (
 	<VideoConfPopup aria-label='Loading' {...props}>

packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx

@@ -1,6 +1,6 @@
 import { Box, Throbber } from '@rocket.chat/fuselage';
 
-type VideoConfPopupTitleProps = {
+export type VideoConfPopupTitleProps = {
 	text: string;
 	counter?: boolean;
 };

packages/ui-voip/src/components/ActionButton.tsx

@@ -3,7 +3,7 @@ import type { Keys } from '@rocket.chat/icons';
 import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 
-type ActionButtonProps = {
+export type ActionButtonProps = {
 	label: string;
 	icon: Keys;
 	disabled?: boolean;

packages/ui-voip/src/components/Actions/ActionStrip.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 
 export const ACTION_STRIP_TOTAL_HEIGHT = 52;
 
-type ActionStripProps = {
+export type ActionStripProps = {
 	children: ReactNode;
 	leftSlot?: ReactNode;
 	rightSlot?: ReactNode;

packages/ui-voip/src/components/Actions/ActionToggleChat.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
-type ActionToggleChatProps = {
+export type ActionToggleChatProps = {
 	pressed: boolean;
 	onClick: () => void;
 };

packages/ui-voip/src/components/CallHistoryExternalUser.tsx

@@ -2,7 +2,7 @@ import { Box, Icon, FramedIcon } from '@rocket.chat/fuselage';
 
 import type { CallHistoryExternalContact } from '../definitions';
 
-type CallHistoryExternalUserProps = {
+export type CallHistoryExternalUserProps = {
 	contact: CallHistoryExternalContact;
 	showIcon?: boolean;
 };

packages/ui-voip/src/components/CallHistoryInternalUser.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 
 import type { CallHistoryInternalContact } from '../definitions';
 
-type CallHistoryInternalUserProps = {
+export type CallHistoryInternalUserProps = {
 	contact: CallHistoryInternalContact;
 };
 

packages/ui-voip/src/components/CallHistoryUser.tsx

@@ -3,7 +3,7 @@ import CallHistoryInternalUser from './CallHistoryInternalUser';
 import CallHistoryUnknownUser from './CallHistoryUnknownUser';
 import { isCallHistoryExternalContact, isCallHistoryInternalContact, type CallHistoryContact } from '../definitions';
 
-type CallHistoryUserProps = {
+export type CallHistoryUserProps = {
 	contact: CallHistoryContact;
 };
 

packages/ui-voip/src/components/Cards/Card.tsx

@@ -22,7 +22,7 @@ export const CARD_MARGIN = 2;
 export const CARD_TOTAL_HEIGHT = CARD_HEIGHT + CARD_MARGIN * 2;
 export const CARD_TOTAL_WIDTH = CARD_MAX_WIDTH + CARD_MARGIN * 2;
 
-type CardProps = {
+export type CardProps = {
 	children: ReactNode;
 	title?: string;
 	maxWidth?: string | number;

packages/ui-voip/src/components/Cards/CardList.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-type CardListProps = {
+export type CardListProps = {
 	children: ReactNode;
 	shouldWrapCards?: boolean;
 	direction?: 'row' | 'column';

packages/ui-voip/src/components/Cards/CardListContainer.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import CardList from './CardList';
 import CardListPinned from './CardListPinned';
 
-type CardListContainerProps = {
+export type CardListContainerProps = {
 	children: ReactNode;
 	focusedCard?: ReactNode;
 	shouldWrapCards?: boolean;

packages/ui-voip/src/components/Cards/CardListPinned.tsx

@@ -6,7 +6,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import { CARD_MARGIN, CARD_MIN_WIDTH } from './Card';
 import CardListContainer from './CardList';
 
-type CardListPinnedProps = {
+export type CardListPinnedProps = {
 	children: ReactNode;
 	focusedCard: ReactNode;
 	flexDirection?: CSSProperties['flexDirection'];

packages/ui-voip/src/components/Cards/CardListSection.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-type CardListSectionProps = {
+export type CardListSectionProps = {
 	children: ReactNode;
 };
 

packages/ui-voip/src/components/Cards/CardWidgetContainer.tsx

@@ -1,7 +1,7 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-type CardWidgetContainerProps = {
+export type CardWidgetContainerProps = {
 	children: ReactNode;
 };
 

packages/ui-voip/src/components/Cards/PeerCard/PeerCard.tsx

@@ -3,7 +3,7 @@ import { Avatar, Box, Icon } from '@rocket.chat/fuselage';
 import Card from '../Card';
 import PeerCardSlot from './PeerCardSlot';
 
-type PeerCardProps = {
+export type PeerCardProps = {
 	displayName: string;
 	avatarUrl?: string;
 	muted: boolean;

packages/ui-voip/src/components/Cards/PeerCard/PeerCardSlot.tsx

@@ -2,7 +2,7 @@ import { Icon } from '@rocket.chat/fuselage';
 
 import CardSlot from '../CardSlot';
 
-type PeerCardSlotProps = {
+export type PeerCardSlotProps = {
 	muted: boolean;
 	held: boolean;
 	displayName: string;

packages/ui-voip/src/components/Cards/StreamCard/StreamCard.tsx

@@ -5,7 +5,7 @@ import StreamCardOpenInRoomButton from './StreamCardOpenInRoom';
 import StreamCardPin from './StreamCardPin';
 import StreamCardStopSharingButton from './StreamCardStopSharingButton';
 
-type StreamCardProps = {
+export type StreamCardProps = {
 	children: ReactNode;
 	own?: boolean;
 	onClickFocusStream?: () => void;

packages/ui-voip/src/components/Cards/StreamCard/StreamCardOpenInRoom.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import CardSlotContainer from '../CardSlot';
 
-type StreamCardOpenInRoomButtonProps = {
+export type StreamCardOpenInRoomButtonProps = {
 	onClick: () => void;
 	showOnHover?: boolean;
 };

packages/ui-voip/src/components/Cards/StreamCard/StreamCardPin.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import CardSlotContainer from '../CardSlot';
 import type { SlotPosition } from '../CardSlot';
 
-type CardSlotPinProps = {
+export type CardSlotPinProps = {
 	onClick: () => void;
 	focused?: boolean;
 	position?: SlotPosition;

packages/ui-voip/src/components/Cards/StreamCard/StreamCardStopSharingButton.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import CardSlotContainer from '../CardSlot';
 
-type CardSlotStopSharingProps = {
+export type CardSlotStopSharingProps = {
 	onClick: () => void;
 	showOnHover?: boolean;
 };

packages/ui-voip/src/components/DevicePicker.tsx

@@ -11,7 +11,7 @@ import { ActionButton } from '.';
 import { useMediaCallView } from '../context/MediaCallViewContext';
 import { useDevicePermissionPrompt2, stopTracks } from '../hooks/useDevicePermissionPrompt';
 
-type DevicePickerButtonProps = {
+export type DevicePickerButtonProps = {
 	secondary?: boolean;
 	small?: boolean;
 } & Omit<ComponentProps<typeof ActionButton>, 'label' | 'icon'>;
@@ -35,8 +35,10 @@ const getDefaultDeviceItem = (label: string, type: 'input' | 'output') => ({
 	id: `default-${type}`,
 });
 
+export type DevicePickerProps = { secondary?: boolean; className?: string };
+
 // eslint-disable-next-line react/no-multi-comp
-const DevicePicker = ({ secondary = false, className }: { secondary?: boolean; className?: string }) => {
+const DevicePicker = ({ secondary = false, className }: DevicePickerProps) => {
 	const { t } = useTranslation();
 
 	const { onDeviceChange } = useMediaCallView();

packages/ui-voip/src/components/Keypad/Key.tsx

@@ -4,7 +4,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Button } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
-type KeyProps = {
+export type KeyProps = {
 	primaryKey: string;
 	alternativeKey?: string;
 	longPressKey?: string;

packages/ui-voip/src/components/Keypad/Keypad.tsx

@@ -3,7 +3,7 @@ import { Box } from '@rocket.chat/fuselage';
 
 import Key from './Key';
 
-type KeypadProps = {
+export type KeypadProps = {
 	onKeyPress(key: string): void;
 };
 

packages/ui-voip/src/components/PeerAutocomplete.tsx

@@ -13,7 +13,7 @@ export type PeerAutocompleteOptions = {
 	avatarUrl?: string;
 };
 
-type PeerAutocompleteProps = {
+export type PeerAutocompleteProps = {
 	options: PeerAutocompleteOptions[];
 	onChangeValue: (value: string | string[]) => void;
 	onChangeFilter: (filter: string) => void;

packages/ui-voip/src/components/PeerInfo/InternalUser.tsx

@@ -3,7 +3,7 @@ import { Avatar, Box, Icon, StatusBullet } from '@rocket.chat/fuselage';
 
 import type { Slot } from './useInfoSlots';
 
-type InternalUserProps = {
+export type InternalUserProps = {
 	displayName: string;
 	status?: UserStatus;
 	avatarUrl?: string;

packages/ui-voip/src/components/PeerInfo/PhoneNumber.tsx

@@ -1,6 +1,6 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
 
-type PhoneNumberProps = {
+export type PhoneNumberProps = {
 	number: string;
 };
 

packages/ui-voip/src/components/Timer.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useEffect, useState } from 'react';
 
-type VoipTimerProps = { startAt?: Date };
+export type VoipTimerProps = { startAt?: Date };
 
 const VoipTimer = ({ startAt }: VoipTimerProps) => {
 	const [start] = useState(() => {

packages/ui-voip/src/components/ToggleButton.tsx

@@ -2,7 +2,7 @@ import { Icon, IconButton } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
 import type { ComponentProps } from 'react';
 
-type ToggleButtonProps = {
+export type ToggleButtonProps = {
 	label: string; // label should not change due to a11y constraints
 	icons: [defaultIcon: Keys, pressedIcon: Keys];
 	titles: [defaultTitle: string, pressedTitle: string]; // Titles might change though

packages/ui-voip/src/components/Widget/Widget.tsx

@@ -30,7 +30,7 @@ const WidgetBase = styled('div')`
 	overflow: hidden;
 `;
 
-type WidgetProps = {
+export type WidgetProps = {
 	children: ReactNode;
 	restorePosition?: LastKnownPosition | null;
 	onChangePosition?: (position: LastKnownPosition | null) => void;

packages/ui-voip/src/components/Widget/WidgetContent.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const WidgetContent = ({ children }: { children: ReactNode }) => (
+export type WidgetContentProps = { children: ReactNode };
+
+const WidgetContent = ({ children }: WidgetContentProps) => (
 	<Box is='section' mb={4} mi={12} flexGrow={1}>
 		{children}
 	</Box>

packages/ui-voip/src/components/Widget/WidgetFooter.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 
-const WidgetFooter = ({ children }: { children: ReactNode }) => (
+export type WidgetFooterProps = { children: ReactNode };
+
+const WidgetFooter = ({ children }: WidgetFooterProps) => (
 	<Box is='footer' p={12} bg='surface-light' mbs={4}>
 		{children}
 	</Box>

packages/ui-voip/src/components/Widget/WidgetHeader.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import { VisuallyHidden } from 'react-aria';
 import { useTranslation } from 'react-i18next';
 
-type WidgetHeaderProps = {
+export type WidgetHeaderProps = {
 	title: ReactNode;
 	children: ReactNode;
 };

packages/ui-voip/src/components/Widget/WidgetInfo.tsx

@@ -7,7 +7,7 @@ type Slot = {
 	icon?: IconNames;
 };
 
-type WidgetInfoProps = {
+export type WidgetInfoProps = {
 	slots?: Slot[];
 	variant?: 'default' | 'card-content';
 };

packages/ui-voip/src/providers/MediaCallInstanceProvider.tsx

@@ -10,7 +10,7 @@ import { useMediaSessionInstance } from './useMediaSessionInstance';
 import { MediaCallInstanceContext } from '../context/MediaCallInstanceContext';
 import type { Signals } from '../context/MediaCallInstanceContext';
 
-type MediaCallInstanceProviderProps = {
+export type MediaCallInstanceProviderProps = {
 	children: ReactNode;
 };
 

packages/ui-voip/src/providers/MediaCallProvider.tsx

@@ -6,7 +6,7 @@ import MediaCallViewProvider from './MediaCallViewProvider';
 import { MediaCallWidget } from '../views';
 import MediaCallPopout from '../views/MediaCallPopout';
 
-type MediaCallProviderProps = {
+export type MediaCallProviderProps = {
 	children: ReactNode;
 };
 

packages/ui-voip/src/providers/MediaCallViewProvider.tsx

@@ -25,7 +25,7 @@ import { stopTracks, useDevicePermissionPrompt2, PermissionRequestCancelledCallR
 import { isValidTone, useTonePlayer } from '../hooks/useTonePlayer';
 import TransferModal from '../views/TransferModal';
 
-type MediaCallViewProviderProps = {
+export type MediaCallViewProviderProps = {
 	children?: ReactNode;
 };