@vitessce/vit-s 3.5.12 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.5.12",
+  "version": "3.6.0",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,8 +16,6 @@
     "dist-tsc"
   ],
   "dependencies": {
-    "@material-ui/core": "~4.12.3",
-    "@material-ui/icons": "~4.11.2",
     "@tanstack/react-query": "^4.29.12",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
@@ -30,25 +28,27 @@
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
     "react-error-boundary": "^5.0.0",
-    "@vitessce/abstract": "3.5.12",
-    "@vitessce/constants-internal": "3.5.12",
-    "@vitessce/plugins": "3.5.12",
-    "@vitessce/schemas": "3.5.12",
-    "@vitessce/utils": "3.5.12",
-    "@vitessce/sets-utils": "3.5.12",
-    "@vitessce/config": "3.5.12",
-    "@vitessce/globals": "3.5.12"
+    "@vitessce/styles": "3.6.0",
+    "@vitessce/abstract": "3.6.0",
+    "@vitessce/constants-internal": "3.6.0",
+    "@vitessce/plugins": "3.6.0",
+    "@vitessce/schemas": "3.6.0",
+    "@vitessce/utils": "3.6.0",
+    "@vitessce/sets-utils": "3.6.0",
+    "@vitessce/config": "3.6.0",
+    "@vitessce/globals": "3.6.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "react": "^18.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.32.2",
-    "@vitessce/types": "3.5.12"
+    "react-dom": "^18.0.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4",
+    "@vitessce/types": "3.6.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",

package/src/DebugWindow.js

@@ -3,7 +3,7 @@ import { useStyles } from './shared-warning-styles.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
 
 export function DebugWindow({ debugErrors }) {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={VITESSCE_CONTAINER}>
       <div className={clsx(classes.warningLayout, classes.containerFluid)}>

package/src/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { makeStyles, CircularProgress } from '@material-ui/core';
+import { makeStyles, CircularProgress } from '@vitessce/styles';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   loadingIndicatorBackdrop: {
     position: 'absolute',
     top: '0',
@@ -30,7 +30,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 export default function LoadingIndicator() {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={classes.loadingIndicatorBackdrop}>
       <div className={classes.loadingIndicatorContainer} role="status" aria-live="polite">

package/src/TitleInfo.js

@@ -1,21 +1,20 @@
 import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
-import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
-import {
+import { makeStyles, MenuItem, IconButton, Link,
   CloudDownload as CloudDownloadIcon,
   ArrowDropDown as ArrowDropDownIcon,
   ArrowDropUp as ArrowDropUpIcon,
   Settings as SettingsIcon,
   Close as CloseIcon,
   Help as HelpIcon,
-} from '@material-ui/icons';
+} from '@vitessce/styles';
 
 import { TOOLTIP_ANCESTOR } from './classNames.js';
 import LoadingIndicator from './LoadingIndicator.js';
 import { PopperMenu } from './shared-mui/components.js';
 import { useTitleStyles } from './title-styles.js';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   iconButton: {
     border: 'none',
     marginLeft: 0,
@@ -27,7 +26,7 @@ const useStyles = makeStyles(theme => ({
     '&:hover': {
       backgroundColor: theme.palette.primaryBackgroundLight,
     },
-    '&:first-child': {
+    '&:first-of-type': {
       marginLeft: '0.25em',
     },
     '&:last-child': {
@@ -69,7 +68,7 @@ function SettingsIconWithArrow({ open }) {
 function PlotOptions(props) {
   const { options } = props;
   const [open, setOpen] = useState(false);
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const buttonIcon = useMemo(() => (<SettingsIconWithArrow open={open} />), [open]);
   return (options ? (
@@ -98,7 +97,7 @@ function CloudDownloadIconWithArrow({ open }) {
 function DownloadOptions(props) {
   const { urls } = props;
   const [open, setOpen] = useState(false);
-  const classes = useStyles();
+  const { classes } = useStyles();
   const buttonIcon = useMemo(() => (<CloudDownloadIconWithArrow open={open} />), [open]);
   return (urls && urls.length ? (
     <PopperMenu
@@ -123,7 +122,7 @@ function DownloadOptions(props) {
 function HelpButton(props) {
   const { helpText } = props;
   const [open, setOpen] = useState(false);
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <PopperMenu
       open={open}
@@ -142,7 +141,7 @@ function HelpButton(props) {
 
 function ClosePaneButton(props) {
   const { removeGridComponent } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <IconButton
       onClick={removeGridComponent}
@@ -163,7 +162,7 @@ export function TitleInfo(props) {
     helpText, withPadding = true,
   } = props;
 
-  const classes = useTitleStyles();
+  const { classes } = useTitleStyles();
 
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.

package/src/VitS.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import {
   ThemeProvider,
-  StylesProvider,
-} from '@material-ui/core';
+  CacheProvider,
+  createCache,
+} from '@vitessce/styles';
 import {
   QueryClient,
   QueryClientProvider,
@@ -30,7 +31,6 @@ import {
   logConfig,
 } from './view-config-utils.js';
 import { createLoaders } from './vitessce-grid-utils.js';
-import { createGenerateClassName } from './mui-utils.js';
 import { AsyncFunctionsContext } from './contexts.js';
 
 
@@ -59,6 +59,8 @@ import { AsyncFunctionsContext } from './contexts.js';
  * @param {null|string} props.uid A unique identifier for this Vitessce instance,
  * for the purpose of avoiding CSS autogenerated class name conflicts. Must be valid as part
  * of a CSS class name string.
+ * @param {undefined|Node} props.styleContainer The DOM node for insertion of styles,
+ * passed to Emotion's createCache.container. Useful when Vitessce is in the Shadow DOM.
  * @param {boolean} props.remountOnUidChange Whether to remount the coordination provider
  * upon changes to config.uid. By default, true.
  * @param {array} props.viewTypes Plugin view types.
@@ -85,6 +87,7 @@ export function VitS(props) {
     validateOnConfigChange = false,
     isBounded = false,
     uid = null,
+    styleContainer,
     remountOnUidChange = true,
     viewTypes: viewTypesProp,
     fileTypes: fileTypesProp,
@@ -110,7 +113,6 @@ export function VitS(props) {
     () => (coordinationTypesProp || []),
     [coordinationTypesProp],
   );
-  const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
 
   // Set error handling-related globals.
   useLayoutEffect(() => {
@@ -221,6 +223,12 @@ export function VitS(props) {
     [asyncFunctionsProp, queryClient],
   );
 
+  const muiCache = useMemo(() => createCache({
+    key: uid || 'vit',
+    prepend: true,
+    container: styleContainer,
+  }), [uid, styleContainer]);
+
   // Emit the upgraded/initialized view config
   // to onConfigChange if necessary.
   useEffect(() => {
@@ -252,20 +260,20 @@ export function VitS(props) {
   // so that when the child throws errors the parent can catch.
   if (debugMode && debugErrors.length > 0) {
     return (
-      <StylesProvider generateClassName={generateClassName}>
+      <CacheProvider value={muiCache}>
         <ThemeProvider theme={muiTheme[theme]}>
           <DebugWindow debugErrors={debugErrors} />
         </ThemeProvider>
-      </StylesProvider>
+      </CacheProvider>
     );
   }
   return success ? (
-    <StylesProvider generateClassName={generateClassName}>
+    <CacheProvider value={muiCache}>
       <ThemeProvider theme={muiTheme[theme]}>
         <QueryClientProvider client={queryClient}>
           <ViewConfigProvider
             createStore={createViewConfigStoreClosure}
-            {...(remountOnUidChange ? ({ key: configKey }) : {})}
+            key={(remountOnUidChange ? configKey : undefined)}
           >
             <AuxiliaryProvider createStore={createAuxiliaryStore}>
               <AsyncFunctionsContext.Provider value={asyncFunctions}>
@@ -297,12 +305,12 @@ export function VitS(props) {
           </ViewConfigProvider>
         </QueryClientProvider>
       </ThemeProvider>
-    </StylesProvider>
+    </CacheProvider>
   ) : (
-    <StylesProvider generateClassName={generateClassName}>
+    <CacheProvider value={muiCache}>
       <ThemeProvider theme={muiTheme[theme]}>
         <Warning {...configOrWarning} />
       </ThemeProvider>
-    </StylesProvider>
+    </CacheProvider>
   );
 }

package/src/VitessceGrid.js

@@ -19,7 +19,10 @@ import {
 import {
   useClosestVitessceContainerSize,
 } from './hooks.js';
-import { useVitessceContainerStyles } from './shared-mui/container.js';
+import {
+  useVitessceContainerStyles,
+  GridLayoutGlobalStyles,
+} from './shared-mui/container.js';
 import { useTitleStyles } from './title-styles.js';
 import { getAltText } from './generate-alt-text.js';
 
@@ -61,8 +64,8 @@ export default function VitessceGrid(props) {
 
   const [componentWidth] = useClosestVitessceContainerSize(containerRef);
 
-  const classes = useVitessceContainerStyles();
-  const titleClasses = useTitleStyles();
+  const { classes } = useVitessceContainerStyles();
+  const { classes: titleClasses } = useTitleStyles();
 
   const altText = useMemo(() => getAltText(config), [configKey]);
 
@@ -113,6 +116,7 @@ export default function VitessceGrid(props) {
       role="group"
       aria-label={altText}
     >
+      <GridLayoutGlobalStyles classes={classes} />
       {layout ? (
         <VitessceGridLayout
           pageMode={pageMode}

package/src/VitessceGrid.test.jsx

@@ -1,8 +1,7 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react';
-
 import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
 import { PluginViewType } from '@vitessce/plugins';
 import VitessceGrid from './VitessceGrid.js';
 import {
@@ -10,10 +9,6 @@ import {
   AuxiliaryProvider, createAuxiliaryStore,
 } from './state/hooks.js';
 
-afterEach(() => {
-  cleanup();
-});
-
 describe('VitessceGrid.js', () => {
   describe('<VitessceGrid />', () => {
     it('renders', async () => {

package/src/Warning.js

@@ -8,7 +8,7 @@ export function Warning(props) {
     preformatted,
     unformatted,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={VITESSCE_CONTAINER}>
       <div className={clsx(classes.warningLayout, classes.containerFluid)}>

package/src/mui-utils.js

@@ -23,6 +23,8 @@ const stateClasses = [
 
 const defaultPrefix = 'vit-';
 
+// TODO: We are no longer using this; is it still needed?
+// Reference: https://mui.com/material-ui/experimental-api/classname-generator/
 export function createGenerateClassName(customPrefix) {
   return (rule, styleSheet) => {
     const {

package/src/shared-mui/components.js

@@ -7,11 +7,11 @@ import {
   MenuList,
   ClickAwayListener,
   Fade,
-} from '@material-ui/core';
+} from '@vitessce/styles';
 import clsx from 'clsx';
 import { useVitessceContainer } from '../hooks.js';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   paper: {
     maxHeight: 200,
     overflow: 'auto',
@@ -33,9 +33,10 @@ export function PopperMenu(props) {
     placement = 'bottom-end',
     withPaper = true,
     containerClassName,
+    paperClassName,
     'aria-label': ariaLabel,
   } = props;
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const anchorRef = useRef();
 
@@ -75,11 +76,13 @@ export function PopperMenu(props) {
         {({ TransitionProps }) => (
           <ClickAwayListener onClickAway={handleClose}>
             <Fade {...TransitionProps} timeout={100}>
-              {withPaper ? (
-                <Paper elevation={4} className={classes.paper}>
-                  <MenuList>{children}</MenuList>
-                </Paper>
-              ) : children}
+              <div>
+                {withPaper ? (
+                  <Paper elevation={16} className={clsx(classes.paper, paperClassName)}>
+                    <MenuList>{children}</MenuList>
+                  </Paper>
+                ) : children}
+              </div>
             </Fade>
           </ClickAwayListener>
         )}