@ckeditor/ckeditor5-ui 39.0.1 → 40.0.0

package/src/list/listview.d.ts

@@ -1,65 +1,122 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/list/listview
- */
-import View from '../view';
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
-import type ViewCollection from '../viewcollection';
-import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/list/list.css';
-/**
- * The list view class.
- */
-export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
-    /**
-     * Collection of the child list views.
-     */
-    readonly items: ViewCollection;
-    /**
-     * Tracks information about DOM focus in the list.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * Label used by assistive technologies to describe this list element.
-     *
-     * @observable
-     */
-    ariaLabel: string | undefined;
-    /**
-     * The property reflected by the `role` DOM attribute to be used by assistive technologies.
-     *
-     * @observable
-     */
-    role: string | undefined;
-    /**
-     * Helps cycling over focusable {@link #items} in the list.
-     */
-    private readonly _focusCycler;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus(): void;
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast(): void;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listview
+ */
+import View from '../view';
+import type ListItemView from './listitemview';
+import ListItemGroupView from './listitemgroupview';
+import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
+import ViewCollection from '../viewcollection';
+import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/list/list.css';
+/**
+ * The list view class.
+ */
+export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
+    /**
+     * 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}.
+     */
+    readonly focusables: ViewCollection;
+    /**
+     * Collection of the child list views.
+     */
+    readonly items: ViewCollection<ListItemView | ListItemGroupView>;
+    /**
+     * Tracks information about DOM focus in the list.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Label used by assistive technologies to describe this list element.
+     *
+     * @observable
+     */
+    ariaLabel: string | undefined;
+    /**
+     * (Optional) The ARIA property reflected by the `aria-ariaLabelledBy` DOM attribute used by assistive technologies.
+     *
+     * @observable
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * The property reflected by the `role` DOM attribute to be used by assistive technologies.
+     *
+     * @observable
+     */
+    role: string | undefined;
+    /**
+     * Helps cycling over focusable {@link #items} in the list.
+     */
+    private readonly _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.
+     */
+    private readonly _listItemGroupToChangeListeners;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focus(): void;
+    /**
+     * Focuses the first focusable in {@link #items}.
+     */
+    focusFirst(): void;
+    /**
+     * Focuses the last focusable in {@link #items}.
+     */
+    focusLast(): void;
+    /**
+     * 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.
+     */
+    private _registerFocusableListItem;
+    /**
+     * Removes a list item view from the focus tracker.
+     *
+     * @param item The list item view to be removed.
+     */
+    private _deregisterFocusableListItem;
+    /**
+     * 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.
+     */
+    private _getOnGroupItemsChangeCallback;
+    /**
+     * 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.
+     */
+    private _registerFocusableItemsGroup;
+    /**
+     * Removes a list item group view (and its children) from the focus tracker.
+     *
+     * @param groupView The group view to be removed.
+     */
+    private _deregisterFocusableItemsGroup;
+}

package/src/list/listview.js

@@ -1,90 +1,187 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/list/listview
- */
-import View from '../view';
-import FocusCycler from '../focuscycler';
-import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/list/list.css';
-/**
- * The list view class.
- */
-export default class ListView extends View {
-    /**
-     * @inheritDoc
-     */
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.items = this.createCollection();
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this._focusCycler = new FocusCycler({
-            focusables: this.items,
-            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('role', undefined);
-        this.setTemplate({
-            tag: 'ul',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-reset',
-                    'ck-list'
-                ],
-                role: bind.to('role'),
-                'aria-label': bind.to('ariaLabel')
-            },
-            children: this.items
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        // Items added before rendering should be known to the #focusTracker.
-        for (const item of this.items) {
-            this.focusTracker.add(item.element);
-        }
-        this.items.on('add', (evt, item) => {
-            this.focusTracker.add(item.element);
-        });
-        this.items.on('remove', (evt, item) => {
-            this.focusTracker.remove(item.element);
-        });
-        // 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 last focusable in {@link #items}.
-     */
-    focusLast() {
-        this._focusCycler.focusLast();
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/list/listview
+ */
+import View from '../view';
+import FocusCycler from '../focuscycler';
+import ListItemGroupView from './listitemgroupview';
+import ViewCollection from '../viewcollection';
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/list/list.css';
+/**
+ * The list view class.
+ */
+export default class ListView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale) {
+        super(locale);
+        /**
+         * A cached map of {@link module:ui/list/listitemgroupview~ListItemGroupView} to `change` event listeners for their `items`.
+         * Used for accessibility and keyboard navigation purposes.
+         */
+        this._listItemGroupToChangeListeners = new WeakMap();
+        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 {
+                this._registerFocusableListItem(item);
+            }
+        }
+        this.items.on('change', (evt, data) => {
+            for (const removed of data.removed) {
+                if (removed instanceof ListItemGroupView) {
+                    this._deregisterFocusableItemsGroup(removed);
+                }
+                else {
+                    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/model.d.ts

@@ -1,22 +1,22 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-declare const Model_base: {
-    new (): import("@ckeditor/ckeditor5-utils").Observable;
-    prototype: import("@ckeditor/ckeditor5-utils").Observable;
-};
-/**
- * The base MVC model class.
- */
-export default class Model extends Model_base {
-    [x: string]: unknown;
-    /**
-     * Creates a new Model instance.
-     *
-     * @param attributes The model state attributes to be defined during the instance creation.
-     * @param properties The (out of state) properties to be appended to the instance during creation.
-     */
-    constructor(attributes?: Record<string, unknown>, properties?: Record<string, unknown>);
-}
-export {};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+declare const Model_base: {
+    new (): import("@ckeditor/ckeditor5-utils").Observable;
+    prototype: import("@ckeditor/ckeditor5-utils").Observable;
+};
+/**
+ * The base MVC model class.
+ */
+export default class Model extends Model_base {
+    [x: string]: unknown;
+    /**
+     * Creates a new Model instance.
+     *
+     * @param attributes The model state attributes to be defined during the instance creation.
+     * @param properties The (out of state) properties to be appended to the instance during creation.
+     */
+    constructor(attributes?: Record<string, unknown>, properties?: Record<string, unknown>);
+}
+export {};

package/src/model.js

@@ -1,31 +1,31 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module ui/model
- */
-import { ObservableMixin } from '@ckeditor/ckeditor5-utils';
-import { extend } from 'lodash-es';
-/**
- * The base MVC model class.
- */
-export default class Model extends ObservableMixin() {
-    /**
-     * Creates a new Model instance.
-     *
-     * @param attributes The model state attributes to be defined during the instance creation.
-     * @param properties The (out of state) properties to be appended to the instance during creation.
-     */
-    constructor(attributes, properties) {
-        super();
-        // Extend this instance with the additional (out of state) properties.
-        if (properties) {
-            extend(this, properties);
-        }
-        // Initialize the attributes.
-        if (attributes) {
-            this.set(attributes);
-        }
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/model
+ */
+import { ObservableMixin } from '@ckeditor/ckeditor5-utils';
+import { extend } from 'lodash-es';
+/**
+ * The base MVC model class.
+ */
+export default class Model extends ObservableMixin() {
+    /**
+     * Creates a new Model instance.
+     *
+     * @param attributes The model state attributes to be defined during the instance creation.
+     * @param properties The (out of state) properties to be appended to the instance during creation.
+     */
+    constructor(attributes, properties) {
+        super();
+        // Extend this instance with the additional (out of state) properties.
+        if (properties) {
+            extend(this, properties);
+        }
+        // Initialize the attributes.
+        if (attributes) {
+            this.set(attributes);
+        }
+    }
+}