MM-62382/MM-63615 Remove explicit reference to react-popper and remaining references to popper.js (#30743)

* Replace usage of react-popper in onboarding with floating-ui * Remove direct dependency on react-popper Compass components still depend on react-popper, but none of the web app code does any more. * Remove direct dependency on popper.js * Remove unneeded dependency on @types/bootstrap and remaining indirect dependency on popper.js
2025-04-22 15:35:21 -04:00
--- a/webapp/channels/package.json
+++ b/webapp/channels/package.json
@@ -56,7 +56,6 @@
    "moment-timezone": "0.5.38",
    "p-queue": "7.3.0",
    "pdfjs-dist": "4.4.168",
-    "popper.js": "1.16.1",
    "process": "0.11.10",
    "prop-types": "15.8.1",
    "react": "17.0.2",
@@ -71,7 +70,6 @@
    "react-intl": "*",
    "react-is": "17.0.2",
    "react-overlays": "0.9.3",
-    "react-popper": "2.3.0",
    "react-redux": "7.2.4",
    "react-router-dom": "5.3.4",
    "react-select": "5.9.0",
@@ -110,7 +108,6 @@
    "@testing-library/react": "12.1.4",
    "@testing-library/react-hooks": "8.0.1",
    "@testing-library/user-event": "13.5.0",
-    "@types/bootstrap": "4.5.0",
    "@types/country-list": "2.1.0",
    "@types/enzyme": "3.10.11",
    "@types/jest": "28.1.8",
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import React, {useRef, useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled, {css} from 'styled-components';
@@ -137,7 +137,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
    }, []);

    const open = useSelector(((state: GlobalState) => getBool(state, OnboardingTaskCategory, OnboardingTaskList.ONBOARDING_TASK_LIST_OPEN)));
-    const trigger = useRef<HTMLButtonElement>(null);
+    const [trigger, setTrigger] = useState<HTMLButtonElement | null>(null);
    const dispatch = useDispatch();
    const currentUserId = useSelector(getCurrentUserId);
    const handleTaskTrigger = useHandleOnBoardingTaskTrigger();
@@ -253,7 +253,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
            <CompletedAnimation completed={showAnimation}/>
            <Button
                onClick={toggleTaskList}
-                ref={trigger}
+                ref={(element) => setTrigger(element)}
                open={open}
                data-cy='onboarding-task-list-action-button'
                aria-label={formatMessage({id: 'onboardingTask.checklist.start_onboarding_process', defaultMessage: 'Start the onboarding process.'})}
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx
@@ -1,10 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import type {Placement} from 'popper.js';
-import React from 'react';
-import type {RefObject, CSSProperties} from 'react';
-import {usePopper} from 'react-popper';
+import type {Placement} from '@floating-ui/react-dom';
+import {useFloating, offset as floatingOffset, autoUpdate} from '@floating-ui/react-dom';
+import React, {useLayoutEffect} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import styled from 'styled-components';

@@ -49,12 +48,12 @@ const Overlay = styled.div`
 `;

 interface TaskListPopoverProps {
-    trigger: RefObject<HTMLButtonElement>;
+    trigger: HTMLButtonElement | null;
    isVisible: boolean;
    placement?: Placement;
-    offset?: [number | null | undefined, number | null | undefined];
-    children?: React.ReactNode;
-    onClick?: () => void;
+    offset?: [number, number];
+    children: React.ReactNode;
+    onClick: () => void;
 }

 export const TaskListPopover = ({
@@ -65,29 +64,26 @@ export const TaskListPopover = ({
    children,
    onClick,
 }: TaskListPopoverProps): JSX.Element | null => {
-    const [popperElement, setPopperElement] =
-        React.useState<HTMLDivElement | null>(null);
-
-    const {
-        styles: {popper},
-        attributes,
-    } = usePopper(trigger.current, popperElement, {
+    const {x, y, strategy, refs: {setReference, setFloating}} = useFloating({
        placement,
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset,
-                },
-            },
-        ],
+        middleware: [floatingOffset({
+            mainAxis: offset[1],
+            crossAxis: offset[0],
+        })],
+        whileElementsMounted: autoUpdate,
    });
+
+    useLayoutEffect(() => {
+        setReference(trigger);
+    }, [setReference, trigger]);
+
    const style = {
        container: {
-            ...popper,
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
            zIndex: isVisible ? 100 : -1,
-            position: 'fixed',
-        } as CSSProperties,
+        },
    };
    return (
        <>
@@ -103,9 +99,8 @@ export const TaskListPopover = ({
                />
            </CSSTransition>
            <div
-                ref={setPopperElement}
+                ref={setFloating}
                style={style.container}
-                {...attributes.popper}
            >
                {children}
            </div>
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -110,7 +110,6 @@
        "moment-timezone": "0.5.38",
        "p-queue": "7.3.0",
        "pdfjs-dist": "4.4.168",
-        "popper.js": "1.16.1",
        "process": "0.11.10",
        "prop-types": "15.8.1",
        "react": "17.0.2",
@@ -125,7 +124,6 @@
        "react-intl": "*",
        "react-is": "17.0.2",
        "react-overlays": "0.9.3",
-        "react-popper": "2.3.0",
        "react-redux": "7.2.4",
        "react-router-dom": "5.3.4",
        "react-select": "5.9.0",
@@ -164,7 +162,6 @@
        "@testing-library/react": "12.1.4",
        "@testing-library/react-hooks": "8.0.1",
        "@testing-library/user-event": "13.5.0",
-        "@types/bootstrap": "4.5.0",
        "@types/country-list": "2.1.0",
        "@types/enzyme": "3.10.11",
        "@types/jest": "28.1.8",
@@ -6676,16 +6673,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-AWu7D+Cduyic75YptSRiXuCIy1c3SsmYk/9ixS68Ft2eAgg2wRj5U2M+7PK5zpakk4gTgfrWHeGxJqkSjttwyQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/jquery": "*",
-        "popper.js": "^1.14.1"
-      }
-    },
    "node_modules/@types/cheerio": {
      "version": "0.22.35",
      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.35.tgz",
@@ -22486,16 +22473,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
    "node_modules/possible-typed-array-names": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",