@jbrowse/core 1.7.11 → 2.1.0

package/ui/CascadingMenu.js

@@ -1,211 +1,112 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _core = require("@material-ui/core");
-
-var _Menu = require("./Menu");
-
-var _hooks = require("material-ui-popup-state/hooks");
-
-var _HoverMenu = _interopRequireDefault(require("material-ui-popup-state/HoverMenu"));
-
-var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));
-
-var _excluded = ["onClick"],
-    _excluded2 = ["title", "inset", "popupId"],
-    _excluded3 = ["popupState", "onMenuItemClick", "menuItems", "classes"],
-    _excluded4 = ["popupState", "onMenuItemClick", "menuItems"],
-    _excluded5 = ["onMenuItemClick", "menuItems"];
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var CascadingContext = /*#__PURE__*/_react.default.createContext({
-  parentPopupState: null,
-  rootPopupState: null
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const Menu_1 = require("./Menu");
+const hooks_1 = require("material-ui-popup-state/hooks");
+const HoverMenu_1 = __importDefault(require("material-ui-popup-state/HoverMenu"));
+const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
+const CascadingContext = react_1.default.createContext({
+    parentPopupState: null,
+    rootPopupState: null,
 });
-
-function CascadingMenuItem(_ref) {
-  var onClick = _ref.onClick,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useContext = (0, _react.useContext)(CascadingContext),
-      rootPopupState = _useContext.rootPopupState;
-
-  if (!rootPopupState) {
-    throw new Error('must be used inside a CascadingMenu');
-  }
-
-  var handleClick = (0, _react.useCallback)(function (event) {
-    // @ts-ignore
-    rootPopupState.close(event);
-
-    if (onClick) {
-      onClick(event);
+function CascadingMenuItem({ onClick, ...props }) {
+    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
+    if (!rootPopupState) {
+        throw new Error('must be used inside a CascadingMenu');
     }
-  }, [rootPopupState, onClick]);
-  return /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, props, {
-    onClick: handleClick
-  }));
+    const handleClick = (0, react_1.useCallback)((event) => {
+        rootPopupState.close();
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [rootPopupState, onClick]);
+    return react_1.default.createElement(material_1.MenuItem, { ...props, onClick: handleClick });
 }
-
-function CascadingSubmenu(_ref2) {
-  var title = _ref2.title,
-      inset = _ref2.inset,
-      popupId = _ref2.popupId,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-
-  var _React$useContext = _react.default.useContext(CascadingContext),
-      parentPopupState = _React$useContext.parentPopupState;
-
-  var popupState = (0, _hooks.usePopupState)({
-    popupId: popupId,
-    variant: 'popover',
-    parentPopupState: parentPopupState
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.MenuItem, (0, _extends2.default)({}, (0, _hooks.bindHover)(popupState), (0, _hooks.bindFocus)(popupState)), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
-    primary: title,
-    inset: inset
-  }), /*#__PURE__*/_react.default.createElement(_ChevronRight.default, null)), /*#__PURE__*/_react.default.createElement(CascadingSubmenuHover, (0, _extends2.default)({}, props, {
-    anchorOrigin: {
-      vertical: 'top',
-      horizontal: 'right'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'left'
-    },
-    popupState: popupState
-  })));
+function CascadingSubmenu({ title, inset, popupId, ...props }) {
+    const { parentPopupState } = react_1.default.useContext(CascadingContext);
+    const popupState = (0, hooks_1.usePopupState)({
+        popupId,
+        variant: 'popover',
+        parentPopupState,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState) },
+            react_1.default.createElement(material_1.ListItemText, { primary: title, inset: inset }),
+            react_1.default.createElement(ChevronRight_1.default, null)),
+        react_1.default.createElement(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })));
 }
-
-function CascadingSubmenuHover(_ref3) {
-  var popupState = _ref3.popupState,
-      onMenuItemClick = _ref3.onMenuItemClick,
-      menuItems = _ref3.menuItems,
-      classes = _ref3.classes,
-      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-
-  var _useContext2 = (0, _react.useContext)(CascadingContext),
-      rootPopupState = _useContext2.rootPopupState;
-
-  var context = (0, _react.useMemo)(function () {
-    return {
-      rootPopupState: rootPopupState || popupState,
-      parentPopupState: popupState
-    };
-  }, [rootPopupState, popupState]);
-  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
-    value: context
-  }, /*#__PURE__*/_react.default.createElement(_HoverMenu.default, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes, ...props }) {
+    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
+    const context = (0, react_1.useMemo)(() => ({
+        rootPopupState: rootPopupState || popupState,
+        parentPopupState: popupState,
+    }), [rootPopupState, popupState]);
+    return (react_1.default.createElement(CascadingContext.Provider, { value: context },
+        react_1.default.createElement(HoverMenu_1.default, { ...props, ...(0, hooks_1.bindMenu)(popupState) })));
 }
-
-function CascadingMenu(_ref4) {
-  var popupState = _ref4.popupState,
-      onMenuItemClick = _ref4.onMenuItemClick,
-      menuItems = _ref4.menuItems,
-      props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
-
-  var _React$useContext2 = _react.default.useContext(CascadingContext),
-      rootPopupState = _React$useContext2.rootPopupState;
-
-  var context = _react.default.useMemo(function () {
-    return {
-      rootPopupState: rootPopupState || popupState,
-      parentPopupState: popupState
-    };
-  }, [rootPopupState, popupState]);
-
-  return /*#__PURE__*/_react.default.createElement(CascadingContext.Provider, {
-    value: context
-  }, /*#__PURE__*/_react.default.createElement(_core.Menu, (0, _extends2.default)({}, props, (0, _hooks.bindMenu)(popupState))));
+function CascadingMenu({ popupState, onMenuItemClick, menuItems, ...props }) {
+    const { rootPopupState } = react_1.default.useContext(CascadingContext);
+    const context = react_1.default.useMemo(() => ({
+        rootPopupState: rootPopupState || popupState,
+        parentPopupState: popupState,
+    }), [rootPopupState, popupState]);
+    return (react_1.default.createElement(CascadingContext.Provider, { value: context },
+        react_1.default.createElement(material_1.Menu, { ...props, ...(0, hooks_1.bindMenu)(popupState) })));
 }
-
-function EndDecoration(_ref5) {
-  var item = _ref5.item;
-
-  if ('subMenu' in item) {
-    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
-      type: "subMenu"
-    });
-  } else if (item.type === 'checkbox' || item.type === 'radio') {
-    return /*#__PURE__*/_react.default.createElement(_Menu.MenuItemEndDecoration, {
-      type: item.type,
-      checked: item.checked,
-      disabled: item.disabled
-    });
-  }
-
-  return null;
+function EndDecoration({ item }) {
+    if ('subMenu' in item) {
+        return react_1.default.createElement(Menu_1.MenuItemEndDecoration, { type: "subMenu" });
+    }
+    else if (item.type === 'checkbox' || item.type === 'radio') {
+        return (react_1.default.createElement(Menu_1.MenuItemEndDecoration, { type: item.type, checked: item.checked, disabled: item.disabled }));
+    }
+    return null;
 }
-
-function CascadingMenuList(_ref6) {
-  var onMenuItemClick = _ref6.onMenuItemClick,
-      menuItems = _ref6.menuItems,
-      props = (0, _objectWithoutProperties2.default)(_ref6, _excluded5);
-
-  function handleClick(callback) {
-    return function (event) {
-      onMenuItemClick(event, callback);
-    };
-  }
-
-  var hasIcon = menuItems.some(function (menuItem) {
-    return 'icon' in menuItem && menuItem.icon;
-  });
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, menuItems.map(function (item, idx) {
-    return 'subMenu' in item ? /*#__PURE__*/_react.default.createElement(CascadingSubmenu, {
-      key: "subMenu-".concat(item.label, "-").concat(idx),
-      popupId: "subMenu-".concat(item.label),
-      title: item.label,
-      inset: hasIcon,
-      onMenuItemClick: onMenuItemClick,
-      menuItems: item.subMenu
-    }, /*#__PURE__*/_react.default.createElement(CascadingMenuList, (0, _extends2.default)({}, props, {
-      onMenuItemClick: onMenuItemClick,
-      menuItems: item.subMenu
-    }))) : item.type === 'divider' ? /*#__PURE__*/_react.default.createElement(_core.Divider, {
-      key: "divider-".concat(idx),
-      component: "li"
-    }) : item.type === 'subHeader' ? /*#__PURE__*/_react.default.createElement(_core.ListSubheader, {
-      key: "subHeader-".concat(item.label, "-").concat(idx)
-    }, item.label) : /*#__PURE__*/_react.default.createElement(CascadingMenuItem, {
-      key: "".concat(item.label, "-").concat(idx),
-      onClick: 'onClick' in item ? handleClick(item.onClick) : undefined,
-      disabled: Boolean(item.disabled)
-    }, item.icon ? /*#__PURE__*/_react.default.createElement(_core.ListItemIcon, null, /*#__PURE__*/_react.default.createElement(item.icon, null)) : null, ' ', /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
-      primary: item.label,
-      secondary: item.subLabel,
-      inset: hasIcon && !item.icon
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flexGrow: 1,
-        minWidth: 10
-      }
-    }), /*#__PURE__*/_react.default.createElement(EndDecoration, {
-      item: item
-    }));
-  }));
+function CascadingMenuList({ onMenuItemClick, menuItems, ...props }) {
+    function handleClick(callback) {
+        return (event) => {
+            onMenuItemClick(event, callback);
+        };
+    }
+    const hasIcon = menuItems.some(menuItem => 'icon' in menuItem && menuItem.icon);
+    return (react_1.default.createElement(react_1.default.Fragment, null, menuItems.map((item, idx) => {
+        return 'subMenu' in item ? (react_1.default.createElement(CascadingSubmenu, { key: `subMenu-${item.label}-${idx}`, popupId: `subMenu-${item.label}`, title: item.label, inset: hasIcon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu },
+            react_1.default.createElement(CascadingMenuList, { ...props, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
+            item.icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
+                react_1.default.createElement(item.icon, null))) : null,
+            ' ',
+            react_1.default.createElement(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }),
+            react_1.default.createElement("div", { style: { flexGrow: 1, minWidth: 10 } }),
+            react_1.default.createElement(EndDecoration, { item: item })));
+    })));
 }
-
 function CascadingMenuChildren(props) {
-  return /*#__PURE__*/_react.default.createElement(CascadingMenu, props, /*#__PURE__*/_react.default.createElement(CascadingMenuList, props));
+    return (react_1.default.createElement(CascadingMenu, { ...props },
+        react_1.default.createElement(CascadingMenuList, { ...props })));
 }
-
-var _default = CascadingMenuChildren;
-exports.default = _default;
+exports.default = CascadingMenuChildren;

package/ui/ColorPicker.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const PopoverPicker: ({ color, onChange, }: {
+    color: string;
+    onChange: (color: string) => void;
+}) => JSX.Element;
+export declare function ColorPopover({ anchorEl, onChange, onClose, color, }: {
+    color: string;
+    anchorEl: HTMLElement | null;
+    onChange: (val: string) => void;
+    onClose: () => void;
+}): JSX.Element;
+export declare function ColorPicker({ onChange, color, }: {
+    color: string;
+    onChange: (val: string) => void;
+}): JSX.Element;
+export default PopoverPicker;

package/ui/ColorPicker.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = exports.ColorPopover = exports.PopoverPicker = void 0;
+const react_1 = __importStar(require("react"));
+const color_1 = __importDefault(require("color"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+// locals
+const paletteColors = __importStar(require("./colors"));
+const util_1 = require("../util");
+// we are using a vendored copy of react-colorful because the default uses
+// pure-ESM which is difficult to make pass with jest e.g.
+// https://stackoverflow.com/questions/58613492/how-to-resolve-cannot-use-import-statement-outside-a-module-in-jest
+const react_colorful_1 = require("./react-colorful");
+const useStyles = (0, mui_1.makeStyles)()({
+    picker: { position: 'relative' },
+    swatches: {
+        display: 'flex',
+        padding: 12,
+        flexWrap: 'wrap',
+    },
+    swatch: {
+        width: 24,
+        height: 24,
+        margin: 4,
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        outline: 'none',
+    },
+});
+const PopoverPicker = ({ color, onChange, }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const { classes } = useStyles();
+    return (react_1.default.createElement("div", { className: classes.picker },
+        react_1.default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => setAnchorEl(event.currentTarget) }),
+        react_1.default.createElement(ColorPopover, { anchorEl: anchorEl, onClose: () => setAnchorEl(null), color: color, onChange: onChange })));
+};
+exports.PopoverPicker = PopoverPicker;
+function ColorPopover({ anchorEl, onChange, onClose, color, }) {
+    return (react_1.default.createElement(material_1.Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose },
+        react_1.default.createElement(ColorPicker, { color: color, onChange: onChange })));
+}
+exports.ColorPopover = ColorPopover;
+function ColorPicker({ onChange, color, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = (0, util_1.useLocalStorage)('colorPickerPalette', 'set1');
+    const presetColors = paletteColors[val];
+    const palettes = Object.keys(paletteColors);
+    const [text, setText] = (0, react_1.useState)(color);
+    const rgb = (0, color_1.default)(color).rgb().toString();
+    const handleChange = (val) => {
+        setText(val);
+        try {
+            onChange((0, color_1.default)(val).rgb().toString());
+        }
+        catch (e) { }
+    };
+    return (react_1.default.createElement("div", { style: { display: 'flex', padding: 10 } },
+        react_1.default.createElement("div", { style: { width: 200, margin: 5 } },
+            react_1.default.createElement(react_colorful_1.RgbaStringColorPicker, { color: rgb, onChange: handleChange })),
+        react_1.default.createElement("div", { style: { width: 200, margin: 5 } },
+            react_1.default.createElement(material_1.Select, { value: val, onChange: event => {
+                    const pal = event.target.value;
+                    setVal(pal);
+                } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
+            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: presetColor + '-' + idx, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
+            react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => handleChange(event.target.value) }))));
+}
+exports.ColorPicker = ColorPicker;
+exports.default = exports.PopoverPicker;

package/ui/Drawer.js

@@ -1,64 +1,34 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _mobxReact = require("mobx-react");
-
-var _ResizeHandle = _interopRequireDefault(require("./ResizeHandle"));
-
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const ResizeHandle_1 = __importDefault(require("./ResizeHandle"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     paper: {
-      overflowY: 'auto',
-      height: '100%',
-      zIndex: theme.zIndex.drawer,
-      outline: 'none',
-      background: theme.palette.background.default
+        overflowY: 'auto',
+        height: '100%',
+        zIndex: theme.zIndex.drawer,
+        outline: 'none',
+        background: theme.palette.background.default,
     },
     resizeHandle: {
-      width: 4,
-      position: 'fixed',
-      top: 0,
-      zIndex: theme.zIndex.drawer + 1
-    }
-  };
-});
-
-function Drawer(_ref) {
-  var children = _ref.children,
-      session = _ref.session;
-  var drawerPosition = session.drawerPosition,
-      drawerWidth = session.drawerWidth;
-  var classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
-    className: classes.paper,
-    elevation: 16,
-    square: true
-  }, drawerPosition === 'right' ? /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
-    onDrag: session.resizeDrawer,
-    className: classes.resizeHandle,
-    vertical: true
-  }) : null, children, drawerPosition === 'left' ? /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
-    onDrag: session.resizeDrawer,
-    className: classes.resizeHandle,
-    style: {
-      left: drawerWidth
+        width: 4,
+        position: 'fixed',
+        top: 0,
+        zIndex: theme.zIndex.drawer + 1,
     },
-    vertical: true
-  }) : null);
+}));
+function Drawer({ children, session, }) {
+    const { drawerPosition, drawerWidth } = session;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Paper, { className: classes.paper, elevation: 16, square: true },
+        drawerPosition === 'right' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
+        children,
+        drawerPosition === 'left' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null));
 }
-
-var _default = (0, _mobxReact.observer)(Drawer);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(Drawer);