Use an explicit dom ref for handling scrolling to dom elements

__tests__/src/components/ScrollTo.test.js

@@ -12,7 +12,7 @@ describe('ScrollTo', () => {
     containerRef = createRef();
     render(<div data-testid="container" ref={containerRef} />);
 
-    containerRef.current.domEl = {
+    containerRef.current = {
       getBoundingClientRect: () => containerBoundingRect,
       getElementsByClassName: () => [{ scrollTo }],
     };

src/components/CompanionWindow.js

@@ -93,7 +93,7 @@ export class CompanionWindow extends Component {
     const {
       ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
       position, t, title, children, titleControls, size,
-      defaultSidebarPanelWidth, defaultSidebarPanelHeight,
+      defaultSidebarPanelWidth, defaultSidebarPanelHeight, innerRef,
     } = this.props;
 
     const isBottom = (position === 'bottom' || position === 'far-bottom');
@@ -112,6 +112,7 @@ export class CompanionWindow extends Component {
 
     return (
       <Paper
+        ref={innerRef}
         sx={{
           boxShadow: 'none',
           boxSizing: 'border-box',
@@ -251,6 +252,10 @@ CompanionWindow.propTypes = {
   defaultSidebarPanelHeight: PropTypes.number,
   defaultSidebarPanelWidth: PropTypes.number,
   direction: PropTypes.string.isRequired,
+  innerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
   isDisplayed: PropTypes.bool,
   onCloseClick: PropTypes.func,
   paperClassName: PropTypes.string,
@@ -271,6 +276,7 @@ CompanionWindow.defaultProps = {
   classes: {},
   defaultSidebarPanelHeight: 201,
   defaultSidebarPanelWidth: 235,
+  innerRef: undefined,
   isDisplayed: false,
   onCloseClick: () => {},
   paperClassName: '',

src/components/ScrollTo.js

@@ -36,9 +36,9 @@ export class ScrollTo extends Component {
   containerBoundingRect() {
     const { containerRef } = this.props;
 
-    if (!containerRef || !containerRef.current || !containerRef.current.domEl) return {};
+    if (!containerRef || !containerRef.current) return {};
 
-    return containerRef.current.domEl.getBoundingClientRect();
+    return containerRef.current.getBoundingClientRect();
   }
 
   /**
@@ -59,14 +59,14 @@ export class ScrollTo extends Component {
   }
 
   /**
-   * The container provided in the containersRef dome structure in which scrolling
+   * The container provided in the containersRef dom structure in which scrolling
    * should happen.
   */
   scrollableContainer() {
     const { containerRef } = this.props;
 
-    if (!containerRef || !containerRef.current || !containerRef.current.domEl) return null;
-    return containerRef.current.domEl.getElementsByClassName('mirador-scrollto-scrollable')[0];
+    if (!containerRef || !containerRef.current) return null;
+    return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
   }
 
   /**

src/components/SidebarIndexList.js

@@ -52,6 +52,7 @@ export class SidebarIndexList extends Component {
                 key={canvas.id}
                 sx={{
                   paddingRight: 1,
+                  position: 'initial',
                 }}
                 divider
                 onClick={onClick}

src/components/WindowSideBarAnnotationsPanel.js

@@ -35,7 +35,6 @@ export class WindowSideBarAnnotationsPanel extends Component {
         windowId={windowId}
         id={id}
         ref={this.containerRef}
-        otherRef={this.containerRef}
         titleControls={<AnnotationSettings windowId={windowId} />}
       >
         <StyledSection sx={{

src/components/WindowSideBarCanvasPanel.js

@@ -99,7 +99,6 @@ export class WindowSideBarCanvasPanel extends Component {
         id={id}
         windowId={windowId}
         ref={this.containerRef}
-        otherRef={this.containerRef}
         titleControls={(
           <>
             {