@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/src/dropdown/menu/dropdownmenubehaviors.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type DropdownMenuNestedMenuView from './dropdownmenunestedmenuview.js';
+import type DropdownMenuRootListView from './dropdownmenurootlistview.js';
+export declare const DropdownRootMenuBehaviors: {
+    /**
+     * Move focus to a menu item on mouse hover. If it is a button to open a nested menu, open that menu.
+     */
+    toggleMenusAndFocusItemsOnHover(rootList: DropdownMenuRootListView): void;
+    /**
+     * Handles the following case:
+     *
+     * 1. Hover to open a sub-menu (A). The button has focus.
+     * 2. Press arrow up/down to move focus to another sub-menu (B) button.
+     * 3. Press arrow right to open the sub-menu (B).
+     * 4. The sub-menu (A) should close (if not, there are two open menus).
+     */
+    closeMenuWhenAnotherOnTheSameLevelOpens(rootList: DropdownMenuRootListView): void;
+};
+export declare const DropdownMenuBehaviors: {
+    /**
+     * Open the menu on the right arrow key press (left, in RTL mode). This allows for navigating to sub-menus using the keyboard.
+     */
+    openOnArrowRightKey(menuView: DropdownMenuNestedMenuView): void;
+    /**
+     * Opens the menu on its button click as well as enter and space keys press (if the button is focused).
+     */
+    openOnButtonClick(menuView: DropdownMenuNestedMenuView): void;
+    /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: DropdownMenuNestedMenuView): void;
+    /**
+     * Closes the menu on the left key press (right, in RTL mode). This allows for navigating to sub-menus using the keyboard.
+     */
+    closeOnArrowLeftKey(menuView: DropdownMenuNestedMenuView): void;
+    closeOnEscKey(menuView: DropdownMenuNestedMenuView): void;
+    /**
+     * Closes the menu when its parent menu closes. This prevents from leaving orphaned open menus.
+     */
+    closeOnParentClose(menuView: DropdownMenuNestedMenuView, parentMenuView: DropdownMenuNestedMenuView): void;
+};

package/src/dropdown/menu/dropdownmenubehaviors.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import DropdownMenuListItemView from './dropdownmenulistitemview.js';
+export const DropdownRootMenuBehaviors = {
+    /**
+     * Move focus to a menu item on mouse hover. If it is a button to open a nested menu, open that menu.
+     */
+    toggleMenusAndFocusItemsOnHover(rootList) {
+        rootList.on('menu:mouseenter', evt => {
+            const [pathLeaf] = evt.path;
+            evt.source.focus();
+            for (const menuView of rootList.menus) {
+                const isListItemContainingMenu = pathLeaf instanceof DropdownMenuListItemView && pathLeaf.childView === menuView;
+                menuView.isOpen = (evt.path.includes(menuView) || isListItemContainingMenu) && menuView.isEnabled;
+            }
+        });
+    },
+    /**
+     * Handles the following case:
+     *
+     * 1. Hover to open a sub-menu (A). The button has focus.
+     * 2. Press arrow up/down to move focus to another sub-menu (B) button.
+     * 3. Press arrow right to open the sub-menu (B).
+     * 4. The sub-menu (A) should close (if not, there are two open menus).
+     */
+    closeMenuWhenAnotherOnTheSameLevelOpens(rootList) {
+        rootList.on('menu:change:isOpen', (evt, name, isOpen) => {
+            if (!isOpen) {
+                return;
+            }
+            const evtMenu = evt.source;
+            for (const menuView of rootList.menus) {
+                if (evtMenu.parentMenuView === menuView.parentMenuView && evtMenu !== menuView) {
+                    menuView.isOpen = false;
+                }
+            }
+        });
+    }
+};
+export const DropdownMenuBehaviors = {
+    /**
+     * Open the menu on the right arrow key press (left, in RTL mode). This allows for navigating to sub-menus using the keyboard.
+     */
+    openOnArrowRightKey(menuView) {
+        const keystroke = menuView.locale.uiLanguageDirection === 'rtl' ? 'arrowleft' : 'arrowright';
+        menuView.keystrokes.set(keystroke, (data, cancel) => {
+            if (menuView.focusTracker.focusedElement !== menuView.buttonView.element || !menuView.isEnabled) {
+                return;
+            }
+            if (!menuView.isOpen) {
+                menuView.isOpen = true;
+            }
+            menuView.panelView.focus();
+            cancel();
+        });
+    },
+    /**
+     * Opens the menu on its button click as well as enter and space keys press (if the button is focused).
+     */
+    openOnButtonClick(menuView) {
+        menuView.buttonView.on('execute', () => {
+            if (menuView.isEnabled) {
+                menuView.isOpen = true;
+            }
+        });
+    },
+    /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView) {
+        menuView.keystrokes.set('enter', (data, cancel) => {
+            // Engage only for Enter key press when the button is focused. The panel can contain
+            // other UI components and features that rely on the Enter key press.
+            if (menuView.focusTracker.focusedElement !== menuView.buttonView.element) {
+                return;
+            }
+            menuView.isOpen = true;
+            menuView.panelView.focus();
+            cancel();
+        });
+    },
+    /**
+     * Closes the menu on the left key press (right, in RTL mode). This allows for navigating to sub-menus using the keyboard.
+     */
+    closeOnArrowLeftKey(menuView) {
+        const keystroke = menuView.locale.uiLanguageDirection === 'rtl' ? 'arrowright' : 'arrowleft';
+        menuView.keystrokes.set(keystroke, (data, cancel) => {
+            if (menuView.isOpen) {
+                // Focus first, then close the panel. Otherwise, Safari won't send blur events for detached DOM elements, leading to errors.
+                menuView.focus();
+                menuView.isOpen = false;
+                cancel();
+            }
+        });
+    },
+    closeOnEscKey(menuView) {
+        menuView.keystrokes.set('esc', (data, cancel) => {
+            if (menuView.isOpen) {
+                // Focus first, then close the panel. Otherwise, Safari won't send blur events for detached DOM elements, leading to errors.
+                menuView.focus();
+                menuView.isOpen = false;
+                cancel();
+            }
+        });
+    },
+    /**
+     * Closes the menu when its parent menu closes. This prevents from leaving orphaned open menus.
+     */
+    closeOnParentClose(menuView, parentMenuView) {
+        parentMenuView.on('change:isOpen', (evt, name, isOpen) => {
+            // TODO: Remove checking `evt.source` if `change:isOpen` is no longer delegated.
+            if (!isOpen && evt.source === parentMenuView) {
+                menuView.isOpen = false;
+            }
+        });
+    }
+};

package/src/dropdown/menu/dropdownmenubuttonview.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenubuttonview
+ */
+import IconView from '../../icon/iconview.js';
+import ListItemButtonView from '../../button/listitembuttonview.js';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
+/**
+ * Represents a view for a dropdown menu button.
+ */
+export default class DropdownMenuButtonView extends ListItemButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    readonly arrowView: IconView;
+    /**
+     * Creates an instance of the dropdown menu button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Creates the arrow view instance.
+     *
+     * @private
+     */
+    private _createArrowView;
+}

package/src/dropdown/menu/dropdownmenubuttonview.js

@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenubuttonview
+ */
+import IconView from '../../icon/iconview.js';
+import ListItemButtonView from '../../button/listitembuttonview.js';
+import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
+import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
+/**
+ * Represents a view for a dropdown menu button.
+ */
+export default class DropdownMenuButtonView extends ListItemButtonView {
+    /**
+     * Creates an instance of the dropdown menu button view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set({
+            withText: true,
+            role: 'menuitem'
+        });
+        this.arrowView = this._createArrowView();
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-dropdown-menu-list__nested-menu__button'
+                ],
+                'aria-haspopup': true,
+                'aria-expanded': this.bindTemplate.to('isOn', value => String(value)),
+                'data-cke-tooltip-disabled': bind.to('isOn')
+            },
+            on: {
+                'mouseenter': bind.to('mouseenter')
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.children.add(this.arrowView);
+    }
+    /**
+     * Creates the arrow view instance.
+     *
+     * @private
+     */
+    _createArrowView() {
+        const arrowView = new IconView();
+        arrowView.content = dropdownArrowIcon;
+        arrowView.extendTemplate({
+            attributes: {
+                class: 'ck-dropdown-menu-list__nested-menu__button__arrow'
+            }
+        });
+        return arrowView;
+    }
+}

package/src/dropdown/menu/dropdownmenulistitembuttonview.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenulistitembuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import ButtonView from '../../button/buttonview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenulistitembutton.css';
+/**
+ * Represents a view for a button in a dropdown menu list item.
+ */
+export default class DropdownMenuListItemButtonView extends ButtonView {
+    readonly id: string;
+    constructor(locale: Locale, id: string, label: string);
+}

package/src/dropdown/menu/dropdownmenulistitembuttonview.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ButtonView from '../../button/buttonview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenulistitembutton.css';
+/**
+ * Represents a view for a button in a dropdown menu list item.
+ */
+export default class DropdownMenuListItemButtonView extends ButtonView {
+    constructor(locale, id, label) {
+        super(locale);
+        this.id = id;
+        this.set({
+            withText: true,
+            withKeystroke: true,
+            tooltip: false,
+            role: 'menuitem',
+            label
+        });
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-dropdown-menu-list__nested-menu__item__button'
+                ]
+            }
+        });
+    }
+}

package/src/dropdown/menu/dropdownmenulistitemview.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenulistitemview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type DropdownMenuNestedMenuView from './dropdownmenunestedmenuview.js';
+import ListItemView from '../../list/listitemview.js';
+import DropdownMenuListItemButtonView from './dropdownmenulistitembuttonview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenulistitem.css';
+/**
+ * Represents a view for a single item in a dropdown menu list.
+ */
+export default class DropdownMenuListItemView extends ListItemView {
+    /**
+     * The view representing either a flat item or a nested menu in a dropdown menu list item.
+     */
+    readonly childView: DropdownMenuNestedMenuView | DropdownMenuListItemButtonView;
+    constructor(locale: Locale, parentMenuView: DropdownMenuNestedMenuView | null, childView: DropdownMenuNestedMenuView | DropdownMenuListItemButtonView);
+}

package/src/dropdown/menu/dropdownmenulistitemview.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ListItemView from '../../list/listitemview.js';
+import DropdownMenuListItemButtonView from './dropdownmenulistitembuttonview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenulistitem.css';
+/**
+ * Represents a view for a single item in a dropdown menu list.
+ */
+export default class DropdownMenuListItemView extends ListItemView {
+    constructor(locale, parentMenuView, childView) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.childView = childView;
+        this.children.add(childView);
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-dropdown-menu-list__nested-menu__item'
+                ]
+            },
+            on: {
+                'mouseenter': bind.to('mouseenter')
+            }
+        });
+        if (parentMenuView) {
+            this.delegate('mouseenter').to(parentMenuView);
+            if (childView instanceof DropdownMenuListItemButtonView) {
+                childView.delegate('execute').to(parentMenuView);
+            }
+        }
+    }
+}

package/src/dropdown/menu/dropdownmenulistview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenulistview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import ListView from '../../list/listview.js';
+/**
+ * Represents a dropdown menu list view.
+ */
+export default class DropdownMenuListView extends ListView {
+    /**
+     * Represents whether the dropdown menu list view is visible or not.
+     */
+    isVisible: boolean;
+    /**
+     * Creates an instance of the dropdown menu list view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+}

package/src/dropdown/menu/dropdownmenulistview.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ListView from '../../list/listview.js';
+/**
+ * Represents a dropdown menu list view.
+ */
+export default class DropdownMenuListView extends ListView {
+    /**
+     * Creates an instance of the dropdown menu list view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.role = 'menu';
+        this.set('isVisible', true);
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-dropdown-menu-list',
+                    bind.if('isVisible', 'ck-hidden', value => !value)
+                ]
+            }
+        });
+    }
+}

package/src/dropdown/menu/dropdownmenunestedmenupanelview.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenunestedmenupanelview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type { FocusableView } from '../../focuscycler.js';
+import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenupanel.css';
+/**
+ * Represents the view for the dropdown menu panel.
+ */
+export default class DropdownMenuNestedMenuPanelView extends BalloonPanelView implements FocusableView {
+    /**
+     * Creates an instance of the menu panel view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale?: Locale);
+    /**
+     * Focuses the first child of the panel (default) or the last one if the `direction` is `-1`.
+     *
+     * @param direction The direction to focus. Default is `1`.
+     */
+    focus(direction?: -1 | 1): void;
+}
+/**
+ * The names of the positions of the {@link module:ui/dropdown/menu/dropdownmenunestedmenupanelview~DropdownMenuNestedMenuPanelView}.
+ *
+ * They are reflected as CSS class suffixes on the panel view element.
+ */
+export type DropdownMenuNestedMenuPanelPosition = 'es' | 'ws' | 'en' | 'wn' | 'w' | 'e';

package/src/dropdown/menu/dropdownmenunestedmenupanelview.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenupanel.css';
+/**
+ * Represents the view for the dropdown menu panel.
+ */
+export default class DropdownMenuNestedMenuPanelView extends BalloonPanelView {
+    /**
+     * Creates an instance of the menu panel view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set({
+            isVisible: false,
+            position: 'se',
+            class: null,
+            top: 0,
+            left: 0
+        });
+        this.extendTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck-reset',
+                    'ck-dropdown-menu__nested-menu__panel'
+                ],
+                tabindex: '-1'
+            },
+            on: {
+                // Drag and drop in the panel should not break the selection in the editor.
+                // https://github.com/ckeditor/ckeditor5-ui/issues/228
+                selectstart: bind.to(evt => {
+                    if (evt.target.tagName.toLocaleLowerCase() === 'input') {
+                        return;
+                    }
+                    evt.preventDefault();
+                })
+            }
+        });
+    }
+    /**
+     * Focuses the first child of the panel (default) or the last one if the `direction` is `-1`.
+     *
+     * @param direction The direction to focus. Default is `1`.
+     */
+    focus(direction = 1) {
+        const { content } = this;
+        if (content.length) {
+            if (direction === 1) {
+                content.first.focus();
+            }
+            else {
+                content.last.focus();
+            }
+        }
+    }
+}

package/src/dropdown/menu/dropdownmenunestedmenuview.d.ts

@@ -0,0 +1,131 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/dropdown/menu/dropdownmenunestedmenuview
+ */
+import { FocusTracker, KeystrokeHandler, type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
+import type { FocusableView } from '../../focuscycler.js';
+import type BodyCollection from '../../editorui/bodycollection.js';
+import DropdownMenuButtonView from './dropdownmenubuttonview.js';
+import DropdownMenuListView from './dropdownmenulistview.js';
+import View from '../../view.js';
+import DropdownMenuNestedMenuPanelView, { type DropdownMenuNestedMenuPanelPosition } from './dropdownmenunestedmenupanelview.js';
+import '../../../theme/components/dropdown/menu/dropdownmenu.css';
+/**
+ * Represents a nested menu view.
+ */
+export default class DropdownMenuNestedMenuView extends View implements FocusableView {
+    /**
+     * An array of delegated events for the dropdown menu definition controller.
+     * These events are delegated to the dropdown menu element.
+     */
+    static readonly DELEGATED_EVENTS: readonly ["mouseenter", "execute", "change:isOpen"];
+    readonly id: string;
+    /**
+     * Button of the menu view.
+     */
+    readonly buttonView: DropdownMenuButtonView;
+    /**
+     * Panel of the menu. It hosts children of the menu.
+     */
+    readonly panelView: DropdownMenuNestedMenuPanelView;
+    /**
+     * List of nested menu entries.
+     */
+    readonly listView: DropdownMenuListView;
+    /**
+     * Tracks information about the DOM focus in the menu.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+     * keystrokes of the menu.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Controls whether the menu is open, i.e. shows or hides the {@link #panelView panel}.
+     *
+     * @observable
+     */
+    isOpen: boolean;
+    /**
+     * Controls whether the menu is enabled, i.e. its {@link #buttonView} can be clicked.
+     *
+     * @observable
+     */
+    isEnabled: boolean;
+    /**
+     * (Optional) The additional CSS class set on the menu {@link #element}.
+     *
+     * @observable
+     */
+    class: string | undefined;
+    /**
+     * The name of the position of the {@link #panelView}, relative to the menu.
+     *
+     * **Note**: The value is updated each time the panel gets {@link #isOpen open}.
+     *
+     * @observable
+     * @default 'w'
+     */
+    panelPosition: DropdownMenuNestedMenuPanelPosition;
+    /**
+     * The parent menu view of the menu. It is `null` for top-level menus.
+     *
+     * @observable
+     * @default null
+     */
+    readonly parentMenuView: DropdownMenuNestedMenuView | null;
+    private _bodyCollection;
+    /**
+     * Creates a new instance of the DropdownMenuView class.
+     *
+     * @param locale
+     * @param bodyCollection
+     * @param id
+     * @param label The label for the dropdown menu button.
+     * @param parentMenuView The parent dropdown menu view, if any.
+     */
+    constructor(locale: Locale, bodyCollection: BodyCollection, id: string, label: string, parentMenuView: DropdownMenuNestedMenuView | null);
+    /**
+     * An array of positioning functions used to determine the position of the dropdown menu panel.
+     * The order of the functions in the array determines the priority of the positions to be tried.
+     * The first function that returns a valid position will be used.
+     *
+     * @returns {Array<PositioningFunction>} An array of positioning functions.
+     * @internal
+     */
+    get _panelPositions(): Array<PositioningFunction>;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    private _handleParentMenuView;
+    /**
+     * Attach all keyboard behaviors for the menu view.
+     */
+    private _attachBehaviors;
+    /**
+     * Mounts the portal view in the body when the menu is open and removes it when the menu is closed.
+     * Binds keystrokes to the portal view when the menu is open.
+     */
+    private _mountPanelOnOpen;
+    /**
+     * Removes the panel view from the editor's body and removes it from the focus tracker.
+     */
+    private _removePanelFromBody;
+    /**
+     * Adds the panel view to the editor's body and sets up event listeners.
+     */
+    private _addPanelToBody;
+}