@ckeditor/ckeditor5-ui 40.2.0 → 41.0.0

package/src/search/searchresultsview.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/searchresultsview
  */
-import View from '../view';
-import type ViewCollection from '../viewcollection';
+import View from '../view.js';
+import type ViewCollection from '../viewcollection.js';
 import { FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
-import { default as FocusCycler, type FocusableView } from '../focuscycler';
+import { default as FocusCycler, type FocusableView } from '../focuscycler.js';
 /**
  * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
  */
@@ -24,7 +24,7 @@ export default class SearchResultsView extends View implements FocusableView {
      *
      * @readonly
      */
-    children: ViewCollection;
+    children: ViewCollection<FocusableView>;
     /**
      * Provides the focus management (keyboard navigation) in the view.
      *

package/src/search/searchresultsview.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/searchresultsview
  */
-import View from '../view';
+import View from '../view.js';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
-import { default as FocusCycler } from '../focuscycler';
+import { default as FocusCycler } from '../focuscycler.js';
 /**
  * A sub-component of {@link module:ui/search/text/searchtextview~SearchTextView}. It hosts the filtered and the information views.
  */

package/src/search/text/searchtextqueryview.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/text/searchtextqueryview
  */
-import ButtonView from '../../button/buttonview';
-import IconView from '../../icon/iconview';
-import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview';
-import type InputBase from '../../input/inputbase';
+import ButtonView from '../../button/buttonview.js';
+import IconView from '../../icon/iconview.js';
+import LabeledFieldView, { type LabeledFieldViewCreator } from '../../labeledfield/labeledfieldview.js';
+import type InputBase from '../../input/inputbase.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.

package/src/search/text/searchtextqueryview.js

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/text/searchtextqueryview
  */
-import ButtonView from '../../button/buttonview';
-import IconView from '../../icon/iconview';
-import LabeledFieldView from '../../labeledfield/labeledfieldview';
-import { createLabeledInputText } from '../../labeledfield/utils';
+import ButtonView from '../../button/buttonview.js';
+import IconView from '../../icon/iconview.js';
+import LabeledFieldView from '../../labeledfield/labeledfieldview.js';
+import { createLabeledInputText } from '../../labeledfield/utils.js';
 import { icons } from '@ckeditor/ckeditor5-core';
 /**
  * A search input field for the {@link module:ui/search/text/searchtextview~SearchTextView} component.

package/src/search/text/searchtextview.d.ts

@@ -1,19 +1,19 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/text/searchtextview
 */
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import View from '../../view';
-import { default as SearchTextQueryView, type SearchTextQueryViewConfig } from './searchtextqueryview';
-import SearchResultsView from '../searchresultsview';
-import FocusCycler from '../../focuscycler';
-import type FilteredView from '../filteredview';
-import type ViewCollection from '../../viewcollection';
-import type InputBase from '../../input/inputbase';
-import type InputTextView from '../../inputtext/inputtextview';
+import View from '../../view.js';
+import { default as SearchTextQueryView, type SearchTextQueryViewConfig } from './searchtextqueryview.js';
+import SearchResultsView from '../searchresultsview.js';
+import FocusCycler, { type FocusableView } from '../../focuscycler.js';
+import type FilteredView from '../filteredview.js';
+import type ViewCollection from '../../viewcollection.js';
+import type InputBase from '../../input/inputbase.js';
+import type InputTextView from '../../inputtext/inputtextview.js';
 import '../../../theme/components/search/search.css';
 /**
  * A search component that allows filtering of an arbitrary view based on a search query
@@ -57,7 +57,7 @@ export default class SearchTextView<TQueryFieldView extends InputBase<HTMLInputE
     /**
      * The view that displays the information about the search results.
      */
-    infoView: View | undefined;
+    infoView: FocusableView | undefined;
     /**
      * The view that allows the user to enter the search query.
      */
@@ -94,7 +94,7 @@ export default class SearchTextView<TQueryFieldView extends InputBase<HTMLInputE
      *
      * @readonly
      */
-    readonly focusableChildren: ViewCollection;
+    readonly focusableChildren: ViewCollection<FocusableView>;
     locale: Locale;
     /**
      * Provides the focus management (keyboard navigation) between {@link #queryView} and {@link #filteredView}.
@@ -164,7 +164,7 @@ export interface SearchTextViewConfig<TConfigSearchField extends InputBase<HTMLI
          * The view that displays the information about the search results. If not specified,
          * {@link module:ui/search/searchinfoview~SearchInfoView} is used.
          */
-        instance?: View;
+        instance?: FocusableView;
         /**
          * The configuration of text labels displayed in the {@link #infoView} in different states
          * of the search component.

package/src/search/text/searchtextview.js

@@ -1,16 +1,16 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/search/text/searchtextview
 */
 import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
-import View from '../../view';
-import { default as SearchTextQueryView } from './searchtextqueryview';
-import SearchInfoView from '../searchinfoview';
-import SearchResultsView from '../searchresultsview';
-import FocusCycler from '../../focuscycler';
+import View from '../../view.js';
+import { default as SearchTextQueryView } from './searchtextqueryview.js';
+import SearchInfoView from '../searchinfoview.js';
+import SearchResultsView from '../searchresultsview.js';
+import FocusCycler from '../../focuscycler.js';
 import { escapeRegExp } from 'lodash-es';
 import '../../../theme/components/search/search.css';
 /**

package/src/spinner/spinnerview.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/spinner/spinnerview
  */
-import View from '../view';
+import View from '../view.js';
 import '../../theme/components/spinner/spinner.css';
 /**
  * The spinner view class.

package/src/spinner/spinnerview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/spinner/spinnerview
  */
-import View from '../view';
+import View from '../view.js';
 import '../../theme/components/spinner/spinner.css';
 /**
  * The spinner view class.

package/src/template.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/template
  */
-import View from './view';
-import ViewCollection from './viewcollection';
+import View from './view.js';
+import ViewCollection from './viewcollection.js';
 import { type ArrayOrItem, type Emitter, type Observable } from '@ckeditor/ckeditor5-utils';
 declare const Template_base: {
     new (): Emitter;

package/src/template.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/template
  */
 /* global document */
-import View from './view';
-import ViewCollection from './viewcollection';
+import View from './view.js';
+import ViewCollection from './viewcollection.js';
 import { CKEditorError, EmitterMixin, isNode, toArray } from '@ckeditor/ckeditor5-utils';
 import { isObject, cloneDeepWith } from 'lodash-es';
 const xhtmlNs = 'http://www.w3.org/1999/xhtml';

package/src/textarea/textareaview.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/textarea/textareaview
  */
 import { type Locale } from '@ckeditor/ckeditor5-utils';
-import InputBase from '../input/inputbase';
+import InputBase from '../input/inputbase.js';
 import '../../theme/components/input/input.css';
 import '../../theme/components/textarea/textarea.css';
 /**
@@ -53,6 +53,18 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
      * @internal
      */
     _height: number | null;
+    /**
+     * An instance of the resize observer used to detect when the view is visible or not and update
+     * its height if any changes that affect it were made while it was invisible.
+     *
+     * **Note:** Created in {@link #render}.
+     */
+    private _resizeObserver;
+    /**
+     * A flag that indicates whether the {@link #_updateAutoGrowHeight} method should be called when the view becomes
+     * visible again. See {@link #_resizeObserver}.
+     */
+    private _isUpdateAutoGrowHeightPending;
     /**
      * @inheritDoc
      */
@@ -61,6 +73,10 @@ export default class TextareaView extends InputBase<HTMLTextAreaElement> {
      * @inheritDoc
      */
     render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
     /**
      * @inheritDoc
      */

package/src/textarea/textareaview.js

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/textarea/textareaview
  */
-import { Rect, toUnit, getBorderWidths, global, CKEditorError, isVisible } from '@ckeditor/ckeditor5-utils';
-import InputBase from '../input/inputbase';
+import { Rect, toUnit, getBorderWidths, global, CKEditorError, isVisible, ResizeObserver } from '@ckeditor/ckeditor5-utils';
+import InputBase from '../input/inputbase.js';
 import '../../theme/components/input/input.css';
 import '../../theme/components/textarea/textarea.css';
 /**
@@ -29,11 +29,17 @@ export default class TextareaView extends InputBase {
      */
     constructor(locale) {
         super(locale);
+        /**
+         * A flag that indicates whether the {@link #_updateAutoGrowHeight} method should be called when the view becomes
+         * visible again. See {@link #_resizeObserver}.
+         */
+        this._isUpdateAutoGrowHeightPending = false;
         const toPx = toUnit('px');
         this.set('minRows', 2);
         this.set('maxRows', 5);
         this.set('_height', null);
         this.set('resize', 'none');
+        this._resizeObserver = null;
         this.on('change:minRows', this._validateMinMaxRows.bind(this));
         this.on('change:maxRows', this._validateMinMaxRows.bind(this));
         const bind = this.bindTemplate;
@@ -54,6 +60,7 @@ export default class TextareaView extends InputBase {
      */
     render() {
         super.render();
+        let wasVisible = false;
         this.on('input', () => {
             this._updateAutoGrowHeight(true);
             this.fire('update');
@@ -61,12 +68,40 @@ export default class TextareaView extends InputBase {
         this.on('change:value', () => {
             // The content needs to be updated by the browser after the value is changed. It takes a few ms.
             global.window.requestAnimationFrame(() => {
-                if (isVisible(this.element)) {
-                    this._updateAutoGrowHeight();
-                    this.fire('update');
+                if (!isVisible(this.element)) {
+                    this._isUpdateAutoGrowHeightPending = true;
+                    return;
                 }
+                this._updateAutoGrowHeight();
+                this.fire('update');
             });
         });
+        // It may occur that the Textarea size needs to be updated (e.g. because it's content was changed)
+        // when it is not visible or detached from DOM.
+        // In such case, we need to detect the moment when it becomes visible again and update its height then.
+        // We're using ResizeObserver for that as it is the most reliable way to detect when the element becomes visible.
+        // IntersectionObserver didn't work well with the absolute positioned containers.
+        this._resizeObserver = new ResizeObserver(this.element, evt => {
+            const isVisible = !!evt.contentRect.width && !!evt.contentRect.height;
+            if (!wasVisible && isVisible && this._isUpdateAutoGrowHeightPending) {
+                // We're wrapping the auto-grow logic in RAF because otherwise there is an error thrown
+                // by the browser about recursive calls to the ResizeObserver. It used to happen in unit
+                // tests only, though. Since there is no risk of infinite loop here, it can stay here.
+                global.window.requestAnimationFrame(() => {
+                    this._updateAutoGrowHeight();
+                    this.fire('update');
+                });
+            }
+            wasVisible = isVisible;
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        if (this._resizeObserver) {
+            this._resizeObserver.destroy();
+        }
     }
     /**
      * @inheritDoc
@@ -83,6 +118,11 @@ export default class TextareaView extends InputBase {
      */
     _updateAutoGrowHeight(shouldScroll) {
         const viewElement = this.element;
+        if (!viewElement.offsetParent) {
+            this._isUpdateAutoGrowHeightPending = true;
+            return;
+        }
+        this._isUpdateAutoGrowHeightPending = false;
         const singleLineContentClone = getTextareaElementClone(viewElement, '1');
         const fullTextValueClone = getTextareaElementClone(viewElement, viewElement.value);
         const singleLineContentStyles = singleLineContentClone.ownerDocument.defaultView.getComputedStyle(singleLineContentClone);

package/src/toolbar/balloon/balloontoolbar.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/balloon/balloontoolbar
  */
-import ContextualBalloon from '../../panel/balloon/contextualballoon';
-import ToolbarView from '../toolbarview';
+import ContextualBalloon from '../../panel/balloon/contextualballoon.js';
+import ToolbarView from '../toolbarview.js';
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
 import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 /**

package/src/toolbar/balloon/balloontoolbar.js

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/balloon/balloontoolbar
  */
-import ContextualBalloon from '../../panel/balloon/contextualballoon';
-import ToolbarView from '../toolbarview';
-import BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview';
-import normalizeToolbarConfig from '../normalizetoolbarconfig';
+import ContextualBalloon from '../../panel/balloon/contextualballoon.js';
+import ToolbarView from '../toolbarview.js';
+import BalloonPanelView, { generatePositions } from '../../panel/balloon/balloonpanelview.js';
+import normalizeToolbarConfig from '../normalizetoolbarconfig.js';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
 import { debounce } from 'lodash-es';

package/src/toolbar/block/blockbuttonview.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/block/blockbuttonview
  */
-import ButtonView from '../../button/buttonview';
+import ButtonView from '../../button/buttonview.js';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/toolbar/blocktoolbar.css';
 /**

package/src/toolbar/block/blockbuttonview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/block/blockbuttonview
  */
-import ButtonView from '../../button/buttonview';
+import ButtonView from '../../button/buttonview.js';
 import { toUnit } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/toolbar/blocktoolbar.css';
 const toPx = toUnit('px');

package/src/toolbar/block/blocktoolbar.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/block/blocktoolbar
  */
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import BlockButtonView from './blockbuttonview';
-import BalloonPanelView from '../../panel/balloon/balloonpanelview';
-import ToolbarView from '../toolbarview';
+import BlockButtonView from './blockbuttonview.js';
+import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
+import ToolbarView from '../toolbarview.js';
 /**
  * The block toolbar plugin.
  *

package/src/toolbar/block/blocktoolbar.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**
@@ -8,11 +8,11 @@
 /* global window */
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { Rect, ResizeObserver, toUnit } from '@ckeditor/ckeditor5-utils';
-import BlockButtonView from './blockbuttonview';
-import BalloonPanelView from '../../panel/balloon/balloonpanelview';
-import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview';
-import clickOutsideHandler from '../../bindings/clickoutsidehandler';
-import normalizeToolbarConfig from '../normalizetoolbarconfig';
+import BlockButtonView from './blockbuttonview.js';
+import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
+import ToolbarView, { NESTED_TOOLBAR_ICONS } from '../toolbarview.js';
+import clickOutsideHandler from '../../bindings/clickoutsidehandler.js';
+import normalizeToolbarConfig from '../normalizetoolbarconfig.js';
 const toPx = toUnit('px');
 /**
  * The block toolbar plugin.

package/src/toolbar/normalizetoolbarconfig.d.ts

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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 { ToolbarConfig, ToolbarConfigItem } from '@ckeditor/ckeditor5-core';

package/src/toolbar/normalizetoolbarconfig.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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
  */
 /**

package/src/toolbar/toolbarlinebreakview.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/toolbarlinebreakview
  */
-import View from '../view';
+import View from '../view.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The toolbar line break view class.

package/src/toolbar/toolbarlinebreakview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/toolbarlinebreakview
  */
-import View from '../view';
+import View from '../view.js';
 /**
  * The toolbar line break view class.
  */

package/src/toolbar/toolbarseparatorview.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/toolbarseparatorview
  */
-import View from '../view';
+import View from '../view.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 /**
  * The toolbar separator view class.

package/src/toolbar/toolbarseparatorview.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/toolbarseparatorview
  */
-import View from '../view';
+import View from '../view.js';
 /**
  * The toolbar separator view class.
  */

package/src/toolbar/toolbarview.d.ts

@@ -1,14 +1,15 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @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/toolbar/toolbarview
  */
-import View from '../view';
-import type ComponentFactory from '../componentfactory';
-import type ViewCollection from '../viewcollection';
-import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
+import View from '../view.js';
+import { type FocusableView } from '../focuscycler.js';
+import type ComponentFactory from '../componentfactory.js';
+import type ViewCollection from '../viewcollection.js';
+import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
 import { type ToolbarConfig } from '@ckeditor/ckeditor5-core';
 import '../../theme/components/toolbar/toolbar.css';
@@ -59,7 +60,7 @@ export default class ToolbarView extends View implements DropdownPanelFocusable
      * some optional UI elements that also belong to the toolbar and should be focusable
      * by the user.
      */
-    readonly focusables: ViewCollection;
+    readonly focusables: ViewCollection<FocusableView>;
     locale: Locale;
     /**
      * Label used by assistive technologies to describe this toolbar element.