@jbrowse/core 1.7.9 → 2.0.0

package/ui/ViewContainer.js

@@ -17,7 +17,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _mui = require("tss-react/mui");
+
+var _styles = require("@mui/material/styles");
 
 var _mobxReact = require("mobx-react");
 
@@ -25,9 +29,9 @@ var _mobxStateTree = require("mobx-state-tree");
 
 var _reactUseMeasure = _interopRequireDefault(require("react-use-measure"));
 
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 
-var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
 
 var _EditableTypography = _interopRequireDefault(require("./EditableTypography"));
 
@@ -41,7 +45,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     viewContainer: {
       overflow: 'hidden',
@@ -56,7 +60,7 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
     },
     iconRoot: {
       '&:hover': {
-        backgroundColor: (0, _core.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
+        backgroundColor: (0, _styles.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
@@ -93,15 +97,18 @@ var ViewMenu = (0, _mobxReact.observer)(function (_ref) {
   var menuItems = model.menuItems; // <=1.3.3 didn't use a function
 
   var items = typeof menuItems === 'function' ? menuItems() : menuItems;
-  return items !== null && items !== void 0 && items.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.IconButton, (0, _extends2.default)({}, IconButtonProps, {
-    "aria-label": "more",
-    "aria-controls": "view-menu",
-    "aria-haspopup": "true",
+  return items !== null && items !== void 0 && items.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, (0, _extends2.default)({}, IconButtonProps, {
+    style: {
+      padding: 3
+    },
     onClick: function onClick(event) {
-      setAnchorEl(event.currentTarget);
+      return setAnchorEl(event.currentTarget);
     },
-    "data-testid": "view_menu_icon"
-  }), /*#__PURE__*/_react.default.createElement(_Menu.default, IconProps)), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
+    "data-testid": "view_menu_icon",
+    size: "small"
+  }), /*#__PURE__*/_react.default.createElement(_Menu.default, (0, _extends2.default)({}, IconProps, {
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement(_Menu2.default, {
     anchorEl: anchorEl,
     open: Boolean(anchorEl),
     onMenuItemClick: function onMenuItemClick(_event, callback) {
@@ -109,18 +116,23 @@ var ViewMenu = (0, _mobxReact.observer)(function (_ref) {
       setAnchorEl(undefined);
     },
     onClose: function onClose() {
-      setAnchorEl(undefined);
+      return setAnchorEl(undefined);
     },
     menuItems: model.menuItems()
   })) : null;
 });
 var ViewContainer = (0, _mobxReact.observer)(function (_ref2) {
+  var _view$assemblyNames;
+
   var view = _ref2.view,
       onClose = _ref2.onClose,
       style = _ref2.style,
       children = _ref2.children;
-  var classes = useStyles();
-  var theme = (0, _core.useTheme)();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
+  var theme = (0, _material.useTheme)();
   var padWidth = theme.spacing(1);
 
   var _useMeasure = (0, _reactUseMeasure.default)(),
@@ -130,7 +142,7 @@ var ViewContainer = (0, _mobxReact.observer)(function (_ref2) {
 
   (0, _react.useEffect)(function () {
     if (width && (0, _mobxStateTree.isAlive)(view)) {
-      view.setWidth(width - padWidth * 2);
+      view.setWidth(width - parseInt(padWidth, 10) * 2);
     }
   }, [padWidth, view, width]);
   var scrollRef = (0, _react.useRef)(null); // scroll the view into view when first mounted
@@ -144,12 +156,12 @@ var ViewContainer = (0, _mobxReact.observer)(function (_ref2) {
       block: 'center'
     });
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_core.Paper, {
+  return /*#__PURE__*/_react.default.createElement(_material.Paper, {
     ref: ref,
     elevation: 12,
     className: classes.viewContainer,
     style: _objectSpread(_objectSpread({}, style), {}, {
-      padding: "0px ".concat(padWidth, "px ").concat(padWidth, "px")
+      padding: "0px ".concat(padWidth, " ").concat(padWidth)
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: scrollRef,
@@ -169,15 +181,14 @@ var ViewContainer = (0, _mobxReact.observer)(function (_ref2) {
     }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.grow
-  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Rename view",
     arrow: true
   }, /*#__PURE__*/_react.default.createElement(_EditableTypography.default, {
     value: view.displayName || ( // @ts-ignore
-    view.assemblyNames ? // @ts-ignore
-    view.assemblyNames.join(',') : 'Untitled view'),
+    (_view$assemblyNames = view.assemblyNames) === null || _view$assemblyNames === void 0 ? void 0 : _view$assemblyNames.join(',')) || 'Untitled view',
     setValue: function setValue(val) {
-      view.setDisplayName(val);
+      return view.setDisplayName(val);
     },
     variant: "body2",
     classes: {
@@ -188,16 +199,18 @@ var ViewContainer = (0, _mobxReact.observer)(function (_ref2) {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.grow
-  }), /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+  }), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
     "data-testid": "close_view",
     classes: {
       root: classes.iconRoot
     },
     edge: "end",
+    size: "small",
     onClick: onClose
   }, /*#__PURE__*/_react.default.createElement(_Close.default, {
-    className: classes.icon
-  }))), /*#__PURE__*/_react.default.createElement(_core.Paper, null, children));
+    className: classes.icon,
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement(_material.Paper, null, children));
 });
 var _default = ViewContainer;
 exports.default = _default;

package/ui/index.d.ts

@@ -12,5 +12,6 @@ export { default as FactoryResetDialog } from './FactoryResetDialog';
 export { default as Tooltip } from './Tooltip';
 export { default as FatalErrorDialog } from './FatalErrorDialog';
 export { default as Menu } from './Menu';
+export { default as CascadingMenu } from './CascadingMenu';
 export { default as SanitizedHTML } from './SanitizedHTML';
 export * from './Menu';

package/ui/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   Tooltip: true,
   FatalErrorDialog: true,
   Menu: true,
+  CascadingMenu: true,
   SanitizedHTML: true
 };
 Object.defineProperty(exports, "App", {
@@ -36,6 +37,12 @@ Object.defineProperty(exports, "AssemblySelector", {
     return _AssemblySelector.default;
   }
 });
+Object.defineProperty(exports, "CascadingMenu", {
+  enumerable: true,
+  get: function get() {
+    return _CascadingMenu.default;
+  }
+});
 Object.defineProperty(exports, "EditableTypography", {
   enumerable: true,
   get: function get() {
@@ -167,6 +174,8 @@ Object.keys(_Menu).forEach(function (key) {
   });
 });
 
+var _CascadingMenu = _interopRequireDefault(require("./CascadingMenu"));
+
 var _SanitizedHTML = _interopRequireDefault(require("./SanitizedHTML"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

package/ui/theme.d.ts

@@ -1,27 +1,4 @@
-import { ThemeOptions } from '@material-ui/core/styles';
-import { PaletteOptions } from '@material-ui/core/styles/createPalette';
-declare module '@material-ui/core/styles/createPalette' {
-    interface Palette {
-        tertiary: Palette['primary'];
-        quaternary: Palette['primary'];
-        bases: {
-            A: Palette['primary'];
-            C: Palette['primary'];
-            G: Palette['primary'];
-            T: Palette['primary'];
-        };
-    }
-    interface PaletteOptions {
-        tertiary?: PaletteOptions['primary'];
-        quaternary?: PaletteOptions['primary'];
-        bases?: {
-            A?: PaletteOptions['primary'];
-            C?: PaletteOptions['primary'];
-            G?: PaletteOptions['primary'];
-            T?: PaletteOptions['primary'];
-        };
-    }
-}
+import { PaletteOptions } from '@mui/material/styles/createPalette';
 export declare const jbrowseDefaultPalette: {
     primary: {
         main: string;
@@ -29,135 +6,306 @@ export declare const jbrowseDefaultPalette: {
     secondary: {
         main: string;
     };
-    tertiary: import("@material-ui/core/styles/createPalette").PaletteColor;
-    quaternary: import("@material-ui/core/styles/createPalette").PaletteColor;
+    tertiary: import("@mui/material/styles").PaletteColor;
+    quaternary: import("@mui/material/styles").PaletteColor;
     stopCodon: string;
     startCodon: string;
     bases: {
-        A: import("@material-ui/core/styles/createPalette").PaletteColor;
-        C: import("@material-ui/core/styles/createPalette").PaletteColor;
-        G: import("@material-ui/core/styles/createPalette").PaletteColor;
-        T: import("@material-ui/core/styles/createPalette").PaletteColor;
+        A: import("@mui/material/styles").PaletteColor;
+        C: import("@mui/material/styles").PaletteColor;
+        G: import("@mui/material/styles").PaletteColor;
+        T: import("@mui/material/styles").PaletteColor;
     };
 };
 export declare function createJBrowseDefaultProps(): {
-    MuiButton: {
-        size: "small";
-    };
-    MuiFilledInput: {
-        margin: "dense";
-    };
-    MuiFormControl: {
-        margin: "dense";
-    };
-    MuiFormHelperText: {
-        margin: "dense";
-    };
-    MuiIconButton: {
-        size: "small";
-    };
-    MuiInputBase: {
-        margin: "dense";
-    };
-    MuiList: {
-        dense: boolean;
-    };
-    MuiListItem: {
-        dense: boolean;
-    };
-    MuiOutlinedInput: {
-        margin: "dense";
-    };
-    MuiFab: {
-        size: "small";
-    };
-    MuiTable: {
-        size: "small";
-    };
-    MuiTextField: {
-        margin: "dense";
-        size: "small";
-    };
-    MuiToolbar: {
-        variant: "dense";
-    };
-    MuiSvgIcon: {
-        fontSize: "small";
-    };
-    MuiToggleButtonGroup: {
-        size: "small";
-    };
-    MuiCheckbox: {
-        size: "small";
-    };
-    MuiLink: {
-        underline: "always";
+    components: {
+        MuiButton: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiAccordion: {
+            defaultProps: {
+                disableGutters: boolean;
+                TransitionProps: {
+                    timeout: number;
+                };
+            };
+        };
+        MuiFilledInput: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiFormControl: {
+            defaultProps: {
+                margin: string;
+                size: string;
+            };
+        };
+        MuiFormHelperText: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiIconButton: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiInputBase: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiAutocomplete: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiInputLabel: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiToolbar: {
+            defaultProps: {
+                variant: string;
+            };
+        };
+        MuiListItem: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiOutlinedInput: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiFab: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiTable: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiMenuList: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiMenuItem: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiTextField: {
+            defaultProps: {
+                margin: string;
+                variant: string;
+            };
+        };
     };
 };
 export declare function createJBrowseDefaultOverrides(palette?: PaletteOptions): {
-    MuiIconButton: {
-        colorSecondary: {
-            color: string;
+    components: {
+        MuiIconButton: {
+            styleOverrides: {
+                colorSecondary: {
+                    color: string;
+                };
+            };
         };
-    };
-    MuiButton: {
-        textSecondary: {
-            color: string;
+        MuiButton: {
+            styleOverrides: {
+                textSecondary: {
+                    color: string;
+                };
+            };
         };
-    };
-    MuiFab: {
-        secondary: {
-            backgroundColor: string;
+        MuiFab: {
+            styleOverrides: {
+                secondary: {
+                    backgroundColor: string;
+                };
+            };
         };
-    };
-    MuiLink: {
-        root: {
-            color: string;
+        MuiLink: {
+            styleOverrides: {
+                root: {
+                    color: string;
+                };
+            };
         };
-    };
-    MuiAccordion: {
-        root: {
-            margin: number;
-            '&$expanded': {
-                margin: number;
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: string;
+                };
+                content: {
+                    color: string;
+                };
             };
         };
     };
-    MuiAccordionSummary: {
-        root: {
-            backgroundColor: string;
-            width: string;
-            '&$expanded': {
-                minHeight: number;
-                color: string;
-                backgroundColor: string;
-            };
-            minHeight: number;
-        };
-        content: {
-            '&$expanded': {
+};
+export declare const jbrowseBaseTheme: {
+    components: {
+        MuiButton: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiAccordion: {
+            defaultProps: {
+                disableGutters: boolean;
+                TransitionProps: {
+                    timeout: number;
+                };
+            };
+        };
+        MuiFilledInput: {
+            defaultProps: {
                 margin: string;
             };
-            margin: string;
-            color: string;
         };
-    };
-    MuiMenuItem: {
-        root: {
-            paddingTop: number;
-            paddingBottom: number;
+        MuiFormControl: {
+            defaultProps: {
+                margin: string;
+                size: string;
+            };
         };
-    };
-    MuiListItemIcon: {
-        root: {
-            minWidth: number;
+        MuiFormHelperText: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiIconButton: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiInputBase: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiAutocomplete: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiInputLabel: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiToolbar: {
+            defaultProps: {
+                variant: string;
+            };
+        };
+        MuiListItem: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiOutlinedInput: {
+            defaultProps: {
+                margin: string;
+            };
+        };
+        MuiFab: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiTable: {
+            defaultProps: {
+                size: string;
+            };
+        };
+        MuiMenuList: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiMenuItem: {
+            defaultProps: {
+                dense: boolean;
+            };
+        };
+        MuiTextField: {
+            defaultProps: {
+                margin: string;
+                variant: string;
+            };
+        };
+    } & {
+        MuiIconButton: {
+            styleOverrides: {
+                colorSecondary: {
+                    color: string;
+                };
+            };
+        };
+        MuiButton: {
+            styleOverrides: {
+                textSecondary: {
+                    color: string;
+                };
+            };
+        };
+        MuiFab: {
+            styleOverrides: {
+                secondary: {
+                    backgroundColor: string;
+                };
+            };
+        };
+        MuiLink: {
+            styleOverrides: {
+                root: {
+                    color: string;
+                };
+            };
+        };
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: string;
+                };
+                content: {
+                    color: string;
+                };
+            };
         };
     };
-    MuiListItemText: {
-        inset: {
-            paddingLeft: number;
+    palette: {
+        primary: {
+            main: string;
+        };
+        secondary: {
+            main: string;
         };
+        tertiary: import("@mui/material/styles").PaletteColor;
+        quaternary: import("@mui/material/styles").PaletteColor;
+        stopCodon: string;
+        startCodon: string;
+        bases: {
+            A: import("@mui/material/styles").PaletteColor;
+            C: import("@mui/material/styles").PaletteColor;
+            G: import("@mui/material/styles").PaletteColor;
+            T: import("@mui/material/styles").PaletteColor;
+        };
+    };
+    typography: {
+        fontSize: number;
     };
+    spacing: number;
 };
-export declare const jbrowseBaseTheme: ThemeOptions;
-export declare function createJBrowseTheme(theme?: ThemeOptions): import("@material-ui/core/styles").Theme;
+export declare function createJBrowseTheme(theme?: any): import("@mui/material/styles").Theme;