@ckeditor/ckeditor5-ui 0.0.0-internal-20241017.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

package/LICENSE.md

@@ -0,0 +1,21 @@
+Software License Agreement
+==========================
+
+**CKEditor&nbsp;5 UI framework** – https://github.com/ckeditor/ckeditor5-ui <br>
+Copyright (c) 2003–2024, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
+
+* Lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

package/README.md

@@ -0,0 +1,26 @@
+CKEditor 5 UI framework
+===========================================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-ui.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-ui)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+
+This package implements a simple UI framework and CKEditor 5's standard UI library.
+
+## Demo
+
+Check out the [editor toolbar demo](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar/toolbar.html#demo) and [block toolbar demo](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar.html#block-toolbar#demo) in CKEditor 5 documentation.
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-ui` package](https://ckeditor.com/docs/ckeditor5/latest/api/ui.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+
+## Installation
+
+```bash
+npm install ckeditor5
+```
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

package/ckeditor5-metadata.json

@@ -0,0 +1,25 @@
+{
+	"plugins": [
+		{
+			"name": "Block toolbar",
+			"className": "BlockToolbar",
+			"description": "Provides an additional configurable toolbar on the left-hand side of the content area, next to the selected block element. It comes in handy when the main editor toolbar cannot be accessed.",
+			"docs": "getting-started/setup/toolbar.html#block-toolbar",
+			"path": "src/toolbar/block/blocktoolbar.js"
+		},
+		{
+			"name": "Accessibility help",
+			"className": "AccessibilityHelp",
+			"description": "Displays all editor keyboard shortcuts in a dialog window.",
+			"docs": "features/accessibility.html",
+			"path": "src/editorui/accessibilityhelp/accessibilityhelp.js",
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "accessibilityHelp",
+					"iconPath": "theme/icons/accessibility.svg"
+				}
+			]
+		}
+	]
+}

package/dist/arialiveannouncer.d.ts

@@ -0,0 +1,113 @@
+/**
+ * @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 type { Editor } from '@ckeditor/ckeditor5-core';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from './viewcollection.js';
+import View from './view.js';
+import '../theme/components/arialiveannouncer/arialiveannouncer.css';
+/**
+ * The politeness level of an `aria-live` announcement.
+ *
+ * Available keys are:
+ * * `AriaLiveAnnouncerPoliteness.POLITE`,
+ * * `AriaLiveAnnouncerPoliteness.ASSERTIVE`
+ *
+ * [Learn more](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels).
+ */
+export declare const AriaLiveAnnouncerPoliteness: {
+    readonly POLITE: "polite";
+    readonly ASSERTIVE: "assertive";
+};
+/**
+ * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+ * to the state of the editor features.
+ *
+ * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+ * state of the editor.
+ *
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
+ * ```ts
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
+ * ```
+ */
+export default class AriaLiveAnnouncer {
+    /**
+     * The editor instance.
+     */
+    readonly editor: Editor;
+    /**
+     * The view that aggregates all `aria-live` regions.
+     */
+    view?: AriaLiveAnnouncerView;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
+     *
+     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
+     *
+     * The default announcement politeness level is `'polite'`.
+     *
+     * ```ts
+     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
+     * ```
+     */
+    announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
+}
+/**
+ * The view that aggregates all `aria-live` regions.
+ */
+export declare class AriaLiveAnnouncerView extends View {
+    /**
+     * A collection of all views that represent individual `aria-live` regions.
+     */
+    readonly regionViews: ViewCollection<AriaLiveAnnouncerRegionView>;
+    constructor(locale: Locale);
+}
+/**
+ * The view that represents a single `aria-live`.
+ */
+export declare class AriaLiveAnnouncerRegionView extends View {
+    /**
+     * Current politeness level of the region.
+     */
+    readonly politeness: AriaLiveAnnouncerPolitenessValue;
+    /**
+     * DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
+     */
+    private _domConverter;
+    /**
+     * Interval used to remove additions. It prevents accumulation of added nodes in region.
+     */
+    private _pruneAnnouncementsInterval;
+    constructor(editor: Editor, politeness: AriaLiveAnnouncerPolitenessValue);
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }: AriaLiveAppendContentAttributes): void;
+    /**
+     * Return current announcements list HTML element.
+     */
+    private get _listElement();
+}
+type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+type AriaLiveAppendContentAttributes = {
+    announcement: string;
+    isUnsafeHTML?: boolean;
+};
+type AriaLiveAnnounceConfig = {
+    politeness: AriaLiveAnnouncerPolitenessValue;
+    isUnsafeHTML?: boolean;
+};
+export {};

package/dist/augmentation.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @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 type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification, Dialog, AccessibilityHelp } from './index.js';
+import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
+         * feature.
+         *
+         * ## Configuring toolbar items
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+         * };
+         * ```
+         *
+         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	balloonToolbar: {
+         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         */
+        balloonToolbar?: ToolbarConfig;
+        /**
+         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
+         * feature.
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * You can also use `'|'` to create a separator between groups of items:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
+         * };
+         * ```
+         *
+         * ## Configuring items grouping
+         *
+         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+         *
+         * ```ts
+         * const config = {
+         * 	blockToolbar: {
+         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+         * 		shouldNotGroupWhenFull: true
+         * 	},
+         * };
+         * ```
+         *
+         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+         */
+        blockToolbar?: ToolbarConfig;
+    }
+    interface PluginsMap {
+        [BalloonToolbar.pluginName]: BalloonToolbar;
+        [BlockToolbar.pluginName]: BlockToolbar;
+        [ContextualBalloon.pluginName]: ContextualBalloon;
+        [Dialog.pluginName]: Dialog;
+        [Notification.pluginName]: Notification;
+        [AccessibilityHelp.pluginName]: AccessibilityHelp;
+    }
+}

package/dist/autocomplete/autocompleteview.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @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/autocomplete/autocompleteview
+*/
+import { type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
+import SearchTextView, { type SearchTextViewConfig } from '../search/text/searchtextview.js';
+import type SearchResultsView from '../search/searchresultsview.js';
+import type InputBase from '../input/inputbase.js';
+import '../../theme/components/autocomplete/autocomplete.css';
+/**
+ * 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<TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextView<TQueryFieldView> {
+    /**
+     * The configuration of the autocomplete view.
+     */
+    protected _config: AutocompleteViewConfig<TQueryFieldView>;
+    resultsView: AutocompleteResultsView;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, config: AutocompleteViewConfig<TQueryFieldView>);
+    /**
+     * Updates the position of the results view on demand.
+     */
+    private _updateResultsViewWidthAndPosition;
+    /**
+     * Updates the visibility of the results view on demand.
+     */
+    private _updateResultsVisibility;
+    /**
+     * Positions for the autocomplete results view. Two positions are defined by default:
+     * * `s` - below the search field,
+     * * `n` - above the search field.
+     */
+    static defaultResultsPositions: Array<PositioningFunction>;
+    /**
+     * A function used to calculate the optimal position for the dropdown panel.
+     */
+    private static _getOptimalPosition;
+}
+/**
+ * An interface describing additional properties of the floating search results view used by the autocomplete plugin.
+ */
+export interface AutocompleteResultsView extends SearchResultsView {
+    /**
+     * Controls the visibility of the results view.
+     *
+     * @observable
+     */
+    isVisible: boolean;
+    /**
+     * Controls the position (CSS class suffix) of the results view.
+     *
+     * @internal
+    */
+    _position?: string;
+    /**
+     * The observable property determining the CSS width of the results view.
+     *
+     * @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.
+     *
+     * @default 0
+     */
+    queryMinChars?: number;
+}

package/dist/badge/badge.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @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/badge/badge
+ */
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import type View from '../view.js';
+declare const Badge_base: {
+    new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
+    prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
+};
+/**
+ * A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element
+ * (editor root, source editing area, etc.) when the editor is focused.
+ *
+ * @private
+ */
+export default abstract class Badge extends /* #__PURE__ */ Badge_base {
+    /**
+     * Editor instance the helper was created for.
+     */
+    protected readonly editor: Editor;
+    /**
+     * A reference to the balloon panel hosting and positioning the badge content.
+     */
+    private _balloonView;
+    /**
+     * A throttled version of the {@link #_showBalloon} method meant for frequent use to avoid performance loss.
+     */
+    private _showBalloonThrottled;
+    /**
+     * A reference to the last editable element (root, source editing area, etc.) focused by the user.
+     * Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the
+     * right element whether the user is typing or using the UI.
+     */
+    private _lastFocusedEditableElement;
+    /**
+     * An additional CSS class added to the `BalloonView`.
+     */
+    private readonly _balloonClass;
+    /**
+     * Creates a badge for a given editor. The feature is initialized on Editor#ready
+     * event.
+     */
+    protected constructor(editor: Editor, options?: {
+        balloonClass?: string;
+    });
+    /**
+     * Destroys the badge along with its view.
+     */
+    destroy(): void;
+    /**
+     * Enables badge label once the editor (ui) is ready.
+     */
+    protected _handleEditorReady(): void;
+    /**
+     * Returns normalized configuration for the badge.
+     */
+    protected _getNormalizedConfig(): BadgeConfig;
+    /**
+     * Creates the badge content.
+     */
+    protected abstract _createBadgeContent(): View<HTMLElement>;
+    /**
+     * Enables the badge feature.
+     */
+    protected abstract _isEnabled(): boolean;
+    /**
+     * Attempts to display the balloon with the badge view.
+     */
+    private _showBalloon;
+    /**
+     * Hides the badge balloon if already visible.
+     */
+    private _hideBalloon;
+    /**
+     * Creates an instance of the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon panel}
+     * with the badge view inside ready for positioning.
+     */
+    private _createBalloonView;
+    /**
+     * Returns the options for attaching the balloon to the focused editable element.
+     */
+    private _getBalloonAttachOptions;
+    /**
+     * Updates the {@link #_lastFocusedEditableElement} based on the state of the global focus tracker.
+     */
+    private _updateLastFocusedEditableElement;
+}
+/**
+ * The badge configuration options.
+ **/
+export interface BadgeConfig {
+    /**
+     * The position of the badge.
+     *
+     * * When `'inside'`, the badge will be displayed within the boundaries of the editing area.
+     * * When `'border'`, the basge will be displayed over the bottom border of the editing area.
+     *
+     * @default 'border'
+     */
+    position: 'inside' | 'border';
+    /**
+     * Allows choosing the side of the editing area where the badge will be displayed.
+     *
+     * **Note:** If {@link module:core/editor/editorconfig~EditorConfig#language `config.language`} is set to an RTL (right-to-left)
+     * language, the side switches to `'left'` by default.
+     *
+     * @default 'right'
+     */
+    side: 'left' | 'right';
+    /**
+     * The vertical distance the badge can be moved away from its default position.
+     *
+     * **Note:** If `position` is `'border'`, the offset is measured from the (vertical) center of the badge.
+     *
+     * @default 5
+     */
+    verticalOffset: number;
+    /**
+     * The horizontal distance between the side of the editing root and the nearest side of the badge.
+     *
+     * @default 5
+     */
+    horizontalOffset: number;
+}
+export {};

package/dist/bindings/addkeyboardhandlingforgrid.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @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/bindings/addkeyboardhandlingforgrid
+ */
+import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import type ViewCollection from '../viewcollection.js';
+/**
+ * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
+ *
+ * @param options Configuration options.
+ * @param options.keystrokeHandler Keystroke handler to register navigation with arrow keys.
+ * @param options.focusTracker A focus tracker for grid elements.
+ * @param options.gridItems A collection of grid items.
+ * @param options.numberOfColumns Number of columns in the grid. Can be specified as a function that returns
+ * the number (e.g. for responsive grids).
+ * @param options.uiLanguageDirection String of ui language direction.
+ */
+export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
+    keystrokeHandler: KeystrokeHandler;
+    focusTracker: FocusTracker;
+    gridItems: ViewCollection;
+    numberOfColumns: number | (() => number);
+    uiLanguageDirection?: string;
+}): void;

package/dist/bindings/clickoutsidehandler.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/bindings/clickoutsidehandler
+ */
+import type { CallbackOptions, DomEmitter } from '@ckeditor/ckeditor5-utils';
+/**
+ * Handles clicking **outside** of a specified set of elements, then fires an action.
+ *
+ * **Note**: Actually, the action is executed upon `mousedown`, not `click`. It prevents
+ * certain issues when the user keeps holding the mouse button and the UI cannot react
+ * properly.
+ *
+ * @param options Configuration options.
+ * @param options.emitter The emitter to which this behavior should be added.
+ * @param options.activator Function returning a `Boolean`, to determine whether the handler is active.
+ * @param options.contextElements Array of HTML elements or a callback returning an array of HTML elements
+ * that determine the scope of the handler. Clicking any of them or their descendants will **not** fire the callback.
+ * @param options.callback An action executed by the handler.
+ * @param options.listenerOptions Additional options for the listener (like priority).
+ */
+export default function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }: {
+    emitter: DomEmitter;
+    activator: () => boolean;
+    contextElements: Array<Element> | (() => Array<Element>);
+    callback: () => void;
+    listenerOptions?: CallbackOptions;
+}): void;

package/dist/bindings/csstransitiondisablermixin.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/bindings/csstransitiondisablermixin
+ */
+import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
+import type View from '../view.js';
+/**
+ * A mixin that brings the possibility to temporarily disable CSS transitions using
+ * {@link module:ui/view~View} methods. It is helpful when, for instance, the transitions should not happen
+ * when the view is first displayed but they should work normal in other cases.
+ *
+ * The methods to control the CSS transitions are:
+ * * `disableCssTransitions()` – Adds the `.ck-transitions-disabled` class to the
+ * {@link module:ui/view~View#element view element}.
+ * * `enableCssTransitions()` – Removes the `.ck-transitions-disabled` class from the
+ * {@link module:ui/view~View#element view element}.
+ *
+ * The usage comes down to:
+ *
+ * ```ts
+ * const MyViewWithCssTransitionDisabler = CssTransitionDisablerMixin( MyView );
+ * const view = new MyViewWithCssTransitionDisabler();
+ *
+ * // ...
+ *
+ * view.disableCssTransitions();
+ * view.show();
+ * view.enableCssTransitions();
+ * ```
+ *
+ * @param view View instance that should get this functionality.
+ */
+export default function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
+export type ViewWithCssTransitionDisabler = View & {
+    disableCssTransitions(): void;
+    enableCssTransitions(): void;
+};

package/dist/bindings/draggableviewmixin.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @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/bindings/draggableviewmixin
+ */
+import type View from '../view.js';
+import { type Constructor, type Mixed } from '@ckeditor/ckeditor5-utils';
+/**
+ * A mixin that brings the possibility to observe dragging of the view element.
+ * The view has to implement the {@link ~DraggableView} interface to use it:
+ *
+ * ```js
+ * export default class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
+ * 		// ...
+ * }
+ * ```
+ *
+ * Creating a class extending it attaches a set of mouse and touch listeners allowing to observe dragging of the view element:
+ * * `mousedown` and `touchstart` on the view element - starting the dragging.
+ * * `mousemove` and `touchmove` on the document - updating the view coordinates.
+ * * `mouseup` and `touchend` on the document - stopping the dragging.
+ *
+ * The mixin itself does not provide a visual feedback (that is, the dragged element does not change its position) -
+ * it is up to the developer to implement it.
+ */
+export default function DraggableViewMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, DraggableView>;
+/**
+ * An interface that should be implemented by views that want to be draggable.
+ */
+export interface DraggableView extends View {
+    get dragHandleElement(): HTMLElement | null;
+}
+/**
+ * An event data object for the {@link ~DraggableView} `drag` event. Fired when the view is dragged.
+ */
+export type DraggableViewDragEvent = {
+    name: 'drag';
+    args: [
+        {
+            deltaX: number;
+            deltaY: number;
+        }
+    ];
+};