@hypericon/mico 0.3.10 → 0.3.12

package/README.md

@@ -15,7 +15,7 @@ $ npm i @hypericon/mico
 
 ## Usage
 
-**[View the usage and examples documentation here.](https://hypericon-mico.netlify.app)**
+**[View usage documentation and examples here.](https://hypericon-mico.netlify.app)**
 
 ### Example
 

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from "./markdown-editor";
 export * from "./menu";
 export * from "./pagination";
 export * from "./table";
+export * from "./tree";

package/dist/components/index.js

@@ -32,4 +32,4 @@ __exportStar(require("./pagination"), exports);
 __exportStar(require("./table"), exports);
 // export * from "./toast";
 // export * from "./tooltip";
-// export * from "./tree";
+__exportStar(require("./tree"), exports);

package/dist/components/pagination/Pagination.js

@@ -37,7 +37,7 @@ exports.Pagination = {
             }, [
                 pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first
                     ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first)
-                    : (0, mithril_1.default)(icon_1.Icon, { fas: "backward-step" }),
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angles-left" }),
             ]) : [],
             (attrs.prev !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
                 disabled: attrs.isAtStart,
@@ -64,7 +64,7 @@ exports.Pagination = {
             }, [
                 pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last
                     ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last)
-                    : (0, mithril_1.default)(icon_1.Icon, { fas: "forward-step" }),
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angles-right" }),
             ]) : [],
             (layout === "middle" || layout === "left") ? (0, mithril_1.default)("", { style: "flex: 1;" }) : [],
         ]);

package/dist/components/select/Select.d.ts

@@ -0,0 +1,44 @@
+import m from "mithril";
+type SelectOption = m.Vnode<{
+    /** The "value" of the option */
+    value: string;
+    /** Optionally disable selection of the option */
+    disabled?: boolean;
+    /** The displayed value as text, to enable the user to select the value by label with the keyboard */
+    text?: string;
+}, any>;
+/**
+ * A dropdown select box that takes Mithril Vnodes as options
+ */
+export declare const Select: m.Component<{
+    /**
+     * The list of vnodes to display as options. Attrs:
+     * - `value` (required)
+     * - `disabled` (optional)
+     * - `text` (optional)
+     */
+    options: SelectOption[];
+    /** The selected value to highlight */
+    value: string;
+    /** Function called with the option value when an option is selected */
+    oninput?: (value: string) => any;
+    onfocus?: (ev: FocusEvent) => any;
+    onblur?: (ev: FocusEvent) => any;
+    /** Space-separated CSS classes to apply to the component */
+    class?: string;
+    /** CSS styles to apply to the component */
+    style?: string;
+    placeholder?: string | m.Vnode<any, any>;
+    disabled?: boolean;
+    multiple?: boolean;
+    size?: number;
+    /** Optionally specify an ID in the parent, otherwise one is created internally */
+    id?: string;
+}, {
+    id: string;
+    /** The last position of the select within the viewport */
+    lastViewportRect: DOMRect;
+    /** The current value of the disabled attr */
+    disabled: boolean | undefined;
+}>;
+export {};

package/dist/components/select/Select.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const select_options_manager_1 = require("./select-options-manager");
+const optsPanelMgr = new select_options_manager_1.SelectOptionsManager();
+/**
+ * A dropdown select box that takes Mithril Vnodes as options
+ */
+exports.Select = {
+    oninit({ attrs }) {
+        this.id = attrs.id || `select-${Math.random().toString().replace(".", "")}`;
+        this.lastViewportRect = new DOMRect();
+        this.disabled = this.disabled;
+    },
+    onupdate({ dom }) {
+        var _a;
+        // Store the last known position of the component within the viewport
+        // to determine if the options should open upwards or downwards
+        const rect = dom.getBoundingClientRect();
+        rect.y += (((_a = dom.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.pageYOffset) || 0);
+        // const top = dom.getBoundingClientRect().top + (dom.ownerDocument.defaultView?.pageYOffset || 0);
+        this.lastViewportRect = rect;
+        optsPanelMgr.move(this.id, this.lastViewportRect);
+    },
+    view({ attrs }) {
+        var _a;
+        this.disabled = attrs.disabled;
+        const select = (value) => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = attrs.oninput) === null || _a === void 0 ? void 0 : _a.call(attrs, value);
+            // this.isOpen = false;
+            // attrs.onclose?.();
+            optsPanelMgr.dismiss();
+        };
+        const open = (options, value) => {
+            if (this.disabled)
+                return;
+            optsPanelMgr.open({
+                id: this.id,
+                options: options,
+                selectRect: this.lastViewportRect,
+                selectedIndex: options.findIndex(o => o.attrs.value === (value || attrs.value)),
+                select: (value) => {
+                    select(value);
+                },
+                onDismiss: () => {
+                    var _a;
+                    (_a = document.getElementById(this.id)) === null || _a === void 0 ? void 0 : _a.focus();
+                },
+            });
+        };
+        const dismiss = () => {
+            // this.isOpen = false;
+            optsPanelMgr.dismiss();
+            // attrs.onclose?.();
+        };
+        // The main "select box" div
+        return (0, mithril_1.default)(".input.no-select", {
+            id: this.id,
+            tabindex: 0,
+            style: `height: 2rem; ${attrs.style || ""} padding-top: 0; padding-bottom: 0; position: relative;`,
+            class: `${attrs.class || ""} flex items-center ${attrs.disabled ? "disabled" : ""} ${attrs.disabled ? "cursor-auto" : "cursor-pointer"}`,
+            onclick: (ev) => {
+                // ev.stopPropagation();
+                if (!optsPanelMgr.isOpen(this.id))
+                    open(attrs.options, attrs.value);
+                // ? this.dismiss()
+                // : 
+            },
+            onkeydown: (ev) => {
+                if (ev.code === "Enter") {
+                    open(attrs.options, attrs.value);
+                }
+            },
+            onfocus: (ev) => { var _a; return (_a = attrs.onfocus) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            onblur: (ev) => {
+                var _a;
+                if (!optsPanelMgr.isOpen(this.id)) {
+                    (_a = attrs.onblur) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+                }
+            }
+        }, [
+            // The selected option within the select box div
+            (0, mithril_1.default)(".flex-1.overflow-x-hidden", {}, [
+                (0, mithril_1.default)(".overflow-x-hidden", {
+                    key: attrs.value,
+                }, [
+                    (_a = attrs.options.find(o => o.attrs.value === attrs.value)) !== null && _a !== void 0 ? _a : ((attrs.placeholder && typeof attrs.placeholder === "string")
+                        ? (0, mithril_1.default)("span.hint", attrs.placeholder)
+                        : attrs.placeholder),
+                ]),
+            ]),
+            // Open/close down/up arrow in the input box
+            (0, mithril_1.default)(".ml-1", {
+                class: this.disabled ? "text-gray-500" : "",
+            }, [
+                // optsPanelSvc.isOpen(this.id)
+                //   ? m(".h-full.flex.items-center", { key: "up" }, m("i.fas.fa-caret-up"))
+                //   : m(".h-full.flex.items-center", { key: "down" }, m("i.fas.fa-caret-down")),
+                (0, mithril_1.default)(".h-full.flex.items-center", [
+                    optsPanelMgr.isOpen(this.id)
+                        ? (0, mithril_1.default)(`i.fas.fa-caret-up`)
+                        : (0, mithril_1.default)(`i.fas.fa-caret-down`),
+                ]),
+            ]),
+        ]);
+    },
+};

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

@@ -0,0 +1,21 @@
+/// <reference types="node" />
+import m from "mithril";
+import { Subscription } from "rxjs";
+export declare const SelectOptionsPanel: m.Component<{}, {
+    subs: Subscription;
+    isOpen: boolean;
+    /** If the options panel should open upwards */
+    isReversed: boolean;
+    /** If the select input is narrow and near the right viewport edge, anchor the options panel on the right edge */
+    isAnchoredRight: boolean;
+    highlightedIndex: number;
+    ensureVisible: (index: number, up: boolean) => void;
+    /** A current string "searched for" when the user types characters when the panel is open */
+    textSearch: string;
+    /** A timer used to clear the text search */
+    keyIdleTimer: NodeJS.Timeout | undefined;
+    /** On pressing a letter key, update the text search and possibly select a new option */
+    handleTextSearch: (ev: KeyboardEvent) => void;
+    /** Clear the text search string and idle timer */
+    clearTextSearch: () => void;
+}>;

package/dist/components/select/SelectOptionsPanel.js

@@ -0,0 +1,174 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOptionsPanel = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const rxjs_1 = require("rxjs");
+const constants_1 = require("./constants");
+const select_options_manager_1 = require("./select-options-manager");
+// const logger = getLogger("SelectOptionsPanel");
+const DEBUG = false;
+const optsPanelMgr = new select_options_manager_1.SelectOptionsManager();
+const MIN_OPTIONS_PANEL_WIDTH = 200;
+const OPTIONS_PANEL_ID = "select-options-panel";
+const TEXT_IDLE_TIMEOUT = 1000;
+exports.SelectOptionsPanel = {
+    oninit() {
+        this.subs = new rxjs_1.Subscription();
+        this.isOpen = false;
+        this.isReversed = false;
+        this.isAnchoredRight = false;
+        this.highlightedIndex = 0;
+        // this.highlightIndex = (index) => {
+        //   this.highlightedIndex = index;
+        //   this.ensureVisible(index, false);
+        // };
+        this.ensureVisible = (index, up) => {
+            const panel = document.getElementById(OPTIONS_PANEL_ID);
+            const container = panel === null || panel === void 0 ? void 0 : panel.children.item(0);
+            const optionElems = container === null || container === void 0 ? void 0 : container.children;
+            const highlightedElem = optionElems === null || optionElems === void 0 ? void 0 : optionElems.item(index);
+            if (up) {
+                if (panel.getBoundingClientRect().top > highlightedElem.getBoundingClientRect().top) {
+                    highlightedElem === null || highlightedElem === void 0 ? void 0 : highlightedElem.scrollIntoView(true);
+                }
+            }
+            else {
+                if (panel.getBoundingClientRect().bottom < highlightedElem.getBoundingClientRect().bottom) {
+                    highlightedElem === null || highlightedElem === void 0 ? void 0 : highlightedElem.scrollIntoView(false);
+                }
+            }
+            // const highlightedRect = highlightedElem?.getBoundingClientRect();
+            // if (highlightedRect) {
+            //   logger.debug("ensure visible rect:", highlightedRect);
+            //   panel?.scr
+            // }
+        };
+        this.subs.add(optsPanelMgr.panel$.subscribe(panelDef => {
+            if (panelDef) {
+                // If the available space is less than the approximate size of the options panel, open upwards instead
+                this.isReversed = (window.innerHeight - panelDef.selectRect.bottom) < Math.min((panelDef.options.length * constants_1.OPTION_APPROX_HEIGHT), constants_1.MAX_OPTION_PANEL_HEIGHT);
+                // TODO: calculate is anchored right
+                if (!this.isOpen) {
+                    DEBUG && console.log("opening select options panel");
+                    const index = panelDef.selectedIndex;
+                    this.highlightedIndex = (index !== undefined && index !== -1) ? index : 0;
+                    this.isOpen = true;
+                    setTimeout(() => {
+                        this.ensureVisible(this.highlightedIndex, false);
+                    }, 100);
+                }
+            }
+            else {
+                this.isOpen = false;
+            }
+            mithril_1.default.redraw();
+        }));
+        this.textSearch = "";
+        this.handleTextSearch = (ev) => {
+            if (optsPanelMgr.panel === undefined)
+                return;
+            const key = ev.key.toLowerCase();
+            this.textSearch += key;
+            // If the idle timeout elapses, clear the current text search
+            if (this.keyIdleTimer) {
+                clearTimeout(this.keyIdleTimer);
+            }
+            this.keyIdleTimer = setTimeout(() => {
+                this.clearTextSearch();
+            }, TEXT_IDLE_TIMEOUT);
+            // Find the index of the option whose text search string starts with the current search term
+            const index = optsPanelMgr.panel.options.findIndex(o => {
+                return o.attrs.text && o.attrs.text.toLowerCase().startsWith(this.textSearch);
+            });
+            if (index >= 0 && index <= optsPanelMgr.panel.options.length - 1) {
+                const up = this.highlightedIndex > index;
+                this.highlightedIndex = index;
+                this.ensureVisible(this.highlightedIndex, up);
+            }
+        };
+        this.clearTextSearch = () => {
+            if (this.keyIdleTimer) {
+                clearTimeout(this.keyIdleTimer);
+            }
+            this.keyIdleTimer = undefined;
+            this.textSearch = "";
+        };
+    },
+    onremove() {
+        this.subs.unsubscribe();
+    },
+    onupdate() {
+        var _a;
+        (_a = document.getElementById(OPTIONS_PANEL_ID)) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    view() {
+        if (optsPanelMgr.panel === undefined || !this.isOpen)
+            return;
+        const panel = optsPanelMgr.panel;
+        const rect = panel.selectRect;
+        const width = Math.max(rect.width, MIN_OPTIONS_PANEL_WIDTH);
+        DEBUG && console.log("Drawing select options panel for select rect:", rect);
+        return (0, mithril_1.default)(".bg-white.text-dark.dark:bg-black.dark:text-white.shadow-lg.border.border-grey-500", {
+            id: OPTIONS_PANEL_ID,
+            tabindex: -1,
+            style: `position: fixed; left: ${rect.left}px; width: ${width}px; ${this.isReversed ? `bottom: ${document.documentElement.clientHeight - rect.top}px;` : `top: ${rect.bottom}px;`}
+          min-width: ${MIN_OPTIONS_PANEL_WIDTH}px; max-height: ${constants_1.MAX_OPTION_PANEL_HEIGHT}px; overflow-y: auto; z-index: 100; outline: none;`,
+            onkeydown: (ev) => {
+                if (ev.code === "ArrowUp") {
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    this.clearTextSearch();
+                    this.ensureVisible(this.highlightedIndex, true);
+                    ev.preventDefault(); // Navigating items in the list scrolls the page
+                }
+                else if (ev.code === "ArrowDown") {
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, panel.options.length - 1);
+                    this.clearTextSearch();
+                    this.ensureVisible(this.highlightedIndex, false);
+                    ev.preventDefault(); // Navigating items in the list scrolls the page
+                }
+                else if (ev.code === "Enter") {
+                    optsPanelMgr.selectIndex(this.highlightedIndex);
+                }
+                else if (ev.code === "Escape") {
+                    optsPanelMgr.dismiss();
+                    ev.stopPropagation();
+                }
+                else if (/^[a-z]$/i.test(ev.key)) { // a-z
+                    this.handleTextSearch(ev);
+                }
+            },
+            onfocusout: (ev) => {
+                optsPanelMgr.dismiss();
+            },
+        }, [
+            // The container of the option buttons, may be larger than the displayed panel
+            (0, mithril_1.default)("", {
+                style: ``,
+                class: `flex flex-col items-stretch`,
+            }, [
+                ...optsPanelMgr.panel.options.map((optionVnode, optionIndex) => {
+                    const value = optionVnode.attrs.value;
+                    const disabled = optionVnode.attrs.disabled === true;
+                    // An option value button
+                    return (0, mithril_1.default)(`button`, {
+                        key: value,
+                        disabled,
+                        class: `px-2 py-1 flex items-start ${this.highlightedIndex === optionIndex ? "bg-gray-200 dark:bg-black-light" : ""}`,
+                        onclick: (ev) => {
+                            ev.stopPropagation();
+                            if (disabled)
+                                return;
+                            // this.select(value);
+                            optsPanelMgr.selectIndex(optionIndex);
+                        },
+                        onmousedown: (ev) => ev.preventDefault(),
+                        onmouseover: (ev) => this.highlightedIndex = optionIndex,
+                    }, optionVnode);
+                }),
+            ]),
+        ]);
+    }
+};

package/dist/components/select/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_OPTION_PANEL_HEIGHT: 320;
+export declare const OPTION_APPROX_HEIGHT: 30;

package/dist/components/select/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPTION_APPROX_HEIGHT = exports.MAX_OPTION_PANEL_HEIGHT = void 0;
+exports.MAX_OPTION_PANEL_HEIGHT = 320;
+exports.OPTION_APPROX_HEIGHT = 30;

package/dist/components/select/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./SelectOptionsPanel";

package/dist/components/select/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Select"), exports);
+__exportStar(require("./SelectOptionsPanel"), exports);
+// export * from "./select-options-panel-manager";

package/dist/components/select/select-options-manager.d.ts

@@ -0,0 +1,39 @@
+import m from "mithril";
+export type SelectOptionsPanelDef = {
+    /**  */
+    id: string;
+    /** The bounding client rect of the select input element within the viewport */
+    selectRect: DOMRect;
+    /** The list of vnodes to display as options */
+    options: m.Vnode<{
+        /** The "value" of the option */
+        value: string;
+        /** Optionally disable selection of the option */
+        disabled?: boolean;
+        /** The displayed value as text, to enable the user to select the value by label with the keyboard */
+        text?: string;
+    }, any>[];
+    /**  */
+    selectedIndex: number;
+    /** Function to notify the select input of the slected value in the options panel */
+    select: (value: string) => void;
+    /** Function called after the options panel has been dismissed */
+    onDismiss?: () => void;
+};
+/**
+ * Manager providing the link between custom select box input components
+ * and the layout-level select options panel
+ */
+export declare class SelectOptionsManager {
+    private _panel;
+    panel$: import("rxjs").Observable<SelectOptionsPanelDef | undefined>;
+    get panel(): SelectOptionsPanelDef | undefined;
+    private lastPanel;
+    constructor();
+    open(optionsPanel: SelectOptionsPanelDef): void;
+    move(id: string, selectRect: DOMRect): void;
+    isOpen(selectId: string): boolean;
+    selectIndex(index: number): void;
+    selectValue(value: any): void;
+    dismiss(): void;
+}

package/dist/components/select/select-options-manager.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOptionsManager = void 0;
+const rxjs_1 = require("rxjs");
+const REOPEN_TIMEOUT = 100;
+/**
+ * Manager providing the link between custom select box input components
+ * and the layout-level select options panel
+ */
+class SelectOptionsManager {
+    get panel() { return this._panel.value; }
+    constructor() {
+        this._panel = new rxjs_1.BehaviorSubject(undefined);
+        this.panel$ = this._panel.asObservable();
+        this.lastPanel = {
+            id: "",
+            timestamp: 0,
+        };
+    }
+    open(optionsPanel) {
+        // Don't reopen the same panel within the reopen timeout
+        if (this.lastPanel.id === optionsPanel.id) {
+            if (this.lastPanel.timestamp + REOPEN_TIMEOUT > Date.now())
+                return;
+        }
+        this._panel.next(optionsPanel);
+    }
+    move(id, selectRect) {
+        var _a;
+        if (id && this.panel && id === ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.id)) {
+            const panel = this.panel;
+            if (panel.selectRect.top !== selectRect.top || panel.selectRect.left !== selectRect.left) {
+                panel.selectRect = selectRect;
+                this._panel.next(panel);
+            }
+        }
+    }
+    isOpen(selectId) {
+        var _a;
+        return ((_a = this.panel) === null || _a === void 0 ? void 0 : _a.id) === selectId;
+    }
+    selectIndex(index) {
+        if (this.panel) {
+            if (this.panel.options[index].attrs.disabled) {
+                // Noop
+            }
+            else {
+                this.panel.select(this.panel.options[index].attrs.value);
+            }
+            this.dismiss();
+        }
+    }
+    selectValue(value) {
+        if (this.panel) {
+            this.panel.select(value);
+            this.dismiss();
+        }
+    }
+    dismiss() {
+        var _a, _b, _c, _d;
+        (_b = (_a = this.panel) === null || _a === void 0 ? void 0 : _a.onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.lastPanel.id = (_d = (_c = this.panel) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : "";
+        this.lastPanel.timestamp = Date.now();
+        this._panel.next(undefined);
+    }
+}
+exports.SelectOptionsManager = SelectOptionsManager;

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

@@ -0,0 +1,204 @@
+"use strict";
+// import { container } from "tsyringe";
+// import { getLogger } from "~common/services/get-logger";
+// import { Logger, LogLevel } from "~common/services/logger.service";
+// import { MobileModeService } from "~common/services/mobile-mode.service";
+// const mobileMode = container.resolve(MobileModeService);
+// export interface TooltipOpts {
+//   /** Specify the position of the tooltip */
+//   pos: TooltipPos,
+//   /** Override the default delay in milliseconds */
+//   delay: number,
+//   /** Increase the maximum width and height of the tooltip */
+//   jumbo: boolean,
+//   /** The tooltip should be attached to the document instead of the moused-over element */
+//   attachToBody: boolean,
+// }
+// export type TooltipPos = "cursor" | "top" | "bottom" | "left" | "right" | "follow";
+// const DEFAULT_POS: TooltipPos = "cursor";
+// const DEFAULT_DELAY = 500;
+// const TOOLTIP_CLASS = "hypertable-tooltip";
+// const MAX_WIDTH_PX = 250;
+// const MAX_HEIGHT_PX = 100;
+// const MAX_WIDTH_JUMBO_PX = 400;
+// const MAX_HEIGHT_JUMBO_PX = 300;
+// const logger = getLogger("Tooltip");
+// // logger.logLevel = LogLevel.Debug;
+// /**
+//  * Display a tooltip using the given mouse event.
+//  * Call this function from an element's "mouseenter" event.
+//  * 
+//  * e.g.:
+//  * ```
+//  * onmouseenter: (ev: MouseEvent) => tooltip(ev, "Howdy!"),
+//  * ```
+//  * @param ev 
+//  * @param tooltip Nothing is displayed if the tooltip text is empty
+//  * @param opts 
+//  * @returns 
+//  */
+// export function tooltip(ev: MouseEvent, tooltip: string, opts?: Partial<TooltipOpts>) {
+//   // Tooltips don't work properly in mobile mode
+//   if (mobileMode.isMob) return;
+//   // If there is no tooltip, don't bother
+//   if (!tooltip) return;
+//   const target = ev.currentTarget as HTMLElement | null;
+//   const eventTarget = ev.target as HTMLElement | null;
+//   logger.debug(`target is ${target?.tagName}`);
+//   logger.debug(`event target is ${eventTarget?.tagName}`);
+//   if (!target) {
+//     return logger.debug("No target; returning from tooltip()");
+//   }
+//   // if (target?.classList.contains(TOOLTIP_CLASS) || eventTarget?.classList.contains(TOOLTIP_CLASS)) {
+//   //   return logger.debug("Target is tooltip div; returning from tooltip()");
+//   // }
+//   // This helps avoid re-adding tooltips when mousing over the tooltip itself
+//   let hasTooltip = false;
+//   target.childNodes.forEach((child, key, parent) => {
+//     if ((child as HTMLElement)?.classList?.contains(TOOLTIP_CLASS)) {
+//       hasTooltip = true;
+//     }
+//   });
+//   if (hasTooltip) {
+//     return logger.debug("Target already has tooltip; returning from tooltip()");
+//   }
+//   const mousePos = { x: ev.x, y: ev.y };
+//   const latestPosFn = (ev: MouseEvent) => {
+//     mousePos.x = ev.x;
+//     mousePos.y = ev.y;
+//   };
+//   target.addEventListener("mousemove", latestPosFn);
+//   const timeout = setTimeout(() => {
+//     displayTooltip({ ev, target, tooltip, opts, mousePos });
+//   }, opts?.delay ?? DEFAULT_DELAY);
+//   const clearFn = (ev: MouseEvent) => {
+//     logger.debug("Clearing tooltip timeout");
+//     clearTimeout(timeout);
+//     target.removeEventListener("mouseleave", clearFn);
+//     target.removeEventListener("mousemove", latestPosFn);
+//   };
+//   target.addEventListener("mouseleave", clearFn);
+// }
+// /**
+//  * 
+//  * @param value 
+//  * @param opts 
+//  * @returns 
+//  */
+// export function tooltipSpread(value: string, opts?: Partial<TooltipOpts>) {
+//   return {
+//     onmouseenter: (ev: MouseEvent) => tooltip(ev, value, opts),
+//   };
+// }
+// /**
+//  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
+//  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips
+//  */
+// function displayTooltip(settings: {
+//   ev: MouseEvent,
+//   target: HTMLElement,
+//   tooltip: string,
+//   mousePos: { x: number, y: number, }
+//   opts?: Partial<TooltipOpts>,
+// }) {
+//   const { ev, target, tooltip, opts, mousePos } = settings;
+//   const cursorOffsetX = 5;
+//   const cursorOffsetY = 20;
+//   const pos = opts?.pos ?? DEFAULT_POS;
+//   let targetRect = target.getBoundingClientRect();
+//   // targetRect = new DOMRect(targetRect.x, targetRect.y, targetRect.width, targetRect.height);
+//   let targetCenter = {
+//     x: targetRect.left + (targetRect.width / 2),
+//     y: targetRect.top + (targetRect.height / 2),
+//   };
+//   const maxWidth = opts?.jumbo === true ? MAX_WIDTH_JUMBO_PX : MAX_WIDTH_PX;
+//   const maxHeight = opts?.jumbo === true ? MAX_HEIGHT_JUMBO_PX : MAX_HEIGHT_PX;
+//   logger.debug(`display tooltip "${tooltip}" on element ${target.tagName}`);
+//   const tooltipEl = document.createElement("div");
+//   tooltipEl.innerText = tooltip;
+//   tooltipEl.classList.value = "px-2 py-1 text-xs text-dark font-normal rounded border border-primary bg-white fade-in-100 no-select";
+//   tooltipEl.classList.add(TOOLTIP_CLASS);
+//   tooltipEl.style.position = "fixed";
+//   tooltipEl.style.maxWidth = `${maxWidth}px`;
+//   tooltipEl.style.maxHeight = `${maxHeight}px`;
+//   tooltipEl.style.zIndex = "1000";
+//   tooltipEl.style.whiteSpace = "normal";
+//   tooltipEl.style.opacity = "1";
+//   tooltipEl.style.textAlign = "left";
+//   tooltipEl.style.overflow = "hidden";
+//   tooltipEl.setAttribute("role", "tooltip");
+//   // // Add the tooltip before positioning it to read its dimensions
+//   // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
+//   // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
+//   if (settings.opts?.attachToBody === true) {
+//     document.body.append(tooltipEl);
+//   } else {
+//     target.append(tooltipEl);
+//   }
+//   // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
+//   // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
+//   if (pos === "cursor" || pos === "follow") {
+//     tooltipEl.style.top = `${mousePos.y + cursorOffsetY}px`;
+//     if (mousePos.x < window.innerWidth - maxWidth) {
+//       tooltipEl.style.left = `${mousePos.x + cursorOffsetX}px`;
+//     } else {
+//       tooltipEl.style.right = `${document.documentElement.clientWidth - mousePos.x - cursorOffsetX}px`;
+//     }
+//   } else if (pos === "top") {
+//     tooltipEl.style.bottom = `${window.innerHeight - targetRect.top}px`; // - window.scrollY
+//     tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
+//   } else if (pos === "bottom") {
+//     tooltipEl.style.top = `${targetRect.bottom}px`; // + window.scrollY
+//     tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
+//   } else if (pos === "left") {
+//     tooltipEl.style.right = `${document.documentElement.clientWidth - targetRect.left}px`;
+//     tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
+//   } else if (pos === "right") {
+//     tooltipEl.style.left = `${targetRect.right}px`;
+//     tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
+//   }
+//   if (pos === "follow") {
+//     const followFn = (ev: MouseEvent) => {
+//       tooltipEl.style.top = `${ev.y + cursorOffsetY}px`; // + window.scrollY
+//       if (mousePos.x < window.innerWidth - maxWidth) {
+//         tooltipEl.style.left = `${ev.x + cursorOffsetX}px`;
+//         tooltipEl.style.right = "";
+//       } else {
+//         tooltipEl.style.right = `${document.documentElement.clientWidth - ev.x - cursorOffsetX}px`;
+//         tooltipEl.style.left = "";
+//       }
+//     };
+//     const cleanupFn = () => {
+//       target.removeEventListener("mousemove", followFn);
+//       target.removeEventListener("mouseleave", cleanupFn);
+//     }
+//     target.addEventListener("mousemove", followFn);
+//     target.addEventListener("mouseleave", cleanupFn);
+//   }
+//   logger.debug(`displaying tooltip at: ${tooltipEl.style.left}, ${tooltipEl.style.top}`);
+//   const removeFn = () => {
+//     logger.debug(`Removing tooltip ${tooltip} from el ${target.tagName}`);
+//     tooltipEl.onanimationend = (ev: AnimationEvent) => {
+//       logger.debug(ev.animationName);
+//       if (settings.opts?.attachToBody === true) {
+//         document.body.removeChild(tooltipEl);
+//       } else {
+//         target.removeChild(tooltipEl);
+//       }
+//     }
+//     tooltipEl.classList.replace("fade-in-100", "fade-out-100");
+//     target.removeEventListener("mouseleave", removeFn);
+//     tooltipEl.removeEventListener("mouseenter", removeFn);
+//   }
+//   target.addEventListener("mouseleave", removeFn);
+//   tooltipEl.addEventListener("mouseenter", removeFn);
+//   if (settings.opts?.attachToBody === true) {
+//     const bodyListener = (ev: MouseEvent) => {
+//       if (ev.target && !target.contains(ev.target as any)) {
+//         removeFn();
+//         document.body.removeEventListener("mousemove", bodyListener);
+//       }
+//     };
+//     document.body.addEventListener("mousemove", bodyListener);
+//   }
+// }

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

@@ -0,0 +1,76 @@
+import m from "mithril";
+import { TreeNode } from "./tree-node.interface";
+/**
+ * An untyped tree component (see `createTree<T>()`)
+ */
+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 | undefined;
+    /** Enable expanding/collapsing of nodes with children */
+    enableToggling?: boolean | undefined;
+    /** Enable debug logging of certain events */
+    enableLogging?: boolean | undefined;
+    /** Function called when a node with children is toggled */
+    ontoggle?: ((node: TreeNode<any>, expanded: boolean, recursive: boolean) => void) | undefined;
+    /** Function called when a node label is clicked */
+    onclick?: ((node: TreeNode<any>) => void) | undefined;
+    /** Function called when a node has been dragged to a new position in the tree */
+    onreorder?: ((moved: any, target: any, above: boolean) => void) | undefined;
+    /** Optional message to display in defined but empty children lists */
+    emptyChildrenMessage?: string | undefined;
+    /** Optionally override the default icon for a collapsed folder */
+    collapsedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally override the default icon for an expanded folder */
+    expandedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally enable toggling of expansion nodes by clicking their labels */
+    toggleExpansionWithLabel?: boolean | undefined;
+    /** Optional CSS classes to apply to the root div */
+    class?: string | undefined;
+    /** Optional CSS styles to apply to the root div */
+    style?: string | undefined;
+}, {
+    isReordering: boolean;
+    thisEl: Element;
+    targetRect: DOMRect | undefined;
+    targettingTop: boolean;
+}>;
+/**
+ * Build a component to display nested nodes in a tree.
+ *
+ * Nodes with children are collapsable, and nodes can be arbitrarily reordered.
+ */
+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 | undefined;
+    /** Enable expanding/collapsing of nodes with children */
+    enableToggling?: boolean | undefined;
+    /** Enable debug logging of certain events */
+    enableLogging?: boolean | undefined;
+    /** Function called when a node with children is toggled */
+    ontoggle?: ((node: TreeNode<TNodeData>, expanded: boolean, recursive: boolean) => void) | undefined;
+    /** Function called when a node label is clicked */
+    onclick?: ((node: TreeNode<TNodeData>) => void) | undefined;
+    /** Function called when a node has been dragged to a new position in the tree */
+    onreorder?: ((moved: TNodeData, target: TNodeData, above: boolean) => void) | undefined;
+    /** Optional message to display in defined but empty children lists */
+    emptyChildrenMessage?: string | undefined;
+    /** Optionally override the default icon for a collapsed folder */
+    collapsedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally override the default icon for an expanded folder */
+    expandedIcon?: m.Vnode<any, {}> | undefined;
+    /** Optionally enable toggling of expansion nodes by clicking their labels */
+    toggleExpansionWithLabel?: boolean | undefined;
+    /** Optional CSS classes to apply to the root div */
+    class?: string | undefined;
+    /** Optional CSS styles to apply to the root div */
+    style?: string | undefined;
+}, {
+    isReordering: boolean;
+    thisEl: Element;
+    targetRect: DOMRect | undefined;
+    targettingTop: boolean;
+}>;

package/dist/components/tree/Tree.js

@@ -0,0 +1,210 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTree = exports.Tree = void 0;
+const utils_1 = require("@hypericon/utils");
+const mithril_1 = __importDefault(require("mithril"));
+const icon_1 = require("../icon");
+const DATA_TRANSFER_TYPE = "application/tree-data";
+/**
+ * An untyped tree component (see `createTree<T>()`)
+ */
+exports.Tree = createTree();
+/**
+ * Build a component to display nested nodes in a tree.
+ *
+ * Nodes with children are collapsable, and nodes can be arbitrarily reordered.
+ */
+function createTree() {
+    // /** Reference to the TreeItem currently being dragged */
+    // let draggedTreeItem: TreeItem<T> | undefined = undefined;
+    const Tree = {
+        oninit() {
+            this.isReordering = false;
+        },
+        oncreate({ dom }) {
+            this.thisEl = dom;
+        },
+        view({ attrs }) {
+            var _a, _b;
+            const nodes = attrs.nodes;
+            return (0, mithril_1.default)(".mico-tree", {
+                style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} position: relative;`,
+                class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""}`
+            }, [
+                (0, mithril_1.default)("ul", nodes.map((node, i) => {
+                    return (0, mithril_1.default)(TreeNode, {
+                        // key: i, // item.key,
+                        node,
+                        enableReordering: attrs.enableReordering,
+                        enableToggling: attrs.enableToggling,
+                        enableLogging: attrs.enableLogging,
+                        ontoggle: attrs.ontoggle,
+                        onclick: attrs.onclick,
+                        reorder: attrs.onreorder,
+                        emptyChildrenMessage: attrs.emptyChildrenMessage,
+                        collapsedIcon: attrs.collapsedIcon,
+                        expandedIcon: attrs.expandedIcon,
+                        toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                    });
+                })),
+            ]);
+        }
+    };
+    const TreeNode = {
+        oninit({ attrs }) {
+            const { enableReordering } = attrs;
+            this.isReorderingOver = false;
+            this.handleClick = (ev, node) => {
+                var _a;
+                (_a = attrs.onclick) === null || _a === void 0 ? void 0 : _a.call(attrs, node);
+            };
+            this.handleDragStart = (ev, node) => {
+                if (!enableReordering)
+                    return;
+                if (!ev.dataTransfer)
+                    return;
+                attrs.enableLogging && console.log(`start dragging`, node.data);
+                ev.dataTransfer.setData(DATA_TRANSFER_TYPE, JSON.stringify(node.data));
+                ev.dataTransfer.effectAllowed = "move";
+                // attrs.reorderstart?.();
+            };
+            this.handleDragOver = (ev, node) => {
+                ev.preventDefault();
+                if (!enableReordering)
+                    return;
+                // attrs.enableLogging && console.log(`on dragover`, ev.dataTransfer?.getData(DATA_TRANSFER_TYPE), "over", item.data);
+                // ev.target;
+                // ev.x;
+                const overDiv = ev.currentTarget;
+                const targetRect = overDiv.getBoundingClientRect();
+                const topToMouse = ev.clientY - targetRect.top;
+                const isAbove = topToMouse < (targetRect.height - topToMouse);
+                this.isTargettingAbove = isAbove;
+                this.isReorderingOver = true;
+                // attrs.reorderover?.(overDiv, ev.clientY);
+            };
+            this.handleDrag = (ev, node) => {
+                // attrs.enableLogging && console.log(`on drag`, item.data);
+            };
+            this.handleDragLeave = (ev, node) => {
+                this.isReorderingOver = false;
+            };
+            this.handleDrop = (ev, node) => {
+                var _a;
+                ev.preventDefault();
+                if (!enableReordering)
+                    return;
+                if (ev.dataTransfer) {
+                    ev.dataTransfer.dropEffect = "move";
+                    const movedNodeData = JSON.parse(ev.dataTransfer.getData(DATA_TRANSFER_TYPE));
+                    attrs.enableLogging && console.log(`on drop`, movedNodeData, "on", node.data);
+                    // attrs.reorderfinish?.();
+                    const droppedOnSelf = (0, utils_1.compareObjects)(movedNodeData, node.data);
+                    if (!droppedOnSelf) {
+                        (_a = attrs.reorder) === null || _a === void 0 ? void 0 : _a.call(attrs, movedNodeData, node.data, this.isTargettingAbove);
+                    }
+                }
+                this.isReorderingOver = false;
+            };
+            this.handleDragEnd = (ev, node) => {
+                var _a;
+                attrs.enableLogging && console.log(`drag end, dropEffect:`, (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect);
+                // "move" on success, "none" on failure/cancellation
+                // attrs.reorderfinish?.();
+                this.isReorderingOver = false;
+            };
+        },
+        view({ attrs }) {
+            const { node, enableToggling, enableReordering, emptyChildrenMessage } = attrs;
+            const canHaveChildren = node.children !== undefined;
+            const hasChildren = node.children !== undefined && (node.children.length > 0);
+            const expanded = canHaveChildren && node.expanded;
+            const collapsed = canHaveChildren && !node.expanded;
+            const targettingBackgroundClass = this.isReorderingOver ? (this.isTargettingAbove ? "mico-tree-reorder-above" : "mico-tree-reorder-below") : "";
+            return (0, mithril_1.default)("li.mico-tree-node", {
+            // key: item.key,
+            }, [
+                // The items's label (either a string or Vnode) and expand/collapse control (if there are children)
+                (0, mithril_1.default)("", {
+                    style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
+                }, [
+                    expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
+                        style: `width: 1.5rem; flex: none;`,
+                        class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        disabled: !enableToggling,
+                        onclick: (ev) => {
+                            var _a;
+                            if (!enableToggling)
+                                return;
+                            node.expanded = false;
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, false, ev.altKey);
+                        },
+                    }, attrs.expandedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-down" })) : undefined,
+                    collapsed ? (0, mithril_1.default)("button.mico-tree-toggle", {
+                        style: `width: 1.5rem; flex: none;`,
+                        class: enableToggling ? `hover:text-primary` : `text-view-icon`,
+                        disabled: !enableToggling,
+                        onclick: (ev) => {
+                            var _a;
+                            if (!enableToggling)
+                                return;
+                            node.expanded = true;
+                            (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, true, ev.altKey);
+                        },
+                    }, attrs.collapsedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-right" })) : undefined,
+                    (0, mithril_1.default)("", {
+                        class: `${targettingBackgroundClass}`,
+                        style: "position: relative; flex: 1 1 0%; display: flex; flex-direction: column; overflow-x: hidden;",
+                        draggable: enableReordering,
+                        onclick: (ev) => {
+                            var _a;
+                            this.handleClick(ev, node);
+                            // If labels should toggle expansion, toggle expansion
+                            if (attrs.toggleExpansionWithLabel && enableToggling) {
+                                node.expanded = !expanded;
+                                (_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, node, !expanded, ev.altKey);
+                            }
+                        },
+                        ondragstart: (ev) => this.handleDragStart(ev, node),
+                        ondrag: (ev) => this.handleDrag(ev, node),
+                        ondragover: (ev) => this.handleDragOver(ev, node),
+                        ondragleave: (ev) => this.handleDragLeave(ev, node),
+                        ondrop: (ev) => this.handleDrop(ev, node),
+                        ondragend: (ev) => this.handleDragEnd(ev, node),
+                    }, [
+                        (typeof node.label === "string") ? (0, mithril_1.default)("span", node.label) : node.label,
+                    ]),
+                ]),
+                // Any nested children within the item
+                (expanded) ? (0, mithril_1.default)("ul", [
+                    ...(node.children || []).map((child, i) => {
+                        return (0, mithril_1.default)(TreeNode, {
+                            // key: child.key,
+                            node: child,
+                            enableToggling: attrs.enableToggling,
+                            enableReordering: attrs.enableReordering,
+                            ontoggle: attrs.ontoggle,
+                            onclick: attrs.onclick,
+                            reorder: attrs.reorder,
+                            // reorderstart: attrs.reorderstart,
+                            // reorderover: attrs.reorderover,
+                            // reorderfinish: attrs.reorderfinish,
+                            emptyChildrenMessage: attrs.emptyChildrenMessage,
+                            collapsedIcon: attrs.collapsedIcon,
+                            expandedIcon: attrs.expandedIcon,
+                            toggleExpansionWithLabel: attrs.toggleExpansionWithLabel,
+                        });
+                    }),
+                    (canHaveChildren && !hasChildren && emptyChildrenMessage !== undefined)
+                        ? (0, mithril_1.default)("span.mico-tree-empty-children", emptyChildrenMessage)
+                        : [],
+                ]) : [],
+            ]);
+        }
+    };
+    return Tree;
+}
+exports.createTree = createTree;

package/dist/components/tree/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Tree";
+export * from "./tree-node.interface";
+export * from "./tree-utils";

package/dist/components/tree/index.js

@@ -1 +1,19 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tree"), exports);
+__exportStar(require("./tree-node.interface"), exports);
+__exportStar(require("./tree-utils"), exports);

package/dist/components/tree/tree-node.interface.d.ts

@@ -0,0 +1,7 @@
+import m from "mithril";
+export interface TreeNode<T extends object = {}> {
+    label: string | m.Vnode<any>;
+    expanded: boolean;
+    children?: TreeNode<T>[];
+    data: T;
+}

package/dist/components/tree/tree-node.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/tree/tree-utils.d.ts

@@ -0,0 +1,11 @@
+import { TreeNode } from "./tree-node.interface";
+/**
+ * Recursively find the list of all descendants of the given node.
+ *
+ * The given node itself is not included in the list of descendants.
+ *
+ * Performs a depth-first traversal.
+ * @param node
+ * @returns
+ */
+export declare function allTreeDescendants<T extends object = {}>(node: TreeNode<T>): T[];

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.allTreeDescendants = void 0;
+/**
+ * Recursively find the list of all descendants of the given node.
+ *
+ * The given node itself is not included in the list of descendants.
+ *
+ * Performs a depth-first traversal.
+ * @param node
+ * @returns
+ */
+function allTreeDescendants(node) {
+    var _a;
+    const descendants = [];
+    for (const child of (_a = node.children) !== null && _a !== void 0 ? _a : []) {
+        descendants.push(child.data);
+        descendants.push(...allTreeDescendants(child));
+    }
+    return descendants;
+}
+exports.allTreeDescendants = allTreeDescendants;

package/package.json

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