diff --git a/.changeset/spicy-wombats-shout.md b/.changeset/spicy-wombats-shout.md new file mode 100644 index 000000000000..d84a815241dc --- /dev/null +++ b/.changeset/spicy-wombats-shout.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': minor +--- + +Introduces message navigability, allowing users to navigate on messages through keyboard diff --git a/apps/meteor/client/components/message/MessageHeader.tsx b/apps/meteor/client/components/message/MessageHeader.tsx index c12ee8c3ac20..d708d933ac6d 100644 --- a/apps/meteor/client/components/message/MessageHeader.tsx +++ b/apps/meteor/client/components/message/MessageHeader.tsx @@ -8,7 +8,7 @@ import { MessageNameContainer, } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; +import type { KeyboardEvent, ReactElement } from 'react'; import React, { memo } from 'react'; import { getUserDisplayName } from '../../../lib/getUserDisplayName'; @@ -45,31 +45,30 @@ const MessageHeader = ({ message }: MessageHeaderProps): ReactElement => { return ( - + chat?.userCard.openUserCard(e, message.u.username), + onKeyDown: (e: KeyboardEvent) => { + (e.code === 'Enter' || e.code === 'Space') && chat?.userCard.openUserCard(e, message.u.username); + }, + style: { cursor: 'pointer' }, + })} + > chat?.userCard.openUserCard(e, message.u.username), - style: { cursor: 'pointer' }, - })} > {message.alias || getUserDisplayName(user.name, user.username, showRealName)} {showUsername && ( <> {' '} - chat?.userCard.openUserCard(e, message.u.username), - style: { cursor: 'pointer' }, - })} - > + @{user.username} diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx index 335fdf1ea158..dd26dde17ecf 100644 --- a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx +++ b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx @@ -1,11 +1,12 @@ +import { useToolbar } from '@react-aria/toolbar'; import type { IMessage, IRoom, ISubscription, ITranslatedMessage } from '@rocket.chat/core-typings'; import { isThreadMessage, isRoomFederated, isVideoConfMessage } from '@rocket.chat/core-typings'; import { MessageToolbar as FuselageMessageToolbar, MessageToolbarItem } from '@rocket.chat/fuselage'; import { useFeaturePreview } from '@rocket.chat/ui-client'; import { useUser, useSettings, useTranslation, useMethod, useLayoutHiddenActions } from '@rocket.chat/ui-contexts'; import { useQuery } from '@tanstack/react-query'; -import type { ReactElement } from 'react'; -import React, { memo, useMemo } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; +import React, { memo, useMemo, useRef } from 'react'; import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction'; import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction'; @@ -45,7 +46,7 @@ type MessageToolbarProps = { room: IRoom; subscription?: ISubscription; onChangeMenuVisibility: (visible: boolean) => void; -}; +} & ComponentProps; const MessageToolbar = ({ message, @@ -53,11 +54,15 @@ const MessageToolbar = ({ room, subscription, onChangeMenuVisibility, + ...props }: MessageToolbarProps): ReactElement | null => { const t = useTranslation(); const user = useUser() ?? undefined; const settings = useSettings(); + const toolbarRef = useRef(null); + const { toolbarProps } = useToolbar(props, toolbarRef); + const quickReactionsEnabled = useFeaturePreview('quickReactions'); const setReaction = useMethod('setReaction'); @@ -106,7 +111,7 @@ const MessageToolbar = ({ }; return ( - + {quickReactionsEnabled && isReactionAllowed && quickReactions.slice(0, 3).map(({ emoji, image }) => { diff --git a/apps/meteor/client/components/message/variants/RoomMessage.tsx b/apps/meteor/client/components/message/variants/RoomMessage.tsx index ff4b082ae1ee..31ebbbceb452 100644 --- a/apps/meteor/client/components/message/variants/RoomMessage.tsx +++ b/apps/meteor/client/components/message/variants/RoomMessage.tsx @@ -3,7 +3,7 @@ import { Message, MessageLeftContainer, MessageContainer, CheckBox } from '@rock import { useToggle } from '@rocket.chat/fuselage-hooks'; import { MessageAvatar } from '@rocket.chat/ui-avatar'; import { useUserId } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; import React, { useRef, memo } from 'react'; import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction'; @@ -33,7 +33,7 @@ type RoomMessageProps = { context?: MessageActionContext; ignoredUser?: boolean; searchText?: string; -}; +} & ComponentProps; const RoomMessage = ({ message, @@ -45,6 +45,7 @@ const RoomMessage = ({ context, ignoredUser, searchText, + ...props }: RoomMessageProps): ReactElement => { const uid = useUserId(); const editing = useIsMessageHighlight(message._id); @@ -60,10 +61,13 @@ const RoomMessage = ({ useCountSelected(); useJumpToMessage(message._id, messageRef); + return ( {!sequential && message.u.username && !selecting && showUserAvatar && ( @@ -95,10 +100,8 @@ const RoomMessage = ({ {selecting && } {sequential && } - {!sequential && } - {ignored ? ( ) : ( diff --git a/apps/meteor/client/components/message/variants/SystemMessage.tsx b/apps/meteor/client/components/message/variants/SystemMessage.tsx index bb0a198061fc..9bb254beaec5 100644 --- a/apps/meteor/client/components/message/variants/SystemMessage.tsx +++ b/apps/meteor/client/components/message/variants/SystemMessage.tsx @@ -14,7 +14,7 @@ import { import { UserAvatar } from '@rocket.chat/ui-avatar'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useTranslation } from '@rocket.chat/ui-contexts'; -import type { ReactElement } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; import React, { memo } from 'react'; import { MessageTypes } from '../../../../app/ui-utils/client'; @@ -37,9 +37,9 @@ import { useMessageListShowRealName, useMessageListShowUsername } from '../list/ type SystemMessageProps = { message: IMessage; showUserAvatar: boolean; -}; +} & ComponentProps; -const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactElement => { +const SystemMessage = ({ message, showUserAvatar, ...props }: SystemMessageProps): ReactElement => { const t = useTranslation(); const formatTime = useFormatTime(); const formatDateAndTime = useFormatDateAndTime(); @@ -59,11 +59,14 @@ const SystemMessage = ({ message, showUserAvatar }: SystemMessageProps): ReactEl return ( {!isSelecting && showUserAvatar && } diff --git a/apps/meteor/client/components/message/variants/ThreadMessage.tsx b/apps/meteor/client/components/message/variants/ThreadMessage.tsx index 343b56dc54a8..6019c7d04023 100644 --- a/apps/meteor/client/components/message/variants/ThreadMessage.tsx +++ b/apps/meteor/client/components/message/variants/ThreadMessage.tsx @@ -39,6 +39,8 @@ const ThreadMessage = ({ message, sequential, unread, showUserAvatar }: ThreadMe return ( ; const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: ThreadMessagePreviewProps): ReactElement => { const parentMessage = useParentMessage(message.tmid); @@ -56,23 +56,30 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: const goToThread = useGoToThread(); + const handleThreadClick = () => { + if (!isSelecting) { + if (!sequential) { + return parentMessage.isSuccess && goToThread({ rid: message.rid, tmid: message.tmid, msg: parentMessage.data?._id }); + } + + return goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }); + } + + return toggleSelected(); + }; + return ( e.code === 'Enter' && handleThreadClick()} isSelected={isSelected} data-qa-selected={isSelected} role='link' + {...props} > {!sequential && ( - goToThread({ rid: message.rid, tmid: message.tmid, msg: parentMessage.data?._id }) - : undefined - } - > + @@ -100,7 +107,7 @@ const ThreadMessagePreview = ({ message, showUserAvatar, sequential, ...props }: )} - goToThread({ rid: message.rid, tmid: message.tmid, msg: message._id }) : undefined}> + {!isSelecting && showUserAvatar && ( ); }; diff --git a/apps/meteor/client/views/room/Room.tsx b/apps/meteor/client/views/room/Room.tsx index 665adaa3fbe9..4d6d7d56f9d5 100644 --- a/apps/meteor/client/views/room/Room.tsx +++ b/apps/meteor/client/views/room/Room.tsx @@ -1,6 +1,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { createElement, lazy, memo, Suspense } from 'react'; +import { FocusScope } from 'react-aria'; import { ErrorBoundary } from 'react-error-boundary'; import { ContextualbarSkeleton } from '../../components/Contextualbar'; @@ -25,30 +26,36 @@ const Room = (): ReactElement => { return ( - } - body={} - aside={ - (toolbox.tab?.tabComponent && ( - - - }>{createElement(toolbox.tab.tabComponent)} - - - )) || - (contextualBarView && ( - - - }> - - - - - )) - } - /> + + } + body={} + aside={ + (toolbox.tab?.tabComponent && ( + + + }>{createElement(toolbox.tab.tabComponent)} + + + )) || + (contextualBarView && ( + + + }> + + + + + )) + } + /> + ); diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index 1a6a11c07f79..4ec51aa67fda 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -35,6 +35,7 @@ import RoomComposer from '../composer/RoomComposer/RoomComposer'; import { useChat } from '../contexts/ChatContext'; import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext'; import { useRoomToolbox } from '../contexts/RoomToolboxContext'; +import { useMessageListNavigation } from '../hooks/useMessageListNavigation'; import { useScrollMessageList } from '../hooks/useScrollMessageList'; import DropTargetOverlay from './DropTargetOverlay'; import JumpToRecentMessageButton from './JumpToRecentMessageButton'; @@ -532,6 +533,8 @@ const RoomBody = (): ReactElement => { useReadMessageWindowEvents(); + const { messageListRef, messageListProps } = useMessageListNavigation(); + return ( <> {!isLayoutEmbedded && room.announcement && } @@ -539,7 +542,6 @@ const RoomBody = (): ReactElement => {
@@ -600,7 +602,13 @@ const RoomBody = (): ReactElement => { > -
    +
      {canPreview ? ( <> {hasMorePreviousMessages ? ( diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx index 496b234cc9b6..b1277b9c7603 100644 --- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx +++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx @@ -16,6 +16,7 @@ import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay'; import MessageListProvider from '../../../MessageList/providers/MessageListProvider'; import LoadingMessagesIndicator from '../../../body/LoadingMessagesIndicator'; import { useFirstUnreadMessageId } from '../../../hooks/useFirstUnreadMessageId'; +import { useMessageListNavigation } from '../../../hooks/useMessageListNavigation'; import { useScrollMessageList } from '../../../hooks/useScrollMessageList'; import { useLegacyThreadMessageJump } from '../hooks/useLegacyThreadMessageJump'; import { useLegacyThreadMessageListScrolling } from '../hooks/useLegacyThreadMessageListScrolling'; @@ -57,7 +58,6 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen } = useLegacyThreadMessageListScrolling(mainMessage); const { parentRef: listJumpRef } = useLegacyThreadMessageJump({ enabled: !loading }); - const listRef = useMergedRefs(listScrollRef, listJumpRef); const hideUsernames = useUserPreference('hideUsernames'); const showUserAvatar = !!useUserPreference('displayAvatars'); @@ -68,6 +68,9 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen const scrollMessageList = useScrollMessageList(listWrapperScrollRef); const firstUnreadMessageId = useFirstUnreadMessageId(); + const { messageListRef, messageListProps } = useMessageListNavigation(); + + const listRef = useMergedRefs(listScrollRef, listJumpRef, messageListRef); return (
      @@ -76,7 +79,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen onScroll={handleScroll} style={{ scrollBehavior: 'smooth', overflowX: 'hidden' }} > -
        +
          {loading ? (
        • diff --git a/apps/meteor/client/views/room/hooks/useMessageListNavigation.ts b/apps/meteor/client/views/room/hooks/useMessageListNavigation.ts new file mode 100644 index 000000000000..f446e867531d --- /dev/null +++ b/apps/meteor/client/views/room/hooks/useMessageListNavigation.ts @@ -0,0 +1,112 @@ +import { createFocusManager } from '@react-aria/focus'; +import type { RefCallback } from 'react'; +import { useCallback } from 'react'; +import { useFocusManager } from 'react-aria'; + +type MessageListProps = { + 'aria-orientation': 'vertical' | 'horizontal'; +}; + +const isListItem = (node: EventTarget) => + (node as HTMLElement).getAttribute('role') === 'listitem' || (node as HTMLElement).getAttribute('role') === 'link'; +const isMessageToolbarAction = (node: EventTarget) => (node as HTMLElement).parentElement?.getAttribute('role') === 'toolbar'; +const isSystemMessage = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-message-system'); +const isThreadMessage = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-message-thread'); + +/** + * Custom hook to provide the room navigation by keyboard. + * @param ref - A ref to the message list DOM element. + */ +export const useMessageListNavigation = (): { messageListRef: RefCallback; messageListProps: MessageListProps } => { + const roomFocusManager = useFocusManager(); + + const messageListRef = useCallback( + (node: HTMLElement | null) => { + let lastMessageFocused: HTMLElement | null = null; + + if (!node) { + return; + } + + const massageListFocusManager = createFocusManager({ + current: node, + }); + + node.addEventListener('keydown', (e) => { + if (!e.target) { + return; + } + + if (!isListItem(e.target)) { + return; + } + + if (e.key === 'Tab') { + if (e.shiftKey) { + e.preventDefault(); + e.stopPropagation(); + + roomFocusManager.focusFirst({ + from: document.getElementsByClassName('rcx-room-header')[0], + }); + } else if (isThreadMessage(e.target) || isSystemMessage(e.target) || isMessageToolbarAction(e.target)) { + e.preventDefault(); + e.stopPropagation(); + + roomFocusManager.focusNext({ + accept: (node) => node.tagName === 'TEXTAREA', + }); + } + } + + if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + if (e.key === 'ArrowUp') { + massageListFocusManager.focusPrevious({ wrap: true, accept: (node) => isListItem(node) }); + } + + if (e.key === 'ArrowDown') { + massageListFocusManager.focusNext({ wrap: true, accept: (node) => isListItem(node) }); + } + + lastMessageFocused = document.activeElement as HTMLElement; + } + }); + + node.addEventListener( + 'blur', + (e) => { + if (!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) { + return; + } + + if (!e.currentTarget.contains(e.relatedTarget) && !lastMessageFocused) { + lastMessageFocused = e.target as HTMLElement; + } + }, + { capture: true }, + ); + + node.addEventListener( + 'focus', + (e) => { + if (!(e.currentTarget instanceof HTMLElement && e.relatedTarget instanceof HTMLElement)) { + return; + } + if (lastMessageFocused && !e.currentTarget.contains(e.relatedTarget) && node.contains(e.target as HTMLElement)) { + lastMessageFocused?.focus(); + lastMessageFocused = null; + } + }, + { capture: true }, + ); + }, + [roomFocusManager], + ); + + return { + messageListRef, + messageListProps: { + 'aria-orientation': 'vertical', + }, + }; +}; diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 35430565ce10..6e1b6a0b3836 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -240,7 +240,7 @@ "@rocket.chat/favicon": "workspace:^", "@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2", "@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/fuselage-toastbar": "~0.31.25", diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index d9faf22baf4c..60ffa84825f0 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -967,6 +967,7 @@ "Channel_Name_Placeholder": "Please enter channel name...", "Channel_to_listen_on": "Channel to listen on", "Channel_Unarchived": "Channel with name `#%s` has been Unarchived successfully", + "Channel__roomName__": "Channel {{roomName}}.", "Channels": "Channels", "Channels_added": "Channels added sucessfully", "Channels_are_where_your_team_communicate": "Channels are where your team communicate", @@ -1167,6 +1168,7 @@ "Conversation_finished_message": "Conversation Finished Message", "Conversation_finished_text": "Conversation Finished Text", "conversation_with_s": "the conversation with %s", + "Conversation_with__roomName__": "Conversation with {{roomName}}.", "Conversations": "Conversations", "Conversations_per_day": "Conversations per Day", "Convert": "Convert", @@ -6276,6 +6278,7 @@ "Remove_RocketChat_Watermark": "Remove Rocket.Chat watermark", "High_scalabaility": "High scalabaility", "Premium_and_unlimited_apps": "Premium and unlimited apps", + "Message_actions": "Message actions", "Message_audit": "Message auditing", "Premium_omnichannel_capabilities": "Premium omnichannel capabilities", "Video_call_manager": "Video call manager", diff --git a/apps/meteor/tests/e2e/messaging.spec.ts b/apps/meteor/tests/e2e/messaging.spec.ts index c5099c52b9f1..f71c1dd04b8c 100644 --- a/apps/meteor/tests/e2e/messaging.spec.ts +++ b/apps/meteor/tests/e2e/messaging.spec.ts @@ -20,6 +20,45 @@ test.describe.serial('Messaging', () => { await page.goto('/home'); }); + test('should navigate on messages using keyboard', async ({ page }) => { + await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.content.sendMessage('msg1'); + await poHomeChannel.content.sendMessage('msg2'); + + // move focus to the second message + await page.keyboard.press('Shift+Tab'); + await expect(page.locator('[data-qa-type="message"]').last()).toBeFocused(); + + // move focus to the first typed message + await page.keyboard.press('ArrowUp'); + await expect(page.locator('[data-qa-type="message"]:has-text("msg1")')).toBeFocused(); + + // move focus to the favorite icon + await page.keyboard.press('Shift+Tab'); + await expect(poHomeChannel.roomHeaderFavoriteBtn).toBeFocused(); + + // refocus on the first typed message + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page.locator('[data-qa-type="message"]:has-text("msg1")')).toBeFocused(); + + // move focus to the message toolbar + await page.locator('[data-qa-type="message"]:has-text("msg1")').locator('[role=toolbar][aria-label="Message actions"]').getByRole('button', { name: 'Add reaction' }).waitFor(); + + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page.locator('[data-qa-type="message"]:has-text("msg1")').locator('[role=toolbar][aria-label="Message actions"]').getByRole('button', { name: 'Add reaction' })).toBeFocused(); + + // move focus to the first system message + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowDown'); + await expect(page.locator('[data-qa="system-message"]').first()).toBeFocused(); + + // move focus to the composer + await page.keyboard.press('Tab'); + await expect(poHomeChannel.composer).toBeFocused(); + }); + test('expect show "hello word" in both contexts (targetChannel)', async ({ browser }) => { await poHomeChannel.sidenav.openChat(targetChannel); const { page } = await createAuxContext(browser, Users.user2); diff --git a/apps/meteor/tests/e2e/page-objects/home-channel.ts b/apps/meteor/tests/e2e/page-objects/home-channel.ts index 278256b7b0b1..01dcc302d3e0 100644 --- a/apps/meteor/tests/e2e/page-objects/home-channel.ts +++ b/apps/meteor/tests/e2e/page-objects/home-channel.ts @@ -41,6 +41,10 @@ export class HomeChannel { await this.page.mouse.move(0, 0); } + get composer(): Locator { + return this.page.locator('textarea[name="msg"]'); + } + get composerToolbar(): Locator { return this.page.locator('[role=toolbar][aria-label="Composer Primary Actions"]'); } diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json index abd9bdd62a78..87cab03460df 100644 --- a/ee/packages/ui-theming/package.json +++ b/ee/packages/ui-theming/package.json @@ -4,7 +4,7 @@ "private": true, "devDependencies": { "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/icons": "^0.33.0", "@rocket.chat/ui-contexts": "workspace:~", diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 72f61f197aab..599e8476175b 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -63,7 +63,7 @@ "@babel/preset-typescript": "~7.22.15", "@rocket.chat/apps-engine": "1.41.0", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/icons": "^0.33.0", diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json index 8ba6c1202395..eafeb069d0d3 100644 --- a/packages/gazzodown/package.json +++ b/packages/gazzodown/package.json @@ -6,7 +6,7 @@ "@babel/core": "~7.22.20", "@rocket.chat/core-typings": "workspace:^", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-tokens": "~0.32.0", "@rocket.chat/message-parser": "~0.31.28", "@rocket.chat/styled": "~0.31.25", diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json index 2eaa0106ce3c..853178aae3a9 100644 --- a/packages/ui-avatar/package.json +++ b/packages/ui-avatar/package.json @@ -4,7 +4,7 @@ "private": true, "devDependencies": { "@babel/core": "~7.22.20", - "@rocket.chat/fuselage": "^0.41.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/ui-contexts": "workspace:^", "@types/babel__core": "~7.20.3", "@types/react": "~17.0.69", diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json index c931427a0723..b7cbe0932812 100644 --- a/packages/ui-client/package.json +++ b/packages/ui-client/package.json @@ -6,7 +6,7 @@ "@babel/core": "~7.22.20", "@react-aria/toolbar": "^3.0.0-beta.1", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/icons": "^0.33.0", "@rocket.chat/mock-providers": "workspace:^", diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json index 10da988ad59f..a1fbe39a6142 100644 --- a/packages/ui-composer/package.json +++ b/packages/ui-composer/package.json @@ -6,7 +6,7 @@ "@babel/core": "~7.22.20", "@react-aria/toolbar": "^3.0.0-beta.1", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/icons": "^0.33.0", "@storybook/addon-actions": "~6.5.16", "@storybook/addon-docs": "~6.5.16", diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json index 838b66764152..cd0327d6a051 100644 --- a/packages/ui-video-conf/package.json +++ b/packages/ui-video-conf/package.json @@ -6,7 +6,7 @@ "@babel/core": "~7.22.20", "@rocket.chat/css-in-js": "~0.31.25", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/icons": "^0.33.0", "@rocket.chat/styled": "~0.31.25", diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json index a7ba568e7367..9b34b125df9b 100644 --- a/packages/uikit-playground/package.json +++ b/packages/uikit-playground/package.json @@ -15,7 +15,7 @@ "@codemirror/tooltip": "^0.19.16", "@lezer/highlight": "^1.1.6", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "^0.45.0", + "@rocket.chat/fuselage": "^0.47.0", "@rocket.chat/fuselage-hooks": "^0.33.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/fuselage-toastbar": "^0.31.25", diff --git a/yarn.lock b/yarn.lock index 7c88ca377d17..c1d3600c0f65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9304,7 +9304,7 @@ __metadata: "@babel/preset-typescript": ~7.22.15 "@rocket.chat/apps-engine": 1.41.0 "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/fuselage-polyfills": ~0.31.25 "@rocket.chat/gazzodown": "workspace:^" @@ -9359,9 +9359,9 @@ __metadata: languageName: unknown linkType: soft -"@rocket.chat/fuselage@npm:^0.41.0": - version: 0.41.0 - resolution: "@rocket.chat/fuselage@npm:0.41.0" +"@rocket.chat/fuselage@npm:^0.47.0": + version: 0.47.0 + resolution: "@rocket.chat/fuselage@npm:0.47.0" dependencies: "@rocket.chat/css-in-js": ^0.31.25 "@rocket.chat/css-supports": ^0.31.25 @@ -9379,31 +9379,7 @@ __metadata: react: ^17.0.2 react-dom: ^17.0.2 react-virtuoso: 1.2.4 - checksum: 8ee33c5626ff7fb8970714696332efc723ca0793470d0b4da9a169aa6b2528ec75068d775e8f149dd3a1ea401ff0240be892022b64bd80e5bd4fc04349e0c0aa - languageName: node - linkType: hard - -"@rocket.chat/fuselage@npm:^0.45.0": - version: 0.45.0 - resolution: "@rocket.chat/fuselage@npm:0.45.0" - dependencies: - "@rocket.chat/css-in-js": ^0.31.25 - "@rocket.chat/css-supports": ^0.31.25 - "@rocket.chat/fuselage-tokens": ^0.32.0 - "@rocket.chat/memo": ^0.31.25 - "@rocket.chat/styled": ^0.31.25 - invariant: ^2.2.4 - react-aria: ~3.23.1 - react-keyed-flatten-children: ^1.3.0 - react-stately: ~3.17.0 - peerDependencies: - "@rocket.chat/fuselage-hooks": "*" - "@rocket.chat/fuselage-polyfills": "*" - "@rocket.chat/icons": "*" - react: ^17.0.2 - react-dom: ^17.0.2 - react-virtuoso: 1.2.4 - checksum: 84611983e263c0016687100c342c4256d6aff2a221c9d7ce86ecd7d49fd1c5fb5cb4d7d79aedd53fd4a1b29ad89efb4bb50357a8e24997822fb249fa78a5ac70 + checksum: 4ca06bd467db88b5c4c3eed70bbd8879923cfbe7f5a92bd934ed0f800b37825592d84753e124a3f2c70d4e9d82bf5dac6bc2735ea93ccfa26fddc6ab49ea8094 languageName: node linkType: hard @@ -9414,7 +9390,7 @@ __metadata: "@babel/core": ~7.22.20 "@rocket.chat/core-typings": "workspace:^" "@rocket.chat/css-in-js": ~0.31.25 - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-tokens": ~0.32.0 "@rocket.chat/message-parser": ~0.31.28 "@rocket.chat/styled": ~0.31.25 @@ -9747,7 +9723,7 @@ __metadata: "@rocket.chat/favicon": "workspace:^" "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.2 "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.3 - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/fuselage-polyfills": ~0.31.25 "@rocket.chat/fuselage-toastbar": ~0.31.25 @@ -10605,7 +10581,7 @@ __metadata: resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar" dependencies: "@babel/core": ~7.22.20 - "@rocket.chat/fuselage": ^0.41.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/ui-contexts": "workspace:^" "@types/babel__core": ~7.20.3 "@types/react": ~17.0.69 @@ -10631,7 +10607,7 @@ __metadata: "@babel/core": ~7.22.20 "@react-aria/toolbar": ^3.0.0-beta.1 "@rocket.chat/css-in-js": ~0.31.25 - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/icons": ^0.33.0 "@rocket.chat/mock-providers": "workspace:^" @@ -10684,7 +10660,7 @@ __metadata: "@babel/core": ~7.22.20 "@react-aria/toolbar": ^3.0.0-beta.1 "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/icons": ^0.33.0 "@storybook/addon-actions": ~6.5.16 "@storybook/addon-docs": ~6.5.16 @@ -10776,7 +10752,7 @@ __metadata: resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming" dependencies: "@rocket.chat/css-in-js": ~0.31.25 - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/icons": ^0.33.0 "@rocket.chat/ui-contexts": "workspace:~" @@ -10819,7 +10795,7 @@ __metadata: "@rocket.chat/css-in-js": ~0.31.25 "@rocket.chat/emitter": ~0.31.25 "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/icons": ^0.33.0 "@rocket.chat/styled": ~0.31.25 @@ -10864,7 +10840,7 @@ __metadata: "@codemirror/tooltip": ^0.19.16 "@lezer/highlight": ^1.1.6 "@rocket.chat/css-in-js": ~0.31.25 - "@rocket.chat/fuselage": ^0.45.0 + "@rocket.chat/fuselage": ^0.47.0 "@rocket.chat/fuselage-hooks": ^0.33.0 "@rocket.chat/fuselage-polyfills": ~0.31.25 "@rocket.chat/fuselage-toastbar": ^0.31.25