@ckeditor/ckeditor5-ui 43.2.0 → 43.3.0-alpha.0

package/src/dropdown/menu/dropdownmenunestedmenuview.js

@@ -95,6 +95,7 @@ class DropdownMenuNestedMenuView extends View {
         this.panelView.render();
         this.focusTracker.add(this.buttonView.element);
         this.focusTracker.add(this.panelView.element);
+        this.focusTracker.add(this.listView);
         // Listen for keystrokes coming from within #element.
         this.keystrokes.listenTo(this.element);
         this._mountPanelOnOpen();

package/src/dropdown/utils.js

@@ -159,6 +159,7 @@ export function createDropdown(locale, ButtonClassOrInstance = DropdownButtonVie
  */
 export function addMenuToDropdown(dropdownView, body, definition, options = {}) {
     dropdownView.menuView = new DropdownMenuRootListView(dropdownView.locale, body, definition);
+    dropdownView.focusTracker.add(dropdownView.menuView);
     if (dropdownView.isOpen) {
         addMenuToOpenDropdown(dropdownView, options);
     }
@@ -183,7 +184,7 @@ function addMenuToOpenDropdown(dropdownView, options) {
     // Nested menu panels are added to body collection, so they are not children of the `dropdownView` from DOM perspective.
     // Add these panels to `dropdownView` focus tracker, so they are treated like part of the `dropdownView` for focus-related purposes.
     for (const menu of dropdownMenuRootListView.menus) {
-        dropdownView.focusTracker.add(menu.panelView.element);
+        dropdownView.focusTracker.add(menu);
     }
     dropdownMenuRootListView.ariaLabel = options.ariaLabel || t('Dropdown menu');
 }
@@ -276,6 +277,7 @@ function addToolbarToOpenDropdown(dropdownView, buttonsOrCallback, options) {
         toolbarView.items.addMany(buttons);
     }
     dropdownView.panelView.children.add(toolbarView);
+    dropdownView.focusTracker.add(toolbarView);
     toolbarView.items.delegate('execute').to(dropdownView);
 }
 /**
@@ -419,10 +421,23 @@ function closeDropdownOnClickOutside(dropdownView) {
         },
         contextElements: () => [
             dropdownView.element,
-            ...dropdownView.focusTracker.elements
+            // Include all elements connected to the dropdown's focus tracker, but exclude those that are direct children
+            // of DropdownView#element. They would be identified as descendants of #element anyway upon clicking and would
+            // not contribute to the logic.
+            ...getFocusTrackerTreeElements(dropdownView.focusTracker).filter(element => !dropdownView.element.contains(element))
         ]
     });
 }
+/**
+ * Returns all DOM elements connected to a DropdownView's focus tracker, either directly (same DOM sub-tree)
+ * or indirectly (external views registered in the focus tracker).
+ */
+function getFocusTrackerTreeElements(focusTracker) {
+    return [
+        ...focusTracker.elements,
+        ...focusTracker.externalViews.flatMap(view => getFocusTrackerTreeElements(view.focusTracker))
+    ];
+}
 /**
  * Adds a behavior to a dropdownView that closes the dropdown view on "execute" event.
  */

package/src/editorui/accessibilityhelp/accessibilityhelp.d.ts

@@ -31,6 +31,10 @@ export default class AccessibilityHelp extends Plugin {
      * @inheritDoc
      */
     static get pluginName(): "AccessibilityHelp";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
     /**
      * @inheritDoc
      */

package/src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -42,6 +42,12 @@ export default class AccessibilityHelp extends Plugin {
     static get pluginName() {
         return 'AccessibilityHelp';
     }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
     /**
      * @inheritDoc
      */

package/src/editorui/editorui.js

@@ -179,12 +179,12 @@ export default class EditorUI extends /* #__PURE__ */ ObservableMixin() {
      */
     addToolbar(toolbarView, options = {}) {
         if (toolbarView.isRendered) {
-            this.focusTracker.add(toolbarView.element);
+            this.focusTracker.add(toolbarView);
             this.editor.keystrokes.listenTo(toolbarView.element);
         }
         else {
             toolbarView.once('render', () => {
-                this.focusTracker.add(toolbarView.element);
+                this.focusTracker.add(toolbarView);
                 this.editor.keystrokes.listenTo(toolbarView.element);
             });
         }

package/src/notification/notification.d.ts

@@ -21,6 +21,10 @@ export default class Notification extends ContextPlugin {
      * @inheritDoc
      */
     static get pluginName(): "Notification";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
     /**
      * @inheritDoc
      */

package/src/notification/notification.js

@@ -24,6 +24,12 @@ export default class Notification extends ContextPlugin {
     static get pluginName() {
         return 'Notification';
     }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
     /**
      * @inheritDoc
      */

package/src/panel/balloon/contextualballoon.d.ts

@@ -107,6 +107,10 @@ export default class ContextualBalloon extends Plugin {
      * @inheritDoc
      */
     static get pluginName(): "ContextualBalloon";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
     /**
      * @inheritDoc
      */

package/src/panel/balloon/contextualballoon.js

@@ -54,6 +54,12 @@ export default class ContextualBalloon extends Plugin {
     static get pluginName() {
         return 'ContextualBalloon';
     }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
     /**
      * @inheritDoc
      */

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

@@ -56,6 +56,10 @@ export default class BalloonToolbar extends Plugin {
      * @inheritDoc
      */
     static get pluginName(): "BalloonToolbar";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
     /**
      * @inheritDoc
      */

package/src/toolbar/balloon/balloontoolbar.js

@@ -26,6 +26,12 @@ export default class BalloonToolbar extends Plugin {
     static get pluginName() {
         return 'BalloonToolbar';
     }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
     /**
      * @inheritDoc
      */
@@ -52,7 +58,7 @@ export default class BalloonToolbar extends Plugin {
         this.focusTracker = new FocusTracker();
         // Track focusable elements in the toolbar and the editable elements.
         this._trackFocusableEditableElements();
-        this.focusTracker.add(this.toolbarView.element);
+        this.focusTracker.add(this.toolbarView);
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
         editor.ui.addToolbar(this.toolbarView, {
             beforeFocus: () => this.show(true),

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

@@ -85,6 +85,10 @@ export default class BlockToolbar extends Plugin {
      * @inheritDoc
      */
     static get pluginName(): "BlockToolbar";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
     /**
      * @inheritDoc
      */

package/src/toolbar/block/blocktoolbar.js

@@ -68,6 +68,12 @@ export default class BlockToolbar extends Plugin {
     static get pluginName() {
         return 'BlockToolbar';
     }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
     /**
      * @inheritDoc
      */

package/src/toolbar/toolbarview.js

@@ -103,13 +103,13 @@ export default class ToolbarView extends View {
         this.focusTracker.add(this.element);
         // Children added before rendering should be known to the #focusTracker.
         for (const item of this.items) {
-            this.focusTracker.add(item.element);
+            this.focusTracker.add(item);
         }
         this.items.on('add', (evt, item) => {
-            this.focusTracker.add(item.element);
+            this.focusTracker.add(item);
         });
         this.items.on('remove', (evt, item) => {
-            this.focusTracker.remove(item.element);
+            this.focusTracker.remove(item);
         });
         // Start listening for the keystrokes coming from #element.
         this.keystrokes.listenTo(this.element);

package/theme/components/dialog/dialog.css

@@ -27,13 +27,16 @@
 
 	& .ck.ck-form__header  {
 		flex-shrink: 0;
+	}
 
-		& .ck-form__header__label {
+	/* Modals should not be draggable. */
+	&:not(.ck-dialog_modal) {
+		& .ck.ck-form__header .ck-form__header__label {
 			cursor: grab;
 		}
 	}
 
-	@nest .ck.ck-dialog-overlay.ck-dialog-overlay__transparent & {
+	.ck.ck-dialog-overlay.ck-dialog-overlay__transparent & {
 		pointer-events: all;
 	}
 }

package/theme/mixins/_dir.css

@@ -4,7 +4,7 @@
  */
 
 @define-mixin ck-dir $direction {
-	@nest [dir="$(direction)"] & {
+	[dir="$(direction)"] & {
 		@mixin-content;
 	}
 }