@hypericon/mico 0.5.0 → 0.5.2

package/dist/cjs/components/markdown-editor/MarkdownEditor.js

@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-    };
-})();
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditor = void 0;
 const mithril_1 = __importStar(require("mithril"));

package/dist/cjs/components/menu/Menu.d.ts

@@ -4,6 +4,8 @@ export interface MenuOptions {
     noFlipH?: boolean;
     forceFlipV?: boolean;
     forceFlipH?: boolean;
+    /** Add the menu directly to the element which raised the event */
+    asChild?: boolean;
 }
 export declare const Menu: m.Component<{
     x: number | undefined;

package/dist/cjs/components/menu/menu-manager.d.ts

@@ -2,6 +2,8 @@ import m from "mithril";
 import { MenuOptions } from "./Menu";
 export declare class MenuManager {
     private containerEl;
+    private directParentEl;
+    private directParentWrapperEl;
     private _menuVnode;
     menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
     get menuVnode(): m.Vnode<any, any> | undefined;
@@ -18,5 +20,10 @@ export declare class MenuManager {
      */
     show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
     hide(): void;
+    /**
+     * Set the default behavior for whether menus are added as children of the element that raised the event.
+     * @param asChild
+     */
+    setDefaultAsChild(asChild: boolean): void;
 }
 export declare const menuMgr: MenuManager;

package/dist/cjs/components/menu/menu-manager.js

@@ -25,6 +25,7 @@ class MenuManager {
     constructor() {
         this._menuVnode = new rxjs_1.BehaviorSubject(undefined);
         this.menuVnode$ = this._menuVnode.asObservable();
+        // Set up the default container element for the menu
         this.containerEl = document.createElement("div");
         this.containerEl.classList.add("menu-container");
         document.body.append(this.containerEl);
@@ -49,6 +50,7 @@ class MenuManager {
      * @param menuContents
      */
     show(ev, menuContents, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
             if (this.isOpen) {
@@ -65,15 +67,35 @@ class MenuManager {
                 menuContents,
             ]);
             this._menuVnode.next(menuVnode);
-            mithril_1.default.render(this.containerEl, menuVnode);
-            // console.log("Added menu");
+            // m.render(this.containerEl, menuVnode);
+            const asChild = (_a = options === null || options === void 0 ? void 0 : options.asChild) !== null && _a !== void 0 ? _a : menu_settings_1.MENU_SETTINGS.AS_CHILD;
+            if (asChild && (ev === null || ev === void 0 ? void 0 : ev.target) && ev.target instanceof HTMLElement) {
+                this.directParentEl = ev.target;
+                this.directParentWrapperEl = document.createElement("div");
+                this.directParentEl.append(this.directParentWrapperEl);
+                mithril_1.default.render(this.directParentWrapperEl, menuVnode);
+            }
+            else {
+                mithril_1.default.render(this.containerEl, menuVnode);
+            }
         });
     }
     hide() {
+        var _a;
         this._menuVnode.next(undefined);
         mithril_1.default.render(this.containerEl, []);
+        (_a = this.directParentWrapperEl) === null || _a === void 0 ? void 0 : _a.remove();
+        this.directParentWrapperEl = undefined;
+        this.directParentEl = undefined;
         // console.log("Closed menu");
     }
+    /**
+     * Set the default behavior for whether menus are added as children of the element that raised the event.
+     * @param asChild
+     */
+    setDefaultAsChild(asChild) {
+        menu_settings_1.MENU_SETTINGS.AS_CHILD = asChild;
+    }
 }
 exports.MenuManager = MenuManager;
 exports.menuMgr = new MenuManager();

package/dist/cjs/components/menu/menu-settings.d.ts

@@ -6,4 +6,5 @@ export declare const MENU_SETTINGS: {
     MENU_BUTTON_ICON_CLASS: string;
     MENU_BUTTON_HINT_CLASS: string;
     MENU_SEPARATOR_CLASS: string;
+    AS_CHILD: boolean;
 };

package/dist/cjs/components/menu/menu-settings.js

@@ -9,4 +9,5 @@ exports.MENU_SETTINGS = {
     MENU_BUTTON_ICON_CLASS: "",
     MENU_BUTTON_HINT_CLASS: "",
     MENU_SEPARATOR_CLASS: "",
+    AS_CHILD: false, // Default to not adding the menu as a child of the element that raised the event
 };

package/dist/cjs/components/select/SelectOptionsPanel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import m from "mithril";
 import { Subscription } from "rxjs";
 export declare const SelectOptionsPanel: m.Component<{}, {

package/dist/cjs/components/table/Table.d.ts

@@ -59,10 +59,10 @@ export declare function typedTable<T>(): {
     col: TableColumnDefinitionFn<T>;
     oninit?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
     oncreate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
-    onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): Promise<any> | void;
+    onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | Promise<any>;
     onremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
     onbeforeupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>, old: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): boolean | void;
     onupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
-    view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): m.Children | null | void;
+    view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | m.Children;
 };
 export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;

package/dist/cjs/components/table/Table.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-exports.typedTable = typedTable;
+exports.Table = exports.typedTable = void 0;
 const mithril_1 = __importDefault(require("mithril"));
 /**
  * Build a typed Table component which includes type checking for column definitions
@@ -28,6 +27,7 @@ function typedTable() {
     };
     return Object.assign(Object.assign({}, typedTable), { col });
 }
+exports.typedTable = typedTable;
 exports.Table = {
     view({ attrs }) {
         var _a, _b, _c, _d;

package/dist/cjs/components/toast/toast.js

@@ -15,29 +15,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-    };
-})();
+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.DefaultToastOptions = void 0;
-exports.toast = toast;
+exports.toast = exports.DefaultToastOptions = void 0;
 const toastify_js_1 = __importStar(require("toastify-js"));
 const mithril_1 = __importDefault(require("mithril"));
 require("toastify-js/src/toastify.css");
@@ -69,3 +58,4 @@ function toast(message, options) {
         hide: () => toastify.hideToast(),
     };
 }
+exports.toast = toast;

package/dist/cjs/components/tooltip/tooltip-function.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = tooltip;
-exports.tooltipSpread = tooltipSpread;
+exports.tooltipSpread = exports.tooltip = void 0;
 const tooltip_defaults_1 = require("./tooltip-defaults");
 /**
  * Display a tooltip using the given mouse event.
@@ -63,6 +62,7 @@ function tooltip(ev, tooltip, opts) {
     };
     target.addEventListener("mouseleave", clearFn);
 }
+exports.tooltip = tooltip;
 /**
  * Return an object that can be spread into an element's attrs to add a tooltip using the mouseenter event
  *
@@ -85,6 +85,7 @@ function tooltipSpread(value, opts) {
         onmouseenter: (ev) => tooltip(ev, value, opts),
     };
 }
+exports.tooltipSpread = tooltipSpread;
 /**
  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips

package/dist/cjs/components/tree/Tree.d.ts

@@ -7,11 +7,11 @@ export declare const Tree: m.Component<{
     /** The root list of nodes to display in the tree (circular references will crash) */
     nodes: TreeNode<any>[];
     /** Enable drag and drop reordering */
-    enableReordering?: boolean;
+    enableReordering?: boolean | undefined;
     /** Enable expanding/collapsing of nodes with children */
-    enableToggling?: boolean;
+    enableToggling?: boolean | undefined;
     /** Enable debug logging of certain events */
-    enableLogging?: boolean;
+    enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
     ontoggle?: ((toggle: {
         node: TreeNode<any>;
@@ -30,23 +30,23 @@ export declare const Tree: m.Component<{
         above: boolean;
     }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
-    emptyChildrenMessage?: string;
+    emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed node */
-    collapsedIcon?: m.Vnode<any, any>;
+    collapsedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default icon for an expanded node */
-    expandedIcon?: m.Vnode<any, any>;
+    expandedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default toggle icon for a node that cannot toggle */
-    noToggleIcon?: m.Vnode<any, any>;
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
-    toggleExpansionWithLabel?: boolean;
+    toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
-    nestingWidth?: string;
+    nestingWidth?: string | undefined;
     /** Optionally override the default toggle button width */
-    toggleButtonWidth?: string;
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
-    class?: string;
+    class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
-    style?: string;
+    style?: string | undefined;
 }, {
     isReordering: boolean;
     thisEl: Element;
@@ -62,46 +62,46 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
     /** The root list of nodes to display in the tree (circular references will crash) */
     nodes: TreeNode<TNodeData>[];
     /** Enable drag and drop reordering */
-    enableReordering?: boolean;
+    enableReordering?: boolean | undefined;
     /** Enable expanding/collapsing of nodes with children */
-    enableToggling?: boolean;
+    enableToggling?: boolean | undefined;
     /** Enable debug logging of certain events */
-    enableLogging?: boolean;
+    enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
-    ontoggle?: (toggle: {
+    ontoggle?: ((toggle: {
         node: TreeNode<TNodeData>;
         expanded: boolean;
         recursive: boolean;
-    }) => void;
+    }) => void) | undefined;
     /** Function called when a node label is clicked */
-    onclick?: (click: {
+    onclick?: ((click: {
         ev: MouseEvent;
         node: TreeNode<TNodeData>;
-    }) => void;
+    }) => void) | undefined;
     /** Function called when a node has been dragged to a new position in the tree */
-    onreorder?: (reorder: {
+    onreorder?: ((reorder: {
         moved: TNodeData;
         target: TNodeData;
         above: boolean;
-    }) => void;
+    }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
-    emptyChildrenMessage?: string;
+    emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed node */
-    collapsedIcon?: m.Vnode<any, any>;
+    collapsedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default icon for an expanded node */
-    expandedIcon?: m.Vnode<any, any>;
+    expandedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default toggle icon for a node that cannot toggle */
-    noToggleIcon?: m.Vnode<any, any>;
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
-    toggleExpansionWithLabel?: boolean;
+    toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
-    nestingWidth?: string;
+    nestingWidth?: string | undefined;
     /** Optionally override the default toggle button width */
-    toggleButtonWidth?: string;
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
-    class?: string;
+    class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
-    style?: string;
+    style?: string | undefined;
 }, {
     isReordering: boolean;
     thisEl: Element;

package/dist/cjs/components/tree/Tree.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tree = void 0;
-exports.createTree = createTree;
+exports.createTree = exports.Tree = void 0;
 const utils_1 = require("@hypericon/utils");
 const mithril_1 = __importDefault(require("mithril"));
 const icon_1 = require("../icon");
@@ -168,7 +167,7 @@ function createTree() {
                     }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
                     (0, mithril_1.default)(".mico-tree-label", {
                         class: `${targettingDragClass}`,
-                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;", // width: calc(100% - 1.5rem);
+                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
                         draggable: enableReordering && (node.draggable !== false),
                         onclick: (ev) => {
                             var _a;
@@ -227,3 +226,4 @@ function createTree() {
     };
     return Tree;
 }
+exports.createTree = createTree;

package/dist/cjs/components/tree/tree-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allTreeDescendants = allTreeDescendants;
+exports.allTreeDescendants = void 0;
 /**
  * Recursively find the list of all descendants of the given node.
  *
@@ -19,3 +19,4 @@ function allTreeDescendants(node) {
     }
     return descendants;
 }
+exports.allTreeDescendants = allTreeDescendants;

package/dist/cjs/utils/date-time.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateToHtml = dateToHtml;
-exports.dateToHtmlUTC = dateToHtmlUTC;
+exports.dateToHtmlUTC = exports.dateToHtml = void 0;
 function dateToHtml(d) {
     if (d === undefined)
         return undefined;
@@ -13,6 +12,7 @@ function dateToHtml(d) {
         String(d.getDate()).padStart(2, "0"),
     ].join("-");
 }
+exports.dateToHtml = dateToHtml;
 function dateToHtmlUTC(d) {
     if (d === undefined)
         return undefined;
@@ -24,3 +24,4 @@ function dateToHtmlUTC(d) {
         String(d.getUTCDate()).padStart(2, "0"),
     ].join("-");
 }
+exports.dateToHtmlUTC = dateToHtmlUTC;

package/dist/cjs/utils/dom.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.coordsWithinElement = coordsWithinElement;
-exports.mouseWithinElement = mouseWithinElement;
+exports.mouseWithinElement = exports.coordsWithinElement = void 0;
 /**
  *
  * @param x
@@ -16,6 +15,7 @@ function coordsWithinElement(x, y, element, strict = false) {
         ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
         : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
 }
+exports.coordsWithinElement = coordsWithinElement;
 /**
  * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
  * @param ev
@@ -30,3 +30,4 @@ function mouseWithinElement(ev, element) {
         (ev.clientX <= elementRect.right);
     return isWithin;
 }
+exports.mouseWithinElement = mouseWithinElement;

package/dist/cjs/utils/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dragEventFiles = dragEventFiles;
+exports.dragEventFiles = void 0;
 function dragEventFiles(ev) {
     var _a, _b, _c;
     const files = [];
@@ -26,3 +26,4 @@ function dragEventFiles(ev) {
     }
     return files;
 }
+exports.dragEventFiles = dragEventFiles;

package/dist/esm/components/markdown-editor/MarkdownEditor.js

@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-    };
-})();
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditor = void 0;
 const mithril_1 = __importStar(require("mithril"));

package/dist/esm/components/menu/Menu.d.ts

@@ -4,6 +4,8 @@ export interface MenuOptions {
     noFlipH?: boolean;
     forceFlipV?: boolean;
     forceFlipH?: boolean;
+    /** Add the menu directly to the element which raised the event */
+    asChild?: boolean;
 }
 export declare const Menu: m.Component<{
     x: number | undefined;

package/dist/esm/components/menu/menu-manager.d.ts

@@ -2,6 +2,8 @@ import m from "mithril";
 import { MenuOptions } from "./Menu";
 export declare class MenuManager {
     private containerEl;
+    private directParentEl;
+    private directParentWrapperEl;
     private _menuVnode;
     menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
     get menuVnode(): m.Vnode<any, any> | undefined;
@@ -18,5 +20,10 @@ export declare class MenuManager {
      */
     show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
     hide(): void;
+    /**
+     * Set the default behavior for whether menus are added as children of the element that raised the event.
+     * @param asChild
+     */
+    setDefaultAsChild(asChild: boolean): void;
 }
 export declare const menuMgr: MenuManager;

package/dist/esm/components/menu/menu-manager.js

@@ -25,6 +25,7 @@ class MenuManager {
     constructor() {
         this._menuVnode = new rxjs_1.BehaviorSubject(undefined);
         this.menuVnode$ = this._menuVnode.asObservable();
+        // Set up the default container element for the menu
         this.containerEl = document.createElement("div");
         this.containerEl.classList.add("menu-container");
         document.body.append(this.containerEl);
@@ -49,6 +50,7 @@ class MenuManager {
      * @param menuContents
      */
     show(ev, menuContents, options) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
             if (this.isOpen) {
@@ -65,15 +67,35 @@ class MenuManager {
                 menuContents,
             ]);
             this._menuVnode.next(menuVnode);
-            mithril_1.default.render(this.containerEl, menuVnode);
-            // console.log("Added menu");
+            // m.render(this.containerEl, menuVnode);
+            const asChild = (_a = options === null || options === void 0 ? void 0 : options.asChild) !== null && _a !== void 0 ? _a : menu_settings_1.MENU_SETTINGS.AS_CHILD;
+            if (asChild && (ev === null || ev === void 0 ? void 0 : ev.target) && ev.target instanceof HTMLElement) {
+                this.directParentEl = ev.target;
+                this.directParentWrapperEl = document.createElement("div");
+                this.directParentEl.append(this.directParentWrapperEl);
+                mithril_1.default.render(this.directParentWrapperEl, menuVnode);
+            }
+            else {
+                mithril_1.default.render(this.containerEl, menuVnode);
+            }
         });
     }
     hide() {
+        var _a;
         this._menuVnode.next(undefined);
         mithril_1.default.render(this.containerEl, []);
+        (_a = this.directParentWrapperEl) === null || _a === void 0 ? void 0 : _a.remove();
+        this.directParentWrapperEl = undefined;
+        this.directParentEl = undefined;
         // console.log("Closed menu");
     }
+    /**
+     * Set the default behavior for whether menus are added as children of the element that raised the event.
+     * @param asChild
+     */
+    setDefaultAsChild(asChild) {
+        menu_settings_1.MENU_SETTINGS.AS_CHILD = asChild;
+    }
 }
 exports.MenuManager = MenuManager;
 exports.menuMgr = new MenuManager();

package/dist/esm/components/menu/menu-settings.d.ts

@@ -6,4 +6,5 @@ export declare const MENU_SETTINGS: {
     MENU_BUTTON_ICON_CLASS: string;
     MENU_BUTTON_HINT_CLASS: string;
     MENU_SEPARATOR_CLASS: string;
+    AS_CHILD: boolean;
 };

package/dist/esm/components/menu/menu-settings.js

@@ -9,4 +9,5 @@ exports.MENU_SETTINGS = {
     MENU_BUTTON_ICON_CLASS: "",
     MENU_BUTTON_HINT_CLASS: "",
     MENU_SEPARATOR_CLASS: "",
+    AS_CHILD: false, // Default to not adding the menu as a child of the element that raised the event
 };

package/dist/esm/components/select/SelectOptionsPanel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import m from "mithril";
 import { Subscription } from "rxjs";
 export declare const SelectOptionsPanel: m.Component<{}, {

package/dist/esm/components/table/Table.d.ts

@@ -59,10 +59,10 @@ export declare function typedTable<T>(): {
     col: TableColumnDefinitionFn<T>;
     oninit?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
     oncreate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
-    onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): Promise<any> | void;
+    onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | Promise<any>;
     onremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
     onbeforeupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>, old: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): boolean | void;
     onupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
-    view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): m.Children | null | void;
+    view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | m.Children;
 };
 export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;

package/dist/esm/components/table/Table.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-exports.typedTable = typedTable;
+exports.Table = exports.typedTable = void 0;
 const mithril_1 = __importDefault(require("mithril"));
 /**
  * Build a typed Table component which includes type checking for column definitions
@@ -28,6 +27,7 @@ function typedTable() {
     };
     return Object.assign(Object.assign({}, typedTable), { col });
 }
+exports.typedTable = typedTable;
 exports.Table = {
     view({ attrs }) {
         var _a, _b, _c, _d;

package/dist/esm/components/toast/toast.js

@@ -15,29 +15,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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;
-    };
-})();
+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.DefaultToastOptions = void 0;
-exports.toast = toast;
+exports.toast = exports.DefaultToastOptions = void 0;
 const toastify_js_1 = __importStar(require("toastify-js"));
 const mithril_1 = __importDefault(require("mithril"));
 require("toastify-js/src/toastify.css");
@@ -69,3 +58,4 @@ function toast(message, options) {
         hide: () => toastify.hideToast(),
     };
 }
+exports.toast = toast;

package/dist/esm/components/tooltip/tooltip-function.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tooltip = tooltip;
-exports.tooltipSpread = tooltipSpread;
+exports.tooltipSpread = exports.tooltip = void 0;
 const tooltip_defaults_1 = require("./tooltip-defaults");
 /**
  * Display a tooltip using the given mouse event.
@@ -63,6 +62,7 @@ function tooltip(ev, tooltip, opts) {
     };
     target.addEventListener("mouseleave", clearFn);
 }
+exports.tooltip = tooltip;
 /**
  * Return an object that can be spread into an element's attrs to add a tooltip using the mouseenter event
  *
@@ -85,6 +85,7 @@ function tooltipSpread(value, opts) {
         onmouseenter: (ev) => tooltip(ev, value, opts),
     };
 }
+exports.tooltipSpread = tooltipSpread;
 /**
  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips

package/dist/esm/components/tree/Tree.d.ts

@@ -7,11 +7,11 @@ export declare const Tree: m.Component<{
     /** The root list of nodes to display in the tree (circular references will crash) */
     nodes: TreeNode<any>[];
     /** Enable drag and drop reordering */
-    enableReordering?: boolean;
+    enableReordering?: boolean | undefined;
     /** Enable expanding/collapsing of nodes with children */
-    enableToggling?: boolean;
+    enableToggling?: boolean | undefined;
     /** Enable debug logging of certain events */
-    enableLogging?: boolean;
+    enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
     ontoggle?: ((toggle: {
         node: TreeNode<any>;
@@ -30,23 +30,23 @@ export declare const Tree: m.Component<{
         above: boolean;
     }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
-    emptyChildrenMessage?: string;
+    emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed node */
-    collapsedIcon?: m.Vnode<any, any>;
+    collapsedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default icon for an expanded node */
-    expandedIcon?: m.Vnode<any, any>;
+    expandedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default toggle icon for a node that cannot toggle */
-    noToggleIcon?: m.Vnode<any, any>;
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
-    toggleExpansionWithLabel?: boolean;
+    toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
-    nestingWidth?: string;
+    nestingWidth?: string | undefined;
     /** Optionally override the default toggle button width */
-    toggleButtonWidth?: string;
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
-    class?: string;
+    class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
-    style?: string;
+    style?: string | undefined;
 }, {
     isReordering: boolean;
     thisEl: Element;
@@ -62,46 +62,46 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
     /** The root list of nodes to display in the tree (circular references will crash) */
     nodes: TreeNode<TNodeData>[];
     /** Enable drag and drop reordering */
-    enableReordering?: boolean;
+    enableReordering?: boolean | undefined;
     /** Enable expanding/collapsing of nodes with children */
-    enableToggling?: boolean;
+    enableToggling?: boolean | undefined;
     /** Enable debug logging of certain events */
-    enableLogging?: boolean;
+    enableLogging?: boolean | undefined;
     /** Function called when a node with children is toggled */
-    ontoggle?: (toggle: {
+    ontoggle?: ((toggle: {
         node: TreeNode<TNodeData>;
         expanded: boolean;
         recursive: boolean;
-    }) => void;
+    }) => void) | undefined;
     /** Function called when a node label is clicked */
-    onclick?: (click: {
+    onclick?: ((click: {
         ev: MouseEvent;
         node: TreeNode<TNodeData>;
-    }) => void;
+    }) => void) | undefined;
     /** Function called when a node has been dragged to a new position in the tree */
-    onreorder?: (reorder: {
+    onreorder?: ((reorder: {
         moved: TNodeData;
         target: TNodeData;
         above: boolean;
-    }) => void;
+    }) => void) | undefined;
     /** Optional message to display in defined but empty children lists */
-    emptyChildrenMessage?: string;
+    emptyChildrenMessage?: string | undefined;
     /** Optionally override the default icon for a collapsed node */
-    collapsedIcon?: m.Vnode<any, any>;
+    collapsedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default icon for an expanded node */
-    expandedIcon?: m.Vnode<any, any>;
+    expandedIcon?: m.Vnode<any, any> | undefined;
     /** Optionally override the default toggle icon for a node that cannot toggle */
-    noToggleIcon?: m.Vnode<any, any>;
+    noToggleIcon?: m.Vnode<any, any> | undefined;
     /** Optionally enable toggling of expansion nodes by clicking their labels */
-    toggleExpansionWithLabel?: boolean;
+    toggleExpansionWithLabel?: boolean | undefined;
     /** Optionally override the default nesting width */
-    nestingWidth?: string;
+    nestingWidth?: string | undefined;
     /** Optionally override the default toggle button width */
-    toggleButtonWidth?: string;
+    toggleButtonWidth?: string | undefined;
     /** Optional CSS classes to apply to the root div */
-    class?: string;
+    class?: string | undefined;
     /** Optional CSS styles to apply to the root div */
-    style?: string;
+    style?: string | undefined;
 }, {
     isReordering: boolean;
     thisEl: Element;

package/dist/esm/components/tree/Tree.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tree = void 0;
-exports.createTree = createTree;
+exports.createTree = exports.Tree = void 0;
 const utils_1 = require("@hypericon/utils");
 const mithril_1 = __importDefault(require("mithril"));
 const icon_1 = require("../icon");
@@ -168,7 +167,7 @@ function createTree() {
                     }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
                     (0, mithril_1.default)(".mico-tree-label", {
                         class: `${targettingDragClass}`,
-                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;", // width: calc(100% - 1.5rem);
+                        style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
                         draggable: enableReordering && (node.draggable !== false),
                         onclick: (ev) => {
                             var _a;
@@ -227,3 +226,4 @@ function createTree() {
     };
     return Tree;
 }
+exports.createTree = createTree;

package/dist/esm/components/tree/tree-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allTreeDescendants = allTreeDescendants;
+exports.allTreeDescendants = void 0;
 /**
  * Recursively find the list of all descendants of the given node.
  *
@@ -19,3 +19,4 @@ function allTreeDescendants(node) {
     }
     return descendants;
 }
+exports.allTreeDescendants = allTreeDescendants;

package/dist/esm/utils/date-time.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateToHtml = dateToHtml;
-exports.dateToHtmlUTC = dateToHtmlUTC;
+exports.dateToHtmlUTC = exports.dateToHtml = void 0;
 function dateToHtml(d) {
     if (d === undefined)
         return undefined;
@@ -13,6 +12,7 @@ function dateToHtml(d) {
         String(d.getDate()).padStart(2, "0"),
     ].join("-");
 }
+exports.dateToHtml = dateToHtml;
 function dateToHtmlUTC(d) {
     if (d === undefined)
         return undefined;
@@ -24,3 +24,4 @@ function dateToHtmlUTC(d) {
         String(d.getUTCDate()).padStart(2, "0"),
     ].join("-");
 }
+exports.dateToHtmlUTC = dateToHtmlUTC;

package/dist/esm/utils/dom.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.coordsWithinElement = coordsWithinElement;
-exports.mouseWithinElement = mouseWithinElement;
+exports.mouseWithinElement = exports.coordsWithinElement = void 0;
 /**
  *
  * @param x
@@ -16,6 +15,7 @@ function coordsWithinElement(x, y, element, strict = false) {
         ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
         : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
 }
+exports.coordsWithinElement = coordsWithinElement;
 /**
  * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
  * @param ev
@@ -30,3 +30,4 @@ function mouseWithinElement(ev, element) {
         (ev.clientX <= elementRect.right);
     return isWithin;
 }
+exports.mouseWithinElement = mouseWithinElement;

package/dist/esm/utils/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dragEventFiles = dragEventFiles;
+exports.dragEventFiles = void 0;
 function dragEventFiles(ev) {
     var _a, _b, _c;
     const files = [];
@@ -26,3 +26,4 @@ function dragEventFiles(ev) {
     }
     return files;
 }
+exports.dragEventFiles = dragEventFiles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",