From 2250f69ad57215474a6f123b89b865397be4110b Mon Sep 17 00:00:00 2001
From: Chris Beer <chris@cbeer.info>
Date: Tue, 19 Dec 2023 10:03:24 -0800
Subject: [PATCH] Make sure the CompanionArea styled root receives props
necessary for applying appropriate styles
---
src/components/CompanionArea.js | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index 79e1a7ace..b73350d64 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -4,16 +4,17 @@ import { styled } from '@mui/material/styles';
import Slide from '@mui/material/Slide';
import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp';
import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp';
+import classNames from 'classnames';
import CompanionWindowFactory from '../containers/CompanionWindowFactory';
import MiradorMenuButton from '../containers/MiradorMenuButton';
import ns from '../config/css-ns';
-const Root = styled('div', { name: 'CompanionArea', slot: 'root' })(({ position, theme }) => ({
+const Root = styled('div', { name: 'CompanionArea', slot: 'root' })(({ ownerState, theme }) => ({
display: 'flex',
minHeight: 0,
position: 'relative',
zIndex: theme.zIndex.appBar - 2,
- ...((position === 'bottom' || position === 'far-bottom') && {
+ ...((ownerState.position === 'bottom' || ownerState.position === 'far-bottom') && {
flexDirection: 'column',
width: '100%',
}),
@@ -89,12 +90,13 @@ export class CompanionArea extends Component {
/** */
render() {
const {
+ className,
companionWindowIds, companionAreaOpen, setCompanionAreaOpen,
position, sideBarOpen, t, windowId,
} = this.props;
- const className = [this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' ');
+ const classes = classNames(this.areaLayoutClass(), ns(`companion-area-${position}`), className);
return (
- <Root className={className}>
+ <Root ownerState={this.props} className={classes}>
<Slide in={companionAreaOpen} direction={this.slideDirection()}>
<Container
ownerState={this.props}
@@ -125,6 +127,7 @@ export class CompanionArea extends Component {
CompanionArea.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
+ className: PropTypes.string,
companionAreaOpen: PropTypes.bool.isRequired,
companionWindowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
direction: PropTypes.string.isRequired,
@@ -137,6 +140,7 @@ CompanionArea.propTypes = {
CompanionArea.defaultProps = {
classes: {},
+ className: undefined,
setCompanionAreaOpen: () => {},
sideBarOpen: false,
};
--
GitLab