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

package/src/editorui/editorui.js

@@ -11,6 +11,7 @@ import TooltipManager from '../tooltipmanager.js';
 import PoweredBy from './poweredby.js';
 import AriaLiveAnnouncer from '../arialiveannouncer.js';
 import { ObservableMixin, isVisible, FocusTracker } from '@ckeditor/ckeditor5-utils';
+import { normalizeMenuBarConfig } from '../menubar/utils.js';
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
  */
@@ -37,6 +38,14 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
          * All available & focusable toolbars.
          */
         this._focusableToolbarDefinitions = [];
+        /**
+         * All additional menu bar items, groups or menus that have their default location defined.
+         */
+        this._extraMenuBarElements = [];
+        /**
+         * The last focused element to which focus should return on `Esc` press.
+         */
+        this._lastFocusedForeignElement = null;
         const editingView = editor.editing.view;
         this.editor = editor;
         this.componentFactory = new ComponentFactory(editor);
@@ -180,6 +189,48 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
         }
         this._focusableToolbarDefinitions.push({ toolbarView, options });
     }
+    /**
+     * Registers an extra menu bar element, which could be a single item, a group of items, or a menu containing groups.
+     *
+     * ```ts
+     * // Register a new menu bar item.
+     * editor.ui.extendMenuBar( {
+     *   item: 'menuBar:customFunctionButton',
+     *   position: 'after:menuBar:bold'
+     * } );
+     *
+     * // Register a new menu bar group.
+     * editor.ui.extendMenuBar( {
+     *   group: {
+     *     groupId: 'customGroup',
+     *     items: [
+     *       'menuBar:customFunctionButton'
+     *     ]
+     *   },
+     *   position: 'start:help'
+     * } );
+     *
+     * // Register a new menu bar menu.
+     * editor.ui.extendMenuBar( {
+     *   menu: {
+     *     menuId: 'customMenu',
+     *     label: 'customMenu',
+     *     groups: [
+     *       {
+     *         groupId: 'customGroup',
+     *         items: [
+     *           'menuBar:customFunctionButton'
+     *         ]
+     *       }
+     *     ]
+     *   },
+     *   position: 'after:help'
+     * } );
+     * ```
+     */
+    extendMenuBar(config) {
+        this._extraMenuBarElements.push(config);
+    }
     /**
      * Stores all editable elements used by the editor instance.
      *
@@ -199,6 +250,42 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
             'The EditorUI#_editableElements property has been deprecated and will be removed in the near future.', { editorUI: this });
         return this._editableElementsMap;
     }
+    /**
+     * Initializes menu bar.
+     */
+    _initMenuBar(menuBarView) {
+        const menuBarViewElement = menuBarView.element;
+        this.focusTracker.add(menuBarViewElement);
+        this.editor.keystrokes.listenTo(menuBarViewElement);
+        const normalizedMenuBarConfig = normalizeMenuBarConfig(this.editor.config.get('menuBar') || {});
+        menuBarView.fillFromConfig(normalizedMenuBarConfig, this.componentFactory, this._extraMenuBarElements);
+        this.editor.keystrokes.set('Esc', (data, cancel) => {
+            if (!menuBarViewElement.contains(this.editor.ui.focusTracker.focusedElement)) {
+                return;
+            }
+            // Bring focus back to where it came from before focusing the toolbar:
+            // If it came from outside the engine view (e.g. source editing), move it there.
+            if (this._lastFocusedForeignElement) {
+                this._lastFocusedForeignElement.focus();
+                this._lastFocusedForeignElement = null;
+            }
+            // Else just focus the view editing.
+            else {
+                this.editor.editing.view.focus();
+            }
+            cancel();
+        });
+        this.editor.keystrokes.set('Alt+F9', (data, cancel) => {
+            // If menu bar is already focused do nothing.
+            if (menuBarViewElement.contains(this.editor.ui.focusTracker.focusedElement)) {
+                return;
+            }
+            this._saveLastFocusedForeignElement();
+            menuBarView.isFocusBorderEnabled = true;
+            menuBarView.focus();
+            cancel();
+        });
+    }
     /**
      * Returns viewport offsets object:
      *
@@ -246,18 +333,10 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
     _initFocusTracking() {
         const editor = this.editor;
         const editingView = editor.editing.view;
-        let lastFocusedForeignElement;
         let candidateDefinitions;
         // Focus the next focusable toolbar on <kbd>Alt</kbd> + <kbd>F10</kbd>.
         editor.keystrokes.set('Alt+F10', (data, cancel) => {
-            const focusedElement = this.focusTracker.focusedElement;
-            // Focus moved out of a DOM element that
-            // * is not a toolbar,
-            // * does not belong to the editing view (e.g. source editing).
-            if (Array.from(this._editableElementsMap.values()).includes(focusedElement) &&
-                !Array.from(editingView.domRoots.values()).includes(focusedElement)) {
-                lastFocusedForeignElement = focusedElement;
-            }
+            this._saveLastFocusedForeignElement();
             const currentFocusedToolbarDefinition = this._getCurrentFocusedToolbarDefinition();
             // * When focusing a toolbar for the first time, set the array of definitions for successive presses of Alt+F10.
             // This ensures, the navigation works always the same and no pair of toolbars takes over
@@ -295,9 +374,9 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
             }
             // Bring focus back to where it came from before focusing the toolbar:
             // 1. If it came from outside the engine view (e.g. source editing), move it there.
-            if (lastFocusedForeignElement) {
-                lastFocusedForeignElement.focus();
-                lastFocusedForeignElement = null;
+            if (this._lastFocusedForeignElement) {
+                this._lastFocusedForeignElement.focus();
+                this._lastFocusedForeignElement = null;
             }
             // 2. There are two possibilities left:
             //   2.1. It could be that the focus went from an editable element in the view (root or nested).
@@ -313,6 +392,19 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
             cancel();
         });
     }
+    /**
+     * Saves last focused element that doen not belong to editing view to restore focus on `Esc`.
+     */
+    _saveLastFocusedForeignElement() {
+        const focusedElement = this.focusTracker.focusedElement;
+        // Focus moved out of a DOM element that
+        // * is not a toolbar,
+        // * does not belong to the editing view (e.g. source editing).
+        if (Array.from(this._editableElementsMap.values()).includes(focusedElement) &&
+            !Array.from(this.editor.editing.view.domRoots.values()).includes(focusedElement)) {
+            this._lastFocusedForeignElement = focusedElement;
+        }
+    }
     /**
      * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
      *

package/src/editorui/editoruiview.d.ts

@@ -10,6 +10,7 @@ import BodyCollection from './bodycollection.js';
 import type EditableUIView from '../editableui/editableuiview.js';
 import type { Locale, LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/editorui/editorui.css';
+import type MenuBarView from '../menubar/menubarview.js';
 /**
  * The editor UI view class. Base class for the editor main views.
  */
@@ -22,6 +23,10 @@ export default abstract class EditorUIView extends View {
     locale: Locale;
     t: LocaleTranslate;
     abstract get editable(): EditableUIView;
+    /**
+     * Menu bar view instance. May not be initialized in some editor types.
+     */
+    menuBarView?: MenuBarView;
     /**
      * Creates an instance of the editor UI view class.
      *

package/src/focuscycler.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/focuscycler
  */
-import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler, type KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
 import type View from './view.js';
 import type ViewCollection from './viewcollection.js';
 declare const FocusCycler_base: {
@@ -105,6 +105,7 @@ export default class FocusCycler extends /* #__PURE__ */ FocusCycler_base {
         focusables: ViewCollection<FocusableView>;
         focusTracker: FocusTracker;
         keystrokeHandler?: KeystrokeHandler;
+        keystrokeHandlerOptions?: KeystrokeHandlerOptions;
         actions?: FocusCyclerActions;
     });
     /**
@@ -164,6 +165,54 @@ export default class FocusCycler extends /* #__PURE__ */ FocusCycler_base {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusPrevious(): void;
+    /**
+     * Allows for creating continuous focus cycling across multiple focus cyclers and their collections of {@link #focusables}.
+     *
+     * It starts listening to the {@link module:ui/focuscycler~FocusCyclerForwardCycleEvent} and
+     * {@link module:ui/focuscycler~FocusCyclerBackwardCycleEvent} events of the chained focus cycler and engages,
+     * whenever the user reaches the last (forwards navigation) or first (backwards navigation) focusable view
+     * and would normally start over. Instead, the navigation continues on the higher level (flattens).
+     *
+     * For instance, for the following nested focus navigation structure, the focus would get stuck the moment
+     * the AB gets focused and its focus cycler starts managing it:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├───┐ │   │            │
+     *	   │            ├───► │  └─────┘  └─────┘  └─────┘   │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ └──────────────────────────────┘ │   │            │
+     *	   │            │   │                                  │   │            │
+     *	   └────────────┘   └──────────────────────────────────┘   └────────────┘
+     *
+     * Chaining a focus tracker that manages AA, AB, and AC with the focus tracker that manages ABA, ABB, and ABC
+     * creates a seamless navigation experience instead:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├──┐  │   │            │
+     *	┌──►            ├───┼─┘  └─────┘  └─────┘  └─────┘  └──┼───►            ├──┐
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  └────────────┘   └──────────────────────────────────┘   └────────────┘  │
+     *	│                                                                          │
+     *	│                                                                          │
+     *	└──────────────────────────────────────────────────────────────────────────┘
+     *
+     * See {@link #unchain} to reverse the chaining.
+     */
+    chain(chainedFocusCycler: FocusCycler): void;
+    /**
+     * Reverses a chaining made by {@link #chain}.
+     */
+    unchain(otherFocusCycler: FocusCycler): void;
     /**
      * Focuses the given view if it exists.
      *
@@ -204,12 +253,9 @@ export type FocusableView = View & {
 export type ViewWithFocusCycler = FocusableView & {
     focusCycler: FocusCycler;
 };
-export interface FocusCyclerActions {
-    focusFirst?: ArrayOrItem<string>;
-    focusLast?: ArrayOrItem<string>;
-    focusNext?: ArrayOrItem<string>;
-    focusPrevious?: ArrayOrItem<string>;
-}
+export type FocusCyclerActions = {
+    [key in 'focusFirst' | 'focusLast' | 'focusPrevious' | 'focusNext']?: ArrayOrItem<string>;
+};
 /**
  * Fired when the focus cycler is about to move the focus from the last focusable item
  * to the first one.

package/src/focuscycler.js

@@ -80,7 +80,7 @@ export default class FocusCycler extends /* #__PURE__ */ EmitterMixin() {
                     options.keystrokeHandler.set(keystroke, (data, cancel) => {
                         this[methodName]();
                         cancel();
-                    });
+                    }, options.keystrokeHandlerOptions);
                 }
             }
         }
@@ -198,6 +198,84 @@ export default class FocusCycler extends /* #__PURE__ */ EmitterMixin() {
             this._focus(previous, -1);
         }
     }
+    /**
+     * Allows for creating continuous focus cycling across multiple focus cyclers and their collections of {@link #focusables}.
+     *
+     * It starts listening to the {@link module:ui/focuscycler~FocusCyclerForwardCycleEvent} and
+     * {@link module:ui/focuscycler~FocusCyclerBackwardCycleEvent} events of the chained focus cycler and engages,
+     * whenever the user reaches the last (forwards navigation) or first (backwards navigation) focusable view
+     * and would normally start over. Instead, the navigation continues on the higher level (flattens).
+     *
+     * For instance, for the following nested focus navigation structure, the focus would get stuck the moment
+     * the AB gets focused and its focus cycler starts managing it:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├───┐ │   │            │
+     *	   │            ├───► │  └─────┘  └─────┘  └─────┘   │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ └──────────────────────────────┘ │   │            │
+     *	   │            │   │                                  │   │            │
+     *	   └────────────┘   └──────────────────────────────────┘   └────────────┘
+     *
+     * Chaining a focus tracker that manages AA, AB, and AC with the focus tracker that manages ABA, ABB, and ABC
+     * creates a seamless navigation experience instead:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├──┐  │   │            │
+     *	┌──►            ├───┼─┘  └─────┘  └─────┘  └─────┘  └──┼───►            ├──┐
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  └────────────┘   └──────────────────────────────────┘   └────────────┘  │
+     *	│                                                                          │
+     *	│                                                                          │
+     *	└──────────────────────────────────────────────────────────────────────────┘
+     *
+     * See {@link #unchain} to reverse the chaining.
+     */
+    chain(chainedFocusCycler) {
+        const getCurrentFocusedView = () => {
+            // This may happen when one focus cycler does not include focusables of the other (horizontal case).
+            if (this.current === null) {
+                return null;
+            }
+            return this.focusables.get(this.current);
+        };
+        this.listenTo(chainedFocusCycler, 'forwardCycle', evt => {
+            const oldCurrent = getCurrentFocusedView();
+            this.focusNext();
+            // Stop the event propagation only if an attempt at focusing the view actually moved the focus.
+            // If not, let the otherFocusCycler handle the event.
+            if (oldCurrent !== getCurrentFocusedView()) {
+                evt.stop();
+            }
+            // The priority is critical for cycling across multiple chain levels when there's a single view at some of them only.
+        }, { priority: 'low' });
+        this.listenTo(chainedFocusCycler, 'backwardCycle', evt => {
+            const oldCurrent = getCurrentFocusedView();
+            this.focusPrevious();
+            // Stop the event propagation only if an attempt at focusing the view actually moved the focus.
+            // If not, let the otherFocusCycler handle the event.
+            if (oldCurrent !== getCurrentFocusedView()) {
+                evt.stop();
+            }
+            // The priority is critical for cycling across multiple chain levels when there's a single view at some of them only.
+        }, { priority: 'low' });
+    }
+    /**
+     * Reverses a chaining made by {@link #chain}.
+     */
+    unchain(otherFocusCycler) {
+        this.stopListening(otherFocusCycler);
+    }
     /**
      * Focuses the given view if it exists.
      *

package/src/formheader/formheaderview.d.ts

@@ -18,8 +18,7 @@ import '../../theme/components/formheader/formheader.css';
  * The component can also be extended by any other elements, like: icons, dropdowns, etc.
  *
  * It is used i.a.
- * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
- * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
+ * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
  *
  * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
  */

package/src/formheader/formheaderview.js

@@ -16,8 +16,7 @@ import '../../theme/components/formheader/formheader.css';
  * The component can also be extended by any other elements, like: icons, dropdowns, etc.
  *
  * It is used i.a.
- * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
- * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
+ * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
  *
  * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
  */

package/src/highlightedtext/buttonlabelwithhighlightview.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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/highlightedtext/buttonlabelwithhighlightview
+ */
+import type ButtonLabel from '../button/buttonlabel.js';
+import HighlightedTextView from './highlightedtextview.js';
+/**
+ * A button label view that can highlight a text fragment.
+ */
+export default class ButtonLabelWithHighlightView extends HighlightedTextView implements ButtonLabel {
+    /**
+     * @inheritDoc
+     */
+    style: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    text: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    id: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+}

package/src/highlightedtext/buttonlabelwithhighlightview.js

@@ -0,0 +1,31 @@
+/**
+ * @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 HighlightedTextView from './highlightedtextview.js';
+/**
+ * A button label view that can highlight a text fragment.
+ */
+export default class ButtonLabelWithHighlightView extends HighlightedTextView {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        this.set({
+            style: undefined,
+            text: undefined,
+            id: undefined
+        });
+        const bind = this.bindTemplate;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-button__label'
+                ],
+                style: bind.to('style'),
+                id: bind.to('id')
+            }
+        });
+    }
+}

package/src/highlightedtext/labelwithhighlightview.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @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/highlightedtext/labelwithhighlightview
+ */
+import HighlightedTextView from './highlightedtextview.js';
+import type LabelView from '../label/labelview.js';
+/**
+ * A label view that can highlight a text fragment.
+ */
+export default class LabelWithHighlightView extends HighlightedTextView implements LabelView {
+    /**
+     * @inheritDoc
+     */
+    readonly id: string;
+    /**
+     * @inheritDoc
+     */
+    for: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+}

package/src/highlightedtext/labelwithhighlightview.js

@@ -0,0 +1,33 @@
+/**
+ * @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/highlightedtext/labelwithhighlightview
+ */
+import HighlightedTextView from './highlightedtextview.js';
+import { uid } from '@ckeditor/ckeditor5-utils';
+/**
+ * A label view that can highlight a text fragment.
+ */
+export default class LabelWithHighlightView extends HighlightedTextView {
+    /**
+     * @inheritDoc
+     */
+    constructor() {
+        super();
+        this.set('for', undefined);
+        const bind = this.bindTemplate;
+        this.id = `ck-editor__label_${uid()}`;
+        this.extendTemplate({
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-label'
+                ],
+                id: this.id,
+                for: bind.to('for')
+            }
+        });
+    }
+}

package/src/index.d.ts

@@ -18,7 +18,8 @@ export type { default as ButtonLabel } from './button/buttonlabel.js';
 export { default as ButtonView } from './button/buttonview.js';
 export { default as ButtonLabelView } from './button/buttonlabelview.js';
 export { default as SwitchButtonView } from './button/switchbuttonview.js';
-export { default as FileDialogButtonView } from './button/filedialogbuttonview.js';
+export { default as ListItemButtonView } from './button/listitembuttonview.js';
+export { default as FileDialogButtonView, FileDialogListItemButtonView } from './button/filedialogbuttonview.js';
 export { default as CollapsibleView } from './collapsible/collapsibleview.js';
 export * from './colorgrid/utils.js';
 export { default as ColorGridView, type ColorDefinition } from './colorgrid/colorgridview.js';
@@ -53,6 +54,7 @@ export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
 export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
+export { default as filterGroupAndItemNames } from './search/filtergroupanditemnames.js';
 export { default as Notification } from './notification/notification.js';
 export { default as ViewModel } from './model.js';
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview.js';
@@ -63,6 +65,8 @@ export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchT
 export { default as SearchInfoView } from './search/searchinfoview.js';
 export type { default as FilteredView, FilteredViewExecuteEvent } from './search/filteredview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
+export { default as ButtonLabelWithHighlightView } from './highlightedtext/buttonlabelwithhighlightview.js';
+export { default as LabelWithHighlightView } from './highlightedtext/labelwithhighlightview.js';
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template, type TemplateDefinition } from './template.js';
 export { default as SpinnerView } from './spinner/spinnerview.js';
@@ -79,5 +83,5 @@ export { default as MenuBarMenuListView } from './menubar/menubarmenulistview.js
 export { default as MenuBarMenuListItemView } from './menubar/menubarmenulistitemview.js';
 export { default as MenuBarMenuListItemButtonView } from './menubar/menubarmenulistitembuttonview.js';
 export { default as MenuBarMenuListItemFileDialogButtonView } from './menubar/menubarmenulistitemfiledialogbuttonview.js';
-export { normalizeMenuBarConfig, DefaultMenuBarItems, _initMenuBar } from './menubar/utils.js';
+export { normalizeMenuBarConfig, DefaultMenuBarItems } from './menubar/utils.js';
 import './augmentation.js';

package/src/index.js

@@ -17,7 +17,8 @@ export { default as BodyCollection } from './editorui/bodycollection.js';
 export { default as ButtonView } from './button/buttonview.js';
 export { default as ButtonLabelView } from './button/buttonlabelview.js';
 export { default as SwitchButtonView } from './button/switchbuttonview.js';
-export { default as FileDialogButtonView } from './button/filedialogbuttonview.js';
+export { default as ListItemButtonView } from './button/listitembuttonview.js';
+export { default as FileDialogButtonView, FileDialogListItemButtonView } from './button/filedialogbuttonview.js';
 export { default as CollapsibleView } from './collapsible/collapsibleview.js';
 export * from './colorgrid/utils.js';
 export { default as ColorGridView } from './colorgrid/colorgridview.js';
@@ -51,6 +52,7 @@ export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
 export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
+export { default as filterGroupAndItemNames } from './search/filtergroupanditemnames.js';
 export { default as Notification } from './notification/notification.js';
 export { default as ViewModel } from './model.js';
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview.js';
@@ -60,6 +62,8 @@ export { default as AutocompleteView } from './autocomplete/autocompleteview.js'
 export { default as SearchTextView } from './search/text/searchtextview.js';
 export { default as SearchInfoView } from './search/searchinfoview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
+export { default as ButtonLabelWithHighlightView } from './highlightedtext/buttonlabelwithhighlightview.js';
+export { default as LabelWithHighlightView } from './highlightedtext/labelwithhighlightview.js';
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template } from './template.js';
 export { default as SpinnerView } from './spinner/spinnerview.js';
@@ -76,5 +80,5 @@ export { default as MenuBarMenuListView } from './menubar/menubarmenulistview.js
 export { default as MenuBarMenuListItemView } from './menubar/menubarmenulistitemview.js';
 export { default as MenuBarMenuListItemButtonView } from './menubar/menubarmenulistitembuttonview.js';
 export { default as MenuBarMenuListItemFileDialogButtonView } from './menubar/menubarmenulistitemfiledialogbuttonview.js';
-export { normalizeMenuBarConfig, DefaultMenuBarItems, _initMenuBar } from './menubar/utils.js';
+export { normalizeMenuBarConfig, DefaultMenuBarItems } from './menubar/utils.js';
 import './augmentation.js';

package/src/menubar/menubarmenubuttonview.d.ts

@@ -6,14 +6,14 @@
  * @module ui/menubar/menubarmenubuttonview
  */
 import IconView from '../icon/iconview.js';
-import ButtonView from '../button/buttonview.js';
+import ListItemButtonView from '../button/listitembuttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/menubar/menubarmenubutton.css';
 /**
  * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
  * open both top-level bar menus as well as sub-menus.
  */
-export default class MenuBarMenuButtonView extends ButtonView {
+export default class MenuBarMenuButtonView extends ListItemButtonView {
     /**
      * An icon that displays an arrow to indicate a direction of the menu.
      */

package/src/menubar/menubarmenubuttonview.js

@@ -6,14 +6,14 @@
  * @module ui/menubar/menubarmenubuttonview
  */
 import IconView from '../icon/iconview.js';
-import ButtonView from '../button/buttonview.js';
+import ListItemButtonView from '../button/listitembuttonview.js';
 import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 import '../../theme/components/menubar/menubarmenubutton.css';
 /**
  * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
  * open both top-level bar menus as well as sub-menus.
  */
-export default class MenuBarMenuButtonView extends ButtonView {
+export default class MenuBarMenuButtonView extends ListItemButtonView {
     /**
      * Creates an instance of the menu bar button view.
      *

package/src/menubar/menubarmenulistitembuttonview.d.ts

@@ -6,12 +6,12 @@
  * @module ui/menubar/menubarmenulistitembuttonview
  */
 import type { Locale } from '@ckeditor/ckeditor5-utils';
-import ButtonView from '../button/buttonview.js';
+import ListItemButtonView from '../button/listitembuttonview.js';
 import '../../theme/components/menubar/menubarmenulistitembutton.css';
 /**
  * A menu bar list button view. Buttons like this one execute user actions.
  */
-export default class MenuBarMenuListItemButtonView extends ButtonView {
+export default class MenuBarMenuListItemButtonView extends ListItemButtonView {
     /**
      * Creates an instance of the menu bar list button view.
      *

package/src/menubar/menubarmenulistitembuttonview.js

@@ -2,12 +2,12 @@
  * @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 ListItemButtonView from '../button/listitembuttonview.js';
 import '../../theme/components/menubar/menubarmenulistitembutton.css';
 /**
  * A menu bar list button view. Buttons like this one execute user actions.
  */
-export default class MenuBarMenuListItemButtonView extends ButtonView {
+export default class MenuBarMenuListItemButtonView extends ListItemButtonView {
     /**
      * Creates an instance of the menu bar list button view.
      *