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

package/src/panel/balloon/balloonpanelview.js

@@ -7,7 +7,7 @@
  */
 import View from '../../view.js';
 import { getOptimalPosition, global, isRange, toUnit, isVisible, isText, ResizeObserver } from '@ckeditor/ckeditor5-utils';
-import { isElement } from 'lodash-es';
+import { isElement } from 'es-toolkit/compat';
 import '../../../theme/components/panel/balloonpanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
 // A static balloon panel positioning function that moves the balloon far off the viewport.
@@ -66,6 +66,21 @@ const POSITION_OFF_SCREEN = {
  * ```
  */
 class BalloonPanelView extends View {
+    /**
+     * A collection of the child views that creates the balloon panel contents.
+     */
+    content;
+    /**
+     * A callback that starts pinning the panel when {@link #isVisible} gets
+     * `true`. Used by {@link #pin}.
+     *
+     * @private
+     */
+    _pinWhenIsVisibleCallback;
+    /**
+     * An instance of resize observer used to detect if target element is still visible.
+     */
+    _resizeObserver;
     /**
      * @inheritDoc
      */
@@ -587,455 +602,455 @@ class BalloonPanelView extends View {
             return targetRect.bottom + heightOffset;
         }
     }
+    /**
+     * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
+     *
+     * ```
+     *		 ┌───────────────────────┐
+     *		 │                       │
+     *		 │         Balloon       │
+     *		 │         Content       │
+     *		 │                       │
+     *		 └──+    +───────────────┘
+     *		 |   \  /
+     *		 |    \/
+     *		>┼─────┼< ─────────────────────── side offset
+     *
+     * ```
+     *
+     * @default 25
+     */
+    static arrowSideOffset = 25;
+    /**
+     * 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
+    */
+    static 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                       │
+     *		└───────────────────────────────────────────────────────┘
+     * ```
+     *
+     * @default 20
+     */
+    static stickyVerticalOffset = 20;
+    /**
+     * Function used to calculate the optimal position for the balloon.
+     */
+    static _getOptimalPosition = getOptimalPosition;
+    /**
+     * A default set of positioning functions used by the balloon panel view
+     * when attaching using the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
+     *
+     * The available positioning functions are as follows:
+     *
+     * **North west**
+     *
+     * * `northWestArrowSouthWest`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		 V
+     *		 [ Target ]
+     * ```
+     *
+     * * `northWestArrowSouthMiddleWest`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		    V
+     *		    [ Target ]
+     * ```
+     *
+     * * `northWestArrowSouth`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		         V
+     *		         [ Target ]
+     * ```
+     *
+     * * `northWestArrowSouthMiddleEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		             V
+     *		             [ Target ]
+     * ```
+     *
+     * * `northWestArrowSouthEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		                 V
+     *		                 [ Target ]
+     * ```
+     *
+     * **North**
+     *
+     * * `northArrowSouthWest`
+     *
+     * ```
+     *		    +-----------------+
+     *		    |     Balloon     |
+     *		    +-----------------+
+     *		     V
+     *		[ Target ]
+     * ```
+     *
+     * * `northArrowSouthMiddleWest`
+     *
+     * ```
+     *		 +-----------------+
+     *		 |     Balloon     |
+     *		 +-----------------+
+     *		     V
+     *		[ Target ]
+     * ```
+     * * `northArrowSouth`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		         V
+     *		    [ Target ]
+     * ```
+     *
+     * * `northArrowSouthMiddleEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		             V
+     *		        [ Target ]
+     * ```
+     *
+     * * `northArrowSouthEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		                V
+     *		           [ Target ]
+     * ```
+     *
+     * **North east**
+     *
+     * * `northEastArrowSouthWest`
+     *
+     * ```
+     *		        +-----------------+
+     *		        |     Balloon     |
+     *		        +-----------------+
+     *		         V
+     *		[ Target ]
+     * ```
+     *
+     * * `northEastArrowSouthMiddleWest`
+     *
+     * ```
+     *		     +-----------------+
+     *		     |     Balloon     |
+     *		     +-----------------+
+     *		         V
+     *		[ Target ]
+     * ```
+     *
+     * * `northEastArrowSouth`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		         V
+     *		[ Target ]
+     * ```
+     *
+     * * `northEastArrowSouthMiddleEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		             V
+     *		    [ Target ]
+     * ```
+     *
+     * * `northEastArrowSouthEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     *		                 V
+     *		        [ Target ]
+     * ```
+     *
+     * **South**
+     *
+     * * `southArrowNorthWest`
+     *
+     * ```
+     *		[ Target ]
+     *		     ^
+     *		    +-----------------+
+     *		    |     Balloon     |
+     *		    +-----------------+
+     * ```
+     *
+     * * `southArrowNorthMiddleWest`
+     *
+     * ```
+     *		   [ Target ]
+     *		        ^
+     *		    +-----------------+
+     *		    |     Balloon     |
+     *		    +-----------------+
+     * ```
+     *
+     * * `southArrowNorth`
+     *
+     * ```
+     *		    [ Target ]
+     *		         ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southArrowNorthMiddleEast`
+     *
+     * ```
+     *		            [ Target ]
+     *		                 ^
+     *		   +-----------------+
+     *		   |     Balloon     |
+     *		   +-----------------+
+     * ```
+     *
+     * * `southArrowNorthEast`
+     *
+     * ```
+     *		            [ Target ]
+     *		                 ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * **South west**
+     *
+     * * `southWestArrowNorthWest`
+     *
+     *
+     * ```
+     *		 [ Target ]
+     *		 ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southWestArrowNorthMiddleWest`
+     *
+     * ```
+     *		     [ Target ]
+     *		     ^
+     *		 +-----------------+
+     *		 |     Balloon     |
+     *		 +-----------------+
+     * ```
+     *
+     * * `southWestArrowNorth`
+     *
+     * ```
+     *		         [ Target ]
+     *		         ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southWestArrowNorthMiddleEast`
+     *
+     * ```
+     *		              [ Target ]
+     *		              ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southWestArrowNorthEast`
+     *
+     * ```
+     *		                 [ Target ]
+     *		                 ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * **South east**
+     *
+     * * `southEastArrowNorthWest`
+     *
+     * ```
+     *		[ Target ]
+     *		         ^
+     *		        +-----------------+
+     *		        |     Balloon     |
+     *		        +-----------------+
+     * ```
+     *
+     * * `southEastArrowNorthMiddleWest`
+     *
+     * ```
+     *		   [ Target ]
+     *		            ^
+     *		        +-----------------+
+     *		        |     Balloon     |
+     *		        +-----------------+
+     * ```
+     *
+     * * `southEastArrowNorth`
+     *
+     * ```
+     *		[ Target ]
+     *		         ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southEastArrowNorthMiddleEast`
+     *
+     * ```
+     *		     [ Target ]
+     *		              ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * * `southEastArrowNorthEast`
+     *
+     * ```
+     *		        [ Target ]
+     *		                 ^
+     *		+-----------------+
+     *		|     Balloon     |
+     *		+-----------------+
+     * ```
+     *
+     * **West**
+     *
+     * * `westArrowEast`
+     *
+     * ```
+     *		+-----------------+
+     *		|     Balloon     |>[ Target ]
+     *		+-----------------+
+     * ```
+     *
+     * **East**
+     *
+     * * `eastArrowWest`
+     *
+     * ```
+     *		           +-----------------+
+     *		[ Target ]<|     Balloon     |
+     *		           +-----------------+
+     * ```
+     *
+     * **Sticky**
+     *
+     * * `viewportStickyNorth`
+     *
+     * ```
+     *		    +---------------------------+
+     *		    |        [ Target ]         |
+     *		    |                           |
+     *		+-----------------------------------+
+     *		|   |    +-----------------+    |   |
+     *		|   |    |     Balloon     |    |   |
+     *		|   |    +-----------------+    |   |
+     *		|   |                           |   |
+     *		|   |                           |   |
+     *		|   |                           |   |
+     *		|   |                           |   |
+     *		|   +---------------------------+   |
+     *		|             Viewport              |
+     *		+-----------------------------------+
+     * ```
+     *
+     * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
+     *
+     * Positioning functions must be compatible with {@link module:utils/dom/position~DomPoint}.
+     *
+     * Default positioning functions with customized offsets can be generated using
+     * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.generatePositions}.
+     *
+     * The name that the position function returns will be reflected in the balloon panel's class that
+     * controls the placement of the "arrow". See {@link #position} to learn more.
+     */
+    static defaultPositions = /* #__PURE__ */ BalloonPanelView.generatePositions();
 }
-/**
- * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
- *
- * ```
- *		 ┌───────────────────────┐
- *		 │                       │
- *		 │         Balloon       │
- *		 │         Content       │
- *		 │                       │
- *		 └──+    +───────────────┘
- *		 |   \  /
- *		 |    \/
- *		>┼─────┼< ─────────────────────── side offset
- *
- * ```
- *
- * @default 25
- */
-BalloonPanelView.arrowSideOffset = 25;
-/**
- * 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
-*/
-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                       │
- *		└───────────────────────────────────────────────────────┘
- * ```
- *
- * @default 20
- */
-BalloonPanelView.stickyVerticalOffset = 20;
-/**
- * Function used to calculate the optimal position for the balloon.
- */
-BalloonPanelView._getOptimalPosition = getOptimalPosition;
-/**
- * A default set of positioning functions used by the balloon panel view
- * when attaching using the {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo} method.
- *
- * The available positioning functions are as follows:
- *
- * **North west**
- *
- * * `northWestArrowSouthWest`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		 V
- *		 [ Target ]
- * ```
- *
- * * `northWestArrowSouthMiddleWest`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		    V
- *		    [ Target ]
- * ```
- *
- * * `northWestArrowSouth`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		         V
- *		         [ Target ]
- * ```
- *
- * * `northWestArrowSouthMiddleEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		             V
- *		             [ Target ]
- * ```
- *
- * * `northWestArrowSouthEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		                 V
- *		                 [ Target ]
- * ```
- *
- * **North**
- *
- * * `northArrowSouthWest`
- *
- * ```
- *		    +-----------------+
- *		    |     Balloon     |
- *		    +-----------------+
- *		     V
- *		[ Target ]
- * ```
- *
- * * `northArrowSouthMiddleWest`
- *
- * ```
- *		 +-----------------+
- *		 |     Balloon     |
- *		 +-----------------+
- *		     V
- *		[ Target ]
- * ```
- * * `northArrowSouth`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		         V
- *		    [ Target ]
- * ```
- *
- * * `northArrowSouthMiddleEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		             V
- *		        [ Target ]
- * ```
- *
- * * `northArrowSouthEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		                V
- *		           [ Target ]
- * ```
- *
- * **North east**
- *
- * * `northEastArrowSouthWest`
- *
- * ```
- *		        +-----------------+
- *		        |     Balloon     |
- *		        +-----------------+
- *		         V
- *		[ Target ]
- * ```
- *
- * * `northEastArrowSouthMiddleWest`
- *
- * ```
- *		     +-----------------+
- *		     |     Balloon     |
- *		     +-----------------+
- *		         V
- *		[ Target ]
- * ```
- *
- * * `northEastArrowSouth`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		         V
- *		[ Target ]
- * ```
- *
- * * `northEastArrowSouthMiddleEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		             V
- *		    [ Target ]
- * ```
- *
- * * `northEastArrowSouthEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- *		                 V
- *		        [ Target ]
- * ```
- *
- * **South**
- *
- * * `southArrowNorthWest`
- *
- * ```
- *		[ Target ]
- *		     ^
- *		    +-----------------+
- *		    |     Balloon     |
- *		    +-----------------+
- * ```
- *
- * * `southArrowNorthMiddleWest`
- *
- * ```
- *		   [ Target ]
- *		        ^
- *		    +-----------------+
- *		    |     Balloon     |
- *		    +-----------------+
- * ```
- *
- * * `southArrowNorth`
- *
- * ```
- *		    [ Target ]
- *		         ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southArrowNorthMiddleEast`
- *
- * ```
- *		            [ Target ]
- *		                 ^
- *		   +-----------------+
- *		   |     Balloon     |
- *		   +-----------------+
- * ```
- *
- * * `southArrowNorthEast`
- *
- * ```
- *		            [ Target ]
- *		                 ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * **South west**
- *
- * * `southWestArrowNorthWest`
- *
- *
- * ```
- *		 [ Target ]
- *		 ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southWestArrowNorthMiddleWest`
- *
- * ```
- *		     [ Target ]
- *		     ^
- *		 +-----------------+
- *		 |     Balloon     |
- *		 +-----------------+
- * ```
- *
- * * `southWestArrowNorth`
- *
- * ```
- *		         [ Target ]
- *		         ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southWestArrowNorthMiddleEast`
- *
- * ```
- *		              [ Target ]
- *		              ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southWestArrowNorthEast`
- *
- * ```
- *		                 [ Target ]
- *		                 ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * **South east**
- *
- * * `southEastArrowNorthWest`
- *
- * ```
- *		[ Target ]
- *		         ^
- *		        +-----------------+
- *		        |     Balloon     |
- *		        +-----------------+
- * ```
- *
- * * `southEastArrowNorthMiddleWest`
- *
- * ```
- *		   [ Target ]
- *		            ^
- *		        +-----------------+
- *		        |     Balloon     |
- *		        +-----------------+
- * ```
- *
- * * `southEastArrowNorth`
- *
- * ```
- *		[ Target ]
- *		         ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southEastArrowNorthMiddleEast`
- *
- * ```
- *		     [ Target ]
- *		              ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * * `southEastArrowNorthEast`
- *
- * ```
- *		        [ Target ]
- *		                 ^
- *		+-----------------+
- *		|     Balloon     |
- *		+-----------------+
- * ```
- *
- * **West**
- *
- * * `westArrowEast`
- *
- * ```
- *		+-----------------+
- *		|     Balloon     |>[ Target ]
- *		+-----------------+
- * ```
- *
- * **East**
- *
- * * `eastArrowWest`
- *
- * ```
- *		           +-----------------+
- *		[ Target ]<|     Balloon     |
- *		           +-----------------+
- * ```
- *
- * **Sticky**
- *
- * * `viewportStickyNorth`
- *
- * ```
- *		    +---------------------------+
- *		    |        [ Target ]         |
- *		    |                           |
- *		+-----------------------------------+
- *		|   |    +-----------------+    |   |
- *		|   |    |     Balloon     |    |   |
- *		|   |    +-----------------+    |   |
- *		|   |                           |   |
- *		|   |                           |   |
- *		|   |                           |   |
- *		|   |                           |   |
- *		|   +---------------------------+   |
- *		|             Viewport              |
- *		+-----------------------------------+
- * ```
- *
- * See {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#attachTo}.
- *
- * Positioning functions must be compatible with {@link module:utils/dom/position~DomPoint}.
- *
- * Default positioning functions with customized offsets can be generated using
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.generatePositions}.
- *
- * The name that the position function returns will be reflected in the balloon panel's class that
- * controls the placement of the "arrow". See {@link #position} to learn more.
- */
-BalloonPanelView.defaultPositions = BalloonPanelView.generatePositions();
 export default BalloonPanelView;
 /**
  * Returns the DOM element for given object or null, if there is none,