Bugfix/ab#1111 sidebar lists do not expand / scroll with many items

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.0.6-0](https://github.com/starwit/react-image-annotate/compare/5.0.5...5.0.6-0) (2024-03-27)
+
 ### [5.0.5](https://github.com/starwit/react-image-annotate/compare/5.0.4...5.0.5) (2024-03-21)
 
 ### [5.0.4](https://github.com/starwit/react-image-annotate/compare/5.0.2-1...5.0.4) (2024-03-20)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwit/react-image-annotate",
-  "version": "5.0.5",
+  "version": "5.0.6-0",
   "private": false,
   "type": "module",
   "files": [

src/ClassSelectionMenu/index.jsx

@@ -80,6 +80,7 @@ export const ClassSelectionMenu = ({
         subTitle=""
         icon={<BallotIcon style={{color: muiColors.grey[700]}} />}
         expandedByDefault
+        noScroll={true}
       >
         {regionClsList.map((label, index) => (
           <LabelContainer

src/HistorySidebarBox/index.jsx

@@ -1,7 +1,7 @@
 // @flow
 
-import React, {memo} from "react"
-import {createTheme, styled, ThemeProvider} from "@mui/material/styles"
+import React, { memo } from "react"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import HistoryIcon from "@mui/icons-material/History"
 import List from "@mui/material/List"
@@ -11,9 +11,9 @@ import IconButton from "@mui/material/IconButton"
 import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction"
 import UndoIcon from "@mui/icons-material/Undo"
 import moment from "moment"
-import {grey} from "@mui/material/colors"
+import { grey } from "@mui/material/colors"
 import isEqual from "lodash/isEqual"
-import {useTranslation} from "react-i18next"
+import { useTranslation } from "react-i18next"
 
 const theme = createTheme()
 const EmptyTextDiv = styled('div')(() => ({
@@ -24,28 +24,29 @@ const EmptyTextDiv = styled('div')(() => ({
   padding: 20,
 }))
 
-const listItemTextStyle = {paddingLeft: 16}
+const listItemTextStyle = { paddingLeft: 16 }
 
 export const HistorySidebarBox = ({
   history,
   onRestoreHistory,
 }) => {
 
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <ThemeProvider theme={theme}>
       <SidebarBoxContainer
         title={t("menu.history")}
-        icon={<HistoryIcon style={{color: grey[700]}} />}
+        icon={<HistoryIcon style={{ color: grey[700] }} />}
         expandedByDefault
+        noScroll={true}
       >
         <List>
           {history.length === 0 && (
             <EmptyTextDiv>{t("no.history")}</EmptyTextDiv>
           )}
-          {history.map(({name, time}, i) => (
-            <ListItem button dense key={i}>
+          {history.map(({ name, time }, i) => (
+            <ListItem button dense key={i} >
               <ListItemText
                 style={listItemTextStyle}
                 primary={name}

src/RegionSelectorSidebarBox/index.jsx

@@ -180,6 +180,7 @@ export const RegionSelectorSidebarBox = ({
         subTitle=""
         icon={<RegionIcon style={{color: grey[700]}} />}
         expandedByDefault
+        noScroll={true}
       >
         <ContainerDiv>
           <MemoRowHeader />

src/SidebarBoxContainer/index.jsx

@@ -10,12 +10,12 @@ export const SidebarBoxContainer = ({
   title,
   subTitle,
   children,
-  noScroll = false,
+  noScroll,
   expandedByDefault = false,
 }) => {
   return (
     <ThemeProvider theme={theme}>
-      <SidebarBox icon={icon} title={title}>
+      <SidebarBox icon={icon} title={title} noScroll={noScroll}>
         {children}
       </SidebarBox>
     </ThemeProvider>

src/workspace/SidebarBox/index.jsx

@@ -1,7 +1,6 @@
 // @flow
 
 import React, { useState, memo, useCallback } from "react"
-import Paper from "@mui/material/Paper"
 import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import ExpandIcon from "@mui/icons-material/ExpandMore"
 import IconButton from "@mui/material/IconButton"
@@ -37,7 +36,7 @@ export const SidebarBox = ({
   title,
   subTitle,
   children,
-  noScroll = false,
+  noScroll,
   expandedByDefault,
 }) => {
   const content = (
@@ -88,7 +87,7 @@ export const SidebarBox = ({
           <Collapse in={expanded} >
               <div
                 className="panel"
-                style={{ display: "block", overflow: "hidden", height: 200 }}
+                style={{ display: "block", overflow: "hidden", height: 300 }}
               >
                 {content}
               </div>

src/workspace/SidebarBox/styles.js

@@ -50,9 +50,5 @@ export default {
   expandedContent: {
     maxHeight: 300,
     overflowY: "auto",
-    "&.noScroll": {
-      overflowY: "visible",
-      overflow: "visible",
-    },
   },
 }