@ckeditor/ckeditor5-ui 44.3.0 → 45.0.0-alpha.1

package/src/panel/balloon/contextualballoon.js

@@ -8,8 +8,9 @@
 import BalloonPanelView from './balloonpanelview.js';
 import View from '../../view.js';
 import ButtonView from '../../button/buttonview.js';
-import { Plugin, icons } from '@ckeditor/ckeditor5-core';
+import { Plugin } from '@ckeditor/ckeditor5-core';
 import { CKEditorError, FocusTracker, Rect, toUnit } from '@ckeditor/ckeditor5-utils';
+import { IconNextArrow, IconPreviousArrow } from '@ckeditor/ckeditor5-icons';
 import '../../../theme/components/panel/balloonrotator.css';
 import '../../../theme/components/panel/fakepanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
@@ -48,6 +49,38 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * navigation bar. If there is only one stack, the rotator view is transparent (it does not add any UI elements).
  */
 export default class ContextualBalloon extends Plugin {
+    /**
+     * The {@link module:utils/dom/position~Options#limiter position limiter}
+     * for the {@link #view balloon}, used when no `limiter` has been passed into {@link #add}
+     * or {@link #updatePosition}.
+     *
+     * By default, a function that obtains the farthest DOM
+     * {@link module:engine/view/rooteditableelement~RootEditableElement}
+     * of the {@link module:engine/view/document~Document#selection}.
+     */
+    positionLimiter;
+    visibleStack;
+    /**
+     * The map of views and their stacks.
+     */
+    _viewToStack = new Map();
+    /**
+     * The map of IDs and stacks.
+     */
+    _idToStack = new Map();
+    /**
+     * The common balloon panel view.
+     */
+    _view = null;
+    /**
+     * Rotator view embedded in the contextual balloon.
+     * Displays the currently visible view in the balloon and provides navigation for switching stacks.
+     */
+    _rotatorView = null;
+    /**
+     * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.
+     */
+    _fakePanelsView = null;
     /**
      * @inheritDoc
      */
@@ -65,27 +98,6 @@ export default class ContextualBalloon extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        /**
-         * The map of views and their stacks.
-         */
-        this._viewToStack = new Map();
-        /**
-         * The map of IDs and stacks.
-         */
-        this._idToStack = new Map();
-        /**
-         * The common balloon panel view.
-         */
-        this._view = null;
-        /**
-         * Rotator view embedded in the contextual balloon.
-         * Displays the currently visible view in the balloon and provides navigation for switching stacks.
-         */
-        this._rotatorView = null;
-        /**
-         * Displays fake panels under the balloon panel view when multiple stacks are added to the balloon.
-         */
-        this._fakePanelsView = null;
         this.positionLimiter = () => {
             const view = this.editor.editing.view;
             const viewDocument = view.document;
@@ -401,6 +413,22 @@ export default class ContextualBalloon extends Plugin {
  * See the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon} documentation to learn more.
  */
 export class RotatorView extends View {
+    /**
+     * Used for checking if a view is focused or not.
+     */
+    focusTracker;
+    /**
+     * Navigation button for switching the stack to the previous one.
+     */
+    buttonPrevView;
+    /**
+     * Navigation button for switching the stack to the next one.
+     */
+    buttonNextView;
+    /**
+     * A collection of the child views that creates the rotator content.
+     */
+    content;
     /**
      * @inheritDoc
      */
@@ -410,8 +438,8 @@ export class RotatorView extends View {
         const bind = this.bindTemplate;
         this.set('isNavigationVisible', true);
         this.focusTracker = new FocusTracker();
-        this.buttonPrevView = this._createButtonView(t('Previous'), icons.previousArrow);
-        this.buttonNextView = this._createButtonView(t('Next'), icons.nextArrow);
+        this.buttonPrevView = this._createButtonView(t('Previous'), IconPreviousArrow);
+        this.buttonNextView = this._createButtonView(t('Next'), IconNextArrow);
         this.content = this.createCollection();
         this.setTemplate({
             tag: 'div',
@@ -508,6 +536,14 @@ export class RotatorView extends View {
  * Displays additional layers under the balloon when multiple stacks are added to the balloon.
  */
 class FakePanelsView extends View {
+    /**
+     * Collection of the child views which creates fake panel content.
+     */
+    content;
+    /**
+     * Context.
+     */
+    _balloonPanelView;
     /**
      * @inheritDoc
      */

package/src/panel/sticky/stickypanelview.js

@@ -18,6 +18,20 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * The sticky panel view class.
  */
 export default class StickyPanelView extends View {
+    /**
+     * Collection of the child views which creates balloon panel contents.
+     */
+    content;
+    /**
+     * The panel which accepts children into {@link #content} collection.
+     * Also an element which is positioned when {@link #isSticky}.
+     */
+    contentPanelElement;
+    /**
+     * A dummy element which visually fills the space as long as the
+     * actual panel is sticky. It prevents flickering of the UI.
+     */
+    _contentPanelPlaceholder;
     /**
      * @inheritDoc
      */

package/src/search/searchresultsview.js

@@ -12,6 +12,24 @@ import { default as FocusCycler } from '../focuscycler.js';
  * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
  */
 export default class SearchResultsView extends View {
+    /**
+     * Tracks information about the DOM focus in the view.
+     *
+     * @readonly
+     */
+    focusTracker;
+    /**
+     * The collection of the child views inside of the list item {@link #element}.
+     *
+     * @readonly
+     */
+    children;
+    /**
+     * Provides the focus management (keyboard navigation) in the view.
+     *
+     * @readonly
+     */
+    _focusCycler;
     /**
      * @inheritDoc
      */

package/src/search/text/searchtextqueryview.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module ui/search/text/searchtextqueryview
- */
 import ButtonView from '../../button/buttonview.js';
 import IconView from '../../icon/iconview.js';
 import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview.js';

package/src/search/text/searchtextqueryview.js

@@ -5,11 +5,11 @@
 /**
  * @module ui/search/text/searchtextqueryview
  */
+import { IconCancel, IconLoupe } from '@ckeditor/ckeditor5-icons';
 import ButtonView from '../../button/buttonview.js';
 import IconView from '../../icon/iconview.js';
 import LabeledFieldView from '../../labeledfield/labeledfieldview.js';
 import { createLabeledInputText } from '../../labeledfield/utils.js';
-import { icons } from '@ckeditor/ckeditor5-core';
 /**
  * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
  *
@@ -17,6 +17,18 @@ import { icons } from '@ckeditor/ckeditor5-core';
  * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
  */
 export default class SearchTextQueryView extends LabeledFieldView {
+    /**
+     * The loupe icon displayed next to the {@link #fieldView}.
+     */
+    iconView;
+    /**
+     * The button that clears and focuses the {@link #fieldView}.
+     */
+    resetButtonView;
+    /**
+     * A reference to the view configuration.
+     */
+    _viewConfig;
     /**
      * @inheritDoc
      */
@@ -32,7 +44,7 @@ export default class SearchTextQueryView extends LabeledFieldView {
         this._viewConfig = viewConfig;
         if (this._viewConfig.showIcon) {
             this.iconView = new IconView();
-            this.iconView.content = icons.loupe;
+            this.iconView.content = IconLoupe;
             this.fieldWrapperChildren.add(this.iconView, 0);
             this.extendTemplate({
                 attributes: {
@@ -44,7 +56,7 @@ export default class SearchTextQueryView extends LabeledFieldView {
             this.resetButtonView = new ButtonView(locale);
             this.resetButtonView.set({
                 label: t('Clear'),
-                icon: icons.cancel,
+                icon: IconCancel,
                 class: 'ck-search__reset',
                 isVisible: false,
                 tooltip: true

package/src/search/text/searchtextview.js

@@ -11,7 +11,7 @@ import { default as SearchTextQueryView } from './searchtextqueryview.js';
 import SearchInfoView from '../searchinfoview.js';
 import SearchResultsView from '../searchresultsview.js';
 import FocusCycler from '../../focuscycler.js';
-import { escapeRegExp } from 'lodash-es';
+import { escapeRegExp } from 'es-toolkit/compat';
 import '../../../theme/components/search/search.css';
 /**
  * A search component that allows filtering of an arbitrary view based on a search query
@@ -32,6 +32,46 @@ import '../../../theme/components/search/search.css';
  * ```
  */
 export default class SearchTextView extends View {
+    /**
+     * Tracks information about the DOM focus in the view.
+     *
+     * @readonly
+     */
+    focusTracker;
+    /**
+     * An instance of the keystroke handler managing user interaction and accessibility.
+     *
+     * @readonly
+     */
+    keystrokes;
+    /**
+     * A view hosting the {@link #filteredView} passed in the configuration and the {@link #infoView}.
+     */
+    resultsView;
+    /**
+     * The view that is filtered by the search query.
+     */
+    filteredView;
+    /**
+     * The view that displays the information about the search results.
+     */
+    infoView;
+    /**
+     * The view that allows the user to enter the search query.
+     */
+    queryView;
+    /**
+     * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
+     *
+     * @readonly
+     */
+    focusCycler;
+    /**
+     * The cached configuration object.
+     *
+     * @internal
+     */
+    _config;
     /**
      * Creates an instance of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
      *
@@ -164,7 +204,7 @@ export default class SearchTextView extends View {
                 const defaultTextConfig = this._config.infoView && this._config.infoView.text;
                 let primaryText, secondaryText;
                 if (data.totalItemsCount) {
-                    if (defaultTextConfig && defaultTextConfig.notFound) {
+                    if (defaultTextConfig?.notFound) {
                         primaryText = defaultTextConfig.notFound.primary;
                         secondaryText = defaultTextConfig.notFound.secondary;
                     }
@@ -174,7 +214,7 @@ export default class SearchTextView extends View {
                     }
                 }
                 else {
-                    if (defaultTextConfig && defaultTextConfig.noSearchableItems) {
+                    if (defaultTextConfig?.noSearchableItems) {
                         primaryText = defaultTextConfig.noSearchableItems.primary;
                         secondaryText = defaultTextConfig.noSearchableItems.secondary;
                     }

package/src/template.js

@@ -9,7 +9,7 @@
 import View from './view.js';
 import ViewCollection from './viewcollection.js';
 import { CKEditorError, EmitterMixin, isNode, toArray } from '@ckeditor/ckeditor5-utils';
-import { isObject, cloneDeepWith } from 'lodash-es';
+import { isObject, cloneDeepWith } from 'es-toolkit/compat';
 const xhtmlNs = 'http://www.w3.org/1999/xhtml';
 /**
  * A basic Template class. It renders a DOM HTML element or text from a
@@ -50,6 +50,46 @@ const xhtmlNs = 'http://www.w3.org/1999/xhtml';
  * template definitions.
  */
 export default class Template extends /* #__PURE__ */ EmitterMixin() {
+    ns;
+    /**
+     * The tag (`tagName`) of this template, e.g. `div`. It also indicates that the template
+     * renders to an HTML element.
+     */
+    tag;
+    /**
+     * The text of the template. It also indicates that the template renders to a DOM text node.
+     */
+    text;
+    /**
+     * The attributes of the template, e.g. `{ id: [ 'ck-id' ] }`, corresponding with
+     * the attributes of an HTML element.
+     *
+     * **Note**: This property only makes sense when {@link #tag} is defined.
+     */
+    attributes;
+    /**
+     * The children of the template. They can be either:
+     * * independent instances of {@link ~Template} (sub–templates),
+     * * native DOM Nodes.
+     *
+     * **Note**: This property only makes sense when {@link #tag} is defined.
+     */
+    children;
+    /**
+     * The DOM event listeners of the template.
+     */
+    eventListeners;
+    /**
+     * Indicates whether this particular Template instance has been
+     * {@link #render rendered}.
+     */
+    _isRendered;
+    /**
+     * The data used by the {@link #revert} method to restore a node to its original state.
+     *
+     * See: {@link #apply}.
+     */
+    _revertData;
     /**
      * Creates an instance of the {@link ~Template} class.
      *
@@ -728,6 +768,28 @@ export default class Template extends /* #__PURE__ */ EmitterMixin() {
  * @internal
  */
 export class TemplateBinding {
+    /**
+     * The name of the {@link module:ui/template~TemplateBinding#observable observed attribute}.
+     */
+    attribute;
+    /**
+     * An observable instance of the binding. It either:
+     *
+     * * provides the attribute with the value,
+     * * or passes the event when a corresponding DOM event is fired.
+     */
+    observable;
+    /**
+     * An {@link module:utils/emittermixin~Emitter} used by the binding to:
+     *
+     * * listen to the attribute change in the {@link module:ui/template~TemplateBinding#observable},
+     * * or listen to the event in the DOM.
+     */
+    emitter;
+    /**
+     * A custom function to process the value of the {@link module:ui/template~TemplateBinding#attribute}.
+     */
+    callback;
     /**
      * Creates an instance of the {@link module:ui/template~TemplateBinding} class.
      *
@@ -782,6 +844,7 @@ export class TemplateBinding {
  * @internal
  */
 export class TemplateToBinding extends TemplateBinding {
+    eventNameOrFunction;
     constructor(def) {
         super(def);
         this.eventNameOrFunction = def.eventNameOrFunction;
@@ -820,6 +883,11 @@ export class TemplateToBinding extends TemplateBinding {
  * @internal
  */
 export class TemplateIfBinding extends TemplateBinding {
+    /**
+     * The value of the DOM attribute or text to be set if the {@link module:ui/template~TemplateBinding#attribute} in
+     * {@link module:ui/template~TemplateBinding#observable} is `true`.
+     */
+    valueIfTrue;
     constructor(def) {
         super(def);
         this.valueIfTrue = def.valueIfTrue;

package/src/textarea/textareaview.js

@@ -24,16 +24,23 @@ import '../../theme/components/textarea/textarea.css';
  * ```
  */
 export default class TextareaView extends InputBase {
+    /**
+     * An instance of the resize observer used to detect when the view is visible or not and update
+     * its height if any changes that affect it were made while it was invisible.
+     *
+     * **Note:** Created in {@link #render}.
+     */
+    _resizeObserver;
+    /**
+     * A flag that indicates whether the {@link #_updateAutoGrowHeight} method should be called when the view becomes
+     * visible again. See {@link #_resizeObserver}.
+     */
+    _isUpdateAutoGrowHeightPending = false;
     /**
      * @inheritDoc
      */
     constructor(locale) {
         super(locale);
-        /**
-         * A flag that indicates whether the {@link #_updateAutoGrowHeight} method should be called when the view becomes
-         * visible again. See {@link #_resizeObserver}.
-         */
-        this._isUpdateAutoGrowHeightPending = false;
         const toPx = toUnit('px');
         this.set('minRows', 2);
         this.set('maxRows', 5);

package/src/toolbar/balloon/balloontoolbar.d.ts

@@ -43,7 +43,7 @@ export default class BalloonToolbar extends Plugin {
      */
     private readonly _balloon;
     /**
-     * Fires `_selectionChangeDebounced` event using `lodash#debounce`.
+     * Fires `_selectionChangeDebounced` event using `es-toolkit#debounce`.
      *
      * This event is an internal plugin event which is fired 200 ms after model selection last change.
      * This is to makes easy test debounced action without need to use `setTimeout`.

package/src/toolbar/balloon/balloontoolbar.js

@@ -12,7 +12,7 @@ import normalizeToolbarConfig from '../normalizetoolbarconfig.js';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
 import { Observer } from '@ckeditor/ckeditor5-engine';
-import { debounce } from 'lodash-es';
+import { debounce } from 'es-toolkit/compat';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * The contextual toolbar.
@@ -20,6 +20,43 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  */
 export default class BalloonToolbar extends Plugin {
+    /**
+     * The toolbar view displayed in the balloon.
+     */
+    toolbarView;
+    /**
+     * Tracks the focus of the {@link module:ui/editorui/editorui~EditorUI#getEditableElement editable element}
+     * and the {@link #toolbarView}. When both are blurred then the toolbar should hide.
+     */
+    focusTracker;
+    /**
+     * A cached and normalized `config.balloonToolbar` object.
+     */
+    _balloonConfig;
+    /**
+     * An instance of the resize observer that allows to respond to changes in editable's geometry
+     * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
+     *
+     * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
+     * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
+     *
+     * **Note:** Created in {@link #init}.
+     */
+    _resizeObserver = null;
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * Fires `_selectionChangeDebounced` event using `es-toolkit#debounce`.
+     *
+     * This event is an internal plugin event which is fired 200 ms after model selection last change.
+     * This is to makes easy test debounced action without need to use `setTimeout`.
+     *
+     * This function is stored as a plugin property to make possible to cancel
+     * trailing debounced invocation on destroy.
+     */
+    _fireSelectionChangeDebounced;
     /**
      * @inheritDoc
      */
@@ -43,16 +80,6 @@ export default class BalloonToolbar extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        /**
-         * An instance of the resize observer that allows to respond to changes in editable's geometry
-         * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
-         *
-         * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
-         * {@link module:core/editor/editorconfig~EditorConfig#balloonToolbar configuration}.
-         *
-         * **Note:** Created in {@link #init}.
-         */
-        this._resizeObserver = null;
         this._balloonConfig = normalizeToolbarConfig(editor.config.get('balloonToolbar'));
         this.toolbarView = this._createToolbarView();
         this.focusTracker = new FocusTracker();

package/src/toolbar/block/blocktoolbar.js

@@ -62,6 +62,30 @@ const toPx = /* #__PURE__ */ toUnit('px');
  * ```
  */
 export default class BlockToolbar extends Plugin {
+    /**
+     * The toolbar view.
+     */
+    toolbarView;
+    /**
+     * The balloon panel view, containing the {@link #toolbarView}.
+     */
+    panelView;
+    /**
+     * The button view that opens the {@link #toolbarView}.
+     */
+    buttonView;
+    /**
+     * An instance of the resize observer that allows to respond to changes in editable's geometry
+     * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
+     *
+     * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
+     * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.
+     */
+    _resizeObserver = null;
+    /**
+     * A cached and normalized `config.blockToolbar` object.
+     */
+    _blockToolbarConfig;
     /**
      * @inheritDoc
      */
@@ -79,14 +103,6 @@ export default class BlockToolbar extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        /**
-         * An instance of the resize observer that allows to respond to changes in editable's geometry
-         * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
-         *
-         * **Note**: Used only when `shouldNotGroupWhenFull` was **not** set in the
-         * {@link module:core/editor/editorconfig~EditorConfig#blockToolbar configuration}.
-         */
-        this._resizeObserver = null;
         this._blockToolbarConfig = normalizeToolbarConfig(this.editor.config.get('blockToolbar'));
         this.toolbarView = this._createToolbarView();
         this.panelView = this._createPanelView();

package/src/toolbar/toolbarview.d.ts

@@ -11,7 +11,7 @@ import type ComponentFactory from '../componentfactory.js';
 import type ViewCollection from '../viewcollection.js';
 import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import { type ToolbarConfig } from '@ckeditor/ckeditor5-core';
+import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
 import '../../theme/components/toolbar/toolbar.css';
 export declare const NESTED_TOOLBAR_ICONS: Record<string, string | undefined>;
 /**
@@ -109,6 +109,10 @@ export default class ToolbarView extends View implements DropdownPanelFocusable
      * @observable
      */
     isVertical: boolean;
+    /**
+     * Indicates whether the toolbar responds to changes in the geometry (e.g. window resize) by grouping excessive items or not.
+     */
+    isGrouping: boolean;
     /**
      * Helps cycling over {@link #focusables focusable items} in the toolbar.
      */
@@ -118,7 +122,7 @@ export default class ToolbarView extends View implements DropdownPanelFocusable
      *
      * See {@link module:ui/toolbar/toolbarview~ToolbarBehavior} to learn more.
      */
-    private readonly _behavior;
+    private _behavior;
     /**
      * Creates an instance of the {@link module:ui/toolbar/toolbarview~ToolbarView} class.
      *
@@ -154,6 +158,10 @@ export default class ToolbarView extends View implements DropdownPanelFocusable
      * to this toolbar and all nested ones as well.
      */
     fillFromConfig(itemsOrConfig: ToolbarConfig | undefined, factory: ComponentFactory, removeItems?: Array<string>): void;
+    /**
+     * Changes the behavior of toolbar if it does not fit into the available space.
+     */
+    switchBehavior(newBehaviorType: 'dynamic' | 'static'): void;
     /**
      * A utility that expands the plain toolbar configuration into a list of view items using a given component factory.
      *
@@ -270,5 +278,10 @@ export interface ToolbarBehavior {
      * event listeners, free up references, etc.
      */
     destroy(): void;
+    /**
+     * Indicates the type of the toolbar behavior. Dynamic toolbar can hide items that do not fit into the available space.
+     * Static toolbar does not hide items and does not respond to the changes of the viewport.
+     */
+    type: 'dynamic' | 'static';
 }
 export {};