@ckeditor/ckeditor5-ui 35.3.2 → 36.0.0

package/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor 5 UI framework** – https://github.com/ckeditor/ckeditor5-ui <br>
-Copyright (c) 2003-2022, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+Copyright (c) 2003-2023, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "35.3.2",
+  "version": "36.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,29 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.3.2",
-    "@ckeditor/ckeditor5-core": "^35.3.2",
+    "@ckeditor/ckeditor5-utils": "^36.0.0",
+    "@ckeditor/ckeditor5-core": "^36.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.3.2",
-    "@ckeditor/ckeditor5-block-quote": "^35.3.2",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.3.2",
-    "@ckeditor/ckeditor5-editor-classic": "^35.3.2",
-    "@ckeditor/ckeditor5-engine": "^35.3.2",
-    "@ckeditor/ckeditor5-enter": "^35.3.2",
-    "@ckeditor/ckeditor5-essentials": "^35.3.2",
-    "@ckeditor/ckeditor5-font": "^35.3.2",
-    "@ckeditor/ckeditor5-find-and-replace": "^35.3.2",
-    "@ckeditor/ckeditor5-heading": "^35.3.2",
-    "@ckeditor/ckeditor5-image": "^35.3.2",
-    "@ckeditor/ckeditor5-link": "^35.3.2",
-    "@ckeditor/ckeditor5-list": "^35.3.2",
-    "@ckeditor/ckeditor5-mention": "^35.3.2",
-    "@ckeditor/ckeditor5-paragraph": "^35.3.2",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.3.2",
-    "@ckeditor/ckeditor5-table": "^35.3.2",
-    "@ckeditor/ckeditor5-typing": "^35.3.2",
+    "@ckeditor/ckeditor5-basic-styles": "^36.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^36.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^36.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^36.0.0",
+    "@ckeditor/ckeditor5-engine": "^36.0.0",
+    "@ckeditor/ckeditor5-enter": "^36.0.0",
+    "@ckeditor/ckeditor5-essentials": "^36.0.0",
+    "@ckeditor/ckeditor5-font": "^36.0.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^36.0.0",
+    "@ckeditor/ckeditor5-heading": "^36.0.0",
+    "@ckeditor/ckeditor5-image": "^36.0.0",
+    "@ckeditor/ckeditor5-link": "^36.0.0",
+    "@ckeditor/ckeditor5-list": "^36.0.0",
+    "@ckeditor/ckeditor5-mention": "^36.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^36.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^36.0.0",
+    "@ckeditor/ckeditor5-table": "^36.0.0",
+    "@ckeditor/ckeditor5-typing": "^36.0.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -15,24 +15,19 @@
  * @param {module:ui/viewcollection~ViewCollection} options.gridItems A collection of grid items.
  * @param {Number|Function} options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
  * the number (e.g. for responsive grids).
+ * @param {String|undefined} options.uiLanguageDirection String of ui language direction.
  */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns }) {
+export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
     const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
     keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        if (focusedElementIndex === gridItems.length - 1) {
-            return 0;
-        }
-        else {
-            return focusedElementIndex + 1;
-        }
+        return uiLanguageDirection === 'rtl' ?
+            getLeftElementIndex(focusedElementIndex, gridItems.length) :
+            getRightElementIndex(focusedElementIndex, gridItems.length);
     }));
     keystrokeHandler.set('arrowleft', getGridItemFocuser((focusedElementIndex, gridItems) => {
-        if (focusedElementIndex === 0) {
-            return gridItems.length - 1;
-        }
-        else {
-            return focusedElementIndex - 1;
-        }
+        return uiLanguageDirection === 'rtl' ?
+            getRightElementIndex(focusedElementIndex, gridItems.length) :
+            getLeftElementIndex(focusedElementIndex, gridItems.length);
     }));
     keystrokeHandler.set('arrowup', getGridItemFocuser((focusedElementIndex, gridItems) => {
         let nextIndex = focusedElementIndex - getNumberOfColumns();
@@ -61,4 +56,44 @@ export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTrac
             evt.preventDefault();
         };
     }
+    // Function returning the next index.
+    //
+    // before: [ ][x][ ]	after: [ ][ ][x]
+    // index = 1            index = 2
+    //
+    // If current index is last, function returns first index.
+    //
+    // before: [ ][ ][x]	after: [x][ ][ ]
+    // index = 2            index = 0
+    //
+    // @param {number} [elementIndex] Number of current index.
+    // @param {number} [collectionLength] A count of collection items.
+    function getRightElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === collectionLength - 1) {
+            return 0;
+        }
+        else {
+            return elementIndex + 1;
+        }
+    }
+    // Function returning the previous index.
+    //
+    // before: [ ][x][ ]	after: [x][ ][ ]
+    // index = 1            index = 0
+    //
+    // If current index is first, function returns last index.
+    //
+    // before: [x][ ][ ]	after: [ ][ ][x]
+    // index = 0            index = 2
+    //
+    // @param {number} [elementIndex] Number of current index.
+    // @param {number} [collectionLength] A count of collection items.
+    function getLeftElementIndex(elementIndex, collectionLength) {
+        if (elementIndex === 0) {
+            return collectionLength - 1;
+        }
+        else {
+            return elementIndex - 1;
+        }
+    }
 }

package/src/bindings/clickoutsidehandler.js

@@ -1,10 +1,7 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/bindings/clickoutsidehandler
- */
 /* global document */
 /**
  * Handles clicking **outside** of a specified set of elements, then fires an action.
@@ -17,8 +14,8 @@
  * @param {module:utils/dom/emittermixin~Emitter} options.emitter The emitter to which this behavior
  * should be added.
  * @param {Function} options.activator Function returning a `Boolean`, to determine whether the handler is active.
- * @param {Array.<HTMLElement>} options.contextElements HTML elements that determine the scope of the
- * handler. Clicking any of them or their descendants will **not** fire the callback.
+ * @param {Array.<HTMLElement>} options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
  * @param {Function} options.callback An action executed by the handler.
  */
 export default function clickOutsideHandler({ emitter, activator, callback, contextElements }) {
@@ -29,7 +26,8 @@ export default function clickOutsideHandler({ emitter, activator, callback, cont
         // Check if `composedPath` is `undefined` in case the browser does not support native shadow DOM.
         // Can be removed when all supported browsers support native shadow DOM.
         const path = typeof domEvt.composedPath == 'function' ? domEvt.composedPath() : [];
-        for (const contextElement of contextElements) {
+        const contextElementsList = typeof contextElements == 'function' ? contextElements() : contextElements;
+        for (const contextElement of contextElementsList) {
             if (contextElement.contains(domEvt.target) || path.includes(contextElement)) {
                 return;
             }

package/src/bindings/injectcsstransitiondisabler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/bindings/preventdefault.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/bindings/submithandler.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/button/button.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 export {};

package/src/button/buttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -7,9 +7,7 @@
  */
 import View from '../view';
 import IconView from '../icon/iconview';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
-import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
-import env from '@ckeditor/ckeditor5-utils/src/env';
+import { env, getEnvKeystrokeText, uid } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**
  * The button view class.

package/src/button/switchbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/colorgrid/colorgridview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -7,9 +7,9 @@
  */
 import View from '../view';
 import ColorTileView from './colortileview';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/colorgrid/colorgrid.css';
 /**
  * A grid of {@link module:ui/colorgrid/colortile~ColorTileView color tiles}.
@@ -141,7 +141,8 @@ export default class ColorGridView extends View {
             keystrokeHandler: this.keystrokes,
             focusTracker: this.focusTracker,
             gridItems: this.items,
-            numberOfColumns: this.columns
+            numberOfColumns: this.columns,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
         });
     }
     /**

package/src/colorgrid/colortileview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/colorgrid/utils.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/componentfactory.js

@@ -1,17 +1,17 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/componentfactory
  */
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { CKEditorError } from '@ckeditor/ckeditor5-utils';
 /**
  * A helper class implementing the UI component ({@link module:ui/view~View view}) factory.
  *
  * It allows functions producing specific UI components to be registered under their unique names
  * in the factory. A registered component can be then instantiated by providing its name.
- * Note that names are case insensitive.
+ * Note that the names are case insensitive.
  *
  *		// The editor provides localization tools for the factory.
  *		const factory = new ComponentFactory( editor );

package/src/dropdown/button/dropdownbutton.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 export {};

package/src/dropdown/button/dropdownbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/dropdown/button/splitbuttonview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -7,8 +7,7 @@
  */
 import View from '../../view';
 import ButtonView from '../../button/buttonview';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import { KeystrokeHandler, FocusTracker } from '@ckeditor/ckeditor5-utils';
 import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
 import '../../../theme/components/dropdown/splitbutton.css';
 /**

package/src/dropdown/dropdownpanelfocusable.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 export {};

package/src/dropdown/dropdownpanelview.js

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/dropdown/dropdownpanelview
  */
 import View from '../view';
-import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils';
 /**
  * The dropdown panel view class.
  *

package/src/dropdown/dropdownview.js

@@ -1,14 +1,12 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/dropdown/dropdownview
  */
 import View from '../view';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import { FocusTracker } from '@ckeditor/ckeditor5-utils';
-import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
+import { KeystrokeHandler, FocusTracker, getOptimalPosition } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/dropdown.css';
 /**
  * The dropdown view class. It manages the dropdown button and dropdown panel.

package/src/dropdown/utils.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -15,6 +15,7 @@ import ListSeparatorView from '../list/listseparatorview';
 import ButtonView from '../button/buttonview';
 import SplitButtonView from './button/splitbuttonview';
 import SwitchButtonView from '../button/switchbuttonview';
+import ViewCollection from '../viewcollection';
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
@@ -98,30 +99,33 @@ export function createDropdown(locale, ButtonClass = DropdownButtonView) {
 /**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
  *
- *		const buttons = [];
+ *		const buttonsCreator = () => {
+ *			const buttons = [];
  *
- *		// Either create a new ButtonView instance or create existing.
- *		buttons.push( new ButtonView() );
- *		buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
+ *			// Either create a new ButtonView instance or create existing.
+ *			buttons.push( new ButtonView() );
+ *			buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
+ *		};
  *
  *		const dropdown = createDropdown( locale );
  *
- *		addToolbarToDropdown( dropdown, buttons );
- *
- *		dropdown.toolbarView.isVertical = true;
+ *		addToolbarToDropdown( dropdown, buttonsCreator, { isVertical: true } );
  *
  *		// Will render a vertical button dropdown labeled "A button dropdown"
  *		// with a button group in the panel containing two buttons.
+ *		// Buttons inside the dropdown will be created on first dropdown panel open.
  *		dropdown.render()
  *		document.body.appendChild( dropdown.element );
  *
  * **Note:** To improve the accessibility, you can tell the dropdown to focus the first active button of the toolbar when the dropdown
  * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}. See the documentation of `options` to learn more.
  *
+ * **Note:** Toolbar view will be created on first open of the dropdown.
+ *
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ToolbarView` will be added.
- * @param {Iterable.<module:ui/button/buttonview~ButtonView>} buttons
+ * @param {Iterable.<module:ui/button/buttonview~ButtonView>|Function} buttonsOrCallback
  * @param {Object} [options]
  * @param {Boolean} [options.enableActiveItemFocusOnDropdownOpen=false] When set `true`, the focus will automatically move to the first
  * active {@link module:ui/toolbar/toolbarview~ToolbarView#items item} of the toolbar upon
@@ -129,21 +133,56 @@ export function createDropdown(locale, ButtonClass = DropdownButtonView) {
  * `true` (for instance {@link module:ui/button/buttonview~ButtonView buttons}). If no active items is found, the toolbar will be focused
  * as a whole resulting in the focus moving to its first focusable item (default behavior of
  * {@link module:ui/dropdown/dropdownview~DropdownView}).
+ * @param {String} [options.ariaLabel] Label used by assistive technologies to describe toolbar element.
+ * @param {String} [options.maxWidth] The maximum width of the toolbar element.
+ * Details: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
+ * @param {String} [options.class] An additional CSS class added to the toolbar element.
+ * @param {Boolean} [options.isCompact] When set true, makes the toolbar look compact with toolbar element.
+ * @param {Boolean} [options.isVertical] Controls the orientation of toolbar items.
  */
-export function addToolbarToDropdown(dropdownView, buttons, options = {}) {
-    const locale = dropdownView.locale;
-    const t = locale.t;
-    const toolbarView = dropdownView.toolbarView = new ToolbarView(locale);
-    toolbarView.set('ariaLabel', t('Dropdown toolbar'));
+export function addToolbarToDropdown(dropdownView, buttonsOrCallback, options = {}) {
     dropdownView.extendTemplate({
         attributes: {
             class: ['ck-toolbar-dropdown']
         }
     });
-    buttons.map(view => toolbarView.items.add(view));
+    if (dropdownView.isOpen) {
+        addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options);
+    }
+    else {
+        dropdownView.once('change:isOpen', () => addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options), { priority: 'highest' });
+    }
     if (options.enableActiveItemFocusOnDropdownOpen) {
         // Accessibility: Focus the first active button in the toolbar when the dropdown gets open.
-        focusChildOnDropdownOpen(dropdownView, () => toolbarView.items.find((item) => item.isOn));
+        focusChildOnDropdownOpen(dropdownView, () => dropdownView.toolbarView.items.find((item) => item.isOn));
+    }
+}
+/**
+ * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
+ */
+function addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options) {
+    const locale = dropdownView.locale;
+    const t = locale.t;
+    const toolbarView = dropdownView.toolbarView = new ToolbarView(locale);
+    const buttons = typeof buttonsOrCallback == 'function' ? buttonsOrCallback() : buttonsOrCallback;
+    toolbarView.ariaLabel = options.ariaLabel || t('Dropdown toolbar');
+    if (options.maxWidth) {
+        toolbarView.maxWidth = options.maxWidth;
+    }
+    if (options.class) {
+        toolbarView.class = options.class;
+    }
+    if (options.isCompact) {
+        toolbarView.isCompact = options.isCompact;
+    }
+    if (options.isVertical) {
+        toolbarView.isVertical = true;
+    }
+    if (buttons instanceof ViewCollection) {
+        toolbarView.items.bindTo(buttons).using(item => item);
+    }
+    else {
+        toolbarView.items.addMany(buttons);
     }
     dropdownView.panelView.children.add(toolbarView);
     toolbarView.items.delegate('execute').to(dropdownView);
@@ -187,15 +226,39 @@ export function addToolbarToDropdown(dropdownView, buttons, options = {}) {
  * to focus the first active item (a host to a {@link module:ui/button/buttonview~ButtonView} with
  * {@link module:ui/button/buttonview~ButtonView#isOn} set `true`) or the very first item when none are active.
  *
+ * **Note:** List view will be created on first open of the dropdown.
+ *
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
  *
  * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which `ListVIew` will be added.
- * @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} items
- * A collection of the list item definitions to populate the list.
+ * @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>|Function} itemsOrCallback A collection of the list item
+ * definitions or a callback returning a list item definitions to populate the list.
+ * @param {Object} [options]
+ * @param {String} [options.ariaLabel] Label used by assistive technologies to describe list element.
  */
-export function addListToDropdown(dropdownView, items) {
+export function addListToDropdown(dropdownView, itemsOrCallback, options = {}) {
+    if (dropdownView.isOpen) {
+        addListToOpenDropdown(dropdownView, itemsOrCallback, options);
+    }
+    else {
+        dropdownView.once('change:isOpen', () => addListToOpenDropdown(dropdownView, itemsOrCallback, options), { priority: 'highest' });
+    }
+    // Accessibility: Focus the first active button in the list when the dropdown gets open.
+    focusChildOnDropdownOpen(dropdownView, () => dropdownView.listView.items.find(item => {
+        if (item instanceof ListItemView) {
+            return item.children.first.isOn;
+        }
+        return false;
+    }));
+}
+/**
+ * Adds an instance of {@link module:ui/list/listview~ListView} to a dropdown.
+ */
+function addListToOpenDropdown(dropdownView, itemsOrCallback, options) {
     const locale = dropdownView.locale;
     const listView = dropdownView.listView = new ListView(locale);
+    const items = typeof itemsOrCallback == 'function' ? itemsOrCallback() : itemsOrCallback;
+    listView.ariaLabel = options.ariaLabel;
     listView.items.bindTo(items).using(def => {
         if (def.type === 'separator') {
             return new ListSeparatorView(locale);
@@ -219,13 +282,6 @@ export function addListToDropdown(dropdownView, items) {
     });
     dropdownView.panelView.children.add(listView);
     listView.items.delegate('execute').to(dropdownView);
-    // Accessibility: Focus the first active button in the list when the dropdown gets open.
-    focusChildOnDropdownOpen(dropdownView, () => listView.items.find(item => {
-        if (item instanceof ListItemView) {
-            return item.children.first.isOn;
-        }
-        return false;
-    }));
 }
 /**
  * A helper to be used on an existing {@link module:ui/dropdown/dropdownview~DropdownView} that focuses
@@ -344,10 +400,11 @@ function focusDropdownButtonOnClose(dropdownView) {
         if (isOpen) {
             return;
         }
+        const element = dropdownView.panelView.element;
         // If the dropdown was closed, move the focus back to the button (#12125).
         // Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
         // Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
-        if (dropdownView.panelView.element.contains(global.document.activeElement)) {
+        if (element && element.contains(global.document.activeElement)) {
             dropdownView.buttonView.focus();
         }
     });

package/src/editableui/editableuiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/editableui/inline/inlineeditableuiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/editorui/bodycollection.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -8,7 +8,7 @@
 /* globals document */
 import Template from '../template';
 import ViewCollection from '../viewcollection';
-import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
+import { createElement } from '@ckeditor/ckeditor5-utils';
 /**
  * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
  * from the DOM structure of the editor, like panels, icons, etc.

package/src/editorui/boxed/boxededitoruiview.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**