@ckeditor/ckeditor5-ui 35.3.1 → 35.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "35.3.1",
+  "version": "35.4.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.1",
-    "@ckeditor/ckeditor5-core": "^35.3.1",
+    "@ckeditor/ckeditor5-utils": "^35.4.0",
+    "@ckeditor/ckeditor5-core": "^35.4.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.3.1",
-    "@ckeditor/ckeditor5-block-quote": "^35.3.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.3.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.3.1",
-    "@ckeditor/ckeditor5-engine": "^35.3.1",
-    "@ckeditor/ckeditor5-enter": "^35.3.1",
-    "@ckeditor/ckeditor5-essentials": "^35.3.1",
-    "@ckeditor/ckeditor5-font": "^35.3.1",
-    "@ckeditor/ckeditor5-find-and-replace": "^35.3.1",
-    "@ckeditor/ckeditor5-heading": "^35.3.1",
-    "@ckeditor/ckeditor5-image": "^35.3.1",
-    "@ckeditor/ckeditor5-link": "^35.3.1",
-    "@ckeditor/ckeditor5-list": "^35.3.1",
-    "@ckeditor/ckeditor5-mention": "^35.3.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.3.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.3.1",
-    "@ckeditor/ckeditor5-table": "^35.3.1",
-    "@ckeditor/ckeditor5-typing": "^35.3.1",
+    "@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",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -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/button/buttonview.js

@@ -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/colorgrid/colorgridview.js

@@ -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/componentfactory.js

@@ -5,13 +5,13 @@
 /**
  * @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/splitbuttonview.js

@@ -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/dropdownpanelview.js

@@ -6,7 +6,7 @@
  * @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

@@ -6,9 +6,7 @@
  * @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/editorui/bodycollection.js

@@ -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/focuscycler.js

@@ -5,7 +5,7 @@
 /**
  * @module ui/focuscycler
  */
-import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
+import { isVisible } from '@ckeditor/ckeditor5-utils';
 /**
  * A utility class that helps cycling over focusable {@link module:ui/view~View views} in a
  * {@link module:ui/viewcollection~ViewCollection} when the focus is tracked by the

package/src/formheader/formheaderview.js

@@ -68,7 +68,7 @@ export default class FormHeaderView extends View {
         });
         const label = new View(locale);
         label.setTemplate({
-            tag: 'span',
+            tag: 'h2',
             attributes: {
                 class: [
                     'ck',

package/src/index.js

@@ -15,6 +15,7 @@ export { default as SwitchButtonView } from './button/switchbuttonview';
 export * from './colorgrid/utils';
 export { default as ColorGridView } from './colorgrid/colorgridview';
 export { default as ColorTileView } from './colorgrid/colortileview';
+export { default as ComponentFactory } from './componentfactory';
 export { default as DropdownButtonView } from './dropdown/button/dropdownbuttonview';
 export { default as SplitButtonView } from './dropdown/button/splitbuttonview';
 export * from './dropdown/utils';

package/src/input/inputview.js

@@ -6,7 +6,7 @@
  * @module ui/input/inputview
  */
 import View from '../view';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/input/input.css';
 /**
  * The base input view class.

package/src/label/labelview.js

@@ -6,7 +6,7 @@
  * @module ui/label/labelview
  */
 import View from '../view';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
+import { uid } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/label/label.css';
 /**
  * The label view class.

package/src/labeledfield/labeledfieldview.js

@@ -6,8 +6,8 @@
  * @module ui/labeledfield/labeledfieldview
  */
 import View from '../view';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import LabelView from '../label/labelview';
+import { uid } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/labeledfield/labeledfieldview.css';
 /**
  * The labeled field view class. It can be used to enhance any view with the following features:

package/src/labeledinput/labeledinputview.js

@@ -6,8 +6,8 @@
  * @module ui/labeledinput/labeledinputview
  */
 import View from '../view';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
 import LabelView from '../label/labelview';
+import { uid } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/labeledinput/labeledinput.css';
 /**
  * The labeled input view class.

package/src/list/listview.js

@@ -6,9 +6,8 @@
  * @module ui/list/listview
  */
 import View from '../view';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/list/list.css';
 /**
  * The list view class.

package/src/model.js

@@ -5,14 +5,14 @@
 /**
  * @module ui/model
  */
-import { Observable } from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import { ObservableMixin } from '@ckeditor/ckeditor5-utils';
 import { extend } from 'lodash-es';
 /**
  * The base MVC model class.
  *
  * @mixes module:utils/observablemixin~ObservableMixin
  */
-export default class Model extends Observable {
+export default class Model extends ObservableMixin() {
     /**
      * Creates a new Model instance.
      *

package/src/notification/notification.js

@@ -6,7 +6,7 @@
  * @module ui/notification/notification
  */
 /* globals window */
-import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
+import { ContextPlugin } from '@ckeditor/ckeditor5-core';
 /**
  * The Notification plugin.
  *

package/src/panel/balloon/balloonpanelview.js

@@ -6,10 +6,7 @@
  * @module ui/panel/balloon/balloonpanelview
  */
 import View from '../../view';
-import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
-import isRange from '@ckeditor/ckeditor5-utils/src/dom/isrange';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { getOptimalPosition, global, isRange, toUnit } from '@ckeditor/ckeditor5-utils';
 import { isElement } from 'lodash-es';
 import '../../../theme/components/panel/balloonpanel.css';
 const toPx = toUnit('px');

package/src/panel/balloon/contextualballoon.js

@@ -5,14 +5,11 @@
 /**
  * @module ui/panel/balloon/contextualballoon
  */
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from '@ckeditor/ckeditor5-core';
 import BalloonPanelView from './balloonpanelview';
 import View from '../../view';
 import ButtonView from '../../button/buttonview';
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import { CKEditorError, FocusTracker, Rect, toUnit } from '@ckeditor/ckeditor5-utils';
 import prevIcon from '../../../theme/icons/previous-arrow.svg';
 import nextIcon from '../../../theme/icons/next-arrow.svg';
 import '../../../theme/components/panel/balloonrotator.css';
@@ -55,6 +52,12 @@ const toPx = toUnit('px');
  * @extends module:core/plugin~Plugin
  */
 export default class ContextualBalloon extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ContextualBalloon';
+    }
     /**
      * @inheritDoc
      */
@@ -145,12 +148,6 @@ export default class ContextualBalloon extends Plugin {
          */
         this._fakePanelsView = this._createFakePanelsView();
     }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ContextualBalloon';
-    }
     /**
      * @inheritDoc
      */

package/src/panel/sticky/stickypanelview.js

@@ -5,10 +5,9 @@
 /**
  * @module ui/panel/sticky/stickypanelview
  */
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import View from '../../view';
 import Template from '../../template';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import { global, toUnit } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/panel/stickypanel.css';
 const toPx = toUnit('px');
 /**

package/src/template.js

@@ -6,13 +6,10 @@
  * @module ui/template
  */
 /* global document */
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-import { Emitter } from '@ckeditor/ckeditor5-utils/src/emittermixin';
 import View from './view';
 import ViewCollection from './viewcollection';
-import isNode from '@ckeditor/ckeditor5-utils/src/dom/isnode';
+import { CKEditorError, EmitterMixin, isNode, toArray } from '@ckeditor/ckeditor5-utils';
 import { isObject, cloneDeepWith } from 'lodash-es';
-import toArray from '@ckeditor/ckeditor5-utils/src/toarray';
 const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 /**
  * A basic Template class. It renders a DOM HTML element or text from a
@@ -50,7 +47,7 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
  *
 * @mixes module:utils/emittermixin~EmitterMixin
  */
-export default class Template extends Emitter {
+export default class Template extends EmitterMixin() {
     /**
      * Creates an instance of the {@link ~Template} class.
      *

package/src/toolbar/balloon/balloontoolbar.js

@@ -5,17 +5,13 @@
 /**
  * @module ui/toolbar/balloon/balloontoolbar
  */
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
 import ContextualBalloon from '../../panel/balloon/contextualballoon';
 import ToolbarView from '../toolbarview';
 import BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
 import { debounce } from 'lodash-es';
-import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-import { env, global } from '@ckeditor/ckeditor5-utils';
 const toPx = toUnit('px');
 /**
  * The contextual toolbar.
@@ -25,6 +21,18 @@ const toPx = toUnit('px');
  * @extends module:core/plugin~Plugin
  */
 export default class BalloonToolbar extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'BalloonToolbar';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ContextualBalloon];
+    }
     /**
      * @inheritDoc
      */
@@ -96,18 +104,6 @@ export default class BalloonToolbar extends Plugin {
         // It is possible to stop the #show event and this prevent the toolbar from showing up.
         this.decorate('show');
     }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'BalloonToolbar';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ContextualBalloon];
-    }
     /**
      * @inheritDoc
      */

package/src/toolbar/block/blockbuttonview.js

@@ -6,8 +6,8 @@
  * @module ui/toolbar/block/blockbuttonview
  */
 import ButtonView from '../../button/buttonview';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import '../../../theme/components/toolbar/blocktoolbar.css';
+import { toUnit } from '@ckeditor/ckeditor5-utils';
 const toPx = toUnit('px');
 /**
  * The block button view class.

package/src/toolbar/block/blocktoolbar.js

@@ -6,19 +6,15 @@
  * @module ui/toolbar/block/blocktoolbar
  */
 /* global window */
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import pilcrow from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
+import { Plugin, icons } from '@ckeditor/ckeditor5-core';
+import { Rect, ResizeObserver, getOptimalPosition, env, toUnit } from '@ckeditor/ckeditor5-utils';
 import BlockButtonView from './blockbuttonview';
 import BalloonPanelView from '../../panel/balloon/balloonpanelview';
 import ToolbarView from '../toolbarview';
 import clickOutsideHandler from '../../bindings/clickoutsidehandler';
-import { getOptimalPosition } from '@ckeditor/ckeditor5-utils/src/dom/position';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
-import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-import env from '@ckeditor/ckeditor5-utils/src/env';
 const toPx = toUnit('px');
+const { pilcrow } = icons;
 /**
  * The block toolbar plugin.
  *
@@ -61,6 +57,12 @@ const toPx = toUnit('px');
  * @extends module:core/plugin~Plugin
  */
 export default class BlockToolbar extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'BlockToolbar';
+    }
     /**
      * @inheritDoc
      */
@@ -112,12 +114,6 @@ export default class BlockToolbar extends Plugin {
             callback: () => this._hidePanel()
         });
     }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'BlockToolbar';
-    }
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarview.js

@@ -6,22 +6,16 @@
  * @module ui/toolbar/toolbarview
  */
 import View from '../view';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import ToolbarSeparatorView from './toolbarseparatorview';
 import ToolbarLineBreakView from './toolbarlinebreakview';
-import ResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/resizeobserver';
 import preventDefault from '../bindings/preventdefault';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
-import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
-import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import normalizeToolbarConfig from './normalizetoolbarconfig';
+import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible, logWarning } from '@ckeditor/ckeditor5-utils';
+import { icons } from '@ckeditor/ckeditor5-core';
 import { isObject } from 'lodash-es';
 import '../../theme/components/toolbar/toolbar.css';
-import { icons } from '@ckeditor/ckeditor5-core';
 const { threeVerticalDots } = icons;
 const NESTED_TOOLBAR_ICONS = {
     alignLeft: icons.alignLeft,
@@ -666,11 +660,9 @@ class DynamicGrouping {
         // 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));
+        this.ungroupedItems.on('change', 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));
+        view.children.on('change', this._updateFocusCycleableItems.bind(this));
         // ToolbarView#items is dynamic. When an item is added or removed, it should be automatically
         // represented in either grouped or ungrouped items at the right index.
         // In other words #items == concat( #ungroupedItems, #groupedItems )

package/src/tooltipmanager.js

@@ -7,8 +7,7 @@
  */
 import View from './view';
 import BalloonPanelView, { generatePositions } from './panel/balloon/balloonpanelview';
-import { Emitter as DomEmitter } from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
-import { global, isVisible, first, ResizeObserver } from '@ckeditor/ckeditor5-utils';
+import { DomEmitterMixin, ResizeObserver, first, global, isVisible } from '@ckeditor/ckeditor5-utils';
 import { isElement, debounce } from 'lodash-es';
 import '../theme/components/tooltip/tooltip.css';
 const BALLOON_CLASS = 'ck-tooltip';
@@ -59,7 +58,7 @@ const BALLOON_CLASS = 'ck-tooltip';
  *
  * @mixes module:utils/domemittermixin~DomEmitterMixin
  */
-export default class TooltipManager extends DomEmitter {
+export default class TooltipManager extends DomEmitterMixin() {
     /**
      * Creates an instance of the tooltip manager.
      *

package/src/view.js

@@ -2,17 +2,13 @@
  * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/* eslint-disable @typescript-eslint/no-invalid-void-type, new-cap */
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
 /**
  * @module ui/view
  */
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import ViewCollection from './viewcollection';
 import Template from './template';
-import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
-import { Observable } from '@ckeditor/ckeditor5-utils/src/observablemixin';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable';
+import { CKEditorError, Collection, DomEmitterMixin, ObservableMixin, isIterable } from '@ckeditor/ckeditor5-utils';
 import '../theme/globals/globals.css';
 /**
  * The basic view class, which represents an HTML element created out of a
@@ -79,7 +75,7 @@ import '../theme/globals/globals.css';
  *
  * @mixes module:utils/observablemixin~ObservableMixin
  */
-export default class View extends DomEmitterMixin(Observable) {
+export default class View extends DomEmitterMixin(ObservableMixin()) {
     /**
      * Creates an instance of the {@link module:ui/view~View} class.
      *

package/src/viewcollection.js

@@ -5,8 +5,7 @@
 /**
  * @module ui/viewcollection
  */
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+import { CKEditorError, Collection } from '@ckeditor/ckeditor5-utils';
 /**
  * Collects {@link module:ui/view~View} instances.
  *