x4js 2.3.30 → 2.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.3.30",
+  "version": "2.3.32",
   "description": "A full TypeScript framework for web and desktop applications: components written as classes (layouts, inputs, lists, grids, dialogs, forms, charts...) and a command line to create, serve and build them.",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
     "aicli.md",
     "aicontext.md",
     "aiguide.md",
+    "changelog.md",
     "README.md",
     "LICENSE"
   ],

package/src/components/button/button.module.scss

@@ -47,7 +47,7 @@
 	--ol-button-icon-color: var( --text-primary );
 
 	--ol-button-border-focus: var( --accent-background-focus );
-	--ol-button-color-focus: var( --accent-background );
+	--ol-button-color-focus: var( --accent-text );
 }
 
 .x4button {

package/src/components/checkbox/checkbox.module.scss

@@ -29,9 +29,10 @@
 
 	--checkbox-button-border: var( --border );
 	--checkbox-button-color: var( --text-ternary );
-	--checkbox-button-color-checked: var( --accent-background-active );
+	--checkbox-button-color-checked: var( --accent-text );
 	--checkbox-button-background-checked: var( --background-secondary );
 	--checkbox-button-border-checked: var( --accent-background );
+	--checkbox-button-icon-size: 24px;		// set by a class of the application on a checkbox: it wins over :root
 
 	--checkbox-danger-color: var( --alert-background );
 	--checkbox-danger-background: var( --alert-background-light );
@@ -187,8 +188,8 @@
 		#icon {
 			color: var( --checkbox-ink );
 			fill: var( --checkbox-ink );
-			width: 24px;
-			height: 24px;
+			width: var( --checkbox-button-icon-size );
+			height: var( --checkbox-button-icon-size );
 		}
 	}
 

package/src/components/checkbox/checkbox.ts

@@ -54,6 +54,7 @@ interface CheckboxProps extends ComponentProps {
  * --checkbox-button-color-checked
  * --checkbox-button-background-checked
  * --checkbox-button-border-checked
+ * --checkbox-button-icon-size
  * --checkbox-danger-color
  * --checkbox-danger-background
  * ```

package/src/components/menu/menu.module.scss

@@ -25,6 +25,15 @@
 	--menuitem-color-active: var( --accent-color-active );
 	--menuitem-background-hover: var( --accent-background-hover );
 	--menuitem-color-hover: var( --accent-color-hover );
+	--menuitem-shortcut-color: var( --text-secondary );
+
+	--menubar-background: var( --background-primary );
+	--menubar-border: var( --border );
+
+	--menubaritem-color: var( --text-primary );
+	--menubaritem-background-hover: var( --accent-background-hover );
+	--menubaritem-color-hover: var( --accent-color-hover );
+	--menubaritem-color-disabled: var( --disabled-color-dark );
 }
 
 .x4menu {
@@ -84,6 +93,20 @@
 			@extend %flex;
 		}
 
+		// the keys of the command: after the text, which takes the width, at the right
+		#shortcut {
+			color: var(--menuitem-shortcut-color);
+			padding-left: 16px;
+			white-space: nowrap;
+		}
+
+		// hovered, active, disabled: in the colour of the text
+		&:hover, &.opened, &:active, &[disabled] {
+			#shortcut {
+				color: inherit;
+			}
+		}
+
 		&.title {
 			color: var( --text-primary );
 			cursor: auto;
@@ -124,4 +147,40 @@
 		border-bottom: 1px solid var(--border);
 		margin-bottom: 4px;
 	}
+}
+
+.x4menubar {
+	padding: 0 4px;
+
+	background-color: var(--menubar-background);
+	border-bottom: 1px solid var(--menubar-border);
+
+	.x4cmenubaritem {
+		@extend %hbox;
+
+		gap: 6px;
+		padding: 4px 10px;
+		color: var(--menubaritem-color);
+		cursor: pointer;
+		user-select: none;
+
+		transition: background-color 0.1s;
+
+		#icon {
+			width: 16px;
+			height: 16px;
+		}
+
+		// hovered, or its menu open: as an item of the menu
+		&:hover:not([disabled]),
+		&.opened {
+			background-color: var(--menubaritem-background-hover);
+			color: var(--menubaritem-color-hover);
+		}
+
+		&[disabled] {
+			color: var(--menubaritem-color-disabled);
+			cursor: auto;
+		}
+	}
 }

package/src/components/menu/menu.ts

@@ -17,9 +17,11 @@
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
 import { Timer, UnsafeHtml, isFunction, isString } from '../../core/core_tools';
+import { shortcutText } from '../../core/core_shortcuts';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
+import { BoxProps, HBox } from '../boxes/boxes';
 
 import icons from "../assets/icons";
 import "./menu.module.scss"
@@ -38,6 +40,13 @@ export interface MenuItem {
 	disabled?: boolean;
 	checked?: boolean | ( () => boolean);
 	click?: DOMEventHandler;
+
+	/**
+	 * the keys of the command, shown at the right of the item: "Mod+S" is written
+	 * "Ctrl+S", "⌘S" on a Mac (shortcutText). Shown only: the shortcut itself
+	 * is added by Application.addShortcut or Component.addShortcut
+	 */
+	shortcut?: string;
 }
 
 export type MenuElement = MenuItem | Component | string;
@@ -56,6 +65,7 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
  * --menuitem-color-active
  * --menuitem-background-hover
  * --menuitem-color-hover
+ * --menuitem-shortcut-color
  * ```
  */
 
@@ -97,6 +107,7 @@ class CMenuItem extends Component {
 		this.setContent( [
 			new Icon({ id:"icon", iconId }),
 			new Component( { id: "text", content: itm.text } ),
+			itm.shortcut ? new Component( { id: "shortcut", content: shortcutText( itm.shortcut ) } ) : null,
 			// a sub menu: a triangle at the right, in the colour of the text
 			itm.menu ? new Icon( { id: "sub", iconId: icons.caret } ) : null,
 		]);
@@ -207,3 +218,134 @@ export class Menu extends Popup {
 	}
 }
 
+/**
+ *
+ */
+
+export interface MenuBarItem {
+	text: string;
+	icon?: string;
+	disabled?: boolean;
+
+	/** its menu; a function is called at each opening: it gives the items of that time */
+	items: MenuElement[] | ( ( ) => MenuElement[] );
+}
+
+export interface MenuBarProps extends Omit<BoxProps,"content"> {
+	items: MenuBarItem[];
+}
+
+/**
+ * a title of the bar
+ */
+
+class CMenuBarItem extends Component {
+	static classPrefix = "x4";
+
+	constructor( itm: MenuBarItem ) {
+		super( { disabled: itm.disabled } );
+
+		this.setContent( [
+			itm.icon ? new Icon( { id: "icon", iconId: itm.icon } ) : null,
+			new Component( { id: "text", content: itm.text } ),
+		] );
+	}
+}
+
+/**
+ * A row of titles, each one opens its menu under it.
+ * A click on a title opens its menu, a second one closes it. While a menu is open, the
+ * mouse on another title opens the menu of that one.
+ *
+ * For a web application. A desktop application (Electron...) should not use it: the menu
+ * of the system is preferable, where the user expects it (the top of the screen on a Mac)
+ * and with the keyboard of the system.
+ *
+ * @example
+ * new MenuBar( { items: [
+ *     { text: "File", items: [ { text: "Open…", shortcut: "Mod+O", click: open }, "-", { text: "Quit", click: quit } ] },
+ *     { text: "Edit", items: ( ) => [ { text: "Undo", disabled: !canUndo( ), click: undo } ] },
+ * ] } );
+ *
+ * @cssvar
+ * ```
+ * --menubar-background
+ * --menubar-border
+ * --menubaritem-color
+ * --menubaritem-background-hover
+ * --menubaritem-color-hover
+ * --menubaritem-color-disabled
+ * ```
+ */
+
+export class MenuBar extends HBox<MenuBarProps> {
+	static classPrefix = "x4";
+
+	private _menu: Menu;				// the menu open, null when none
+	private _title: CMenuBarItem;		// the title of that menu
+	private _closed: CMenuBarItem;		// the title whose menu closed last
+	private _closedAt = -1;				// when (performance.now)
+
+	constructor( props: MenuBarProps ) {
+		super( props );
+
+		this.setContent( props.items.map( itm => {
+			const title = new CMenuBarItem( itm );
+
+			// The menu closes by itself as soon as the button goes down outside of it,
+			// before the title hears of it: it was the menu of this title if it closed
+			// since this very press began.
+			let wasOpen = false;
+
+			title.addDOMEvent( "pointerdown", ev => { wasOpen = this._closed===title && this._closedAt >= ev.timeStamp; } );
+			title.addDOMEvent( "click", ( ) => {
+				if( !wasOpen ) {
+					this._open( title, itm );
+				}
+			} );
+
+			title.addDOMEvent( "mouseenter", ( ) => {
+				if( this._menu && this._title!==title ) {
+					this._open( title, itm );
+				}
+			} );
+
+			return title;
+		} ) );
+	}
+
+	/**
+	 * closes the menu open, opens the one of the title under it
+	 */
+
+	private _open( title: CMenuBarItem, itm: MenuBarItem ) {
+		if( title.isDisabled( ) ) {
+			return;
+		}
+
+		if( this._menu ) {
+			this._menu.dismiss( );
+		}
+
+		const menu = new Menu( { items: isFunction( itm.items ) ? itm.items( ) : itm.items } );
+
+		menu.on( "closed", ( ) => {
+			title.removeClass( "opened" );
+
+			this._closed = title;
+			this._closedAt = performance.now( );
+
+			if( this._menu===menu ) {
+				this._menu = null;
+				this._title = null;
+			}
+		} );
+
+		this._menu = menu;
+		this._title = title;
+		title.addClass( "opened" );
+
+		menu.displayNear( title.getBoundingRect( ), "top left", "bottom left" );
+	}
+}
+

package/src/components/messages/circle-exclamation.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/><path class="mark" d="M256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

package/src/components/messages/circle-question.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576z"/><path class="mark" d="M320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>

package/src/components/messages/messages.module.scss

@@ -22,6 +22,10 @@
 	--msgbox-icon-color:  var( --alert-background );
 	--msgbox-question-icon-color: var( --accent-background );		// a question, an InputBox, a PromptBox
 
+	// the "!" and the "?" in the disc of the icon: as the text on the red, on the accent
+	--msgbox-icon-mark-color: var( --alert-color );
+	--msgbox-question-icon-mark-color: var( --accent-color );
+
 	--msgbox-log-background: var( --background-ternary );		// the lines of a ProgressionBox
 	--msgbox-log-border: var( --border );
 	--msgbox-log-border-focus: var( --border-focus );
@@ -44,6 +48,22 @@
 		}
 	}
 
+	// the buttons of an error in the red of its title bar: a filled one, the focus of an outline
+	// one (its text stays the one of the text: a red text is not read on a dark background)
+	&.error {
+		--button-background: var( --alert-background );
+		--button-background-hover: var( --alert-background-active );
+		--button-background-focus: var( --alert-background-active );
+		--button-background-active: var( --alert-background-active );
+		--button-color: var( --alert-color );
+		--button-color-hover: var( --alert-color );
+		--button-color-focus: var( --alert-color );
+		--button-color-active: var( --alert-color );
+
+		--ol-button-border-focus: var( --alert-background );
+		--ol-button-color-focus: var( --ol-button-color );
+	}
+
 	& .x4form {
 		min-width: 400px;
 
@@ -51,6 +71,10 @@
 		> .x4hbox > .x4icon {
 			color: var( --msgbox-icon-color );
 			height: 96px;
+
+			.mark {
+				fill: var( --msgbox-icon-mark-color );
+			}
 		}
 
 		.x4label {
@@ -61,6 +85,10 @@
 
 	&.question .x4form > .x4hbox > .x4icon {
 		color: var( --msgbox-question-icon-color );
+
+		.mark {
+			fill: var( --msgbox-question-icon-mark-color );
+		}
 	}
 }
 

package/src/components/messages/messages.ts

@@ -37,6 +37,8 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-caption-color
  * --msgbox-icon-color
  * --msgbox-question-icon-color
+ * --msgbox-icon-mark-color
+ * --msgbox-question-icon-mark-color
  * --msgbox-log-background
  * --msgbox-log-border
  * --msgbox-log-border-focus
@@ -47,7 +49,11 @@ export interface MessageBoxProps extends DialogProps {
  * --msgbox-log-scrollbar
  * ```
  * --msgbox-caption-* and --msgbox-icon-color are the ones of an error; a question, an InputBox
- * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color
+ * and a PromptBox have the title bar of a Dialog and their icon in --msgbox-question-icon-color.
+ * The "!" of an error and the "?" of a question are drawn in the disc of their icon, in
+ * --msgbox-icon-mark-color and --msgbox-question-icon-mark-color.
+ * The buttons of an error are in the colours of the alerts (--alert-*): a filled one, the border
+ * of an outline one that has the focus
  */
 
 export class MessageBox extends Dialog<DialogProps>

package/src/components/notification/notification.module.scss

@@ -54,7 +54,10 @@
 		color: var( --notification-icon-default );
 	}
 	
+	// a box does not shrink (.x4box): this one does, down to the frame, its close button kept in it
 	.body {
+		flex-shrink: 1;
+
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
@@ -64,6 +67,7 @@
 		.text {
 			padding: 3px 6px 6px 6px;
 			color: var( --notification-text-color );
+			overflow-wrap: anywhere;		// a long word, an address: cut at the edge
 		}
 	}
 

package/src/components/popup/popup.ts

@@ -49,17 +49,31 @@ function getRoot( ) {
 /**
  * on the document while the event goes down (capture): a press outside
  * every popup closes the group opened last, the others at the next presses.
+ * A press in a popup closes the groups opened after it, over it (a context
+ * menu, the picker of a ColorInput), not its own.
  * The event is left as it is, what is pressed handles it as usual.
  * One function for all the popups: it is removed by the one that empties the list.
  */
 
 function dismissLast( e: UIEvent ) {
-	if( autoclose_list.some( x => x.contains( e.target as Node ) ) ) {
+	const target = e.target as Node;
+
+	// the newest popup the press is in
+	let idx = autoclose_list.length-1;
+	while( idx>=0 && !autoclose_list[idx].contains( target ) ) {
+		idx--;
+	}
+
+	// outside every popup: the newest one; dismiss( ) closes its whole group (a menu and its sub-menus)
+	if( idx<0 ) {
+		autoclose_list[autoclose_list.length-1].dismiss( );
 		return;
 	}
 
-	// the newest popup: dismiss( ) closes its whole group (a menu and its sub-menus)
-	autoclose_list[autoclose_list.length-1].dismiss( );
+	// in a popup: the groups opened after it, not its own (a menu and its sub-menus)
+	const group = autoclose_list[idx].getData( "close" );
+	const over = autoclose_list.slice( idx+1 ).filter( x => x.getData( "close" )!==group );
+	over.reverse( ).forEach( x => x.dismiss( ) );
 }
 
 /**
@@ -395,6 +409,11 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 		let aidx = -1;
 		if( after ) {
 			aidx = autoclose_list.indexOf( this );
+
+			// no longer open: none was opened after it
+			if( aidx<0 ) {
+				return;
+			}
 		}
 
 		autoclose_list.forEach( (x,idx) => {

package/src/components/radio/radio.module.scss

@@ -22,9 +22,10 @@
 
 	--radio-button-border: var( --border );
 	--radio-button-color: var( --text-ternary );
-	--radio-button-color-checked: var( --accent-background-active );
+	--radio-button-color-checked: var( --accent-text );
 	--radio-button-background-checked: var( --background-secondary );
 	--radio-button-border-checked: var( --accent-background );
+	--radio-button-icon-size: 24px;		// set by a class of the application on a radio: it wins over :root
 
 	--radio-danger-color: var( --alert-background );
 	--radio-danger-background: var( --alert-background-light );
@@ -132,8 +133,6 @@
 // square: its former name, kept for the code that has it (not documented)
 .x4radio.button,
 .x4radio.square {
-	--size: 24px;
-
 	&.outline {
 		border-radius: 22px;;
 	}
@@ -159,8 +158,8 @@
 		#icon {
 			fill: var( --radio-button-color );
 			color: var( --radio-button-color );
-			width: var( --size );
-			height: var( --size );
+			width: var( --radio-button-icon-size );
+			height: var( --radio-button-icon-size );
 		}
 	}
 

package/src/components/radio/radio.ts

@@ -62,6 +62,7 @@ interface RadioProps extends ComponentProps {
  * --radio-button-color-checked
  * --radio-button-background-checked
  * --radio-button-border-checked
+ * --radio-button-icon-size
  * --radio-danger-color
  * --radio-danger-background
  * ```

package/src/components/spreadsheet/spreadsheet.ts

@@ -388,22 +388,29 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 		})
 
+		// the cell of the data under the mouse; undefined out of them
 		const targetCell = (e: MouseEvent) => {
 			let el = e.target as Element;
 			while (el && !el.classList.contains("cell")) {
 				el = el.parentElement;
 			}
 
-			if (el) {
-				const cel = componentFromDOM(el);
-				return {
-					ref: cel.getIntData("ref"),
-					row: cel.getInternalData("row"),
-					col: cel.getInternalData("col"),
-				}
+			if (!el) {
+				return undefined;
 			}
 
-			return undefined;
+			// a cell of the header or of the footer (a title, the sizer of a column): no row
+			const cel = componentFromDOM(el);
+			const row = cel.getInternalData("row");
+			if (row === undefined) {
+				return undefined;
+			}
+
+			return {
+				ref: cel.getIntData("ref"),
+				row,
+				col: cel.getInternalData("col"),
+			}
 		}
 
 
@@ -416,11 +423,11 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			// click on another cell while editing:
 			// validate now, rows may be rebuilt before the click event (and the click lost)
 			const ref = targetCell(e);
-			if( ref && ref.row!==undefined ) {
+			if( ref ) {
 				this._endEdit( true, true );
 
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref,true);
 				}
 
@@ -438,7 +445,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref,true);
 				}
 			}
@@ -454,7 +461,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection(false);
+					this.clearSelection(false);
 					this._addSelection(ref.ref,true);
 				}
 
@@ -479,7 +486,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			if (ref) {
 				//TODO: multiselection
 				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
+					this.clearSelection( false );
 					this._addSelection(ref.ref, true );
 				}
 
@@ -638,7 +645,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 		if (sens == kbNav.first || sens == kbNav.last) {
 			let nline = sens == kbNav.first ? 0 : this._store.getRowCount() - 1;
-			this._clearSelection(false);
+			this.clearSelection(false);
 			this._addSelection(mkid(nline,0), true);
 			this._scrollToIndex(nline);
 			return true;
@@ -649,7 +656,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			let nline = sens == kbNav.next ? fline + 1 : fline - 1;
 			if (nline >= 0 && nline < this._store.getRowCount()) {
-				this._clearSelection(false);
+				this.clearSelection(false);
 				this._addSelection( mkid(nline,col), true);
 				this._scrollToIndex( nline );
 				return true;
@@ -670,7 +677,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 
 			if (nline != fline) {
-				this._clearSelection( false );
+				this.clearSelection( false );
 				this._addSelection(mkid(nline,col), true);
 
 				if (this._store.getRowCount() < SCROLL_LIMIT) {
@@ -686,7 +693,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			let ncol = sens == kbNav.right ? col+1 : col-1;
 			if (ncol >= 0 && ncol < this._columns.length ) {
-				this._clearSelection(false);
+				this.clearSelection(false);
 				this._addSelection( mkid(fline,ncol), true);
 
 				// fixed columns are always visible
@@ -1374,10 +1381,10 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		}
 	}
 	/**
-	 * 
+	 * no cell selected; notify: selectionChange is fired, its selection empty
 	 */
 
-	private _clearSelection(notify = true) {
+	clearSelection(notify = true) {
 		for (const ref of this._selection.keys()) {
 			const els = this.queryAll(`.cell[data-ref="${ref}"]`)
 			els.forEach(el => {
@@ -1433,7 +1440,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 	selectItem(row: number, col: number, append = false) {
 		if (!append) {
-			this._clearSelection(false);
+			this.clearSelection(false);
 		}
 
 		this._addSelection(mkid(row, col), true);
@@ -1745,7 +1752,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		}
 
 		if( this._selection.size!=1 || !this._selection.has(ref) ) {
-			this._clearSelection( false );
+			this.clearSelection( false );
 			this._addSelection( ref, true );
 		}
 

package/src/components/textedit/textedit.module.scss

@@ -59,6 +59,7 @@
 			@extend %flex;
 			outline: none;
 			margin: 0;
+			align-self: stretch;		// the height of the zone: its ground down to its line
 		}
 
 		.x4button {

package/src/components/textedit/textedit.ts

@@ -88,7 +88,10 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 
 	constructor( props: TextEditProps ) {
 		// dom_events are for the input (focus, blur, keydown...): not on the box too,
-		// where keydown would run a second time, and focus never (it does not bubble)
+		// where keydown would run a second time, and focus never (it does not bubble).
+		// They are set when the input is made, before the handlers of Input and of the class
+		// (the keys of an AutoComplete): they run first. To run after them, add a handler to
+		// getInput( ) once the component is made.
 		super( { ...props, dom_events: undefined } );
 
 		if( !props.inputId ) {