mtrl 0.10.0-next.2 → 0.10.0

package/dist/components/menu/features/controller.d.ts

@@ -1,5 +1,6 @@
 import type { MenuComponent } from "../types.js";
 import { MenuConfig, MenuControllerApi, MenuFeatureHost } from "../types.js";
+import { MenuSubmenuApi } from "./loader.js";
 /**
  * Adds controller functionality to the menu component
  * Manages state, rendering, positioning, and event handling
@@ -9,5 +10,6 @@ import { MenuConfig, MenuControllerApi, MenuFeatureHost } from "../types.js";
  */
 declare const withController: (config: MenuConfig, getComponent: () => MenuComponent) => <C extends MenuFeatureHost>(component: C) => C & {
     menu: MenuControllerApi;
+    submenu: MenuSubmenuApi;
 };
 export default withController;

package/dist/components/menu/features/controller.js

@@ -1,8 +1,18 @@
 import { createMenuTasks } from "./tasks.js";
 import { menuOpened, menuClosed } from "./registry.js";
+import { eventWithin } from "./layer.js";
+import { createSubmenuLoader, hasNestedItems } from "./loader.js";
+import { onTopLayerClose, showInTopLayer } from "../../../core/dom/layer.js";
 import { setHTML } from "../../../core/dom/html.js";
+const SCROLL_LISTENER = { capture: true, passive: true };
 const withController = (config, getComponent) => (component) => {
     const tasks = createMenuTasks();
+    const loader = createSubmenuLoader(config, component);
+    const submenu = loader.api;
+    if (hasNestedItems(config.items))
+        loader.load();
+    const topLayer = config.layer === "top";
+    let closing = false;
     const listbox = config.listbox === true;
     const optionIdPrefix = `${component.getClass("menu")}-${Math.random().toString(36).slice(2, 9)}`;
     if (listbox) {
@@ -126,14 +136,10 @@ const withController = (config, getComponent) => (component) => {
             });
             if (item.hasSubmenu && config.openSubmenuOnHover) {
                 itemElement.addEventListener("mouseenter", () => {
-                    if (component.submenu) {
-                        component.submenu.handleSubmenuHover(item, index, itemElement);
-                    }
+                    submenu.handleSubmenuHover(item, index, itemElement);
                 });
                 itemElement.addEventListener("mouseleave", () => {
-                    if (component.submenu) {
-                        component.submenu.handleSubmenuLeave();
-                    }
+                    submenu.handleSubmenuLeave();
                 });
             }
         }
@@ -198,18 +204,24 @@ const withController = (config, getComponent) => (component) => {
         }
         return null;
     };
+    const submenuActions = {
+        closeSubmenu: submenu.closeSubmenu,
+        handleSubmenuClick: submenu.handleSubmenuClick,
+        handleNestedSubmenuClick: submenu.handleNestedSubmenuClick,
+    };
     const handleItemClick = (e, item, index) => {
         e.preventDefault();
         e.stopPropagation();
         if (item.disabled)
             return;
-        if (item.hasSubmenu && component.submenu) {
-            component.submenu.handleSubmenuClick(item, index, e.currentTarget);
+        if (item.hasSubmenu) {
+            submenu.handleSubmenuClick(item, index, e.currentTarget);
             return;
         }
         const selectEvent = eventHelpers.triggerEvent("select", {
             item,
             itemId: item.id,
+            value: item.id,
             itemData: item.data,
         }, e);
         if (config.closeOnSelect && !selectEvent.defaultPrevented) {
@@ -253,9 +265,14 @@ const withController = (config, getComponent) => (component) => {
             component.element.setAttribute("aria-hidden", "true");
             component.element.style.transform = "scaleY(0)";
             component.element.style.opacity = "0";
-            const container = config.container || document.body;
-            container.appendChild(component.element);
+            const opener = topLayer ? getOpenerElement() : null;
+            if (opener?.parentNode)
+                opener.after(component.element);
+            else
+                (config.container || document.body).appendChild(component.element);
         }
+        if (topLayer)
+            showInTopLayer(component.element, { kind: "popover-manual" });
         tasks.setTimeout(() => {
             const openerElement = getOpenerElement();
             if (openerElement && component.position) {
@@ -297,29 +314,27 @@ const withController = (config, getComponent) => (component) => {
                 window.addEventListener("resize", handleWindowResize, {
                     passive: true,
                 });
-                window.addEventListener("scroll", handleWindowScroll, {
-                    passive: true,
-                });
+                window.addEventListener("scroll", handleWindowScroll, SCROLL_LISTENER);
             }, 0);
         }, 20);
         eventHelpers.triggerEvent("open", {}, event);
     };
     const closeMenu = (event, restoreFocus = true) => {
-        if (!state.visible)
+        if (!state.visible || (topLayer && closing))
             return;
+        closing = true;
         menuClosed(registryEntry);
         component.emit("menu-closing", { event, restoreFocus });
-        if (component.submenu) {
-            component.submenu.closeAllSubmenus();
-        }
+        submenu.closeAllSubmenus();
         tasks.setTimeout(() => {
             state.visible = false;
+            closing = false;
             component.element.setAttribute("aria-hidden", "true");
             component.element.classList.remove(`${component.getClass("menu--visible")}`);
             document.removeEventListener("click", handleDocumentClick);
             document.removeEventListener("keydown", handleDocumentKeydown);
             window.removeEventListener("resize", handleWindowResize);
-            window.removeEventListener("scroll", handleWindowScroll);
+            window.removeEventListener("scroll", handleWindowScroll, SCROLL_LISTENER);
             eventHelpers.triggerEvent("close", {
                 restoreFocus: restoreFocus,
             }, event);
@@ -347,17 +362,16 @@ const withController = (config, getComponent) => (component) => {
         }
     };
     const handleDocumentClick = (e) => {
-        if (component.element.contains(e.target)) {
+        if (eventWithin(config, component.element, e)) {
             return;
         }
         const opener = getOpenerElement();
-        if (opener && opener.contains(e.target)) {
+        if (opener && eventWithin(config, opener, e)) {
             return;
         }
-        if (component.submenu && component.submenu.hasOpenSubmenu()) {
-            const activeSubmenus = component.submenu.getActiveSubmenus();
-            for (const submenu of activeSubmenus) {
-                if (submenu.element.contains(e.target)) {
+        if (submenu.hasOpenSubmenu()) {
+            for (const open of submenu.getActiveSubmenus()) {
+                if (eventWithin(config, open.element, e)) {
                     return;
                 }
             }
@@ -365,12 +379,11 @@ const withController = (config, getComponent) => (component) => {
         closeMenu(e, false);
     };
     const handleDocumentKeydown = (e) => {
-        const isTargetInsideMenu = component.element.contains(e.target);
-        const isTargetInsideSubmenu = component.submenu &&
-            component.submenu.hasOpenSubmenu() &&
-            component.submenu
+        const isTargetInsideMenu = eventWithin(config, component.element, e);
+        const isTargetInsideSubmenu = submenu.hasOpenSubmenu() &&
+            submenu
                 .getActiveSubmenus()
-                .some((s) => s.element.contains(e.target));
+                .some((s) => eventWithin(config, s.element, e));
         if (state.visible) {
             if (isTargetInsideMenu) {
                 if (e.key === "Escape") {
@@ -382,10 +395,8 @@ const withController = (config, getComponent) => (component) => {
                 if (component.keyboard && component.keyboard.handleMenuKeydown) {
                     component.keyboard.handleMenuKeydown(e, state, {
                         closeMenu,
-                        closeSubmenu: component.submenu?.closeSubmenu,
                         findItemById,
-                        handleSubmenuClick: component.submenu?.handleSubmenuClick,
-                        handleNestedSubmenuClick: component.submenu?.handleNestedSubmenuClick,
+                        ...submenuActions,
                     });
                 }
                 else if (e.key === "Escape") {
@@ -397,10 +408,8 @@ const withController = (config, getComponent) => (component) => {
                 if (component.keyboard && component.keyboard.handleMenuKeydown) {
                     component.keyboard.handleMenuKeydown(e, state, {
                         closeMenu,
-                        closeSubmenu: component.submenu?.closeSubmenu,
                         findItemById,
-                        handleSubmenuClick: component.submenu?.handleSubmenuClick,
-                        handleNestedSubmenuClick: component.submenu?.handleNestedSubmenuClick,
+                        ...submenuActions,
                     });
                 }
             }
@@ -419,7 +428,9 @@ const withController = (config, getComponent) => (component) => {
             }
         }
     };
-    const handleWindowScroll = () => {
+    const handleWindowScroll = (event) => {
+        if (event?.composedPath().includes(component.element))
+            return;
         if (state.visible) {
             tasks.requestAnimationFrame(() => {
                 const openerElement = getOpenerElement();
@@ -434,10 +445,8 @@ const withController = (config, getComponent) => (component) => {
         if (!listbox && component.keyboard && component.keyboard.setupKeyboardHandlers) {
             component.keyboard.setupKeyboardHandlers(component.element, state, {
                 closeMenu,
-                closeSubmenu: component.submenu?.closeSubmenu,
                 findItemById,
-                handleSubmenuClick: component.submenu?.handleSubmenuClick,
-                handleNestedSubmenuClick: component.submenu?.handleNestedSubmenuClick,
+                ...submenuActions,
             });
         }
         if (state.visible) {
@@ -453,7 +462,7 @@ const withController = (config, getComponent) => (component) => {
                 document.addEventListener("keydown", handleDocumentKeydown);
             }
             window.addEventListener("resize", handleWindowResize);
-            window.addEventListener("scroll", handleWindowScroll);
+            window.addEventListener("scroll", handleWindowScroll, SCROLL_LISTENER);
         }
     };
     component.on("create-menu-items", (event) => {
@@ -478,23 +487,29 @@ const withController = (config, getComponent) => (component) => {
         });
     });
     tasks.setTimeout(initMenu, 0);
+    const stopLayerClose = topLayer
+        ? onTopLayerClose(component.element, () => closeMenu(undefined, false))
+        : null;
     if (component.lifecycle) {
         const originalDestroy = component.lifecycle.destroy || (() => { });
         component.lifecycle.destroy = () => {
             if (tasks.destroyed)
                 return;
             tasks.destroy();
+            stopLayerClose?.();
             state.visible = false;
             menuClosed(registryEntry);
             document.removeEventListener("click", handleDocumentClick);
             document.removeEventListener("keydown", handleDocumentKeydown);
             window.removeEventListener("resize", handleWindowResize);
-            window.removeEventListener("scroll", handleWindowScroll);
+            window.removeEventListener("scroll", handleWindowScroll, SCROLL_LISTENER);
+            loader.destroy();
             originalDestroy.call(component.lifecycle);
         };
     }
     return {
         ...component,
+        submenu,
         menu: {
             open: (event, interactionType) => {
                 openMenu(event, interactionType);
@@ -511,6 +526,8 @@ const withController = (config, getComponent) => (component) => {
             isOpen: () => state.visible,
             setItems: (items) => {
                 state.items = items;
+                if (hasNestedItems(items))
+                    loader.load();
                 renderMenuItems();
                 return component;
             },

package/dist/components/menu/features/index.d.ts

@@ -2,5 +2,4 @@ import withController from "./controller.js";
 import withOpener from "./opener.js";
 import withPosition from "./position.js";
 import withKeyboard from "./keyboard.js";
-import withSubmenu from "./submenu.js";
-export { withController, withOpener, withPosition, withKeyboard, withSubmenu };
+export { withController, withOpener, withPosition, withKeyboard };

package/dist/components/menu/features/index.js

@@ -2,5 +2,4 @@ import withController from "./controller.js";
 import withOpener from "./opener.js";
 import withPosition from "./position.js";
 import withKeyboard from "./keyboard.js";
-import withSubmenu from "./submenu.js";
-export { withController, withOpener, withPosition, withKeyboard, withSubmenu };
+export { withController, withOpener, withPosition, withKeyboard };

package/dist/components/menu/features/keyboard.js

@@ -1,4 +1,5 @@
 import { createMenuTasks } from "./tasks.js";
+import { activeElementOf } from "../../../core/dom/focus.js";
 export const createKeyboardNavigation = (component) => {
     const tasks = createMenuTasks();
     let isTabNavigation = false;
@@ -43,7 +44,7 @@ export const createKeyboardNavigation = (component) => {
         const ownerFilter = owner ? `[data-owner="${owner}"]` : "";
         const scope = level <= 1
             ? component.element
-            : document.querySelector(`.${component.getClass("menu--submenu")}${ownerFilter}[data-level="${level - 1}"]`);
+            : menuElement.getRootNode().querySelector(`.${component.getClass("menu--submenu")}${ownerFilter}[data-level="${level - 1}"]`);
         return ((scope ?? component.element).querySelector(`.${component.getClass("menu__item")}[data-id="${parentId}"]`) ?? null);
     };
     const menuItems = (menuElement) => Array.from(menuElement.querySelectorAll(`.${component.getClass("menu__item")}`));
@@ -77,7 +78,7 @@ export const createKeyboardNavigation = (component) => {
         const items = menuItems(menuElement);
         if (items.length === 0)
             return;
-        const focusedElement = document.activeElement;
+        const focusedElement = activeElementOf(menuElement);
         let focusedItemIndex = -1;
         if (focusedElement && items.includes(focusedElement)) {
             focusedItemIndex = items.indexOf(focusedElement);

package/dist/components/menu/features/layer.d.ts

@@ -0,0 +1,15 @@
+import { MenuConfig } from "../types.js";
+/**
+ * Whether an event happened inside a node. A top-layer menu may render in a
+ * shadow root, and a document listener then sees the event retargeted to the
+ * host; the event's composed path still holds the node. The menu without a
+ * layer keeps the test it always had.
+ */
+export declare const eventWithin: (config: MenuConfig, node: Node, event: Event) => boolean;
+/**
+ * Whether focus moving to `target` moved into a node. A top-layer menu may
+ * render in a shadow root other than its opener's (a menu element anchored
+ * to a button of the page): a focus event at the opener then names the
+ * shadow host the node is inside, not the node.
+ */
+export declare const focusWithin: (config: MenuConfig, node: Node, target: Node | null) => boolean;

package/dist/components/menu/features/layer.js

@@ -0,0 +1,16 @@
+export const eventWithin = (config, node, event) => config.layer === "top"
+    ? event.composedPath().includes(node)
+    : node.contains(event.target);
+export const focusWithin = (config, node, target) => {
+    if (!target)
+        return false;
+    if (node.contains(target))
+        return true;
+    if (config.layer !== "top")
+        return false;
+    for (let root = node.getRootNode(); "host" in root; root = root.host.getRootNode()) {
+        if (root.host === target)
+            return true;
+    }
+    return false;
+};

package/dist/components/menu/features/loader.d.ts

@@ -0,0 +1,35 @@
+import type { MenuConfig, MenuContent, MenuFeatureHost } from "../types.js";
+/** What the submenu feature installs, as the rest of the menu calls it. */
+export type MenuSubmenuApi = NonNullable<MenuFeatureHost["submenu"]>;
+/** What the controller holds: the facade it installs, and the load it starts. */
+export interface SubmenuLoader {
+    /** Installed as `component.submenu`, before and after the feature arrives. */
+    api: MenuSubmenuApi;
+    /** Starts fetching the feature. Later calls share the first load. */
+    load: () => void;
+    /** Drops queued interactions, and destroys the feature if it arrived. */
+    destroy: () => void;
+}
+/** True when an item opens a submenu: the only case that needs the feature. */
+export declare const hasNestedItems: (items: MenuContent[] | undefined) => boolean;
+/**
+ * Loads the submenu feature on demand (FLO-310).
+ *
+ * The feature is most of what a menu with nested items adds, and a menu
+ * without them never uses it, so it is a chunk of its own rather than part of
+ * every menu. The controller starts the load as soon as it sees a nested item
+ * -- at creation, or in `setItems` -- so it has normally arrived before the
+ * menu is even opened.
+ *
+ * Until it has, `api` stands in for it. A click, hover or ArrowRight on a
+ * nested item is queued and replayed, in order, against the element the user
+ * acted on, once the feature is there. Closing the menu drops the queue, as
+ * does destroying it; a feature that arrives after `destroy` is not attached.
+ * The queries answer "nothing open", which is the truth before the feature
+ * exists.
+ *
+ * The feature gets a lifecycle of its own, destroyed from the controller's,
+ * so its cleanup runs where it did when it was composed in the pipe: after
+ * the controller's.
+ */
+export declare const createSubmenuLoader: (config: MenuConfig, component: MenuFeatureHost) => SubmenuLoader;

package/dist/components/menu/features/loader.js

@@ -0,0 +1,64 @@
+export const hasNestedItems = (items) => !!items?.some((item) => "hasSubmenu" in item && item.hasSubmenu === true);
+export const createSubmenuLoader = (config, component) => {
+    let feature = null;
+    let loading = false;
+    let destroyed = false;
+    let queue = [];
+    const lifecycle = { destroy: () => { } };
+    const load = () => {
+        if (feature || loading || destroyed)
+            return;
+        loading = true;
+        import("./submenu.js").then(({ default: withSubmenu }) => {
+            loading = false;
+            if (destroyed)
+                return;
+            const submenu = withSubmenu(config)({ ...component, lifecycle }).submenu;
+            feature = submenu;
+            const waiting = queue;
+            queue = [];
+            waiting.forEach((action) => action(submenu));
+        }, (error) => {
+            loading = false;
+            queue = [];
+            console.error("Menu submenu feature failed to load:", error);
+        });
+    };
+    const interact = (action, itemElement) => {
+        if (feature) {
+            action(feature);
+            return;
+        }
+        if (destroyed)
+            return;
+        queue.push((submenu) => {
+            if (!itemElement || itemElement.isConnected)
+                action(submenu);
+        });
+        load();
+    };
+    const close = (action) => {
+        if (feature)
+            action(feature);
+        else
+            queue = [];
+    };
+    const api = {
+        handleSubmenuClick: (item, index, itemElement) => interact((s) => s.handleSubmenuClick(item, index, itemElement), itemElement),
+        handleNestedSubmenuClick: (item, index, itemElement) => interact((s) => s.handleNestedSubmenuClick(item, index, itemElement), itemElement),
+        handleSubmenuHover: (item, index, itemElement) => interact((s) => s.handleSubmenuHover(item, index, itemElement), itemElement),
+        handleSubmenuLeave: () => interact((s) => s.handleSubmenuLeave()),
+        closeSubmenu: (level) => close((s) => s.closeSubmenu(level)),
+        closeAllSubmenus: () => close((s) => s.closeAllSubmenus()),
+        hasOpenSubmenu: () => feature?.hasOpenSubmenu() ?? false,
+        getActiveSubmenus: () => feature?.getActiveSubmenus() ?? [],
+    };
+    const destroy = () => {
+        if (destroyed)
+            return;
+        destroyed = true;
+        queue = [];
+        lifecycle.destroy();
+    };
+    return { api, load, destroy };
+};

package/dist/components/menu/features/opener.js

@@ -1,4 +1,5 @@
 import { createMenuTasks } from "./tasks.js";
+import { focusWithin } from "./layer.js";
 const withOpener = (config) => (component) => {
     const tasks = createMenuTasks();
     let isTabNavigation = false;
@@ -211,7 +212,7 @@ const withOpener = (config) => (component) => {
             return;
         }
         if (relatedTarget) {
-            if (component.element.contains(relatedTarget)) {
+            if (focusWithin(config, component.element, relatedTarget)) {
                 return;
             }
             if (relatedTarget.getAttribute("aria-haspopup") === "true" ||

package/dist/components/menu/features/position.js

@@ -1,32 +1,35 @@
 export const createPositioner = (component, config) => {
+    const VIEWPORT_MARGIN = 48;
+    const MIN_MENU_HEIGHT = 100;
     const positionElement = (menuElement, openerElement, preferredPosition, isSubmenu = false) => {
         if (!menuElement || !openerElement)
             return;
-        const hasContainer = config.container && config.container !== document.body;
-        menuElement.style.position = "absolute";
-        const scrollX = hasContainer
+        const topLayer = config.layer === "top";
+        const position = topLayer ? "fixed" : "absolute";
+        const hasContainer = !topLayer && config.container && config.container !== document.body;
+        menuElement.style.position = position;
+        const scrollX = hasContainer || topLayer
             ? 0
             : window.pageXOffset || document.documentElement.scrollLeft;
-        const scrollY = hasContainer
+        const scrollY = hasContainer || topLayer
             ? 0
             : window.pageYOffset || document.documentElement.scrollTop;
         const openerRect = openerElement.getBoundingClientRect();
         const tempMenu = menuElement.cloneNode(true);
         tempMenu.style.visibility = "hidden";
         tempMenu.style.display = "block";
-        tempMenu.style.position = "absolute";
+        tempMenu.style.position = position;
         tempMenu.style.top = "0";
         tempMenu.style.left = "0";
         tempMenu.style.transform = "none";
         tempMenu.style.opacity = "0";
         tempMenu.style.pointerEvents = "none";
-        if (config.maxHeight)
-            tempMenu.style.maxHeight = config.maxHeight;
+        tempMenu.style.maxHeight = config.maxHeight ?? "";
         tempMenu.classList.add(`${component.getClass("menu--visible")}`);
         if (config.width === "100%" && !isSubmenu) {
             tempMenu.style.width = `${openerRect.width}px`;
         }
-        const measureContainer = config.container || document.body;
+        const measureContainer = (topLayer && menuElement.parentNode) || config.container || document.body;
         measureContainer.appendChild(tempMenu);
         const menuRect = tempMenu.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
@@ -97,6 +100,21 @@ export const createPositioner = (component, config) => {
                     break;
             }
         }
+        let height = menuRect.height;
+        let fitted = null;
+        if (!isSubmenu && /^(top|bottom)/.test(calculatedPosition)) {
+            const below = viewportHeight - openerRect.bottom - offset - VIEWPORT_MARGIN;
+            const above = openerRect.top - offset - VIEWPORT_MARGIN;
+            if (height > (calculatedPosition.startsWith("bottom") ? below : above)) {
+                calculatedPosition = calculatedPosition.replace(/^(top|bottom)/, below >= above ? "bottom" : "top");
+            }
+            const room = Math.max(calculatedPosition.startsWith("bottom") ? below : above, MIN_MENU_HEIGHT);
+            if (height > room) {
+                fitted = room;
+                height = room;
+            }
+        }
+        menuElement.style.maxHeight = fitted !== null ? `${fitted}px` : (config.maxHeight ?? "");
         const positionClasses = [
             "position-top",
             "position-bottom",
@@ -130,16 +148,16 @@ export const createPositioner = (component, config) => {
         const offsetY = hasContainer ? -containerRect.top : scrollY;
         switch (calculatedPosition) {
             case "top-start":
-                top = openerRect.top + offsetY - menuRect.height - offset;
+                top = openerRect.top + offsetY - height - offset;
                 left = openerRect.left + offsetX;
                 break;
             case "top":
-                top = openerRect.top + offsetY - menuRect.height - offset;
+                top = openerRect.top + offsetY - height - offset;
                 left =
                     openerRect.left + offsetX + openerRect.width / 2 - menuRect.width / 2;
                 break;
             case "top-end":
-                top = openerRect.top + offsetY - menuRect.height - offset;
+                top = openerRect.top + offsetY - height - offset;
                 left = openerRect.right + offsetX - menuRect.width;
                 break;
             case "right-start":
@@ -152,7 +170,7 @@ export const createPositioner = (component, config) => {
                         openerRect.top +
                             offsetY +
                             openerRect.height / 2 -
-                            menuRect.height / 2;
+                            height / 2;
                 }
                 else {
                     top += offsetY;
@@ -160,7 +178,7 @@ export const createPositioner = (component, config) => {
                 left = openerRect.right + offsetX + offset;
                 break;
             case "right-end":
-                top = openerRect.bottom + offsetY - menuRect.height;
+                top = openerRect.bottom + offsetY - height;
                 left = openerRect.right + offsetX + offset;
                 break;
             case "bottom-start":
@@ -186,7 +204,7 @@ export const createPositioner = (component, config) => {
                         openerRect.top +
                             offsetY +
                             openerRect.height / 2 -
-                            menuRect.height / 2;
+                            height / 2;
                 }
                 else {
                     top += offsetY;
@@ -194,7 +212,7 @@ export const createPositioner = (component, config) => {
                 left = openerRect.left + offsetX - menuRect.width - offset;
                 break;
             case "left-end":
-                top = openerRect.bottom + offsetY - menuRect.height;
+                top = openerRect.bottom + offsetY - height;
                 left = openerRect.left + offsetX - menuRect.width - offset;
                 break;
         }
@@ -204,34 +222,18 @@ export const createPositioner = (component, config) => {
             if (config.width === "100%" && !isSubmenu) {
                 menuElement.style.width = `${openerRect.width}px`;
             }
-            if (config.maxHeight) {
-                menuElement.style.maxHeight = config.maxHeight;
-            }
             return;
         }
         const minTopSpacing = 48;
         if (top - scrollY < minTopSpacing) {
             top = minTopSpacing + scrollY;
         }
-        const viewportBottomMargin = 48;
-        const bottomEdge = top - scrollY + menuRect.height;
-        if (bottomEdge > viewportHeight - viewportBottomMargin) {
-            const availableHeight = viewportHeight - (top - scrollY) - viewportBottomMargin;
-            const minMenuHeight = Math.min(menuRect.height, 100);
-            const newMaxHeight = Math.max(availableHeight, minMenuHeight);
-            menuElement.style.maxHeight = `${newMaxHeight}px`;
-            if (config.maxHeight) {
-                const configMaxHeight = parseInt(config.maxHeight, 10);
-                if (!isNaN(configMaxHeight) &&
-                    configMaxHeight < parseInt(menuElement.style.maxHeight || "0", 10)) {
-                    menuElement.style.maxHeight = config.maxHeight;
-                }
-            }
-        }
-        else {
-            if (config.maxHeight) {
-                menuElement.style.maxHeight = config.maxHeight;
-            }
+        const bottomEdge = top - scrollY + height;
+        if (fitted === null && bottomEdge > viewportHeight - VIEWPORT_MARGIN) {
+            const available = viewportHeight - (top - scrollY) - VIEWPORT_MARGIN;
+            const shrunk = Math.max(available, Math.min(height, MIN_MENU_HEIGHT));
+            const configured = config.maxHeight ? parseInt(config.maxHeight, 10) : NaN;
+            menuElement.style.maxHeight = `${Number.isNaN(configured) ? shrunk : Math.min(shrunk, configured)}px`;
         }
         if (config.width === "100%" && !isSubmenu) {
             menuElement.style.width = `${openerRect.width}px`;
@@ -248,7 +250,7 @@ export const createPositioner = (component, config) => {
     const positionMenu = (openerElement) => {
         if (!openerElement || !component.element)
             return;
-        positionElement(component.element, openerElement, config.position ?? "bottom-start", false);
+        positionElement(component.element, config.positionTarget ?? openerElement, config.position ?? "bottom-start", false);
     };
     const positionSubmenu = (submenuElement, parentItemElement, level = 1) => {
         if (!submenuElement || !parentItemElement)