Merge branch 'master-upstream'

.eslintrc

@@ -44,7 +44,9 @@
     }],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
-    "react/require-default-props": "off",
+    "react/require-default-props": [2, {
+      "functions": "defaultArguments"
+    }],
     "react-hooks/exhaustive-deps": "error",
     "testing-library/render-result-naming-convention": "off",
     "testing-library/no-render-in-lifecycle": [

__tests__/src/components/ManifestListItem.test.js

@@ -20,7 +20,7 @@ function createWrapper(props) {
 
 describe('ManifestListItem', () => {
   it('renders without an error', () => {
-    createWrapper({ buttonRef: 'ref' });
+    createWrapper({ buttonRef: jest.fn() });
 
     expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com');
     expect(screen.getByRole('listitem')).toHaveClass('MuiListItem-root');

__tests__/src/components/MiradorMenuButton.test.js

@@ -1,4 +1,4 @@
-import { act, render, screen } from 'test-utils';
+import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
 import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
 
@@ -37,9 +37,8 @@ describe('MiradorMenuButton', () => {
     const user = userEvent.setup();
     createWrapper({ TooltipProps: { placement: 'left-start' } });
 
-    await act(async () => {
-      await user.hover(screen.getByRole('button'));
-    });
+    await user.hover(screen.getByRole('button'));
+
     expect(await screen.findByRole('tooltip')).toHaveTextContent('The Label');
 
     expect(screen.getByText('The Label')).toHaveClass('MuiTooltip-tooltipPlacementLeft');

__tests__/src/components/SidebarIndexTableOfContents.test.js

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from 'test-utils';
 import userEvent from '@testing-library/user-event';
 import { Utils } from 'manifesto.js';
-
+import { act } from '@testing-library/react';
 import { SidebarIndexTableOfContents } from '../../../src/components/SidebarIndexTableOfContents';
 import ConnectedSidebarIndexTableOfContents from '../../../src/containers/SidebarIndexTableOfContents';
 import manifestVersion2 from '../../fixtures/version-2/structures.json';
@@ -139,11 +139,14 @@ describe('SidebarIndexTableOfContents', () => {
 
     const { store } = createInteractiveWrapper({});
     const root = screen.getByRole('treeitem');
-
-    root.focus();
+    act(() => {
+      root.focus();
+    });
     await user.keyboard('{ArrowRight}');
+
     expect(screen.getAllByRole('treeitem')).toHaveLength(5);
     await user.keyboard('{ArrowLeft}');
+
     await waitFor(() => {
       expect(screen.getByRole('treeitem')).toBeInTheDocument();
     });
@@ -157,7 +160,9 @@ describe('SidebarIndexTableOfContents', () => {
     const { store } = createInteractiveWrapper({});
     const root = screen.getByRole('treeitem');
 
-    root.focus();
+    act(() => {
+      root.focus();
+    });
     await user.keyboard('{Enter}');
     expect(screen.getAllByRole('treeitem')).toHaveLength(5);
     await user.keyboard('{ArrowLeft}');
@@ -176,12 +181,16 @@ describe('SidebarIndexTableOfContents', () => {
     const { store } = createInteractiveWrapper({});
     const root = screen.getByRole('treeitem');
 
-    root.focus();
+    act(() => {
+      root.focus();
+    });
     await user.keyboard('{Enter}');
 
     const leafNode = screen.getAllByRole('treeitem')[1];
 
-    leafNode.focus();
+    act(() => {
+      leafNode.focus();
+    });
     await user.keyboard('{Enter}');
 
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c2');
@@ -197,7 +206,9 @@ describe('SidebarIndexTableOfContents', () => {
     });
 
     const leafNode = screen.getAllByRole('treeitem')[3];
-    leafNode.focus();
+    act(() => {
+      leafNode.focus();
+    });
     await user.keyboard('{Enter}');
 
     expect(setCanvas).toHaveBeenLastCalledWith('a', 'http://foo.test/1/canvas/c11');
@@ -211,21 +222,29 @@ describe('SidebarIndexTableOfContents', () => {
     });
 
     const root = screen.getByRole('treeitem');
-    root.focus();
+    act(() => {
+      root.focus();
+    });
     await user.keyboard('{Enter}');
 
     const leafNode1 = screen.getAllByRole('treeitem')[2];
-    leafNode1.focus();
+    act(() => {
+      leafNode1.focus();
+    });
     await user.keyboard('{Enter}');
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c7');
 
     const leafNode2 = screen.getAllByRole('treeitem')[3];
-    leafNode2.focus();
+    act(() => {
+      leafNode2.focus();
+    });
     await user.keyboard('{Enter}');
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9');
 
     const leafNode3 = screen.getAllByRole('treeitem')[4];
-    leafNode3.focus();
+    act(() => {
+      leafNode3.focus();
+    });
     await user.keyboard('{Enter}');
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10');
   });

__tests__/src/components/ThumbnailNavigation.test.js

@@ -28,7 +28,7 @@ function Subject({ fixture = manifestJson, ...props }) {
 }
 
 Subject.propTypes = {
-  fixture: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  fixture: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 jest.mock(

__tests__/src/lib/MiradorViewer.test.js

@@ -19,11 +19,15 @@ describe('MiradorViewer', () => {
   });
   describe('constructor', () => {
     it('returns viewer store', () => {
-      const instance = new MiradorViewer({ id: 'mirador' });
+      const instance = new MiradorViewer({});
+
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
       expect(instance.store.dispatch).toBeDefined();
     });
     it('renders via ReactDOM', () => {
-      act(() => { new MiradorViewer({ id: 'mirador' }); }); // eslint-disable-line no-new
+      const instance = new MiradorViewer({});
+
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
 
       expect(screen.getByTestId('container')).not.toBeEmptyDOMElement();
     });
@@ -35,7 +39,6 @@ describe('MiradorViewer', () => {
           catalog: [
             { manifestId: 'http://media.nga.gov/public/manifests/nga_highlights.json', provider: 'National Gallery of Art' },
           ],
-          id: 'mirador',
           windows: [
             {
               canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
@@ -60,6 +63,8 @@ describe('MiradorViewer', () => {
         },
       );
 
+      act(() => { instance.renderInto(document.getElementById('mirador')); }); // eslint-disable-line testing-library/no-unnecessary-act
+
       const { windows, catalog, config } = instance.store.getState();
       const windowIds = Object.keys(windows);
       expect(Object.keys(windowIds).length).toBe(2);

setupJest.js

@@ -44,10 +44,12 @@ jest.mock('react-i18next', () => ({
     type: '3rdParty',
   },
   // this mock makes sure any components using the translate HoC receive the t function as a prop
-  withTranslation: () => (Component) => {
-    Component.defaultProps = { // eslint-disable-line no-param-reassign
-      ...Component.defaultProps, t: k => k,
-    };
-    return Component;
+  withTranslation: () => (WrappedComponent) => {
+    /**
+     *
+     */
+    const I18nAwareComponent = ({ t = (k => k), ...props }) => <WrappedComponent t={t} {...props} />; // eslint-disable-line react/prop-types
+
+    return I18nAwareComponent;
   },
 }));

src/components/AudioViewer.js

@@ -13,12 +13,8 @@ const StyledAudio = styled('audio')({
 });
 
 /** */
-export function AudioViewer(props) {
+export function AudioViewer({ audioOptions = {}, audioResources = [], captions = [] }) {
   /* eslint-disable jsx-a11y/media-has-caption */
-  /** */
-  const {
-    captions, audioOptions, audioResources,
-  } = props;
 
   return (
     <StyledContainer>
@@ -44,9 +40,3 @@ AudioViewer.propTypes = {
   audioResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   captions: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
 };
-
-AudioViewer.defaultProps = {
-  audioOptions: {},
-  audioResources: [],
-  captions: [],
-};

src/components/BackgroundPluginArea.js

@@ -3,16 +3,12 @@ import ns from '../config/css-ns';
 import { PluginHook } from './PluginHook';
 
 /** invisible area where background plugins can add to */
-export const BackgroundPluginArea = props => (
+export const BackgroundPluginArea = ({ PluginComponents = [], ...props }) => (
   <div className={ns('background-plugin-area')} style={{ display: 'none' }}>
-    <PluginHook {...props} />
+    <PluginHook PluginComponents={PluginComponents} {...props} />
   </div>
 );
 
 BackgroundPluginArea.propTypes = {
   PluginComponents: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 };
-
-BackgroundPluginArea.defaultProps = {
-  PluginComponents: [],
-};

src/components/CompanionWindow.js

@@ -23,17 +23,18 @@ const StyledCloseButton = styled(MiradorMenuButton, { name: 'CompanionWindow', s
 /**
  * CompanionWindow
  */
-export function CompanionWindow(props) {
+export function CompanionWindow(props) { // eslint-disable-line react/require-default-props
+  const {
+    ariaLabel = undefined, classes = {}, direction, paperClassName = '', onCloseClick = () => {}, updateCompanionWindow = undefined, isDisplayed = false,
+    position = null, t = key => key, title = null, children = undefined, titleControls = null, size = {},
+    defaultSidebarPanelWidth = 235, defaultSidebarPanelHeight = 201, innerRef = undefined,
+  } = props;
+
   /** */
-  const openInNewStyle = () => {
-    const { direction } = props;
-    if (direction === 'rtl') return { transform: 'scale(-1, 1)' };
-    return {};
-  };
+  const openInNewStyle = direction === 'rtl' ? { transform: 'scale(-1, 1)' } : {};
 
   /** */
-  const resizeHandles = () => {
-    const { direction, position } = props;
+  const resizeHandles = (() => {
     const positions = {
       ltr: {
         default: 'left',
@@ -69,12 +70,7 @@ export function CompanionWindow(props) {
     }
 
     return base;
-  };
-  const {
-    ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
-    position, t, title, children, titleControls, size,
-    defaultSidebarPanelWidth, defaultSidebarPanelHeight, innerRef,
-  } = props;
+  })();
 
   const isBottom = (position === 'bottom' || position === 'far-bottom');
 
@@ -111,7 +107,7 @@ export function CompanionWindow(props) {
           width: isBottom ? 'auto' : defaultSidebarPanelWidth,
         }}
         disableDragging
-        enableResizing={resizeHandles()}
+        enableResizing={resizeHandles}
         minHeight={50}
         minWidth={position === 'left' ? 235 : 100}
       >
@@ -130,7 +126,7 @@ export function CompanionWindow(props) {
                   aria-label={t('openInCompanionWindow')}
                   onClick={() => { updateCompanionWindow({ position: 'right' }); }}
                 >
-                  <OpenInNewIcon style={openInNewStyle()} />
+                  <OpenInNewIcon style={openInNewStyle} />
                 </MiradorMenuButton>
               )
               : (
@@ -208,21 +204,3 @@ CompanionWindow.propTypes = {
   titleControls: PropTypes.node,
   updateCompanionWindow: PropTypes.func,
 };
-
-CompanionWindow.defaultProps = {
-  ariaLabel: undefined,
-  children: undefined,
-  classes: {},
-  defaultSidebarPanelHeight: 201,
-  defaultSidebarPanelWidth: 235,
-  innerRef: undefined,
-  isDisplayed: false,
-  onCloseClick: () => { },
-  paperClassName: '',
-  position: null,
-  size: {},
-  t: key => key,
-  title: null,
-  titleControls: null,
-  updateCompanionWindow: undefined,
-};

src/components/IIIFIFrameCommunication.js

@@ -1,10 +1,20 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+const IIIFIFrameCommunicationDefaultProps = {
+  'aria-hidden': true,
+  frameBorder: 0,
+  height: 1,
+  name: undefined,
+  scrolling: undefined,
+  style: { visibility: 'hidden' },
+  width: 1,
+};
+
 /**
  *  Handle IIIF Auth token validation using iframe message events
  */
-export function IIIFIFrameCommunication({ handleReceiveMessage, ...props }) {
+export function IIIFIFrameCommunication({ handleReceiveMessage = undefined, ...props }) {
   // Attaches the 'message' event listener to the window.
   useEffect(() => {
     if (!handleReceiveMessage) return undefined;
@@ -19,6 +29,7 @@ export function IIIFIFrameCommunication({ handleReceiveMessage, ...props }) {
     // iframe "title" attribute is passed in via props for accessibility
     // eslint-disable-next-line jsx-a11y/iframe-has-title
     <iframe
+      {...IIIFIFrameCommunicationDefaultProps}
       {...props}
     />
   );
@@ -35,14 +46,3 @@ IIIFIFrameCommunication.propTypes = {
   style: PropTypes.shape({}),
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
-
-IIIFIFrameCommunication.defaultProps = {
-  'aria-hidden': true,
-  frameBorder: 0,
-  handleReceiveMessage: undefined,
-  height: 1,
-  name: undefined,
-  scrolling: undefined,
-  style: { visibility: 'hidden' },
-  width: 1,
-};

src/components/IIIFThumbnail.js

@@ -22,7 +22,8 @@ const Image = styled('img', { name: 'IIIFThumbnail', slot: 'image' })(() => ({
  * try to load the image (or even calculate that the image url/height/width are)
  */
 const LazyLoadedImage = ({
-  border, placeholder, style = {}, thumbnail, resource, maxHeight, maxWidth, thumbnailsConfig, ...props
+  border = false, placeholder, style = {}, thumbnail = null,
+  resource, maxHeight, maxWidth, thumbnailsConfig = {}, ...props
 }) => {
   const { ref, inView } = useInView();
   const [loaded, setLoaded] = useState(false);
@@ -129,13 +130,6 @@ LazyLoadedImage.propTypes = {
   thumbnailsConfig: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
-LazyLoadedImage.defaultProps = {
-  border: false,
-  style: {},
-  thumbnail: null,
-  thumbnailsConfig: {},
-};
-
 /**
  * Uses InteractionObserver to "lazy" load canvas thumbnails that are in view.
  */