@ckeditor/ckeditor5-ui 46.1.1-alpha.3 → 47.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "46.1.1-alpha.3",
+  "version": "47.0.0-alpha.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,11 +17,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "46.1.1-alpha.3",
-    "@ckeditor/ckeditor5-editor-multi-root": "46.1.1-alpha.3",
-    "@ckeditor/ckeditor5-engine": "46.1.1-alpha.3",
-    "@ckeditor/ckeditor5-icons": "46.1.1-alpha.3",
-    "@ckeditor/ckeditor5-utils": "46.1.1-alpha.3",
+    "@ckeditor/ckeditor5-core": "47.0.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-multi-root": "47.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "47.0.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "47.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "47.0.0-alpha.0",
     "@types/color-convert": "2.0.4",
     "color-convert": "3.1.0",
     "color-parse": "2.0.2",

package/src/autocomplete/autocompleteview.js

@@ -13,7 +13,7 @@ import '../../theme/components/autocomplete/autocomplete.css';
  * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
  * the component.
  */
-class AutocompleteView extends SearchTextView {
+export class AutocompleteView extends SearchTextView {
     /**
      * The configuration of the autocomplete view.
      */
@@ -155,4 +155,3 @@ class AutocompleteView extends SearchTextView {
      */
     static _getOptimalPosition = getOptimalPosition;
 }
-export { AutocompleteView };

package/src/dialog/dialog.d.ts

@@ -9,7 +9,7 @@ import { type View } from '../view.js';
 import { type Editor, Plugin } from '@ckeditor/ckeditor5-core';
 import { DialogView, DialogViewPosition } from './dialogview.js';
 import type { DialogActionButtonDefinition } from './dialogactionsview.js';
-import type { KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
+import type { KeystrokeHandlerOptions, Rect } from '@ckeditor/ckeditor5-utils';
 /**
  * The dialog controller class. It is used to show and hide the {@link module:ui/dialog/dialogview~DialogView}.
  */
@@ -237,9 +237,15 @@ export interface DialogDefinition {
      * Available dialog positions. By default `DialogViewPosition.EDITOR_CENTER` is used for {@link #isModal non-modals}
      * and `DialogViewPosition.SCREEN_CENTER` for modals.
      *
+     * If set to a function, it will be called with the DOM root Rect and the dialog Rect as arguments.
+     * It should return the coordinates of the dialog's position.
+     *
      * {@link module:ui/dialog/dialogview#DialogViewPosition Learn more} about available positions.
      */
-    position?: typeof DialogViewPosition[keyof typeof DialogViewPosition];
+    position?: typeof DialogViewPosition[keyof typeof DialogViewPosition] | null | ((dialogRect: Rect, domRootRect?: Rect | null) => {
+        left: number;
+        top: number;
+    });
     /**
      * A callback called when the dialog shows up with a `low` priority. It allows for setting up the dialog's {@link #content}.
      */

package/src/dialog/dialogview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module ui/dialog/dialogview
  */
-import { KeystrokeHandler, FocusTracker, type Locale, type DecoratedMethodEvent, type KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
+import { KeystrokeHandler, FocusTracker, Rect, type Locale, type DecoratedMethodEvent, type KeystrokeHandlerOptions } from '@ckeditor/ckeditor5-utils';
 import { ViewCollection } from '../viewcollection.js';
 import { View } from '../view.js';
 import { FormHeaderView } from '../formheader/formheaderview.js';
@@ -103,9 +103,15 @@ export declare class DialogView extends /* #__PURE__ */ DialogView_base implemen
     /**
      * The position of the dialog view.
      *
+     * If set to a function, it will be called with the DOM root Rect and the dialog Rect as arguments.
+     * It should return the coordinates of the dialog's position.
+     *
      * @observable
      */
-    position: typeof DialogViewPosition[keyof typeof DialogViewPosition] | null;
+    position: typeof DialogViewPosition[keyof typeof DialogViewPosition] | null | ((dialogRect: Rect, domRootRect?: Rect | null) => {
+        left: number;
+        top: number;
+    });
     /**
      * A flag indicating that the dialog should be shown. Once set to `true`, the dialog will be shown
      * after its position is calculated. Until then, the dialog is transparent and not visible.

package/src/dialog/dialogview.js

@@ -45,7 +45,7 @@ const toPx = /* #__PURE__ */ toUnit('px');
 /**
  * A dialog view class.
  */
-class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
+export class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
     /**
      * A collection of the child views inside of the dialog.
      * A dialog can have 3 optional parts: header, content, and actions.
@@ -337,6 +337,14 @@ class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
         }
         const defaultOffset = DialogView.defaultOffset;
         const dialogRect = this._getDialogRect();
+        if (this.position == null) {
+            return;
+        }
+        else if (typeof this.position == 'function') {
+            const coords = this.position(dialogRect, domRootRect);
+            this._moveTo(coords.left, coords.top);
+            return;
+        }
         // @if CK_DEBUG_DIALOG // RectDrawer.clear();
         // @if CK_DEBUG_DIALOG // RectDrawer.draw( viewportRect, { outlineColor: 'blue' }, 'Viewport' );
         switch (configuredPosition) {
@@ -509,4 +517,3 @@ class DialogView extends /* #__PURE__ */ DraggableViewMixin(View) {
         return buttonView;
     }
 }
-export { DialogView };

package/src/dropdown/dropdownview.js

@@ -60,7 +60,7 @@ import '../../theme/components/dropdown/dropdown.css';
  * (which should close it) and support for arrow keys inside the panel. Therefore, unless you really know what
  * you do and you really need to do it, it is recommended to use the {@link module:ui/dropdown/utils~createDropdown} helper.
  */
-class DropdownView extends View {
+export class DropdownView extends View {
     /**
      * Button of the dropdown view. Clicking the button opens the {@link #panelView}.
      */
@@ -436,4 +436,3 @@ class DropdownView extends View {
      */
     static _getOptimalPosition = getOptimalPosition;
 }
-export { DropdownView };

package/src/dropdown/menu/dropdownmenunestedmenuview.js

@@ -16,7 +16,7 @@ import '../../../theme/components/dropdown/menu/dropdownmenu.css';
 /**
  * Represents a nested menu view.
  */
-class DropdownMenuNestedMenuView extends View {
+export class DropdownMenuNestedMenuView extends View {
     /**
      * An array of delegated events for the dropdown menu definition controller.
      * These events are delegated to the dropdown menu element.
@@ -212,4 +212,3 @@ class DropdownMenuNestedMenuView extends View {
         }
     }
 }
-export { DropdownMenuNestedMenuView };

package/src/dropdown/utils.d.ts

@@ -14,6 +14,7 @@ import { type Collection, type Locale } from '@ckeditor/ckeditor5-utils';
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
 import type { DropdownMenuDefinition } from './menu/utils.js';
+import type { ButtonLabelView } from '../button/buttonlabelview.js';
 /**
  * A helper for creating dropdowns. It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown},
  * with a {@link module:ui/dropdown/button/dropdownbutton~DropdownButton button},
@@ -274,6 +275,10 @@ export type ListDropdownButtonDefinition = {
      * Model of the item. Its properties fuel the newly created list item (or its children, depending on the `type`).
      */
     model: UIModel;
+    /**
+     * A view that will be used as a button body in the list item.
+     */
+    labelView?: ButtonLabelView;
 };
 /**
  * A definition of the group inside the list. A group can contain one or more list items (buttons).

package/src/dropdown/utils.js

@@ -540,7 +540,7 @@ function bindViewCollectionItemsToDefinitions(dropdownView, listItems, definitio
             const listItemView = new ListItemView(locale);
             let buttonView;
             if (def.type === 'button') {
-                buttonView = new ListItemButtonView(locale);
+                buttonView = new ListItemButtonView(locale, def.labelView);
                 buttonView.set({
                     isToggleable
                 });

package/src/icon/iconview.js

@@ -11,7 +11,7 @@ import '../../theme/components/icon/icon.css';
 /**
  * The icon view class.
  */
-class IconView extends View {
+export class IconView extends View {
     /**
      * A list of presentational attributes that can be set on the `<svg>` element and should be preserved
      * when the icon {@link module:ui/icon/iconview~IconView#content content} is loaded.
@@ -121,4 +121,3 @@ class IconView extends View {
         }
     }
 }
-export { IconView };

package/src/menubar/menubarmenuview.js

@@ -15,7 +15,7 @@ import '../../theme/components/menubar/menubarmenu.css';
  * A menu view for the {@link module:ui/menubar/menubarview~MenuBarView}. Menus are building blocks of the menu bar,
  * they host other sub-menus and menu items (buttons) that users can interact with.
  */
-class MenuBarMenuView extends View {
+export class MenuBarMenuView extends View {
     /**
      * Button of the menu view.
      */
@@ -196,4 +196,3 @@ class MenuBarMenuView extends View {
      */
     static _getOptimalPosition = getOptimalPosition;
 }
-export { MenuBarMenuView };

package/src/panel/balloon/balloonpanelview.js

@@ -65,7 +65,7 @@ const POSITION_OFF_SCREEN = {
  * } );
  * ```
  */
-class BalloonPanelView extends View {
+export class BalloonPanelView extends View {
     /**
      * A collection of the child views that creates the balloon panel contents.
      */
@@ -1059,7 +1059,6 @@ class BalloonPanelView extends View {
      */
     static defaultPositions = /* #__PURE__ */ BalloonPanelView.generatePositions();
 }
-export { BalloonPanelView };
 /**
  * Returns the DOM element for given object or null, if there is none,
  * e.g. when the passed object is a Rect instance or so.

package/src/template.d.ts

@@ -320,7 +320,8 @@ export declare class Template extends /* #__PURE__ */ Template_base {
      * ```ts
      * attributes: {
      * 	style: {
-     * 		color: 'red'
+     * 		color: 'red',
+     * 		'--color': 'red'
      * 	}
      * }
      * ```
@@ -330,7 +331,8 @@ export declare class Template extends /* #__PURE__ */ Template_base {
      * ```ts
      * attributes: {
      * 	style: {
-     * 		color: bind.to( ... )
+     * 		color: bind.to( ... ),
+     * 		'--color': bind.to( ... )
      * 	}
      * }
      * ```
@@ -654,6 +656,7 @@ export type TemplateSimpleValueSchema = TemplateSimpleValue | AttributeBinding;
  * 		// An object schema, specific for styles.
  * 		style: {
  * 			color: 'red',
+ * 			'--color': 'red',
  * 			backgroundColor: bind.to( 'qux', () => { ... } )
  * 		}
  * 	}

package/src/template.js

@@ -568,7 +568,8 @@ export class Template extends /* #__PURE__ */ EmitterMixin() {
      * ```ts
      * attributes: {
      * 	style: {
-     * 		color: 'red'
+     * 		color: 'red',
+     * 		'--color': 'red'
      * 	}
      * }
      * ```
@@ -578,7 +579,8 @@ export class Template extends /* #__PURE__ */ EmitterMixin() {
      * ```ts
      * attributes: {
      * 	style: {
-     * 		color: bind.to( ... )
+     * 		color: bind.to( ... ),
+     * 		'--color': bind.to( ... )
      * 	}
      * }
      * ```
@@ -609,6 +611,15 @@ export class Template extends /* #__PURE__ */ EmitterMixin() {
             // Cases:
             //
             //		style: {
+            //			--color: 'red'
+            //		}
+            //
+            else if (isCssVariable(styleName)) {
+                node.style.setProperty(styleName, styleValue);
+            }
+            // Cases:
+            //
+            //		style: {
             //			color: 'red'
             //		}
             //
@@ -925,6 +936,20 @@ function hasTemplateBinding(schema) {
     }
     return false;
 }
+/**
+ * Checks whether the given name is a valid CSS variable name.
+ *
+ * A valid CSS variable name starts with two dashes (`--`), followed by a letter, underscore (`_`),
+ * or dash (`-`), and can be followed by any combination of letters, digits, underscores, dashes,
+ * or additional dashes.
+ *
+ * @param name The name to validate as a CSS variable.
+ * @returns True if the name is a valid CSS variable, false otherwise.
+ */
+function isCssVariable(name) {
+    const regex = /^--[a-zA-Z_-][\w-]*$/;
+    return regex.test(name);
+}
 /**
  * Assembles the value using {@link module:ui/template~TemplateValueSchema} and stores it in a form of
  * an Array. Each entry of the Array corresponds to one of {@link module:ui/template~TemplateValueSchema}
@@ -1016,10 +1041,20 @@ function getAttributeUpdater(el, attrName, ns) {
 function getStyleUpdater(el, styleName) {
     return {
         set(value) {
-            el.style[styleName] = value;
+            if (isCssVariable(styleName)) {
+                el.style.setProperty(styleName, value);
+            }
+            else {
+                el.style[styleName] = value;
+            }
         },
         remove() {
-            el.style[styleName] = null;
+            if (isCssVariable(styleName)) {
+                el.style.removeProperty(styleName);
+            }
+            else {
+                el.style[styleName] = null;
+            }
         }
     };
 }

package/src/tooltipmanager.js

@@ -73,7 +73,7 @@ const BALLOON_CLASS = 'ck-tooltip';
  * **Note**: This class is a singleton. All editor instances re-use the same instance loaded by
  * {@link module:ui/editorui/editorui~EditorUI} of the first editor.
  */
-class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
+export class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
     /**
      * The view rendering text of the tooltip.
      */
@@ -421,7 +421,6 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
         });
     }
 }
-export { TooltipManager };
 function getDescendantWithTooltip(element) {
     if (!isElement(element)) {
         return null;

package/theme/components/formheader/formheader.css

@@ -12,5 +12,7 @@
 
 	& h2.ck-form__header__label {
 		flex-grow: 1;
+		text-overflow: ellipsis;
+		overflow: hidden;
 	}
 }