@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 0.0.0-nightly-20240814.0 to 0.0.0-nightly-20240815.0

dist/bindings/clickoutsidehandler.d.ts

@@ -12,3 +12,3 @@ /**
  */
-import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
+import type { CallbackOptions, DomEmitter } from '@ckeditor/ckeditor5-utils';
 /**
@@ -27,8 +27,10 @@ * Handles clicking **outside** of a specified set of elements, then fires an action.
  * @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;

dist/dropdown/dropdownview.d.ts

@@ -18,2 +18,3 @@ /**
 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';
@@ -115,6 +116,13 @@ import '../../theme/components/dropdown/dropdown.css';
      *
-     * **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}.
@@ -305,13 +313,18 @@ *
 /**
- * Fired when the toolbar button or list item is executed.
+ * Fired when an item inside the dropdown is executed.
  *
- * For {@link ~DropdownView#listView} It fires when a child of some {@link module:ui/list/listitemview~ListItemView}
- * fired `execute`.
+ * **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}.
  *
- * 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 list, it fires when a child of one of {@link module:ui/list/listitemview~ListItemView}s
+ * fired `execute` event.
  *
- * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addListToDropdown}
- * or {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+ * When integrated with a toolbar, 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.
+ *
+ * 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
@@ -318,0 +331,0 @@ */

dist/dropdown/utils.d.ts

@@ -16,5 +16,7 @@ /**
 import type { FalsyValue } from '../template.js';
+import type BodyCollection from '../editorui/bodycollection.js';
 import { type Collection, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
+import type { DropdownMenuDefinition } from './menu/utils.js';
 /**
@@ -85,2 +87,4 @@ * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
  * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
+ * @param behaviorOptions Attributes for the default behavior of the dropdown.
+ *
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
@@ -91,2 +95,56 @@ * @returns The dropdown view instance.
 /**
+ * Adds a menu UI component to a dropdown and sets all common behaviors and interactions between the dropdown and the menu.
+ *
+ * Use this helper to create multi-level dropdown menus that are displayed in a toolbar.
+ *
+ * Internally, it creates an instance of {@link module:ui/dropdown/menu/dropdownmenurootlistview~DropdownMenuRootListView}.
+ *
+ * Example:
+ *
+ * ```ts
+ * const definitions = [
+ * 	{
+ * 		id: 'menu_1',
+ * 		menu: 'Menu 1',
+ * 		children: [
+ * 			{
+ * 				id: 'menu_1_a',
+ * 				label: 'Item A'
+ * 			},
+ * 			{
+ * 				id: 'menu_1_b',
+ * 				label: 'Item B'
+ * 			}
+ * 		]
+ * 	},
+ * 	{
+ * 		id: 'top_a',
+ * 		label: 'Top Item A'
+ * 	},
+ * 	{
+ * 		id: 'top_b',
+ * 		label: 'Top Item B'
+ * 	}
+ * ];
+ *
+ * const dropdownView = createDropdown( editor.locale );
+ *
+ * addMenuToDropdown( dropdownView, editor.ui.view.body, definitions );
+ * ```
+ *
+ * After using this helper, the `dropdown` will fire {@link module:ui/dropdown/dropdownview~DropdownViewEvent `execute`} event when
+ * a nested menu button is pressed.
+ *
+ * The helper will make sure that the `dropdownMenuRootListView` is lazy loaded, i.e., the menu component structure will be initialized
+ * and rendered only after the `dropdown` is opened for the first time.
+ *
+ * @param dropdownView A dropdown instance to which the menu component will be added.
+ * @param body Body collection to which floating menu panels will be added.
+ * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
+ */
+export declare function addMenuToDropdown(dropdownView: DropdownView, body: BodyCollection, definition: DropdownMenuDefinition, options?: {
+    ariaLabel?: string;
+}): void;
+/**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
@@ -93,0 +151,0 @@ *

dist/editorui/editorui.d.ts

@@ -289,2 +289,6 @@ /**
     private _handleScrollToTheSelection;
+    /**
+     * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
+     */
+    private _bindBodyCollectionWithFocusTracker;
 }
@@ -291,0 +295,0 @@ /**

dist/index.d.ts

@@ -42,2 +42,8 @@ /**
 export * from './dropdown/utils.js';
+export * from './dropdown/menu/utils.js';
+export { default as DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
+export { default as DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
+export { default as DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
+export { default as DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
+export { default as DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
 export { default as EditorUI, type EditorUIReadyEvent, type EditorUIUpdateEvent } from './editorui/editorui.js';
@@ -44,0 +50,0 @@ export { default as EditorUIView } from './editorui/editoruiview.js';

dist/menubar/utils.d.ts

@@ -13,5 +13,2 @@ /**
 import { type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
-type DeepReadonly<T> = Readonly<{
-    [K in keyof T]: T[K] extends string ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;
-}>;
 /**
@@ -433,3 +430,3 @@ * Behaviors of the {@link module:ui/menubar/menubarview~MenuBarView} component.
  */
-export declare const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject['items']>;
+export declare const DefaultMenuBarItems: MenuBarConfigObject['items'];
 /**
@@ -453,2 +450,1 @@ * Performs a cleanup and normalization of the menu bar configuration.
 }): NormalizedMenuBarConfigObject;
-export {};

lang/contexts.json

@@ -10,2 +10,3 @@ {
 	"Dropdown toolbar": "Label used by assistive technologies describing a toolbar displayed inside a dropdown.",
+	"Dropdown menu": "Label used by assistive technologies describing a menu displayed inside a dropdown.",
 	"Black": "Label of a button that applies a black color in color pickers.",
@@ -12,0 +13,0 @@ "Dim grey": "Label of a button that applies a dim grey color in color pickers.",

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "0.0.0-nightly-20240814.0",
+  "version": "0.0.0-nightly-20240815.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -15,5 +15,5 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240814.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240814.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240814.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240815.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240815.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240815.0",
     "color-convert": "2.0.1",
@@ -20,0 +20,0 @@ "color-parse": "1.4.2",

src/bindings/clickoutsidehandler.d.ts

@@ -8,3 +8,3 @@ /**
  */
-import type { DomEmitter } from '@ckeditor/ckeditor5-utils';
+import type { CallbackOptions, DomEmitter } from '@ckeditor/ckeditor5-utils';
 /**
@@ -23,8 +23,10 @@ * Handles clicking **outside** of a specified set of elements, then fires an action.
  * @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;

src/bindings/clickoutsidehandler.js

@@ -19,4 +19,5 @@ /**
  * @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) => {
@@ -36,3 +37,3 @@ if (!activator()) {
         callback();
-    });
+    }, listenerOptions);
 }

src/dialog/dialog.js

@@ -212,3 +212,2 @@ /**
         editor.ui.view.body.add(view);
-        editor.ui.focusTracker.add(view.element);
         editor.keystrokes.listenTo(view.element);
@@ -215,0 +214,0 @@ // Unless the user specified a position, modals should always be centered on the screen.

src/dropdown/dropdownview.d.ts

@@ -14,2 +14,3 @@ /**
 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';
@@ -111,6 +112,13 @@ import '../../theme/components/dropdown/dropdown.css';
      *
-     * **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}.
@@ -301,13 +309,18 @@ *
 /**
- * Fired when the toolbar button or list item is executed.
+ * Fired when an item inside the dropdown is executed.
  *
- * For {@link ~DropdownView#listView} It fires when a child of some {@link module:ui/list/listitemview~ListItemView}
- * fired `execute`.
+ * **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}.
  *
- * 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 list, it fires when a child of one of {@link module:ui/list/listitemview~ListItemView}s
+ * fired `execute` event.
  *
- * **Note**: Only supported when dropdown has list view added using {@link module:ui/dropdown/utils~addListToDropdown}
- * or {@link module:ui/dropdown/utils~addToolbarToDropdown}.
+ * When integrated with a toolbar, 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.
+ *
+ * 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
@@ -314,0 +327,0 @@ */

src/dropdown/utils.d.ts

@@ -12,5 +12,7 @@ /**
 import type { FalsyValue } from '../template.js';
+import type BodyCollection from '../editorui/bodycollection.js';
 import { type Collection, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
+import type { DropdownMenuDefinition } from './menu/utils.js';
 /**
@@ -81,2 +83,4 @@ * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
  * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
+ * @param behaviorOptions Attributes for the default behavior of the dropdown.
+ *
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
@@ -87,2 +91,56 @@ * @returns The dropdown view instance.
 /**
+ * Adds a menu UI component to a dropdown and sets all common behaviors and interactions between the dropdown and the menu.
+ *
+ * Use this helper to create multi-level dropdown menus that are displayed in a toolbar.
+ *
+ * Internally, it creates an instance of {@link module:ui/dropdown/menu/dropdownmenurootlistview~DropdownMenuRootListView}.
+ *
+ * Example:
+ *
+ * ```ts
+ * const definitions = [
+ * 	{
+ * 		id: 'menu_1',
+ * 		menu: 'Menu 1',
+ * 		children: [
+ * 			{
+ * 				id: 'menu_1_a',
+ * 				label: 'Item A'
+ * 			},
+ * 			{
+ * 				id: 'menu_1_b',
+ * 				label: 'Item B'
+ * 			}
+ * 		]
+ * 	},
+ * 	{
+ * 		id: 'top_a',
+ * 		label: 'Top Item A'
+ * 	},
+ * 	{
+ * 		id: 'top_b',
+ * 		label: 'Top Item B'
+ * 	}
+ * ];
+ *
+ * const dropdownView = createDropdown( editor.locale );
+ *
+ * addMenuToDropdown( dropdownView, editor.ui.view.body, definitions );
+ * ```
+ *
+ * After using this helper, the `dropdown` will fire {@link module:ui/dropdown/dropdownview~DropdownViewEvent `execute`} event when
+ * a nested menu button is pressed.
+ *
+ * The helper will make sure that the `dropdownMenuRootListView` is lazy loaded, i.e., the menu component structure will be initialized
+ * and rendered only after the `dropdown` is opened for the first time.
+ *
+ * @param dropdownView A dropdown instance to which the menu component will be added.
+ * @param body Body collection to which floating menu panels will be added.
+ * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
+ */
+export declare function addMenuToDropdown(dropdownView: DropdownView, body: BodyCollection, definition: DropdownMenuDefinition, options?: {
+    ariaLabel?: string;
+}): void;
+/**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
@@ -89,0 +147,0 @@ *

src/dropdown/utils.js

@@ -11,2 +11,3 @@ /**
 import DropdownButtonView from './button/dropdownbuttonview.js';
+import DropdownMenuRootListView from './menu/dropdownmenurootlistview.js';
 import ToolbarView from '../toolbar/toolbarview.js';
@@ -90,2 +91,4 @@ import ListView from '../list/listview.js';
  * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
+ * @param behaviorOptions Attributes for the default behavior of the dropdown.
+ *
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
@@ -105,6 +108,87 @@ * @returns The dropdown view instance.
     }
-    addDefaultBehavior(dropdownView);
+    addDefaultBehaviors(dropdownView);
     return dropdownView;
 }
 /**
+ * Adds a menu UI component to a dropdown and sets all common behaviors and interactions between the dropdown and the menu.
+ *
+ * Use this helper to create multi-level dropdown menus that are displayed in a toolbar.
+ *
+ * Internally, it creates an instance of {@link module:ui/dropdown/menu/dropdownmenurootlistview~DropdownMenuRootListView}.
+ *
+ * Example:
+ *
+ * ```ts
+ * const definitions = [
+ * 	{
+ * 		id: 'menu_1',
+ * 		menu: 'Menu 1',
+ * 		children: [
+ * 			{
+ * 				id: 'menu_1_a',
+ * 				label: 'Item A'
+ * 			},
+ * 			{
+ * 				id: 'menu_1_b',
+ * 				label: 'Item B'
+ * 			}
+ * 		]
+ * 	},
+ * 	{
+ * 		id: 'top_a',
+ * 		label: 'Top Item A'
+ * 	},
+ * 	{
+ * 		id: 'top_b',
+ * 		label: 'Top Item B'
+ * 	}
+ * ];
+ *
+ * const dropdownView = createDropdown( editor.locale );
+ *
+ * addMenuToDropdown( dropdownView, editor.ui.view.body, definitions );
+ * ```
+ *
+ * After using this helper, the `dropdown` will fire {@link module:ui/dropdown/dropdownview~DropdownViewEvent `execute`} event when
+ * a nested menu button is pressed.
+ *
+ * The helper will make sure that the `dropdownMenuRootListView` is lazy loaded, i.e., the menu component structure will be initialized
+ * and rendered only after the `dropdown` is opened for the first time.
+ *
+ * @param dropdownView A dropdown instance to which the menu component will be added.
+ * @param body Body collection to which floating menu panels will be added.
+ * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
+ */
+export function addMenuToDropdown(dropdownView, body, definition, options = {}) {
+    dropdownView.menuView = new DropdownMenuRootListView(dropdownView.locale, body, definition);
+    if (dropdownView.isOpen) {
+        addMenuToOpenDropdown(dropdownView, options);
+    }
+    else {
+        // Load the UI elements only after the dropdown is opened for the first time - lazy loading.
+        dropdownView.once('change:isOpen', () => {
+            addMenuToOpenDropdown(dropdownView, options);
+        }, { priority: 'highest' });
+    }
+}
+function addMenuToOpenDropdown(dropdownView, options) {
+    const dropdownMenuRootListView = dropdownView.menuView;
+    const t = dropdownView.locale.t;
+    dropdownMenuRootListView.delegate('menu:execute').to(dropdownView, 'execute');
+    dropdownMenuRootListView.listenTo(dropdownView, 'change:isOpen', (evt, name, isOpen) => {
+        if (!isOpen) {
+            dropdownMenuRootListView.closeMenus();
+        }
+    }, { priority: 'low' }); // Make sure this is fired after `focusDropdownButtonOnClose` behavior.
+    // When `dropdownMenuRootListView` is added as a `panelView` child, it becomes rendered (`panelView` is rendered at this point).
+    dropdownView.panelView.children.add(dropdownMenuRootListView);
+    // Nested menu panels are added to body collection, so they are not children of the `dropdownView` from DOM perspective.
+    // Add these panels to `dropdownView` focus tracker, so they are treated like part of the `dropdownView` for focus-related purposes.
+    for (const menu of dropdownMenuRootListView.menus) {
+        dropdownView.focusTracker.add(menu.panelView.element);
+    }
+    dropdownMenuRootListView.ariaLabel = options.ariaLabel || t('Dropdown menu');
+}
+/**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
@@ -321,3 +405,3 @@ *
  */
-function addDefaultBehavior(dropdownView) {
+function addDefaultBehaviors(dropdownView) {
     closeDropdownOnClickOutside(dropdownView);
@@ -334,14 +418,12 @@ closeDropdownOnExecute(dropdownView);
 function closeDropdownOnClickOutside(dropdownView) {
-    dropdownView.on('render', () => {
-        clickOutsideHandler({
-            emitter: dropdownView,
-            activator: () => dropdownView.isOpen,
-            callback: () => {
-                dropdownView.isOpen = false;
-            },
-            contextElements: () => [
-                dropdownView.element,
-                ...dropdownView.focusTracker._elements
-            ]
-        });
+    clickOutsideHandler({
+        emitter: dropdownView,
+        activator: () => dropdownView.isRendered && dropdownView.isOpen,
+        callback: () => {
+            dropdownView.isOpen = false;
+        },
+        contextElements: () => [
+            dropdownView.element,
+            ...dropdownView.focusTracker.elements
+        ]
     });
@@ -367,5 +449,6 @@ }
     dropdownView.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
-        if (dropdownView.isOpen && !isFocused) {
-            dropdownView.isOpen = false;
+        if (isFocused || !dropdownView.isOpen) {
+            return;
         }
+        dropdownView.isOpen = false;
     });
@@ -401,7 +484,7 @@ }
         }
-        const element = dropdownView.panelView.element;
+        const elements = dropdownView.focusTracker.elements;
         // If the dropdown was closed, move the focus back to the button (#12125).
         // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
         // Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
-        if (element && element.contains(global.document.activeElement)) {
+        if (elements.some(element => element.contains(global.document.activeElement))) {
             dropdownView.buttonView.focus();
@@ -408,0 +491,0 @@ }

src/editorui/editorui.d.ts

@@ -285,2 +285,6 @@ /**
     private _handleScrollToTheSelection;
+    /**
+     * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
+     */
+    private _bindBodyCollectionWithFocusTracker;
 }
@@ -287,0 +291,0 @@ /**

src/editorui/editorui.js

@@ -58,2 +58,3 @@ /**
         this.once('ready', () => {
+            this._bindBodyCollectionWithFocusTracker();
             this.isReady = true;
@@ -336,3 +337,2 @@ });
         const editor = this.editor;
-        const editingView = editor.editing.view;
         let candidateDefinitions;
@@ -485,2 +485,17 @@ // Focus the next focusable toolbar on <kbd>Alt</kbd> + <kbd>F10</kbd>.
     }
+    /**
+     * Ensures that the focus tracker is aware of all views' DOM elements in the body collection.
+     */
+    _bindBodyCollectionWithFocusTracker() {
+        const body = this.view.body;
+        for (const view of body) {
+            this.focusTracker.add(view.element);
+        }
+        body.on('add', (evt, view) => {
+            this.focusTracker.add(view.element);
+        });
+        body.on('remove', (evt, view) => {
+            this.focusTracker.remove(view.element);
+        });
+    }
 }
@@ -487,0 +502,0 @@ /**

src/editorui/poweredby.js

@@ -100,3 +100,2 @@ /**
         editor.ui.view.body.add(balloon);
-        editor.ui.focusTracker.add(balloon.element);
         this._balloonView = balloon;
@@ -103,0 +102,0 @@ }

src/index.d.ts

@@ -38,2 +38,8 @@ /**
 export * from './dropdown/utils.js';
+export * from './dropdown/menu/utils.js';
+export { default as DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
+export { default as DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
+export { default as DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
+export { default as DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
+export { default as DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
 export { default as EditorUI, type EditorUIReadyEvent, type EditorUIUpdateEvent } from './editorui/editorui.js';
@@ -40,0 +46,0 @@ export { default as EditorUIView } from './editorui/editoruiview.js';

src/index.js

@@ -36,2 +36,8 @@ /**
 export * from './dropdown/utils.js';
+export * from './dropdown/menu/utils.js';
+export { default as DropdownMenuNestedMenuView } from './dropdown/menu/dropdownmenunestedmenuview.js';
+export { default as DropdownMenuRootListView } from './dropdown/menu/dropdownmenurootlistview.js';
+export { default as DropdownMenuListView } from './dropdown/menu/dropdownmenulistview.js';
+export { default as DropdownMenuListItemView } from './dropdown/menu/dropdownmenulistitemview.js';
+export { default as DropdownMenuListItemButtonView } from './dropdown/menu/dropdownmenulistitembuttonview.js';
 export { default as EditorUI } from './editorui/editorui.js';
@@ -38,0 +44,0 @@ export { default as EditorUIView } from './editorui/editoruiview.js';

src/menubar/utils.d.ts

@@ -9,5 +9,2 @@ /**
 import { type Locale, type PositioningFunction } from '@ckeditor/ckeditor5-utils';
-type DeepReadonly<T> = Readonly<{
-    [K in keyof T]: T[K] extends string ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;
-}>;
 /**
@@ -429,3 +426,3 @@ * Behaviors of the {@link module:ui/menubar/menubarview~MenuBarView} component.
  */
-export declare const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject['items']>;
+export declare const DefaultMenuBarItems: MenuBarConfigObject['items'];
 /**
@@ -449,2 +446,1 @@ * Performs a cleanup and normalization of the menu bar configuration.
 }): NormalizedMenuBarConfigObject;
-export {};

src/panel/balloon/contextualballoon.js

@@ -280,3 +280,2 @@ /**
         this.editor.ui.view.body.add(this._view);
-        this.editor.ui.focusTracker.add(this._view.element);
         this._rotatorView = this._createRotatorView();
@@ -283,0 +282,0 @@ this._fakePanelsView = this._createFakePanelsView();

src/toolbar/block/blocktoolbar.js

@@ -186,3 +186,2 @@ /**
         editor.ui.view.body.add(panelView);
-        editor.ui.focusTracker.add(panelView.element);
         // Close #panelView on `Esc` press.
@@ -222,3 +221,2 @@ this.toolbarView.keystrokes.set('Esc', (evt, cancel) => {
         editor.ui.view.body.add(buttonView);
-        editor.ui.focusTracker.add(buttonView.element);
         return buttonView;
@@ -225,0 +223,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6618870

increased by4.17%

Number of package files

670

increased by5.02%

Lines of code

64668

increased by4.9%

Dependency changes

• + Added@ckeditor/ckeditor5-core@0.0.0-nightly-20240815.0(transitive)

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20240815.0(transitive)

• + Added@ckeditor/ckeditor5-utils@0.0.0-nightly-20240815.0(transitive)

• + Added@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240815.0(transitive)

• - Removed@ckeditor/ckeditor5-core@0.0.0-nightly-20240814.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.0.0-nightly-20240814.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.0.0-nightly-20240814.0(transitive)

• - Removed@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240814.0(transitive)

• Updated@ckeditor/ckeditor5-core@0.0.0-nightly-20240815.0

• Updated@ckeditor/ckeditor5-engine@0.0.0-nightly-20240815.0

• Updated@ckeditor/ckeditor5-utils@0.0.0-nightly-20240815.0