@jbrowse/plugin-config 1.7.10 → 2.0.1

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -22,13 +22,13 @@ import {
   Paper,
   SvgIcon,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material/Add'
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
 
 // locals
 import StringArrayEditor from './StringArrayEditor'
@@ -39,7 +39,6 @@ import JsonEditor from './JsonEditor'
 // adds ability to have html in helperText. note that FormHelperTextProps is
 // div because the default is p which does not like div children
 const MyTextField = props => {
-  // eslint-disable-next-line react/prop-types
   const { helperText } = props
   return (
     <TextField
@@ -79,14 +78,14 @@ const SvgCheckbox = () => (
   </SvgIcon>
 )
 
-const useMapEditorStyles = makeStyles(theme => ({
+const useMapEditorStyles = makeStyles()(theme => ({
   card: {
     marginTop: theme.spacing(1),
   },
 }))
 
 const StringArrayMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -155,7 +154,7 @@ const StringArrayMapEditor = observer(({ slot }) => {
 })
 
 const NumberMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -320,7 +319,7 @@ const valueComponents = {
   configRelationships: JsonEditor,
 }
 
-export const useSlotEditorStyles = makeStyles(theme => ({
+export const useSlotEditorStyles = makeStyles()(theme => ({
   paper: {
     display: 'flex',
     marginBottom: theme.spacing(2),
@@ -339,7 +338,7 @@ export const useSlotEditorStyles = makeStyles(theme => ({
 }))
 
 const SlotEditor = observer(({ slot, slotSchema }) => {
-  const classes = useSlotEditorStyles()
+  const { classes } = useSlotEditorStyles()
   const { type } = slot
   let ValueComponent = slot.isCallback ? CallbackEditor : valueComponents[type]
   if (!ValueComponent) {

package/src/ConfigurationEditorWidget/components/StringArrayEditor.tsx

@@ -10,10 +10,10 @@ import {
   List,
   ListItem,
   TextField,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
+import DeleteIcon from '@mui/icons-material/Delete'
 
 const StringArrayEditor = observer(
   ({

package/src/ConfigurationEditorWidget/components/{TypeSelector.js → TypeSelector.tsx}

@@ -1,13 +1,22 @@
-import MenuItem from '@material-ui/core/MenuItem'
-import Paper from '@material-ui/core/Paper'
-import TextField from '@material-ui/core/TextField'
-import { observer } from 'mobx-react'
 import React from 'react'
+import { MenuItem, Paper, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
 import { useSlotEditorStyles } from './SlotEditor'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 
 const TypeSelector = observer(
-  ({ typeNameChoices, slot, slotName, onChange }) => {
-    const classes = useSlotEditorStyles()
+  ({
+    typeNameChoices,
+    slot,
+    slotName,
+    onChange,
+  }: {
+    typeNameChoices: string[]
+    slot: AnyConfigurationModel
+    slotName: string
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  }) => {
+    const { classes } = useSlotEditorStyles()
     return (
       <Paper className={classes.paper}>
         <div className={classes.paperContent}>
@@ -15,7 +24,6 @@ const TypeSelector = observer(
             value={slot.type}
             label="Type"
             select
-            // error={filterError}
             helperText={`Type of ${slotName} to use`}
             fullWidth
             onChange={onChange}