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

package/dist/index.js

@@ -3438,6 +3438,7 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
                         class: [
                             'ck',
                             'ck-dialog',
+                            bind.if('isModal', 'ck-dialog_modal'),
                             bind.to('className')
                         ],
                         role: 'dialog',
@@ -3501,7 +3502,8 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
     /**
 	 * Returns the element that should be used as a drag handle.
 	 */ get dragHandleElement() {
-        if (this.headerView) {
+        // Modals should not be draggable.
+        if (this.headerView && !this.isModal) {
             return this.headerView.element;
         } else {
             return null;
@@ -3710,9 +3712,30 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
         return new Rect(this.element.firstElementChild);
     }
     /**
-	 * Calculates the viewport rect.
+	 * Returns a viewport `Rect` shrunk by the viewport offset config from all sides.
+	 *
+	 * TODO: This is a duplicate from position.ts module. It should either be exported there or land somewhere in utils.
 	 */ _getViewportRect() {
-        return getConstrainedViewportRect(this._getViewportOffset());
+        const viewportRect = new Rect(global.window);
+        // Modals should not be restricted by the viewport offsets as they are always displayed on top of the page.
+        if (this.isModal) {
+            return viewportRect;
+        }
+        const viewportOffset = {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            ...this._getViewportOffset()
+        };
+        viewportRect.top += viewportOffset.top;
+        viewportRect.height -= viewportOffset.top;
+        viewportRect.bottom -= viewportOffset.bottom;
+        viewportRect.height -= viewportOffset.bottom;
+        viewportRect.left += viewportOffset.left;
+        viewportRect.right -= viewportOffset.right;
+        viewportRect.width -= viewportOffset.left + viewportOffset.right;
+        return viewportRect;
     }
     /**
 	 * Collects all focusable elements inside the dialog parts
@@ -3756,25 +3779,6 @@ const toPx$6 = /* #__PURE__ */ toUnit('px');
         return buttonView;
     }
 }
-// Returns a viewport `Rect` shrunk by the viewport offset config from all sides.
-// TODO: This is a duplicate from position.ts module. It should either be exported there or land somewhere in utils.
-function getConstrainedViewportRect(viewportOffset) {
-    viewportOffset = Object.assign({
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-    }, viewportOffset);
-    const viewportRect = new Rect(global.window);
-    viewportRect.top += viewportOffset.top;
-    viewportRect.height -= viewportOffset.top;
-    viewportRect.bottom -= viewportOffset.bottom;
-    viewportRect.height -= viewportOffset.bottom;
-    viewportRect.left += viewportOffset.left;
-    viewportRect.right -= viewportOffset.right;
-    viewportRect.width -= viewportOffset.left + viewportOffset.right;
-    return viewportRect;
-}
 
 /**
  * The dialog controller class. It is used to show and hide the {@link module:ui/dialog/dialogview~DialogView}.
@@ -3799,6 +3803,11 @@ function getConstrainedViewportRect(viewportOffset) {
 	 */ static get pluginName() {
         return 'Dialog';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -3823,6 +3832,12 @@ function getConstrainedViewportRect(viewportOffset) {
             ]
         });
     }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this._unlockBodyScroll();
+    }
     /**
 	 * Initiates listeners for the `show` and `hide` events emitted by this plugin.
 	 *
@@ -3999,6 +4014,9 @@ function getConstrainedViewportRect(viewportOffset) {
         if (!position) {
             position = isModal ? DialogViewPosition.SCREEN_CENTER : DialogViewPosition.EDITOR_CENTER;
         }
+        if (isModal) {
+            this._lockBodyScroll();
+        }
         view.set({
             position,
             _isVisible: true,
@@ -4036,6 +4054,9 @@ function getConstrainedViewportRect(viewportOffset) {
         }
         const editor = this.editor;
         const view = this.view;
+        if (view.isModal) {
+            this._unlockBodyScroll();
+        }
         // Reset the content view to prevent its children from being destroyed in the standard
         // View#destroy() (and collections) chain. If the content children were left in there,
         // they would have to be re-created by the feature using the dialog every time the dialog
@@ -4052,6 +4073,16 @@ function getConstrainedViewportRect(viewportOffset) {
         this.isOpen = false;
         Dialog._visibleDialogPlugin = null;
     }
+    /**
+	 * Makes the <body> unscrollable (e.g. when the modal shows up).
+	 */ _lockBodyScroll() {
+        document.documentElement.classList.add('ck-dialog-scroll-locked');
+    }
+    /**
+	 * Makes the <body> scrollable again (e.g. once the modal hides).
+	 */ _unlockBodyScroll() {
+        document.documentElement.classList.remove('ck-dialog-scroll-locked');
+    }
 }
 
 /**
@@ -4348,6 +4379,11 @@ var accessibilityIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/20
 	 */ static get pluginName() {
         return 'AccessibilityHelp';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ init() {
@@ -8092,6 +8128,7 @@ const POSITION_OFF_SCREEN = {
         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();
@@ -8574,13 +8611,13 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
         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);
@@ -9484,6 +9521,7 @@ const NESTED_TOOLBAR_ICONS = /* #__PURE__ */ (()=>({
  * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
  */ 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);
     } else {
@@ -9511,7 +9549,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');
 }
@@ -9604,6 +9642,7 @@ function addMenuToOpenDropdown(dropdownView, options) {
         toolbarView.items.addMany(buttons);
     }
     dropdownView.panelView.children.add(toolbarView);
+    dropdownView.focusTracker.add(toolbarView);
     toolbarView.items.delegate('execute').to(dropdownView);
 }
 /**
@@ -9745,10 +9784,22 @@ function addMenuToOpenDropdown(dropdownView, options) {
         },
         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.
  */ function closeDropdownOnExecute(dropdownView) {
@@ -13710,11 +13761,11 @@ function isMenuDefinition(definition) {
 	 * @param toolbarView A instance of the toolbar to be registered.
 	 */ 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);
             });
         }
@@ -14420,6 +14471,11 @@ function isMenuDefinition(definition) {
 	 */ static get pluginName() {
         return 'Notification';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ init() {
@@ -14664,6 +14720,11 @@ const toPx$4 = /* #__PURE__ */ toUnit('px');
 	 */ static get pluginName() {
         return 'ContextualBalloon';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -16149,6 +16210,11 @@ const toPx$2 = /* #__PURE__ */ toUnit('px');
 	 */ static get pluginName() {
         return 'BalloonToolbar';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ static get requires() {
@@ -16165,7 +16231,7 @@ const toPx$2 = /* #__PURE__ */ toUnit('px');
         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),
@@ -16520,6 +16586,11 @@ const toPx = /* #__PURE__ */ toUnit('px');
 	 */ static get pluginName() {
         return 'BlockToolbar';
     }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
     /**
 	 * @inheritDoc
 	 */ constructor(editor){