@ckeditor/ckeditor5-ui 45.2.1 → 46.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "45.2.1",
+  "version": "46.0.0-alpha.1",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,15 +17,15 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.2.1",
-    "@ckeditor/ckeditor5-editor-multi-root": "45.2.1",
-    "@ckeditor/ckeditor5-engine": "45.2.1",
-    "@ckeditor/ckeditor5-icons": "45.2.1",
-    "@ckeditor/ckeditor5-utils": "45.2.1",
+    "@ckeditor/ckeditor5-core": "46.0.0-alpha.1",
+    "@ckeditor/ckeditor5-editor-multi-root": "46.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "46.0.0-alpha.1",
+    "@ckeditor/ckeditor5-icons": "46.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "46.0.0-alpha.1",
     "@types/color-convert": "2.0.4",
-    "color-convert": "2.0.1",
-    "color-parse": "1.4.2",
-    "es-toolkit": "1.32.0",
+    "color-convert": "3.1.0",
+    "color-parse": "2.0.2",
+    "es-toolkit": "1.39.5",
     "vanilla-colorful": "0.7.2"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/arialiveannouncer.d.ts

@@ -4,8 +4,8 @@
  */
 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 { type ViewCollection } from './viewcollection.js';
+import { View } from './view.js';
 import '../theme/components/arialiveannouncer/arialiveannouncer.css';
 /**
  * The politeness level of an `aria-live` announcement.
@@ -33,7 +33,7 @@ export declare const AriaLiveAnnouncerPoliteness: {
  * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
-export default class AriaLiveAnnouncer {
+export declare class AriaLiveAnnouncer {
     /**
      * The editor instance.
      */
@@ -97,13 +97,12 @@ export declare class AriaLiveAnnouncerRegionView extends View {
      */
     private get _listElement();
 }
-type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
-type AriaLiveAppendContentAttributes = {
+export type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+export type AriaLiveAppendContentAttributes = {
     announcement: string;
     isUnsafeHTML?: boolean;
 };
-type AriaLiveAnnounceConfig = {
+export type AriaLiveAnnounceConfig = {
     politeness: AriaLiveAnnouncerPolitenessValue;
     isUnsafeHTML?: boolean;
 };
-export {};

package/src/arialiveannouncer.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import View from './view.js';
+import { View } from './view.js';
 import '../theme/components/arialiveannouncer/arialiveannouncer.css';
 /**
  * The politeness level of an `aria-live` announcement.
@@ -30,7 +30,7 @@ export const AriaLiveAnnouncerPoliteness = {
  * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
-export default class AriaLiveAnnouncer {
+export class AriaLiveAnnouncer {
     /**
      * The editor instance.
      */

package/src/autocomplete/autocompleteview.d.ts

@@ -6,16 +6,16 @@
  * @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 { 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> {
+export declare class AutocompleteView<TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextView<TQueryFieldView> {
     /**
      * The configuration of the autocomplete view.
      */

package/src/autocomplete/autocompleteview.js

@@ -6,7 +6,7 @@
  * @module ui/autocomplete/autocompleteview
 */
 import { getOptimalPosition, global, toUnit, Rect } from '@ckeditor/ckeditor5-utils';
-import SearchTextView from '../search/text/searchtextview.js';
+import { SearchTextView } from '../search/text/searchtextview.js';
 import '../../theme/components/autocomplete/autocomplete.css';
 /**
  * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
@@ -155,4 +155,4 @@ class AutocompleteView extends SearchTextView {
      */
     static _getOptimalPosition = getOptimalPosition;
 }
-export default AutocompleteView;
+export { AutocompleteView };

package/src/badge/badge.d.ts

@@ -6,7 +6,7 @@
  * @module ui/badge/badge
  */
 import type { Editor } from '@ckeditor/ckeditor5-core';
-import type View from '../view.js';
+import { type View } from '../view.js';
 declare const Badge_base: {
     new (): import("@ckeditor/ckeditor5-utils").DomEmitter;
     prototype: import("@ckeditor/ckeditor5-utils").DomEmitter;
@@ -17,7 +17,7 @@ declare const Badge_base: {
  *
  * @private
  */
-export default abstract class Badge extends /* #__PURE__ */ Badge_base {
+export declare abstract class Badge extends /* #__PURE__ */ Badge_base {
     /**
      * Editor instance the helper was created for.
      */

package/src/badge/badge.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Rect, DomEmitterMixin } from '@ckeditor/ckeditor5-utils';
-import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
+import { BalloonPanelView } from '../panel/balloon/balloonpanelview.js';
 import { throttle } from 'es-toolkit/compat';
 // ⚠ Note, whenever changing the threshold, make sure to update the docs/support/managing-ckeditor-logo.md docs
 // as this information is also mentioned there ⚠.
@@ -15,7 +15,7 @@ const NARROW_ROOT_WIDTH_THRESHOLD = 350;
  *
  * @private
  */
-export default class Badge extends /* #__PURE__ */ DomEmitterMixin() {
+export class Badge extends /* #__PURE__ */ DomEmitterMixin() {
     /**
      * Editor instance the helper was created for.
      */

package/src/bindings/addkeyboardhandlingforgrid.d.ts

@@ -6,7 +6,7 @@
  * @module ui/bindings/addkeyboardhandlingforgrid
  */
 import type { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import type ViewCollection from '../viewcollection.js';
+import { type ViewCollection } from '../viewcollection.js';
 /**
  * A helper that adds a keyboard navigation support (arrow up/down/left/right) for grids.
  *
@@ -18,7 +18,7 @@ import type ViewCollection from '../viewcollection.js';
  * the number (e.g. for responsive grids).
  * @param options.uiLanguageDirection String of ui language direction.
  */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
+export declare function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }: {
     keystrokeHandler: KeystrokeHandler;
     focusTracker: FocusTracker;
     gridItems: ViewCollection;

package/src/bindings/addkeyboardhandlingforgrid.js

@@ -13,7 +13,7 @@
  * the number (e.g. for responsive grids).
  * @param options.uiLanguageDirection String of ui language direction.
  */
-export default function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
+export function addKeyboardHandlingForGrid({ keystrokeHandler, focusTracker, gridItems, numberOfColumns, uiLanguageDirection }) {
     const getNumberOfColumns = typeof numberOfColumns === 'number' ? () => numberOfColumns : numberOfColumns;
     keystrokeHandler.set('arrowright', getGridItemFocuser((focusedElementIndex, gridItems) => {
         return uiLanguageDirection === 'rtl' ?

package/src/bindings/clickoutsidehandler.d.ts

@@ -21,7 +21,7 @@ import type { CallbackOptions, DomEmitter } from '@ckeditor/ckeditor5-utils';
  * @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 }: {
+export declare function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }: {
     emitter: DomEmitter;
     activator: () => boolean;
     contextElements: Array<Element> | (() => Array<Element>);

package/src/bindings/clickoutsidehandler.js

@@ -17,7 +17,7 @@
  * @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 }) {
+export function clickOutsideHandler({ emitter, activator, callback, contextElements, listenerOptions }) {
     emitter.listenTo(document, 'mousedown', (evt, domEvt) => {
         if (!activator()) {
             return;

package/src/bindings/csstransitiondisablermixin.d.ts

@@ -6,7 +6,7 @@
  * @module ui/bindings/csstransitiondisablermixin
  */
 import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
-import type View from '../view.js';
+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
@@ -33,8 +33,9 @@ import type View from '../view.js';
  *
  * @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 & {
+export declare function CssTransitionDisablerMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, ViewWithCssTransitionDisabler>;
+export declare class ViewWithCssTransitionDisabler extends View {
     disableCssTransitions(): void;
     enableCssTransitions(): void;
-};
+    protected initializeCssTransitionDisablerMixin(): void;
+}

package/src/bindings/csstransitiondisablermixin.js

@@ -28,7 +28,7 @@
  *
  * @param view View instance that should get this functionality.
  */
-export default function CssTransitionDisablerMixin(view) {
+export function CssTransitionDisablerMixin(view) {
     class Mixin extends view {
         disableCssTransitions() {
             this._isCssTransitionsDisabled = true;
@@ -42,14 +42,17 @@ export default function CssTransitionDisablerMixin(view) {
             this.initializeCssTransitionDisablerMixin();
         }
         initializeCssTransitionDisablerMixin() {
-            this.extendTemplate({
-                attributes: {
-                    class: [
-                        this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
-                    ]
-                }
-            });
+            if (this.template) {
+                this.extendTemplate({
+                    attributes: {
+                        class: [
+                            this.bindTemplate.if('_isCssTransitionsDisabled', 'ck-transitions-disabled')
+                        ]
+                    }
+                });
+            }
         }
     }
     return Mixin;
 }
+;

package/src/bindings/draggableviewmixin.d.ts

@@ -5,14 +5,14 @@
 /**
  * @module ui/bindings/draggableviewmixin
  */
-import type View from '../view.js';
+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 {
+ * export class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
  * 		// ...
  * }
  * ```
@@ -25,7 +25,7 @@ import { type Constructor, type Mixed } from '@ckeditor/ckeditor5-utils';
  * 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>;
+export declare function DraggableViewMixin<Base extends Constructor<View>>(view: Base): Mixed<Base, DraggableView>;
 /**
  * An interface that should be implemented by views that want to be draggable.
  */

package/src/bindings/draggableviewmixin.js

@@ -8,7 +8,7 @@ import { global } from '@ckeditor/ckeditor5-utils';
  * The view has to implement the {@link ~DraggableView} interface to use it:
  *
  * ```js
- * export default class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
+ * export class MyDraggableView extends DraggableViewMixin( View ) implements DraggableView {
  * 		// ...
  * }
  * ```
@@ -21,7 +21,7 @@ import { global } from '@ckeditor/ckeditor5-utils';
  * 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(view) {
+export function DraggableViewMixin(view) {
     class DraggableMixin extends view {
         /**
          * A bound version of {@link #_onDrag}.

package/src/bindings/preventdefault.d.ts

@@ -6,7 +6,7 @@
  * @module ui/bindings/preventdefault
  */
 import type { ListenerBinding } from '../template.js';
-import type View from '../view.js';
+import { type View } from '../view.js';
 /**
  * A helper which executes a native `Event.preventDefault()` if the target of an event equals the
  * {@link module:ui/view~View#element element of the view}. It shortens the definition of a
@@ -14,7 +14,7 @@ import type View from '../view.js';
  *
  * ```ts
  * // In a class extending View.
- * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
+ * import { preventDefault } from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
  *
  * // ...
  *
@@ -29,5 +29,6 @@ import type View from '../view.js';
  * ```
  *
  * @param view View instance that defines the template.
+ * @internal
  */
-export default function preventDefault(view: View): ListenerBinding;
+export declare function preventDefault(view: View): ListenerBinding;

package/src/bindings/preventdefault.js

@@ -9,7 +9,7 @@
  *
  * ```ts
  * // In a class extending View.
- * import preventDefault from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
+ * import { preventDefault } from '@ckeditor/ckeditor5-ui/src/bindings/preventdefault';
  *
  * // ...
  *
@@ -24,8 +24,9 @@
  * ```
  *
  * @param view View instance that defines the template.
+ * @internal
  */
-export default function preventDefault(view) {
+export function preventDefault(view) {
     return view.bindTemplate.to(evt => {
         if (evt.target === view.element) {
             evt.preventDefault();

package/src/bindings/submithandler.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/bindings/submithandler
  */
-import type View from '../view.js';
+import { type View } from '../view.js';
 /**
  * A handler useful for {@link module:ui/view~View views} working as HTML forms. It intercepts a native DOM
  * `submit` event, prevents the default web browser behavior (navigation and page reload) and
@@ -13,7 +13,7 @@ import type View from '../view.js';
  * {@link module:utils/dom/emittermixin~DomEmitter emitter}, e.g. to serialize the form data.
  *
  * ```ts
- * import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
+ * import { submitHandler } from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
  *
  * // ...
  *
@@ -43,7 +43,7 @@ import type View from '../view.js';
  * @param options Configuration options.
  * @param options.view The view which DOM `submit` events should be handled.
  */
-export default function submitHandler({ view }: {
+export declare function submitHandler({ view }: {
     view: View;
 }): void;
 /**

package/src/bindings/submithandler.js

@@ -9,7 +9,7 @@
  * {@link module:utils/dom/emittermixin~DomEmitter emitter}, e.g. to serialize the form data.
  *
  * ```ts
- * import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
+ * import { submitHandler } from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
  *
  * // ...
  *
@@ -39,7 +39,7 @@
  * @param options Configuration options.
  * @param options.view The view which DOM `submit` events should be handled.
  */
-export default function submitHandler({ view }) {
+export function submitHandler({ view }) {
     view.listenTo(view.element, 'submit', (evt, domEvt) => {
         domEvt.preventDefault();
         view.fire('submit');

package/src/button/button.d.ts

@@ -10,7 +10,7 @@
  * {@link module:ui/dropdown/button/splitbuttonview~SplitButtonView} and
  * {@link module:ui/dropdown/button/dropdownbuttonview~DropdownButtonView}.
  */
-export default interface Button {
+export interface Button {
     /**
      * The label of the button view visible to the user when {@link #withText} is `true`.
      * It can also be used to create a {@link #tooltip}.

package/src/button/buttonlabel.d.ts

@@ -5,12 +5,12 @@
 /**
  * @module ui/button/buttonlabel
 */
-import type View from '../view.js';
+import { type View } from '../view.js';
 /**
  * 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 {
+export interface ButtonLabel extends View {
     /**
      * The `id` attribute of the button label. It is used for accessibility purposes
      * to describe the button.

package/src/button/buttonlabelview.d.ts

@@ -5,13 +5,13 @@
 /**
  * @module ui/button/buttonlabelview
  */
-import View from '../view.js';
-import type ButtonLabel from './buttonlabel.js';
+import { View } from '../view.js';
+import { type ButtonLabel } from './buttonlabel.js';
 /**
  * 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 implements ButtonLabel {
+export declare class ButtonLabelView extends View implements ButtonLabel {
     /**
      * @inheritDoc
      */

package/src/button/buttonlabelview.js

@@ -5,12 +5,12 @@
 /**
  * @module ui/button/buttonlabelview
  */
-import View from '../view.js';
+import { View } from '../view.js';
 /**
  * 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 class ButtonLabelView extends View {
     /**
      * @inheritDoc
      */

package/src/button/buttonview.d.ts

@@ -5,11 +5,11 @@
 /**
  * @module ui/button/buttonview
  */
-import View from '../view.js';
-import IconView from '../icon/iconview.js';
-import type ViewCollection from '../viewcollection.js';
-import type { default as Button } from './button.js';
-import type ButtonLabel from './buttonlabel.js';
+import { View } from '../view.js';
+import { IconView } from '../icon/iconview.js';
+import { type ViewCollection } from '../viewcollection.js';
+import type { Button } from './button.js';
+import { type ButtonLabel } from './buttonlabel.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**
@@ -30,7 +30,7 @@ import '../../theme/components/button/button.css';
  * document.body.append( view.element );
  * ```
  */
-export default class ButtonView extends View<HTMLButtonElement> implements Button {
+export declare class ButtonView extends View<HTMLButtonElement> implements Button {
     /**
      * Collection of the child views inside of the button {@link #element}.
      */

package/src/button/buttonview.js

@@ -5,9 +5,9 @@
 /**
  * @module ui/button/buttonview
  */
-import View from '../view.js';
-import IconView from '../icon/iconview.js';
-import ButtonLabelView from './buttonlabelview.js';
+import { View } from '../view.js';
+import { IconView } from '../icon/iconview.js';
+import { ButtonLabelView } from './buttonlabelview.js';
 import { env, getEnvKeystrokeText, uid, delay } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/button/button.css';
 /**
@@ -28,7 +28,7 @@ import '../../theme/components/button/button.css';
  * document.body.append( view.element );
  * ```
  */
-export default class ButtonView extends View {
+export class ButtonView extends View {
     /**
      * Collection of the child views inside of the button {@link #element}.
      */

package/src/button/filedialogbuttonview.d.ts

@@ -5,10 +5,10 @@
 /**
  * @module ui/button/filedialogbuttonview
  */
-import View from '../view.js';
-import ButtonView from './buttonview.js';
-import type { Mixed } from '@ckeditor/ckeditor5-utils';
-import ListItemButtonView from './listitembuttonview.js';
+import { View } from '../view.js';
+import { ButtonView } from './buttonview.js';
+import type { Constructor, Mixed } from '@ckeditor/ckeditor5-utils';
+import { ListItemButtonView } from './listitembuttonview.js';
 declare const FileDialogButtonView_base: Mixed<typeof ButtonView, FileDialogButtonViewBase>;
 /**
  * The file dialog button view.
@@ -34,7 +34,7 @@ declare const FileDialogButtonView_base: Mixed<typeof ButtonView, FileDialogButt
  * } );
  * ```
  */
-export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogButtonView_base {
+export declare class FileDialogButtonView extends /* #__PURE__ */ FileDialogButtonView_base {
 }
 declare const FileDialogListItemButtonView_base: Mixed<typeof ListItemButtonView, FileDialogButtonViewBase>;
 /**
@@ -63,16 +63,21 @@ declare const FileDialogListItemButtonView_base: Mixed<typeof ListItemButtonView
  */
 export declare class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogListItemButtonView_base {
 }
+/**
+ * Mixin function that enhances a base button view class with file dialog functionality. It is used
+ * to create a button view class that opens the native select file dialog when clicked.
+ *
+ * The enhanced view includes a button and a hidden file input. When the button is clicked, the file dialog is opened.
+ * The mixin adds properties and methods to the base class to handle the file selection.
+ *
+ * @param view The base class to be enhanced with file dialog functionality.
+ * @returns A new class that extends the base class and includes the file dialog functionality.
+ */
+export declare function FileDialogViewMixin<Base extends Constructor<ButtonView>>(view: Base): Mixed<Base, FileDialogButtonViewBase>;
 /**
  * Represents the base view for a file dialog button component.
  */
-type FileDialogButtonViewBase = View & {
-    /**
-     * The button view of the component.
-     *
-     * @deprecated
-     */
-    buttonView: ButtonView;
+export type FileDialogButtonViewBase = View & {
     /**
      * Accepted file types. Can be provided in form of file extensions, media type or one of:
      * * `audio/*`,

package/src/button/filedialogbuttonview.js

@@ -5,9 +5,9 @@
 /**
  * @module ui/button/filedialogbuttonview
  */
-import View from '../view.js';
-import ButtonView from './buttonview.js';
-import ListItemButtonView from './listitembuttonview.js';
+import { View } from '../view.js';
+import { ButtonView } from './buttonview.js';
+import { ListItemButtonView } from './listitembuttonview.js';
 /**
  * The file dialog button view.
  *
@@ -32,7 +32,7 @@ import ListItemButtonView from './listitembuttonview.js';
  * } );
  * ```
  */
-export default class FileDialogButtonView extends /* #__PURE__ */ FileDialogViewMixin(ButtonView) {
+export class FileDialogButtonView extends /* #__PURE__ */ FileDialogViewMixin(ButtonView) {
 }
 /**
  * The file dialog button view used in a lists.
@@ -70,14 +70,8 @@ export class FileDialogListItemButtonView extends /* #__PURE__ */ FileDialogView
  * @param view The base class to be enhanced with file dialog functionality.
  * @returns A new class that extends the base class and includes the file dialog functionality.
  */
-function FileDialogViewMixin(view) {
+export function FileDialogViewMixin(view) {
     class FileDialogView extends view {
-        /**
-         * The button view of the component.
-         *
-         * @deprecated
-         */
-        buttonView;
         /**
          * A hidden `<input>` view used to execute file dialog.
          */
@@ -87,8 +81,6 @@ function FileDialogViewMixin(view) {
          */
         constructor(...args) {
             super(...args);
-            // For backward compatibility.
-            this.buttonView = this;
             this._fileInputView = new FileInputView(this.locale);
             this._fileInputView.bind('acceptedType').to(this);
             this._fileInputView.bind('allowMultipleFiles').to(this);