Merge branch 'develop' into fix/incomplete-emails-at-user-registration

apps/meteor/client/components/SortList/SortModeList.tsx

@@ -35,7 +35,7 @@ function SortModeList(): ReactElement {
 					role='listitem'
 					icon='sort-az'
 					text={t('Name')}
-					input={<RadioButton mi='x16' name='sidebarSortby' onChange={setToAlphabetical} checked={sidebarSortBy === 'alphabetical'} />}
+					input={<RadioButton mi='x16' onChange={setToAlphabetical} checked={sidebarSortBy === 'alphabetical'} />}
 				/>
 			</ul>
 			{isOmnichannelEnabled && <OmnichannelSortingDisclaimer id='sortByList' />}

apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx

@@ -44,7 +44,9 @@ const MatrixFederationSearchModalContent: VFC<MatrixFederationSearchModalContent
 	return (
 		<>
 			<Box display='flex' flexDirection='row'>
-				<Select mie='x4' flexGrow={0} flexShrink={4} options={serverOptions} value={serverName} onChange={setServerName} />
+				<Box mie='x4' flexGrow={0} flexShrink={4}>
+					<Select options={serverOptions} value={serverName} onChange={setServerName} />
+				</Box>
 				<TextInput
 					placeholder={t('Search_rooms')}
 					flexGrow={4}

apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx

@@ -1,6 +1,6 @@
 import type { IWebdavAccountIntegration } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Box, Select, Field, Button } from '@rocket.chat/fuselage';
+import { SelectLegacy, Box, Field, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -44,7 +44,14 @@ const AccountIntegrationsPage = (): ReactElement => {
 								control={control}
 								name='accountSelected'
 								render={({ field: { onChange, value, name, ref } }): ReactElement => (
-									<Select ref={ref} name={name} options={options} onChange={onChange} value={value} placeholder={t('Select_an_option')} />
+									<SelectLegacy
+										ref={ref}
+										name={name}
+										options={options}
+										onChange={onChange}
+										value={value}
+										placeholder={t('Select_an_option')}
+									/>
 								)}
 							/>
 							<Button danger onClick={handleSubmit(handleClickRemove)}>

apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx

@@ -89,9 +89,9 @@ const PreferencesMessagesSection = ({ onChange, commitRef, ...props }: FormSecti
 
 	const timeFormatOptions = useMemo(
 		(): SelectOption[] => [
-			[0 as any, t('Default')], // TO DO: update SelectOption type to accept number as first item
-			[1, t('12_Hour')],
-			[2, t('24_Hour')],
+			['0', t('Default')], // TO DO: update SelectOption type to accept number as first item
+			['1', t('12_Hour')],
+			['2', t('24_Hour')],
 		],
 		[t],
 	);
@@ -107,8 +107,6 @@ const PreferencesMessagesSection = ({ onChange, commitRef, ...props }: FormSecti
 
 	commitRef.current.messages = commit;
 
-	// TODO: Weird behaviour when saving clock mode, and then changing it.
-
 	return (
 		<Accordion.Item title={t('Messages')} {...props}>
 			<FieldGroup>
@@ -144,7 +142,7 @@ const PreferencesMessagesSection = ({ onChange, commitRef, ...props }: FormSecti
 						<Field>
 							<Field.Label>{t('Message_TimeFormat')}</Field.Label>
 							<Field.Row>
-								<Select value={clockMode} onChange={handleClockMode} options={timeFormatOptions} />
+								<Select value={clockMode.toString()} onChange={handleClockMode} options={timeFormatOptions} />
 							</Field.Row>
 						</Field>
 					),

apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx

@@ -62,8 +62,8 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		receiveLoginDetectionEmail,
 	} = values as {
 		desktopNotificationRequireInteraction: boolean;
-		desktopNotifications: string | number | readonly string[];
-		pushNotifications: string | number | readonly string[];
+		desktopNotifications: string;
+		pushNotifications: string;
 		emailNotificationMode: string;
 		receiveLoginDetectionEmail: boolean;
 	};

apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.stories.tsx

@@ -45,6 +45,6 @@ WithResetButton.args = {
 	_id: 'setting_id',
 	label: 'Label',
 	placeholder: 'Placeholder',
-	value: ['1', '2', '3'],
+	value: '1',
 	hasResetButton: true,
 };

apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx

@@ -8,7 +8,7 @@ import ResetSettingButton from '../ResetSettingButton';
 type LanguageSettingInputProps = {
 	_id: string;
 	label: string;
-	value: string | number | string[];
+	value: string;
 	placeholder?: string;
 	readonly?: boolean;
 	autocomplete?: boolean;

apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx

@@ -1,16 +1,16 @@
-import { Select } from '@rocket.chat/fuselage';
+import { SelectLegacy } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 
 import type { RadioDropDownGroup } from '../../definitions/RadioDropDownDefinitions';
 
-const RadioDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentProps<typeof Select>> & { group: RadioDropDownGroup }>(
+const RadioDownAnchor = forwardRef<HTMLInputElement, Partial<ComponentProps<typeof SelectLegacy>> & { group: RadioDropDownGroup }>(
 	function SortDropDownAnchor(props, ref) {
 		const { group } = props;
 
 		const selectedFilter = group?.items.find((item) => item.checked)?.label;
 
-		return <Select ref={ref} placeholder={selectedFilter} options={[]} onChange={(): number => 0} color='hint' {...props} />;
+		return <SelectLegacy ref={ref} placeholder={selectedFilter} options={[]} onChange={(): number => 0} color='hint' {...props} />;
 	},
 );
 

apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDropDown.tsx

@@ -1,4 +1,4 @@
-import type { Select } from '@rocket.chat/fuselage';
+import type { SelectLegacy } from '@rocket.chat/fuselage';
 import { useToggle } from '@rocket.chat/fuselage-hooks';
 import type { ComponentProps, ReactElement } from 'react';
 import React, { useCallback, useRef } from 'react';
@@ -10,7 +10,11 @@ import DropDownListWrapper from '../DropDownListWrapper';
 import RadioButtonList from '../RadioButtonList';
 import RadioDropDownAnchor from './RadioDownAnchor';
 
-const RadioDropDown = ({ group, onSelected, ...props }: RadioDropDownProps & Partial<ComponentProps<typeof Select>>): ReactElement => {
+const RadioDropDown = ({
+	group,
+	onSelected,
+	...props
+}: RadioDropDownProps & Partial<ComponentProps<typeof SelectLegacy>>): ReactElement => {
 	const reference = useRef<HTMLInputElement>(null);
 	const [collapsed, toggleCollapsed] = useToggle(false);
 

apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx

@@ -122,19 +122,19 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 			<Field>
 				<Field.Label>{t('Name')}</Field.Label>
 				<Field.Row>
-					<TextInput data-qa='AgentEditTextInput-Name' flexGrow={1} value={name} disabled />
+					<TextInput data-qa='AgentEditTextInput-Name' value={name} disabled />
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Label>{t('Username')}</Field.Label>
 				<Field.Row>
-					<TextInput data-qa='AgentEditTextInput-Username' flexGrow={1} value={username} disabled addon={<Icon name='at' size='x20' />} />
+					<TextInput data-qa='AgentEditTextInput-Username' value={username} disabled addon={<Icon name='at' size='x20' />} />
 				</Field.Row>
 			</Field>
 			<Field>
 				<Field.Label>{t('Email')}</Field.Label>
 				<Field.Row>
-					<TextInput data-qa='AgentEditTextInput-Email' flexGrow={1} value={email} disabled addon={<Icon name='mail' size='x20' />} />
+					<TextInput data-qa='AgentEditTextInput-Email' value={email} disabled addon={<Icon name='mail' size='x20' />} />
 				</Field.Row>
 			</Field>
 			<Field>
@@ -146,7 +146,6 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 						value={departments}
 						placeholder={t('Select_an_option')}
 						onChange={handleDepartments}
-						flexGrow={1}
 					/>
 				</Field.Row>
 			</Field>
@@ -162,7 +161,6 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 						value={status}
 						placeholder={t('Select_an_option')}
 						onChange={handleStatus}
-						flexGrow={1}
 					/>
 				</Field.Row>
 			</Field>
@@ -173,12 +171,7 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 				<Field>
 					<Field.Label>{t('VoIP_Extension')}</Field.Label>
 					<Field.Row>
-						<TextInput
-							data-qa='AgentEditTextInput-VoIP_Extension'
-							flexGrow={1}
-							value={voipExtension as string}
-							onChange={handleVoipExtension}
-						/>
+						<TextInput data-qa='AgentEditTextInput-VoIP_Extension' value={voipExtension as string} onChange={handleVoipExtension} />
 					</Field.Row>
 				</Field>
 			)}

apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx

@@ -55,21 +55,23 @@ const AnalyticsPage = () => {
 			<Page.Header title={t('Analytics')} />
 			<Page.ScrollableContentWithShadow display='flex' flexDirection='column'>
 				<Margins block='x4'>
-					<Box display='flex' mi='neg-x4' flexDirection='row' flexWrap='wrap'>
-						<Box display='flex' mi='x4' flexGrow={1} flexDirection='column'>
-							<Label mb='x4'>{t('Type')}</Label>
-							<Select flexShrink={0} options={typeOptions} value={type} onChange={setType} />
+					<Box display='flex' mi='neg-x4' flexWrap='wrap' flexGrow={1}>
+						<Box display='flex' flexWrap='wrap' flexGrow={1}>
+							<Box display='flex' mi='x4' flexDirection='column' flexGrow={1}>
+								<Label mb='x4'>{t('Type')}</Label>
+								<Select options={typeOptions} value={type} onChange={setType} />
+							</Box>
+							<Box display='flex' mi='x4' flexDirection='column' flexGrow={1}>
+								<Label mb='x4'>{t('Departments')}</Label>
+								<AutoCompleteDepartment value={department || undefined} onChange={setDepartment} onlyMyDepartments />
+							</Box>
 						</Box>
-						<Box maxWidth='40%' display='flex' mi='x4' flexGrow={1} flexDirection='column'>
-							<Label mb='x4'>{t('Departments')}</Label>
-							<AutoCompleteDepartment value={department || undefined} onChange={setDepartment} onlyMyDepartments />
-						</Box>
-						<DateRangePicker mi='x4' flexGrow={1} onChange={setDateRange} />
+						<DateRangePicker flexGrow={1} mi='x4' onChange={setDateRange} />
 					</Box>
 					<Box>
 						<Overview type={type} dateRange={dateRange} departmentId={department || ''} />
 					</Box>
-					<Box display='flex' flexDirection='row'>
+					<Box display='flex'>
 						<Margins inline='x2'>
 							<Field>
 								<Field.Label>{t('Chart')}</Field.Label>
@@ -79,7 +81,7 @@ const AnalyticsPage = () => {
 							</Field>
 						</Margins>
 					</Box>
-					<Box display='flex' flexDirection='row' flexGrow={1} flexShrink={1}>
+					<Box display='flex' flexGrow={1} flexShrink={1}>
 						<InterchangeableChart
 							flexShrink={1}
 							w='66%'
@@ -89,7 +91,7 @@ const AnalyticsPage = () => {
 							dateRange={dateRange}
 							alignSelf='stretch'
 						/>
-						<Box display='flex' w='33%' flexDirection='row' justifyContent='stretch' p='x10' mis='x4'>
+						<Box display='flex' w='33%' justifyContent='stretch' p='x10' mis='x4'>
 							<AgentOverview type={chartName || ''} dateRange={dateRange} departmentId={department || ''} />
 						</Box>
 					</Box>

apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx

@@ -115,46 +115,23 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 			<Box display='flex' flexDirection='row' flexWrap='wrap' {...props}>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Guest')}</Label>
-					<TextInput flexShrink={0} placeholder={t('Guest')} onChange={handleGuest} value={guest} data-qa='current-chats-guest' />
+					<TextInput placeholder={t('Guest')} onChange={handleGuest} value={guest} data-qa='current-chats-guest' />
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column' data-qa='current-chats-servedBy'>
 					<Label mb='x4'>{t('Served_By')}</Label>
 					<AutoCompleteAgent haveAll value={servedBy} onChange={handleServedBy} />
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Status')}</Label>
-					<Select
-						flexShrink={0}
-						options={statusOptions}
-						value={status}
-						onChange={handleStatus}
-						placeholder={t('Status')}
-						data-qa='current-chats-status'
-					/>
+					<Select options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')} data-qa='current-chats-status' />
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
 					<Label mb='x4'>{t('From')}</Label>
-					<InputBox
-						type='date'
-						flexShrink={0}
-						placeholder={t('From')}
-						onChange={handleFrom}
-						value={from}
-						data-qa='current-chats-from'
-						color='default'
-					/>
+					<InputBox type='date' placeholder={t('From')} onChange={handleFrom} value={from} data-qa='current-chats-from' color='default' />
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
 					<Label mb='x4'>{t('To')}</Label>
-					<InputBox
-						type='date'
-						flexShrink={0}
-						placeholder={t('To')}
-						onChange={handleTo}
-						value={to}
-						data-qa='current-chats-to'
-						color='default'
-					/>
+					<InputBox type='date' placeholder={t('To')} onChange={handleTo} value={to} data-qa='current-chats-to' color='default' />
 				</Box>
 
 				<RemoveAllClosed

apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx

@@ -55,7 +55,7 @@ export const QueueListFilter: QueueListFilterPropsType = ({ setFilter, ...props
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Status')}</Label>
-					<Select flexShrink={0} options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')} />
+					<Select options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')} />
 				</Box>
 				<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
 					<Label mb='x4'>{t('Department')}</Label>

apps/meteor/client/views/room/contextualBar/ExportMessages/ExportMessages.tsx

@@ -45,7 +45,7 @@ const ExportMessages: FC<ExportMessagesProps> = ({ rid }) => {
 					<Field>
 						<Field.Label>{t('Method')}</Field.Label>
 						<Field.Row>
-							<Select value={type} onChange={(value): void => setType(value)} placeholder={t('Type')} options={exportOptions} />
+							<Select value={type} onChange={setType} placeholder={t('Type')} options={exportOptions} />
 						</Field.Row>
 					</Field>
 				</FieldGroup>

apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.js

@@ -73,7 +73,9 @@ function RoomFiles({
 								onChange={setText}
 								addon={<Icon name='magnifier' size='x20' />}
 							/>
-							<Select flexGrow={0} width='110px' onChange={setType} value={type} options={options} />
+							<Box w='x144' mis='x8'>
+								<Select onChange={setType} value={type} options={options} />
+							</Box>
 						</Margins>
 					</Box>
 				</Box>

apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx

@@ -49,8 +49,8 @@ const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps)
 					<Controller
 						name='days'
 						control={control}
-						render={({ field: { onChange, value, name, ref } }): ReactElement => (
-							<Select ref={ref} name={name} value={value} onChange={onChange} options={daysOptions} />
+						render={({ field: { onChange, value, name } }): ReactElement => (
+							<Select name={name} value={value} onChange={onChange} options={daysOptions} />
 						)}
 					/>
 				</Field.Row>
@@ -61,8 +61,8 @@ const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps)
 					<Controller
 						name='maxUses'
 						control={control}
-						render={({ field: { onChange, value, name, ref } }): ReactElement => (
-							<Select ref={ref} name={name} value={value} onChange={onChange} options={maxUsesOptions} />
+						render={({ field: { onChange, value, name } }): ReactElement => (
+							<Select name={name} value={value} onChange={onChange} options={maxUsesOptions} />
 						)}
 					/>
 				</Field.Row>

apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx

@@ -1,6 +1,6 @@
 import type { IRoom, IUser } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Box, Icon, TextInput, Margins, Select, Throbber, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Select, Throbber, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
 import { useMutableCallback, useAutoFocus, useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, FormEventHandler, ComponentProps, MouseEvent } from 'react';
@@ -97,23 +97,15 @@ const RoomMembers = ({
 			</ContextualbarHeader>
 			<ContextualbarContent p='x12'>
 				<Box display='flex' flexDirection='row' p='x12' flexShrink={0}>
-					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
-						<Margins inline='x4'>
-							<TextInput
-								placeholder={t('Search_by_username')}
-								value={text}
-								ref={inputRef}
-								onChange={setText}
-								addon={<Icon name='magnifier' size='x20' />}
-							/>
-							<Select
-								flexGrow={0}
-								width='110px'
-								onChange={(value): void => setType(value as 'online' | 'all')}
-								value={type}
-								options={options}
-							/>
-						</Margins>
+					<TextInput
+						placeholder={t('Search_by_username')}
+						value={text}
+						ref={inputRef}
+						onChange={setText}
+						addon={<Icon name='magnifier' size='x20' />}
+					/>
+					<Box w='x144' mis='x8'>
+						<Select onChange={(value): void => setType(value as 'online' | 'all')} value={type} options={options} />
 					</Box>
 				</Box>