@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/dist/dropdown/utils.d.ts

@@ -0,0 +1,297 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import DropdownView from './dropdownview.js';
+import ViewCollection from '../viewcollection.js';
+import type { default as View } from '../view.js';
+import type Model from '../model.js';
+import type DropdownButton from './button/dropdownbutton.js';
+import type { FocusableView } from '../focuscycler.js';
+import type { FalsyValue } from '../template.js';
+import type BodyCollection from '../editorui/bodycollection.js';
+import { type Collection, type Locale } from '@ckeditor/ckeditor5-utils';
+import '../../theme/components/dropdown/toolbardropdown.css';
+import '../../theme/components/dropdown/listdropdown.css';
+import type { DropdownMenuDefinition } from './menu/utils.js';
+/**
+ * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
+ * with a {@link module:ui/dropdown/button/dropdownbutton~DropdownButton button},
+ * {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView panel} and all standard dropdown's behaviors.
+ *
+ * # Creating dropdowns
+ *
+ * By default, the default {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView} class is used as
+ * definition of the button:
+ *
+ * ```ts
+ * const dropdown = createDropdown( model );
+ *
+ * // Configure dropdown's button properties:
+ * dropdown.buttonView.set( {
+ * 	label: 'A dropdown',
+ * 	withText: true
+ * } );
+ *
+ * dropdown.render();
+ *
+ * // Will render a dropdown labeled "A dropdown" with an empty panel.
+ * document.body.appendChild( dropdown.element );
+ * ```
+ *
+ * You can also provide other button views (they need to implement the
+ * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface). For instance, you can use
+ * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} to create a dropdown with a split button.
+ *
+ * ```ts
+ * const dropdown = createDropdown( locale, SplitButtonView );
+ *
+ * // Configure dropdown's button properties:
+ * dropdown.buttonView.set( {
+ * 	label: 'A dropdown',
+ * 	withText: true
+ * } );
+ *
+ * dropdown.buttonView.on( 'execute', () => {
+ * 	// Add the behavior of the "action part" of the split button.
+ * 	// Split button consists of the "action part" and "arrow part".
+ * 	// The arrow opens the dropdown while the action part can have some other behavior.
+ * } );
+ *
+ * dropdown.render();
+ *
+ * // Will render a dropdown labeled "A dropdown" with an empty panel.
+ * document.body.appendChild( dropdown.element );
+ * ```
+ *
+ * # Adding content to the dropdown's panel
+ *
+ * The content of the panel can be inserted directly into the `dropdown.panelView.element`:
+ *
+ * ```ts
+ * dropdown.panelView.element.textContent = 'Content of the panel';
+ * ```
+ *
+ * However, most of the time you will want to add there either a {@link module:ui/list/listview~ListView list of options}
+ * or a list of buttons (i.e. a {@link module:ui/toolbar/toolbarview~ToolbarView toolbar}).
+ * To simplify the task, you can use, respectively, {@link module:ui/dropdown/utils~addListToDropdown} or
+ * {@link module:ui/dropdown/utils~addToolbarToDropdown} utils.
+ *
+ * @param locale The locale instance.
+ * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
+ * @param behaviorOptions Attributes for the default behavior of the dropdown.
+ *
+ * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
+ * @returns The dropdown view instance.
+ */
+export declare function createDropdown(locale: Locale | undefined, ButtonClassOrInstance?: (new (locale?: Locale) => DropdownButton & FocusableView) | (DropdownButton & FocusableView)): DropdownView;
+/**
+ * Adds a menu UI component to a dropdown and sets all common behaviors and interactions between the dropdown and the menu.
+ *
+ * Use this helper to create multi-level dropdown menus that are displayed in a toolbar.
+ *
+ * Internally, it creates an instance of {@link module:ui/dropdown/menu/dropdownmenurootlistview~DropdownMenuRootListView}.
+ *
+ * Example:
+ *
+ * ```ts
+ * const definitions = [
+ * 	{
+ * 		id: 'menu_1',
+ * 		menu: 'Menu 1',
+ * 		children: [
+ * 			{
+ * 				id: 'menu_1_a',
+ * 				label: 'Item A'
+ * 			},
+ * 			{
+ * 				id: 'menu_1_b',
+ * 				label: 'Item B'
+ * 			}
+ * 		]
+ * 	},
+ * 	{
+ * 		id: 'top_a',
+ * 		label: 'Top Item A'
+ * 	},
+ * 	{
+ * 		id: 'top_b',
+ * 		label: 'Top Item B'
+ * 	}
+ * ];
+ *
+ * const dropdownView = createDropdown( editor.locale );
+ *
+ * addMenuToDropdown( dropdownView, editor.ui.view.body, definitions );
+ * ```
+ *
+ * After using this helper, the `dropdown` will fire {@link module:ui/dropdown/dropdownview~DropdownViewEvent `execute`} event when
+ * a nested menu button is pressed.
+ *
+ * The helper will make sure that the `dropdownMenuRootListView` is lazy loaded, i.e., the menu component structure will be initialized
+ * and rendered only after the `dropdown` is opened for the first time.
+ *
+ * @param dropdownView A dropdown instance to which the menu component will be added.
+ * @param body Body collection to which floating menu panels will be added.
+ * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
+ */
+export declare function addMenuToDropdown(dropdownView: DropdownView, body: BodyCollection, definition: DropdownMenuDefinition, options?: {
+    ariaLabel?: string;
+}): void;
+/**
+ * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
+ *
+ * ```ts
+ * const buttonsCreator = () => {
+ * 	const buttons = [];
+ *
+ * 	// Either create a new ButtonView instance or create existing.
+ * 	buttons.push( new ButtonView() );
+ * 	buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
+ * };
+ *
+ * const dropdown = createDropdown( locale );
+ *
+ * addToolbarToDropdown( dropdown, buttonsCreator, { isVertical: true } );
+ *
+ * // Will render a vertical button dropdown labeled "A button dropdown"
+ * // with a button group in the panel containing two buttons.
+ * // Buttons inside the dropdown will be created on first dropdown panel open.
+ * dropdown.render()
+ * document.body.appendChild( dropdown.element );
+ * ```
+ *
+ * **Note:** To improve the accessibility, you can tell the dropdown to focus the first active button of the toolbar when the dropdown
+ * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}. See the documentation of `options` to learn more.
+ *
+ * **Note:** Toolbar view will be created on first open of the dropdown.
+ *
+ * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
+ *
+ * @param dropdownView A dropdown instance to which `ToolbarView` will be added.
+ * @param options.enableActiveItemFocusOnDropdownOpen When set `true`, the focus will automatically move to the first
+ * active {@link module:ui/toolbar/toolbarview~ToolbarView#items item} of the toolbar upon
+ * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen opening} the dropdown. Active items are those with the `isOn` property set
+ * `true` (for instance {@link module:ui/button/buttonview~ButtonView buttons}). If no active items is found, the toolbar will be focused
+ * as a whole resulting in the focus moving to its first focusable item (default behavior of
+ * {@link module:ui/dropdown/dropdownview~DropdownView}).
+ * @param options.ariaLabel Label used by assistive technologies to describe toolbar element.
+ * @param options.maxWidth The maximum width of the toolbar element.
+ * Details: {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth}.
+ * @param options.class An additional CSS class added to the toolbar element.
+ * @param options.isCompact When set true, makes the toolbar look compact with toolbar element.
+ * @param options.isVertical Controls the orientation of toolbar items.
+ */
+export declare function addToolbarToDropdown(dropdownView: DropdownView, buttonsOrCallback: Array<View> | ViewCollection | (() => Array<View> | ViewCollection), options?: {
+    enableActiveItemFocusOnDropdownOpen?: boolean;
+    ariaLabel?: string;
+    maxWidth?: string;
+    class?: string;
+    isCompact?: boolean;
+    isVertical?: boolean;
+}): void;
+/**
+ * Adds an instance of {@link module:ui/list/listview~ListView} to a dropdown.
+ *
+ * ```ts
+ * const items = new Collection<ListDropdownItemDefinition>();
+ *
+ * items.add( {
+ * 	type: 'button',
+ * 	model: new Model( {
+ * 		withText: true,
+ * 		label: 'First item',
+ * 		labelStyle: 'color: red'
+ * 	} )
+ * } );
+ *
+ * items.add( {
+ * 	 type: 'button',
+ * 	 model: new Model( {
+ * 		withText: true,
+ * 		label: 'Second item',
+ * 		labelStyle: 'color: green',
+ * 		class: 'foo'
+ * 	} )
+ * } );
+ *
+ * const dropdown = createDropdown( locale );
+ *
+ * addListToDropdown( dropdown, items );
+ *
+ * // Will render a dropdown with a list in the panel containing two items.
+ * dropdown.render()
+ * document.body.appendChild( dropdown.element );
+ * ```
+ *
+ * The `items` collection passed to this methods controls the presence and attributes of respective
+ * {@link module:ui/list/listitemview~ListItemView list items}.
+ *
+ * **Note:** To improve the accessibility, when a list is added to the dropdown using this helper the dropdown will automatically attempt
+ * to focus the first active item (a host to a {@link module:ui/button/buttonview~ButtonView} with
+ * {@link module:ui/button/buttonview~ButtonView#isOn} set `true`) or the very first item when none are active.
+ *
+ * **Note:** List view will be created on first open of the dropdown.
+ *
+ * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
+ *
+ * @param dropdownView A dropdown instance to which `ListVIew` will be added.
+ * @param itemsOrCallback A collection of the list item definitions or a callback returning a list item definitions to populate the list.
+ * @param options.ariaLabel Label used by assistive technologies to describe list element.
+ * @param options.role Will be reflected by the `role` DOM attribute in `ListVIew` and used by assistive technologies.
+ */
+export declare function addListToDropdown(dropdownView: DropdownView, itemsOrCallback: Collection<ListDropdownItemDefinition> | (() => Collection<ListDropdownItemDefinition>), options?: {
+    ariaLabel?: string;
+    role?: string;
+}): void;
+/**
+ * A helper to be used on an existing {@link module:ui/dropdown/dropdownview~DropdownView} that focuses
+ * a specific child in DOM when the dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}.
+ *
+ * @param dropdownView A dropdown instance to which the focus behavior will be added.
+ * @param childSelectorCallback A callback executed when the dropdown gets open. It should return a {@link module:ui/view~View}
+ * instance (child of {@link module:ui/dropdown/dropdownview~DropdownView#panelView}) that will get focused or a falsy value.
+ * If falsy value is returned, a default behavior of the dropdown will engage focusing the first focusable child in
+ * the {@link module:ui/dropdown/dropdownview~DropdownView#panelView}.
+ */
+export declare function focusChildOnDropdownOpen(dropdownView: DropdownView, childSelectorCallback: () => View | FalsyValue): void;
+/**
+ * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}
+ * utility.
+ */
+export type ListDropdownItemDefinition = ListDropdownSeparatorDefinition | ListDropdownButtonDefinition | ListDropdownGroupDefinition;
+/**
+ * A definition of the 'separator' list item.
+ */
+export type ListDropdownSeparatorDefinition = {
+    type: 'separator';
+};
+/**
+ * A definition of the 'button' or 'switchbutton' list item.
+ */
+export type ListDropdownButtonDefinition = {
+    type: 'button' | 'switchbutton';
+    /**
+     * Model of the item. Its properties fuel the newly created list item (or its children, depending on the `type`).
+     */
+    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';
+    /**
+     * The visible label of the group.
+     */
+    label: string;
+    /**
+     * The collection of the child list items inside this group.
+     */
+    items: Collection<ListDropdownButtonDefinition>;
+};

package/dist/editableui/editableuiview.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editableui/editableuiview
+ */
+import View from '../view.js';
+import type { EditingView } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The editable UI view class.
+ */
+export default class EditableUIView extends View {
+    /**
+     * The name of the editable UI view.
+     */
+    name: string | null;
+    /**
+     * Controls whether the editable is focused, i.e. the user is typing in it.
+     *
+     * @observable
+     */
+    isFocused: boolean;
+    /**
+     * The editing view instance the editable is related to. Editable uses the editing
+     * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
+     *
+     * **Note**: The DOM attributes are performed by the editing view and not UI
+     * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
+     * the editable DOM element must remain under the full control of the engine to work properly.
+     */
+    protected _editingView: EditingView;
+    /**
+     * The element which is the main editable element (usually the one with `contentEditable="true"`).
+     */
+    protected _editableElement: HTMLElement | null | undefined;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    private _hasExternalElement;
+    /**
+     * Creates an instance of EditableUIView class.
+     *
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, this view
+     * should create it. Otherwise, the existing element should be used.
+     */
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement);
+    /**
+     * Renders the view by either applying the {@link #template} to the existing
+     * {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement} or assigning {@link #element}
+     * as {@link module:ui/editableui/editableuiview~EditableUIView#_editableElement}.
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Whether an external {@link #_editableElement} was passed into the constructor, which also means
+     * the view will not render its {@link #template}.
+     */
+    get hasExternalElement(): boolean;
+    /**
+     * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to
+     * the {@link #isFocused} property value using the {@link #_editingView editing view} API.
+     */
+    private _updateIsFocusedClasses;
+}

package/dist/editableui/inline/inlineeditableuiview.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editableui/inline/inlineeditableuiview
+ */
+import EditableUIView from '../editableuiview.js';
+import type { EditingView } from '@ckeditor/ckeditor5-engine';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The inline editable UI class implementing an inline {@link module:ui/editableui/editableuiview~EditableUIView}.
+ */
+export default class InlineEditableUIView extends EditableUIView {
+    /**
+     * The cached options object passed to the constructor.
+     */
+    private readonly _options;
+    /**
+     * Creates an instance of the InlineEditableUIView class.
+     *
+     * @param locale The locale instance.
+     * @param editingView The editing view instance the editable is related to.
+     * @param editableElement The editable element. If not specified, the
+     * {@link module:ui/editableui/editableuiview~EditableUIView}
+     * will create it. Otherwise, the existing element will be used.
+     * @param options Additional configuration of the view.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
+     */
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: InlineEditableUIViewOptions);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel(): string;
+}
+type InlineEditableUIViewOptions = {
+    label?: ((view: InlineEditableUIView) => string) | string | Record<string, string>;
+};
+export {};

package/dist/editorui/accessibilityhelp/accessibilityhelp.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editorui/accessibilityhelp/accessibilityhelp
+ */
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import Dialog from '../../dialog/dialog.js';
+import AccessibilityHelpContentView from './accessibilityhelpcontentview.js';
+import '../../../theme/components/editorui/accessibilityhelp.css';
+/**
+ * A plugin that brings the accessibility help dialog to the editor available under the <kbd>Alt</kbd>+<kbd>0</kbd>
+ * keystroke and via the "Accessibility help" toolbar button. The dialog displays a list of keystrokes that can be used
+ * by the user to perform various actions in the editor.
+ *
+ * Keystroke information is loaded from {@link module:core/accessibility~Accessibility#keystrokeInfos}. New entries can be
+ * added using the API provided by the {@link module:core/accessibility~Accessibility} class.
+ */
+export default class AccessibilityHelp extends Plugin {
+    /**
+     * The view that displays the dialog content (list of keystrokes).
+     * Created when the dialog is opened for the first time.
+     */
+    contentView: AccessibilityHelpContentView | null;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof Dialog];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "AccessibilityHelp";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates a button to show accessibility help dialog, for use either in toolbar or in menu bar.
+     */
+    private _createButton;
+    /**
+     * Injects a help text into each editing root's `aria-label` attribute allowing assistive technology users
+     * to discover the availability of the Accessibility help dialog.
+     */
+    private _setupRootLabels;
+    /**
+     * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
+     */
+    private _toggleDialog;
+}

package/dist/editorui/accessibilityhelp/accessibilityhelpcontentview.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editorui/accessibilityhelp/accessibilityhelpcontentview
+ */
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../../view.js';
+import type { KeystrokeInfoDefinitions } from '@ckeditor/ckeditor5-core';
+/**
+ * The view displaying keystrokes in the Accessibility help dialog.
+ */
+export default class AccessibilityHelpContentView extends View<HTMLDivElement> {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, keystrokes: KeystrokeInfoDefinitions);
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * Creates `<section><h3>Category label</h3>...</section>` elements for each category of keystrokes.
+     */
+    private _createCategories;
+    /**
+     * Creates `[<h4>Optional label</h4>]<dl>...</dl>` elements for each group of keystrokes in a category.
+     */
+    private _createGroup;
+    /**
+     * Creates `<dt>Keystroke label</dt><dd>Keystroke definition</dd>` elements for each keystroke in a group.
+     */
+    private _createGroupRow;
+}

package/dist/editorui/bodycollection.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import ViewCollection from '../viewcollection.js';
+import type View from '../view.js';
+import { type Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * This is a special {@link module:ui/viewcollection~ViewCollection} dedicated to elements that are detached
+ * from the DOM structure of the editor, like panels, icons, etc.
+ *
+ * The body collection is available in the {@link module:ui/editorui/editoruiview~EditorUIView#body `editor.ui.view.body`} property.
+ * Any plugin can add a {@link module:ui/view~View view} to this collection.
+ * These views will render in a container placed directly in the `<body>` element.
+ * The editor will detach and destroy this collection when the editor will be {@link module:core/editor/editor~Editor#destroy destroyed}.
+ *
+ * If you need to control the life cycle of the body collection on your own, you can create your own instance of this class.
+ *
+ * A body collection will render itself automatically in the DOM body element as soon as you call {@link ~BodyCollection#attachToDom}.
+ * If you create multiple body collections, this class will create a special wrapper element in the DOM to limit the number of
+ * elements created directly in the body and remove it when the last body collection will be
+ * {@link ~BodyCollection#detachFromDom detached}.
+ */
+export default class BodyCollection extends ViewCollection {
+    /**
+     * The {@link module:core/editor/editor~Editor#locale editor's locale} instance.
+     * See the view {@link module:ui/view~View#locale locale} property.
+     */
+    readonly locale: Locale;
+    /**
+     * The element holding elements of the body region.
+     */
+    private _bodyCollectionContainer?;
+    /**
+     * Creates a new instance of the {@link module:ui/editorui/bodycollection~BodyCollection}.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor editor's locale} instance.
+     * @param initialItems The initial items of the collection.
+     */
+    constructor(locale: Locale, initialItems?: Iterable<View>);
+    /**
+     * The element holding elements of the body region.
+     */
+    get bodyCollectionContainer(): HTMLElement | undefined;
+    /**
+     * Attaches the body collection to the DOM body element. You need to execute this method to render the content of
+     * the body collection.
+     */
+    attachToDom(): void;
+    /**
+     * Detaches the collection from the DOM structure. Use this method when you do not need to use the body collection
+     * anymore to clean-up the DOM structure.
+     */
+    detachFromDom(): void;
+}

package/dist/editorui/boxed/boxededitoruiview.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/editorui/boxed/boxededitoruiview
+ */
+import EditorUIView from '../editoruiview.js';
+import type ViewCollection from '../../viewcollection.js';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+/**
+ * The boxed editor UI view class. This class represents an editor interface
+ * consisting of a toolbar and an editable area, enclosed within a box.
+ */
+export default abstract class BoxedEditorUIView extends EditorUIView {
+    /**
+     * Collection of the child views located in the top (`.ck-editor__top`)
+     * area of the UI.
+     */
+    readonly top: ViewCollection;
+    /**
+     * Collection of the child views located in the main (`.ck-editor__main`)
+     * area of the UI.
+     */
+    readonly main: ViewCollection;
+    /**
+     * Voice label of the UI.
+     */
+    private readonly _voiceLabelView;
+    /**
+     * Creates an instance of the boxed editor UI view class.
+     *
+     * @param locale The locale instance..
+     */
+    constructor(locale: Locale);
+    /**
+     * Creates a voice label view instance.
+     */
+    private _createVoiceLabel;
+}