@vitessce/vit-s 3.5.12 → 3.6.1

package/dist-tsc/state/hooks.js

@@ -1,23 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable max-len */
 /* eslint-disable react-refresh/only-export-components */
-import { useRef, useCallback, useMemo } from 'react';
-import create from 'zustand';
-import createContext from 'zustand/context';
-import shallow from 'zustand/shallow';
+import React, { useCallback, useRef, useMemo, createContext, useContext, } from 'react';
+import { create, useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import { subscribeWithSelector } from 'zustand/middleware';
 import { isMatch, cloneDeep } from 'lodash-es';
 import { CoordinationType } from '@vitessce/constants-internal';
 import { capitalize } from '@vitessce/utils';
 import { getCoordinationSpaceAndScopes } from '@vitessce/config';
 import { removeImageChannelInMetaCoordinationScopesHelper, addImageChannelInMetaCoordinationScopesHelper, } from './spatial-reducers.js';
-// Reference: https://github.com/pmndrs/zustand#react-context
-// Reference: https://github.com/pmndrs/zustand/blob/e47ea03/tests/context.test.tsx#L60
-const { Provider: ViewConfigProviderLocal, useStore: useViewConfigStoreLocal, useStoreApi: useViewConfigStoreApiLocal, } = createContext();
-export const ViewConfigProvider = ViewConfigProviderLocal;
-export const useViewConfigStore = useViewConfigStoreLocal;
-export const useViewConfigStoreApi = useViewConfigStoreApiLocal;
-const { Provider: AuxiliaryProviderLocal, useStore: useAuxiliaryStoreLocal, } = createContext();
-export const AuxiliaryProvider = AuxiliaryProviderLocal;
-export const useAuxiliaryStore = useAuxiliaryStoreLocal;
+// References for Zustand v3:
+// - https://github.com/pmndrs/zustand#react-context
+// - https://github.com/pmndrs/zustand/blob/e47ea03/tests/context.test.tsx#L60
+// References for Zustand v4:
+// - https://github.com/pmndrs/zustand/discussions/1180#discussioncomment-3354713
+// - https://zustand.docs.pmnd.rs/previous-versions/zustand-v3-create-context#migration
+const ViewConfigStoreContext = createContext(null);
+const AuxiliaryStoreContext = createContext(null);
+export function ViewConfigProvider(props) {
+    const { createStore, children, } = props;
+    // Reference: https://github.com/pmndrs/zustand/discussions/1180
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createStore();
+    }
+    return (_jsx(ViewConfigStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useViewConfigStoreApi() {
+    const store = useContext(ViewConfigStoreContext);
+    if (!store) {
+        throw new Error('Missing StoreProvider');
+    }
+    return store;
+}
+export function useViewConfigStore(selector) {
+    const store = useViewConfigStoreApi();
+    if (!store) {
+        throw new Error('Missing StoreProvider');
+    }
+    const slice = useStore(store, selector);
+    return slice;
+}
+export function useViewConfigStoreShallow(selector) {
+    return useViewConfigStore(useShallow(selector));
+}
+/* Begin auxiliary store things */
+export function AuxiliaryProvider(props) {
+    const { createStore, children, } = props;
+    // Reference: https://github.com/pmndrs/zustand/discussions/1180
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createStore();
+    }
+    return (_jsx(AuxiliaryStoreContext.Provider, { value: storeRef.current, children: children }));
+}
+export function useAuxiliaryStoreApi() {
+    const store = useContext(AuxiliaryStoreContext);
+    if (!store) {
+        throw new Error('Missing StoreProvider');
+    }
+    return store;
+}
+export function useAuxiliaryStore(selector) {
+    const store = useAuxiliaryStoreApi();
+    if (!store) {
+        throw new Error('Missing StoreProvider');
+    }
+    const slice = useStore(store, selector);
+    return slice;
+}
+export function useAuxiliaryStoreShallow(selector) {
+    return useAuxiliaryStore(useShallow(selector));
+}
+/* end auxiliary store things */
 /**
  * Get the "computed" coordinationScopes after accounting for
  * meta-coordination.
@@ -137,7 +193,7 @@ export function getParameterScopeBy(parameter, byType, typeScope, coordinationSc
  * - https://github.com/pmndrs/zustand#using-subscribe-with-selector
  * @returns {function} The useStore hook.
  */
-export const createViewConfigStore = (initialLoaders, initialConfig) => create(set => ({
+export const createViewConfigStore = (initialLoaders, initialConfig) => create()(subscribeWithSelector(set => ({
     // State:
     // The viewConfig is an object which must conform to the schema
     // found in src/schemas/config.schema.json.
@@ -309,13 +365,13 @@ export const createViewConfigStore = (initialLoaders, initialConfig) => create(s
             mostRecentConfigSource: 'internal',
         };
     }),
-}));
+})));
 /**
  * Hook for getting components' layout from the view config based on
  * matching all coordination scopes.
  * @returns {Object} The components' layout.
  */
-export const useComponentLayout = (component, scopes, coordinationScopes) => useViewConfigStore(state => state.viewConfig.layout.filter(l => l.component === component).filter(l => scopes.every(scope => l.coordinationScopes[scope]
+export const useComponentLayout = (component, scopes, coordinationScopes) => useViewConfigStoreShallow(state => state.viewConfig.layout.filter(l => l.component === component).filter(l => scopes.every(scope => l.coordinationScopes[scope]
     === coordinationScopes[scope])));
 /**
  * The useAuxiliaryStore hook is initialized via the zustand
@@ -405,7 +461,7 @@ const useGridSizeStore = create(set => ({
  * @returns {object} Object containing all coordination values.
  */
 export function useInitialCoordination(parameters, coordinationScopes) {
-    const values = useViewConfigStore((state) => {
+    const values = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.initialViewConfig;
         return Object.fromEntries(parameters.map((parameter) => {
             if (coordinationSpace && coordinationSpace[parameter]) {
@@ -414,7 +470,7 @@ export function useInitialCoordination(parameters, coordinationScopes) {
             }
             return [parameter, undefined];
         }));
-    }, shallow);
+    });
     return values;
 }
 /**
@@ -435,7 +491,7 @@ export function useInitialCoordination(parameters, coordinationScopes) {
  */
 export function useCoordination(parameters, coordinationScopes) {
     const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
-    const values = useViewConfigStore((state) => {
+    const values = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return Object.fromEntries(parameters.map((parameter) => {
             if (coordinationSpace) {
@@ -447,7 +503,7 @@ export function useCoordination(parameters, coordinationScopes) {
             }
             return [parameter, undefined];
         }));
-    }, shallow);
+    });
     const setters = useMemo(() => Object.fromEntries(parameters.map((parameter) => {
         const setterName = `set${capitalize(parameter)}`;
         const setterFunc = value => setCoordinationValue({
@@ -470,10 +526,10 @@ export function useMultiCoordinationScopesNonNull(parameter, coordinationScopes)
     const scopes = getParameterScope(parameter, coordinationScopes);
     // Return array of coordination scopes,
     // but filter out any whose value is null / falsey.
-    const parameterSpace = useViewConfigStore((state) => {
+    const parameterSpace = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return coordinationSpace?.[parameter];
-    }, shallow);
+    });
     const nonNullScopes = useMemo(() => {
         // Convert a single scope to an array of scopes to be consistent.
         const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
@@ -516,14 +572,14 @@ export function useMultiCoordinationScopesSecondary(parameter, byType, coordinat
 }
 export function useMultiCoordinationScopesSecondaryNonNull(parameter, byType, coordinationScopes, coordinationScopesBy) {
     const scopes = getParameterScope(byType, coordinationScopes);
-    const parameterSpace = useViewConfigStore((state) => {
+    const parameterSpace = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return coordinationSpace?.[parameter];
-    }, shallow);
-    const byTypeSpace = useViewConfigStore((state) => {
+    });
+    const byTypeSpace = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return coordinationSpace?.[byType];
-    }, shallow);
+    });
     return useMemo(() => {
         if (scopes && coordinationScopesBy?.[byType]?.[parameter]) {
             const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
@@ -580,7 +636,7 @@ export function useMultiCoordinationScopesSecondaryNonNull(parameter, byType, co
 export function useMultiCoordinationValues(parameter, coordinationScopes) {
     const scopes = getParameterScope(parameter, coordinationScopes);
     // Mapping from dataset coordination scope name to dataset uid
-    const vals = useViewConfigStore((state) => {
+    const vals = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         // Convert a single scope to an array of scopes to be consistent.
         const scopesArr = Array.isArray(scopes) ? scopes : [scopes];
@@ -592,7 +648,7 @@ export function useMultiCoordinationValues(parameter, coordinationScopes) {
             return [scope, undefined];
             // eslint-disable-next-line no-unused-vars
         }).filter(([k, v]) => v !== undefined));
-    }, shallow);
+    });
     return vals;
 }
 /**
@@ -619,10 +675,10 @@ export function useDatasetUids(coordinationScopes) {
  */
 export function useComplexCoordination(parameters, coordinationScopes, coordinationScopesBy, byType) {
     const setCoordinationValue = useViewConfigStore(state => state.setCoordinationValue);
-    const parameterSpaces = useViewConfigStore((state) => {
+    const parameterSpaces = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return parameters.map(parameter => coordinationSpace[parameter]);
-    }, shallow);
+    });
     const values = useMemo(() => {
         const typeScopes = getParameterScope(byType, coordinationScopes);
         if (typeScopes) {
@@ -683,10 +739,10 @@ export function useComplexCoordination(parameters, coordinationScopes, coordinat
  * @returns {object} The coordinationScopes after filling in with meta-coordinationScopes.
  */
 export function useCoordinationScopes(coordinationScopes) {
-    const metaSpace = useViewConfigStore((state) => {
+    const metaSpace = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return coordinationSpace?.[CoordinationType.META_COORDINATION_SCOPES];
-    }, shallow);
+    });
     const vals = useMemo(() => {
         const scopes = getScopes(coordinationScopes, metaSpace);
         // Prevent infinite loop, delete metaCoordinationScopes now that they are computed.
@@ -703,10 +759,10 @@ export function useCoordinationScopes(coordinationScopes) {
  * @returns {object} The coordinationScopesBy after filling in with meta-coordinationScopesBy.
  */
 export function useCoordinationScopesBy(coordinationScopes, coordinationScopesBy) {
-    const metaSpaceBy = useViewConfigStore((state) => {
+    const metaSpaceBy = useViewConfigStoreShallow((state) => {
         const { coordinationSpace } = state.viewConfig;
         return coordinationSpace?.[CoordinationType.META_COORDINATION_SCOPES_BY];
-    }, shallow);
+    });
     const vals = useMemo(() => {
         const scopesBy = getScopesBy(coordinationScopes, coordinationScopesBy, metaSpaceBy);
         return scopesBy;
@@ -846,7 +902,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
     const setCoordinationValue = useAuxiliaryStore(state => state.setCoordinationValue);
     const mappedCoordinationScopes = mapCoordinationScopes(coordinationScopes);
     const mappedParameters = mapParameters(parameters);
-    const values = useAuxiliaryStore((state) => {
+    const values = useAuxiliaryStoreShallow((state) => {
         const { auxiliaryStore } = state;
         return Object.fromEntries(mappedParameters.map((parameter) => {
             if (auxiliaryStore && auxiliaryStore[parameter]) {
@@ -855,7 +911,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
             }
             return [parameter, undefined];
         }));
-    }, shallow);
+    });
     const setters = useMemo(() => Object.fromEntries(mappedParameters.map((parameter) => {
         const setterName = `set${capitalize(parameter)}`;
         const setterFunc = value => setCoordinationValue({

package/dist-tsc/title-styles.d.ts

@@ -1,2 +1,10 @@
-export const useTitleStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+export const useTitleStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<never, string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=title-styles.d.ts.map

package/dist-tsc/title-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA,gHA2EI"}
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cA6BI,CAAF;;;kBAKE,eAGD;gBAAyB,WAAU;eAAsB,WAAU;EAsClE"}

package/dist-tsc/title-styles.js

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core';
-export const useTitleStyles = makeStyles(theme => ({
+import { makeStyles } from '@vitessce/styles';
+export const useTitleStyles = makeStyles()(theme => ({
     title: {
         color: theme.palette.primaryForeground,
         overflowX: 'hidden',

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts

@@ -1,8 +1,2 @@
 export function VitessceGridLayout(props: any): any;
-export namespace VitessceGridLayout {
-    namespace defaultProps {
-        let padding: number;
-        let margin: number;
-    }
-}
 //# sourceMappingURL=VitessceGridLayout.d.ts.map

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.js

@@ -15,7 +15,7 @@ class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     }
 }
 export function VitessceGridLayout(props) {
-    const { layout, viewTypes, coordinationTypes, fileTypes, stores, padding, margin: marginProp, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, pageMode, children, } = props;
+    const { layout, viewTypes, coordinationTypes, fileTypes, stores, padding = 10, margin: marginProp = 10, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, pageMode, children, } = props;
     const getComponent = useCallback((viewType) => {
         if (Array.isArray(viewTypes)) {
             const matchingViewType = viewTypes.find(v => v.name === viewType);
@@ -125,7 +125,3 @@ export function VitessceGridLayout(props) {
                     || ((window.innerHeight - 2 * padding - (maxRows - 1) * margin)
                         / maxRows), containerPadding: containerPadding, margin: margin, draggableHandle: draggableHandle, onLayoutChange: onLayoutChange, isBounded: isBounded, onResizeStart: saveCurrentLayouts, onDragStart: saveCurrentLayouts, onResize: onResize, onResizeStop: onResizeStop, children: layoutChildren })] }))));
 }
-VitessceGridLayout.defaultProps = {
-    padding: 10,
-    margin: 10,
-};

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
 import { VitessceGridLayout } from './VitessceGridLayout.js';
-afterEach(() => {
-    cleanup();
-});
 function FakeComponent(props) {
     const { text } = props;
     return _jsx("span", { children: text });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.5.12",
+  "version": "3.6.1",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,9 +16,7 @@
     "dist-tsc"
   ],
   "dependencies": {
-    "@material-ui/core": "~4.12.3",
-    "@material-ui/icons": "~4.11.2",
-    "@tanstack/react-query": "^4.29.12",
+    "@tanstack/react-query": "^5.80.2",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
@@ -27,28 +25,30 @@
     "lodash-es": "^4.17.21",
     "react-grid-layout-with-lodash": "^1.3.5",
     "uuid": "^9.0.0",
-    "zustand": "^3.5.10",
+    "zustand": "^5.0.4",
     "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.1",
+    "@vitessce/abstract": "3.6.1",
+    "@vitessce/constants-internal": "3.6.1",
+    "@vitessce/plugins": "3.6.1",
+    "@vitessce/schemas": "3.6.1",
+    "@vitessce/utils": "3.6.1",
+    "@vitessce/sets-utils": "3.6.1",
+    "@vitessce/config": "3.6.1",
+    "@vitessce/globals": "3.6.1"
   },
   "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.1"
   },
   "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/CallbackPublisher.js

@@ -44,6 +44,9 @@ export default function CallbackPublisher(props) {
   // to subscribe to view config changes.
   // Reference: https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes
   useEffect(() => viewConfigStoreApi.subscribe(
+    // The function to specify which part of the store
+    // we want to subscribe to.
+    state => state.viewConfig,
     // The function to run on each publish.
     (viewConfig) => {
       if (validateOnConfigChange && viewConfig) {
@@ -53,9 +56,7 @@ export default function CallbackPublisher(props) {
         onConfigChange(viewConfig);
       }
     },
-    // The function to specify which part of the store
-    // we want to subscribe to.
-    state => state.viewConfig,
+    // TODO: here, should we specify the "shallow" equality function?
   ), [onConfigChange, validateOnConfigChange, viewConfigStoreApi, pluginSpecificConfigSchema]);
 
   // Emit updates to the warning message.

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}