chore(ui-client): Move useSafeRefCallback to package

apps/meteor/client/views/room/MessageList/hooks/useJumpToMessage.ts

@@ -1,9 +1,9 @@
 import type { IMessage } from '@rocket.chat/core-typings';
+import { useSafeRefCallback } from '@rocket.chat/ui-client';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import { useCallback } from 'react';
 
 import { useMessageListJumpToMessageParam, useMessageListRef } from '../../../../components/message/list/MessageListContext';
-import { useSafeRefCallback } from '../../../../hooks/useSafeRefCallback';
 import { setHighlightMessage, clearHighlightMessage } from '../providers/messageHighlightSubscription';
 
 // this is an arbitrary value so that there's a gap between the header and the message;

apps/meteor/client/views/room/body/hooks/useListIsAtBottom.ts

@@ -1,10 +1,10 @@
 import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import { useSafeRefCallback } from '@rocket.chat/ui-client';
 import type { MutableRefObject } from 'react';
 import { useCallback, useRef } from 'react';
 
 import { isAtBottom as isAtBottomLib } from '../../../../../app/ui/client/views/app/lib/scrolling';
 import { withThrottling } from '../../../../../lib/utils/highOrderFunctions';
-import { useSafeRefCallback } from '../../../../hooks/useSafeRefCallback';
 
 export const useListIsAtBottom = () => {
 	const atBottomRef = useRef(true);

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable complexity */
 import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
 import { useContentBoxSize, useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useSafeRefCallback } from '@rocket.chat/ui-client';
 import {
 	MessageComposerAction,
 	MessageComposerToolbarActions,
@@ -43,7 +44,6 @@ import { useEnablePopupPreview } from '../hooks/useEnablePopupPreview';
 import { useMessageComposerMergedRefs } from '../hooks/useMessageComposerMergedRefs';
 import { useMessageBoxAutoFocus } from './hooks/useMessageBoxAutoFocus';
 import { useMessageBoxPlaceholder } from './hooks/useMessageBoxPlaceholder';
-import { useSafeRefCallback } from '../../../../hooks/useSafeRefCallback';
 
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;

apps/meteor/client/views/room/hooks/useIsVisible.ts

@@ -1,8 +1,7 @@
 import { useDebouncedState, useSafely } from '@rocket.chat/fuselage-hooks';
+import { useSafeRefCallback } from '@rocket.chat/ui-client';
 import { useCallback } from 'react';
 
-import { useSafeRefCallback } from '../../../hooks/useSafeRefCallback';
-
 export const useIsVisible = () => {
 	const [menuVisibility, setMenuVisibility] = useSafely(useDebouncedState(!!window.DISABLE_ANIMATION, 100));
 

packages/ui-client/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './usePreferenceFeaturePreviewList';
 export * from './useDocumentTitle';
 export * from './useUserDisplayName';
 export * from './useValidatePassword';
+export * from './useSafeRefCallback';

packages/ui-client/src/hooks/useSafeRefCallback/index.ts

@@ -0,0 +1 @@
+export * from './useSafeRefCallback';

apps/meteor/client/hooks/useSafeRefCallback.spec.tsx → packages/ui-client/src/hooks/useSafeRefCallback/useSafeRefCallback.spec.tsx

@@ -2,12 +2,6 @@ import { render } from '@testing-library/react';
 
 import { useSafeRefCallback } from './useSafeRefCallback';
 
-// const TestComponent = (callback: () => () => void) => {
-// 	const cbRef = useSafeRefCallback(callback);
-
-// 	return <div ref={cbRef}></div>;
-// };
-
 const TestComponent = ({ callback, renderSpan }: { callback: any; renderSpan?: boolean }) => {
 	const cbRef = useSafeRefCallback(callback);