feat(react-tether): BREAKING CHANGE Bump BUIE to React 19

.flowconfig

@@ -29,6 +29,7 @@ sharedmemory.hash_table_pow=21
 esproposal.export_star_as=enable
 esproposal.optional_chaining=enable
 module.file_ext=.js
+module.file_ext=.cjs
 module.file_ext=.scss
 module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/EmptyFlowStub.js.flow'
 module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/EmptyFlowStub.js.flow'

package.json

@@ -266,7 +266,7 @@
         "react-responsive": "^10.0.0",
         "react-router-dom": "^5.3.4",
         "react-scrollbars-custom": "^4.0.21",
-        "react-tether": "^1.0.5",
+        "react-tether": "^3.0.3",
         "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.14.1",
         "remarkable": "^2.0.1",
@@ -332,11 +332,11 @@
         "mousetrap": "^1.6.3",
         "pikaday": "^1.8.0",
         "query-string": "5.1.1",
-        "react": "^17.0.1 || ^18.0.0",
+        "react": "^18.0.0 || ^19.0.0",
         "react-animate-height": "^3.2.3",
         "react-aria-components": "^1.10.1",
         "react-beautiful-dnd": "^13.1.1",
-        "react-dom": "^17.0.1 || ^18.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
         "react-draggable": "^4.5.0",
         "react-immutable-proptypes": "^2.1.0",
         "react-intl": ">=2.9.0",
@@ -347,7 +347,7 @@
         "react-responsive": "^10.0.0",
         "react-router-dom": "5.3.4",
         "react-scrollbars-custom": "^4.0.21",
-        "react-tether": "^1.0.5",
+        "react-tether": "^3.0.3",
         "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.13.2",
         "remarkable": "^2.0.1",
@@ -357,11 +357,6 @@
         "tabbable": "^1.1.2",
         "uuid": "^8.3.2"
     },
-    "comments": {
-        "dependencies": {
-            "react-tether": "Version 2.x has too many breaking changes and requires forwardRef on all components"
-        }
-    },
     "msw": {
         "workerDirectory": [".storybook/public"]
     }

src/components/button-group/ButtonGroup.scss

@@ -43,7 +43,8 @@
 
     &,
     & > .bdl-targeted-click-through {
-        > .btn {
+        > .btn,
+        > .bdl-Tooltip-target > .btn {
             margin: 5px 0 5px -1px;
             border-radius: 0;
 
@@ -64,25 +65,29 @@
             }
         }
 
-        > .btn:first-child {
+        > .btn:first-child,
+        > .bdl-Tooltip-target:first-child > .btn {
             border-top-left-radius: $bdl-border-radius-size-med;
             border-bottom-left-radius: $bdl-border-radius-size-med;
         }
 
-        > .btn:last-child {
+        > .btn:last-child,
+        > .bdl-Tooltip-target:last-child > .btn {
             border-top-right-radius: $bdl-border-radius-size-med;
             border-bottom-right-radius: $bdl-border-radius-size-med;
         }
 
-        > .btn.is-selected {
+        > .btn.is-selected,
+        > .bdl-Tooltip-target > .btn.is-selected {
             z-index: 2; /* place on top of siblings */
             color: $bdl-gray-80;
             background-color: $bdl-gray-10;
             border-color: $bdl-gray-65;
             box-shadow: none;
         }
 
-        > .btn:focus {
+        > .btn:focus,
+        > .bdl-Tooltip-target > .btn:focus {
             z-index: 3; /* place on top of all other buttons for accessibility */
         }
     }
@@ -98,7 +103,7 @@
                 border: 1px solid $bdl-gray-30;
                 box-shadow: none;
                 cursor: default;
-                opacity: .4;
+                opacity: 0.4;
             }
 
             > .btn-primary {

src/components/checkbox/Checkbox.scss

@@ -75,6 +75,7 @@
 .checkbox-tooltip-wrapper {
     display: inline-flex;
     vertical-align: text-bottom;
+    line-height: 0.1; // This keeps the tooltip wrapper height consistent with the child element
 
     > .info-tooltip {
         position: relative;

src/components/checkbox/CheckboxTooltip.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
+import { Focusable, Tooltip, TooltipProvider } from '@box/blueprint-web';
+
 import IconInfo from '../../icons/general/IconInfo';
-import Tooltip from '../tooltip';
 
 const messages = defineMessages({
     checkboxTooltipIconInfoText: {
@@ -18,15 +19,19 @@ export interface CheckboxTooltipProps {
 
 const CheckboxTooltip = ({ tooltip }: CheckboxTooltipProps) => (
     <div className="checkbox-tooltip-wrapper">
-        <Tooltip text={tooltip}>
-            <div className="info-tooltip">
-                <IconInfo
-                    height={16}
-                    title={<FormattedMessage {...messages.checkboxTooltipIconInfoText} />}
-                    width={16}
-                />
-            </div>
-        </Tooltip>
+        <TooltipProvider>
+            <Tooltip content={tooltip}>
+                <Focusable>
+                    <div className="info-tooltip">
+                        <IconInfo
+                            height={16}
+                            title={<FormattedMessage {...messages.checkboxTooltipIconInfoText} />}
+                            width={16}
+                        />
+                    </div>
+                </Focusable>
+            </Tooltip>
+        </TooltipProvider>
     </div>
 );
 

src/components/context-menu/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import TetherComponent from 'react-tether';
+import TetherComponent, { TetherProps } from 'react-tether';
 import uniqueId from 'lodash/uniqueId';
 
 import './ContextMenu.scss';
@@ -158,20 +158,29 @@ class ContextMenu extends React.Component<ContextMenuProps, ContextMenuState> {
             onClose: this.handleMenuClose,
         };
 
-        // TypeScript defs don't work for older versions of react-tether
-        const tetherProps = {
+        const tetherProps: TetherProps = {
             attachment: 'top left',
             classPrefix: 'context-menu',
             constraints,
             targetAttachment: 'top left',
             targetOffset,
+            renderElementTo: document.body,
         };
 
         return (
-            <TetherComponent {...tetherProps}>
-                {React.isValidElement(menuTarget) ? React.cloneElement(menuTarget, menuTargetProps) : null}
-                {isOpen && React.isValidElement(menu) ? React.cloneElement(menu, menuProps) : null}
-            </TetherComponent>
+            <TetherComponent
+                {...tetherProps}
+                renderTarget={ref => {
+                    return React.isValidElement(menuTarget) ? (
+                        <div ref={ref}>{React.cloneElement(menuTarget, menuTargetProps)}</div>
+                    ) : null;
+                }}
+                renderElement={ref => {
+                    return isOpen && React.isValidElement(menu) ? (
+                        <div ref={ref}>{React.cloneElement(menu, menuProps)}</div>
+                    ) : null;
+                }}
+            />
         );
     }
 }

src/components/context-menu/__tests__/ContextMenu.test.tsx

@@ -2,6 +2,7 @@
 // @ts-ignore
 import React, { act } from 'react';
 import { mount, shallow, ReactWrapper } from 'enzyme';
+import TetherComponent from 'react-tether';
 import sinon from 'sinon';
 
 import ContextMenu, { ContextMenuProps, ContextMenuState } from '../ContextMenu';
@@ -53,7 +54,7 @@ describe('components/context-menu/ContextMenu', () => {
         });
 
         test('should correctly render a single child button with correct props', () => {
-            const wrapper = shallow<ContextMenu>(
+            const wrapper = mount<ContextMenu>(
                 <ContextMenu>
                     <FakeButton />
                     <FakeMenu />
@@ -69,7 +70,7 @@ describe('components/context-menu/ContextMenu', () => {
         });
 
         test('should not render child menu when menu is closed', () => {
-            const wrapper = shallow(
+            const wrapper = mount(
                 <ContextMenu>
                     <FakeButton />
                     <FakeMenu />
@@ -81,13 +82,16 @@ describe('components/context-menu/ContextMenu', () => {
         });
 
         test('should correctly render a single child menu with correct props when menu is open', () => {
-            const wrapper = shallow<ContextMenu>(
+            const wrapper = mount<ContextMenu>(
                 <ContextMenu>
                     <FakeButton />
                     <FakeMenu />
                 </ContextMenu>,
             );
-            wrapper.setState({ isOpen: true });
+            act(() => {
+                wrapper.setState({ isOpen: true });
+            });
+            wrapper.update();
 
             const instance = wrapper.instance();
 
@@ -100,17 +104,18 @@ describe('components/context-menu/ContextMenu', () => {
         });
 
         test('should render TetherComponent with correct props with correct default values', () => {
-            const wrapper = shallow(
+            const wrapper = mount(
                 <ContextMenu>
                     <FakeButton />
                     <FakeMenu />
                 </ContextMenu>,
             );
 
-            expect(wrapper.is('TetherComponent')).toBe(true);
-            expect(wrapper.prop('attachment')).toEqual('top left');
-            expect(wrapper.prop('targetAttachment')).toEqual('top left');
-            expect(wrapper.prop('constraints')).toEqual([]);
+            const tetherComponent = wrapper.find(TetherComponent);
+            expect(tetherComponent.length).toBe(1);
+            expect(tetherComponent.prop('attachment')).toEqual('top left');
+            expect(tetherComponent.prop('targetAttachment')).toEqual('top left');
+            expect(tetherComponent.prop('constraints')).toEqual([]);
         });
 
         test('should render TetherComponent with constraints when specified', () => {
@@ -153,12 +158,9 @@ describe('components/context-menu/ContextMenu', () => {
                 </ContextMenu>,
             );
             const instance = wrapper.instance();
-            sandbox
-                .mock(instance)
-                .expects('setState')
-                .withArgs({
-                    isOpen: false,
-                });
+            sandbox.mock(instance).expects('setState').withArgs({
+                isOpen: false,
+            });
             instance.closeMenu();
         });
 
@@ -247,7 +249,9 @@ describe('components/context-menu/ContextMenu', () => {
             const instance = wrapper.instance();
             document.addEventListener = jest.fn();
             document.removeEventListener = jest.fn();
-            instance.setState({ isOpen: true });
+            act(() => {
+                instance.setState({ isOpen: true });
+            });
             expect(document.addEventListener).not.toHaveBeenCalledWith('click', expect.anything(), expect.anything());
             expect(document.addEventListener).not.toHaveBeenCalledWith(
                 'contextmenu',
@@ -290,14 +294,8 @@ describe('components/context-menu/ContextMenu', () => {
             );
 
             const documentMock = sandbox.mock(document);
-            documentMock
-                .expects('removeEventListener')
-                .withArgs('contextmenu')
-                .never();
-            documentMock
-                .expects('removeEventListener')
-                .withArgs('click')
-                .never();
+            documentMock.expects('removeEventListener').withArgs('contextmenu').never();
+            documentMock.expects('removeEventListener').withArgs('click').never();
 
             wrapper.unmount();
         });
@@ -411,18 +409,18 @@ describe('components/context-menu/ContextMenu', () => {
                 const instance = wrapper.instance() as ContextMenu;
                 instance.closeMenu = closeMenuSpy;
 
-                const handleContextMenuEvent = ({
+                const handleContextMenuEvent = {
                     clientX: 10,
                     clientY: 15,
                     preventDefault: preventDefaultSpy,
-                } as unknown) as MouseEvent;
+                } as unknown as MouseEvent;
                 act(() => {
                     instance.handleContextMenu(handleContextMenuEvent);
                 });
 
-                const documentClickEvent = ({
+                const documentClickEvent = {
                     target: document.createElement('div'),
-                } as unknown) as MouseEvent;
+                } as unknown as MouseEvent;
                 instance.handleDocumentClick(documentClickEvent);
                 expect(closeMenuSpy).toHaveBeenCalled();
             });
@@ -438,18 +436,18 @@ describe('components/context-menu/ContextMenu', () => {
                 const instance = wrapper.instance() as ContextMenu;
                 instance.closeMenu = closeMenuSpy;
 
-                const handleContextMenuEvent = ({
+                const handleContextMenuEvent = {
                     clientX: 10,
                     clientY: 15,
                     preventDefault: preventDefaultSpy,
-                } as unknown) as MouseEvent;
+                } as unknown as MouseEvent;
                 act(() => {
                     instance.handleContextMenu(handleContextMenuEvent);
                 });
 
-                const documentClickEvent = ({
+                const documentClickEvent = {
                     target: document.getElementById(instance.menuID),
-                } as unknown) as MouseEvent;
+                } as unknown as MouseEvent;
                 instance.handleDocumentClick(documentClickEvent);
                 expect(closeMenuSpy).not.toHaveBeenCalled();
             });