@vitessce/vit-s 3.5.12 → 3.6.0

package/dist-tsc/DebugWindow.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useStyles } from './shared-warning-styles.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
 export function DebugWindow({ debugErrors }) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx("div", { className: VITESSCE_CONTAINER, children: _jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: _jsx("div", { className: classes.row, children: _jsx("div", { className: classes.warningCard, children: debugErrors.map((error, index) => (_jsxs("div", { children: [index === 0 && (_jsxs("div", { children: [_jsxs("h1", { children: ["Error Type: ", error.name] }), Object.keys(error).map(key => key !== 'name'
                                         && key !== 'message' && (_jsxs("p", { children: [key.charAt(0).toUpperCase() + key.slice(1), ": ", error[key]] }, key)))] })), _jsxs("p", { children: ["Error: ", error.message] })] }, error.message || index))) }) }) }) }));
 }

package/dist-tsc/LoadingIndicator.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { makeStyles, CircularProgress } from '@material-ui/core';
-const useStyles = makeStyles(() => ({
+import { makeStyles, CircularProgress } from '@vitessce/styles';
+const useStyles = makeStyles()(() => ({
     loadingIndicatorBackdrop: {
         position: 'absolute',
         top: '0',
@@ -29,6 +29,6 @@ const useStyles = makeStyles(() => ({
     },
 }));
 export default function LoadingIndicator() {
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx("div", { className: classes.loadingIndicatorBackdrop, children: _jsxs("div", { className: classes.loadingIndicatorContainer, role: "status", "aria-live": "polite", children: [_jsx(CircularProgress, {}), _jsx("span", { className: classes.visuallyHidden, children: "Loading..." })] }) }));
 }

package/dist-tsc/TitleInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AA8JA,mDA6DC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AA6JA,mDA6DC"}

package/dist-tsc/TitleInfo.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
-import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
-import { CloudDownload as CloudDownloadIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Settings as SettingsIcon, Close as CloseIcon, Help as HelpIcon, } from '@material-ui/icons';
+import { makeStyles, MenuItem, IconButton, Link, CloudDownload as CloudDownloadIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Settings as SettingsIcon, Close as CloseIcon, Help as HelpIcon, } 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,
@@ -19,7 +18,7 @@ const useStyles = makeStyles(theme => ({
         '&:hover': {
             backgroundColor: theme.palette.primaryBackgroundLight,
         },
-        '&:first-child': {
+        '&:first-of-type': {
             marginLeft: '0.25em',
         },
         '&:last-child': {
@@ -54,7 +53,7 @@ function SettingsIconWithArrow({ open }) {
 function PlotOptions(props) {
     const { options } = props;
     const [open, setOpen] = useState(false);
-    const classes = useStyles();
+    const { classes } = useStyles();
     const buttonIcon = useMemo(() => (_jsx(SettingsIconWithArrow, { open: open })), [open]);
     return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: buttonIcon, buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open plot options menu", children: options })) : null);
 }
@@ -64,24 +63,24 @@ function CloudDownloadIconWithArrow({ open }) {
 function DownloadOptions(props) {
     const { urls } = props;
     const [open, setOpen] = useState(false);
-    const classes = useStyles();
+    const { classes } = useStyles();
     const buttonIcon = useMemo(() => (_jsx(CloudDownloadIconWithArrow, { open: open })), [open]);
     return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: buttonIcon, buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open download options menu", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, "aria-label": `Click to download ${name}`, children: _jsxs(Link, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
 }
 function HelpButton(props) {
     const { helpText } = props;
     const [open, setOpen] = useState(false);
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(HelpIcon, {}), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open help info", withPaper: false, children: _jsx("span", { className: classes.helpTextSpan, children: helpText }) }));
 }
 function ClosePaneButton(props) {
     const { removeGridComponent } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx(IconButton, { onClick: removeGridComponent, size: "small", className: classes.iconButton, title: "close", "aria-label": "Close panel button", children: _jsx(CloseIcon, {}) }));
 }
 export function TitleInfo(props) {
     const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, 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.
     _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {

package/dist-tsc/VitS.d.ts

@@ -23,6 +23,8 @@
  * @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.
@@ -46,6 +48,7 @@ export function VitS(props: {
     validateConfig: boolean;
     validateOnConfigChange: boolean;
     uid: null | string;
+    styleContainer: undefined | Node;
     remountOnUidChange: boolean;
     viewTypes: array;
     fileTypes: array;

package/dist-tsc/VitS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,4BAlCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGI,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eA2OA"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,4BApCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGW,cAAc,EAApC,SAAS,GAAC,IAAI;IAEC,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eAiPA"}

package/dist-tsc/VitS.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
-import { ThemeProvider, StylesProvider, } from '@material-ui/core';
+import { ThemeProvider, CacheProvider, createCache, } from '@vitessce/styles';
 import { QueryClient, QueryClientProvider, } from '@tanstack/react-query';
 import { isEqual } from 'lodash-es';
 import { buildConfigSchema, latestConfigSchema } from '@vitessce/schemas';
@@ -13,7 +13,6 @@ import { DebugWindow } from './DebugWindow.js';
 import CallbackPublisher from './CallbackPublisher.js';
 import { initialize, logConfig, } from './view-config-utils.js';
 import { createLoaders } from './vitessce-grid-utils.js';
-import { createGenerateClassName } from './mui-utils.js';
 import { AsyncFunctionsContext } from './contexts.js';
 /**
  * The Vitessce component.
@@ -40,6 +39,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.
@@ -53,14 +54,13 @@ import { AsyncFunctionsContext } from './contexts.js';
  * provided by the parent.
  */
 export function VitS(props) {
-    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, debugMode = DEFAULT_DEBUG_MODE, logLevel = DEFAULT_LOG_LEVEL, } = props;
+    const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, styleContainer, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, debugMode = DEFAULT_DEBUG_MODE, logLevel = DEFAULT_LOG_LEVEL, } = props;
     // eslint-disable-next-line no-unused-vars
     const [debugErrors, setDebugErrors] = useState([]);
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);
     const fileTypes = useMemo(() => (fileTypesProp || []), [fileTypesProp]);
     const jointFileTypes = useMemo(() => (jointFileTypesProp || []), [jointFileTypesProp]);
     const coordinationTypes = useMemo(() => (coordinationTypesProp || []), [coordinationTypesProp]);
-    const generateClassName = useMemo(() => createGenerateClassName(uid), [uid]);
     // Set error handling-related globals.
     useLayoutEffect(() => {
         setLogLevel(logLevel);
@@ -151,6 +151,11 @@ export function VitS(props) {
         asyncFunctionsProp?.map(p => ([p.functionType, p.asyncFunction]))
             || []),
     }), [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(() => {
@@ -173,7 +178,7 @@ export function VitS(props) {
     // Will probably need to move a lot to a child of VitS
     // so that when the child throws errors the parent can catch.
     if (debugMode && debugErrors.length > 0) {
-        return (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(DebugWindow, { debugErrors: debugErrors }) }) }));
+        return (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(DebugWindow, { debugErrors: debugErrors }) }) }));
     }
-    return success ? (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, ...(remountOnUidChange ? ({ key: configKey }) : {}), children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores, children: children }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }) }) }) })) : (_jsx(StylesProvider, { generateClassName: generateClassName, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
+    return success ? (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(ViewConfigProvider, { createStore: createViewConfigStoreClosure, children: _jsx(AuxiliaryProvider, { createStore: createAuxiliaryStore, children: _jsxs(AsyncFunctionsContext.Provider, { value: asyncFunctions, children: [_jsx(VitessceGrid, { pageMode: pageMode, success: success, configKey: configKey, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, config: configOrWarning, rowHeight: rowHeight, height: height, theme: theme, isBounded: isBounded, stores: stores, children: children }), _jsx(CallbackPublisher, { onWarn: onWarn, onConfigChange: onConfigChange, onLoaderChange: onLoaderChange, validateOnConfigChange: validateOnConfigChange, pluginSpecificConfigSchema: pluginSpecificConfigSchema })] }) }) }, (remountOnUidChange ? configKey : undefined)) }) }) })) : (_jsx(CacheProvider, { value: muiCache, children: _jsx(ThemeProvider, { theme: muiTheme[theme], children: _jsx(Warning, { ...configOrWarning }) }) }));
 }

package/dist-tsc/VitessceGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;GAYG;AACH,4CAVG;IAAsB,SAAS,EAAvB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACU,MAAM;IACE,SAAS,EAAjC,cAAc,EAAE;IACQ,SAAS,EAAjC,cAAc,EAAE;IACgB,iBAAiB,EAAjD,sBAAsB,EAAE;IACT,QAAQ,EAAvB,OAAO;CACjB,eAqGA"}
+{"version":3,"file":"VitessceGrid.d.ts","sourceRoot":"","sources":["../src/VitessceGrid.js"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;GAYG;AACH,4CAVG;IAAsB,SAAS,EAAvB,MAAM;IACQ,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,MAAM,EAApB,MAAM;IACU,MAAM;IACE,SAAS,EAAjC,cAAc,EAAE;IACQ,SAAS,EAAjC,cAAc,EAAE;IACgB,iBAAiB,EAAjD,sBAAsB,EAAE;IACT,QAAQ,EAAvB,OAAO;CACjB,eAsGA"}

package/dist-tsc/VitessceGrid.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useCallback, useMemo, } from 'react';
 import clsx from 'clsx';
 import { VITESSCE_CONTAINER } from './classNames.js';
@@ -6,7 +6,7 @@ import { VitessceGridLayout } from './vitessce-grid-layout/index.js';
 import { useRowHeight, createLoaders } from './vitessce-grid-utils.js';
 import { useViewConfigStoreApi, useSetViewConfig, useSetLoaders, useEmitGridResize, useRemoveComponent, useChangeLayout, useLayout, } from './state/hooks.js';
 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';
 const padding = 10;
@@ -29,8 +29,8 @@ export default function VitessceGrid(props) {
     const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
     const onResize = useEmitGridResize();
     const [componentWidth] = useClosestVitessceContainerSize(containerRef);
-    const classes = useVitessceContainerStyles();
-    const titleClasses = useTitleStyles();
+    const { classes } = useVitessceContainerStyles();
+    const { classes: titleClasses } = useTitleStyles();
     const altText = useMemo(() => getAltText(config), [configKey]);
     // When the row height has changed, publish a GRID_RESIZE event.
     useEffect(() => {
@@ -62,5 +62,5 @@ export default function VitessceGrid(props) {
         setLoaders(newLoaders);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [success, configKey]);
-    return (_jsx("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), role: "group", "aria-label": altText, children: layout ? (_jsx(VitessceGridLayout, { pageMode: pageMode, role: "group", layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize, children: children })) : null }));
+    return (_jsxs("div", { ref: containerRef, className: clsx(VITESSCE_CONTAINER, classes.vitessceContainer), role: "group", "aria-label": altText, children: [_jsx(GridLayoutGlobalStyles, { classes: classes }), layout ? (_jsx(VitessceGridLayout, { pageMode: pageMode, role: "group", layout: layout, height: height, rowHeight: rowHeight, theme: theme, viewTypes: viewTypes, fileTypes: fileTypes, coordinationTypes: coordinationTypes, stores: stores, draggableHandle: titleClasses.title, margin: margin, padding: padding, onRemoveComponent: removeComponent, onLayoutChange: changeLayoutPostMount, isBounded: isBounded, onResize: onResize, onResizeStop: onResize, children: children })) : null] }));
 }

package/dist-tsc/VitessceGrid.test.js

@@ -1,14 +1,10 @@
 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 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 { ViewConfigProvider, createViewConfigStore, AuxiliaryProvider, createAuxiliaryStore, } from './state/hooks.js';
-afterEach(() => {
-    cleanup();
-});
 describe('VitessceGrid.js', () => {
     describe('<VitessceGrid />', () => {
         it('renders', async () => {

package/dist-tsc/Warning.js

@@ -4,6 +4,6 @@ import { useStyles } from './shared-warning-styles.js';
 import { VITESSCE_CONTAINER } from './classNames.js';
 export function Warning(props) {
     const { title, preformatted, unformatted, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx("div", { className: VITESSCE_CONTAINER, children: _jsx("div", { className: clsx(classes.warningLayout, classes.containerFluid), children: _jsx("div", { className: classes.row, children: _jsxs("div", { className: classes.warningCard, children: [_jsx("h1", { children: title }), preformatted ? (_jsx("pre", { children: preformatted })) : null, _jsx("p", { children: unformatted })] }) }) }) }));
 }

package/dist-tsc/mui-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mui-utils.d.ts","sourceRoot":"","sources":["../src/mui-utils.js"],"names":[],"mappings":"AAyBA,mGA0BC"}
+{"version":3,"file":"mui-utils.d.ts","sourceRoot":"","sources":["../src/mui-utils.js"],"names":[],"mappings":"AA2BA,mGA0BC"}

package/dist-tsc/mui-utils.js

@@ -21,6 +21,8 @@ const stateClasses = [
     'selected',
 ];
 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 { name: styleSheetName, link: styleSheetLink, classNamePrefix, } = styleSheet.options;

package/dist-tsc/shared-mui/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAyBA,oDA+DC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAyBA,oDAkEC"}

package/dist-tsc/shared-mui/components.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef } from 'react';
-import { makeStyles, Paper, Popper, IconButton, MenuList, ClickAwayListener, Fade, } from '@material-ui/core';
+import { makeStyles, Paper, Popper, IconButton, MenuList, ClickAwayListener, Fade, } from '@vitessce/styles';
 import clsx from 'clsx';
 import { useVitessceContainer } from '../hooks.js';
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
     paper: {
         maxHeight: 200,
         overflow: 'auto',
@@ -15,8 +15,8 @@ const useStyles = makeStyles(() => ({
     },
 }));
 export function PopperMenu(props) {
-    const { buttonIcon, open, setOpen, children, buttonClassName, placement = 'bottom-end', withPaper = true, containerClassName, 'aria-label': ariaLabel, } = props;
-    const classes = useStyles();
+    const { buttonIcon, open, setOpen, children, buttonClassName, placement = 'bottom-end', withPaper = true, containerClassName, paperClassName, 'aria-label': ariaLabel, } = props;
+    const { classes } = useStyles();
     const anchorRef = useRef();
     const handleClick = () => {
         setOpen(prev => !prev);
@@ -26,5 +26,5 @@ export function PopperMenu(props) {
     };
     const id = open ? 'v-popover-menu' : undefined;
     const getTooltipContainer = useVitessceContainer(anchorRef);
-    return (_jsxs("div", { ref: anchorRef, className: clsx(classes.container, containerClassName), children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, onTouchEnd: handleClick, size: "small", className: buttonClassName, "aria-label": ariaLabel, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: withPaper ? (_jsx(Paper, { elevation: 4, className: classes.paper, children: _jsx(MenuList, { children: children }) })) : children }) })) })] }));
+    return (_jsxs("div", { ref: anchorRef, className: clsx(classes.container, containerClassName), children: [_jsx(IconButton, { "aria-describedby": id, onClick: handleClick, onTouchEnd: handleClick, size: "small", className: buttonClassName, "aria-label": ariaLabel, children: buttonIcon }), _jsx(Popper, { id: id, open: open, anchorEl: anchorRef && anchorRef.current, container: getTooltipContainer, onClose: handleClose, placement: placement, transition: true, children: ({ TransitionProps }) => (_jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(Fade, { ...TransitionProps, timeout: 100, children: _jsx("div", { children: withPaper ? (_jsx(Paper, { elevation: 16, className: clsx(classes.paper, paperClassName), children: _jsx(MenuList, { children: children }) })) : children }) }) })) })] }));
 }

package/dist-tsc/shared-mui/container.d.ts

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

package/dist-tsc/shared-mui/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/shared-mui/container.js"],"names":[],"mappings":"AAEA,0IAiNI"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/shared-mui/container.js"],"names":[],"mappings":"AA0NA,gEASC;AA/ND;;cAekB,CAAC;;;kBAQA,eACL;gBAAyB,WAAU;eAG/C,WAFO;EAJL"}