@ckeditor/ckeditor5-ui 35.0.1 → 35.2.0

package/src/dropdown/button/dropdownbuttonview.js

@@ -49,7 +49,8 @@ export default class DropdownButtonView extends ButtonView {
 
 		this.extendTemplate( {
 			attributes: {
-				'aria-haspopup': true
+				'aria-haspopup': true,
+				'aria-expanded': this.bindTemplate.to( 'isOn', value => String( value ) )
 			}
 		} );
 

package/src/dropdown/button/splitbuttonview.js

@@ -222,7 +222,10 @@ export default class SplitButtonView extends View {
 
 		arrowView.extendTemplate( {
 			attributes: {
-				class: 'ck-splitbutton__arrow',
+				class: [
+					'ck-splitbutton__arrow'
+				],
+				'data-cke-tooltip-disabled': bind.to( 'isOn' ),
 				'aria-haspopup': true,
 				'aria-expanded': bind.to( 'isOn', value => String( value ) )
 			}

package/src/dropdown/dropdownview.js

@@ -9,6 +9,7 @@
 
 import View from '../view';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import { FocusTracker } from '@ckeditor/ckeditor5-utils';
 
 import '../../theme/components/dropdown/dropdown.css';
 
@@ -170,6 +171,14 @@ export default class DropdownView extends View {
 		 */
 		this.keystrokes = new KeystrokeHandler();
 
+		/**
+		 * Tracks information about the DOM focus in the dropdown.
+		 *
+		 * @readonly
+		 * @member {module:utils/focustracker~FocusTracker}
+		 */
+		this.focusTracker = new FocusTracker();
+
 		this.setTemplate( {
 			tag: 'div',
 
@@ -194,7 +203,8 @@ export default class DropdownView extends View {
 			attributes: {
 				class: [
 					'ck-dropdown__button'
-				]
+				],
+				'data-cke-tooltip-disabled': bind.to( 'isOpen' )
 			}
 		} );
 
@@ -240,6 +250,9 @@ export default class DropdownView extends View {
 	render() {
 		super.render();
 
+		this.focusTracker.add( this.buttonView.element );
+		this.focusTracker.add( this.panelView.element );
+
 		// Toggle the dropdown when its button has been clicked.
 		this.listenTo( this.buttonView, 'open', () => {
 			this.isOpen = !this.isOpen;
@@ -250,11 +263,8 @@ export default class DropdownView extends View {
 
 		// Let the dropdown control the position of the panel. The position must
 		// be updated every time the dropdown is open.
-		this.on( 'change:isOpen', () => {
-			if ( !this.isOpen ) {
-				// If the dropdown was closed, move the focus back to the button (#12125).
-				this.focus();
-
+		this.on( 'change:isOpen', ( evt, name, isOpen ) => {
+			if ( !isOpen ) {
 				return;
 			}
 
@@ -270,9 +280,6 @@ export default class DropdownView extends View {
 			} else {
 				this.panelView.position = this.panelPosition;
 			}
-
-			// Focus the first item in the dropdown when the dropdown opened
-			this.panelView.focus();
 		} );
 
 		// Listen for keystrokes coming from within #element.

package/src/dropdown/utils.js

@@ -19,7 +19,7 @@ import SwitchButtonView from '../button/switchbuttonview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
-import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { global, priorities, logWarning } from '@ckeditor/ckeditor5-utils';
 
 import '../../theme/components/dropdown/toolbardropdown.css';
 import '../../theme/components/dropdown/listdropdown.css';
@@ -288,22 +288,28 @@ export function focusChildOnDropdownOpen( dropdownView, childSelectorCallback )
 			 */
 			logWarning( 'ui-dropdown-focus-child-on-open-child-missing-focus', { view: childToFocus } );
 		}
-	}, { priority: 'low' } );
+
+	// * Let the panel show up first (do not focus an invisible element).
+	// * Execute after focusDropdownPanelOnOpen(). See focusDropdownPanelOnOpen() to learn more.
+	}, { priority: priorities.low - 10 } );
 }
 
 // Add a set of default behaviors to dropdown view.
 //
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
 function addDefaultBehavior( dropdownView ) {
-	closeDropdownOnBlur( dropdownView );
+	closeDropdownOnClickOutside( dropdownView );
 	closeDropdownOnExecute( dropdownView );
+	closeDropdownOnBlur( dropdownView );
 	focusDropdownContentsOnArrows( dropdownView );
+	focusDropdownButtonOnClose( dropdownView );
+	focusDropdownPanelOnOpen( dropdownView );
 }
 
 // Adds a behavior to a dropdownView that closes opened dropdown when user clicks outside the dropdown.
 //
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
-function closeDropdownOnBlur( dropdownView ) {
+function closeDropdownOnClickOutside( dropdownView ) {
 	dropdownView.on( 'render', () => {
 		clickOutsideHandler( {
 			emitter: dropdownView,
@@ -331,6 +337,17 @@ function closeDropdownOnExecute( dropdownView ) {
 	} );
 }
 
+// Adds a behavior to a dropdown view that closes opened dropdown when it loses focus.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function closeDropdownOnBlur( dropdownView ) {
+	dropdownView.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
+		if ( dropdownView.isOpen && !isFocused ) {
+			dropdownView.isOpen = false;
+		}
+	} );
+}
+
 // Adds a behavior to a dropdownView that focuses the dropdown's panel view contents on keystrokes.
 //
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
@@ -352,6 +369,43 @@ function focusDropdownContentsOnArrows( dropdownView ) {
 	} );
 }
 
+// Adds a behavior that focuses the #buttonView when the dropdown was closed but focus was within the #panelView element.
+// This makes sure the focus is never lost.
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function focusDropdownButtonOnClose( dropdownView ) {
+	dropdownView.on( 'change:isOpen', ( evt, name, isOpen ) => {
+		if ( isOpen ) {
+			return;
+		}
+
+		// If the dropdown was closed, move the focus back to the button (#12125).
+		// Don't touch the focus, if it moved somewhere else (e.g. moved to the editing root on #execute) (#12178).
+		// Note: Don't use the state of the DropdownView#focusTracker here. It fires #blur with the timeout.
+		if ( dropdownView.panelView.element.contains( global.document.activeElement ) ) {
+			dropdownView.buttonView.focus();
+		}
+	} );
+}
+
+// Adds a behavior that focuses the #panelView when dropdown gets open (accessibility).
+//
+// @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
+function focusDropdownPanelOnOpen( dropdownView ) {
+	dropdownView.on( 'change:isOpen', ( evt, name, isOpen ) => {
+		if ( !isOpen ) {
+			return;
+		}
+
+		// Focus the first item in the dropdown when the dropdown opened.
+		dropdownView.panelView.focus();
+
+	// * Let the panel show up first (do not focus an invisible element).
+	// * Also, execute before focusChildOnDropdownOpen() to make sure this helper does not break the
+	//   focus of a specific child by kicking in too late and resetting the focus in the panel.
+	}, { priority: 'low' } );
+}
+
 /**
  * A definition of the list item used by the {@link module:ui/dropdown/utils~addListToDropdown}
  * utility.

package/src/icon/iconview.js

@@ -103,7 +103,9 @@ export default class IconView extends View {
 				this.viewBox = viewBox;
 			}
 
-			this.element.innerHTML = '';
+			while ( this.element.firstChild ) {
+				this.element.removeChild( this.element.firstChild );
+			}
 
 			while ( svg.childNodes.length > 0 ) {
 				this.element.appendChild( svg.childNodes[ 0 ] );

package/src/index.js

@@ -10,6 +10,7 @@
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler';
 export { default as submitHandler } from './bindings/submithandler';
+export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 
 export { default as BodyCollection } from './editorui/bodycollection';
 
@@ -52,12 +53,11 @@ export { default as BalloonPanelView } from './panel/balloon/balloonpanelview';
 export { default as ContextualBalloon } from './panel/balloon/contextualballoon';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview';
 
-export { default as TooltipView } from './tooltip/tooltipview';
+export { default as TooltipManager } from './tooltipmanager';
 export { default as Template } from './template';
 
 export { default as ToolbarView } from './toolbar/toolbarview';
 export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
-export { default as enableToolbarKeyboardFocus } from './toolbar/enabletoolbarkeyboardfocus';
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig';
 export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar';

package/src/list/listitemview.js

@@ -21,6 +21,18 @@ export default class ListItemView extends View {
 	constructor( locale ) {
 		super( locale );
 
+		const bind = this.bindTemplate;
+
+		/**
+		 * Controls whether the item view is visible. Visible by default, list items are hidden
+		 * using a CSS class.
+		 *
+		 * @observable
+		 * @default true
+		 * @member {Boolean} #isVisible
+		 */
+		this.set( 'isVisible', true );
+
 		/**
 		 * Collection of the child views inside of the list item {@link #element}.
 		 *
@@ -35,7 +47,8 @@ export default class ListItemView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-list__item'
+					'ck-list__item',
+					bind.if( 'isVisible', 'ck-hidden', value => !value )
 				]
 			},
 

package/src/panel/balloon/balloonpanelview.js

@@ -392,60 +392,74 @@ function getDomElement( object ) {
 }
 
 /**
- * A horizontal offset of the arrow tip from the edge of the balloon. Controlled by CSS.
- *
- *		 +-----|---------...
- *		 |     |
- *		 |     |
- *		 |     |
- *		 |     |
- *		 +--+  |  +------...
- *		     \ | /
- *		      \|/
- *	    >|-----|<---------------- horizontal offset
+ * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
+ *
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         Balloon       │
+ *		 │         Content       │
+ *		 │                       │
+ *		 └──+    +───────────────┘
+ *		 |   \  /
+ *		 |    \/
+ *		>┼─────┼< ─────────────────────── side offset
+ *
  *
  * @default 25
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset
  */
-BalloonPanelView.arrowHorizontalOffset = 25;
+BalloonPanelView.arrowSideOffset = 25;
 
 /**
- * A vertical offset of the arrow from the edge of the balloon. Controlled by CSS.
- *
- *		 +-------------...
- *		 |
- *		 |
- *		 |                      /-- vertical offset
- *		 |                     V
- *		 +--+    +-----...    ---------
- *		     \  /              |
- *		      \/               |
- *		-------------------------------
- *		                       ^
+ * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
+ *
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         Balloon       │
+ *		 │         Content       │      ╱-- arrow height offset
+ *		 │                       │      V
+ *		 └──+    +───────────────┘ --- ─┼───────
+ *		     \  /                       │
+ *		      \/                        │
+ *		────────────────────────────────┼───────
+ *		                                ^
+ *
+ *
+ *		>┼────┼<  arrow height offset
+ *		 │    │
+ *		 │    ┌────────────────────────┐
+ *		 │    │                        │
+ *		 │   ╱                         │
+ *		 │ ╱            Balloon        │
+ *		 │ ╲            Content        │
+ *		 │   ╲                         │
+ *		 │    │                        │
+ *		 │    └────────────────────────┘
+ *
  *
  * @default 10
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset
  */
-BalloonPanelView.arrowVerticalOffset = 10;
+BalloonPanelView.arrowHeightOffset = 10;
 
 /**
  * A vertical offset of the balloon panel from the edge of the viewport if sticky.
  * It helps in accessing toolbar buttons underneath the balloon panel.
  *
- *		  +---------------------------------------------------+
- *		  |                      Target                       |
- *		  |                                                   |
- *		  |                            /-- vertical offset    |
- *		+-----------------------------V-------------------------+
- *		| Toolbar            +-------------+                    |
- *		+--------------------|   Balloon   |--------------------+
- *		| |                  +-------------+                  | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| +---------------------------------------------------+ |
- *		|                        Viewport                       |
- *		+-------------------------------------------------------+
+ *		  ┌───────────────────────────────────────────────────┐
+ *		  │                      Target                       │
+ *		  │                                                   │
+ *		  │                            /── vertical offset    │
+ *		┌─────────────────────────────V─────────────────────────┐
+ *		│ Toolbar            ┌─────────────┐                    │
+ *		├────────────────────│   Balloon   │────────────────────┤
+ *		│ │                  └─────────────┘                  │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ └───────────────────────────────────────────────────┘ │
+ *		│                        Viewport                       │
+ *		└───────────────────────────────────────────────────────┘
  *
  * @default 20
  * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset
@@ -697,7 +711,7 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		        +-----------------+
  *		        |     Balloon     |
  *		        +-----------------+
-* * `southEastArrowNorthMiddleWest`
+ * * `southEastArrowNorthMiddleWest`
  *
  *		   [ Target ]
  *		            ^
@@ -729,6 +743,28 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		|     Balloon     |
  *		+-----------------+
  *
+ *
+ *
+ * **West**
+ *
+ * * `westArrowEast`
+ *
+ *		+-----------------+
+ *		|     Balloon     |>[ Target ]
+ *		+-----------------+
+ *
+ * **East**
+ *
+ * * `eastArrowWest`
+ *
+ *		           +-----------------+
+ *		[ Target ]<|     Balloon     |
+ *		           +-----------------+
+ *
+ *
+ *
+ * **Sticky**
+ *
  * * `viewportStickyNorth`
  *
  *		    +---------------------------+
@@ -768,11 +804,11 @@ BalloonPanelView.defaultPositions = generatePositions();
  * @protected
  * @param {Object} [options] Options to generate positions. If not specified, this helper will simply return
  * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
- * @param {Number} [options.horizontalOffset] A custom horizontal offset (in pixels) of each position. If
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset the default value}
+ * @param {Number} [options.sideOffset] A custom side offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset the default value}
  * will be used.
- * @param {Number} [options.verticalOffset] A custom vertical offset (in pixels) of each position. If
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset the default value}
+ * @param {Number} [options.heightOffset] A custom height offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset the default value}
  * will be used.
  * @param {Number} [options.stickyVerticalOffset] A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
  * If not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset the default value}
@@ -783,8 +819,8 @@ BalloonPanelView.defaultPositions = generatePositions();
  * @returns {Object.<String,module:utils/dom/position~PositioningFunction>}
  */
 export function generatePositions( {
-	horizontalOffset = BalloonPanelView.arrowHorizontalOffset,
-	verticalOffset = BalloonPanelView.arrowVerticalOffset,
+	sideOffset = BalloonPanelView.arrowSideOffset,
+	heightOffset = BalloonPanelView.arrowHeightOffset,
 	stickyVerticalOffset = BalloonPanelView.stickyVerticalOffset,
 	config
 } = {} ) {
@@ -793,14 +829,14 @@ export function generatePositions( {
 
 		northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northWestArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -814,14 +850,14 @@ export function generatePositions( {
 
 		northWestArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -830,14 +866,14 @@ export function generatePositions( {
 
 		northArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -851,14 +887,14 @@ export function generatePositions( {
 
 		northArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -867,14 +903,14 @@ export function generatePositions( {
 
 		northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northEastArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -888,14 +924,14 @@ export function generatePositions( {
 
 		northEastArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -904,14 +940,14 @@ export function generatePositions( {
 
 		southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southWestArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -925,14 +961,14 @@ export function generatePositions( {
 
 		southWestArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
@@ -941,14 +977,14 @@ export function generatePositions( {
 
 		southArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -962,14 +998,14 @@ export function generatePositions( {
 
 		southArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
@@ -978,14 +1014,14 @@ export function generatePositions( {
 
 		southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southEastArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -999,18 +1035,36 @@ export function generatePositions( {
 
 		southEastArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
 
+		// ------- West
+
+		westArrowEast: ( targetRect, balloonRect ) => ( {
+			top: targetRect.top + targetRect.height / 2 - balloonRect.height / 2,
+			left: targetRect.left - balloonRect.width - heightOffset,
+			name: 'arrow_e',
+			...( config && { config } )
+		} ),
+
+		// ------- East
+
+		eastArrowWest: ( targetRect, balloonRect ) => ( {
+			top: targetRect.top + targetRect.height / 2 - balloonRect.height / 2,
+			left: targetRect.right + heightOffset,
+			name: 'arrow_w',
+			...( config && { config } )
+		} ),
+
 		// ------- Sticky
 
 		viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
@@ -1037,7 +1091,7 @@ export function generatePositions( {
 	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
 	// @returns {Number}
 	function getNorthTop( targetRect, balloonRect ) {
-		return targetRect.top - balloonRect.height - verticalOffset;
+		return targetRect.top - balloonRect.height - heightOffset;
 	}
 
 	// Returns the top coordinate for positions starting with `south*`.
@@ -1047,6 +1101,6 @@ export function generatePositions( {
 	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
 	// @returns {Number}
 	function getSouthTop( targetRect ) {
-		return targetRect.bottom + verticalOffset;
+		return targetRect.bottom + heightOffset;
 	}
 }