Rebased #3795

.github/workflows/node.js.yml

@@ -7,7 +7,7 @@ on:
   push:
     branches: [ master ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, mui5 ]
 
 jobs:
   build:

__tests__/src/components/ManifestListItem.test.js

@@ -23,12 +23,17 @@ describe('ManifestListItem', () => {
     createWrapper({ buttonRef: 'ref' });
 
     expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com');
+    expect(screen.getByRole('listitem')).toHaveClass('MuiListItem-root');
     expect(screen.getByRole('button')).toHaveTextContent('xyz');
   });
-  it('properly interprets active in the DOM', () => {
-    createWrapper({ active: true });
+  it('adds a class when the item is active', () => {
+    createWrapper({ active: true, classes: { active: 'active' } });
+
     // If this is true, we can assume the proper styling classes are being applied
     expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true');
+
+    expect(screen.getByRole('listitem')).toHaveClass('active');
+    expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
   });
   it('renders a placeholder element until real data is available', () => {
     const { container } = createWrapper({ ready: false });

src/components/CompanionArea.js

@@ -39,6 +39,13 @@ const StyledToggleButton = styled(MiradorMenuButton)({
 
 /** */
 export class CompanionArea extends Component {
+  /** */
+  areaLayoutClass() {
+    const { classes, position } = this.props;
+
+    return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null;
+  }
+
   /** */
   collapseIcon() {
     const { companionAreaOpen, direction } = this.props;
@@ -75,7 +82,7 @@ export class CompanionArea extends Component {
       companionWindowIds, companionAreaOpen, setCompanionAreaOpen,
       position, sideBarOpen, t, windowId,
     } = this.props;
-
+    const className = [this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' ');
     return (
       <StyledRoot
         sx={{
@@ -84,7 +91,7 @@ export class CompanionArea extends Component {
             width: '100%',
           }),
         }}
-        className={ns(`companion-area-${position}`)}
+        className={className}
       >
         <Slide in={companionAreaOpen} direction={this.slideDirection()}>
           <StyledWrapper
@@ -120,6 +127,7 @@ export class CompanionArea extends Component {
 }
 
 CompanionArea.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   companionAreaOpen: PropTypes.bool.isRequired,
   companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   direction: PropTypes.string.isRequired,
@@ -131,6 +139,7 @@ CompanionArea.propTypes = {
 };
 
 CompanionArea.defaultProps = {
+  classes: {},
   setCompanionAreaOpen: () => {},
   sideBarOpen: false,
 };

src/components/CompanionWindow.js

@@ -91,7 +91,7 @@ export class CompanionWindow extends Component {
    */
   render() {
     const {
-      ariaLabel, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
+      ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed,
       position, t, title, children, titleControls, size,
       defaultSidebarPanelWidth, defaultSidebarPanelHeight,
     } = this.props;
@@ -135,7 +135,7 @@ export class CompanionWindow extends Component {
           display: isDisplayed ? null : 'none',
           order: position === 'left' ? -1 : null,
         }}
-        className={[ns(`companion-window-${position}`), paperClassName].join(' ')}
+        className={[ns(`companion-window-${position}`), paperClassName, position === 'bottom' ? classes.horizontal : classes.vertical].join(' ')}
         square
         component="aside"
         aria-label={ariaLabel || title}
@@ -161,7 +161,7 @@ export class CompanionWindow extends Component {
               minHeight: 'max-content',
               paddingLeft: 2,
             }}
-            className={ns('companion-window-header')}
+            className={[ns('companion-window-header'), size.width < 370 ? classes.small : null].join(' ')}
             disableGutters
           >
             <Typography
@@ -247,6 +247,7 @@ export class CompanionWindow extends Component {
 CompanionWindow.propTypes = {
   ariaLabel: PropTypes.string,
   children: PropTypes.node,
+  classes: PropTypes.objectOf(PropTypes.string),
   defaultSidebarPanelHeight: PropTypes.number,
   defaultSidebarPanelWidth: PropTypes.number,
   direction: PropTypes.string.isRequired,
@@ -267,6 +268,7 @@ CompanionWindow.propTypes = {
 CompanionWindow.defaultProps = {
   ariaLabel: undefined,
   children: undefined,
+  classes: {},
   defaultSidebarPanelHeight: 201,
   defaultSidebarPanelWidth: 235,
   isDisplayed: false,

src/components/GalleryViewThumbnail.js

@@ -122,6 +122,7 @@ export class GalleryViewThumbnail extends Component {
       <InView onChange={this.handleIntersection}>
         <StyledGalleryViewItem
           key={canvas.index}
+          className={selected ? 'selected' : ''}
           sx={{
             '&:focus': {
               outline: 'none',

src/components/ManifestListItem.js

@@ -99,6 +99,8 @@ export class ManifestListItem extends Component {
       return (
         <ListItem
           divider
+          selected={active}
+          className={active ? 'active' : ''}
           sx={theme => ({
             '&:hover,&:focus-within': {
               backgroundColor: theme.palette.action.hover,
@@ -123,6 +125,8 @@ export class ManifestListItem extends Component {
     return (
       <ListItem
         divider
+        selected={active}
+        className={active ? 'active' : ''}
         sx={theme => ({
           '&:hover,&:focus-within': {
             backgroundColor: theme.palette.action.hover,

src/components/SanitizedHtml.js

@@ -14,7 +14,7 @@ export class SanitizedHtml extends Component {
   */
   render() {
     const {
-      htmlString, ruleSet, ...props
+      classes, htmlString, ruleSet, ...props
     } = this.props;
 
     // Add a hook to make all links open a new window
@@ -35,7 +35,7 @@ export class SanitizedHtml extends Component {
             textDecoration: 'underline',
           },
         }}
-        className={[ns('third-party-html')].join(' ')}
+        className={[ns('third-party-html'), classes.root].join(' ')}
         dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
           __html: DOMPurify.sanitize(htmlString, htmlRules[ruleSet]),
         }}
@@ -46,6 +46,11 @@ export class SanitizedHtml extends Component {
 }
 
 SanitizedHtml.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   htmlString: PropTypes.string.isRequired,
   ruleSet: PropTypes.string.isRequired,
 };
+
+SanitizedHtml.defaultProps = {
+  classes: {},
+};

src/components/ScrollIndicatedDialogContent.js

@@ -6,7 +6,8 @@ import DialogContent from '@mui/material/DialogContent';
  *                                to indicate there is scrollable content
 */
 export function ScrollIndicatedDialogContent(props) {
-  const { className, ...otherProps } = props;
+  const { classes, className, ...otherProps } = props;
+  const ourClassName = [className, classes.shadowScrollDialog].join(' ');
 
   return (
     <DialogContent
@@ -29,16 +30,20 @@ export function ScrollIndicatedDialogContent(props) {
         backgroundSize: '100% 40px, 100% 40px, 100% 14px, 100% 14px',
         overflowY: 'auto',
       }}
-      className={className}
+      className={ourClassName}
       {...otherProps}
     />
   );
 }
 
 ScrollIndicatedDialogContent.propTypes = {
+  classes: PropTypes.shape({
+    shadowScrollDialog: PropTypes.string,
+  }),
   className: PropTypes.string,
 };
 
 ScrollIndicatedDialogContent.defaultProps = {
+  classes: {},
   className: '',
 };

src/components/SearchHit.js

@@ -101,6 +101,7 @@ export class SearchHit extends Component {
         scrollTo={windowSelected && !focused}
       >
         <ListItem
+          className={windowSelected ? 'windowSelected' : ''}
           sx={{
             '&.Mui-focused': {
               '&:hover': {

src/components/Window.js

@@ -1,7 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import cn from 'classnames';
 import Paper from '@mui/material/Paper';
 import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
@@ -134,7 +133,7 @@ export class Window extends Component {
             zIndex: theme.zIndex.modal - 1,
           }),
         })}
-        className={cn(ns('window'))}
+        className={ns('window')}
         aria-label={t('window', { label })}
       >
         {this.wrappedTopBar()}

src/components/WindowSideBar.js

@@ -13,12 +13,13 @@ export class WindowSideBar extends Component {
    */
   render() {
     const {
-      direction, t, windowId, sideBarOpen,
+      classes, direction, t, windowId, sideBarOpen,
     } = this.props;
 
     return (
       <Drawer
         variant="persistent"
+        className={classes.drawer}
         sx={theme => ({
           flexShrink: 0,
           height: '100%',
@@ -48,12 +49,14 @@ export class WindowSideBar extends Component {
 }
 
 WindowSideBar.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   direction: PropTypes.string.isRequired,
   sideBarOpen: PropTypes.bool,
   t: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
 };
 
 WindowSideBar.defaultProps = {
+  classes: {},
   sideBarOpen: false,
 };

src/components/WindowTopMenuButton.js

@@ -49,7 +49,7 @@ export class WindowTopMenuButton extends Component {
    */
   render() {
     const {
-      t, windowId,
+      classes, t, windowId,
     } = this.props;
     const { open, anchorEl } = this.state;
     const menuId = `window-menu_${windowId}`;
@@ -59,6 +59,7 @@ export class WindowTopMenuButton extends Component {
           aria-haspopup="true"
           aria-label={t('windowMenu')}
           aria-owns={open ? menuId : undefined}
+          className={open ? classes.ctrlBtnSelected : undefined}
           sx={{
             margin: 1,
             ...(open && {
@@ -82,10 +83,12 @@ export class WindowTopMenuButton extends Component {
 }
 
 WindowTopMenuButton.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   t: PropTypes.func,
   windowId: PropTypes.string.isRequired,
 };
 
 WindowTopMenuButton.defaultProps = {
+  classes: {},
   t: key => key,
 };

src/components/WorkspaceElasticWindow.js

@@ -19,6 +19,7 @@ class WorkspaceElasticWindow extends Component {
    */
   render() {
     const {
+      classes,
       companionWindowDimensions,
       focused,
       focusWindow,
@@ -33,6 +34,7 @@ class WorkspaceElasticWindow extends Component {
     return (
       <StyledRnd
         focused={focused}
+        className={focused ? classes.focused : undefined}
         key={`${layout.windowId}-${workspace.id}`}
         size={{
           height: layout.height + companionWindowDimensions.height,
@@ -67,6 +69,7 @@ class WorkspaceElasticWindow extends Component {
 }
 
 WorkspaceElasticWindow.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   companionWindowDimensions: PropTypes.shape({
     height: PropTypes.number,
     width: PropTypes.number,
@@ -86,6 +89,7 @@ WorkspaceElasticWindow.propTypes = {
 };
 
 WorkspaceElasticWindow.defaultProps = {
+  classes: {},
   companionWindowDimensions: { height: 0, width: 0 },
   focused: false,
   focusWindow: () => {},

src/components/ZoomControls.js

@@ -61,10 +61,10 @@ export class ZoomControls extends Component {
    * @returns {Box | null}
    */
   renderDivider() {
-    const { displayDivider } = this.props;
+    const { classes, displayDivider } = this.props;
 
     if (displayDivider) {
-      return <Box component="span" sx={dividerStyle} />;
+      return <Box component="span" sx={dividerStyle} className={classes?.divider} />;
     }
 
     return null;
@@ -103,6 +103,7 @@ export class ZoomControls extends Component {
 }
 
 ZoomControls.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
   displayDivider: PropTypes.bool,
   showZoomControls: PropTypes.bool,
   t: PropTypes.func,
@@ -117,6 +118,7 @@ ZoomControls.propTypes = {
 };
 
 ZoomControls.defaultProps = {
+  classes: {},
   displayDivider: true,
   showZoomControls: false,
   t: key => key,