@jbrowse/core 3.5.0 → 3.6.0

package/ui/CascadingMenu.d.ts

@@ -1,5 +1,5 @@
 import type { MenuItem as JBMenuItem } from './Menu';
-import type { PopupState } from 'material-ui-popup-state/hooks';
+import type { PopupState } from './hooks';
 declare function CascadingMenuChildren(props: {
     onMenuItemClick: Function;
     closeAfterItemClick?: boolean;

package/ui/CascadingMenu.js

@@ -7,15 +7,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
 const material_1 = require("@mui/material");
-const HoverMenu_1 = __importDefault(require("material-ui-popup-state/HoverMenu"));
-const hooks_1 = require("material-ui-popup-state/hooks");
+const HoverMenu_1 = __importDefault(require("./HoverMenu"));
 const Menu_1 = require("./Menu");
+const hooks_1 = require("./hooks");
 const CascadingContext = (0, react_1.createContext)({
-    parentPopupState: null,
-    rootPopupState: null,
+    parentPopupState: undefined,
+    rootPopupState: undefined,
 });
 function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
-    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
+    const { rootPopupState, parentPopupState } = (0, react_1.useContext)(CascadingContext);
     if (!rootPopupState) {
         throw new Error('must be used inside a CascadingMenu');
     }
@@ -24,16 +24,25 @@ function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
                 rootPopupState.close();
             }
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }, onMouseOver: () => {
+            if (parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.childHandle) {
+                parentPopupState.childHandle.close();
+                parentPopupState.setChildHandle(undefined);
+            }
         } }));
 }
-function CascadingSubmenu({ title, Icon, inset, popupId, ...props }) {
+function CascadingSubmenu({ title, Icon, inset, ...props }) {
     const { parentPopupState } = (0, react_1.useContext)(CascadingContext);
     const popupState = (0, hooks_1.usePopupState)({
-        popupId,
-        variant: 'popover',
         parentPopupState,
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState), children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindFocus)(popupState), onMouseOver: (event) => {
+                    if (parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.childHandle) {
+                        parentPopupState.childHandle.close();
+                        parentPopupState.setChildHandle(undefined);
+                    }
+                    (0, hooks_1.bindHover)(popupState).onMouseOver(event);
+                }, children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
 }
 function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes, ...props }) {
     const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
@@ -61,18 +70,20 @@ function EndDecoration({ item }) {
     return null;
 }
 function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ...props }) {
-    function handleClick(callback) {
-        return (event) => {
-            onMenuItemClick(event, callback);
-        };
-    }
     const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menuItems
-            .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+            .toSorted((a, b) => (b.priority || 0) - (a.priority || 0))
             .map((item, idx) => {
-            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } }), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
+            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item
+                    ? event => {
+                        onMenuItemClick(event, item.onClick);
+                    }
+                    : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)(CascadingSpacer, {}), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
         }) }));
 }
+function CascadingSpacer() {
+    return (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } });
+}
 function CascadingMenuChildren(props) {
     const { closeAfterItemClick = true, ...rest } = props;
     return ((0, jsx_runtime_1.jsx)(CascadingMenu, { ...rest, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick }) }));

package/ui/CascadingMenuButton.js

@@ -7,14 +7,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 const material_1 = require("@mui/material");
-const hooks_1 = require("material-ui-popup-state/hooks");
 const mobx_react_1 = require("mobx-react");
+const hooks_1 = require("./hooks");
 const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, setOpen, onClick: onClickExtra, ...rest }) {
-    const popupState = (0, hooks_1.usePopupState)({
-        popupId: 'viewMenu',
-        variant: 'popover',
-    });
-    const { onClick, onTouchStart, ...rest2 } = (0, hooks_1.bindTrigger)(popupState);
+    const popupState = (0, hooks_1.usePopupState)();
+    const { onClick, ...rest2 } = (0, hooks_1.bindTrigger)(popupState);
     const { isOpen } = popupState;
     (0, react_1.useEffect)(() => {
         setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
@@ -25,12 +22,6 @@ const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuBut
                     }
                     onClick(event);
                     onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
-                }, onTouchStart: event => {
-                    if (stopPropagation) {
-                        event.stopPropagation();
-                    }
-                    onTouchStart(event);
-                    onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
                 }, ...rest2, ...rest, disabled: menuItems.length === 0, children: children }), (0, jsx_runtime_1.jsx)(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => {
                     callback();
                 }, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })] }));

package/ui/DropDownMenu.d.ts

@@ -1,7 +1,8 @@
 import type { MenuItem } from './Menu';
+import type { AbstractSessionModel } from '../util';
 declare const DropDownMenu: ({ menuTitle, session, menuItems, }: {
     menuTitle: string;
-    session: any;
-    menuItems: MenuItem[];
+    session: AbstractSessionModel;
+    menuItems: MenuItem[] | (() => MenuItem[]);
 }) => import("react/jsx-runtime").JSX.Element;
 export default DropDownMenu;

package/ui/DropDownMenu.js

@@ -27,11 +27,11 @@ const DropDownMenu = (0, mobx_react_1.observer)(function ({ menuTitle, session,
     function handleClose() {
         setOpen(false);
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { ref: anchorEl, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { ref: anchorEl, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot }, onClick: () => {
                     setOpen(!open);
-                }, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot }, children: [menuTitle, (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] }), (0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: (_event, callback) => {
+                }, children: [menuTitle, (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] }), open ? ((0, jsx_runtime_1.jsx)(Menu_1.default, { open: true, anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onClose: handleClose, menuItems: typeof menuItems === 'function' ? menuItems() : menuItems, onMenuItemClick: (_event, callback) => {
                     callback(session);
                     handleClose();
-                }, open: open, onClose: handleClose, menuItems: menuItems })] }));
+                } })) : null] }));
 });
 exports.default = DropDownMenu;

package/ui/HoverMenu.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { MenuProps } from '@mui/material';
+declare const HoverMenu: React.ComponentType<MenuProps>;
+export default HoverMenu;

package/ui/HoverMenu.js

@@ -0,0 +1,50 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const HoverMenu = React.forwardRef(function HoverMenu(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Menu, { ...props, ref: ref, style: {
+            pointerEvents: 'none',
+            ...props.style,
+        }, slotProps: {
+            ...props.slotProps,
+            paper: {
+                style: { pointerEvents: 'auto' },
+            },
+        } }));
+});
+exports.default = HoverMenu;

package/ui/Icons.d.ts

@@ -1,10 +1,5 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-export declare function ContentCopy(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function Indexing(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function ContentCut(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function ContentPaste(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function TrackSelector(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function SaveAs(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function Save(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function DNA(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function Cable(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/ui/Icons.js

@@ -3,38 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentCopy = ContentCopy;
 exports.Indexing = Indexing;
-exports.ContentCut = ContentCut;
-exports.ContentPaste = ContentPaste;
 exports.TrackSelector = TrackSelector;
-exports.SaveAs = SaveAs;
-exports.Save = Save;
 exports.DNA = DNA;
 exports.Cable = Cable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
-function ContentCopy(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" }) }));
-}
 function Indexing(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
 }
-function ContentCut(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,3L13,9L15,11L22,4V3M12,12.5A0.5,0.5 0 0,1 11.5,12A0.5,0.5 0 0,1 12,11.5A0.5,0.5 0 0,1 12.5,12A0.5,0.5 0 0,1 12,12.5M6,20A2,2 0 0,1 4,18C4,16.89 4.9,16 6,16A2,2 0 0,1 8,18C8,19.11 7.1,20 6,20M6,8A2,2 0 0,1 4,6C4,4.89 4.9,4 6,4A2,2 0 0,1 8,6C8,7.11 7.1,8 6,8M9.64,7.64C9.87,7.14 10,6.59 10,6A4,4 0 0,0 6,2A4,4 0 0,0 2,6A4,4 0 0,0 6,10C6.59,10 7.14,9.87 7.64,9.64L10,12L7.64,14.36C7.14,14.13 6.59,14 6,14A4,4 0 0,0 2,18A4,4 0 0,0 6,22A4,4 0 0,0 10,18C10,17.41 9.87,16.86 9.64,16.36L12,14L19,21H22V20L9.64,7.64Z" }) }));
-}
-function ContentPaste(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" }) }));
-}
 function TrackSelector(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
 }
-function SaveAs(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M10,19L10.14,18.86C8.9,18.5 8,17.36 8,16A3,3 0 0,1 11,13C12.36,13 13.5,13.9 13.86,15.14L20,9V7L16,3H4C2.89,3 2,3.9 2,5V19A2,2 0 0,0 4,21H10V19M4,5H14V9H4V5M20.04,12.13C19.9,12.13 19.76,12.19 19.65,12.3L18.65,13.3L20.7,15.35L21.7,14.35C21.92,14.14 21.92,13.79 21.7,13.58L20.42,12.3C20.31,12.19 20.18,12.13 20.04,12.13M18.07,13.88L12,19.94V22H14.06L20.12,15.93L18.07,13.88Z" }) }));
-}
-function Save(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" }) }));
-}
 function DNA(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
 }

package/ui/hooks.d.ts

@@ -0,0 +1,66 @@
+import { type SyntheticEvent } from 'react';
+import * as React from 'react';
+export interface ChildHandle {
+    close: () => void;
+    popupId: string;
+}
+export interface PopupState {
+    open: (event?: React.MouseEvent | React.FocusEvent) => void;
+    close: (event?: React.MouseEvent) => void;
+    toggle: (event?: React.MouseEvent) => void;
+    setOpen: (open: boolean, eventOrAnchorEl?: SyntheticEvent | Element) => void;
+    isOpen: boolean;
+    anchorEl: Element | undefined;
+    setAnchorEl: (anchorEl: Element | undefined) => any;
+    setAnchorElUsed: boolean;
+    popupId: string | undefined;
+    hovered: boolean;
+    focused: boolean;
+    _openEventType?: string;
+    childHandle?: ChildHandle;
+    setChildHandle: (popupState?: ChildHandle) => void;
+}
+export interface CoreState {
+    isOpen: boolean;
+    setAnchorElUsed: boolean;
+    anchorEl: Element | undefined;
+    hovered: boolean;
+    focused: boolean;
+    _openEventType?: string;
+    _childHandle?: PopupState;
+}
+export declare function usePopupState(arg?: {
+    parentPopupState?: PopupState;
+    variant?: string;
+}): PopupState;
+export declare function bindTrigger(popupState: PopupState): {
+    onClick: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindToggle(popupState: PopupState): {
+    onClick: (event?: React.MouseEvent) => void;
+};
+export declare function bindHover(popupState: PopupState): {
+    onMouseOver: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindFocus(popupState: PopupState): {
+    onFocus: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindPopover({ isOpen, anchorEl, close, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    anchorReference: "anchorEl";
+    open: boolean;
+    onClose: (event?: React.MouseEvent) => void;
+};
+export declare function bindMenu({ isOpen, anchorEl, close, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    anchorReference: "anchorEl";
+    open: boolean;
+    onClose: (event?: React.MouseEvent) => void;
+};
+export declare function bindPopper({ isOpen, anchorEl, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    open: boolean;
+};

package/ui/hooks.js

@@ -0,0 +1,185 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupState = usePopupState;
+exports.bindTrigger = bindTrigger;
+exports.bindToggle = bindToggle;
+exports.bindHover = bindHover;
+exports.bindFocus = bindFocus;
+exports.bindPopover = bindPopover;
+exports.bindMenu = bindMenu;
+exports.bindPopper = bindPopper;
+const react_1 = require("react");
+const React = __importStar(require("react"));
+function usePopupState(arg) {
+    const { parentPopupState } = arg || {};
+    const popupId = React.useId();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [setAnchorElUsed, setSetAnchorElUsed] = (0, react_1.useState)(false);
+    const [anchorEl, _setAnchorEl] = (0, react_1.useState)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [openEventType, setOpenEventType] = (0, react_1.useState)();
+    const [childHandle, setChildHandle] = (0, react_1.useState)();
+    const setAnchorEl = (0, react_1.useCallback)((el) => {
+        setSetAnchorElUsed(true);
+        _setAnchorEl(el);
+    }, []);
+    const toggle = (eventOrAnchorEl) => {
+        if (isOpen) {
+            close(eventOrAnchorEl);
+        }
+        else {
+            open(eventOrAnchorEl);
+        }
+    };
+    const open = (eventOrAnchorEl) => {
+        const event = eventOrAnchorEl instanceof Element ? undefined : eventOrAnchorEl;
+        const element = eventOrAnchorEl instanceof Element
+            ? eventOrAnchorEl
+            : (eventOrAnchorEl === null || eventOrAnchorEl === void 0 ? void 0 : eventOrAnchorEl.currentTarget) instanceof Element
+                ? eventOrAnchorEl.currentTarget
+                : undefined;
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'touchstart') {
+            return;
+        }
+        if (parentPopupState) {
+            if (!parentPopupState.isOpen) {
+                return;
+            }
+            parentPopupState.setChildHandle(undefined);
+            setTimeout(() => {
+                parentPopupState.setChildHandle({
+                    popupId,
+                    close,
+                });
+            });
+        }
+        setIsOpen(true);
+        setHovered(prev => (event === null || event === void 0 ? void 0 : event.type) === 'mouseover' || prev);
+        setFocused(prev => (event === null || event === void 0 ? void 0 : event.type) === 'focus' || prev);
+        setOpenEventType(event === null || event === void 0 ? void 0 : event.type);
+        if (!setAnchorElUsed) {
+            if (event === null || event === void 0 ? void 0 : event.currentTarget) {
+                _setAnchorEl(event.currentTarget);
+            }
+            else if (element) {
+                _setAnchorEl(element);
+            }
+        }
+    };
+    const close = (eventOrAnchorEl) => {
+        const event = eventOrAnchorEl instanceof Element ? undefined : eventOrAnchorEl;
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'touchstart') {
+            return;
+        }
+        childHandle === null || childHandle === void 0 ? void 0 : childHandle.close();
+        parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.setChildHandle(undefined);
+        setIsOpen(false);
+        setHovered(false);
+        setFocused(false);
+    };
+    const setOpen = (nextOpen, eventOrAnchorEl) => {
+        if (nextOpen) {
+            open(eventOrAnchorEl);
+        }
+        else {
+            close(eventOrAnchorEl);
+        }
+    };
+    return {
+        isOpen,
+        anchorEl,
+        setAnchorElUsed,
+        setAnchorEl,
+        popupId,
+        open,
+        close,
+        toggle,
+        setOpen,
+        hovered,
+        focused,
+        _openEventType: openEventType,
+        childHandle,
+        setChildHandle,
+    };
+}
+function bindTrigger(popupState) {
+    return {
+        onClick: popupState.open,
+    };
+}
+function bindToggle(popupState) {
+    return {
+        onClick: popupState.toggle,
+    };
+}
+function bindHover(popupState) {
+    const { open } = popupState;
+    return {
+        onMouseOver: open,
+    };
+}
+function bindFocus(popupState) {
+    const { open } = popupState;
+    return {
+        onFocus: open,
+    };
+}
+function bindPopover({ isOpen, anchorEl, close, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        anchorReference: 'anchorEl',
+        open: isOpen,
+        onClose: close,
+    };
+}
+function bindMenu({ isOpen, anchorEl, close, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        anchorReference: 'anchorEl',
+        open: isOpen,
+        onClose: close,
+    };
+}
+function bindPopper({ isOpen, anchorEl, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        open: isOpen,
+    };
+}

package/ui/react-colorful.js

@@ -59,7 +59,7 @@ function u(e) {
     const t = (0, react_1.useRef)(e), o = (0, react_1.useRef)(e => {
         t.current && t.current(e);
     });
-    return (t.current = e), o.current;
+    return ((t.current = e), o.current);
 }
 const i = (e, r = 0, t = 1) => (e > t ? t : e < r ? r : e), d = e => 'touches' in e, f = e => (e && e.ownerDocument.defaultView) || self, h = (e, r, t) => {
     const o = e.getBoundingClientRect(), a = d(r)
@@ -80,14 +80,16 @@ const i = (e, r = 0, t = 1) => (e > t ? t : e < r ? r : e), d = e => 'touches' i
     let { onMove: l, onKey: n } = a, i = c(a, ['onMove', 'onKey']);
     const m = (0, react_1.useRef)(null), g = u(l), p = u(n), b = (0, react_1.useRef)(null), _ = (0, react_1.useRef)(!1), [x, C, E] = (0, react_1.useMemo)(() => {
         const e = e => {
-            v(e),
+            ;
+            (v(e),
                 (d(e) ? e.touches.length > 0 : e.buttons > 0) && m.current
                     ? g(h(m.current, e, b.current))
-                    : t(!1);
+                    : t(!1));
         }, r = () => t(!1);
         function t(t) {
             const o = _.current, a = f(m.current), l = t ? a.addEventListener : a.removeEventListener;
-            l(o ? 'touchmove' : 'mousemove', e), l(o ? 'touchend' : 'mouseup', r);
+            (l(o ? 'touchmove' : 'mousemove', e),
+                l(o ? 'touchend' : 'mouseup', r));
         }
         return [
             ({ nativeEvent: e }) => {
@@ -98,7 +100,8 @@ const i = (e, r = 0, t = 1) => (e > t ? t : e < r ? r : e), d = e => 'touches' i
                         const r = e.changedTouches || [];
                         r.length && (b.current = r[0].identifier);
                     }
-                    r.focus(), g(h(r, e, b.current)), t(!0);
+                    ;
+                    (r.focus(), g(h(r, e, b.current)), t(!0));
                 }
             },
             e => {
@@ -174,7 +177,7 @@ const i = (e, r = 0, t = 1) => (e > t ? t : e < r ? r : e), d = e => 'touches' i
     return `hsla(${r}, ${t}%, ${o}%, ${a})`;
 }, y = ({ h: e, s: r, v: t, a: o }) => {
     ;
-    (e = (e / 360) * 6), (r /= 100), (t /= 100);
+    ((e = (e / 360) * 6), (r /= 100), (t /= 100));
     const a = Math.floor(e), l = t * (1 - r), n = t * (1 - (e - a) * r), s = t * (1 - (1 - e + a) * r), c = a % 6;
     return {
         r: b(255 * [t, n, l, l, s, t][c]),
@@ -265,10 +268,10 @@ const i = (e, r = 0, t = 1) => (e > t ? t : e < r ? r : e), d = e => 'touches' i
 }, A = (e, r) => e.replace(/\s/g, '') === r.replace(/\s/g, '');
 function S(e, t, n) {
     const s = u(n), [c, i] = (0, react_1.useState)(() => e.toHsva(t)), d = (0, react_1.useRef)({ color: t, hsva: c });
-    (0, react_1.useEffect)(() => {
+    ((0, react_1.useEffect)(() => {
         if (!e.equal(t, d.current.color)) {
             const r = e.toHsva(t);
-            (d.current = { hsva: r, color: t }), i(r);
+            ((d.current = { hsva: r, color: t }), i(r));
         }
     }, [t, e]),
         (0, react_1.useEffect)(() => {
@@ -276,7 +279,7 @@ function S(e, t, n) {
             L(c, d.current.hsva) ||
                 e.equal((r = e.fromHsva(c)), d.current.color) ||
                 ((d.current = { hsva: c, color: r }), s(r));
-        }, [c, e, s]);
+        }, [c, e, s]));
     const f = (0, react_1.useCallback)(e => {
         i(r => Object.assign({}, r, e));
     }, []);
@@ -291,11 +294,11 @@ const P = () => F || ('undefined' != typeof __webpack_nonce__ ? __webpack_nonce_
         const r = e.current ? e.current.ownerDocument : document;
         if (void 0 !== r && !Y.has(r)) {
             const e = r.createElement('style');
-            (e.innerHTML =
+            ((e.innerHTML =
                 '.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}'),
-                Y.set(r, e);
+                Y.set(r, e));
             const t = P();
-            t && e.setAttribute('nonce', t), r.head.appendChild(e);
+            (t && e.setAttribute('nonce', t), r.head.appendChild(e));
         }
     }, []);
 }, V = t => {
@@ -420,9 +423,10 @@ const P = () => F || ('undefined' != typeof __webpack_nonce__ ? __webpack_nonce_
         'process',
     ]), [g, p] = (0, react_1.useState)(() => d(t)), b = u(n), _ = u(i), x = (0, react_1.useCallback)(e => {
         const r = d(e.target.value);
-        p(r), f(r) && b(v ? v(r) : r);
+        (p(r), f(r) && b(v ? v(r) : r));
     }, [d, v, f, b]), C = (0, react_1.useCallback)(e => {
-        f(e.target.value) || p(d(t)), _(e);
+        ;
+        (f(e.target.value) || p(d(t)), _(e));
     }, [t, d, f, _]);
     return ((0, react_1.useEffect)(() => {
         p(d(t));

package/ui/useEvent.d.ts

@@ -0,0 +1 @@
+export declare function useEvent<Fn extends (...args: any[]) => any>(handler: Fn): Fn;