Bump to mui v6.0.0

package.json

@@ -34,8 +34,8 @@
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.10.17",
-    "@mui/system": "^5.14.4",
+    "@mui/material": "^6.0.0",
+    "@mui/system": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@node-oauth/express-oauth-server": "^4.0.0",
     "@oclif/core": "^4.0.0",

packages/app-core/package.json

@@ -43,8 +43,8 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@jbrowse/product-core": "^2.14.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.10.17",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
     "react-error-boundary": "^4.0.3"
   },

packages/core/BaseFeatureWidget/BaseFeatureDetail/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import {
   Accordion,
@@ -45,7 +45,7 @@ const useStyles = makeStyles()(theme => ({
     display: 'block',
     padding: theme.spacing(1),
   },
-  expandIcon: {
+  icon: {
     color: theme.palette.tertiary.contrastText || '#fff',
   },
 }))
@@ -56,23 +56,9 @@ export function BaseCard({
   defaultExpanded = true,
 }: BaseCardProps) {
   const { classes } = useStyles()
-  const [expanded, setExpanded] = useState(defaultExpanded)
   return (
-    <Accordion
-      expanded={expanded}
-      onChange={() => {
-        setExpanded(s => !s)
-      }}
-      slotProps={{
-        transition: {
-          unmountOnExit: true,
-          timeout: 150,
-        },
-      }}
-    >
-      <AccordionSummary
-        expandIcon={<ExpandMore className={classes.expandIcon} />}
-      >
+    <Accordion defaultExpanded={defaultExpanded}>
+      <AccordionSummary expandIcon={<ExpandMore className={classes.icon} />}>
         <Typography variant="button">{title}</Typography>
       </AccordionSummary>
       <AccordionDetails className={classes.expansionPanelDetails}>

packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap

@@ -3,56 +3,61 @@
 exports[`open up a widget 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded css-siucz7-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1  MuiAccordion-root MuiAccordion-rounded Mui-expanded  css-fgq1ej-MuiPaper-root-MuiAccordion-root"
+    style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
   >
-    <div
-      aria-expanded="true"
-      class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
-      role="button"
-      tabindex="0"
+    <h3
+      class="MuiAccordion-heading  css-rolk5j-MuiAccordion-heading"
     >
       <div
-        class="MuiAccordionSummary-content Mui-expanded css-1rhnrrr-MuiAccordionSummary-content"
-      >
-        <span
-          class="MuiTypography-root MuiTypography-button css-6ux8zw-MuiTypography-root"
-        />
-      </div>
-      <div
-        class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
+        aria-expanded="true"
+        class="MuiButtonBase-root  MuiAccordionSummary-root Mui-expanded  css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
+        role="button"
+        tabindex="0"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kbgf2m-MuiSvgIcon-root-expandIcon"
-          data-testid="ExpandMoreIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
+        <div
+          class="MuiAccordionSummary-content Mui-expanded  css-1rhnrrr-MuiAccordionSummary-content"
         >
-          <path
-            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+          <span
+            class="MuiTypography-root MuiTypography-button  css-xin9dq-MuiTypography-root"
           />
-        </svg>
+        </div>
+        <div
+          class="MuiAccordionSummary-expandIconWrapper Mui-expanded  css-yw020d-MuiAccordionSummary-expandIconWrapper"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-1u842hp-MuiSvgIcon-root-icon"
+            data-testid="ExpandMoreIcon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            />
+          </svg>
+        </div>
       </div>
-    </div>
+    </h3>
     <div
-      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-pwcg7p-MuiCollapse-root"
+      class="MuiCollapse-root MuiCollapse-vertical  MuiCollapse-entered  css-wz2cs5-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical  css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical  css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
-            class="MuiAccordion-region"
+            class="MuiAccordion-region "
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
+              class="MuiAccordionDetails-root  css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
             >
               <p
-                class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1  css-1ptewxf-MuiTypography-root"
               >
                 Core details
               </p>
@@ -87,10 +92,10 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <hr
-                class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
+                class="MuiDivider-root MuiDivider-fullWidth  css-9mgopn-MuiDivider-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1  css-1ptewxf-MuiTypography-root"
               >
                 Attributes
               </p>
@@ -115,27 +120,24 @@ exports[`open up a widget 1`] = `
                 class="css-57ilie-container"
               >
                 <div
-                  class="MuiFormControl-root MuiFormControl-marginDense css-m7qnnf-MuiFormControl-root-formControl"
+                  class="MuiFormControl-root MuiFormControl-marginDense  css-1pquc22-MuiFormControl-root-formControl"
                 >
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-1cpxz0y-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary   MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary  css-qy5lo8-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     Show feature sequence
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
+                  class="MuiButtonBase-root  MuiIconButton-root MuiIconButton-sizeSmall  css-16y463b-MuiButtonBase-root-MuiIconButton-root"
                   tabindex="0"
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium  css-l9ansn-MuiSvgIcon-root"
                     data-testid="HelpIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -144,9 +146,6 @@ exports[`open up a widget 1`] = `
                       d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"
                     />
                   </svg>
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
                 </button>
               </div>
             </div>

packages/core/data_adapters/BaseAdapter.test.ts

@@ -4,6 +4,7 @@ import { ObservableCreate } from '../util/rxjs'
 import SimpleFeature, { Feature } from '../util/simpleFeature'
 import { Region } from '../util/types'
 import { ConfigurationSchema } from '../configuration/configurationSchema'
+import { firstValueFrom } from 'rxjs'
 
 describe('base data adapter', () => {
   it('properly propagates errors in feature fetching', async () => {
@@ -27,10 +28,11 @@ describe('base data adapter', () => {
       start: 0,
       end: 20000,
     })
-    const featuresArray = features.pipe(toArray()).toPromise()
-
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    expect(featuresArray).rejects.toThrow(/something blew up/)
+    try {
+      await firstValueFrom(features.pipe(toArray()))
+    } catch (e) {
+      expect(`${e}`).toMatch(/something blew up/)
+    }
   })
 
   it('retrieves features', async () => {
@@ -64,7 +66,7 @@ describe('base data adapter', () => {
       start: 0,
       end: 20000,
     })
-    const featuresArray = await features.pipe(toArray()).toPromise()
+    const featuresArray = await firstValueFrom(features.pipe(toArray()))
     expect(featuresArray).toMatchSnapshot()
 
     const features2 = adapter.getFeatures({
@@ -73,7 +75,7 @@ describe('base data adapter', () => {
       start: 0,
       end: 20000,
     })
-    const featuresArray2 = await features2.pipe(toArray()).toPromise()
+    const featuresArray2 = await firstValueFrom(features2.pipe(toArray()))
     expect(featuresArray2).toMatchSnapshot()
   })
 })

packages/core/data_adapters/BaseAdapter/BaseAdapter.ts

@@ -32,7 +32,8 @@ export abstract class BaseAdapter {
 
   /**
    * Same as `readConfObject(this.config, arg)`.
-   * @deprecated Does not offer the same TS type checking as `readConfObject`, consider using that instead.
+   * Note: Does not offer the same TS type checking as `readConfObject`,
+   * consider using that instead.
    */
   getConf(arg: string | string[]) {
     return readConfObject(this.config, arg)

packages/core/package.json

@@ -34,7 +34,7 @@
     "@gmod/abortable-promise-cache": "^2.0.0",
     "@gmod/bgzf-filehandle": "^1.4.3",
     "@gmod/http-range-fetcher": "^3.0.4",
-    "@mui/icons-material": "^5.0.1",
+    "@mui/icons-material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@types/clone": "^2.0.0",
     "canvas-sequencer": "^3.1.0",
@@ -60,7 +60,7 @@
     "svg-path-generator": "^1.1.0"
   },
   "peerDependencies": {
-    "@mui/material": "^5.0.0",
+    "@mui/material": "^6.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",

packages/core/pluggableElementTypes/renderers/RpcRenderedSvgGroup.tsx

@@ -69,6 +69,7 @@ const OldHydrate = observer(function OldHydrate(props: Props) {
     function doHydrate() {
       if (domNode && html) {
         if (domNode.innerHTML) {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           unmountComponentAtNode(domNode)
         }
 
@@ -80,13 +81,15 @@ const OldHydrate = observer(function OldHydrate(props: Props) {
         // hydration for when we have some free time. helps keep the
         // framerate up.
         rIC(() => {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           hydrate(<RenderingComponent {...props} />, domNode)
         })
       }
     }
     doHydrate()
     return () => {
       if (domNode) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode)
       }
     }

packages/core/pluggableElementTypes/renderers/ServerSideRenderedContent.tsx

@@ -82,10 +82,12 @@ const OldHydrate = observer(function ({
     const domNode = ref.current
     function doHydrate() {
       if (domNode) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode)
         domNode.innerHTML = html
 
         rIC(() => {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           hydrate(
             <ThemeProvider theme={jbrowseTheme}>
               <RenderingComponent {...rest} />
@@ -100,6 +102,7 @@ const OldHydrate = observer(function ({
 
     return () => {
       if (domNode) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode)
       }
     }

packages/core/ui/theme.ts

@@ -267,8 +267,11 @@ export function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions {
       MuiAccordion: {
         defaultProps: {
           disableGutters: true,
-          TransitionProps: {
-            timeout: 150,
+          slotProps: {
+            transition: {
+              timeout: 150,
+              unmountOnExit: true,
+            },
           },
         },
       },

packages/core/util/aborting.ts

@@ -57,7 +57,7 @@ export function makeAbortError() {
 
 export function observeAbortSignal(signal?: AbortSignal): Observable<Event> {
   if (!signal) {
-    return Observable.create()
+    return new Observable()
   }
   return fromEvent(signal, 'abort')
 }

packages/core/util/index.ts

@@ -1456,6 +1456,7 @@ export function renderToStaticMarkup(
     if (createRootFn) {
       createRootFn(div).render(node)
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       render(node, div)
     }
   })

packages/core/util/rxjs.ts

@@ -11,17 +11,15 @@ export function ObservableCreate<T>(
   func: (arg: Observer<T>) => void | Promise<void>,
   signal?: AbortSignal,
 ): Observable<T> {
-  return Observable.create((observer: Observer<T>) => {
+  return new Observable((observer: Observer<T>) => {
     try {
       const ret = func(observer)
-      // catch async errors
       if (ret?.catch) {
         ret.catch((error: unknown) => {
           observer.error(error)
         })
       }
     } catch (error) {
-      // catch sync errors
       observer.error(error)
     }
   }).pipe(takeUntil(observeAbortSignal(signal)))

packages/embedded-core/package.json

@@ -44,8 +44,8 @@
     "@babel/runtime": "^7.16.3",
     "@jbrowse/core": "^2.14.0",
     "@jbrowse/product-core": "^2.14.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.10.17",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
     "react-error-boundary": "^4.0.3"
   },

packages/product-core/package.json

@@ -44,8 +44,8 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@jbrowse/core": "^2.14.0",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.10.17",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
     "librpc-web-mod": "^1.0.0",
     "react-error-boundary": "^4.0.3",