@ckeditor/ckeditor5-ui 44.3.0 → 45.0.0-alpha.1

package/src/labeledinput/labeledinputview.js

@@ -13,6 +13,19 @@ import '../../theme/components/labeledinput/labeledinput.css';
  * The labeled input view class.
  */
 export default class LabeledInputView extends View {
+    /**
+     * The label view.
+     */
+    labelView;
+    /**
+     * The input view.
+     */
+    inputView;
+    /**
+     * The status view for the {@link #inputView}. It displays {@link #errorText} and
+     * {@link #infoText}.
+     */
+    statusView;
     /**
      * Creates an instance of the labeled input view class.
      *

package/src/list/listitemgroupview.js

@@ -13,6 +13,21 @@ import ListSeparatorView from './listseparatorview.js';
  * The list item group view class.
  */
 export default class ListItemGroupView extends View {
+    /**
+     * Label of the group view. Its text is configurable using the {@link #label label attribute}.
+     *
+     * If a custom label view is not passed in `ListItemGroupView` constructor, the label is an instance
+     * of {@link module:ui/label/labelview~LabelView}.
+     */
+    labelView;
+    /**
+     * Collection of the child list items inside this group.
+     */
+    items;
+    /**
+     * Collection of the child elements of the group.
+     */
+    children;
     /**
      * Creates an instance of the list item group view class.
      *

package/src/list/listitemview.js

@@ -10,6 +10,10 @@ import View from '../view.js';
  * The list item view class.
  */
 export default class ListItemView extends View {
+    /**
+     * Collection of the child views inside of the list item {@link #element}.
+     */
+    children;
     /**
      * @inheritDoc
      */

package/src/list/listview.js

@@ -16,16 +16,38 @@ import '../../theme/components/list/list.css';
  * The list view class.
  */
 export default class ListView extends View {
+    /**
+     * The collection of focusable views in the list. It is used to determine accessible navigation
+     * between the {@link module:ui/list/listitemview~ListItemView list items} and
+     * {@link module:ui/list/listitemgroupview~ListItemGroupView list groups}.
+     */
+    focusables;
+    /**
+     * Collection of the child list views.
+     */
+    items;
+    /**
+     * Tracks information about DOM focus in the list.
+     */
+    focusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * Helps cycling over focusable {@link #items} in the list.
+     */
+    _focusCycler;
+    /**
+     * A cached map of {@link module:ui/list/listitemgroupview~ListItemGroupView} to `change` event listeners for their `items`.
+     * Used for accessibility and keyboard navigation purposes.
+     */
+    _listItemGroupToChangeListeners = new WeakMap();
     /**
      * @inheritDoc
      */
     constructor(locale) {
         super(locale);
-        /**
-         * A cached map of {@link module:ui/list/listitemgroupview~ListItemGroupView} to `change` event listeners for their `items`.
-         * Used for accessibility and keyboard navigation purposes.
-         */
-        this._listItemGroupToChangeListeners = new WeakMap();
         const bind = this.bindTemplate;
         this.focusables = new ViewCollection();
         this.items = this.createCollection();

package/src/menubar/menubarmenubuttonview.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * @module ui/menubar/menubarmenubuttonview
- */
 import IconView from '../icon/iconview.js';
 import ListItemButtonView from '../button/listitembuttonview.js';
 import type { Locale } from '@ckeditor/ckeditor5-utils';

package/src/menubar/menubarmenubuttonview.js

@@ -5,15 +5,19 @@
 /**
  * @module ui/menubar/menubarmenubuttonview
  */
+import { IconDropdownArrow } from '@ckeditor/ckeditor5-icons';
 import IconView from '../icon/iconview.js';
 import ListItemButtonView from '../button/listitembuttonview.js';
-import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';
 import '../../theme/components/menubar/menubarmenubutton.css';
 /**
  * A menu {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#buttonView} class. Buttons like this one
  * open both top-level bar menus as well as sub-menus.
  */
 export default class MenuBarMenuButtonView extends ListItemButtonView {
+    /**
+     * An icon that displays an arrow to indicate a direction of the menu.
+     */
+    arrowView;
     /**
      * Creates an instance of the menu bar button view.
      *
@@ -53,7 +57,7 @@ export default class MenuBarMenuButtonView extends ListItemButtonView {
      */
     _createArrowView() {
         const arrowView = new IconView();
-        arrowView.content = dropdownArrowIcon;
+        arrowView.content = IconDropdownArrow;
         arrowView.extendTemplate({
             attributes: {
                 class: 'ck-menu-bar__menu__button__arrow'

package/src/menubar/menubarmenupanelview.js

@@ -8,6 +8,10 @@ import '../../theme/components/menubar/menubarmenupanel.css';
  * A view representing a {@link module:ui/menubar/menubarmenuview~MenuBarMenuView#panelView} of a menu.
  */
 export default class MenuBarMenuPanelView extends View {
+    /**
+     * Collection of the child views in this panel.
+     */
+    children;
     /**
      * Creates an instance of the menu panel view.
      *

package/src/menubar/menubarmenuview.js

@@ -16,6 +16,23 @@ import '../../theme/components/menubar/menubarmenu.css';
  * they host other sub-menus and menu items (buttons) that users can interact with.
  */
 class MenuBarMenuView extends View {
+    /**
+     * Button of the menu view.
+     */
+    buttonView;
+    /**
+     * Panel of the menu. It hosts children of the menu.
+     */
+    panelView;
+    /**
+     * Tracks information about the DOM focus in the menu.
+     */
+    focusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}. It manages
+     * keystrokes of the menu.
+     */
+    keystrokes;
     /**
      * Creates an instance of the menu view.
      *
@@ -172,11 +189,11 @@ class MenuBarMenuView extends View {
             }
         }
     }
+    /**
+     * A function used to calculate the optimal position for the dropdown panel.
+     *
+     * Referenced for unit testing purposes.
+     */
+    static _getOptimalPosition = getOptimalPosition;
 }
-/**
- * A function used to calculate the optimal position for the dropdown panel.
- *
- * Referenced for unit testing purposes.
- */
-MenuBarMenuView._getOptimalPosition = getOptimalPosition;
 export default MenuBarMenuView;

package/src/menubar/menubarview.d.ts

@@ -69,6 +69,14 @@ export default class MenuBarView extends View implements FocusableView {
      * Closes all menus in the bar.
      */
     close(): void;
+    /**
+     * Disables all menus in the bar.
+     */
+    disable(): void;
+    /**
+     * Enables all menus in the bar.
+     */
+    enable(): void;
     /**
      * Registers a menu view in the menu bar. Every {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance must be registered
      * in the menu bar to be properly managed.

package/src/menubar/menubarview.js

@@ -7,7 +7,7 @@
  */
 import { logWarning } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
-import { isObject } from 'lodash-es';
+import { isObject } from 'es-toolkit/compat';
 import ListItemView from '../list/listitemview.js';
 import ListSeparatorView from '../list/listseparatorview.js';
 import MenuBarMenuView from './menubarmenuview.js';
@@ -23,6 +23,16 @@ import '../../theme/components/menubar/menubar.css';
  * to organize and access a large number of buttons.
  */
 export default class MenuBarView extends View {
+    /**
+     * Collection of the child views inside the {@link #element}.
+     */
+    children;
+    /**
+     * A list of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instances registered in the menu bar.
+     *
+     * @observable
+     */
+    menus = [];
     /**
      * Creates an instance of the menu bar view.
      *
@@ -30,12 +40,6 @@ export default class MenuBarView extends View {
      */
     constructor(locale) {
         super(locale);
-        /**
-         * A list of {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instances registered in the menu bar.
-         *
-         * @observable
-         */
-        this.menus = [];
         const t = locale.t;
         const bind = this.bindTemplate;
         this.set({
@@ -111,6 +115,22 @@ export default class MenuBarView extends View {
             topLevelCategoryMenuView.isOpen = false;
         }
     }
+    /**
+     * Disables all menus in the bar.
+     */
+    disable() {
+        for (const topLevelCategoryMenuView of this.children) {
+            topLevelCategoryMenuView.isEnabled = false;
+        }
+    }
+    /**
+     * Enables all menus in the bar.
+     */
+    enable() {
+        for (const topLevelCategoryMenuView of this.children) {
+            topLevelCategoryMenuView.isEnabled = true;
+        }
+    }
     /**
      * Registers a menu view in the menu bar. Every {@link module:ui/menubar/menubarmenuview~MenuBarMenuView} instance must be registered
      * in the menu bar to be properly managed.

package/src/menubar/utils.d.ts

@@ -250,6 +250,12 @@ export declare const MenuBarMenuViewPanelPositioningFunctions: Record<string, Po
  * 				]
  * 			},
  * 			{
+ * 				groupId: 'fullscreen',
+ * 				items: [
+ * 					'menuBar:fullscreen'
+ * 				]
+ * 			},
+ * 			{
  * 				groupId: 'restrictedEditingException',
  * 				items: [
  * 					'menuBar:restrictedEditingException'

package/src/menubar/utils.js

@@ -8,7 +8,7 @@
 import MenuBarMenuListItemView from './menubarmenulistitemview.js';
 import clickOutsideHandler from '../bindings/clickoutsidehandler.js';
 import { logWarning } from '@ckeditor/ckeditor5-utils';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep } from 'es-toolkit/compat';
 const NESTED_PANEL_HORIZONTAL_OFFSET = 5;
 /**
  * Behaviors of the {@link module:ui/menubar/menubarview~MenuBarView} component.
@@ -158,7 +158,7 @@ export const MenuBarMenuBehaviors = {
      */
     openAndFocusPanelOnArrowDownKey(menuView) {
         menuView.keystrokes.set('arrowdown', (data, cancel) => {
-            if (menuView.focusTracker.focusedElement === menuView.buttonView.element) {
+            if (menuView.isEnabled && menuView.focusTracker.focusedElement === menuView.buttonView.element) {
                 if (!menuView.isOpen) {
                     menuView.isOpen = true;
                 }
@@ -478,6 +478,12 @@ export const MenuBarMenuViewPanelPositioningFunctions = {
  * 				]
  * 			},
  * 			{
+ * 				groupId: 'fullscreen',
+ * 				items: [
+ * 					'menuBar:fullscreen'
+ * 				]
+ * 			},
+ * 			{
  * 				groupId: 'restrictedEditingException',
  * 				items: [
  * 					'menuBar:restrictedEditingException'
@@ -742,6 +748,12 @@ export const DefaultMenuBarItems = [
                     'menuBar:previewMergeFields'
                 ]
             },
+            {
+                groupId: 'fullscreen',
+                items: [
+                    'menuBar:fullscreen'
+                ]
+            },
             {
                 groupId: 'restrictedEditing',
                 items: [
@@ -760,7 +772,8 @@ export const DefaultMenuBarItems = [
                     'menuBar:insertImage',
                     'menuBar:ckbox',
                     'menuBar:ckfinder',
-                    'menuBar:insertTable'
+                    'menuBar:insertTable',
+                    'menuBar:insertTableLayout'
                 ]
             },
             {

package/src/model.js

@@ -6,7 +6,7 @@
  * @module ui/model
  */
 import { ObservableMixin } from '@ckeditor/ckeditor5-utils';
-import { extend } from 'lodash-es';
+import { extend } from 'es-toolkit/compat';
 /**
  * The base MVC model class.
  */