Remove react-sizeme and repalce with our own HOC

__tests__/src/extend/withSize.test.js

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { withSize } from '../../../src/extend/withSize';
+
+/** Mock ResizeObserver */
+class ResizeObserver {
+  /** */
+  constructor(callback) {
+    this.callback = callback;
+  }
+
+  /** */
+  observe(element) {
+    // Fake a resize event
+    setTimeout(() => {
+      this.callback([{ contentRect: { height: 300, width: 400 } }]);
+    }, 0);
+  }
+
+  /** */
+  disconnect() { jest.fn(); } // eslint-disable-line
+}
+
+// Replace the global ResizeObserver with the mock
+global.ResizeObserver = ResizeObserver;
+
+/** */
+const TestComponent = ({ size }) => (
+  <div>
+    {size.width}
+    {size.height}
+  </div>
+);
+
+TestComponent.propTypes = {
+  size: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }).isRequired,
+};
+
+const WrappedTestComponent = withSize()(TestComponent);
+
+test('it should render with size', async () => {
+  render(<WrappedTestComponent />);
+
+  // Assert that the updated size is reflected
+  expect(await screen.findByText(/400/)).toBeInTheDocument();
+  expect(await screen.findByText(/300/)).toBeInTheDocument();
+});

package.json

@@ -68,7 +68,6 @@
     "react-redux": "^8.0.0 || ^9.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
-    "react-sizeme": "^2.6.7 || ^3.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "redux": "^5.0.0",

setupJest.js

@@ -1,18 +1,22 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import fetchMock from 'jest-fetch-mock';
-import sizeMe from 'react-sizeme';
 import i18next from 'i18next';
 import { setupIntersectionMocking } from 'react-intersection-observer/test-utils';
 import en from './src/locales/en/translation.json';
 
 jest.setTimeout(10000);
 
-sizeMe.noPlaceholders = true;
-
 const { TextEncoder } = require('util');
 
 global.TextEncoder = TextEncoder;
 
+// Mock the browser's native ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  disconnect: jest.fn(),
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+}));
+
 // Setup Jest to mock fetch
 fetchMock.enableMocks();
 

src/containers/CompanionWindow.js

@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withSize } from 'react-sizeme';
+import { withSize } from '../extend/withSize';
 import { withPlugins } from '../extend/withPlugins';
 import { withRef } from '../extend/withRef';
 import * as actions from '../state/actions';
@@ -46,8 +46,8 @@ const mapDispatchToProps = (dispatch, { windowId, id }) => ({
 
 const enhance = compose(
   withRef(),
-  withTranslation(),
   withSize(),
+  withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('CompanionWindow'),
 );

src/containers/WindowCanvasNavigationControls.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { withSize } from 'react-sizeme';
+import { withSize } from '../extend/withSize';
 import { withPlugins } from '../extend/withPlugins';
 import { getShowZoomControlsConfig, getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';

src/extend/withSize.js

@@ -0,0 +1,47 @@
+/** This file was written to replace https://github.com/ctrlplusb/react-sizeme
+ * when its dependencies went out of date and is very much inspired by its code.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+/** */
+export function withSize() {
+  return function WrapComponent(WrappedComponent) {
+    /** */
+    const SizeAwareComponent = (props) => {
+      const [size, setSize] = useState({ height: undefined, width: undefined });
+      const elementRef = useRef(null);
+      const observerRef = useRef(null);
+
+      useEffect(() => {
+        /** */
+        const handleResize = (entries) => {
+          for (const entry of entries) {
+            const { width, height } = entry.contentRect;
+            setSize({ height, width });
+          }
+        };
+
+        observerRef.current = new ResizeObserver(handleResize);
+
+        if (elementRef.current) {
+          observerRef.current.observe(elementRef.current);
+        }
+
+        return () => {
+          if (observerRef.current) {
+            observerRef.current.disconnect();
+          }
+        };
+      }, []);
+
+      return (
+        <div ref={elementRef}>
+          <WrappedComponent size={size} {...props} />
+        </div>
+      );
+    };
+
+    return SizeAwareComponent;
+  };
+}