@ckeditor/ckeditor5-ui 35.4.0 → 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.4.0",
+  "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.4.0",
-    "@ckeditor/ckeditor5-core": "^35.4.0",
+    "@ckeditor/ckeditor5-utils": "^36.0.0",
+    "@ckeditor/ckeditor5-core": "^36.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.4.0",
-    "@ckeditor/ckeditor5-block-quote": "^35.4.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.4.0",
-    "@ckeditor/ckeditor5-editor-classic": "^35.4.0",
-    "@ckeditor/ckeditor5-engine": "^35.4.0",
-    "@ckeditor/ckeditor5-enter": "^35.4.0",
-    "@ckeditor/ckeditor5-essentials": "^35.4.0",
-    "@ckeditor/ckeditor5-font": "^35.4.0",
-    "@ckeditor/ckeditor5-find-and-replace": "^35.4.0",
-    "@ckeditor/ckeditor5-heading": "^35.4.0",
-    "@ckeditor/ckeditor5-image": "^35.4.0",
-    "@ckeditor/ckeditor5-link": "^35.4.0",
-    "@ckeditor/ckeditor5-list": "^35.4.0",
-    "@ckeditor/ckeditor5-mention": "^35.4.0",
-    "@ckeditor/ckeditor5-paragraph": "^35.4.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.4.0",
-    "@ckeditor/ckeditor5-table": "^35.4.0",
-    "@ckeditor/ckeditor5-typing": "^35.4.0",
+    "@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
  */
 /**

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
  */
 /**

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
  */
 /**

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,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/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
  */
 /**

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,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/dropdownview.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/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
  */
 /**

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
  */
 /**