From 3a729b03c384bf1e5bd66c04cd8667a97a08a44a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 11 Aug 2023 17:02:08 +0200
Subject: [PATCH 01/84] Poc of groups within ListView component instances.

---
 .../ckeditor5-ui/components/list/list.css     | 11 +++
 packages/ckeditor5-ui/src/dropdown/utils.ts   | 94 +++++++++++++------
 packages/ckeditor5-ui/src/index.ts            |  1 +
 .../src/list/listitemgroupview.ts             | 88 +++++++++++++++++
 packages/ckeditor5-ui/src/list/listview.ts    | 54 +++++++++--
 .../tests/manual/dropdown/dropdown.html       |  5 +
 .../tests/manual/dropdown/dropdown.js         | 76 +++++++++++++++
 .../ckeditor5-ui/tests/manual/list/list.html  | 13 +++
 .../ckeditor5-ui/tests/manual/list/list.js    | 60 ++++++++++++
 .../ckeditor5-ui/tests/manual/list/list.md    |  1 +
 10 files changed, 370 insertions(+), 33 deletions(-)
 create mode 100644 packages/ckeditor5-ui/src/list/listitemgroupview.ts
 create mode 100644 packages/ckeditor5-ui/tests/manual/list/list.html
 create mode 100644 packages/ckeditor5-ui/tests/manual/list/list.js
 create mode 100644 packages/ckeditor5-ui/tests/manual/list/list.md

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
index 9199dd73572..88b45aac15e 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
@@ -77,6 +77,17 @@
 	}
 }
 
+.ck-list .ck-list__group {
+	padding-top: var(--ck-spacing-medium);
+	border-top: 1px solid var(--ck-color-base-border);
+
+	& > li:first-child > span {
+		font-size: 11px;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium);
+	}
+}
+
 .ck.ck-list__separator {
 	height: 1px;
 	width: 100%;
diff --git a/packages/ckeditor5-ui/src/dropdown/utils.ts b/packages/ckeditor5-ui/src/dropdown/utils.ts
index 8a4130c88fa..1981aa8d318 100644
--- a/packages/ckeditor5-ui/src/dropdown/utils.ts
+++ b/packages/ckeditor5-ui/src/dropdown/utils.ts
@@ -39,6 +39,7 @@ import {
 
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
+import ListItemGroupView from '../list/listitemgroupview';
 
 /**
  * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
@@ -345,38 +346,14 @@ function addListToOpenDropdown(
 		role?: string;
 	}
 ): void {
-	const locale = dropdownView.locale;
-
+	const locale = dropdownView.locale!;
 	const listView = dropdownView.listView = new ListView( locale );
 	const items = typeof itemsOrCallback == 'function' ? itemsOrCallback() : itemsOrCallback;
 
 	listView.ariaLabel = options.ariaLabel;
 	listView.role = options.role;
 
-	listView.items.bindTo( items ).using( def => {
-		if ( def.type === 'separator' ) {
-			return new ListSeparatorView( locale );
-		} else if ( def.type === 'button' || def.type === 'switchbutton' ) {
-			const listItemView = new ListItemView( locale );
-			let buttonView;
-
-			if ( def.type === 'button' ) {
-				buttonView = new ButtonView( locale );
-			} else {
-				buttonView = new SwitchButtonView( locale );
-			}
-
-			// Bind all model properties to the button view.
-			buttonView.bind( ...Object.keys( def.model ) as Array<keyof ButtonView> ).to( def.model );
-			buttonView.delegate( 'execute' ).to( listItemView );
-
-			listItemView.children.add( buttonView );
-
-			return listItemView;
-		}
-
-		return null;
-	} );
+	bindViewCollectionItemsToDefinitions( dropdownView, listView.items, items, locale );
 
 	dropdownView.panelView.children.add( listView );
 
@@ -547,11 +524,60 @@ function focusDropdownPanelOnOpen( dropdownView: DropdownView ) {
 	}, { priority: 'low' } );
 }
 
+/**
+ * TODO
+ *
+ * @param items
+ * @param definitions
+ * @param locale
+ */
+function bindViewCollectionItemsToDefinitions(
+	dropdownView: DropdownView,
+	items: ViewCollection,
+	definitions: Collection<ListDropdownItemDefinition>,
+	locale: Locale
+) {
+	items.bindTo( definitions ).using( def => {
+		if ( def.type === 'separator' ) {
+			return new ListSeparatorView( locale );
+		} else if ( def.type === 'group' ) {
+			const groupView = new ListItemGroupView( locale );
+
+			groupView.set( { label: def.label } );
+
+			bindViewCollectionItemsToDefinitions( dropdownView, groupView.items, def.items, locale );
+
+			groupView.items.delegate( 'execute' ).to( dropdownView );
+
+			return groupView;
+		} else if ( def.type === 'button' || def.type === 'switchbutton' ) {
+			const listItemView = new ListItemView( locale );
+			let buttonView;
+
+			if ( def.type === 'button' ) {
+				buttonView = new ButtonView( locale );
+			} else {
+				buttonView = new SwitchButtonView( locale );
+			}
+
+			// Bind all model properties to the button view.
+			buttonView.bind( ...Object.keys( def.model ) as Array<keyof ButtonView> ).to( def.model );
+			buttonView.delegate( 'execute' ).to( listItemView );
+
+			listItemView.children.add( buttonView );
+
+			return listItemView;
+		}
+
+		return null;
+	} );
+}
+
 /**
  * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}
  * utility.
  */
-export type ListDropdownItemDefinition = ListDropdownSeparatorDefinition | ListDropdownButtonDefinition;
+export type ListDropdownItemDefinition = ListDropdownSeparatorDefinition | ListDropdownButtonDefinition | ListDropdownGroupDefinition;
 
 /**
  * A definition of the 'separator' list item.
@@ -571,3 +597,17 @@ export type ListDropdownButtonDefinition = {
 	 */
 	model: Model;
 };
+
+export type ListDropdownGroupDefinition = {
+	type: 'group';
+
+	/**
+	 * TODO
+	 */
+	label: string;
+
+	/**
+	 * TODO
+	 */
+	items: Collection<ListDropdownButtonDefinition>;
+};
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 36185b2cace..d506c00cf67 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -60,6 +60,7 @@ export { default as LabelView } from './label/labelview';
 export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
 export * from './labeledfield/utils';
 
+export { default as ListItemGroupView } from './list/listitemgroupview';
 export { default as ListItemView } from './list/listitemview';
 export { default as ListView } from './list/listview';
 
diff --git a/packages/ckeditor5-ui/src/list/listitemgroupview.ts b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
new file mode 100644
index 00000000000..15adbdcc537
--- /dev/null
+++ b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
@@ -0,0 +1,88 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/list/listitemgroupview
+ */
+
+import View from '../view';
+
+import type { FocusableView } from '../focuscycler';
+import type ViewCollection from '../viewcollection';
+
+import { uid, type Locale } from '@ckeditor/ckeditor5-utils';
+import type ListItemView from './listitemview';
+
+/**
+ * TODO
+ */
+export default class ListItemGroupView extends View {
+	/**
+	 * TODO
+	 */
+	declare public label: string;
+
+	/**
+	 * Collection of the child views inside of the {@link #element}.
+	 */
+	public readonly items: ViewCollection<ListItemView>;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale?: Locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.items = this.createCollection<ListItemView>();
+
+		const groupLabelId = `ck-editor__label_${ uid() }`;
+
+		this.setTemplate( {
+			tag: 'li',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-list__group'
+				]
+			},
+
+			children: [
+				{
+					tag: 'li',
+					attributes: {
+						role: 'presentation',
+						id: groupLabelId
+					},
+					children: [
+						{
+							tag: 'span',
+							children: [
+								{ text: bind.to( 'label' ) }
+							]
+						},
+						{
+							tag: 'ul',
+							attributes: {
+								role: 'group',
+								'aria-labelledby': groupLabelId
+							},
+							children: this.items
+						}
+					]
+				}
+			]
+		} );
+	}
+
+	/**
+	 * Focuses the list item.
+	 */
+	public focus(): void {
+		( this.items.first as FocusableView ).focus();
+	}
+}
diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index e53152cb5de..5efd0deb5a0 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -10,9 +10,10 @@
 import View from '../view';
 import FocusCycler from '../focuscycler';
 
-import type ListItemView from './listitemview';
+import ListItemView from './listitemview';
+import ListItemGroupView from './listitemgroupview';
 import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
-import type ViewCollection from '../viewcollection';
+import ViewCollection from '../viewcollection';
 
 import {
 	FocusTracker,
@@ -28,6 +29,11 @@ import '../../theme/components/list/list.css';
  * The list view class.
  */
 export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
+	/**
+	 * TODO
+	 */
+	public readonly focusables: ViewCollection;
+
 	/**
 	 * Collection of the child list views.
 	 */
@@ -70,12 +76,13 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 
 		const bind = this.bindTemplate;
 
+		this.focusables = new ViewCollection();
 		this.items = this.createCollection();
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 
 		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
+			focusables: this.focusables,
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
@@ -113,17 +120,52 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	public override render(): void {
 		super.render();
 
+		const registerItem = ( item: ListItemView ) => {
+			if ( this.focusables.has( item ) ) {
+				return;
+			}
+
+			this.focusTracker.add( item.element! );
+			this.focusables.add( item );
+		};
+
+		const registerGroupItems = ( group: ListItemGroupView ) => {
+			for ( const child of group.items ) {
+				registerItem( child );
+			}
+		};
+
 		// Items added before rendering should be known to the #focusTracker.
 		for ( const item of this.items ) {
-			this.focusTracker.add( item.element! );
+			if ( item instanceof ListItemView ) {
+				registerItem( item );
+			} else if ( item instanceof ListItemGroupView ) {
+				registerGroupItems( item );
+			}
 		}
 
 		this.items.on<CollectionAddEvent<ListItemView>>( 'add', ( evt, item ) => {
-			this.focusTracker.add( item.element! );
+			if ( item instanceof ListItemView ) {
+				registerItem( item );
+			}
+
+			if ( item instanceof ListItemGroupView ) {
+				registerGroupItems( item );
+			}
 		} );
 
 		this.items.on<CollectionRemoveEvent<ListItemView>>( 'remove', ( evt, item ) => {
-			this.focusTracker.remove( item.element! );
+			if ( item instanceof ListItemView ) {
+				this.focusTracker.remove( item.element! );
+				this.focusables.remove( item );
+			}
+
+			if ( item instanceof ListItemGroupView ) {
+				for ( const child of item.items ) {
+					this.focusTracker.remove( child.element! );
+					this.focusables.remove( child );
+				}
+			}
 		} );
 
 		// Start listening for the keystrokes coming from #element.
diff --git a/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.html b/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.html
index 70104b6ac55..049b8aa85e8 100644
--- a/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.html
+++ b/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.html
@@ -6,6 +6,11 @@ <h2>Dropdown with ListView</h2>
 
 <div id="list-dropdown" class="ck ck-reset_all"></div>
 
+<h2>Dropdown with ListView (and groups)</h2>
+
+<div id="list-dropdown-with-groups" class="ck ck-reset_all"></div>
+
+
 <h2>Long label (truncated)</h2>
 
 <div id="dropdown-label" class="ck ck-reset_all"></div>
diff --git a/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.js b/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.js
index 707a46d3e48..b152c0d5a8d 100644
--- a/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.js
+++ b/packages/ckeditor5-ui/tests/manual/dropdown/dropdown.js
@@ -21,6 +21,7 @@ import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../.
 const ui = testUtils.createTestUIView( {
 	dropdown: '#dropdown',
 	listDropdown: '#list-dropdown',
+	listDropdownWithGroups: '#list-dropdown-with-groups',
 	dropdownLabel: '#dropdown-label',
 	toolbarDropdown: '#dropdown-toolbar',
 	splitButton: '#dropdown-splitbutton'
@@ -76,6 +77,80 @@ function testList() {
 	window.Model = Model;
 }
 
+function testListWithGroups() {
+	const collection = new Collection( { idProperty: 'label' } );
+
+	collection.addMany( [
+		{
+			type: 'button',
+			model: new Model( {
+				label: 'Item 1',
+				withText: true
+			} )
+		},
+		{
+			type: 'group',
+			label: 'Group 1',
+			items: new Collection( [
+				{
+					type: 'button',
+					model: new Model( {
+						label: 'Group 1, Item 1',
+						withText: true
+					} )
+				},
+				{
+					type: 'button',
+					model: new Model( {
+						label: 'Group 1, Item 1',
+						withText: true
+					} )
+				}
+			] )
+		},
+		{
+			type: 'group',
+			label: 'Group 2',
+			items: new Collection( [
+				{
+					type: 'button',
+					model: new Model( {
+						label: 'Group 2, Item 1',
+						withText: true
+					} )
+				},
+				{
+					type: 'button',
+					model: new Model( {
+						label: 'Group 2, Item 1',
+						withText: true
+					} )
+				}
+			] )
+		}
+	] );
+
+	const dropdownView = createDropdown( {} );
+
+	dropdownView.buttonView.set( {
+		label: 'ListDropdown (with groups)',
+		isEnabled: true,
+		isOn: false,
+		withText: true
+	} );
+
+	addListToDropdown( dropdownView, collection );
+
+	dropdownView.on( 'execute', evt => {
+		console.log( 'List#execute:', evt.source.label );
+	} );
+
+	ui.listDropdownWithGroups.add( dropdownView );
+
+	window.listDropdownWithGroupsCollection = collection;
+	window.Model = Model;
+}
+
 function testLongLabel() {
 	const dropdownView = createDropdown( {} );
 
@@ -160,6 +235,7 @@ function testSplitButton() {
 
 testEmpty();
 testList();
+testListWithGroups();
 testLongLabel();
 testToolbar();
 testSplitButton();
diff --git a/packages/ckeditor5-ui/tests/manual/list/list.html b/packages/ckeditor5-ui/tests/manual/list/list.html
new file mode 100644
index 00000000000..6be06b12b32
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/list/list.html
@@ -0,0 +1,13 @@
+<div id="playground" class="ck-reset ck-reset_all"></div>
+
+<style>
+	#playground {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+	}
+
+	.ck.ck-list {
+		border: 1px solid #000;
+	}
+</style>
diff --git a/packages/ckeditor5-ui/tests/manual/list/list.js b/packages/ckeditor5-ui/tests/manual/list/list.js
new file mode 100644
index 00000000000..f95c894b91f
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/list/list.js
@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import { ButtonView, ListItemGroupView, ListItemView, ListView } from '../../../src';
+
+const playground = document.querySelector( '#playground' );
+
+const defaultView = new ListView();
+defaultView.render();
+playground.appendChild( defaultView.element );
+
+const grouppedView = new ListView();
+grouppedView.render();
+playground.appendChild( grouppedView.element );
+
+defaultView.items.addMany( [
+	createItem( 'Item 1' ),
+	createItem( 'Item 2' ),
+	createItem( 'Item 3' ),
+	createItem( 'Item 4' ),
+	createItem( 'Item 5' )
+] );
+
+grouppedView.items.addMany( [
+	createItem( 'Item 1' ),
+	createItem( 'Item 2' ),
+	createGroup( 'Items group 1', [
+		createItem( 'Item 1.1' ),
+		createItem( 'Item 1.2' )
+	] ),
+	createGroup( 'Items group 2', [
+		createItem( 'Item 2.1' ),
+		createItem( 'Item 2.2' )
+	] )
+] );
+
+function createItem( label ) {
+	const item = new ListItemView();
+	const button = new ButtonView();
+
+	item.children.add( button );
+
+	button.set( { label, withText: true } );
+
+	return item;
+}
+
+function createGroup( label, items ) {
+	const groupView = new ListItemGroupView();
+
+	groupView.label = label;
+	groupView.items.addMany( items );
+
+	return groupView;
+}
+
diff --git a/packages/ckeditor5-ui/tests/manual/list/list.md b/packages/ckeditor5-ui/tests/manual/list/list.md
new file mode 100644
index 00000000000..1333ed77b7e
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/list/list.md
@@ -0,0 +1 @@
+TODO

From 8896812ea79cba120b7d167966ac35f4cb874e7b Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Thu, 31 Aug 2023 09:12:49 +0200
Subject: [PATCH 02/84] Implementing textarea component

---
 packages/ckeditor5-ui/src/index.ts            |   2 +
 packages/ckeditor5-ui/src/input/inputbase.ts  | 170 ++++++++++++++++
 packages/ckeditor5-ui/src/input/inputview.ts  | 150 +-------------
 .../ckeditor5-ui/src/textarea/textareaview.ts |  65 ++++++
 .../ckeditor5-ui/tests/input/inputbase.js     |  97 +++++++++
 .../ckeditor5-ui/tests/input/inputview.js     |  63 ------
 .../ckeditor5-ui/tests/textarea/textarea.js   | 186 ++++++++++++++++++
 7 files changed, 523 insertions(+), 210 deletions(-)
 create mode 100644 packages/ckeditor5-ui/src/input/inputbase.ts
 create mode 100644 packages/ckeditor5-ui/src/textarea/textareaview.ts
 create mode 100644 packages/ckeditor5-ui/tests/input/inputbase.js
 create mode 100644 packages/ckeditor5-ui/tests/textarea/textarea.js

diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index d506c00cf67..74375d83000 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -54,6 +54,8 @@ export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
 
+export { default as TextareaView } from './textarea/textareaview';
+
 export { default as IframeView } from './iframe/iframeview';
 
 export { default as LabelView } from './label/labelview';
diff --git a/packages/ckeditor5-ui/src/input/inputbase.ts b/packages/ckeditor5-ui/src/input/inputbase.ts
new file mode 100644
index 00000000000..d32a27839b3
--- /dev/null
+++ b/packages/ckeditor5-ui/src/input/inputbase.ts
@@ -0,0 +1,170 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/input/inputbase
+ */
+
+import View from '../view';
+
+import {
+	FocusTracker,
+	type Locale,
+	type ObservableChangeEvent
+} from '@ckeditor/ckeditor5-utils';
+
+/**
+ * The base input view class.
+ */
+export default abstract class InputBase<TElement extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> extends View<TElement> {
+	/**
+	 * Stores information about the editor UI focus and propagates it so various plugins and components
+	 * are unified as a focus group.
+	 */
+	public readonly focusTracker: FocusTracker;
+
+	/**
+	 * The value of the input.
+	 *
+	 * @observable
+	 */
+	declare public value: string | undefined;
+
+	/**
+	 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
+	 *
+	 * @observable
+	 */
+	declare public id: string | undefined;
+
+	/**
+	 * The `placeholder` attribute of the input.
+	 *
+	 * @observable
+	 */
+	declare public placeholder: string | undefined;
+
+	/**
+	 * Controls whether the input view is in read-only mode.
+	 *
+	 * @observable
+	 */
+	declare public isReadOnly: boolean;
+
+	/**
+	 * Set to `true` when the field has some error. Usually controlled via
+	 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
+	 *
+	 * @observable
+	 */
+	declare public hasError: boolean;
+
+	/**
+	 * The `id` of the element describing this field, e.g. when it has
+	 * some error; it helps screen readers read the error text.
+	 *
+	 * @observable
+	 */
+	declare public ariaDescribedById: string | undefined;
+
+	/**
+	 * An observable flag set to `true` when the input is currently focused by the user.
+	 * Set to `false` otherwise.
+	 *
+	 * @readonly
+	 * @observable
+	 * @default false
+	 */
+	declare public isFocused: boolean;
+
+	/**
+	 * An observable flag set to `true` when the input contains no text, i.e.
+	 * when {@link #value} is `''`, `null`, or `false`.
+	 *
+	 * @readonly
+	 * @observable
+	 * @default true
+	 */
+	declare public isEmpty: boolean;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale?: Locale ) {
+		super( locale );
+
+		this.set( 'value', undefined );
+		this.set( 'id', undefined );
+		this.set( 'placeholder', undefined );
+		this.set( 'isReadOnly', false );
+		this.set( 'hasError', false );
+		this.set( 'ariaDescribedById', undefined );
+
+		this.focusTracker = new FocusTracker();
+
+		this.bind( 'isFocused' ).to( this.focusTracker );
+		this.set( 'isEmpty', true );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public override render(): void {
+		super.render();
+
+		this.focusTracker.add( this.element! );
+
+		this._setDomElementValue( this.value );
+		this._updateIsEmpty();
+
+		// Bind `this.value` to the DOM element's value.
+		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
+		this.on<ObservableChangeEvent>( 'change:value', ( evt, name, value ) => {
+			this._setDomElementValue( value );
+			this._updateIsEmpty();
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public override destroy(): void {
+		super.destroy();
+
+		this.focusTracker.destroy();
+	}
+
+	/**
+	 * Moves the focus to the input and selects the value.
+	 */
+	public select(): void {
+		this.element!.select();
+	}
+
+	/**
+	 * Focuses the input.
+	 */
+	public focus(): void {
+		this.element!.focus();
+	}
+
+	/**
+	 * Updates the {@link #isEmpty} property value on demand.
+	 */
+	protected _updateIsEmpty(): void {
+		this.isEmpty = isInputElementEmpty( this.element! );
+	}
+
+	/**
+	 * Sets the `value` property of the {@link #element DOM element} on demand.
+	 */
+	private _setDomElementValue( value: any ) {
+		this.element!.value = ( !value && value !== 0 ) ? '' : value;
+	}
+}
+
+function isInputElementEmpty( domElement: HTMLInputElement | HTMLTextAreaElement ) {
+	return !domElement.value;
+}
diff --git a/packages/ckeditor5-ui/src/input/inputview.ts b/packages/ckeditor5-ui/src/input/inputview.ts
index 746cbda313e..c17d71725e8 100644
--- a/packages/ckeditor5-ui/src/input/inputview.ts
+++ b/packages/ckeditor5-ui/src/input/inputview.ts
@@ -7,90 +7,17 @@
  * @module ui/input/inputview
  */
 
-import View from '../view';
-
 import {
-	FocusTracker,
-	type Locale,
-	type ObservableChangeEvent
+	type Locale
 } from '@ckeditor/ckeditor5-utils';
 
 import '../../theme/components/input/input.css';
+import InputBase from './inputbase';
 
 /**
  * The base input view class.
  */
-export default class InputView extends View<HTMLInputElement> {
-	/**
-	 * Stores information about the editor UI focus and propagates it so various plugins and components
-	 * are unified as a focus group.
-	 */
-	public readonly focusTracker: FocusTracker;
-
-	/**
-	 * The value of the input.
-	 *
-	 * @observable
-	 */
-	declare public value: string | undefined;
-
-	/**
-	 * The `id` attribute of the input (i.e. to pair with a `<label>` element).
-	 *
-	 * @observable
-	 */
-	declare public id: string | undefined;
-
-	/**
-	 * The `placeholder` attribute of the input.
-	 *
-	 * @observable
-	 */
-	declare public placeholder: string | undefined;
-
-	/**
-	 * Controls whether the input view is in read-only mode.
-	 *
-	 * @observable
-	 */
-	declare public isReadOnly: boolean;
-
-	/**
-	 * Set to `true` when the field has some error. Usually controlled via
-	 * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
-	 *
-	 * @observable
-	 */
-	declare public hasError: boolean;
-
-	/**
-	 * The `id` of the element describing this field, e.g. when it has
-	 * some error; it helps screen readers read the error text.
-	 *
-	 * @observable
-	 */
-	declare public ariaDescribedById: string | undefined;
-
-	/**
-	 * An observable flag set to `true` when the input is currently focused by the user.
-	 * Set to `false` otherwise.
-	 *
-	 * @readonly
-	 * @observable
-	 * @default false
-	 */
-	declare public isFocused: boolean;
-
-	/**
-	 * An observable flag set to `true` when the input contains no text, i.e.
-	 * when {@link #value} is `''`, `null`, or `false`.
-	 *
-	 * @readonly
-	 * @observable
-	 * @default true
-	 */
-	declare public isEmpty: boolean;
-
+export default class InputView extends InputBase {
 	/**
 	 * Corresponds to the `inputmode` DOM attribute. Can be `text`, `numeric`, `decimal`, etc.
 	 *
@@ -105,17 +32,6 @@ export default class InputView extends View<HTMLInputElement> {
 	constructor( locale?: Locale ) {
 		super( locale );
 
-		this.set( 'value', undefined );
-		this.set( 'id', undefined );
-		this.set( 'placeholder', undefined );
-		this.set( 'isReadOnly', false );
-		this.set( 'hasError', false );
-		this.set( 'ariaDescribedById', undefined );
-
-		this.focusTracker = new FocusTracker();
-
-		this.bind( 'isFocused' ).to( this.focusTracker );
-		this.set( 'isEmpty', true );
 		this.set( 'inputMode', 'text' );
 
 		const bind = this.bindTemplate;
@@ -146,66 +62,6 @@ export default class InputView extends View<HTMLInputElement> {
 			}
 		} );
 	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public override render(): void {
-		super.render();
-
-		this.focusTracker.add( this.element! );
-
-		this._setDomElementValue( this.value );
-		this._updateIsEmpty();
-
-		// Bind `this.value` to the DOM element's value.
-		// We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
-		this.on<ObservableChangeEvent>( 'change:value', ( evt, name, value ) => {
-			this._setDomElementValue( value );
-			this._updateIsEmpty();
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	public override destroy(): void {
-		super.destroy();
-
-		this.focusTracker.destroy();
-	}
-
-	/**
-	 * Moves the focus to the input and selects the value.
-	 */
-	public select(): void {
-		this.element!.select();
-	}
-
-	/**
-	 * Focuses the input.
-	 */
-	public focus(): void {
-		this.element!.focus();
-	}
-
-	/**
-	 * Updates the {@link #isEmpty} property value on demand.
-	 */
-	private _updateIsEmpty() {
-		this.isEmpty = isInputElementEmpty( this.element! );
-	}
-
-	/**
-	 * Sets the `value` property of the {@link #element DOM element} on demand.
-	 */
-	private _setDomElementValue( value: any ) {
-		this.element!.value = ( !value && value !== 0 ) ? '' : value;
-	}
-}
-
-function isInputElementEmpty( domElement: HTMLInputElement ) {
-	return !domElement.value;
 }
 
 /**
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
new file mode 100644
index 00000000000..7b869406435
--- /dev/null
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -0,0 +1,65 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/textarea/textareaview
+ */
+
+import {
+	type Locale
+} from '@ckeditor/ckeditor5-utils';
+
+import '../../theme/components/input/input.css';
+import InputBase from '../input/inputbase';
+
+/**
+ * The base input view class.
+ */
+export default class TextareaView extends InputBase<HTMLTextAreaElement> {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale?: Locale ) {
+		super( locale );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'textarea',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				readonly: bind.to( 'isReadOnly' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			on: {
+				input: bind.to( ( ...args ) => {
+					this.fire( 'input', ...args );
+					this._updateIsEmpty();
+				} ),
+				change: bind.to( this._updateIsEmpty.bind( this ) )
+			}
+		} );
+	}
+}
+
+/**
+ * Fired when the user types in the textarea. Corresponds to the native
+ * DOM `input` event.
+ *
+ * @eventName ~InputView#input
+ */
+export type TextareaInputEvent = {
+	name: 'input';
+	args: [ InputEvent ];
+};
diff --git a/packages/ckeditor5-ui/tests/input/inputbase.js b/packages/ckeditor5-ui/tests/input/inputbase.js
new file mode 100644
index 00000000000..90683a3ea11
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/input/inputbase.js
@@ -0,0 +1,97 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global Event */
+
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import InputBase from '../../src/input/inputbase';
+
+describe( 'InputBase', () => {
+	let view;
+
+	class Input extends InputBase {
+		constructor() {
+			super();
+
+			this.setTemplate( {
+				tag: 'input'
+			} );
+		}
+	}
+
+	beforeEach( () => {
+		view = new Input();
+
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should set the #isFocused observable property', () => {
+			expect( view.isFocused ).to.be.false;
+		} );
+
+		it( 'should set the #isEmpty observable property', () => {
+			expect( view.isEmpty ).to.be.true;
+		} );
+
+		it( 'should set the #hasError observable property', () => {
+			expect( view.hasError ).to.be.false;
+		} );
+
+		it( 'should set the #isReadOnly observable property', () => {
+			expect( view.isReadOnly ).to.be.false;
+		} );
+
+		it( 'should create an instance of FocusTracker under #focusTracker property', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+	} );
+
+	describe( 'render()', () => {
+		it( 'registers #element in the #focusTracker', () => {
+			expect( view.isFocused ).to.be.false;
+
+			view.element.dispatchEvent( new Event( 'focus' ) );
+
+			expect( view.isFocused ).to.be.true;
+		} );
+	} );
+
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
+	describe( 'select()', () => {
+		it( 'should select input value', () => {
+			const selectSpy = sinon.spy( view.element, 'select' );
+
+			view.select();
+
+			expect( selectSpy.calledOnce ).to.true;
+
+			selectSpy.restore();
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the input in DOM', () => {
+			const spy = sinon.spy( view.element, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/input/inputview.js b/packages/ckeditor5-ui/tests/input/inputview.js
index a2747dfd6ef..9811cf5307d 100644
--- a/packages/ckeditor5-ui/tests/input/inputview.js
+++ b/packages/ckeditor5-ui/tests/input/inputview.js
@@ -5,7 +5,6 @@
 
 /* global Event */
 
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import InputView from '../../src/input/inputview';
 
 describe( 'InputView', () => {
@@ -31,29 +30,9 @@ describe( 'InputView', () => {
 			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
 		} );
 
-		it( 'should set the #isFocused observable property', () => {
-			expect( view.isFocused ).to.be.false;
-		} );
-
-		it( 'should set the #isEmpty observable property', () => {
-			expect( view.isEmpty ).to.be.true;
-		} );
-
-		it( 'should set the #hasError observable property', () => {
-			expect( view.hasError ).to.be.false;
-		} );
-
-		it( 'should set the #isReadOnly observable property', () => {
-			expect( view.isReadOnly ).to.be.false;
-		} );
-
 		it( 'should set the #inputMode observable property', () => {
 			expect( view.inputMode ).to.equal( 'text' );
 		} );
-
-		it( 'should create an instance of FocusTracker under #focusTracker property', () => {
-			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
-		} );
 	} );
 
 	describe( 'DOM bindings', () => {
@@ -219,46 +198,4 @@ describe( 'InputView', () => {
 			} );
 		} );
 	} );
-
-	describe( 'render()', () => {
-		it( 'registers #element in the #focusTracker', () => {
-			expect( view.isFocused ).to.be.false;
-
-			view.element.dispatchEvent( new Event( 'focus' ) );
-
-			expect( view.isFocused ).to.be.true;
-		} );
-	} );
-
-	describe( 'destroy()', () => {
-		it( 'should destroy the FocusTracker instance', () => {
-			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
-
-			view.destroy();
-
-			sinon.assert.calledOnce( destroySpy );
-		} );
-	} );
-
-	describe( 'select()', () => {
-		it( 'should select input value', () => {
-			const selectSpy = sinon.spy( view.element, 'select' );
-
-			view.select();
-
-			expect( selectSpy.calledOnce ).to.true;
-
-			selectSpy.restore();
-		} );
-	} );
-
-	describe( 'focus()', () => {
-		it( 'focuses the input in DOM', () => {
-			const spy = sinon.spy( view.element, 'focus' );
-
-			view.focus();
-
-			sinon.assert.calledOnce( spy );
-		} );
-	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/textarea/textarea.js b/packages/ckeditor5-ui/tests/textarea/textarea.js
new file mode 100644
index 00000000000..36e94055c93
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/textarea/textarea.js
@@ -0,0 +1,186 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global Event */
+
+import TextareaView from '../../src/textarea/textareaview';
+
+describe( 'TextareaView', () => {
+	let view, ariaDescribedById;
+
+	beforeEach( () => {
+		ariaDescribedById = 'ck-error-1234567890';
+		view = new TextareaView();
+
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should create element from template', () => {
+			expect( view.element.tagName ).to.equal( 'TEXTAREA' );
+			expect( view.element.getAttribute( 'type' ) ).to.be.null;
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		beforeEach( () => {
+			view.value = 'foo';
+			view.id = 'bar';
+		} );
+
+		describe( 'value', () => {
+			it( 'should react on view#value', () => {
+				expect( view.element.value ).to.equal( 'foo' );
+
+				view.value = 'baz';
+
+				expect( view.element.value ).to.equal( 'baz' );
+
+				// To be sure that value can be changed multiple times using inline value attribute.
+				// There was a related bug in Chrome.
+				view.value = 'biz';
+
+				expect( view.element.value ).to.equal( 'biz' );
+			} );
+
+			it( 'should set to empty string when using `falsy` values', () => {
+				[ undefined, false, null ].forEach( value => {
+					view.value = value;
+
+					expect( view.element.value ).to.equal( '' );
+				} );
+			} );
+
+			// See ckeditor5-ui/issues/335.
+			it( 'should set element value when value was defined before view#render', () => {
+				view = new TextareaView();
+
+				view.value = 'baz';
+
+				view.render();
+
+				expect( view.element.value ).to.equal( 'baz' );
+			} );
+
+			it( 'should update along with the #isEmpty property', () => {
+				view.value = 'foo';
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.value = '';
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+
+		describe( 'id', () => {
+			it( 'should react on view#id', () => {
+				expect( view.element.id ).to.equal( 'bar' );
+
+				view.id = 'baz';
+
+				expect( view.element.id ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'placeholder', () => {
+			it( 'should react on view#placeholder', () => {
+				expect( view.element.placeholder ).to.equal( '' );
+
+				view.placeholder = 'baz';
+
+				expect( view.element.placeholder ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'isReadOnly', () => {
+			it( 'should react on view#isReadOnly', () => {
+				expect( view.element.readOnly ).to.false;
+
+				view.isReadOnly = true;
+
+				expect( view.element.readOnly ).to.true;
+			} );
+		} );
+
+		describe( 'class', () => {
+			it( 'should react on view#hasErrors', () => {
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
+
+				view.hasError = true;
+
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isFocused', () => {
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
+
+				view.isFocused = true;
+
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isEmpty', () => {
+				view.value = '';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
+
+				view.value = 'bar';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
+			} );
+		} );
+
+		describe( 'aria-invalid', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
+
+				view.hasError = true;
+
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
+			} );
+		} );
+
+		describe( 'aria-describedby', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
+
+				view.ariaDescribedById = ariaDescribedById;
+
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
+			} );
+		} );
+
+		describe( 'textarea event', () => {
+			it( 'triggers view#input', () => {
+				const spy = sinon.spy();
+
+				view.on( 'input', spy );
+
+				view.element.dispatchEvent( new Event( 'input' ) );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWith( spy, sinon.match.object );
+			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/10431
+			it( 'should trigger update of the #isEmpty property', () => {
+				view.element.value = 'foo';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.element.value = '';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+	} );
+} );

From a45d9eb68ab7deb767bb49171a4d07134bf7f08a Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Thu, 31 Aug 2023 09:16:11 +0200
Subject: [PATCH 03/84] Fix docs

---
 packages/ckeditor5-ui/src/input/inputview.ts                  | 2 +-
 packages/ckeditor5-ui/src/textarea/textareaview.ts            | 4 ++--
 .../tests/textarea/{textarea.js => textareaview.js}           | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/ckeditor5-ui/tests/textarea/{textarea.js => textareaview.js} (100%)

diff --git a/packages/ckeditor5-ui/src/input/inputview.ts b/packages/ckeditor5-ui/src/input/inputview.ts
index c17d71725e8..a3f84697ac1 100644
--- a/packages/ckeditor5-ui/src/input/inputview.ts
+++ b/packages/ckeditor5-ui/src/input/inputview.ts
@@ -15,7 +15,7 @@ import '../../theme/components/input/input.css';
 import InputBase from './inputbase';
 
 /**
- * The base input view class.
+ * The input view class.
  */
 export default class InputView extends InputBase {
 	/**
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 7b869406435..be492f35b2c 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -15,7 +15,7 @@ import '../../theme/components/input/input.css';
 import InputBase from '../input/inputbase';
 
 /**
- * The base input view class.
+ * The textarea view class.
  */
 export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	/**
@@ -57,7 +57,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
  * Fired when the user types in the textarea. Corresponds to the native
  * DOM `input` event.
  *
- * @eventName ~InputView#input
+ * @eventName ~TextareaView#input
  */
 export type TextareaInputEvent = {
 	name: 'input';
diff --git a/packages/ckeditor5-ui/tests/textarea/textarea.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
similarity index 100%
rename from packages/ckeditor5-ui/tests/textarea/textarea.js
rename to packages/ckeditor5-ui/tests/textarea/textareaview.js

From 961f69bb5ad65f9aaa5e3721f98ccf9fdd810318 Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Mon, 4 Sep 2023 10:14:39 +0200
Subject: [PATCH 04/84] Spinner component

---
 packages/ckeditor5-ui/src/index.ts            |  2 +
 .../ckeditor5-ui/src/spinner/spinnerview.ts   | 55 +++++++++++++++++++
 .../ckeditor5-ui/tests/spinner/spinner.js     | 44 +++++++++++++++
 .../theme/components/spinner/spinner.css      | 37 +++++++++++++
 4 files changed, 138 insertions(+)
 create mode 100644 packages/ckeditor5-ui/src/spinner/spinnerview.ts
 create mode 100644 packages/ckeditor5-ui/tests/spinner/spinner.js
 create mode 100644 packages/ckeditor5-ui/theme/components/spinner/spinner.css

diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 74375d83000..6ae4ec81ec1 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -76,6 +76,8 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template, type TemplateDefinition } from './template';
 
+export { default as SpinnerView } from './spinner/spinnerview';
+
 export { default as ToolbarView } from './toolbar/toolbarview';
 export { default as ToolbarLineBreakView } from './toolbar/toolbarlinebreakview';
 export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
diff --git a/packages/ckeditor5-ui/src/spinner/spinnerview.ts b/packages/ckeditor5-ui/src/spinner/spinnerview.ts
new file mode 100644
index 00000000000..48683e084bf
--- /dev/null
+++ b/packages/ckeditor5-ui/src/spinner/spinnerview.ts
@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/spinner/spinnerview
+ */
+
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+
+import View from '../view';
+
+import '../../theme/components/spinner/spinner.css';
+
+/**
+ * The spinner view class.
+ */
+export default class SpinnerView extends View {
+	/**
+	 * Controls whether the spinner is visible.
+	 *
+	 * @observable
+	 * @default false
+	 */
+	declare public isVisible: boolean;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale?: Locale ) {
+		super( locale );
+
+		this.set( 'isVisible', false );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'span',
+			attributes: {
+				class: [
+					'ck',
+					'ck-spinner-container',
+					bind.if( 'isVisible', 'ck-hidden', value => !value )
+				]
+			},
+			children: [ {
+				tag: 'span',
+				attributes: {
+					class: [ 'ck', 'ck-spinner' ]
+				}
+			} ]
+		} );
+	}
+}
diff --git a/packages/ckeditor5-ui/tests/spinner/spinner.js b/packages/ckeditor5-ui/tests/spinner/spinner.js
new file mode 100644
index 00000000000..df991060ff7
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/spinner/spinner.js
@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import SpinnerView from '../../src/spinner/spinnerview';
+
+describe( 'SpinnerView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new SpinnerView();
+		view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'sets #isVisible', () => {
+			expect( view.isVisible ).to.equal( false );
+		} );
+
+		it( 'creates element from template', () => {
+			expect( view.element.tagName ).to.equal( 'SPAN' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-spinner-container' ) ).to.be.true;
+
+			expect( view.element.children[ 0 ].tagName ).to.equal( 'SPAN' );
+			expect( view.element.children[ 0 ].classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.children[ 0 ].classList.contains( 'ck-spinner' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'bindings', () => {
+		it( 'should react to changes in view#isVisible', () => {
+			view.isVisible = true;
+
+			expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.false;
+
+			view.isVisible = false;
+
+			expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.true;
+		} );
+	} );
+} );
+
diff --git a/packages/ckeditor5-ui/theme/components/spinner/spinner.css b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
new file mode 100644
index 00000000000..a3ec050e329
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	display: block;
+	position: relative;
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	animation: 1.5s infinite rotate linear;
+}
+
+.ck.ck-spinner {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	border-radius: 50%;
+	border: 2px solid var(--ck-color-text);
+	border-top-color: transparent;
+	transform: translateY(-50%);
+	z-index: 1;
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(360deg)
+	}
+}

From 06ef3d3bbed89807ab9a1cd596c670ac770982a0 Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 8 Sep 2023 10:55:51 +0200
Subject: [PATCH 05/84] Refactoring

---
 .../components/spinner/spinner.css            |  29 +++
 packages/ckeditor5-ui/src/input/inputbase.ts  |  27 +++
 packages/ckeditor5-ui/src/input/inputview.ts  |  24 +--
 .../ckeditor5-ui/src/labeledfield/utils.ts    |  54 ++++++
 .../ckeditor5-ui/src/spinner/spinnerview.ts   |   6 +-
 .../ckeditor5-ui/src/textarea/textareaview.ts |  46 ++---
 .../ckeditor5-ui/tests/input/inputbase.js     | 168 ++++++++++++++++--
 .../ckeditor5-ui/tests/input/inputview.js     | 152 +---------------
 .../ckeditor5-ui/tests/labeledfield/utils.js  |  77 +++++++-
 .../tests/textarea/textareaview.js            | 152 +---------------
 .../theme/components/spinner/spinner.css      |  14 --
 11 files changed, 369 insertions(+), 380 deletions(-)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css
new file mode 100644
index 00000000000..16223a79ead
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	animation: 1.5s infinite rotate linear;
+}
+
+.ck.ck-spinner {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	border-radius: 50%;
+	border: 2px solid var(--ck-color-text);
+	border-top-color: transparent;
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(360deg)
+	}
+}
+
diff --git a/packages/ckeditor5-ui/src/input/inputbase.ts b/packages/ckeditor5-ui/src/input/inputbase.ts
index d32a27839b3..9ffe6cac166 100644
--- a/packages/ckeditor5-ui/src/input/inputbase.ts
+++ b/packages/ckeditor5-ui/src/input/inputbase.ts
@@ -106,6 +106,33 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 
 		this.bind( 'isFocused' ).to( this.focusTracker );
 		this.set( 'isEmpty', true );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'input',
+			attributes: {
+				class: [
+					'ck',
+					'ck-input',
+					bind.if( 'isFocused', 'ck-input_focused' ),
+					bind.if( 'isEmpty', 'ck-input-text_empty' ),
+					bind.if( 'hasError', 'ck-error' )
+				],
+				id: bind.to( 'id' ),
+				placeholder: bind.to( 'placeholder' ),
+				readonly: bind.to( 'isReadOnly' ),
+				'aria-invalid': bind.if( 'hasError', true ),
+				'aria-describedby': bind.to( 'ariaDescribedById' )
+			},
+			on: {
+				input: bind.to( ( ...args ) => {
+					this.fire( 'input', ...args );
+					this._updateIsEmpty();
+				} ),
+				change: bind.to( this._updateIsEmpty.bind( this ) )
+			}
+		} );
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/src/input/inputview.ts b/packages/ckeditor5-ui/src/input/inputview.ts
index a3f84697ac1..e2fae1f7e2b 100644
--- a/packages/ckeditor5-ui/src/input/inputview.ts
+++ b/packages/ckeditor5-ui/src/input/inputview.ts
@@ -36,29 +36,9 @@ export default class InputView extends InputBase {
 
 		const bind = this.bindTemplate;
 
-		this.setTemplate( {
-			tag: 'input',
+		this.extendTemplate( {
 			attributes: {
-				class: [
-					'ck',
-					'ck-input',
-					bind.if( 'isFocused', 'ck-input_focused' ),
-					bind.if( 'isEmpty', 'ck-input-text_empty' ),
-					bind.if( 'hasError', 'ck-error' )
-				],
-				id: bind.to( 'id' ),
-				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isReadOnly' ),
-				inputmode: bind.to( 'inputMode' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' )
-			},
-			on: {
-				input: bind.to( ( ...args ) => {
-					this.fire( 'input', ...args );
-					this._updateIsEmpty();
-				} ),
-				change: bind.to( this._updateIsEmpty.bind( this ) )
+				inputmode: bind.to( 'inputMode' )
 			}
 		} );
 	}
diff --git a/packages/ckeditor5-ui/src/labeledfield/utils.ts b/packages/ckeditor5-ui/src/labeledfield/utils.ts
index f95796feb60..cf3136b1aed 100644
--- a/packages/ckeditor5-ui/src/labeledfield/utils.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/utils.ts
@@ -9,6 +9,7 @@
 
 import InputTextView from '../inputtext/inputtextview';
 import InputNumberView from '../inputnumber/inputnumberview';
+import TextareaView from '../textarea/textareaview';
 import { createDropdown } from '../dropdown/utils';
 
 import type LabeledFieldView from './labeledfieldview';
@@ -122,6 +123,59 @@ export function createLabeledInputNumber(
 	return inputView;
 }
 
+/**
+ * A helper for creating labeled textarea.
+ *
+ * It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView input text} that is
+ * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
+ *
+ * The helper does the following:
+ *
+ * * It sets input's `id` and `ariaDescribedById` attributes.
+ * * It binds input's `isReadOnly` to the labeled view.
+ * * It binds input's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the input.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const labeledInputView = new LabeledFieldView( locale, createLabeledTextarea );
+ * console.log( labeledInputView.fieldView ); // A textarea instance.
+ * ```
+ *
+ * @param labeledFieldView The instance of the labeled field view.
+ * @param viewUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
+ * @param statusUid An UID string that allows DOM logical connection between the
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
+ * @returns The input text view instance.
+ */
+export function createLabeledTextarea(
+	labeledFieldView: LabeledFieldView,
+	viewUid: string,
+	statusUid: string
+): TextareaView {
+	const textareaView = new TextareaView( labeledFieldView.locale );
+
+	textareaView.set( {
+		id: viewUid,
+		ariaDescribedById: statusUid
+	} );
+
+	textareaView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
+	textareaView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
+
+	textareaView.on<InputViewInputEvent>( 'input', () => {
+		// UX: Make the error text disappear and disable the error indicator as the user
+		// starts fixing the errors.
+		labeledFieldView.errorText = null;
+	} );
+
+	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( textareaView );
+
+	return textareaView;
+}
+
 /**
  * A helper for creating labeled dropdowns.
  *
diff --git a/packages/ckeditor5-ui/src/spinner/spinnerview.ts b/packages/ckeditor5-ui/src/spinner/spinnerview.ts
index 48683e084bf..c3fdfa29e2d 100644
--- a/packages/ckeditor5-ui/src/spinner/spinnerview.ts
+++ b/packages/ckeditor5-ui/src/spinner/spinnerview.ts
@@ -7,8 +7,6 @@
  * @module ui/spinner/spinnerview
  */
 
-import { type Locale } from '@ckeditor/ckeditor5-utils';
-
 import View from '../view';
 
 import '../../theme/components/spinner/spinner.css';
@@ -28,8 +26,8 @@ export default class SpinnerView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale?: Locale ) {
-		super( locale );
+	constructor() {
+		super();
 
 		this.set( 'isVisible', false );
 
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index be492f35b2c..4399df7da9d 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -18,48 +18,30 @@ import InputBase from '../input/inputbase';
  * The textarea view class.
  */
 export default class TextareaView extends InputBase<HTMLTextAreaElement> {
+	/**
+	 * Specifies the visible height of a text area, in lines.
+	 *
+	 * @observable
+	 * @default 1
+	 */
+	declare public rows: number;
+
 	/**
 	 * @inheritDoc
 	 */
 	constructor( locale?: Locale ) {
 		super( locale );
 
+		this.set( 'rows', 1 );
+
 		const bind = this.bindTemplate;
 
-		this.setTemplate( {
-			tag: 'textarea',
+		this.template!.tag = 'textarea';
+
+		this.extendTemplate( {
 			attributes: {
-				class: [
-					'ck',
-					'ck-input',
-					bind.if( 'isFocused', 'ck-input_focused' ),
-					bind.if( 'isEmpty', 'ck-input-text_empty' ),
-					bind.if( 'hasError', 'ck-error' )
-				],
-				id: bind.to( 'id' ),
-				placeholder: bind.to( 'placeholder' ),
-				readonly: bind.to( 'isReadOnly' ),
-				'aria-invalid': bind.if( 'hasError', true ),
-				'aria-describedby': bind.to( 'ariaDescribedById' )
-			},
-			on: {
-				input: bind.to( ( ...args ) => {
-					this.fire( 'input', ...args );
-					this._updateIsEmpty();
-				} ),
-				change: bind.to( this._updateIsEmpty.bind( this ) )
+				rows: bind.to( 'rows' )
 			}
 		} );
 	}
 }
-
-/**
- * Fired when the user types in the textarea. Corresponds to the native
- * DOM `input` event.
- *
- * @eventName ~TextareaView#input
- */
-export type TextareaInputEvent = {
-	name: 'input';
-	args: [ InputEvent ];
-};
diff --git a/packages/ckeditor5-ui/tests/input/inputbase.js b/packages/ckeditor5-ui/tests/input/inputbase.js
index 90683a3ea11..c36faaf650f 100644
--- a/packages/ckeditor5-ui/tests/input/inputbase.js
+++ b/packages/ckeditor5-ui/tests/input/inputbase.js
@@ -7,22 +7,16 @@
 
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import InputBase from '../../src/input/inputbase';
+import InputView from '../../src/input/inputview';
 
 describe( 'InputBase', () => {
-	let view;
+	let view, ariaDescribedById;
 
-	class Input extends InputBase {
-		constructor() {
-			super();
-
-			this.setTemplate( {
-				tag: 'input'
-			} );
-		}
-	}
+	class Input extends InputBase {}
 
 	beforeEach( () => {
 		view = new Input();
+		ariaDescribedById = 'ck-error-1234567890';
 
 		view.render();
 	} );
@@ -94,4 +88,158 @@ describe( 'InputBase', () => {
 			sinon.assert.calledOnce( spy );
 		} );
 	} );
+
+	describe( 'DOM bindings', () => {
+		beforeEach( () => {
+			view.value = 'foo';
+			view.id = 'bar';
+		} );
+
+		describe( 'value', () => {
+			it( 'should react on view#value', () => {
+				expect( view.element.value ).to.equal( 'foo' );
+
+				view.value = 'baz';
+
+				expect( view.element.value ).to.equal( 'baz' );
+
+				// To be sure that value can be changed multiple times using inline value attribute.
+				// There was a related bug in Chrome.
+				view.value = 'biz';
+
+				expect( view.element.value ).to.equal( 'biz' );
+			} );
+
+			it( 'should set to empty string when using `falsy` values', () => {
+				[ undefined, false, null ].forEach( value => {
+					view.value = value;
+
+					expect( view.element.value ).to.equal( '' );
+				} );
+			} );
+
+			// See ckeditor5-ui/issues/335.
+			it( 'should set element value when value was defined before view#render', () => {
+				view = new InputView();
+
+				view.value = 'baz';
+
+				view.render();
+
+				expect( view.element.value ).to.equal( 'baz' );
+			} );
+
+			it( 'should update along with the #isEmpty property', () => {
+				view.value = 'foo';
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.value = '';
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+
+		describe( 'id', () => {
+			it( 'should react on view#id', () => {
+				expect( view.element.id ).to.equal( 'bar' );
+
+				view.id = 'baz';
+
+				expect( view.element.id ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'placeholder', () => {
+			it( 'should react on view#placeholder', () => {
+				expect( view.element.placeholder ).to.equal( '' );
+
+				view.placeholder = 'baz';
+
+				expect( view.element.placeholder ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'isReadOnly', () => {
+			it( 'should react on view#isReadOnly', () => {
+				expect( view.element.readOnly ).to.false;
+
+				view.isReadOnly = true;
+
+				expect( view.element.readOnly ).to.true;
+			} );
+		} );
+
+		describe( 'class', () => {
+			it( 'should react on view#hasErrors', () => {
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
+
+				view.hasError = true;
+
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isFocused', () => {
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
+
+				view.isFocused = true;
+
+				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
+			} );
+
+			it( 'should react on view#isEmpty', () => {
+				view.value = '';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
+
+				view.value = 'bar';
+
+				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
+			} );
+		} );
+
+		describe( 'aria-invalid', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
+
+				view.hasError = true;
+
+				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
+			} );
+		} );
+
+		describe( 'aria-describedby', () => {
+			it( 'should react on view#hasError', () => {
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
+
+				view.ariaDescribedById = ariaDescribedById;
+
+				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
+			} );
+		} );
+
+		describe( 'input event', () => {
+			it( 'triggers view#input', () => {
+				const spy = sinon.spy();
+
+				view.on( 'input', spy );
+
+				view.element.dispatchEvent( new Event( 'input' ) );
+				sinon.assert.calledOnce( spy );
+				sinon.assert.calledWith( spy, sinon.match.object );
+			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/10431
+			it( 'should trigger update of the #isEmpty property', () => {
+				view.element.value = 'foo';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.false;
+
+				view.element.value = '';
+				view.element.dispatchEvent( new Event( 'input' ) );
+
+				expect( view.isEmpty ).to.be.true;
+			} );
+		} );
+	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/input/inputview.js b/packages/ckeditor5-ui/tests/input/inputview.js
index 9811cf5307d..dc930822bcc 100644
--- a/packages/ckeditor5-ui/tests/input/inputview.js
+++ b/packages/ckeditor5-ui/tests/input/inputview.js
@@ -3,15 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
-
 import InputView from '../../src/input/inputview';
 
 describe( 'InputView', () => {
-	let view, ariaDescribedById;
+	let view;
 
 	beforeEach( () => {
-		ariaDescribedById = 'ck-error-1234567890';
 		view = new InputView();
 
 		view.render();
@@ -41,80 +38,6 @@ describe( 'InputView', () => {
 			view.id = 'bar';
 		} );
 
-		describe( 'value', () => {
-			it( 'should react on view#value', () => {
-				expect( view.element.value ).to.equal( 'foo' );
-
-				view.value = 'baz';
-
-				expect( view.element.value ).to.equal( 'baz' );
-
-				// To be sure that value can be changed multiple times using inline value attribute.
-				// There was a related bug in Chrome.
-				view.value = 'biz';
-
-				expect( view.element.value ).to.equal( 'biz' );
-			} );
-
-			it( 'should set to empty string when using `falsy` values', () => {
-				[ undefined, false, null ].forEach( value => {
-					view.value = value;
-
-					expect( view.element.value ).to.equal( '' );
-				} );
-			} );
-
-			// See ckeditor5-ui/issues/335.
-			it( 'should set element value when value was defined before view#render', () => {
-				view = new InputView();
-
-				view.value = 'baz';
-
-				view.render();
-
-				expect( view.element.value ).to.equal( 'baz' );
-			} );
-
-			it( 'should update along with the #isEmpty property', () => {
-				view.value = 'foo';
-
-				expect( view.isEmpty ).to.be.false;
-
-				view.value = '';
-				expect( view.isEmpty ).to.be.true;
-			} );
-		} );
-
-		describe( 'id', () => {
-			it( 'should react on view#id', () => {
-				expect( view.element.id ).to.equal( 'bar' );
-
-				view.id = 'baz';
-
-				expect( view.element.id ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'placeholder', () => {
-			it( 'should react on view#placeholder', () => {
-				expect( view.element.placeholder ).to.equal( '' );
-
-				view.placeholder = 'baz';
-
-				expect( view.element.placeholder ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'isReadOnly', () => {
-			it( 'should react on view#isReadOnly', () => {
-				expect( view.element.readOnly ).to.false;
-
-				view.isReadOnly = true;
-
-				expect( view.element.readOnly ).to.true;
-			} );
-		} );
-
 		describe( 'inputmode attribute', () => {
 			it( 'should react on view#inputMode', () => {
 				expect( view.element.getAttribute( 'inputmode' ) ).to.equal( 'text' );
@@ -124,78 +47,5 @@ describe( 'InputView', () => {
 				expect( view.element.getAttribute( 'inputmode' ) ).to.equal( 'numeric' );
 			} );
 		} );
-
-		describe( 'class', () => {
-			it( 'should react on view#hasErrors', () => {
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
-
-				view.hasError = true;
-
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isFocused', () => {
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
-
-				view.isFocused = true;
-
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isEmpty', () => {
-				view.value = '';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
-
-				view.value = 'bar';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
-			} );
-		} );
-
-		describe( 'aria-invalid', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
-
-				view.hasError = true;
-
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
-			} );
-		} );
-
-		describe( 'aria-describedby', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
-
-				view.ariaDescribedById = ariaDescribedById;
-
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
-			} );
-		} );
-
-		describe( 'input event', () => {
-			it( 'triggers view#input', () => {
-				const spy = sinon.spy();
-
-				view.on( 'input', spy );
-
-				view.element.dispatchEvent( new Event( 'input' ) );
-				sinon.assert.calledOnce( spy );
-				sinon.assert.calledWith( spy, sinon.match.object );
-			} );
-
-			// https://github.com/ckeditor/ckeditor5/issues/10431
-			it( 'should trigger update of the #isEmpty property', () => {
-				view.element.value = 'foo';
-				view.element.dispatchEvent( new Event( 'input' ) );
-
-				expect( view.isEmpty ).to.be.false;
-
-				view.element.value = '';
-				view.element.dispatchEvent( new Event( 'input' ) );
-
-				expect( view.isEmpty ).to.be.true;
-			} );
-		} );
 	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/labeledfield/utils.js b/packages/ckeditor5-ui/tests/labeledfield/utils.js
index 802d320e2f1..1b8c0f836d4 100644
--- a/packages/ckeditor5-ui/tests/labeledfield/utils.js
+++ b/packages/ckeditor5-ui/tests/labeledfield/utils.js
@@ -6,7 +6,8 @@
 import {
 	createLabeledInputText,
 	createLabeledInputNumber,
-	createLabeledDropdown
+	createLabeledDropdown,
+	createLabeledTextarea
 } from '../../src/labeledfield/utils';
 
 import LabeledFieldView from '../../src/labeledfield/labeledfieldview';
@@ -14,6 +15,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import InputTextView from '../../src/inputtext/inputtextview';
 import InputNumberView from '../../src/inputnumber/inputnumberview';
 import DropdownView from '../../src/dropdown/dropdownview';
+import { TextareaView } from '@ckeditor/ckeditor5-ui';
 
 describe( 'LabeledFieldView utils', () => {
 	let locale;
@@ -175,6 +177,79 @@ describe( 'LabeledFieldView utils', () => {
 		} );
 	} );
 
+	describe( 'createLabeledTextarea()', () => {
+		let labeledTextarea;
+
+		beforeEach( () => {
+			labeledTextarea = new LabeledFieldView( locale, createLabeledTextarea );
+		} );
+
+		afterEach( () => {
+			labeledTextarea.destroy();
+		} );
+
+		it( 'should create an TextareaView instance', () => {
+			expect( labeledTextarea.fieldView ).to.be.instanceOf( TextareaView );
+		} );
+
+		it( 'should pass the Locale to the textarea', () => {
+			expect( labeledTextarea.fieldView.locale ).to.equal( locale );
+		} );
+
+		it( 'should set textarea #id and #ariaDescribedById', () => {
+			labeledTextarea.render();
+
+			expect( labeledTextarea.fieldView.id ).to.equal( labeledTextarea.labelView.for );
+			expect( labeledTextarea.fieldView.ariaDescribedById ).to.equal( labeledTextarea.statusView.element.id );
+		} );
+
+		it( 'should bind textarea\'s #isReadOnly to labeledTextarea#isEnabled', () => {
+			labeledTextarea.isEnabled = true;
+			expect( labeledTextarea.fieldView.isReadOnly ).to.be.false;
+
+			labeledTextarea.isEnabled = false;
+			expect( labeledTextarea.fieldView.isReadOnly ).to.be.true;
+		} );
+
+		it( 'should bind textarea\'s #hasError to labeledTextarea#errorText', () => {
+			labeledTextarea.errorText = 'some error';
+			expect( labeledTextarea.fieldView.hasError ).to.be.true;
+
+			labeledTextarea.errorText = null;
+			expect( labeledTextarea.fieldView.hasError ).to.be.false;
+		} );
+
+		it( 'should bind labeledTextarea#isEmpty to input\'s #isEmpty', () => {
+			labeledTextarea.fieldView.isEmpty = true;
+			expect( labeledTextarea.isEmpty ).to.be.true;
+
+			labeledTextarea.fieldView.isEmpty = false;
+			expect( labeledTextarea.isEmpty ).to.be.false;
+		} );
+
+		it( 'should bind labeledTextarea#isFocused to textarea\'s #isFocused', () => {
+			labeledTextarea.fieldView.isFocused = true;
+			expect( labeledTextarea.isFocused ).to.be.true;
+
+			labeledTextarea.fieldView.isFocused = false;
+			expect( labeledTextarea.isFocused ).to.be.false;
+		} );
+
+		it( 'should bind labeledTextarea#placeholder to textarea\'s #placeholder', () => {
+			labeledTextarea.fieldView.placeholder = null;
+			expect( labeledTextarea.placeholder ).to.be.null;
+
+			labeledTextarea.fieldView.placeholder = 'foo';
+			expect( labeledTextarea.placeholder ).to.equal( 'foo' );
+		} );
+
+		it( 'should clean labeledTextarea#errorText upon textarea\'s DOM "update" event', () => {
+			labeledTextarea.errorText = 'some error';
+			labeledTextarea.fieldView.fire( 'input' );
+			expect( labeledTextarea.errorText ).to.be.null;
+		} );
+	} );
+
 	describe( 'createLabeledDropdown', () => {
 		let labeledDropdown;
 
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 36e94055c93..c0de09ed10d 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -3,15 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
-
 import TextareaView from '../../src/textarea/textareaview';
 
 describe( 'TextareaView', () => {
-	let view, ariaDescribedById;
+	let view;
 
 	beforeEach( () => {
-		ariaDescribedById = 'ck-error-1234567890';
 		view = new TextareaView();
 
 		view.render();
@@ -36,150 +33,13 @@ describe( 'TextareaView', () => {
 			view.id = 'bar';
 		} );
 
-		describe( 'value', () => {
-			it( 'should react on view#value', () => {
-				expect( view.element.value ).to.equal( 'foo' );
-
-				view.value = 'baz';
-
-				expect( view.element.value ).to.equal( 'baz' );
-
-				// To be sure that value can be changed multiple times using inline value attribute.
-				// There was a related bug in Chrome.
-				view.value = 'biz';
-
-				expect( view.element.value ).to.equal( 'biz' );
-			} );
-
-			it( 'should set to empty string when using `falsy` values', () => {
-				[ undefined, false, null ].forEach( value => {
-					view.value = value;
-
-					expect( view.element.value ).to.equal( '' );
-				} );
-			} );
-
-			// See ckeditor5-ui/issues/335.
-			it( 'should set element value when value was defined before view#render', () => {
-				view = new TextareaView();
-
-				view.value = 'baz';
-
-				view.render();
-
-				expect( view.element.value ).to.equal( 'baz' );
-			} );
-
-			it( 'should update along with the #isEmpty property', () => {
-				view.value = 'foo';
-
-				expect( view.isEmpty ).to.be.false;
-
-				view.value = '';
-				expect( view.isEmpty ).to.be.true;
-			} );
-		} );
-
-		describe( 'id', () => {
-			it( 'should react on view#id', () => {
-				expect( view.element.id ).to.equal( 'bar' );
-
-				view.id = 'baz';
-
-				expect( view.element.id ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'placeholder', () => {
-			it( 'should react on view#placeholder', () => {
-				expect( view.element.placeholder ).to.equal( '' );
-
-				view.placeholder = 'baz';
-
-				expect( view.element.placeholder ).to.equal( 'baz' );
-			} );
-		} );
-
-		describe( 'isReadOnly', () => {
-			it( 'should react on view#isReadOnly', () => {
-				expect( view.element.readOnly ).to.false;
-
-				view.isReadOnly = true;
-
-				expect( view.element.readOnly ).to.true;
-			} );
-		} );
-
-		describe( 'class', () => {
-			it( 'should react on view#hasErrors', () => {
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
-
-				view.hasError = true;
-
-				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isFocused', () => {
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.false;
-
-				view.isFocused = true;
-
-				expect( view.element.classList.contains( 'ck-input_focused' ) ).to.be.true;
-			} );
-
-			it( 'should react on view#isEmpty', () => {
-				view.value = '';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
-
-				view.value = 'bar';
-
-				expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.false;
-			} );
-		} );
-
-		describe( 'aria-invalid', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.be.null;
-
-				view.hasError = true;
-
-				expect( view.element.getAttribute( 'aria-invalid' ) ).to.equal( 'true' );
-			} );
-		} );
-
-		describe( 'aria-describedby', () => {
-			it( 'should react on view#hasError', () => {
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.be.null;
-
-				view.ariaDescribedById = ariaDescribedById;
-
-				expect( view.element.getAttribute( 'aria-describedby' ) ).to.equal( ariaDescribedById );
-			} );
-		} );
-
-		describe( 'textarea event', () => {
-			it( 'triggers view#input', () => {
-				const spy = sinon.spy();
-
-				view.on( 'input', spy );
-
-				view.element.dispatchEvent( new Event( 'input' ) );
-				sinon.assert.calledOnce( spy );
-				sinon.assert.calledWith( spy, sinon.match.object );
-			} );
-
-			// https://github.com/ckeditor/ckeditor5/issues/10431
-			it( 'should trigger update of the #isEmpty property', () => {
-				view.element.value = 'foo';
-				view.element.dispatchEvent( new Event( 'input' ) );
-
-				expect( view.isEmpty ).to.be.false;
+		describe( 'rows attribute', () => {
+			it( 'should react on view#inputMode', () => {
+				expect( view.element.getAttribute( 'rows' ) ).to.equal( '1' );
 
-				view.element.value = '';
-				view.element.dispatchEvent( new Event( 'input' ) );
+				view.rows = 5;
 
-				expect( view.isEmpty ).to.be.true;
+				expect( view.element.getAttribute( 'rows' ) ).to.equal( '5' );
 			} );
 		} );
 	} );
diff --git a/packages/ckeditor5-ui/theme/components/spinner/spinner.css b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
index a3ec050e329..16969cc9742 100644
--- a/packages/ckeditor5-ui/theme/components/spinner/spinner.css
+++ b/packages/ckeditor5-ui/theme/components/spinner/spinner.css
@@ -10,9 +10,6 @@
 .ck.ck-spinner-container {
 	display: block;
 	position: relative;
-	width: var(--ck-toolbar-spinner-size);
-	height: var(--ck-toolbar-spinner-size);
-	animation: 1.5s infinite rotate linear;
 }
 
 .ck.ck-spinner {
@@ -21,17 +18,6 @@
 	left: 0;
 	right: 0;
 	margin: 0 auto;
-	width: var(--ck-toolbar-spinner-size);
-	height: var(--ck-toolbar-spinner-size);
-	border-radius: 50%;
-	border: 2px solid var(--ck-color-text);
-	border-top-color: transparent;
 	transform: translateY(-50%);
 	z-index: 1;
 }
-
-@keyframes rotate {
-	to {
-		transform: rotate(360deg)
-	}
-}

From 09df455aa01a1c5c802541093069091bacfd89cc Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 8 Sep 2023 10:59:14 +0200
Subject: [PATCH 06/84] Docs

---
 .../ckeditor5-ui/src/labeledfield/utils.ts    | 20 +++++++++----------
 .../ckeditor5-ui/tests/labeledfield/utils.js  |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ckeditor5-ui/src/labeledfield/utils.ts b/packages/ckeditor5-ui/src/labeledfield/utils.ts
index cf3136b1aed..94401395bfb 100644
--- a/packages/ckeditor5-ui/src/labeledfield/utils.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/utils.ts
@@ -126,29 +126,29 @@ export function createLabeledInputNumber(
 /**
  * A helper for creating labeled textarea.
  *
- * It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView input text} that is
+ * It creates an instance of a {@link module:ui/textarea/textareaview~TextareaView textarea} that is
  * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled view} in DOM.
  *
  * The helper does the following:
  *
- * * It sets input's `id` and `ariaDescribedById` attributes.
- * * It binds input's `isReadOnly` to the labeled view.
- * * It binds input's `hasError` to the labeled view.
- * * It enables a logic that cleans up the error when user starts typing in the input.
+ * * It sets textarea's `id` and `ariaDescribedById` attributes.
+ * * It binds textarea's `isReadOnly` to the labeled view.
+ * * It binds textarea's `hasError` to the labeled view.
+ * * It enables a logic that cleans up the error when user starts typing in the textarea.
  *
  * Usage:
  *
  * ```ts
- * const labeledInputView = new LabeledFieldView( locale, createLabeledTextarea );
- * console.log( labeledInputView.fieldView ); // A textarea instance.
+ * const labeledTextarea = new LabeledFieldView( locale, createLabeledTextarea );
+ * console.log( labeledTextarea.fieldView ); // A textarea instance.
  * ```
  *
  * @param labeledFieldView The instance of the labeled field view.
  * @param viewUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the input.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view's label} and the textarea.
  * @param statusUid An UID string that allows DOM logical connection between the
- * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
- * @returns The input text view instance.
+ * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the textarea.
+ * @returns The textarea view instance.
  */
 export function createLabeledTextarea(
 	labeledFieldView: LabeledFieldView,
diff --git a/packages/ckeditor5-ui/tests/labeledfield/utils.js b/packages/ckeditor5-ui/tests/labeledfield/utils.js
index 1b8c0f836d4..09b63b678b2 100644
--- a/packages/ckeditor5-ui/tests/labeledfield/utils.js
+++ b/packages/ckeditor5-ui/tests/labeledfield/utils.js
@@ -219,7 +219,7 @@ describe( 'LabeledFieldView utils', () => {
 			expect( labeledTextarea.fieldView.hasError ).to.be.false;
 		} );
 
-		it( 'should bind labeledTextarea#isEmpty to input\'s #isEmpty', () => {
+		it( 'should bind labeledTextarea#isEmpty to textarea\'s #isEmpty', () => {
 			labeledTextarea.fieldView.isEmpty = true;
 			expect( labeledTextarea.isEmpty ).to.be.true;
 

From b6ad55547e644b3a2c822f41b8443cc45db0ba01 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 11:09:53 +0200
Subject: [PATCH 07/84] Minor code refactoring.

---
 packages/ckeditor5-ui/src/input/inputview.ts       | 6 ++----
 packages/ckeditor5-ui/src/textarea/textareaview.ts | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-ui/src/input/inputview.ts b/packages/ckeditor5-ui/src/input/inputview.ts
index e2fae1f7e2b..6d1c9316997 100644
--- a/packages/ckeditor5-ui/src/input/inputview.ts
+++ b/packages/ckeditor5-ui/src/input/inputview.ts
@@ -7,12 +7,10 @@
  * @module ui/input/inputview
  */
 
-import {
-	type Locale
-} from '@ckeditor/ckeditor5-utils';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import InputBase from './inputbase';
 
 import '../../theme/components/input/input.css';
-import InputBase from './inputbase';
 
 /**
  * The input view class.
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 4399df7da9d..848116016da 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,12 +7,10 @@
  * @module ui/textarea/textareaview
  */
 
-import {
-	type Locale
-} from '@ckeditor/ckeditor5-utils';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
-import InputBase from '../input/inputbase';
 
 /**
  * The textarea view class.

From f643561dec0a818931434ad756ba5c1019a0c429 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 11:20:38 +0200
Subject: [PATCH 08/84] Tests: Added spinner to the theme manual test.

---
 .../tests/manual/theme.html                    |  3 +++
 .../ckeditor5-theme-lark/tests/manual/theme.js | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/ckeditor5-theme-lark/tests/manual/theme.html b/packages/ckeditor5-theme-lark/tests/manual/theme.html
index d721d1dedcc..59fa17b8561 100644
--- a/packages/ckeditor5-theme-lark/tests/manual/theme.html
+++ b/packages/ckeditor5-theme-lark/tests/manual/theme.html
@@ -92,6 +92,9 @@ <h3>Button: Responsiveness</h3>
 	<h3>Button: Tooltip</h3>
 	<div id="button-tooltip" class="ck ck-reset_all"></div>
 
+	<h3>Button: Spinner</h3>
+	<div id="button-spinner" class="ck ck-reset_all"></div>
+
 <h2>Dropdown</h2>
 
 	<h3>ListDropdown</h3>
diff --git a/packages/ckeditor5-theme-lark/tests/manual/theme.js b/packages/ckeditor5-theme-lark/tests/manual/theme.js
index f255f1f2beb..5ecd7cd4dea 100644
--- a/packages/ckeditor5-theme-lark/tests/manual/theme.js
+++ b/packages/ckeditor5-theme-lark/tests/manual/theme.js
@@ -30,6 +30,7 @@ import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
+import { SpinnerView } from '@ckeditor/ckeditor5-ui';
 
 const locale = new Locale();
 
@@ -71,6 +72,7 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive2': '#button-responsive-2',
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
+	'buttonSpinner': '#button-spinner',
 
 	listDropdown: '#list-dropdown',
 	buttonDropdown: '#button-dropdown',
@@ -273,6 +275,22 @@ function renderButton() {
 			tooltipPosition: 'sw'
 		} )
 	] ) );
+
+	// --- With spinner ------------------------------------------------------------
+
+	const buttonWithSpinner = button( {
+		label: 'Button with spinner',
+		withText: false
+	} );
+
+	const spinnerView = new SpinnerView();
+	spinnerView.isVisible = true;
+
+	buttonWithSpinner.children.add( spinnerView );
+
+	ui.buttonSpinner.add( toolbar( [
+		buttonWithSpinner
+	] ) );
 }
 
 function renderDropdown() {

From 31d1d4435e27231f224e50876b889b58c6be68f5 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 11:55:06 +0200
Subject: [PATCH 09/84] Added IconView#isVisible property with a binding.

---
 packages/ckeditor5-ui/src/icon/iconview.ts   | 10 ++++++++++
 packages/ckeditor5-ui/tests/icon/iconview.js | 16 ++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/ckeditor5-ui/src/icon/iconview.ts b/packages/ckeditor5-ui/src/icon/iconview.ts
index 505b462abde..8e65e30e370 100644
--- a/packages/ckeditor5-ui/src/icon/iconview.ts
+++ b/packages/ckeditor5-ui/src/icon/iconview.ts
@@ -64,6 +64,14 @@ export default class IconView extends View {
 	 */
 	declare public isColorInherited: boolean;
 
+	/**
+	 * Controls whether the icon is visible.
+	 *
+	 * @observable
+	 * @default true
+	 */
+	declare public isVisible: boolean;
+
 	/**
 	 * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
 	 * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.
@@ -93,6 +101,7 @@ export default class IconView extends View {
 		this.set( 'viewBox', '0 0 20 20' );
 		this.set( 'fillColor', '' );
 		this.set( 'isColorInherited', true );
+		this.set( 'isVisible', true );
 
 		this.setTemplate( {
 			tag: 'svg',
@@ -101,6 +110,7 @@ export default class IconView extends View {
 				class: [
 					'ck',
 					'ck-icon',
+					bind.if( 'isVisible', 'ck-hidden', value => !value ),
 
 					// Exclude icon internals from the CSS reset to allow rich (non-monochromatic) icons
 					// (https://github.com/ckeditor/ckeditor5/issues/12599).
diff --git a/packages/ckeditor5-ui/tests/icon/iconview.js b/packages/ckeditor5-ui/tests/icon/iconview.js
index 57b7a1de796..7911b5f2c8c 100644
--- a/packages/ckeditor5-ui/tests/icon/iconview.js
+++ b/packages/ckeditor5-ui/tests/icon/iconview.js
@@ -31,6 +31,10 @@ describe( 'IconView', () => {
 			expect( view.isColorInherited ).to.be.true;
 		} );
 
+		it( 'sets #isVisible', () => {
+			expect( view.isVisible ).to.be.true;
+		} );
+
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'svg' );
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
@@ -62,6 +66,18 @@ describe( 'IconView', () => {
 			} );
 		} );
 
+		describe( '#isVisible', () => {
+			it( 'should react to changes in view#isVisible', () => {
+				view.isVisible = true;
+
+				expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.false;
+
+				view.isVisible = false;
+
+				expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.true;
+			} );
+		} );
+
 		describe( 'inline svg', () => {
 			it( 'should react to changes in view#content', () => {
 				assertIconInnerHTML( view, '' );

From a84b06bdde2b7dc798ade38883679cc1261eccc4 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:23:40 +0200
Subject: [PATCH 10/84] Added loupe icon to ckeditor5-core.

---
 packages/ckeditor5-core/src/index.ts          | 2 ++
 packages/ckeditor5-core/theme/icons/loupe.svg | 1 +
 2 files changed, 3 insertions(+)
 create mode 100644 packages/ckeditor5-core/theme/icons/loupe.svg

diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
index 9cbe6bd1699..2223333e02a 100644
--- a/packages/ckeditor5-core/src/index.ts
+++ b/packages/ckeditor5-core/src/index.ts
@@ -39,6 +39,7 @@ import check from './../theme/icons/check.svg';
 import cog from './../theme/icons/cog.svg';
 import eraser from './../theme/icons/eraser.svg';
 import lowVision from './../theme/icons/low-vision.svg';
+import loupe from './../theme/icons/loupe.svg';
 import image from './../theme/icons/image.svg';
 
 import alignBottom from './../theme/icons/align-bottom.svg';
@@ -83,6 +84,7 @@ export const icons = {
 	eraser,
 	image,
 	lowVision,
+	loupe,
 	importExport,
 	paragraph,
 	plus,
diff --git a/packages/ckeditor5-core/theme/icons/loupe.svg b/packages/ckeditor5-core/theme/icons/loupe.svg
new file mode 100644
index 00000000000..ba9b3fa8962
--- /dev/null
+++ b/packages/ckeditor5-core/theme/icons/loupe.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.68 13.74a6 6 0 1 1 1.355-1.474l4.267 4.268a1 1 0 1 1-1.414 1.414l-4.209-4.208ZM13 9a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>

From d437d694bcd7f07d7eae89f20dd7784fd37a1382 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:26:28 +0200
Subject: [PATCH 11/84] ListItemGroupView should not have a border when it's a
 first visible child of a list.

---
 .../theme/ckeditor5-ui/components/list/list.css             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
index 88b45aac15e..974eaf03af4 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
@@ -79,7 +79,11 @@
 
 .ck-list .ck-list__group {
 	padding-top: var(--ck-spacing-medium);
-	border-top: 1px solid var(--ck-color-base-border);
+
+	/* The group should have a border when it's not the first item. */
+	*:not(.ck-hidden) ~ & {
+		border-top: 1px solid var(--ck-color-base-border);
+	}
 
 	& > li:first-child > span {
 		font-size: 11px;

From 4f84c7a5144f32c7f94627b3ced9ce231b97ac6f Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:31:09 +0200
Subject: [PATCH 12/84] Made it possible to inject custom labels into
 ButtonView instances.

---
 .../src/button/buttonlabelview.ts             | 64 +++++++++++++++++++
 .../ckeditor5-ui/src/button/buttonview.ts     | 31 ++-------
 2 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 packages/ckeditor5-ui/src/button/buttonlabelview.ts

diff --git a/packages/ckeditor5-ui/src/button/buttonlabelview.ts b/packages/ckeditor5-ui/src/button/buttonlabelview.ts
new file mode 100644
index 00000000000..8e6bc8639d2
--- /dev/null
+++ b/packages/ckeditor5-ui/src/button/buttonlabelview.ts
@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/button/buttonlabelview
+ */
+
+import View from '../view';
+
+/**
+ * TODO
+ */
+export default class ButtonLabelView extends View {
+	/**
+	 * TODO
+	 */
+	declare public style: string | undefined;
+
+	/**
+	 * TODO
+	 */
+	declare public label: string | undefined;
+
+	/**
+	 * TODO
+	 */
+	declare public id: string | undefined;
+
+	/**
+	 * TODO
+	 */
+	constructor() {
+		super();
+
+		this.set( {
+			style: null,
+			label: null,
+			id: null
+		} );
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-button__label'
+				],
+				style: bind.to( 'style' ),
+				id: bind.to( 'id' )
+			},
+
+			children: [
+				{
+					text: bind.to( 'label' )
+				}
+			]
+		} );
+	}
+}
diff --git a/packages/ckeditor5-ui/src/button/buttonview.ts b/packages/ckeditor5-ui/src/button/buttonview.ts
index d2de2ed9eb2..d1aa1abfca3 100644
--- a/packages/ckeditor5-ui/src/button/buttonview.ts
+++ b/packages/ckeditor5-ui/src/button/buttonview.ts
@@ -13,6 +13,7 @@ import IconView from '../icon/iconview';
 import type { TemplateDefinition } from '../template';
 import type ViewCollection from '../viewcollection';
 import type { default as Button, ButtonExecuteEvent } from './button';
+import ButtonLabelView from './buttonlabelview';
 
 import {
 	env,
@@ -52,7 +53,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	/**
 	 * Label of the button view. It is configurable using the {@link #label label attribute}.
 	 */
-	public readonly labelView: View;
+	public readonly labelView: ButtonLabelView;
 
 	/**
 	 * The icon view of the button. Will be added to {@link #children} when the
@@ -180,7 +181,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale?: Locale ) {
+	constructor( locale?: Locale, labelView = new ButtonLabelView() ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
@@ -208,7 +209,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 		this.set( 'withKeystroke', false );
 
 		this.children = this.createCollection();
-		this.labelView = this._createLabelView();
+		this.labelView = this._setupLabelView( labelView );
 
 		this.iconView = new IconView();
 		this.iconView.extendTemplate( {
@@ -327,28 +328,8 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	/**
 	 * Creates a label view instance and binds it with button attributes.
 	 */
-	private _createLabelView() {
-		const labelView = new View();
-		const bind = this.bindTemplate;
-
-		labelView.setTemplate( {
-			tag: 'span',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-button__label'
-				],
-				style: bind.to( 'labelStyle' ),
-				id: this.ariaLabelledBy
-			},
-
-			children: [
-				{
-					text: bind.to( 'label' )
-				}
-			]
-		} );
+	private _setupLabelView( labelView: ButtonLabelView ) {
+		labelView.bind( 'label', 'style', 'id' ).to( this, 'label', 'labelStyle', 'ariaLabelledBy' );
 
 		return labelView;
 	}

From 228cebead91afe1d33f065437fe75d298a107d4d Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:31:33 +0200
Subject: [PATCH 13/84] Allowed hiding ListItemGroupView instances.

---
 packages/ckeditor5-ui/src/list/listitemgroupview.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/list/listitemgroupview.ts b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
index 15adbdcc537..a07bce4923f 100644
--- a/packages/ckeditor5-ui/src/list/listitemgroupview.ts
+++ b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
@@ -29,6 +29,15 @@ export default class ListItemGroupView extends View {
 	 */
 	public readonly items: ViewCollection<ListItemView>;
 
+	/**
+	 * Controls whether the item view is visible. Visible by default, list items are hidden
+	 * using a CSS class.
+	 *
+	 * @observable
+	 * @default true
+	 */
+	declare public isVisible: boolean;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -37,6 +46,7 @@ export default class ListItemGroupView extends View {
 
 		const bind = this.bindTemplate;
 
+		this.set( 'isVisible', true );
 		this.items = this.createCollection<ListItemView>();
 
 		const groupLabelId = `ck-editor__label_${ uid() }`;
@@ -47,7 +57,8 @@ export default class ListItemGroupView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-list__group'
+					'ck-list__group',
+					bind.if( 'isVisible', 'ck-hidden', value => !value )
 				]
 			},
 

From abc4e9502a46e9308c3a043538cf7ad8f6416233 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:33:10 +0200
Subject: [PATCH 14/84] Extracted the HighlightedTextView component from the
 internal logic of the templates search in ckeditor5-template.

---
 .../highlightedtext/highlightedtextview.ts    | 108 ++++++++++++++++++
 .../highlightedtext/highlightedtext.css       |  12 ++
 2 files changed, 120 insertions(+)
 create mode 100644 packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
 create mode 100644 packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css

diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
new file mode 100644
index 00000000000..167ae6b11fb
--- /dev/null
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -0,0 +1,108 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module TODO
+*/
+
+import View from '../view';
+import { escape } from 'lodash-es';
+
+import '../../theme/components/highlightedtext/highlightedtext.css';
+
+/**
+ * TODO
+ */
+export default class HighlightedTextView extends View {
+	/**
+	 * TODO
+	 */
+	private _text: string;
+
+	/**
+	 * TODO
+	 *
+	 * @param text
+	 */
+	constructor( text: string ) {
+		super();
+
+		this._text = text;
+
+		this.setTemplate( {
+			tag: 'span',
+			attributes: {
+				class: [ 'ck', 'ck-highlighted-text' ]
+			},
+			children: [
+				text
+			]
+		} );
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @param regExp
+	 */
+	public highlightText( regExp: RegExp | null ): void {
+		this.element!.innerHTML = markText( this._text, regExp );
+	}
+}
+
+// Replaces RegExp occurrences with <mark> tags in a text.
+//
+// @param text A text to get marked.
+// @param [regExp] An optional RegExp. If not passed, this is a pass-through function.
+// @returns A text with RegExp occurrences marked by <mark>.
+function markText( text: string, regExp: RegExp | null ) {
+	if ( !regExp ) {
+		return escape( text );
+	}
+
+	const textParts: Array<{ text: string; isMatch: boolean }> = [];
+	let lastMatchEnd = 0;
+	let matchInfo;
+
+	// Iterate over all matches and create an array of text parts. The idea is to mark which parts are query matches
+	// so that later on they can be highlighted.
+	while ( ( matchInfo = regExp.exec( text ) ) !== null ) {
+		const curMatchStart = matchInfo.index;
+		// Detect if there was something between last match and this one.
+		if ( curMatchStart !== lastMatchEnd ) {
+			textParts.push( {
+				text: text.substring( lastMatchEnd, curMatchStart ),
+				isMatch: false
+			} );
+		}
+
+		textParts.push( {
+			text: matchInfo[ 0 ],
+			isMatch: true
+		} );
+
+		lastMatchEnd = regExp.lastIndex;
+	}
+
+	// Your match might not be the last part of a string. Be sure to add any plain text following the last match.
+	if ( lastMatchEnd !== text.length ) {
+		textParts.push( {
+			text: text.substring( lastMatchEnd ),
+			isMatch: false
+		} );
+	}
+
+	const outputHtml = textParts
+		// The entire text should be escaped.
+		.map( part => {
+			part.text = escape( part.text );
+			return part;
+		} )
+		// Only matched text should be wrapped with HTML mark element.
+		.map( part => part.isMatch ? `<mark>${ part.text }</mark>` : part.text )
+		.join( '' );
+
+	return outputHtml;
+}
diff --git a/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css b/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css
new file mode 100644
index 00000000000..5462bcd81fb
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/components/highlightedtext/highlightedtext.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-highlighted-text mark {
+	background: var(--ck-color-highlight-background);
+	vertical-align: initial;
+	font-weight: inherit;
+	line-height: inherit;
+	font-size: inherit;
+}

From 71243095917ccb879b29a6c2519fb649399b7546 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:35:53 +0200
Subject: [PATCH 15/84] Extracted a generic search UI component from
 ckeditor5-template.

---
 .../ckeditor5-ui/components/search/search.css |  88 ++++++++
 .../ckeditor5-ui/src/search/filteredview.ts   |  22 ++
 .../src/search/searchfieldview.ts             |  94 ++++++++
 .../ckeditor5-ui/src/search/searchinfoview.ts |  85 ++++++++
 .../src/search/searchresultsview.ts           |  43 ++++
 .../ckeditor5-ui/src/search/searchview.ts     | 204 ++++++++++++++++++
 .../theme/components/search/search.css        |  43 ++++
 7 files changed, 579 insertions(+)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
 create mode 100644 packages/ckeditor5-ui/src/search/filteredview.ts
 create mode 100644 packages/ckeditor5-ui/src/search/searchfieldview.ts
 create mode 100644 packages/ckeditor5-ui/src/search/searchinfoview.ts
 create mode 100644 packages/ckeditor5-ui/src/search/searchresultsview.ts
 create mode 100644 packages/ckeditor5-ui/src/search/searchview.ts
 create mode 100644 packages/ckeditor5-ui/theme/components/search/search.css

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
new file mode 100644
index 00000000000..57cfb217403
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+}
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
+		--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
+
+		&.ck-labeled-field-view_empty {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
+		}
+
+		& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+			opacity: .5;
+			pointer-events: none;
+		}
+
+		& .ck-input {
+			width: 100%;
+
+			@mixin ck-dir ltr {
+				padding-left: var(--ck-search-field-view-horizontal-spacing);
+
+				&:not(.ck-input-text_empty) {
+					padding-right: var(--ck-search-field-view-horizontal-spacing);
+				}
+			}
+
+			@mixin ck-dir rtl {
+				padding-right: var(--ck-search-field-view-horizontal-spacing);
+
+				&:not(.ck-input-text_empty) {
+					padding-left: var(--ck-search-field-view-horizontal-spacing);
+				}
+			}
+		}
+
+		& .ck-search__clear-search {
+			min-width: auto;
+			min-height: auto;
+
+			background: none;
+			opacity: .5;
+			padding: 0;
+
+			@mixin ck-dir ltr {
+				right: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				left: var(--ck-spacing-medium);
+			}
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+
+	& > .ck-search__results {
+		min-width: 100%;
+
+		& > .ck-search__info {
+			width: 100%;
+			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+
+			& * {
+				white-space: normal;
+			}
+
+			& > span:first-child {
+				font-weight: bold;
+			}
+
+			& > span:last-child {
+				margin-top: var(--ck-spacing-medium);
+			}
+		}
+	}
+}
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
new file mode 100644
index 00000000000..c9f21c54927
--- /dev/null
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
+import type View from '../view';
+
+/**
+ * @module ui/search/filteredview
+ */
+
+/**
+ * TODO
+ */
+export default interface FilteredView extends View, DropdownPanelFocusable {
+
+	/**
+	 * TODO
+	 */
+	filter( regExp: RegExp | null ): number;
+}
diff --git a/packages/ckeditor5-ui/src/search/searchfieldview.ts b/packages/ckeditor5-ui/src/search/searchfieldview.ts
new file mode 100644
index 00000000000..a37af00396d
--- /dev/null
+++ b/packages/ckeditor5-ui/src/search/searchfieldview.ts
@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/search/searchfieldview
+ */
+
+import ButtonView from '../button/buttonview';
+import IconView from '../icon/iconview';
+import LabeledFieldView from '../labeledfield/labeledfieldview';
+import type InputView from '../input/inputview';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+
+import { icons } from '@ckeditor/ckeditor5-core';
+
+/**
+ * A search input field for the {@link module:ui/search/searchview~SearchView} component.
+ *
+ * @private
+ * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
+ */
+export default class SearchFieldView extends LabeledFieldView<InputView> {
+	/**
+	 * The loupe icon displayed next to the {@link #fieldView}.
+	 */
+	public loupeIconView: IconView;
+
+	/**
+	 * The button that clears and focuses the {@link #fieldView}.
+	 */
+	public clearButtonView: ButtonView;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor(
+		locale: Locale,
+		viewCreator: ConstructorParameters<typeof LabeledFieldView<InputView>>[ 1 ],
+		label: string
+	) {
+		super( locale, viewCreator );
+
+		const t = locale.t;
+
+		this.label = label;
+		this.loupeIconView = new IconView();
+		this.loupeIconView.content = icons.loupe;
+
+		this.clearButtonView = new ButtonView( locale );
+		this.clearButtonView.set( {
+			label: t( 'Clear' ),
+			icon: icons.cancel,
+			class: 'ck-search__clear-search',
+			isVisible: false,
+			tooltip: true
+		} );
+
+		this.clearButtonView.on( 'execute', () => {
+			this.reset();
+			this.focus();
+			this.fire<SearchFieldViewResetEvent>( 'reset' );
+		} );
+
+		this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
+
+		this.fieldWrapperChildren.add( this.loupeIconView, 0 );
+		this.fieldWrapperChildren.add( this.clearButtonView );
+	}
+
+	/**
+	 * Resets the search field to its default state.
+	 */
+	public reset(): void {
+		// This addresses a bug in input value handling. The one-way binding between fieldView#value->fieldView.element#value
+		// does clear the value of the DOM element if fieldView#value was not previously set but the user typed in the input.
+		// (fieldView#value is '', text was typed in the input, resetting fieldView#value '' does not trigger #change in observable)
+		this.fieldView.value = this.fieldView.element!.value = '';
+
+		this.clearButtonView.isVisible = false;
+	}
+}
+
+/**
+ * An event fired when the field is reset using the
+ * {@link ui/search/searchfieldview~SearchFieldView#clearButtonView}.
+ *
+ * @eventName ~SearchFieldView#reset
+ */
+export type SearchFieldViewResetEvent = {
+	name: 'reset';
+	args: [];
+};
diff --git a/packages/ckeditor5-ui/src/search/searchinfoview.ts b/packages/ckeditor5-ui/src/search/searchinfoview.ts
new file mode 100644
index 00000000000..ffdbf9d83c7
--- /dev/null
+++ b/packages/ckeditor5-ui/src/search/searchinfoview.ts
@@ -0,0 +1,85 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/search/searchinfoview
+*/
+
+import View from '../view';
+
+/**
+ * A view displaying an information text related to different states of {@link module:ui/search/searchview~SearchView}.
+ *
+ * @private
+ */
+export default class SearchInfoView extends View {
+	/**
+	 * Controls whether the view is visible.
+	 *
+	 * @observable
+	 * @default false
+	 */
+	declare public isVisible: boolean;
+
+	/**
+	 * Controls the primary line of text in the info.
+	 *
+	 * @observable
+	 * @default ''
+	 */
+	declare public primaryText: string;
+
+	/**
+	 * Controls the secondary line of text in the info.
+	 *
+	 * @observable
+	 * @default ''
+	 */
+	declare public secondaryText: string;
+
+	/**
+	 * @inheritDoc
+	 */
+	constructor() {
+		super();
+
+		const bind = this.bindTemplate;
+
+		this.set( {
+			isVisible: false,
+			primaryText: '',
+			secondaryText: ''
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-search__info',
+					bind.if( 'isVisible', 'ck-hidden', value => !value )
+				]
+			},
+			children: [
+				{
+					tag: 'span',
+					children: [
+						{
+							text: [ bind.to( 'primaryText' ) ]
+						}
+					]
+				},
+				{
+					tag: 'span',
+					children: [
+						{
+							text: [ bind.to( 'secondaryText' ) ]
+						}
+					]
+				}
+			]
+		} );
+	}
+}
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
new file mode 100644
index 00000000000..6029345ff05
--- /dev/null
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../view';
+import type ViewCollection from '../viewcollection';
+
+/**
+ * TODO
+ */
+export default class SearchResultsView extends View {
+	/**
+	 * The collection of the child views inside of the list item {@link #element}.
+	 *
+	 * @readonly
+	 */
+	public children: ViewCollection;
+
+	/**
+	 * TODO
+	 *
+	 * @param locale
+	 * @param filteredView
+	 */
+	constructor( locale: Locale ) {
+		super( locale );
+
+		this.children = this.createCollection();
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-search__results'
+				]
+			},
+			children: this.children
+		} );
+	}
+}
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
new file mode 100644
index 00000000000..9f453a4e40c
--- /dev/null
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -0,0 +1,204 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/search/searchview
+*/
+
+import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../view';
+import SearchFieldView from './searchfieldview';
+import SearchResultsView from './searchresultsview';
+import type FilteredView from './filteredview';
+import { createLabeledInputText } from '../labeledfield/utils';
+import { escapeRegExp } from 'lodash-es';
+import FocusCycler from '../focuscycler';
+
+import '../../theme/components/search/search.css';
+
+/**
+ * TODO: A search component.
+ *
+ * @extends module:ui/view~View
+ */
+export default class SearchView extends View {
+	/**
+	 * Tracks information about the DOM focus in the view.
+	 *
+	 * @readonly
+	 */
+	public focusTracker: FocusTracker;
+
+	/**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 *
+	 * @readonly
+	 */
+	public keystrokes: KeystrokeHandler;
+
+	/**
+	 * TODO
+	 */
+	public resultsView: SearchResultsView;
+
+	/**
+	 * TODO
+	 */
+	public filteredView: FilteredView;
+
+	/**
+	 * TODO
+	 */
+	public searchFieldView: SearchFieldView;
+
+	/**
+	 * Helps cycling over {@link #children} in the view.
+	 *
+	 * @readonly
+	 * @internal
+	 */
+	private _focusCycler: FocusCycler;
+
+	/**
+	 * Creates an instance of the {@link module:ui/search/searchview~SearchView} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param commands The object of all grouped commands.
+	 * @param label TODO
+	 */
+	constructor( locale: Locale, config: SearchViewConfig ) {
+		super( locale );
+
+		this.filteredView = config.filteredView;
+		this.searchFieldView = this._createSearchFieldView( locale, config.searchFieldLabel );
+		this.focusTracker = new FocusTracker();
+		this.keystrokes = new KeystrokeHandler();
+		this.resultsView = new SearchResultsView( locale );
+
+		this.resultsView.children.add( this.filteredView );
+
+		this._focusCycler = new FocusCycler( {
+			focusables: this.createCollection( [ this.searchFieldView, this.filteredView ] ),
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate form fields backwards using the Shift + Tab keystroke.
+				focusPrevious: 'shift + tab',
+
+				// Navigate form fields forwards using the Tab key.
+				focusNext: 'tab'
+			}
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-search',
+					config.class || null
+				],
+
+				tabindex: '-1'
+			},
+			children: [
+				this.searchFieldView,
+				this.resultsView
+			]
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public override render(): void {
+		super.render();
+
+		const stopPropagation = ( data: Event ) => data.stopPropagation();
+
+		this.focusTracker.add( this.searchFieldView.element as Element );
+		this.focusTracker.add( this.filteredView.element as Element );
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element as HTMLElement );
+
+		// Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
+		// keystroke handler would take over the key management in the URL input. We need to prevent
+		// this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
+		this.keystrokes.set( 'arrowright', stopPropagation );
+		this.keystrokes.set( 'arrowleft', stopPropagation );
+		this.keystrokes.set( 'arrowup', stopPropagation );
+		this.keystrokes.set( 'arrowdown', stopPropagation );
+	}
+
+	/**
+	 * Focuses the {@link #searchFieldView}.
+	 */
+	public focus(): void {
+		this.searchFieldView.focus();
+	}
+
+	/**
+	 * Resets the component to its initial state.
+	 */
+	public reset(): void {
+		this.searchFieldView.reset();
+		this.search( '' );
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @internal
+	 * @param query The search query string.
+	 */
+	public search( query: string ): void {
+		const regExp = query ? new RegExp( escapeRegExp( query ), 'ig' ) : null;
+		const numberOfResults = this.filteredView.filter( regExp );
+
+		this.fire( 'search', { query, numberOfResults } );
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @internal
+	 * @param locale The localization services instance.
+	 * @param label TODO
+	 */
+	private _createSearchFieldView( locale: Locale, label: string ): SearchFieldView {
+		const searchFieldView = new SearchFieldView( locale, createLabeledInputText, label );
+
+		this.listenTo( searchFieldView.fieldView, 'input', () => {
+			this.search( searchFieldView.fieldView.element!.value );
+		} );
+
+		searchFieldView.on( 'reset', () => this.reset() );
+
+		return searchFieldView;
+	}
+}
+
+/**
+ * TODO
+ */
+export type SearchViewConfig = {
+	filteredView: FilteredView;
+	searchFieldLabel: string;
+	class?: string;
+};
+
+/**
+ * TODO
+ *
+ * @eventName ~SearchView#search
+ */
+export type SearchViewSearchEvent = {
+	name: 'search';
+	args: [ {
+		query: string;
+		numberOfResults: number;
+	} ];
+};
diff --git a/packages/ckeditor5-ui/theme/components/search/search.css b/packages/ckeditor5-ui/theme/components/search/search.css
new file mode 100644
index 00000000000..542ff17d6f5
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/components/search/search.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+
+			@mixin ck-dir ltr {
+				left: var(--ck-spacing-medium);
+			}
+
+			@mixin ck-dir rtl {
+				right: var(--ck-spacing-medium);
+			}
+		}
+
+		& .ck-search__clear-search {
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+
+	& > .ck-search__results {
+		& > .ck-search__info {
+			& > span:first-child {
+				display: block;
+			}
+
+			/* Hide the filtered view when nothing was found */
+			&:not(.ck-hidden) ~ * {
+				display: none;
+			}
+		}
+	}
+}

From 2ebce344955b16aa279b84fe4c2f3f011adde7fc Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:36:27 +0200
Subject: [PATCH 16/84] Created an autocomplete component draft on top of the
 generic search UI component.

---
 .../components/autocomplete/autocomplete.css  | 29 ++++++
 .../src/autocomplete/autocompleteview.ts      | 99 +++++++++++++++++++
 .../components/autocomplete/autocomplete.css  | 22 +++++
 3 files changed, 150 insertions(+)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
 create mode 100644 packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
 create mode 100644 packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
new file mode 100644
index 00000000000..8ef4bc348e6
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+.ck.ck-autocomplete {
+	& > .ck-search__results {
+		@mixin ck-rounded-corners;
+		@mixin ck-drop-shadow;
+
+		max-height: 200px;
+		overflow-y: auto;
+		background: var(--ck-color-base-background);
+		border: 1px solid var(--ck-color-dropdown-panel-border);
+
+		&.ck-search__results_n {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		&.ck-search__results_s {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+}
diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
new file mode 100644
index 00000000000..3e1c8de68c4
--- /dev/null
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -0,0 +1,99 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/autocomplete/autocompleteview
+*/
+
+import { getOptimalPosition, type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
+import SearchView, { type SearchViewConfig, type SearchResultsView } from '../search/searchview';
+
+import '../../theme/components/autocomplete/autocomplete.css';
+
+/**
+ * TODO
+ */
+export default class AutocompleteView extends SearchView {
+	constructor( locale: Locale, config: SearchViewConfig ) {
+		super( locale, config );
+
+		this.extendTemplate( {
+			attributes: {
+				class: [ 'ck-autocomplete' ]
+			}
+		} );
+
+		const resultsView = this.resultsView as AutocompleteResultsView;
+		const bindResultsView = resultsView.bindTemplate;
+
+		resultsView.set( 'isVisible', false );
+		resultsView.set( 'position', 's' );
+
+		resultsView.extendTemplate( {
+			attributes: {
+				class: [
+					bindResultsView.if( 'isVisible', 'ck-hidden', value => !value ),
+					bindResultsView.to( 'position', value => `ck-search__results_${ value }` )
+				]
+			}
+		} );
+
+		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
+			resultsView.isVisible = isFocused;
+
+			resultsView.position = AutocompleteView._getOptimalPosition( {
+				element: this.resultsView.element!,
+				target: this.searchFieldView.element!,
+				fitInViewport: true,
+				positions: AutocompleteView._resultsPositions
+			} ).name as AutocompleteResultsView[ 'position' ];
+
+			if ( !isFocused ) {
+				this.searchFieldView.reset();
+			}
+		} );
+	}
+
+	/**
+	 * A function used to calculate the optimal position for the dropdown panel.
+	 */
+	private static _getOptimalPosition = getOptimalPosition;
+
+	/**
+	 * TODO
+	 */
+	private static _resultsPositions: Array<PositioningFunction> = [
+		fieldRect => {
+			return {
+				top: fieldRect.bottom,
+				left: fieldRect.left,
+				name: 's'
+			};
+		},
+		( fieldRect, resultsRect ) => {
+			return {
+				top: fieldRect.top - resultsRect.height,
+				left: fieldRect.left,
+				name: 'n'
+			};
+		}
+	];
+}
+
+/**
+ * TODO
+ */
+interface AutocompleteResultsView extends SearchResultsView {
+
+	/**
+	 * TODO
+	 */
+	isVisible: boolean;
+
+	/**
+	 * TODO
+	 */
+	position: 's' | 'n';
+}
diff --git a/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css b/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css
new file mode 100644
index 00000000000..561f5892265
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/components/autocomplete/autocomplete.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-autocomplete {
+	position: relative;
+
+	& > .ck-search__results {
+		position: absolute;
+		z-index: var(--ck-z-modal);
+
+		&.ck-search__results_n {
+			bottom: 100%;
+		}
+
+		&.ck-search__results_s {
+			top: 100%;
+			bottom: auto;
+		}
+	}
+}

From 6ed0537e869ca002e020b10849fc787e776871f6 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:36:40 +0200
Subject: [PATCH 17/84] Tests: Added manual tests for search and autocomplete
 components.

---
 .../manual/autocomplete/autocomplete.html     |  14 ++
 .../tests/manual/autocomplete/autocomplete.md |   1 +
 .../tests/manual/autocomplete/autocomplete.ts |  75 ++++++++
 .../tests/manual/search/search.html           |  24 +++
 .../tests/manual/search/search.md             |   1 +
 .../tests/manual/search/search.ts             | 174 ++++++++++++++++++
 6 files changed, 289 insertions(+)
 create mode 100644 packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.html
 create mode 100644 packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
 create mode 100644 packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
 create mode 100644 packages/ckeditor5-ui/tests/manual/search/search.html
 create mode 100644 packages/ckeditor5-ui/tests/manual/search/search.md
 create mode 100644 packages/ckeditor5-ui/tests/manual/search/search.ts

diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.html b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.html
new file mode 100644
index 00000000000..b54a1f70763
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.html
@@ -0,0 +1,14 @@
+<div dir="ltr" class="ck ck-reset_all ck-rounded-corners playground"></div>
+
+<style>
+	body {
+		min-height: 10000px;
+	}
+
+	.ck.playground {
+		margin-top: 800px;
+		border: 2px dashed #000;
+		width: 400px;
+		padding: 20px;
+	}
+</style>
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
new file mode 100644
index 00000000000..1333ed77b7e
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
@@ -0,0 +1 @@
+TODO
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
new file mode 100644
index 00000000000..c38c3397b29
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
@@ -0,0 +1,75 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import { ButtonView, ListItemView, ListView, AutocompleteView, SearchInfoView, type SearchViewSearchEvent } from '../../../src';
+
+const locale = new Locale();
+const t = locale.t;
+
+class FilteredTestListView extends ListView {
+	public filter( query ): number {
+		let visibleItems = 0;
+
+		for ( const item of this.items ) {
+			const listItemView = ( item as ListItemView );
+			const buttonView = listItemView.children.first! as ButtonView;
+
+			listItemView.isVisible = query ? !!buttonView.label!.match( query ) : true;
+
+			if ( listItemView.isVisible ) {
+				visibleItems++;
+			}
+		}
+
+		return visibleItems;
+	}
+}
+
+const listView = new FilteredTestListView();
+
+[
+	'getAttribute()', 'getAttributeNames()', 'getAttributeNode()', 'getAttributeNodeNS()', 'getAttributeNS()',
+	'getBoundingClientRect()', 'getClientRects()', 'getElementsByClassName()', 'getElementsByTagName()', 'getElementsByTagNameNS()',
+	'hasAttribute()', 'hasAttributeNS()', 'hasAttributes()', 'hasPointerCapture()', 'insertAdjacentElement()', 'insertAdjacentHTML()',
+	'insertAdjacentText()', 'matches()', 'prepend()', 'querySelector()', 'querySelectorAll()', 'releasePointerCapture()', 'remove()',
+	'removeAttribute()', 'removeAttributeNode()', 'removeAttributeNS()'
+].forEach( item => {
+	const listItemView = new ListItemView();
+	const buttonView = new ButtonView();
+
+	buttonView.withText = true;
+	buttonView.label = item;
+	listItemView.children.add( buttonView );
+	listView.items.add( listItemView );
+} );
+
+const view = new AutocompleteView( locale, {
+	searchFieldLabel: 'Search field label',
+	filteredView: listView
+} );
+
+const infoView = new SearchInfoView();
+
+view.resultsView.children.add( infoView, 0 );
+
+view.on<SearchViewSearchEvent>( 'search', ( evt, { numberOfResults, query } ) => {
+	if ( !numberOfResults ) {
+		infoView.set( {
+			primaryText: t( 'Nothing found that matches "%0".', query ),
+			isVisible: true
+		} );
+	} else {
+		infoView.set( {
+			isVisible: false
+		} );
+	}
+} );
+
+view.render();
+
+document.querySelector( '.playground' )!.appendChild( view.element! );
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.html b/packages/ckeditor5-ui/tests/manual/search/search.html
new file mode 100644
index 00000000000..fe1aeada216
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/search/search.html
@@ -0,0 +1,24 @@
+<div dir="ltr" class="ck ck-reset_all ck-rounded-corners playground"></div>
+
+<style>
+	.ck.playground {
+		border: 2px dashed #000;
+		padding: 20px;
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.ck.ck-search {
+		border: 1px dashed red;
+		padding: 10px;
+		width: 400px;
+	}
+
+	.ck.ck-search + * {
+		margin-left: 20px;
+	}
+
+	.ck.ck-search .ck-toolbar {
+		margin-top: 10px;
+	}
+</style>
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.md b/packages/ckeditor5-ui/tests/manual/search/search.md
new file mode 100644
index 00000000000..1333ed77b7e
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/search/search.md
@@ -0,0 +1 @@
+TODO
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
new file mode 100644
index 00000000000..872952470d1
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -0,0 +1,174 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import {
+	ButtonView,
+	ListItemGroupView,
+	ListItemView,
+	ListView,
+	SearchInfoView,
+	SearchView,
+	ToolbarView,
+	type SearchViewSearchEvent
+} from '../../../src';
+
+const locale = new Locale();
+const t = locale.t;
+
+function createSearchableList() {
+	class FilteredTestListView extends ListView {
+		public filter( query ): number {
+			let visibleItemsCount = 0;
+
+			function updateListItemVisibility( listItemView: ListItemView ) {
+				const buttonView = listItemView.children.first! as ButtonView;
+
+				listItemView.isVisible = query ? !!buttonView.label!.match( query ) : true;
+
+				if ( listItemView.isVisible ) {
+					visibleItemsCount++;
+				}
+			}
+
+			for ( const listItemOrGroupView of this.items ) {
+				if ( listItemOrGroupView instanceof ListItemView ) {
+					updateListItemVisibility( listItemOrGroupView );
+				} else {
+					const groupView = listItemOrGroupView as ListItemGroupView;
+
+					for ( const item of groupView.items ) {
+						updateListItemVisibility( item );
+					}
+
+					groupView.isVisible = !!groupView.items.filter( listItemView => listItemView.isVisible ).length;
+				}
+			}
+
+			return visibleItemsCount;
+		}
+	}
+
+	const listView = new FilteredTestListView();
+	const hasGroupView = new ListItemGroupView();
+	const getGroupView = new ListItemGroupView();
+
+	hasGroupView.label = 'Starting with "has"...';
+	getGroupView.label = 'Starting with "get"...';
+
+	[
+		'getAttribute()', 'getAttributeNames()', 'getAttributeNode()', 'getAttributeNodeNS()', 'getAttributeNS()',
+		'getBoundingClientRect()', 'getClientRects()', 'getElementsByClassName()', 'getElementsByTagName()', 'getElementsByTagNameNS()',
+		'hasAttribute()', 'hasAttributeNS()', 'hasAttributes()', 'hasPointerCapture()', 'insertAdjacentElement()', 'insertAdjacentHTML()',
+		'insertAdjacentText()', 'matches()', 'prepend()', 'querySelector()', 'querySelectorAll()', 'releasePointerCapture()', 'remove()',
+		'removeAttribute()', 'removeAttributeNode()', 'removeAttributeNS()'
+	].forEach( item => {
+		const listItemView = new ListItemView();
+		const buttonView = new ButtonView();
+
+		buttonView.withText = true;
+		buttonView.label = item;
+		listItemView.children.add( buttonView );
+
+		if ( item.startsWith( 'has' ) ) {
+			hasGroupView.items.add( listItemView );
+		} else if ( item.startsWith( 'get' ) ) {
+			getGroupView.items.add( listItemView );
+		} else {
+			listView.items.add( listItemView );
+		}
+	} );
+
+	listView.items.add( getGroupView );
+	listView.items.add( hasGroupView );
+
+	const searchView = new SearchView( locale, {
+		searchFieldLabel: 'Search list items',
+		filteredView: listView
+	} );
+
+	createSearchInfoView( searchView );
+
+	searchView.render();
+
+	document.querySelector( '.playground' )!.appendChild( searchView.element! );
+}
+
+function createSearchableToolbar() {
+	class FilteredTestToolbarView extends ToolbarView {
+		public filter( query ): number {
+			let visibleItemsCount = 0;
+
+			for ( const item of this.items ) {
+				const buttonView = ( item as ButtonView );
+
+				buttonView.isVisible = query ? !!buttonView.label!.match( query ) : true;
+
+				if ( buttonView.isVisible ) {
+					visibleItemsCount++;
+				}
+			}
+
+			return visibleItemsCount;
+		}
+	}
+
+	const toolbarView = new FilteredTestToolbarView( locale );
+
+	[
+		'AddEventListenerOptions', 'AesCbcParams', 'AesCtrParams', 'AesDerivedKeyParams', 'AesGcmParams', 'AesKeyAlgorithm',
+		'AesKeyGenParams', 'Algorithm', 'AnalyserOptions', 'AnimationEventInit', 'AnimationPlaybackEventInit', 'AssignedNodesOptions',
+		'AudioBufferOptions', 'AudioBufferSourceOptions', 'AudioConfiguration', 'AudioContextOptions', 'AudioNodeOptions',
+		'AudioProcessingEventInit', 'AudioTimestamp', 'AudioWorkletNodeOptions', 'AuthenticationExtensionsClientInputs',
+		'AuthenticationExtensionsClientOutputs', 'AuthenticatorSelectionCriteria', 'AvcEncoderConfig', 'BiquadFilterOptions',
+		'BlobEventInit', 'BlobPropertyBag', 'CSSMatrixComponentOptions', 'CSSNumericType', 'CSSStyleSheetInit', 'CacheQueryOptions',
+		'CanvasRenderingContext2DSettings', 'KeyboardEventInit', 'Keyframe', 'KeyframeAnimationOptions', 'KeyframeEffectOptions',
+		'LockInfo', 'MediaStreamTrackEventInit', 'MediaTrackCapabilities', 'MediaTrackConstraintSet', 'MediaTrackConstraints',
+		'MediaTrackSettings', 'MediaTrackSupportedConstraints', 'MessageEventInit', 'MouseEventInit', 'MultiCacheQueryOptions',
+		'MutationObserverInit', 'NavigationPreloadState'
+	].forEach( item => {
+		const buttonView = new ButtonView();
+
+		buttonView.withText = true;
+		buttonView.label = item;
+		toolbarView.items.add( buttonView );
+	} );
+
+	const searchView = new SearchView( locale, {
+		searchFieldLabel: 'Search toolbar buttons',
+		filteredView: toolbarView
+	} );
+
+	createSearchInfoView( searchView );
+
+	searchView.render();
+
+	document.querySelector( '.playground' )!.appendChild( searchView.element! );
+}
+
+function createSearchInfoView( searchView: SearchView ) {
+	const infoView = new SearchInfoView();
+
+	searchView.resultsView.children.add( infoView, 0 );
+
+	searchView.on<SearchViewSearchEvent>( 'search', ( evt, { numberOfResults, query } ) => {
+		if ( !numberOfResults ) {
+			infoView.set( {
+				primaryText: t( 'Nothing found that matches "%0".', query ),
+				secondaryText: t( 'Please try a different phrase or check the spelling.' ),
+				isVisible: true
+			} );
+		} else {
+			infoView.set( {
+				isVisible: false
+			} );
+		}
+	} );
+}
+
+createSearchableList();
+createSearchableToolbar();

From 3991c7ea6f317c8850c3fc3f0d75a33320cb031a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 13:36:59 +0200
Subject: [PATCH 18/84] Updated public exports in the ckeditor5-ui package.

---
 packages/ckeditor5-ui/src/index.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 6ae4ec81ec1..bfa6aab5df9 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -17,6 +17,7 @@ export { default as BodyCollection } from './editorui/bodycollection';
 
 export { type ButtonExecuteEvent } from './button/button';
 export { default as ButtonView } from './button/buttonview';
+export { default as ButtonLabelView } from './button/buttonlabelview';
 export { default as SwitchButtonView } from './button/switchbuttonview';
 
 export * from './colorgrid/utils';
@@ -73,6 +74,11 @@ export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
 export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 
+export { default as AutocompleteView } from './autocomplete/autocompleteview';
+export { default as SearchView, type SearchViewSearchEvent } from './search/searchview';
+export { default as SearchInfoView } from './search/searchinfoview';
+export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
+
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template, type TemplateDefinition } from './template';
 

From 303f6bdfd5c66251b7e7c39c541752edca30e227 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 30 Aug 2023 14:01:45 +0200
Subject: [PATCH 19/84] Updated imports in the AutocompleteView component.

---
 packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 3e1c8de68c4..c1d4fa68567 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -8,7 +8,8 @@
 */
 
 import { getOptimalPosition, type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
-import SearchView, { type SearchViewConfig, type SearchResultsView } from '../search/searchview';
+import SearchView, { type SearchViewConfig } from '../search/searchview';
+import type SearchResultsView from '../search/searchresultsview';
 
 import '../../theme/components/autocomplete/autocomplete.css';
 

From b6d6287b66b5b2ef35b1b606701f5f8921a0e53c Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 1 Sep 2023 15:24:12 +0200
Subject: [PATCH 20/84] Code refactoring.

---
 .../src/autocomplete/autocompleteview.ts      | 56 ++++++++----
 .../highlightedtext/highlightedtextview.ts    |  4 +-
 packages/ckeditor5-ui/src/index.ts            |  1 +
 .../ckeditor5-ui/src/search/filteredview.ts   |  5 +-
 .../ckeditor5-ui/src/search/searchview.ts     | 90 ++++++++++++++++++-
 .../tests/manual/autocomplete/autocomplete.ts | 35 +++-----
 .../tests/manual/search/search.ts             | 49 ++++------
 7 files changed, 161 insertions(+), 79 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index c1d4fa68567..2875594c3fc 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -7,7 +7,7 @@
  * @module ui/autocomplete/autocompleteview
 */
 
-import { getOptimalPosition, type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
+import { getOptimalPosition, type PositioningFunction, type Locale, global } from '@ckeditor/ckeditor5-utils';
 import SearchView, { type SearchViewConfig } from '../search/searchview';
 import type SearchResultsView from '../search/searchresultsview';
 
@@ -17,6 +17,12 @@ import '../../theme/components/autocomplete/autocomplete.css';
  * TODO
  */
 export default class AutocompleteView extends SearchView {
+	/**
+	 * TODO
+	 *
+	 * @param locale
+	 * @param config
+	 */
 	constructor( locale: Locale, config: SearchViewConfig ) {
 		super( locale, config );
 
@@ -30,13 +36,13 @@ export default class AutocompleteView extends SearchView {
 		const bindResultsView = resultsView.bindTemplate;
 
 		resultsView.set( 'isVisible', false );
-		resultsView.set( 'position', 's' );
+		resultsView.set( '_position', 's' );
 
 		resultsView.extendTemplate( {
 			attributes: {
 				class: [
 					bindResultsView.if( 'isVisible', 'ck-hidden', value => !value ),
-					bindResultsView.to( 'position', value => `ck-search__results_${ value }` )
+					bindResultsView.to( '_position', value => `ck-search__results_${ value }` )
 				]
 			}
 		} );
@@ -44,43 +50,57 @@ export default class AutocompleteView extends SearchView {
 		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
 			resultsView.isVisible = isFocused;
 
-			resultsView.position = AutocompleteView._getOptimalPosition( {
-				element: this.resultsView.element!,
-				target: this.searchFieldView.element!,
-				fitInViewport: true,
-				positions: AutocompleteView._resultsPositions
-			} ).name as AutocompleteResultsView[ 'position' ];
+			this._updateResultsViewPosition();
 
 			if ( !isFocused ) {
 				this.searchFieldView.reset();
 			}
 		} );
+
+		// TODO: This needs to be debounced down the road.
+		this.listenTo( global.document, 'scroll', () => {
+			if ( resultsView.isVisible ) {
+				this._updateResultsViewPosition();
+			}
+		} );
 	}
 
 	/**
-	 * A function used to calculate the optimal position for the dropdown panel.
+	 * TODO
 	 */
-	private static _getOptimalPosition = getOptimalPosition;
+	private _updateResultsViewPosition() {
+		( this.resultsView as AutocompleteResultsView )._position = AutocompleteView._getOptimalPosition( {
+			element: this.resultsView.element!,
+			target: this.searchFieldView.element!,
+			fitInViewport: true,
+			positions: AutocompleteView.defaultResultsPositions
+		} ).name as string;
+	}
 
 	/**
 	 * TODO
 	 */
-	private static _resultsPositions: Array<PositioningFunction> = [
-		fieldRect => {
+	public static defaultResultsPositions: Array<PositioningFunction> = [
+		( fieldRect => {
 			return {
 				top: fieldRect.bottom,
 				left: fieldRect.left,
 				name: 's'
 			};
-		},
-		( fieldRect, resultsRect ) => {
+		} ) as PositioningFunction,
+		( ( fieldRect, resultsRect ) => {
 			return {
 				top: fieldRect.top - resultsRect.height,
 				left: fieldRect.left,
 				name: 'n'
 			};
-		}
+		} ) as PositioningFunction
 	];
+
+	/**
+	 * A function used to calculate the optimal position for the dropdown panel.
+	 */
+	private static _getOptimalPosition = getOptimalPosition;
 }
 
 /**
@@ -95,6 +115,8 @@ interface AutocompleteResultsView extends SearchResultsView {
 
 	/**
 	 * TODO
+	 *
+	 * @internal
 	 */
-	position: 's' | 'n';
+	_position: string;
 }
diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
index 167ae6b11fb..f70850a7814 100644
--- a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -36,9 +36,7 @@ export default class HighlightedTextView extends View {
 			attributes: {
 				class: [ 'ck', 'ck-highlighted-text' ]
 			},
-			children: [
-				text
-			]
+			children: text
 		} );
 	}
 
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index bfa6aab5df9..3f90cddd00b 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -77,6 +77,7 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 export { default as AutocompleteView } from './autocomplete/autocompleteview';
 export { default as SearchView, type SearchViewSearchEvent } from './search/searchview';
 export { default as SearchInfoView } from './search/searchinfoview';
+export { default as FilteredView } from './search/filteredview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
 
 export { default as TooltipManager } from './tooltipmanager';
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index c9f21c54927..7499b2f73e1 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -18,5 +18,8 @@ export default interface FilteredView extends View, DropdownPanelFocusable {
 	/**
 	 * TODO
 	 */
-	filter( regExp: RegExp | null ): number;
+	filter( regExp: RegExp | null ): {
+		resultsCount: number;
+		totalItemsCount: number;
+	};
 }
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
index 9f453a4e40c..e8194324749 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -10,6 +10,7 @@
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view';
 import SearchFieldView from './searchfieldview';
+import SearchInfoView from './searchinfoview';
 import SearchResultsView from './searchresultsview';
 import type FilteredView from './filteredview';
 import { createLabeledInputText } from '../labeledfield/utils';
@@ -48,6 +49,11 @@ export default class SearchView extends View {
 	 */
 	public filteredView: FilteredView;
 
+	/**
+	 * TODO
+	 */
+	public infoView: View;
+
 	/**
 	 * TODO
 	 */
@@ -61,6 +67,11 @@ export default class SearchView extends View {
 	 */
 	private _focusCycler: FocusCycler;
 
+	/**
+	 * TODO
+	 */
+	private _config: SearchViewConfig;
+
 	/**
 	 * Creates an instance of the {@link module:ui/search/searchview~SearchView} class.
 	 *
@@ -77,6 +88,22 @@ export default class SearchView extends View {
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 
+		this._config = config;
+
+		if ( !config.infoView ) {
+			this.infoView = new SearchInfoView();
+			this.resultsView.children.add( this.infoView );
+			this._enableDefaultInfoViewBehavior();
+
+			this.on( 'render', () => {
+				// Initial search that determines if there are any searchable items
+				// and displays the corresponding info text.
+				this.search( '' );
+			} );
+		} else {
+			this.infoView = config.infoView;
+		}
+
 		this.resultsView.children.add( this.filteredView );
 
 		this._focusCycler = new FocusCycler( {
@@ -156,9 +183,9 @@ export default class SearchView extends View {
 	 */
 	public search( query: string ): void {
 		const regExp = query ? new RegExp( escapeRegExp( query ), 'ig' ) : null;
-		const numberOfResults = this.filteredView.filter( regExp );
+		const filteringResults = this.filteredView.filter( regExp );
 
-		this.fire( 'search', { query, numberOfResults } );
+		this.fire( 'search', { query, ...filteringResults } );
 	}
 
 	/**
@@ -179,6 +206,46 @@ export default class SearchView extends View {
 
 		return searchFieldView;
 	}
+
+	/**
+	 * TODO
+	 */
+	private _enableDefaultInfoViewBehavior(): void {
+		const t = this.locale!.t;
+		const infoView = this.infoView as SearchInfoView;
+
+		this.on<SearchViewSearchEvent>( 'search', ( evt, data ) => {
+			if ( !data.resultsCount ) {
+				const infoViewTextConfig = this._config.infoViewTextConfig;
+				let primaryText, secondaryText;
+
+				if ( data.totalItemsCount ) {
+					primaryText = infoViewTextConfig?.notFound?.primary || t( 'No results found' );
+					secondaryText = infoViewTextConfig?.notFound?.secondary || '';
+				} else {
+					primaryText = infoViewTextConfig?.noSearchableItems?.primary || t( 'No searchable items' );
+					secondaryText = infoViewTextConfig?.noSearchableItems?.secondary || '';
+				}
+
+				infoView.set( {
+					primaryText: normalizeInfoText( primaryText, data ),
+					secondaryText: normalizeInfoText( secondaryText, data ),
+					isVisible: true
+				} );
+			} else {
+				infoView.set( {
+					isVisible: false
+				} );
+			}
+		} );
+
+		function normalizeInfoText(
+			text: SearchViewDefaultInfoText,
+			{ query, resultsCount, totalItemsCount }: SearchViewSearchEvent[ 'args' ][ 0 ]
+		) {
+			return typeof text === 'function' ? text( query, resultsCount, totalItemsCount ) : text;
+		}
+	}
 }
 
 /**
@@ -188,8 +255,24 @@ export type SearchViewConfig = {
 	filteredView: FilteredView;
 	searchFieldLabel: string;
 	class?: string;
+	infoView?: View;
+	infoViewTextConfig?: {
+		notFound?: {
+			primary: SearchViewDefaultInfoText;
+			secondary?: SearchViewDefaultInfoText;
+		};
+		noSearchableItems?: {
+			primary: SearchViewDefaultInfoText;
+			secondary?: SearchViewDefaultInfoText;
+		};
+	};
 };
 
+/**
+ * TODO
+ */
+export type SearchViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );
+
 /**
  * TODO
  *
@@ -199,6 +282,7 @@ export type SearchViewSearchEvent = {
 	name: 'search';
 	args: [ {
 		query: string;
-		numberOfResults: number;
+		resultsCount: number;
+		totalItemsCount: number;
 	} ];
 };
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
index c38c3397b29..fb8d14d13eb 100644
--- a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
@@ -6,13 +6,18 @@
 /* global document */
 
 import { Locale } from '@ckeditor/ckeditor5-utils';
-import { ButtonView, ListItemView, ListView, AutocompleteView, SearchInfoView, type SearchViewSearchEvent } from '../../../src';
+import {
+	ButtonView,
+	ListItemView,
+	ListView,
+	AutocompleteView,
+	type FilteredView
+} from '../../../src';
 
 const locale = new Locale();
-const t = locale.t;
 
-class FilteredTestListView extends ListView {
-	public filter( query ): number {
+class FilteredTestListView extends ListView implements FilteredView {
+	public filter( query ) {
 		let visibleItems = 0;
 
 		for ( const item of this.items ) {
@@ -26,7 +31,10 @@ class FilteredTestListView extends ListView {
 			}
 		}
 
-		return visibleItems;
+		return {
+			resultsCount: visibleItems,
+			totalItemsCount: this.items.length
+		};
 	}
 }
 
@@ -53,23 +61,6 @@ const view = new AutocompleteView( locale, {
 	filteredView: listView
 } );
 
-const infoView = new SearchInfoView();
-
-view.resultsView.children.add( infoView, 0 );
-
-view.on<SearchViewSearchEvent>( 'search', ( evt, { numberOfResults, query } ) => {
-	if ( !numberOfResults ) {
-		infoView.set( {
-			primaryText: t( 'Nothing found that matches "%0".', query ),
-			isVisible: true
-		} );
-	} else {
-		infoView.set( {
-			isVisible: false
-		} );
-	}
-} );
-
 view.render();
 
 document.querySelector( '.playground' )!.appendChild( view.element! );
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
index 872952470d1..a661988d3b2 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.ts
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -11,18 +11,17 @@ import {
 	ListItemGroupView,
 	ListItemView,
 	ListView,
-	SearchInfoView,
 	SearchView,
 	ToolbarView,
-	type SearchViewSearchEvent
+	type FilteredView
 } from '../../../src';
 
 const locale = new Locale();
-const t = locale.t;
 
 function createSearchableList() {
-	class FilteredTestListView extends ListView {
-		public filter( query ): number {
+	class FilteredTestListView extends ListView implements FilteredView {
+		public filter( query ) {
+			let totalItemsCount = 0;
 			let visibleItemsCount = 0;
 
 			function updateListItemVisibility( listItemView: ListItemView ) {
@@ -33,6 +32,8 @@ function createSearchableList() {
 				if ( listItemView.isVisible ) {
 					visibleItemsCount++;
 				}
+
+				totalItemsCount++;
 			}
 
 			for ( const listItemOrGroupView of this.items ) {
@@ -49,7 +50,10 @@ function createSearchableList() {
 				}
 			}
 
-			return visibleItemsCount;
+			return {
+				resultsCount: visibleItemsCount,
+				totalItemsCount
+			};
 		}
 	}
 
@@ -91,16 +95,14 @@ function createSearchableList() {
 		filteredView: listView
 	} );
 
-	createSearchInfoView( searchView );
-
 	searchView.render();
 
 	document.querySelector( '.playground' )!.appendChild( searchView.element! );
 }
 
 function createSearchableToolbar() {
-	class FilteredTestToolbarView extends ToolbarView {
-		public filter( query ): number {
+	class FilteredTestToolbarView extends ToolbarView implements FilteredView {
+		public filter( query ) {
 			let visibleItemsCount = 0;
 
 			for ( const item of this.items ) {
@@ -113,7 +115,10 @@ function createSearchableToolbar() {
 				}
 			}
 
-			return visibleItemsCount;
+			return {
+				resultsCount: visibleItemsCount,
+				totalItemsCount: this.items.length
+			};
 		}
 	}
 
@@ -143,32 +148,10 @@ function createSearchableToolbar() {
 		filteredView: toolbarView
 	} );
 
-	createSearchInfoView( searchView );
-
 	searchView.render();
 
 	document.querySelector( '.playground' )!.appendChild( searchView.element! );
 }
 
-function createSearchInfoView( searchView: SearchView ) {
-	const infoView = new SearchInfoView();
-
-	searchView.resultsView.children.add( infoView, 0 );
-
-	searchView.on<SearchViewSearchEvent>( 'search', ( evt, { numberOfResults, query } ) => {
-		if ( !numberOfResults ) {
-			infoView.set( {
-				primaryText: t( 'Nothing found that matches "%0".', query ),
-				secondaryText: t( 'Please try a different phrase or check the spelling.' ),
-				isVisible: true
-			} );
-		} else {
-			infoView.set( {
-				isVisible: false
-			} );
-		}
-	} );
-}
-
 createSearchableList();
 createSearchableToolbar();

From 858c7b45fb86c985c99ff29fe9b30b238d2df91c Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 1 Sep 2023 15:51:42 +0200
Subject: [PATCH 21/84] Allowed custom filed view creators in SearchView.

---
 .../src/search/searchfieldview.ts             |  3 +-
 .../ckeditor5-ui/src/search/searchview.ts     | 10 +--
 .../tests/manual/search/search.html           | 15 +++--
 .../tests/manual/search/search.ts             | 64 +++++++++++++++++--
 4 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/searchfieldview.ts b/packages/ckeditor5-ui/src/search/searchfieldview.ts
index a37af00396d..57a4bcd597e 100644
--- a/packages/ckeditor5-ui/src/search/searchfieldview.ts
+++ b/packages/ckeditor5-ui/src/search/searchfieldview.ts
@@ -10,6 +10,7 @@
 import ButtonView from '../button/buttonview';
 import IconView from '../icon/iconview';
 import LabeledFieldView from '../labeledfield/labeledfieldview';
+import { createLabeledInputText } from '../labeledfield/utils';
 import type InputView from '../input/inputview';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
@@ -37,7 +38,7 @@ export default class SearchFieldView extends LabeledFieldView<InputView> {
 	 */
 	constructor(
 		locale: Locale,
-		viewCreator: ConstructorParameters<typeof LabeledFieldView<InputView>>[ 1 ],
+		viewCreator = createLabeledInputText,
 		label: string
 	) {
 		super( locale, viewCreator );
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
index e8194324749..19134858cbe 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -12,8 +12,9 @@ import View from '../view';
 import SearchFieldView from './searchfieldview';
 import SearchInfoView from './searchinfoview';
 import SearchResultsView from './searchresultsview';
+import type LabeledFieldView from '../labeledfield/labeledfieldview';
+import type InputView from '../input/inputview';
 import type FilteredView from './filteredview';
-import { createLabeledInputText } from '../labeledfield/utils';
 import { escapeRegExp } from 'lodash-es';
 import FocusCycler from '../focuscycler';
 
@@ -82,14 +83,14 @@ export default class SearchView extends View {
 	constructor( locale: Locale, config: SearchViewConfig ) {
 		super( locale );
 
+		this._config = config;
+
 		this.filteredView = config.filteredView;
 		this.searchFieldView = this._createSearchFieldView( locale, config.searchFieldLabel );
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 
-		this._config = config;
-
 		if ( !config.infoView ) {
 			this.infoView = new SearchInfoView();
 			this.resultsView.children.add( this.infoView );
@@ -196,7 +197,7 @@ export default class SearchView extends View {
 	 * @param label TODO
 	 */
 	private _createSearchFieldView( locale: Locale, label: string ): SearchFieldView {
-		const searchFieldView = new SearchFieldView( locale, createLabeledInputText, label );
+		const searchFieldView = new SearchFieldView( locale, this._config.searchFieldInputCreator, label );
 
 		this.listenTo( searchFieldView.fieldView, 'input', () => {
 			this.search( searchFieldView.fieldView.element!.value );
@@ -254,6 +255,7 @@ export default class SearchView extends View {
 export type SearchViewConfig = {
 	filteredView: FilteredView;
 	searchFieldLabel: string;
+	searchFieldInputCreator?: ConstructorParameters<typeof LabeledFieldView<InputView>>[ 1 ];
 	class?: string;
 	infoView?: View;
 	infoViewTextConfig?: {
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.html b/packages/ckeditor5-ui/tests/manual/search/search.html
index fe1aeada216..295ff3a57de 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.html
+++ b/packages/ckeditor5-ui/tests/manual/search/search.html
@@ -2,16 +2,23 @@
 
 <style>
 	.ck.playground {
-		border: 2px dashed #000;
-		padding: 20px;
 		display: flex;
 		align-items: flex-start;
 	}
 
-	.ck.ck-search {
+	.ck.playground > div {
 		border: 1px dashed red;
 		padding: 10px;
-		width: 400px;
+		max-width: 500px;
+		margin: 10px;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	.ck.playground > div > h2 {
+		font-size: 16px;
+		font-weight: bold;
+		margin-bottom: 20px;
 	}
 
 	.ck.ck-search + * {
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
index a661988d3b2..00ab60590a2 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.ts
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -13,7 +13,8 @@ import {
 	ListView,
 	SearchView,
 	ToolbarView,
-	type FilteredView
+	type FilteredView,
+	createLabeledInputNumber
 } from '../../../src';
 
 const locale = new Locale();
@@ -95,9 +96,7 @@ function createSearchableList() {
 		filteredView: listView
 	} );
 
-	searchView.render();
-
-	document.querySelector( '.playground' )!.appendChild( searchView.element! );
+	addToPlayground( 'Filtering a list with grouped items', searchView );
 }
 
 function createSearchableToolbar() {
@@ -148,10 +147,63 @@ function createSearchableToolbar() {
 		filteredView: toolbarView
 	} );
 
-	searchView.render();
+	addToPlayground( 'Filtering a toolbar', searchView );
+}
+
+function createSearchWithCustomInput() {
+	class FilteredTestToolbarView extends ToolbarView implements FilteredView {
+		public filter( query ) {
+			let visibleItemsCount = 0;
+
+			for ( const item of this.items ) {
+				const buttonView = ( item as ButtonView );
+
+				buttonView.isVisible = query ? !!buttonView.label!.match( query ) : true;
+
+				if ( buttonView.isVisible ) {
+					visibleItemsCount++;
+				}
+			}
+
+			return {
+				resultsCount: visibleItemsCount,
+				totalItemsCount: this.items.length
+			};
+		}
+	}
+
+	const toolbarView = new FilteredTestToolbarView( locale );
+
+	Array.from( Array( 30 ).keys() )
+		.forEach( item => {
+			const buttonView = new ButtonView( locale );
+
+			buttonView.withText = true;
+			buttonView.label = String( item );
+			toolbarView.items.add( buttonView );
+		} );
+
+	const searchView = new SearchView( locale, {
+		searchFieldLabel: 'Search toolbar buttons',
+		filteredView: toolbarView,
+		searchFieldInputCreator: createLabeledInputNumber
+	} );
+
+	addToPlayground( 'Custom input (number)', searchView );
+}
+
+function addToPlayground( name, view ) {
+	view.render();
+
+	const container = document.createElement( 'div' );
+	const heading = document.createElement( 'h2' );
+	heading.textContent = name;
 
-	document.querySelector( '.playground' )!.appendChild( searchView.element! );
+	container.appendChild( heading );
+	container.appendChild( view.element! );
+	document.querySelector( '.playground' )!.appendChild( container );
 }
 
 createSearchableList();
 createSearchableToolbar();
+createSearchWithCustomInput();

From 27996929c64b044cc9d1331af38f35b5de504113 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 1 Sep 2023 17:21:22 +0200
Subject: [PATCH 22/84] Code refactoring and docs. Added test for
 ListGroupView, ListItemView, and ListView.

---
 .../ckeditor5-ui/components/list/list.css     |   2 +-
 packages/ckeditor5-ui/src/dropdown/utils.ts   |  18 ++-
 .../src/list/listitemgroupview.ts             |  61 +++++-----
 .../ckeditor5-ui/src/list/listitemview.ts     |   6 +-
 packages/ckeditor5-ui/src/list/listview.ts    |  41 ++++---
 .../ckeditor5-ui/tests/list/listgroupview.js  | 110 ++++++++++++++++++
 .../ckeditor5-ui/tests/list/listitemview.js   |   6 +
 packages/ckeditor5-ui/tests/list/listview.js  |  12 ++
 .../ckeditor5-ui/tests/manual/list/list.html  |   2 +-
 9 files changed, 202 insertions(+), 56 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/list/listgroupview.js

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
index 974eaf03af4..16060d48c07 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
@@ -85,7 +85,7 @@
 		border-top: 1px solid var(--ck-color-base-border);
 	}
 
-	& > li:first-child > span {
+	& > span {
 		font-size: 11px;
 		font-weight: bold;
 		padding: var(--ck-spacing-medium);
diff --git a/packages/ckeditor5-ui/src/dropdown/utils.ts b/packages/ckeditor5-ui/src/dropdown/utils.ts
index 1981aa8d318..06b9dac09f2 100644
--- a/packages/ckeditor5-ui/src/dropdown/utils.ts
+++ b/packages/ckeditor5-ui/src/dropdown/utils.ts
@@ -525,19 +525,22 @@ function focusDropdownPanelOnOpen( dropdownView: DropdownView ) {
 }
 
 /**
- * TODO
+ * This helper populates a dropdown list with items and groups according to the
+ * collection of item definitions. A permanent binding is created in this process allowing
+ * dynamic management of the dropdown list content.
  *
- * @param items
+ * @param dropdownView
+ * @param listItems
  * @param definitions
  * @param locale
  */
 function bindViewCollectionItemsToDefinitions(
 	dropdownView: DropdownView,
-	items: ViewCollection,
+	listItems: ViewCollection,
 	definitions: Collection<ListDropdownItemDefinition>,
 	locale: Locale
 ) {
-	items.bindTo( definitions ).using( def => {
+	listItems.bindTo( definitions ).using( def => {
 		if ( def.type === 'separator' ) {
 			return new ListSeparatorView( locale );
 		} else if ( def.type === 'group' ) {
@@ -598,16 +601,19 @@ export type ListDropdownButtonDefinition = {
 	model: Model;
 };
 
+/**
+ * A definition of the group inside the list. A group can contain one or more list items (buttons).
+ */
 export type ListDropdownGroupDefinition = {
 	type: 'group';
 
 	/**
-	 * TODO
+	 * The visible label of the group.
 	 */
 	label: string;
 
 	/**
-	 * TODO
+	 * The collection of the child list items inside this group.
 	 */
 	items: Collection<ListDropdownButtonDefinition>;
 };
diff --git a/packages/ckeditor5-ui/src/list/listitemgroupview.ts b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
index a07bce4923f..c594ee894d3 100644
--- a/packages/ckeditor5-ui/src/list/listitemgroupview.ts
+++ b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
@@ -8,26 +8,26 @@
  */
 
 import View from '../view';
-
-import type { FocusableView } from '../focuscycler';
-import type ViewCollection from '../viewcollection';
+import ListView from './listview';
 
 import { uid, type Locale } from '@ckeditor/ckeditor5-utils';
-import type ListItemView from './listitemview';
 
 /**
- * TODO
+ * The list item group view class.
  */
 export default class ListItemGroupView extends View {
 	/**
-	 * TODO
+	 * The visible label of the group.
+	 *
+	 * @observable
+	 * @default ''
 	 */
 	declare public label: string;
 
 	/**
-	 * Collection of the child views inside of the {@link #element}.
+	 * Collection of the child list items inside this group.
 	 */
-	public readonly items: ViewCollection<ListItemView>;
+	public readonly items: ListView[ 'items' ];
 
 	/**
 	 * Controls whether the item view is visible. Visible by default, list items are hidden
@@ -45,16 +45,30 @@ export default class ListItemGroupView extends View {
 		super( locale );
 
 		const bind = this.bindTemplate;
+		const groupLabelId = `ck-editor__label_${ uid() }`;
+		const nestedList = new ListView( locale );
 
-		this.set( 'isVisible', true );
-		this.items = this.createCollection<ListItemView>();
+		this.set( {
+			label: '',
+			isVisible: true
+		} );
 
-		const groupLabelId = `ck-editor__label_${ uid() }`;
+		nestedList.set( {
+			role: 'group',
+			ariaLabelledBy: groupLabelId
+		} );
+
+		// Disable focus tracking and accessible navigation in the child list.
+		nestedList.focusTracker.destroy();
+		nestedList.keystrokes.destroy();
+
+		this.items = nestedList.items;
 
 		this.setTemplate( {
 			tag: 'li',
 
 			attributes: {
+				role: 'presentation',
 				class: [
 					'ck',
 					'ck-list__group',
@@ -64,28 +78,15 @@ export default class ListItemGroupView extends View {
 
 			children: [
 				{
-					tag: 'li',
+					tag: 'span',
 					attributes: {
-						role: 'presentation',
 						id: groupLabelId
 					},
 					children: [
-						{
-							tag: 'span',
-							children: [
-								{ text: bind.to( 'label' ) }
-							]
-						},
-						{
-							tag: 'ul',
-							attributes: {
-								role: 'group',
-								'aria-labelledby': groupLabelId
-							},
-							children: this.items
-						}
+						{ text: bind.to( 'label' ) }
 					]
-				}
+				},
+				nestedList
 			]
 		} );
 	}
@@ -94,6 +95,8 @@ export default class ListItemGroupView extends View {
 	 * Focuses the list item.
 	 */
 	public focus(): void {
-		( this.items.first as FocusableView ).focus();
+		if ( this.items.first ) {
+			this.items.first.focus();
+		}
 	}
 }
diff --git a/packages/ckeditor5-ui/src/list/listitemview.ts b/packages/ckeditor5-ui/src/list/listitemview.ts
index c2a62bbc0c4..70b21b462ce 100644
--- a/packages/ckeditor5-ui/src/list/listitemview.ts
+++ b/packages/ckeditor5-ui/src/list/listitemview.ts
@@ -21,7 +21,7 @@ export default class ListItemView extends View {
 	/**
 	 * Collection of the child views inside of the list item {@link #element}.
 	 */
-	public readonly children: ViewCollection;
+	public readonly children: ViewCollection<FocusableView>;
 
 	/**
 	 * Controls whether the item view is visible. Visible by default, list items are hidden
@@ -64,6 +64,8 @@ export default class ListItemView extends View {
 	 * Focuses the list item.
 	 */
 	public focus(): void {
-		( this.children.first as FocusableView ).focus();
+		if ( this.children.first ) {
+			this.children.first.focus();
+		}
 	}
 }
diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index 5efd0deb5a0..9ae12ab8601 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -10,7 +10,7 @@
 import View from '../view';
 import FocusCycler from '../focuscycler';
 
-import ListItemView from './listitemview';
+import type ListItemView from './listitemview';
 import ListItemGroupView from './listitemgroupview';
 import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
 import ViewCollection from '../viewcollection';
@@ -30,14 +30,16 @@ import '../../theme/components/list/list.css';
  */
 export default class ListView extends View<HTMLUListElement> implements DropdownPanelFocusable {
 	/**
-	 * TODO
+	 * The collection of focusable views in the list. It is used to determine accessible navigation
+	 * between the {@link module:ui/list/listitemview~ListItemView list items} and
+	 * {@link module:ui/list/listgroupview~ListGroupView list groups}.
 	 */
 	public readonly focusables: ViewCollection;
 
 	/**
 	 * Collection of the child list views.
 	 */
-	public readonly items: ViewCollection;
+	public readonly items: ViewCollection<ListItemView | ListItemGroupView>;
 
 	/**
 	 * Tracks information about DOM focus in the list.
@@ -56,6 +58,13 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	 */
 	declare public ariaLabel: string | undefined;
 
+	/**
+	 * (Optional) The ARIA property reflected by the `aria-ariaLabelledBy` DOM attribute used by assistive technologies.
+	 *
+	 * @observable
+	 */
+	declare public ariaLabelledBy?: string | undefined;
+
 	/**
 	 * The property reflected by the `role` DOM attribute to be used by assistive technologies.
 	 *
@@ -95,6 +104,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 		} );
 
 		this.set( 'ariaLabel', undefined );
+		this.set( 'ariaLabelledBy', undefined );
 		this.set( 'role', undefined );
 
 		this.setTemplate( {
@@ -107,7 +117,8 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 					'ck-list'
 				],
 				role: bind.to( 'role' ),
-				'aria-label': bind.to( 'ariaLabel' )
+				'aria-label': bind.to( 'ariaLabel' ),
+				'aria-labelledby': bind.to( 'ariaLabelledBy' )
 			},
 
 			children: this.items
@@ -131,40 +142,36 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 
 		const registerGroupItems = ( group: ListItemGroupView ) => {
 			for ( const child of group.items ) {
-				registerItem( child );
+				registerItem( child as ListItemView );
 			}
 		};
 
 		// Items added before rendering should be known to the #focusTracker.
 		for ( const item of this.items ) {
-			if ( item instanceof ListItemView ) {
-				registerItem( item );
-			} else if ( item instanceof ListItemGroupView ) {
+			if ( item instanceof ListItemGroupView ) {
 				registerGroupItems( item );
+			} else {
+				registerItem( item );
 			}
 		}
 
 		this.items.on<CollectionAddEvent<ListItemView>>( 'add', ( evt, item ) => {
-			if ( item instanceof ListItemView ) {
-				registerItem( item );
-			}
-
 			if ( item instanceof ListItemGroupView ) {
 				registerGroupItems( item );
+			} else {
+				registerItem( item );
 			}
 		} );
 
 		this.items.on<CollectionRemoveEvent<ListItemView>>( 'remove', ( evt, item ) => {
-			if ( item instanceof ListItemView ) {
-				this.focusTracker.remove( item.element! );
-				this.focusables.remove( item );
-			}
-
 			if ( item instanceof ListItemGroupView ) {
 				for ( const child of item.items ) {
 					this.focusTracker.remove( child.element! );
 					this.focusables.remove( child );
 				}
+			} else {
+				this.focusTracker.remove( item.element! );
+				this.focusables.remove( item );
 			}
 		} );
 
diff --git a/packages/ckeditor5-ui/tests/list/listgroupview.js b/packages/ckeditor5-ui/tests/list/listgroupview.js
new file mode 100644
index 00000000000..0f4cc00818a
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/list/listgroupview.js
@@ -0,0 +1,110 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import ListItemView from '../../src/list/listitemview';
+import ListItemGroupView from '../../src/list/listitemgroupview';
+import ViewCollection from '../../src/viewcollection';
+
+describe( 'ListItemGroupView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new ListItemGroupView();
+		view.label = 'Foo';
+
+		return view.render();
+	} );
+
+	describe( 'constructor()', () => {
+		describe( 'template', () => {
+			it( 'creates a list element', () => {
+				expect( view.element.tagName ).to.equal( 'LI' );
+				expect( view.element.role ).to.equal( 'presentation' );
+			} );
+
+			it( 'sets CSS classes', () => {
+				expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-list__group' ) ).to.be.true;
+			} );
+
+			it( 'creates a label element as a first child', () => {
+				const labelElement = view.element.firstChild;
+
+				expect( labelElement.textContent ).to.equal( 'Foo' );
+			} );
+
+			describe( 'nested list', () => {
+				it( 'is created as a last child', () => {
+					const listElement = view.element.lastChild;
+
+					expect( listElement.tagName ).to.equal( 'UL' );
+					expect( listElement.role ).to.equal( 'group' );
+					expect( listElement.classList.contains( 'ck' ) ).to.be.true;
+					expect( listElement.classList.contains( 'ck-list' ) ).to.be.true;
+				} );
+
+				it( 'is described using an ARIA attribute for assistive technologies', () => {
+					const listElement = view.element.lastChild;
+
+					expect( listElement.attributes[ 'aria-labelledby' ].value ).to.equal( view.element.firstChild.id );
+				} );
+			} );
+		} );
+
+		describe( 'view#items collection', () => {
+			it( 'exists', () => {
+				expect( view.items ).to.be.instanceOf( ViewCollection );
+			} );
+
+			it( 'populates the nested list', () => {
+				expect( view.items ).to.be.instanceOf( ViewCollection );
+			} );
+		} );
+
+		it( 'sets the #isVisible property', () => {
+			expect( view.isVisible ).to.be.true;
+		} );
+
+		describe( 'DOM element bindings', () => {
+			describe( 'isVisible', () => {
+				it( 'reacts on view#isVisible', () => {
+					view.isVisible = true;
+					expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.false;
+
+					view.isVisible = false;
+					expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.true;
+				} );
+			} );
+
+			describe( 'label', () => {
+				it( 'reacts on view#label', () => {
+					view.label = 'foo';
+					expect( view.element.firstChild.textContent ).to.equal( 'foo' );
+
+					view.label = 'bar';
+					expect( view.element.firstChild.textContent ).to.equal( 'bar' );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the first view in in #items', () => {
+			const childListItemView = new ListItemView();
+			view.items.add( childListItemView );
+
+			const spy = sinon.spy( childListItemView, 'focus' );
+
+			view.focus();
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'does not throw if #items are empty', () => {
+			expect( () => {
+				view.focus();
+			} ).to.not.throw();
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/list/listitemview.js b/packages/ckeditor5-ui/tests/list/listitemview.js
index 577a8c4cc65..7892ece2c63 100644
--- a/packages/ckeditor5-ui/tests/list/listitemview.js
+++ b/packages/ckeditor5-ui/tests/list/listitemview.js
@@ -54,5 +54,11 @@ describe( 'ListItemView', () => {
 			view.focus();
 			sinon.assert.calledOnce( spy );
 		} );
+
+		it( 'should not throw if there is no child view', () => {
+			expect( () => {
+				view.focus();
+			} ).to.not.throw();
+		} );
 	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/list/listview.js b/packages/ckeditor5-ui/tests/list/listview.js
index 867efdcdd89..74472fbbada 100644
--- a/packages/ckeditor5-ui/tests/list/listview.js
+++ b/packages/ckeditor5-ui/tests/list/listview.js
@@ -222,6 +222,18 @@ describe( 'ListView', () => {
 		} );
 	} );
 
+	describe( '#ariaLabelledBy', () => {
+		it( 'should be not set by default', () => {
+			expect( view.element.attributes[ 'aria-labelledby' ] ).to.be.undefined;
+		} );
+
+		it( 'should set aria-labelledby', () => {
+			view.ariaLabelledBy = 'foo';
+
+			expect( view.element.attributes[ 'aria-labelledby' ].value ).to.equal( 'foo' );
+		} );
+	} );
+
 	describe( '#role', () => {
 		it( 'should be not set by default', () => {
 			expect( view.element.attributes.role ).to.be.undefined;
diff --git a/packages/ckeditor5-ui/tests/manual/list/list.html b/packages/ckeditor5-ui/tests/manual/list/list.html
index 6be06b12b32..24a9b97abbb 100644
--- a/packages/ckeditor5-ui/tests/manual/list/list.html
+++ b/packages/ckeditor5-ui/tests/manual/list/list.html
@@ -7,7 +7,7 @@
 		justify-content: space-around;
 	}
 
-	.ck.ck-list {
+	#playground > .ck.ck-list {
 		border: 1px solid #000;
 	}
 </style>

From 012f60e56051818b1042e5ce0e36ba62f284e2bb Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 4 Sep 2023 14:17:25 +0200
Subject: [PATCH 23/84] Docs and tests for ButtonView with configurable label
 view instance.

---
 .../ckeditor5-ui/src/button/buttonlabel.ts    | 41 +++++++++++++
 .../src/button/buttonlabelview.ts             | 28 +++++----
 .../ckeditor5-ui/src/button/buttonview.ts     | 20 +++++--
 packages/ckeditor5-ui/src/index.ts            |  1 +
 .../tests/button/buttonlabelview.js           | 53 +++++++++++++++++
 .../ckeditor5-ui/tests/button/buttonview.js   | 59 +++++++++++++++++++
 6 files changed, 183 insertions(+), 19 deletions(-)
 create mode 100644 packages/ckeditor5-ui/src/button/buttonlabel.ts
 create mode 100644 packages/ckeditor5-ui/tests/button/buttonlabelview.js

diff --git a/packages/ckeditor5-ui/src/button/buttonlabel.ts b/packages/ckeditor5-ui/src/button/buttonlabel.ts
new file mode 100644
index 00000000000..17d340e56cb
--- /dev/null
+++ b/packages/ckeditor5-ui/src/button/buttonlabel.ts
@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module ui/button/buttonlabel
+*/
+
+import type View from '../view';
+
+/**
+ * The button label interface. Implemented by the {@link module:ui/button/buttonlabelview~ButtonLabelView}
+ * and any label view that can be used with the {@link module:ui/button/buttonview~ButtonView}.
+ */
+export default interface ButtonLabel extends View {
+
+	/**
+	 * The `id` attribute of the button label. It is used for accessibility purposes
+	 * to describe the button.
+	 *
+	 * @observable
+	 */
+	id: string | undefined;
+
+	/**
+	 * The `style` attribute of the button label. It allows customizing the presentation
+	 * of the label.
+	 *
+	 * @observable
+	 */
+	style: string | undefined;
+
+	/**
+	 * The human-readable text of the label.
+	 *
+	 * @observable
+	 */
+	text: string | undefined;
+
+}
diff --git a/packages/ckeditor5-ui/src/button/buttonlabelview.ts b/packages/ckeditor5-ui/src/button/buttonlabelview.ts
index 8e6bc8639d2..7a54ef959dd 100644
--- a/packages/ckeditor5-ui/src/button/buttonlabelview.ts
+++ b/packages/ckeditor5-ui/src/button/buttonlabelview.ts
@@ -8,36 +8,38 @@
  */
 
 import View from '../view';
+import type ButtonLabel from './buttonlabel';
 
 /**
- * TODO
+ * A default implementation of the button view's label. It comes with a dynamic text support
+ * via {@link module:ui/button/buttonlabelview~ButtonLabelView#text} property.
  */
-export default class ButtonLabelView extends View {
+export default class ButtonLabelView extends View implements ButtonLabel {
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
-	declare public style: string | undefined;
+	declare public id: string | undefined;
 
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
-	declare public label: string | undefined;
+	declare public style: string | undefined;
 
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
-	declare public id: string | undefined;
+	declare public text: string | undefined;
 
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
 	constructor() {
 		super();
 
 		this.set( {
-			style: null,
-			label: null,
-			id: null
+			style: undefined,
+			text: undefined,
+			id: undefined
 		} );
 
 		const bind = this.bindTemplate;
@@ -56,7 +58,7 @@ export default class ButtonLabelView extends View {
 
 			children: [
 				{
-					text: bind.to( 'label' )
+					text: bind.to( 'text' )
 				}
 			]
 		} );
diff --git a/packages/ckeditor5-ui/src/button/buttonview.ts b/packages/ckeditor5-ui/src/button/buttonview.ts
index d1aa1abfca3..10a26a735db 100644
--- a/packages/ckeditor5-ui/src/button/buttonview.ts
+++ b/packages/ckeditor5-ui/src/button/buttonview.ts
@@ -13,6 +13,7 @@ import IconView from '../icon/iconview';
 import type { TemplateDefinition } from '../template';
 import type ViewCollection from '../viewcollection';
 import type { default as Button, ButtonExecuteEvent } from './button';
+import type ButtonLabel from './buttonlabel';
 import ButtonLabelView from './buttonlabelview';
 
 import {
@@ -51,9 +52,12 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	public readonly children: ViewCollection;
 
 	/**
-	 * Label of the button view. It is configurable using the {@link #label label attribute}.
+	 * Label of the button view. Its text is configurable using the {@link #label label attribute}.
+	 *
+	 * If not configured otherwise in the `constructor()`, by default the label is an instance
+	 * of {@link module:ui/button/buttonlabelview~ButtonLabelView}.
 	 */
-	public readonly labelView: ButtonLabelView;
+	public readonly labelView: ButtonLabel;
 
 	/**
 	 * The icon view of the button. Will be added to {@link #children} when the
@@ -179,9 +183,13 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	private _focusDelayed: DelayedFunc<() => void> | null = null;
 
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the button view class.
+	 *
+	 * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param labelView The instance of the button's label. If not provided, an instance of
+	 * {@link module:ui/button/buttonlabelview~ButtonLabelView} is used.
 	 */
-	constructor( locale?: Locale, labelView = new ButtonLabelView() ) {
+	constructor( locale?: Locale, labelView: ButtonLabel = new ButtonLabelView() ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
@@ -326,10 +334,10 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	}
 
 	/**
-	 * Creates a label view instance and binds it with button attributes.
+	 * Binds the label view instance it with button attributes.
 	 */
 	private _setupLabelView( labelView: ButtonLabelView ) {
-		labelView.bind( 'label', 'style', 'id' ).to( this, 'label', 'labelStyle', 'ariaLabelledBy' );
+		labelView.bind( 'text', 'style', 'id' ).to( this, 'label', 'labelStyle', 'ariaLabelledBy' );
 
 		return labelView;
 	}
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 3f90cddd00b..f8949e9d5a1 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -16,6 +16,7 @@ export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhan
 export { default as BodyCollection } from './editorui/bodycollection';
 
 export { type ButtonExecuteEvent } from './button/button';
+export { type default as ButtonLabel } from './button/buttonlabel';
 export { default as ButtonView } from './button/buttonview';
 export { default as ButtonLabelView } from './button/buttonlabelview';
 export { default as SwitchButtonView } from './button/switchbuttonview';
diff --git a/packages/ckeditor5-ui/tests/button/buttonlabelview.js b/packages/ckeditor5-ui/tests/button/buttonlabelview.js
new file mode 100644
index 00000000000..4afbec7edf3
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/button/buttonlabelview.js
@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { ButtonLabelView } from '../../src';
+
+describe( 'ButtonLabelView', () => {
+	let view;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		view = new ButtonLabelView();
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'sets default properties', () => {
+			expect( view.style ).to.be.undefined;
+			expect( view.text ).to.be.undefined;
+			expect( view.id ).to.be.undefined;
+		} );
+
+		it( 'creates an element with CSS classes', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-button__label' ) ).to.true;
+		} );
+
+		it( 'creates a DOM binding for style', () => {
+			view.style = 'color: red';
+
+			expect( view.element.style.color ).to.equal( 'red' );
+		} );
+
+		it( 'creates a DOM binding for #text', () => {
+			view.text = 'foobar';
+
+			expect( view.element.innerHTML ).to.equal( 'foobar' );
+		} );
+
+		it( 'creates a DOM binding for #id', () => {
+			view.id = 'foobar';
+
+			expect( view.id ).to.equal( 'foobar' );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/button/buttonview.js b/packages/ckeditor5-ui/tests/button/buttonview.js
index 0cd75607879..b1edb4211e8 100644
--- a/packages/ckeditor5-ui/tests/button/buttonview.js
+++ b/packages/ckeditor5-ui/tests/button/buttonview.js
@@ -11,6 +11,7 @@ import IconView from '../../src/icon/iconview';
 import View from '../../src/view';
 import ViewCollection from '../../src/viewcollection';
 import env from '@ckeditor/ckeditor5-utils/src/env';
+import { ButtonLabelView } from '../../src';
 
 describe( 'ButtonView', () => {
 	let locale, view;
@@ -46,6 +47,64 @@ describe( 'ButtonView', () => {
 		it( 'creates #iconView', () => {
 			expect( view.iconView ).to.be.instanceOf( IconView );
 		} );
+
+		describe( 'label', () => {
+			it( 'uses ButtonLabelView by default', () => {
+				expect( view.labelView ).to.be.instanceOf( ButtonLabelView );
+
+				view.set( {
+					labelStyle: 'color: red',
+					label: 'bar'
+				} );
+
+				expect( view.labelView.id ).to.equal( view.element.getAttribute( 'aria-labelledby' ) );
+				expect( view.labelView.element.getAttribute( 'style' ) ).to.equal( 'color: red' );
+				expect( view.labelView.element.textContent ).to.equal( 'bar' );
+			} );
+
+			it( 'accepts a custom label instance that implements the same button label interface', () => {
+				class CustomLabel extends View {
+					constructor() {
+						super();
+
+						const bind = this.bindTemplate;
+
+						this.set( {
+							text: undefined,
+							style: undefined,
+							id: undefined
+						} );
+
+						this.setTemplate( {
+							tag: 'span',
+							attributes: {
+								id: bind.to( 'id' ),
+								style: bind.to( 'style' )
+							},
+							children: [
+								{ text: bind.to( 'text' ) }
+							]
+						} );
+					}
+				}
+
+				const view = new ButtonView( locale, new CustomLabel() );
+
+				view.set( {
+					labelStyle: 'color: red',
+					label: 'bar'
+				} );
+
+				view.render();
+
+				expect( view.labelView ).to.be.instanceOf( CustomLabel );
+				expect( view.labelView.element.id ).to.equal( view.element.getAttribute( 'aria-labelledby' ) );
+				expect( view.labelView.element.getAttribute( 'style' ) ).to.equal( 'color: red' );
+				expect( view.labelView.element.textContent ).to.equal( 'bar' );
+
+				view.destroy();
+			} );
+		} );
 	} );
 
 	describe( '<button> bindings', () => {

From 45a452598b8221b61005e1fc4b87b0c4bffe646d Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 4 Sep 2023 14:36:20 +0200
Subject: [PATCH 24/84] Tests: Added tests for addListToDropdown() used with
 item groups.

---
 packages/ckeditor5-ui/tests/dropdown/utils.js | 66 +++++++++++++++++++
 ...{listgroupview.js => listitemgroupview.js} |  0
 2 files changed, 66 insertions(+)
 rename packages/ckeditor5-ui/tests/list/{listgroupview.js => listitemgroupview.js} (100%)

diff --git a/packages/ckeditor5-ui/tests/dropdown/utils.js b/packages/ckeditor5-ui/tests/dropdown/utils.js
index c852fbaee19..6a86ff14024 100644
--- a/packages/ckeditor5-ui/tests/dropdown/utils.js
+++ b/packages/ckeditor5-ui/tests/dropdown/utils.js
@@ -29,6 +29,7 @@ import ListItemView from '../../src/list/listitemview';
 import ListSeparatorView from '../../src/list/listseparatorview';
 import ListView from '../../src/list/listview';
 import ViewCollection from '../../src/viewcollection';
+import { ListItemGroupView } from '../../src';
 
 describe( 'utils', () => {
 	let locale, dropdownView;
@@ -993,6 +994,71 @@ describe( 'utils', () => {
 					expect( listItems.first ).to.be.instanceOf( ListSeparatorView );
 				} );
 			} );
+
+			describe( 'with ListGroupView', () => {
+				let definitionsWithGroups;
+
+				beforeEach( () => {
+					definitionsWithGroups = [
+						{
+							type: 'button',
+							model: new Model( { label: 'a', labelStyle: 'x' } )
+						},
+						{
+							type: 'group',
+							label: 'b',
+							items: new Collection( [
+								{
+									type: 'button',
+									model: new Model( { label: 'b.a', labelStyle: 'y' } )
+								},
+								{
+									type: 'button',
+									model: new Model( { label: 'b.b', labelStyle: 'z' } )
+								}
+							] )
+						}
+					];
+				} );
+
+				it( 'is populated using item definitions', () => {
+					definitions.addMany( definitionsWithGroups );
+
+					expect( listItems ).to.have.length( 2 );
+					expect( listItems.first ).to.be.instanceOf( ListItemView );
+					expect( listItems.first.children.first ).to.be.instanceOf( ButtonView );
+					expect( listItems.first.children.first.labelView.text ).to.equal( 'a' );
+
+					expect( listItems.last ).to.be.instanceOf( ListItemGroupView );
+
+					expect( listItems.last.items.first ).to.be.instanceOf( ListItemView );
+					expect( listItems.last.items.first.children.first ).to.be.instanceOf( ButtonView );
+					expect( listItems.last.items.first.children.first.labelView.text ).to.equal( 'b.a' );
+					expect( listItems.last.items.first.children.first.labelView.style ).to.equal( 'y' );
+
+					expect( listItems.last.items.last ).to.be.instanceOf( ListItemView );
+					expect( listItems.last.items.last.children.first ).to.be.instanceOf( ButtonView );
+					expect( listItems.last.items.last.children.first.labelView.text ).to.equal( 'b.b' );
+					expect( listItems.last.items.last.children.first.labelView.style ).to.equal( 'z' );
+				} );
+
+				it( 'delegates #execute event from the ListGroupView children to the DropdownView', done => {
+					definitions.addMany( definitionsWithGroups );
+
+					dropdownView.on( 'execute', evt => {
+						expect( evt.source ).to.equal( listItems.last.items.first.children.first );
+						expect( evt.path ).to.deep.equal( [
+							listItems.last.items.first.children.first,
+							listItems.last.items.first,
+							dropdownView
+						] );
+
+						done();
+					} );
+
+					listItems.last.items.first.children.first.fire( 'execute' );
+				} );
+			} );
 		} );
 
 		describe( 'focus management on dropdown open', () => {
diff --git a/packages/ckeditor5-ui/tests/list/listgroupview.js b/packages/ckeditor5-ui/tests/list/listitemgroupview.js
similarity index 100%
rename from packages/ckeditor5-ui/tests/list/listgroupview.js
rename to packages/ckeditor5-ui/tests/list/listitemgroupview.js

From a5fba96d53fb6e07f099b17a0b37f045b41fb029 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 4 Sep 2023 16:06:00 +0200
Subject: [PATCH 25/84] Code refactoring, docs, and tests for
 HighlightedTextView.

---
 .../highlightedtext/highlightedtextview.ts    | 44 +++++++---
 .../highlightedtext/highlightedtextview.js    | 88 +++++++++++++++++++
 2 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js

diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
index f70850a7814..70a0720ea2a 100644
--- a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -13,40 +13,60 @@ import { escape } from 'lodash-es';
 import '../../theme/components/highlightedtext/highlightedtext.css';
 
 /**
- * TODO
+ * A class representing a view that displays a text which subset can be highlighted using the
+ * {@link #highlightText} method.
  */
 export default class HighlightedTextView extends View {
 	/**
-	 * TODO
+	 * The text that can be highlighted using the {@link #highlightText} method.
+	 *
+	 * **Note:** When this property changes, the previous highlighting is removed.
 	 */
-	private _text: string;
+	declare public text: string | undefined;
 
 	/**
-	 * TODO
-	 *
-	 * @param text
+	 * @inheritDoc
 	 */
-	constructor( text: string ) {
+	constructor() {
 		super();
 
-		this._text = text;
+		this.set( 'text', undefined );
 
 		this.setTemplate( {
 			tag: 'span',
 			attributes: {
 				class: [ 'ck', 'ck-highlighted-text' ]
-			},
-			children: text
+			}
+		} );
+
+		this.on( 'render', () => {
+			// Classic setTemplate binding for #text will not work because highlightText() replaces the
+			// pre-rendered DOM text node new a new one (and <mark> elements).
+			this.on( 'change:text', () => {
+				this._updateInnerHTML( this.text );
+			} );
+
+			this._updateInnerHTML( this.text );
 		} );
 	}
 
 	/**
-	 * TODO
+	 * Highlights view's {@link #text} according to the specified RegExp. If the passed RegExp is `null`, the
+	 * highlighting is removed
 	 *
 	 * @param regExp
 	 */
 	public highlightText( regExp: RegExp | null ): void {
-		this.element!.innerHTML = markText( this._text, regExp );
+		this._updateInnerHTML( markText( this.text || '', regExp ) );
+	}
+
+	/**
+	 * Updates element's innerHTML with the passed content.
+	 *
+	 * @param newText
+	 */
+	private _updateInnerHTML( newInnerHTML: string | undefined ) {
+		this.element!.innerHTML = newInnerHTML || '';
 	}
 }
 
diff --git a/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js b/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js
new file mode 100644
index 00000000000..c009d8fe589
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js
@@ -0,0 +1,88 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { HighlightedTextView } from '@ckeditor/ckeditor5-ui';
+import { global } from '@ckeditor/ckeditor5-utils';
+
+describe( 'TemplateListButtonView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new HighlightedTextView();
+		view.render();
+
+		global.document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		view.element.remove();
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should create a DOM element with CSS classes', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-highlighted-text' ) ).to.true;
+		} );
+
+		it( 'should create observable #text property', () => {
+			expect( view.text ).to.be.undefined;
+		} );
+
+		it( 'should bind #text property to DOM', () => {
+			expect( view.element.innerHTML ).to.equal( '' );
+
+			view.text = 'foo';
+
+			expect( view.element.innerHTML ).to.equal( 'foo' );
+		} );
+	} );
+
+	describe( 'highlightText()', () => {
+		beforeEach( () => {
+			view.text = 'Example text with formatting';
+		} );
+
+		it( 'should not highlight anything when no query is specified', () => {
+			view.highlightText( null );
+
+			expect( view.element.innerHTML ).to.equal( 'Example text with formatting' );
+		} );
+
+		it( 'should highlight the query', () => {
+			view.highlightText( new RegExp( /text/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal( 'Example <mark>text</mark> with formatting' );
+		} );
+
+		it( 'should highlight multiple occurences of the query', () => {
+			view.highlightText( new RegExp( /e/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal(
+				'<mark>E</mark>xampl<mark>e</mark> t<mark>e</mark>xt with formatting'
+			);
+		} );
+
+		it( 'should escape text correctly', () => {
+			view.text = 'Foo <bar> bar &amp; qux';
+
+			view.highlightText( new RegExp( /a/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal(
+				'Foo &lt;b<mark>a</mark>r&gt; b<mark>a</mark>r &amp;<mark>a</mark>mp; qux'
+			);
+		} );
+
+		it( 'should not apply after changing #text', () => {
+			view.highlightText( new RegExp( /text/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal( 'Example <mark>text</mark> with formatting' );
+
+			view.text = 'New text';
+
+			expect( view.element.innerHTML ).to.equal( 'New text' );
+		} );
+	} );
+} );

From 9189e948381b84cb62465e1e2efce5267e4ee81a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 5 Sep 2023 11:19:34 +0200
Subject: [PATCH 26/84] Tests and docs for the SearchView component.

---
 .../ckeditor5-ui/src/search/filteredview.ts   |   4 +-
 .../ckeditor5-ui/src/search/searchview.ts     |  90 +++-
 .../tests/manual/search/search.ts             |   2 +-
 .../ckeditor5-ui/tests/search/searchview.js   | 470 ++++++++++++++++++
 4 files changed, 541 insertions(+), 25 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/search/searchview.js

diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index 7499b2f73e1..9c88a3441cf 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
+import type { FocusableView } from '../focuscycler';
 import type View from '../view';
 
 /**
@@ -13,7 +13,7 @@ import type View from '../view';
 /**
  * TODO
  */
-export default interface FilteredView extends View, DropdownPanelFocusable {
+export default interface FilteredView extends View, FocusableView {
 
 	/**
 	 * TODO
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
index 19134858cbe..ec93df9dfe3 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -21,7 +21,22 @@ import FocusCycler from '../focuscycler';
 import '../../theme/components/search/search.css';
 
 /**
- * TODO: A search component.
+ * A search component that allows filtering of an arbitrary view based on a search query
+ * specified by the user.
+ *
+ *```ts
+ * // This view must specify the `filter()` and `focus()` methods.
+ * const filteredView = ...;
+ *
+ * const searchView = new SearchView( locale, {
+ * 	searchFieldLabel: 'Search list items',
+ * 	filteredView
+ * } );
+ *
+ * view.render();
+ *
+ * document.body.append( view.element );
+ * ```
  *
  * @extends module:ui/view~View
  */
@@ -34,42 +49,43 @@ export default class SearchView extends View {
 	public focusTracker: FocusTracker;
 
 	/**
-	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 * An instance of the keystroke handler managing user interaction and accessibility.
 	 *
 	 * @readonly
 	 */
 	public keystrokes: KeystrokeHandler;
 
 	/**
-	 * TODO
+	 * A view hosting the {@link #filteredView} passed in the configuration and the {@link #infoView}.
 	 */
 	public resultsView: SearchResultsView;
 
 	/**
-	 * TODO
+	 * The view that is filtered by the search query.
 	 */
 	public filteredView: FilteredView;
 
 	/**
-	 * TODO
+	 * The view that displays the information about the search results.
 	 */
-	public infoView: View;
+	public infoView: View | undefined;
 
 	/**
-	 * TODO
+	 * The view that allows the user to enter the search query.
 	 */
 	public searchFieldView: SearchFieldView;
 
 	/**
-	 * Helps cycling over {@link #children} in the view.
+	 * Provides the focus management (keyboard navigation) between {@link #searchFieldView} and {@link #filteredView}.
 	 *
 	 * @readonly
-	 * @internal
 	 */
 	private _focusCycler: FocusCycler;
 
 	/**
-	 * TODO
+	 * The cached configuration object.
+	 *
+	 * @internal
 	 */
 	private _config: SearchViewConfig;
 
@@ -77,8 +93,7 @@ export default class SearchView extends View {
 	 * Creates an instance of the {@link module:ui/search/searchview~SearchView} class.
 	 *
 	 * @param locale The localization services instance.
-	 * @param commands The object of all grouped commands.
-	 * @param label TODO
+	 * @param config Configuration of the view.
 	 */
 	constructor( locale: Locale, config: SearchViewConfig ) {
 		super( locale );
@@ -93,7 +108,6 @@ export default class SearchView extends View {
 
 		if ( !config.infoView ) {
 			this.infoView = new SearchInfoView();
-			this.resultsView.children.add( this.infoView );
 			this._enableDefaultInfoViewBehavior();
 
 			this.on( 'render', () => {
@@ -105,7 +119,7 @@ export default class SearchView extends View {
 			this.infoView = config.infoView;
 		}
 
-		this.resultsView.children.add( this.filteredView );
+		this.resultsView.children.addMany( [ this.infoView, this.filteredView ] );
 
 		this._focusCycler = new FocusCycler( {
 			focusables: this.createCollection( [ this.searchFieldView, this.filteredView ] ),
@@ -177,7 +191,7 @@ export default class SearchView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Searches the {@link #filteredView} for the given query.
 	 *
 	 * @internal
 	 * @param query The search query string.
@@ -190,11 +204,10 @@ export default class SearchView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Creates a search field view based on configured creator..
 	 *
-	 * @internal
 	 * @param locale The localization services instance.
-	 * @param label TODO
+	 * @param label The label of the search field.
 	 */
 	private _createSearchFieldView( locale: Locale, label: string ): SearchFieldView {
 		const searchFieldView = new SearchFieldView( locale, this._config.searchFieldInputCreator, label );
@@ -209,7 +222,8 @@ export default class SearchView extends View {
 	}
 
 	/**
-	 * TODO
+	 * Initializes the default {@link #infoView} behavior with default text labels when no custom info view
+	 * was specified in the view config.
 	 */
 	private _enableDefaultInfoViewBehavior(): void {
 		const t = this.locale!.t;
@@ -250,14 +264,45 @@ export default class SearchView extends View {
 }
 
 /**
- * TODO
+ * The configuration of the {@link module:ui/search/searchview~SearchView} class.
  */
 export type SearchViewConfig = {
+
+	/**
+	 * The view that is filtered by the search query.
+	 */
 	filteredView: FilteredView;
+
+	/**
+	 * The human-readable label of the search field.
+	 */
 	searchFieldLabel: string;
+
+	/**
+	 * The function that creates the search field input view. By default, a plain
+	 * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.
+	 */
 	searchFieldInputCreator?: ConstructorParameters<typeof LabeledFieldView<InputView>>[ 1 ];
+
+	/**
+	 * The custom CSS class name to be added to the search view element.
+	 */
 	class?: string;
+
+	/**
+	 * The view that displays the information about the search results. If not specified,
+	 * {@link module:ui/search/searchinfoview~SearchInfoView} is used.
+	 */
 	infoView?: View;
+
+	/**
+	 * The configuration of text labels displayed in the {@link #infoView} in different states
+	 * of the search component.
+	 *
+	 * **Note**: This configuration is only used when the {@link #infoView} is **not** specified.
+	 * In other cases, please use the {@link module:ui/search/searchview~SearchViewSearchEvent} to bring about
+	 * your own info text logic.
+	 */
 	infoViewTextConfig?: {
 		notFound?: {
 			primary: SearchViewDefaultInfoText;
@@ -271,12 +316,13 @@ export type SearchViewConfig = {
 };
 
 /**
- * TODO
+ * Describes value of a {@link module:ui/search/searchview~SearchViewConfig#infoViewTextConfig info text configuration}.
+ * A string or a function that returns a string with the information about the search results.
  */
 export type SearchViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );
 
 /**
- * TODO
+ * An event fired when the search query changes fired by {@link module:ui/search/searchview~SearchView#search}.
  *
  * @eventName ~SearchView#search
  */
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
index 00ab60590a2..4614c6a7b3c 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.ts
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -44,7 +44,7 @@ function createSearchableList() {
 					const groupView = listItemOrGroupView as ListItemGroupView;
 
 					for ( const item of groupView.items ) {
-						updateListItemVisibility( item );
+						updateListItemVisibility( item as ListItemView );
 					}
 
 					groupView.isVisible = !!groupView.items.filter( listItemView => listItemView.isVisible ).length;
diff --git a/packages/ckeditor5-ui/tests/search/searchview.js b/packages/ckeditor5-ui/tests/search/searchview.js
new file mode 100644
index 00000000000..c5bc4d93814
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/search/searchview.js
@@ -0,0 +1,470 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import {
+	FocusCycler,
+	InputNumberView,
+	InputTextView,
+	LabeledFieldView,
+	ListView,
+	SearchInfoView,
+	SearchView,
+	View,
+	createLabeledInputNumber
+} from '../../src';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
+import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe( 'SearchView', () => {
+	let view, filteredView;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		filteredView = new ListView();
+		filteredView.filter = () => {
+			return {
+				resultsCount: 1,
+				totalItemsCount: 5
+			};
+		};
+
+		view = new SearchView( new Locale(), {
+			filteredView,
+			searchFieldLabel: 'test label'
+		} );
+
+		view.render();
+
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		filteredView.destroy();
+		view.destroy();
+		view.element.remove();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates and element from template with CSS classes and attributes', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-search' ) ).to.true;
+			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
+		} );
+
+		it( 'supports extra CSS class in the config', () => {
+			const view = new SearchView( new Locale(), {
+				filteredView,
+				searchFieldLabel: 'foo',
+				class: 'bar'
+			} );
+
+			view.render();
+
+			expect( view.element.classList.contains( 'bar' ) ).to.true;
+
+			view.destroy();
+		} );
+
+		it( 'creates an instance of FocusTracker', () => {
+			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
+		} );
+
+		it( 'creates an instance of KeystrokeHandler', () => {
+			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
+		} );
+
+		it( 'creates and instance of FocusCycle', () => {
+			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		} );
+
+		it( 'assigns an instance of a view to #filteredView', () => {
+			expect( view.filteredView ).to.equal( filteredView );
+		} );
+
+		it( 'creates a #resultsView as a container for the #filteredView', () => {
+			expect( view.resultsView ).to.be.instanceOf( View );
+
+			expect( view.resultsView.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.resultsView.element.classList.contains( 'ck-search__results' ) ).to.true;
+
+			expect( view.resultsView.children.first ).to.equal( view.infoView );
+			expect( view.resultsView.children.last ).to.equal( filteredView );
+		} );
+
+		describe( 'focus tracking and cycling', () => {
+			describe( 'activates keyboard navigation', () => {
+				it( 'makes "tab" focus the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the query input is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.searchFieldView.element;
+
+					const spy = sinon.spy( filteredView, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'makes "shift + tab" focus the previous focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the results are focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = filteredView.element;
+
+					const spy = sinon.spy( view.searchFieldView, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+
+			it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {
+				const keyEvtData = {
+					stopPropagation: sinon.spy()
+				};
+
+				keyEvtData.keyCode = keyCodes.arrowdown;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowup;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledTwice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowleft;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledThrice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowright;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
+			} );
+		} );
+
+		describe( '#searchFieldView', () => {
+			it( 'gets created as labeled text view if not configured otherwise', () => {
+				expect( view.searchFieldView ).to.be.instanceOf( LabeledFieldView );
+				expect( view.searchFieldView.fieldView ).to.be.instanceOf( InputTextView );
+				expect( view.searchFieldView.label ).to.equal( 'test label' );
+			} );
+
+			it( 'gets created by a custom view creator configured by the user', () => {
+				const view = new SearchView( new Locale(), {
+					filteredView,
+					searchFieldInputCreator: createLabeledInputNumber,
+					searchFieldLabel: 'foo',
+					class: 'bar'
+				} );
+
+				view.render();
+
+				expect( view.searchFieldView ).to.be.instanceOf( LabeledFieldView );
+				expect( view.searchFieldView.fieldView ).to.be.instanceOf( InputNumberView );
+
+				view.destroy();
+			} );
+
+			it( 'shoud trigger #search() upon #input', () => {
+				const spy = sinon.spy( view, 'search' );
+
+				view.searchFieldView.fieldView.fire( 'input' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'should reset the entire view if fired #reset', () => {
+				const spy = sinon.spy( view, 'reset' );
+
+				view.searchFieldView.fire( 'reset' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+
+		describe( '#infoView', () => {
+			let view;
+
+			beforeEach( () => {
+				filteredView.filter = () => {
+					return {
+						resultsCount: 5,
+						totalItemsCount: 5
+					};
+				};
+
+				view = new SearchView( new Locale(), {
+					filteredView,
+					searchFieldLabel: 'test label'
+				} );
+
+				view.render();
+				document.body.appendChild( view.element );
+			} );
+
+			afterEach( () => {
+				view.destroy();
+				view.element.remove();
+			} );
+
+			describe( 'if not specified', () => {
+				it( 'is an instance of SearchInfoView if not specified in the config', () => {
+					expect( view.infoView ).to.be.instanceOf( SearchInfoView );
+					expect( view.infoView.isVisible ).to.be.false;
+				} );
+
+				it( 'comes with a default behavior for no search results', () => {
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 5
+						};
+					};
+
+					const view = new SearchView( new Locale(), {
+						filteredView,
+						searchFieldLabel: 'test label'
+					} );
+
+					view.render();
+					view.search( 'will not be found' );
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( 'No results found' );
+					expect( view.infoView.secondaryText ).to.equal( '' );
+
+					view.destroy();
+				} );
+
+				it( 'comes with a default behavior for no searchable items', () => {
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 0
+						};
+					};
+
+					const view = new SearchView( new Locale(), {
+						filteredView,
+						searchFieldLabel: 'test label'
+					} );
+
+					view.render();
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( 'No searchable items' );
+					expect( view.infoView.secondaryText ).to.equal( '' );
+
+					view.destroy();
+				} );
+
+				it( 'allows customization of info texts', () => {
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 0
+						};
+					};
+
+					const view = new SearchView( new Locale(), {
+						filteredView,
+						searchFieldLabel: 'test label',
+						infoViewTextConfig: {
+							notFound: {
+								primary: 'foo',
+								secondary: 'bar'
+							},
+							noSearchableItems: {
+								primary: 'baz',
+								secondary: 'qux'
+							}
+						}
+					} );
+
+					view.render();
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( 'baz' );
+					expect( view.infoView.secondaryText ).to.equal( 'qux' );
+
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 5
+						};
+					};
+
+					view.search( 'test' );
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( 'foo' );
+					expect( view.infoView.secondaryText ).to.equal( 'bar' );
+
+					view.destroy();
+				} );
+
+				it( 'allows info texts specified as functions', () => {
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 0
+						};
+					};
+
+					const dynamicLabelText = ( query, resultsCount, totalItemsCount ) =>
+						`"${ query }" ${ resultsCount } of ${ totalItemsCount }`;
+
+					const view = new SearchView( new Locale(), {
+						filteredView,
+						searchFieldLabel: 'test label',
+						infoViewTextConfig: {
+							notFound: {
+								primary: dynamicLabelText,
+								secondary: dynamicLabelText
+							},
+							noSearchableItems: {
+								primary: dynamicLabelText,
+								secondary: dynamicLabelText
+							}
+						}
+					} );
+
+					view.render();
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( '"" 0 of 0' );
+					expect( view.infoView.secondaryText ).to.equal( '"" 0 of 0' );
+
+					filteredView.filter = () => {
+						return {
+							resultsCount: 0,
+							totalItemsCount: 5
+						};
+					};
+
+					view.search( 'test' );
+
+					expect( view.infoView.isVisible ).to.be.true;
+					expect( view.infoView.primaryText ).to.equal( '"test" 0 of 5' );
+					expect( view.infoView.secondaryText ).to.equal( '"test" 0 of 5' );
+
+					view.destroy();
+				} );
+			} );
+
+			it( 'accpets a view from the configuration', () => {
+				const customInfoView = new View();
+				customInfoView.setTemplate( {
+					tag: 'div',
+					attributes: {
+						class: 'custom'
+					}
+				} );
+
+				const view = new SearchView( new Locale(), {
+					filteredView,
+					searchFieldLabel: 'test label',
+					infoView: customInfoView
+				} );
+
+				view.render();
+
+				expect( view.infoView ).to.equal( customInfoView );
+				expect( view.resultsView.children.first ).to.equal( customInfoView );
+				expect( view.resultsView.children.last ).to.equal( filteredView );
+
+				view.destroy();
+			} );
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the #searchFieldView', () => {
+			const spy = sinon.spy( view.searchFieldView, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+
+	describe( 'reset()', () => {
+		it( 'resets the #searchFieldView', () => {
+			const spy = sinon.spy( view.searchFieldView, 'reset' );
+
+			view.reset();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'resets the search results', () => {
+			const spy = sinon.spy( view, 'search' );
+
+			view.reset();
+
+			sinon.assert.calledOnceWithExactly( spy, '' );
+		} );
+	} );
+
+	describe( 'search()', () => {
+		it( 'should escape the query when creating a RegExp to avoid mismatches', () => {
+			const spy = sinon.spy( filteredView, 'filter' );
+
+			view.search( 'foo[ar]' );
+			sinon.assert.calledOnceWithExactly( spy, /foo\[ar\]/gi );
+
+			view.search( 'foo/bar' );
+			sinon.assert.calledWithExactly( spy.secondCall, /foo\/bar/gi );
+		} );
+
+		it( 'should filter the #filteredView', () => {
+			const spy = sinon.spy( filteredView, 'filter' );
+
+			view.search( 'foo' );
+
+			sinon.assert.calledOnceWithExactly( spy, /foo/gi );
+		} );
+
+		it( 'should fire the #search event with the query and search stats', done => {
+			filteredView.filter = () => {
+				return {
+					resultsCount: 1,
+					totalItemsCount: 10
+				};
+			};
+
+			view.on( 'search', ( evt, data ) => {
+				expect( data ).to.deep.equal( {
+					query: 'foo',
+					resultsCount: 1,
+					totalItemsCount: 10
+				} );
+
+				done();
+			} );
+
+			view.search( 'foo' );
+		} );
+	} );
+} );

From b79ccb074708fe6335834c7da65ef4653114a672 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 5 Sep 2023 15:19:02 +0200
Subject: [PATCH 27/84] Code refactoring and tests for focus management in
 ListView with groups.

---
 packages/ckeditor5-ui/src/list/listview.ts   | 135 +++++++---
 packages/ckeditor5-ui/tests/list/listview.js | 259 ++++++++++++++++++-
 2 files changed, 347 insertions(+), 47 deletions(-)

diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index 9ae12ab8601..a3f42ab9d9e 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -18,9 +18,9 @@ import ViewCollection from '../viewcollection';
 import {
 	FocusTracker,
 	KeystrokeHandler,
-	type CollectionAddEvent,
-	type CollectionRemoveEvent,
-	type Locale
+	type Locale,
+	type GetCallback,
+	type CollectionChangeEvent
 } from '@ckeditor/ckeditor5-utils';
 
 import '../../theme/components/list/list.css';
@@ -77,6 +77,12 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	 */
 	private readonly _focusCycler: FocusCycler;
 
+	/**
+	 * A cached map of {@link module:ui/list/listitemgroupview~ListItemGroupView} to `change` event listeners for their `items`.
+	 * Used for accessibility and keyboard navigation purposes.
+	 */
+	private readonly _listItemGroupToChangeListeners: WeakMap<ListItemGroupView, GetCallback<ListItemsChangeEvent>> = new WeakMap();
+
 	/**
 	 * @inheritDoc
 	 */
@@ -131,47 +137,30 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	public override render(): void {
 		super.render();
 
-		const registerItem = ( item: ListItemView ) => {
-			if ( this.focusables.has( item ) ) {
-				return;
-			}
-
-			this.focusTracker.add( item.element! );
-			this.focusables.add( item );
-		};
-
-		const registerGroupItems = ( group: ListItemGroupView ) => {
-			for ( const child of group.items ) {
-				registerItem( child as ListItemView );
-			}
-		};
-
 		// Items added before rendering should be known to the #focusTracker.
 		for ( const item of this.items ) {
 			if ( item instanceof ListItemGroupView ) {
-				registerGroupItems( item );
+				this._registerFocusableItemsGroup( item );
 			} else {
-				registerItem( item );
+				this._registerFocusableListItem( item );
 			}
 		}
 
-		this.items.on<CollectionAddEvent<ListItemView>>( 'add', ( evt, item ) => {
-			if ( item instanceof ListItemGroupView ) {
-				registerGroupItems( item );
-			} else {
-				registerItem( item );
+		this.items.on<ListItemsChangeEvent>( 'change', ( evt, data ) => {
+			for ( const removed of data.removed ) {
+				if ( removed instanceof ListItemGroupView ) {
+					this._deregisterFocusableItemsGroup( removed );
+				} else {
+					this._deregisterFocusableListItem( removed );
+				}
 			}
-		} );
 
-		this.items.on<CollectionRemoveEvent<ListItemView>>( 'remove', ( evt, item ) => {
-			if ( item instanceof ListItemGroupView ) {
-				for ( const child of item.items ) {
-					this.focusTracker.remove( child.element! );
-					this.focusables.remove( child );
+			for ( const added of Array.from( data.added ).reverse() ) {
+				if ( added instanceof ListItemGroupView ) {
+					this._registerFocusableItemsGroup( added, data.index );
+				} else {
+					this._registerFocusableListItem( added, data.index );
 				}
-			} else {
-				this.focusTracker.remove( item.element! );
-				this.focusables.remove( item );
 			}
 		} );
 
@@ -202,4 +191,82 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	public focusLast(): void {
 		this._focusCycler.focusLast();
 	}
+
+	/**
+	 * Registers a list item view in the focus tracker.
+	 *
+	 * @param item
+	 * @param index
+	 */
+	private _registerFocusableListItem( item: ListItemView, index?: number ) {
+		this.focusTracker.add( item.element! );
+		this.focusables.add( item, index );
+	}
+
+	/**
+	 * Removes a list item view from the focus tracker.
+	 *
+	 * @param item
+	 */
+	private _deregisterFocusableListItem( item: ListItemView ) {
+		this.focusTracker.remove( item.element! );
+		this.focusables.remove( item );
+	}
+
+	/**
+	 * Gets a callback that will be called when the `items` collection of a {@link module:ui/list/listitemgroupview~ListItemGroupView}
+	 * change.
+	 *
+	 * @param groupView
+	 * @returns
+	 */
+	private _getOnGroupItemsChangeCallback( groupView: ListItemGroupView ): GetCallback<ListItemsChangeEvent> {
+		return ( evt, data ) => {
+			for ( const removed of data.removed ) {
+				this._deregisterFocusableListItem( removed );
+			}
+
+			for ( const added of Array.from( data.added ).reverse() ) {
+				this._registerFocusableListItem( added, this.items.getIndex( groupView ) + data.index );
+			}
+		};
+	}
+
+	/**
+	 * Registers a list item group view (and its children) in the focus tracker.
+	 *
+	 * @param groupView
+	 * @param groupIndex
+	 */
+	private _registerFocusableItemsGroup( groupView: ListItemGroupView, groupIndex?: number ) {
+		Array.from( groupView.items ).forEach( ( child, childIndex ) => {
+			const registeredChildIndex = typeof groupIndex !== 'undefined' ? groupIndex + childIndex : undefined;
+
+			this._registerFocusableListItem( child as ListItemView, registeredChildIndex );
+		} );
+
+		const groupItemsChangeCallback = this._getOnGroupItemsChangeCallback( groupView );
+
+		// Cache the reference to the callback in case the group is removed (see _deregisterFocusableItemsGroup()).
+		this._listItemGroupToChangeListeners.set( groupView, groupItemsChangeCallback );
+
+		groupView.items.on<ListItemsChangeEvent>( 'change', groupItemsChangeCallback );
+	}
+
+	/**
+	 * Removes a list item group view (and its children) from the focus tracker.
+	 *
+	 * @param groupView
+	 */
+	private _deregisterFocusableItemsGroup( groupView: ListItemGroupView ) {
+		for ( const child of groupView.items ) {
+			this._deregisterFocusableListItem( child as ListItemView );
+		}
+
+		groupView.items.off( 'change', this._listItemGroupToChangeListeners.get( groupView )! );
+		this._listItemGroupToChangeListeners.delete( groupView );
+	}
 }
+
+// There's no support for nested groups yet.
+type ListItemsChangeEvent = CollectionChangeEvent<ListItemView>;
diff --git a/packages/ckeditor5-ui/tests/list/listview.js b/packages/ckeditor5-ui/tests/list/listview.js
index 74472fbbada..5465dc0b57e 100644
--- a/packages/ckeditor5-ui/tests/list/listview.js
+++ b/packages/ckeditor5-ui/tests/list/listview.js
@@ -12,6 +12,7 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../../src/focuscycler';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import View from '../../src/view';
+import { ListItemGroupView } from '../../src';
 
 describe( 'ListView', () => {
 	let view;
@@ -54,22 +55,253 @@ describe( 'ListView', () => {
 	} );
 
 	describe( 'render()', () => {
-		it( 'registers #items in #focusTracker', () => {
-			const view = new ListView();
-			const spyAdd = sinon.spy( view.focusTracker, 'add' );
-			const spyRemove = sinon.spy( view.focusTracker, 'remove' );
+		describe( 'focus tracker management', () => {
+			let view, spyAdd, spyRemove;
 
-			sinon.assert.notCalled( spyAdd );
-			view.items.add( focusable() );
-			view.items.add( focusable() );
+			beforeEach( () => {
+				view = new ListView();
+				spyAdd = sinon.spy( view.focusTracker, 'add' );
+				spyRemove = sinon.spy( view.focusTracker, 'remove' );
+			} );
 
-			view.render();
-			sinon.assert.calledTwice( spyAdd );
+			afterEach( () => {
+				view.destroy();
+			} );
 
-			view.items.remove( 1 );
-			sinon.assert.calledOnce( spyRemove );
+			it( 'registers all existing items before rendering', () => {
+				const item1 = focusable();
+				const item2 = focusable();
 
-			view.destroy();
+				view.items.add( item1 );
+				view.items.add( item2 );
+
+				view.render();
+
+				sinon.assert.callCount( spyAdd, 2 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item2.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item1, item2 ] );
+			} );
+
+			it( 'registers all items after rendering', () => {
+				const item1 = focusable();
+				const item2 = focusable();
+				const item3 = focusable();
+
+				view.items.add( item1 );
+				view.items.add( item2 );
+
+				view.render();
+
+				view.items.add( item3 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item2.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item3.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item1, item2, item3 ] );
+			} );
+
+			it( 'registers many items after rendering', () => {
+				const item1 = focusable( '1' );
+				const item2 = focusable( '2' );
+				const item3 = focusable( '3' );
+
+				view.items.add( item1 );
+
+				view.render();
+
+				view.items.addMany( [ item2, item3 ], 0 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item3.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item2.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item2, item3, item1 ] );
+			} );
+
+			it( 'registers existing groups before rendering', () => {
+				const item1 = focusable();
+				const item21 = focusable();
+				const item22 = focusable();
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+				view.items.add( group1 );
+				group1.items.add( item21 );
+				group1.items.add( item22 );
+
+				view.render();
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item21.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item22.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item1, item21, item22 ] );
+			} );
+
+			it( 'registers new groups after rendering', () => {
+				const item1 = focusable();
+				const item21 = focusable();
+				const item22 = focusable();
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+				group1.items.add( item21 );
+				group1.items.add( item22 );
+
+				view.render();
+
+				view.items.add( group1 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item21.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item22.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item1, item21, item22 ] );
+			} );
+
+			it( 'registers new group items after rendering', () => {
+				const item1 = focusable();
+				const item21 = focusable();
+				const item22 = focusable();
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+				group1.items.add( item21 );
+
+				view.render();
+
+				view.items.add( group1 );
+				group1.items.add( item22 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item21.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item22.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item1, item21, item22 ] );
+			} );
+
+			it( 'registers many new group items after rendering', () => {
+				const item1 = focusable( '1' );
+				const item21 = focusable( '21' );
+				const item22 = focusable( '22' );
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+
+				view.render();
+
+				view.items.add( group1, 0 );
+				group1.items.addMany( [ item21, item22 ] );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item22.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item21.element );
+				sinon.assert.notCalled( spyRemove );
+
+				assertFocusables( view, [ item21, item22, item1 ] );
+			} );
+
+			it( 'deregisters items upon removal', () => {
+				const item1 = focusable();
+				const item2 = focusable();
+
+				view.items.add( item1 );
+				view.items.add( item2 );
+
+				view.render();
+
+				assertFocusables( view, [ item1, item2 ] );
+
+				view.items.remove( 0 );
+
+				sinon.assert.callCount( spyAdd, 2 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item2.element );
+				sinon.assert.callCount( spyRemove, 1 );
+				sinon.assert.calledWithExactly( spyRemove.firstCall, item1.element );
+
+				assertFocusables( view, [ item2 ] );
+			} );
+
+			it( 'deregisters nested items upon removal', () => {
+				const item1 = focusable();
+				const item21 = focusable();
+				const item22 = focusable();
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+				view.items.add( group1 );
+				group1.items.add( item21 );
+				group1.items.add( item22 );
+
+				view.render();
+
+				assertFocusables( view, [ item1, item21, item22 ] );
+
+				group1.items.remove( 0 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item21.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item22.element );
+				sinon.assert.callCount( spyRemove, 1 );
+				sinon.assert.calledWithExactly( spyRemove.firstCall, item21.element );
+
+				assertFocusables( view, [ item1, item22 ] );
+			} );
+
+			it( 'deregisters entire groups', () => {
+				const item1 = focusable();
+				const item21 = focusable();
+				const item22 = focusable();
+
+				const group1 = new ListItemGroupView();
+
+				view.items.add( item1 );
+				view.items.add( group1 );
+				group1.items.add( item21 );
+				group1.items.add( item22 );
+
+				view.render();
+
+				assertFocusables( view, [ item1, item21, item22 ] );
+
+				view.items.remove( 1 );
+
+				sinon.assert.callCount( spyAdd, 3 );
+				sinon.assert.calledWithExactly( spyAdd.firstCall, item1.element );
+				sinon.assert.calledWithExactly( spyAdd.secondCall, item21.element );
+				sinon.assert.calledWithExactly( spyAdd.thirdCall, item22.element );
+				sinon.assert.callCount( spyRemove, 2 );
+				sinon.assert.calledWithExactly( spyRemove.firstCall, item21.element );
+				sinon.assert.calledWithExactly( spyRemove.secondCall, item22.element );
+
+				assertFocusables( view, [ item1 ] );
+			} );
+
+			function assertFocusables( view, expected ) {
+				expect( Array.from( view.focusables ) ).to.have.ordered.members( expected );
+			}
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
@@ -247,9 +479,10 @@ describe( 'ListView', () => {
 	} );
 } );
 
-function focusable() {
+function focusable( name ) {
 	const view = nonFocusable();
 
+	view.name = name;
 	view.focus = () => {};
 
 	return view;

From 7147500dd6e99766870d35e2dd8202802e142bf2 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 5 Sep 2023 15:20:50 +0200
Subject: [PATCH 28/84] Tests: Additional code coverage for the
 HighlightedTextView.

---
 .../tests/highlightedtext/highlightedtextview.js          | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js b/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js
index c009d8fe589..834292ceb20 100644
--- a/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js
+++ b/packages/ckeditor5-ui/tests/highlightedtext/highlightedtextview.js
@@ -84,5 +84,13 @@ describe( 'TemplateListButtonView', () => {
 
 			expect( view.element.innerHTML ).to.equal( 'New text' );
 		} );
+
+		it( 'should work if there is no text in the view', () => {
+			view.text = '';
+
+			view.highlightText( new RegExp( /text/, 'ig' ) );
+
+			expect( view.element.innerHTML ).to.equal( '' );
+		} );
 	} );
 } );

From 2069fe23c89d4b1ad2f8a6a96e59b3e51a3283ef Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 5 Sep 2023 15:36:03 +0200
Subject: [PATCH 29/84] Tests and docs for SearchView sub-components.

---
 .../ckeditor5-ui/src/search/filteredview.ts   |   4 +-
 .../src/search/searchresultsview.ts           |   9 +-
 .../tests/search/searchfieldview.js           | 136 ++++++++++++++++++
 .../tests/search/searchinfoview.js            |  54 +++++++
 .../tests/search/searchresultsview.js         |  42 ++++++
 5 files changed, 237 insertions(+), 8 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/search/searchfieldview.js
 create mode 100644 packages/ckeditor5-ui/tests/search/searchinfoview.js
 create mode 100644 packages/ckeditor5-ui/tests/search/searchresultsview.js

diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index 9c88a3441cf..d49f619dc4a 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -11,12 +11,12 @@ import type View from '../view';
  */
 
 /**
- * TODO
+ * A view that can be filtered by a {@link module:ui/search/searchview~SearchView}.
  */
 export default interface FilteredView extends View, FocusableView {
 
 	/**
-	 * TODO
+	 * Filters the view by the given regular expression.
 	 */
 	filter( regExp: RegExp | null ): {
 		resultsCount: number;
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index 6029345ff05..b3ab4b3d78f 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -3,12 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import type { Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view';
 import type ViewCollection from '../viewcollection';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
 
 /**
- * TODO
+ * A sub-component of {@link module:ui/search/searchview~SearchView}. It hosts the filtered and the information views.
  */
 export default class SearchResultsView extends View {
 	/**
@@ -19,10 +19,7 @@ export default class SearchResultsView extends View {
 	public children: ViewCollection;
 
 	/**
-	 * TODO
-	 *
-	 * @param locale
-	 * @param filteredView
+	 * @inheritDoc
 	 */
 	constructor( locale: Locale ) {
 		super( locale );
diff --git a/packages/ckeditor5-ui/tests/search/searchfieldview.js b/packages/ckeditor5-ui/tests/search/searchfieldview.js
new file mode 100644
index 00000000000..6a48616be7a
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/search/searchfieldview.js
@@ -0,0 +1,136 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import { ButtonView, createLabeledInputText, IconView } from '@ckeditor/ckeditor5-ui';
+import SearchFieldView from '../../src/search/searchfieldview';
+import { icons } from '@ckeditor/ckeditor5-core';
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe( 'SearchFieldView', () => {
+	let locale, view;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		locale = new Locale();
+
+		view = new SearchFieldView( locale, createLabeledInputText, 'Test' );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'sets view#locale', () => {
+			expect( view.locale ).to.equal( locale );
+		} );
+
+		it( 'should have a label', () => {
+			expect( view.label ).to.equal( 'Test' );
+		} );
+
+		describe( 'clear value button', () => {
+			it( 'should be created', () => {
+				const clearButtonView = view.fieldWrapperChildren.last;
+
+				expect( clearButtonView ).to.equal( view.clearButtonView );
+				expect( clearButtonView ).to.be.instanceOf( ButtonView );
+				expect( clearButtonView.isVisible ).to.be.false;
+				expect( clearButtonView.tooltip ).to.be.true;
+				expect( clearButtonView.class ).to.equal( 'ck-search__clear-search' );
+				expect( clearButtonView.label ).to.equal( 'Clear' );
+				expect( clearButtonView.icon ).to.equal( icons.cancel );
+			} );
+
+			it( 'should reset the search field value upon #execute', () => {
+				const resetSpy = testUtils.sinon.spy( view, 'reset' );
+
+				view.clearButtonView.fire( 'execute' );
+
+				sinon.assert.calledOnce( resetSpy );
+			} );
+
+			it( 'should focus the field view upon #execute', () => {
+				const focusSpy = testUtils.sinon.spy( view, 'focus' );
+
+				view.clearButtonView.fire( 'execute' );
+
+				sinon.assert.calledOnce( focusSpy );
+			} );
+
+			it( 'should get hidden upon #execute', () => {
+				view.clearButtonView.isVisible = true;
+
+				view.clearButtonView.fire( 'execute' );
+
+				expect( view.clearButtonView.isVisible ).to.be.false;
+			} );
+
+			it( 'should fire the #reset event upon #execute', () => {
+				const spy = sinon.spy();
+
+				view.on( 'reset', spy );
+
+				view.clearButtonView.fire( 'execute' );
+
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+
+		it( 'should have the loupe icon', () => {
+			const loupeIconView = view.fieldWrapperChildren.first;
+
+			expect( loupeIconView ).to.equal( view.loupeIconView );
+			expect( loupeIconView ).to.be.instanceOf( IconView );
+			expect( loupeIconView.content ).to.equal( icons.loupe );
+		} );
+
+		describe( '#input event', () => {
+			it( 'should toggle visibility of the clear value button', () => {
+				view.fieldView.value = 'foo';
+				view.fieldView.fire( 'input' );
+
+				expect( view.clearButtonView.isVisible ).to.be.true;
+
+				view.fieldView.value = '';
+				view.fieldView.fire( 'input' );
+
+				expect( view.clearButtonView.isVisible ).to.be.false;
+			} );
+		} );
+	} );
+
+	describe( 'reset()', () => {
+		it( 'should not fire the #reset event', () => {
+			const spy = sinon.spy();
+
+			view.on( 'reset', spy );
+
+			view.reset();
+
+			sinon.assert.notCalled( spy );
+		} );
+
+		it( 'should clear the field view value in DOM', () => {
+			view.fieldView.element.value = 'foo';
+
+			view.reset();
+
+			expect( view.fieldView.element.value ).to.equal( '' );
+		} );
+
+		it( 'should clear the field view value in InputView', () => {
+			view.fieldView.value = 'foo';
+
+			view.reset();
+
+			expect( view.fieldView.value ).to.equal( '' );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/search/searchinfoview.js b/packages/ckeditor5-ui/tests/search/searchinfoview.js
new file mode 100644
index 00000000000..616be942776
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/search/searchinfoview.js
@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import SearchInfoView from '../../src/search/searchinfoview';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+describe( 'SearchInfoView', () => {
+	let view;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		view = new SearchInfoView();
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates and element from template with CSS classes', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-search__info' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.true;
+		} );
+
+		it( 'sets #isVisible and creates a DOM binding', () => {
+			expect( view.isVisible ).to.be.false;
+
+			view.isVisible = true;
+
+			expect( view.element.classList.contains( 'ck-hidden' ) ).to.be.false;
+		} );
+
+		it( 'sets #primaryText and creates a DOM binding', () => {
+			expect( view.primaryText ).to.equal( '' );
+
+			view.primaryText = 'foo';
+
+			expect( view.element.innerHTML ).to.equal( '<span>foo</span><span></span>' );
+		} );
+
+		it( 'sets #secondaryText', () => {
+			expect( view.secondaryText ).to.equal( '' );
+
+			view.secondaryText = 'bar';
+
+			expect( view.element.innerHTML ).to.equal( '<span></span><span>bar</span>' );
+		} );
+	} );
+} );
diff --git a/packages/ckeditor5-ui/tests/search/searchresultsview.js b/packages/ckeditor5-ui/tests/search/searchresultsview.js
new file mode 100644
index 00000000000..52841d5c91e
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/search/searchresultsview.js
@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import SearchResultsView from '../../src/search/searchresultsview';
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { ButtonView, ViewCollection } from '../../src';
+
+describe( 'SearchResultsView', () => {
+	let locale, view;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		locale = new Locale();
+
+		view = new SearchResultsView( locale );
+		view.render();
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'creates and element from template with CSS classes', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-search__results' ) ).to.be.true;
+		} );
+
+		it( 'has a collection of #children', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
+
+			view.children.add( new ButtonView() );
+
+			expect( view.element.firstChild ).to.equal( view.children.first.element );
+		} );
+	} );
+} );

From eefdbab8121e3a63f48bca4340d34ca99d5b2750 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 5 Sep 2023 16:02:42 +0200
Subject: [PATCH 30/84] Tests and docs for the AutocompleteView component.

---
 .../src/autocomplete/autocompleteview.ts      |  29 ++--
 .../tests/autocomplete/autocompleteview.js    | 150 ++++++++++++++++++
 2 files changed, 166 insertions(+), 13 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 2875594c3fc..ac6b7bcd851 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -14,14 +14,13 @@ import type SearchResultsView from '../search/searchresultsview';
 import '../../theme/components/autocomplete/autocomplete.css';
 
 /**
- * TODO
+ * The autocomplete component's view class. It extends the {@link module:ui/search/searchview~SearchView} class
+ * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
+ * the component.
  */
 export default class AutocompleteView extends SearchView {
 	/**
-	 * TODO
-	 *
-	 * @param locale
-	 * @param config
+	 * @inheritDoc
 	 */
 	constructor( locale: Locale, config: SearchViewConfig ) {
 		super( locale, config );
@@ -50,9 +49,9 @@ export default class AutocompleteView extends SearchView {
 		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
 			resultsView.isVisible = isFocused;
 
-			this._updateResultsViewPosition();
-
-			if ( !isFocused ) {
+			if ( isFocused ) {
+				this._updateResultsViewPosition();
+			} else {
 				this.searchFieldView.reset();
 			}
 		} );
@@ -66,7 +65,7 @@ export default class AutocompleteView extends SearchView {
 	}
 
 	/**
-	 * TODO
+	 * Updates the position of the results view on demand.
 	 */
 	private _updateResultsViewPosition() {
 		( this.resultsView as AutocompleteResultsView )._position = AutocompleteView._getOptimalPosition( {
@@ -78,7 +77,9 @@ export default class AutocompleteView extends SearchView {
 	}
 
 	/**
-	 * TODO
+	 * Positions for the autocomplete results view. Two positions are defined by default:
+	 * * `s` - below the search field,
+	 * * `n` - above the search field.
 	 */
 	public static defaultResultsPositions: Array<PositioningFunction> = [
 		( fieldRect => {
@@ -104,17 +105,19 @@ export default class AutocompleteView extends SearchView {
 }
 
 /**
- * TODO
+ * An interface describing additional properties of the floating search results view used by the autocomplete plugin.
  */
 interface AutocompleteResultsView extends SearchResultsView {
 
 	/**
-	 * TODO
+	 * Controls the visibility of the results view.
+	 *
+	 * @observable
 	 */
 	isVisible: boolean;
 
 	/**
-	 * TODO
+	 * Controls the position (CSS class suffix) of the results view.
 	 *
 	 * @internal
 	 */
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
new file mode 100644
index 00000000000..8eb26b7d532
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -0,0 +1,150 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document, Event */
+
+import {
+	ListView,
+	AutocompleteView,
+	SearchView
+} from '../../src';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { Rect, global } from '@ckeditor/ckeditor5-utils';
+
+describe( 'AutocompleteView', () => {
+	let view, filteredView;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		filteredView = new ListView();
+		filteredView.filter = () => {
+			return {
+				resultsCount: 1,
+				totalItemsCount: 5
+			};
+		};
+
+		view = new AutocompleteView( new Locale(), {
+			filteredView,
+			searchFieldLabel: 'test label'
+		} );
+
+		view.render();
+
+		document.body.appendChild( view.element );
+	} );
+
+	afterEach( () => {
+		filteredView.destroy();
+		view.destroy();
+		view.element.remove();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'extends SearchView', () => {
+			expect( view ).to.be.instanceOf( SearchView );
+		} );
+
+		describe( '#resultsView', () => {
+			it( 'has #isVisible property with a DOM binding', () => {
+				expect( view.resultsView.isVisible ).to.be.false;
+				expect( view.resultsView.element.classList.contains( 'ck-hidden' ) ).to.be.true;
+
+				view.resultsView.isVisible = true;
+				expect( view.resultsView.element.classList.contains( 'ck-hidden' ) ).to.be.false;
+			} );
+
+			it( 'has a #_position property with a DOM binding', () => {
+				expect( view.resultsView._position ).to.equal( 's' );
+				expect( view.resultsView.element.classList.contains( 'ck-search__results_s' ) ).to.be.true;
+
+				view.resultsView._position = 'n';
+				expect( view.resultsView.element.classList.contains( 'ck-search__results_n' ) ).to.be.true;
+			} );
+
+			it( 'should update results position on document scroll (if results are visible)', () => {
+				const getOptimalPositionSpy = sinon.spy( AutocompleteView, '_getOptimalPosition' );
+
+				// A default that will get overridden.
+				view.resultsView._position = 'n';
+
+				view.focusTracker.isFocused = true;
+				sinon.assert.calledOnce( getOptimalPositionSpy );
+				sinon.assert.calledOnceWithExactly( getOptimalPositionSpy, {
+					element: view.resultsView.element,
+					target: view.searchFieldView.element,
+					fitInViewport: true,
+					positions: AutocompleteView.defaultResultsPositions
+				} );
+
+				global.document.dispatchEvent( new Event( 'scroll' ) );
+
+				sinon.assert.calledTwice( getOptimalPositionSpy );
+
+				view.focusTracker.isFocused = false;
+				global.document.dispatchEvent( new Event( 'scroll' ) );
+
+				sinon.assert.calledTwice( getOptimalPositionSpy );
+
+				// Default when the are no obstacles
+				expect( view.resultsView._position ).to.equal( 's' );
+			} );
+
+			describe( '#defaultResultsPositions', () => {
+				it( 'should be able to position results above the search field (north)', () => {
+					const northPositioningFunction = AutocompleteView.defaultResultsPositions[ 0 ];
+					const fieldRectMock = new Rect( { top: 0, right: 100, bottom: 100, left: 0, width: 100, height: 100 } );
+
+					expect( northPositioningFunction( fieldRectMock ) ).to.deep.equal( {
+						left: 0,
+						top: 100,
+						name: 's'
+					} );
+				} );
+
+				it( 'should be able to position results below the search field (south)', () => {
+					const northPositioningFunction = AutocompleteView.defaultResultsPositions[ 1 ];
+					const fieldRectMock = new Rect( { top: 0, right: 100, bottom: 100, left: 0, width: 100, height: 100 } );
+					const resultsRectMock = new Rect( { top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 } );
+
+					expect( northPositioningFunction( fieldRectMock, resultsRectMock ) ).to.deep.equal( {
+						left: 0,
+						top: -50,
+						name: 'n'
+					} );
+				} );
+			} );
+		} );
+
+		describe( 'focus tracking behavior', () => {
+			it( 'displays autocomplete results upon focusing the view', () => {
+				expect( view.resultsView.isVisible ).to.be.false;
+
+				view.focusTracker.isFocused = true;
+
+				expect( view.resultsView.isVisible ).to.be.true;
+			} );
+
+			it( 'updates autocomplete results\' position upon focusing the view', () => {
+				view.resultsView._position = 'foo';
+
+				view.focusTracker.isFocused = true;
+
+				expect( view.resultsView._position ).to.equal( 's' );
+			} );
+
+			it( 'resets the view when blurred', () => {
+				const resetSpy = sinon.spy( view.searchFieldView, 'reset' );
+
+				view.focusTracker.isFocused = true;
+				view.focusTracker.isFocused = false;
+
+				sinon.assert.calledOnce( resetSpy );
+			} );
+		} );
+	} );
+} );

From 32eef35eb939a95dd7d56e661d05c25877e0e35b Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 6 Sep 2023 13:54:49 +0200
Subject: [PATCH 31/84] DomWrapperView should meet the FocusableView interface
 if it is meant to be used in ListView.

---
 packages/ckeditor5-mention/src/ui/domwrapperview.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/ckeditor5-mention/src/ui/domwrapperview.ts b/packages/ckeditor5-mention/src/ui/domwrapperview.ts
index f6bcd392792..3828944b414 100644
--- a/packages/ckeditor5-mention/src/ui/domwrapperview.ts
+++ b/packages/ckeditor5-mention/src/ui/domwrapperview.ts
@@ -72,4 +72,11 @@ export default class DomWrapperView extends View {
 
 		this.element = this.domElement;
 	}
+
+	/**
+	 * Focuses the DOM element.
+	 */
+	public focus(): void {
+		this.domElement.focus();
+	}
 }

From 6c83126b790d80f909cacb3265fd82dfb90a9c77 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 6 Sep 2023 13:55:08 +0200
Subject: [PATCH 32/84] Docs: Fixed an invalid link.

---
 packages/ckeditor5-ui/src/list/listview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index a3f42ab9d9e..eb56e4a3f42 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -32,7 +32,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * The collection of focusable views in the list. It is used to determine accessible navigation
 	 * between the {@link module:ui/list/listitemview~ListItemView list items} and
-	 * {@link module:ui/list/listgroupview~ListGroupView list groups}.
+	 * {@link module:ui/list/listitemgroupview~ListItemGroupView list groups}.
 	 */
 	public readonly focusables: ViewCollection;
 

From eba638e49ca0be655780ce177f8d6c78a4ff2a15 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 6 Sep 2023 13:55:34 +0200
Subject: [PATCH 33/84] type FocusableView -> interface FocusableView to avoid
 TSDoc errors while building API docs.

---
 packages/ckeditor5-ui/src/focuscycler.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/focuscycler.ts b/packages/ckeditor5-ui/src/focuscycler.ts
index 052e4f6ba10..b41be6b35c9 100644
--- a/packages/ckeditor5-ui/src/focuscycler.ts
+++ b/packages/ckeditor5-ui/src/focuscycler.ts
@@ -288,7 +288,12 @@ export default class FocusCycler {
 	}
 }
 
-export type FocusableView = View & { focus(): void };
+/**
+ * A {@link module:ui/view~View} that can be focused, meaning it has a `focus()` method.
+ */
+export interface FocusableView extends View {
+	focus(): void;
+}
 
 export interface FocusCyclerActions {
 	focusFirst?: ArrayOrItem<string>;

From 1d15ac649430670124eecaa950dbf3ffc3410777 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 6 Sep 2023 13:55:52 +0200
Subject: [PATCH 34/84] Docs: Fixed invalid links in the search component
 classes.

---
 packages/ckeditor5-ui/src/search/searchfieldview.ts   | 2 +-
 packages/ckeditor5-ui/src/search/searchresultsview.ts | 4 ++++
 packages/ckeditor5-ui/src/search/searchview.ts        | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/searchfieldview.ts b/packages/ckeditor5-ui/src/search/searchfieldview.ts
index 57a4bcd597e..a4c58e931c7 100644
--- a/packages/ckeditor5-ui/src/search/searchfieldview.ts
+++ b/packages/ckeditor5-ui/src/search/searchfieldview.ts
@@ -85,7 +85,7 @@ export default class SearchFieldView extends LabeledFieldView<InputView> {
 
 /**
  * An event fired when the field is reset using the
- * {@link ui/search/searchfieldview~SearchFieldView#clearButtonView}.
+ * {@link module:ui/search/searchfieldview~SearchFieldView#clearButtonView}.
  *
  * @eventName ~SearchFieldView#reset
  */
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index b3ab4b3d78f..92584a09af4 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/**
+ * @module ui/search/searchresultsview
+ */
+
 import View from '../view';
 import type ViewCollection from '../viewcollection';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
index ec93df9dfe3..50770781dd2 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -316,7 +316,7 @@ export type SearchViewConfig = {
 };
 
 /**
- * Describes value of a {@link module:ui/search/searchview~SearchViewConfig#infoViewTextConfig info text configuration}.
+ * Describes value of a info text configuration in {@link module:ui/search/searchview~SearchViewConfig}.
  * A string or a function that returns a string with the information about the search results.
  */
 export type SearchViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );

From 2ec6f25b0c6202233cf5249f328cfe7a0e0afa0a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 6 Sep 2023 16:03:54 +0200
Subject: [PATCH 35/84] Tests: Added missing DomWrapperView tests in
 ckeditor5-mention.

---
 .../tests/ui/domwrapperview.js                | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 packages/ckeditor5-mention/tests/ui/domwrapperview.js

diff --git a/packages/ckeditor5-mention/tests/ui/domwrapperview.js b/packages/ckeditor5-mention/tests/ui/domwrapperview.js
new file mode 100644
index 00000000000..0496d5d0314
--- /dev/null
+++ b/packages/ckeditor5-mention/tests/ui/domwrapperview.js
@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, Event */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import DomWrapperView from '../../src/ui/domwrapperview';
+
+describe( 'DomWrapperView', () => {
+	let domElement, view;
+
+	beforeEach( () => {
+		domElement = document.createElement( 'div' );
+		view = new DomWrapperView( new Locale(), domElement );
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should add CSS class to the element', () => {
+			expect( domElement.classList.contains( 'ck-button' ) ).to.be.true;
+		} );
+
+		it( 'should set #isOn observable property with a CSS class binding', () => {
+			expect( view.isOn ).to.be.false;
+
+			// TODO: This is actually a bug because the initial state is not set correctly.
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.false;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.false;
+
+			view.isOn = true;
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.true;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.false;
+
+			view.isOn = false;
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.false;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.true;
+		} );
+
+		it( 'should fire #execute on DOM element click', () => {
+			const spy = sinon.spy();
+			view.on( 'execute', spy );
+
+			domElement.dispatchEvent( new Event( 'click' ) );
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+
+	describe( 'render()', () => {
+		it( 'should assign passed element to #element', () => {
+			view.render();
+			expect( view.element ).to.equal( domElement );
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the #domElement', () => {
+			const spy = sinon.spy( domElement, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );

From 3dcab2f872f6ba87dd0ad2cc06a0b0981b00448f Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 7 Sep 2023 09:31:08 +0200
Subject: [PATCH 36/84] Tests: Added missing manual tests descriptions.

---
 packages/ckeditor5-ui/src/dropdown/utils.ts                | 1 +
 .../ckeditor5-ui/tests/manual/autocomplete/autocomplete.md | 7 ++++++-
 packages/ckeditor5-ui/tests/manual/list/list.md            | 6 +++++-
 packages/ckeditor5-ui/tests/manual/search/search.md        | 6 +++++-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-ui/src/dropdown/utils.ts b/packages/ckeditor5-ui/src/dropdown/utils.ts
index 06b9dac09f2..f3abb6df0c8 100644
--- a/packages/ckeditor5-ui/src/dropdown/utils.ts
+++ b/packages/ckeditor5-ui/src/dropdown/utils.ts
@@ -458,6 +458,7 @@ function closeDropdownOnExecute( dropdownView: DropdownView ) {
  */
 function closeDropdownOnBlur( dropdownView: DropdownView ) {
 	dropdownView.focusTracker.on<ObservableChangeEvent<boolean>>( 'change:isFocused', ( evt, name, isFocused ) => {
+		console.log( dropdownView.isOpen, isFocused );
 		if ( dropdownView.isOpen && !isFocused ) {
 			dropdownView.isOpen = false;
 		}
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
index 1333ed77b7e..1f260145fcd 100644
--- a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.md
@@ -1 +1,6 @@
-TODO
+# AutoCompleteView component
+
+1. **Note**: The component is rendered some distance from the top of the screen.
+2. Make sure the results show up as soon as you start typing.
+3. Make sure you can move focus between the field and results using Tab/Shift+Tab.
+4. Scroll the viewport: The results should show up below or above the input depending on the available space on the screen.
diff --git a/packages/ckeditor5-ui/tests/manual/list/list.md b/packages/ckeditor5-ui/tests/manual/list/list.md
index 1333ed77b7e..3f0a817bd35 100644
--- a/packages/ckeditor5-ui/tests/manual/list/list.md
+++ b/packages/ckeditor5-ui/tests/manual/list/list.md
@@ -1 +1,5 @@
-TODO
+# ListView component
+
+1. There are two examples of a list in this test.
+2. Make sure both render correctly, especially the one with the item groups.
+3. Verify accessibility: click the first item and then navigate across the list. The navigation should be smooth, all items should get focus in the right order.
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.md b/packages/ckeditor5-ui/tests/manual/search/search.md
index 1333ed77b7e..01ca1179901 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.md
+++ b/packages/ckeditor5-ui/tests/manual/search/search.md
@@ -1 +1,5 @@
-TODO
+# SearchView component
+
+1. There are 3 examples of the component in this test.
+2. Make sure searching works and the list/toolbar gets filtered.
+3. Check accessibility, make sure Tab/Shift+Tab navigation works.

From f73eb611c383adde4b34cadf3efdde5baeaabe45 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 7 Sep 2023 09:46:24 +0200
Subject: [PATCH 37/84] Removed obsolete console log.

---
 packages/ckeditor5-ui/src/dropdown/utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/dropdown/utils.ts b/packages/ckeditor5-ui/src/dropdown/utils.ts
index f3abb6df0c8..06b9dac09f2 100644
--- a/packages/ckeditor5-ui/src/dropdown/utils.ts
+++ b/packages/ckeditor5-ui/src/dropdown/utils.ts
@@ -458,7 +458,6 @@ function closeDropdownOnExecute( dropdownView: DropdownView ) {
  */
 function closeDropdownOnBlur( dropdownView: DropdownView ) {
 	dropdownView.focusTracker.on<ObservableChangeEvent<boolean>>( 'change:isFocused', ( evt, name, isFocused ) => {
-		console.log( dropdownView.isOpen, isFocused );
 		if ( dropdownView.isOpen && !isFocused ) {
 			dropdownView.isOpen = false;
 		}

From a85216f8e7688d65bfd9a381b8ce42b4383e21a4 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 13:34:34 +0200
Subject: [PATCH 38/84] Docs: Added missing module description.

---
 .../ckeditor5-ui/src/highlightedtext/highlightedtextview.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
index 70a0720ea2a..3848980ac41 100644
--- a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -4,8 +4,8 @@
  */
 
 /**
- * @module TODO
-*/
+ * @module ui/highlightedtext/highlightedtextview
+ */
 
 import View from '../view';
 import { escape } from 'lodash-es';

From fb2b26ba30a8f4599434a800f6306e9246b79919 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 13:46:46 +0200
Subject: [PATCH 39/84] Docs: Added missing API docs.

---
 packages/ckeditor5-ui/src/list/listview.ts     | 16 ++++++++--------
 packages/ckeditor5-ui/src/search/searchview.ts |  2 --
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index eb56e4a3f42..5a77687ba48 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -195,8 +195,8 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * Registers a list item view in the focus tracker.
 	 *
-	 * @param item
-	 * @param index
+	 * @param item The list item view to be registered.
+	 * @param index Index of the list item view in the {@link #items} collection. If not specified, the item will be added at the end.
 	 */
 	private _registerFocusableListItem( item: ListItemView, index?: number ) {
 		this.focusTracker.add( item.element! );
@@ -206,7 +206,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * Removes a list item view from the focus tracker.
 	 *
-	 * @param item
+	 * @param item The list item view to be removed.
 	 */
 	private _deregisterFocusableListItem( item: ListItemView ) {
 		this.focusTracker.remove( item.element! );
@@ -217,8 +217,8 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	 * Gets a callback that will be called when the `items` collection of a {@link module:ui/list/listitemgroupview~ListItemGroupView}
 	 * change.
 	 *
-	 * @param groupView
-	 * @returns
+	 * @param groupView The group view for which the callback will be created.
+	 * @returns The callback function to be used for the items `change` event listener in a group.
 	 */
 	private _getOnGroupItemsChangeCallback( groupView: ListItemGroupView ): GetCallback<ListItemsChangeEvent> {
 		return ( evt, data ) => {
@@ -235,8 +235,8 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * Registers a list item group view (and its children) in the focus tracker.
 	 *
-	 * @param groupView
-	 * @param groupIndex
+	 * @param groupView A group view to be registered.
+	 * @param groupIndex Index of the group view in the {@link #items} collection. If not specified, the group will be added at the end.
 	 */
 	private _registerFocusableItemsGroup( groupView: ListItemGroupView, groupIndex?: number ) {
 		Array.from( groupView.items ).forEach( ( child, childIndex ) => {
@@ -256,7 +256,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	/**
 	 * Removes a list item group view (and its children) from the focus tracker.
 	 *
-	 * @param groupView
+	 * @param groupView The group view to be removed.
 	 */
 	private _deregisterFocusableItemsGroup( groupView: ListItemGroupView ) {
 		for ( const child of groupView.items ) {
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/searchview.ts
index 50770781dd2..741ec297b89 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/searchview.ts
@@ -37,8 +37,6 @@ import '../../theme/components/search/search.css';
  *
  * document.body.append( view.element );
  * ```
- *
- * @extends module:ui/view~View
  */
 export default class SearchView extends View {
 	/**

From ebe5266e0d156e72af29443cd6f938a328f4132c Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 14:00:33 +0200
Subject: [PATCH 40/84] Renamed SearchView -> SearchTextView.

---
 .../src/autocomplete/autocompleteview.ts      |  8 +--
 packages/ckeditor5-ui/src/index.ts            |  2 +-
 .../ckeditor5-ui/src/search/filteredview.ts   |  2 +-
 .../ckeditor5-ui/src/search/searchinfoview.ts |  2 +-
 .../src/search/searchresultsview.ts           |  2 +-
 .../searchtextfieldview.ts}                   | 24 +++----
 .../{searchview.ts => text/searchtextview.ts} | 70 +++++++++----------
 .../tests/autocomplete/autocompleteview.js    |  6 +-
 .../tests/manual/search/search.md             |  2 +-
 .../tests/manual/search/search.ts             |  8 +--
 .../searchtextfieldview.js}                   |  6 +-
 .../{searchview.js => text/searchtextview.js} | 24 +++----
 12 files changed, 78 insertions(+), 78 deletions(-)
 rename packages/ckeditor5-ui/src/search/{searchfieldview.ts => text/searchtextfieldview.ts} (73%)
 rename packages/ckeditor5-ui/src/search/{searchview.ts => text/searchtextview.ts} (78%)
 rename packages/ckeditor5-ui/tests/search/{searchfieldview.js => text/searchtextfieldview.js} (94%)
 rename packages/ckeditor5-ui/tests/search/{searchview.js => text/searchtextview.js} (95%)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index ac6b7bcd851..4c1ae350096 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -8,21 +8,21 @@
 */
 
 import { getOptimalPosition, type PositioningFunction, type Locale, global } from '@ckeditor/ckeditor5-utils';
-import SearchView, { type SearchViewConfig } from '../search/searchview';
+import SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview';
 import type SearchResultsView from '../search/searchresultsview';
 
 import '../../theme/components/autocomplete/autocomplete.css';
 
 /**
- * The autocomplete component's view class. It extends the {@link module:ui/search/searchview~SearchView} class
+ * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
  * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
  * the component.
  */
-export default class AutocompleteView extends SearchView {
+export default class AutocompleteView extends SearchTextView {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale: Locale, config: SearchViewConfig ) {
+	constructor( locale: Locale, config: SearchTextViewConfig ) {
 		super( locale, config );
 
 		this.extendTemplate( {
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index f8949e9d5a1..8d1defc0c50 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -76,7 +76,7 @@ export { default as ContextualBalloon } from './panel/balloon/contextualballoon'
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 
 export { default as AutocompleteView } from './autocomplete/autocompleteview';
-export { default as SearchView, type SearchViewSearchEvent } from './search/searchview';
+export { default as SearchTextView, type SearchTextViewSearchEvent } from './search/text/searchtextview';
 export { default as SearchInfoView } from './search/searchinfoview';
 export { default as FilteredView } from './search/filteredview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index d49f619dc4a..ee9117fac89 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -11,7 +11,7 @@ import type View from '../view';
  */
 
 /**
- * A view that can be filtered by a {@link module:ui/search/searchview~SearchView}.
+ * A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
  */
 export default interface FilteredView extends View, FocusableView {
 
diff --git a/packages/ckeditor5-ui/src/search/searchinfoview.ts b/packages/ckeditor5-ui/src/search/searchinfoview.ts
index ffdbf9d83c7..94dcde90a15 100644
--- a/packages/ckeditor5-ui/src/search/searchinfoview.ts
+++ b/packages/ckeditor5-ui/src/search/searchinfoview.ts
@@ -10,7 +10,7 @@
 import View from '../view';
 
 /**
- * A view displaying an information text related to different states of {@link module:ui/search/searchview~SearchView}.
+ * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
  *
  * @private
  */
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index 92584a09af4..63d309ae422 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -12,7 +12,7 @@ import type ViewCollection from '../viewcollection';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
 /**
- * A sub-component of {@link module:ui/search/searchview~SearchView}. It hosts the filtered and the information views.
+ * 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 {
 	/**
diff --git a/packages/ckeditor5-ui/src/search/searchfieldview.ts b/packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts
similarity index 73%
rename from packages/ckeditor5-ui/src/search/searchfieldview.ts
rename to packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts
index a4c58e931c7..1b683d374a8 100644
--- a/packages/ckeditor5-ui/src/search/searchfieldview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts
@@ -4,25 +4,25 @@
  */
 
 /**
- * @module ui/search/searchfieldview
+ * @module ui/search/text/searchtextfieldview
  */
 
-import ButtonView from '../button/buttonview';
-import IconView from '../icon/iconview';
-import LabeledFieldView from '../labeledfield/labeledfieldview';
-import { createLabeledInputText } from '../labeledfield/utils';
-import type InputView from '../input/inputview';
+import ButtonView from '../../button/buttonview';
+import IconView from '../../icon/iconview';
+import LabeledFieldView from '../../labeledfield/labeledfieldview';
+import { createLabeledInputText } from '../../labeledfield/utils';
+import type InputView from '../../input/inputview';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
 import { icons } from '@ckeditor/ckeditor5-core';
 
 /**
- * A search input field for the {@link module:ui/search/searchview~SearchView} component.
+ * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
  *
  * @private
  * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
  */
-export default class SearchFieldView extends LabeledFieldView<InputView> {
+export default class SearchTextFieldView extends LabeledFieldView<InputView> {
 	/**
 	 * The loupe icon displayed next to the {@link #fieldView}.
 	 */
@@ -61,7 +61,7 @@ export default class SearchFieldView extends LabeledFieldView<InputView> {
 		this.clearButtonView.on( 'execute', () => {
 			this.reset();
 			this.focus();
-			this.fire<SearchFieldViewResetEvent>( 'reset' );
+			this.fire<SearchTextFieldViewResetEvent>( 'reset' );
 		} );
 
 		this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
@@ -85,11 +85,11 @@ export default class SearchFieldView extends LabeledFieldView<InputView> {
 
 /**
  * An event fired when the field is reset using the
- * {@link module:ui/search/searchfieldview~SearchFieldView#clearButtonView}.
+ * {@link module:ui/search/text/searchtextfieldview~SearchTextFieldView#clearButtonView}.
  *
- * @eventName ~SearchFieldView#reset
+ * @eventName ~SearchTextFieldView#reset
  */
-export type SearchFieldViewResetEvent = {
+export type SearchTextFieldViewResetEvent = {
 	name: 'reset';
 	args: [];
 };
diff --git a/packages/ckeditor5-ui/src/search/searchview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
similarity index 78%
rename from packages/ckeditor5-ui/src/search/searchview.ts
rename to packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 741ec297b89..1158caa054e 100644
--- a/packages/ckeditor5-ui/src/search/searchview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -4,31 +4,31 @@
  */
 
 /**
- * @module ui/search/searchview
+ * @module ui/search/text/searchtextview
 */
 
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../view';
-import SearchFieldView from './searchfieldview';
-import SearchInfoView from './searchinfoview';
-import SearchResultsView from './searchresultsview';
-import type LabeledFieldView from '../labeledfield/labeledfieldview';
-import type InputView from '../input/inputview';
-import type FilteredView from './filteredview';
+import View from '../../view';
+import SearchTextFieldView from './searchtextfieldview';
+import SearchInfoView from '../searchinfoview';
+import SearchResultsView from '../searchresultsview';
+import type LabeledFieldView from '../../labeledfield/labeledfieldview';
+import type InputView from '../../input/inputview';
+import type FilteredView from '../filteredview';
 import { escapeRegExp } from 'lodash-es';
-import FocusCycler from '../focuscycler';
+import FocusCycler from '../../focuscycler';
 
-import '../../theme/components/search/search.css';
+import '../../../theme/components/search/search.css';
 
 /**
  * A search component that allows filtering of an arbitrary view based on a search query
- * specified by the user.
+ * specified by the user in a text field.
  *
  *```ts
  * // This view must specify the `filter()` and `focus()` methods.
  * const filteredView = ...;
  *
- * const searchView = new SearchView( locale, {
+ * const searchView = new SearchTextView( locale, {
  * 	searchFieldLabel: 'Search list items',
  * 	filteredView
  * } );
@@ -38,7 +38,7 @@ import '../../theme/components/search/search.css';
  * document.body.append( view.element );
  * ```
  */
-export default class SearchView extends View {
+export default class SearchTextView extends View {
 	/**
 	 * Tracks information about the DOM focus in the view.
 	 *
@@ -71,7 +71,7 @@ export default class SearchView extends View {
 	/**
 	 * The view that allows the user to enter the search query.
 	 */
-	public searchFieldView: SearchFieldView;
+	public searchFieldView: SearchTextFieldView;
 
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #searchFieldView} and {@link #filteredView}.
@@ -85,21 +85,21 @@ export default class SearchView extends View {
 	 *
 	 * @internal
 	 */
-	private _config: SearchViewConfig;
+	private _config: SearchTextViewConfig;
 
 	/**
-	 * Creates an instance of the {@link module:ui/search/searchview~SearchView} class.
+	 * Creates an instance of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
 	 *
 	 * @param locale The localization services instance.
 	 * @param config Configuration of the view.
 	 */
-	constructor( locale: Locale, config: SearchViewConfig ) {
+	constructor( locale: Locale, config: SearchTextViewConfig ) {
 		super( locale );
 
 		this._config = config;
 
 		this.filteredView = config.filteredView;
-		this.searchFieldView = this._createSearchFieldView( locale, config.searchFieldLabel );
+		this.searchFieldView = this._createSearchTextFieldView( locale, config.searchFieldLabel );
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
@@ -207,8 +207,8 @@ export default class SearchView extends View {
 	 * @param locale The localization services instance.
 	 * @param label The label of the search field.
 	 */
-	private _createSearchFieldView( locale: Locale, label: string ): SearchFieldView {
-		const searchFieldView = new SearchFieldView( locale, this._config.searchFieldInputCreator, label );
+	private _createSearchTextFieldView( locale: Locale, label: string ): SearchTextFieldView {
+		const searchFieldView = new SearchTextFieldView( locale, this._config.searchFieldInputCreator, label );
 
 		this.listenTo( searchFieldView.fieldView, 'input', () => {
 			this.search( searchFieldView.fieldView.element!.value );
@@ -227,7 +227,7 @@ export default class SearchView extends View {
 		const t = this.locale!.t;
 		const infoView = this.infoView as SearchInfoView;
 
-		this.on<SearchViewSearchEvent>( 'search', ( evt, data ) => {
+		this.on<SearchTextViewSearchEvent>( 'search', ( evt, data ) => {
 			if ( !data.resultsCount ) {
 				const infoViewTextConfig = this._config.infoViewTextConfig;
 				let primaryText, secondaryText;
@@ -253,8 +253,8 @@ export default class SearchView extends View {
 		} );
 
 		function normalizeInfoText(
-			text: SearchViewDefaultInfoText,
-			{ query, resultsCount, totalItemsCount }: SearchViewSearchEvent[ 'args' ][ 0 ]
+			text: SearchTextViewDefaultInfoText,
+			{ query, resultsCount, totalItemsCount }: SearchTextViewSearchEvent[ 'args' ][ 0 ]
 		) {
 			return typeof text === 'function' ? text( query, resultsCount, totalItemsCount ) : text;
 		}
@@ -262,9 +262,9 @@ export default class SearchView extends View {
 }
 
 /**
- * The configuration of the {@link module:ui/search/searchview~SearchView} class.
+ * The configuration of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
  */
-export type SearchViewConfig = {
+export type SearchTextViewConfig = {
 
 	/**
 	 * The view that is filtered by the search query.
@@ -298,33 +298,33 @@ export type SearchViewConfig = {
 	 * of the search component.
 	 *
 	 * **Note**: This configuration is only used when the {@link #infoView} is **not** specified.
-	 * In other cases, please use the {@link module:ui/search/searchview~SearchViewSearchEvent} to bring about
+	 * In other cases, please use the {@link module:ui/search/searchview~SearchTextViewSearchEvent} to bring about
 	 * your own info text logic.
 	 */
 	infoViewTextConfig?: {
 		notFound?: {
-			primary: SearchViewDefaultInfoText;
-			secondary?: SearchViewDefaultInfoText;
+			primary: SearchTextViewDefaultInfoText;
+			secondary?: SearchTextViewDefaultInfoText;
 		};
 		noSearchableItems?: {
-			primary: SearchViewDefaultInfoText;
-			secondary?: SearchViewDefaultInfoText;
+			primary: SearchTextViewDefaultInfoText;
+			secondary?: SearchTextViewDefaultInfoText;
 		};
 	};
 };
 
 /**
- * Describes value of a info text configuration in {@link module:ui/search/searchview~SearchViewConfig}.
+ * Describes value of a info text configuration in {@link module:ui/search/text/searchtextview~SearchTextViewConfig}.
  * A string or a function that returns a string with the information about the search results.
  */
-export type SearchViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );
+export type SearchTextViewDefaultInfoText = string | ( ( query: string, resultsCount: number, totalItemsCount: number ) => string );
 
 /**
- * An event fired when the search query changes fired by {@link module:ui/search/searchview~SearchView#search}.
+ * An event fired when the search query changes fired by {@link module:ui/search/text/searchtextview~SearchTextView#search}.
  *
- * @eventName ~SearchView#search
+ * @eventName ~SearchTextView#search
  */
-export type SearchViewSearchEvent = {
+export type SearchTextViewSearchEvent = {
 	name: 'search';
 	args: [ {
 		query: string;
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index 8eb26b7d532..bfc49698e9f 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -8,7 +8,7 @@
 import {
 	ListView,
 	AutocompleteView,
-	SearchView
+	SearchTextView
 } from '../../src';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
@@ -45,8 +45,8 @@ describe( 'AutocompleteView', () => {
 	} );
 
 	describe( 'constructor()', () => {
-		it( 'extends SearchView', () => {
-			expect( view ).to.be.instanceOf( SearchView );
+		it( 'extends SearchTextView', () => {
+			expect( view ).to.be.instanceOf( SearchTextView );
 		} );
 
 		describe( '#resultsView', () => {
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.md b/packages/ckeditor5-ui/tests/manual/search/search.md
index 01ca1179901..d8ef709ac6e 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.md
+++ b/packages/ckeditor5-ui/tests/manual/search/search.md
@@ -1,4 +1,4 @@
-# SearchView component
+# SearchTextView component
 
 1. There are 3 examples of the component in this test.
 2. Make sure searching works and the list/toolbar gets filtered.
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
index 4614c6a7b3c..20c9e14fe8e 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.ts
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -11,7 +11,7 @@ import {
 	ListItemGroupView,
 	ListItemView,
 	ListView,
-	SearchView,
+	SearchTextView,
 	ToolbarView,
 	type FilteredView,
 	createLabeledInputNumber
@@ -91,7 +91,7 @@ function createSearchableList() {
 	listView.items.add( getGroupView );
 	listView.items.add( hasGroupView );
 
-	const searchView = new SearchView( locale, {
+	const searchView = new SearchTextView( locale, {
 		searchFieldLabel: 'Search list items',
 		filteredView: listView
 	} );
@@ -142,7 +142,7 @@ function createSearchableToolbar() {
 		toolbarView.items.add( buttonView );
 	} );
 
-	const searchView = new SearchView( locale, {
+	const searchView = new SearchTextView( locale, {
 		searchFieldLabel: 'Search toolbar buttons',
 		filteredView: toolbarView
 	} );
@@ -183,7 +183,7 @@ function createSearchWithCustomInput() {
 			toolbarView.items.add( buttonView );
 		} );
 
-	const searchView = new SearchView( locale, {
+	const searchView = new SearchTextView( locale, {
 		searchFieldLabel: 'Search toolbar buttons',
 		filteredView: toolbarView,
 		searchFieldInputCreator: createLabeledInputNumber
diff --git a/packages/ckeditor5-ui/tests/search/searchfieldview.js b/packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js
similarity index 94%
rename from packages/ckeditor5-ui/tests/search/searchfieldview.js
rename to packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js
index 6a48616be7a..ec8d65ae313 100644
--- a/packages/ckeditor5-ui/tests/search/searchfieldview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js
@@ -5,12 +5,12 @@
 
 import { Locale } from '@ckeditor/ckeditor5-utils';
 import { ButtonView, createLabeledInputText, IconView } from '@ckeditor/ckeditor5-ui';
-import SearchFieldView from '../../src/search/searchfieldview';
+import SearchTextFieldView from '../../../src/search/text/searchtextfieldview';
 import { icons } from '@ckeditor/ckeditor5-core';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-describe( 'SearchFieldView', () => {
+describe( 'SearchTextFieldView', () => {
 	let locale, view;
 
 	testUtils.createSinonSandbox();
@@ -18,7 +18,7 @@ describe( 'SearchFieldView', () => {
 	beforeEach( () => {
 		locale = new Locale();
 
-		view = new SearchFieldView( locale, createLabeledInputText, 'Test' );
+		view = new SearchTextFieldView( locale, createLabeledInputText, 'Test' );
 		view.render();
 	} );
 
diff --git a/packages/ckeditor5-ui/tests/search/searchview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
similarity index 95%
rename from packages/ckeditor5-ui/tests/search/searchview.js
rename to packages/ckeditor5-ui/tests/search/text/searchtextview.js
index c5bc4d93814..03fa6e15905 100644
--- a/packages/ckeditor5-ui/tests/search/searchview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -13,15 +13,15 @@ import {
 	LabeledFieldView,
 	ListView,
 	SearchInfoView,
-	SearchView,
+	SearchTextView,
 	View,
 	createLabeledInputNumber
-} from '../../src';
+} from '../../../src';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-describe( 'SearchView', () => {
+describe( 'SearchTextView', () => {
 	let view, filteredView;
 
 	testUtils.createSinonSandbox();
@@ -35,7 +35,7 @@ describe( 'SearchView', () => {
 			};
 		};
 
-		view = new SearchView( new Locale(), {
+		view = new SearchTextView( new Locale(), {
 			filteredView,
 			searchFieldLabel: 'test label'
 		} );
@@ -59,7 +59,7 @@ describe( 'SearchView', () => {
 		} );
 
 		it( 'supports extra CSS class in the config', () => {
-			const view = new SearchView( new Locale(), {
+			const view = new SearchTextView( new Locale(), {
 				filteredView,
 				searchFieldLabel: 'foo',
 				class: 'bar'
@@ -171,7 +171,7 @@ describe( 'SearchView', () => {
 			} );
 
 			it( 'gets created by a custom view creator configured by the user', () => {
-				const view = new SearchView( new Locale(), {
+				const view = new SearchTextView( new Locale(), {
 					filteredView,
 					searchFieldInputCreator: createLabeledInputNumber,
 					searchFieldLabel: 'foo',
@@ -214,7 +214,7 @@ describe( 'SearchView', () => {
 					};
 				};
 
-				view = new SearchView( new Locale(), {
+				view = new SearchTextView( new Locale(), {
 					filteredView,
 					searchFieldLabel: 'test label'
 				} );
@@ -242,7 +242,7 @@ describe( 'SearchView', () => {
 						};
 					};
 
-					const view = new SearchView( new Locale(), {
+					const view = new SearchTextView( new Locale(), {
 						filteredView,
 						searchFieldLabel: 'test label'
 					} );
@@ -265,7 +265,7 @@ describe( 'SearchView', () => {
 						};
 					};
 
-					const view = new SearchView( new Locale(), {
+					const view = new SearchTextView( new Locale(), {
 						filteredView,
 						searchFieldLabel: 'test label'
 					} );
@@ -287,7 +287,7 @@ describe( 'SearchView', () => {
 						};
 					};
 
-					const view = new SearchView( new Locale(), {
+					const view = new SearchTextView( new Locale(), {
 						filteredView,
 						searchFieldLabel: 'test label',
 						infoViewTextConfig: {
@@ -335,7 +335,7 @@ describe( 'SearchView', () => {
 					const dynamicLabelText = ( query, resultsCount, totalItemsCount ) =>
 						`"${ query }" ${ resultsCount } of ${ totalItemsCount }`;
 
-					const view = new SearchView( new Locale(), {
+					const view = new SearchTextView( new Locale(), {
 						filteredView,
 						searchFieldLabel: 'test label',
 						infoViewTextConfig: {
@@ -382,7 +382,7 @@ describe( 'SearchView', () => {
 					}
 				} );
 
-				const view = new SearchView( new Locale(), {
+				const view = new SearchTextView( new Locale(), {
 					filteredView,
 					searchFieldLabel: 'test label',
 					infoView: customInfoView

From f8e6e850db422d9e133329d4320bc138ddeb9689 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 8 Sep 2023 14:10:03 +0200
Subject: [PATCH 41/84] Renamed SearchTextFieldView->SearchTextQueryView.
 Renamed SearchTextView#fieldView->#queryView.

---
 .../src/autocomplete/autocompleteview.ts      |  4 +--
 ...extfieldview.ts => searchtextqueryview.ts} | 12 +++----
 .../src/search/text/searchtextview.ts         | 32 +++++++++----------
 .../tests/autocomplete/autocompleteview.js    |  4 +--
 ...extfieldview.js => searchtextqueryview.js} |  6 ++--
 .../tests/search/text/searchtextview.js       | 28 ++++++++--------
 6 files changed, 43 insertions(+), 43 deletions(-)
 rename packages/ckeditor5-ui/src/search/text/{searchtextfieldview.ts => searchtextqueryview.ts} (87%)
 rename packages/ckeditor5-ui/tests/search/text/{searchtextfieldview.js => searchtextqueryview.js} (94%)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 4c1ae350096..3422431287a 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -52,7 +52,7 @@ export default class AutocompleteView extends SearchTextView {
 			if ( isFocused ) {
 				this._updateResultsViewPosition();
 			} else {
-				this.searchFieldView.reset();
+				this.queryView.reset();
 			}
 		} );
 
@@ -70,7 +70,7 @@ export default class AutocompleteView extends SearchTextView {
 	private _updateResultsViewPosition() {
 		( this.resultsView as AutocompleteResultsView )._position = AutocompleteView._getOptimalPosition( {
 			element: this.resultsView.element!,
-			target: this.searchFieldView.element!,
+			target: this.queryView.element!,
 			fitInViewport: true,
 			positions: AutocompleteView.defaultResultsPositions
 		} ).name as string;
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
similarity index 87%
rename from packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts
rename to packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index 1b683d374a8..218b8748f7a 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextfieldview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -4,7 +4,7 @@
  */
 
 /**
- * @module ui/search/text/searchtextfieldview
+ * @module ui/search/text/searchtextqueryview
  */
 
 import ButtonView from '../../button/buttonview';
@@ -22,7 +22,7 @@ import { icons } from '@ckeditor/ckeditor5-core';
  * @private
  * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
  */
-export default class SearchTextFieldView extends LabeledFieldView<InputView> {
+export default class SearchTextQueryView extends LabeledFieldView<InputView> {
 	/**
 	 * The loupe icon displayed next to the {@link #fieldView}.
 	 */
@@ -61,7 +61,7 @@ export default class SearchTextFieldView extends LabeledFieldView<InputView> {
 		this.clearButtonView.on( 'execute', () => {
 			this.reset();
 			this.focus();
-			this.fire<SearchTextFieldViewResetEvent>( 'reset' );
+			this.fire<SearchTextQueryViewResetEvent>( 'reset' );
 		} );
 
 		this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
@@ -85,11 +85,11 @@ export default class SearchTextFieldView extends LabeledFieldView<InputView> {
 
 /**
  * An event fired when the field is reset using the
- * {@link module:ui/search/text/searchtextfieldview~SearchTextFieldView#clearButtonView}.
+ * {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView#clearButtonView}.
  *
- * @eventName ~SearchTextFieldView#reset
+ * @eventName ~SearchTextQueryView#reset
  */
-export type SearchTextFieldViewResetEvent = {
+export type SearchTextQueryViewResetEvent = {
 	name: 'reset';
 	args: [];
 };
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 1158caa054e..86b911b410e 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -9,7 +9,7 @@
 
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../../view';
-import SearchTextFieldView from './searchtextfieldview';
+import SearchTextQueryView from './searchtextqueryview';
 import SearchInfoView from '../searchinfoview';
 import SearchResultsView from '../searchresultsview';
 import type LabeledFieldView from '../../labeledfield/labeledfieldview';
@@ -71,10 +71,10 @@ export default class SearchTextView extends View {
 	/**
 	 * The view that allows the user to enter the search query.
 	 */
-	public searchFieldView: SearchTextFieldView;
+	public queryView: SearchTextQueryView;
 
 	/**
-	 * Provides the focus management (keyboard navigation) between {@link #searchFieldView} and {@link #filteredView}.
+	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
 	 *
 	 * @readonly
 	 */
@@ -99,7 +99,7 @@ export default class SearchTextView extends View {
 		this._config = config;
 
 		this.filteredView = config.filteredView;
-		this.searchFieldView = this._createSearchTextFieldView( locale, config.searchFieldLabel );
+		this.queryView = this._createSearchTextQueryView( locale, config.searchFieldLabel );
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
@@ -120,7 +120,7 @@ export default class SearchTextView extends View {
 		this.resultsView.children.addMany( [ this.infoView, this.filteredView ] );
 
 		this._focusCycler = new FocusCycler( {
-			focusables: this.createCollection( [ this.searchFieldView, this.filteredView ] ),
+			focusables: this.createCollection( [ this.queryView, this.filteredView ] ),
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
@@ -144,7 +144,7 @@ export default class SearchTextView extends View {
 				tabindex: '-1'
 			},
 			children: [
-				this.searchFieldView,
+				this.queryView,
 				this.resultsView
 			]
 		} );
@@ -158,7 +158,7 @@ export default class SearchTextView extends View {
 
 		const stopPropagation = ( data: Event ) => data.stopPropagation();
 
-		this.focusTracker.add( this.searchFieldView.element as Element );
+		this.focusTracker.add( this.queryView.element as Element );
 		this.focusTracker.add( this.filteredView.element as Element );
 
 		// Start listening for the keystrokes coming from #element.
@@ -174,17 +174,17 @@ export default class SearchTextView extends View {
 	}
 
 	/**
-	 * Focuses the {@link #searchFieldView}.
+	 * Focuses the {@link #queryView}.
 	 */
 	public focus(): void {
-		this.searchFieldView.focus();
+		this.queryView.focus();
 	}
 
 	/**
 	 * Resets the component to its initial state.
 	 */
 	public reset(): void {
-		this.searchFieldView.reset();
+		this.queryView.reset();
 		this.search( '' );
 	}
 
@@ -207,16 +207,16 @@ export default class SearchTextView extends View {
 	 * @param locale The localization services instance.
 	 * @param label The label of the search field.
 	 */
-	private _createSearchTextFieldView( locale: Locale, label: string ): SearchTextFieldView {
-		const searchFieldView = new SearchTextFieldView( locale, this._config.searchFieldInputCreator, label );
+	private _createSearchTextQueryView( locale: Locale, label: string ): SearchTextQueryView {
+		const queryView = new SearchTextQueryView( locale, this._config.searchFieldInputCreator, label );
 
-		this.listenTo( searchFieldView.fieldView, 'input', () => {
-			this.search( searchFieldView.fieldView.element!.value );
+		this.listenTo( queryView.fieldView, 'input', () => {
+			this.search( queryView.fieldView.element!.value );
 		} );
 
-		searchFieldView.on( 'reset', () => this.reset() );
+		queryView.on( 'reset', () => this.reset() );
 
-		return searchFieldView;
+		return queryView;
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index bfc49698e9f..17ddc94ba21 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -76,7 +76,7 @@ describe( 'AutocompleteView', () => {
 				sinon.assert.calledOnce( getOptimalPositionSpy );
 				sinon.assert.calledOnceWithExactly( getOptimalPositionSpy, {
 					element: view.resultsView.element,
-					target: view.searchFieldView.element,
+					target: view.queryView.element,
 					fitInViewport: true,
 					positions: AutocompleteView.defaultResultsPositions
 				} );
@@ -138,7 +138,7 @@ describe( 'AutocompleteView', () => {
 			} );
 
 			it( 'resets the view when blurred', () => {
-				const resetSpy = sinon.spy( view.searchFieldView, 'reset' );
+				const resetSpy = sinon.spy( view.queryView, 'reset' );
 
 				view.focusTracker.isFocused = true;
 				view.focusTracker.isFocused = false;
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
similarity index 94%
rename from packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js
rename to packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
index ec8d65ae313..9d9abc489b0 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextfieldview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
@@ -5,12 +5,12 @@
 
 import { Locale } from '@ckeditor/ckeditor5-utils';
 import { ButtonView, createLabeledInputText, IconView } from '@ckeditor/ckeditor5-ui';
-import SearchTextFieldView from '../../../src/search/text/searchtextfieldview';
+import SearchTextQueryView from '../../../src/search/text/searchtextqueryview';
 import { icons } from '@ckeditor/ckeditor5-core';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-describe( 'SearchTextFieldView', () => {
+describe( 'SearchTextQueryView', () => {
 	let locale, view;
 
 	testUtils.createSinonSandbox();
@@ -18,7 +18,7 @@ describe( 'SearchTextFieldView', () => {
 	beforeEach( () => {
 		locale = new Locale();
 
-		view = new SearchTextFieldView( locale, createLabeledInputText, 'Test' );
+		view = new SearchTextQueryView( locale, createLabeledInputText, 'Test' );
 		view.render();
 	} );
 
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index 03fa6e15905..9eec6518268 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -109,7 +109,7 @@ describe( 'SearchTextView', () => {
 
 					// Mock the query input is focused.
 					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view.searchFieldView.element;
+					view.focusTracker.focusedElement = view.queryView.element;
 
 					const spy = sinon.spy( filteredView, 'focus' );
 
@@ -131,7 +131,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = filteredView.element;
 
-					const spy = sinon.spy( view.searchFieldView, 'focus' );
+					const spy = sinon.spy( view.queryView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -163,11 +163,11 @@ describe( 'SearchTextView', () => {
 			} );
 		} );
 
-		describe( '#searchFieldView', () => {
+		describe( '#queryView', () => {
 			it( 'gets created as labeled text view if not configured otherwise', () => {
-				expect( view.searchFieldView ).to.be.instanceOf( LabeledFieldView );
-				expect( view.searchFieldView.fieldView ).to.be.instanceOf( InputTextView );
-				expect( view.searchFieldView.label ).to.equal( 'test label' );
+				expect( view.queryView ).to.be.instanceOf( LabeledFieldView );
+				expect( view.queryView.fieldView ).to.be.instanceOf( InputTextView );
+				expect( view.queryView.label ).to.equal( 'test label' );
 			} );
 
 			it( 'gets created by a custom view creator configured by the user', () => {
@@ -180,8 +180,8 @@ describe( 'SearchTextView', () => {
 
 				view.render();
 
-				expect( view.searchFieldView ).to.be.instanceOf( LabeledFieldView );
-				expect( view.searchFieldView.fieldView ).to.be.instanceOf( InputNumberView );
+				expect( view.queryView ).to.be.instanceOf( LabeledFieldView );
+				expect( view.queryView.fieldView ).to.be.instanceOf( InputNumberView );
 
 				view.destroy();
 			} );
@@ -189,7 +189,7 @@ describe( 'SearchTextView', () => {
 			it( 'shoud trigger #search() upon #input', () => {
 				const spy = sinon.spy( view, 'search' );
 
-				view.searchFieldView.fieldView.fire( 'input' );
+				view.queryView.fieldView.fire( 'input' );
 
 				sinon.assert.calledOnce( spy );
 			} );
@@ -197,7 +197,7 @@ describe( 'SearchTextView', () => {
 			it( 'should reset the entire view if fired #reset', () => {
 				const spy = sinon.spy( view, 'reset' );
 
-				view.searchFieldView.fire( 'reset' );
+				view.queryView.fire( 'reset' );
 
 				sinon.assert.calledOnce( spy );
 			} );
@@ -400,8 +400,8 @@ describe( 'SearchTextView', () => {
 	} );
 
 	describe( 'focus()', () => {
-		it( 'focuses the #searchFieldView', () => {
-			const spy = sinon.spy( view.searchFieldView, 'focus' );
+		it( 'focuses the #queryView', () => {
+			const spy = sinon.spy( view.queryView, 'focus' );
 
 			view.focus();
 
@@ -410,8 +410,8 @@ describe( 'SearchTextView', () => {
 	} );
 
 	describe( 'reset()', () => {
-		it( 'resets the #searchFieldView', () => {
-			const spy = sinon.spy( view.searchFieldView, 'reset' );
+		it( 'resets the #queryView', () => {
+			const spy = sinon.spy( view.queryView, 'reset' );
 
 			view.reset();
 

From 5413b411075e83fe729abd8568c09d61f45d87a0 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 12 Sep 2023 16:22:35 +0200
Subject: [PATCH 42/84] Intoduced resizable TextareaView. Allowed using
 TextareaView for AutocompleteView.

---
 .../components/autocomplete/autocomplete.css  |   1 +
 .../src/autocomplete/autocompleteview.ts      |  87 +++++++++++--
 packages/ckeditor5-ui/src/index.ts            |   6 +-
 .../src/labeledfield/labeledfieldview.ts      |  11 +-
 .../ckeditor5-ui/src/labeledfield/utils.ts    |  41 +++---
 .../src/search/text/searchtextqueryview.ts    |  13 +-
 .../src/search/text/searchtextview.ts         |  60 ++++++---
 .../ckeditor5-ui/src/textarea/textareaview.ts | 120 +++++++++++++++++-
 .../tests/manual/textarea/textareaview.html   |  33 +++++
 .../tests/manual/textarea/textareaview.md     |   1 +
 .../tests/manual/textarea/textareaview.ts     |  63 +++++++++
 packages/ckeditor5-utils/src/index.ts         |   1 +
 12 files changed, 368 insertions(+), 69 deletions(-)
 create mode 100644 packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
 create mode 100644 packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
 create mode 100644 packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
index 8ef4bc348e6..2f618404796 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
@@ -15,6 +15,7 @@
 		overflow-y: auto;
 		background: var(--ck-color-base-background);
 		border: 1px solid var(--ck-color-dropdown-panel-border);
+		min-width: auto;
 
 		&.ck-search__results_n {
 			border-bottom-left-radius: 0;
diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 3422431287a..754c4987e1c 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -7,9 +7,10 @@
  * @module ui/autocomplete/autocompleteview
 */
 
-import { getOptimalPosition, type PositioningFunction, type Locale, global } from '@ckeditor/ckeditor5-utils';
+import { getOptimalPosition, type PositioningFunction, type Locale, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
 import SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview';
 import type SearchResultsView from '../search/searchresultsview';
+import type InputBase from '../input/inputbase';
 
 import '../../theme/components/autocomplete/autocomplete.css';
 
@@ -18,13 +19,17 @@ import '../../theme/components/autocomplete/autocomplete.css';
  * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
  * the component.
  */
-export default class AutocompleteView extends SearchTextView {
+export default class AutocompleteView<
+	TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>
+> extends SearchTextView<TQueryFieldView> {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale: Locale, config: SearchTextViewConfig ) {
+	constructor( locale: Locale, config: AutocompleteViewConfig<TQueryFieldView> ) {
 		super( locale, config );
 
+		const toPx = toUnit( 'px' );
+
 		this.extendTemplate( {
 			attributes: {
 				class: [ 'ck-autocomplete' ]
@@ -36,22 +41,31 @@ export default class AutocompleteView extends SearchTextView {
 
 		resultsView.set( 'isVisible', false );
 		resultsView.set( '_position', 's' );
+		resultsView.set( '_width', 0 );
+
+		this._config = config;
 
 		resultsView.extendTemplate( {
 			attributes: {
 				class: [
 					bindResultsView.if( 'isVisible', 'ck-hidden', value => !value ),
 					bindResultsView.to( '_position', value => `ck-search__results_${ value }` )
-				]
+				],
+				style: {
+					width: bindResultsView.to( '_width', value => toPx( value ) )
+				}
 			}
 		} );
 
 		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
-			resultsView.isVisible = isFocused;
+			resultsView.isVisible = this._shouldShowResults;
 
 			if ( isFocused ) {
 				this._updateResultsViewPosition();
-			} else {
+
+				// Reset the scroll position of the results view whenever the autocomplete reopens.
+				this.resultsView.element!.scrollTop = 0;
+			} else if ( config.resetOnBlur ) {
 				this.queryView.reset();
 			}
 		} );
@@ -62,13 +76,29 @@ export default class AutocompleteView extends SearchTextView {
 				this._updateResultsViewPosition();
 			}
 		} );
+
+		this.on( 'change:isEnabled', () => {
+			if ( !this._shouldShowResults ) {
+				resultsView.isVisible = false;
+			}
+		} );
+
+		this.on( 'search', () => {
+			if ( !this._shouldShowResults ) {
+				resultsView.isVisible = false;
+			}
+		}, { priority: 'low' } );
 	}
 
 	/**
 	 * Updates the position of the results view on demand.
 	 */
 	private _updateResultsViewPosition() {
-		( this.resultsView as AutocompleteResultsView )._position = AutocompleteView._getOptimalPosition( {
+		const resultsView = ( this.resultsView as AutocompleteResultsView );
+
+		resultsView._width = new Rect( this.queryView.element! ).width;
+
+		resultsView._position = AutocompleteView._getOptimalPosition( {
 			element: this.resultsView.element!,
 			target: this.queryView.element!,
 			fitInViewport: true,
@@ -76,6 +106,23 @@ export default class AutocompleteView extends SearchTextView {
 		} ).name as string;
 	}
 
+	/**
+	 * TODO
+	 */
+	private get _queryLength(): number {
+		return this.queryView.fieldView.element!.value.length;
+	}
+
+	/**
+	 * TODO
+	 */
+	private get _shouldShowResults(): boolean {
+		const config = this._config as AutocompleteViewConfig<TQueryFieldView>;
+		const queryMinChars = typeof config.queryMinChars === 'undefined' ? 0 : config.queryMinChars;
+
+		return this.focusTracker.isFocused && this.isEnabled && this._queryLength >= queryMinChars;
+	}
+
 	/**
 	 * Positions for the autocomplete results view. Two positions are defined by default:
 	 * * `s` - below the search field,
@@ -107,7 +154,7 @@ export default class AutocompleteView extends SearchTextView {
 /**
  * An interface describing additional properties of the floating search results view used by the autocomplete plugin.
  */
-interface AutocompleteResultsView extends SearchResultsView {
+export interface AutocompleteResultsView extends SearchResultsView {
 
 	/**
 	 * Controls the visibility of the results view.
@@ -120,6 +167,28 @@ interface AutocompleteResultsView extends SearchResultsView {
 	 * Controls the position (CSS class suffix) of the results view.
 	 *
 	 * @internal
-	 */
+	*/
 	_position: string;
+
+	/**
+	 * TODO
+	 *
+	 * @internal
+	 */
+	_width: number;
+}
+
+export interface AutocompleteViewConfig<
+	TConfigInputCreator extends InputBase<HTMLInputElement | HTMLTextAreaElement>
+> extends SearchTextViewConfig<TConfigInputCreator> {
+
+	/**
+	 * When set `true`, the query view will be reset when the autocomplete view loses focus.
+	 */
+	resetOnBlur?: boolean;
+
+	/**
+	 * Minimum number of characters that need to be typed before the search is performed.
+	 */
+	queryMinChars?: number;
 }
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 8d1defc0c50..9392d8b1326 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -61,7 +61,7 @@ export { default as TextareaView } from './textarea/textareaview';
 export { default as IframeView } from './iframe/iframeview';
 
 export { default as LabelView } from './label/labelview';
-export { default as LabeledFieldView } from './labeledfield/labeledfieldview';
+export { type LabeledFieldViewCreator, default as LabeledFieldView } from './labeledfield/labeledfieldview';
 export * from './labeledfield/utils';
 
 export { default as ListItemGroupView } from './list/listitemgroupview';
@@ -75,8 +75,8 @@ export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
 export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 
-export { default as AutocompleteView } from './autocomplete/autocompleteview';
-export { default as SearchTextView, type SearchTextViewSearchEvent } from './search/text/searchtextview';
+export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview';
+export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview';
 export { default as SearchInfoView } from './search/searchinfoview';
 export { default as FilteredView } from './search/filteredview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
diff --git a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
index 0f9bbdae962..902cb71775b 100644
--- a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
@@ -179,10 +179,7 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 	 * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
 	 * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
 	 */
-	constructor(
-		locale: Locale | undefined,
-		viewCreator: ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => TFieldView
-	) {
+	constructor( locale: Locale | undefined, viewCreator: LabeledFieldViewCreator<TFieldView> ) {
 		super( locale );
 
 		const viewUid = `ck-labeled-field-view-${ uid() }`;
@@ -295,3 +292,9 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 		this.fieldView.focus();
 	}
 }
+
+/**
+ * TODO
+ */
+export type LabeledFieldViewCreator<TFieldView extends FocusableView> =
+	( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => TFieldView;
diff --git a/packages/ckeditor5-ui/src/labeledfield/utils.ts b/packages/ckeditor5-ui/src/labeledfield/utils.ts
index 94401395bfb..5d459c53e9f 100644
--- a/packages/ckeditor5-ui/src/labeledfield/utils.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/utils.ts
@@ -12,9 +12,9 @@ import InputNumberView from '../inputnumber/inputnumberview';
 import TextareaView from '../textarea/textareaview';
 import { createDropdown } from '../dropdown/utils';
 
-import type LabeledFieldView from './labeledfieldview';
 import type DropdownView from '../dropdown/dropdownview';
 import type { InputViewInputEvent } from '../input/inputview';
+import type { LabeledFieldViewCreator } from './labeledfieldview';
 
 /**
  * A helper for creating labeled inputs.
@@ -43,11 +43,7 @@ import type { InputViewInputEvent } from '../input/inputview';
  * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
  * @returns The input text view instance.
  */
-export function createLabeledInputText(
-	labeledFieldView: LabeledFieldView,
-	viewUid: string,
-	statusUid: string
-): InputTextView {
+const createLabeledInputText: LabeledFieldViewCreator<InputTextView> = ( labeledFieldView, viewUid, statusUid ) => {
 	const inputView = new InputTextView( labeledFieldView.locale );
 
 	inputView.set( {
@@ -67,7 +63,7 @@ export function createLabeledInputText(
 	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
 
 	return inputView;
-}
+};
 
 /**
  * A helper for creating labeled number inputs.
@@ -96,11 +92,7 @@ export function createLabeledInputText(
  * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the input.
  * @returns The input number view instance.
  */
-export function createLabeledInputNumber(
-	labeledFieldView: LabeledFieldView,
-	viewUid: string,
-	statusUid: string
-): InputNumberView {
+const createLabeledInputNumber: LabeledFieldViewCreator<InputNumberView> = ( labeledFieldView, viewUid, statusUid ) => {
 	const inputView = new InputNumberView( labeledFieldView.locale );
 
 	inputView.set( {
@@ -121,7 +113,7 @@ export function createLabeledInputNumber(
 	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
 
 	return inputView;
-}
+};
 
 /**
  * A helper for creating labeled textarea.
@@ -150,11 +142,7 @@ export function createLabeledInputNumber(
  * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view's status} and the textarea.
  * @returns The textarea view instance.
  */
-export function createLabeledTextarea(
-	labeledFieldView: LabeledFieldView,
-	viewUid: string,
-	statusUid: string
-): TextareaView {
+const createLabeledTextarea: LabeledFieldViewCreator<TextareaView> = ( labeledFieldView, viewUid, statusUid ) => {
 	const textareaView = new TextareaView( labeledFieldView.locale );
 
 	textareaView.set( {
@@ -174,7 +162,7 @@ export function createLabeledTextarea(
 	labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( textareaView );
 
 	return textareaView;
-}
+};
 
 /**
  * A helper for creating labeled dropdowns.
@@ -201,11 +189,7 @@ export function createLabeledTextarea(
  * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
  * @returns The dropdown view instance.
  */
-export function createLabeledDropdown(
-	labeledFieldView: LabeledFieldView,
-	viewUid: string,
-	statusUid: string
-): DropdownView {
+const createLabeledDropdown: LabeledFieldViewCreator<DropdownView> = ( labeledFieldView, viewUid, statusUid ) => {
 	const dropdownView = createDropdown( labeledFieldView.locale );
 
 	dropdownView.set( {
@@ -216,4 +200,11 @@ export function createLabeledDropdown(
 	dropdownView.bind( 'isEnabled' ).to( labeledFieldView );
 
 	return dropdownView;
-}
+};
+
+export {
+	createLabeledInputNumber,
+	createLabeledInputText,
+	createLabeledTextarea,
+	createLabeledDropdown
+};
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index 218b8748f7a..eea9321f46e 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -9,9 +9,8 @@
 
 import ButtonView from '../../button/buttonview';
 import IconView from '../../icon/iconview';
-import LabeledFieldView from '../../labeledfield/labeledfieldview';
-import { createLabeledInputText } from '../../labeledfield/utils';
-import type InputView from '../../input/inputview';
+import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
+import type InputBase from '../../input/inputbase';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
 import { icons } from '@ckeditor/ckeditor5-core';
@@ -22,7 +21,9 @@ import { icons } from '@ckeditor/ckeditor5-core';
  * @private
  * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
  */
-export default class SearchTextQueryView extends LabeledFieldView<InputView> {
+export default class SearchTextQueryView<
+	TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>
+> extends LabeledFieldView<TQueryFieldView> {
 	/**
 	 * The loupe icon displayed next to the {@link #fieldView}.
 	 */
@@ -38,8 +39,8 @@ export default class SearchTextQueryView extends LabeledFieldView<InputView> {
 	 */
 	constructor(
 		locale: Locale,
-		viewCreator = createLabeledInputText,
-		label: string
+		label: string,
+		viewCreator: LabeledFieldViewCreator<TQueryFieldView>
 	) {
 		super( locale, viewCreator );
 
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 86b911b410e..1227be43b36 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -12,11 +12,14 @@ import View from '../../view';
 import SearchTextQueryView from './searchtextqueryview';
 import SearchInfoView from '../searchinfoview';
 import SearchResultsView from '../searchresultsview';
-import type LabeledFieldView from '../../labeledfield/labeledfieldview';
-import type InputView from '../../input/inputview';
-import type FilteredView from '../filteredview';
-import { escapeRegExp } from 'lodash-es';
 import FocusCycler from '../../focuscycler';
+import { escapeRegExp } from 'lodash-es';
+import { createLabeledInputText } from '../../labeledfield/utils';
+import type { LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
+import type FilteredView from '../filteredview';
+import type ViewCollection from '../../viewcollection';
+import type InputBase from '../../input/inputbase';
+import type InputTextView from '../../inputtext/inputtextview';
 
 import '../../../theme/components/search/search.css';
 
@@ -38,7 +41,9 @@ import '../../../theme/components/search/search.css';
  * document.body.append( view.element );
  * ```
  */
-export default class SearchTextView extends View {
+export default class SearchTextView<
+	TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement> = InputTextView
+> extends View {
 	/**
 	 * Tracks information about the DOM focus in the view.
 	 *
@@ -71,7 +76,17 @@ export default class SearchTextView extends View {
 	/**
 	 * The view that allows the user to enter the search query.
 	 */
-	public queryView: SearchTextQueryView;
+	public queryView: SearchTextQueryView<TQueryFieldView>;
+
+	/**
+	 * A collection of views that are children of the search view.
+	 */
+	public children: ViewCollection;
+
+	/**
+	 * TODO
+	 */
+	declare public isEnabled: boolean;
 
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
@@ -85,7 +100,7 @@ export default class SearchTextView extends View {
 	 *
 	 * @internal
 	 */
-	private _config: SearchTextViewConfig;
+	protected _config: SearchTextViewConfig<TQueryFieldView>;
 
 	/**
 	 * Creates an instance of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
@@ -93,16 +108,19 @@ export default class SearchTextView extends View {
 	 * @param locale The localization services instance.
 	 * @param config Configuration of the view.
 	 */
-	constructor( locale: Locale, config: SearchTextViewConfig ) {
+	constructor( locale: Locale, config: SearchTextViewConfig<TQueryFieldView> ) {
 		super( locale );
 
 		this._config = config;
 
+		this.set( 'isEnabled', true );
+
 		this.filteredView = config.filteredView;
 		this.queryView = this._createSearchTextQueryView( locale, config.searchFieldLabel );
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
+		this.children = this.createCollection();
 
 		if ( !config.infoView ) {
 			this.infoView = new SearchInfoView();
@@ -143,10 +161,7 @@ export default class SearchTextView extends View {
 
 				tabindex: '-1'
 			},
-			children: [
-				this.queryView,
-				this.resultsView
-			]
+			children: this.children
 		} );
 	}
 
@@ -156,6 +171,8 @@ export default class SearchTextView extends View {
 	public override render(): void {
 		super.render();
 
+		this.children.addMany( [ this.queryView, this.resultsView ] );
+
 		const stopPropagation = ( data: Event ) => data.stopPropagation();
 
 		this.focusTracker.add( this.queryView.element as Element );
@@ -198,7 +215,7 @@ export default class SearchTextView extends View {
 		const regExp = query ? new RegExp( escapeRegExp( query ), 'ig' ) : null;
 		const filteringResults = this.filteredView.filter( regExp );
 
-		this.fire( 'search', { query, ...filteringResults } );
+		this.fire<SearchTextViewSearchEvent>( 'search', { query, ...filteringResults } );
 	}
 
 	/**
@@ -207,8 +224,11 @@ export default class SearchTextView extends View {
 	 * @param locale The localization services instance.
 	 * @param label The label of the search field.
 	 */
-	private _createSearchTextQueryView( locale: Locale, label: string ): SearchTextQueryView {
-		const queryView = new SearchTextQueryView( locale, this._config.searchFieldInputCreator, label );
+	private _createSearchTextQueryView( locale: Locale, label: string ): SearchTextQueryView<TQueryFieldView> {
+		const queryFieldCreator = this._config.searchFieldInputCreator;
+		const queryView = new SearchTextQueryView<TQueryFieldView>(
+			locale, label, queryFieldCreator || createLabeledInputText as any
+		);
 
 		this.listenTo( queryView.fieldView, 'input', () => {
 			this.search( queryView.fieldView.element!.value );
@@ -216,6 +236,8 @@ export default class SearchTextView extends View {
 
 		queryView.on( 'reset', () => this.reset() );
 
+		queryView.bind( 'isEnabled' ).to( this );
+
 		return queryView;
 	}
 
@@ -264,7 +286,9 @@ export default class SearchTextView extends View {
 /**
  * The configuration of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
  */
-export type SearchTextViewConfig = {
+export interface SearchTextViewConfig<
+	TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>
+> {
 
 	/**
 	 * The view that is filtered by the search query.
@@ -280,7 +304,7 @@ export type SearchTextViewConfig = {
 	 * The function that creates the search field input view. By default, a plain
 	 * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.
 	 */
-	searchFieldInputCreator?: ConstructorParameters<typeof LabeledFieldView<InputView>>[ 1 ];
+	searchFieldInputCreator?: LabeledFieldViewCreator<TConfigSearchField>;
 
 	/**
 	 * The custom CSS class name to be added to the search view element.
@@ -311,7 +335,7 @@ export type SearchTextViewConfig = {
 			secondary?: SearchTextViewDefaultInfoText;
 		};
 	};
-};
+}
 
 /**
  * Describes value of a info text configuration in {@link module:ui/search/text/searchtextview~SearchTextViewConfig}.
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 848116016da..0cf76622693 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,7 +7,7 @@
  * @module ui/textarea/textareaview
  */
 
-import { type Locale } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
@@ -22,7 +22,31 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	 * @observable
 	 * @default 1
 	 */
-	declare public rows: number;
+	declare public minRows: number;
+
+	/**
+	 * Specifies the maximum number of rows.
+	 *
+	 * @observable
+	 * @default 5
+	 */
+	declare public maxRows: number;
+
+	/**
+	 * TODO
+	 *
+	 * @observable
+	 * @default null
+	 */
+	declare public height: number | null;
+
+	/**
+	 * TODO
+	 *
+	 * @observable
+	 * @default 'both'
+	 */
+	declare public resize: 'both' | 'horizontal' | 'vertical' | 'none';
 
 	/**
 	 * @inheritDoc
@@ -30,7 +54,12 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	constructor( locale?: Locale ) {
 		super( locale );
 
-		this.set( 'rows', 1 );
+		const toPx = toUnit( 'px' );
+
+		this.set( 'minRows', 1 );
+		this.set( 'maxRows', 5 );
+		this.set( 'height', null );
+		this.set( 'resize', 'both' );
 
 		const bind = this.bindTemplate;
 
@@ -38,8 +67,91 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		this.extendTemplate( {
 			attributes: {
-				rows: bind.to( 'rows' )
+				style: {
+					height: bind.to( 'height', height => height ? toPx( height ) : null ),
+					resize: bind.to( 'resize' )
+				},
+				rows: bind.to( 'minRows' )
 			}
 		} );
+
+		this.on( 'input', () => {
+			this._autoGrow( true );
+		} );
+
+		this.on( 'change:value', () => {
+			// The content needs to be updated by the browser after the value is changed. It takes a few ms.
+			setTimeout( () => this._autoGrow(), 50 );
+		} );
 	}
+
+	/**
+	 * TODO
+	 */
+	public reset(): void {
+		this.value = this.element!.value = '';
+		this._updateIsEmpty();
+		this._autoGrow();
+	}
+
+	/**
+	 * TODO
+	 */
+	private _autoGrow( shouldScroll?: boolean ): void {
+		const viewElement = this.element!;
+		const singleLineContentClone = getElementClone( viewElement, '1' );
+		const fullTextValueClone = getElementClone( viewElement, viewElement.value );
+		const singleLineContentStyles = singleLineContentClone.ownerDocument.defaultView!.getComputedStyle( singleLineContentClone );
+
+		const verticalPaddings = parseFloat( singleLineContentStyles.paddingTop ) + parseFloat( singleLineContentStyles.paddingBottom );
+		const borders = getBorderWidths( singleLineContentClone );
+		const lineHeight = parseFloat( singleLineContentStyles.lineHeight );
+		const verticalBorder = borders.top + borders.bottom;
+
+		const singleLineAreaDefaultHeight = new Rect( singleLineContentClone ).height;
+		const numberOfLines = Math.round( ( fullTextValueClone.scrollHeight - verticalPaddings ) / lineHeight );
+
+		const maxHeight = this.maxRows * lineHeight + verticalPaddings + verticalBorder;
+
+		// There's a --ck-ui-component-min-height CSS custom property that enforces min height of the component.
+		// This min-height is relevant only when there's one line of text. Other than that, we can rely on line-height.
+		const minHeight = numberOfLines === 1 ? singleLineAreaDefaultHeight : this.minRows * lineHeight + verticalPaddings + verticalBorder;
+
+		this.height = Math.min(
+			Math.max(
+				Math.max( numberOfLines, this.minRows ) * lineHeight + verticalPaddings + verticalBorder,
+				minHeight
+			),
+			maxHeight
+		);
+
+		if ( shouldScroll ) {
+			viewElement.scrollTop = viewElement.scrollHeight;
+		}
+
+		singleLineContentClone.remove();
+		fullTextValueClone.remove();
+	}
+}
+
+function getElementClone( element: HTMLTextAreaElement, value: string ): HTMLTextAreaElement {
+	const clone = element.cloneNode() as HTMLTextAreaElement;
+
+	element.parentNode!.insertBefore( clone, element );
+
+	clone.style.position = 'absolute';
+	clone.style.top = '-99999px';
+	clone.style.left = '-99999px';
+	// clone.style.bottom = '10px';
+	// clone.style.left = '10px';
+	clone.style.height = 'auto';
+	clone.style.overflow = 'hidden';
+	clone.style.width = element.ownerDocument.defaultView!.getComputedStyle( element ).width;
+	clone.tabIndex = -1;
+	clone.rows = 1;
+	clone.value = value;
+
+	element.parentNode!.insertBefore( clone, element );
+
+	return clone;
 }
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
new file mode 100644
index 00000000000..92c20126de4
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
@@ -0,0 +1,33 @@
+<div dir="ltr" class="ck ck-reset_all ck-rounded-corners playground"></div>
+
+<style>
+	.ck.playground {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.ck.playground > div {
+		border: 1px dashed red;
+		padding: 10px;
+		max-width: 500px;
+		margin: 10px;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	.ck.playground > div > h2 {
+		font-size: 16px;
+		font-weight: bold;
+		margin-bottom: 20px;
+	}
+
+	.ck.playground textarea {
+		width: 100%;
+	}
+
+	.ck.playground button {
+		display: block;
+		margin-top: 10px;
+		background: #eee;
+	}
+</style>
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
new file mode 100644
index 00000000000..464090415c4
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
@@ -0,0 +1 @@
+# TODO
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
new file mode 100644
index 00000000000..5395aafaab1
--- /dev/null
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
@@ -0,0 +1,63 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import { ButtonView, TextareaView } from '../../../src';
+
+function createPlainTextarea() {
+	const textareaView = new TextareaView();
+
+	addToPlayground( 'Default textarea', textareaView );
+}
+
+function createPlainTextareaWithMoreRows() {
+	const textareaView = new TextareaView();
+
+	textareaView.minRows = 5;
+	textareaView.maxRows = 10;
+
+	addToPlayground( 'min 5 rows, max 10 rows', textareaView );
+}
+
+function createPlainTextareaWithFixedRows() {
+	const textareaView = new TextareaView();
+
+	textareaView.minRows = 3;
+	textareaView.maxRows = 3;
+
+	addToPlayground( '3 rows, fixed', textareaView );
+}
+
+function addToPlayground( name, view ) {
+	view.render();
+
+	const setLargeTextButton = new ButtonView();
+
+	setLargeTextButton.label = 'Set large text';
+	setLargeTextButton.withText = true;
+	setLargeTextButton.render();
+
+	setLargeTextButton.on( 'execute', () => {
+		view.value = '';
+		view.value = 'Life doesn\'t allow us to execute every single plan perfectly. This especially seems to be the case when you ' +
+			'travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes' +
+			' up and you’re left with your improvising skills. You learn to adapt as you go.' +
+			'Life doesn\'t allow us to execute every single plan perfectly. This especially seems to be the case when you ' +
+			'travel. You plan it down to every minute with a big checklist. But when it comes to executing it, something always comes' +
+			' up and you’re left with your improvising skills. You learn to adapt as you go.';
+	} );
+
+	const container = document.createElement( 'div' );
+	const heading = document.createElement( 'h2' );
+	heading.textContent = name;
+
+	container.appendChild( heading );
+	container.appendChild( view.element! );
+	container.appendChild( setLargeTextButton.element! );
+	document.querySelector( '.playground' )!.appendChild( container );
+}
+
+createPlainTextarea();
+createPlainTextareaWithMoreRows();
+createPlainTextareaWithFixedRows();
diff --git a/packages/ckeditor5-utils/src/index.ts b/packages/ckeditor5-utils/src/index.ts
index 9f2c77cfcb6..e9d021373fb 100644
--- a/packages/ckeditor5-utils/src/index.ts
+++ b/packages/ckeditor5-utils/src/index.ts
@@ -52,6 +52,7 @@ export { default as findClosestScrollableAncestor } from './dom/findclosestscrol
 export { default as global } from './dom/global';
 export { default as getAncestors } from './dom/getancestors';
 export { default as getDataFromElement } from './dom/getdatafromelement';
+export { default as getBorderWidths } from './dom/getborderwidths';
 export { default as isText } from './dom/istext';
 export { default as Rect, type RectSource } from './dom/rect';
 export { default as ResizeObserver } from './dom/resizeobserver';

From fec7f42d67ea9cb466eaef9953130fa911001694 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 13 Sep 2023 13:23:25 +0200
Subject: [PATCH 43/84] Improvements to SearchView and AutocompleteView API and
 behaviors.

---
 .../ckeditor5-ui/components/search/search.css |  84 +++++++-----
 .../src/autocomplete/autocompleteview.ts      |  46 ++++---
 .../src/search/text/searchtextqueryview.ts    | 120 +++++++++++++-----
 .../src/search/text/searchtextview.ts         | 114 +++++++++--------
 .../tests/manual/autocomplete/autocomplete.ts |   6 +-
 .../tests/manual/search/search.ts             |  29 +++--
 .../tests/manual/textarea/textareaview.html   |  33 +++--
 .../tests/manual/textarea/textareaview.ts     |  51 ++++++++
 .../tests/search/text/searchtextqueryview.js  |   2 +-
 .../theme/components/search/search.css        |   2 +-
 10 files changed, 316 insertions(+), 171 deletions(-)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
index 57cfb217403..9a0e4f52486 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css
@@ -11,56 +11,73 @@
 
 .ck.ck-search {
 	& > .ck-labeled-field-view {
-		--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
-		--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
-
-		&.ck-labeled-field-view_empty {
-			--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
-		}
-
-		& > .ck-labeled-field-view__input-wrapper > .ck-icon {
-			opacity: .5;
-			pointer-events: none;
-		}
-
 		& .ck-input {
 			width: 100%;
+		}
 
-			@mixin ck-dir ltr {
-				padding-left: var(--ck-search-field-view-horizontal-spacing);
+		&.ck-search__query_with-icon {
+			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
 
-				&:not(.ck-input-text_empty) {
-					padding-right: var(--ck-search-field-view-horizontal-spacing);
-				}
+			& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+				opacity: .5;
+				pointer-events: none;
 			}
 
-			@mixin ck-dir rtl {
-				padding-right: var(--ck-search-field-view-horizontal-spacing);
+			& .ck-input {
+				width: 100%;
 
-				&:not(.ck-input-text_empty) {
+				@mixin ck-dir ltr {
 					padding-left: var(--ck-search-field-view-horizontal-spacing);
 				}
+
+				@mixin ck-dir rtl {
+					&:not(.ck-input-text_empty) {
+						padding-left: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
 			}
 		}
 
-		& .ck-search__clear-search {
-			min-width: auto;
-			min-height: auto;
-
-			background: none;
-			opacity: .5;
-			padding: 0;
+		&.ck-search__query_with-reset {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
 
-			@mixin ck-dir ltr {
-				right: var(--ck-spacing-medium);
+			&.ck-labeled-field-view_empty {
+				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
 			}
 
-			@mixin ck-dir rtl {
-				left: var(--ck-spacing-medium);
+			& .ck-search__reset {
+				min-width: auto;
+				min-height: auto;
+
+				background: none;
+				opacity: .5;
+				padding: 0;
+
+				@mixin ck-dir ltr {
+					right: var(--ck-spacing-medium);
+				}
+
+				@mixin ck-dir rtl {
+					left: var(--ck-spacing-medium);
+				}
+
+				&:hover {
+					opacity: 1;
+				}
 			}
 
-			&:hover {
-				opacity: 1;
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					&:not(.ck-input-text_empty) {
+						padding-right: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+
+				@mixin ck-dir rtl {
+					padding-right: var(--ck-search-field-view-horizontal-spacing);
+				}
 			}
 		}
 	}
@@ -86,3 +103,4 @@
 		}
 	}
 }
+
diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 754c4987e1c..a616836423d 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -58,11 +58,10 @@ export default class AutocompleteView<
 		} );
 
 		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
-			resultsView.isVisible = this._shouldShowResults;
+			this._updateResultsVisibility();
 
 			if ( isFocused ) {
 				this._updateResultsViewPosition();
-
 				// Reset the scroll position of the results view whenever the autocomplete reopens.
 				this.resultsView.element!.scrollTop = 0;
 			} else if ( config.resetOnBlur ) {
@@ -70,24 +69,24 @@ export default class AutocompleteView<
 			}
 		} );
 
+		this.on( 'search', () => {
+			this._updateResultsVisibility();
+			this._updateResultsViewPosition();
+		} );
+
+		this.keystrokes.set( 'esc', ( evt, cancel ) => {
+			resultsView.isVisible = false;
+			cancel();
+		} );
+
 		// TODO: This needs to be debounced down the road.
 		this.listenTo( global.document, 'scroll', () => {
-			if ( resultsView.isVisible ) {
-				this._updateResultsViewPosition();
-			}
+			this._updateResultsViewPosition();
 		} );
 
 		this.on( 'change:isEnabled', () => {
-			if ( !this._shouldShowResults ) {
-				resultsView.isVisible = false;
-			}
+			this._updateResultsVisibility();
 		} );
-
-		this.on( 'search', () => {
-			if ( !this._shouldShowResults ) {
-				resultsView.isVisible = false;
-			}
-		}, { priority: 'low' } );
 	}
 
 	/**
@@ -96,7 +95,11 @@ export default class AutocompleteView<
 	private _updateResultsViewPosition() {
 		const resultsView = ( this.resultsView as AutocompleteResultsView );
 
-		resultsView._width = new Rect( this.queryView.element! ).width;
+		if ( !resultsView.isVisible ) {
+			return;
+		}
+
+		resultsView._width = new Rect( this.queryView.fieldView.element! ).width;
 
 		resultsView._position = AutocompleteView._getOptimalPosition( {
 			element: this.resultsView.element!,
@@ -109,18 +112,13 @@ export default class AutocompleteView<
 	/**
 	 * TODO
 	 */
-	private get _queryLength(): number {
-		return this.queryView.fieldView.element!.value.length;
-	}
-
-	/**
-	 * TODO
-	 */
-	private get _shouldShowResults(): boolean {
+	private _updateResultsVisibility() {
+		const resultsView = ( this.resultsView as AutocompleteResultsView );
 		const config = this._config as AutocompleteViewConfig<TQueryFieldView>;
 		const queryMinChars = typeof config.queryMinChars === 'undefined' ? 0 : config.queryMinChars;
+		const queryLength = this.queryView.fieldView.element!.value.length;
 
-		return this.focusTracker.isFocused && this.isEnabled && this._queryLength >= queryMinChars;
+		resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index eea9321f46e..42bc4e70aa6 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -10,6 +10,7 @@
 import ButtonView from '../../button/buttonview';
 import IconView from '../../icon/iconview';
 import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
+import { createLabeledInputText } from '../../labeledfield/utils';
 import type InputBase from '../../input/inputbase';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
@@ -27,48 +28,72 @@ export default class SearchTextQueryView<
 	/**
 	 * The loupe icon displayed next to the {@link #fieldView}.
 	 */
-	public loupeIconView: IconView;
+	public loupeIconView?: IconView;
 
 	/**
 	 * The button that clears and focuses the {@link #fieldView}.
 	 */
-	public clearButtonView: ButtonView;
+	public clearButtonView?: ButtonView;
 
 	/**
-	 * @inheritDoc
+	 * TODO
 	 */
-	constructor(
-		locale: Locale,
-		label: string,
-		viewCreator: LabeledFieldViewCreator<TQueryFieldView>
-	) {
-		super( locale, viewCreator );
+	private _viewConfig: SearchTextQueryViewConfig<TQueryFieldView>;
 
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale: Locale, config: SearchTextQueryViewConfig<TQueryFieldView> ) {
 		const t = locale.t;
+		const viewConfig = Object.assign( {}, {
+			showResetButton: true,
+			showIcon: true,
+			creator: createLabeledInputText
+		}, config );
+
+		super( locale, viewConfig.creator as any );
+
+		this.label = config.label;
+		this._viewConfig = viewConfig;
+
+		if ( this._viewConfig.showIcon ) {
+			this.loupeIconView = new IconView();
+			this.loupeIconView.content = icons.loupe;
+			this.fieldWrapperChildren.add( this.loupeIconView, 0 );
 
-		this.label = label;
-		this.loupeIconView = new IconView();
-		this.loupeIconView.content = icons.loupe;
-
-		this.clearButtonView = new ButtonView( locale );
-		this.clearButtonView.set( {
-			label: t( 'Clear' ),
-			icon: icons.cancel,
-			class: 'ck-search__clear-search',
-			isVisible: false,
-			tooltip: true
-		} );
-
-		this.clearButtonView.on( 'execute', () => {
-			this.reset();
-			this.focus();
-			this.fire<SearchTextQueryViewResetEvent>( 'reset' );
-		} );
-
-		this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
-
-		this.fieldWrapperChildren.add( this.loupeIconView, 0 );
-		this.fieldWrapperChildren.add( this.clearButtonView );
+			this.extendTemplate( {
+				attributes: {
+					class: 'ck-search__query_with-icon'
+				}
+			} );
+		}
+
+		if ( this._viewConfig.showResetButton ) {
+			this.clearButtonView = new ButtonView( locale );
+			this.clearButtonView.set( {
+				label: t( 'Clear' ),
+				icon: icons.cancel,
+				class: 'ck-search__reset',
+				isVisible: false,
+				tooltip: true
+			} );
+
+			this.clearButtonView.on( 'execute', () => {
+				this.reset();
+				this.focus();
+				this.fire<SearchTextQueryViewResetEvent>( 'reset' );
+			} );
+
+			this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
+
+			this.fieldWrapperChildren.add( this.clearButtonView );
+
+			this.extendTemplate( {
+				attributes: {
+					class: 'ck-search__query_with-reset'
+				}
+			} );
+		}
 	}
 
 	/**
@@ -80,7 +105,9 @@ export default class SearchTextQueryView<
 		// (fieldView#value is '', text was typed in the input, resetting fieldView#value '' does not trigger #change in observable)
 		this.fieldView.value = this.fieldView.element!.value = '';
 
-		this.clearButtonView.isVisible = false;
+		if ( this._viewConfig.showResetButton ) {
+			this.clearButtonView!.isVisible = false;
+		}
 	}
 }
 
@@ -94,3 +121,30 @@ export type SearchTextQueryViewResetEvent = {
 	name: 'reset';
 	args: [];
 };
+
+/**
+ * TODO
+ */
+export interface SearchTextQueryViewConfig<TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>> {
+
+	/**
+	 * The human-readable label of the search field.
+	 */
+	label: string;
+
+	/**
+	 * TODO
+	 */
+	showResetButton?: boolean;
+
+	/**
+	 * TODO
+	 */
+	showIcon?: boolean;
+
+	/**
+	 * The function that creates the search field input view. By default, a plain
+	 * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.
+	 */
+	creator?: LabeledFieldViewCreator<TConfigSearchField>;
+}
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 1227be43b36..10dc9336d00 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -9,13 +9,11 @@
 
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../../view';
-import SearchTextQueryView from './searchtextqueryview';
+import { default as SearchTextQueryView, type SearchTextQueryViewConfig } from './searchtextqueryview';
 import SearchInfoView from '../searchinfoview';
 import SearchResultsView from '../searchresultsview';
 import FocusCycler from '../../focuscycler';
 import { escapeRegExp } from 'lodash-es';
-import { createLabeledInputText } from '../../labeledfield/utils';
-import type { LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
 import type FilteredView from '../filteredview';
 import type ViewCollection from '../../viewcollection';
 import type InputBase from '../../input/inputbase';
@@ -88,6 +86,16 @@ export default class SearchTextView<
 	 */
 	declare public isEnabled: boolean;
 
+	/**
+	 * TODO
+	 */
+	declare public resultsCount: number;
+
+	/**
+	 * TODO
+	 */
+	declare public totalItemsCount: number;
+
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
 	 *
@@ -116,13 +124,17 @@ export default class SearchTextView<
 		this.set( 'isEnabled', true );
 
 		this.filteredView = config.filteredView;
-		this.queryView = this._createSearchTextQueryView( locale, config.searchFieldLabel );
+		this.queryView = this._createSearchTextQueryView();
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 		this.children = this.createCollection();
+		this.set( 'resultsCount', 0 );
+		this.set( 'totalItemsCount', 0 );
 
-		if ( !config.infoView ) {
+		if ( config.infoView && config.infoView.instance ) {
+			this.infoView = config.infoView.instance;
+		} else {
 			this.infoView = new SearchInfoView();
 			this._enableDefaultInfoViewBehavior();
 
@@ -131,8 +143,6 @@ export default class SearchTextView<
 				// and displays the corresponding info text.
 				this.search( '' );
 			} );
-		} else {
-			this.infoView = config.infoView;
 		}
 
 		this.resultsView.children.addMany( [ this.infoView, this.filteredView ] );
@@ -150,6 +160,11 @@ export default class SearchTextView<
 			}
 		} );
 
+		this.on( 'search', ( evt, { resultsCount, totalItemsCount } ) => {
+			this.resultsCount = resultsCount;
+			this.totalItemsCount = totalItemsCount;
+		} );
+
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
@@ -224,18 +239,14 @@ export default class SearchTextView<
 	 * @param locale The localization services instance.
 	 * @param label The label of the search field.
 	 */
-	private _createSearchTextQueryView( locale: Locale, label: string ): SearchTextQueryView<TQueryFieldView> {
-		const queryFieldCreator = this._config.searchFieldInputCreator;
-		const queryView = new SearchTextQueryView<TQueryFieldView>(
-			locale, label, queryFieldCreator || createLabeledInputText as any
-		);
+	private _createSearchTextQueryView(): SearchTextQueryView<TQueryFieldView> {
+		const queryView = new SearchTextQueryView<TQueryFieldView>( this.locale!, this._config.queryView );
 
 		this.listenTo( queryView.fieldView, 'input', () => {
 			this.search( queryView.fieldView.element!.value );
 		} );
 
 		queryView.on( 'reset', () => this.reset() );
-
 		queryView.bind( 'isEnabled' ).to( this );
 
 		return queryView;
@@ -251,15 +262,15 @@ export default class SearchTextView<
 
 		this.on<SearchTextViewSearchEvent>( 'search', ( evt, data ) => {
 			if ( !data.resultsCount ) {
-				const infoViewTextConfig = this._config.infoViewTextConfig;
+				const defaultTextConfig = this._config.infoView?.text;
 				let primaryText, secondaryText;
 
 				if ( data.totalItemsCount ) {
-					primaryText = infoViewTextConfig?.notFound?.primary || t( 'No results found' );
-					secondaryText = infoViewTextConfig?.notFound?.secondary || '';
+					primaryText = defaultTextConfig?.notFound?.primary || t( 'No results found' );
+					secondaryText = defaultTextConfig?.notFound?.secondary || '';
 				} else {
-					primaryText = infoViewTextConfig?.noSearchableItems?.primary || t( 'No searchable items' );
-					secondaryText = infoViewTextConfig?.noSearchableItems?.secondary || '';
+					primaryText = defaultTextConfig?.noSearchableItems?.primary || t( 'No searchable items' );
+					secondaryText = defaultTextConfig?.noSearchableItems?.secondary || '';
 				}
 
 				infoView.set( {
@@ -286,55 +297,54 @@ export default class SearchTextView<
 /**
  * The configuration of the {@link module:ui/search/text/searchtextview~SearchTextView} class.
  */
-export interface SearchTextViewConfig<
-	TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>
-> {
+export interface SearchTextViewConfig<TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>> {
 
 	/**
-	 * The view that is filtered by the search query.
+	 * TODO
 	 */
-	filteredView: FilteredView;
+	queryView: SearchTextQueryViewConfig<TConfigSearchField>;
 
 	/**
-	 * The human-readable label of the search field.
+	 * The view that is filtered by the search query.
 	 */
-	searchFieldLabel: string;
+	filteredView: FilteredView;
 
 	/**
-	 * The function that creates the search field input view. By default, a plain
-	 * {@link module:ui/inputtext/inputtextview~InputTextView} is used for this purpose.
+	 * TODO
 	 */
-	searchFieldInputCreator?: LabeledFieldViewCreator<TConfigSearchField>;
+	infoView?: {
+
+		/**
+		 * The view that displays the information about the search results. If not specified,
+		 * {@link module:ui/search/searchinfoview~SearchInfoView} is used.
+		 */
+		instance?: View;
+
+		/**
+		 * The configuration of text labels displayed in the {@link #infoView} in different states
+		 * of the search component.
+		 *
+		 * **Note**: This configuration is only used when the {@link #infoView} is **not** specified.
+		 * In other cases, please use the {@link module:ui/search/searchview~SearchTextViewSearchEvent} to bring about
+		 * your own info text logic.
+		 */
+		text?: {
+			notFound?: {
+				primary: SearchTextViewDefaultInfoText;
+				secondary?: SearchTextViewDefaultInfoText;
+			};
+			noSearchableItems?: {
+				primary: SearchTextViewDefaultInfoText;
+				secondary?: SearchTextViewDefaultInfoText;
+			};
+		};
+	};
 
 	/**
 	 * The custom CSS class name to be added to the search view element.
 	 */
 	class?: string;
 
-	/**
-	 * The view that displays the information about the search results. If not specified,
-	 * {@link module:ui/search/searchinfoview~SearchInfoView} is used.
-	 */
-	infoView?: View;
-
-	/**
-	 * The configuration of text labels displayed in the {@link #infoView} in different states
-	 * of the search component.
-	 *
-	 * **Note**: This configuration is only used when the {@link #infoView} is **not** specified.
-	 * In other cases, please use the {@link module:ui/search/searchview~SearchTextViewSearchEvent} to bring about
-	 * your own info text logic.
-	 */
-	infoViewTextConfig?: {
-		notFound?: {
-			primary: SearchTextViewDefaultInfoText;
-			secondary?: SearchTextViewDefaultInfoText;
-		};
-		noSearchableItems?: {
-			primary: SearchTextViewDefaultInfoText;
-			secondary?: SearchTextViewDefaultInfoText;
-		};
-	};
 }
 
 /**
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
index fb8d14d13eb..4a78974036c 100644
--- a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
@@ -57,7 +57,11 @@ const listView = new FilteredTestListView();
 } );
 
 const view = new AutocompleteView( locale, {
-	searchFieldLabel: 'Search field label',
+	queryView: {
+		label: 'Search field label',
+		showIcon: false,
+		showResetButton: false
+	},
 	filteredView: listView
 } );
 
diff --git a/packages/ckeditor5-ui/tests/manual/search/search.ts b/packages/ckeditor5-ui/tests/manual/search/search.ts
index 20c9e14fe8e..9aed3b490a9 100644
--- a/packages/ckeditor5-ui/tests/manual/search/search.ts
+++ b/packages/ckeditor5-ui/tests/manual/search/search.ts
@@ -14,7 +14,7 @@ import {
 	SearchTextView,
 	ToolbarView,
 	type FilteredView,
-	createLabeledInputNumber
+	createLabeledTextarea
 } from '../../../src';
 
 const locale = new Locale();
@@ -68,8 +68,7 @@ function createSearchableList() {
 	[
 		'getAttribute()', 'getAttributeNames()', 'getAttributeNode()', 'getAttributeNodeNS()', 'getAttributeNS()',
 		'getBoundingClientRect()', 'getClientRects()', 'getElementsByClassName()', 'getElementsByTagName()', 'getElementsByTagNameNS()',
-		'hasAttribute()', 'hasAttributeNS()', 'hasAttributes()', 'hasPointerCapture()', 'insertAdjacentElement()', 'insertAdjacentHTML()',
-		'insertAdjacentText()', 'matches()', 'prepend()', 'querySelector()', 'querySelectorAll()', 'releasePointerCapture()', 'remove()',
+		'hasAttribute()', 'hasAttributeNS()', 'hasAttributes()', 'hasPointerCapture()', 'releasePointerCapture()', 'remove()',
 		'removeAttribute()', 'removeAttributeNode()', 'removeAttributeNS()'
 	].forEach( item => {
 		const listItemView = new ListItemView();
@@ -92,7 +91,9 @@ function createSearchableList() {
 	listView.items.add( hasGroupView );
 
 	const searchView = new SearchTextView( locale, {
-		searchFieldLabel: 'Search list items',
+		queryView: {
+			label: 'Search list items'
+		},
 		filteredView: listView
 	} );
 
@@ -127,11 +128,7 @@ function createSearchableToolbar() {
 		'AddEventListenerOptions', 'AesCbcParams', 'AesCtrParams', 'AesDerivedKeyParams', 'AesGcmParams', 'AesKeyAlgorithm',
 		'AesKeyGenParams', 'Algorithm', 'AnalyserOptions', 'AnimationEventInit', 'AnimationPlaybackEventInit', 'AssignedNodesOptions',
 		'AudioBufferOptions', 'AudioBufferSourceOptions', 'AudioConfiguration', 'AudioContextOptions', 'AudioNodeOptions',
-		'AudioProcessingEventInit', 'AudioTimestamp', 'AudioWorkletNodeOptions', 'AuthenticationExtensionsClientInputs',
-		'AuthenticationExtensionsClientOutputs', 'AuthenticatorSelectionCriteria', 'AvcEncoderConfig', 'BiquadFilterOptions',
-		'BlobEventInit', 'BlobPropertyBag', 'CSSMatrixComponentOptions', 'CSSNumericType', 'CSSStyleSheetInit', 'CacheQueryOptions',
-		'CanvasRenderingContext2DSettings', 'KeyboardEventInit', 'Keyframe', 'KeyframeAnimationOptions', 'KeyframeEffectOptions',
-		'LockInfo', 'MediaStreamTrackEventInit', 'MediaTrackCapabilities', 'MediaTrackConstraintSet', 'MediaTrackConstraints',
+		'AudioProcessingEventInit', 'AudioTimestamp', 'MediaTrackConstraints',
 		'MediaTrackSettings', 'MediaTrackSupportedConstraints', 'MessageEventInit', 'MouseEventInit', 'MultiCacheQueryOptions',
 		'MutationObserverInit', 'NavigationPreloadState'
 	].forEach( item => {
@@ -143,7 +140,9 @@ function createSearchableToolbar() {
 	} );
 
 	const searchView = new SearchTextView( locale, {
-		searchFieldLabel: 'Search toolbar buttons',
+		queryView: {
+			label: 'Search toolbar buttons'
+		},
 		filteredView: toolbarView
 	} );
 
@@ -184,12 +183,14 @@ function createSearchWithCustomInput() {
 		} );
 
 	const searchView = new SearchTextView( locale, {
-		searchFieldLabel: 'Search toolbar buttons',
-		filteredView: toolbarView,
-		searchFieldInputCreator: createLabeledInputNumber
+		queryView: {
+			label: 'Search toolbar buttons',
+			creator: createLabeledTextarea
+		},
+		filteredView: toolbarView
 	} );
 
-	addToPlayground( 'Custom input (number)', searchView );
+	addToPlayground( 'Custom input (textarea)', searchView );
 }
 
 function addToPlayground( name, view ) {
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
index 92c20126de4..93a920d9c5d 100644
--- a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.html
@@ -2,32 +2,41 @@
 
 <style>
 	.ck.playground {
-		display: flex;
-		align-items: flex-start;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-rows: auto;
+		grid-gap: 20px;
 	}
 
 	.ck.playground > div {
-		border: 1px dashed red;
+		border: 1px solid #eee;
+		box-shadow: 2px 2px 3px #0000000d;
 		padding: 10px;
-		max-width: 500px;
-		margin: 10px;
-		flex-grow: 1;
-		flex-shrink: 1;
+
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: auto 1fr;
+		grid-gap: 10px;
 	}
 
 	.ck.playground > div > h2 {
 		font-size: 16px;
 		font-weight: bold;
-		margin-bottom: 20px;
+		grid-area: 1 / 1 / 2 / 3;
 	}
 
 	.ck.playground textarea {
 		width: 100%;
+		clear: both;
+		grid-area: 2 / 1 / 3 / 3;
+	}
+
+	.ck.playground button:first-child {
+		grid-area: 3 / 1 / 4 / 2;
 	}
 
-	.ck.playground button {
-		display: block;
-		margin-top: 10px;
-		background: #eee;
+	.ck.playground button:last-child {
+		grid-area: 3 / 2 / 4 / 3;
 	}
+
 </style>
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
index 5395aafaab1..5cd958c90c9 100644
--- a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
@@ -29,14 +29,56 @@ function createPlainTextareaWithFixedRows() {
 	addToPlayground( '3 rows, fixed', textareaView );
 }
 
+function createPlainTextareaWithSingleRow() {
+	const textareaView = new TextareaView();
+
+	textareaView.minRows = 1;
+	textareaView.maxRows = 1;
+
+	addToPlayground( '1 row, fixed', textareaView );
+}
+
+function createPlainTextareaWithVerticalResizeOnly() {
+	const textareaView = new TextareaView();
+
+	textareaView.resize = 'vertical';
+
+	addToPlayground( 'Default rows, manual v-resize only', textareaView );
+}
+
+function createPlainTextareaWithNoResize() {
+	const textareaView = new TextareaView();
+
+	textareaView.resize = 'none';
+
+	addToPlayground( 'Default rows, no manual resize', textareaView );
+}
+
+function createPlainTextareaWithFixedSizeAndNoResize() {
+	const textareaView = new TextareaView();
+
+	textareaView.minRows = textareaView.maxRows = 3;
+	textareaView.resize = 'none';
+
+	addToPlayground( '3 fixed rows, no manual resize', textareaView );
+}
+
 function addToPlayground( name, view ) {
 	view.render();
 
 	const setLargeTextButton = new ButtonView();
+	const clearButton = new ButtonView();
 
+	view.value = 'Hello world!';
 	setLargeTextButton.label = 'Set large text';
 	setLargeTextButton.withText = true;
 	setLargeTextButton.render();
+	setLargeTextButton.class = 'ck-button-save';
+
+	clearButton.label = 'Clear';
+	clearButton.withText = true;
+	clearButton.render();
+	clearButton.class = 'ck-button-cancel';
 
 	setLargeTextButton.on( 'execute', () => {
 		view.value = '';
@@ -48,6 +90,10 @@ function addToPlayground( name, view ) {
 			' up and you’re left with your improvising skills. You learn to adapt as you go.';
 	} );
 
+	clearButton.on( 'execute', () => {
+		view.reset();
+	} );
+
 	const container = document.createElement( 'div' );
 	const heading = document.createElement( 'h2' );
 	heading.textContent = name;
@@ -55,9 +101,14 @@ function addToPlayground( name, view ) {
 	container.appendChild( heading );
 	container.appendChild( view.element! );
 	container.appendChild( setLargeTextButton.element! );
+	container.appendChild( clearButton.element! );
 	document.querySelector( '.playground' )!.appendChild( container );
 }
 
 createPlainTextarea();
 createPlainTextareaWithMoreRows();
 createPlainTextareaWithFixedRows();
+createPlainTextareaWithSingleRow();
+createPlainTextareaWithVerticalResizeOnly();
+createPlainTextareaWithNoResize();
+createPlainTextareaWithFixedSizeAndNoResize();
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
index 9d9abc489b0..c88a6c0ec99 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
@@ -43,7 +43,7 @@ describe( 'SearchTextQueryView', () => {
 				expect( clearButtonView ).to.be.instanceOf( ButtonView );
 				expect( clearButtonView.isVisible ).to.be.false;
 				expect( clearButtonView.tooltip ).to.be.true;
-				expect( clearButtonView.class ).to.equal( 'ck-search__clear-search' );
+				expect( clearButtonView.class ).to.equal( 'ck-search__reset' );
 				expect( clearButtonView.label ).to.equal( 'Clear' );
 				expect( clearButtonView.icon ).to.equal( icons.cancel );
 			} );
diff --git a/packages/ckeditor5-ui/theme/components/search/search.css b/packages/ckeditor5-ui/theme/components/search/search.css
index 542ff17d6f5..28c4ec1c90e 100644
--- a/packages/ckeditor5-ui/theme/components/search/search.css
+++ b/packages/ckeditor5-ui/theme/components/search/search.css
@@ -21,7 +21,7 @@
 			}
 		}
 
-		& .ck-search__clear-search {
+		& .ck-search__reset {
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);

From 186a583d8c56accb1932c481a9a70d943fa8cc87 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 13 Sep 2023 14:11:18 +0200
Subject: [PATCH 44/84] InputBase should have reset() method.

---
 packages/ckeditor5-ui/src/input/inputbase.ts              | 8 ++++++++
 .../ckeditor5-ui/src/search/text/searchtextqueryview.ts   | 5 +----
 packages/ckeditor5-ui/src/textarea/textareaview.ts        | 6 +++---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/ckeditor5-ui/src/input/inputbase.ts b/packages/ckeditor5-ui/src/input/inputbase.ts
index 9ffe6cac166..83251139e25 100644
--- a/packages/ckeditor5-ui/src/input/inputbase.ts
+++ b/packages/ckeditor5-ui/src/input/inputbase.ts
@@ -177,6 +177,14 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 		this.element!.focus();
 	}
 
+	/**
+	 * TODO
+	 */
+	public reset(): void {
+		this.value = this.element!.value = '';
+		this._updateIsEmpty();
+	}
+
 	/**
 	 * Updates the {@link #isEmpty} property value on demand.
 	 */
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index 42bc4e70aa6..a24d4c4dbb9 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -100,10 +100,7 @@ export default class SearchTextQueryView<
 	 * Resets the search field to its default state.
 	 */
 	public reset(): void {
-		// This addresses a bug in input value handling. The one-way binding between fieldView#value->fieldView.element#value
-		// does clear the value of the DOM element if fieldView#value was not previously set but the user typed in the input.
-		// (fieldView#value is '', text was typed in the input, resetting fieldView#value '' does not trigger #change in observable)
-		this.fieldView.value = this.fieldView.element!.value = '';
+		this.fieldView.reset();
 
 		if ( this._viewConfig.showResetButton ) {
 			this.clearButtonView!.isVisible = false;
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 0cf76622693..bcdb6445440 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -88,9 +88,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	/**
 	 * TODO
 	 */
-	public reset(): void {
-		this.value = this.element!.value = '';
-		this._updateIsEmpty();
+	public override reset(): void {
+		super.reset();
+
 		this._autoGrow();
 	}
 

From e2bba49a0e892c50f14382714b3e1b45d2426cf8 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 14 Sep 2023 09:53:42 +0200
Subject: [PATCH 45/84] Used 2 rows as min value for TextareaView. Code
 refactoring.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index bcdb6445440..ff75a41a01e 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -20,7 +20,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	 * Specifies the visible height of a text area, in lines.
 	 *
 	 * @observable
-	 * @default 1
+	 * @default 2
 	 */
 	declare public minRows: number;
 
@@ -36,17 +36,18 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	 * TODO
 	 *
 	 * @observable
-	 * @default null
-	 */
-	declare public height: number | null;
+	 * @default 'both'
+	*/
+	declare public resize: 'both' | 'horizontal' | 'vertical' | 'none';
 
 	/**
 	 * TODO
 	 *
 	 * @observable
-	 * @default 'both'
+	 * @default null
+	 * @internal
 	 */
-	declare public resize: 'both' | 'horizontal' | 'vertical' | 'none';
+	declare public _height: number | null;
 
 	/**
 	 * @inheritDoc
@@ -56,9 +57,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		const toPx = toUnit( 'px' );
 
-		this.set( 'minRows', 1 );
+		this.set( 'minRows', 2 );
 		this.set( 'maxRows', 5 );
-		this.set( 'height', null );
+		this.set( '_height', null );
 		this.set( 'resize', 'both' );
 
 		const bind = this.bindTemplate;
@@ -68,7 +69,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		this.extendTemplate( {
 			attributes: {
 				style: {
-					height: bind.to( 'height', height => height ? toPx( height ) : null ),
+					height: bind.to( '_height', height => height ? toPx( height ) : null ),
 					resize: bind.to( 'resize' )
 				},
 				rows: bind.to( 'minRows' )
@@ -117,7 +118,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		// This min-height is relevant only when there's one line of text. Other than that, we can rely on line-height.
 		const minHeight = numberOfLines === 1 ? singleLineAreaDefaultHeight : this.minRows * lineHeight + verticalPaddings + verticalBorder;
 
-		this.height = Math.min(
+		this._height = Math.min(
 			Math.max(
 				Math.max( numberOfLines, this.minRows ) * lineHeight + verticalPaddings + verticalBorder,
 				minHeight

From 3c486e98179a29f694ac90a62ca95ee5a54a42af Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 14 Sep 2023 11:07:20 +0200
Subject: [PATCH 46/84] Added min and max rows validation for TextareaView.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index ff75a41a01e..1e610f626fa 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,7 +7,7 @@
  * @module ui/textarea/textareaview
  */
 
-import { Rect, type Locale, toUnit, getBorderWidths } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths, CKEditorError } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
@@ -62,6 +62,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		this.set( '_height', null );
 		this.set( 'resize', 'both' );
 
+		this.on( 'change:minRows', this._validateMinMaxRows.bind( this ) );
+		this.on( 'change:maxRows', this._validateMinMaxRows.bind( this ) );
+
 		const bind = this.bindTemplate;
 
 		this.template!.tag = 'textarea';
@@ -133,6 +136,20 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		singleLineContentClone.remove();
 		fullTextValueClone.remove();
 	}
+
+	/**
+	 * TODO
+	 */
+	private _validateMinMaxRows() {
+		if ( this.minRows > this.maxRows ) {
+			/**
+			 * The minimum number of rows is greater than the maximum number of rows.
+			 *
+			 * @error ui-textarea-view-min-rows-greater-than-max-rows
+			 */
+			throw new CKEditorError( 'ui-textarea-view-min-rows-greater-than-max-rows', [ this ] );
+		}
+	}
 }
 
 function getElementClone( element: HTMLTextAreaElement, value: string ): HTMLTextAreaElement {

From fa5ab3663fb5a3035bb23dea3d8bbb40ce6489d0 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 14 Sep 2023 11:12:20 +0200
Subject: [PATCH 47/84] Used requestAnimationFrame instead of setTimeout for
 TextareaView auto grow feature.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 1e610f626fa..a928a8cc76c 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,7 +7,7 @@
  * @module ui/textarea/textareaview
  */
 
-import { Rect, type Locale, toUnit, getBorderWidths, CKEditorError } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths, CKEditorError, global } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
@@ -78,14 +78,21 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 				rows: bind.to( 'minRows' )
 			}
 		} );
+	}
+
+	/**
+	 * TODO
+	 */
+	public override render(): void {
+		super.render();
 
 		this.on( 'input', () => {
-			this._autoGrow( true );
+			this._updateAutoGrowHeight( true );
 		} );
 
 		this.on( 'change:value', () => {
 			// The content needs to be updated by the browser after the value is changed. It takes a few ms.
-			setTimeout( () => this._autoGrow(), 50 );
+			global.window.requestAnimationFrame( () => this._updateAutoGrowHeight() );
 		} );
 	}
 
@@ -95,16 +102,16 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	public override reset(): void {
 		super.reset();
 
-		this._autoGrow();
+		this._updateAutoGrowHeight();
 	}
 
 	/**
 	 * TODO
 	 */
-	private _autoGrow( shouldScroll?: boolean ): void {
+	private _updateAutoGrowHeight( shouldScroll?: boolean ): void {
 		const viewElement = this.element!;
-		const singleLineContentClone = getElementClone( viewElement, '1' );
-		const fullTextValueClone = getElementClone( viewElement, viewElement.value );
+		const singleLineContentClone = getTextareaElementClone( viewElement, '1' );
+		const fullTextValueClone = getTextareaElementClone( viewElement, viewElement.value );
 		const singleLineContentStyles = singleLineContentClone.ownerDocument.defaultView!.getComputedStyle( singleLineContentClone );
 
 		const verticalPaddings = parseFloat( singleLineContentStyles.paddingTop ) + parseFloat( singleLineContentStyles.paddingBottom );
@@ -152,7 +159,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 }
 
-function getElementClone( element: HTMLTextAreaElement, value: string ): HTMLTextAreaElement {
+function getTextareaElementClone( element: HTMLTextAreaElement, value: string ): HTMLTextAreaElement {
 	const clone = element.cloneNode() as HTMLTextAreaElement;
 
 	element.parentNode!.insertBefore( clone, element );

From a953142cc311298409f34bea06de2979d000d29b Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 14 Sep 2023 13:56:04 +0200
Subject: [PATCH 48/84] Tests and docs for resizable TextareaView.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts |  37 +++--
 .../tests/manual/textarea/textareaview.md     |   9 +-
 .../tests/textarea/textareaview.js            | 153 +++++++++++++++++-
 3 files changed, 181 insertions(+), 18 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index a928a8cc76c..89e19cb9b00 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,13 +7,24 @@
  * @module ui/textarea/textareaview
  */
 
-import { Rect, type Locale, toUnit, getBorderWidths, CKEditorError, global } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths, global } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
 
 /**
  * The textarea view class.
+ *
+ * ```ts
+ * const textareaView = new TextareaView();
+ *
+ * textareaView.minRows = 2;
+ * textareaView.maxRows = 10;
+ *
+ * textareaView.render();
+ *
+ * document.body.append( textareaView.element );
+ * ```
  */
 export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	/**
@@ -33,7 +44,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	declare public maxRows: number;
 
 	/**
-	 * TODO
+	 * Specifies the value of HTML attribute that indicates whether the user can resize the element.
 	 *
 	 * @observable
 	 * @default 'both'
@@ -41,7 +52,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	declare public resize: 'both' | 'horizontal' | 'vertical' | 'none';
 
 	/**
-	 * TODO
+	 * An internal property that stores the current height of the textarea. Used for the DOM binding.
 	 *
 	 * @observable
 	 * @default null
@@ -71,6 +82,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		this.extendTemplate( {
 			attributes: {
+				class: [ 'ck-textarea' ],
 				style: {
 					height: bind.to( '_height', height => height ? toPx( height ) : null ),
 					resize: bind.to( 'resize' )
@@ -81,7 +93,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
 	public override render(): void {
 		super.render();
@@ -97,7 +109,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 
 	/**
-	 * TODO
+	 * @inheritDoc
 	 */
 	public override reset(): void {
 		super.reset();
@@ -106,7 +118,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 
 	/**
-	 * TODO
+	 * Updates the {@link #height} of the view depending on {@link #minRows}, {@link #maxRows}, and the current content size.
+	 *
+	 * **Note**: This method overrides manual resize done by the user using a handle. It's a known bug.
 	 */
 	private _updateAutoGrowHeight( shouldScroll?: boolean ): void {
 		const viewElement = this.element!;
@@ -128,6 +142,8 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		// This min-height is relevant only when there's one line of text. Other than that, we can rely on line-height.
 		const minHeight = numberOfLines === 1 ? singleLineAreaDefaultHeight : this.minRows * lineHeight + verticalPaddings + verticalBorder;
 
+		// The size of textarea is controlled by height style instead of rows attribute because event though it is
+		// a more complex solution, it is immune to the layout textarea has been rendered in (gird, flex).
 		this._height = Math.min(
 			Math.max(
 				Math.max( numberOfLines, this.minRows ) * lineHeight + verticalPaddings + verticalBorder,
@@ -145,7 +161,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 
 	/**
-	 * TODO
+	 * Validates the {@link #minRows} and {@link #maxRows} properties and warns in the console if the configuration is incorrect.
 	 */
 	private _validateMinMaxRows() {
 		if ( this.minRows > this.maxRows ) {
@@ -153,8 +169,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 			 * The minimum number of rows is greater than the maximum number of rows.
 			 *
 			 * @error ui-textarea-view-min-rows-greater-than-max-rows
+			 * @param textareaView The misconfigured textarea view instance.
 			 */
-			throw new CKEditorError( 'ui-textarea-view-min-rows-greater-than-max-rows', [ this ] );
+			console.warn( 'ui-textarea-view-min-rows-greater-than-max-rows', { textareaView: this } );
 		}
 	}
 }
@@ -162,13 +179,9 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 function getTextareaElementClone( element: HTMLTextAreaElement, value: string ): HTMLTextAreaElement {
 	const clone = element.cloneNode() as HTMLTextAreaElement;
 
-	element.parentNode!.insertBefore( clone, element );
-
 	clone.style.position = 'absolute';
 	clone.style.top = '-99999px';
 	clone.style.left = '-99999px';
-	// clone.style.bottom = '10px';
-	// clone.style.left = '10px';
 	clone.style.height = 'auto';
 	clone.style.overflow = 'hidden';
 	clone.style.width = element.ownerDocument.defaultView!.getComputedStyle( element ).width;
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
index 464090415c4..4ed9c41deb8 100644
--- a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.md
@@ -1 +1,8 @@
-# TODO
+# `TextareaView`
+
+There's a number of different view configurations showcased in this test.
+
+1. Make sure the view resizes according to the configured min and max rows.
+2. Try removing all content. Or pasting a lot of content into each textarea.
+3. Try resizing textarea manually, it should act according to the description.
+	* **Known bug**: Typing in a once manually resized textarea will reset it's size.
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index c0de09ed10d..634295121f2 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -3,19 +3,31 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global console, document */
+
+import { global } from '@ckeditor/ckeditor5-utils';
 import TextareaView from '../../src/textarea/textareaview';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'TextareaView', () => {
-	let view;
+	let wrapper, view;
+
+	testUtils.createSinonSandbox();
 
 	beforeEach( () => {
-		view = new TextareaView();
+		// The reset wrapper is needed for proper line height calculation.
+		wrapper = document.createElement( 'div' );
+		wrapper.classList.add( 'ck', 'ck-reset_all' );
 
+		view = new TextareaView();
 		view.render();
+		wrapper.appendChild( view.element );
+		document.body.appendChild( wrapper );
 	} );
 
 	afterEach( () => {
 		view.destroy();
+		wrapper.remove();
 	} );
 
 	describe( 'constructor()', () => {
@@ -24,6 +36,121 @@ describe( 'TextareaView', () => {
 			expect( view.element.getAttribute( 'type' ) ).to.be.null;
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-textarea' ) ).to.be.true;
+		} );
+
+		it( 'should have default resize attribute value', () => {
+			expect( view.element.style.resize ).to.equal( 'both' );
+		} );
+
+		it( 'should warn if #minHeight is greater than #maxHeight', () => {
+			const warnSpy = testUtils.sinon.stub( console, 'warn' );
+
+			view.minRows = 2;
+			view.maxRows = 3;
+			sinon.assert.notCalled( warnSpy );
+
+			view.minRows = view.maxRows;
+			sinon.assert.notCalled( warnSpy );
+
+			view.minRows = 4;
+			sinon.assert.calledOnceWithMatch( warnSpy, 'ui-textarea-view-min-rows-greater-than-max-rows' );
+
+			view.maxRows = 5;
+			sinon.assert.calledOnceWithMatch( warnSpy, 'ui-textarea-view-min-rows-greater-than-max-rows' );
+		} );
+	} );
+
+	describe( 'reset()', () => {
+		it( 'should reset the #value of the view', () => {
+			view.value = 'foo';
+
+			view.reset();
+
+			expect( view.value ).to.equal( '' );
+		} );
+
+		it( 'should reset the value of the DOM #element', () => {
+			view.element.value = 'foo';
+
+			view.reset();
+
+			expect( view.element.value ).to.equal( '' );
+		} );
+
+		it( 'should update the size of the view', () => {
+			// TODO
+		} );
+	} );
+
+	describe( 'render()', () => {
+		it( 'should resize the view on the #input event and scroll to the end', async () => {
+			const initialHeight = view.element.style.height;
+			const initialScrollTop = view.element.scrollTop;
+
+			view.element.value = '1\n2\n3\n4\n5\n6';
+
+			expect( view.element.style.height ).to.equal( initialHeight );
+			expect( view.element.scrollTop ).to.equal( initialScrollTop );
+
+			view.fire( 'input' );
+
+			expect( view.element.style.height ).to.not.equal( initialHeight );
+			expect( view.element.scrollTop ).to.not.equal( initialScrollTop );
+		} );
+
+		it( 'should resize the view on the #value change using requestAnimationFrame to let the browser update the UI', async () => {
+			const initialHeight = view.element.style.height;
+
+			view.value = 'foo\nbar\nbaz\nqux';
+
+			expect( view.element.style.height ).to.equal( initialHeight );
+
+			await requestAnimationFrame();
+			expect( view.element.style.height ).to.not.equal( initialHeight );
+		} );
+
+		describe( 'dynamic resizing', () => {
+			it( 'should respect #minRows and #maxRows', async () => {
+				// One row, it's less than default #minRows.
+				view.value = '1';
+				await requestAnimationFrame();
+				const oneRowHeight = parseFloat( view.element.style.height );
+
+				// Two rows (default).
+				view.value = '1\n2';
+				await requestAnimationFrame();
+				const twoRowsHeight = parseFloat( view.element.style.height );
+				expect( twoRowsHeight ).to.equal( oneRowHeight );
+
+				// Three rows (more then default #minRows), resize again.
+				view.value = '1\n2\n3';
+				await requestAnimationFrame();
+				const threeRowsHeight = parseFloat( view.element.style.height );
+				expect( threeRowsHeight ).to.be.greaterThan( twoRowsHeight );
+
+				// Four rows.
+				view.value = '1\n2\n3\n4';
+				await requestAnimationFrame();
+				const fourRowsHeight = parseFloat( view.element.style.height );
+				expect( fourRowsHeight ).to.be.greaterThan( threeRowsHeight );
+
+				// Five rows (default #maxRows), this will be the max height.
+				view.value = '1\n2\n3\n4\n5';
+				await requestAnimationFrame();
+				const maxHeight = parseFloat( view.element.style.height );
+				expect( maxHeight ).to.be.greaterThan( fourRowsHeight );
+
+				// Six rows (more than #maxRows), the view is no longer growing.
+				view.value = '1\n2\n3\n4\n5\n6';
+				await requestAnimationFrame();
+				expect( parseFloat( view.element.style.height ) ).to.equal( maxHeight );
+
+				// Going back to #minRows
+				view.value = '1';
+				await requestAnimationFrame();
+				expect( parseFloat( view.element.style.height ) ).to.equal( twoRowsHeight );
+			} );
 		} );
 	} );
 
@@ -34,13 +161,29 @@ describe( 'TextareaView', () => {
 		} );
 
 		describe( 'rows attribute', () => {
-			it( 'should react on view#inputMode', () => {
-				expect( view.element.getAttribute( 'rows' ) ).to.equal( '1' );
+			it( 'should react on view#minRows', () => {
+				expect( view.element.getAttribute( 'rows' ) ).to.equal( '2' );
 
-				view.rows = 5;
+				view.minRows = 5;
 
 				expect( view.element.getAttribute( 'rows' ) ).to.equal( '5' );
 			} );
 		} );
+
+		describe( 'resize attribute', () => {
+			it( 'should react on view#reisze', () => {
+				expect( view.element.style.resize ).to.equal( 'both' );
+
+				view.resize = 'vertical';
+
+				expect( view.element.style.resize ).to.equal( 'vertical' );
+			} );
+		} );
 	} );
+
+	function requestAnimationFrame() {
+		return new Promise( res => {
+			global.window.requestAnimationFrame( res );
+		} );
+	}
 } );

From b9f623134307486875ca6192839d4fd804d13a44 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 14 Sep 2023 13:58:33 +0200
Subject: [PATCH 49/84] Documented and tested InputBase#reset().

---
 packages/ckeditor5-ui/src/input/inputbase.ts   |  2 +-
 packages/ckeditor5-ui/tests/input/inputbase.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/input/inputbase.ts b/packages/ckeditor5-ui/src/input/inputbase.ts
index 83251139e25..a24f5e93f15 100644
--- a/packages/ckeditor5-ui/src/input/inputbase.ts
+++ b/packages/ckeditor5-ui/src/input/inputbase.ts
@@ -178,7 +178,7 @@ export default abstract class InputBase<TElement extends HTMLInputElement | HTML
 	}
 
 	/**
-	 * TODO
+	 * Resets the value of the input
 	 */
 	public reset(): void {
 		this.value = this.element!.value = '';
diff --git a/packages/ckeditor5-ui/tests/input/inputbase.js b/packages/ckeditor5-ui/tests/input/inputbase.js
index c36faaf650f..15b362705d6 100644
--- a/packages/ckeditor5-ui/tests/input/inputbase.js
+++ b/packages/ckeditor5-ui/tests/input/inputbase.js
@@ -89,6 +89,18 @@ describe( 'InputBase', () => {
 		} );
 	} );
 
+	describe( 'reset()', () => {
+		it( 'should reset the #value and the DOM element\'s value too', () => {
+			view.value = 'foo';
+
+			view.reset();
+
+			expect( view.value ).to.equal( '' );
+			expect( view.element.value ).to.equal( '' );
+			expect( view.element.classList.contains( 'ck-input-text_empty' ) ).to.be.true;
+		} );
+	} );
+
 	describe( 'DOM bindings', () => {
 		beforeEach( () => {
 			view.value = 'foo';

From be780a5bf0c176cbe9a53d54df4d9492bd174108 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 15 Sep 2023 10:00:59 +0200
Subject: [PATCH 50/84] Docs and tests for the changes in the SearchView
 component.

---
 .../src/labeledfield/labeledfieldview.ts      |   8 +-
 .../src/search/text/searchtextqueryview.ts    |  36 +--
 .../src/search/text/searchtextview.ts         |  39 +--
 .../tests/autocomplete/autocompleteview.js    |   4 +-
 .../tests/search/text/searchtextqueryview.js  |  83 +++++--
 .../tests/search/text/searchtextview.js       | 234 +++++++++++-------
 6 files changed, 261 insertions(+), 143 deletions(-)

diff --git a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
index 902cb71775b..f3de3c76be9 100644
--- a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
@@ -179,7 +179,10 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 	 * * an UID string that connects the {@link #labelView label} and the labeled field view in DOM,
 	 * * an UID string that connects the {@link #statusView status} and the labeled field view in DOM.
 	 */
-	constructor( locale: Locale | undefined, viewCreator: LabeledFieldViewCreator<TFieldView> ) {
+	constructor(
+		locale: Locale | undefined,
+		viewCreator: LabeledFieldViewCreator<TFieldView>
+	) {
 		super( locale );
 
 		const viewUid = `ck-labeled-field-view-${ uid() }`;
@@ -294,7 +297,8 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 }
 
 /**
- * TODO
+ * A creator function that returns a focusable view to be labeled by a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+ * instance.
  */
 export type LabeledFieldViewCreator<TFieldView extends FocusableView> =
 	( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => TFieldView;
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index a24d4c4dbb9..08e487a8a5d 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -28,17 +28,17 @@ export default class SearchTextQueryView<
 	/**
 	 * The loupe icon displayed next to the {@link #fieldView}.
 	 */
-	public loupeIconView?: IconView;
+	public iconView?: IconView;
 
 	/**
 	 * The button that clears and focuses the {@link #fieldView}.
 	 */
-	public clearButtonView?: ButtonView;
+	public resetButtonView?: ButtonView;
 
 	/**
-	 * TODO
+	 * A reference to the view configuration.
 	 */
-	private _viewConfig: SearchTextQueryViewConfig<TQueryFieldView>;
+	private readonly _viewConfig: SearchTextQueryViewConfig<TQueryFieldView>;
 
 	/**
 	 * @inheritDoc
@@ -57,9 +57,9 @@ export default class SearchTextQueryView<
 		this._viewConfig = viewConfig;
 
 		if ( this._viewConfig.showIcon ) {
-			this.loupeIconView = new IconView();
-			this.loupeIconView.content = icons.loupe;
-			this.fieldWrapperChildren.add( this.loupeIconView, 0 );
+			this.iconView = new IconView();
+			this.iconView.content = icons.loupe;
+			this.fieldWrapperChildren.add( this.iconView, 0 );
 
 			this.extendTemplate( {
 				attributes: {
@@ -69,8 +69,8 @@ export default class SearchTextQueryView<
 		}
 
 		if ( this._viewConfig.showResetButton ) {
-			this.clearButtonView = new ButtonView( locale );
-			this.clearButtonView.set( {
+			this.resetButtonView = new ButtonView( locale );
+			this.resetButtonView.set( {
 				label: t( 'Clear' ),
 				icon: icons.cancel,
 				class: 'ck-search__reset',
@@ -78,15 +78,15 @@ export default class SearchTextQueryView<
 				tooltip: true
 			} );
 
-			this.clearButtonView.on( 'execute', () => {
+			this.resetButtonView.on( 'execute', () => {
 				this.reset();
 				this.focus();
 				this.fire<SearchTextQueryViewResetEvent>( 'reset' );
 			} );
 
-			this.clearButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
+			this.resetButtonView.bind( 'isVisible' ).to( this.fieldView, 'isEmpty', isEmpty => !isEmpty );
 
-			this.fieldWrapperChildren.add( this.clearButtonView );
+			this.fieldWrapperChildren.add( this.resetButtonView );
 
 			this.extendTemplate( {
 				attributes: {
@@ -103,7 +103,7 @@ export default class SearchTextQueryView<
 		this.fieldView.reset();
 
 		if ( this._viewConfig.showResetButton ) {
-			this.clearButtonView!.isVisible = false;
+			this.resetButtonView!.isVisible = false;
 		}
 	}
 }
@@ -120,7 +120,7 @@ export type SearchTextQueryViewResetEvent = {
 };
 
 /**
- * TODO
+ * The configuration of the {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView} view.
  */
 export interface SearchTextQueryViewConfig<TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>> {
 
@@ -130,12 +130,16 @@ export interface SearchTextQueryViewConfig<TConfigSearchField extends InputBase<
 	label: string;
 
 	/**
-	 * TODO
+	 * Determines whether the button that resets the search should be visible.
+	 *
+	 * @default true
 	 */
 	showResetButton?: boolean;
 
 	/**
-	 * TODO
+	 * Determines whether the loupe icon should be visible.
+	 *
+	 * @default true
 	 */
 	showIcon?: boolean;
 
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 10dc9336d00..6e632293daf 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -14,6 +14,7 @@ import SearchInfoView from '../searchinfoview';
 import SearchResultsView from '../searchresultsview';
 import FocusCycler from '../../focuscycler';
 import { escapeRegExp } from 'lodash-es';
+
 import type FilteredView from '../filteredview';
 import type ViewCollection from '../../viewcollection';
 import type InputBase from '../../input/inputbase';
@@ -77,25 +78,33 @@ export default class SearchTextView<
 	public queryView: SearchTextQueryView<TQueryFieldView>;
 
 	/**
-	 * A collection of views that are children of the search view.
-	 */
-	public children: ViewCollection;
-
-	/**
-	 * TODO
+	 * Controls whether the component is in read-only mode.
+	 *
+	 * @default true
 	 */
 	declare public isEnabled: boolean;
 
 	/**
-	 * TODO
+	 * The number of results found for the current search query. Updated upon the {@link #search} event.
+	 *
+	 * @default 0
 	 */
 	declare public resultsCount: number;
 
 	/**
-	 * TODO
+	 * The number of the items that can be searched in the {@link #filteredView}. Updated upon the {@link #search} event.
+	 *
+	 * @default 0
 	 */
 	declare public totalItemsCount: number;
 
+	/**
+	 * The collection of children of the view.
+	 *
+	 * @readonly
+	 */
+	declare public readonly children: ViewCollection;
+
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
 	 *
@@ -121,14 +130,14 @@ export default class SearchTextView<
 
 		this._config = config;
 
-		this.set( 'isEnabled', true );
-
 		this.filteredView = config.filteredView;
 		this.queryView = this._createSearchTextQueryView();
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 		this.children = this.createCollection();
+
+		this.set( 'isEnabled', true );
 		this.set( 'resultsCount', 0 );
 		this.set( 'totalItemsCount', 0 );
 
@@ -186,7 +195,10 @@ export default class SearchTextView<
 	public override render(): void {
 		super.render();
 
-		this.children.addMany( [ this.queryView, this.resultsView ] );
+		this.children.addMany( [
+			this.queryView,
+			this.resultsView
+		] );
 
 		const stopPropagation = ( data: Event ) => data.stopPropagation();
 
@@ -300,7 +312,7 @@ export default class SearchTextView<
 export interface SearchTextViewConfig<TConfigSearchField extends InputBase<HTMLInputElement | HTMLTextAreaElement>> {
 
 	/**
-	 * TODO
+	 * The configuration of the view's query field.
 	 */
 	queryView: SearchTextQueryViewConfig<TConfigSearchField>;
 
@@ -310,7 +322,7 @@ export interface SearchTextViewConfig<TConfigSearchField extends InputBase<HTMLI
 	filteredView: FilteredView;
 
 	/**
-	 * TODO
+	 * The view that displays the information about the search results.
 	 */
 	infoView?: {
 
@@ -344,7 +356,6 @@ export interface SearchTextViewConfig<TConfigSearchField extends InputBase<HTMLI
 	 * The custom CSS class name to be added to the search view element.
 	 */
 	class?: string;
-
 }
 
 /**
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index 17ddc94ba21..7dadee09b0e 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -30,7 +30,9 @@ describe( 'AutocompleteView', () => {
 
 		view = new AutocompleteView( new Locale(), {
 			filteredView,
-			searchFieldLabel: 'test label'
+			queryView: {
+				label: 'test label'
+			}
 		} );
 
 		view.render();
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
index c88a6c0ec99..f1f1f2bc34d 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextqueryview.js
@@ -18,7 +18,11 @@ describe( 'SearchTextQueryView', () => {
 	beforeEach( () => {
 		locale = new Locale();
 
-		view = new SearchTextQueryView( locale, createLabeledInputText, 'Test' );
+		view = new SearchTextQueryView( locale, {
+			creator: createLabeledInputText,
+			label: 'Test'
+		} );
+
 		view.render();
 	} );
 
@@ -35,23 +39,23 @@ describe( 'SearchTextQueryView', () => {
 			expect( view.label ).to.equal( 'Test' );
 		} );
 
-		describe( 'clear value button', () => {
-			it( 'should be created', () => {
-				const clearButtonView = view.fieldWrapperChildren.last;
-
-				expect( clearButtonView ).to.equal( view.clearButtonView );
-				expect( clearButtonView ).to.be.instanceOf( ButtonView );
-				expect( clearButtonView.isVisible ).to.be.false;
-				expect( clearButtonView.tooltip ).to.be.true;
-				expect( clearButtonView.class ).to.equal( 'ck-search__reset' );
-				expect( clearButtonView.label ).to.equal( 'Clear' );
-				expect( clearButtonView.icon ).to.equal( icons.cancel );
+		describe( 'reset value button', () => {
+			it( 'should be created by default', () => {
+				const resetButtonView = view.fieldWrapperChildren.last;
+
+				expect( resetButtonView ).to.equal( view.resetButtonView );
+				expect( resetButtonView ).to.be.instanceOf( ButtonView );
+				expect( resetButtonView.isVisible ).to.be.false;
+				expect( resetButtonView.tooltip ).to.be.true;
+				expect( resetButtonView.class ).to.equal( 'ck-search__reset' );
+				expect( resetButtonView.label ).to.equal( 'Clear' );
+				expect( resetButtonView.icon ).to.equal( icons.cancel );
 			} );
 
 			it( 'should reset the search field value upon #execute', () => {
 				const resetSpy = testUtils.sinon.spy( view, 'reset' );
 
-				view.clearButtonView.fire( 'execute' );
+				view.resetButtonView.fire( 'execute' );
 
 				sinon.assert.calledOnce( resetSpy );
 			} );
@@ -59,17 +63,17 @@ describe( 'SearchTextQueryView', () => {
 			it( 'should focus the field view upon #execute', () => {
 				const focusSpy = testUtils.sinon.spy( view, 'focus' );
 
-				view.clearButtonView.fire( 'execute' );
+				view.resetButtonView.fire( 'execute' );
 
 				sinon.assert.calledOnce( focusSpy );
 			} );
 
 			it( 'should get hidden upon #execute', () => {
-				view.clearButtonView.isVisible = true;
+				view.resetButtonView.isVisible = true;
 
-				view.clearButtonView.fire( 'execute' );
+				view.resetButtonView.fire( 'execute' );
 
-				expect( view.clearButtonView.isVisible ).to.be.false;
+				expect( view.resetButtonView.isVisible ).to.be.false;
 			} );
 
 			it( 'should fire the #reset event upon #execute', () => {
@@ -77,18 +81,47 @@ describe( 'SearchTextQueryView', () => {
 
 				view.on( 'reset', spy );
 
-				view.clearButtonView.fire( 'execute' );
+				view.resetButtonView.fire( 'execute' );
 
 				sinon.assert.calledOnce( spy );
 			} );
+
+			it( 'should be possible to hide using view\'s configuration', () => {
+				const view = new SearchTextQueryView( locale, {
+					creator: createLabeledInputText,
+					label: 'Test',
+					showResetButton: false
+				} );
+
+				expect( view.resetButtonView ).to.be.undefined;
+				expect( view.fieldWrapperChildren.last ).to.equal( view.labelView );
+
+				view.destroy();
+			} );
 		} );
 
-		it( 'should have the loupe icon', () => {
-			const loupeIconView = view.fieldWrapperChildren.first;
+		describe( 'icon', () => {
+			it( 'should be added to the view by default', () => {
+				const iconView = view.fieldWrapperChildren.first;
 
-			expect( loupeIconView ).to.equal( view.loupeIconView );
-			expect( loupeIconView ).to.be.instanceOf( IconView );
-			expect( loupeIconView.content ).to.equal( icons.loupe );
+				expect( view.iconView ).to.equal( iconView );
+				expect( iconView ).to.equal( view.iconView );
+				expect( iconView ).to.be.instanceOf( IconView );
+				expect( iconView.content ).to.equal( icons.loupe );
+			} );
+
+			it( 'should be possible to hide using view\'s configuration', () => {
+				const view = new SearchTextQueryView( locale, {
+					creator: createLabeledInputText,
+					label: 'Test',
+					showIcon: false
+				} );
+
+				expect( view.iconView ).to.be.undefined;
+				expect( view.fieldWrapperChildren.first ).to.equal( view.fieldView );
+
+				view.destroy();
+			} );
 		} );
 
 		describe( '#input event', () => {
@@ -96,12 +129,12 @@ describe( 'SearchTextQueryView', () => {
 				view.fieldView.value = 'foo';
 				view.fieldView.fire( 'input' );
 
-				expect( view.clearButtonView.isVisible ).to.be.true;
+				expect( view.resetButtonView.isVisible ).to.be.true;
 
 				view.fieldView.value = '';
 				view.fieldView.fire( 'input' );
 
-				expect( view.clearButtonView.isVisible ).to.be.false;
+				expect( view.resetButtonView.isVisible ).to.be.false;
 			} );
 		} );
 	} );
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index 9eec6518268..f29f4bd5f0a 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -15,6 +15,7 @@ import {
 	SearchInfoView,
 	SearchTextView,
 	View,
+	ViewCollection,
 	createLabeledInputNumber
 } from '../../../src';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
@@ -37,7 +38,9 @@ describe( 'SearchTextView', () => {
 
 		view = new SearchTextView( new Locale(), {
 			filteredView,
-			searchFieldLabel: 'test label'
+			queryView: {
+				label: 'test label'
+			}
 		} );
 
 		view.render();
@@ -61,7 +64,9 @@ describe( 'SearchTextView', () => {
 		it( 'supports extra CSS class in the config', () => {
 			const view = new SearchTextView( new Locale(), {
 				filteredView,
-				searchFieldLabel: 'foo',
+				queryView: {
+					label: 'foo'
+				},
 				class: 'bar'
 			} );
 
@@ -98,69 +103,26 @@ describe( 'SearchTextView', () => {
 			expect( view.resultsView.children.last ).to.equal( filteredView );
 		} );
 
-		describe( 'focus tracking and cycling', () => {
-			describe( 'activates keyboard navigation', () => {
-				it( 'makes "tab" focus the next focusable item', () => {
-					const keyEvtData = {
-						keyCode: keyCodes.tab,
-						preventDefault: sinon.spy(),
-						stopPropagation: sinon.spy()
-					};
-
-					// Mock the query input is focused.
-					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view.queryView.element;
-
-					const spy = sinon.spy( filteredView, 'focus' );
-
-					view.keystrokes.press( keyEvtData );
-					sinon.assert.calledOnce( keyEvtData.preventDefault );
-					sinon.assert.calledOnce( keyEvtData.stopPropagation );
-					sinon.assert.calledOnce( spy );
-				} );
-
-				it( 'makes "shift + tab" focus the previous focusable item', () => {
-					const keyEvtData = {
-						keyCode: keyCodes.tab,
-						shiftKey: true,
-						preventDefault: sinon.spy(),
-						stopPropagation: sinon.spy()
-					};
-
-					// Mock the results are focused.
-					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = filteredView.element;
-
-					const spy = sinon.spy( view.queryView, 'focus' );
-
-					view.keystrokes.press( keyEvtData );
-					sinon.assert.calledOnce( keyEvtData.preventDefault );
-					sinon.assert.calledOnce( keyEvtData.stopPropagation );
-					sinon.assert.calledOnce( spy );
-				} );
-			} );
+		it( 'sets #resultsCount', () => {
+			expect( view.resultsCount ).to.equal( 1 );
+		} );
 
-			it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {
-				const keyEvtData = {
-					stopPropagation: sinon.spy()
-				};
+		it( 'sets #totalItemsCount', () => {
+			expect( view.totalItemsCount ).to.equal( 5 );
+		} );
 
-				keyEvtData.keyCode = keyCodes.arrowdown;
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+		it( 'should update #resultsCount and #totalItemsCount upon #search event', () => {
+			expect( view.resultsCount ).to.equal( 1 );
+			expect( view.totalItemsCount ).to.equal( 5 );
 
-				keyEvtData.keyCode = keyCodes.arrowup;
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledTwice( keyEvtData.stopPropagation );
+			view.fire( 'search', { resultsCount: 5, totalItemsCount: 10 } );
 
-				keyEvtData.keyCode = keyCodes.arrowleft;
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledThrice( keyEvtData.stopPropagation );
+			expect( view.resultsCount ).to.equal( 5 );
+			expect( view.totalItemsCount ).to.equal( 10 );
+		} );
 
-				keyEvtData.keyCode = keyCodes.arrowright;
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
-			} );
+		it( 'should have #children view collection', () => {
+			expect( view.children ).to.be.instanceOf( ViewCollection );
 		} );
 
 		describe( '#queryView', () => {
@@ -173,8 +135,10 @@ describe( 'SearchTextView', () => {
 			it( 'gets created by a custom view creator configured by the user', () => {
 				const view = new SearchTextView( new Locale(), {
 					filteredView,
-					searchFieldInputCreator: createLabeledInputNumber,
-					searchFieldLabel: 'foo',
+					queryView: {
+						label: 'foo',
+						creator: createLabeledInputNumber
+					},
 					class: 'bar'
 				} );
 
@@ -201,6 +165,14 @@ describe( 'SearchTextView', () => {
 
 				sinon.assert.calledOnce( spy );
 			} );
+
+			it( 'should be bound to #isEnabled', () => {
+				expect( view.queryView.isEnabled ).to.be.true;
+
+				view.isEnabled = false;
+
+				expect( view.queryView.isEnabled ).to.be.false;
+			} );
 		} );
 
 		describe( '#infoView', () => {
@@ -216,7 +188,9 @@ describe( 'SearchTextView', () => {
 
 				view = new SearchTextView( new Locale(), {
 					filteredView,
-					searchFieldLabel: 'test label'
+					queryView: {
+						label: 'test label'
+					}
 				} );
 
 				view.render();
@@ -244,7 +218,9 @@ describe( 'SearchTextView', () => {
 
 					const view = new SearchTextView( new Locale(), {
 						filteredView,
-						searchFieldLabel: 'test label'
+						queryView: {
+							label: 'test label'
+						}
 					} );
 
 					view.render();
@@ -267,7 +243,9 @@ describe( 'SearchTextView', () => {
 
 					const view = new SearchTextView( new Locale(), {
 						filteredView,
-						searchFieldLabel: 'test label'
+						queryView: {
+							label: 'test label'
+						}
 					} );
 
 					view.render();
@@ -289,15 +267,19 @@ describe( 'SearchTextView', () => {
 
 					const view = new SearchTextView( new Locale(), {
 						filteredView,
-						searchFieldLabel: 'test label',
-						infoViewTextConfig: {
-							notFound: {
-								primary: 'foo',
-								secondary: 'bar'
-							},
-							noSearchableItems: {
-								primary: 'baz',
-								secondary: 'qux'
+						queryView: {
+							label: 'test label'
+						},
+						infoView: {
+							text: {
+								notFound: {
+									primary: 'foo',
+									secondary: 'bar'
+								},
+								noSearchableItems: {
+									primary: 'baz',
+									secondary: 'qux'
+								}
 							}
 						}
 					} );
@@ -337,15 +319,19 @@ describe( 'SearchTextView', () => {
 
 					const view = new SearchTextView( new Locale(), {
 						filteredView,
-						searchFieldLabel: 'test label',
-						infoViewTextConfig: {
-							notFound: {
-								primary: dynamicLabelText,
-								secondary: dynamicLabelText
-							},
-							noSearchableItems: {
-								primary: dynamicLabelText,
-								secondary: dynamicLabelText
+						queryView: {
+							label: 'test label'
+						},
+						infoView: {
+							text: {
+								notFound: {
+									primary: dynamicLabelText,
+									secondary: dynamicLabelText
+								},
+								noSearchableItems: {
+									primary: dynamicLabelText,
+									secondary: dynamicLabelText
+								}
 							}
 						}
 					} );
@@ -384,8 +370,12 @@ describe( 'SearchTextView', () => {
 
 				const view = new SearchTextView( new Locale(), {
 					filteredView,
-					searchFieldLabel: 'test label',
-					infoView: customInfoView
+					queryView: {
+						label: 'test label'
+					},
+					infoView: {
+						instance: customInfoView
+					}
 				} );
 
 				view.render();
@@ -399,6 +389,80 @@ describe( 'SearchTextView', () => {
 		} );
 	} );
 
+	describe( 'render()', () => {
+		describe( 'focus tracking and cycling', () => {
+			describe( 'activates keyboard navigation', () => {
+				it( 'makes "tab" focus the next focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the query input is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.queryView.element;
+
+					const spy = sinon.spy( filteredView, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'makes "shift + tab" focus the previous focusable item', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the results are focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = filteredView.element;
+
+					const spy = sinon.spy( view.queryView, 'focus' );
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+			} );
+
+			it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {
+				const keyEvtData = {
+					stopPropagation: sinon.spy()
+				};
+
+				keyEvtData.keyCode = keyCodes.arrowdown;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledOnce( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowup;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledTwice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowleft;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.calledThrice( keyEvtData.stopPropagation );
+
+				keyEvtData.keyCode = keyCodes.arrowright;
+				view.keystrokes.press( keyEvtData );
+				sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
+			} );
+		} );
+
+		it( 'should add #queryView and #resultsView to the #children view collection', () => {
+			expect( view.children.map( child => child ) ).to.deep.equal( [ view.queryView, view.resultsView ] );
+
+			expect( view.element.firstChild ).to.equal( view.queryView.element );
+			expect( view.element.lastChild ).to.equal( view.resultsView.element );
+		} );
+	} );
+
 	describe( 'focus()', () => {
 		it( 'focuses the #queryView', () => {
 			const spy = sinon.spy( view.queryView, 'focus' );

From 6f90e5fab8cd6d3621ac04cdc46e8d645ebef2ba Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 15 Sep 2023 10:26:25 +0200
Subject: [PATCH 51/84] Tests and docs for changes in AutocompleteView.

---
 .../src/autocomplete/autocompleteview.ts      |  10 +-
 .../tests/autocomplete/autocompleteview.js    | 130 +++++++++++++++++-
 2 files changed, 130 insertions(+), 10 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index a616836423d..765fb3ed968 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -28,6 +28,8 @@ export default class AutocompleteView<
 	constructor( locale: Locale, config: AutocompleteViewConfig<TQueryFieldView> ) {
 		super( locale, config );
 
+		this._config = config;
+
 		const toPx = toUnit( 'px' );
 
 		this.extendTemplate( {
@@ -43,8 +45,6 @@ export default class AutocompleteView<
 		resultsView.set( '_position', 's' );
 		resultsView.set( '_width', 0 );
 
-		this._config = config;
-
 		resultsView.extendTemplate( {
 			attributes: {
 				class: [
@@ -110,7 +110,7 @@ export default class AutocompleteView<
 	}
 
 	/**
-	 * TODO
+	 * Updates the visibility of the results view on demand.
 	 */
 	private _updateResultsVisibility() {
 		const resultsView = ( this.resultsView as AutocompleteResultsView );
@@ -169,7 +169,7 @@ export interface AutocompleteResultsView extends SearchResultsView {
 	_position: string;
 
 	/**
-	 * TODO
+	 * The observable property determining the CSS width of the results view.
 	 *
 	 * @internal
 	 */
@@ -187,6 +187,8 @@ export interface AutocompleteViewConfig<
 
 	/**
 	 * Minimum number of characters that need to be typed before the search is performed.
+	 *
+	 * @default 0
 	 */
 	queryMinChars?: number;
 }
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index 7dadee09b0e..47f2f403ff2 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -12,7 +12,7 @@ import {
 } from '../../src';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import { Rect, global } from '@ckeditor/ckeditor5-utils';
+import { Rect, global, keyCodes } from '@ckeditor/ckeditor5-utils';
 
 describe( 'AutocompleteView', () => {
 	let view, filteredView;
@@ -96,6 +96,99 @@ describe( 'AutocompleteView', () => {
 				expect( view.resultsView._position ).to.equal( 's' );
 			} );
 
+			it( 'should hide the results view upon pressing esc', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.esc,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				view.resultsView.isVisible = true;
+
+				view.keystrokes.press( keyEvtData );
+
+				expect( view.resultsView.isVisible ).to.be.false;
+			} );
+
+			it( 'should hide the results upon disabling the view', () => {
+				view.resultsView.isVisible = true;
+
+				view.isEnabled = false;
+
+				expect( view.resultsView.isVisible ).to.be.false;
+			} );
+
+			it( 'should not display the results upon searching if the query is shorter than configured #queryMinChars', () => {
+				const view = new AutocompleteView( new Locale(), {
+					filteredView,
+					queryMinChars: 3,
+					queryView: {
+						label: 'test label'
+					}
+				} );
+
+				view.render();
+				document.body.appendChild( view.element );
+				view.focusTracker.isFocused = true;
+
+				expect( view.resultsView.isVisible ).to.be.false;
+
+				view.queryView.fieldView.value = 'a';
+				view.fire( 'search', { query: 'a', resultsCount: 1, totalItemsCount: 5 } );
+				expect( view.resultsView.isVisible ).to.be.false;
+
+				view.queryView.fieldView.value = 'ab';
+				view.fire( 'search', { query: 'ab', resultsCount: 1, totalItemsCount: 5 } );
+				expect( view.resultsView.isVisible ).to.be.false;
+
+				view.queryView.fieldView.value = 'abc';
+				view.fire( 'search', { query: 'abc', resultsCount: 1, totalItemsCount: 5 } );
+				expect( view.resultsView.isVisible ).to.be.true;
+
+				view.destroy();
+				view.element.remove();
+			} );
+
+			it( 'should update view position, width, and visibility upon #search event', () => {
+				const view = new AutocompleteView( new Locale(), {
+					filteredView,
+					queryMinChars: 3,
+					queryView: {
+						label: 'test label'
+					}
+				} );
+
+				view.render();
+				document.body.appendChild( view.element );
+				expect( view.resultsView.isVisible ).to.be.false;
+
+				view.queryView.fieldView.value = 'abc';
+				view.focusTracker.isFocused = true;
+				expect( view.resultsView.isVisible ).to.be.true;
+
+				testUtils.sinon.stub( AutocompleteView, '_getOptimalPosition' ).returns( { name: 'foo' } );
+				testUtils.sinon.stub( view.queryView.fieldView.element, 'getBoundingClientRect' ).returns( { width: '1234' } );
+
+				// Query too short.
+				view.queryView.fieldView.value = 'a';
+				view.fire( 'search', { query: 'a', resultsCount: 1, totalItemsCount: 5 } );
+
+				expect( view.resultsView.isVisible ).to.be.false;
+				expect( view.resultsView.element.classList.contains( 'ck-search__results_foo' ) ).to.be.false;
+				expect( view.resultsView.element.style.width ).to.not.equal( '1234px' );
+
+				// Query long enough.
+				view.queryView.fieldView.value = 'abcd';
+				view.fire( 'search', { query: 'abcd', resultsCount: 1, totalItemsCount: 5 } );
+
+				expect( view.resultsView.isVisible ).to.be.true;
+				expect( view.resultsView.element.classList.contains( 'ck-search__results_foo' ) ).to.be.true;
+				expect( view.resultsView.element.style.width ).to.equal( '1234px' );
+
+				view.destroy();
+				view.element.remove();
+			} );
+
 			describe( '#defaultResultsPositions', () => {
 				it( 'should be able to position results above the search field (north)', () => {
 					const northPositioningFunction = AutocompleteView.defaultResultsPositions[ 0 ];
@@ -139,13 +232,38 @@ describe( 'AutocompleteView', () => {
 				expect( view.resultsView._position ).to.equal( 's' );
 			} );
 
-			it( 'resets the view when blurred', () => {
-				const resetSpy = sinon.spy( view.queryView, 'reset' );
+			describe( 'reset on blur', () => {
+				it( 'resets the view when blurred if configured to do so', () => {
+					const view = new AutocompleteView( new Locale(), {
+						filteredView,
+						resetOnBlur: true,
+						queryView: {
+							label: 'test label'
+						}
+					} );
 
-				view.focusTracker.isFocused = true;
-				view.focusTracker.isFocused = false;
+					view.render();
+					document.body.appendChild( view.element );
+
+					const resetSpy = sinon.spy( view.queryView, 'reset' );
+
+					view.focusTracker.isFocused = true;
+					view.focusTracker.isFocused = false;
 
-				sinon.assert.calledOnce( resetSpy );
+					sinon.assert.calledOnce( resetSpy );
+
+					view.destroy();
+					view.element.remove();
+				} );
+
+				it( 'does not reset the view when blurred if not configured', () => {
+					const resetSpy = sinon.spy( view.queryView, 'reset' );
+
+					view.focusTracker.isFocused = true;
+					view.focusTracker.isFocused = false;
+
+					sinon.assert.notCalled( resetSpy );
+				} );
 			} );
 		} );
 	} );

From 371694411a0e2b9f00144118e99c8b67f8779ca3 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 15 Sep 2023 10:34:55 +0200
Subject: [PATCH 52/84] Docs.

---
 packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts | 2 +-
 packages/ckeditor5-ui/src/textarea/textareaview.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index 08e487a8a5d..46bdeded418 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -110,7 +110,7 @@ export default class SearchTextQueryView<
 
 /**
  * An event fired when the field is reset using the
- * {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView#clearButtonView}.
+ * {@link module:ui/search/text/searchtextqueryview~SearchTextQueryView#resetButtonView}.
  *
  * @eventName ~SearchTextQueryView#reset
  */
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 89e19cb9b00..fcabd633c58 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -118,7 +118,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	}
 
 	/**
-	 * Updates the {@link #height} of the view depending on {@link #minRows}, {@link #maxRows}, and the current content size.
+	 * Updates the {@link #_height} of the view depending on {@link #minRows}, {@link #maxRows}, and the current content size.
 	 *
 	 * **Note**: This method overrides manual resize done by the user using a handle. It's a known bug.
 	 */

From 30f88ca81bcecc59e9b3481acf372305c2c3601b Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 15 Sep 2023 14:33:21 +0200
Subject: [PATCH 53/84] Allowed passing an icon to the FormHeaderView
 component.

---
 .../src/formheader/formheaderview.ts          | 19 +++++++++++++-
 .../tests/formheader/formheaderview.js        | 25 +++++++++++++++++++
 .../components/formheader/formheader.css      |  8 ++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/formheader/formheaderview.ts b/packages/ckeditor5-ui/src/formheader/formheaderview.ts
index 540842db7a2..50d39abc6f1 100644
--- a/packages/ckeditor5-ui/src/formheader/formheaderview.ts
+++ b/packages/ckeditor5-ui/src/formheader/formheaderview.ts
@@ -9,6 +9,7 @@
 
 import View from '../view';
 import type ViewCollection from '../viewcollection';
+import IconView from '../icon/iconview';
 
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 
@@ -47,6 +48,11 @@ export default class FormHeaderView extends View {
 	 */
 	public declare class: string | null;
 
+	/**
+	 * The icon view instance. Defined only if icon was passed in the constructor's options.
+	 */
+	public readonly iconView?: IconView;
+
 	/**
 	 * Creates an instance of the form header class.
 	 *
@@ -56,7 +62,11 @@ export default class FormHeaderView extends View {
 	 */
 	constructor(
 		locale: Locale | undefined,
-		options: { label?: string | null; class?: string | null } = {}
+		options: {
+			label?: string | null;
+			class?: string | null;
+			icon?: string | null;
+		} = {}
 	) {
 		super( locale );
 
@@ -79,6 +89,13 @@ export default class FormHeaderView extends View {
 			children: this.children
 		} );
 
+		if ( options.icon ) {
+			this.iconView = new IconView();
+			this.iconView.content = options.icon;
+
+			this.children.add( this.iconView );
+		}
+
 		const label = new View( locale );
 
 		label.setTemplate( {
diff --git a/packages/ckeditor5-ui/tests/formheader/formheaderview.js b/packages/ckeditor5-ui/tests/formheader/formheaderview.js
index b84d7181728..51f3ca53aef 100644
--- a/packages/ckeditor5-ui/tests/formheader/formheaderview.js
+++ b/packages/ckeditor5-ui/tests/formheader/formheaderview.js
@@ -6,6 +6,9 @@
 import View from '../../src/view';
 import ViewCollection from '../../src/viewcollection';
 import FormHeaderView from '../../src/formheader/formheaderview';
+import { IconView } from '../../src';
+
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 
 describe( 'FormHeaderView', () => {
 	let view, locale;
@@ -70,6 +73,28 @@ describe( 'FormHeaderView', () => {
 
 				view.destroy();
 			} );
+
+			it( 'should allow passing an icon', () => {
+				const view = new FormHeaderView( locale, {
+					label: 'foo',
+					icon: checkIcon
+				} );
+
+				view.render();
+
+				expect( view.element.lastChild.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.lastChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
+				expect( view.element.lastChild.textContent ).to.equal( 'foo' );
+
+				expect( view.element.firstChild.classList.contains( 'ck' ) ).to.be.true;
+				expect( view.element.firstChild.classList.contains( 'ck-icon' ) ).to.be.true;
+
+				expect( view.iconView ).to.be.instanceOf( IconView );
+				expect( view.iconView.content ).to.equal( checkIcon );
+				expect( view.iconView.element ).to.equal( view.element.firstChild );
+
+				view.destroy();
+			} );
 		} );
 
 		describe( 'template bindings', () => {
diff --git a/packages/ckeditor5-ui/theme/components/formheader/formheader.css b/packages/ckeditor5-ui/theme/components/formheader/formheader.css
index 930f3d11681..bb85138701e 100644
--- a/packages/ckeditor5-ui/theme/components/formheader/formheader.css
+++ b/packages/ckeditor5-ui/theme/components/formheader/formheader.css
@@ -9,4 +9,12 @@
 	flex-wrap: nowrap;
 	align-items: center;
 	justify-content: space-between;
+
+	& .ck-icon {
+		margin-right: var(--ck-spacing-medium);
+	}
+
+	& h2.ck-form__header__label {
+		flex-grow: 1;
+	}
 }

From bfd9954584c9c97fb38417464569d28399ebb0c0 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 15 Sep 2023 15:49:11 +0200
Subject: [PATCH 54/84] Tests: Added missing TextareaView test.

---
 .../ckeditor5-ui/tests/textarea/textareaview.js   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 634295121f2..864bc28f41b 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -79,7 +79,20 @@ describe( 'TextareaView', () => {
 		} );
 
 		it( 'should update the size of the view', () => {
-			// TODO
+			view.element.value = '1';
+			view.fire( 'input' );
+
+			const initialHeight = view.element.style.height;
+			const initialScrollTop = view.element.scrollTop;
+
+			view.element.value = '1\n2\n3\n4\n5\n6';
+			view.fire( 'input' );
+			expect( view.element.style.height ).to.not.equal( initialHeight );
+			expect( view.element.scrollTop ).to.not.equal( initialScrollTop );
+
+			view.reset();
+			expect( view.element.style.height ).to.equal( initialHeight );
+			expect( view.element.scrollTop ).to.equal( initialScrollTop );
 		} );
 	} );
 

From bc2d2a12e46d6d2ed3af47011f3c6dad79a88714 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 18 Sep 2023 15:08:23 +0200
Subject: [PATCH 55/84] AutocompleteView should update its value upon child
 FilteredView#execute event.

---
 .../src/autocomplete/autocompleteview.ts      | 20 +++++++++++++++++++
 packages/ckeditor5-ui/src/index.ts            |  2 +-
 .../ckeditor5-ui/src/search/filteredview.ts   | 10 ++++++++++
 .../tests/autocomplete/autocompleteview.js    | 13 ++++++++++++
 .../tests/manual/autocomplete/autocomplete.ts |  9 ++++++++-
 5 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 765fb3ed968..4448228a1e1 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -11,6 +11,7 @@ import { getOptimalPosition, type PositioningFunction, type Locale, global, toUn
 import SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview';
 import type SearchResultsView from '../search/searchresultsview';
 import type InputBase from '../input/inputbase';
+import type { FilteredViewExecuteEvent } from '../search/filteredview';
 
 import '../../theme/components/autocomplete/autocomplete.css';
 
@@ -57,6 +58,8 @@ export default class AutocompleteView<
 			}
 		} );
 
+		// Update the visibility of the results view when the user focuses or blurs the component.
+		// This is also integration for the `resetOnBlur` configuration.
 		this.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
 			this._updateResultsVisibility();
 
@@ -69,24 +72,41 @@ export default class AutocompleteView<
 			}
 		} );
 
+		// Update the visibility of the results view when the user types in the query field.
+		// This is an integration for `queryMinChars` configuration.
 		this.on( 'search', () => {
 			this._updateResultsVisibility();
 			this._updateResultsViewPosition();
 		} );
 
+		// Hide the results view when the user presses the ESC key.
 		this.keystrokes.set( 'esc', ( evt, cancel ) => {
 			resultsView.isVisible = false;
 			cancel();
 		} );
 
+		// Update the position of the results view when the user scrolls the page.
 		// TODO: This needs to be debounced down the road.
 		this.listenTo( global.document, 'scroll', () => {
 			this._updateResultsViewPosition();
 		} );
 
+		// Hide the results when the component becomes disabled.
 		this.on( 'change:isEnabled', () => {
 			this._updateResultsVisibility();
 		} );
+
+		// Update the value of the query field when the user selects a result.
+		this.filteredView.on<FilteredViewExecuteEvent>( 'execute', ( evt, { value } ) => {
+			// Focus the query view first to avoid losing the focus.
+			this.focus();
+
+			// Update the value of the query field.
+			this.queryView.fieldView.value = this.queryView.fieldView.element!.value = value;
+
+			// Finally, hide the results view. The focus has been moved earlier so this is safe.
+			resultsView.isVisible = false;
+		} );
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 9392d8b1326..24c46a5a6ba 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -78,7 +78,7 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview';
 export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview';
 export { default as SearchInfoView } from './search/searchinfoview';
-export { default as FilteredView } from './search/filteredview';
+export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
 
 export { default as TooltipManager } from './tooltipmanager';
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index ee9117fac89..4dcc657a95c 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -23,3 +23,13 @@ export default interface FilteredView extends View, FocusableView {
 		totalItemsCount: number;
 	};
 }
+
+/**
+ * Fired when the user selects an autocomplete option. The event data should contain the selected value.
+ *
+ * @eventName ~FilteredView#execute
+ */
+export interface FilteredViewExecuteEvent {
+	name: 'execute';
+	args: [ { value: string } ];
+}
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index 47f2f403ff2..75b61d842c6 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -60,6 +60,19 @@ describe( 'AutocompleteView', () => {
 				expect( view.resultsView.element.classList.contains( 'ck-hidden' ) ).to.be.false;
 			} );
 
+			it( 'should update the value and close results when the filtered view fired the execute event', () => {
+				const focusSpy = sinon.spy( view, 'focus' );
+
+				view.resultsView.isVisible = true;
+
+				view.filteredView.fire( 'execute', { value: 'foo bar baz' } );
+
+				expect( view.resultsView.isVisible ).to.be.false;
+				sinon.assert.calledOnce( focusSpy );
+				expect( view.queryView.fieldView.value ).to.equal( 'foo bar baz' );
+				expect( view.queryView.fieldView.element.value ).to.equal( 'foo bar baz' );
+			} );
+
 			it( 'has a #_position property with a DOM binding', () => {
 				expect( view.resultsView._position ).to.equal( 's' );
 				expect( view.resultsView.element.classList.contains( 'ck-search__results_s' ) ).to.be.true;
diff --git a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
index 4a78974036c..a2567f1f32e 100644
--- a/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
+++ b/packages/ckeditor5-ui/tests/manual/autocomplete/autocomplete.ts
@@ -11,7 +11,8 @@ import {
 	ListItemView,
 	ListView,
 	AutocompleteView,
-	type FilteredView
+	type FilteredView,
+	type FilteredViewExecuteEvent
 } from '../../../src';
 
 const locale = new Locale();
@@ -50,6 +51,12 @@ const listView = new FilteredTestListView();
 	const listItemView = new ListItemView();
 	const buttonView = new ButtonView();
 
+	buttonView.on( 'execute', () => {
+		listView.fire<FilteredViewExecuteEvent>( 'execute', {
+			value: buttonView.label!
+		} );
+	} );
+
 	buttonView.withText = true;
 	buttonView.label = item;
 	listItemView.children.add( buttonView );

From a7db808edb814052df122f3f9080e548f34acf87 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 09:45:12 +0200
Subject: [PATCH 56/84] Autocomplete panel should show up closer to the input.

---
 .../theme/ckeditor5-ui/components/autocomplete/autocomplete.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
index 2f618404796..c9bbb6e5f1c 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
@@ -20,11 +20,13 @@
 		&.ck-search__results_n {
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
+			margin-bottom: -1px;
 		}
 
 		&.ck-search__results_s {
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
+			margin-top: -1px;
 		}
 	}
 }

From f9d04730e7d330eee2078714b544c3761e6d67e2 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 09:45:40 +0200
Subject: [PATCH 57/84] Improved the UX of the AutocompleteView.

---
 .../src/autocomplete/autocompleteview.ts      | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 4448228a1e1..c18c6de411e 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -64,7 +64,7 @@ export default class AutocompleteView<
 			this._updateResultsVisibility();
 
 			if ( isFocused ) {
-				this._updateResultsViewPosition();
+				this._updateResultsViewWidthAndPosition();
 				// Reset the scroll position of the results view whenever the autocomplete reopens.
 				this.resultsView.element!.scrollTop = 0;
 			} else if ( config.resetOnBlur ) {
@@ -74,9 +74,10 @@ export default class AutocompleteView<
 
 		// Update the visibility of the results view when the user types in the query field.
 		// This is an integration for `queryMinChars` configuration.
+		// This is an integration for search results changing length and the #resultsView requiring to be repositioned.
 		this.on( 'search', () => {
 			this._updateResultsVisibility();
-			this._updateResultsViewPosition();
+			this._updateResultsViewWidthAndPosition();
 		} );
 
 		// Hide the results view when the user presses the ESC key.
@@ -88,7 +89,7 @@ export default class AutocompleteView<
 		// Update the position of the results view when the user scrolls the page.
 		// TODO: This needs to be debounced down the road.
 		this.listenTo( global.document, 'scroll', () => {
-			this._updateResultsViewPosition();
+			this._updateResultsViewWidthAndPosition();
 		} );
 
 		// Hide the results when the component becomes disabled.
@@ -101,18 +102,29 @@ export default class AutocompleteView<
 			// Focus the query view first to avoid losing the focus.
 			this.focus();
 
+			// Resetting the view will ensure that the #queryView will update its empty state correctly.
+			// This prevents bugs related to dynamic labels or auto-grow when re-setting the same value
+			// to #queryView.fieldView.value (which does not trigger empty state change) to an
+			// #queryView.fieldView.element that has been changed by the user.
+			this.reset();
+
 			// Update the value of the query field.
 			this.queryView.fieldView.value = this.queryView.fieldView.element!.value = value;
 
 			// Finally, hide the results view. The focus has been moved earlier so this is safe.
 			resultsView.isVisible = false;
 		} );
+
+		// Update the position and width of the results view when it becomes visible.
+		this.resultsView.on( 'change:isVisible', () => {
+			this._updateResultsViewWidthAndPosition();
+		} );
 	}
 
 	/**
 	 * Updates the position of the results view on demand.
 	 */
-	private _updateResultsViewPosition() {
+	private _updateResultsViewWidthAndPosition() {
 		const resultsView = ( this.resultsView as AutocompleteResultsView );
 
 		if ( !resultsView.isVisible ) {

From b3a34b953705cde9d9a34e26184d8a2d9dc265c8 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 09:45:59 +0200
Subject: [PATCH 58/84] SearchTextView's focus tracking should be open-ended.

---
 .../src/search/text/searchtextview.ts             | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 6e632293daf..fb1eb50aa6b 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -105,6 +105,13 @@ export default class SearchTextView<
 	 */
 	declare public readonly children: ViewCollection;
 
+	/**
+	 * The collection of focusable children of the view.
+	 *
+	 * @readonly
+	 */
+	declare public readonly focusableChildren: ViewCollection;
+
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
 	 *
@@ -136,6 +143,7 @@ export default class SearchTextView<
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 		this.children = this.createCollection();
+		this.focusableChildren = this.createCollection( [ this.queryView, this.filteredView ] );
 
 		this.set( 'isEnabled', true );
 		this.set( 'resultsCount', 0 );
@@ -157,7 +165,7 @@ export default class SearchTextView<
 		this.resultsView.children.addMany( [ this.infoView, this.filteredView ] );
 
 		this._focusCycler = new FocusCycler( {
-			focusables: this.createCollection( [ this.queryView, this.filteredView ] ),
+			focusables: this.focusableChildren,
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
@@ -202,8 +210,9 @@ export default class SearchTextView<
 
 		const stopPropagation = ( data: Event ) => data.stopPropagation();
 
-		this.focusTracker.add( this.queryView.element as Element );
-		this.focusTracker.add( this.filteredView.element as Element );
+		for ( const focusableChild of this.focusableChildren ) {
+			this.focusTracker.add( focusableChild.element as Element );
+		}
 
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element as HTMLElement );

From accfdccca789c1b3b725ca9664aeb41d6c8cdb7c Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 09:49:13 +0200
Subject: [PATCH 59/84] TextareaView should fire an event upon auto-growing.

---
 packages/ckeditor5-ui/src/index.ts                 |  2 +-
 packages/ckeditor5-ui/src/textarea/textareaview.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 24c46a5a6ba..0e217e089cb 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -56,7 +56,7 @@ export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
 
-export { default as TextareaView } from './textarea/textareaview';
+export { default as TextareaView, type TextareaViewAutoGrowEvent } from './textarea/textareaview';
 
 export { default as IframeView } from './iframe/iframeview';
 
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index fcabd633c58..5c4ddc2c5ff 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -158,6 +158,8 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		singleLineContentClone.remove();
 		fullTextValueClone.remove();
+
+		this.fire<TextareaViewAutoGrowEvent>( 'autoGrow' );
 	}
 
 	/**
@@ -193,3 +195,13 @@ function getTextareaElementClone( element: HTMLTextAreaElement, value: string ):
 
 	return clone;
 }
+
+/**
+ * Fired when the textarea view is resized.
+ *
+ * @eventName ~TextareaView#autoGrow
+ */
+export type TextareaViewAutoGrowEvent = {
+	name: 'autoGrow';
+	args: [];
+};

From 7879447a388caf0b6084ef9990805b9121476037 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 14:00:55 +0200
Subject: [PATCH 60/84] Moved the history icon to ckeditor5-core.

---
 docs/features/index.md                          | 2 +-
 packages/ckeditor5-core/src/index.ts            | 2 ++
 packages/ckeditor5-core/theme/icons/history.svg | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 packages/ckeditor5-core/theme/icons/history.svg

diff --git a/docs/features/index.md b/docs/features/index.md
index bcd78f17f5f..5f07839cc6d 100644
--- a/docs/features/index.md
+++ b/docs/features/index.md
@@ -59,7 +59,7 @@ Additionally, CKEditor&nbsp;5 offers the {@link features/restricted-editing rest
 
 {@img assets/img/features-collaboration.png 800 CKEditor&nbsp;5 collaboration features.}
 
-You can also easily track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-revision-history/theme/icons/revision-history.svg Revision history}. This modern and robust document versioning tool lets you create named versions, compare changes, and restore previous document versions at ease, tracking all progress &mdash; also when multiple editors work together.
+You can also easily track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-core/theme/icons/history.svg Revision history}. This modern and robust document versioning tool lets you create named versions, compare changes, and restore previous document versions at ease, tracking all progress &mdash; also when multiple editors work together.
 
 {@img assets/img/features-revision-history.png 800 CKEditor&nbsp;5 document versioning feature.}
 
diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
index 2223333e02a..8bd7878460a 100644
--- a/packages/ckeditor5-core/src/index.ts
+++ b/packages/ckeditor5-core/src/index.ts
@@ -38,6 +38,7 @@ import caption from './../theme/icons/caption.svg';
 import check from './../theme/icons/check.svg';
 import cog from './../theme/icons/cog.svg';
 import eraser from './../theme/icons/eraser.svg';
+import history from './../theme/icons/history.svg';
 import lowVision from './../theme/icons/low-vision.svg';
 import loupe from './../theme/icons/loupe.svg';
 import image from './../theme/icons/image.svg';
@@ -82,6 +83,7 @@ export const icons = {
 	check,
 	cog,
 	eraser,
+	history,
 	image,
 	lowVision,
 	loupe,
diff --git a/packages/ckeditor5-core/theme/icons/history.svg b/packages/ckeditor5-core/theme/icons/history.svg
new file mode 100644
index 00000000000..daf9197f3e6
--- /dev/null
+++ b/packages/ckeditor5-core/theme/icons/history.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g><path d="M11 1a9 9 0 1 1-8.027 13.075l1.128-1.129A7.502 7.502 0 0 0 18.5 10a7.5 7.5 0 1 0-14.962.759l-.745-.746-.76.76A9 9 0 0 1 11 1z"/><path d="M.475 8.17a.75.75 0 0 1 .978.047l.075.082 1.284 1.643 1.681-1.284a.75.75 0 0 1 .978.057l.073.083a.75.75 0 0 1-.057.978l-.083.073-2.27 1.737a.75.75 0 0 1-.973-.052l-.074-.082-1.741-2.23a.75.75 0 0 1 .13-1.052z"/><path d="M11.5 5v4.999l3.196 3.196-1.06 1.06L10.1 10.72l-.1-.113V5z"/></g></svg>

From 3f4e5a077736796b8eb01ed9f25c7cedfa3bd257 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 14:04:39 +0200
Subject: [PATCH 61/84] Tests: Added tests for TextareaView #autoGrow event.

---
 .../ckeditor5-ui/tests/textarea/textareaview.js  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 864bc28f41b..0add83c064c 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -164,6 +164,22 @@ describe( 'TextareaView', () => {
 				await requestAnimationFrame();
 				expect( parseFloat( view.element.style.height ) ).to.equal( twoRowsHeight );
 			} );
+
+			it( 'should fire the #autoGrow event', () => {
+				const spy = sinon.spy();
+
+				view.on( 'autoGrow', spy );
+
+				view.element.value = '1\n2\n3\n4\n5\n6';
+
+				view.fire( 'input' );
+				sinon.assert.calledOnce( spy );
+
+				view.fire( 'input' );
+
+				// The event gets fired whether the view is changing dimensions or not.
+				sinon.assert.calledTwice( spy );
+			} );
 		} );
 	} );
 

From d5532cb68023627894c4858824ba5e470d5c5e4b Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 14:12:35 +0200
Subject: [PATCH 62/84] Tests: Added tests for SearchTextView's open-ended
 focus management logic.

---
 .../src/search/text/searchtextview.ts         |  2 +-
 .../tests/search/text/searchtextview.js       | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index fb1eb50aa6b..63ae11dab0a 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -106,7 +106,7 @@ export default class SearchTextView<
 	declare public readonly children: ViewCollection;
 
 	/**
-	 * The collection of focusable children of the view.
+	 * The collection of focusable children of the view. Used by the focus management logic.
 	 *
 	 * @readonly
 	 */
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index f29f4bd5f0a..dbf76595a3d 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -125,6 +125,10 @@ describe( 'SearchTextView', () => {
 			expect( view.children ).to.be.instanceOf( ViewCollection );
 		} );
 
+		it( 'should have #focusableChildren view collection', () => {
+			expect( view.focusableChildren ).to.be.instanceOf( ViewCollection );
+		} );
+
 		describe( '#queryView', () => {
 			it( 'gets created as labeled text view if not configured otherwise', () => {
 				expect( view.queryView ).to.be.instanceOf( LabeledFieldView );
@@ -391,6 +395,12 @@ describe( 'SearchTextView', () => {
 
 	describe( 'render()', () => {
 		describe( 'focus tracking and cycling', () => {
+			it( 'should add #queryView and #filteredView to the #focusableChildren collection', () => {
+				expect( view.focusableChildren.map( view => view ) ).to.have.ordered.members( [
+					view.queryView, view.filteredView
+				] );
+			} );
+
 			describe( 'activates keyboard navigation', () => {
 				it( 'makes "tab" focus the next focusable item', () => {
 					const keyEvtData = {
@@ -430,6 +440,39 @@ describe( 'SearchTextView', () => {
 					sinon.assert.calledOnce( keyEvtData.stopPropagation );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'should allow adding extra views to the focus cycling logic', () => {
+					const anotherFocusableView = new View();
+
+					anotherFocusableView.setTemplate( {
+						tag: 'div',
+						attributes: {
+							tabindex: -1
+						}
+					} );
+
+					anotherFocusableView.focus = sinon.spy();
+
+					anotherFocusableView.render();
+
+					view.focusTracker.add( anotherFocusableView );
+					view.focusableChildren.add( anotherFocusableView );
+					view.element.appendChild( anotherFocusableView.element );
+
+					// Mock the query input is focused.
+					view.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.queryView.element;
+
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					view.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( anotherFocusableView.focus );
+				} );
 			} );
 
 			it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {

From 6b53e41b3ac1faeddbd7a30ad9895d6dd74e61e8 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 19 Sep 2023 14:19:25 +0200
Subject: [PATCH 63/84] Tests and code refactoring in AutocompleteView.

---
 .../src/autocomplete/autocompleteview.ts      |  1 -
 .../tests/autocomplete/autocompleteview.js    | 32 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index c18c6de411e..7da5528c8c4 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -64,7 +64,6 @@ export default class AutocompleteView<
 			this._updateResultsVisibility();
 
 			if ( isFocused ) {
-				this._updateResultsViewWidthAndPosition();
 				// Reset the scroll position of the results view whenever the autocomplete reopens.
 				this.resultsView.element!.scrollTop = 0;
 			} else if ( config.resetOnBlur ) {
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index 75b61d842c6..e545f1c0fe2 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -228,6 +228,38 @@ describe( 'AutocompleteView', () => {
 			} );
 		} );
 
+		describe( '#execute event handling', () => {
+			it( 'should focus the view upon #execute', () => {
+				const focusSpy = sinon.spy( view, 'focus' );
+
+				filteredView.fire( 'execute', { value: 'foo bar baz' } );
+
+				sinon.assert.calledOnce( focusSpy );
+			} );
+
+			it( 'should set the #value upon #execute', () => {
+				filteredView.fire( 'execute', { value: 'foo bar baz' } );
+
+				expect( view.queryView.fieldView.value ).to.equal( 'foo bar baz' );
+			} );
+
+			it( 'should set the query view\'s DOM element value upon #execute', () => {
+				view.queryView.fieldView.element.value = 'abc';
+
+				filteredView.fire( 'execute', { value: 'foo bar baz' } );
+
+				expect( view.queryView.fieldView.element.value ).to.equal( 'foo bar baz' );
+			} );
+
+			it( 'should hide the #resultsView', () => {
+				view.resultsView.isVisible = true;
+
+				filteredView.fire( 'execute', { value: 'foo bar baz' } );
+
+				expect( view.resultsView.isVisible ).to.be.false;
+			} );
+		} );
+
 		describe( 'focus tracking behavior', () => {
 			it( 'displays autocomplete results upon focusing the view', () => {
 				expect( view.resultsView.isVisible ).to.be.false;

From ebe9da46610983081efb8f89d97b55568ed2464b Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 20 Sep 2023 10:07:35 +0200
Subject: [PATCH 64/84] Clarified TextareaView docs.

---
 packages/ckeditor5-ui/src/textarea/textareaview.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 5c4ddc2c5ff..094cacf8003 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -197,7 +197,10 @@ function getTextareaElementClone( element: HTMLTextAreaElement, value: string ):
 }
 
 /**
- * Fired when the textarea view is resized.
+ * Fired when the logic of {@link module:ui/textarea/textareaview~TextareaView} checks whether
+ * the component should be resized upon user interaction.
+ *
+ * See {@link module:ui/textarea/textareaview~TextareaView#minRows}, {@link module:ui/textarea/textareaview~TextareaView#maxRows}.
  *
  * @eventName ~TextareaView#autoGrow
  */

From 5b5edc8433946fe8d352c62756c4e9344a9ae690 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 20 Sep 2023 10:08:31 +0200
Subject: [PATCH 65/84] Docs.

---
 .../ckeditor5-ui/components/autocomplete/autocomplete.css     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
index c9bbb6e5f1c..63456470aee 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css
@@ -20,12 +20,16 @@
 		&.ck-search__results_n {
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
 			margin-bottom: -1px;
 		}
 
 		&.ck-search__results_s {
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
 			margin-top: -1px;
 		}
 	}

From 6a4096917c3757f5603249eb91af05b4ed5492fc Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 20 Sep 2023 10:35:13 +0200
Subject: [PATCH 66/84] Secured AutocompleteView results positioning in edge
 cases.

---
 .../src/autocomplete/autocompleteview.ts      |  7 ++--
 .../tests/autocomplete/autocompleteview.js    | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 7da5528c8c4..9fe65e02d47 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -132,12 +132,15 @@ export default class AutocompleteView<
 
 		resultsView._width = new Rect( this.queryView.fieldView.element! ).width;
 
-		resultsView._position = AutocompleteView._getOptimalPosition( {
+		const optimalResultsPosition = AutocompleteView._getOptimalPosition( {
 			element: this.resultsView.element!,
 			target: this.queryView.element!,
 			fitInViewport: true,
 			positions: AutocompleteView.defaultResultsPositions
-		} ).name as string;
+		} );
+
+		// _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
+		resultsView._position = optimalResultsPosition ? optimalResultsPosition.name as string : 's';
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
index e545f1c0fe2..ea0797ec73f 100644
--- a/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
+++ b/packages/ckeditor5-ui/tests/autocomplete/autocompleteview.js
@@ -109,6 +109,38 @@ describe( 'AutocompleteView', () => {
 				expect( view.resultsView._position ).to.equal( 's' );
 			} );
 
+			it( 'should use the first results position on document scroll if the optimal one couldn\'t be found', () => {
+				const getOptimalPositionSpy = sinon.spy( AutocompleteView, '_getOptimalPosition' );
+
+				sinon.stub( view.queryView.element, 'getBoundingClientRect' ).returns( {
+					top: -100,
+					right: -100,
+					bottom: -90,
+					left: -90,
+					width: 10,
+					height: 10
+				} );
+
+				// A default that will get overridden.
+				view.resultsView._position = 'n';
+
+				view.focusTracker.isFocused = true;
+				sinon.assert.calledOnce( getOptimalPositionSpy );
+				sinon.assert.calledOnceWithExactly( getOptimalPositionSpy, {
+					element: view.resultsView.element,
+					target: view.queryView.element,
+					fitInViewport: true,
+					positions: AutocompleteView.defaultResultsPositions
+				} );
+
+				global.document.dispatchEvent( new Event( 'scroll' ) );
+
+				sinon.assert.calledTwice( getOptimalPositionSpy );
+
+				// First position in defaultResultsPositions.
+				expect( view.resultsView._position ).to.equal( 's' );
+			} );
+
 			it( 'should hide the results view upon pressing esc', () => {
 				const keyEvtData = {
 					keyCode: keyCodes.esc,

From eae2f2d8ec61c6044ffd7047a985ae9d2f942b78 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 21 Sep 2023 12:04:36 +0200
Subject: [PATCH 67/84] Code refactoring: Overridden AutocompleteView#_config
 type.

---
 .../src/autocomplete/autocompleteview.ts             | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index 9fe65e02d47..ad20e07f4c8 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -23,6 +23,11 @@ import '../../theme/components/autocomplete/autocomplete.css';
 export default class AutocompleteView<
 	TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>
 > extends SearchTextView<TQueryFieldView> {
+	/**
+	 * The configuration of the autocomplete view.
+	 */
+	protected override _config: AutocompleteViewConfig<TQueryFieldView>;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -65,7 +70,7 @@ export default class AutocompleteView<
 
 			if ( isFocused ) {
 				// Reset the scroll position of the results view whenever the autocomplete reopens.
-				this.resultsView.element!.scrollTop = 0;
+				resultsView.element!.scrollTop = 0;
 			} else if ( config.resetOnBlur ) {
 				this.queryView.reset();
 			}
@@ -115,7 +120,7 @@ export default class AutocompleteView<
 		} );
 
 		// Update the position and width of the results view when it becomes visible.
-		this.resultsView.on( 'change:isVisible', () => {
+		resultsView.on( 'change:isVisible', () => {
 			this._updateResultsViewWidthAndPosition();
 		} );
 	}
@@ -148,8 +153,7 @@ export default class AutocompleteView<
 	 */
 	private _updateResultsVisibility() {
 		const resultsView = ( this.resultsView as AutocompleteResultsView );
-		const config = this._config as AutocompleteViewConfig<TQueryFieldView>;
-		const queryMinChars = typeof config.queryMinChars === 'undefined' ? 0 : config.queryMinChars;
+		const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
 		const queryLength = this.queryView.fieldView.element!.value.length;
 
 		resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;

From bb8bcda7e3c2d0704b01c5430e72dc81dcbf01d2 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Thu, 21 Sep 2023 12:06:38 +0200
Subject: [PATCH 68/84] Made ListItemGroupView children extendable.

---
 .../src/list/listitemgroupview.ts             | 38 ++++++++++++++-----
 .../tests/list/listitemgroupview.js           |  6 +++
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/ckeditor5-ui/src/list/listitemgroupview.ts b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
index c594ee894d3..bc83978a0d0 100644
--- a/packages/ckeditor5-ui/src/list/listitemgroupview.ts
+++ b/packages/ckeditor5-ui/src/list/listitemgroupview.ts
@@ -8,6 +8,7 @@
  */
 
 import View from '../view';
+import type ViewCollection from '../viewcollection';
 import ListView from './listview';
 
 import { uid, type Locale } from '@ckeditor/ckeditor5-utils';
@@ -29,6 +30,11 @@ export default class ListItemGroupView extends View {
 	 */
 	public readonly items: ListView[ 'items' ];
 
+	/**
+	 * Collection of the child elements of the group.
+	 */
+	public readonly children: ViewCollection;
+
 	/**
 	 * Controls whether the item view is visible. Visible by default, list items are hidden
 	 * using a CSS class.
@@ -48,6 +54,9 @@ export default class ListItemGroupView extends View {
 		const groupLabelId = `ck-editor__label_${ uid() }`;
 		const nestedList = new ListView( locale );
 
+		this.children = this.createCollection();
+		this.children.addMany( [ this._createLabel( groupLabelId ), nestedList ] );
+
 		this.set( {
 			label: '',
 			isVisible: true
@@ -76,19 +85,28 @@ export default class ListItemGroupView extends View {
 				]
 			},
 
+			children: this.children
+		} );
+	}
+
+	/**
+	 * Creates a label for the group.
+	 */
+	private _createLabel( groupLabelId: string ): View {
+		const labelView = new View( this.locale );
+		const bind = this.bindTemplate;
+
+		labelView.setTemplate( {
+			tag: 'span',
+			attributes: {
+				id: groupLabelId
+			},
 			children: [
-				{
-					tag: 'span',
-					attributes: {
-						id: groupLabelId
-					},
-					children: [
-						{ text: bind.to( 'label' ) }
-					]
-				},
-				nestedList
+				{ text: bind.to( 'label' ) }
 			]
 		} );
+
+		return labelView;
 	}
 
 	/**
diff --git a/packages/ckeditor5-ui/tests/list/listitemgroupview.js b/packages/ckeditor5-ui/tests/list/listitemgroupview.js
index 0f4cc00818a..3008a26ddb5 100644
--- a/packages/ckeditor5-ui/tests/list/listitemgroupview.js
+++ b/packages/ckeditor5-ui/tests/list/listitemgroupview.js
@@ -35,6 +35,12 @@ describe( 'ListItemGroupView', () => {
 				expect( labelElement.textContent ).to.equal( 'Foo' );
 			} );
 
+			it( 'should have #children view collection with a label and a nested list', () => {
+				expect( view.children ).to.be.instanceOf( ViewCollection );
+				expect( view.children.first.element.textContent ).to.equal( 'Foo' );
+				expect( view.children.last.items ).to.equal( view.items );
+			} );
+
 			describe( 'nested list', () => {
 				it( 'is created as a last child', () => {
 					const listElement = view.element.lastChild;

From 8e4a15cc89754efbb2582937eacf9fdf422bddca Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 20 Sep 2023 16:12:39 +0200
Subject: [PATCH 69/84] Made the SearchResultsView focusable. SearchTextView
 should focus the #resultsView instead of #filteredView upon focus().

---
 .../src/search/searchresultsview.ts           | 17 ++++++++++++--
 .../src/search/text/searchtextview.ts         |  2 +-
 .../tests/search/searchresultsview.js         | 22 ++++++++++++++++++-
 .../tests/search/text/searchtextview.js       |  8 +++----
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index 63d309ae422..9183b06c79a 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -10,11 +10,12 @@
 import View from '../view';
 import type ViewCollection from '../viewcollection';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type { FocusableView } from '../focuscycler';
 
 /**
  * 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 {
+export default class SearchResultsView extends View implements FocusableView {
 	/**
 	 * The collection of the child views inside of the list item {@link #element}.
 	 *
@@ -36,9 +37,21 @@ export default class SearchResultsView extends View {
 				class: [
 					'ck',
 					'ck-search__results'
-				]
+				],
+				tabindex: -1
 			},
 			children: this.children
 		} );
 	}
+
+	/**
+	 * Focuses the first child view.
+	 */
+	public focus(): void {
+		const firstFocusableChild = this.children.find( ( child: any ) => typeof child.focus === 'function' );
+
+		if ( firstFocusableChild ) {
+			( firstFocusableChild as FocusableView ).focus();
+		}
+	}
 }
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 63ae11dab0a..3621d3047f8 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -143,7 +143,7 @@ export default class SearchTextView<
 		this.keystrokes = new KeystrokeHandler();
 		this.resultsView = new SearchResultsView( locale );
 		this.children = this.createCollection();
-		this.focusableChildren = this.createCollection( [ this.queryView, this.filteredView ] );
+		this.focusableChildren = this.createCollection( [ this.queryView, this.resultsView ] );
 
 		this.set( 'isEnabled', true );
 		this.set( 'resultsCount', 0 );
diff --git a/packages/ckeditor5-ui/tests/search/searchresultsview.js b/packages/ckeditor5-ui/tests/search/searchresultsview.js
index 52841d5c91e..1d3e5cee8ad 100644
--- a/packages/ckeditor5-ui/tests/search/searchresultsview.js
+++ b/packages/ckeditor5-ui/tests/search/searchresultsview.js
@@ -7,7 +7,7 @@ import { Locale } from '@ckeditor/ckeditor5-utils';
 import SearchResultsView from '../../src/search/searchresultsview';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import { ButtonView, ViewCollection } from '../../src';
+import { ButtonView, View, ViewCollection } from '../../src';
 
 describe( 'SearchResultsView', () => {
 	let locale, view;
@@ -29,6 +29,7 @@ describe( 'SearchResultsView', () => {
 		it( 'creates and element from template with CSS classes', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-search__results' ) ).to.be.true;
+			expect( view.element.getAttribute( 'tabIndex' ) ).to.equal( '-1' );
 		} );
 
 		it( 'has a collection of #children', () => {
@@ -39,4 +40,23 @@ describe( 'SearchResultsView', () => {
 			expect( view.element.firstChild ).to.equal( view.children.first.element );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'does nothing for empty panel', () => {
+			expect( () => view.focus() ).to.not.throw();
+		} );
+
+		it( 'focuses first focusable view in #children', () => {
+			const firstChild = new View();
+			const firstFocusableChild = new View();
+
+			firstFocusableChild.focus = sinon.spy();
+
+			view.children.addMany( [ firstChild, firstFocusableChild ] );
+
+			view.focus();
+
+			sinon.assert.calledOnce( firstFocusableChild.focus );
+		} );
+	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index dbf76595a3d..8d76ba43eb6 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -395,9 +395,9 @@ describe( 'SearchTextView', () => {
 
 	describe( 'render()', () => {
 		describe( 'focus tracking and cycling', () => {
-			it( 'should add #queryView and #filteredView to the #focusableChildren collection', () => {
+			it( 'should add #queryView and #resultsView to the #focusableChildren collection', () => {
 				expect( view.focusableChildren.map( view => view ) ).to.have.ordered.members( [
-					view.queryView, view.filteredView
+					view.queryView, view.resultsView
 				] );
 			} );
 
@@ -413,7 +413,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = view.queryView.element;
 
-					const spy = sinon.spy( filteredView, 'focus' );
+					const spy = sinon.spy( view.resultsView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -433,7 +433,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = filteredView.element;
 
-					const spy = sinon.spy( view.queryView, 'focus' );
+					const spy = sinon.spy( view.resultsView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );

From 0cb1dc178f0303d175e2909cb53b07f11cc17acf Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 22 Sep 2023 11:05:44 +0200
Subject: [PATCH 70/84] TextareaView should have the right height if minRows is
 1 and the content is empty in FF.

---
 .../ckeditor5-ui/components/textarea/textarea.css    | 12 ++++++++++++
 packages/ckeditor5-ui/src/textarea/textareaview.ts   |  1 +
 .../theme/components/textarea/textarea.css           | 10 ++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css
 create mode 100644 packages/ckeditor5-ui/theme/components/textarea/textarea.css

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css
new file mode 100644
index 00000000000..6af487b9f9f
--- /dev/null
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
+ * This bug is especially visible when rows=1.
+ */
+.ck-textarea {
+	overflow-x: hidden
+}
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 094cacf8003..392a0df4844 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -11,6 +11,7 @@ import { Rect, type Locale, toUnit, getBorderWidths, global } from '@ckeditor/ck
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
+import '../../theme/components/textarea/textarea.css';
 
 /**
  * The textarea view class.
diff --git a/packages/ckeditor5-ui/theme/components/textarea/textarea.css b/packages/ckeditor5-ui/theme/components/textarea/textarea.css
new file mode 100644
index 00000000000..563b03d7a66
--- /dev/null
+++ b/packages/ckeditor5-ui/theme/components/textarea/textarea.css
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

From 2fca6177af5e715cb38f925668a8af272d18915e Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 22 Sep 2023 12:22:49 +0200
Subject: [PATCH 71/84] Docs and refactoring

---
 .../src/autocomplete/autocompleteview.ts      | 36 ++++++++---------
 .../highlightedtext/highlightedtextview.ts    | 23 ++++++-----
 .../ckeditor5-ui/src/search/searchinfoview.ts |  2 +-
 .../src/search/text/searchtextqueryview.ts    |  2 +-
 .../src/search/text/searchtextview.ts         | 40 +++++++++++++------
 5 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
index ad20e07f4c8..fde873ce699 100644
--- a/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
+++ b/packages/ckeditor5-ui/src/autocomplete/autocompleteview.ts
@@ -28,6 +28,8 @@ export default class AutocompleteView<
 	 */
 	protected override _config: AutocompleteViewConfig<TQueryFieldView>;
 
+	declare public resultsView: AutocompleteResultsView;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -44,21 +46,20 @@ export default class AutocompleteView<
 			}
 		} );
 
-		const resultsView = this.resultsView as AutocompleteResultsView;
-		const bindResultsView = resultsView.bindTemplate;
+		const bindResultsView = this.resultsView.bindTemplate;
 
-		resultsView.set( 'isVisible', false );
-		resultsView.set( '_position', 's' );
-		resultsView.set( '_width', 0 );
+		this.resultsView.set( 'isVisible', false );
+		this.resultsView.set( '_position', 's' );
+		this.resultsView.set( '_width', 0 );
 
-		resultsView.extendTemplate( {
+		this.resultsView.extendTemplate( {
 			attributes: {
 				class: [
 					bindResultsView.if( 'isVisible', 'ck-hidden', value => !value ),
 					bindResultsView.to( '_position', value => `ck-search__results_${ value }` )
 				],
 				style: {
-					width: bindResultsView.to( '_width', value => toPx( value ) )
+					width: bindResultsView.to( '_width', toPx )
 				}
 			}
 		} );
@@ -70,7 +71,7 @@ export default class AutocompleteView<
 
 			if ( isFocused ) {
 				// Reset the scroll position of the results view whenever the autocomplete reopens.
-				resultsView.element!.scrollTop = 0;
+				this.resultsView.element!.scrollTop = 0;
 			} else if ( config.resetOnBlur ) {
 				this.queryView.reset();
 			}
@@ -86,7 +87,7 @@ export default class AutocompleteView<
 
 		// Hide the results view when the user presses the ESC key.
 		this.keystrokes.set( 'esc', ( evt, cancel ) => {
-			resultsView.isVisible = false;
+			this.resultsView.isVisible = false;
 			cancel();
 		} );
 
@@ -116,11 +117,11 @@ export default class AutocompleteView<
 			this.queryView.fieldView.value = this.queryView.fieldView.element!.value = value;
 
 			// Finally, hide the results view. The focus has been moved earlier so this is safe.
-			resultsView.isVisible = false;
+			this.resultsView.isVisible = false;
 		} );
 
 		// Update the position and width of the results view when it becomes visible.
-		resultsView.on( 'change:isVisible', () => {
+		this.resultsView.on( 'change:isVisible', () => {
 			this._updateResultsViewWidthAndPosition();
 		} );
 	}
@@ -129,13 +130,11 @@ export default class AutocompleteView<
 	 * Updates the position of the results view on demand.
 	 */
 	private _updateResultsViewWidthAndPosition() {
-		const resultsView = ( this.resultsView as AutocompleteResultsView );
-
-		if ( !resultsView.isVisible ) {
+		if ( !this.resultsView.isVisible ) {
 			return;
 		}
 
-		resultsView._width = new Rect( this.queryView.fieldView.element! ).width;
+		this.resultsView._width = new Rect( this.queryView.fieldView.element! ).width;
 
 		const optimalResultsPosition = AutocompleteView._getOptimalPosition( {
 			element: this.resultsView.element!,
@@ -145,18 +144,17 @@ export default class AutocompleteView<
 		} );
 
 		// _getOptimalPosition will return null if there is no optimal position found (e.g. target is off the viewport).
-		resultsView._position = optimalResultsPosition ? optimalResultsPosition.name as string : 's';
+		this.resultsView._position = optimalResultsPosition ? optimalResultsPosition.name : 's';
 	}
 
 	/**
 	 * Updates the visibility of the results view on demand.
 	 */
 	private _updateResultsVisibility() {
-		const resultsView = ( this.resultsView as AutocompleteResultsView );
 		const queryMinChars = typeof this._config.queryMinChars === 'undefined' ? 0 : this._config.queryMinChars;
 		const queryLength = this.queryView.fieldView.element!.value.length;
 
-		resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
+		this.resultsView.isVisible = this.focusTracker.isFocused && this.isEnabled && queryLength >= queryMinChars;
 	}
 
 	/**
@@ -204,7 +202,7 @@ export interface AutocompleteResultsView extends SearchResultsView {
 	 *
 	 * @internal
 	*/
-	_position: string;
+	_position?: string;
 
 	/**
 	 * The observable property determining the CSS width of the results view.
diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
index 3848980ac41..86a7d21cff6 100644
--- a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -21,6 +21,8 @@ export default class HighlightedTextView extends View {
 	 * The text that can be highlighted using the {@link #highlightText} method.
 	 *
 	 * **Note:** When this property changes, the previous highlighting is removed.
+	 *
+	 * @observable
 	 */
 	declare public text: string | undefined;
 
@@ -62,31 +64,31 @@ export default class HighlightedTextView extends View {
 
 	/**
 	 * Updates element's innerHTML with the passed content.
-	 *
-	 * @param newText
 	 */
 	private _updateInnerHTML( newInnerHTML: string | undefined ) {
 		this.element!.innerHTML = newInnerHTML || '';
 	}
 }
 
-// Replaces RegExp occurrences with <mark> tags in a text.
-//
-// @param text A text to get marked.
-// @param [regExp] An optional RegExp. If not passed, this is a pass-through function.
-// @returns A text with RegExp occurrences marked by <mark>.
-function markText( text: string, regExp: RegExp | null ) {
+/**
+ * Replaces RegExp occurrences with <mark> tags in a text.
+ *
+ * @param text A text to get marked.
+ * @param regExp An optional RegExp. If not passed, this is a pass-through function.
+ * @returns A text with RegExp occurrences marked by <mark>.
+ */
+function markText( text: string, regExp?: RegExp | null ) {
 	if ( !regExp ) {
 		return escape( text );
 	}
 
 	const textParts: Array<{ text: string; isMatch: boolean }> = [];
 	let lastMatchEnd = 0;
-	let matchInfo;
+	let matchInfo = regExp.exec( text );
 
 	// Iterate over all matches and create an array of text parts. The idea is to mark which parts are query matches
 	// so that later on they can be highlighted.
-	while ( ( matchInfo = regExp.exec( text ) ) !== null ) {
+	while ( matchInfo !== null ) {
 		const curMatchStart = matchInfo.index;
 		// Detect if there was something between last match and this one.
 		if ( curMatchStart !== lastMatchEnd ) {
@@ -102,6 +104,7 @@ function markText( text: string, regExp: RegExp | null ) {
 		} );
 
 		lastMatchEnd = regExp.lastIndex;
+		matchInfo = regExp.exec( text );
 	}
 
 	// Your match might not be the last part of a string. Be sure to add any plain text following the last match.
diff --git a/packages/ckeditor5-ui/src/search/searchinfoview.ts b/packages/ckeditor5-ui/src/search/searchinfoview.ts
index 94dcde90a15..a47624a7fa9 100644
--- a/packages/ckeditor5-ui/src/search/searchinfoview.ts
+++ b/packages/ckeditor5-ui/src/search/searchinfoview.ts
@@ -12,7 +12,7 @@ import View from '../view';
 /**
  * A view displaying an information text related to different states of {@link module:ui/search/text/searchtextview~SearchTextView}.
  *
- * @private
+ * @internal
  */
 export default class SearchInfoView extends View {
 	/**
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
index 46bdeded418..3e0f6cd4330 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextqueryview.ts
@@ -19,7 +19,7 @@ import { icons } from '@ckeditor/ckeditor5-core';
 /**
  * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.
  *
- * @private
+ * @internal
  * @extends module:ui/labeledfield/labeledfieldview~LabeledFieldView
  */
 export default class SearchTextQueryView<
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 3621d3047f8..7cb40e5528f 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -81,6 +81,7 @@ export default class SearchTextView<
 	 * Controls whether the component is in read-only mode.
 	 *
 	 * @default true
+	 * @observable
 	 */
 	declare public isEnabled: boolean;
 
@@ -88,6 +89,7 @@ export default class SearchTextView<
 	 * The number of results found for the current search query. Updated upon the {@link #search} event.
 	 *
 	 * @default 0
+	 * @observable
 	 */
 	declare public resultsCount: number;
 
@@ -95,6 +97,7 @@ export default class SearchTextView<
 	 * The number of the items that can be searched in the {@link #filteredView}. Updated upon the {@link #search} event.
 	 *
 	 * @default 0
+	 * @observable
 	 */
 	declare public totalItemsCount: number;
 
@@ -112,6 +115,8 @@ export default class SearchTextView<
 	 */
 	declare public readonly focusableChildren: ViewCollection;
 
+	public declare locale: Locale;
+
 	/**
 	 * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
 	 *
@@ -177,7 +182,7 @@ export default class SearchTextView<
 			}
 		} );
 
-		this.on( 'search', ( evt, { resultsCount, totalItemsCount } ) => {
+		this.on<SearchTextViewSearchEvent>( 'search', ( evt, { resultsCount, totalItemsCount } ) => {
 			this.resultsCount = resultsCount;
 			this.totalItemsCount = totalItemsCount;
 		} );
@@ -256,12 +261,9 @@ export default class SearchTextView<
 
 	/**
 	 * Creates a search field view based on configured creator..
-	 *
-	 * @param locale The localization services instance.
-	 * @param label The label of the search field.
 	 */
 	private _createSearchTextQueryView(): SearchTextQueryView<TQueryFieldView> {
-		const queryView = new SearchTextQueryView<TQueryFieldView>( this.locale!, this._config.queryView );
+		const queryView = new SearchTextQueryView<TQueryFieldView>( this.locale, this._config.queryView );
 
 		this.listenTo( queryView.fieldView, 'input', () => {
 			this.search( queryView.fieldView.element!.value );
@@ -278,12 +280,12 @@ export default class SearchTextView<
 	 * was specified in the view config.
 	 */
 	private _enableDefaultInfoViewBehavior(): void {
-		const t = this.locale!.t;
+		const t = this.locale.t;
 		const infoView = this.infoView as SearchInfoView;
 
 		this.on<SearchTextViewSearchEvent>( 'search', ( evt, data ) => {
 			if ( !data.resultsCount ) {
-				const defaultTextConfig = this._config.infoView?.text;
+				const defaultTextConfig = this._config.infoView && this._config.infoView.text;
 				let primaryText, secondaryText;
 
 				if ( data.totalItemsCount ) {
@@ -380,9 +382,23 @@ export type SearchTextViewDefaultInfoText = string | ( ( query: string, resultsC
  */
 export type SearchTextViewSearchEvent = {
 	name: 'search';
-	args: [ {
-		query: string;
-		resultsCount: number;
-		totalItemsCount: number;
-	} ];
+	args: [ SearchTextViewSearchEventData ];
+};
+
+export type SearchTextViewSearchEventData = {
+
+	/**
+	 * The search query string.
+	 */
+	query: string;
+
+	/**
+	 * The number of results found for the current search query.
+	 */
+	resultsCount: number;
+
+	/**
+	 * The number of the items that can be searched.
+	 */
+	totalItemsCount: number;
 };

From 37d92dedaf1059b23837d9c8a5ac2e26b75cf4de Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 22 Sep 2023 12:37:34 +0200
Subject: [PATCH 72/84] Removed .? from the code

---
 .../src/search/text/searchtextview.ts          | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 7cb40e5528f..27a344ccb9a 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -289,11 +289,21 @@ export default class SearchTextView<
 				let primaryText, secondaryText;
 
 				if ( data.totalItemsCount ) {
-					primaryText = defaultTextConfig?.notFound?.primary || t( 'No results found' );
-					secondaryText = defaultTextConfig?.notFound?.secondary || '';
+					if ( defaultTextConfig && defaultTextConfig.notFound ) {
+						primaryText = defaultTextConfig.notFound.primary;
+						secondaryText = defaultTextConfig.notFound.secondary;
+					} else {
+						primaryText = t( 'No results found' );
+						secondaryText = '';
+					}
 				} else {
-					primaryText = defaultTextConfig?.noSearchableItems?.primary || t( 'No searchable items' );
-					secondaryText = defaultTextConfig?.noSearchableItems?.secondary || '';
+					if ( defaultTextConfig && defaultTextConfig.noSearchableItems ) {
+						primaryText = defaultTextConfig.noSearchableItems.primary;
+						secondaryText = defaultTextConfig.noSearchableItems.secondary;
+					} else {
+						primaryText = t( 'No searchable items' );
+						secondaryText = '';
+					}
 				}
 
 				infoView.set( {

From 7967b03c81bd513f343e4f8eb8268800003be23f Mon Sep 17 00:00:00 2001
From: DawidKossowskii <d.kossowski@cksource.com>
Date: Fri, 22 Sep 2023 12:52:21 +0200
Subject: [PATCH 73/84] Fixed linter issue

---
 packages/ckeditor5-ui/src/search/text/searchtextview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 27a344ccb9a..05714bb5c1c 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -308,7 +308,7 @@ export default class SearchTextView<
 
 				infoView.set( {
 					primaryText: normalizeInfoText( primaryText, data ),
-					secondaryText: normalizeInfoText( secondaryText, data ),
+					secondaryText: normalizeInfoText( secondaryText!, data ),
 					isVisible: true
 				} );
 			} else {

From 3671b8b4a0bbc951a42de86e82be34a529e83994 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 22 Sep 2023 15:33:04 +0200
Subject: [PATCH 74/84] Implemented FocusCycler#forwardCycle and #backwardCycle
 events. Made SearchResultsView a focus-friendly container. Made
 SearchInfoView focusable.

---
 packages/ckeditor5-ui/src/focuscycler.ts      | 98 +++++++++++++++----
 packages/ckeditor5-ui/src/index.ts            |  9 +-
 packages/ckeditor5-ui/src/list/listview.ts    |  7 ++
 .../ckeditor5-ui/src/search/filteredview.ts   |  5 +-
 .../ckeditor5-ui/src/search/searchinfoview.ts | 13 ++-
 .../src/search/searchresultsview.ts           | 57 +++++++++--
 .../src/search/text/searchtextview.ts         |  2 +-
 packages/ckeditor5-ui/tests/focuscycler.js    | 38 +++++++
 packages/ckeditor5-ui/tests/list/listview.js  | 21 +++-
 .../tests/search/searchinfoview.js            | 10 ++
 .../tests/search/searchresultsview.js         | 47 +++++++--
 .../tests/search/text/searchtextview.js       |  4 +-
 12 files changed, 269 insertions(+), 42 deletions(-)

diff --git a/packages/ckeditor5-ui/src/focuscycler.ts b/packages/ckeditor5-ui/src/focuscycler.ts
index b41be6b35c9..e8d8f6157fb 100644
--- a/packages/ckeditor5-ui/src/focuscycler.ts
+++ b/packages/ckeditor5-ui/src/focuscycler.ts
@@ -11,7 +11,8 @@ import {
 	isVisible,
 	type ArrayOrItem,
 	type FocusTracker,
-	type KeystrokeHandler
+	type KeystrokeHandler,
+	EmitterMixin
 } from '@ckeditor/ckeditor5-utils';
 
 import type View from './view';
@@ -69,7 +70,7 @@ import type ViewCollection from './viewcollection';
  *
  * Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.
  */
-export default class FocusCycler {
+export default class FocusCycler extends EmitterMixin() {
 	/**
 	 * A {@link module:ui/view~View view} collection that the cycler operates on.
 	 */
@@ -116,6 +117,8 @@ export default class FocusCycler {
 		keystrokeHandler?: KeystrokeHandler;
 		actions?: FocusCyclerActions;
 	} ) {
+		super();
+
 		this.focusables = options.focusables;
 		this.focusTracker = options.focusTracker;
 		this.keystrokeHandler = options.keystrokeHandler;
@@ -146,7 +149,7 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public get first(): FocusableView | null {
-		return ( this.focusables.find( isFocusable ) || null ) as FocusableView | null;
+		return ( this.focusables.find( isPlainFocusableView ) || null ) as FocusableView | null;
 	}
 
 	/**
@@ -156,7 +159,7 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public get last(): FocusableView | null {
-		return ( this.focusables.filter( isFocusable ).slice( -1 )[ 0 ] || null ) as FocusableView | null;
+		return ( this.focusables.filter( isPlainFocusableView ).slice( -1 )[ 0 ] || null ) as FocusableView | null;
 	}
 
 	/**
@@ -210,7 +213,7 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public focusFirst(): void {
-		this._focus( this.first );
+		this._focus( this.first, 1 );
 	}
 
 	/**
@@ -219,7 +222,7 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public focusLast(): void {
-		this._focus( this.last );
+		this._focus( this.last, -1 );
 	}
 
 	/**
@@ -228,7 +231,13 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public focusNext(): void {
-		this._focus( this.next );
+		const next = this.next;
+
+		this._focus( next, 1 );
+
+		if ( next == this.first ) {
+			this.fire<FocusCyclerForwardCycleEvent>( 'forwardCycle' );
+		}
 	}
 
 	/**
@@ -237,14 +246,34 @@ export default class FocusCycler {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public focusPrevious(): void {
-		this._focus( this.previous );
+		const previous = this.previous;
+
+		this._focus( previous, -1 );
+
+		if ( previous == this.last ) {
+			this.fire<FocusCyclerBackwardCycleEvent>( 'backwardCycle' );
+		}
 	}
 
 	/**
 	 * Focuses the given view if it exists.
+	 *
+	 * @param view The view to be focused
+	 * @param childrenFocusDirection The direction of the focus if the view has focusable children.
+	 * @returns
 	 */
-	private _focus( view: FocusableView | null ) {
-		if ( view ) {
+	private _focus( view: FocusableView | null, childrenFocusDirection: 1 | -1 ) {
+		if ( !view ) {
+			return;
+		}
+
+		if ( isViewWithFocusableChildren( view ) ) {
+			if ( childrenFocusDirection === 1 ) {
+				view.focusFirst();
+			} else if ( childrenFocusDirection === -1 ) {
+				view.focusLast();
+			}
+		} else {
 			view.focus();
 		}
 	}
@@ -276,7 +305,7 @@ export default class FocusCycler {
 		do {
 			const view = this.focusables.get( index )!;
 
-			if ( isFocusable( view ) ) {
+			if ( isPlainFocusableView( view ) ) {
 				return view as FocusableView;
 			}
 
@@ -288,12 +317,16 @@ export default class FocusCycler {
 	}
 }
 
-/**
- * A {@link module:ui/view~View} that can be focused, meaning it has a `focus()` method.
- */
-export interface FocusableView extends View {
+export type FocusableView = SimpleFocusableView	| ViewWithFocusableChildren;
+
+export type SimpleFocusableView = View & {
 	focus(): void;
-}
+};
+
+export type ViewWithFocusableChildren = SimpleFocusableView & {
+	focusFirst(): void;
+	focusLast(): void;
+};
 
 export interface FocusCyclerActions {
 	focusFirst?: ArrayOrItem<string>;
@@ -302,11 +335,40 @@ export interface FocusCyclerActions {
 	focusPrevious?: ArrayOrItem<string>;
 }
 
+/**
+ * Fired when the focus cycler is about to move the focus from the last focusable item
+ * to the first one.
+ *
+ * @eventName ~FocusCycler#forwardCycle
+ */
+export type FocusCyclerForwardCycleEvent = {
+	name: 'forwardCycle';
+	args: [];
+};
+
+/**
+ * Fired when the focus cycler is about to move the focus from the first focusable item
+ * to the last one.
+ *
+ * @eventName ~FocusCycler#backwardCycle
+ */
+export type FocusCyclerBackwardCycleEvent = {
+	name: 'backwardCycle';
+	args: [];
+};
+
 /**
  * Checks whether a view is focusable.
  *
  * @param view A view to be checked.
  */
-function isFocusable( view: View & { focus?: unknown } ) {
-	return !!( view.focus && isVisible( view.element ) );
+function isPlainFocusableView( view: View ): view is SimpleFocusableView {
+	return !!( 'focus' in view && isVisible( view.element ) );
+}
+
+/**
+ * Checks whether the view meets the requirements of the {@link ViewWithFocusableChildren} interface.
+ */
+function isViewWithFocusableChildren( view: View ): view is ViewWithFocusableChildren {
+	return isPlainFocusableView( view ) && 'focusFirst' in view && 'focusLast' in view;
 }
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 0e217e089cb..36c7fa917d9 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -49,7 +49,14 @@ export { default as BoxedEditorUIView } from './editorui/boxed/boxededitoruiview
 export { default as InlineEditableUIView } from './editableui/inline/inlineeditableuiview';
 
 export { default as FormHeaderView } from './formheader/formheaderview';
-export { default as FocusCycler, type FocusableView } from './focuscycler';
+export {
+	default as FocusCycler,
+	type FocusableView,
+	type SimpleFocusableView,
+	type ViewWithFocusableChildren,
+	type FocusCyclerForwardCycleEvent,
+	type FocusCyclerBackwardCycleEvent
+} from './focuscycler';
 
 export { default as IconView } from './icon/iconview';
 export { default as InputView } from './input/inputview';
diff --git a/packages/ckeditor5-ui/src/list/listview.ts b/packages/ckeditor5-ui/src/list/listview.ts
index 5a77687ba48..14fdc21810a 100644
--- a/packages/ckeditor5-ui/src/list/listview.ts
+++ b/packages/ckeditor5-ui/src/list/listview.ts
@@ -185,6 +185,13 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 		this._focusCycler.focusFirst();
 	}
 
+	/**
+	 * Focuses the first focusable in {@link #items}.
+	 */
+	public focusFirst(): void {
+		this._focusCycler.focusFirst();
+	}
+
 	/**
 	 * Focuses the last focusable in {@link #items}.
 	 */
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index 4dcc657a95c..e64687f5ff1 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -3,8 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import type { FocusableView } from '../focuscycler';
-import type View from '../view';
+import type { ViewWithFocusableChildren } from '../focuscycler';
 
 /**
  * @module ui/search/filteredview
@@ -13,7 +12,7 @@ import type View from '../view';
 /**
  * A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
  */
-export default interface FilteredView extends View, FocusableView {
+export default interface FilteredView extends ViewWithFocusableChildren {
 
 	/**
 	 * Filters the view by the given regular expression.
diff --git a/packages/ckeditor5-ui/src/search/searchinfoview.ts b/packages/ckeditor5-ui/src/search/searchinfoview.ts
index a47624a7fa9..53584fccb32 100644
--- a/packages/ckeditor5-ui/src/search/searchinfoview.ts
+++ b/packages/ckeditor5-ui/src/search/searchinfoview.ts
@@ -7,6 +7,7 @@
  * @module ui/search/searchinfoview
 */
 
+import type { SimpleFocusableView } from '../focuscycler';
 import View from '../view';
 
 /**
@@ -14,7 +15,7 @@ import View from '../view';
  *
  * @internal
  */
-export default class SearchInfoView extends View {
+export default class SearchInfoView extends View implements SimpleFocusableView {
 	/**
 	 * Controls whether the view is visible.
 	 *
@@ -60,7 +61,8 @@ export default class SearchInfoView extends View {
 					'ck',
 					'ck-search__info',
 					bind.if( 'isVisible', 'ck-hidden', value => !value )
-				]
+				],
+				tabindex: -1
 			},
 			children: [
 				{
@@ -82,4 +84,11 @@ export default class SearchInfoView extends View {
 			]
 		} );
 	}
+
+	/**
+	 * Focuses the view
+	 */
+	public focus(): void {
+		this.element!.focus();
+	}
 }
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index 9183b06c79a..b4f592d5efd 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -9,13 +9,20 @@
 
 import View from '../view';
 import type ViewCollection from '../viewcollection';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import type { FocusableView } from '../focuscycler';
+import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
+import { default as FocusCycler, type ViewWithFocusableChildren } from '../focuscycler';
 
 /**
  * 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 implements FocusableView {
+export default class SearchResultsView extends View implements ViewWithFocusableChildren {
+	/**
+	 * Tracks information about the DOM focus in the view.
+	 *
+	 * @readonly
+	 */
+	public focusTracker: FocusTracker;
+
 	/**
 	 * The collection of the child views inside of the list item {@link #element}.
 	 *
@@ -23,6 +30,13 @@ export default class SearchResultsView extends View implements FocusableView {
 	 */
 	public children: ViewCollection;
 
+	/**
+	 * Provides the focus management (keyboard navigation) in the view.
+	 *
+	 * @readonly
+	 */
+	protected _focusCycler: FocusCycler;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -30,6 +44,7 @@ export default class SearchResultsView extends View implements FocusableView {
 		super( locale );
 
 		this.children = this.createCollection();
+		this.focusTracker = new FocusTracker();
 
 		this.setTemplate( {
 			tag: 'div',
@@ -42,16 +57,42 @@ export default class SearchResultsView extends View implements FocusableView {
 			},
 			children: this.children
 		} );
+
+		this._focusCycler = new FocusCycler( {
+			focusables: this.children,
+			focusTracker: this.focusTracker
+		} );
 	}
 
 	/**
-	 * Focuses the first child view.
+	 * @inheritDoc
 	 */
-	public focus(): void {
-		const firstFocusableChild = this.children.find( ( child: any ) => typeof child.focus === 'function' );
+	public override render(): void {
+		super.render();
 
-		if ( firstFocusableChild ) {
-			( firstFocusableChild as FocusableView ).focus();
+		for ( const child of this.children ) {
+			this.focusTracker.add( child.element! );
 		}
 	}
+
+	/**
+	 * Focuses the view.
+	 */
+	public focus(): void {
+		this._focusCycler.focusFirst();
+	}
+
+	/**
+	 * Focuses the first child view.
+	 */
+	public focusFirst(): void {
+		this._focusCycler.focusFirst();
+	}
+
+	/**
+	 * Focuses the last child view.
+	 */
+	public focusLast(): void {
+		this._focusCycler.focusLast();
+	}
 }
diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 05714bb5c1c..2f867adf05b 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -122,7 +122,7 @@ export default class SearchTextView<
 	 *
 	 * @readonly
 	 */
-	private _focusCycler: FocusCycler;
+	protected _focusCycler: FocusCycler;
 
 	/**
 	 * The cached configuration object.
diff --git a/packages/ckeditor5-ui/tests/focuscycler.js b/packages/ckeditor5-ui/tests/focuscycler.js
index de3240ec7f7..4b86683a959 100644
--- a/packages/ckeditor5-ui/tests/focuscycler.js
+++ b/packages/ckeditor5-ui/tests/focuscycler.js
@@ -404,6 +404,25 @@ describe( 'FocusCycler', () => {
 				cycler.focusNext();
 			} ).to.not.throw();
 		} );
+
+		it( 'fires an event while making full cycle back to the beginning', () => {
+			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+
+			const forwardCycleSpy = sinon.spy();
+			const backwardCycleSpy = sinon.spy();
+
+			cycler.on( 'forwardCycle', forwardCycleSpy );
+			cycler.on( 'backwardCycle', backwardCycleSpy );
+
+			cycler.focusNext();
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+			cycler.focusNext();
+
+			sinon.assert.calledOnce( forwardCycleSpy );
+			sinon.assert.notCalled( backwardCycleSpy );
+		} );
 	} );
 
 	describe( 'focusPrevious()', () => {
@@ -431,6 +450,25 @@ describe( 'FocusCycler', () => {
 				cycler.focusPrevious();
 			} ).to.not.throw();
 		} );
+
+		it( 'fires an event while making full cycle back to the end', () => {
+			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			const forwardCycleSpy = sinon.spy();
+			const backwardCycleSpy = sinon.spy();
+
+			cycler.on( 'forwardCycle', forwardCycleSpy );
+			cycler.on( 'backwardCycle', backwardCycleSpy );
+
+			cycler.focusPrevious();
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+			cycler.focusPrevious();
+
+			sinon.assert.notCalled( forwardCycleSpy );
+			sinon.assert.calledOnce( backwardCycleSpy );
+		} );
 	} );
 
 	describe( 'keystrokes', () => {
diff --git a/packages/ckeditor5-ui/tests/list/listview.js b/packages/ckeditor5-ui/tests/list/listview.js
index 5465dc0b57e..fea82908cef 100644
--- a/packages/ckeditor5-ui/tests/list/listview.js
+++ b/packages/ckeditor5-ui/tests/list/listview.js
@@ -425,6 +425,24 @@ describe( 'ListView', () => {
 		} );
 	} );
 
+	describe( 'focusFirst()', () => {
+		it( 'focuses the first focusable item in DOM', () => {
+			// No children to focus.
+			view.focusFirst();
+
+			// The second child is focusable.
+			view.items.add( nonFocusable() );
+			view.items.add( focusable() );
+			view.items.add( focusable() );
+			view.items.add( nonFocusable() );
+
+			const spy = sinon.spy( view.items.get( 1 ), 'focus' );
+			view.focusFirst();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+
 	describe( 'focusLast()', () => {
 		it( 'focuses the last focusable item in DOM', () => {
 			// No children to focus.
@@ -433,9 +451,10 @@ describe( 'ListView', () => {
 			// The second child is focusable.
 			view.items.add( nonFocusable() );
 			view.items.add( focusable() );
+			view.items.add( focusable() );
 			view.items.add( nonFocusable() );
 
-			const spy = sinon.spy( view.items.get( 1 ), 'focus' );
+			const spy = sinon.spy( view.items.get( 2 ), 'focus' );
 			view.focusLast();
 
 			sinon.assert.calledOnce( spy );
diff --git a/packages/ckeditor5-ui/tests/search/searchinfoview.js b/packages/ckeditor5-ui/tests/search/searchinfoview.js
index 616be942776..6918fb53db2 100644
--- a/packages/ckeditor5-ui/tests/search/searchinfoview.js
+++ b/packages/ckeditor5-ui/tests/search/searchinfoview.js
@@ -51,4 +51,14 @@ describe( 'SearchInfoView', () => {
 			expect( view.element.innerHTML ).to.equal( '<span></span><span>bar</span>' );
 		} );
 	} );
+
+	describe( 'focus()', () => {
+		it( 'should focus #element', () => {
+			const spy = sinon.spy( view.element, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
 } );
diff --git a/packages/ckeditor5-ui/tests/search/searchresultsview.js b/packages/ckeditor5-ui/tests/search/searchresultsview.js
index 1d3e5cee8ad..c9ffd3f261a 100644
--- a/packages/ckeditor5-ui/tests/search/searchresultsview.js
+++ b/packages/ckeditor5-ui/tests/search/searchresultsview.js
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global document */
+
 import { Locale } from '@ckeditor/ckeditor5-utils';
 import SearchResultsView from '../../src/search/searchresultsview';
 
@@ -18,11 +20,15 @@ describe( 'SearchResultsView', () => {
 		locale = new Locale();
 
 		view = new SearchResultsView( locale );
+		view.children.addMany( [ createNonFocusableView(), createFocusableView(), createFocusableView() ] );
 		view.render();
+
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
 		view.destroy();
+		view.element.remove();
 	} );
 
 	describe( 'constructor()', () => {
@@ -47,16 +53,45 @@ describe( 'SearchResultsView', () => {
 		} );
 
 		it( 'focuses first focusable view in #children', () => {
-			const firstChild = new View();
-			const firstFocusableChild = new View();
+			view.focus();
 
-			firstFocusableChild.focus = sinon.spy();
+			sinon.assert.calledOnce( view.children.get( 1 ).focus );
+		} );
+	} );
 
-			view.children.addMany( [ firstChild, firstFocusableChild ] );
+	describe( 'focusFirst()', () => {
+		it( 'focuses first focusable view in #children', () => {
+			view.focusFirst();
 
-			view.focus();
+			sinon.assert.calledOnce( view.children.get( 1 ).focus );
+		} );
+	} );
 
-			sinon.assert.calledOnce( firstFocusableChild.focus );
+	describe( 'focusLast()', () => {
+		it( 'focuses first focusable view in #children', () => {
+			view.focusLast();
+
+			sinon.assert.calledOnce( view.children.get( 2 ).focus );
 		} );
 	} );
+
+	function createFocusableView( name ) {
+		const view = createNonFocusableView();
+
+		view.name = name;
+		view.focus = () => view.element.focus();
+		sinon.spy( view, 'focus' );
+
+		return view;
+	}
+
+	function createNonFocusableView() {
+		const view = new View();
+
+		view.element = document.createElement( 'div' );
+		view.element.textContent = 'foo';
+		document.body.appendChild( view.element );
+
+		return view;
+	}
 } );
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index 8d76ba43eb6..0d7bb373f84 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -413,7 +413,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = view.queryView.element;
 
-					const spy = sinon.spy( view.resultsView, 'focus' );
+					const spy = sinon.spy( view.resultsView, 'focusFirst' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -433,7 +433,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = filteredView.element;
 
-					const spy = sinon.spy( view.resultsView, 'focus' );
+					const spy = sinon.spy( view.resultsView, 'focusLast' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );

From f1434058ce2058292efb1a79f4483d178e00d0f6 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Fri, 22 Sep 2023 15:45:57 +0200
Subject: [PATCH 75/84] Docs.

---
 packages/ckeditor5-ui/src/focuscycler.ts           | 14 +++++++++-----
 packages/ckeditor5-ui/src/index.ts                 |  1 -
 packages/ckeditor5-ui/src/search/searchinfoview.ts |  4 ++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/ckeditor5-ui/src/focuscycler.ts b/packages/ckeditor5-ui/src/focuscycler.ts
index e8d8f6157fb..3030d6f167d 100644
--- a/packages/ckeditor5-ui/src/focuscycler.ts
+++ b/packages/ckeditor5-ui/src/focuscycler.ts
@@ -317,13 +317,17 @@ export default class FocusCycler extends EmitterMixin() {
 	}
 }
 
-export type FocusableView = SimpleFocusableView	| ViewWithFocusableChildren;
-
-export type SimpleFocusableView = View & {
+/**
+ * A view that can be focused.
+ */
+export type FocusableView = View & {
 	focus(): void;
 };
 
-export type ViewWithFocusableChildren = SimpleFocusableView & {
+/**
+ * A view that can be focused and contains some children that also can be focused.
+ */
+export type ViewWithFocusableChildren = FocusableView & {
 	focusFirst(): void;
 	focusLast(): void;
 };
@@ -362,7 +366,7 @@ export type FocusCyclerBackwardCycleEvent = {
  *
  * @param view A view to be checked.
  */
-function isPlainFocusableView( view: View ): view is SimpleFocusableView {
+function isPlainFocusableView( view: View ): view is FocusableView {
 	return !!( 'focus' in view && isVisible( view.element ) );
 }
 
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 36c7fa917d9..db5795e756c 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -52,7 +52,6 @@ export { default as FormHeaderView } from './formheader/formheaderview';
 export {
 	default as FocusCycler,
 	type FocusableView,
-	type SimpleFocusableView,
 	type ViewWithFocusableChildren,
 	type FocusCyclerForwardCycleEvent,
 	type FocusCyclerBackwardCycleEvent
diff --git a/packages/ckeditor5-ui/src/search/searchinfoview.ts b/packages/ckeditor5-ui/src/search/searchinfoview.ts
index 53584fccb32..3e7ddeff1bb 100644
--- a/packages/ckeditor5-ui/src/search/searchinfoview.ts
+++ b/packages/ckeditor5-ui/src/search/searchinfoview.ts
@@ -7,7 +7,7 @@
  * @module ui/search/searchinfoview
 */
 
-import type { SimpleFocusableView } from '../focuscycler';
+import type { FocusableView } from '../focuscycler';
 import View from '../view';
 
 /**
@@ -15,7 +15,7 @@ import View from '../view';
  *
  * @internal
  */
-export default class SearchInfoView extends View implements SimpleFocusableView {
+export default class SearchInfoView extends View implements FocusableView {
 	/**
 	 * Controls whether the view is visible.
 	 *

From 513cccc1d09d51b12167b22ce068755f0b065867 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 13:54:20 +0200
Subject: [PATCH 76/84] Made SearchTextView#focusCycler a public property.

---
 packages/ckeditor5-ui/src/search/text/searchtextview.ts   | 4 ++--
 packages/ckeditor5-ui/tests/search/text/searchtextview.js | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ckeditor5-ui/src/search/text/searchtextview.ts b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
index 2f867adf05b..6f44963aeb1 100644
--- a/packages/ckeditor5-ui/src/search/text/searchtextview.ts
+++ b/packages/ckeditor5-ui/src/search/text/searchtextview.ts
@@ -122,7 +122,7 @@ export default class SearchTextView<
 	 *
 	 * @readonly
 	 */
-	protected _focusCycler: FocusCycler;
+	public focusCycler: FocusCycler;
 
 	/**
 	 * The cached configuration object.
@@ -169,7 +169,7 @@ export default class SearchTextView<
 
 		this.resultsView.children.addMany( [ this.infoView, this.filteredView ] );
 
-		this._focusCycler = new FocusCycler( {
+		this.focusCycler = new FocusCycler( {
 			focusables: this.focusableChildren,
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
diff --git a/packages/ckeditor5-ui/tests/search/text/searchtextview.js b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
index 0d7bb373f84..0cb0388bfbe 100644
--- a/packages/ckeditor5-ui/tests/search/text/searchtextview.js
+++ b/packages/ckeditor5-ui/tests/search/text/searchtextview.js
@@ -85,8 +85,8 @@ describe( 'SearchTextView', () => {
 			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
 		} );
 
-		it( 'creates and instance of FocusCycle', () => {
-			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		it( 'creates and instance of FocusCycler', () => {
+			expect( view.focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
 		it( 'assigns an instance of a view to #filteredView', () => {
@@ -413,7 +413,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = view.queryView.element;
 
-					const spy = sinon.spy( view.resultsView, 'focusFirst' );
+					const spy = sinon.spy( view.resultsView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -433,7 +433,7 @@ describe( 'SearchTextView', () => {
 					view.focusTracker.isFocused = true;
 					view.focusTracker.focusedElement = filteredView.element;
 
-					const spy = sinon.spy( view.resultsView, 'focusLast' );
+					const spy = sinon.spy( view.resultsView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );

From 4a2c9154b46aa8b01246fb3ec8a6b7213e186283 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 13:55:07 +0200
Subject: [PATCH 77/84] Streamlined nested focus cycling by moving the logic to
 the component implementing the focus() method.

---
 packages/ckeditor5-ui/src/focuscycler.ts      | 70 +++++++-------
 packages/ckeditor5-ui/src/index.ts            |  1 -
 .../ckeditor5-ui/src/search/filteredview.ts   |  4 +-
 .../src/search/searchresultsview.ts           |  4 +-
 packages/ckeditor5-ui/tests/focuscycler.js    | 92 ++++++++++++++-----
 5 files changed, 109 insertions(+), 62 deletions(-)

diff --git a/packages/ckeditor5-ui/src/focuscycler.ts b/packages/ckeditor5-ui/src/focuscycler.ts
index 3030d6f167d..40c457b18be 100644
--- a/packages/ckeditor5-ui/src/focuscycler.ts
+++ b/packages/ckeditor5-ui/src/focuscycler.ts
@@ -140,6 +140,9 @@ export default class FocusCycler extends EmitterMixin() {
 				}
 			}
 		}
+
+		this.on<FocusCyclerForwardCycleEvent>( 'forwardCycle', () => this.focusFirst(), { priority: 'low' } );
+		this.on<FocusCyclerBackwardCycleEvent>( 'backwardCycle', () => this.focusLast(), { priority: 'low' } );
 	}
 
 	/**
@@ -149,7 +152,7 @@ export default class FocusCycler extends EmitterMixin() {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public get first(): FocusableView | null {
-		return ( this.focusables.find( isPlainFocusableView ) || null ) as FocusableView | null;
+		return ( this.focusables.find( isFocusable ) || null ) as FocusableView | null;
 	}
 
 	/**
@@ -159,7 +162,7 @@ export default class FocusCycler extends EmitterMixin() {
 	 * **Note**: Hidden views (e.g. with `display: none`) are ignored.
 	 */
 	public get last(): FocusableView | null {
-		return ( this.focusables.filter( isPlainFocusableView ).slice( -1 )[ 0 ] || null ) as FocusableView | null;
+		return ( this.focusables.filter( isFocusable ).slice( -1 )[ 0 ] || null ) as FocusableView | null;
 	}
 
 	/**
@@ -233,10 +236,14 @@ export default class FocusCycler extends EmitterMixin() {
 	public focusNext(): void {
 		const next = this.next;
 
-		this._focus( next, 1 );
+		if ( next && this.focusables.getIndex( next ) === this.current ) {
+			return;
+		}
 
-		if ( next == this.first ) {
+		if ( next === this.first ) {
 			this.fire<FocusCyclerForwardCycleEvent>( 'forwardCycle' );
+		} else {
+			this._focus( next, 1 );
 		}
 	}
 
@@ -248,10 +255,14 @@ export default class FocusCycler extends EmitterMixin() {
 	public focusPrevious(): void {
 		const previous = this.previous;
 
-		this._focus( previous, -1 );
+		if ( previous && this.focusables.getIndex( previous ) === this.current ) {
+			return;
+		}
 
-		if ( previous == this.last ) {
+		if ( previous === this.last ) {
 			this.fire<FocusCyclerBackwardCycleEvent>( 'backwardCycle' );
+		} else {
+			this._focus( previous, -1 );
 		}
 	}
 
@@ -259,23 +270,15 @@ export default class FocusCycler extends EmitterMixin() {
 	 * Focuses the given view if it exists.
 	 *
 	 * @param view The view to be focused
-	 * @param childrenFocusDirection The direction of the focus if the view has focusable children.
+	 * @param direction The direction of the focus if the view has focusable children.
 	 * @returns
 	 */
-	private _focus( view: FocusableView | null, childrenFocusDirection: 1 | -1 ) {
+	private _focus( view: FocusableView | null, direction: 1 | -1 ) {
 		if ( !view ) {
 			return;
 		}
 
-		if ( isViewWithFocusableChildren( view ) ) {
-			if ( childrenFocusDirection === 1 ) {
-				view.focusFirst();
-			} else if ( childrenFocusDirection === -1 ) {
-				view.focusLast();
-			}
-		} else {
-			view.focus();
-		}
+		view.focus( direction );
 	}
 
 	/**
@@ -305,8 +308,8 @@ export default class FocusCycler extends EmitterMixin() {
 		do {
 			const view = this.focusables.get( index )!;
 
-			if ( isPlainFocusableView( view ) ) {
-				return view as FocusableView;
+			if ( isFocusable( view ) ) {
+				return view;
 			}
 
 			// Cycle in both directions.
@@ -321,15 +324,19 @@ export default class FocusCycler extends EmitterMixin() {
  * A view that can be focused.
  */
 export type FocusableView = View & {
-	focus(): void;
-};
 
-/**
- * A view that can be focused and contains some children that also can be focused.
- */
-export type ViewWithFocusableChildren = FocusableView & {
-	focusFirst(): void;
-	focusLast(): void;
+	/**
+	 * Focuses the view.
+	 *
+	 * @param direction This optional parameter helps improve the UX by providing additional information about the direction the focus moved
+	 * (e.g. in a complex view or a form). It is useful for views that host multiple focusable children (e.g. lists, toolbars):
+	 * * `1` indicates that the focus moved forward and, in most cases, the first child of the focused view should get focused,
+	 * * `-1` indicates that the focus moved backwards, and the last focusable child should get focused
+	 *
+	 * See {@link module:ui/focuscycler~FocusCycler#forwardCycle} and {@link module:ui/focuscycler~FocusCycler#backwardCycle} to
+	 * learn more.
+	 */
+	focus( direction?: 1 | -1 ): void;
 };
 
 export interface FocusCyclerActions {
@@ -366,13 +373,6 @@ export type FocusCyclerBackwardCycleEvent = {
  *
  * @param view A view to be checked.
  */
-function isPlainFocusableView( view: View ): view is FocusableView {
+function isFocusable( view: View ): view is FocusableView {
 	return !!( 'focus' in view && isVisible( view.element ) );
 }
-
-/**
- * Checks whether the view meets the requirements of the {@link ViewWithFocusableChildren} interface.
- */
-function isViewWithFocusableChildren( view: View ): view is ViewWithFocusableChildren {
-	return isPlainFocusableView( view ) && 'focusFirst' in view && 'focusLast' in view;
-}
diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index db5795e756c..385ae42283f 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -52,7 +52,6 @@ export { default as FormHeaderView } from './formheader/formheaderview';
 export {
 	default as FocusCycler,
 	type FocusableView,
-	type ViewWithFocusableChildren,
 	type FocusCyclerForwardCycleEvent,
 	type FocusCyclerBackwardCycleEvent
 } from './focuscycler';
diff --git a/packages/ckeditor5-ui/src/search/filteredview.ts b/packages/ckeditor5-ui/src/search/filteredview.ts
index e64687f5ff1..c56a5023e61 100644
--- a/packages/ckeditor5-ui/src/search/filteredview.ts
+++ b/packages/ckeditor5-ui/src/search/filteredview.ts
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import type { ViewWithFocusableChildren } from '../focuscycler';
+import type { FocusableView } from '../focuscycler';
 
 /**
  * @module ui/search/filteredview
@@ -12,7 +12,7 @@ import type { ViewWithFocusableChildren } from '../focuscycler';
 /**
  * A view that can be filtered by a {@link module:ui/search/text/searchtextview~SearchTextView}.
  */
-export default interface FilteredView extends ViewWithFocusableChildren {
+export default interface FilteredView extends FocusableView {
 
 	/**
 	 * Filters the view by the given regular expression.
diff --git a/packages/ckeditor5-ui/src/search/searchresultsview.ts b/packages/ckeditor5-ui/src/search/searchresultsview.ts
index b4f592d5efd..6be5d080d84 100644
--- a/packages/ckeditor5-ui/src/search/searchresultsview.ts
+++ b/packages/ckeditor5-ui/src/search/searchresultsview.ts
@@ -10,12 +10,12 @@
 import View from '../view';
 import type ViewCollection from '../viewcollection';
 import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
-import { default as FocusCycler, type ViewWithFocusableChildren } from '../focuscycler';
+import { default as FocusCycler, type FocusableView } from '../focuscycler';
 
 /**
  * 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 implements ViewWithFocusableChildren {
+export default class SearchResultsView extends View implements FocusableView {
 	/**
 	 * Tracks information about the DOM focus in the view.
 	 *
diff --git a/packages/ckeditor5-ui/tests/focuscycler.js b/packages/ckeditor5-ui/tests/focuscycler.js
index 4b86683a959..b08d765fe65 100644
--- a/packages/ckeditor5-ui/tests/focuscycler.js
+++ b/packages/ckeditor5-ui/tests/focuscycler.js
@@ -13,7 +13,7 @@ import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'FocusCycler', () => {
-	let focusables, focusTracker, cycler;
+	let focusables, focusTracker, cycler, viewIndex;
 
 	testUtils.createSinonSandbox();
 
@@ -32,6 +32,7 @@ describe( 'FocusCycler', () => {
 			focusables,
 			focusTracker
 		} );
+		viewIndex = 0;
 	} );
 
 	afterEach( () => {
@@ -405,6 +406,15 @@ describe( 'FocusCycler', () => {
 			} ).to.not.throw();
 		} );
 
+		it( 'does not refocus if there is only one focusable item', () => {
+			focusables = new ViewCollection( [ focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			cycler.focusNext();
+			sinon.assert.notCalled( focusables.get( 0 ).focus );
+		} );
+
 		it( 'fires an event while making full cycle back to the beginning', () => {
 			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -423,6 +433,20 @@ describe( 'FocusCycler', () => {
 			sinon.assert.calledOnce( forwardCycleSpy );
 			sinon.assert.notCalled( backwardCycleSpy );
 		} );
+
+		it( 'fires an event that allows custom behavior once stopped on the normal priority', () => {
+			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 2 ).element;
+
+			cycler.on( 'forwardCycle', evt => {
+				evt.stop();
+			} );
+
+			cycler.focusNext();
+
+			sinon.assert.notCalled( focusables.get( 0 ).focus );
+		} );
 	} );
 
 	describe( 'focusPrevious()', () => {
@@ -451,6 +475,15 @@ describe( 'FocusCycler', () => {
 			} ).to.not.throw();
 		} );
 
+		it( 'does not refocus if there is only one focusable item', () => {
+			focusables = new ViewCollection( [ focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			cycler.focusPrevious();
+			sinon.assert.notCalled( focusables.get( 0 ).focus );
+		} );
+
 		it( 'fires an event while making full cycle back to the end', () => {
 			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
 			cycler = new FocusCycler( { focusables, focusTracker } );
@@ -469,6 +502,20 @@ describe( 'FocusCycler', () => {
 			sinon.assert.notCalled( forwardCycleSpy );
 			sinon.assert.calledOnce( backwardCycleSpy );
 		} );
+
+		it( 'fires an event that allows custom behavior once stopped on the normal priority', () => {
+			focusables = new ViewCollection( [ focusable(), focusable(), focusable() ] );
+			cycler = new FocusCycler( { focusables, focusTracker } );
+			focusTracker.focusedElement = focusables.get( 0 ).element;
+
+			cycler.on( 'backwardCycle', evt => {
+				evt.stop();
+			} );
+
+			cycler.focusPrevious();
+
+			sinon.assert.notCalled( focusables.get( 2 ).focus );
+		} );
 	} );
 
 	describe( 'keystrokes', () => {
@@ -534,30 +581,31 @@ describe( 'FocusCycler', () => {
 			sinon.assert.calledOnce( keyEvtData.stopPropagation );
 		} );
 	} );
-} );
 
-function nonFocusable( { display = 'block', isDetached = false, hiddenParent = false } = {} ) {
-	const view = new View();
-	view.element = document.createElement( 'div' );
-	view.element.setAttribute( 'focus-cycler-test-element', true );
-	view.element.style.display = display;
-
-	if ( hiddenParent ) {
-		const invisibleParent = document.createElement( 'div' );
-		invisibleParent.style.display = 'none';
-		invisibleParent.appendChild( view.element );
-		document.body.appendChild( invisibleParent );
-	} else if ( !isDetached ) {
-		document.body.appendChild( view.element );
+	function nonFocusable( { display = 'block', isDetached = false, hiddenParent = false } = {} ) {
+		const view = new View();
+		view.element = document.createElement( 'div' );
+		view.element.setAttribute( 'focus-cycler-test-element', viewIndex++ );
+		view.element.style.display = display;
+
+		if ( hiddenParent ) {
+			const invisibleParent = document.createElement( 'div' );
+			invisibleParent.style.display = 'none';
+			invisibleParent.appendChild( view.element );
+			document.body.appendChild( invisibleParent );
+		} else if ( !isDetached ) {
+			document.body.appendChild( view.element );
+		}
+
+		return view;
 	}
 
-	return view;
-}
+	function focusable( ...args ) {
+		const view = nonFocusable( ...args );
 
-function focusable( ...args ) {
-	const view = nonFocusable( ...args );
+		view.focus = sinon.spy();
 
-	view.focus = sinon.spy();
+		return view;
+	}
+} );
 
-	return view;
-}

From b8f49ad3b4ac5dec7b97a3c2f43a4f27a9a96683 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 13:57:20 +0200
Subject: [PATCH 78/84] Code refactoring.

---
 packages/ckeditor5-ui/src/focuscycler.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-ui/src/focuscycler.ts b/packages/ckeditor5-ui/src/focuscycler.ts
index 40c457b18be..2cf4b37456b 100644
--- a/packages/ckeditor5-ui/src/focuscycler.ts
+++ b/packages/ckeditor5-ui/src/focuscycler.ts
@@ -274,11 +274,9 @@ export default class FocusCycler extends EmitterMixin() {
 	 * @returns
 	 */
 	private _focus( view: FocusableView | null, direction: 1 | -1 ) {
-		if ( !view ) {
-			return;
+		if ( view ) {
+			view.focus( direction );
 		}
-
-		view.focus( direction );
 	}
 
 	/**

From 7fc57b702dc3764d20be7c65f64f85fe1caf0ad6 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 14:34:03 +0200
Subject: [PATCH 79/84] Apply suggestions from code review

Co-authored-by: Szymon Cofalik <s.cofalik@cksource.com>
---
 .../src/highlightedtext/highlightedtextview.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
index 86a7d21cff6..f93d007ebbe 100644
--- a/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
+++ b/packages/ckeditor5-ui/src/highlightedtext/highlightedtextview.ts
@@ -53,7 +53,7 @@ export default class HighlightedTextView extends View {
 	}
 
 	/**
-	 * Highlights view's {@link #text} according to the specified RegExp. If the passed RegExp is `null`, the
+	 * Highlights view's {@link #text} according to the specified `RegExp`. If the passed RegExp is `null`, the
 	 * highlighting is removed
 	 *
 	 * @param regExp
@@ -63,7 +63,7 @@ export default class HighlightedTextView extends View {
 	}
 
 	/**
-	 * Updates element's innerHTML with the passed content.
+	 * Updates element's `innerHTML` with the passed content.
 	 */
 	private _updateInnerHTML( newInnerHTML: string | undefined ) {
 		this.element!.innerHTML = newInnerHTML || '';
@@ -71,11 +71,11 @@ export default class HighlightedTextView extends View {
 }
 
 /**
- * Replaces RegExp occurrences with <mark> tags in a text.
+ * Replaces `regExp` occurrences with `<mark>` tags in a text.
  *
  * @param text A text to get marked.
- * @param regExp An optional RegExp. If not passed, this is a pass-through function.
- * @returns A text with RegExp occurrences marked by <mark>.
+ * @param regExp An optional `RegExp`. If not passed, this is a pass-through function.
+ * @returns A text with `RegExp` occurrences marked by `<mark>`.
  */
 function markText( text: string, regExp?: RegExp | null ) {
 	if ( !regExp ) {

From 5f9bc87e73967a546414dc295bc1303dd0d474c8 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 15:36:04 +0200
Subject: [PATCH 80/84] Implemented nested focus cycling navigation in the
 table (call)properties view using the FocusCycler events.

---
 .../ui/tablecellpropertiesview.ts             | 19 ++++++--
 .../tableproperties/ui/tablepropertiesview.ts | 19 ++++++--
 .../ckeditor5-table/src/ui/colorinputview.ts  | 39 +++++++++-------
 .../ui/tablecellpropertiesview.js             | 45 ++++++++++++++++++-
 .../tableproperties/ui/tablepropertiesview.js | 45 ++++++++++++++++++-
 .../tests/ui/colorinputview.js                | 43 ++++++++++--------
 .../src/labeledfield/labeledfieldview.ts      |  4 +-
 .../tests/labeledfield/labeledfieldview.js    |  8 ++++
 8 files changed, 174 insertions(+), 48 deletions(-)

diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts
index a79229a7787..19bebde3410 100644
--- a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts
+++ b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts
@@ -22,7 +22,9 @@ import {
 	ViewCollection,
 	type FocusableView,
 	type NormalizedColorOption,
-	type ColorPickerConfig
+	type ColorPickerConfig,
+	type FocusCyclerBackwardCycleEvent,
+	type FocusCyclerForwardCycleEvent
 } from 'ckeditor5/src/ui';
 import {
 	KeystrokeHandler,
@@ -390,13 +392,24 @@ export default class TableCellPropertiesView extends View {
 			view: this
 		} );
 
+		// Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
+		[ this.borderColorInput, this.backgroundInput ].forEach( view => {
+			view.fieldView.focusCycler.on<FocusCyclerForwardCycleEvent>( 'forwardCycle', evt => {
+				this._focusCycler.focusNext();
+				evt.stop();
+			} );
+
+			view.fieldView.focusCycler.on<FocusCyclerBackwardCycleEvent>( 'backwardCycle', evt => {
+				this._focusCycler.focusPrevious();
+				evt.stop();
+			} );
+		} );
+
 		[
 			this.borderStyleDropdown,
 			this.borderColorInput,
-			this.borderColorInput.fieldView.dropdownView.buttonView,
 			this.borderWidthInput,
 			this.backgroundInput,
-			this.backgroundInput.fieldView.dropdownView.buttonView,
 			this.widthInput,
 			this.heightInput,
 			this.paddingInput,
diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts
index af42ddff5bb..f0ef3c04092 100644
--- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts
+++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts
@@ -23,7 +23,9 @@ import {
 	type DropdownView,
 	type InputTextView,
 	type NormalizedColorOption,
-	type ColorPickerConfig
+	type ColorPickerConfig,
+	type FocusCyclerForwardCycleEvent,
+	type FocusCyclerBackwardCycleEvent
 } from 'ckeditor5/src/ui';
 import { FocusTracker, KeystrokeHandler, type ObservableChangeEvent, type Locale } from 'ckeditor5/src/utils';
 import { icons } from 'ckeditor5/src/core';
@@ -358,13 +360,24 @@ export default class TablePropertiesView extends View {
 			view: this
 		} );
 
+		// Maintain continuous focus cycling over views that have focusable children and focus cyclers themselves.
+		[ this.borderColorInput, this.backgroundInput ].forEach( view => {
+			view.fieldView.focusCycler.on<FocusCyclerForwardCycleEvent>( 'forwardCycle', evt => {
+				this._focusCycler.focusNext();
+				evt.stop();
+			} );
+
+			view.fieldView.focusCycler.on<FocusCyclerBackwardCycleEvent>( 'backwardCycle', evt => {
+				this._focusCycler.focusPrevious();
+				evt.stop();
+			} );
+		} );
+
 		[
 			this.borderStyleDropdown,
 			this.borderColorInput,
-			this.borderColorInput!.fieldView.dropdownView.buttonView,
 			this.borderWidthInput,
 			this.backgroundInput,
-			this.backgroundInput!.fieldView.dropdownView.buttonView,
 			this.widthInput,
 			this.heightInput,
 			this.alignmentToolbar,
diff --git a/packages/ckeditor5-table/src/ui/colorinputview.ts b/packages/ckeditor5-table/src/ui/colorinputview.ts
index f7dc0890836..5623065fa56 100644
--- a/packages/ckeditor5-table/src/ui/colorinputview.ts
+++ b/packages/ckeditor5-table/src/ui/colorinputview.ts
@@ -18,7 +18,8 @@ import {
 	type DropdownView,
 	type ColorPickerConfig,
 	type ColorSelectorExecuteEvent,
-	type ColorSelectorColorPickerCancelEvent
+	type ColorSelectorColorPickerCancelEvent,
+	type FocusableView
 } from 'ckeditor5/src/ui';
 
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils';
@@ -38,7 +39,7 @@ export type ColorInputViewOptions = {
  *
  * @internal
  */
-export default class ColorInputView extends View {
+export default class ColorInputView extends View implements FocusableView {
 	/**
 	 * The value of the input.
 	 *
@@ -87,6 +88,11 @@ export default class ColorInputView extends View {
 	 */
 	public readonly focusTracker: FocusTracker;
 
+	/**
+	 * Helps cycling over focusable children in the input view.
+	 */
+	public readonly focusCycler: FocusCycler;
+
 	/**
 	 * A collection of views that can be focused in the view.
 	 */
@@ -114,11 +120,6 @@ export default class ColorInputView extends View {
 	 */
 	protected _stillTyping: boolean;
 
-	/**
-	 * Helps cycling over focusable items in the view.
-	 */
-	protected readonly _focusCycler: FocusCycler;
-
 	/**
 	 * Creates an instance of the color input view.
 	 *
@@ -145,7 +146,7 @@ export default class ColorInputView extends View {
 		this.keystrokes = new KeystrokeHandler();
 		this._stillTyping = false;
 
-		this._focusCycler = new FocusCycler( {
+		this.focusCycler = new FocusCycler( {
 			focusables: this._focusables,
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
@@ -181,15 +182,23 @@ export default class ColorInputView extends View {
 	public override render(): void {
 		super.render();
 
-		// Start listening for the keystrokes coming from the dropdown panel view.
-		this.keystrokes.listenTo( this.dropdownView.panelView.element! );
+		[ this.inputView, this.dropdownView.buttonView ].forEach( view => {
+			this.focusTracker.add( view.element! );
+			this._focusables.add( view );
+		} );
+
+		this.keystrokes.listenTo( this.element! );
 	}
 
 	/**
-	 * Focuses the input.
+	 * Focuses the view.
 	 */
-	public focus(): void {
-		this.inputView.focus();
+	public focus( direction: 1 | -1 ): void {
+		if ( direction === -1 ) {
+			this.focusCycler.focusLast();
+		} else {
+			this.focusCycler.focusFirst();
+		}
 	}
 
 	/**
@@ -250,10 +259,6 @@ export default class ColorInputView extends View {
 		dropdown.panelView.children.add( colorSelector );
 		dropdown.bind( 'isEnabled' ).to( this, 'isReadOnly', value => !value );
 
-		this._focusables.add( colorSelector );
-
-		this.focusTracker.add( colorSelector.element! );
-
 		dropdown.on( 'change:isOpen', ( evt, name, isVisible ) => {
 			if ( isVisible ) {
 				colorSelector.updateSelectedColors();
diff --git a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
index 44d1d6e1b11..b9199ce90e8 100644
--- a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
+++ b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
@@ -695,10 +695,8 @@ describe( 'table cell properties', () => {
 				expect( view._focusables.map( f => f ) ).to.have.members( [
 					view.borderStyleDropdown,
 					view.borderColorInput,
-					view.borderColorInput.fieldView.dropdownView.buttonView,
 					view.borderWidthInput,
 					view.backgroundInput,
-					view.backgroundInput.fieldView.dropdownView.buttonView,
 					view.widthInput,
 					view.heightInput,
 					view.paddingInput,
@@ -775,6 +773,49 @@ describe( 'table cell properties', () => {
 					sinon.assert.calledOnce( keyEvtData.stopPropagation );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'providing seamless forward navigation over child views with their own focusable children and focus cyclers', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the border color dropdown button button is focused.
+					view.focusTracker.isFocused = view.borderColorInput.fieldView.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderColorInput.element;
+					view.borderColorInput.fieldView.focusTracker.focusedElement =
+						view.borderColorInput.fieldView.dropdownView.buttonView.element;
+
+					const spy = sinon.spy( view.borderWidthInput, 'focus' );
+
+					view.borderColorInput.fieldView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'providing seamless backward navigation over child views with their own focusable children and focus cyclers', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the border color dropdown input is focused.
+					view.focusTracker.isFocused = view.borderColorInput.fieldView.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderColorInput.element;
+					view.borderColorInput.fieldView.focusTracker.focusedElement =
+						view.borderColorInput.fieldView.inputView.element;
+
+					const spy = sinon.spy( view.borderStyleDropdown, 'focus' );
+
+					view.borderColorInput.fieldView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
 
diff --git a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
index 9a9b1b6fe97..d8e12701206 100644
--- a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
+++ b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js
@@ -630,10 +630,8 @@ describe( 'table properties', () => {
 				expect( view._focusables.map( f => f ) ).to.have.members( [
 					view.borderStyleDropdown,
 					view.borderColorInput,
-					view.borderColorInput.fieldView.dropdownView.buttonView,
 					view.borderWidthInput,
 					view.backgroundInput,
-					view.backgroundInput.fieldView.dropdownView.buttonView,
 					view.widthInput,
 					view.heightInput,
 					view.alignmentToolbar,
@@ -708,6 +706,49 @@ describe( 'table properties', () => {
 					sinon.assert.calledOnce( keyEvtData.stopPropagation );
 					sinon.assert.calledOnce( spy );
 				} );
+
+				it( 'providing seamless forward navigation over child views with their own focusable children and focus cyclers', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the border color dropdown button button is focused.
+					view.focusTracker.isFocused = view.borderColorInput.fieldView.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderColorInput.element;
+					view.borderColorInput.fieldView.focusTracker.focusedElement =
+						view.borderColorInput.fieldView.dropdownView.buttonView.element;
+
+					const spy = sinon.spy( view.borderWidthInput, 'focus' );
+
+					view.borderColorInput.fieldView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
+
+				it( 'providing seamless backward navigation over child views with their own focusable children and focus cyclers', () => {
+					const keyEvtData = {
+						keyCode: keyCodes.tab,
+						shiftKey: true,
+						preventDefault: sinon.spy(),
+						stopPropagation: sinon.spy()
+					};
+
+					// Mock the border color dropdown input is focused.
+					view.focusTracker.isFocused = view.borderColorInput.fieldView.focusTracker.isFocused = true;
+					view.focusTracker.focusedElement = view.borderColorInput.element;
+					view.borderColorInput.fieldView.focusTracker.focusedElement =
+						view.borderColorInput.fieldView.inputView.element;
+
+					const spy = sinon.spy( view.borderStyleDropdown, 'focus' );
+
+					view.borderColorInput.fieldView.keystrokes.press( keyEvtData );
+					sinon.assert.calledOnce( keyEvtData.preventDefault );
+					sinon.assert.calledOnce( keyEvtData.stopPropagation );
+					sinon.assert.calledOnce( spy );
+				} );
 			} );
 		} );
 
diff --git a/packages/ckeditor5-table/tests/ui/colorinputview.js b/packages/ckeditor5-table/tests/ui/colorinputview.js
index 725161e726c..5d7419f2f20 100644
--- a/packages/ckeditor5-table/tests/ui/colorinputview.js
+++ b/packages/ckeditor5-table/tests/ui/colorinputview.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global Event */
+/* global document, Event */
 
 import ColorInputView from '../../src/ui/colorinputview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
@@ -48,10 +48,12 @@ describe( 'ColorInputView', () => {
 		inputView = view.inputView;
 		removeColorButton = colorSelectorView.colorGridsFragmentView.removeColorButtonView;
 		colorGridView = colorSelectorView.colorGridsFragmentView.staticColorsGrid;
+		document.body.appendChild( view.element );
 	} );
 
 	afterEach( () => {
 		view.destroy();
+		view.element.remove();
 	} );
 
 	describe( 'constructor()', () => {
@@ -106,8 +108,8 @@ describe( 'ColorInputView', () => {
 			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
 		} );
 
-		it( 'should have #_focusCycler', () => {
-			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
+		it( 'should have #focusCycler', () => {
+			expect( view.focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
 		describe( 'dropdown', () => {
@@ -230,6 +232,12 @@ describe( 'ColorInputView', () => {
 			} );
 
 			describe( 'position', () => {
+				let view;
+
+				afterEach( () => {
+					view.destroy();
+				} );
+
 				it( 'should be SouthWest in LTR', () => {
 					locale.uiLanguageDirection = 'ltr';
 					view = new ColorInputView( locale, {
@@ -252,17 +260,6 @@ describe( 'ColorInputView', () => {
 					expect( view.dropdownView.panelPosition ).to.equal( 'se' );
 				} );
 			} );
-
-			it( 'should register panelView children in #_focusables', () => {
-				expect( view._focusables.map( f => f ) ).to.have.members( [
-					view.dropdownView.panelView.children.first
-				] );
-			} );
-
-			it( 'should register panelView children elements in #focusTracker', () => {
-				expect( view.focusTracker._elements ).to.include( view.dropdownView.panelView.children.first.element );
-				expect( view.focusTracker._elements ).to.include( view.dropdownView.panelView.children.last.element );
-			} );
 		} );
 
 		describe( 'color grid', () => {
@@ -590,10 +587,10 @@ describe( 'ColorInputView', () => {
 
 					// Mock the remove color button view is focused.
 					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view._focusables.first.element;
+					view.focusTracker.focusedElement = view.inputView.element;
 
 					// Spy the next view which in this case is the color grid view.
-					const spy = sinon.spy( view._focusables.last, 'focus' );
+					const spy = sinon.spy( view.dropdownView.buttonView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -613,10 +610,10 @@ describe( 'ColorInputView', () => {
 
 					// Mock the remove color button view is focused.
 					view.focusTracker.isFocused = true;
-					view.focusTracker.focusedElement = view._focusables.first.element;
+					view.focusTracker.focusedElement = view.inputView.element;
 
 					// Spy the previous view which in this case is the color grid view.
-					const spy = sinon.spy( view._focusables.last, 'focus' );
+					const spy = sinon.spy( view.dropdownView.buttonView, 'focus' );
 
 					view.keystrokes.press( keyEvtData );
 					sinon.assert.calledOnce( keyEvtData.preventDefault );
@@ -679,6 +676,14 @@ describe( 'ColorInputView', () => {
 
 			sinon.assert.calledOnce( spy );
 		} );
+
+		it( 'should focus the dropdown button if the backwards direction was specified', () => {
+			const spy = sinon.spy( view.dropdownView.buttonView, 'focus' );
+
+			view.focus( -1 );
+
+			sinon.assert.calledOnce( spy );
+		} );
 	} );
 
 	describe( 'render()', () => {
@@ -692,7 +697,7 @@ describe( 'ColorInputView', () => {
 
 			view.render();
 			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, view.dropdownView.panelView.element );
+			sinon.assert.calledWithExactly( spy, view.element );
 
 			view.destroy();
 		} );
diff --git a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
index f3de3c76be9..e1624eabd1e 100644
--- a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
@@ -291,8 +291,8 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 	/**
 	 * Focuses the {@link #fieldView}.
 	 */
-	public focus(): void {
-		this.fieldView.focus();
+	public focus( direction: 1 | -1 ): void {
+		this.fieldView.focus( direction );
 	}
 }
 
diff --git a/packages/ckeditor5-ui/tests/labeledfield/labeledfieldview.js b/packages/ckeditor5-ui/tests/labeledfield/labeledfieldview.js
index 92d69acc3b6..518826e2767 100644
--- a/packages/ckeditor5-ui/tests/labeledfield/labeledfieldview.js
+++ b/packages/ckeditor5-ui/tests/labeledfield/labeledfieldview.js
@@ -211,5 +211,13 @@ describe( 'LabeledFieldView', () => {
 
 			sinon.assert.calledOnce( spy );
 		} );
+
+		it( 'should pass down the focus direction parameter', () => {
+			const spy = sinon.spy( fieldView, 'focus' );
+
+			labeledField.focus( -1 );
+
+			sinon.assert.calledOnceWithExactly( spy, -1 );
+		} );
 	} );
 } );

From acb44de8273431bcb234803e8a78cee053b05d75 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 16:04:54 +0200
Subject: [PATCH 81/84] Corrected TS types.

---
 packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
index e1624eabd1e..22fbb4dda89 100644
--- a/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
+++ b/packages/ckeditor5-ui/src/labeledfield/labeledfieldview.ts
@@ -291,7 +291,7 @@ export default class LabeledFieldView<TFieldView extends FocusableView = Focusab
 	/**
 	 * Focuses the {@link #fieldView}.
 	 */
-	public focus( direction: 1 | -1 ): void {
+	public focus( direction?: 1 | -1 ): void {
 		this.fieldView.focus( direction );
 	}
 }

From 70c8e554f7b45c57805bb91fa1973268956059cd Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 16:51:10 +0200
Subject: [PATCH 82/84] TextareaView should not be manually resizable by
 default.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts   |  4 ++--
 .../tests/manual/textarea/textareaview.ts       | 17 ++++-------------
 .../ckeditor5-ui/tests/textarea/textareaview.js |  4 ++--
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 392a0df4844..835ce0b8e71 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -48,7 +48,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 	 * Specifies the value of HTML attribute that indicates whether the user can resize the element.
 	 *
 	 * @observable
-	 * @default 'both'
+	 * @default 'none'
 	*/
 	declare public resize: 'both' | 'horizontal' | 'vertical' | 'none';
 
@@ -72,7 +72,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		this.set( 'minRows', 2 );
 		this.set( 'maxRows', 5 );
 		this.set( '_height', null );
-		this.set( 'resize', 'both' );
+		this.set( 'resize', 'none' );
 
 		this.on( 'change:minRows', this._validateMinMaxRows.bind( this ) );
 		this.on( 'change:maxRows', this._validateMinMaxRows.bind( this ) );
diff --git a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
index 5cd958c90c9..31bcc4a602d 100644
--- a/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/tests/manual/textarea/textareaview.ts
@@ -46,21 +46,13 @@ function createPlainTextareaWithVerticalResizeOnly() {
 	addToPlayground( 'Default rows, manual v-resize only', textareaView );
 }
 
-function createPlainTextareaWithNoResize() {
-	const textareaView = new TextareaView();
-
-	textareaView.resize = 'none';
-
-	addToPlayground( 'Default rows, no manual resize', textareaView );
-}
-
-function createPlainTextareaWithFixedSizeAndNoResize() {
+function createPlainTextareaWithFixedSizeAndResizeBoth() {
 	const textareaView = new TextareaView();
 
 	textareaView.minRows = textareaView.maxRows = 3;
-	textareaView.resize = 'none';
+	textareaView.resize = 'both';
 
-	addToPlayground( '3 fixed rows, no manual resize', textareaView );
+	addToPlayground( '3 fixed rows, resize: both', textareaView );
 }
 
 function addToPlayground( name, view ) {
@@ -110,5 +102,4 @@ createPlainTextareaWithMoreRows();
 createPlainTextareaWithFixedRows();
 createPlainTextareaWithSingleRow();
 createPlainTextareaWithVerticalResizeOnly();
-createPlainTextareaWithNoResize();
-createPlainTextareaWithFixedSizeAndNoResize();
+createPlainTextareaWithFixedSizeAndResizeBoth();
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 0add83c064c..118eb1a3a47 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -40,7 +40,7 @@ describe( 'TextareaView', () => {
 		} );
 
 		it( 'should have default resize attribute value', () => {
-			expect( view.element.style.resize ).to.equal( 'both' );
+			expect( view.element.style.resize ).to.equal( 'none' );
 		} );
 
 		it( 'should warn if #minHeight is greater than #maxHeight', () => {
@@ -201,7 +201,7 @@ describe( 'TextareaView', () => {
 
 		describe( 'resize attribute', () => {
 			it( 'should react on view#reisze', () => {
-				expect( view.element.style.resize ).to.equal( 'both' );
+				expect( view.element.style.resize ).to.equal( 'none' );
 
 				view.resize = 'vertical';
 

From ace53a8b7f2a73e522fad1f4704cc733a765a1b6 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 16:59:32 +0200
Subject: [PATCH 83/84] TextareaView should fire #update event whenever its
 geometry has possibly changed.

---
 packages/ckeditor5-ui/src/index.ts            |  2 +-
 .../ckeditor5-ui/src/textarea/textareaview.ts | 21 ++++++------
 .../tests/textarea/textareaview.js            | 34 +++++++++++++++++--
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/ckeditor5-ui/src/index.ts b/packages/ckeditor5-ui/src/index.ts
index 385ae42283f..a269d0a8bf1 100644
--- a/packages/ckeditor5-ui/src/index.ts
+++ b/packages/ckeditor5-ui/src/index.ts
@@ -61,7 +61,7 @@ export { default as InputView } from './input/inputview';
 export { default as InputTextView } from './inputtext/inputtextview';
 export { default as InputNumberView } from './inputnumber/inputnumberview';
 
-export { default as TextareaView, type TextareaViewAutoGrowEvent } from './textarea/textareaview';
+export { default as TextareaView, type TextareaViewUpdateEvent } from './textarea/textareaview';
 
 export { default as IframeView } from './iframe/iframeview';
 
diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 835ce0b8e71..7129fb9d89f 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -101,11 +101,15 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		this.on( 'input', () => {
 			this._updateAutoGrowHeight( true );
+			this.fire<TextareaViewUpdateEvent>( 'update' );
 		} );
 
 		this.on( 'change:value', () => {
 			// The content needs to be updated by the browser after the value is changed. It takes a few ms.
-			global.window.requestAnimationFrame( () => this._updateAutoGrowHeight() );
+			global.window.requestAnimationFrame( () => {
+				this._updateAutoGrowHeight();
+				this.fire<TextareaViewUpdateEvent>( 'update' );
+			} );
 		} );
 	}
 
@@ -116,6 +120,7 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 		super.reset();
 
 		this._updateAutoGrowHeight();
+		this.fire<TextareaViewUpdateEvent>( 'update' );
 	}
 
 	/**
@@ -159,8 +164,6 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 
 		singleLineContentClone.remove();
 		fullTextValueClone.remove();
-
-		this.fire<TextareaViewAutoGrowEvent>( 'autoGrow' );
 	}
 
 	/**
@@ -198,14 +201,12 @@ function getTextareaElementClone( element: HTMLTextAreaElement, value: string ):
 }
 
 /**
- * Fired when the logic of {@link module:ui/textarea/textareaview~TextareaView} checks whether
- * the component should be resized upon user interaction.
- *
- * See {@link module:ui/textarea/textareaview~TextareaView#minRows}, {@link module:ui/textarea/textareaview~TextareaView#maxRows}.
+ * Fired every time the layout of the {@link module:ui/textarea/textareaview~TextareaView} possibly changed as a result
+ * of the user input or the value change via {@link module:ui/textarea/textareaview~TextareaView#value}.
  *
- * @eventName ~TextareaView#autoGrow
+ * @eventName ~TextareaView#update
  */
-export type TextareaViewAutoGrowEvent = {
-	name: 'autoGrow';
+export type TextareaViewUpdateEvent = {
+	name: 'update';
 	args: [];
 };
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 118eb1a3a47..69bd79aa2b7 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -164,11 +164,13 @@ describe( 'TextareaView', () => {
 				await requestAnimationFrame();
 				expect( parseFloat( view.element.style.height ) ).to.equal( twoRowsHeight );
 			} );
+		} );
 
-			it( 'should fire the #autoGrow event', () => {
+		describe( '#update event', () => {
+			it( 'should get fired on the user #input', () => {
 				const spy = sinon.spy();
 
-				view.on( 'autoGrow', spy );
+				view.on( 'update', spy );
 
 				view.element.value = '1\n2\n3\n4\n5\n6';
 
@@ -180,6 +182,34 @@ describe( 'TextareaView', () => {
 				// The event gets fired whether the view is changing dimensions or not.
 				sinon.assert.calledTwice( spy );
 			} );
+
+			it( 'should get fired on #value change', async () => {
+				const spy = sinon.spy();
+
+				view.on( 'update', spy );
+
+				view.value = '1\n2\n3\n4\n5\n6';
+
+				await requestAnimationFrame();
+
+				sinon.assert.calledOnce( spy );
+			} );
+
+			it( 'should be fired upon reset()', async () => {
+				const spy = sinon.spy();
+
+				view.on( 'update', spy );
+
+				view.value = '1\n2\n3\n4\n5\n6';
+
+				await requestAnimationFrame();
+
+				sinon.assert.calledOnce( spy );
+
+				view.reset();
+
+				sinon.assert.calledTwice( spy );
+			} );
 		} );
 	} );
 

From 0e4742b99d6e09f4728b7d5c58dd629a594a217a Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 25 Sep 2023 17:11:23 +0200
Subject: [PATCH 84/84] TextareaView should throw if misconfigured.

---
 .../ckeditor5-ui/src/textarea/textareaview.ts | 10 ++++--
 .../tests/textarea/textareaview.js            | 34 ++++++++++++-------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/ckeditor5-ui/src/textarea/textareaview.ts b/packages/ckeditor5-ui/src/textarea/textareaview.ts
index 7129fb9d89f..4dbc4f3bdda 100644
--- a/packages/ckeditor5-ui/src/textarea/textareaview.ts
+++ b/packages/ckeditor5-ui/src/textarea/textareaview.ts
@@ -7,7 +7,7 @@
  * @module ui/textarea/textareaview
  */
 
-import { Rect, type Locale, toUnit, getBorderWidths, global } from '@ckeditor/ckeditor5-utils';
+import { Rect, type Locale, toUnit, getBorderWidths, global, CKEditorError } from '@ckeditor/ckeditor5-utils';
 import InputBase from '../input/inputbase';
 
 import '../../theme/components/input/input.css';
@@ -176,8 +176,14 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
 			 *
 			 * @error ui-textarea-view-min-rows-greater-than-max-rows
 			 * @param textareaView The misconfigured textarea view instance.
+			 * @param minRows The value of `minRows` property.
+			 * @param maxRows The value of `maxRows` property.
 			 */
-			console.warn( 'ui-textarea-view-min-rows-greater-than-max-rows', { textareaView: this } );
+			throw new CKEditorError( 'ui-textarea-view-min-rows-greater-than-max-rows', {
+				textareaView: this,
+				minRows: this.minRows,
+				maxRows: this.maxRows
+			} );
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/tests/textarea/textareaview.js b/packages/ckeditor5-ui/tests/textarea/textareaview.js
index 69bd79aa2b7..8340f90a6ee 100644
--- a/packages/ckeditor5-ui/tests/textarea/textareaview.js
+++ b/packages/ckeditor5-ui/tests/textarea/textareaview.js
@@ -3,11 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global console, document */
+/* global document */
 
 import { global } from '@ckeditor/ckeditor5-utils';
 import TextareaView from '../../src/textarea/textareaview';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { expectToThrowCKEditorError } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 describe( 'TextareaView', () => {
 	let wrapper, view;
@@ -43,21 +44,30 @@ describe( 'TextareaView', () => {
 			expect( view.element.style.resize ).to.equal( 'none' );
 		} );
 
-		it( 'should warn if #minHeight is greater than #maxHeight', () => {
-			const warnSpy = testUtils.sinon.stub( console, 'warn' );
-
+		it( 'should throw if #minHeight is greater than #maxHeight', () => {
 			view.minRows = 2;
 			view.maxRows = 3;
-			sinon.assert.notCalled( warnSpy );
-
 			view.minRows = view.maxRows;
-			sinon.assert.notCalled( warnSpy );
-
-			view.minRows = 4;
-			sinon.assert.calledOnceWithMatch( warnSpy, 'ui-textarea-view-min-rows-greater-than-max-rows' );
 
-			view.maxRows = 5;
-			sinon.assert.calledOnceWithMatch( warnSpy, 'ui-textarea-view-min-rows-greater-than-max-rows' );
+			expectToThrowCKEditorError(
+				() => { view.minRows = 4; },
+				'ui-textarea-view-min-rows-greater-than-max-rows',
+				{
+					view,
+					minRows: 4,
+					maxRows: 3
+				}
+			);
+
+			expectToThrowCKEditorError(
+				() => { view.minRows = 5; },
+				'ui-textarea-view-min-rows-greater-than-max-rows',
+				{
+					view,
+					minRows: 5,
+					maxRows: 3
+				}
+			);
 		} );
 	} );