@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 0.0.0-nightly-20240827.0 to 0.0.0-nightly-20240828.0

dist/dropdown/menu/dropdownmenubehaviors.d.ts

@@ -36,2 +36,6 @@ /**
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: DropdownMenuNestedMenuView): void;
+    /**
      * Closes the menu on the left key press (right, in RTL mode). This allows for navigating to sub-menus using the keyboard.
@@ -38,0 +42,0 @@ */

dist/dropdown/menu/dropdownmenubuttonview.d.ts

@@ -13,3 +13,3 @@ /**
 import IconView from '../../icon/iconview.js';
-import ButtonView from '../../button/buttonview.js';
+import ListItemButtonView from '../../button/listitembuttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
@@ -20,3 +20,3 @@ import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
  */
-export default class DropdownMenuButtonView extends ButtonView {
+export default class DropdownMenuButtonView extends ListItemButtonView {
     /**
@@ -23,0 +23,0 @@ * An icon that displays an arrow to indicate a direction of the menu.

dist/menubar/utils.d.ts

@@ -76,2 +76,6 @@ /**
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: MenuBarMenuView): void;
+    /**
      * Closes the menu on the right left key press. This allows for navigating to sub-menus using the keyboard.
@@ -78,0 +82,0 @@ */

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "0.0.0-nightly-20240827.0",
+  "version": "0.0.0-nightly-20240828.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -15,5 +15,5 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240827.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240827.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240827.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240828.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240828.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240828.0",
     "color-convert": "2.0.1",
@@ -20,0 +20,0 @@ "color-parse": "1.4.2",

src/dropdown/menu/dropdownmenubehaviors.d.ts

@@ -32,2 +32,6 @@ /**
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: DropdownMenuNestedMenuView): void;
+    /**
      * Closes the menu on the left key press (right, in RTL mode). This allows for navigating to sub-menus using the keyboard.
@@ -34,0 +38,0 @@ */

src/dropdown/menu/dropdownmenubehaviors.js

@@ -66,3 +66,2 @@ /**
                 menuView.isOpen = true;
-                menuView.panelView.focus();
             }
@@ -72,2 +71,17 @@ });
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView) {
+        menuView.keystrokes.set('enter', (data, cancel) => {
+            // Engage only for Enter key press when the button is focused. The panel can contain
+            // other UI components and features that rely on the Enter key press.
+            if (menuView.focusTracker.focusedElement !== menuView.buttonView.element) {
+                return;
+            }
+            menuView.isOpen = true;
+            menuView.panelView.focus();
+            cancel();
+        });
+    },
+    /**
      * Closes the menu on the left key press (right, in RTL mode). This allows for navigating to sub-menus using the keyboard.
@@ -74,0 +88,0 @@ */

src/dropdown/menu/dropdownmenubuttonview.d.ts

@@ -9,3 +9,3 @@ /**
 import IconView from '../../icon/iconview.js';
-import ButtonView from '../../button/buttonview.js';
+import ListItemButtonView from '../../button/listitembuttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
@@ -16,3 +16,3 @@ import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
  */
-export default class DropdownMenuButtonView extends ButtonView {
+export default class DropdownMenuButtonView extends ListItemButtonView {
     /**
@@ -19,0 +19,0 @@ * An icon that displays an arrow to indicate a direction of the menu.

src/dropdown/menu/dropdownmenubuttonview.js

@@ -9,3 +9,3 @@ /**
 import IconView from '../../icon/iconview.js';
-import ButtonView from '../../button/buttonview.js';
+import ListItemButtonView from '../../button/listitembuttonview.js';
 import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
@@ -16,3 +16,3 @@ import '../../../theme/components/dropdown/menu/dropdownmenubutton.css';
  */
-export default class DropdownMenuButtonView extends ButtonView {
+export default class DropdownMenuButtonView extends ListItemButtonView {
     /**
@@ -19,0 +19,0 @@ * Creates an instance of the dropdown menu button view.

src/dropdown/menu/dropdownmenunestedmenuview.js

@@ -127,2 +127,3 @@ /**
         DropdownMenuBehaviors.openOnButtonClick(this);
+        DropdownMenuBehaviors.openAndFocusOnEnterKeyPress(this);
         DropdownMenuBehaviors.openOnArrowRightKey(this);
@@ -129,0 +130,0 @@ DropdownMenuBehaviors.closeOnEscKey(this);

src/menubar/menubarmenuview.js

@@ -88,2 +88,3 @@ /**
             MenuBarMenuBehaviors.closeOnArrowLeftKey(this);
+            MenuBarMenuBehaviors.openAndFocusOnEnterKeyPress(this);
             MenuBarMenuBehaviors.closeOnParentClose(this);
@@ -90,0 +91,0 @@ }

src/menubar/utils.d.ts

@@ -72,2 +72,6 @@ /**
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView: MenuBarMenuView): void;
+    /**
      * Closes the menu on the right left key press. This allows for navigating to sub-menus using the keyboard.
@@ -74,0 +78,0 @@ */

src/menubar/utils.js

@@ -138,10 +138,2 @@ /**
         });
-        // After clicking menu bar list item the focus is moved to the newly opened submenu.
-        // We need to enable focus border for the submenu items because after pressing arrow down it will
-        // focus second item instead of first which is not super intuitive.
-        menuBarView.listenTo(menuBarView.element, 'click', () => {
-            if (menuBarView.isOpen && menuBarView.element.matches(':focus-within')) {
-                menuBarView.isFocusBorderEnabled = true;
-            }
-        }, { useCapture: true });
         menuBarView.listenTo(menuBarView.element, 'keydown', () => {
@@ -203,5 +195,2 @@ isKeyPressed = true;
             menuView.isOpen = true;
-            if (menuView.parentMenuView) {
-                menuView.panelView.focus();
-            }
         });
@@ -218,2 +207,17 @@ },
     /**
+     * Opens the menu and focuses the panel content upon pressing the Enter key.
+     */
+    openAndFocusOnEnterKeyPress(menuView) {
+        menuView.keystrokes.set('enter', (data, cancel) => {
+            // Engage only for Enter key press when the button is focused. The panel can contain
+            // other UI components and features that rely on the Enter key press.
+            if (menuView.focusTracker.focusedElement !== menuView.buttonView.element) {
+                return;
+            }
+            menuView.isOpen = true;
+            menuView.panelView.focus();
+            cancel();
+        });
+    },
+    /**
      * Closes the menu on the right left key press. This allows for navigating to sub-menus using the keyboard.
@@ -220,0 +224,0 @@ */

src/panel/balloon/balloonpanelview.js

@@ -9,3 +9,3 @@ /**
 import View from '../../view.js';
-import { getOptimalPosition, global, isRange, toUnit, isVisible, ResizeObserver } from '@ckeditor/ckeditor5-utils';
+import { getOptimalPosition, global, isRange, toUnit, isVisible, isText, ResizeObserver } from '@ckeditor/ckeditor5-utils';
 import { isElement } from 'lodash-es';
@@ -277,3 +277,3 @@ import '../../../theme/components/panel/balloonpanel.css';
         }
-        const targetElement = getDomElement(options.target);
+        let targetElement = getDomElement(options.target);
         const limiterElement = options.limiter ? getDomElement(options.limiter) : global.document.body;
@@ -298,12 +298,19 @@ // Then we need to listen on scroll event of eny element in the document.
         // Hide the panel if the target element is no longer visible.
-        if (targetElement && !this._resizeObserver) {
-            const checkVisibility = () => {
-                // If the target element is no longer visible, hide the panel.
-                if (!isVisible(targetElement)) {
-                    this.unpin();
-                }
-            };
-            // Element is being resized to 0x0 after it's parent became hidden,
-            // so we need to check size in order to determine if it's visible or not.
-            this._resizeObserver = new ResizeObserver(targetElement, checkVisibility);
+        if (!this._resizeObserver) {
+            // If the target element is a text node, we need to check the parent element.
+            // It's because `ResizeObserver` accept only elements, not text nodes.
+            if (targetElement && isText(targetElement)) {
+                targetElement = targetElement.parentElement;
+            }
+            if (targetElement) {
+                const checkVisibility = () => {
+                    // If the target element is no longer visible, hide the panel.
+                    if (!isVisible(targetElement)) {
+                        this.unpin();
+                    }
+                };
+                // Element is being resized to 0x0 after it's parent became hidden,
+                // so we need to check size in order to determine if it's visible or not.
+                this._resizeObserver = new ResizeObserver(targetElement, checkVisibility);
+            }
         }
@@ -310,0 +317,0 @@ return true;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6629034

increased by0.12%

Lines of code

64744

increased by0.1%

Dependency changes

• + Added@ckeditor/ckeditor5-core@0.0.0-nightly-20240828.0(transitive)

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20240828.0(transitive)

• + Added@ckeditor/ckeditor5-utils@0.0.0-nightly-20240828.0(transitive)

• + Added@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240828.0(transitive)

• - Removed@ckeditor/ckeditor5-core@0.0.0-nightly-20240827.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.0.0-nightly-20240827.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.0.0-nightly-20240827.0(transitive)

• - Removed@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240827.0(transitive)

• Updated@ckeditor/ckeditor5-core@0.0.0-nightly-20240828.0

• Updated@ckeditor/ckeditor5-engine@0.0.0-nightly-20240828.0

• Updated@ckeditor/ckeditor5-utils@0.0.0-nightly-20240828.0