npm - @ckeditor/ckeditor5-ui - Versions diffs - 41.2.0 → 41.3.0-alpha.0 - Mend

@ckeditor/ckeditor5-ui 41.2.0 → 41.3.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/content-index.css +4 -0
package/dist/editor-index.css +451 -0
package/dist/index.css +856 -0
package/dist/index.css.map +1 -0
package/dist/index.js +13857 -0
package/dist/index.js.map +1 -0
package/dist/types/arialiveannouncer.d.ts +98 -0
package/dist/types/augmentation.d.ts +88 -0
package/dist/types/autocomplete/autocompleteview.d.ts +81 -0
package/dist/types/bindings/addkeyboardhandlingforgrid.d.ts +27 -0
package/dist/types/bindings/clickoutsidehandler.d.ts +28 -0
package/dist/types/bindings/csstransitiondisablermixin.d.ts +40 -0
package/dist/types/bindings/draggableviewmixin.d.ts +46 -0
package/dist/types/bindings/injectcsstransitiondisabler.d.ts +59 -0
package/dist/types/bindings/preventdefault.d.ts +33 -0
package/dist/types/bindings/submithandler.d.ts +57 -0
package/dist/types/button/button.d.ts +175 -0
package/dist/types/button/buttonlabel.d.ts +34 -0
package/dist/types/button/buttonlabelview.d.ts +31 -0
package/dist/types/button/buttonview.d.ts +181 -0
package/dist/types/button/switchbuttonview.d.ts +45 -0
package/dist/types/collapsible/collapsibleview.d.ts +70 -0
package/dist/types/colorgrid/colorgridview.d.ts +132 -0
package/dist/types/colorgrid/colortileview.d.ts +28 -0
package/dist/types/colorgrid/utils.d.ts +47 -0
package/dist/types/colorpicker/colorpickerview.d.ts +142 -0
package/dist/types/colorpicker/utils.d.ts +48 -0
package/dist/types/colorselector/colorgridsfragmentview.d.ts +195 -0
package/dist/types/colorselector/colorpickerfragmentview.d.ts +129 -0
package/dist/types/colorselector/colorselectorview.d.ts +242 -0
package/dist/types/colorselector/documentcolorcollection.d.ts +70 -0
package/dist/types/componentfactory.d.ts +81 -0
package/dist/types/dialog/dialog.d.ts +273 -0
package/dist/types/dialog/dialogactionsview.d.ts +69 -0
package/dist/types/dialog/dialogcontentview.d.ts +27 -0
package/dist/types/dialog/dialogview.d.ts +256 -0
package/dist/types/dropdown/button/dropdownbutton.d.ts +25 -0
package/dist/types/dropdown/button/dropdownbuttonview.d.ts +48 -0
package/dist/types/dropdown/button/splitbuttonview.d.ts +162 -0
package/dist/types/dropdown/dropdownpanelfocusable.d.ts +21 -0
package/dist/types/dropdown/dropdownpanelview.d.ts +62 -0
package/dist/types/dropdown/dropdownview.d.ts +315 -0
package/dist/types/dropdown/utils.d.ts +235 -0
package/dist/types/editableui/editableuiview.d.ts +72 -0
package/dist/types/editableui/inline/inlineeditableuiview.d.ts +40 -0
package/dist/types/editorui/accessibilityhelp/accessibilityhelp.d.ts +47 -0
package/dist/types/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts +35 -0
package/dist/types/editorui/bodycollection.d.ts +55 -0
package/dist/types/editorui/boxed/boxededitoruiview.d.ts +40 -0
package/dist/types/editorui/editorui.d.ts +288 -0
package/dist/types/editorui/editoruiview.d.ts +39 -0
package/dist/types/editorui/poweredby.d.ts +71 -0
package/dist/types/focuscycler.d.ts +245 -0
package/dist/types/formheader/formheaderview.d.ts +59 -0
package/dist/types/highlightedtext/highlightedtextview.d.ts +38 -0
package/dist/types/icon/iconview.d.ts +88 -0
package/dist/types/iframe/iframeview.d.ts +50 -0
package/dist/types/index.d.ts +74 -0
package/dist/types/input/inputbase.d.ts +107 -0
package/dist/types/input/inputview.d.ts +36 -0
package/dist/types/inputnumber/inputnumberview.d.ts +49 -0
package/dist/types/inputtext/inputtextview.d.ts +18 -0
package/dist/types/label/labelview.d.ts +36 -0
package/dist/types/labeledfield/labeledfieldview.d.ts +187 -0
package/dist/types/labeledfield/utils.d.ts +123 -0
package/dist/types/labeledinput/labeledinputview.d.ts +125 -0
package/dist/types/list/listitemgroupview.d.ts +59 -0
package/dist/types/list/listitemview.d.ts +36 -0
package/dist/types/list/listseparatorview.d.ts +18 -0
package/dist/types/list/listview.d.ts +124 -0
package/dist/types/model.d.ts +22 -0
package/dist/types/notification/notification.d.ts +211 -0
package/dist/types/panel/balloon/balloonpanelview.d.ts +685 -0
package/dist/types/panel/balloon/contextualballoon.d.ts +299 -0
package/dist/types/panel/sticky/stickypanelview.d.ts +156 -0
package/dist/types/search/filteredview.d.ts +31 -0
package/dist/types/search/searchinfoview.d.ts +45 -0
package/dist/types/search/searchresultsview.d.ts +54 -0
package/dist/types/search/text/searchtextqueryview.d.ts +76 -0
package/dist/types/search/text/searchtextview.d.ts +219 -0
package/dist/types/spinner/spinnerview.d.ts +25 -0
package/dist/types/template.d.ts +942 -0
package/dist/types/textarea/textareaview.d.ts +104 -0
package/dist/types/toolbar/balloon/balloontoolbar.d.ts +117 -0
package/dist/types/toolbar/block/blockbuttonview.d.ts +35 -0
package/dist/types/toolbar/block/blocktoolbar.d.ts +153 -0
package/dist/types/toolbar/normalizetoolbarconfig.d.ts +40 -0
package/dist/types/toolbar/toolbarlinebreakview.d.ts +18 -0
package/dist/types/toolbar/toolbarseparatorview.d.ts +18 -0
package/dist/types/toolbar/toolbarview.d.ts +267 -0
package/dist/types/tooltipmanager.d.ts +184 -0
package/dist/types/view.d.ts +422 -0
package/dist/types/viewcollection.d.ts +139 -0
package/package.json +4 -3
package/src/colorpicker/colorpickerview.js +0 -1
package/src/index.d.ts +2 -2
package/src/index.js +2 -1
package/src/toolbar/toolbarview.js +2 -3

package/dist/types/view.d.ts ADDED Viewed

@@ -0,0 +1,422 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/view
+ */
+import ViewCollection from './viewcollection.js';
+import Template, { type BindChain, type TemplateDefinition } from './template.js';
+import { Collection, type DecoratedMethodEvent, type Locale, type LocaleTranslate } from '@ckeditor/ckeditor5-utils';
+import '../theme/globals/globals.css';
+declare const View_base: import("@ckeditor/ckeditor5-utils").Mixed<{
+    new (): import("@ckeditor/ckeditor5-utils").Observable;
+    prototype: import("@ckeditor/ckeditor5-utils").Observable;
+}, import("@ckeditor/ckeditor5-utils").DomEmitter>;
+/**
+ * The basic view class, which represents an HTML element created out of a
+ * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle
+ * interaction
+ *
+ * Views {@link module:ui/view~View#registerChild aggregate} children in
+ * {@link module:ui/view~View#createCollection collections} and manage the life cycle of DOM
+ * listeners e.g. by handling rendering and destruction.
+ *
+ * See the {@link module:ui/template~TemplateDefinition} syntax to learn more about shaping view
+ * elements, attributes and listeners.
+ *
+ * ```ts
+ * class SampleView extends View {
+ * 	constructor( locale ) {
+ * 		super( locale );
+ *
+ * 		const bind = this.bindTemplate;
+ *
+ * 		// Views define their interface (state) using observable attributes.
+ * 		this.set( 'elementClass', 'bar' );
+ *
+ * 		this.setTemplate( {
+ * 			tag: 'p',
+ *
+ * 			// The element of the view can be defined with its children.
+ * 			children: [
+ * 				'Hello',
+ * 				{
+ * 					tag: 'b',
+ * 					children: [ 'world!' ]
+ * 				}
+ * 			],
+ * 			attributes: {
+ * 				class: [
+ * 					'foo',
+ *
+ * 					// Observable attributes control the state of the view in DOM.
+ * 					bind.to( 'elementClass' )
+ * 				]
+ * 			},
+ * 			on: {
+ * 				// Views listen to DOM events and propagate them.
+ * 				click: bind.to( 'clicked' )
+ * 			}
+ * 		} );
+ * 	}
+ * }
+ *
+ * const view = new SampleView( locale );
+ *
+ * view.render();
+ *
+ * // Append <p class="foo bar">Hello<b>world</b></p> to the <body>
+ * document.body.appendChild( view.element );
+ *
+ * // Change the class attribute to <p class="foo baz">Hello<b>world</b></p>
+ * view.elementClass = 'baz';
+ *
+ * // Respond to the "click" event in DOM by executing a custom action.
+ * view.on( 'clicked', () => {
+ * 	console.log( 'The view has been clicked!' );
+ * } );
+ * ```
+ */
+export default class View<TElement extends HTMLElement = HTMLElement> extends View_base {
+    /**
+     * An HTML element of the view. `null` until {@link #render rendered}
+     * from the {@link #template}.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor() {
+     * 		super();
+     *
+     * 		// A template instance the #element will be created from.
+     * 		this.setTemplate( {
+     * 			tag: 'p'
+     *
+     * 			// ...
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView();
+     *
+     * // Renders the #template.
+     * view.render();
+     *
+     * // Append the HTML element of the view to <body>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * **Note**: The element of the view can also be assigned directly:
+     *
+     * ```ts
+     * view.element = document.querySelector( '#my-container' );
+     * ```
+     */
+    element: TElement | null;
+    /**
+     * Set `true` when the view has already been {@link module:ui/view~View#render rendered}.
+     *
+     * @readonly
+     */
+    isRendered: boolean;
+    /**
+     * A set of tools to localize the user interface.
+     *
+     * Also see {@link module:core/editor/editor~Editor#locale}.
+     *
+     * @readonly
+     */
+    locale: Locale | undefined;
+    /**
+     * Shorthand for {@link module:utils/locale~Locale#t}.
+     *
+     * Note: If {@link #locale} instance hasn't been passed to the view this method may not
+     * be available.
+     *
+     * @see module:utils/locale~Locale#t
+     */
+    t: LocaleTranslate | undefined;
+    /**
+     * Template of this view. It provides the {@link #element} representing
+     * the view in DOM, which is {@link #render rendered}.
+     */
+    template?: Template;
+    viewUid?: string;
+    /**
+     * Collections registered with {@link #createCollection}.
+     */
+    protected _viewCollections: Collection<ViewCollection>;
+    /**
+     * A collection of view instances, which have been added directly
+     * into the {@link module:ui/template~Template#children}.
+     */
+    protected _unboundChildren: ViewCollection;
+    /**
+     * Cached {@link module:ui/template~BindChain bind chain} object created by the
+     * {@link #template}. See {@link #bindTemplate}.
+     */
+    private _bindTemplate?;
+    /**
+     * Creates an instance of the {@link module:ui/view~View} class.
+     *
+     * Also see {@link #render}.
+     *
+     * @param locale The localization services instance.
+     */
+    constructor(locale?: Locale);
+    /**
+     * Shorthand for {@link module:ui/template~Template.bind}, a binding
+     * {@link module:ui/template~BindChain interface} pre–configured for the view instance.
+     *
+     * It provides {@link module:ui/template~BindChain#to `to()`} and
+     * {@link module:ui/template~BindChain#if `if()`} methods that initialize bindings with
+     * observable attributes and attach DOM listeners.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		const bind = this.bindTemplate;
+     *
+     * 		// These {@link module:utils/observablemixin~Observable observable} attributes will control
+     * 		// the state of the view in DOM.
+     * 		this.set( {
+     * 			elementClass: 'foo',
+     * 		 	isEnabled: true
+     * 		 } );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			attributes: {
+     * 				// The class HTML attribute will follow elementClass
+     * 				// and isEnabled view attributes.
+     * 				class: [
+     * 					bind.to( 'elementClass' )
+     * 					bind.if( 'isEnabled', 'present-when-enabled' )
+     * 				]
+     * 			},
+     *
+     * 			on: {
+     * 				// The view will fire the "clicked" event upon clicking <p> in DOM.
+     * 				click: bind.to( 'clicked' )
+     * 			}
+     * 		} );
+     * 	}
+     * }
+     * ```
+     */
+    get bindTemplate(): BindChain<this>;
+    /**
+     * Creates a new collection of views, which can be used as
+     * {@link module:ui/template~Template#children} of this view.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		const child = new ChildView( locale );
+     * 		this.items = this.createCollection( [ child ] );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			// `items` collection will render here.
+     * 			children: this.items
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView( locale );
+     * view.render();
+     *
+     * // It will append <p><child#element></p> to the <body>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * @param views Initial views of the collection.
+     * @returns A new collection of view instances.
+     */
+    createCollection<T extends View = View>(views?: Iterable<T>): ViewCollection<T>;
+    /**
+     * Registers a new child view under the view instance. Once registered, a child
+     * view is managed by its parent, including {@link #render rendering}
+     * and {@link #destroy destruction}.
+     *
+     * To revert this, use {@link #deregisterChild}.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		this.childA = new SomeChildView( locale );
+     * 		this.childB = new SomeChildView( locale );
+     *
+     * 		this.setTemplate( { tag: 'p' } );
+     *
+     * 		// Register the children.
+     * 		this.registerChild( [ this.childA, this.childB ] );
+     * 	}
+     *
+     * 	render() {
+     * 		super.render();
+     *
+     * 		this.element.appendChild( this.childA.element );
+     * 		this.element.appendChild( this.childB.element );
+     * 	}
+     * }
+     *
+     * const view = new SampleView( locale );
+     *
+     * view.render();
+     *
+     * // Will append <p><childA#element><b></b><childB#element></p>.
+     * document.body.appendChild( view.element );
+     * ```
+     *
+     * **Note**: There's no need to add child views if they're already referenced in the
+     * {@link #template}:
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor( locale ) {
+     * 		super( locale );
+     *
+     * 		this.childA = new SomeChildView( locale );
+     * 		this.childB = new SomeChildView( locale );
+     *
+     * 		this.setTemplate( {
+     * 			tag: 'p',
+     *
+     * 			// These children will be added automatically. There's no
+     * 			// need to call {@link #registerChild} for any of them.
+     * 			children: [ this.childA, this.childB ]
+     * 		} );
+     * 	}
+     *
+     * 	// ...
+     * }
+     * ```
+     *
+     * @param children Children views to be registered.
+     */
+    registerChild(children: View | Iterable<View>): void;
+    /**
+     * The opposite of {@link #registerChild}. Removes a child view from this view instance.
+     * Once removed, the child is no longer managed by its parent, e.g. it can safely
+     * become a child of another parent view.
+     *
+     * @see #registerChild
+     * @param children Child views to be removed.
+     */
+    deregisterChild(children: View | Iterable<View>): void;
+    /**
+     * Sets the {@link #template} of the view with with given definition.
+     *
+     * A shorthand for:
+     *
+     * ```ts
+     * view.setTemplate( definition );
+     * ```
+     *
+     * @param definition Definition of view's template.
+     */
+    setTemplate(definition: TemplateDefinition): void;
+    /**
+     * {@link module:ui/template~Template.extend Extends} the {@link #template} of the view with
+     * with given definition.
+     *
+     * A shorthand for:
+     *
+     * ```ts
+     * Template.extend( view.template, definition );
+     * ```
+     *
+     * **Note**: Is requires the {@link #template} to be already set. See {@link #setTemplate}.
+     *
+     * @param definition Definition which extends the {@link #template}.
+     */
+    extendTemplate(definition: Partial<TemplateDefinition>): void;
+    /**
+     * Recursively renders the view.
+     *
+     * Once the view is rendered:
+     * * the {@link #element} becomes an HTML element out of {@link #template},
+     * * the {@link #isRendered} flag is set `true`.
+     *
+     * **Note**: The children of the view:
+     * * defined directly in the {@link #template}
+     * * residing in collections created by the {@link #createCollection} method,
+     * * and added by {@link #registerChild}
+     * are also rendered in the process.
+     *
+     * In general, `render()` method is the right place to keep the code which refers to the
+     * {@link #element} and should be executed at the very beginning of the view's life cycle.
+     *
+     * It is possible to {@link module:ui/template~Template.extend} the {@link #template} before
+     * the view is rendered. To allow an early customization of the view (e.g. by its parent),
+     * such references should be done in `render()`.
+     *
+     * ```ts
+     * class SampleView extends View {
+     * 	constructor() {
+     * 		this.setTemplate( {
+     * 			// ...
+     * 		} );
+     * 	},
+     *
+     * 	render() {
+     * 		// View#element becomes available.
+     * 		super.render();
+     *
+     * 		// The "scroll" listener depends on #element.
+     * 		this.listenTo( window, 'scroll', () => {
+     * 			// A reference to #element would render the #template and make it non-extendable.
+     * 			if ( window.scrollY > 0 ) {
+     * 				this.element.scrollLeft = 100;
+     * 			} else {
+     * 				this.element.scrollLeft = 0;
+     * 			}
+     * 		} );
+     * 	}
+     * }
+     *
+     * const view = new SampleView();
+     *
+     * // Let's customize the view before it gets rendered.
+     * view.extendTemplate( {
+     * 	attributes: {
+     * 		class: [
+     * 			'additional-class'
+     * 		]
+     * 	}
+     * } );
+     *
+     * // Late rendering allows customization of the view.
+     * view.render();
+     * ```
+     */
+    render(): void;
+    /**
+     * Recursively destroys the view instance and child views added by {@link #registerChild} and
+     * residing in collections created by the {@link #createCollection}.
+     *
+     * Destruction disables all event listeners:
+     * * created on the view, e.g. `view.on( 'event', () => {} )`,
+     * * defined in the {@link #template} for DOM events.
+     */
+    destroy(): void;
+}
+/**
+ * Event fired by the {@link module:ui/view~View#render} method. Actual rendering is executed as a listener to
+ * this event with the default priority.
+ *
+ * See {@link module:utils/observablemixin~Observable#decorate} for more information and samples.
+ *
+ * @eventName ~View#render
+ */
+export type UIViewRenderEvent = DecoratedMethodEvent<View, 'render'>;
+export {};

package/dist/types/viewcollection.d.ts ADDED Viewed

@@ -0,0 +1,139 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/viewcollection
+ */
+import { Collection, type EmitterMixinDelegateChain } from '@ckeditor/ckeditor5-utils';
+import type View from './view.js';
+/**
+ * Collects {@link module:ui/view~View} instances.
+ *
+ * ```ts
+ * const parentView = new ParentView( locale );
+ * const collection = new ViewCollection( locale );
+ *
+ * collection.setParent( parentView.element );
+ *
+ * const viewA = new ChildView( locale );
+ * const viewB = new ChildView( locale );
+ * ```
+ *
+ * View collection renders and manages view {@link module:ui/view~View#element elements}:
+ *
+ * ```ts
+ * collection.add( viewA );
+ * collection.add( viewB );
+ *
+ * console.log( parentView.element.firsChild ); // -> viewA.element
+ * console.log( parentView.element.lastChild ); // -> viewB.element
+ * ```
+ *
+ * It {@link module:ui/viewcollection~ViewCollection#delegate propagates} DOM events too:
+ *
+ * ```ts
+ * // Delegate #click and #keydown events from viewA and viewB to the parentView.
+ * collection.delegate( 'click' ).to( parentView );
+ *
+ * parentView.on( 'click', ( evt ) => {
+ * 	console.log( `${ evt.source } has been clicked.` );
+ * } );
+ *
+ * // This event will be delegated to the parentView.
+ * viewB.fire( 'click' );
+ * ```
+ *
+ * **Note**: A view collection can be used directly in the {@link module:ui/template~TemplateDefinition definition}
+ * of a {@link module:ui/template~Template template}.
+ */
+export default class ViewCollection<TView extends View = View> extends Collection<TView> {
+    id?: string;
+    /**
+     * A parent element within which child views are rendered and managed in DOM.
+     */
+    private _parentElement;
+    /**
+     * Creates a new instance of the {@link module:ui/viewcollection~ViewCollection}.
+     *
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(initialItems?: Iterable<TView>);
+    /**
+     * Destroys the view collection along with child views.
+     * See the view {@link module:ui/view~View#destroy} method.
+     */
+    destroy(): void;
+    /**
+     * Sets the parent HTML element of this collection. When parent is set, {@link #add adding} and
+     * {@link #remove removing} views in the collection synchronizes their
+     * {@link module:ui/view~View#element elements} in the parent element.
+     *
+     * @param element A new parent element.
+     */
+    setParent(elementOrDocFragment: DocumentFragment | HTMLElement): void;
+    /**
+     * Delegates selected events coming from within views in the collection to any
+     * {@link module:utils/emittermixin~Emitter}.
+     *
+     * For the following views and collection:
+     *
+     * ```ts
+     * const viewA = new View();
+     * const viewB = new View();
+     * const viewC = new View();
+     *
+     * const views = parentView.createCollection();
+     *
+     * views.delegate( 'eventX' ).to( viewB );
+     * views.delegate( 'eventX', 'eventY' ).to( viewC );
+     *
+     * views.add( viewA );
+     * ```
+     *
+     * the `eventX` is delegated (fired by) `viewB` and `viewC` along with `customData`:
+     *
+     * ```ts
+     * viewA.fire( 'eventX', customData );
+     * ```
+     *
+     * and `eventY` is delegated (fired by) `viewC` along with `customData`:
+     *
+     * ```ts
+     * viewA.fire( 'eventY', customData );
+     * ```
+     *
+     * See {@link module:utils/emittermixin~Emitter#delegate}.
+     *
+     * @param events {@link module:ui/view~View} event names to be delegated to another
+     * {@link module:utils/emittermixin~Emitter}.
+     * @returns Object with `to` property, a function which accepts the destination
+     * of {@link module:utils/emittermixin~Emitter#delegate delegated} events.
+     */
+    delegate(...events: Array<string>): EmitterMixinDelegateChain;
+    /**
+     * This method {@link module:ui/view~View#render renders} a new view added to the collection.
+     *
+     * If the {@link #_parentElement parent element} of the collection is set, this method also adds
+     * the view's {@link module:ui/view~View#element} as a child of the parent in DOM at a specified index.
+     *
+     * **Note**: If index is not specified, the view's element is pushed as the last child
+     * of the parent element.
+     *
+     * @param view A new view added to the collection.
+     * @param index An index the view holds in the collection. When not specified,
+     * the view is added at the end.
+     */
+    private _renderViewIntoCollectionParent;
+    /**
+     * Removes a child view from the collection. If the {@link #setParent parent element} of the
+     * collection has been set, the {@link module:ui/view~View#element element} of the view is also removed
+     * in DOM, reflecting the order of the collection.
+     *
+     * See the {@link #add} method.
+     *
+     * @param subject The view to remove, its id or index in the collection.
+     * @returns The removed view.
+     */
+    remove(subject: TView | number | string): TView;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "41.2.0",
+  "version": "41.3.0-alpha.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,8 +12,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "41.2.0",
-    "@ckeditor/ckeditor5-utils": "41.2.0",
+    "@ckeditor/ckeditor5-core": "41.3.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "41.3.0-alpha.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",
@@ -29,6 +29,7 @@
     "directory": "packages/ckeditor5-ui"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/colorpicker/colorpickerview.js CHANGED Viewed

@@ -12,7 +12,6 @@ import View from '../view.js';
 import LabeledFieldView from '../labeledfield/labeledfieldview.js';
 import { createLabeledInputText } from '../labeledfield/utils.js';
 // Custom export due to https://github.com/ckeditor/ckeditor5/issues/15698.
-// eslint-disable-next-line ckeditor5-rules/require-file-extensions-in-imports
 import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
 import '../../theme/components/colorpicker/colorpicker.css';
 const waitingTime = 150;

package/src/index.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@
 /**
  * @module ui
  */
+export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin, type ViewWithCssTransitionDisabler } from './bindings/csstransitiondisablermixin.js';
@@ -58,7 +59,7 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
 export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';
 export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview.js';
 export { default as SearchInfoView } from './search/searchinfoview.js';
-export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview.js';
+export type { default as FilteredView, FilteredViewExecuteEvent } from './search/filteredview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template, type TemplateDefinition } from './template.js';
@@ -69,6 +70,5 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar, type BalloonToolbarShowEvent } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
-export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
 import './augmentation.js';

package/src/index.js CHANGED Viewed

@@ -5,6 +5,8 @@
 /**
  * @module ui
  */
+// This import must be at the top to ensure that `globals.css` is imported first
+export { default as View } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin.js';
@@ -65,6 +67,5 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
-export { default as View } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
 import './augmentation.js';

package/src/toolbar/toolbarview.js CHANGED Viewed

@@ -16,7 +16,6 @@ import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible
 import { icons } from '@ckeditor/ckeditor5-core';
 import { isObject } from 'lodash-es';
 import '../../theme/components/toolbar/toolbar.css';
-const { threeVerticalDots } = icons;
 export const NESTED_TOOLBAR_ICONS = {
     alignLeft: icons.alignLeft,
     bold: icons.bold,
@@ -335,7 +334,7 @@ export default class ToolbarView extends View {
         // Allow disabling icon by passing false.
         if (icon !== false) {
             // A pre-defined icon picked by name, SVG string, a fallback (default) icon.
-            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || threeVerticalDots;
+            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || icons.threeVerticalDots;
         }
         // If the icon is disabled, display the label automatically.
         else {
@@ -693,7 +692,7 @@ class DynamicGrouping {
             label: t('Show more items'),
             tooltip: true,
             tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-            icon: threeVerticalDots
+            icon: icons.threeVerticalDots
         });
         return dropdown;
     }