@ckeditor/ckeditor5-ui 40.1.0 → 40.2.0

package/CHANGELOG.md

@@ -5,7 +5,7 @@ All changes in the package are documented in the main repository. See: https://g
 
 Changes for the past releases are available below.
 
-## [19.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v18.0.0...v19.0.0) (2020-04-29)
+## [19.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v18.0.0...v19.0.0) (April 29, 2020)
 
 ### MAJOR BREAKING CHANGES
 
@@ -38,7 +38,7 @@ Changes for the past releases are available below.
 * Updated translations. ([2a391d6](https://github.com/ckeditor/ckeditor5-ui/commit/2a391d6))
 
 
-## [18.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v17.0.0...v18.0.0) (2020-03-19)
+## [18.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v17.0.0...v18.0.0) (March 19, 2020)
 
 ### MAJOR BREAKING CHANGES
 
@@ -55,7 +55,7 @@ Changes for the past releases are available below.
 * Updated translations. ([ace38eb](https://github.com/ckeditor/ckeditor5-ui/commit/ace38eb))
 
 
-## [17.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v16.0.0...v17.0.0) (2020-02-19)
+## [17.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v16.0.0...v17.0.0) (February 19, 2020)
 
 ### Features
 
@@ -77,7 +77,7 @@ Changes for the past releases are available below.
 * Updated translations. ([b8bd38e](https://github.com/ckeditor/ckeditor5-ui/commit/b8bd38e))
 
 
-## [16.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v15.0.0...v16.0.0) (2019-12-04)
+## [16.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v15.0.0...v16.0.0) (December 4, 2019)
 
 ### Features
 
@@ -92,7 +92,7 @@ Changes for the past releases are available below.
 * Updated translations. ([16ee253](https://github.com/ckeditor/ckeditor5-ui/commit/16ee253))
 
 
-## [15.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v14.0.0...v15.0.0) (2019-10-23)
+## [15.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v14.0.0...v15.0.0) (October 23, 2019)
 
 ### MAJOR BREAKING CHANGES
 
@@ -107,7 +107,7 @@ Changes for the past releases are available below.
 * Updated translations. ([c233bb7](https://github.com/ckeditor/ckeditor5-ui/commit/c233bb7)) ([f8f07b2](https://github.com/ckeditor/ckeditor5-ui/commit/f8f07b2))
 
 
-## [14.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.2...v14.0.0) (2019-08-26)
+## [14.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.2...v14.0.0) (August 26, 2019)
 
 ### Features
 
@@ -129,21 +129,21 @@ Changes for the past releases are available below.
 * The `ToolbarView` class requires the [editor locale](https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_locale-Locale.html) to be passed into the constructor.
 
 
-## [13.0.2](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.1...v13.0.2) (2019-07-10)
+## [13.0.2](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.1...v13.0.2) (July 10, 2019)
 
 ### Other changes
 
 * Updated translations. ([ad189b6](https://github.com/ckeditor/ckeditor5-ui/commit/ad189b6))
 
 
-## [13.0.1](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.0...v13.0.1) (2019-07-04)
+## [13.0.1](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.0...v13.0.1) (July 4, 2019)
 
 ### Other changes
 
 * Updated translations. ([1964cc0](https://github.com/ckeditor/ckeditor5-ui/commit/1964cc0)) ([11cfd41](https://github.com/ckeditor/ckeditor5-ui/commit/11cfd41))
 
 
-## [13.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v12.1.0...v13.0.0) (2019-06-05)
+## [13.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v12.1.0...v13.0.0) (June 6, 2019)
 
 ### Features
 
@@ -162,7 +162,7 @@ Changes for the past releases are available below.
 * The (misspelled) `InputTextView#ariaDesribedById` property is no longer available. Use `ariaDescribedById` instead.
 
 
-## [12.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v12.0.0...v12.1.0) (2019-04-10)
+## [12.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v12.0.0...v12.1.0) (April 4, 2019)
 
 ### Features
 
@@ -178,7 +178,7 @@ Changes for the past releases are available below.
 * Updated translations. ([dcdca2e](https://github.com/ckeditor/ckeditor5-ui/commit/dcdca2e))
 
 
-## [12.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.2.0...v12.0.0) (2019-02-28)
+## [12.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.2.0...v12.0.0) (February 28, 2019)
 
 ### Bug fixes
 
@@ -199,7 +199,7 @@ Changes for the past releases are available below.
 * The `EditorUIView#editableElement` property was made private. Use `editor.ui.getEditableElement()` method instead.
 
 
-## [11.2.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.1.0...v11.2.0) (2018-12-05)
+## [11.2.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.1.0...v11.2.0) (December 5, 2018)
 
 ### Features
 
@@ -216,7 +216,7 @@ Changes for the past releases are available below.
 * Updated translations. ([2e409a9](https://github.com/ckeditor/ckeditor5-ui/commit/2e409a9)) ([611bd04](https://github.com/ckeditor/ckeditor5-ui/commit/611bd04)) ([c6689e4](https://github.com/ckeditor/ckeditor5-ui/commit/c6689e4)) ([07c4fdb](https://github.com/ckeditor/ckeditor5-ui/commit/07c4fdb))
 
 
-## [11.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.0.0...v11.1.0) (2018-10-08)
+## [11.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v11.0.0...v11.1.0) (October 8, 2018)
 
 ### Features
 
@@ -232,7 +232,7 @@ Changes for the past releases are available below.
 * Updated translations. ([e58bcbb](https://github.com/ckeditor/ckeditor5-ui/commit/e58bcbb))
 
 
-## [11.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.1.0...v11.0.0) (2018-07-18)
+## [11.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.1.0...v11.0.0) (July 18, 2018)
 
 ### Features
 
@@ -263,7 +263,7 @@ Changes for the past releases are available below.
 * The `.ck-button` and `.ck-list` classes are using `flex` which may have an impact on rendering.
 
 
-## [10.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.0.0...v10.1.0) (2018-06-21)
+## [10.1.0](https://github.com/ckeditor/ckeditor5-ui/compare/v10.0.0...v10.1.0) (June 21, 2018)
 
 ### Features
 
@@ -283,7 +283,7 @@ Changes for the past releases are available below.
 * Updated translations. ([084e8c6](https://github.com/ckeditor/ckeditor5-ui/commit/084e8c6))
 
 
-## [10.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.4...v10.0.0) (2018-04-25)
+## [10.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.4...v10.0.0) (April 25, 2018)
 
 ### Other changes
 
@@ -294,12 +294,12 @@ Changes for the past releases are available below.
 * The license under which CKEditor 5 is released has been changed from a triple GPL, LGPL and MPL license to a GPL2+ only. See [ckeditor/ckeditor5#991](https://github.com/ckeditor/ckeditor5/issues/991) for more information.
 
 
-## [1.0.0-beta.4](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.2...v1.0.0-beta.4) (2018-04-19)
+## [1.0.0-beta.4](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.2...v1.0.0-beta.4) (April 19, 2018)
 
 Internal changes only (updated dependencies, documentation, etc.).
 
 
-## [1.0.0-beta.2](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2018-04-10)
+## [1.0.0-beta.2](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-beta.1...v1.0.0-beta.2) (April 10, 2018)
 
 ### Other changes
 
@@ -310,7 +310,7 @@ Internal changes only (updated dependencies, documentation, etc.).
 * `View#registerChildren()` and `View#deregisterChildren()` have been renamed to `View#registerChild()` and `View#deregisterChild()`.
 
 
-## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
+## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (March 15, 2018)
 
 ### Features
 
@@ -356,7 +356,7 @@ Internal changes only (updated dependencies, documentation, etc.).
 * The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
 
 
-## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
+## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-ui/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (November 14, 2017)
 
 ### Bug fixes
 
@@ -385,14 +385,14 @@ Internal changes only (updated dependencies, documentation, etc.).
 * The DOM structure of the `StickyPanelView` has changed along with the class names. Please refer to the component documentation to learn more.
 
 
-## [1.0.0-alpha.1](https://github.com/ckeditor/ckeditor5-ui/compare/v0.10.0...v1.0.0-alpha.1) (2017-10-03)
+## [1.0.0-alpha.1](https://github.com/ckeditor/ckeditor5-ui/compare/v0.10.0...v1.0.0-alpha.1) (October 3, 2017)
 
 ### Bug fixes
 
 * `ContextualBalloon` should remember position passed to `#updatePosition()`. Closes [#305](https://github.com/ckeditor/ckeditor5-ui/issues/305). Closes [ckeditor/ckeditor5-image#141](https://github.com/ckeditor/ckeditor5-image/issues/141). ([c787c0d](https://github.com/ckeditor/ckeditor5-ui/commit/c787c0d))
 * `ContextualToolbar` should not be positioned to a zero–width DOM rect when invoked for a multi-line forward selection. Closes [#308](https://github.com/ckeditor/ckeditor5-ui/issues/308). ([00b701b](https://github.com/ckeditor/ckeditor5-ui/commit/00b701b))
 * `ContextualToolbar` will accept the object format of `config.contextualToolbar`. Closes [#316](https://github.com/ckeditor/ckeditor5-ui/issues/316). ([d71cad8](https://github.com/ckeditor/ckeditor5-ui/commit/d71cad8))
-* Fixed sticky panel's `z-index` so it's correctly rendered above images (or other relatively positioned elements). Closes [#315](https://github.com/ckeditor/ckeditor5-ui/issues/315). ([00f2add](https://github.com/ckeditor/ckeditor5-ui/commit/00f2add))
+* Fixed sticky panel's `z-index` so it is correctly rendered above images (or other relatively positioned elements). Closes [#315](https://github.com/ckeditor/ckeditor5-ui/issues/315). ([00f2add](https://github.com/ckeditor/ckeditor5-ui/commit/00f2add))
 * The content of the `BalloonPanelView` should be selectable. Closes [#294](https://github.com/ckeditor/ckeditor5-ui/issues/294). Closes https://github.com/ckeditor/ckeditor5/issues/498. ([e5315df](https://github.com/ckeditor/ckeditor5-ui/commit/e5315df))
 
 ### Features
@@ -413,7 +413,7 @@ refer to the `KeystrokeHandler` helper to learn more.
 * The `StickyToolbarView` and corresponding CSS `.ck-sticky-panel` classes are no longer available. `StickyPanelView` + `ToolbarView` combo should be used instead.
 
 
-## [0.10.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.9.0...v0.10.0) (2017-09-03)
+## [0.10.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.9.0...v0.10.0) (September 3, 2017)
 
 ### Bug fixes
 
@@ -460,7 +460,7 @@ refer to the `KeystrokeHandler` helper to learn more.
 * The position names in `BalloonPanelView.defaultPositions` and their results have changed. Please refer to the latest API documentation to learn more.
 
 
-## [0.9.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.8.0...v0.9.0) (2017-05-07)
+## [0.9.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.8.0...v0.9.0) (May 7, 2017)
 
 ### Bug fixes
 
@@ -506,7 +506,7 @@ refer to the `KeystrokeHandler` helper to learn more.
 * Default position names in `BalloonPanelView.defaultPositions` have changed. Now prefixed with `arrow_`.
 
 
-## [0.8.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.7.1...v0.8.0) (2017-04-05)
+## [0.8.0](https://github.com/ckeditor/ckeditor5-ui/compare/v0.7.1...v0.8.0) (April 5, 2017)
 
 ### Features
 
@@ -527,7 +527,7 @@ refer to the `KeystrokeHandler` helper to learn more.
 * The `ui/balloonpanel/balloonpanelview` module was renamed to `ui/panel/balloon/balloonpanelview`. See [#152](https://github.com/ckeditor/ckeditor5-ui/issues/152).
 
 
-## [0.7.1](https://github.com/ckeditor/ckeditor5-ui/compare/v0.7.0...v0.8.0) (2017-03-06)
+## [0.7.1](https://github.com/ckeditor/ckeditor5-ui/compare/v0.7.0...v0.8.0) (March 6, 2017)
 
 ### Bug fixes
 

package/lang/translations/gl.po

@@ -31,11 +31,11 @@ msgstr "Editar bloque"
 
 msgctxt "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Click to edit block"
-msgstr ""
+msgstr "Prema para editar o bloque"
 
 msgctxt "Second part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Drag to move"
-msgstr ""
+msgstr "Arrastre para mover"
 
 msgctxt "Label for a button showing the next thing (tab, page, etc.)."
 msgid "Next"
@@ -131,8 +131,8 @@ msgstr "Aceptar"
 
 msgctxt "The main text of the message shown to the user when given query does not match any results."
 msgid "No results found"
-msgstr ""
+msgstr "Non se atoparon resultados"
 
 msgctxt "The main text of the message shown to the user when no results are available."
 msgid "No searchable items"
-msgstr ""
+msgstr "Non hai elementos que se poidan buscar"

package/lang/translations/sr-latn.po

@@ -31,11 +31,11 @@ msgstr "Blok uređivač"
 
 msgctxt "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Click to edit block"
-msgstr ""
+msgstr "Kliknite da biste uredili blok"
 
 msgctxt "Second part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)"
 msgid "Drag to move"
-msgstr ""
+msgstr "Prevucite da biste premestili"
 
 msgctxt "Label for a button showing the next thing (tab, page, etc.)."
 msgid "Next"
@@ -123,16 +123,16 @@ msgstr "Kontekstualna traka sa alatkama Editor"
 
 msgctxt "Label of an input field for typing colors in the HEX color format."
 msgid "HEX"
-msgstr ""
+msgstr "HEX"
 
 msgctxt "Label of the button closing the color picker and confirming the changes done in the color selector component."
 msgid "Accept"
-msgstr ""
+msgstr "Prihvati"
 
 msgctxt "The main text of the message shown to the user when given query does not match any results."
 msgid "No results found"
-msgstr ""
+msgstr "Nije pronađen nijedan rezultat"
 
 msgctxt "The main text of the message shown to the user when no results are available."
 msgid "No searchable items"
-msgstr ""
+msgstr "Nema stavki koje se mogu pretražiti"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "40.1.0",
+  "version": "40.2.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,8 +11,8 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "40.1.0",
-    "@ckeditor/ckeditor5-utils": "40.1.0",
+    "@ckeditor/ckeditor5-core": "40.2.0",
+    "@ckeditor/ckeditor5-utils": "40.2.0",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",
     "lodash-es": "4.17.21",

package/src/collapsible/collapsibleview.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module ui/collapsible/collapsibleview
+ */
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import View from '../view';
+import ButtonView from '../button/buttonview';
+import type ViewCollection from '../viewcollection';
+import '../../theme/components/collapsible/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
+     *
+     * @observable
+     */
+    isCollapsed: boolean;
+    /**
+     * The text label of the {@link #buttonView}.
+     *
+     * @observable
+     * @default 'Show more'
+     */
+    label: string;
+    /**
+     * The ID of the label inside the {@link #buttonView} that describes the collapsible
+     * container for assistive technologies. Set after the button was {@link #render rendered}.
+     *
+     * @internal
+     * @readonly
+     * @observable
+     */
+    _collapsibleAriaLabelUid: string | undefined;
+    /**
+     * The main button that, when clicked, collapses or expands the container with {@link #children}.
+     */
+    readonly buttonView: ButtonView;
+    /**
+     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
+     */
+    readonly children: ViewCollection;
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale: Locale, childViews?: Array<View>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the first focusable.
+     */
+    focus(): void;
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    private _createButtonView;
+}

package/src/collapsible/collapsibleview.js

@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import View from '../view';
+import ButtonView from '../button/buttonview';
+import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
+import '../../theme/components/collapsible/collapsible.css';
+/**
+ * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+ * by clicking the button. The collapsible container can be a host to other UI views.
+ *
+ * @internal
+ */
+export default class CollapsibleView extends View {
+    /**
+     * Creates an instance of the collapsible view.
+     *
+     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+     * @param childViews An optional array of initial child views to be inserted into the collapsible.
+     */
+    constructor(locale, childViews) {
+        super(locale);
+        const bind = this.bindTemplate;
+        this.set('isCollapsed', false);
+        this.set('label', '');
+        this.buttonView = this._createButtonView();
+        this.children = this.createCollection();
+        this.set('_collapsibleAriaLabelUid', undefined);
+        if (childViews) {
+            this.children.addMany(childViews);
+        }
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-collapsible',
+                    bind.if('isCollapsed', 'ck-collapsible_collapsed')
+                ]
+            },
+            children: [
+                this.buttonView,
+                {
+                    tag: 'div',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-collapsible__children'
+                        ],
+                        role: 'region',
+                        hidden: bind.if('isCollapsed', 'hidden'),
+                        'aria-labelledby': bind.to('_collapsibleAriaLabelUid')
+                    },
+                    children: this.children
+                }
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this._collapsibleAriaLabelUid = this.buttonView.labelView.element.id;
+    }
+    /**
+     * Focuses the first focusable.
+     */
+    focus() {
+        this.buttonView.focus();
+    }
+    /**
+     * Creates the main {@link #buttonView} of the collapsible.
+     */
+    _createButtonView() {
+        const buttonView = new ButtonView(this.locale);
+        const bind = buttonView.bindTemplate;
+        buttonView.set({
+            withText: true,
+            icon: dropdownArrowIcon
+        });
+        buttonView.extendTemplate({
+            attributes: {
+                'aria-expanded': bind.to('isOn', value => String(value))
+            }
+        });
+        buttonView.bind('label').to(this);
+        buttonView.bind('isOn').to(this, 'isCollapsed', isCollapsed => !isCollapsed);
+        buttonView.on('execute', () => {
+            this.isCollapsed = !this.isCollapsed;
+        });
+        return buttonView;
+    }
+}

package/src/dropdown/button/splitbuttonview.d.ts

@@ -10,6 +10,7 @@ import ButtonView from '../../button/buttonview';
 import type ViewCollection from '../../viewcollection';
 import type Button from '../../button/button';
 import type DropdownButton from './dropdownbutton';
+import type { FocusableView } from '../../focuscycler';
 import { KeystrokeHandler, FocusTracker, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/dropdown/splitbutton.css';
 /**
@@ -135,7 +136,7 @@ export default class SplitButtonView extends View<HTMLDivElement> implements Dro
     /**
      * @inheritDoc
      */
-    constructor(locale?: Locale);
+    constructor(locale?: Locale, actionButton?: ButtonView & FocusableView);
     /**
      * @inheritDoc
      */

package/src/dropdown/button/splitbuttonview.js

@@ -33,7 +33,7 @@ export default class SplitButtonView extends View {
     /**
      * @inheritDoc
      */
-    constructor(locale) {
+    constructor(locale, actionButton) {
         super(locale);
         const bind = this.bindTemplate;
         // Implement the Button interface.
@@ -53,7 +53,7 @@ export default class SplitButtonView extends View {
         this.set('type', 'button');
         this.set('withText', false);
         this.children = this.createCollection();
-        this.actionView = this._createActionView();
+        this.actionView = this._createActionView(actionButton);
         this.arrowView = this._createArrowView();
         this.keystrokes = new KeystrokeHandler();
         this.focusTracker = new FocusTracker();
@@ -114,9 +114,11 @@ export default class SplitButtonView extends View {
      * Creates a {@link module:ui/button/buttonview~ButtonView} instance as {@link #actionView} and binds it with main split button
      * attributes.
      */
-    _createActionView() {
-        const actionView = new ButtonView();
-        actionView.bind('icon', 'isEnabled', 'isOn', 'isToggleable', 'keystroke', 'label', 'tabindex', 'tooltip', 'tooltipPosition', 'type', 'withText').to(this);
+    _createActionView(actionButton) {
+        const actionView = actionButton || new ButtonView();
+        if (!actionButton) {
+            actionView.bind('icon', 'isEnabled', 'isOn', 'isToggleable', 'keystroke', 'label', 'tabindex', 'tooltip', 'tooltipPosition', 'type', 'withText').to(this);
+        }
         actionView.extendTemplate({
             attributes: {
                 class: 'ck-splitbutton__action'

package/src/dropdown/utils.d.ts

@@ -76,11 +76,11 @@ import '../../theme/components/dropdown/listdropdown.css';
  * {@link module:ui/dropdown/utils~addToolbarToDropdown} utils.
  *
  * @param locale The locale instance.
- * @param ButtonClass The dropdown button view class. Needs to implement the
+ * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
  * @returns The dropdown view instance.
  */
-export declare function createDropdown(locale: Locale | undefined, ButtonClass?: new (locale?: Locale) => DropdownButton & FocusableView): DropdownView;
+export declare function createDropdown(locale: Locale | undefined, ButtonClassOrInstance?: (new (locale?: Locale) => DropdownButton & FocusableView) | (DropdownButton & FocusableView)): DropdownView;
 /**
  * Adds an instance of {@link module:ui/toolbar/toolbarview~ToolbarView} to a dropdown.
  *

package/src/dropdown/utils.js

@@ -85,12 +85,12 @@ import ListItemGroupView from '../list/listitemgroupview';
  * {@link module:ui/dropdown/utils~addToolbarToDropdown} utils.
  *
  * @param locale The locale instance.
- * @param ButtonClass The dropdown button view class. Needs to implement the
+ * @param ButtonClassOrInstance The dropdown button view class. Needs to implement the
  * {@link module:ui/dropdown/button/dropdownbutton~DropdownButton} interface.
  * @returns The dropdown view instance.
  */
-export function createDropdown(locale, ButtonClass = DropdownButtonView) {
-    const buttonView = new ButtonClass(locale);
+export function createDropdown(locale, ButtonClassOrInstance = DropdownButtonView) {
+    const buttonView = typeof ButtonClassOrInstance == 'function' ? new ButtonClassOrInstance(locale) : ButtonClassOrInstance;
     const panelView = new DropdownPanelView(locale);
     const dropdownView = new DropdownView(locale, buttonView, panelView);
     buttonView.bind('isEnabled').to(dropdownView);

package/src/index.d.ts

@@ -12,7 +12,7 @@ export { default as submitHandler } from './bindings/submithandler';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 export { default as BodyCollection } from './editorui/bodycollection';
 export { type ButtonExecuteEvent } from './button/button';
-export { type default as ButtonLabel } from './button/buttonlabel';
+export type { default as ButtonLabel } from './button/buttonlabel';
 export { default as ButtonView } from './button/buttonview';
 export { default as ButtonLabelView } from './button/buttonlabelview';
 export { default as SwitchButtonView } from './button/switchbuttonview';
@@ -56,6 +56,7 @@ export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchT
 export { default as SearchInfoView } from './search/searchinfoview';
 export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
+export { default as CollapsibleView } from './collapsible/collapsibleview';
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template, type TemplateDefinition } from './template';
 export { default as SpinnerView } from './spinner/spinnerview';

package/src/index.js

@@ -52,6 +52,7 @@ export { default as AutocompleteView } from './autocomplete/autocompleteview';
 export { default as SearchTextView } from './search/text/searchtextview';
 export { default as SearchInfoView } from './search/searchinfoview';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview';
+export { default as CollapsibleView } from './collapsible/collapsibleview';
 export { default as TooltipManager } from './tooltipmanager';
 export { default as Template } from './template';
 export { default as SpinnerView } from './spinner/spinnerview';

package/src/list/listitemgroupview.d.ts

@@ -53,7 +53,7 @@ export default class ListItemGroupView extends View {
      */
     constructor(locale?: Locale, labelView?: LabelView);
     /**
-     * Focuses the list item.
+     * Focuses the list item (which is not a separator).
      */
     focus(): void;
 }

package/src/list/listitemgroupview.js

@@ -8,6 +8,7 @@
 import View from '../view';
 import ListView from './listview';
 import LabelView from '../label/labelview';
+import ListSeparatorView from './listseparatorview';
 /**
  * The list item group view class.
  */
@@ -53,11 +54,14 @@ export default class ListItemGroupView extends View {
         });
     }
     /**
-     * Focuses the list item.
+     * Focuses the list item (which is not a separator).
      */
     focus() {
-        if (this.items.first) {
-            this.items.first.focus();
+        if (this.items) {
+            const firstListItem = this.items.find(item => !(item instanceof ListSeparatorView));
+            if (firstListItem) {
+                firstListItem.focus();
+            }
         }
     }
 }

package/src/list/listview.d.ts

@@ -6,8 +6,9 @@
  * @module ui/list/listview
  */
 import View from '../view';
-import type ListItemView from './listitemview';
+import ListItemView from './listitemview';
 import ListItemGroupView from './listitemgroupview';
+import type ListSeparatorView from './listseparatorview';
 import type DropdownPanelFocusable from '../dropdown/dropdownpanelfocusable';
 import ViewCollection from '../viewcollection';
 import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
@@ -25,7 +26,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
     /**
      * Collection of the child list views.
      */
-    readonly items: ViewCollection<ListItemView | ListItemGroupView>;
+    readonly items: ViewCollection<ListItemView | ListItemGroupView | ListSeparatorView>;
     /**
      * Tracks information about DOM focus in the list.
      */

package/src/list/listview.js

@@ -7,6 +7,7 @@
  */
 import View from '../view';
 import FocusCycler from '../focuscycler';
+import ListItemView from './listitemview';
 import ListItemGroupView from './listitemgroupview';
 import ViewCollection from '../viewcollection';
 import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
@@ -69,7 +70,7 @@ export default class ListView extends View {
             if (item instanceof ListItemGroupView) {
                 this._registerFocusableItemsGroup(item);
             }
-            else {
+            else if (item instanceof ListItemView) {
                 this._registerFocusableListItem(item);
             }
         }

package/theme/components/collapsible/collapsible.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2023, 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;
+	}
+}