@ckeditor/ckeditor5-ui 42.0.2 → 43.0.0-alpha.0

package/dist/button/filedialogbuttonview.d.ts

@@ -6,8 +6,14 @@
  * @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/button/filedialogbuttonview
+ */
+import View from '../view.js';
 import ButtonView from './buttonview.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type { Mixed } from '@ckeditor/ckeditor5-utils';
+import ListItemButtonView from './listitembuttonview.js';
+declare const FileDialogButtonView_base: Mixed<typeof ButtonView, FileDialogButtonViewBase>;
 /**
  * The file dialog button view.
  *
@@ -32,17 +38,45 @@ import type { Locale } from '@ckeditor/ckeditor5-utils';
  * } );
  * ```
  */
-export default class FileDialogButtonView extends ButtonView {
+export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogButtonView_base {
+}
+declare const FileDialogListItemButtonView_base: Mixed<typeof ListItemButtonView, FileDialogButtonViewBase>;
+/**
+ * The file dialog button view used in a lists.
+ *
+ * This component provides a button that opens the native file selection dialog.
+ * It can be used to implement the UI of a file upload feature.
+ *
+* ```ts
+ * const view = new FileDialogListItemButtonView( locale );
+ *
+ * view.set( {
+ * 	acceptedType: 'image/*',
+ * 	allowMultipleFiles: true
+ * 	label: t( 'Insert image' ),
+ * 	icon: imageIcon,
+ * 	tooltip: true
+ * } );
+ *
+ * view.on( 'done', ( evt, files ) => {
+ * 	for ( const file of Array.from( files ) ) {
+ * 		console.log( 'Selected file', file );
+ * 	}
+ * } );
+ * ```
+ */
+export declare class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogListItemButtonView_base {
+}
+/**
+ * Represents the base view for a file dialog button component.
+ */
+type FileDialogButtonViewBase = View & {
     /**
      * The button view of the component.
      *
      * @deprecated
      */
     buttonView: ButtonView;
-    /**
-     * A hidden `<input>` view used to execute file dialog.
-     */
-    private _fileInputView;
     /**
      * Accepted file types. Can be provided in form of file extensions, media type or one of:
      * * `audio/*`,
@@ -58,15 +92,7 @@ export default class FileDialogButtonView extends ButtonView {
      * @observable
      */
     allowMultipleFiles: boolean;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-}
+};
 /**
  * Fired when file dialog is closed with file selected.
  *
@@ -82,3 +108,4 @@ export type FileInputViewDoneEvent = {
     name: 'done';
     args: [files: FileList];
 };
+export {};

package/dist/button/listitembuttonview.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @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/button/listitembuttonview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ButtonLabel from './buttonlabel.js';
+import type ViewCollection from '../viewcollection.js';
+import ButtonView from './buttonview.js';
+import View from '../view.js';
+import '../../theme/components/button/listitembutton.css';
+/**
+ * Button that is used as dropdown list item entry.
+ */
+export default class ListItemButtonView extends ButtonView {
+    /**
+     * Indicates whether the button view has reserved space for a check holder.
+     *
+     * @observable
+     */
+    hasCheckSpace: boolean;
+    /**
+     * The flag that indicates if the button should render a check holder.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _hasCheck: boolean;
+    /**
+     * Holds the view for the check icon of a button list item.
+     */
+    private readonly _checkIconHolderView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale?: Locale, labelView?: ButtonLabel);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconHolderMount;
+}
+export declare class CheckIconHolderView extends View {
+    /**
+     * Collection of child views.
+     */
+    readonly children: ViewCollection<View>;
+    /**
+     * Indicates whether the button is in the "on" state.
+     */
+    isOn: boolean;
+    /**
+     * The view for the check icon of the button list item.
+     */
+    private readonly _checkIconView;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Renders the check icon if the button is toggleable.
+     */
+    private _watchCheckIconMount;
+    /**
+     * Creates a check icon view.
+     */
+    private _createCheckIconView;
+}

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

@@ -51,5 +51,5 @@ export default class AccessibilityHelp extends Plugin {
     /**
      * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
      */
-    private _showDialog;
+    private _toggleDialog;
 }

package/dist/editorui/editorui.d.ts

@@ -17,6 +17,7 @@ import type EditorUIView from './editoruiview.js';
 import type ToolbarView from '../toolbar/toolbarview.js';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 import type { Editor } from '@ckeditor/ckeditor5-core';
+import type { default as MenuBarView, MenuBarConfigAddedGroup, MenuBarConfigAddedItem, MenuBarConfigAddedMenu } from '../menubar/menubarview.js';
 declare const EditorUI_base: {
     new (): import("@ckeditor/ckeditor5-utils").Observable;
     prototype: import("@ckeditor/ckeditor5-utils").Observable;
@@ -104,6 +105,14 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * All available & focusable toolbars.
      */
     private _focusableToolbarDefinitions;
+    /**
+     * All additional menu bar items, groups or menus that have their default location defined.
+     */
+    private _extraMenuBarElements;
+    /**
+     * The last focused element to which focus should return on `Esc` press.
+     */
+    private _lastFocusedForeignElement;
     /**
      * Creates an instance of the editor UI class.
      *
@@ -169,12 +178,56 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * @param toolbarView A instance of the toolbar to be registered.
      */
     addToolbar(toolbarView: ToolbarView, options?: FocusableToolbarOptions): void;
+    /**
+     * Registers an extra menu bar element, which could be a single item, a group of items, or a menu containing groups.
+     *
+     * ```ts
+     * // Register a new menu bar item.
+     * editor.ui.extendMenuBar( {
+     *   item: 'menuBar:customFunctionButton',
+     *   position: 'after:menuBar:bold'
+     * } );
+     *
+     * // Register a new menu bar group.
+     * editor.ui.extendMenuBar( {
+     *   group: {
+     *     groupId: 'customGroup',
+     *     items: [
+     *       'menuBar:customFunctionButton'
+     *     ]
+     *   },
+     *   position: 'start:help'
+     * } );
+     *
+     * // Register a new menu bar menu.
+     * editor.ui.extendMenuBar( {
+     *   menu: {
+     *     menuId: 'customMenu',
+     *     label: 'customMenu',
+     *     groups: [
+     *       {
+     *         groupId: 'customGroup',
+     *         items: [
+     *           'menuBar:customFunctionButton'
+     *         ]
+     *       }
+     *     ]
+     *   },
+     *   position: 'after:help'
+     * } );
+     * ```
+     */
+    extendMenuBar(config: MenuBarConfigAddedItem | MenuBarConfigAddedGroup | MenuBarConfigAddedMenu): void;
     /**
      * Stores all editable elements used by the editor instance.
      *
      * @deprecated
      */
     protected get _editableElements(): unknown;
+    /**
+     * Initializes menu bar.
+     */
+    protected _initMenuBar(menuBarView: MenuBarView): void;
     /**
      * Returns viewport offsets object:
      *
@@ -196,6 +249,10 @@ export default abstract class EditorUI extends /* #__PURE__ */ EditorUI_base {
      * to allow users navigate across the UI.
      */
     private _initFocusTracking;
+    /**
+     * Saves last focused element that doen not belong to editing view to restore focus on `Esc`.
+     */
+    private _saveLastFocusedForeignElement;
     /**
      * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
      *

package/dist/editorui/editoruiview.d.ts

@@ -14,6 +14,7 @@ import BodyCollection from './bodycollection.js';
 import type EditableUIView from '../editableui/editableuiview.js';
 import type { Locale, LocaleTranslate } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/editorui/editorui.css';
+import type MenuBarView from '../menubar/menubarview.js';
 /**
  * The editor UI view class. Base class for the editor main views.
  */
@@ -26,6 +27,10 @@ export default abstract class EditorUIView extends View {
     locale: Locale;
     t: LocaleTranslate;
     abstract get editable(): EditableUIView;
+    /**
+     * Menu bar view instance. May not be initialized in some editor types.
+     */
+    menuBarView?: MenuBarView;
     /**
      * Creates an instance of the editor UI view class.
      *

package/dist/focuscycler.d.ts

@@ -9,7 +9,7 @@
 /**
  * @module ui/focuscycler
  */
-import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import { type ArrayOrItem, type FocusTracker, type KeystrokeHandler, type KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
 import type View from './view.js';
 import type ViewCollection from './viewcollection.js';
 declare const FocusCycler_base: {
@@ -109,6 +109,7 @@ export default class FocusCycler extends /* #__PURE__ */ FocusCycler_base {
         focusables: ViewCollection<FocusableView>;
         focusTracker: FocusTracker;
         keystrokeHandler?: KeystrokeHandler;
+        keystrokeHandlerOptions?: KeystrokeHandlerOptions;
         actions?: FocusCyclerActions;
     });
     /**
@@ -168,6 +169,54 @@ export default class FocusCycler extends /* #__PURE__ */ FocusCycler_base {
      * **Note**: Hidden views (e.g. with `display: none`) are ignored.
      */
     focusPrevious(): void;
+    /**
+     * Allows for creating continuous focus cycling across multiple focus cyclers and their collections of {@link #focusables}.
+     *
+     * It starts listening to the {@link module:ui/focuscycler~FocusCyclerForwardCycleEvent} and
+     * {@link module:ui/focuscycler~FocusCyclerBackwardCycleEvent} events of the chained focus cycler and engages,
+     * whenever the user reaches the last (forwards navigation) or first (backwards navigation) focusable view
+     * and would normally start over. Instead, the navigation continues on the higher level (flattens).
+     *
+     * For instance, for the following nested focus navigation structure, the focus would get stuck the moment
+     * the AB gets focused and its focus cycler starts managing it:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├───┐ │   │            │
+     *	   │            ├───► │  └─────┘  └─────┘  └─────┘   │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ │                              │ │   │            │
+     *	   │            │   │ └──────────────────────────────┘ │   │            │
+     *	   │            │   │                                  │   │            │
+     *	   └────────────┘   └──────────────────────────────────┘   └────────────┘
+     *
+     * Chaining a focus tracker that manages AA, AB, and AC with the focus tracker that manages ABA, ABB, and ABC
+     * creates a seamless navigation experience instead:
+     *
+     *	   ┌────────────┐   ┌──────────────────────────────────┐   ┌────────────┐
+     *	   │ AA         │   │ AB                               │   │ AC         │
+     *	   │            │   │                                  │   │            │
+     *	   │            │   │    ┌─────┐  ┌─────┐  ┌─────┐     │   │            │
+     *	   │            │   │ ┌──► ABA ├──► ABB ├──► ABC ├──┐  │   │            │
+     *	┌──►            ├───┼─┘  └─────┘  └─────┘  └─────┘  └──┼───►            ├──┐
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  │            │   │                                  │   │            │  │
+     *	│  └────────────┘   └──────────────────────────────────┘   └────────────┘  │
+     *	│                                                                          │
+     *	│                                                                          │
+     *	└──────────────────────────────────────────────────────────────────────────┘
+     *
+     * See {@link #unchain} to reverse the chaining.
+     */
+    chain(chainedFocusCycler: FocusCycler): void;
+    /**
+     * Reverses a chaining made by {@link #chain}.
+     */
+    unchain(otherFocusCycler: FocusCycler): void;
     /**
      * Focuses the given view if it exists.
      *
@@ -208,12 +257,9 @@ export type FocusableView = View & {
 export type ViewWithFocusCycler = FocusableView & {
     focusCycler: FocusCycler;
 };
-export interface FocusCyclerActions {
-    focusFirst?: ArrayOrItem<string>;
-    focusLast?: ArrayOrItem<string>;
-    focusNext?: ArrayOrItem<string>;
-    focusPrevious?: ArrayOrItem<string>;
-}
+export type FocusCyclerActions = {
+    [key in 'focusFirst' | 'focusLast' | 'focusPrevious' | 'focusNext']?: ArrayOrItem<string>;
+};
 /**
  * Fired when the focus cycler is about to move the focus from the last focusable item
  * to the first one.

package/dist/formheader/formheaderview.d.ts

@@ -22,8 +22,7 @@ import '../../theme/components/formheader/formheader.css';
  * The component can also be extended by any other elements, like: icons, dropdowns, etc.
  *
  * It is used i.a.
- * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
- * and {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}.
+ * by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}.
  *
  * The latter is an example, where the component has been extended by {@link module:ui/dropdown/dropdownview~DropdownView} view.
  */

package/dist/highlightedtext/buttonlabelwithhighlightview.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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/highlightedtext/buttonlabelwithhighlightview
+ */
+import type ButtonLabel from '../button/buttonlabel.js';
+import HighlightedTextView from './highlightedtextview.js';
+/**
+ * A button label view that can highlight a text fragment.
+ */
+export default class ButtonLabelWithHighlightView extends HighlightedTextView implements ButtonLabel {
+    /**
+     * @inheritDoc
+     */
+    style: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    text: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    id: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+}

package/dist/highlightedtext/labelwithhighlightview.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @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/highlightedtext/labelwithhighlightview
+ */
+import HighlightedTextView from './highlightedtextview.js';
+import type LabelView from '../label/labelview.js';
+/**
+ * A label view that can highlight a text fragment.
+ */
+export default class LabelWithHighlightView extends HighlightedTextView implements LabelView {
+    /**
+     * @inheritDoc
+     */
+    readonly id: string;
+    /**
+     * @inheritDoc
+     */
+    for: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    constructor();
+}

package/dist/index-editor.css

@@ -113,6 +113,38 @@ a.ck.ck-button{
 			display:block;
 		}
 
+.ck.ck-list-item-button{
+	min-height:unset;
+	width:100%;
+	border-radius:0;
+}
+
+[dir="ltr"] .ck.ck-list-item-button{
+		text-align:left;
+}
+
+[dir="rtl"] .ck.ck-list-item-button{
+		text-align:right;
+}
+
+.ck.ck-list-item-button .ck-list-item-button__check-holder{
+		display:inline-flex;
+		width:1em;
+		height:1em;
+	}
+
+[dir="ltr"] .ck.ck-list-item-button .ck-list-item-button__check-holder{
+			margin-right:var(--ck-spacing-standard);
+	}
+
+[dir="rtl"] .ck.ck-list-item-button .ck-list-item-button__check-holder{
+			margin-left:var(--ck-spacing-standard);
+	}
+
+.ck.ck-list-item-button .ck-list-item-button__check-icon{
+		height:100%;
+	}
+
 .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children{
 		display:none;
 	}

package/dist/index.css

@@ -174,6 +174,48 @@ a.ck.ck-button {
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-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
+ */
+
+.ck.ck-list-item-button {
+	min-height: unset;
+	width: 100%;
+	border-radius: 0;
+}
+
+[dir="ltr"] .ck.ck-list-item-button {
+		text-align: left;
+}
+
+[dir="rtl"] .ck.ck-list-item-button {
+		text-align: right;
+}
+
+.ck.ck-list-item-button .ck-list-item-button__check-holder {
+		display: inline-flex;
+		width: 1em;
+		height: 1em;
+	}
+
+[dir="ltr"] .ck.ck-list-item-button .ck-list-item-button__check-holder {
+			margin-right: var(--ck-spacing-standard);
+	}
+
+[dir="rtl"] .ck.ck-list-item-button .ck-list-item-button__check-holder {
+			margin-left: var(--ck-spacing-standard);
+	}
+
+.ck.ck-list-item-button .ck-list-item-button__check-icon {
+		height: 100%;
+	}
+
+/*
+ * 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
+ */
+
 .ck.ck-collapsible.ck-collapsible_collapsed > .ck-collapsible__children {
 		display: none;
 	}