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

package/src/list/listitemgroupview.js

@@ -1,82 +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/list/listitemgroupview
- */
-import { View } from '../view.js';
-import { ListView } from './listview.js';
-import { LabelView } from '../label/labelview.js';
-import { ListSeparatorView } from './listseparatorview.js';
-/**
- * The list item group view class.
- */
-export class ListItemGroupView extends View {
-    /**
-     * Label of the group view. Its text is configurable using the {@link #label label attribute}.
-     *
-     * If a custom label view is not passed in `ListItemGroupView` constructor, the label is an instance
-     * of {@link module:ui/label/labelview~LabelView}.
-     */
-    labelView;
-    /**
-     * Collection of the child list items inside this group.
-     */
-    items;
-    /**
-     * Collection of the child elements of the group.
-     */
-    children;
-    /**
-     * Creates an instance of the list item group view class.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param labelView The instance of the group's label. If not provided, an instance of
-     * {@link module:ui/label/labelview~LabelView} is used.
-     */
-    constructor(locale, labelView = new LabelView()) {
-        super(locale);
-        const bind = this.bindTemplate;
-        const nestedList = new ListView(locale);
-        this.set({
-            label: '',
-            isVisible: true
-        });
-        this.labelView = labelView;
-        this.labelView.bind('text').to(this, 'label');
-        this.children = this.createCollection();
-        this.children.addMany([this.labelView, nestedList]);
-        nestedList.set({
-            role: 'group',
-            ariaLabelledBy: labelView.id
-        });
-        // Disable focus tracking and accessible navigation in the child list.
-        nestedList.focusTracker.destroy();
-        nestedList.keystrokes.destroy();
-        this.items = nestedList.items;
-        this.setTemplate({
-            tag: 'li',
-            attributes: {
-                role: 'presentation',
-                class: [
-                    'ck',
-                    'ck-list__group',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ]
-            },
-            children: this.children
-        });
-    }
-    /**
-     * Focuses the list item (which is not a separator).
-     */
-    focus() {
-        if (this.items) {
-            const firstListItem = this.items.find(item => !(item instanceof ListSeparatorView));
-            if (firstListItem) {
-                firstListItem.focus();
-            }
-        }
-    }
-}

package/src/list/listitemview.js

@@ -1,46 +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/list/listitemview
- */
-import { View } from '../view.js';
-/**
- * The list item view class.
- */
-export class ListItemView extends View {
-    /**
-     * Collection of the child views inside of the list item {@link #element}.
-     */
-    children;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('isVisible', true);
-        this.children = this.createCollection();
-        this.setTemplate({
-            tag: 'li',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-list__item',
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ],
-                role: 'presentation'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * Focuses the list item.
-     */
-    focus() {
-        if (this.children.first) {
-            this.children.first.focus();
-        }
-    }
-}

package/src/list/listseparatorview.js

@@ -1,28 +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/list/listseparatorview
- */
-import { View } from '../view.js';
-/**
- * The list separator view class.
- */
-export class ListSeparatorView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        this.setTemplate({
-            tag: 'li',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-list__separator'
-                ]
-            }
-        });
-    }
-}

package/src/list/listview.js

@@ -1,210 +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/list/listview
- */
-import { View } from '../view.js';
-import { FocusCycler } from '../focuscycler.js';
-import { ListItemView } from './listitemview.js';
-import { ListItemGroupView } from './listitemgroupview.js';
-import { ViewCollection } from '../viewcollection.js';
-import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/list/list.css';
-/**
- * The list view class.
- */
-export class ListView extends View {
-    /**
-     * The collection of focusable views in the list. It is used to determine accessible navigation
-     * between the {@link module:ui/list/listitemview~ListItemView list items} and
-     * {@link module:ui/list/listitemgroupview~ListItemGroupView list groups}.
-     */
-    focusables;
-    /**
-     * Collection of the child list views.
-     */
-    items;
-    /**
-     * Tracks information about DOM focus in the list.
-     */
-    focusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes;
-    /**
-     * Helps cycling over focusable {@link #items} in the list.
-     */
-    _focusCycler;
-    /**
-     * A cached map of {@link module:ui/list/listitemgroupview~ListItemGroupView} to `change` event listeners for their `items`.
-     * Used for accessibility and keyboard navigation purposes.
-     */
-    _listItemGroupToChangeListeners = new WeakMap();
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.focusables = new ViewCollection();
-        this.items = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this._focusCycler = new FocusCycler({
-            focusables: this.focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate list items backwards using the arrowup key.
-                focusPrevious: 'arrowup',
-                // Navigate toolbar items forwards using the arrowdown key.
-                focusNext: 'arrowdown'
-            }
-        });
-        this.set('ariaLabel', undefined);
-        this.set('ariaLabelledBy', undefined);
-        this.set('role', undefined);
-        this.setTemplate({
-            tag: 'ul',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset',
-                    'ck-list'
-                ],
-                role: bind.to('role'),
-                'aria-label': bind.to('ariaLabel'),
-                'aria-labelledby': bind.to('ariaLabelledBy')
-            },
-            children: this.items
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Items added before rendering should be known to the #focusTracker.
-        for (const item of this.items) {
-            if (item instanceof ListItemGroupView) {
-                this._registerFocusableItemsGroup(item);
-            }
-            else if (item instanceof ListItemView) {
-                this._registerFocusableListItem(item);
-            }
-        }
-        this.items.on('change', (evt, data) => {
-            for (const removed of data.removed) {
-                if (removed instanceof ListItemGroupView) {
-                    this._deregisterFocusableItemsGroup(removed);
-                }
-                else if (removed instanceof ListItemView) {
-                    this._deregisterFocusableListItem(removed);
-                }
-            }
-            for (const added of Array.from(data.added).reverse()) {
-                if (added instanceof ListItemGroupView) {
-                    this._registerFocusableItemsGroup(added, data.index);
-                }
-                else {
-                    this._registerFocusableListItem(added, data.index);
-                }
-            }
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focusFirst() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast() {
-        this._focusCycler.focusLast();
-    }
-    /**
-     * Registers a list item view in the focus tracker.
-     *
-     * @param item The list item view to be registered.
-     * @param index Index of the list item view in the {@link #items} collection. If not specified, the item will be added at the end.
-     */
-    _registerFocusableListItem(item, index) {
-        this.focusTracker.add(item.element);
-        this.focusables.add(item, index);
-    }
-    /**
-     * Removes a list item view from the focus tracker.
-     *
-     * @param item The list item view to be removed.
-     */
-    _deregisterFocusableListItem(item) {
-        this.focusTracker.remove(item.element);
-        this.focusables.remove(item);
-    }
-    /**
-     * Gets a callback that will be called when the `items` collection of a {@link module:ui/list/listitemgroupview~ListItemGroupView}
-     * change.
-     *
-     * @param groupView The group view for which the callback will be created.
-     * @returns The callback function to be used for the items `change` event listener in a group.
-     */
-    _getOnGroupItemsChangeCallback(groupView) {
-        return (evt, data) => {
-            for (const removed of data.removed) {
-                this._deregisterFocusableListItem(removed);
-            }
-            for (const added of Array.from(data.added).reverse()) {
-                this._registerFocusableListItem(added, this.items.getIndex(groupView) + data.index);
-            }
-        };
-    }
-    /**
-     * Registers a list item group view (and its children) in the focus tracker.
-     *
-     * @param groupView A group view to be registered.
-     * @param groupIndex Index of the group view in the {@link #items} collection. If not specified, the group will be added at the end.
-     */
-    _registerFocusableItemsGroup(groupView, groupIndex) {
-        Array.from(groupView.items).forEach((child, childIndex) => {
-            const registeredChildIndex = typeof groupIndex !== 'undefined' ? groupIndex + childIndex : undefined;
-            this._registerFocusableListItem(child, registeredChildIndex);
-        });
-        const groupItemsChangeCallback = this._getOnGroupItemsChangeCallback(groupView);
-        // Cache the reference to the callback in case the group is removed (see _deregisterFocusableItemsGroup()).
-        this._listItemGroupToChangeListeners.set(groupView, groupItemsChangeCallback);
-        groupView.items.on('change', groupItemsChangeCallback);
-    }
-    /**
-     * Removes a list item group view (and its children) from the focus tracker.
-     *
-     * @param groupView The group view to be removed.
-     */
-    _deregisterFocusableItemsGroup(groupView) {
-        for (const child of groupView.items) {
-            this._deregisterFocusableListItem(child);
-        }
-        groupView.items.off('change', this._listItemGroupToChangeListeners.get(groupView));
-        this._listItemGroupToChangeListeners.delete(groupView);
-    }
-}

package/src/menubar/menubarmenubuttonview.js

@@ -1,68 +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/menubar/menubarmenubuttonview
- */
-import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
-import { IconView } from '../icon/iconview.js';
-import { ListItemButtonView } from '../button/listitembuttonview.js';
-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 class MenuBarMenuButtonView extends ListItemButtonView {
-    /**
-     * An icon that displays an arrow to indicate a direction of the menu.
-     */
-    arrowView;
-    /**
-     * Creates an instance of the menu bar button view.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set({
-            withText: true,
-            role: 'menuitem'
-        });
-        this.arrowView = this._createArrowView();
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-menu-bar__menu__button'
-                ],
-                'aria-haspopup': true,
-                'aria-expanded': this.bindTemplate.to('isOn', value => String(value)),
-                'data-cke-tooltip-disabled': bind.to('isOn')
-            },
-            on: {
-                'mouseenter': bind.to('mouseenter')
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        this.children.add(this.arrowView);
-    }
-    /**
-     * Creates the {@link #arrowView} instance.
-     */
-    _createArrowView() {
-        const arrowView = new IconView();
-        arrowView.content = IconDropdownArrow;
-        arrowView.extendTemplate({
-            attributes: {
-                class: 'ck-menu-bar__menu__button__arrow'
-            }
-        });
-        return arrowView;
-    }
-}

package/src/menubar/menubarmenulistitembuttonview.js

@@ -1,30 +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 { 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 class MenuBarMenuListItemButtonView extends ListItemButtonView {
-    /**
-     * Creates an instance of the menu bar list button view.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        this.set({
-            withText: true,
-            withKeystroke: true,
-            tooltip: false,
-            role: 'menuitem'
-        });
-        this.extendTemplate({
-            attributes: {
-                class: ['ck-menu-bar__menu__item__button']
-            }
-        });
-    }
-}

package/src/menubar/menubarmenulistitemfiledialogbuttonview.js

@@ -1,32 +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 { FileDialogListItemButtonView } from '../button/filedialogbuttonview.js';
-import '../../theme/components/menubar/menubarmenulistitembutton.css';
-/**
- * A menu bar list file dialog button view. Buttons like this one execute user actions.
- *
- * This component provides a button that opens the native file selection dialog.
- */
-export class MenuBarMenuListItemFileDialogButtonView extends FileDialogListItemButtonView {
-    /**
-     * Creates an instance of the menu bar list button view.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        this.set({
-            withText: true,
-            withKeystroke: true,
-            tooltip: false,
-            role: 'menuitem'
-        });
-        this.extendTemplate({
-            attributes: {
-                class: ['ck-menu-bar__menu__item__button']
-            }
-        });
-    }
-}

package/src/menubar/menubarmenulistitemview.js

@@ -1,34 +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 { ListItemView } from '../list/listitemview.js';
-import '../../theme/components/menubar/menubarmenulistitem.css';
-/**
- * A menu bar list item view, a child of {@link module:ui/menubar/menubarmenulistview~MenuBarMenuListView}.
- *
- * Populate this item with a {@link module:ui/menubar/menubarmenulistitembuttonview~MenuBarMenuListItemButtonView} instance
- * or a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance to create a sub-menu.
- */
-export class MenuBarMenuListItemView extends ListItemView {
-    /**
-     * Creates an instance of the list item view.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale, parentMenuView) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-menu-bar__menu__item'
-                ]
-            },
-            on: {
-                'mouseenter': bind.to('mouseenter')
-            }
-        });
-        this.delegate('mouseenter').to(parentMenuView);
-    }
-}

package/src/menubar/menubarmenulistview.js

@@ -1,72 +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 { ListItemView } from '../list/listitemview.js';
-import { ListView } from '../list/listview.js';
-import { ListItemButtonView } from '../button/listitembuttonview.js';
-import { ButtonView } from '../button/buttonview.js';
-/**
- * A list of menu bar items, a child of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView}.
- *
- * Use this class to create a list of items (options, buttons) to be displayed in a menu bar.
- *
- * To populate this list, use {@link module:ui/menubar/menubarmenulistitemview~MenuBarMenuListItemView} instances.
- */
-export class MenuBarMenuListView extends ListView {
-    /**
-     * Creates an instance of the list view.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        this.role = 'menu';
-        this.items.on('change', this._setItemsCheckSpace.bind(this));
-    }
-    /**
-     * This method adds empty space if there is any toggleable item in the list.
-     * It makes the list properly aligned.
-     */
-    _setItemsCheckSpace() {
-        const hasAnyToggleableItem = (Array
-            .from(this.items)
-            .some(item => {
-            const listButtonView = pickListButtonMenuViewIfPresent(item);
-            return listButtonView && listButtonView.isToggleable;
-        }));
-        this.items.forEach(item => {
-            const listButtonView = pickListButtonMenuViewIfPresent(item);
-            if (listButtonView) {
-                listButtonView.hasCheckSpace = hasAnyToggleableItem;
-            }
-        });
-    }
-}
-/**
- * Picks the first button menu view from the given item if present.
- *
- * @param item The item to check for a button menu view.
- * @returns The first button menu view found in the item, or `null` if not found.
- */
-function pickListButtonMenuViewIfPresent(item) {
-    if (!(item instanceof ListItemView)) {
-        return null;
-    }
-    return item
-        .children
-        .map(child => isNestedMenuLikeView(child) ? child.buttonView : child)
-        .find(item => item instanceof ListItemButtonView);
-}
-/**
- * Checks if the given item is a nested menu-like view. `MenuBarMenuView` imports this file
- * so to avoid circular dependencies, this function is defined in more generic way.
- *
- * @param item The item to check.
- * @returns `true` if the item is a nested menu-like view, `false` otherwise.
- */
-function isNestedMenuLikeView(item) {
-    return (typeof item === 'object' &&
-        'buttonView' in item &&
-        item.buttonView instanceof ButtonView);
-}

package/src/menubar/menubarmenupanelview.js

@@ -1,64 +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 { View } from '../view.js';
-import '../../theme/components/menubar/menubarmenupanel.css';
-/**
- * A view representing a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView} of a menu.
- */
-export class MenuBarMenuPanelView extends View {
-    /**
-     * Collection of the child views in this panel.
-     */
-    children;
-    /**
-     * 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);
-        this.set('position', 'se');
-        this.children = this.createCollection();
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset',
-                    'ck-menu-bar__menu__panel',
-                    bind.to('position', value => `ck-menu-bar__menu__panel_position_${value}`),
-                    bind.if('isVisible', 'ck-hidden', value => !value)
-                ],
-                tabindex: '-1'
-            },
-            children: this.children,
-            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`.
-     */
-    focus(direction = 1) {
-        if (this.children.length) {
-            if (direction === 1) {
-                this.children.first.focus();
-            }
-            else {
-                this.children.last.focus();
-            }
-        }
-    }
-}