@ckeditor/ckeditor5-ui 43.0.0 → 43.1.0-alpha.0

package/lang/translations/sr.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Проширен уређивач текста"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "Област за уређивање уредника: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Блок уређивач"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Падајућа трака са алаткама"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Црна"

package/lang/translations/sv.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Rich Text-editor"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "Ordbehandlares redigeringsområde: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Redigera block"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Rullgardinsverktygsfält"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Svart"

package/lang/translations/th.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "โปรแกรมแก้ไข Rich Text"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "พื้นที่แก้ไขของตัวแก้ไข: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "แก้ไขบล็อก"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "แถบเครื่องมือแบบเลื่อนลง"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "สีดำ"

package/lang/translations/ti.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr ""
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr ""
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr ""
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr ""
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr ""

package/lang/translations/tk.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Baý Tekst Redaktory"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr ""
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Bloky redaktirläň"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Açylýan gurallar paneli"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Gara"

package/lang/translations/tr.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Zengin İçerik Editörü"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "Editör düzenleme alanı: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Bloğu Düzenle"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Açılır araç çubuğu"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Siyah"

package/lang/translations/tt.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr ""
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr ""
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr ""
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr ""
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Кара"

package/lang/translations/ug.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "تېكىست تەھرىرلىگۈچ"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "تەھرىرلىگۈچ تەھرىرلەش رايونى: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "بۆلەك تەھرىر"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "سىرىلما قورال بالداق"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "قارا"

package/lang/translations/uk.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Розширений текстовий редактор"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "Область редагування редактора: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Редагувати блок"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Випадаюча панель інструментів"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Чорний"

package/lang/translations/ur.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "خانۂ ترمیم"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "رقبہ خانۂ ترمیم: 0%"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "خانہ کی تدوین"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "آلہ جات برائے فہرست "
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "سیاہ"

package/lang/translations/uz.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Tahrirlovchi"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr ""
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Blokni tahrirlash"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Ochiladigan asboblar paneli"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Qora"

package/lang/translations/vi.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "Trình soạn thảo văn bản"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "Vùng chỉnh sửa của trình chỉnh sửa: %0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "Chỉnh sửa đoạn"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "Thanh công cụ danh mục"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "Đen"

package/lang/translations/zh-cn.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "富文本编辑器"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "编辑器编辑区域：%0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "编辑框"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "下拉工具栏"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "黑色"

package/lang/translations/zh.po

@@ -21,10 +21,6 @@ msgctxt "Title of the CKEditor5 editor."
 msgid "Rich Text Editor"
 msgstr "富文本編輯器"
 
-msgctxt "Accessible label of the specific editing area belonging to a container with an ARIA application role."
-msgid "Editor editing area: %0"
-msgstr "編輯器編輯區：%0"
-
 msgctxt "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Edit block"
 msgstr "編輯區塊"
@@ -53,6 +49,10 @@ msgctxt "Label used by assistive technologies describing a toolbar displayed ins
 msgid "Dropdown toolbar"
 msgstr "下拉選單"
 
+msgctxt "Label used by assistive technologies describing a menu displayed inside a dropdown."
+msgid "Dropdown menu"
+msgstr ""
+
 msgctxt "Label of a button that applies a black color in color pickers."
 msgid "Black"
 msgstr "黑色"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "43.0.0",
+  "version": "43.1.0-alpha.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,8 +12,9 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "43.0.0",
-    "@ckeditor/ckeditor5-utils": "43.0.0",
+    "@ckeditor/ckeditor5-core": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "43.1.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "43.1.0-alpha.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",

package/src/bindings/clickoutsidehandler.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/bindings/clickoutsidehandler
  */
-import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
+import type { CallbackOptions, DomEmitter } from '@ckeditor/ckeditor5-utils';
 /**
  * Handles clicking **outside** of a specified set of elements, then fires an action.
  *
@@ -19,10 +19,12 @@ import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
  * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
  * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
  * @param options.callback An action executed by the handler.
+ * @param options.listenerOptions Additional options for the listener (like priority).
  */
-export default function clickOutsideHandler({ emitter, activator, callback, contextElements }: {
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }: {
     emitter: DomEmitter;
     activator: () => boolean;
-    contextElements: Array<HTMLElement> | (() => Array<HTMLElement>);
+    contextElements: Array<Element> | (() => Array<Element>);
     callback: () => void;
+    listenerOptions?: CallbackOptions;
 }): void;

package/src/bindings/clickoutsidehandler.js

@@ -16,8 +16,9 @@
  * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
  * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
  * @param options.callback An action executed by the handler.
+ * @param options.listenerOptions Additional options for the listener (like priority).
  */
-export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }) {
     emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
         if (!activator()) {
             return;
@@ -32,5 +33,5 @@ export default function clickOutsideHandler({ emitter, activator, callback, cont
             }
         }
         callback();
-    });
+    }, listenerOptions);
 }

package/src/dialog/dialog.js

@@ -209,7 +209,6 @@ export default class Dialog extends Plugin {
             this.hide();
         });
         editor.ui.view.body.add(view);
-        editor.ui.focusTracker.add(view.element);
         editor.keystrokes.listenTo(view.element);
         // Unless the user specified a position, modals should always be centered on the screen.
         // Otherwise, let's keep dialogs centered in the editing root by default.

package/src/dropdown/dropdownview.d.ts

@@ -11,6 +11,7 @@ import type { default as DropdownPanelView, PanelPosition } from './dropdownpane
 import type { FocusableView } from '../focuscycler.js';
 import type ListView from '../list/listview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
+import type DropdownMenuRootListView from './menu/dropdownmenurootlistview.js';
 import { KeystrokeHandler, FocusTracker, type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/dropdown.css';
 /**
@@ -107,9 +108,16 @@ export default class DropdownView extends View<HTMLDivElement> {
      * A child toolbar of the dropdown located in the
      * {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
      *
-     * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+     * **Note**: Only supported when dropdown has a toolbar added using {@link module:ui/dropdown/utils~addToolbarToDropdown}.
      */
     toolbarView?: ToolbarView;
+    /**
+     * A child menu component of the dropdown located
+     * in its {@link module:ui/dropdown/dropdownview~DropdownView#panelView panel}.
+     *
+     * **Note**: Only supported when dropdown has a menu added using {@link module:ui/dropdown/utils~addMenuToDropdown}.
+     */
+    menuView?: DropdownMenuRootListView;
     /**
      * Controls whether the dropdown view is open, i.e. shows or hides the {@link #panelView panel}.
      *
@@ -296,16 +304,21 @@ export default class DropdownView extends View<HTMLDivElement> {
     private static _getOptimalPosition;
 }
 /**
- * Fired when the toolbar button or list item is executed.
+ * Fired when an item inside the dropdown is executed.
+ *
+ * **Note**: Only supported when dropdown was integrated with its child view using one of the helper functions:
+ * {@link module:ui/dropdown/utils~addListToDropdown}, {@link module:ui/dropdown/utils~addToolbarToDropdown}, or
+ * {@link module:ui/dropdown/utils~addMenuToDropdown}.
+ *
+ * When integrated with a list, it fires when a child of one of {@link module:ui/list/listitemview~ListItemView}s
+ * fired `execute` event.
  *
- * For {@link ~DropdownView#listView} It fires when a child of some {@link module:ui/list/listitemview~ListItemView}
- * fired `execute`.
+ * When integrated with a toolbar, it fires when one of the buttons has been {@link module:ui/button/button~Button#event:execute executed}.
  *
- * For {@link ~DropdownView#toolbarView} It fires when one of the buttons has been
- * {@link module:ui/button/button~Button#event:execute executed}.
+ * When integrated with a nested menu, it fires when one of the menu buttons has been executed.
  *
- * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addListToDropdown}
- * or {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+ * In each case, the event is delegated from the component which fired it. It does not have additional parameters and `event.source` is the
+ * original component.
  *
  * @eventName ~DropdownView#execute
  */

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;
+}