@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 14.0.0 to 15.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [15.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v14.0.0...v15.0.0) (2019-10-23)
+
+### MAJOR BREAKING CHANGES
+
+* The internal structure of the toolbar component has changed. Toolbar items are no longer direct descendants of the toolbar in the DOM, which may affect some integrations (mainly CSS selectors if adjustments were made to the styles).
+
+### Features
+
+* The editor toolbar is now responsive. Closes [ckeditor/ckeditor5#416](https://github.com/ckeditor/ckeditor5/issues/416). ([46911bf](https://github.com/ckeditor/ckeditor5-ui/commit/46911bf))
+
+### Other changes
+
+* Updated translations. ([c233bb7](https://github.com/ckeditor/ckeditor5-ui/commit/c233bb7)) ([f8f07b2](https://github.com/ckeditor/ckeditor5-ui/commit/f8f07b2))
+
+
 ## [14.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.2...v14.0.0) (2019-08-26)
@@ -5,0 +20,0 @@

lang/contexts.json

@@ -9,3 +9,4 @@ {
 	"Editor toolbar": "Label used by assistive technologies describing a generic editor toolbar.",
-	"Dropdown toolbar": "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
+	"Dropdown toolbar": "Label used by assistive technologies describing a toolbar displayed inside a dropdown.",
+	"Show more items": "Label of a toolbar button which reveals more toolbar items."
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -12,21 +12,21 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.3.0",
-    "@ckeditor/ckeditor5-utils": "^14.0.0",
+    "@ckeditor/ckeditor5-core": "^15.0.0",
+    "@ckeditor/ckeditor5-utils": "^15.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
-    "@ckeditor/ckeditor5-block-quote": "^11.1.3",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.2.2",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
-    "@ckeditor/ckeditor5-engine": "^14.0.0",
-    "@ckeditor/ckeditor5-enter": "^11.1.0",
-    "@ckeditor/ckeditor5-essentials": "^11.0.5",
-    "@ckeditor/ckeditor5-heading": "^11.0.5",
-    "@ckeditor/ckeditor5-image": "^14.0.0",
-    "@ckeditor/ckeditor5-link": "^11.1.2",
-    "@ckeditor/ckeditor5-list": "^12.1.0",
-    "@ckeditor/ckeditor5-mention": "^13.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
-    "@ckeditor/ckeditor5-typing": "^12.2.0",
+    "@ckeditor/ckeditor5-basic-styles": "^15.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^15.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^15.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^15.0.0",
+    "@ckeditor/ckeditor5-engine": "^15.0.0",
+    "@ckeditor/ckeditor5-enter": "^15.0.0",
+    "@ckeditor/ckeditor5-essentials": "^15.0.0",
+    "@ckeditor/ckeditor5-heading": "^15.0.0",
+    "@ckeditor/ckeditor5-image": "^15.0.0",
+    "@ckeditor/ckeditor5-link": "^15.0.0",
+    "@ckeditor/ckeditor5-list": "^15.0.0",
+    "@ckeditor/ckeditor5-mention": "^15.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^15.0.0",
+    "@ckeditor/ckeditor5-typing": "^15.0.0",
     "eslint": "^5.5.0",
@@ -33,0 +33,0 @@ "eslint-config-ckeditor5": "^2.0.0",

README.md

 CKEditor 5 UI framework
 ===========================================
 
-[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-ui.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-ui)
@@ -6,0 +5,0 @@ [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-ui.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-ui)

src/colorgrid/colorgridview.js

@@ -45,2 +45,3 @@ /**
 		 *
+		 * @observable
 		 * @type {String}
@@ -47,0 +48,0 @@ */

src/toolbar/toolbarview.js

@@ -17,6 +17,11 @@ /**
 import ToolbarSeparatorView from './toolbarseparatorview';
+import getResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/getresizeobserver';
 import preventDefault from '../bindings/preventdefault.js';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
+import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import verticalDotsIcon from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
 
 import '../../theme/components/toolbar/toolbar.css';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
@@ -36,4 +41,5 @@ /**
 	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {module:ui/toolbar/toolbarview~ToolbarOptions} [options] Configuration options of the toolbar.
 	 */
-	constructor( locale ) {
+	constructor( locale, options ) {
 		super( locale );
@@ -45,2 +51,10 @@
 		/**
+		 * A reference to the options object passed to the constructor.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ToolbarOptions}
+		 */
+		this.options = options || {};
+
+		/**
 		 * Label used by assistive technologies to describe this toolbar element.
@@ -54,3 +68,3 @@ *
 		/**
-		 * Collection of the toolbar items (like buttons).
+		 * A collection of toolbar items (buttons, dropdowns, etc.).
 		 *
@@ -63,3 +77,3 @@ * @readonly
 		/**
-		 * Tracks information about DOM focus in the list.
+		 * Tracks information about the DOM focus in the toolbar.
 		 *
@@ -72,3 +86,4 @@ * @readonly
 		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}
+		 * to handle keyboard navigation in the toolbar.
 		 *
@@ -81,19 +96,59 @@ * @readonly
 		/**
-		 * Controls the orientation of toolbar items.
+		 * An additional CSS class added to the {@link #element}.
 		 *
 		 * @observable
-		 * @member {Boolean} #isVertical
+		 * @member {String} #class
 		 */
-		this.set( 'isVertical', false );
+		this.set( 'class' );
 
 		/**
-		 * An additional CSS class added to the {@link #element}.
+		 * A (child) view containing {@link #items toolbar items}.
 		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ItemsView}
+		 */
+		this.itemsView = new ItemsView( locale );
+
+		/**
+		 * A top–level collection aggregating building blocks of the toolbar.
+		 *
+		 *	┌───────────────── ToolbarView ─────────────────┐
+		 *	| ┌──────────────── #children ────────────────┐ |
+		 *	| |   ┌──────────── #itemsView ───────────┐   | |
+		 *	| |   | [ item1 ] [ item2 ] ... [ itemN ] |   | |
+		 *	| |   └──────────────────────────────────-┘   | |
+		 *	| └───────────────────────────────────────────┘ |
+		 *	└───────────────────────────────────────────────┘
+		 *
+		 * By default, it contains the {@link #itemsView} but it can be extended with additional
+		 * UI elements when necessary.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+		this.children.add( this.itemsView );
+
+		/**
+		 * A collection of {@link #items} that take part in the focus cycling
+		 * (i.e. navigation using the keyboard). Usually, it contains a subset of {@link #items} with
+		 * some optional UI elements that also belong to the toolbar and should be focusable
+		 * by the user.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.focusables = this.createCollection();
+
+		/**
+		 * Controls the orientation of toolbar items. Only available when
+		 * {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull dynamic items grouping}
+		 * is **disabled**.
+		 *
 		 * @observable
-		 * @member {String} #class
+		 * @member {Boolean} #isVertical
 		 */
-		this.set( 'class' );
 
 		/**
-		 * Helps cycling over focusable {@link #items} in the toolbar.
+		 * Helps cycling over {@link #focusables focusable items} in the toolbar.
 		 *
@@ -105,3 +160,3 @@ * @readonly
 		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
+			focusables: this.focusables,
 			focusTracker: this.focusTracker,
@@ -124,3 +179,2 @@ keystrokeHandler: this.keystrokes,
 					'ck-toolbar',
-					bind.if( 'isVertical', 'ck-toolbar_vertical' ),
 					bind.to( 'class' )
@@ -132,3 +186,3 @@ ],
 
-			children: this.items,
+			children: this.children,
 
@@ -140,2 +194,13 @@ on: {
 		} );
+
+		/**
+		 * An instance of the active toolbar behavior that shapes its look and functionality.
+		 *
+		 * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ToolbarBehavior}
+		 */
+		this._behavior = this.options.shouldGroupWhenFull ? new DynamicGrouping( this ) : new StaticLayout( this );
 	}
@@ -149,3 +214,3 @@
 
-		// Items added before rendering should be known to the #focusTracker.
+		// Children added before rendering should be known to the #focusTracker.
 		for ( const item of this.items ) {
@@ -165,7 +230,18 @@ this.focusTracker.add( item.element );
 		this.keystrokes.listenTo( this.element );
+
+		this._behavior.render( this );
 	}
 
 	/**
-	 * Focuses the first focusable in {@link #items}.
+	 * @inheritDoc
 	 */
+	destroy() {
+		this._behavior.destroy();
+
+		return super.destroy();
+	}
+
+	/**
+	 * Focuses the first focusable in {@link #focusables}.
+	 */
 	focus() {
@@ -176,3 +252,3 @@ this._focusCycler.focusFirst();
 	/**
-	 * Focuses the last focusable in {@link #items}.
+	 * Focuses the last focusable in {@link #focusables}.
 	 */
@@ -184,6 +260,6 @@ focusLast() {
 	/**
-	 * A utility which expands a plain toolbar configuration into
+	 * A utility that expands the plain toolbar configuration into
 	 * {@link module:ui/toolbar/toolbarview~ToolbarView#items} using a given component factory.
 	 *
-	 * @param {Array.<String>} config The toolbar items config.
+	 * @param {Array.<String>} config The toolbar items configuration.
 	 * @param {module:ui/componentfactory~ComponentFactory} factory A factory producing toolbar items.
@@ -222,1 +298,555 @@ */
 
+/**
+ * An inner block of the {@link module:ui/toolbar/toolbarview~ToolbarView} hosting its
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
+ *
+ * @private
+ * @extends module:ui/view~View
+ */
+class ItemsView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * A collection of items (buttons, dropdowns, etc.).
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.children = this.createCollection();
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-toolbar__items'
+				],
+			},
+			children: this.children
+		} );
+	}
+}
+
+/**
+ * A toolbar behavior that makes it static and unresponsive to the changes of the environment.
+ * At the same time, it also makes it possible to display a toolbar with a vertical layout
+ * using the {@link module:ui/toolbar/toolbarview~ToolbarView#isVertical} property.
+ *
+ * @private
+ * @implements module:ui/toolbar/toolbarview~ToolbarBehavior
+ */
+class StaticLayout {
+	/**
+	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~StaticLayout} toolbar
+	 * behavior.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar that this behavior
+	 * is added to.
+	 */
+	constructor( view ) {
+		const bind = view.bindTemplate;
+
+		// Static toolbar can be vertical when needed.
+		view.set( 'isVertical', false );
+
+		// 1:1 pass–through binding, all ToolbarView#items are visible.
+		view.itemsView.children.bindTo( view.items ).using( item => item );
+
+		// 1:1 pass–through binding, all ToolbarView#items are focusable.
+		view.focusables.bindTo( view.items ).using( item => item );
+
+		view.extendTemplate( {
+			attributes: {
+				class: [
+					// When vertical, the toolbar has an additional CSS class.
+					bind.if( 'isVertical', 'ck-toolbar_vertical' )
+				]
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {}
+}
+
+/**
+ * A toolbar behavior that makes the items respond to changes in the geometry.
+ *
+ * In a nutshell, it groups {@link module:ui/toolbar/toolbarview~ToolbarView#items}
+ * that do not fit visually into a single row of the toolbar (due to limited space).
+ * Items that do not fit are aggregated in a dropdown displayed at the end of the toolbar.
+ *
+ *	┌──────────────────────────────────────── ToolbarView ──────────────────────────────────────────┐
+ *	| ┌─────────────────────────────────────── #children ─────────────────────────────────────────┐ |
+ *	| |   ┌─────── #itemsView ────────┐ ┌──────────────────────┐ ┌── #groupedItemsDropdown ───┐   | |
+ *	| |   |       #ungroupedItems     | | ToolbarSeparatorView | |        #groupedItems       |   | |
+ *	| |   └──────────────────────────-┘ └──────────────────────┘ └────────────────────────────┘   | |
+ *	| |                                  \---------- only when toolbar items overflow --------/    | |
+ *	| └───────────────────────────────────────────────────────────────────────────────────────────┘ |
+ *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
+ *
+ * @private
+ * @implements module:ui/toolbar/toolbarview~ToolbarBehavior
+ */
+class DynamicGrouping {
+	/**
+	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~DynamicGrouping} toolbar
+	 * behavior.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar that this behavior
+	 * is added to.
+	 */
+	constructor( view ) {
+		/**
+		 * A collection of toolbar children.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.viewChildren = view.children;
+
+		/**
+		 * A collection of focusable toolbar elements.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.viewFocusables = view.focusables;
+
+		/**
+		 * A view containing toolbar items.
+		 *
+		 * @readonly
+		 * @member {module:ui/toolbar/toolbarview~ItemsView}
+		 */
+		this.viewItemsView = view.itemsView;
+
+		/**
+		 * Toolbar focus tracker.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.viewFocusTracker = view.focusTracker;
+
+		/**
+		 * Toolbar locale.
+		 *
+		 * @readonly
+		 * @member {module:utils/locale~Locale}
+		 */
+		this.viewLocale = view.locale;
+
+		/**
+		 * Toolbar element.
+		 *
+		 * @readonly
+		 * @member {HTMLElement} #viewElement
+		 */
+
+		/**
+		 * A subset of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
+		 * Aggregates items that fit into a single row of the toolbar and were not {@link #groupedItems grouped}
+		 * into a {@link #groupedItemsDropdown dropdown}. Items of this collection are displayed in the
+		 * {@link module:ui/toolbar/toolbarview~ToolbarView#itemsView}.
+		 *
+		 * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped, it
+		 * matches the {@link module:ui/toolbar/toolbarview~ToolbarView#items} collection in size and order.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.ungroupedItems = view.createCollection();
+
+		/**
+		 * A subset of toolbar {@link module:ui/toolbar/toolbarview~ToolbarView#items}.
+		 * A collection of the toolbar items that do not fit into a single row of the toolbar.
+		 * Grouped items are displayed in a dedicated {@link #groupedItemsDropdown dropdown}.
+		 *
+		 * When none of the {@link module:ui/toolbar/toolbarview~ToolbarView#items} were grouped,
+		 * this collection is empty.
+		 *
+		 * @readonly
+		 * @member {module:ui/viewcollection~ViewCollection}
+		 */
+		this.groupedItems = view.createCollection();
+
+		/**
+		 * The dropdown that aggregates {@link #groupedItems grouped items} that do not fit into a single
+		 * row of the toolbar. It is displayed on demand as the last of
+		 * {@link module:ui/toolbar/toolbarview~ToolbarView#children toolbar children} and offers another
+		 * (nested) toolbar which displays items that would normally overflow.
+		 *
+		 * @readonly
+		 * @member {module:ui/dropdown/dropdownview~DropdownView}
+		 */
+		this.groupedItemsDropdown = this._createGroupedItemsDropdown();
+
+		/**
+		 * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
+		 * and manage items that do not fit into a single row.
+		 *
+		 * **Note:** Created in {@link #_enableGroupingOnResize}.
+		 *
+		 * @readonly
+		 * @member {module:utils/dom/getresizeobserver~ResizeObserver}
+		 */
+		this.resizeObserver = null;
+
+		/**
+		 * A cached value of the horizontal padding style used by {@link #_updateGrouping}
+		 * to manage the {@link module:ui/toolbar/toolbarview~ToolbarView#items} that do not fit into
+		 * a single toolbar line. This value can be reused between updates because it is unlikely that
+		 * the padding will change and re–using `Window.getComputedStyle()` is expensive.
+		 *
+		 * @readonly
+		 * @member {Number}
+		 */
+		this.cachedPadding = null;
+
+		// Only those items that were not grouped are visible to the user.
+		view.itemsView.children.bindTo( this.ungroupedItems ).using( item => item );
+
+		// Make sure all #items visible in the main space of the toolbar are "focuscycleable".
+		this.ungroupedItems.on( 'add', this._updateFocusCycleableItems.bind( this ) );
+		this.ungroupedItems.on( 'remove', this._updateFocusCycleableItems.bind( this ) );
+
+		// Make sure the #groupedItemsDropdown is also included in cycling when it appears.
+		view.children.on( 'add', this._updateFocusCycleableItems.bind( this ) );
+		view.children.on( 'remove', this._updateFocusCycleableItems.bind( this ) );
+
+		// ToolbarView#items is dynamic. When an item is added, it should be automatically
+		// represented in either grouped or ungrouped items at the right index.
+		// In other words #items == concat( #ungroupedItems, #groupedItems )
+		// (in length and order).
+		view.items.on( 'add', ( evt, item, index ) => {
+			if ( index > this.ungroupedItems.length ) {
+				this.groupedItems.add( item, index - this.ungroupedItems.length );
+			} else {
+				this.ungroupedItems.add( item, index );
+			}
+
+			// When a new ungrouped item joins in and lands in #ungroupedItems, there's a chance it causes
+			// the toolbar to overflow.
+			this._updateGrouping();
+		} );
+
+		// When an item is removed from ToolbarView#items, it should be automatically
+		// removed from either grouped or ungrouped items.
+		view.items.on( 'remove', ( evt, item, index ) => {
+			if ( index > this.ungroupedItems.length ) {
+				this.groupedItems.remove( item );
+			} else {
+				this.ungroupedItems.remove( item );
+			}
+
+			// Whether removed from grouped or ungrouped items, there is a chance
+			// some new space is available and we could do some ungrouping.
+			this._updateGrouping();
+		} );
+
+		view.extendTemplate( {
+			attributes: {
+				class: [
+					// To group items dynamically, the toolbar needs a dedicated CSS class.
+					'ck-toolbar_grouping'
+				]
+			}
+		} );
+	}
+
+	/**
+	 * Enables dynamic items grouping based on the dimensions of the toolbar.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar that this behavior
+	 * is added to.
+	 */
+	render( view ) {
+		this.viewElement = view.element;
+
+		this._enableGroupingOnResize();
+	}
+
+	/**
+	 * Cleans up the internals used by this behavior.
+	 */
+	destroy() {
+		// The dropdown may not be in ToolbarView#children at the moment of toolbar destruction
+		// so let's make sure it's actually destroyed along with the toolbar.
+		this.groupedItemsDropdown.destroy();
+
+		this.resizeObserver.disconnect();
+	}
+
+	/**
+	 * When called, it will check if any of the {@link #ungroupedItems} do not fit into a single row of the toolbar,
+	 * and it will move them to the {@link #groupedItems} when it happens.
+	 *
+	 * At the same time, it will also check if there is enough space in the toolbar for the first of the
+	 * {@link #groupedItems} to be returned back to {@link #ungroupedItems} and still fit into a single row
+	 * without the toolbar wrapping.
+	 *
+	 * @protected
+	 */
+	_updateGrouping() {
+		// Do no grouping–related geometry analysis when the toolbar is detached from visible DOM,
+		// for instance before #render(), or after render but without a parent or a parent detached
+		// from DOM. DOMRects won't work anyway and there will be tons of warning in the console and
+		// nothing else.
+		if ( !this.viewElement.ownerDocument.body.contains( this.viewElement ) ) {
+			return;
+		}
+
+		let wereItemsGrouped;
+
+		// Group #items as long as some wrap to the next row. This will happen, for instance,
+		// when the toolbar is getting narrow and there is not enough space to display all items in
+		// a single row.
+		while ( this._areItemsOverflowing ) {
+			this._groupLastItem();
+
+			wereItemsGrouped = true;
+		}
+
+		// If none were grouped now but there were some items already grouped before,
+		// then, what the hell, maybe let's see if some of them can be ungrouped. This happens when,
+		// for instance, the toolbar is stretching and there's more space in it than before.
+		if ( !wereItemsGrouped && this.groupedItems.length ) {
+			// Ungroup items as long as none are overflowing or there are none to ungroup left.
+			while ( this.groupedItems.length && !this._areItemsOverflowing ) {
+				this._ungroupFirstItem();
+			}
+
+			// If the ungrouping ended up with some item wrapping to the next row,
+			// put it back to the group toolbar ("undo the last ungroup"). We don't know whether
+			// an item will wrap or not until we ungroup it (that's a DOM/CSS thing) so this
+			// clean–up is vital for the algorithm.
+			if ( this._areItemsOverflowing ) {
+				this._groupLastItem();
+			}
+		}
+	}
+
+	/**
+	 * Returns `true` when {@link module:ui/toolbar/toolbarview~ToolbarView#element} children visually overflow,
+	 * for instance if the toolbar is narrower than its members. Returns `false` otherwise.
+	 *
+	 * @private
+	 * @type {Boolean}
+	 */
+	get _areItemsOverflowing() {
+		// An empty toolbar cannot overflow.
+		if ( !this.ungroupedItems.length ) {
+			return false;
+		}
+
+		const element = this.viewElement;
+		const uiLanguageDirection = this.viewLocale.uiLanguageDirection;
+		const lastChildRect = new Rect( element.lastChild );
+		const toolbarRect = new Rect( element );
+
+		if ( !this.cachedPadding ) {
+			const computedStyle = global.window.getComputedStyle( element );
+			const paddingProperty = uiLanguageDirection === 'ltr' ? 'paddingRight' : 'paddingLeft';
+
+			// parseInt() is essential because of quirky floating point numbers logic and DOM.
+			// If the padding turned out too big because of that, the grouped items dropdown would
+			// always look (from the Rect perspective) like it overflows (while it's not).
+			this.cachedPadding = Number.parseInt( computedStyle[ paddingProperty ] );
+		}
+
+		if ( uiLanguageDirection === 'ltr' ) {
+			return lastChildRect.right > toolbarRect.right - this.cachedPadding;
+		} else {
+			return lastChildRect.left < toolbarRect.left + this.cachedPadding;
+		}
+	}
+
+	/**
+	 * Enables the functionality that prevents {@link #ungroupedItems} from overflowing (wrapping to the next row)
+	 * upon resize when there is little space available. Instead, the toolbar items are moved to the
+	 * {@link #groupedItems} collection and displayed in a dropdown at the end of the row (which has its own nested toolbar).
+	 *
+	 * When called, the toolbar will automatically analyze the location of its {@link #ungroupedItems} and "group"
+	 * them in the dropdown if necessary. It will also observe the browser window for size changes in
+	 * the future and respond to them by grouping more items or reverting already grouped back, depending
+	 * on the visual space available.
+	 *
+	 * @private
+	 */
+	_enableGroupingOnResize() {
+		let previousWidth;
+
+		// TODO: Consider debounce.
+		this.resizeObserver = getResizeObserver( ( [ entry ] ) => {
+			if ( !previousWidth || previousWidth !== entry.contentRect.width ) {
+				this._updateGrouping();
+
+				previousWidth = entry.contentRect.width;
+			}
+		} );
+
+		this.resizeObserver.observe( this.viewElement );
+
+		this._updateGrouping();
+	}
+
+	/**
+	 * When called, it will remove the last item from {@link #ungroupedItems} and move it back
+	 * to the {@link #groupedItems} collection.
+	 *
+	 * The opposite of {@link #_ungroupFirstItem}.
+	 *
+	 * @private
+	 */
+	_groupLastItem() {
+		if ( !this.groupedItems.length ) {
+			this.viewChildren.add( new ToolbarSeparatorView() );
+			this.viewChildren.add( this.groupedItemsDropdown );
+			this.viewFocusTracker.add( this.groupedItemsDropdown.element );
+		}
+
+		this.groupedItems.add( this.ungroupedItems.remove( this.ungroupedItems.last ), 0 );
+	}
+
+	/**
+	 * Moves the very first item belonging to {@link #groupedItems} back
+	 * to the {@link #ungroupedItems} collection.
+	 *
+	 * The opposite of {@link #_groupLastItem}.
+	 *
+	 * @private
+	 */
+	_ungroupFirstItem() {
+		this.ungroupedItems.add( this.groupedItems.remove( this.groupedItems.first ) );
+
+		if ( !this.groupedItems.length ) {
+			this.viewChildren.remove( this.groupedItemsDropdown );
+			this.viewChildren.remove( this.viewChildren.last );
+			this.viewFocusTracker.remove( this.groupedItemsDropdown.element );
+		}
+	}
+
+	/**
+	 * Creates the {@link #groupedItemsDropdown} that hosts the members of the {@link #groupedItems}
+	 * collection when there is not enough space in the toolbar to display all items in a single row.
+	 *
+	 * @private
+	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
+	 */
+	_createGroupedItemsDropdown() {
+		const locale = this.viewLocale;
+		const t = locale.t;
+		const dropdown = createDropdown( locale );
+
+		dropdown.class = 'ck-toolbar__grouped-dropdown';
+
+		// Make sure the dropdown never sticks out to the left/right. It should be under the main toolbar.
+		// (https://github.com/ckeditor/ckeditor5/issues/5608)
+		dropdown.panelPosition = locale.uiLanguageDirection === 'ltr' ? 'sw' : 'se';
+
+		addToolbarToDropdown( dropdown, [] );
+
+		dropdown.buttonView.set( {
+			label: t( 'Show more items' ),
+			tooltip: true,
+			icon: verticalDotsIcon
+		} );
+
+		// 1:1 pass–through binding.
+		dropdown.toolbarView.items.bindTo( this.groupedItems ).using( item => item );
+
+		return dropdown;
+	}
+
+	/**
+	 * Updates the {@link module:ui/toolbar/toolbarview~ToolbarView#focusables focus–cycleable items}
+	 * collection so it represents the up–to–date state of the UI from the perspective of the user.
+	 *
+	 * For instance, the {@link #groupedItemsDropdown} can show up and hide but when it is visible,
+	 * it must be subject to focus cycling in the toolbar.
+	 *
+	 * See the {@link module:ui/toolbar/toolbarview~ToolbarView#focusables collection} documentation
+	 * to learn more about the purpose of this method.
+	 *
+	 * @private
+	 */
+	_updateFocusCycleableItems() {
+		this.viewFocusables.clear();
+
+		this.ungroupedItems.map( item => {
+			this.viewFocusables.add( item );
+		} );
+
+		if ( this.groupedItems.length ) {
+			this.viewFocusables.add( this.groupedItemsDropdown );
+		}
+	}
+}
+
+/**
+ * Options passed to the {@link module:ui/toolbar/toolbarview~ToolbarView#constructor} of the toolbar.
+ *
+ * @interface module:ui/toolbar/toolbarview~ToolbarOptions
+ */
+
+/**
+ * When set to `true`, the toolbar will automatically group {@link module:ui/toolbar/toolbarview~ToolbarView#items} that
+ * would normally wrap to the next line when there is not enough space to display them in a single row, for
+ * instance, if the parent container of the toolbar is narrow.
+ *
+ * @member {Boolean} module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull
+ */
+
+/**
+ * A class interface defining the behavior of the {@link module:ui/toolbar/toolbarview~ToolbarView}.
+ *
+ * Toolbar behaviors extend its look and functionality and have an impact on the
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#element} template or
+ * {@link module:ui/toolbar/toolbarview~ToolbarView#render rendering}. They can be enabled
+ * conditionally, e.g. depending on the configuration of the toolbar.
+ *
+ * @private
+ * @interface module:ui/toolbar/toolbarview~ToolbarBehavior
+ */
+
+/**
+ * Creates a new toolbar behavior instance.
+ *
+ * The instance is created in the {@link module:ui/toolbar/toolbarview~ToolbarView#constructor} of the toolbar.
+ * This is the right place to extend the {@link module:ui/toolbar/toolbarview~ToolbarView#template} of
+ * the toolbar, define extra toolbar properties, etc.
+ *
+ * @method #constructor
+ * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar that this behavior is added to.
+ */
+
+/**
+ * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#render rendered}.
+ * It can be used to, for example, customize the behavior of the toolbar when its {@link module:ui/toolbar/toolbarview~ToolbarView#element}
+ * is available.
+ *
+ * @readonly
+ * @member {Function} #render
+ * @param {module:ui/toolbar/toolbarview~ToolbarView} view An instance of the toolbar being rendered.
+ */
+
+/**
+ * A method called after the toolbar has been {@link module:ui/toolbar/toolbarview~ToolbarView#destroy destroyed}.
+ * It allows cleaning up after the toolbar behavior, for instance, this is the right place to detach
+ * event listeners, free up references, etc.
+ *
+ * @readonly
+ * @member {Function} #destroy
+ */

No alert changes

Improved metrics

Total package byte prevSize

436350

increased by11.58%

Number of package files

131

increased by0.77%

Lines of code

9451

increased by6.53%

Worsened metrics

Number of lines in readme file

20

decreased by-4.76%

Published versions last week

7

decreased by-12.5%

Dependency changes

• + Added@ckeditor/ckeditor5-core@15.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@15.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@15.0.0(transitive)

• + Addedckeditor5@15.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@12.3.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@14.0.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@14.0.0(transitive)

• - Removedckeditor5@12.4.0(transitive)

• Updated@ckeditor/ckeditor5-core@^15.0.0

• Updated@ckeditor/ckeditor5-utils@^15.0.0