Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jfox-box wants to merge 6 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4d1850
feat(react-tether): Upgrade react-tether to 3.0.3
jfox-box Sep 17, 2025
ed22c02
fix: update .flowconfig to take .cjs
jfox-box Sep 25, 2025
2ec4c35
fix: Replace Checkbox, InfoIcon, and FooterIndicator tooltips with BP
jfox-box Oct 2, 2025
bb756bc
fix: Use createRoot instead of ReactDOM render
jfox-box Dec 31, 2025
29f93e4
fix: Respond to feedback
jfox-box Jan 2, 2026
70cb515
fix: Round 2
jfox-box Jan 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .flowconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

@tjuanitas tjuanitas Jan 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why?

Copy link
Contributor Author

@jfox-box jfox-box Jan 2, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-tether v3 uses a .cjs file as an entry point, so we get flow errors without it.

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/features/left-sidebar/LeftSidebarLinkCallout.js:4:29

Cannot resolve module /Users/jonathanfox/Documents/box-ui-elements/node_modules/react-tether/lib/react-tether.cjs.

     1│ // @flow
     2│ import * as React from 'react';
     3│ import classNames from 'classnames';
     4│ import TetherComponent from 'react-tether';
     5│
     6│ import PlainButton from '../../components/plain-button';
     7│ import IconClose from '../../icons/general/IconClose';
     ```

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'
Expand Down
13 changes: 4 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Breaking change: React 17 support dropped.

The peer dependency constraints now require React 18 or React 19, dropping support for React 17. This is a breaking change for consumers who have not yet migrated to React 18.

Given the team's comfort level with raising minimum peer dependency versions (based on learnings), this change may be intentional. However, ensure this breaking change is:

  • Documented in release notes
  • Communicated to consumers
  • Aligned with the react-tether 3.x requirements

Also applies to: 339-339

🤖 Prompt for AI Agents 
In package.json around lines 335 and 339, the peerDependencies were changed to
require React 18+ which drops React 17 support; if this is unintended, revert
the peer dependency range to include React 17 (e.g. add || ^17.x) and run tests
against React 17 to ensure compatibility; if intentional, document the breaking
change by adding clear notes to CHANGELOG/release notes and README (including a
migration section), communicate the change to consumers (release announcement
and repository PR description), and update compatibility docs to state alignment
with react-tether 3.x requirements and bump version accordingly.

"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",
Expand All @@ -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",
Expand All @@ -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"]
}
Expand Down
17 changes: 11 additions & 6 deletions src/components/button-group/ButtonGroup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@

&,
& > .bdl-targeted-click-through {
> .btn {
> .btn,
> .bdl-Tooltip-target > .btn {
margin: 5px 0 5px -1px;
border-radius: 0;

Expand All @@ -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 */
}
}
Expand All @@ -98,7 +103,7 @@
border: 1px solid $bdl-gray-30;
box-shadow: none;
cursor: default;
opacity: .4;
opacity: 0.4;
}

> .btn-primary {
Expand Down
1 change: 1 addition & 0 deletions src/components/checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
25 changes: 15 additions & 10 deletions src/components/checkbox/CheckboxTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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>
);

Expand Down
23 changes: 16 additions & 7 deletions src/components/context-menu/ContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
}}
/>
);
}
}
Expand Down
62 changes: 30 additions & 32 deletions src/components/context-menu/__tests__/ContextMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 />
Expand All @@ -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 />
Expand All @@ -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();

Expand All @@ -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', () => {
Expand Down Expand Up @@ -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();
});

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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();
});
Expand Down Expand Up @@ -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();
});
Expand All @@ -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();
});
Expand Down
Loading