@ckeditor/ckeditor5-ui 47.6.1 → 48.0.0-alpha.1

package/src/dropdown/menu/dropdownmenulistview.js

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

package/src/dropdown/menu/dropdownmenunestedmenupanelview.js

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

package/src/dropdown/menu/dropdownmenunestedmenuview.js

@@ -1,214 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/dropdown/menu/dropdownmenunestedmenuview
- */
-import { FocusTracker, KeystrokeHandler, global } from '@ckeditor/ckeditor5-utils';
-import { DropdownMenuButtonView } from './dropdownmenubuttonview.js';
-import { DropdownMenuListView } from './dropdownmenulistview.js';
-import { DropdownMenuPanelPositioningFunctions } from './utils.js';
-import { DropdownMenuBehaviors } from './dropdownmenubehaviors.js';
-import { View } from '../../view.js';
-import { DropdownMenuNestedMenuPanelView } from './dropdownmenunestedmenupanelview.js';
-import '../../../theme/components/dropdown/menu/dropdownmenu.css';
-/**
- * Represents a nested menu view.
- */
-export class DropdownMenuNestedMenuView extends View {
-    /**
-     * An array of delegated events for the dropdown menu definition controller.
-     * These events are delegated to the dropdown menu element.
-     */
-    // Due to some spaghetti code we need to delegate `change:isOpen`.
-    static DELEGATED_EVENTS = [
-        'mouseenter', 'execute', 'change:isOpen'
-    ];
-    id;
-    /**
-     * Button of the menu view.
-     */
-    buttonView;
-    /**
-     * Panel of the menu. It hosts children of the menu.
-     */
-    panelView;
-    /**
-     * List of nested menu entries.
-     */
-    listView;
-    /**
-     * Tracks information about the DOM focus in the menu.
-     */
-    focusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
-     * keystrokes of the menu.
-     */
-    keystrokes;
-    _bodyCollection;
-    /**
-     * Creates a new instance of the DropdownMenuView class.
-     *
-     * @param locale
-     * @param bodyCollection
-     * @param id
-     * @param label The label for the dropdown menu button.
-     * @param parentMenuView The parent dropdown menu view, if any.
-     */
-    constructor(locale, bodyCollection, id, label, parentMenuView) {
-        super(locale);
-        this._bodyCollection = bodyCollection;
-        this.id = id;
-        this.set({
-            isOpen: false,
-            isEnabled: true,
-            panelPosition: 'w',
-            class: undefined,
-            parentMenuView: null
-        });
-        this.keystrokes = new KeystrokeHandler();
-        this.focusTracker = new FocusTracker();
-        this.buttonView = new DropdownMenuButtonView(locale);
-        this.buttonView.delegate('mouseenter').to(this);
-        this.buttonView.bind('isOn', 'isEnabled').to(this, 'isOpen', 'isEnabled');
-        this.buttonView.label = label;
-        this.panelView = new DropdownMenuNestedMenuPanelView(locale);
-        this.panelView.isVisible = true;
-        this.listView = new DropdownMenuListView(locale);
-        this.listView.bind('ariaLabel').to(this.buttonView, 'label');
-        this.panelView.content.add(this.listView);
-        const bind = this.bindTemplate;
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-dropdown-menu-list__nested-menu',
-                    bind.to('class'),
-                    bind.if('isEnabled', 'ck-disabled', value => !value)
-                ],
-                role: 'presentation'
-            },
-            children: [
-                this.buttonView
-            ]
-        });
-        this.parentMenuView = parentMenuView;
-        if (this.parentMenuView) {
-            this._handleParentMenuView();
-        }
-        this._attachBehaviors();
-    }
-    /**
-     * An array of positioning functions used to determine the position of the dropdown menu panel.
-     * The order of the functions in the array determines the priority of the positions to be tried.
-     * The first function that returns a valid position will be used.
-     *
-     * @returns {Array<PositioningFunction>} An array of positioning functions.
-     * @internal
-     */
-    get _panelPositions() {
-        const { westSouth, eastSouth, westNorth, eastNorth } = DropdownMenuPanelPositioningFunctions;
-        if (this.locale.uiLanguageDirection === 'ltr') {
-            return [eastSouth, eastNorth, westSouth, westNorth];
-        }
-        else {
-            return [westSouth, westNorth, eastSouth, eastNorth];
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.panelView.render();
-        this.focusTracker.add(this.buttonView.element);
-        this.focusTracker.add(this.panelView.element);
-        this.focusTracker.add(this.listView);
-        // Listen for keystrokes coming from within #element.
-        this.keystrokes.listenTo(this.element);
-        this._mountPanelOnOpen();
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        this._removePanelFromBody();
-        this.panelView.destroy();
-        super.destroy();
-    }
-    /**
-     * @inheritDoc
-     */
-    focus() {
-        this.buttonView.focus();
-    }
-    _handleParentMenuView() {
-        // Propagate events from this component to parent-menu.
-        this.delegate(...DropdownMenuNestedMenuView.DELEGATED_EVENTS).to(this.parentMenuView);
-        // Close this menu if its parent closes.
-        DropdownMenuBehaviors.closeOnParentClose(this, this.parentMenuView);
-    }
-    /**
-     * Attach all keyboard behaviors for the menu view.
-     */
-    _attachBehaviors() {
-        DropdownMenuBehaviors.openOnButtonClick(this);
-        DropdownMenuBehaviors.openAndFocusOnEnterKeyPress(this);
-        DropdownMenuBehaviors.openOnArrowRightKey(this);
-        DropdownMenuBehaviors.closeOnEscKey(this);
-        DropdownMenuBehaviors.closeOnArrowLeftKey(this);
-    }
-    /**
-     * Mounts the portal view in the body when the menu is open and removes it when the menu is closed.
-     * Binds keystrokes to the portal view when the menu is open.
-     */
-    _mountPanelOnOpen() {
-        const { panelView } = this;
-        this.on('change:isOpen', (evt, name, isOpen) => {
-            // Ensure that the event was triggered by this instance.
-            // TODO: Remove checking `evt.source` if `change:isOpen` is no longer delegated.
-            if (evt.source !== this) {
-                return;
-            }
-            // Removes the panel view from the body when the menu is closed.
-            if (!isOpen && this._bodyCollection.has(panelView)) {
-                this._removePanelFromBody();
-                return;
-            }
-            // Adds the panel view to the body when the menu is open.
-            if (isOpen && !this._bodyCollection.has(panelView)) {
-                this._addPanelToBody();
-            }
-        });
-    }
-    /**
-     * Removes the panel view from the editor's body and removes it from the focus tracker.
-     */
-    _removePanelFromBody() {
-        const { panelView, keystrokes } = this;
-        if (this._bodyCollection.has(panelView)) {
-            this._bodyCollection.remove(panelView);
-            keystrokes.stopListening(panelView.element);
-        }
-    }
-    /**
-     * Adds the panel view to the editor's body and sets up event listeners.
-     */
-    _addPanelToBody() {
-        const { panelView, buttonView, keystrokes } = this;
-        if (!this._bodyCollection.has(panelView)) {
-            this._bodyCollection.add(panelView);
-            keystrokes.listenTo(panelView.element);
-            panelView.pin({
-                positions: this._panelPositions,
-                limiter: global.document.body,
-                element: panelView.element,
-                target: buttonView.element,
-                fitInViewport: true
-            });
-        }
-    }
-}

package/src/dropdown/menu/dropdownmenurootlistview.js

@@ -1,168 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module ui/dropdown/menu/dropdownmenurootlistview
- */
-import { DropdownMenuListItemButtonView } from './dropdownmenulistitembuttonview.js';
-import { DropdownMenuNestedMenuView } from './dropdownmenunestedmenuview.js';
-import { DropdownMenuListView } from './dropdownmenulistview.js';
-import { DropdownMenuListItemView } from './dropdownmenulistitemview.js';
-import { DropdownRootMenuBehaviors } from './dropdownmenubehaviors.js';
-/**
- * Creates and manages a multi-level menu UI structure, suitable to be used inside dropdown components.
- *
- * This class creates a menu structure based on {@link module:ui/dropdown/menu/utils~DropdownMenuDefinition declarative definition}
- * passed in the constructor.
- *
- * Below is an example of a simple definition, that describes a menu with two sub-menus (Menu 1, Menu 2) and four buttons in total (Item A,
- * Item B, Item C, Item D):
- *
- * ```js
- * [
- * 	{
- * 		id: 'menu_1',
- * 		menu: 'Menu 1',
- * 		children: [
- * 			{ id: 'menu_1_a', label: 'Item A' },
- * 			{ id: 'menu_1_b', label: 'Item B' }
- * 		]
- * 	},
- * 	{
- * 		id: 'menu_2',
- * 		menu: 'Menu 2',
- * 		children: [
- * 			{ id: 'menu_2_c', label: 'Item C' },
- * 		]
- * 	},
- * 	{ id: 'item_d', label: 'Item D' }
- * ]
- * ```
- *
- * The menu is build using multiple view classes. The most important are:
- *
- * * {@link module:ui/dropdown/menu/dropdownmenunestedmenuview~DropdownMenuNestedMenuView `DropdownMenuNestedMenuView`} - "menu" - provides
- * a panel with a nested menu, and a button which opens the panel,
- * * {@link module:ui/dropdown/menu/dropdownmenulistitembuttonview~DropdownMenuListItemButtonView `DropdownMenuListItemButtonView`} -
- * "button" or "leaf button" (as opposed to buttons provided by `DropdownMenuNestedMenuView`) - should trigger some action when pressed.
- *
- * Instances of these two classes are created based on the data provided in definitions. They are assigned proper IDs and labels.
- * Other view classes build a proper DOM structure around menus and buttons.
- *
- * The `DropdownMenuNestedMenuView` instances provides panels, which may include further menus or buttons. These panels are added to
- * a `BodyCollection` view, which means they are appended outside the DOM editor and UI structure.
- *
- * When "leaf button" is pressed, it fires `execute` event which is delegated to `DropdownMenuRootListView` as `menu:execute` event. You
- * can listen to this event to perform an action:
- *
- * ```js
- * rootListView.on( 'menu:execute', evt => {
- * 	console.log( evt.source.id ); // E.g. will print 'menu_1_a' when 'Item A' is pressed.
- * } );
- * ```
- *
- * All menus and "leaf" buttons created from the definition can be easily accessed through {@link ~DropdownMenuRootListView#menus `menus`}
- * and {@link ~DropdownMenuRootListView#buttons `buttons`} properties.
- *
- * For performance reasons, the whole menu structure is created only when `DropdownMenuRootListView` is rendered for the first time.
- *
- * It is recommended to use this class together with {@link module:ui/dropdown/utils~addMenuToDropdown `addMenuToDropdown()` helper}.
- */
-export class DropdownMenuRootListView extends DropdownMenuListView {
-    /**
-     * The definitions object used to create the whole menu structure.
-     */
-    _definition;
-    /**
-     * Cached array of all menus in the dropdown menu (including nested menus).
-     */
-    _cachedMenus = [];
-    /**
-     * Cached array of all buttons in the dropdown menu (including buttons in nested menus).
-     */
-    _cachedButtons = [];
-    /**
-     * Editor body collection into which nested menus panels will be appended.
-     */
-    _bodyCollection;
-    /**
-     * Creates an instance of the DropdownMenuRootListView class.
-     *
-     * @param locale
-     * @param bodyCollection
-     * @param definition The definition object used to create the menu structure.
-     */
-    constructor(locale, bodyCollection, definition) {
-        super(locale);
-        this._bodyCollection = bodyCollection;
-        this._definition = definition;
-        this.set('menuPanelClass', undefined);
-    }
-    /**
-     * Returns the array of all menus in the dropdown menu (including nested menus).
-     */
-    get menus() {
-        return Array.from(this._cachedMenus.values());
-    }
-    /**
-     * Returns the array of all buttons in the dropdown menu (including buttons in nested menus).
-     *
-     * Note, that this includes only "leaf" buttons, as specified in the definition passed in constructor. Buttons created as a part of
-     * the nested menus, that open nested menus when hovered or pressed, are not included.
-     */
-    get buttons() {
-        return Array.from(this._cachedButtons.values());
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        this._createStructure(this._definition, null);
-        super.render();
-        DropdownRootMenuBehaviors.toggleMenusAndFocusItemsOnHover(this);
-        DropdownRootMenuBehaviors.closeMenuWhenAnotherOnTheSameLevelOpens(this);
-    }
-    /**
-     * Closes all nested menus.
-     */
-    closeMenus() {
-        this.menus.forEach(menu => {
-            menu.isOpen = false;
-        });
-    }
-    /**
-     * Recursively creates the whole view tree structure for the dropdown menu, according to the passed `definitions`.
-     *
-     * @private
-     */
-    _createStructure(definitions, parentMenuView) {
-        const items = [];
-        for (const def of definitions) {
-            let createdView;
-            if ('menu' in def) {
-                createdView = new DropdownMenuNestedMenuView(this.locale, this._bodyCollection, def.id, def.menu, parentMenuView);
-                createdView.panelView.bind('class').to(this, 'menuPanelClass');
-                if (!parentMenuView) {
-                    createdView.delegate(...DropdownMenuNestedMenuView.DELEGATED_EVENTS).to(this, (name) => `menu:${name}`);
-                }
-                this._cachedMenus.push(createdView);
-                this._createStructure(def.children, createdView);
-            }
-            else {
-                createdView = new DropdownMenuListItemButtonView(this.locale, def.id, def.label);
-                if (!parentMenuView) {
-                    createdView.delegate('execute').to(this, 'menu:execute');
-                }
-                this._cachedButtons.push(createdView);
-            }
-            const listItemView = new DropdownMenuListItemView(this.locale, parentMenuView, createdView);
-            if (!parentMenuView) {
-                listItemView.delegate('mouseenter').to(this, 'menu:mouseenter');
-            }
-            items.push(listItemView);
-        }
-        const targetListView = parentMenuView ? parentMenuView.listView : this;
-        targetListView.items.addMany(items);
-    }
-}

package/src/dropdown/menu/utils.js

@@ -1,61 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-const NESTED_PANEL_HORIZONTAL_OFFSET = 5;
-/**
- * Contains every positioning function used by {@link module:ui/dropdown/menu/dropdownmenunestedmenuview~DropdownMenuNestedMenuView} that
- * decides where the {@link module:ui/dropdown/menu/dropdownmenunestedmenuview~DropdownMenuNestedMenuView#panelView} should be placed.
- *
- * Positioning functions:
- *
- *	┌──────┬───────────────┐
- *	│      │               │
- *	└──────┤               │
- *	       │               │
- *	       │            ES │
- *	       └───────────────┘
- *
- *	┌───────────────┬──────┐
- *	│               │      │
- *	│               ├──────┘
- *	│               │
- *	│ WS            │
- *	└───────────────┘
- *
- *	       ┌───────────────┐
- *	       │            EN │
- *	       │               │
- *	┌──────┤               │
- *	│      │               │
- *	└──────┴───────────────┘
- *
- *	┌───────────────┐
- *	│ WN            │
- *	│               │
- *	│               ├──────┐
- *	│               │      │
- *	└───────────────┴──────┘
- */
-export const DropdownMenuPanelPositioningFunctions = {
-    eastSouth: buttonRect => ({
-        top: buttonRect.top,
-        left: buttonRect.right - NESTED_PANEL_HORIZONTAL_OFFSET,
-        name: 'es'
-    }),
-    eastNorth: (buttonRect, panelRect) => ({
-        top: buttonRect.top - panelRect.height + buttonRect.height,
-        left: buttonRect.right - NESTED_PANEL_HORIZONTAL_OFFSET,
-        name: 'en'
-    }),
-    westSouth: (buttonRect, panelRect) => ({
-        top: buttonRect.top,
-        left: buttonRect.left - panelRect.width + NESTED_PANEL_HORIZONTAL_OFFSET,
-        name: 'ws'
-    }),
-    westNorth: (buttonRect, panelRect) => ({
-        top: buttonRect.top - panelRect.height + buttonRect.height,
-        left: buttonRect.left - panelRect.width + NESTED_PANEL_HORIZONTAL_OFFSET,
-        name: 'wn'
-    })
-};