@eclipse-docks/core 0.7.126 → 0.7.130

package/src/contributions/default-ui-contributions.ts

@@ -44,7 +44,7 @@ contributionRegistry.registerContribution(ABOUT_TABS, {
     ranking: 100,
     toolbar: false,
     contextMenu: false,
-    component: (id: string) => html`<docks-attribution id="${id}"></docks-attribution>`
+    component: (id: string) => html`<docks-attribution id="${id}" embedded></docks-attribution>`
 });
 
 contributionRegistry.registerContribution(ABOUT_TABS, {
@@ -54,7 +54,7 @@ contributionRegistry.registerContribution(ABOUT_TABS, {
     ranking: 50,
     toolbar: false,
     contextMenu: false,
-    component: (id: string) => html`<docks-release-history id="${id}"></docks-release-history>`
+    component: (id: string) => html`<docks-release-history id="${id}" embedded></docks-release-history>`
 });
 
 contributionRegistry.registerContribution(ABOUT_TABS, {
@@ -64,7 +64,7 @@ contributionRegistry.registerContribution(ABOUT_TABS, {
     ranking: 0,
     toolbar: false,
     contextMenu: false,
-    component: (id: string) => html`<docks-npm-packages id="${id}"></docks-npm-packages>`
+    component: (id: string) => html`<docks-npm-packages id="${id}" embedded></docks-npm-packages>`
 });
 
 contributionRegistry.registerContribution(SYSTEM_ATTRIBUTIONS, {
@@ -100,7 +100,7 @@ contributionRegistry.registerContribution(TOOLBAR_BOTTOM_END, {
 
 contributionRegistry.registerContribution(TOOLBAR_MAIN_RIGHT, {
     name: TOOLBAR_LAYOUT_SWITCHER,
-    label: "Layout Switcher",
+    label: "Layout panels",
     component: () => html`<docks-layout-switcher></docks-layout-switcher>`
 } as HTMLContribution);
 

package/src/core/apploader.ts

@@ -26,21 +26,12 @@ import { publish } from "./events";
 
 const logger = createLogger('AppLoader');
 
-/** Layout reference: layout id string, or id + props to parameterize the layout (e.g. show-bottom-panel). */
+/** Layout reference: layout id string, or id + optional props read by the layout on init. */
 export type LayoutDescriptor = string | { id: string; props?: Record<string, string | boolean> };
 
 function getLayoutIdFromApp(app: AppDefinition | undefined): string {
-    if (!app) return 'standard';
-    const l = app.layout ?? app.layoutId;
-    return typeof l === 'object' ? l.id : (l ?? 'standard');
-}
-
-function propsToAttributes(props: Record<string, string | boolean>): Record<string, string> {
-    const out: Record<string, string> = {};
-    for (const [k, v] of Object.entries(props)) {
-        out[k] = typeof v === 'boolean' ? (v ? 'true' : 'false') : v;
-    }
-    return out;
+    const layout = app?.layout ?? 'standard';
+    return typeof layout === 'object' ? layout.id : layout;
 }
 
 /**
@@ -177,15 +168,11 @@ export interface AppDefinition {
     releaseHistory?: ReleaseHistory | (() => ReleaseHistory | Promise<ReleaseHistory>);
 
     /**
-     * Layout: id (string) or { id, props } to parameterize the layout.
-     * App root is the chosen layout's component. Props are merged as attributes when rendering (e.g. show-bottom-panel).
+     * Layout: id (string) or { id, props }. The layout component reads props on init (e.g. panel visibility).
      * Defaults to 'standard' when omitted.
      */
     layout?: LayoutDescriptor;
 
-    /** @deprecated Use layout (string or { id, props }) instead. */
-    layoutId?: string;
-
     /**
      * Optional cleanup function.
      * Called when the app is being unloaded, before extensions are disabled.
@@ -248,8 +235,6 @@ class AppLoaderService {
     private container: HTMLElement = document.body;
     private systemRequiredExtensions: Set<string> = new Set();
     private static readonly PREFERRED_APP_KEY = 'preferredAppName';
-    private static readonly PREFERRED_LAYOUT_KEY = 'preferredLayoutId';
-    private preferredLayoutId?: string;
     
     /**
      * Register an application with the framework.
@@ -269,6 +254,7 @@ class AppLoaderService {
         }
         app.name = app.name ?? 'app';
         app.version = app.version ?? '0.0.0';
+        app.layout = app.layout ?? 'standard';
 
         if (this.apps.has(app.name)) {
             logger.warn(`App '${app.name}' is already registered. Overwriting.`);
@@ -443,7 +429,6 @@ class AppLoaderService {
 
         this.currentApp = app;
         logger.info(`App ${app.name} loaded successfully`);
-        this.preferredLayoutId = await this.getPreferredLayoutId();
         this.updateDocumentMetadata(app);
         if (container) {
             this.dispatchLoadProgress('Rendering layout…');
@@ -485,7 +470,7 @@ class AppLoaderService {
             throw new Error('No app loaded. Call loadApp() first.');
         }
 
-        const layoutId = this.preferredLayoutId ?? getLayoutIdFromApp(this.currentApp);
+        const layoutId = getLayoutIdFromApp(this.currentApp);
         const layouts = contributionRegistry.getContributions<LayoutContribution>(SYSTEM_LAYOUTS);
         let layout = layouts.find((c) => c.id === layoutId);
         if (!layout) {
@@ -501,10 +486,6 @@ class AppLoaderService {
         if (r && typeof r === 'object' && 'tag' in r && r.attributes) {
             effectiveAttributes = { ...r.attributes };
         }
-        const appLayout = this.currentApp?.layout;
-        if (typeof appLayout === 'object' && appLayout.id === layoutId && appLayout.props) {
-            Object.assign(effectiveAttributes, propsToAttributes(appLayout.props));
-        }
 
         container.innerHTML = '';
         if (typeof r === 'string') {
@@ -582,35 +563,7 @@ class AppLoaderService {
     }
 
     getCurrentLayoutId(): string {
-        return this.preferredLayoutId ?? getLayoutIdFromApp(this.currentApp);
-    }
-
-    async getPreferredLayoutId(): Promise<string | undefined> {
-        try {
-            return await appSettings.get(AppLoaderService.PREFERRED_LAYOUT_KEY);
-        } catch (error) {
-            logger.debug(`Failed to get preferred layout ID: ${getErrorMessage(error)}`);
-            return undefined;
-        }
-    }
-
-    async setPreferredLayoutId(layoutId: string): Promise<void> {
-        const layouts = this.getRegisteredLayouts();
-        if (!layouts.some((l) => l.id === layoutId)) {
-            throw new Error(`Layout '${layoutId}' not found.`);
-        }
-        try {
-            await appSettings.set(AppLoaderService.PREFERRED_LAYOUT_KEY, layoutId);
-            this.preferredLayoutId = layoutId;
-            logger.info(`Set preferred layout to: ${layoutId}`);
-            if (this.currentApp && this.container) {
-                this.renderApp(this.container);
-            }
-            window.dispatchEvent(new CustomEvent('layout-changed', { detail: { layoutId } }));
-        } catch (error) {
-            logger.error(`Failed to persist preferred layout: ${getErrorMessage(error)}`);
-            throw error;
-        }
+        return getLayoutIdFromApp(this.currentApp);
     }
     
     /**

package/src/core/contribution-names.ts

@@ -27,8 +27,5 @@ export const ABOUT_TAB_ATTRIBUTIONS = "about.tab.attributions";
 
 export const ATTRIBUTION_ECLIPSE_DOCKS = "attribution.eclipse-docks";
 
-export const TOOLBAR_FILEBROWSER_RENAME = "toolbar.filebrowser.rename";
-export const TOOLBAR_FILEBROWSER_DELETE = "toolbar.filebrowser.delete";
-
 export const CTXMENU_FILEBROWSER_RENAME = "contextmenu.filebrowser.rename";
 export const CTXMENU_FILEBROWSER_DELETE = "contextmenu.filebrowser.delete";

package/src/core/contribution-targets.ts

@@ -21,4 +21,5 @@ export const EDITOR_AREA_MAIN = "editor-area-main"
 export const SIDEBAR_MAIN = "sidebar-main"
 export const SIDEBAR_MAIN_BOTTOM = "sidebar-main-bottom"
 export const SIDEBAR_AUXILIARY = "sidebar-auxiliary"
+export const SIDEBAR_AUXILIARY_BOTTOM = "sidebar-auxiliary-bottom"
 export const PANEL_BOTTOM = "panel-bottom"

package/src/core/contributionregistry.ts

@@ -39,6 +39,24 @@ export function isCommandContribution(contribution: Contribution): contribution
     return "command" in contribution;
 }
 
+export type ReactiveBoolean = boolean | (() => boolean) | Signal.Computed<boolean>;
+
+/** Reads a static or reactive boolean; plain functions and {@link Signal.Computed} are evaluated at call time. */
+export function readReactiveBoolean(
+    value: ReactiveBoolean | undefined,
+    defaultValue: boolean
+): boolean {
+    if (value === undefined) return defaultValue;
+    if (typeof value === 'boolean') return value;
+    if (typeof value === 'object' && value !== null && 'get' in value) {
+        return (value as Signal.Computed<boolean>).get() === true;
+    }
+    if (typeof value === 'function') {
+        return (value as () => boolean)() === true;
+    }
+    return defaultValue;
+}
+
 /** Default true when `visible` is omitted. */
 export function getContributionVisible(contribution: Contribution): boolean {
     const visible = contribution.visible as Signal.Computed<boolean> | undefined;
@@ -48,9 +66,7 @@ export function getContributionVisible(contribution: Contribution): boolean {
 
 /** Default false when `disabled` is omitted. */
 export function getContributionDisabled(contribution: Contribution): boolean {
-    const disabled = contribution.disabled as Signal.Computed<boolean> | undefined;
-    if (!disabled) return false;
-    return disabled.get() === true;
+    return readReactiveBoolean(contribution.disabled as ReactiveBoolean | undefined, false);
 }
 
 function wrapContributionReactiveFlags(contribution: Contribution): void {

package/src/core/dialogservice.ts

@@ -60,9 +60,11 @@ export const DELETE_BUTTON: DialogButton = {
 
 export interface DialogContribution extends Contribution {
     id: string;
+    /** When true, `component` renders a complete `wa-dialog`. The service only mounts and manages lifecycle. */
+    selfContained?: boolean;
     buttons?: DialogButton[];
     component: (state?: any) => TemplateResult;
-    onButton: (id: string, result: any, state?: any) => boolean | Promise<boolean> | void | Promise<void>;
+    onButton?: (id: string, result: any, state?: any) => boolean | Promise<boolean> | void | Promise<void>;
 }
 
 let dialogContainer: HTMLElement | null = null;
@@ -76,6 +78,38 @@ function getDialogContainer(): HTMLElement {
     return dialogContainer;
 }
 
+type WaDialogElement = HTMLElement & { open?: boolean };
+
+function findWaDialog(root: ParentNode): WaDialogElement | null {
+    if (root instanceof Element && root.tagName.toLowerCase() === 'wa-dialog') {
+        return root as WaDialogElement;
+    }
+
+    const children = root instanceof Document || root instanceof DocumentFragment || root instanceof Element
+        ? Array.from(root.children)
+        : root instanceof ShadowRoot
+            ? Array.from(root.children)
+            : [];
+
+    for (const child of children) {
+        if (child instanceof Element && child.tagName.toLowerCase() === 'wa-dialog') {
+            return child as WaDialogElement;
+        }
+        if (child instanceof Element && child.shadowRoot) {
+            const nested = findWaDialog(child.shadowRoot);
+            if (nested) {
+                return nested;
+            }
+        }
+        const nested = findWaDialog(child);
+        if (nested) {
+            return nested;
+        }
+    }
+
+    return null;
+}
+
 class DialogService {
     private contributions: Map<string, DialogContribution> = new Map();
     private contributionsChangeScheduled = false;
@@ -111,7 +145,7 @@ class DialogService {
                 continue;
             }
 
-            if (!contribution.onButton) {
+            if (!contribution.onButton && !contribution.selfContained) {
                 logger.warn(`Dialog contribution "${contribution.id}" has no onButton callback, skipping`);
                 continue;
             }
@@ -130,13 +164,13 @@ class DialogService {
 
         return new Promise((resolve) => {
             const container = getDialogContainer();
-            let isOpen = true;
+            let closed = false;
             let dialogContentElement: DocksDialogContent | null = null;
 
             const cleanup = async () => {
-                if (!isOpen) return;
-                isOpen = false;
-                
+                if (closed) return;
+                closed = true;
+
                 if (dialogContentElement) {
                     try {
                         await dialogContentElement.dispose();
@@ -145,50 +179,72 @@ class DialogService {
                         logger.error(`Error disposing dialog content for "${dialogId}": ${errorMessage}`);
                     }
                 }
-                
+
                 try {
                     const result = dialogContentElement ? dialogContentElement.getResult() : undefined;
-                    await contribution.onButton('close', result, stateWithClose);
+                    if (contribution.onButton) {
+                        await contribution.onButton('close', result, stateWithClose);
+                    }
                 } catch (error) {
                     const errorMessage = error instanceof Error ? error.message : String(error);
                     logger.error(`Error executing close callback for dialog "${dialogId}": ${errorMessage}`);
                 }
-                
+
                 render(html``, container);
                 resolve();
             };
 
+            const closeDialog = () => {
+                if (closed) return;
+                const dialog = findWaDialog(container);
+                if (dialog && dialog.open !== false) {
+                    dialog.open = false;
+                    return;
+                }
+                void cleanup();
+            };
+
+            const handleAfterHide = () => {
+                void cleanup();
+            };
+
             const handleButtonClick = async (buttonId: string) => {
+                if (!contribution.onButton) {
+                    return;
+                }
                 try {
                     const result = dialogContentElement ? dialogContentElement.getResult() : undefined;
                     const shouldClose = await contribution.onButton(buttonId, result, stateWithClose);
-                    
+
                     if (shouldClose !== false) {
-                        cleanup();
+                        closeDialog();
                     }
                 } catch (error) {
                     const errorMessage = error instanceof Error ? error.message : String(error);
                     logger.error(`Error executing button callback for dialog "${dialogId}": ${errorMessage}`);
-                    cleanup();
+                    closeDialog();
                 }
             };
 
-            const buttons = contribution.buttons && contribution.buttons.length > 0 
-                ? contribution.buttons 
+            const buttons = contribution.buttons && contribution.buttons.length > 0
+                ? contribution.buttons
                 : [OK_BUTTON];
 
+            const stateWithClose = { ...state, close: closeDialog, onAfterHide: handleAfterHide };
             if (state && typeof state === 'object') {
-                (state as any).close = cleanup;
+                (state as { close?: () => void }).close = closeDialog;
+                (state as { onAfterHide?: () => void }).onAfterHide = handleAfterHide;
             }
-            const stateWithClose = { ...state, close: cleanup };
 
             const dialogLabel =
                 state && typeof state === 'object' && typeof (state as { label?: unknown }).label === 'string'
                     ? (state as { label: string }).label
                     : (contribution.label || dialogId);
 
-            const template = html`
-                <wa-dialog label="${dialogLabel}" open @wa-request-close=${cleanup}>
+            const template = contribution.selfContained
+                ? contribution.component(stateWithClose)
+                : html`
+                <wa-dialog label="${dialogLabel}" open @wa-after-hide=${handleAfterHide}>
                     <style>
                         .dialog-service-content {
                             display: flex;
@@ -224,7 +280,7 @@ class DialogService {
                              if (cancelButton) {
                                  handleButtonClick(cancelButton.id);
                              } else {
-                                 cleanup();
+                                 closeDialog();
                              }
                          }}>
                         ${contribution.component(state)}
@@ -232,6 +288,7 @@ class DialogService {
                         <div class="dialog-service-footer">
                             ${buttons.map(button => html`
                                 <wa-button 
+                                    data-dialog-button="${button.id}"
                                     variant="${button.variant || 'default'}"
                                     ?disabled=${button.disabled}
                                     @click=${() => handleButtonClick(button.id)}

package/src/core/dropdown-item.ts

@@ -0,0 +1,187 @@
+/**
+ * Shared render helpers for {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}
+ * rows inside any Docks popup list.
+ *
+ * **Docks surfaces** (distinct UX and contribution targets):
+ * - **Toolbar dropdown** — anchored to a toolbar control (`docks-command`, `docks-toolbar`).
+ *   Part-level registry targets use the `toolbar:` prefix (e.g. `toolbar:view.filebrowser`).
+ * - **Context menu** — opened at the pointer (`docks-contextmenu`).
+ *   Part-level registry targets use the `contextmenu:` prefix (e.g. `contextmenu:view.filebrowser`).
+ *
+ * A part can expose both surfaces with the same part id but different prefixes, registering
+ * different contributions on each. Feature-scoped targets (e.g. `filebrowser.create`) may also
+ * be referenced explicitly from either surface when several controls share the same item set.
+ *
+ * Command-backed items rely on the parent {@link https://webawesome.com/docs/components/dropdown | wa-dropdown}
+ * `wa-select` event (see {@link handleDropdownWaSelect}) so the popup closes cleanly before
+ * native dialogs such as `showDirectoryPicker` open.
+ */
+import { html, nothing, type TemplateResult } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { commandRegistry } from './commandregistry';
+import { icon } from './icon-utils';
+import { keyBindingManager } from './keybindings';
+import {
+    type Contribution,
+    type CommandContribution,
+    type HTMLContribution,
+    type ReactiveBoolean,
+    contributionRegistry,
+    getContributionVisible,
+    readReactiveBoolean,
+} from './contributionregistry';
+
+export type { ReactiveBoolean };
+
+export interface DropdownItemOptions {
+    cmd?: string;
+    icon?: string;
+    label: string;
+    title?: string;
+    params?: Record<string, unknown>;
+    disabled?: ReactiveBoolean;
+    variant?: 'default' | 'danger';
+    slot?: string;
+    action?: (event: Event) => void;
+}
+
+type WaSelectDetail = {
+    item?: HTMLElement & { value?: string; disabled?: boolean };
+};
+
+function parseDropdownItemParams(item: HTMLElement): Record<string, unknown> {
+    const raw = item.getAttribute('data-params');
+    if (!raw) {
+        return {};
+    }
+    try {
+        return JSON.parse(raw) as Record<string, unknown>;
+    } catch {
+        return {};
+    }
+}
+
+function getDropdownItemCommand(item: HTMLElement): string | undefined {
+    return item.getAttribute('data-cmd') || item.getAttribute('value') || undefined;
+}
+
+/** Handles `wa-select` from a parent `wa-dropdown` and runs the backing command. */
+export function handleDropdownWaSelect(event: CustomEvent<WaSelectDetail>): void {
+    const item = event.detail?.item;
+    if (!item || item.disabled || item.hasAttribute('disabled')) {
+        return;
+    }
+
+    const cmd = getDropdownItemCommand(item);
+    if (!cmd) {
+        return;
+    }
+
+    void commandRegistry.execute(
+        cmd,
+        commandRegistry.createExecutionContext(parseDropdownItemParams(item)),
+    );
+}
+
+function onDropdownActionClick(options: DropdownItemOptions) {
+    return (event: Event) => {
+        if (readReactiveBoolean(options.disabled, false)) {
+            return;
+        }
+        event.stopPropagation();
+        options.action?.(event);
+    };
+}
+
+function keybindingDetails(cmd?: string): TemplateResult | typeof nothing {
+    if (!cmd) return nothing;
+    const bindings = keyBindingManager.getKeyBindingsForCommand(cmd);
+    if (bindings.length === 0) return nothing;
+    return html`<span slot="details">${bindings[0]}</span>`;
+}
+
+/** Renders a native {@link https://webawesome.com/docs/components/dropdown-item | wa-dropdown-item}. */
+export function renderDropdownItem(options: DropdownItemOptions): TemplateResult {
+    const iconSpec = options.icon ?? '';
+    const paramsJson =
+        options.params && Object.keys(options.params).length > 0
+            ? JSON.stringify(options.params)
+            : undefined;
+
+    return html`
+        <wa-dropdown-item
+            slot=${options.slot ?? nothing}
+            variant=${options.variant ?? 'default'}
+            value=${options.cmd ?? nothing}
+            data-cmd=${options.cmd ?? nothing}
+            data-params=${paramsJson ?? nothing}
+            ?disabled=${readReactiveBoolean(options.disabled, false)}
+            @click=${options.action ? onDropdownActionClick(options) : nothing}>
+            ${iconSpec ? icon(iconSpec, { label: options.title ?? options.label, slot: 'icon' }) : nothing}
+            ${options.label}
+            ${keybindingDetails(options.cmd)}
+        </wa-dropdown-item>
+    `;
+}
+
+export function renderCommandContribution(
+    contribution: CommandContribution,
+    options?: { slot?: string }
+): TemplateResult | typeof nothing {
+    if (!getContributionVisible(contribution)) return nothing;
+    return renderDropdownItem({
+        cmd: contribution.command,
+        icon: contribution.icon,
+        label: contribution.label,
+        params: contribution.params,
+        disabled: contribution.disabled,
+        slot: options?.slot,
+    });
+}
+
+export function renderDropdownContribution(
+    contribution: Contribution,
+    options?: { slot?: string }
+): TemplateResult | typeof nothing {
+    if ('command' in contribution) {
+        return renderCommandContribution(contribution as CommandContribution, options);
+    }
+    if ('component' in contribution) {
+        if (!getContributionVisible(contribution)) return nothing;
+        const contents = (contribution as HTMLContribution).component;
+        if (contents instanceof Function) {
+            return contents();
+        }
+        return html`${unsafeHTML(contents)}` as TemplateResult;
+    }
+    return nothing;
+}
+
+/** Renders all visible contributions registered for a contribution target. */
+export function renderDropdownContributions(
+    target: string,
+    options?: { slot?: string }
+): TemplateResult {
+    const items = contributionRegistry
+        .getContributions(target)
+        .map((c) => renderDropdownContribution(c, options))
+        .filter((item) => item !== nothing);
+    return html`${items}`;
+}
+
+/** Renders a {@link wa-dropdown-item} with nested items from a contribution target in {@code slot="submenu"}. */
+export function renderDropdownSubmenu(options: {
+    icon?: string;
+    label: string;
+    title?: string;
+    contributionTarget: string;
+    disabled?: ReactiveBoolean;
+}): TemplateResult {
+    return html`
+        <wa-dropdown-item ?disabled=${readReactiveBoolean(options.disabled, false)}>
+            ${options.icon ? icon(options.icon, { label: options.title ?? options.label, slot: 'icon' }) : nothing}
+            ${options.label}
+            ${renderDropdownContributions(options.contributionTarget, { slot: 'submenu' })}
+        </wa-dropdown-item>
+    `;
+}

package/src/core/dropdown-menu-utils.ts

@@ -1,4 +1,63 @@
 type DropdownItemElement = HTMLElement & { submenuOpen?: boolean };
+type OpenDropdownElement = HTMLElement & { open?: boolean };
+
+function isOpenDropdown(element: Element): element is OpenDropdownElement {
+  if (element.localName !== "wa-dropdown") return false;
+  const dropdown = element as OpenDropdownElement;
+  return dropdown.open === true || dropdown.hasAttribute("open");
+}
+
+function elementsFromEventPath(event: Event): Element[] {
+  const fromComposedPath = event
+    .composedPath()
+    .filter((node): node is Element => node instanceof Element);
+  if (fromComposedPath.length > 0) return fromComposedPath;
+
+  if (!(event.target instanceof Element)) return [];
+
+  const path: Element[] = [];
+  let current: Element | null = event.target;
+  while (current) {
+    path.push(current);
+    const root = current.getRootNode();
+    if (root instanceof ShadowRoot) {
+      current = root.host;
+      continue;
+    }
+    current = current.parentElement;
+  }
+  return path;
+}
+
+function elementTargetsOpenDropdown(element: Element): boolean {
+  if (isOpenDropdown(element)) return true;
+  if (element.localName !== "wa-dropdown-item") return false;
+  const dropdown = element.closest("wa-dropdown");
+  if (dropdown && isOpenDropdown(dropdown)) return true;
+  const root = element.getRootNode();
+  return root instanceof ShadowRoot
+    && root.host instanceof Element
+    && isOpenDropdown(root.host);
+}
+
+/** True when the event occurred inside a wa-dropdown that is currently open. */
+export function eventTargetsOpenDropdown(event: Event): boolean {
+  return elementsFromEventPath(event).some(elementTargetsOpenDropdown);
+}
+
+/** Prevents the browser context menu on open Docks popup lists (context menus, toolbar dropdowns). */
+export function suppressNativeContextMenuInOpenDropdowns(event: Event): void {
+  if (!event.cancelable || !eventTargetsOpenDropdown(event)) return;
+  event.preventDefault();
+}
+
+let openDropdownContextMenuGuardInstalled = false;
+
+export function installOpenDropdownNativeContextMenuGuard(): void {
+  if (openDropdownContextMenuGuardInstalled || typeof document === "undefined") return;
+  openDropdownContextMenuGuardInstalled = true;
+  document.addEventListener("contextmenu", suppressNativeContextMenuInOpenDropdowns, { capture: true });
+}
 
 function visitElementTree(root: Node, visit: (element: Element) => void): void {
   if (root instanceof Element) {