[MM-56600] Upgrade to "@floating-ui/react" for hooks/useTooltip (#25976)

webapp/channels/src/components/common/hooks/useTooltip.tsx

@@ -1,16 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {useHover, useInteractions, useFloating, arrow, offset, autoPlacement} from '@floating-ui/react-dom-interactions';
+import {useHover, useInteractions, useFloating, arrow, offset, autoPlacement} from '@floating-ui/react';
-import type {Strategy, Placement} from '@floating-ui/react-dom-interactions';
+import type {Strategy, Placement, ReferenceType} from '@floating-ui/react';
 import classNames from 'classnames';
+import type {ReactNode, HTMLProps} from 'react';
 import React, {useState, useRef} from 'react';
 import ReactDOM from 'react-dom';
 
 import {Constants} from 'utils/constants';
 
 interface TooltipOptions {
-    message: React.ReactNode | React.ReactNodeArray;
+    message: ReactNode;
     strategy?: Strategy;
     placement: Placement;
     allowedPlacements?: Placement[];
@@ -31,7 +32,13 @@ const defaultOptions: Required<Pick<TooltipOptions, 'strategy' | 'hoverDelay' |
 
 const transitionTime = 150;
 
-export default function useTooltip(options: TooltipOptions) {
+interface TooltipReturn {
+    setReference: (node: ReferenceType | null) => void;
+    getReferenceProps: (userProps?: HTMLProps<Element>) => Record<string, unknown>;
+    tooltip: ReactNode;
+}
+
+export default function useTooltip(options: TooltipOptions): TooltipReturn {
     const [open, setOpen] = useState(false);
     const [visible, setVisible] = useState(false);
     const transition = useRef<NodeJS.Timeout>(null);
@@ -42,10 +49,12 @@ export default function useTooltip(options: TooltipOptions) {
     const {
         x,
         y,
-        reference,
-        floating,
         strategy,
         placement,
+        refs: {
+            setReference,
+            setFloating,
+        },
         middlewareData: {
             arrow: {
                 x: arrowX,
@@ -96,7 +105,7 @@ export default function useTooltip(options: TooltipOptions) {
     const content = (
         <div
             {...getFloatingProps({
-                ref: floating,
+                ref: setFloating,
                 className: classNames(
                     'floating-ui-tooltip',
                     {
@@ -120,7 +129,7 @@ export default function useTooltip(options: TooltipOptions) {
         </div>
     );
 
-    let tooltip: React.ReactNode | React.ReactNodeArray = false;
+    let tooltip: ReactNode = false;
 
     if (open) {
         if (effectiveStrategy === 'fixed') {
@@ -132,7 +141,7 @@ export default function useTooltip(options: TooltipOptions) {
     }
 
     return {
-        reference,
+        setReference,
         getReferenceProps,
         tooltip,
     };

webapp/channels/src/components/file_attachment/file_attachment.tsx

@@ -23,7 +23,6 @@ import {
     fileSizeToString,
     getFileType,
     loadImage,
-    localizeMessage,
 } from 'utils/utils';
 
 import ArchivedTooltip from './archived_tooltip';
@@ -58,14 +57,16 @@ interface Props extends PropsFromRedux {
 
 export default function FileAttachment(props: Props) {
     const mounted = useRef(true);
-    const intl = useIntl();
+
+    const {formatMessage} = useIntl();
+
     const [loaded, setLoaded] = useState(getFileType(props.fileInfo.extension) !== FileTypes.IMAGE);
     const [loadFilesCalled, setLoadFilesCalled] = useState(false);
     const [keepOpen, setKeepOpen] = useState(false);
     const [openUp, setOpenUp] = useState(false);
 
     const {
-        reference,
+        setReference,
         getReferenceProps,
         tooltip: archivedTooltip,
     } = useTooltip({
@@ -190,8 +191,8 @@ export default function FileAttachment(props: Props) {
                 <Menu.ItemAction
                     data-title='Public Image'
                     onClick={handleGetPublicLink}
-                    ariaLabel={localizeMessage('view_image_popover.publicLink', 'Get a public link')}
+                    ariaLabel={formatMessage({id: 'view_image_popover.publicLink', defaultMessage: 'Get a public link'})}
-                    text={localizeMessage('view_image_popover.publicLink', 'Get a public link')}
+                    text={formatMessage({id: 'view_image_popover.publicLink', defaultMessage: 'Get a public link'})}
                 />,
             );
         }
@@ -225,7 +226,7 @@ export default function FileAttachment(props: Props) {
 
         const tooltip = (
             <Tooltip id='file-name__tooltip'>
-                {localizeMessage('file_search_result_item.more_actions', 'More Actions')}
+                {formatMessage({id: 'file_search_result_item.more_actions', defaultMessage: 'More Actions'})}
             </Tooltip>
         );
 
@@ -243,7 +244,7 @@ export default function FileAttachment(props: Props) {
                     <button
                         ref={buttonRef}
                         id={`file_action_button_${props.fileInfo.id}`}
-                        aria-label={localizeMessage('file_search_result_item.more_actions', 'More Actions').toLowerCase()}
+                        aria-label={formatMessage({id: 'file_search_result_item.more_actions', defaultMessage: 'More Actions'}).toLowerCase()}
                         className={classNames(
                             'file-dropdown-icon', 'dots-icon',
                             {'a11y--active': keepOpen},
@@ -272,7 +273,7 @@ export default function FileAttachment(props: Props) {
     let fileThumbnail;
     let fileDetail;
     let fileActions;
-    const ariaLabelImage = `${localizeMessage('file_attachment.thumbnail', 'file thumbnail')} ${fileInfo.name}`.toLowerCase();
+    const ariaLabelImage = `${formatMessage({id: 'file_attachment.thumbnail', defaultMessage: 'file thumbnail'})} ${fileInfo.name}`.toLowerCase();
 
     if (!compactDisplay) {
         fileThumbnail = (
@@ -362,7 +363,7 @@ export default function FileAttachment(props: Props) {
                     {trimmedFilename}
                 </span>
                 <span className='post-image__archived-label'>
-                    {intl.formatMessage({
+                    {formatMessage({
                         id: 'workspace_limits.archived_file.archived_compact',
                         defaultMessage: '(archived)',
                     })}
@@ -373,7 +374,7 @@ export default function FileAttachment(props: Props) {
     const content =
         (
             <div
-                ref={fileInfo.archived ? reference : undefined}
+                ref={fileInfo.archived ? setReference : undefined}
                 {...(fileInfo.archived ? getReferenceProps() : {})}
                 className={
                     classNames([

webapp/channels/src/components/post_priority/post_priority_picker_overlay.tsx

@@ -44,7 +44,7 @@ function PostPriorityPickerOverlay({
 
     const messagePriority = formatMessage({id: 'shortcuts.msgs.formatting_bar.post_priority', defaultMessage: 'Message priority'});
     const {
-        reference: tooltipRef,
+        setReference: setTooltipRef,
         getReferenceProps: getTooltipReferenceProps,
         tooltip,
     } = useTooltip({
@@ -92,7 +92,7 @@ function PostPriorityPickerOverlay({
     return (
         <>
             <div
-                ref={tooltipRef}
+                ref={setTooltipRef}
                 {...getTooltipReferenceProps()}
             >
                 <IconContainer