@ckeditor/ckeditor5-ui 41.3.0-alpha.4 → 41.3.1

package/src/menubar/menubarmenuview.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @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/menubar/menubarmenuview
+ */
+import { FocusTracker, KeystrokeHandler, type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
+import MenuBarMenuButtonView from './menubarmenubuttonview.js';
+import type { FocusableView } from '../focuscycler.js';
+import View from '../view.js';
+import { default as MenuBarMenuPanelView, type MenuBarMenuPanelPosition } from './menubarmenupanelview.js';
+import '../../theme/components/menubar/menubarmenu.css';
+/**
+ * A menu view for the {@link module:ui/menubar/menubarview~MenuBarView}. Menus are building blocks of the menu bar,
+ * they host other sub-menus and menu items (buttons) that users can interact with.
+ */
+export default class MenuBarMenuView extends View implements FocusableView {
+    /**
+     * Button of the menu view.
+     */
+    readonly buttonView: MenuBarMenuButtonView;
+    /**
+     * Panel of the menu. It hosts children of the menu.
+     */
+    readonly panelView: MenuBarMenuPanelView;
+    /**
+     * 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: MenuBarMenuPanelPosition;
+    /**
+     * The parent menu view of the menu. It is `null` for top-level menus.
+     *
+     * See {@link module:ui/menubar/menubarview~MenuBarView#registerMenu}.
+     */
+    parentMenuView: MenuBarMenuView | null;
+    /**
+     * Creates an instance of the menu view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Attach all keyboard behaviors for the menu bar view.
+     *
+     * @internal
+     */
+    _attachBehaviors(): void;
+    /**
+     * Fires `arrowright` and `arrowleft` events when the user pressed corresponding arrow keys.
+     */
+    private _propagateArrowKeystrokeEvents;
+    /**
+     * Sets the position of the panel when the menu opens. The panel is positioned
+     * so that it optimally uses the available space in the viewport.
+     */
+    private _repositionPanelOnOpen;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * Positioning functions for the {@link #panelView} . They change depending on the role of the menu (top-level vs sub-menu) in
+     * the {@link module:ui/menubar/menubarview~MenuBarView menu bar} and the UI language direction.
+     */
+    get _panelPositions(): Array<PositioningFunction>;
+    /**
+     * A function used to calculate the optimal position for the dropdown panel.
+     *
+     * Referenced for unit testing purposes.
+     */
+    private static _getOptimalPosition;
+}

package/src/menubar/menubarmenuview.js

@@ -0,0 +1,159 @@
+/**
+ * @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/menubar/menubarmenuview
+ */
+import { FocusTracker, KeystrokeHandler, getOptimalPosition } from '@ckeditor/ckeditor5-utils';
+import MenuBarMenuButtonView from './menubarmenubuttonview.js';
+import { MenuBarMenuBehaviors, MenuBarMenuViewPanelPositioningFunctions } from './utils.js';
+import View from '../view.js';
+import { default as MenuBarMenuPanelView } from './menubarmenupanelview.js';
+import '../../theme/components/menubar/menubarmenu.css';
+/**
+ * A menu view for the {@link module:ui/menubar/menubarview~MenuBarView}. Menus are building blocks of the menu bar,
+ * they host other sub-menus and menu items (buttons) that users can interact with.
+ */
+class MenuBarMenuView extends View {
+    /**
+     * Creates an instance of the menu view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.buttonView = new MenuBarMenuButtonView(locale);
+        this.buttonView.delegate('mouseenter').to(this);
+        this.buttonView.bind('isOn', 'isEnabled').to(this, 'isOpen', 'isEnabled');
+        this.panelView = new MenuBarMenuPanelView(locale);
+        this.panelView.bind('isVisible').to(this, 'isOpen');
+        this.keystrokes = new KeystrokeHandler();
+        this.focusTracker = new FocusTracker();
+        this.set('isOpen', false);
+        this.set('isEnabled', true);
+        this.set('panelPosition', 'w');
+        this.set('class', undefined);
+        this.set('parentMenuView', null);
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-menu-bar__menu',
+                    bind.to('class'),
+                    bind.if('isEnabled', 'ck-disabled', value => !value),
+                    bind.if('parentMenuView', 'ck-menu-bar__menu_top-level', value => !value)
+                ]
+            },
+            children: [
+                this.buttonView,
+                this.panelView
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.focusTracker.add(this.buttonView.element);
+        this.focusTracker.add(this.panelView.element);
+        // Listen for keystrokes coming from within #element.
+        this.keystrokes.listenTo(this.element);
+        MenuBarMenuBehaviors.closeOnEscKey(this);
+        this._repositionPanelOnOpen();
+    }
+    // For now, this method cannot be called in the render process because the `parentMenuView` may be assigned
+    // after the rendering process.
+    //
+    // TODO: We should reconsider the way we handle this logic.
+    /**
+     * Attach all keyboard behaviors for the menu bar view.
+     *
+     * @internal
+     */
+    _attachBehaviors() {
+        // Top-level menus.
+        if (!this.parentMenuView) {
+            this._propagateArrowKeystrokeEvents();
+            MenuBarMenuBehaviors.openAndFocusPanelOnArrowDownKey(this);
+            MenuBarMenuBehaviors.toggleOnButtonClick(this);
+        }
+        else {
+            MenuBarMenuBehaviors.openOnButtonClick(this);
+            MenuBarMenuBehaviors.openOnArrowRightKey(this);
+            MenuBarMenuBehaviors.closeOnArrowLeftKey(this);
+            MenuBarMenuBehaviors.closeOnParentClose(this);
+        }
+    }
+    /**
+     * Fires `arrowright` and `arrowleft` events when the user pressed corresponding arrow keys.
+     */
+    _propagateArrowKeystrokeEvents() {
+        this.keystrokes.set('arrowright', (data, cancel) => {
+            this.fire('arrowright');
+            cancel();
+        });
+        this.keystrokes.set('arrowleft', (data, cancel) => {
+            this.fire('arrowleft');
+            cancel();
+        });
+    }
+    /**
+     * Sets the position of the panel when the menu opens. The panel is positioned
+     * so that it optimally uses the available space in the viewport.
+     */
+    _repositionPanelOnOpen() {
+        // Let the menu control the position of the panel. The position must be updated every time the menu is open.
+        this.on('change:isOpen', (evt, name, isOpen) => {
+            if (!isOpen) {
+                return;
+            }
+            const optimalPanelPosition = MenuBarMenuView._getOptimalPosition({
+                element: this.panelView.element,
+                target: this.buttonView.element,
+                fitInViewport: true,
+                positions: this._panelPositions
+            });
+            this.panelView.position = (optimalPanelPosition ? optimalPanelPosition.name : this._panelPositions[0].name);
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    focus() {
+        this.buttonView.focus();
+    }
+    /**
+     * Positioning functions for the {@link #panelView} . They change depending on the role of the menu (top-level vs sub-menu) in
+     * the {@link module:ui/menubar/menubarview~MenuBarView menu bar} and the UI language direction.
+     */
+    get _panelPositions() {
+        const { southEast, southWest, northEast, northWest, westSouth, eastSouth, westNorth, eastNorth } = MenuBarMenuViewPanelPositioningFunctions;
+        if (this.locale.uiLanguageDirection === 'ltr') {
+            if (this.parentMenuView) {
+                return [eastSouth, eastNorth, westSouth, westNorth];
+            }
+            else {
+                return [southEast, southWest, northEast, northWest];
+            }
+        }
+        else {
+            if (this.parentMenuView) {
+                return [westSouth, westNorth, eastSouth, eastNorth];
+            }
+            else {
+                return [southWest, southEast, northWest, northEast];
+            }
+        }
+    }
+}
+/**
+ * A function used to calculate the optimal position for the dropdown panel.
+ *
+ * Referenced for unit testing purposes.
+ */
+MenuBarMenuView._getOptimalPosition = getOptimalPosition;
+export default MenuBarMenuView;

package/src/menubar/menubarview.d.ts

@@ -0,0 +1,164 @@
+/**
+ * @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/menubar/menubarview
+ */
+import { type BaseEvent, type Locale } from '@ckeditor/ckeditor5-utils';
+import { type FocusableView } from '../focuscycler.js';
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
+import type ComponentFactory from '../componentfactory.js';
+import MenuBarMenuView from './menubarmenuview.js';
+import '../../theme/components/menubar/menubar.css';
+/**
+ * The application menu bar component. It brings a set of top-level menus (and sub-menus) that can be used
+ * to organize and access a large number of buttons.
+ */
+export default class MenuBarView extends View implements FocusableView {
+    /**
+     * Collection of the child views inside the {@link #element}.
+     */
+    children: ViewCollection<MenuBarMenuView>;
+    /**
+     * Indicates whether any of top-level menus are open in the menu bar. To close
+     * the menu bar use the {@link #close} method.
+     *
+     * @observable
+     */
+    isOpen: boolean;
+    /**
+     * A list of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instances registered in the menu bar.
+     *
+     * @observable
+     */
+    menus: Array<MenuBarMenuView>;
+    /**
+     * Creates an instance of the menu bar view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale: Locale);
+    /**
+     * A utility that expands a plain menu bar configuration into a structure of menus (also: sub-menus)
+     * and items using a given {@link module:ui/componentfactory~ComponentFactory component factory}.
+     *
+     * See the {@link module:core/editor/editorconfig~EditorConfig#menuBar menu bar} in the editor
+     * configuration reference to learn how to configure the menu bar.
+     */
+    fillFromConfig(config: NormalizedMenuBarConfigObject, componentFactory: ComponentFactory): void;
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the menu bar.
+     */
+    focus(): void;
+    /**
+     * Closes all menus in the bar.
+     */
+    close(): void;
+    /**
+     * Registers a menu view in the menu bar. Every {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance must be registered
+     * in the menu bar to be properly managed.
+     */
+    registerMenu(menuView: MenuBarMenuView, parentMenuView?: MenuBarMenuView | null): void;
+    /**
+     * Creates a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} based on the given definition.
+     */
+    private _createMenu;
+    /**
+     * Creates a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} items based on the given definition.
+     */
+    private _createMenuItems;
+    /**
+     * Uses the component factory to create a content of the menu item (a button or a sub-menu).
+     */
+    private _createMenuItemContentFromFactory;
+    /**
+     * Checks component and its children recursively and calls {@link #registerMenu}
+     * for each item that is {@link module:ui/menubar/menubarmenuview~MenuBarMenuView}.
+     *
+     * @internal
+     */
+    private _registerMenuTree;
+    /**
+     * Manages the state of the {@link #isOpen} property of the menu bar. Because the state is a sum of individual
+     * top-level menus' states, it's necessary to listen to their changes and update the state accordingly.
+     *
+     * Additionally, it prevents from unnecessary changes of `isOpen` when one top-level menu opens and another closes
+     * (regardless of in which order), maintaining a stable `isOpen === true` in that situation.
+     */
+    private _setupIsOpenUpdater;
+}
+export type MenuBarConfig = MenuBarConfigObject;
+export type MenuBarConfigObject = {
+    items?: Array<MenuBarMenuDefinition>;
+    removeItems?: Array<string>;
+    addItems?: Array<MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu>;
+    isVisible?: boolean;
+};
+export type NormalizedMenuBarConfigObject = Required<MenuBarConfigObject> & {
+    isUsingDefaultConfig: boolean;
+};
+export type MenuBarMenuGroupDefinition = {
+    groupId: string;
+    items: Array<MenuBarMenuDefinition | string>;
+};
+export type MenuBarMenuDefinition = {
+    menuId: string;
+    label: string;
+    groups: Array<MenuBarMenuGroupDefinition>;
+};
+export type MenuBarConfigAddedPosition = `start:${string}` | `end:${string}` | 'start' | 'end' | `after:${string}` | `before:${string}`;
+export type MenuBarConfigAddedItem = {
+    item: string;
+    position: MenuBarConfigAddedPosition;
+};
+export type MenuBarConfigAddedGroup = {
+    group: MenuBarMenuGroupDefinition;
+    position: MenuBarConfigAddedPosition;
+};
+export type MenuBarConfigAddedMenu = {
+    menu: MenuBarMenuDefinition;
+    position: MenuBarConfigAddedPosition;
+};
+/**
+ * Any namespaced event fired by menu a {@link module:ui/menubar/menubarview~MenuBarView#menus menu view instance} of the
+ * {@link module:ui/menubar/menubarview~MenuBarView menu bar}.
+ */
+interface MenuBarMenuEvent extends BaseEvent {
+    name: `menu:${string}` | `menu:change:${string}`;
+}
+/**
+ * A `mouseenter` event originating from a {@link module:ui/menubar/menubarview~MenuBarView#menus menu view instance} of the
+ * {@link module:ui/menubar/menubarview~MenuBarView menu bar}.
+ */
+export interface MenuBarMenuMouseEnterEvent extends MenuBarMenuEvent {
+    name: 'menu:mouseenter';
+}
+/**
+ * An `arrowleft` event originating from a {@link module:ui/menubar/menubarview~MenuBarView#menus menu view instance} of the
+ * {@link module:ui/menubar/menubarview~MenuBarView menu bar}.
+ */
+export interface MenuBarMenuArrowLeftEvent extends MenuBarMenuEvent {
+    name: 'menu:arrowleft';
+}
+/**
+ * An `arrowright` event originating from a {@link module:ui/menubar/menubarview~MenuBarView#menus menu view instance} of the
+ * {@link module:ui/menubar/menubarview~MenuBarView menu bar}.
+ */
+export interface MenuBarMenuArrowRightEvent extends MenuBarMenuEvent {
+    name: 'menu:arrowright';
+}
+/**
+ * A `change:isOpen` event originating from a {@link module:ui/menubar/menubarview~MenuBarView#menus menu view instance} of the
+ * {@link module:ui/menubar/menubarview~MenuBarView menu bar}.
+ */
+export interface MenuBarMenuChangeIsOpenEvent extends MenuBarMenuEvent {
+    name: 'menu:change:isOpen';
+    args: [name: string, value: boolean, oldValue: boolean];
+}
+export {};

package/src/menubar/menubarview.js

@@ -0,0 +1,254 @@
+/**
+ * @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/menubar/menubarview
+ */
+import { logWarning } from '@ckeditor/ckeditor5-utils';
+import View from '../view.js';
+import { isObject } from 'lodash-es';
+import ListItemView from '../list/listitemview.js';
+import ListSeparatorView from '../list/listseparatorview.js';
+import MenuBarMenuView from './menubarmenuview.js';
+import MenuBarMenuListView from './menubarmenulistview.js';
+import MenuBarMenuListItemView from './menubarmenulistitemview.js';
+import MenuBarMenuListItemButtonView from './menubarmenulistitembuttonview.js';
+import MenuBarMenuListItemFileDialogButtonView from './menubarmenulistitemfiledialogbuttonview.js';
+import { MenuBarBehaviors, processMenuBarConfig } from './utils.js';
+const EVENT_NAME_DELEGATES = ['mouseenter', 'arrowleft', 'arrowright', 'change:isOpen'];
+import '../../theme/components/menubar/menubar.css';
+/**
+ * The application menu bar component. It brings a set of top-level menus (and sub-menus) that can be used
+ * to organize and access a large number of buttons.
+ */
+export default class MenuBarView extends View {
+    /**
+     * Creates an instance of the menu bar view.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale) {
+        super(locale);
+        /**
+         * A list of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instances registered in the menu bar.
+         *
+         * @observable
+         */
+        this.menus = [];
+        const t = locale.t;
+        this.set('isOpen', false);
+        this._setupIsOpenUpdater();
+        this.children = this.createCollection();
+        // @if CK_DEBUG_MENU_BAR // // Logs events in the main event bus of the component.
+        // @if CK_DEBUG_MENU_BAR // this.on( 'menu', ( evt, data ) => {
+        // @if CK_DEBUG_MENU_BAR // 	console.log( `MenuBarView:${ evt.name }`, evt.path.map( view => view.element ) );
+        // @if CK_DEBUG_MENU_BAR // } );
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-menu-bar'
+                ],
+                'aria-label': t('Editor menu bar'),
+                role: 'menubar'
+            },
+            children: this.children
+        });
+    }
+    /**
+     * A utility that expands a plain menu bar configuration into a structure of menus (also: sub-menus)
+     * and items using a given {@link module:ui/componentfactory~ComponentFactory component factory}.
+     *
+     * See the {@link module:core/editor/editorconfig~EditorConfig#menuBar menu bar} in the editor
+     * configuration reference to learn how to configure the menu bar.
+     */
+    fillFromConfig(config, componentFactory) {
+        const locale = this.locale;
+        const processedConfig = processMenuBarConfig({
+            normalizedConfig: config,
+            locale,
+            componentFactory
+        });
+        const topLevelCategoryMenuViews = processedConfig.items.map(menuDefinition => this._createMenu({
+            componentFactory,
+            menuDefinition
+        }));
+        this.children.addMany(topLevelCategoryMenuViews);
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        MenuBarBehaviors.toggleMenusAndFocusItemsOnHover(this);
+        MenuBarBehaviors.closeMenusWhenTheBarCloses(this);
+        MenuBarBehaviors.closeMenuWhenAnotherOnTheSameLevelOpens(this);
+        MenuBarBehaviors.focusCycleMenusOnArrows(this);
+        MenuBarBehaviors.closeOnClickOutside(this);
+    }
+    /**
+     * Focuses the menu bar.
+     */
+    focus() {
+        if (this.children.first) {
+            this.children.first.focus();
+        }
+    }
+    /**
+     * Closes all menus in the bar.
+     */
+    close() {
+        for (const topLevelCategoryMenuView of this.children) {
+            topLevelCategoryMenuView.isOpen = false;
+        }
+    }
+    /**
+     * Registers a menu view in the menu bar. Every {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance must be registered
+     * in the menu bar to be properly managed.
+     */
+    registerMenu(menuView, parentMenuView = null) {
+        if (parentMenuView) {
+            menuView.delegate(...EVENT_NAME_DELEGATES).to(parentMenuView);
+            menuView.parentMenuView = parentMenuView;
+        }
+        else {
+            menuView.delegate(...EVENT_NAME_DELEGATES).to(this, name => 'menu:' + name);
+        }
+        menuView._attachBehaviors();
+        this.menus.push(menuView);
+    }
+    /**
+     * Creates a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} based on the given definition.
+     */
+    _createMenu({ componentFactory, menuDefinition, parentMenuView }) {
+        const locale = this.locale;
+        const menuView = new MenuBarMenuView(locale);
+        this.registerMenu(menuView, parentMenuView);
+        menuView.buttonView.set({
+            label: menuDefinition.label
+        });
+        // Defer the creation of the menu structure until it gets open. This is a performance optimization
+        // that shortens the time needed to create the editor.
+        menuView.once('change:isOpen', () => {
+            const listView = new MenuBarMenuListView(locale);
+            listView.ariaLabel = menuDefinition.label;
+            menuView.panelView.children.add(listView);
+            listView.items.addMany(this._createMenuItems({ menuDefinition, parentMenuView: menuView, componentFactory }));
+        });
+        return menuView;
+    }
+    /**
+     * Creates a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} items based on the given definition.
+     */
+    _createMenuItems({ menuDefinition, parentMenuView, componentFactory }) {
+        const locale = this.locale;
+        const items = [];
+        for (const menuGroupDefinition of menuDefinition.groups) {
+            for (const itemDefinition of menuGroupDefinition.items) {
+                const menuItemView = new MenuBarMenuListItemView(locale, parentMenuView);
+                if (isObject(itemDefinition)) {
+                    menuItemView.children.add(this._createMenu({
+                        componentFactory,
+                        menuDefinition: itemDefinition,
+                        parentMenuView
+                    }));
+                }
+                else {
+                    const componentView = this._createMenuItemContentFromFactory({
+                        componentName: itemDefinition,
+                        componentFactory,
+                        parentMenuView
+                    });
+                    if (!componentView) {
+                        continue;
+                    }
+                    menuItemView.children.add(componentView);
+                }
+                items.push(menuItemView);
+            }
+            // Separate groups with a separator.
+            if (menuGroupDefinition !== menuDefinition.groups[menuDefinition.groups.length - 1]) {
+                items.push(new ListSeparatorView(locale));
+            }
+        }
+        return items;
+    }
+    /**
+     * Uses the component factory to create a content of the menu item (a button or a sub-menu).
+     */
+    _createMenuItemContentFromFactory({ componentName, parentMenuView, componentFactory }) {
+        const componentView = componentFactory.create(componentName);
+        if (!(componentView instanceof MenuBarMenuView ||
+            componentView instanceof MenuBarMenuListItemButtonView ||
+            componentView instanceof MenuBarMenuListItemFileDialogButtonView)) {
+            /**
+             * Adding unsupported components to the {@link module:ui/menubar/menubarview~MenuBarView} is not possible.
+             *
+             * A component should be either a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} (sub-menu) or a
+             * {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} (button).
+             *
+             * @error menu-bar-component-unsupported
+             * @param componentName A name of the unsupported component used in the configuration.
+             * @param componentView An unsupported component view.
+             */
+            logWarning('menu-bar-component-unsupported', {
+                componentName,
+                componentView
+            });
+            return null;
+        }
+        this._registerMenuTree(componentView, parentMenuView);
+        // Close the whole menu bar when a component is executed.
+        componentView.on('execute', () => {
+            this.close();
+        });
+        return componentView;
+    }
+    /**
+     * Checks component and its children recursively and calls {@link #registerMenu}
+     * for each item that is {@link module:ui/menubar/menubarmenuview~MenuBarMenuView}.
+     *
+     * @internal
+     */
+    _registerMenuTree(componentView, parentMenuView) {
+        if (!(componentView instanceof MenuBarMenuView)) {
+            componentView.delegate('mouseenter').to(parentMenuView);
+            return;
+        }
+        this.registerMenu(componentView, parentMenuView);
+        const menuBarItemsList = componentView.panelView.children
+            .filter(child => child instanceof MenuBarMenuListView)[0];
+        if (!menuBarItemsList) {
+            componentView.delegate('mouseenter').to(parentMenuView);
+            return;
+        }
+        const nonSeparatorItems = menuBarItemsList.items.filter(item => item instanceof ListItemView);
+        for (const item of nonSeparatorItems) {
+            this._registerMenuTree(item.children.get(0), componentView);
+        }
+    }
+    /**
+     * Manages the state of the {@link #isOpen} property of the menu bar. Because the state is a sum of individual
+     * top-level menus' states, it's necessary to listen to their changes and update the state accordingly.
+     *
+     * Additionally, it prevents from unnecessary changes of `isOpen` when one top-level menu opens and another closes
+     * (regardless of in which order), maintaining a stable `isOpen === true` in that situation.
+     */
+    _setupIsOpenUpdater() {
+        let closeTimeout;
+        // TODO: This is not the prettiest approach but at least it's simple.
+        this.on('menu:change:isOpen', (evt, name, isOpen) => {
+            clearTimeout(closeTimeout);
+            if (isOpen) {
+                this.isOpen = true;
+            }
+            else {
+                closeTimeout = setTimeout(() => {
+                    this.isOpen = Array.from(this.children).some(menuView => menuView.isOpen);
+                }, 0);
+            }
+        });
+    }
+}